@webority/mobile-ui 0.0.39 → 0.1.0

package/lib/module/components/Tour/Tour.js

@@ -1,338 +1 @@
-"use strict";
-
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { AccessibilityInfo, Animated, StyleSheet, Text, useWindowDimensions, View } from 'react-native';
-import { createAnimatedValue, useTheme } from "../../theme/index.js";
-import { smoothCorners } from "../../utils/corners.js";
-import { Button } from "../Button/index.js";
-import { Modal } from "../Modal/index.js";
-
-/**
- * Where the app remembers that a person has seen a tour: one record per tour
- * id for the signed-in person, so one server record can serve the web tour too.
- */
-
-/**
- * - `finished`: the person stepped past the last step. Marked seen.
- * - `skipped`: Skip, or Android back. Marked seen.
- * - `alreadySeen`: the seen store says this tour was seen, so nothing showed.
- * - `noTargets`: no step's view was on screen, so nothing showed. Not marked seen.
- */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const DEFAULT_GAP = 8;
-const DEFAULT_SCREEN_PADDING = 8;
-const MAX_CARD_WIDTH = 360;
-const HIGHLIGHT_BORDER_WIDTH = 2;
-const measureInWindow = target => new Promise(resolve => {
-  const node = target.current;
-  if (!node) {
-    resolve(null);
-    return;
-  }
-  node.measureInWindow((x, y, width, height) => resolve({
-    x,
-    y,
-    width,
-    height
-  }));
-});
-const isOnScreen = (rect, screen) => rect.width > 0 && rect.height > 0 && rect.x < screen.width && rect.y < screen.height && rect.x + rect.width > 0 && rect.y + rect.height > 0;
-
-/**
- * Walks through product steps one highlighted view at a time: the screen is
- * dimmed except around the step's view, with a card holding the step text and
- * Back, Next and Skip. Built on `Modal`; the card sits on the side of the view
- * with more room, as `Tooltip` places its bubble, using the same tooltip gap and
- * screen-padding tokens. Motion comes from `theme.motion`, which collapses under
- * the OS Reduce Motion setting.
- */
-const Tour = ({
-  tourId,
-  steps,
-  visible,
-  onClose,
-  seenStore,
-  labels,
-  haptic,
-  testID
-}) => {
-  const theme = useTheme();
-  const styles = useMemo(() => buildStyles(theme), [theme]);
-  const screen = useWindowDimensions();
-  const screenRef = useRef(screen);
-  screenRef.current = screen;
-  const gap = theme.components.tooltip?.gap ?? DEFAULT_GAP;
-  const screenPadding = theme.components.tooltip?.screenPadding ?? DEFAULT_SCREEN_PADDING;
-  const [current, setCurrent] = useState(null);
-  const [firstIndex, setFirstIndex] = useState(0);
-  const cardOpacity = useRef(createAnimatedValue(0)).current;
-  const stepsRef = useRef(steps);
-  stepsRef.current = steps;
-  const onCloseRef = useRef(onClose);
-  onCloseRef.current = onClose;
-  // Read through a ref so an inline store object does not restart a running tour.
-  const seenStoreRef = useRef(seenStore);
-  seenStoreRef.current = seenStore;
-  const locate = useCallback(async (from, direction) => {
-    for (let index = from; index >= 0 && index < stepsRef.current.length; index += direction) {
-      const rect = await measureInWindow(stepsRef.current[index].target);
-      if (rect && isOnScreen(rect, screenRef.current)) {
-        return {
-          index,
-          rect
-        };
-      }
-    }
-    return null;
-  }, []);
-  useEffect(() => {
-    if (!visible) {
-      setCurrent(null);
-      return;
-    }
-    let cancelled = false;
-    const start = async () => {
-      const store = seenStoreRef.current;
-      if (store && (await store.isSeen(tourId))) {
-        if (!cancelled) {
-          onCloseRef.current('alreadySeen');
-        }
-        return;
-      }
-      const first = await locate(0, 1);
-      if (cancelled) {
-        return;
-      }
-      if (!first) {
-        onCloseRef.current('noTargets');
-        return;
-      }
-      setFirstIndex(first.index);
-      setCurrent(first);
-    };
-    void start();
-    return () => {
-      cancelled = true;
-    };
-  }, [visible, tourId, locate]);
-  useEffect(() => {
-    if (!current) {
-      return;
-    }
-    const step = stepsRef.current[current.index];
-    const position = `Step ${current.index + 1} of ${stepsRef.current.length}`;
-    AccessibilityInfo.announceForAccessibility([position, step.title, step.description].filter(Boolean).join('. '));
-    cardOpacity.setValue(0);
-    const fade = Animated.timing(cardOpacity, {
-      toValue: 1,
-      duration: theme.motion.duration.fast,
-      useNativeDriver: true
-    });
-    fade.start();
-    return () => fade.stop();
-  }, [current, cardOpacity, theme.motion.duration.fast]);
-  const close = useCallback(async reason => {
-    setCurrent(null);
-    await seenStoreRef.current?.markSeen(tourId);
-    onCloseRef.current(reason);
-  }, [tourId]);
-  const handleNext = useCallback(async () => {
-    if (!current) {
-      return;
-    }
-    const next = await locate(current.index + 1, 1);
-    if (next) {
-      setCurrent(next);
-      return;
-    }
-    await close('finished');
-  }, [current, locate, close]);
-  const handleBack = useCallback(async () => {
-    if (!current) {
-      return;
-    }
-    const previous = await locate(current.index - 1, -1);
-    if (previous) {
-      setCurrent(previous);
-    }
-  }, [current, locate]);
-  const handleSkip = useCallback(() => {
-    void close('skipped');
-  }, [close]);
-  const step = current ? steps[current.index] : undefined;
-  const isLast = current ? current.index === steps.length - 1 : false;
-  const pad = theme.spacing.xs;
-  const hole = current ? {
-    x: current.rect.x - pad,
-    y: current.rect.y - pad,
-    width: current.rect.width + pad * 2,
-    height: current.rect.height + pad * 2
-  } : null;
-  const cardWidth = Math.min(screen.width - screenPadding * 2, MAX_CARD_WIDTH);
-  const cardPosition = hole ? (() => {
-    const centreX = hole.x + hole.width / 2;
-    const left = Math.max(screenPadding, Math.min(centreX - cardWidth / 2, screen.width - cardWidth - screenPadding));
-    const roomAbove = hole.y;
-    const roomBelow = screen.height - (hole.y + hole.height);
-    return roomBelow >= roomAbove ? {
-      left,
-      top: hole.y + hole.height + gap,
-      maxHeight: Math.max(roomBelow - gap - screenPadding, 0)
-    } : {
-      left,
-      bottom: screen.height - hole.y + gap,
-      maxHeight: Math.max(roomAbove - gap - screenPadding, 0)
-    };
-  })() : null;
-  const dim = theme.colors.background.overlay;
-  return /*#__PURE__*/_jsx(Modal, {
-    visible: current !== null,
-    onRequestClose: handleSkip,
-    presentation: "fullScreen",
-    backdropPressClose: false,
-    backdropStyle: styles.transparent,
-    contentStyle: styles.transparent,
-    accessibilityLabel: step?.title ?? step?.description,
-    haptic: haptic,
-    testID: testID,
-    children: hole && cardPosition && step ? /*#__PURE__*/_jsxs(View, {
-      style: StyleSheet.absoluteFill,
-      children: [/*#__PURE__*/_jsx(View, {
-        style: [styles.dim, {
-          backgroundColor: dim,
-          top: 0,
-          left: 0,
-          right: 0,
-          height: Math.max(hole.y, 0)
-        }]
-      }), /*#__PURE__*/_jsx(View, {
-        style: [styles.dim, {
-          backgroundColor: dim,
-          top: hole.y + hole.height,
-          left: 0,
-          right: 0,
-          bottom: 0
-        }]
-      }), /*#__PURE__*/_jsx(View, {
-        style: [styles.dim, {
-          backgroundColor: dim,
-          top: hole.y,
-          left: 0,
-          width: Math.max(hole.x, 0),
-          height: hole.height
-        }]
-      }), /*#__PURE__*/_jsx(View, {
-        style: [styles.dim, {
-          backgroundColor: dim,
-          top: hole.y,
-          left: hole.x + hole.width,
-          right: 0,
-          height: hole.height
-        }]
-      }), /*#__PURE__*/_jsx(View, {
-        pointerEvents: "none",
-        style: [styles.highlight, {
-          top: hole.y,
-          left: hole.x,
-          width: hole.width,
-          height: hole.height
-        }]
-      }), /*#__PURE__*/_jsxs(Animated.View, {
-        accessibilityLiveRegion: "polite",
-        style: [styles.card, cardPosition, {
-          width: cardWidth,
-          opacity: cardOpacity
-        }],
-        testID: testID ? `${testID}-card` : undefined,
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: styles.position,
-          children: `Step ${(current?.index ?? 0) + 1} of ${steps.length}`
-        }), step.title ? /*#__PURE__*/_jsx(Text, {
-          style: styles.title,
-          accessibilityRole: "header",
-          children: step.title
-        }) : null, /*#__PURE__*/_jsx(Text, {
-          style: styles.description,
-          children: step.description
-        }), /*#__PURE__*/_jsxs(View, {
-          style: styles.actions,
-          children: [/*#__PURE__*/_jsx(Button, {
-            title: labels?.skip ?? 'Skip',
-            variant: "ghost",
-            size: "sm",
-            haptic: haptic,
-            onPress: handleSkip,
-            testID: testID ? `${testID}-skip` : undefined
-          }), /*#__PURE__*/_jsxs(View, {
-            style: styles.navigation,
-            children: [current && current.index > firstIndex ? /*#__PURE__*/_jsx(Button, {
-              title: labels?.back ?? 'Back',
-              variant: "outline",
-              size: "sm",
-              haptic: haptic,
-              onPress: () => void handleBack(),
-              testID: testID ? `${testID}-back` : undefined
-            }) : null, /*#__PURE__*/_jsx(Button, {
-              title: isLast ? labels?.done ?? 'Done' : labels?.next ?? 'Next',
-              size: "sm",
-              haptic: haptic,
-              onPress: () => void handleNext(),
-              testID: testID ? `${testID}-next` : undefined
-            })]
-          })]
-        })]
-      })]
-    }) : null
-  });
-};
-Tour.displayName = 'Tour';
-const buildStyles = theme => StyleSheet.create({
-  transparent: {
-    backgroundColor: 'transparent'
-  },
-  dim: {
-    position: 'absolute'
-  },
-  highlight: {
-    position: 'absolute',
-    borderWidth: HIGHLIGHT_BORDER_WIDTH,
-    borderColor: theme.colors.primary,
-    borderRadius: theme.radius.md,
-    ...smoothCorners
-  },
-  card: {
-    position: 'absolute',
-    backgroundColor: theme.colors.background.elevated,
-    borderRadius: theme.radius.lg,
-    ...smoothCorners,
-    padding: theme.spacing.lg,
-    gap: theme.spacing.sm,
-    ...theme.shadows.lg
-  },
-  position: {
-    color: theme.colors.text.tertiary,
-    fontSize: theme.typography.fontSize.xs
-  },
-  title: {
-    color: theme.colors.text.primary,
-    fontSize: theme.typography.fontSize.lg,
-    fontWeight: theme.typography.fontWeight.semibold
-  },
-  description: {
-    color: theme.colors.text.secondary,
-    fontSize: theme.typography.fontSize.sm
-  },
-  actions: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    marginTop: theme.spacing.xs
-  },
-  navigation: {
-    flexDirection: 'row',
-    gap: theme.spacing.sm
-  }
-});
-export { Tour };
-export default Tour;
-//# sourceMappingURL=Tour.js.map
+import{useCallback as t,useEffect as e,useMemo as i,useRef as o,useState as n}from"react";import{AccessibilityInfo as r,Animated as s,StyleSheet as a,Text as l,useWindowDimensions as c,View as h}from"react-native";import{createAnimatedValue as d,useTheme as p}from"../../theme/index.js";import{smoothCorners as u}from"../../utils/corners.js";import{Button as g}from"../Button/index.js";import{Modal as y}from"../Modal/index.js";import{jsx as m,jsxs as x}from"react/jsx-runtime";const measureInWindow=t=>new Promise(e=>{const i=t.current;i?i.measureInWindow((t,i,o,n)=>e({x:t,y:i,width:o,height:n})):e(null)}),isOnScreen=(t,e)=>t.width>0&&t.height>0&&t.x<e.width&&t.y<e.height&&t.x+t.width>0&&t.y+t.height>0,Tour=({tourId:u,steps:f,visible:b,onClose:w,seenStore:v,labels:k,haptic:S,testID:C})=>{const D=p(),j=i(()=>buildStyles(D),[D]),z=c(),I=o(z);I.current=z;const M=D.components.tooltip?.gap??8,$=D.components.tooltip?.screenPadding??8,[P,R]=n(null),[W,B]=n(0),N=o(d(0)).current,T=o(f);T.current=f;const V=o(w);V.current=w;const F=o(v);F.current=v;const H=t(async(t,e)=>{for(let i=t;i>=0&&i<T.current.length;i+=e){const t=await measureInWindow(T.current[i].target);if(t&&isOnScreen(t,I.current))return{index:i,rect:t}}return null},[]);e(()=>{if(!b)return void R(null);let t=!1;return(async()=>{const e=F.current;if(e&&await e.isSeen(u))return void(t||V.current("alreadySeen"));const i=await H(0,1);t||(i?(B(i.index),R(i)):V.current("noTargets"))})(),()=>{t=!0}},[b,u,H]),e(()=>{if(!P)return;const t=T.current[P.index],e=`Step ${P.index+1} of ${T.current.length}`;r.announceForAccessibility([e,t.title,t.description].filter(Boolean).join(". ")),N.setValue(0);const i=s.timing(N,{toValue:1,duration:D.motion.duration.fast,useNativeDriver:!0});return i.start(),()=>i.stop()},[P,N,D.motion.duration.fast]);const L=t(async t=>{R(null),await(F.current?.markSeen(u)),V.current(t)},[u]),q=t(async()=>{if(!P)return;const t=await H(P.index+1,1);t?R(t):await L("finished")},[P,H,L]),A=t(async()=>{if(!P)return;const t=await H(P.index-1,-1);t&&R(t)},[P,H]),E=t(()=>{L("skipped")},[L]),G=P?f[P.index]:void 0,J=!!P&&P.index===f.length-1,K=D.spacing.xs,O=P?{x:P.rect.x-K,y:P.rect.y-K,width:P.rect.width+2*K,height:P.rect.height+2*K}:null,Q=Math.min(z.width-2*$,360),U=O?(()=>{const t=O.x+O.width/2,e=Math.max($,Math.min(t-Q/2,z.width-Q-$)),i=O.y,o=z.height-(O.y+O.height);return o>=i?{left:e,top:O.y+O.height+M,maxHeight:Math.max(o-M-$,0)}:{left:e,bottom:z.height-O.y+M,maxHeight:Math.max(i-M-$,0)}})():null,X=D.colors.background.overlay;return m(y,{visible:null!==P,onRequestClose:E,presentation:"fullScreen",backdropPressClose:!1,backdropStyle:j.transparent,contentStyle:j.transparent,accessibilityLabel:G?.title??G?.description,haptic:S,testID:C,children:O&&U&&G?x(h,{style:a.absoluteFill,children:[m(h,{style:[j.dim,{backgroundColor:X,top:0,left:0,right:0,height:Math.max(O.y,0)}]}),m(h,{style:[j.dim,{backgroundColor:X,top:O.y+O.height,left:0,right:0,bottom:0}]}),m(h,{style:[j.dim,{backgroundColor:X,top:O.y,left:0,width:Math.max(O.x,0),height:O.height}]}),m(h,{style:[j.dim,{backgroundColor:X,top:O.y,left:O.x+O.width,right:0,height:O.height}]}),m(h,{pointerEvents:"none",style:[j.highlight,{top:O.y,left:O.x,width:O.width,height:O.height}]}),x(s.View,{accessibilityLiveRegion:"polite",style:[j.card,U,{width:Q,opacity:N}],testID:C?`${C}-card`:void 0,children:[m(l,{style:j.position,children:`Step ${(P?.index??0)+1} of ${f.length}`}),G.title?m(l,{style:j.title,accessibilityRole:"header",children:G.title}):null,m(l,{style:j.description,children:G.description}),x(h,{style:j.actions,children:[m(g,{title:k?.skip??"Skip",variant:"ghost",size:"sm",haptic:S,onPress:E,testID:C?`${C}-skip`:void 0}),x(h,{style:j.navigation,children:[P&&P.index>W?m(g,{title:k?.back??"Back",variant:"outline",size:"sm",haptic:S,onPress:()=>{A()},testID:C?`${C}-back`:void 0}):null,m(g,{title:J?k?.done??"Done":k?.next??"Next",size:"sm",haptic:S,onPress:()=>{q()},testID:C?`${C}-next`:void 0})]})]})]})]}):null})};Tour.displayName="Tour";const buildStyles=t=>a.create({transparent:{backgroundColor:"transparent"},dim:{position:"absolute"},highlight:{position:"absolute",borderWidth:2,borderColor:t.colors.primary,borderRadius:t.radius.md,...u},card:{position:"absolute",backgroundColor:t.colors.background.elevated,borderRadius:t.radius.lg,...u,padding:t.spacing.lg,gap:t.spacing.sm,...t.shadows.lg},position:{color:t.colors.text.tertiary,fontSize:t.typography.fontSize.xs},title:{color:t.colors.text.primary,fontSize:t.typography.fontSize.lg,fontWeight:t.typography.fontWeight.semibold},description:{color:t.colors.text.secondary,fontSize:t.typography.fontSize.sm},actions:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginTop:t.spacing.xs},navigation:{flexDirection:"row",gap:t.spacing.sm}});export{Tour};export default Tour;

package/lib/module/components/Tour/index.js

@@ -1,4 +1 @@
-"use strict";
-
-export { default, Tour } from "./Tour.js";
-//# sourceMappingURL=index.js.map
+export{default,Tour}from"./Tour.js";

package/lib/module/components/ZoomableImage/ZoomableImage.js

@@ -1,198 +1 @@
-"use strict";
-
-/**
- * ZoomableImage — a standalone pinch-to-zoom / pan / double-tap-to-zoom
- * wrapper for a single piece of content (typically one `<Image>`).
- *
- * Reuses the same Reanimated 3 gesture composition `ImageGallery`'s internal
- * lightbox slide uses (pinch clamped and rubber-banded at its limits, pan
- * gated to only engage once zoomed in, double-tap toggling between baseline
- * and `doubleTapScale`), stripped of the carousel-slide concerns that
- * component needs and this one does not — there is no `index`/`total`/
- * `active` because a standalone image is always the one being viewed.
- *
- * USAGE:
- *
- * <ZoomableImage>
- *   <Image source={{ uri }} style={styles.image} resizeMode="contain" />
- * </ZoomableImage>
- *
- * Takes `children` rather than a `source`/`uri` prop: every real consumer of
- * this pattern in the fleet wraps an already-authenticated image component
- * (headers, caching, its own loading state) rather than a bare `<Image>`, so
- * a `source` prop would force re-implementing that per app. Wrapping keeps
- * this component ignorant of how the image is fetched.
- */
-
-import React, { useCallback, useEffect, useMemo } from 'react';
-import { StyleSheet } from 'react-native';
-import { Gesture, GestureDetector } from 'react-native-gesture-handler';
-import Animated, { runOnJS, useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated';
-import { resolveHaptic, triggerHaptic } from "../../utils/index.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-const DEFAULT_MAX_SCALE = 4;
-const DEFAULT_MIN_SCALE = 1;
-const DEFAULT_DOUBLE_TAP_SCALE = 2;
-const SPRING_CONFIG = {
-  damping: 18,
-  stiffness: 220,
-  mass: 1
-};
-export const ZoomableImage = ({
-  children,
-  maxScale = DEFAULT_MAX_SCALE,
-  minScale = DEFAULT_MIN_SCALE,
-  doubleTapScale = DEFAULT_DOUBLE_TAP_SCALE,
-  disabled = false,
-  haptic,
-  style,
-  accessibilityLabel,
-  testID
-}) => {
-  const scale = useSharedValue(1);
-  const savedScale = useSharedValue(1);
-  const translateX = useSharedValue(0);
-  const translateY = useSharedValue(0);
-  const savedTranslateX = useSharedValue(0);
-  const savedTranslateY = useSharedValue(0);
-  const resetTransform = useCallback(() => {
-    scale.value = withSpring(1, SPRING_CONFIG);
-    savedScale.value = 1;
-    translateX.value = withSpring(0, SPRING_CONFIG);
-    translateY.value = withSpring(0, SPRING_CONFIG);
-    savedTranslateX.value = 0;
-    savedTranslateY.value = 0;
-  }, [scale, savedScale, translateX, translateY, savedTranslateX, savedTranslateY]);
-
-  // Disabling mid-zoom must not leave the content stranded scaled/panned —
-  // snap it back the same way ImageGallery's slide resets on losing focus.
-  useEffect(() => {
-    if (disabled) {
-      resetTransform();
-    }
-  }, [disabled, resetTransform]);
-  const triggerImpact = useCallback(() => {
-    const h = resolveHaptic(haptic, 'impactLight');
-    if (h) {
-      triggerHaptic(h);
-    }
-  }, [haptic]);
-  const pinch = useMemo(() => Gesture.Pinch().enabled(!disabled).onStart(() => {
-    'worklet';
-
-    savedScale.value = scale.value;
-  }).onUpdate(e => {
-    'worklet';
-
-    const next = savedScale.value * e.scale;
-    // Clamp minScale..maxScale on the UI thread so pinch feels rubbery at limits.
-    if (next < minScale) {
-      scale.value = minScale + (next - minScale) * 0.3;
-    } else if (next > maxScale) {
-      scale.value = maxScale + (next - maxScale) * 0.2;
-    } else {
-      scale.value = next;
-    }
-  }).onEnd(() => {
-    'worklet';
-
-    if (scale.value < minScale) {
-      scale.value = withSpring(minScale, SPRING_CONFIG);
-      translateX.value = withSpring(0, SPRING_CONFIG);
-      translateY.value = withSpring(0, SPRING_CONFIG);
-      savedScale.value = minScale;
-      savedTranslateX.value = 0;
-      savedTranslateY.value = 0;
-      return;
-    }
-    if (scale.value > maxScale) {
-      scale.value = withSpring(maxScale, SPRING_CONFIG);
-      savedScale.value = maxScale;
-      return;
-    }
-    savedScale.value = scale.value;
-  }), [disabled, scale, savedScale, translateX, translateY, savedTranslateX, savedTranslateY, minScale, maxScale]);
-
-  // Pan only engages when zoomed in — otherwise a scroll view or carousel this
-  // is nested inside keeps owning the gesture.
-  const pan = useMemo(() => Gesture.Pan().enabled(!disabled).minPointers(1).maxPointers(1).onStart(() => {
-    'worklet';
-
-    savedTranslateX.value = translateX.value;
-    savedTranslateY.value = translateY.value;
-  }).onUpdate(e => {
-    'worklet';
-
-    if (scale.value <= 1) {
-      return;
-    }
-    translateX.value = savedTranslateX.value + e.translationX;
-    translateY.value = savedTranslateY.value + e.translationY;
-  }).onEnd(() => {
-    'worklet';
-
-    savedTranslateX.value = translateX.value;
-    savedTranslateY.value = translateY.value;
-  }), [disabled, scale, translateX, translateY, savedTranslateX, savedTranslateY]);
-  const doubleTap = useMemo(() => Gesture.Tap().enabled(!disabled).numberOfTaps(2).onEnd(() => {
-    'worklet';
-
-    runOnJS(triggerImpact)();
-    if (scale.value > 1) {
-      scale.value = withSpring(1, SPRING_CONFIG);
-      translateX.value = withSpring(0, SPRING_CONFIG);
-      translateY.value = withSpring(0, SPRING_CONFIG);
-      savedScale.value = 1;
-      savedTranslateX.value = 0;
-      savedTranslateY.value = 0;
-    } else {
-      scale.value = withSpring(doubleTapScale, SPRING_CONFIG);
-      savedScale.value = doubleTapScale;
-    }
-  }), [disabled, scale, savedScale, translateX, translateY, savedTranslateX, savedTranslateY, triggerImpact, doubleTapScale]);
-
-  // Race the gestures so they coordinate cleanly: a tap won't be misread as a
-  // tiny pan, and pan won't fire when the user actually starts a pinch.
-  const composed = useMemo(() => Gesture.Race(pinch, pan, doubleTap), [pinch, pan, doubleTap]);
-  const animatedStyle = useAnimatedStyle(() => ({
-    transform: [{
-      translateX: translateX.value
-    }, {
-      translateY: translateY.value
-    }, {
-      scale: scale.value
-    }]
-  }));
-  return /*#__PURE__*/_jsx(GestureDetector, {
-    gesture: composed,
-    children: /*#__PURE__*/_jsx(Animated.View, {
-      style: [styles.container, style],
-      testID: testID,
-      accessibilityLabel: accessibilityLabel,
-      accessibilityState: {
-        disabled
-      },
-      children: /*#__PURE__*/_jsx(Animated.View, {
-        style: [styles.content, animatedStyle],
-        children: children
-      })
-    })
-  });
-};
-ZoomableImage.displayName = 'ZoomableImage';
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    overflow: 'hidden'
-  },
-  content: {
-    width: '100%',
-    height: '100%',
-    alignItems: 'center',
-    justifyContent: 'center'
-  }
-});
-export default ZoomableImage;
-//# sourceMappingURL=ZoomableImage.js.map
+import e,{useCallback as a,useEffect as l,useMemo as t}from"react";import{StyleSheet as n}from"react-native";import{Gesture as u,GestureDetector as i}from"react-native-gesture-handler";import v,{runOnJS as o,useAnimatedStyle as r,useSharedValue as s,withSpring as c}from"react-native-reanimated";import{resolveHaptic as m,triggerHaptic as d}from"../../utils/index.js";import{jsx as p}from"react/jsx-runtime";const b={damping:18,stiffness:220,mass:1};export const ZoomableImage=({children:e,maxScale:n=4,minScale:h=1,doubleTapScale:g=2,disabled:y=!1,haptic:x,style:I,accessibilityLabel:S,testID:j})=>{const w=s(1),P=s(1),Z=s(0),E=s(0),L=s(0),T=s(0),C=a(()=>{w.value=c(1,b),P.value=1,Z.value=c(0,b),E.value=c(0,b),L.value=0,T.value=0},[w,P,Z,E,L,T]);l(()=>{y&&C()},[y,C]);const D=a(()=>{const e=m(x,"impactLight");e&&d(e)},[x]),U=t(()=>u.Pinch().enabled(!y).onStart(()=>{P.value=w.value}).onUpdate(e=>{const a=P.value*e.scale;w.value=a<h?h+.3*(a-h):a>n?n+.2*(a-n):a}).onEnd(()=>w.value<h?(w.value=c(h,b),Z.value=c(0,b),E.value=c(0,b),P.value=h,L.value=0,void(T.value=0)):w.value>n?(w.value=c(n,b),void(P.value=n)):void(P.value=w.value)),[y,w,P,Z,E,L,T,h,n]),V=t(()=>u.Pan().enabled(!y).minPointers(1).maxPointers(1).onStart(()=>{L.value=Z.value,T.value=E.value}).onUpdate(e=>{w.value<=1||(Z.value=L.value+e.translationX,E.value=T.value+e.translationY)}).onEnd(()=>{L.value=Z.value,T.value=E.value}),[y,w,Z,E,L,T]),X=t(()=>u.Tap().enabled(!y).numberOfTaps(2).onEnd(()=>{o(D)(),w.value>1?(w.value=c(1,b),Z.value=c(0,b),E.value=c(0,b),P.value=1,L.value=0,T.value=0):(w.value=c(g,b),P.value=g)}),[y,w,P,Z,E,L,T,D,g]),Y=t(()=>u.Race(U,V,X),[U,V,X]),N=r(()=>({transform:[{translateX:Z.value},{translateY:E.value},{scale:w.value}]}));return p(i,{gesture:Y,children:p(v.View,{style:[f.container,I],testID:j,accessibilityLabel:S,accessibilityState:{disabled:y},children:p(v.View,{style:[f.content,N],children:e})})})};ZoomableImage.displayName="ZoomableImage";const f=n.create({container:{flex:1,alignItems:"center",justifyContent:"center",overflow:"hidden"},content:{width:"100%",height:"100%",alignItems:"center",justifyContent:"center"}});export default ZoomableImage;

package/lib/module/components/ZoomableImage/index.js

@@ -1,4 +1 @@
-"use strict";
-
-export { ZoomableImage } from "./ZoomableImage.js";
-//# sourceMappingURL=index.js.map
+export{ZoomableImage}from"./ZoomableImage.js";

package/lib/module/components/index.js

@@ -1,79 +1 @@
-"use strict";
-
-export { Accordion, AccordionGroup } from "./Accordion/index.js";
-export { AmountSlider } from "./AmountSlider/index.js";
-export { AnimatePresence } from "./AnimatePresence/index.js";
-export { AppBar } from "./AppBar/index.js";
-export { AsyncBlock } from "./AsyncBlock/index.js";
-export { AuthedImage, authedImageCacheStats, clearAuthedImageCache, getAuthedImageCacheLimit, setAuthedImageCacheLimit } from "./AuthedImage/index.js";
-export { Autocomplete } from "./Autocomplete/index.js";
-export { Avatar, AvatarGroup } from "./Avatar/index.js";
-export { Badge } from "./Badge/index.js";
-export { Banner } from "./Banner/index.js";
-export { BottomNavigation } from "./BottomNavigation/index.js";
-export { BottomSheet, useBottomSheet } from "./BottomSheet/index.js";
-export { Box, Row, Spacer, Stack } from "./Box/index.js";
-export { Button } from "./Button/index.js";
-export { Card } from "./Card/index.js";
-export { Carousel } from "./Carousel/index.js";
-export { Checkbox } from "./Checkbox/index.js";
-export { Chip } from "./Chip/index.js";
-export { ChoiceGroup } from "./ChoiceGroup/index.js";
-export { Confetti } from "./Confetti/index.js";
-export { DatePicker } from "./DatePicker/index.js";
-export { DateRangePicker } from "./DateRangePicker/index.js";
-export { Descriptions } from "./Descriptions/index.js";
-export { Dialog } from "./Dialog/index.js";
-export { Divider } from "./Divider/index.js";
-export { Drawer } from "./Drawer/index.js";
-export { EmptyState } from "./EmptyState/index.js";
-export { ErrorBoundary, useErrorHandler, withErrorBoundary } from "./ErrorBoundary/index.js";
-export { FilePicker, formatFileSize } from "./FilePicker/index.js";
-export { FileViewer } from "./FileViewer/index.js";
-export { FloatingActionButton, FloatingActionButtonGroup } from "./FloatingActionButton/index.js";
-export { ForceUpdateDialog } from "./ForceUpdateDialog/index.js";
-export { FormField } from "./FormField/index.js";
-export { IconButton } from "./IconButton/index.js";
-export { ImageGallery } from "./ImageGallery/index.js";
-export { InlineSelect } from "./InlineSelect/index.js";
-export { Input } from "./Input/index.js";
-export { KeyboardAwareScrollView } from "./KeyboardAwareScrollView/index.js";
-export { KeyboardToolbar } from "./KeyboardToolbar/index.js";
-export { ListItem } from "./ListItem/index.js";
-export { LoaderOverlay, loader, useLoader } from "./LoaderOverlay/index.js";
-export { Markdown } from "./Markdown/index.js";
-export { MODAL_DISMISS_GRACE_MS, Modal } from "./Modal/index.js";
-export { NumberInput } from "./NumberInput/index.js";
-export { OTPInput } from "./OTPInput/index.js";
-export { DEFAULT_CALLING_CODES, formatE164, PhoneNumberInput } from "./PhoneNumberInput/index.js";
-export { PickerTrigger } from "./PickerTrigger/index.js";
-export { ProfileCompletion } from "./ProfileCompletion/index.js";
-export { ProfilePicker } from "./ProfilePicker/index.js";
-export { ProgressBar } from "./ProgressBar/index.js";
-export { ProgressRing } from "./ProgressRing/index.js";
-export { Radio, RadioDot, RadioGroup } from "./Radio/index.js";
-export { Rating } from "./Rating/index.js";
-export { Repeater } from "./Repeater/index.js";
-export { applyMarkdownAction, RichTextEditor } from "./RichTextEditor/index.js";
-export { SearchBar } from "./SearchBar/index.js";
-export { SegmentedControl } from "./SegmentedControl/index.js";
-export { Select } from "./Select/index.js";
-export { Skeleton, SkeletonCircle, SkeletonClockProvider, SkeletonContent, SkeletonList, SkeletonProvider, SkeletonSkip, SkeletonText, useReduceMotion, useSkeletonClock, useSkeletonDefaults } from "./Skeleton/index.js";
-export { Slider } from "./Slider/index.js";
-export { SliderField } from "./SliderField/index.js";
-export { SlideToConfirm } from "./SlideToConfirm/index.js";
-export { Spinner } from "./Spinner/index.js";
-export { StatusBadge } from "./StatusBadge/index.js";
-export { Stepper } from "./Stepper/index.js";
-export { Swipeable } from "./Swipeable/index.js";
-export { Switch } from "./Switch/index.js";
-export { Tabs } from "./Tabs/index.js";
-export { TagInput } from "./TagInput/index.js";
-export { Text } from "./Text/index.js";
-export { Timeline } from "./Timeline/index.js";
-export { TimePicker } from "./TimePicker/index.js";
-export { Toast, ToastProvider, toast, useToast } from "./Toast/index.js";
-export { Tooltip } from "./Tooltip/index.js";
-export { Tour } from "./Tour/index.js";
-export { ZoomableImage } from "./ZoomableImage/index.js";
-//# sourceMappingURL=index.js.map
+export{Accordion,AccordionGroup}from"./Accordion/index.js";export{AmountSlider}from"./AmountSlider/index.js";export{AnimatePresence}from"./AnimatePresence/index.js";export{AppBar}from"./AppBar/index.js";export{AsyncBlock}from"./AsyncBlock/index.js";export{AuthedImage,authedImageCacheStats,clearAuthedImageCache,getAuthedImageCacheLimit,setAuthedImageCacheLimit}from"./AuthedImage/index.js";export{Autocomplete}from"./Autocomplete/index.js";export{Avatar,AvatarGroup}from"./Avatar/index.js";export{Badge}from"./Badge/index.js";export{Banner}from"./Banner/index.js";export{BottomNavigation}from"./BottomNavigation/index.js";export{BottomSheet,useBottomSheet}from"./BottomSheet/index.js";export{Box,Row,Spacer,Stack}from"./Box/index.js";export{Button}from"./Button/index.js";export{Card}from"./Card/index.js";export{Carousel}from"./Carousel/index.js";export{Checkbox}from"./Checkbox/index.js";export{Chip}from"./Chip/index.js";export{ChoiceGroup}from"./ChoiceGroup/index.js";export{Confetti}from"./Confetti/index.js";export{DatePicker}from"./DatePicker/index.js";export{DateRangePicker}from"./DateRangePicker/index.js";export{cleanDecimalText,DecimalInput,parseDecimalText}from"./DecimalInput/index.js";export{Descriptions}from"./Descriptions/index.js";export{Dialog}from"./Dialog/index.js";export{Divider}from"./Divider/index.js";export{Drawer}from"./Drawer/index.js";export{EmptyState}from"./EmptyState/index.js";export{ErrorBoundary,useErrorHandler,withErrorBoundary}from"./ErrorBoundary/index.js";export{FilePicker,formatFileSize}from"./FilePicker/index.js";export{FileViewer}from"./FileViewer/index.js";export{FloatingActionButton,FloatingActionButtonGroup}from"./FloatingActionButton/index.js";export{ForceUpdateDialog}from"./ForceUpdateDialog/index.js";export{FormField}from"./FormField/index.js";export{IconBadge}from"./IconBadge/index.js";export{IconButton}from"./IconButton/index.js";export{ImageGallery}from"./ImageGallery/index.js";export{InlineSelect}from"./InlineSelect/index.js";export{Input}from"./Input/index.js";export{KeyboardAwareScrollView}from"./KeyboardAwareScrollView/index.js";export{KeyboardToolbar}from"./KeyboardToolbar/index.js";export{ListItem}from"./ListItem/index.js";export{LoaderOverlay,loader,useLoader}from"./LoaderOverlay/index.js";export{Markdown}from"./Markdown/index.js";export{MODAL_DISMISS_GRACE_MS,Modal}from"./Modal/index.js";export{Notation,parseNotation,sym}from"./Notation/index.js";export{NumberInput}from"./NumberInput/index.js";export{OptionSheet}from"./OptionSheet/index.js";export{OTPInput}from"./OTPInput/index.js";export{ALL_CALLING_CODES,DEFAULT_CALLING_CODES,formatE164,PhoneNumberInput,parseE164}from"./PhoneNumberInput/index.js";export{PickerTrigger}from"./PickerTrigger/index.js";export{ProfileCompletion}from"./ProfileCompletion/index.js";export{ProfilePicker}from"./ProfilePicker/index.js";export{ProgressBar}from"./ProgressBar/index.js";export{ProgressRing}from"./ProgressRing/index.js";export{Radio,RadioDot,RadioGroup}from"./Radio/index.js";export{Rating}from"./Rating/index.js";export{Repeater}from"./Repeater/index.js";export{applyMarkdownAction,RichTextEditor}from"./RichTextEditor/index.js";export{SearchBar}from"./SearchBar/index.js";export{SectionHeader}from"./SectionHeader/index.js";export{SegmentedControl}from"./SegmentedControl/index.js";export{Select}from"./Select/index.js";export{Skeleton,SkeletonCircle,SkeletonClockProvider,SkeletonContent,SkeletonList,SkeletonProvider,SkeletonSkip,SkeletonText,useReduceMotion,useSkeletonClock,useSkeletonDefaults}from"./Skeleton/index.js";export{Slider}from"./Slider/index.js";export{SliderField}from"./SliderField/index.js";export{SlideToConfirm}from"./SlideToConfirm/index.js";export{Spinner}from"./Spinner/index.js";export{StatTile}from"./StatTile/index.js";export{StatusBadge}from"./StatusBadge/index.js";export{Stepper}from"./Stepper/index.js";export{Swipeable}from"./Swipeable/index.js";export{Switch}from"./Switch/index.js";export{Tabs}from"./Tabs/index.js";export{TagInput}from"./TagInput/index.js";export{Text}from"./Text/index.js";export{Timeline}from"./Timeline/index.js";export{TimePicker}from"./TimePicker/index.js";export{Toast,ToastHost,ToastProvider,toast,useToast}from"./Toast/index.js";export{Tooltip}from"./Tooltip/index.js";export{Tour}from"./Tour/index.js";export{ZoomableImage}from"./ZoomableImage/index.js";