@webority/mobile-ui 0.0.39 → 0.2.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
+"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";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const DEFAULT_GAP=8,DEFAULT_SCREEN_PADDING=8,MAX_CARD_WIDTH=360,HIGHLIGHT_BORDER_WIDTH=2,measureInWindow=e=>new Promise(t=>{const i=e.current;i?i.measureInWindow((e,i,o,n)=>t({x:e,y:i,width:o,height:n})):t(null)}),isOnScreen=(e,t)=>e.width>0&&e.height>0&&e.x<t.width&&e.y<t.height&&e.x+e.width>0&&e.y+e.height>0,Tour=({tourId:e,steps:t,visible:i,onClose:o,seenStore:n,labels:s,haptic:r,testID:a})=>{const l=useTheme(),c=useMemo(()=>buildStyles(l),[l]),u=useWindowDimensions(),d=useRef(u);d.current=u;const h=l.components.tooltip?.gap??8,p=l.components.tooltip?.screenPadding??8,[m,g]=useState(null),[x,y]=useState(0),f=useRef(createAnimatedValue(0)).current,b=useRef(t);b.current=t;const w=useRef(o);w.current=o;const S=useRef(n);S.current=n;const j=useCallback(async(e,t)=>{for(let i=e;i>=0&&i<b.current.length;i+=t){const e=await measureInWindow(b.current[i].target);if(e&&isOnScreen(e,d.current))return{index:i,rect:e}}return null},[]);useEffect(()=>{if(!i)return void g(null);let t=!1;return(async()=>{const i=S.current;if(i&&await i.isSeen(e))return void(t||w.current("alreadySeen"));const o=await j(0,1);t||(o?(y(o.index),g(o)):w.current("noTargets"))})(),()=>{t=!0}},[i,e,j]),useEffect(()=>{if(!m)return;const e=b.current[m.index],t=`Step ${m.index+1} of ${b.current.length}`;AccessibilityInfo.announceForAccessibility([t,e.title,e.description].filter(Boolean).join(". ")),f.setValue(0);const i=Animated.timing(f,{toValue:1,duration:l.motion.duration.fast,useNativeDriver:!0});return i.start(),()=>i.stop()},[m,f,l.motion.duration.fast]);const _=useCallback(async t=>{g(null),await(S.current?.markSeen(e)),w.current(t)},[e]),k=useCallback(async()=>{if(!m)return;const e=await j(m.index+1,1);e?g(e):await _("finished")},[m,j,_]),C=useCallback(async()=>{if(!m)return;const e=await j(m.index-1,-1);e&&g(e)},[m,j]),v=useCallback(()=>{_("skipped")},[_]),D=m?t[m.index]:void 0,I=!!m&&m.index===t.length-1,T=l.spacing.xs,R=m?{x:m.rect.x-T,y:m.rect.y-T,width:m.rect.width+2*T,height:m.rect.height+2*T}:null,A=Math.min(u.width-2*p,360),V=R?(()=>{const e=R.x+R.width/2,t=Math.max(p,Math.min(e-A/2,u.width-A-p)),i=R.y,o=u.height-(R.y+R.height);return o>=i?{left:t,top:R.y+R.height+h,maxHeight:Math.max(o-h-p,0)}:{left:t,bottom:u.height-R.y+h,maxHeight:Math.max(i-h-p,0)}})():null,M=l.colors.background.overlay;return _jsx(Modal,{visible:null!==m,onRequestClose:v,presentation:"fullScreen",backdropPressClose:!1,backdropStyle:c.transparent,contentStyle:c.transparent,accessibilityLabel:D?.title??D?.description,haptic:r,testID:a,children:R&&V&&D?_jsxs(View,{style:StyleSheet.absoluteFill,children:[_jsx(View,{style:[c.dim,{backgroundColor:M,top:0,left:0,right:0,height:Math.max(R.y,0)}]}),_jsx(View,{style:[c.dim,{backgroundColor:M,top:R.y+R.height,left:0,right:0,bottom:0}]}),_jsx(View,{style:[c.dim,{backgroundColor:M,top:R.y,left:0,width:Math.max(R.x,0),height:R.height}]}),_jsx(View,{style:[c.dim,{backgroundColor:M,top:R.y,left:R.x+R.width,right:0,height:R.height}]}),_jsx(View,{pointerEvents:"none",style:[c.highlight,{top:R.y,left:R.x,width:R.width,height:R.height}]}),_jsxs(Animated.View,{accessibilityLiveRegion:"polite",style:[c.card,V,{width:A,opacity:f}],testID:a?`${a}-card`:void 0,children:[_jsx(Text,{style:c.position,children:`Step ${(m?.index??0)+1} of ${t.length}`}),D.title?_jsx(Text,{style:c.title,accessibilityRole:"header",children:D.title}):null,_jsx(Text,{style:c.description,children:D.description}),_jsxs(View,{style:c.actions,children:[_jsx(Button,{title:s?.skip??"Skip",variant:"ghost",size:"sm",haptic:r,onPress:v,testID:a?`${a}-skip`:void 0}),_jsxs(View,{style:c.navigation,children:[m&&m.index>x?_jsx(Button,{title:s?.back??"Back",variant:"outline",size:"sm",haptic:r,onPress:()=>{C()},testID:a?`${a}-back`:void 0}):null,_jsx(Button,{title:I?s?.done??"Done":s?.next??"Next",size:"sm",haptic:r,onPress:()=>{k()},testID:a?`${a}-next`:void 0})]})]})]})]}):null})};Tour.displayName="Tour";const buildStyles=e=>StyleSheet.create({transparent:{backgroundColor:"transparent"},dim:{position:"absolute"},highlight:{position:"absolute",borderWidth:2,borderColor:e.colors.primary,borderRadius:e.radius.md,...smoothCorners},card:{position:"absolute",backgroundColor:e.colors.background.elevated,borderRadius:e.radius.lg,...smoothCorners,padding:e.spacing.lg,gap:e.spacing.sm,...e.shadows.lg},position:{color:e.colors.text.tertiary,fontSize:e.typography.fontSize.xs},title:{color:e.colors.text.primary,fontSize:e.typography.fontSize.lg,fontWeight:e.typography.fontWeight.semibold},description:{color:e.colors.text.secondary,fontSize:e.typography.fontSize.sm},actions:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginTop:e.spacing.xs},navigation:{flexDirection:"row",gap:e.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
+"use strict";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
+"use strict";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,DEFAULT_MIN_SCALE=1,DEFAULT_DOUBLE_TAP_SCALE=2,SPRING_CONFIG={damping:18,stiffness:220,mass:1};export const ZoomableImage=({children:e,maxScale:a=4,minScale:t=1,doubleTapScale:l=2,disabled:r=!1,haptic:u,style:i,accessibilityLabel:n,testID:s})=>{const o=useSharedValue(1),v=useSharedValue(1),c=useSharedValue(0),S=useSharedValue(0),m=useSharedValue(0),d=useSharedValue(0),h=useCallback(()=>{o.value=withSpring(1,SPRING_CONFIG),v.value=1,c.value=withSpring(0,SPRING_CONFIG),S.value=withSpring(0,SPRING_CONFIG),m.value=0,d.value=0},[o,v,c,S,m,d]);useEffect(()=>{r&&h()},[r,h]);const p=useCallback(()=>{const e=resolveHaptic(u,"impactLight");e&&triggerHaptic(e)},[u]),I=useMemo(()=>Gesture.Pinch().enabled(!r).onStart(()=>{"worklet";v.value=o.value}).onUpdate(e=>{"worklet";const l=v.value*e.scale;o.value=l<t?t+.3*(l-t):l>a?a+.2*(l-a):l}).onEnd(()=>{"worklet";return o.value<t?(o.value=withSpring(t,SPRING_CONFIG),c.value=withSpring(0,SPRING_CONFIG),S.value=withSpring(0,SPRING_CONFIG),v.value=t,m.value=0,void(d.value=0)):o.value>a?(o.value=withSpring(a,SPRING_CONFIG),void(v.value=a)):void(v.value=o.value)}),[r,o,v,c,S,m,d,t,a]),G=useMemo(()=>Gesture.Pan().enabled(!r).minPointers(1).maxPointers(1).onStart(()=>{"worklet";m.value=c.value,d.value=S.value}).onUpdate(e=>{"worklet";o.value<=1||(c.value=m.value+e.translationX,S.value=d.value+e.translationY)}).onEnd(()=>{"worklet";m.value=c.value,d.value=S.value}),[r,o,c,S,m,d]),g=useMemo(()=>Gesture.Tap().enabled(!r).numberOfTaps(2).onEnd(()=>{"worklet";runOnJS(p)(),o.value>1?(o.value=withSpring(1,SPRING_CONFIG),c.value=withSpring(0,SPRING_CONFIG),S.value=withSpring(0,SPRING_CONFIG),v.value=1,m.value=0,d.value=0):(o.value=withSpring(l,SPRING_CONFIG),v.value=l)}),[r,o,v,c,S,m,d,p,l]),N=useMemo(()=>Gesture.Race(I,G,g),[I,G,g]),w=useAnimatedStyle(()=>({transform:[{translateX:c.value},{translateY:S.value},{scale:o.value}]}));return _jsx(GestureDetector,{gesture:N,children:_jsx(Animated.View,{style:[styles.container,i],testID:s,accessibilityLabel:n,accessibilityState:{disabled:r},children:_jsx(Animated.View,{style:[styles.content,w],children:e})})})};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;

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

@@ -1,4 +1 @@
-"use strict";
-
-export { ZoomableImage } from "./ZoomableImage.js";
-//# sourceMappingURL=index.js.map
+"use strict";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
+"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{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";