@chem-po/react-native 0.0.23 → 0.0.25

package/src/components/image/ImageViewModal.tsx

@@ -0,0 +1,254 @@
+import { useScreen } from '@chem-po/react'
+import { Ionicons } from '@expo/vector-icons'
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
+import { Image, Modal, StyleSheet, TouchableOpacity, View } from 'react-native'
+import { Gesture, GestureDetector, GestureHandlerRootView } from 'react-native-gesture-handler'
+import Animated, { useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated'
+import { LoadingLogo } from '../loading/Loading'
+
+interface ImageViewModalProps {
+  isOpen: boolean
+  onClose: () => void
+  src: string | null
+}
+
+export const ImageViewModal: React.FC<ImageViewModalProps> = ({ isOpen, onClose, src }) => {
+  const [loading, setLoading] = useState(true)
+  const screenWidth = useScreen(s => s.width)
+  const screenHeight = useScreen(s => s.height)
+  const [imageSize, setImageSize] = useState({ width: screenWidth / 2, height: screenHeight / 2 })
+
+  // Shared values for zoom and pan (reanimated)
+  const scale = useSharedValue(1)
+  const translateX = useSharedValue(0)
+  const translateY = useSharedValue(0)
+
+  // Saved state for gesture handling
+  const savedScale = useSharedValue(1)
+  const savedTranslateX = useSharedValue(0)
+  const savedTranslateY = useSharedValue(0)
+
+  const { height, width } = useMemo(() => {
+    if (loading) return imageSize
+    const ratio = imageSize.width / imageSize.height
+    let h = Math.min(imageSize.height, screenHeight * 0.9)
+    let w = h * ratio
+    if (w > screenWidth * 0.9) {
+      w = Math.min(imageSize.width, screenWidth * 0.9)
+      h = w / ratio
+    }
+    return { height: h, width: w }
+  }, [screenHeight, screenWidth, imageSize, loading])
+
+  const onLoadStart = useCallback(() => setLoading(true), [])
+  const onLoad = useCallback((e: any) => {
+    const { width: naturalWidth, height: naturalHeight } = e.nativeEvent.source
+    setImageSize({ width: naturalWidth, height: naturalHeight })
+    setLoading(false)
+  }, [])
+
+  // Reset zoom and pan when modal opens/closes
+  const resetTransform = useCallback(() => {
+    scale.value = 1
+    translateX.value = 0
+    translateY.value = 0
+    savedScale.value = 1
+    savedTranslateX.value = 0
+    savedTranslateY.value = 0
+  }, [scale, translateX, translateY, savedScale, savedTranslateX, savedTranslateY])
+
+  // Reset when modal closes or src changes
+  useEffect(() => {
+    if (!isOpen || !src) {
+      resetTransform()
+    }
+  }, [isOpen, src, resetTransform])
+
+  // Pan gesture with worklet
+  const panGesture = Gesture.Pan()
+    .onUpdate(event => {
+      'worklet'
+      // Only allow panning if zoomed in
+      if (savedScale.value > 1) {
+        const newTranslateX = savedTranslateX.value + event.translationX
+        const newTranslateY = savedTranslateY.value + event.translationY
+
+        // Calculate bounds to prevent panning too far
+        const maxTranslateX = (width * savedScale.value - width) / 2
+        const maxTranslateY = (height * savedScale.value - height) / 2
+
+        const boundedTranslateX = Math.max(-maxTranslateX, Math.min(maxTranslateX, newTranslateX))
+        const boundedTranslateY = Math.max(-maxTranslateY, Math.min(maxTranslateY, newTranslateY))
+
+        translateX.value = boundedTranslateX
+        translateY.value = boundedTranslateY
+      }
+    })
+    .onEnd(() => {
+      'worklet'
+      savedTranslateX.value = translateX.value
+      savedTranslateY.value = translateY.value
+    })
+
+  // Pinch gesture with worklet
+  const pinchGesture = Gesture.Pinch()
+    .onUpdate(event => {
+      'worklet'
+      const newScale = savedScale.value * event.scale
+      // Limit zoom between 1x and 5x
+      const boundedScale = Math.max(1, Math.min(5, newScale))
+      scale.value = boundedScale
+
+      // If zooming out to 1x, reset position
+      if (boundedScale <= 1) {
+        translateX.value = 0
+        translateY.value = 0
+      }
+    })
+    .onEnd(() => {
+      'worklet'
+      savedScale.value = scale.value
+      // If scale is close to 1, snap back to 1
+      if (savedScale.value < 1.1) {
+        scale.value = withSpring(1)
+        translateX.value = withSpring(0)
+        translateY.value = withSpring(0)
+        savedScale.value = 1
+        savedTranslateX.value = 0
+        savedTranslateY.value = 0
+      } else {
+        savedTranslateX.value = translateX.value
+        savedTranslateY.value = translateY.value
+      }
+    })
+
+  // Double tap to zoom with worklet
+  const doubleTapGesture = Gesture.Tap()
+    .numberOfTaps(2)
+    .onEnd(() => {
+      'worklet'
+      if (savedScale.value > 1) {
+        // Zoom out
+        scale.value = withSpring(1)
+        translateX.value = withSpring(0)
+        translateY.value = withSpring(0)
+        savedScale.value = 1
+        savedTranslateX.value = 0
+        savedTranslateY.value = 0
+      } else {
+        // Zoom in to 2x
+        scale.value = withSpring(2)
+        savedScale.value = 2
+      }
+    })
+
+  // Combine gestures
+  const combinedGestures = Gesture.Race(
+    doubleTapGesture,
+    Gesture.Simultaneous(panGesture, pinchGesture),
+  )
+
+  // Animated style using reanimated
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      transform: [
+        { scale: scale.value },
+        { translateX: translateX.value },
+        { translateY: translateY.value },
+      ],
+    }
+  })
+
+  if (!isOpen) {
+    return null
+  }
+
+  return (
+    <Modal visible={isOpen} transparent animationType="fade" onRequestClose={onClose}>
+      <GestureHandlerRootView style={styles.gestureRoot}>
+        <View style={styles.modalOverlay}>
+          <TouchableOpacity
+            style={styles.backgroundTouchable}
+            activeOpacity={1}
+            onPress={onClose}
+          />
+          <View style={styles.contentContainer}>
+            <GestureDetector gesture={combinedGestures}>
+              <Animated.View
+                style={[
+                  styles.imageContainer,
+                  {
+                    width,
+                    height,
+                    opacity: loading ? 0 : 1,
+                  },
+                  animatedStyle,
+                ]}>
+                <Image
+                  source={src ? { uri: src } : undefined}
+                  style={styles.image}
+                  onLoadStart={onLoadStart}
+                  onLoad={onLoad}
+                  resizeMode="contain"
+                />
+              </Animated.View>
+            </GestureDetector>
+
+            <TouchableOpacity style={styles.closeButton} onPress={onClose}>
+              <Ionicons name="close" size={24} color="white" />
+            </TouchableOpacity>
+
+            {loading || !src ? (
+              <View style={styles.loadingContainer}>
+                <LoadingLogo isLoading={loading} size={70} />
+              </View>
+            ) : null}
+          </View>
+        </View>
+      </GestureHandlerRootView>
+    </Modal>
+  )
+}
+
+const styles = StyleSheet.create({
+  gestureRoot: {
+    flex: 1,
+  },
+  modalOverlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.7)',
+  },
+  backgroundTouchable: {
+    ...StyleSheet.absoluteFillObject,
+  },
+  contentContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 16,
+  },
+  imageContainer: {
+    overflow: 'hidden',
+    borderRadius: 4,
+  },
+  image: {
+    width: '100%',
+    height: '100%',
+  },
+  closeButton: {
+    position: 'absolute',
+    top: 16,
+    right: 16,
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  loadingContainer: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+})

package/src/components/image/index.ts

@@ -0,0 +1 @@
+export * from './ImageViewModal'

package/src/components/index.ts

@@ -2,7 +2,7 @@ export * from './box'
 export * from './button'
 export * from './feed'
 export * from './form'
+export * from './image'
 export * from './loading'
-export * from './overlay'
 export * from './text'
 export * from './theme'

package/src/components/loading/LoadingImage.tsx

@@ -2,14 +2,14 @@ import { useMounted } from '@chem-po/react'
 import { Ionicons } from '@expo/vector-icons'
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { DimensionValue, Image, StyleSheet, TouchableOpacity, View, ViewStyle } from 'react-native'
-import { ImageViewOverlay } from '../overlay/ImageViewOverlay'
+import { ImageViewModal } from '../image/ImageViewModal'
 import { LoadingLogo } from './Loading'
 
 export interface LoadingImageProps {
   src?: string | null
   loadingOverride?: boolean
   onLoad?: (e: any) => void
-  noFullView?: boolean
+  withFullView?: boolean
   buttonFullView?: boolean
   style?: ViewStyle
   width?: DimensionValue
@@ -25,7 +25,7 @@ export const LoadingImage = ({
   onLoad,
   width,
   height,
-  noFullView,
+  withFullView,
   buttonFullView,
   style,
 }: LoadingImageProps) => {
@@ -77,13 +77,16 @@ export const LoadingImage = ({
         },
         style,
       ]}>
-      {noFullView || buttonFullView ? (
+      {!withFullView || buttonFullView ? (
         ImageComponent
       ) : (
         <TouchableOpacity
           activeOpacity={0.9}
           onPress={() => setViewing(true)}
-          style={styles.imageContainer}>
+          style={{
+            width: width ? undefined : '100%',
+            height: height ? undefined : '100%',
+          }}>
           {ImageComponent}
         </TouchableOpacity>
       )}
@@ -100,11 +103,12 @@ export const LoadingImage = ({
           styles.loadingContainer,
           {
             opacity: loading ? 1 : 0,
+            pointerEvents: loading ? 'auto' : 'none',
           },
         ]}>
         <LoadingLogo isLoading={loading} size={10} />
       </View>
-      {viewing && <ImageViewOverlay src={src ?? emptyPng} onClose={() => setViewing(false)} />}
+      {viewing && <ImageViewModal isOpen src={src ?? emptyPng} onClose={() => setViewing(false)} />}
     </View>
   )
 }

package/lib/commonjs/components/overlay/ImageViewOverlay.js

@@ -1,127 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ImageViewOverlay = void 0;
-var _react = require("@chem-po/react");
-var _vectorIcons = require("@expo/vector-icons");
-var _react2 = _interopRequireWildcard(require("react"));
-var _reactNative = require("react-native");
-var _Loading = require("../loading/Loading");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-const ImageViewOverlay = ({
-  src,
-  onClose
-}) => {
-  const [loading, setLoading] = (0, _react2.useState)(true);
-  const screenWidth = (0, _react.useScreen)(s => s.width);
-  const screenHeight = (0, _react.useScreen)(s => s.height);
-  const [imageSize, setImageSize] = (0, _react2.useState)({
-    width: screenWidth / 2,
-    height: screenHeight / 2
-  });
-  const {
-    height,
-    width
-  } = (0, _react2.useMemo)(() => {
-    if (loading) return imageSize;
-    const ratio = imageSize.width / imageSize.height;
-    let h = Math.min(imageSize.height, screenHeight * 0.9);
-    let w = h * ratio;
-    if (w > screenWidth * 0.9) {
-      w = Math.min(imageSize.width, screenWidth * 0.9);
-      h = w / ratio;
-    }
-    return {
-      height: h,
-      width: w
-    };
-  }, [screenHeight, screenWidth, imageSize, loading]);
-  const onLoadStart = (0, _react2.useCallback)(() => setLoading(true), []);
-  const onLoad = (0, _react2.useCallback)(e => {
-    const {
-      width: naturalWidth,
-      height: naturalHeight
-    } = e.nativeEvent.source;
-    setImageSize({
-      width: naturalWidth,
-      height: naturalHeight
-    });
-    setLoading(false);
-  }, []);
-  return /*#__PURE__*/_react2.default.createElement(_reactNative.Modal, {
-    visible: true,
-    transparent: true,
-    animationType: "fade",
-    onRequestClose: onClose
-  }, /*#__PURE__*/_react2.default.createElement(_reactNative.View, {
-    style: styles.modalOverlay
-  }, /*#__PURE__*/_react2.default.createElement(_reactNative.View, {
-    style: styles.contentContainer
-  }, /*#__PURE__*/_react2.default.createElement(_reactNative.View, {
-    style: [styles.imageContainer, {
-      width,
-      height,
-      opacity: loading ? 0 : 1
-    }]
-  }, /*#__PURE__*/_react2.default.createElement(_reactNative.Image, {
-    source: {
-      uri: src
-    },
-    style: styles.image,
-    onLoadStart: onLoadStart,
-    onLoad: onLoad,
-    resizeMode: "contain"
-  })), /*#__PURE__*/_react2.default.createElement(_reactNative.TouchableOpacity, {
-    style: styles.closeButton,
-    onPress: onClose
-  }, /*#__PURE__*/_react2.default.createElement(_vectorIcons.Ionicons, {
-    name: "close",
-    size: 24,
-    color: "white"
-  })), loading && /*#__PURE__*/_react2.default.createElement(_reactNative.View, {
-    style: styles.loadingContainer
-  }, /*#__PURE__*/_react2.default.createElement(_Loading.LoadingLogo, {
-    isLoading: loading,
-    size: 70
-  })))));
-};
-exports.ImageViewOverlay = ImageViewOverlay;
-const styles = _reactNative.StyleSheet.create({
-  modalOverlay: {
-    flex: 1,
-    backgroundColor: 'rgba(0, 0, 0, 0.7)'
-  },
-  contentContainer: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    padding: 16
-  },
-  imageContainer: {
-    overflow: 'hidden',
-    borderRadius: 4
-  },
-  image: {
-    width: '100%',
-    height: '100%'
-  },
-  closeButton: {
-    position: 'absolute',
-    top: 16,
-    right: 16,
-    width: 40,
-    height: 40,
-    borderRadius: 20,
-    backgroundColor: 'rgba(0, 0, 0, 0.5)',
-    justifyContent: 'center',
-    alignItems: 'center'
-  },
-  loadingContainer: {
-    ..._reactNative.StyleSheet.absoluteFillObject,
-    justifyContent: 'center',
-    alignItems: 'center'
-  }
-});
-//# sourceMappingURL=ImageViewOverlay.js.map

package/lib/commonjs/components/overlay/ImageViewOverlay.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_react","require","_vectorIcons","_react2","_interopRequireWildcard","_reactNative","_Loading","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ImageViewOverlay","src","onClose","loading","setLoading","useState","screenWidth","useScreen","s","width","screenHeight","height","imageSize","setImageSize","useMemo","ratio","h","Math","min","w","onLoadStart","useCallback","onLoad","naturalWidth","naturalHeight","nativeEvent","source","createElement","Modal","visible","transparent","animationType","onRequestClose","View","style","styles","modalOverlay","contentContainer","imageContainer","opacity","Image","uri","image","resizeMode","TouchableOpacity","closeButton","onPress","Ionicons","name","size","color","loadingContainer","LoadingLogo","isLoading","exports","StyleSheet","create","flex","backgroundColor","justifyContent","alignItems","padding","overflow","borderRadius","position","top","right","absoluteFillObject"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/overlay/ImageViewOverlay.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/components/overlay/index.js

@@ -1,17 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _ImageViewOverlay = require("./ImageViewOverlay");
-Object.keys(_ImageViewOverlay).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _ImageViewOverlay[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _ImageViewOverlay[key];
-    }
-  });
-});
-//# sourceMappingURL=index.js.map

package/lib/commonjs/components/overlay/index.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_ImageViewOverlay","require","Object","keys","forEach","key","exports","defineProperty","enumerable","get"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/overlay/index.ts"],"mappings":";;;;;AAAA,IAAAA,iBAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,iBAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAL,iBAAA,CAAAK,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAT,iBAAA,CAAAK,GAAA;IAAA;EAAA;AAAA","ignoreList":[]}

package/lib/module/components/overlay/ImageViewOverlay.js

@@ -1,119 +0,0 @@
-import { useScreen } from '@chem-po/react';
-import { Ionicons } from '@expo/vector-icons';
-import React, { useCallback, useMemo, useState } from 'react';
-import { Image, Modal, StyleSheet, TouchableOpacity, View } from 'react-native';
-import { LoadingLogo } from '../loading/Loading';
-export const ImageViewOverlay = ({
-  src,
-  onClose
-}) => {
-  const [loading, setLoading] = useState(true);
-  const screenWidth = useScreen(s => s.width);
-  const screenHeight = useScreen(s => s.height);
-  const [imageSize, setImageSize] = useState({
-    width: screenWidth / 2,
-    height: screenHeight / 2
-  });
-  const {
-    height,
-    width
-  } = useMemo(() => {
-    if (loading) return imageSize;
-    const ratio = imageSize.width / imageSize.height;
-    let h = Math.min(imageSize.height, screenHeight * 0.9);
-    let w = h * ratio;
-    if (w > screenWidth * 0.9) {
-      w = Math.min(imageSize.width, screenWidth * 0.9);
-      h = w / ratio;
-    }
-    return {
-      height: h,
-      width: w
-    };
-  }, [screenHeight, screenWidth, imageSize, loading]);
-  const onLoadStart = useCallback(() => setLoading(true), []);
-  const onLoad = useCallback(e => {
-    const {
-      width: naturalWidth,
-      height: naturalHeight
-    } = e.nativeEvent.source;
-    setImageSize({
-      width: naturalWidth,
-      height: naturalHeight
-    });
-    setLoading(false);
-  }, []);
-  return /*#__PURE__*/React.createElement(Modal, {
-    visible: true,
-    transparent: true,
-    animationType: "fade",
-    onRequestClose: onClose
-  }, /*#__PURE__*/React.createElement(View, {
-    style: styles.modalOverlay
-  }, /*#__PURE__*/React.createElement(View, {
-    style: styles.contentContainer
-  }, /*#__PURE__*/React.createElement(View, {
-    style: [styles.imageContainer, {
-      width,
-      height,
-      opacity: loading ? 0 : 1
-    }]
-  }, /*#__PURE__*/React.createElement(Image, {
-    source: {
-      uri: src
-    },
-    style: styles.image,
-    onLoadStart: onLoadStart,
-    onLoad: onLoad,
-    resizeMode: "contain"
-  })), /*#__PURE__*/React.createElement(TouchableOpacity, {
-    style: styles.closeButton,
-    onPress: onClose
-  }, /*#__PURE__*/React.createElement(Ionicons, {
-    name: "close",
-    size: 24,
-    color: "white"
-  })), loading && /*#__PURE__*/React.createElement(View, {
-    style: styles.loadingContainer
-  }, /*#__PURE__*/React.createElement(LoadingLogo, {
-    isLoading: loading,
-    size: 70
-  })))));
-};
-const styles = StyleSheet.create({
-  modalOverlay: {
-    flex: 1,
-    backgroundColor: 'rgba(0, 0, 0, 0.7)'
-  },
-  contentContainer: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    padding: 16
-  },
-  imageContainer: {
-    overflow: 'hidden',
-    borderRadius: 4
-  },
-  image: {
-    width: '100%',
-    height: '100%'
-  },
-  closeButton: {
-    position: 'absolute',
-    top: 16,
-    right: 16,
-    width: 40,
-    height: 40,
-    borderRadius: 20,
-    backgroundColor: 'rgba(0, 0, 0, 0.5)',
-    justifyContent: 'center',
-    alignItems: 'center'
-  },
-  loadingContainer: {
-    ...StyleSheet.absoluteFillObject,
-    justifyContent: 'center',
-    alignItems: 'center'
-  }
-});
-//# sourceMappingURL=ImageViewOverlay.js.map

package/lib/module/components/overlay/ImageViewOverlay.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["useScreen","Ionicons","React","useCallback","useMemo","useState","Image","Modal","StyleSheet","TouchableOpacity","View","LoadingLogo","ImageViewOverlay","src","onClose","loading","setLoading","screenWidth","s","width","screenHeight","height","imageSize","setImageSize","ratio","h","Math","min","w","onLoadStart","onLoad","e","naturalWidth","naturalHeight","nativeEvent","source","createElement","visible","transparent","animationType","onRequestClose","style","styles","modalOverlay","contentContainer","imageContainer","opacity","uri","image","resizeMode","closeButton","onPress","name","size","color","loadingContainer","isLoading","create","flex","backgroundColor","justifyContent","alignItems","padding","overflow","borderRadius","position","top","right","absoluteFillObject"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/overlay/ImageViewOverlay.tsx"],"mappings":"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","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-export * from './ImageViewOverlay';
-//# sourceMappingURL=index.js.map

package/lib/module/components/overlay/index.js.map

@@ -1 +0,0 @@
-{"version":3,"names":[],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/overlay/index.ts"],"mappings":"AAAA,cAAc,oBAAoB","ignoreList":[]}

package/lib/typescript/components/overlay/ImageViewOverlay.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-export declare const ImageViewOverlay: ({ src, onClose }: {
-    src: string;
-    onClose: () => void;
-}) => React.JSX.Element;
-//# sourceMappingURL=ImageViewOverlay.d.ts.map

package/lib/typescript/components/overlay/ImageViewOverlay.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ImageViewOverlay.d.ts","sourceRoot":"","sources":["../../../../src/components/overlay/ImageViewOverlay.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAyC,MAAM,OAAO,CAAA;AAI7D,eAAO,MAAM,gBAAgB,GAAI,kBAAkB;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,IAAI,CAAA;CAAE,sBA4DtF,CAAA"}

package/lib/typescript/components/overlay/index.d.ts

@@ -1,2 +0,0 @@
-export * from './ImageViewOverlay';
-//# sourceMappingURL=index.d.ts.map

package/lib/typescript/components/overlay/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/overlay/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAA"}