@webority/mobile-ui 0.0.39 → 0.1.0

package/lib/module/components/ImageGallery/ImageGallery.js

@@ -1,589 +1 @@
-"use strict";
-
-/**
- * ImageGallery — themed gallery built on top of Carousel.
- *
- * Base view: a Carousel of cover-fitted images with optional thumbnails strip
- * and counter pill. Tapping an image opens a fullscreen Lightbox that re-uses
- * the Carousel for swiping but layers Reanimated 3 pinch-to-zoom + pan gestures
- * on top so the active image can be inspected at up to 4x magnification.
- *
- * USAGE:
- *
- * <ImageGallery
- *   images={[
- *     { source: { uri: 'https://...' }, caption: 'Sunset' },
- *     { source: { uri: 'https://...' }, alt: 'Tower at dusk' }
- *   ]}
- *   initialIndex={0}
- * />
- */
-
-import React, { useCallback, useMemo, useRef, useState } from 'react';
-import { Dimensions, Image, Pressable, Modal as RNModal, StyleSheet, Text, View } from 'react-native';
-import { Gesture, GestureDetector } from 'react-native-gesture-handler';
-import Animated, { runOnJS, useAnimatedStyle, useSharedValue, withSpring, withTiming } from 'react-native-reanimated';
-import { useTheme } from "../../theme/index.js";
-import { resolveHaptic, triggerHaptic } from "../../utils/index.js";
-import { smoothCorners } from "../../utils/corners.js";
-import { defaultIcons } from "../AppIcon/defaultIcons.js";
-import { Carousel } from "../Carousel/index.js";
-import { Skeleton } from "../Skeleton/index.js";
-
-// Local shape mirror — see types.ts ImageGalleryTokens for the canonical definition.
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const MAX_SCALE_FALLBACK = 4;
-const MIN_SCALE_FALLBACK = 1;
-const DOUBLE_TAP_SCALE_FALLBACK = 2;
-const SPRING_CONFIG = {
-  damping: 18,
-  stiffness: 220,
-  mass: 1
-};
-const ImageGallery = ({
-  images,
-  initialIndex = 0,
-  showThumbnails = true,
-  showCounter = true,
-  enableLightbox = true,
-  enablePinchZoom = true,
-  onIndexChange,
-  haptic,
-  loading = false,
-  accessibilityLabel,
-  containerStyle,
-  testID
-}) => {
-  const theme = useTheme();
-  const styles = useMemo(() => buildStyles(theme), [theme]);
-  const [currentIndex, setCurrentIndex] = useState(clamp(initialIndex, 0, Math.max(0, images.length - 1)));
-  const [lightboxOpen, setLightboxOpen] = useState(false);
-  const handleIndexChange = useCallback(idx => {
-    setCurrentIndex(idx);
-    onIndexChange?.(idx);
-  }, [onIndexChange]);
-  const openLightbox = useCallback(() => {
-    if (!enableLightbox) {
-      return;
-    }
-    const h = resolveHaptic(haptic, 'selection');
-    if (h) {
-      triggerHaptic(h);
-    }
-    setLightboxOpen(true);
-  }, [enableLightbox, haptic]);
-  const closeLightbox = useCallback(() => {
-    const h = resolveHaptic(haptic, 'selection');
-    if (h) {
-      triggerHaptic(h);
-    }
-    setLightboxOpen(false);
-  }, [haptic]);
-  const renderImage = useCallback((image, idx) => {
-    const a11y = image.alt ?? `Image ${idx + 1} of ${images.length}`;
-    return /*#__PURE__*/_jsx(Pressable, {
-      onPress: openLightbox,
-      accessibilityRole: "image",
-      accessibilityLabel: a11y,
-      accessibilityHint: enableLightbox ? 'Tap to open fullscreen' : undefined,
-      style: styles.imageWrap,
-      children: /*#__PURE__*/_jsx(Image, {
-        source: image.source,
-        style: styles.image,
-        resizeMode: "cover"
-      })
-    });
-  }, [enableLightbox, images.length, openLightbox, styles]);
-  const renderThumbnail = useCallback(image => /*#__PURE__*/_jsx(Image, {
-    source: image.source,
-    style: styles.thumbnailImage,
-    resizeMode: "cover"
-  }), [styles]);
-  const rendered = /*#__PURE__*/_jsxs(View, {
-    style: [styles.container, containerStyle],
-    testID: testID,
-    accessibilityLabel: accessibilityLabel ?? 'Image gallery',
-    children: [/*#__PURE__*/_jsxs(View, {
-      style: styles.carouselWrap,
-      children: [/*#__PURE__*/_jsx(Carousel, {
-        data: images,
-        defaultIndex: initialIndex,
-        onIndexChange: handleIndexChange,
-        renderItem: renderImage,
-        showPagination: false,
-        showThumbnails: showThumbnails,
-        renderThumbnail: renderThumbnail,
-        haptic: haptic
-      }), showCounter && images.length > 0 ? /*#__PURE__*/_jsx(View, {
-        style: styles.counterPill,
-        pointerEvents: "none",
-        children: /*#__PURE__*/_jsx(Text, {
-          style: [styles.counterText, {
-            color: theme.colors.text.inverse
-          }],
-          accessibilityLabel: `Image ${currentIndex + 1} of ${images.length}`,
-          children: `${currentIndex + 1} / ${images.length}`
-        })
-      }) : null]
-    }), enableLightbox ? /*#__PURE__*/_jsx(Lightbox, {
-      visible: lightboxOpen,
-      images: images,
-      initialIndex: currentIndex,
-      enablePinchZoom: enablePinchZoom,
-      showCounter: showCounter,
-      onClose: closeLightbox,
-      onIndexChange: handleIndexChange,
-      haptic: haptic
-    }) : null]
-  });
-  if (loading) {
-    return /*#__PURE__*/_jsx(ImageGallerySkeleton, {
-      images: images,
-      showThumbnails: showThumbnails,
-      showCounter: showCounter,
-      containerStyle: containerStyle,
-      testID: testID
-    });
-  }
-  return rendered;
-};
-ImageGallery.displayName = 'ImageGallery';
-
-/**
- * Placeholder shape for `<ImageGallery>`. Hero image block + optional
- * counter pill + thumbnail strip. Heights are tuned to match the live
- * component's defaults so the gallery doesn't reflow when ready.
- */
-const ImageGallerySkeleton = ({
-  images,
-  showThumbnails = true,
-  showCounter = true,
-  containerStyle,
-  testID
-}) => {
-  const thumbCount = Math.min(images?.length || 4, 6);
-  return /*#__PURE__*/_jsxs(View, {
-    style: [{
-      width: '100%'
-    }, containerStyle],
-    testID: testID,
-    accessibilityRole: "progressbar",
-    accessibilityState: {
-      busy: true
-    },
-    children: [/*#__PURE__*/_jsxs(View, {
-      style: {
-        position: 'relative'
-      },
-      children: [/*#__PURE__*/_jsx(Skeleton, {
-        width: "100%",
-        height: 280,
-        radius: "lg"
-      }), showCounter ? /*#__PURE__*/_jsx(View, {
-        style: {
-          position: 'absolute',
-          top: 12,
-          right: 12
-        },
-        children: /*#__PURE__*/_jsx(Skeleton, {
-          width: 44,
-          height: 22,
-          radius: "full"
-        })
-      }) : null]
-    }), showThumbnails ? /*#__PURE__*/_jsx(View, {
-      style: {
-        flexDirection: 'row',
-        marginTop: 12
-      },
-      children: Array.from({
-        length: thumbCount
-      }).map((_, i) => /*#__PURE__*/_jsx(Skeleton, {
-        width: 64,
-        height: 64,
-        radius: "md",
-        style: {
-          marginRight: 8
-        }
-      }, `sk-thumb-${i}`))
-    }) : null]
-  });
-};
-ImageGallerySkeleton.displayName = 'ImageGallerySkeleton';
-ImageGallery.Skeleton = ImageGallerySkeleton;
-
-// ───────── Lightbox ─────────
-
-const Lightbox = ({
-  visible,
-  images,
-  initialIndex,
-  enablePinchZoom,
-  showCounter,
-  onClose,
-  onIndexChange,
-  haptic
-}) => {
-  const theme = useTheme();
-  const styles = useMemo(() => buildLightboxStyles(theme), [theme]);
-  const galleryTokens = theme.components.imageGallery;
-  const maxScale = galleryTokens?.maxScale ?? MAX_SCALE_FALLBACK;
-  const minScale = galleryTokens?.minScale ?? MIN_SCALE_FALLBACK;
-  const doubleTapScale = galleryTokens?.doubleTapScale ?? DOUBLE_TAP_SCALE_FALLBACK;
-  const carouselRef = useRef(null);
-  const [activeIndex, setActiveIndex] = useState(initialIndex);
-  const handleSwipe = useCallback(idx => {
-    if (idx !== activeIndex) {
-      const h = resolveHaptic(haptic, 'selection');
-      if (h) {
-        triggerHaptic(h);
-      }
-      setActiveIndex(idx);
-      onIndexChange(idx);
-    }
-  }, [activeIndex, onIndexChange, haptic]);
-  const renderItem = useCallback((image, idx) => /*#__PURE__*/_jsx(ZoomableImage, {
-    image: image,
-    index: idx,
-    total: images.length,
-    active: idx === activeIndex,
-    enabled: enablePinchZoom,
-    maxScale: maxScale,
-    minScale: minScale,
-    doubleTapScale: doubleTapScale,
-    haptic: haptic
-  }), [activeIndex, enablePinchZoom, images.length, maxScale, minScale, doubleTapScale, haptic]);
-  const caption = images[activeIndex]?.caption;
-  return /*#__PURE__*/_jsx(RNModal, {
-    visible: visible,
-    transparent: true,
-    statusBarTranslucent: true,
-    presentationStyle: "overFullScreen",
-    animationType: "fade",
-    onRequestClose: onClose,
-    accessibilityViewIsModal: true,
-    children: /*#__PURE__*/_jsxs(View, {
-      style: styles.backdrop,
-      accessibilityViewIsModal: true,
-      children: [/*#__PURE__*/_jsx(Carousel, {
-        ref: carouselRef,
-        data: images,
-        defaultIndex: initialIndex,
-        onIndexChange: handleSwipe,
-        renderItem: renderItem,
-        showPagination: false
-        // Dormant today (no thumbnail strip in the lightbox) but wired anyway:
-        // enabling thumbnails here later must not resurrect an un-silenceable
-        // haptic.
-        ,
-        haptic: haptic
-      }), showCounter && images.length > 0 ? /*#__PURE__*/_jsx(View, {
-        style: styles.counterPill,
-        pointerEvents: "none",
-        children: /*#__PURE__*/_jsx(Text, {
-          style: [styles.counterText, {
-            color: theme.colors.text.inverse
-          }],
-          accessibilityLabel: `Image ${activeIndex + 1} of ${images.length}`,
-          children: `${activeIndex + 1} / ${images.length}`
-        })
-      }) : null, /*#__PURE__*/_jsx(Pressable, {
-        onPress: onClose,
-        accessibilityRole: "button",
-        accessibilityLabel: "Close gallery",
-        style: styles.closeButton,
-        hitSlop: 12,
-        children: (theme.icons?.close ?? defaultIcons.close)({
-          size: 24,
-          color: theme.colors.text.inverse
-        })
-      }), caption ? /*#__PURE__*/_jsx(Animated.View, {
-        style: styles.captionWrap,
-        entering: undefined,
-        accessibilityElementsHidden: false,
-        children: /*#__PURE__*/_jsx(Text, {
-          style: styles.captionText,
-          numberOfLines: 3,
-          children: caption
-        })
-      }) : null]
-    })
-  });
-};
-
-// ───────── ZoomableImage ─────────
-
-const ZoomableImage = ({
-  image,
-  index,
-  total,
-  active,
-  enabled,
-  maxScale,
-  minScale,
-  doubleTapScale,
-  haptic
-}) => {
-  const screen = Dimensions.get('window');
-  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]);
-
-  // When the slide leaves the active position, smoothly snap back to baseline.
-  React.useEffect(() => {
-    if (!active) {
-      scale.value = withTiming(1, {
-        duration: 150
-      });
-      translateX.value = withTiming(0, {
-        duration: 150
-      });
-      translateY.value = withTiming(0, {
-        duration: 150
-      });
-      savedScale.value = 1;
-      savedTranslateX.value = 0;
-      savedTranslateY.value = 0;
-    }
-  }, [active, scale, translateX, translateY, savedScale, savedTranslateX, savedTranslateY]);
-  const triggerImpact = useCallback(() => {
-    if (haptic !== false) {
-      triggerHaptic('impactLight');
-    }
-  }, [haptic]);
-  const pinch = useMemo(() => Gesture.Pinch().enabled(enabled).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;
-      // Mutation-tested equivalent under the jest reanimated mock (withSpring
-      // resolves synchronously to its target there): with this return removed,
-      // execution falls into `scale.value > maxScale` (always false, since
-      // minScale <= maxScale) and then `savedScale.value = scale.value`, which
-      // reads back the minScale just assigned above — same final state, so no
-      // jest assertion can distinguish the two. On a real device withSpring is
-      // asynchronous, so that fallthrough read could observe a stale
-      // mid-animation scale instead; kept as an explicit early return for that
-      // reason even though it isn't independently testable here.
-      return;
-    }
-    if (scale.value > maxScale) {
-      scale.value = withSpring(maxScale, SPRING_CONFIG);
-      savedScale.value = maxScale;
-      return;
-    }
-    savedScale.value = scale.value;
-  }), [enabled, scale, savedScale, translateX, translateY, savedTranslateX, savedTranslateY, minScale, maxScale]);
-
-  // Pan only engages when zoomed in — otherwise the parent Carousel owns horizontal swipe.
-  const pan = useMemo(() => Gesture.Pan().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;
-  }), [scale, translateX, translateY, savedTranslateX, savedTranslateY]);
-  const doubleTap = useMemo(() => Gesture.Tap().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;
-    }
-  }), [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
-    }]
-  }));
-
-  // Reset when the user navigates away from this slide.
-  React.useEffect(() => {
-    if (!active) {
-      resetTransform();
-    }
-  }, [active, resetTransform]);
-  const a11y = image.alt ?? `Image ${index + 1} of ${total}`;
-  return /*#__PURE__*/_jsx(GestureDetector, {
-    gesture: composed,
-    children: /*#__PURE__*/_jsx(Animated.View, {
-      style: [lightboxImageStyles.container, {
-        width: screen.width
-      }],
-      children: /*#__PURE__*/_jsx(Animated.Image, {
-        source: image.source,
-        resizeMode: "contain",
-        style: [lightboxImageStyles.image, animatedStyle],
-        accessibilityLabel: a11y,
-        accessible: true
-      })
-    })
-  });
-};
-
-// ───────── Helpers / Styles ─────────
-
-const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
-const buildStyles = theme => StyleSheet.create({
-  container: {
-    width: '100%'
-  },
-  carouselWrap: {
-    width: '100%',
-    position: 'relative'
-  },
-  imageWrap: {
-    width: '100%',
-    aspectRatio: 16 / 9,
-    backgroundColor: theme.colors.background.secondary,
-    overflow: 'hidden',
-    borderRadius: theme.radius.md,
-    ...smoothCorners
-  },
-  image: {
-    width: '100%',
-    height: '100%'
-  },
-  thumbnailImage: {
-    width: '100%',
-    height: '100%'
-  },
-  counterPill: {
-    position: 'absolute',
-    top: 12,
-    alignSelf: 'center',
-    paddingHorizontal: 12,
-    paddingVertical: 4,
-    borderRadius: theme.radius.full,
-    ...smoothCorners,
-    backgroundColor: 'rgba(0,0,0,0.55)'
-  },
-  counterText: {
-    fontSize: theme.typography.fontSize.sm,
-    fontWeight: theme.typography.fontWeight.semibold
-  }
-});
-const buildLightboxStyles = theme => StyleSheet.create({
-  backdrop: {
-    flex: 1,
-    backgroundColor: '#000',
-    justifyContent: 'center'
-  },
-  counterPill: {
-    position: 'absolute',
-    top: 48,
-    alignSelf: 'center',
-    paddingHorizontal: 14,
-    paddingVertical: 6,
-    borderRadius: theme.radius.full,
-    ...smoothCorners,
-    backgroundColor: 'rgba(0,0,0,0.6)'
-  },
-  counterText: {
-    fontSize: theme.typography.fontSize.sm,
-    fontWeight: theme.typography.fontWeight.semibold
-  },
-  closeButton: {
-    position: 'absolute',
-    top: 44,
-    right: 16,
-    width: 40,
-    height: 40,
-    borderRadius: 20,
-    ...smoothCorners,
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: 'rgba(0,0,0,0.5)'
-  },
-  captionWrap: {
-    position: 'absolute',
-    left: 0,
-    right: 0,
-    bottom: 32,
-    paddingHorizontal: 24
-  },
-  captionText: {
-    // Fixed white, not a theme token, and deliberately so: the lightbox is an
-    // always-dark surface (#000 backdrop with rgba scrims above), so it does
-    // not follow the colour scheme. `text.primary` would be dark ink on black
-    // in light mode. Do not "themify" this.
-    color: '#FFFFFF',
-    fontSize: 14,
-    lineHeight: 20,
-    textAlign: 'center'
-  }
-});
-const lightboxImageStyles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  image: {
-    width: '100%',
-    height: '100%'
-  }
-});
-export { ImageGallery };
-export default ImageGallery;
-//# sourceMappingURL=ImageGallery.js.map
+import e,{useCallback as t,useMemo as a,useRef as i,useState as l}from"react";import{Dimensions as n,Image as o,Pressable as r,Modal as s,StyleSheet as c,Text as u,View as d}from"react-native";import{Gesture as h,GestureDetector as m}from"react-native-gesture-handler";import g,{runOnJS as p,useAnimatedStyle as v,useSharedValue as b,withSpring as y,withTiming as f}from"react-native-reanimated";import{useTheme as x}from"../../theme/index.js";import{resolveHaptic as I,triggerHaptic as w}from"../../utils/index.js";import{smoothCorners as S}from"../../utils/corners.js";import{defaultIcons as C}from"../AppIcon/defaultIcons.js";import{Carousel as T}from"../Carousel/index.js";import{Skeleton as P}from"../Skeleton/index.js";import{ToastHost as j}from"../Toast/ToastProvider.js";import{jsx as $,jsxs as k}from"react/jsx-runtime";const z={damping:18,stiffness:220,mass:1},ImageGallery=({images:e,initialIndex:i=0,showThumbnails:n=!0,showCounter:s=!0,enableLightbox:c=!0,enablePinchZoom:h=!0,onIndexChange:m,haptic:g,loading:p=!1,accessibilityLabel:v,containerStyle:b,testID:y})=>{const f=x(),S=a(()=>buildStyles(f),[f]),[C,P]=l(clamp(i,0,Math.max(0,e.length-1))),[j,z]=l(!1),R=t(e=>{P(e),m?.(e)},[m]),L=t(()=>{if(!c)return;const e=I(g,"selection");e&&w(e),z(!0)},[c,g]),M=t(()=>{const e=I(g,"selection");e&&w(e),z(!1)},[g]),W=t((t,a)=>{const i=t.alt??`Image ${a+1} of ${e.length}`;return $(r,{onPress:L,accessibilityRole:"image",accessibilityLabel:i,accessibilityHint:c?"Tap to open fullscreen":void 0,style:S.imageWrap,children:$(o,{source:t.source,style:S.image,resizeMode:"cover"})})},[c,e.length,L,S]),E=t(e=>$(o,{source:e.source,style:S.thumbnailImage,resizeMode:"cover"}),[S]),F=k(d,{style:[S.container,b],testID:y,accessibilityLabel:v??"Image gallery",children:[k(d,{style:S.carouselWrap,children:[$(T,{data:e,defaultIndex:i,onIndexChange:R,renderItem:W,showPagination:!1,showThumbnails:n,renderThumbnail:E,haptic:g}),s&&e.length>0?$(d,{style:S.counterPill,pointerEvents:"none",children:$(u,{style:[S.counterText,{color:f.colors.onOverlay}],accessibilityLabel:`Image ${C+1} of ${e.length}`,children:`${C+1} / ${e.length}`})}):null]}),c?$(Lightbox,{visible:j,images:e,initialIndex:C,enablePinchZoom:h,showCounter:s,onClose:M,onIndexChange:R,haptic:g}):null]});return p?$(ImageGallerySkeleton,{images:e,showThumbnails:n,showCounter:s,containerStyle:b,testID:y}):F};ImageGallery.displayName="ImageGallery";const ImageGallerySkeleton=({images:e,showThumbnails:t=!0,showCounter:a=!0,containerStyle:i,testID:l})=>{const n=Math.min(e?.length||4,6);return k(d,{style:[{width:"100%"},i],testID:l,accessibilityRole:"progressbar",accessibilityState:{busy:!0},children:[k(d,{style:{position:"relative"},children:[$(P,{width:"100%",height:280,radius:"lg"}),a?$(d,{style:{position:"absolute",top:12,right:12},children:$(P,{width:44,height:22,radius:"full"})}):null]}),t?$(d,{style:{flexDirection:"row",marginTop:12},children:Array.from({length:n}).map((e,t)=>$(P,{width:64,height:64,radius:"md",style:{marginRight:8}},`sk-thumb-${t}`))}):null]})};ImageGallerySkeleton.displayName="ImageGallerySkeleton",ImageGallery.Skeleton=ImageGallerySkeleton;const Lightbox=({visible:e,images:n,initialIndex:o,enablePinchZoom:c,showCounter:h,onClose:m,onIndexChange:p,haptic:v})=>{const b=x(),y=a(()=>buildLightboxStyles(b),[b]),f=b.components.imageGallery,S=f?.maxScale??4,P=f?.minScale??1,z=f?.doubleTapScale??2,R=i(null),[L,M]=l(o),W=t(e=>{if(e!==L){const t=I(v,"selection");t&&w(t),M(e),p(e)}},[L,p,v]),E=t((e,t)=>$(ZoomableImage,{image:e,index:t,total:n.length,active:t===L,enabled:c,maxScale:S,minScale:P,doubleTapScale:z,haptic:v}),[L,c,n.length,S,P,z,v]),F=n[L]?.caption;return $(s,{visible:e,transparent:!0,statusBarTranslucent:!0,presentationStyle:"overFullScreen",animationType:"fade",onRequestClose:m,accessibilityViewIsModal:!0,children:k(d,{style:y.backdrop,accessibilityViewIsModal:!0,children:[$(T,{ref:R,data:n,defaultIndex:o,onIndexChange:W,renderItem:E,showPagination:!1,haptic:v}),h&&n.length>0?$(d,{style:y.counterPill,pointerEvents:"none",children:$(u,{style:[y.counterText,{color:b.colors.onOverlay}],accessibilityLabel:`Image ${L+1} of ${n.length}`,children:`${L+1} / ${n.length}`})}):null,$(r,{onPress:m,accessibilityRole:"button",accessibilityLabel:"Close gallery",style:y.closeButton,hitSlop:12,children:(b.icons?.close??C.close)({size:24,color:b.colors.onOverlay})}),F?$(g.View,{style:y.captionWrap,entering:void 0,accessibilityElementsHidden:!1,children:$(u,{style:y.captionText,numberOfLines:3,children:F})}):null,$(j,{})]})})},ZoomableImage=({image:i,index:l,total:o,active:r,enabled:s,maxScale:c,minScale:u,doubleTapScale:d,haptic:x})=>{const I=n.get("window"),S=b(1),C=b(1),T=b(0),P=b(0),j=b(0),k=b(0),L=t(()=>{S.value=y(1,z),C.value=1,T.value=y(0,z),P.value=y(0,z),j.value=0,k.value=0},[S,C,T,P,j,k]);e.useEffect(()=>{r||(S.value=f(1,{duration:150}),T.value=f(0,{duration:150}),P.value=f(0,{duration:150}),C.value=1,j.value=0,k.value=0)},[r,S,T,P,C,j,k]);const M=t(()=>{!1!==x&&w("impactLight")},[x]),W=a(()=>h.Pinch().enabled(s).onStart(()=>{C.value=S.value}).onUpdate(e=>{const t=C.value*e.scale;S.value=t<u?u+.3*(t-u):t>c?c+.2*(t-c):t}).onEnd(()=>S.value<u?(S.value=y(u,z),T.value=y(0,z),P.value=y(0,z),C.value=u,j.value=0,void(k.value=0)):S.value>c?(S.value=y(c,z),void(C.value=c)):void(C.value=S.value)),[s,S,C,T,P,j,k,u,c]),E=a(()=>h.Pan().minPointers(1).maxPointers(1).onStart(()=>{j.value=T.value,k.value=P.value}).onUpdate(e=>{S.value<=1||(T.value=j.value+e.translationX,P.value=k.value+e.translationY)}).onEnd(()=>{j.value=T.value,k.value=P.value}),[S,T,P,j,k]),F=a(()=>h.Tap().numberOfTaps(2).onEnd(()=>{p(M)(),S.value>1?(S.value=y(1,z),T.value=y(0,z),P.value=y(0,z),C.value=1,j.value=0,k.value=0):(S.value=y(d,z),C.value=d)}),[S,C,T,P,j,k,M,d]),D=a(()=>h.Race(W,E,F),[W,E,F]),H=v(()=>({transform:[{translateX:T.value},{translateY:P.value},{scale:S.value}]}));e.useEffect(()=>{r||L()},[r,L]);const V=i.alt??`Image ${l+1} of ${o}`;return $(m,{gesture:D,children:$(g.View,{style:[R.container,{width:I.width}],children:$(g.Image,{source:i.source,resizeMode:"contain",style:[R.image,H],accessibilityLabel:V,accessible:!0})})})},clamp=(e,t,a)=>Math.min(Math.max(e,t),a),buildStyles=e=>c.create({container:{width:"100%"},carouselWrap:{width:"100%",position:"relative"},imageWrap:{width:"100%",aspectRatio:16/9,backgroundColor:e.colors.background.secondary,overflow:"hidden",borderRadius:e.radius.md,...S},image:{width:"100%",height:"100%"},thumbnailImage:{width:"100%",height:"100%"},counterPill:{position:"absolute",top:12,alignSelf:"center",paddingHorizontal:12,paddingVertical:4,borderRadius:e.radius.full,...S,backgroundColor:"rgba(0,0,0,0.55)"},counterText:{fontSize:e.typography.fontSize.sm,fontWeight:e.typography.fontWeight.semibold}}),buildLightboxStyles=e=>c.create({backdrop:{flex:1,backgroundColor:"#000",justifyContent:"center"},counterPill:{position:"absolute",top:48,alignSelf:"center",paddingHorizontal:14,paddingVertical:6,borderRadius:e.radius.full,...S,backgroundColor:"rgba(0,0,0,0.6)"},counterText:{fontSize:e.typography.fontSize.sm,fontWeight:e.typography.fontWeight.semibold},closeButton:{position:"absolute",top:44,right:16,width:40,height:40,borderRadius:20,...S,alignItems:"center",justifyContent:"center",backgroundColor:"rgba(0,0,0,0.5)"},captionWrap:{position:"absolute",left:0,right:0,bottom:32,paddingHorizontal:24},captionText:{color:"#FFFFFF",fontSize:14,lineHeight:20,textAlign:"center"}}),R=c.create({container:{flex:1,alignItems:"center",justifyContent:"center"},image:{width:"100%",height:"100%"}});export{ImageGallery};export default ImageGallery;

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

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