@webority/mobile-ui 0.109.2 → 0.109.3

package/dist/canvas-kit/kit.js

@@ -24881,7 +24881,7 @@ var Nx = ({ visible: e, images: t, initialIndex: n, enablePinchZoom: r, showCoun
 		paddingHorizontal: e.space.xl
 	},
 	captionText: {
-		color: "#FFFFFF",
+		color: e.colors["on-scrim"],
 		lineHeight: 21
 	}
 }), Rx = L.create({
@@ -36129,7 +36129,7 @@ var eO = Ft({
 		kind: "WeborityPhone",
 		library: {
 			name: "@webority/mobile-ui",
-			version: "0.109.2"
+			version: "0.109.3"
 		},
 		rendererProtocolVersion: 12,
 		platform: "Phone",

package/dist/canvas-kit/manifest.json

@@ -2,7 +2,7 @@
   "kind": "WeborityPhone",
   "library": {
     "name": "@webority/mobile-ui",
-    "version": "0.109.2"
+    "version": "0.109.3"
   },
   "rendererProtocolVersion": 12,
   "platform": "Phone",

package/dist/canvas-kit/release.json

@@ -1,21 +1,21 @@
 {
   "name": "webority-phone",
-  "version": "0.109.2",
+  "version": "0.109.3",
   "platform": "Phone",
   "kitModuleVersion": 2,
   "rendererProtocolVersion": 12,
   "library": {
     "name": "@webority/mobile-ui",
-    "version": "0.109.2"
+    "version": "0.109.3"
   },
   "files": {
     "manifest.json": {
-      "sha256": "27260836c239fffc279316cdb94f80c3cc1ab6272bf550d0fbf0eab988b58184",
+      "sha256": "3d1c2984b96daf8d4149483fb2205d1758bc84a79745b1e029d05817fd50ef1e",
       "bytes": 625850
     },
     "kit.js": {
-      "sha256": "1f6f1f6e6bf013222a7b884fbf17c0661990282ac9b9dc999d87a5bc529f9c59",
-      "bytes": 5938372
+      "sha256": "c98ee6e1f52209c57194935e819a38906bf1485b5c51f512d1622538409c3ec3",
+      "bytes": 5938383
     },
     "kit.css": {
       "sha256": "e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855",

package/lib/commonjs/components/ImageGallery/ImageGallery.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.ImageGallery=exports.DEFAULT_IMAGE_GALLERY_LABELS=void 0;var cache,_react=_interopRequireWildcard(require("react")),_reactNative=require("react-native"),_reactNativeGestureHandler=require("react-native-gesture-handler"),_reactNativeReanimated=_interopRequireWildcard(require("react-native-reanimated")),_index=require("../../theme/index.js"),_index2=require("../../utils/index.js"),_corners=require("../../utils/corners.js"),_hitSlop=require("../../utils/hitSlop.js"),_defaultIcons=require("../AppIcon/defaultIcons.js"),_index3=require("../Carousel/index.js"),_Modal=require("../Modal/Modal.js"),_index4=require("../Skeleton/index.js"),_index5=require("../Text/index.js"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(e,a){if(!a&&e&&e.__esModule)return e;var t,i,l=Object.defineProperty,r={__proto__:null,default:e};if(Object(e)!==e)return r;if(cache||"function"!=typeof WeakMap||(cache=new WeakMap),cache){if(cache.has(e))return cache.get(e);cache.set(e,r)}for(i in e)"default"!==i&&{}.hasOwnProperty.call(e,i)&&((t=l&&Object.getOwnPropertyDescriptor(e,i))&&(t.get||t.set)?l(r,i,t):r[i]=e[i]);return r}const DEFAULT_IMAGE_GALLERY_LABELS=exports.DEFAULT_IMAGE_GALLERY_LABELS={gallery:"Image gallery",imageOf:(e,a)=>`Image ${e} of ${a}`,openFullscreen:"Tap to open fullscreen",closeGallery:"Close gallery"},MAX_SCALE_FALLBACK=4,MIN_SCALE_FALLBACK=1,DOUBLE_TAP_SCALE_FALLBACK=2,SPRING_CONFIG={damping:18,stiffness:220,mass:1},ImageGallery=({images:e,initialIndex:a=0,showThumbnails:t=!0,showCounter:i=!0,enableLightbox:l=!0,enablePinchZoom:r=!0,onIndexChange:n,haptic:s,loading:o=!1,accessibilityLabel:c,containerStyle:u,testID:d,labels:m})=>{const _=(0,_index.useTheme)(),h=(0,_react.useMemo)(()=>buildStyles(_),[_]),g=(0,_react.useMemo)(()=>({...DEFAULT_IMAGE_GALLERY_LABELS,...m}),[m]),[v,x]=(0,_react.useState)(clamp(a,0,Math.max(0,e.length-1))),[p,b]=(0,_react.useState)(!1),R=(0,_react.useCallback)(e=>{x(e),n?.(e)},[n]),S=(0,_react.useCallback)(()=>{if(!l)return;const e=(0,_index2.resolveHaptic)(s,"selection");e&&(0,_index2.triggerHaptic)(e),b(!0)},[l,s]),y=(0,_react.useCallback)(()=>{const e=(0,_index2.resolveHaptic)(s,"selection");e&&(0,_index2.triggerHaptic)(e),b(!1)},[s]),I=(0,_react.useCallback)((a,t)=>{const i=a.alt??g.imageOf(t+1,e.length);return(0,_jsxRuntime.jsx)(_reactNative.Pressable,{onPress:S,accessibilityRole:"image",accessibilityLabel:i,accessibilityHint:l?g.openFullscreen:void 0,style:h.imageWrap,children:(0,_jsxRuntime.jsx)(_reactNative.Image,{source:a.source,style:h.image,resizeMode:"cover"})})},[l,e.length,S,h,g]),N=(0,_react.useCallback)(e=>(0,_jsxRuntime.jsx)(_reactNative.Image,{source:e.source,style:h.thumbnailImage,resizeMode:"cover"}),[h]),j=(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[h.container,u],testID:d,accessibilityLabel:c??g.gallery,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:h.carouselWrap,accessibilityElementsHidden:p,importantForAccessibility:p?"no-hide-descendants":"auto",children:[(0,_jsxRuntime.jsx)(_index3.Carousel,{data:e,defaultIndex:a,onIndexChange:R,renderItem:I,showPagination:!1,showThumbnails:t,renderThumbnail:N,haptic:s}),i&&e.length>0?(0,_jsxRuntime.jsx)(_reactNative.View,{style:h.counterPill,pointerEvents:"none",children:(0,_jsxRuntime.jsx)(_index5.Text,{variant:"label",weight:"semibold",style:{color:_.colors["on-scrim"]},accessibilityLabel:g.imageOf(v+1,e.length),children:`${v+1} / ${e.length}`})}):null]}),l?(0,_jsxRuntime.jsx)(Lightbox,{visible:p,images:e,initialIndex:v,enablePinchZoom:r,showCounter:i,onClose:y,onIndexChange:R,haptic:s,labels:g}):null]});return o?(0,_jsxRuntime.jsx)(ImageGallerySkeleton,{images:e,showThumbnails:t,showCounter:i,containerStyle:u,testID:d}):j};exports.ImageGallery=ImageGallery,ImageGallery.displayName="ImageGallery";const ImageGallerySkeleton=({images:e,showThumbnails:a=!0,showCounter:t=!0,containerStyle:i,testID:l})=>{const r=(0,_index.useTheme)(),n=Math.min(e?.length||4,6);return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[{width:"100%"},i],testID:l,accessibilityRole:"progressbar",accessibilityState:{busy:!0},"aria-busy":!0,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:{position:"relative"},children:[(0,_jsxRuntime.jsx)(_index4.Skeleton,{width:"100%",height:280,radius:"lg"}),t?(0,_jsxRuntime.jsx)(_reactNative.View,{style:{position:"absolute",top:12,right:12},children:(0,_jsxRuntime.jsx)(_index4.Skeleton,{width:44,height:22,radius:"pill"})}):null]}),a?(0,_jsxRuntime.jsx)(_reactNative.View,{style:{flexDirection:"row",marginTop:r.space.md},children:Array.from({length:n}).map((e,a)=>(0,_jsxRuntime.jsx)(_index4.Skeleton,{width:64,height:64,radius:"md",style:{marginRight:r.space.sm}},`sk-thumb-${a}`))}):null]})};ImageGallerySkeleton.displayName="ImageGallerySkeleton",ImageGallery.Skeleton=ImageGallerySkeleton;const Lightbox=({visible:e,images:a,initialIndex:t,enablePinchZoom:i,showCounter:l,onClose:r,onIndexChange:n,haptic:s,labels:o})=>{const c=(0,_index.useTheme)(),u=(0,_react.useMemo)(()=>buildLightboxStyles(c),[c]),d=(0,_react.useRef)(null),[m,_]=(0,_react.useState)(t),h=(0,_react.useCallback)(e=>{if(e!==m){const a=(0,_index2.resolveHaptic)(s,"selection");a&&(0,_index2.triggerHaptic)(a),_(e),n(e)}},[m,n,s]),g=(0,_react.useCallback)((e,t)=>(0,_jsxRuntime.jsx)(ZoomableImage,{image:e,index:t,total:a.length,active:t===m,enabled:i,maxScale:4,minScale:1,doubleTapScale:2,haptic:s,imageLabel:o.imageOf}),[m,i,a.length,s,o]),v=a[m]?.caption;return(0,_jsxRuntime.jsx)(_Modal.Modal,{visible:e,onClose:r,presentation:"fullScreen",backdropPressClose:!1,animateMount:!1,contentStyle:{backgroundColor:"transparent"},children:(0,_jsxRuntime.jsxs)(_reactNative.View,{style:u.backdrop,children:[(0,_jsxRuntime.jsx)(_index3.Carousel,{ref:d,data:a,defaultIndex:t,onIndexChange:h,renderItem:g,showPagination:!1,haptic:s}),l&&a.length>0?(0,_jsxRuntime.jsx)(_reactNative.View,{style:u.counterPill,pointerEvents:"none",children:(0,_jsxRuntime.jsx)(_index5.Text,{variant:"label",weight:"semibold",style:{color:c.colors["on-scrim"]},accessibilityLabel:o.imageOf(m+1,a.length),children:`${m+1} / ${a.length}`})}):null,(0,_jsxRuntime.jsx)(_reactNative.Pressable,{onPress:r,accessibilityRole:"button",accessibilityLabel:o.closeGallery,style:u.closeButton,hitSlop:12,...(0,_hitSlop.hitSlopMarker)(12),children:(c.settings.icons.close??_defaultIcons.defaultIcons.close)({size:24,color:c.colors["on-scrim"]})}),v?(0,_jsxRuntime.jsx)(_reactNativeReanimated.default.View,{style:u.captionWrap,entering:void 0,accessibilityElementsHidden:!1,children:(0,_jsxRuntime.jsx)(_index5.Text,{variant:"body",align:"center",numberOfLines:3,style:u.captionText,children:v})}):null]})})},ZoomableImage=({image:e,index:a,total:t,active:i,enabled:l,maxScale:r,minScale:n,doubleTapScale:s,haptic:o,imageLabel:c})=>{const u=_reactNative.Dimensions.get("window"),d=(0,_reactNativeReanimated.useSharedValue)(1),m=(0,_reactNativeReanimated.useSharedValue)(1),_=(0,_reactNativeReanimated.useSharedValue)(0),h=(0,_reactNativeReanimated.useSharedValue)(0),g=(0,_reactNativeReanimated.useSharedValue)(0),v=(0,_reactNativeReanimated.useSharedValue)(0),x=(0,_react.useCallback)(()=>{d.value=(0,_reactNativeReanimated.withSpring)(1,SPRING_CONFIG),m.value=1,_.value=(0,_reactNativeReanimated.withSpring)(0,SPRING_CONFIG),h.value=(0,_reactNativeReanimated.withSpring)(0,SPRING_CONFIG),g.value=0,v.value=0},[d,m,_,h,g,v]);_react.default.useEffect(()=>{i||(d.value=(0,_reactNativeReanimated.withTiming)(1,{duration:150}),_.value=(0,_reactNativeReanimated.withTiming)(0,{duration:150}),h.value=(0,_reactNativeReanimated.withTiming)(0,{duration:150}),m.value=1,g.value=0,v.value=0)},[i,d,_,h,m,g,v]);const p=(0,_react.useCallback)(()=>{!1!==o&&(0,_index2.triggerHaptic)("impactLight")},[o]),b=(0,_react.useMemo)(()=>_reactNativeGestureHandler.Gesture.Pinch().enabled(l).onStart(()=>{"worklet";m.value=d.value}).onUpdate(e=>{"worklet";const a=m.value*e.scale;d.value=a<n?n+.3*(a-n):a>r?r+.2*(a-r):a}).onEnd(()=>{"worklet";return d.value<n?(d.value=(0,_reactNativeReanimated.withSpring)(n,SPRING_CONFIG),_.value=(0,_reactNativeReanimated.withSpring)(0,SPRING_CONFIG),h.value=(0,_reactNativeReanimated.withSpring)(0,SPRING_CONFIG),m.value=n,g.value=0,void(v.value=0)):d.value>r?(d.value=(0,_reactNativeReanimated.withSpring)(r,SPRING_CONFIG),void(m.value=r)):void(m.value=d.value)}),[l,d,m,_,h,g,v,n,r]),R=(0,_react.useMemo)(()=>_reactNativeGestureHandler.Gesture.Pan().minPointers(1).maxPointers(1).onStart(()=>{"worklet";g.value=_.value,v.value=h.value}).onUpdate(e=>{"worklet";d.value<=1||(_.value=g.value+e.translationX,h.value=v.value+e.translationY)}).onEnd(()=>{"worklet";g.value=_.value,v.value=h.value}),[d,_,h,g,v]),S=(0,_react.useMemo)(()=>_reactNativeGestureHandler.Gesture.Tap().numberOfTaps(2).onEnd(()=>{"worklet";(0,_reactNativeReanimated.runOnJS)(p)(),d.value>1?(d.value=(0,_reactNativeReanimated.withSpring)(1,SPRING_CONFIG),_.value=(0,_reactNativeReanimated.withSpring)(0,SPRING_CONFIG),h.value=(0,_reactNativeReanimated.withSpring)(0,SPRING_CONFIG),m.value=1,g.value=0,v.value=0):(d.value=(0,_reactNativeReanimated.withSpring)(s,SPRING_CONFIG),m.value=s)}),[d,m,_,h,g,v,p,s]),y=(0,_react.useMemo)(()=>_reactNativeGestureHandler.Gesture.Race(b,R,S),[b,R,S]),I=(0,_reactNativeReanimated.useAnimatedStyle)(()=>({transform:[{translateX:_.value},{translateY:h.value},{scale:d.value}]}));_react.default.useEffect(()=>{i||x()},[i,x]);const N=e.alt??c(a+1,t);return(0,_jsxRuntime.jsx)(_reactNativeGestureHandler.GestureDetector,{gesture:y,children:(0,_jsxRuntime.jsx)(_reactNativeReanimated.default.View,{style:[lightboxImageStyles.container,{width:u.width}],children:(0,_jsxRuntime.jsx)(_reactNativeReanimated.default.Image,{source:e.source,resizeMode:"contain",style:[lightboxImageStyles.image,I],accessibilityLabel:N,accessible:!0})})})},clamp=(e,a,t)=>Math.min(Math.max(e,a),t),buildStyles=e=>_reactNative.StyleSheet.create({container:{width:"100%"},carouselWrap:{width:"100%",position:"relative"},imageWrap:{width:"100%",aspectRatio:16/9,backgroundColor:e.colors["bg-subtle"],overflow:"hidden",borderRadius:e.radius.md,..._corners.smoothCorners},image:{width:"100%",height:"100%"},thumbnailImage:{width:"100%",height:"100%"},counterPill:{position:"absolute",top:12,alignSelf:"center",paddingHorizontal:e.space.md,paddingVertical:e.space.xs,borderRadius:e.radius.pill,..._corners.smoothCorners,backgroundColor:"rgba(0,0,0,0.55)"}}),buildLightboxStyles=e=>_reactNative.StyleSheet.create({backdrop:{flex:1,backgroundColor:"#000",justifyContent:"center"},counterPill:{position:"absolute",top:48,alignSelf:"center",paddingHorizontal:e.space.md,paddingVertical:e.space.xs,borderRadius:e.radius.pill,..._corners.smoothCorners,backgroundColor:"rgba(0,0,0,0.6)"},closeButton:{position:"absolute",top:44,right:16,width:40,height:40,borderRadius:e.radius.pill,..._corners.smoothCorners,alignItems:"center",justifyContent:"center",backgroundColor:"rgba(0,0,0,0.5)"},captionWrap:{position:"absolute",left:0,right:0,bottom:32,paddingHorizontal:e.space.xl},captionText:{color:"#FFFFFF",lineHeight:21}}),lightboxImageStyles=_reactNative.StyleSheet.create({container:{flex:1,alignItems:"center",justifyContent:"center"},image:{width:"100%",height:"100%"}});var _default=exports.default=ImageGallery;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.ImageGallery=exports.DEFAULT_IMAGE_GALLERY_LABELS=void 0;var cache,_react=_interopRequireWildcard(require("react")),_reactNative=require("react-native"),_reactNativeGestureHandler=require("react-native-gesture-handler"),_reactNativeReanimated=_interopRequireWildcard(require("react-native-reanimated")),_index=require("../../theme/index.js"),_index2=require("../../utils/index.js"),_corners=require("../../utils/corners.js"),_hitSlop=require("../../utils/hitSlop.js"),_defaultIcons=require("../AppIcon/defaultIcons.js"),_index3=require("../Carousel/index.js"),_Modal=require("../Modal/Modal.js"),_index4=require("../Skeleton/index.js"),_index5=require("../Text/index.js"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(e,a){if(!a&&e&&e.__esModule)return e;var t,i,l=Object.defineProperty,r={__proto__:null,default:e};if(Object(e)!==e)return r;if(cache||"function"!=typeof WeakMap||(cache=new WeakMap),cache){if(cache.has(e))return cache.get(e);cache.set(e,r)}for(i in e)"default"!==i&&{}.hasOwnProperty.call(e,i)&&((t=l&&Object.getOwnPropertyDescriptor(e,i))&&(t.get||t.set)?l(r,i,t):r[i]=e[i]);return r}const DEFAULT_IMAGE_GALLERY_LABELS=exports.DEFAULT_IMAGE_GALLERY_LABELS={gallery:"Image gallery",imageOf:(e,a)=>`Image ${e} of ${a}`,openFullscreen:"Tap to open fullscreen",closeGallery:"Close gallery"},MAX_SCALE_FALLBACK=4,MIN_SCALE_FALLBACK=1,DOUBLE_TAP_SCALE_FALLBACK=2,SPRING_CONFIG={damping:18,stiffness:220,mass:1},ImageGallery=({images:e,initialIndex:a=0,showThumbnails:t=!0,showCounter:i=!0,enableLightbox:l=!0,enablePinchZoom:r=!0,onIndexChange:n,haptic:s,loading:o=!1,accessibilityLabel:c,containerStyle:u,testID:d,labels:m})=>{const _=(0,_index.useTheme)(),h=(0,_react.useMemo)(()=>buildStyles(_),[_]),g=(0,_react.useMemo)(()=>({...DEFAULT_IMAGE_GALLERY_LABELS,...m}),[m]),[v,x]=(0,_react.useState)(clamp(a,0,Math.max(0,e.length-1))),[p,b]=(0,_react.useState)(!1),R=(0,_react.useCallback)(e=>{x(e),n?.(e)},[n]),S=(0,_react.useCallback)(()=>{if(!l)return;const e=(0,_index2.resolveHaptic)(s,"selection");e&&(0,_index2.triggerHaptic)(e),b(!0)},[l,s]),y=(0,_react.useCallback)(()=>{const e=(0,_index2.resolveHaptic)(s,"selection");e&&(0,_index2.triggerHaptic)(e),b(!1)},[s]),I=(0,_react.useCallback)((a,t)=>{const i=a.alt??g.imageOf(t+1,e.length);return(0,_jsxRuntime.jsx)(_reactNative.Pressable,{onPress:S,accessibilityRole:"image",accessibilityLabel:i,accessibilityHint:l?g.openFullscreen:void 0,style:h.imageWrap,children:(0,_jsxRuntime.jsx)(_reactNative.Image,{source:a.source,style:h.image,resizeMode:"cover"})})},[l,e.length,S,h,g]),N=(0,_react.useCallback)(e=>(0,_jsxRuntime.jsx)(_reactNative.Image,{source:e.source,style:h.thumbnailImage,resizeMode:"cover"}),[h]),j=(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[h.container,u],testID:d,accessibilityLabel:c??g.gallery,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:h.carouselWrap,accessibilityElementsHidden:p,importantForAccessibility:p?"no-hide-descendants":"auto",children:[(0,_jsxRuntime.jsx)(_index3.Carousel,{data:e,defaultIndex:a,onIndexChange:R,renderItem:I,showPagination:!1,showThumbnails:t,renderThumbnail:N,haptic:s}),i&&e.length>0?(0,_jsxRuntime.jsx)(_reactNative.View,{style:h.counterPill,pointerEvents:"none",children:(0,_jsxRuntime.jsx)(_index5.Text,{variant:"label",weight:"semibold",style:{color:_.colors["on-scrim"]},accessibilityLabel:g.imageOf(v+1,e.length),children:`${v+1} / ${e.length}`})}):null]}),l?(0,_jsxRuntime.jsx)(Lightbox,{visible:p,images:e,initialIndex:v,enablePinchZoom:r,showCounter:i,onClose:y,onIndexChange:R,haptic:s,labels:g}):null]});return o?(0,_jsxRuntime.jsx)(ImageGallerySkeleton,{images:e,showThumbnails:t,showCounter:i,containerStyle:u,testID:d}):j};exports.ImageGallery=ImageGallery,ImageGallery.displayName="ImageGallery";const ImageGallerySkeleton=({images:e,showThumbnails:a=!0,showCounter:t=!0,containerStyle:i,testID:l})=>{const r=(0,_index.useTheme)(),n=Math.min(e?.length||4,6);return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[{width:"100%"},i],testID:l,accessibilityRole:"progressbar",accessibilityState:{busy:!0},"aria-busy":!0,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:{position:"relative"},children:[(0,_jsxRuntime.jsx)(_index4.Skeleton,{width:"100%",height:280,radius:"lg"}),t?(0,_jsxRuntime.jsx)(_reactNative.View,{style:{position:"absolute",top:12,right:12},children:(0,_jsxRuntime.jsx)(_index4.Skeleton,{width:44,height:22,radius:"pill"})}):null]}),a?(0,_jsxRuntime.jsx)(_reactNative.View,{style:{flexDirection:"row",marginTop:r.space.md},children:Array.from({length:n}).map((e,a)=>(0,_jsxRuntime.jsx)(_index4.Skeleton,{width:64,height:64,radius:"md",style:{marginRight:r.space.sm}},`sk-thumb-${a}`))}):null]})};ImageGallerySkeleton.displayName="ImageGallerySkeleton",ImageGallery.Skeleton=ImageGallerySkeleton;const Lightbox=({visible:e,images:a,initialIndex:t,enablePinchZoom:i,showCounter:l,onClose:r,onIndexChange:n,haptic:s,labels:o})=>{const c=(0,_index.useTheme)(),u=(0,_react.useMemo)(()=>buildLightboxStyles(c),[c]),d=(0,_react.useRef)(null),[m,_]=(0,_react.useState)(t),h=(0,_react.useCallback)(e=>{if(e!==m){const a=(0,_index2.resolveHaptic)(s,"selection");a&&(0,_index2.triggerHaptic)(a),_(e),n(e)}},[m,n,s]),g=(0,_react.useCallback)((e,t)=>(0,_jsxRuntime.jsx)(ZoomableImage,{image:e,index:t,total:a.length,active:t===m,enabled:i,maxScale:4,minScale:1,doubleTapScale:2,haptic:s,imageLabel:o.imageOf}),[m,i,a.length,s,o]),v=a[m]?.caption;return(0,_jsxRuntime.jsx)(_Modal.Modal,{visible:e,onClose:r,presentation:"fullScreen",backdropPressClose:!1,animateMount:!1,contentStyle:{backgroundColor:"transparent"},children:(0,_jsxRuntime.jsxs)(_reactNative.View,{style:u.backdrop,children:[(0,_jsxRuntime.jsx)(_index3.Carousel,{ref:d,data:a,defaultIndex:t,onIndexChange:h,renderItem:g,showPagination:!1,haptic:s}),l&&a.length>0?(0,_jsxRuntime.jsx)(_reactNative.View,{style:u.counterPill,pointerEvents:"none",children:(0,_jsxRuntime.jsx)(_index5.Text,{variant:"label",weight:"semibold",style:{color:c.colors["on-scrim"]},accessibilityLabel:o.imageOf(m+1,a.length),children:`${m+1} / ${a.length}`})}):null,(0,_jsxRuntime.jsx)(_reactNative.Pressable,{onPress:r,accessibilityRole:"button",accessibilityLabel:o.closeGallery,style:u.closeButton,hitSlop:12,...(0,_hitSlop.hitSlopMarker)(12),children:(c.settings.icons.close??_defaultIcons.defaultIcons.close)({size:24,color:c.colors["on-scrim"]})}),v?(0,_jsxRuntime.jsx)(_reactNativeReanimated.default.View,{style:u.captionWrap,entering:void 0,accessibilityElementsHidden:!1,children:(0,_jsxRuntime.jsx)(_index5.Text,{variant:"body",align:"center",numberOfLines:3,style:u.captionText,children:v})}):null]})})},ZoomableImage=({image:e,index:a,total:t,active:i,enabled:l,maxScale:r,minScale:n,doubleTapScale:s,haptic:o,imageLabel:c})=>{const u=_reactNative.Dimensions.get("window"),d=(0,_reactNativeReanimated.useSharedValue)(1),m=(0,_reactNativeReanimated.useSharedValue)(1),_=(0,_reactNativeReanimated.useSharedValue)(0),h=(0,_reactNativeReanimated.useSharedValue)(0),g=(0,_reactNativeReanimated.useSharedValue)(0),v=(0,_reactNativeReanimated.useSharedValue)(0),x=(0,_react.useCallback)(()=>{d.value=(0,_reactNativeReanimated.withSpring)(1,SPRING_CONFIG),m.value=1,_.value=(0,_reactNativeReanimated.withSpring)(0,SPRING_CONFIG),h.value=(0,_reactNativeReanimated.withSpring)(0,SPRING_CONFIG),g.value=0,v.value=0},[d,m,_,h,g,v]);_react.default.useEffect(()=>{i||(d.value=(0,_reactNativeReanimated.withTiming)(1,{duration:150}),_.value=(0,_reactNativeReanimated.withTiming)(0,{duration:150}),h.value=(0,_reactNativeReanimated.withTiming)(0,{duration:150}),m.value=1,g.value=0,v.value=0)},[i,d,_,h,m,g,v]);const p=(0,_react.useCallback)(()=>{!1!==o&&(0,_index2.triggerHaptic)("impactLight")},[o]),b=(0,_react.useMemo)(()=>_reactNativeGestureHandler.Gesture.Pinch().enabled(l).onStart(()=>{"worklet";m.value=d.value}).onUpdate(e=>{"worklet";const a=m.value*e.scale;d.value=a<n?n+.3*(a-n):a>r?r+.2*(a-r):a}).onEnd(()=>{"worklet";return d.value<n?(d.value=(0,_reactNativeReanimated.withSpring)(n,SPRING_CONFIG),_.value=(0,_reactNativeReanimated.withSpring)(0,SPRING_CONFIG),h.value=(0,_reactNativeReanimated.withSpring)(0,SPRING_CONFIG),m.value=n,g.value=0,void(v.value=0)):d.value>r?(d.value=(0,_reactNativeReanimated.withSpring)(r,SPRING_CONFIG),void(m.value=r)):void(m.value=d.value)}),[l,d,m,_,h,g,v,n,r]),R=(0,_react.useMemo)(()=>_reactNativeGestureHandler.Gesture.Pan().minPointers(1).maxPointers(1).onStart(()=>{"worklet";g.value=_.value,v.value=h.value}).onUpdate(e=>{"worklet";d.value<=1||(_.value=g.value+e.translationX,h.value=v.value+e.translationY)}).onEnd(()=>{"worklet";g.value=_.value,v.value=h.value}),[d,_,h,g,v]),S=(0,_react.useMemo)(()=>_reactNativeGestureHandler.Gesture.Tap().numberOfTaps(2).onEnd(()=>{"worklet";(0,_reactNativeReanimated.runOnJS)(p)(),d.value>1?(d.value=(0,_reactNativeReanimated.withSpring)(1,SPRING_CONFIG),_.value=(0,_reactNativeReanimated.withSpring)(0,SPRING_CONFIG),h.value=(0,_reactNativeReanimated.withSpring)(0,SPRING_CONFIG),m.value=1,g.value=0,v.value=0):(d.value=(0,_reactNativeReanimated.withSpring)(s,SPRING_CONFIG),m.value=s)}),[d,m,_,h,g,v,p,s]),y=(0,_react.useMemo)(()=>_reactNativeGestureHandler.Gesture.Race(b,R,S),[b,R,S]),I=(0,_reactNativeReanimated.useAnimatedStyle)(()=>({transform:[{translateX:_.value},{translateY:h.value},{scale:d.value}]}));_react.default.useEffect(()=>{i||x()},[i,x]);const N=e.alt??c(a+1,t);return(0,_jsxRuntime.jsx)(_reactNativeGestureHandler.GestureDetector,{gesture:y,children:(0,_jsxRuntime.jsx)(_reactNativeReanimated.default.View,{style:[lightboxImageStyles.container,{width:u.width}],children:(0,_jsxRuntime.jsx)(_reactNativeReanimated.default.Image,{source:e.source,resizeMode:"contain",style:[lightboxImageStyles.image,I],accessibilityLabel:N,accessible:!0})})})},clamp=(e,a,t)=>Math.min(Math.max(e,a),t),buildStyles=e=>_reactNative.StyleSheet.create({container:{width:"100%"},carouselWrap:{width:"100%",position:"relative"},imageWrap:{width:"100%",aspectRatio:16/9,backgroundColor:e.colors["bg-subtle"],overflow:"hidden",borderRadius:e.radius.md,..._corners.smoothCorners},image:{width:"100%",height:"100%"},thumbnailImage:{width:"100%",height:"100%"},counterPill:{position:"absolute",top:12,alignSelf:"center",paddingHorizontal:e.space.md,paddingVertical:e.space.xs,borderRadius:e.radius.pill,..._corners.smoothCorners,backgroundColor:"rgba(0,0,0,0.55)"}}),buildLightboxStyles=e=>_reactNative.StyleSheet.create({backdrop:{flex:1,backgroundColor:"#000",justifyContent:"center"},counterPill:{position:"absolute",top:48,alignSelf:"center",paddingHorizontal:e.space.md,paddingVertical:e.space.xs,borderRadius:e.radius.pill,..._corners.smoothCorners,backgroundColor:"rgba(0,0,0,0.6)"},closeButton:{position:"absolute",top:44,right:16,width:40,height:40,borderRadius:e.radius.pill,..._corners.smoothCorners,alignItems:"center",justifyContent:"center",backgroundColor:"rgba(0,0,0,0.5)"},captionWrap:{position:"absolute",left:0,right:0,bottom:32,paddingHorizontal:e.space.xl},captionText:{color:e.colors["on-scrim"],lineHeight:21}}),lightboxImageStyles=_reactNative.StyleSheet.create({container:{flex:1,alignItems:"center",justifyContent:"center"},image:{width:"100%",height:"100%"}});var _default=exports.default=ImageGallery;

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

@@ -1 +1 @@
-"use strict";import React,{useCallback,useMemo,useRef,useState}from"react";import{Dimensions,Image,Pressable,StyleSheet,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{hitSlopMarker}from"../../utils/hitSlop.js";import{defaultIcons}from"../AppIcon/defaultIcons.js";import{Carousel}from"../Carousel/index.js";import{Modal}from"../Modal/Modal.js";import{Skeleton}from"../Skeleton/index.js";import{Text}from"../Text/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export const DEFAULT_IMAGE_GALLERY_LABELS={gallery:"Image gallery",imageOf:(e,t)=>`Image ${e} of ${t}`,openFullscreen:"Tap to open fullscreen",closeGallery:"Close gallery"};const MAX_SCALE_FALLBACK=4,MIN_SCALE_FALLBACK=1,DOUBLE_TAP_SCALE_FALLBACK=2,SPRING_CONFIG={damping:18,stiffness:220,mass:1},ImageGallery=({images:e,initialIndex:t=0,showThumbnails:a=!0,showCounter:l=!0,enableLightbox:i=!0,enablePinchZoom:s=!0,onIndexChange:o,haptic:n,loading:r=!1,accessibilityLabel:c,containerStyle:u,testID:m,labels:d})=>{const h=useTheme(),g=useMemo(()=>buildStyles(h),[h]),p=useMemo(()=>({...DEFAULT_IMAGE_GALLERY_LABELS,...d}),[d]),[b,S]=useState(clamp(t,0,Math.max(0,e.length-1))),[v,x]=useState(!1),y=useCallback(e=>{S(e),o?.(e)},[o]),I=useCallback(()=>{if(!i)return;const e=resolveHaptic(n,"selection");e&&triggerHaptic(e),x(!0)},[i,n]),w=useCallback(()=>{const e=resolveHaptic(n,"selection");e&&triggerHaptic(e),x(!1)},[n]),C=useCallback((t,a)=>{const l=t.alt??p.imageOf(a+1,e.length);return _jsx(Pressable,{onPress:I,accessibilityRole:"image",accessibilityLabel:l,accessibilityHint:i?p.openFullscreen:void 0,style:g.imageWrap,children:_jsx(Image,{source:t.source,style:g.image,resizeMode:"cover"})})},[i,e.length,I,g,p]),_=useCallback(e=>_jsx(Image,{source:e.source,style:g.thumbnailImage,resizeMode:"cover"}),[g]),f=_jsxs(View,{style:[g.container,u],testID:m,accessibilityLabel:c??p.gallery,children:[_jsxs(View,{style:g.carouselWrap,accessibilityElementsHidden:v,importantForAccessibility:v?"no-hide-descendants":"auto",children:[_jsx(Carousel,{data:e,defaultIndex:t,onIndexChange:y,renderItem:C,showPagination:!1,showThumbnails:a,renderThumbnail:_,haptic:n}),l&&e.length>0?_jsx(View,{style:g.counterPill,pointerEvents:"none",children:_jsx(Text,{variant:"label",weight:"semibold",style:{color:h.colors["on-scrim"]},accessibilityLabel:p.imageOf(b+1,e.length),children:`${b+1} / ${e.length}`})}):null]}),i?_jsx(Lightbox,{visible:v,images:e,initialIndex:b,enablePinchZoom:s,showCounter:l,onClose:w,onIndexChange:y,haptic:n,labels:p}):null]});return r?_jsx(ImageGallerySkeleton,{images:e,showThumbnails:a,showCounter:l,containerStyle:u,testID:m}):f};ImageGallery.displayName="ImageGallery";const ImageGallerySkeleton=({images:e,showThumbnails:t=!0,showCounter:a=!0,containerStyle:l,testID:i})=>{const s=useTheme(),o=Math.min(e?.length||4,6);return _jsxs(View,{style:[{width:"100%"},l],testID:i,accessibilityRole:"progressbar",accessibilityState:{busy:!0},"aria-busy":!0,children:[_jsxs(View,{style:{position:"relative"},children:[_jsx(Skeleton,{width:"100%",height:280,radius:"lg"}),a?_jsx(View,{style:{position:"absolute",top:12,right:12},children:_jsx(Skeleton,{width:44,height:22,radius:"pill"})}):null]}),t?_jsx(View,{style:{flexDirection:"row",marginTop:s.space.md},children:Array.from({length:o}).map((e,t)=>_jsx(Skeleton,{width:64,height:64,radius:"md",style:{marginRight:s.space.sm}},`sk-thumb-${t}`))}):null]})};ImageGallerySkeleton.displayName="ImageGallerySkeleton",ImageGallery.Skeleton=ImageGallerySkeleton;const Lightbox=({visible:e,images:t,initialIndex:a,enablePinchZoom:l,showCounter:i,onClose:s,onIndexChange:o,haptic:n,labels:r})=>{const c=useTheme(),u=useMemo(()=>buildLightboxStyles(c),[c]),m=useRef(null),[d,h]=useState(a),g=useCallback(e=>{if(e!==d){const t=resolveHaptic(n,"selection");t&&triggerHaptic(t),h(e),o(e)}},[d,o,n]),p=useCallback((e,a)=>_jsx(ZoomableImage,{image:e,index:a,total:t.length,active:a===d,enabled:l,maxScale:4,minScale:1,doubleTapScale:2,haptic:n,imageLabel:r.imageOf}),[d,l,t.length,n,r]),b=t[d]?.caption;return _jsx(Modal,{visible:e,onClose:s,presentation:"fullScreen",backdropPressClose:!1,animateMount:!1,contentStyle:{backgroundColor:"transparent"},children:_jsxs(View,{style:u.backdrop,children:[_jsx(Carousel,{ref:m,data:t,defaultIndex:a,onIndexChange:g,renderItem:p,showPagination:!1,haptic:n}),i&&t.length>0?_jsx(View,{style:u.counterPill,pointerEvents:"none",children:_jsx(Text,{variant:"label",weight:"semibold",style:{color:c.colors["on-scrim"]},accessibilityLabel:r.imageOf(d+1,t.length),children:`${d+1} / ${t.length}`})}):null,_jsx(Pressable,{onPress:s,accessibilityRole:"button",accessibilityLabel:r.closeGallery,style:u.closeButton,hitSlop:12,...hitSlopMarker(12),children:(c.settings.icons.close??defaultIcons.close)({size:24,color:c.colors["on-scrim"]})}),b?_jsx(Animated.View,{style:u.captionWrap,entering:void 0,accessibilityElementsHidden:!1,children:_jsx(Text,{variant:"body",align:"center",numberOfLines:3,style:u.captionText,children:b})}):null]})})},ZoomableImage=({image:e,index:t,total:a,active:l,enabled:i,maxScale:s,minScale:o,doubleTapScale:n,haptic:r,imageLabel:c})=>{const u=Dimensions.get("window"),m=useSharedValue(1),d=useSharedValue(1),h=useSharedValue(0),g=useSharedValue(0),p=useSharedValue(0),b=useSharedValue(0),S=useCallback(()=>{m.value=withSpring(1,SPRING_CONFIG),d.value=1,h.value=withSpring(0,SPRING_CONFIG),g.value=withSpring(0,SPRING_CONFIG),p.value=0,b.value=0},[m,d,h,g,p,b]);React.useEffect(()=>{l||(m.value=withTiming(1,{duration:150}),h.value=withTiming(0,{duration:150}),g.value=withTiming(0,{duration:150}),d.value=1,p.value=0,b.value=0)},[l,m,h,g,d,p,b]);const v=useCallback(()=>{!1!==r&&triggerHaptic("impactLight")},[r]),x=useMemo(()=>Gesture.Pinch().enabled(i).onStart(()=>{"worklet";d.value=m.value}).onUpdate(e=>{"worklet";const t=d.value*e.scale;m.value=t<o?o+.3*(t-o):t>s?s+.2*(t-s):t}).onEnd(()=>{"worklet";return m.value<o?(m.value=withSpring(o,SPRING_CONFIG),h.value=withSpring(0,SPRING_CONFIG),g.value=withSpring(0,SPRING_CONFIG),d.value=o,p.value=0,void(b.value=0)):m.value>s?(m.value=withSpring(s,SPRING_CONFIG),void(d.value=s)):void(d.value=m.value)}),[i,m,d,h,g,p,b,o,s]),y=useMemo(()=>Gesture.Pan().minPointers(1).maxPointers(1).onStart(()=>{"worklet";p.value=h.value,b.value=g.value}).onUpdate(e=>{"worklet";m.value<=1||(h.value=p.value+e.translationX,g.value=b.value+e.translationY)}).onEnd(()=>{"worklet";p.value=h.value,b.value=g.value}),[m,h,g,p,b]),I=useMemo(()=>Gesture.Tap().numberOfTaps(2).onEnd(()=>{"worklet";runOnJS(v)(),m.value>1?(m.value=withSpring(1,SPRING_CONFIG),h.value=withSpring(0,SPRING_CONFIG),g.value=withSpring(0,SPRING_CONFIG),d.value=1,p.value=0,b.value=0):(m.value=withSpring(n,SPRING_CONFIG),d.value=n)}),[m,d,h,g,p,b,v,n]),w=useMemo(()=>Gesture.Race(x,y,I),[x,y,I]),C=useAnimatedStyle(()=>({transform:[{translateX:h.value},{translateY:g.value},{scale:m.value}]}));React.useEffect(()=>{l||S()},[l,S]);const _=e.alt??c(t+1,a);return _jsx(GestureDetector,{gesture:w,children:_jsx(Animated.View,{style:[lightboxImageStyles.container,{width:u.width}],children:_jsx(Animated.Image,{source:e.source,resizeMode:"contain",style:[lightboxImageStyles.image,C],accessibilityLabel:_,accessible:!0})})})},clamp=(e,t,a)=>Math.min(Math.max(e,t),a),buildStyles=e=>StyleSheet.create({container:{width:"100%"},carouselWrap:{width:"100%",position:"relative"},imageWrap:{width:"100%",aspectRatio:16/9,backgroundColor:e.colors["bg-subtle"],overflow:"hidden",borderRadius:e.radius.md,...smoothCorners},image:{width:"100%",height:"100%"},thumbnailImage:{width:"100%",height:"100%"},counterPill:{position:"absolute",top:12,alignSelf:"center",paddingHorizontal:e.space.md,paddingVertical:e.space.xs,borderRadius:e.radius.pill,...smoothCorners,backgroundColor:"rgba(0,0,0,0.55)"}}),buildLightboxStyles=e=>StyleSheet.create({backdrop:{flex:1,backgroundColor:"#000",justifyContent:"center"},counterPill:{position:"absolute",top:48,alignSelf:"center",paddingHorizontal:e.space.md,paddingVertical:e.space.xs,borderRadius:e.radius.pill,...smoothCorners,backgroundColor:"rgba(0,0,0,0.6)"},closeButton:{position:"absolute",top:44,right:16,width:40,height:40,borderRadius:e.radius.pill,...smoothCorners,alignItems:"center",justifyContent:"center",backgroundColor:"rgba(0,0,0,0.5)"},captionWrap:{position:"absolute",left:0,right:0,bottom:32,paddingHorizontal:e.space.xl},captionText:{color:"#FFFFFF",lineHeight:21}}),lightboxImageStyles=StyleSheet.create({container:{flex:1,alignItems:"center",justifyContent:"center"},image:{width:"100%",height:"100%"}});export{ImageGallery};export default ImageGallery;
+"use strict";import React,{useCallback,useMemo,useRef,useState}from"react";import{Dimensions,Image,Pressable,StyleSheet,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{hitSlopMarker}from"../../utils/hitSlop.js";import{defaultIcons}from"../AppIcon/defaultIcons.js";import{Carousel}from"../Carousel/index.js";import{Modal}from"../Modal/Modal.js";import{Skeleton}from"../Skeleton/index.js";import{Text}from"../Text/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export const DEFAULT_IMAGE_GALLERY_LABELS={gallery:"Image gallery",imageOf:(e,t)=>`Image ${e} of ${t}`,openFullscreen:"Tap to open fullscreen",closeGallery:"Close gallery"};const MAX_SCALE_FALLBACK=4,MIN_SCALE_FALLBACK=1,DOUBLE_TAP_SCALE_FALLBACK=2,SPRING_CONFIG={damping:18,stiffness:220,mass:1},ImageGallery=({images:e,initialIndex:t=0,showThumbnails:a=!0,showCounter:l=!0,enableLightbox:i=!0,enablePinchZoom:s=!0,onIndexChange:o,haptic:n,loading:r=!1,accessibilityLabel:c,containerStyle:u,testID:m,labels:d})=>{const h=useTheme(),g=useMemo(()=>buildStyles(h),[h]),p=useMemo(()=>({...DEFAULT_IMAGE_GALLERY_LABELS,...d}),[d]),[b,S]=useState(clamp(t,0,Math.max(0,e.length-1))),[v,x]=useState(!1),y=useCallback(e=>{S(e),o?.(e)},[o]),I=useCallback(()=>{if(!i)return;const e=resolveHaptic(n,"selection");e&&triggerHaptic(e),x(!0)},[i,n]),w=useCallback(()=>{const e=resolveHaptic(n,"selection");e&&triggerHaptic(e),x(!1)},[n]),C=useCallback((t,a)=>{const l=t.alt??p.imageOf(a+1,e.length);return _jsx(Pressable,{onPress:I,accessibilityRole:"image",accessibilityLabel:l,accessibilityHint:i?p.openFullscreen:void 0,style:g.imageWrap,children:_jsx(Image,{source:t.source,style:g.image,resizeMode:"cover"})})},[i,e.length,I,g,p]),_=useCallback(e=>_jsx(Image,{source:e.source,style:g.thumbnailImage,resizeMode:"cover"}),[g]),f=_jsxs(View,{style:[g.container,u],testID:m,accessibilityLabel:c??p.gallery,children:[_jsxs(View,{style:g.carouselWrap,accessibilityElementsHidden:v,importantForAccessibility:v?"no-hide-descendants":"auto",children:[_jsx(Carousel,{data:e,defaultIndex:t,onIndexChange:y,renderItem:C,showPagination:!1,showThumbnails:a,renderThumbnail:_,haptic:n}),l&&e.length>0?_jsx(View,{style:g.counterPill,pointerEvents:"none",children:_jsx(Text,{variant:"label",weight:"semibold",style:{color:h.colors["on-scrim"]},accessibilityLabel:p.imageOf(b+1,e.length),children:`${b+1} / ${e.length}`})}):null]}),i?_jsx(Lightbox,{visible:v,images:e,initialIndex:b,enablePinchZoom:s,showCounter:l,onClose:w,onIndexChange:y,haptic:n,labels:p}):null]});return r?_jsx(ImageGallerySkeleton,{images:e,showThumbnails:a,showCounter:l,containerStyle:u,testID:m}):f};ImageGallery.displayName="ImageGallery";const ImageGallerySkeleton=({images:e,showThumbnails:t=!0,showCounter:a=!0,containerStyle:l,testID:i})=>{const s=useTheme(),o=Math.min(e?.length||4,6);return _jsxs(View,{style:[{width:"100%"},l],testID:i,accessibilityRole:"progressbar",accessibilityState:{busy:!0},"aria-busy":!0,children:[_jsxs(View,{style:{position:"relative"},children:[_jsx(Skeleton,{width:"100%",height:280,radius:"lg"}),a?_jsx(View,{style:{position:"absolute",top:12,right:12},children:_jsx(Skeleton,{width:44,height:22,radius:"pill"})}):null]}),t?_jsx(View,{style:{flexDirection:"row",marginTop:s.space.md},children:Array.from({length:o}).map((e,t)=>_jsx(Skeleton,{width:64,height:64,radius:"md",style:{marginRight:s.space.sm}},`sk-thumb-${t}`))}):null]})};ImageGallerySkeleton.displayName="ImageGallerySkeleton",ImageGallery.Skeleton=ImageGallerySkeleton;const Lightbox=({visible:e,images:t,initialIndex:a,enablePinchZoom:l,showCounter:i,onClose:s,onIndexChange:o,haptic:n,labels:r})=>{const c=useTheme(),u=useMemo(()=>buildLightboxStyles(c),[c]),m=useRef(null),[d,h]=useState(a),g=useCallback(e=>{if(e!==d){const t=resolveHaptic(n,"selection");t&&triggerHaptic(t),h(e),o(e)}},[d,o,n]),p=useCallback((e,a)=>_jsx(ZoomableImage,{image:e,index:a,total:t.length,active:a===d,enabled:l,maxScale:4,minScale:1,doubleTapScale:2,haptic:n,imageLabel:r.imageOf}),[d,l,t.length,n,r]),b=t[d]?.caption;return _jsx(Modal,{visible:e,onClose:s,presentation:"fullScreen",backdropPressClose:!1,animateMount:!1,contentStyle:{backgroundColor:"transparent"},children:_jsxs(View,{style:u.backdrop,children:[_jsx(Carousel,{ref:m,data:t,defaultIndex:a,onIndexChange:g,renderItem:p,showPagination:!1,haptic:n}),i&&t.length>0?_jsx(View,{style:u.counterPill,pointerEvents:"none",children:_jsx(Text,{variant:"label",weight:"semibold",style:{color:c.colors["on-scrim"]},accessibilityLabel:r.imageOf(d+1,t.length),children:`${d+1} / ${t.length}`})}):null,_jsx(Pressable,{onPress:s,accessibilityRole:"button",accessibilityLabel:r.closeGallery,style:u.closeButton,hitSlop:12,...hitSlopMarker(12),children:(c.settings.icons.close??defaultIcons.close)({size:24,color:c.colors["on-scrim"]})}),b?_jsx(Animated.View,{style:u.captionWrap,entering:void 0,accessibilityElementsHidden:!1,children:_jsx(Text,{variant:"body",align:"center",numberOfLines:3,style:u.captionText,children:b})}):null]})})},ZoomableImage=({image:e,index:t,total:a,active:l,enabled:i,maxScale:s,minScale:o,doubleTapScale:n,haptic:r,imageLabel:c})=>{const u=Dimensions.get("window"),m=useSharedValue(1),d=useSharedValue(1),h=useSharedValue(0),g=useSharedValue(0),p=useSharedValue(0),b=useSharedValue(0),S=useCallback(()=>{m.value=withSpring(1,SPRING_CONFIG),d.value=1,h.value=withSpring(0,SPRING_CONFIG),g.value=withSpring(0,SPRING_CONFIG),p.value=0,b.value=0},[m,d,h,g,p,b]);React.useEffect(()=>{l||(m.value=withTiming(1,{duration:150}),h.value=withTiming(0,{duration:150}),g.value=withTiming(0,{duration:150}),d.value=1,p.value=0,b.value=0)},[l,m,h,g,d,p,b]);const v=useCallback(()=>{!1!==r&&triggerHaptic("impactLight")},[r]),x=useMemo(()=>Gesture.Pinch().enabled(i).onStart(()=>{"worklet";d.value=m.value}).onUpdate(e=>{"worklet";const t=d.value*e.scale;m.value=t<o?o+.3*(t-o):t>s?s+.2*(t-s):t}).onEnd(()=>{"worklet";return m.value<o?(m.value=withSpring(o,SPRING_CONFIG),h.value=withSpring(0,SPRING_CONFIG),g.value=withSpring(0,SPRING_CONFIG),d.value=o,p.value=0,void(b.value=0)):m.value>s?(m.value=withSpring(s,SPRING_CONFIG),void(d.value=s)):void(d.value=m.value)}),[i,m,d,h,g,p,b,o,s]),y=useMemo(()=>Gesture.Pan().minPointers(1).maxPointers(1).onStart(()=>{"worklet";p.value=h.value,b.value=g.value}).onUpdate(e=>{"worklet";m.value<=1||(h.value=p.value+e.translationX,g.value=b.value+e.translationY)}).onEnd(()=>{"worklet";p.value=h.value,b.value=g.value}),[m,h,g,p,b]),I=useMemo(()=>Gesture.Tap().numberOfTaps(2).onEnd(()=>{"worklet";runOnJS(v)(),m.value>1?(m.value=withSpring(1,SPRING_CONFIG),h.value=withSpring(0,SPRING_CONFIG),g.value=withSpring(0,SPRING_CONFIG),d.value=1,p.value=0,b.value=0):(m.value=withSpring(n,SPRING_CONFIG),d.value=n)}),[m,d,h,g,p,b,v,n]),w=useMemo(()=>Gesture.Race(x,y,I),[x,y,I]),C=useAnimatedStyle(()=>({transform:[{translateX:h.value},{translateY:g.value},{scale:m.value}]}));React.useEffect(()=>{l||S()},[l,S]);const _=e.alt??c(t+1,a);return _jsx(GestureDetector,{gesture:w,children:_jsx(Animated.View,{style:[lightboxImageStyles.container,{width:u.width}],children:_jsx(Animated.Image,{source:e.source,resizeMode:"contain",style:[lightboxImageStyles.image,C],accessibilityLabel:_,accessible:!0})})})},clamp=(e,t,a)=>Math.min(Math.max(e,t),a),buildStyles=e=>StyleSheet.create({container:{width:"100%"},carouselWrap:{width:"100%",position:"relative"},imageWrap:{width:"100%",aspectRatio:16/9,backgroundColor:e.colors["bg-subtle"],overflow:"hidden",borderRadius:e.radius.md,...smoothCorners},image:{width:"100%",height:"100%"},thumbnailImage:{width:"100%",height:"100%"},counterPill:{position:"absolute",top:12,alignSelf:"center",paddingHorizontal:e.space.md,paddingVertical:e.space.xs,borderRadius:e.radius.pill,...smoothCorners,backgroundColor:"rgba(0,0,0,0.55)"}}),buildLightboxStyles=e=>StyleSheet.create({backdrop:{flex:1,backgroundColor:"#000",justifyContent:"center"},counterPill:{position:"absolute",top:48,alignSelf:"center",paddingHorizontal:e.space.md,paddingVertical:e.space.xs,borderRadius:e.radius.pill,...smoothCorners,backgroundColor:"rgba(0,0,0,0.6)"},closeButton:{position:"absolute",top:44,right:16,width:40,height:40,borderRadius:e.radius.pill,...smoothCorners,alignItems:"center",justifyContent:"center",backgroundColor:"rgba(0,0,0,0.5)"},captionWrap:{position:"absolute",left:0,right:0,bottom:32,paddingHorizontal:e.space.xl},captionText:{color:e.colors["on-scrim"],lineHeight:21}}),lightboxImageStyles=StyleSheet.create({container:{flex:1,alignItems:"center",justifyContent:"center"},image:{width:"100%",height:"100%"}});export{ImageGallery};export default ImageGallery;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/mobile-ui",
-  "version": "0.109.2",
+  "version": "0.109.3",
   "description": "Beautiful, animated, accessible React Native components, theme and form engine for Webority projects.",
   "keywords": [
     "react-native",
@@ -100,8 +100,8 @@
     "react-native-safe-area-context": ">=5.4.0",
     "react-native-svg": ">=15.0.0",
     "react-native-worklets": ">=0.10.0",
-    "@webority/canvas-kit": "0.109.2",
-    "@webority/mobile-core": "0.109.2"
+    "@webority/mobile-core": "0.109.3",
+    "@webority/canvas-kit": "0.109.3"
   },
   "peerDependenciesMeta": {
     "@react-navigation/bottom-tabs": {
@@ -170,10 +170,10 @@
     "react-test-renderer": "19.2.8",
     "rimraf": "6.1.3",
     "typescript": "5.9.3",
-    "@webority/canvas-kit": "0.109.2",
-    "@webority/mobile-core": "0.109.2",
+    "@webority/canvas-kit": "0.109.3",
+    "@webority/tokens": "0.109.3",
     "@webority/mobile-dev": "0.0.0",
-    "@webority/tokens": "0.109.2"
+    "@webority/mobile-core": "0.109.3"
   },
   "scripts": {
     "build": "bob build && node ../mobile-dev/scripts/minify-lib.mjs && node -e \"require('node:fs').rmSync('dist/canvas-kit',{recursive:true,force:true})\" && node ../canvas-kit/dist/cli.js build --config canvas-kit.json --out dist/canvas-kit",