@lmb-it/kitsconcerto-native 0.1.285 → 0.1.287

package/components/ImageCropper/index.cjs

@@ -0,0 +1,640 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var reactNative = require('react-native');
+var Slider = require('@react-native-community/slider');
+var index_native = require('../../primitives/Icon/index.cjs');
+require('../../contexts/DialogContext.cjs');
+require('../../contexts/PermissionsContext.cjs');
+require('../../contexts/BreadcrumbContext.cjs');
+var useComponentDefaults = require('../../hooks/useComponentDefaults.cjs');
+var useResolvedElementStyles = require('../../hooks/useResolvedElementStyles.cjs');
+var cropperState = require('./cropperState.cjs');
+var geometry = require('./geometry.cjs');
+var pinchZoom = require('./pinchZoom.cjs');
+var constants = require('./constants.cjs');
+var useImageSource_native = require('./useImageSource.cjs');
+var encode_native = require('./encode.cjs');
+var encoderRegistry = require('./encoderRegistry.cjs');
+
+const gestureHandler = (() => {
+  try {
+    return require("react-native-gesture-handler");
+  } catch {
+    return null;
+  }
+})();
+const StageFrame = ({ gesture, children }) => {
+  if (!gestureHandler || !gesture) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+  const { GestureDetector, GestureHandlerRootView } = gestureHandler;
+  return /* @__PURE__ */ jsxRuntime.jsx(GestureHandlerRootView, { style: { width: "100%" }, children: /* @__PURE__ */ jsxRuntime.jsx(GestureDetector, { gesture, children }) });
+};
+const touchDistance = (event) => {
+  const touches = event.nativeEvent.touches;
+  if (touches.length < 2) return 0;
+  const [a, b] = touches;
+  return Math.hypot((b.pageX ?? 0) - (a.pageX ?? 0), (b.pageY ?? 0) - (a.pageY ?? 0));
+};
+const touchMidpoint = (event, origin) => {
+  const touches = event.nativeEvent.touches;
+  if (touches.length < 2) return { x: 0, y: 0 };
+  const [a, b] = touches;
+  return {
+    x: ((a.pageX ?? 0) + (b.pageX ?? 0)) / 2 - origin.x,
+    y: ((a.pageY ?? 0) + (b.pageY ?? 0)) / 2 - origin.y
+  };
+};
+function ImageCropper(rawProps) {
+  const { mergedProps: props, elementStyles } = useComponentDefaults.default("ImageCropper", rawProps);
+  const el = useResolvedElementStyles.default(elementStyles);
+  const {
+    source,
+    aspect = constants.DEFAULT_ASPECT,
+    maskShape = "rectangle",
+    output,
+    onCrop,
+    onCancel,
+    onError,
+    onInteractionChange,
+    title,
+    hidePreview,
+    hideGrid,
+    maxZoom = constants.DEFAULT_MAX_ZOOM,
+    labels,
+    testID
+  } = props;
+  const text = { ...constants.DEFAULT_LABELS, ...labels ?? {} };
+  const ratio = geometry.aspectOf(aspect);
+  const isCircle = maskShape === "circle";
+  const { image, loading, error } = useImageSource_native.useImageSource(source, onError);
+  const [viewport, setViewport] = React.useState({ width: 0, height: 0 });
+  const originRef = React.useRef({ x: 0, y: 0 });
+  const stageRef = React.useRef(null);
+  const onStageLayout = React.useCallback((e) => {
+    const { width, height } = e.nativeEvent.layout;
+    setViewport({ width: Math.round(width), height: Math.round(height) });
+    stageRef.current?.measureInWindow((x, y) => {
+      originRef.current = { x, y };
+    });
+  }, []);
+  const config = React.useMemo(
+    () => ({
+      source: image ? { width: image.width, height: image.height } : { width: 1, height: 1 },
+      viewport: viewport.width > 0 ? viewport : { width: 1, height: 1 },
+      ratio,
+      maxZoom,
+      // ⚠️ ALWAYS FALSE ON NATIVE — see the note at the top of the file.
+      resizable: false,
+      inset: constants.STAGE_INSET_NATIVE,
+      squareFactor: constants.SQUARE_CROP_FACTOR
+    }),
+    [image, viewport, ratio, maxZoom]
+  );
+  const [state, dispatch] = React.useReducer(cropperState.cropperReducer, config, cropperState.initialCropperState);
+  React.useEffect(() => {
+    dispatch({ type: "configure", config });
+  }, [config]);
+  const ready = !!image && viewport.width > 1 && viewport.height > 1;
+  const pinchRef = React.useRef(null);
+  const lastPanRef = React.useRef({ x: 0, y: 0 });
+  const scaleRef = React.useRef(state.transform.scale);
+  scaleRef.current = state.transform.scale;
+  const resetPan = React.useCallback(() => {
+    lastPanRef.current = { x: 0, y: 0 };
+  }, []);
+  const beginGesture = React.useCallback(() => {
+    pinchRef.current = null;
+    lastPanRef.current = { x: 0, y: 0 };
+  }, []);
+  const applyPan = React.useCallback((dx, dy) => {
+    dispatch({
+      type: "pan",
+      dx: dx - lastPanRef.current.x,
+      dy: dy - lastPanRef.current.y
+    });
+    lastPanRef.current = { x: dx, y: dy };
+  }, []);
+  const applyPinch = React.useCallback((reading, anchor) => {
+    if (!pinchZoom.isUsablePinchReading(reading)) return;
+    const pinch = pinchRef.current;
+    if (!pinch) {
+      pinchRef.current = { reading, scale: scaleRef.current };
+      return;
+    }
+    dispatch({ type: "zoomAt", anchor, scale: pinchZoom.pinchScale(pinch, reading) });
+  }, []);
+  const interactingRef = React.useRef(false);
+  const setInteracting = React.useCallback(
+    (active) => {
+      if (interactingRef.current === active) return;
+      interactingRef.current = active;
+      onInteractionChange?.(active);
+    },
+    [onInteractionChange]
+  );
+  const detector = React.useMemo(() => {
+    if (!gestureHandler) return null;
+    const { Gesture } = gestureHandler;
+    const pan = Gesture.Pan().runOnJS(true).onBegin(() => {
+      setInteracting(true);
+      resetPan();
+    }).onUpdate((e) => {
+      if (e.numberOfPointers > 1 || pinchRef.current) {
+        lastPanRef.current = { x: e.translationX, y: e.translationY };
+        return;
+      }
+      applyPan(e.translationX, e.translationY);
+    }).onFinalize(() => {
+      setInteracting(false);
+      resetPan();
+    });
+    const pinch = Gesture.Pinch().runOnJS(true).onBegin(() => {
+      setInteracting(true);
+      pinchRef.current = { reading: 1, scale: scaleRef.current };
+    }).onUpdate((e) => {
+      applyPinch(e.scale, { x: e.focalX, y: e.focalY });
+    }).onFinalize(() => {
+      setInteracting(false);
+      pinchRef.current = null;
+    });
+    return Gesture.Simultaneous(pan, pinch);
+  }, [applyPan, applyPinch, resetPan, setInteracting]);
+  const scrollBlocker = React.useMemo(
+    () => reactNative.PanResponder.create({
+      onStartShouldSetPanResponder: () => true,
+      onMoveShouldSetPanResponder: () => true,
+      onPanResponderTerminationRequest: () => false,
+      onShouldBlockNativeResponder: () => true,
+      onPanResponderGrant: () => setInteracting(true),
+      onPanResponderRelease: () => setInteracting(false),
+      onPanResponderTerminate: () => setInteracting(false)
+    }),
+    [setInteracting]
+  );
+  const responder = React.useMemo(
+    () => reactNative.PanResponder.create({
+      onStartShouldSetPanResponder: () => true,
+      onMoveShouldSetPanResponder: () => true,
+      // ⚠️ Refuses a JS-level handover. It does NOT save a vertical
+      // drag inside a ScrollView — that cancellation is native and
+      // never asks — but it does hold the gesture against JS
+      // responders nearer the touch.
+      onPanResponderTerminationRequest: () => false,
+      onPanResponderGrant: () => {
+        setInteracting(true);
+        beginGesture();
+      },
+      onPanResponderMove: (event, gesture) => {
+        const touches = event.nativeEvent.touches.length;
+        if (touches >= 2) {
+          applyPinch(
+            touchDistance(event),
+            touchMidpoint(event, originRef.current)
+          );
+          return;
+        }
+        if (pinchRef.current) {
+          pinchRef.current = null;
+          lastPanRef.current = { x: gesture.dx, y: gesture.dy };
+          return;
+        }
+        applyPan(gesture.dx, gesture.dy);
+      },
+      onPanResponderRelease: () => {
+        setInteracting(false);
+        beginGesture();
+      },
+      onPanResponderTerminate: () => {
+        setInteracting(false);
+        beginGesture();
+      }
+    }),
+    [applyPan, applyPinch, beginGesture, setInteracting]
+  );
+  const [busy, setBusy] = React.useState(false);
+  const canSave = ready && !busy && encoderRegistry.hasCropEncoder();
+  const save = React.useCallback(async () => {
+    if (!ready || !image || busy) return;
+    setBusy(true);
+    try {
+      const rect = geometry.cropToSourceRect(state.crop, state.transform, config.source, state.rotation);
+      const format = output?.format ?? constants.DEFAULT_FORMAT;
+      const result = await encode_native.encodeCropNative(
+        image.uri,
+        rect,
+        config.source,
+        state.rotation,
+        {
+          width: output?.maxWidth,
+          height: output?.maxHeight,
+          bytes: output?.maxBytes ?? constants.DEFAULT_MAX_BYTES
+        },
+        format
+      );
+      if (!result.withinBudget) {
+        onError?.({
+          reason: "too-large",
+          message: `The smallest version this could produce is ${Math.round(result.size / 1024)} KB.`
+        });
+      }
+      const { withinBudget: _ignored, ...payload } = result;
+      onCrop?.(payload);
+    } catch (cause) {
+      onError?.({
+        reason: "encode-failed",
+        message: cause instanceof Error ? cause.message : "The image could not be saved."
+      });
+    } finally {
+      setBusy(false);
+    }
+  }, [ready, image, busy, state, config.source, output, onCrop, onError]);
+  const { crop, transform, rotation } = state;
+  const oriented = image ? geometry.orientedSize({ width: image.width, height: image.height }, rotation) : null;
+  const band = cropperState.scaleRange(state);
+  const zoomLabel = Number.isFinite(band.min) && band.min > 0 ? `${Math.round(transform.scale / band.min * 100)}%` : "100%";
+  const windowRadius = isCircle ? Math.max(crop.width, crop.height) / 2 : Number(el.mask?.borderRadius ?? 0);
+  const SCRIM = Math.ceil(Math.max(viewport.width, viewport.height)) || 1;
+  const aspectLabel = `${aspect[0]}:${aspect[1]}`;
+  const subtitle = ready ? "Drag to move \xB7 pinch to zoom" : isCircle ? `Circle \xB7 ${aspectLabel}` : `Banner \xB7 ${aspectLabel}`;
+  const budgetKb = Math.round((output?.maxBytes ?? constants.DEFAULT_MAX_BYTES) / 1024);
+  const previewWidth = isCircle ? 60 : 160;
+  const previewHeight = isCircle ? 60 : Math.round(160 / ratio);
+  const stageTool = (icon, label, onPress) => /* @__PURE__ */ jsxRuntime.jsxs(
+    reactNative.Pressable,
+    {
+      onPress,
+      disabled: !ready,
+      accessibilityRole: "button",
+      accessibilityLabel: label,
+      accessibilityState: { disabled: !ready },
+      style: { width: 58, alignItems: "center", gap: 4 },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: {
+          width: 44,
+          height: 44,
+          borderRadius: 22,
+          backgroundColor: "rgba(255,255,255,0.09)",
+          alignItems: "center",
+          justifyContent: "center"
+        }, children: /* @__PURE__ */ jsxRuntime.jsx(index_native.Icon, { name: icon, size: 19, color: "#FFFFFF" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: { fontSize: 11, fontWeight: "600", color: "rgba(255,255,255,0.75)" }, children: label })
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactNative.View,
+    {
+      testID,
+      style: [
+        /**
+         * ⚠️ NO `flex: 1` HERE, THOUGH THE MOCKUP IS FULL-SCREEN. A
+         * child with `flex: 1` inside a parent that was never given a
+         * height measures 0 on Yoga, and this component does not own
+         * the screen — a consumer mounts it in a modal, a sheet or a
+         * form. The footer's `marginTop: 'auto'` gets the mockup's
+         * pinned-to-the-bottom footer when the parent DOES bound the
+         * height, and does nothing when it does not.
+         */
+        { width: "100%" },
+        el.root,
+        /**
+         * ⛔ THE PHONE CROPPER IS A DARK SHEET, AND THAT OVERRIDES THE
+         * `root` SLOT ON NATIVE ONLY. The mockup draws web as a light
+         * modal card and the phone as a full-screen dark surface, and
+         * one `root` token cannot be both. It has to be the dark one
+         * here because the controls below it are load-bearing white:
+         * on a light sheet the Rotate and Reset labels vanish.
+         *
+         * ⚠️ SO `slots.root.backgroundColor` DOES NOT REACH THIS ON
+         * NATIVE. That is the deliberate cost; the stage's own colour
+         * has carried the same argument since the component shipped.
+         */
+        { backgroundColor: "#0B1517" }
+      ],
+      children: [
+        title != null && /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [
+          { alignItems: "center" },
+          el.header,
+          {
+            paddingLeft: 18,
+            paddingRight: 18,
+            paddingTop: 12,
+            paddingBottom: 14,
+            borderBottomWidth: 0,
+            gap: 0
+          }
+        ], children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [el.title, { fontSize: 16, fontWeight: "800", color: "#FFFFFF" }], children: title }),
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: { marginTop: 3, fontSize: 12, color: "rgba(255,255,255,0.6)" }, children: subtitle })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [el.content, { paddingLeft: 0, paddingRight: 0, paddingTop: 0, paddingBottom: 0 }], children: [
+          /* @__PURE__ */ jsxRuntime.jsx(StageFrame, { gesture: detector, children: /* @__PURE__ */ jsxRuntime.jsxs(
+            reactNative.View,
+            {
+              ref: stageRef,
+              onLayout: onStageLayout,
+              ...detector ? scrollBlocker.panHandlers : responder.panHandlers,
+              style: [
+                { width: "100%", aspectRatio: constants.STAGE_ASPECT_NATIVE, overflow: "hidden" },
+                el.container
+              ],
+              children: [
+                ready && image && oriented && /* @__PURE__ */ jsxRuntime.jsx(
+                  reactNative.Image,
+                  {
+                    source: { uri: image.uri },
+                    resizeMode: "stretch",
+                    style: {
+                      position: "absolute",
+                      left: transform.x,
+                      top: transform.y,
+                      width: oriented.width * transform.scale,
+                      height: oriented.height * transform.scale,
+                      transform: [{ rotate: `${rotation}deg` }]
+                    }
+                  }
+                ),
+                (!source || error) && /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [
+                  {
+                    position: "absolute",
+                    left: 18,
+                    top: 18,
+                    right: 18,
+                    bottom: 18,
+                    alignItems: "center",
+                    justifyContent: "center"
+                  },
+                  el.dropZone,
+                  { borderRadius: 18 }
+                ], children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: {
+                    width: 60,
+                    height: 60,
+                    borderRadius: 30,
+                    backgroundColor: "rgba(32,170,176,0.16)",
+                    alignItems: "center",
+                    justifyContent: "center"
+                  }, children: /* @__PURE__ */ jsxRuntime.jsx(index_native.Icon, { name: "image", size: 26, color: constants.CROP_ACCENT_SOFT }) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: { fontSize: 16, fontWeight: "800", color: "#FFFFFF", textAlign: "center" }, children: text.dropZone }),
+                  /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: { fontSize: 12.5, color: "rgba(255,255,255,0.6)", textAlign: "center" }, children: "JPG, PNG or WebP" }),
+                  error && /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: {
+                    fontSize: 12.5,
+                    fontWeight: "600",
+                    color: constants.CROP_DANGER,
+                    textAlign: "center"
+                  }, children: error.message })
+                ] }),
+                ready && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    reactNative.View,
+                    {
+                      pointerEvents: "none",
+                      style: [
+                        {
+                          position: "absolute",
+                          left: crop.x - SCRIM,
+                          top: crop.y - SCRIM,
+                          width: crop.width + SCRIM * 2,
+                          height: crop.height + SCRIM * 2,
+                          borderWidth: SCRIM,
+                          borderColor: el.shade?.backgroundColor ?? "rgba(0,0,0,0.6)",
+                          borderRadius: windowRadius + SCRIM
+                        }
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    reactNative.View,
+                    {
+                      pointerEvents: "none",
+                      style: [
+                        {
+                          position: "absolute",
+                          left: crop.x,
+                          top: crop.y,
+                          width: crop.width,
+                          height: crop.height,
+                          borderStyle: "solid"
+                        },
+                        el.cropWindow,
+                        { borderRadius: windowRadius }
+                      ],
+                      children: !hideGrid && [1, 2].map((n) => /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [
+                          {
+                            position: "absolute",
+                            top: 0,
+                            bottom: 0,
+                            width: 1,
+                            left: crop.width * n / 3
+                          },
+                          el.gridLine
+                        ] }),
+                        /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [
+                          {
+                            position: "absolute",
+                            left: 0,
+                            right: 0,
+                            height: 1,
+                            top: crop.height * n / 3
+                          },
+                          el.gridLine
+                        ] })
+                      ] }, n))
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    reactNative.View,
+                    {
+                      pointerEvents: "none",
+                      style: { position: "absolute", top: 12, left: 0, right: 0, alignItems: "center" },
+                      children: /* @__PURE__ */ jsxRuntime.jsx(
+                        reactNative.View,
+                        {
+                          style: [
+                            { alignItems: "center", justifyContent: "center" },
+                            el.zoomChip
+                          ],
+                          children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: {
+                            color: el.zoomChip?.color ?? "#FFFFFF",
+                            fontSize: 11.5,
+                            fontWeight: "700"
+                          }, children: zoomLabel })
+                        }
+                      )
+                    }
+                  )
+                ] }),
+                (loading || busy) && /* @__PURE__ */ jsxRuntime.jsxs(
+                  reactNative.View,
+                  {
+                    pointerEvents: "none",
+                    style: {
+                      position: "absolute",
+                      left: 0,
+                      top: 0,
+                      right: 0,
+                      bottom: 0,
+                      backgroundColor: "rgba(6,14,16,0.74)",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      gap: 14
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        reactNative.ActivityIndicator,
+                        {
+                          size: "large",
+                          color: el.progressFill?.backgroundColor ?? constants.CROP_ACCENT
+                        }
+                      ),
+                      busy && /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: { fontSize: 14, fontWeight: "700", color: "#FFFFFF" }, children: text.processing })
+                    ]
+                  }
+                )
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            reactNative.View,
+            {
+              pointerEvents: ready ? "auto" : "none",
+              style: {
+                paddingTop: 16,
+                paddingLeft: 18,
+                paddingRight: 18,
+                gap: 16,
+                opacity: ready ? 1 : 0.4
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: { flexDirection: "row", alignItems: "center", gap: 12 }, children: [
+                  !hidePreview && ready && image && oriented && /* The preview is the same image, clipped and offset so the
+                     crop fills the frame — no pixel work, and therefore
+                     nothing that has to wait for an encoder. */
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    reactNative.View,
+                    {
+                      style: [
+                        { width: previewWidth, height: previewHeight, overflow: "hidden" },
+                        el.previewFrame,
+                        isCircle ? { borderRadius: previewWidth / 2 } : null,
+                        /* ⚠️ A 2px RING, NOT THE CARD'S 4. The slot
+                           carries the desktop preview's ring; at 60pt
+                           a 4pt ring eats the thumbnail. */
+                        { borderWidth: 2 },
+                        /* The mockup's float, in the native spelling —
+                           `boxShadow` is the web file's half of this. */
+                        {
+                          shadowColor: "#000000",
+                          shadowOpacity: 0.14,
+                          shadowRadius: 14,
+                          shadowOffset: { width: 0, height: 4 },
+                          elevation: 4
+                        }
+                      ],
+                      children: /* @__PURE__ */ jsxRuntime.jsx(
+                        reactNative.Image,
+                        {
+                          source: { uri: image.uri },
+                          resizeMode: "stretch",
+                          style: {
+                            position: "absolute",
+                            width: oriented.width * transform.scale * (previewWidth / crop.width),
+                            height: oriented.height * transform.scale * (previewWidth / crop.width),
+                            left: (transform.x - crop.x) * (previewWidth / crop.width),
+                            top: (transform.y - crop.y) * (previewWidth / crop.width),
+                            transform: [{ rotate: `${rotation}deg` }]
+                          }
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: { flex: 1, alignItems: "flex-end" }, children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: { fontSize: 17, fontWeight: "800", color: "#FFFFFF" }, children: zoomLabel }),
+                    /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: { marginTop: 2, fontSize: 11.5, color: "rgba(255,255,255,0.6)" }, children: `Under ${budgetKb} KB` })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: { flexDirection: "row", alignItems: "center", gap: 10 }, children: [
+                  stageTool("rotate-cw", text.rotate, () => dispatch({ type: "rotate" })),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    Slider,
+                    {
+                      style: { flex: 1 },
+                      minimumValue: 0,
+                      maximumValue: 1,
+                      value: cropperState.zoomFraction(state),
+                      disabled: !ready,
+                      minimumTrackTintColor: el.thumb?.backgroundColor,
+                      maximumTrackTintColor: el.track?.backgroundColor,
+                      thumbTintColor: el.thumb?.backgroundColor,
+                      onValueChange: (value) => dispatch({ type: "setZoom", value })
+                    }
+                  ),
+                  stageTool("rotate-ccw", text.reset, () => dispatch({ type: "reset" }))
+                ] })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [
+          { flexDirection: "row", alignItems: "center", marginTop: "auto" },
+          el.footer,
+          {
+            paddingLeft: 18,
+            paddingRight: 18,
+            paddingTop: 12,
+            paddingBottom: 28,
+            borderTopWidth: 1,
+            borderTopColor: "rgba(255,255,255,0.08)",
+            gap: 12
+          }
+        ], children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            reactNative.Pressable,
+            {
+              onPress: () => onCancel?.(),
+              accessibilityRole: "button",
+              accessibilityLabel: text.cancel,
+              style: {
+                flex: 1,
+                height: 52,
+                borderRadius: 26,
+                backgroundColor: "rgba(255,255,255,0.1)",
+                alignItems: "center",
+                justifyContent: "center"
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: { fontSize: 15, fontWeight: "700", color: "#FFFFFF" }, children: text.cancel })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            reactNative.Pressable,
+            {
+              onPress: () => void save(),
+              disabled: !canSave,
+              accessibilityRole: "button",
+              accessibilityLabel: text.save,
+              accessibilityState: { disabled: !canSave },
+              style: {
+                flex: 1.4,
+                height: 52,
+                borderRadius: 26,
+                backgroundColor: canSave ? constants.CROP_ACCENT : "rgba(32,170,176,0.35)",
+                alignItems: "center",
+                justifyContent: "center"
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: {
+                fontSize: 15,
+                fontWeight: "800",
+                color: canSave ? "#FFFFFF" : "rgba(255,255,255,0.55)"
+              }, children: busy ? text.processing : text.save })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+exports.ImageCropper = ImageCropper;
+//# sourceMappingURL=index.cjs.map