@webority-technologies/mobile-ui 0.0.4 → 0.0.5

package/lib/commonjs/components/ZoomableImage/ZoomableImage.js

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

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

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ZoomableImage", {
+  enumerable: true,
+  get: function () {
+    return _ZoomableImage.ZoomableImage;
+  }
+});
+var _ZoomableImage = require("./ZoomableImage.js");
+//# sourceMappingURL=index.js.map

package/lib/commonjs/components/index.js

@@ -513,6 +513,12 @@ Object.defineProperty(exports, "Tooltip", {
     return _index65.Tooltip;
   }
 });
+Object.defineProperty(exports, "ZoomableImage", {
+  enumerable: true,
+  get: function () {
+    return _index66.ZoomableImage;
+  }
+});
 Object.defineProperty(exports, "applyMarkdownAction", {
   enumerable: true,
   get: function () {
@@ -682,4 +688,5 @@ var _index62 = require("./Timeline/index.js");
 var _index63 = require("./TimePicker/index.js");
 var _index64 = require("./Toast/index.js");
 var _index65 = require("./Tooltip/index.js");
+var _index66 = require("./ZoomableImage/index.js");
 //# sourceMappingURL=index.js.map

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

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

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

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

package/lib/module/components/index.js

@@ -67,4 +67,5 @@ export { Timeline } from "./Timeline/index.js";
 export { TimePicker } from "./TimePicker/index.js";
 export { Toast, ToastProvider, toast, useToast } from "./Toast/index.js";
 export { Tooltip } from "./Tooltip/index.js";
+export { ZoomableImage } from "./ZoomableImage/index.js";
 //# sourceMappingURL=index.js.map

package/lib/typescript/commonjs/components/ZoomableImage/ZoomableImage.d.ts

@@ -0,0 +1,47 @@
+/**
+ * ZoomableImage — a standalone pinch-to-zoom / pan / double-tap-to-zoom
+ * wrapper for a single piece of content (typically one `<Image>`).
+ *
+ * Reuses the same Reanimated 3 gesture composition `ImageGallery`'s internal
+ * lightbox slide uses (pinch clamped and rubber-banded at its limits, pan
+ * gated to only engage once zoomed in, double-tap toggling between baseline
+ * and `doubleTapScale`), stripped of the carousel-slide concerns that
+ * component needs and this one does not — there is no `index`/`total`/
+ * `active` because a standalone image is always the one being viewed.
+ *
+ * USAGE:
+ *
+ * <ZoomableImage>
+ *   <Image source={{ uri }} style={styles.image} resizeMode="contain" />
+ * </ZoomableImage>
+ *
+ * Takes `children` rather than a `source`/`uri` prop: every real consumer of
+ * this pattern in the fleet wraps an already-authenticated image component
+ * (headers, caching, its own loading state) rather than a bare `<Image>`, so
+ * a `source` prop would force re-implementing that per app. Wrapping keeps
+ * this component ignorant of how the image is fetched.
+ */
+import React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { HapticType } from '../../utils';
+export interface ZoomableImageProps {
+    /** The content to pinch-zoom, pan, and double-tap-zoom — typically a single `<Image>`. */
+    children: React.ReactNode;
+    /** Upper bound on pinch and double-tap zoom. Default 4. */
+    maxScale?: number;
+    /** Lower bound on pinch zoom — the resting scale a pinch springs back to. Default 1. */
+    minScale?: number;
+    /** Scale a double tap zooms to; a second double tap returns to baseline. Default 2. */
+    doubleTapScale?: number;
+    /** Blocks pinch/pan/double-tap and smoothly resets any active zoom back to baseline. Default false. */
+    disabled?: boolean;
+    /** Haptic feedback on double-tap-to-zoom. Pass false to disable; pass a HapticType to override. */
+    haptic?: HapticType | false;
+    /** Style for the outer wrapping view. */
+    style?: StyleProp<ViewStyle>;
+    accessibilityLabel?: string;
+    testID?: string;
+}
+export declare const ZoomableImage: React.FC<ZoomableImageProps>;
+export default ZoomableImage;
+//# sourceMappingURL=ZoomableImage.d.ts.map

package/lib/typescript/commonjs/components/ZoomableImage/index.d.ts

@@ -0,0 +1,3 @@
+export type { ZoomableImageProps } from './ZoomableImage';
+export { ZoomableImage } from './ZoomableImage';
+//# sourceMappingURL=index.d.ts.map

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

@@ -132,4 +132,6 @@ export type { ToastApi, ToastOptions, ToastPosition, ToastProps, ToastProviderPr
 export { Toast, ToastProvider, toast, useToast } from './Toast';
 export type { TooltipPlacement, TooltipProps, TooltipTrigger } from './Tooltip';
 export { Tooltip } from './Tooltip';
+export type { ZoomableImageProps } from './ZoomableImage';
+export { ZoomableImage } from './ZoomableImage';
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/module/components/ZoomableImage/ZoomableImage.d.ts

@@ -0,0 +1,47 @@
+/**
+ * ZoomableImage — a standalone pinch-to-zoom / pan / double-tap-to-zoom
+ * wrapper for a single piece of content (typically one `<Image>`).
+ *
+ * Reuses the same Reanimated 3 gesture composition `ImageGallery`'s internal
+ * lightbox slide uses (pinch clamped and rubber-banded at its limits, pan
+ * gated to only engage once zoomed in, double-tap toggling between baseline
+ * and `doubleTapScale`), stripped of the carousel-slide concerns that
+ * component needs and this one does not — there is no `index`/`total`/
+ * `active` because a standalone image is always the one being viewed.
+ *
+ * USAGE:
+ *
+ * <ZoomableImage>
+ *   <Image source={{ uri }} style={styles.image} resizeMode="contain" />
+ * </ZoomableImage>
+ *
+ * Takes `children` rather than a `source`/`uri` prop: every real consumer of
+ * this pattern in the fleet wraps an already-authenticated image component
+ * (headers, caching, its own loading state) rather than a bare `<Image>`, so
+ * a `source` prop would force re-implementing that per app. Wrapping keeps
+ * this component ignorant of how the image is fetched.
+ */
+import React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { HapticType } from '../../utils/index.js';
+export interface ZoomableImageProps {
+    /** The content to pinch-zoom, pan, and double-tap-zoom — typically a single `<Image>`. */
+    children: React.ReactNode;
+    /** Upper bound on pinch and double-tap zoom. Default 4. */
+    maxScale?: number;
+    /** Lower bound on pinch zoom — the resting scale a pinch springs back to. Default 1. */
+    minScale?: number;
+    /** Scale a double tap zooms to; a second double tap returns to baseline. Default 2. */
+    doubleTapScale?: number;
+    /** Blocks pinch/pan/double-tap and smoothly resets any active zoom back to baseline. Default false. */
+    disabled?: boolean;
+    /** Haptic feedback on double-tap-to-zoom. Pass false to disable; pass a HapticType to override. */
+    haptic?: HapticType | false;
+    /** Style for the outer wrapping view. */
+    style?: StyleProp<ViewStyle>;
+    accessibilityLabel?: string;
+    testID?: string;
+}
+export declare const ZoomableImage: React.FC<ZoomableImageProps>;
+export default ZoomableImage;
+//# sourceMappingURL=ZoomableImage.d.ts.map

package/lib/typescript/module/components/ZoomableImage/index.d.ts

@@ -0,0 +1,3 @@
+export type { ZoomableImageProps } from './ZoomableImage.js';
+export { ZoomableImage } from './ZoomableImage.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -132,4 +132,6 @@ export type { ToastApi, ToastOptions, ToastPosition, ToastProps, ToastProviderPr
 export { Toast, ToastProvider, toast, useToast } from './Toast/index.js';
 export type { TooltipPlacement, TooltipProps, TooltipTrigger } from './Tooltip/index.js';
 export { Tooltip } from './Tooltip/index.js';
+export type { ZoomableImageProps } from './ZoomableImage/index.js';
+export { ZoomableImage } from './ZoomableImage/index.js';
 //# sourceMappingURL=index.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority-technologies/mobile-ui",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "Beautiful, animated, accessible React Native components, theme and form engine for Webority projects.",
   "keywords": [
     "react-native",
@@ -61,7 +61,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@webority-technologies/mobile-core": "^0.0.4"
+    "@webority-technologies/mobile-core": "^0.0.5"
   },
   "peerDependencies": {
     "expo": ">=57.0.0",