@wallarm-org/design-system 4.4.0 → 4.5.0

package/dist/components/ImageCropper/ImageCropper.d.ts

@@ -0,0 +1,16 @@
+import { type FC, type HTMLAttributes, type Ref } from 'react';
+import { type TestableProps } from '../../utils/testId.js';
+import { type ImageCropperSize } from './lib/geometry.js';
+export interface ImageCropperProps extends HTMLAttributes<HTMLDivElement>, TestableProps {
+    /** Exact exported pixel dimensions; also determines the visible frame's aspect ratio. */
+    outputSize: ImageCropperSize;
+    zoom?: number;
+    defaultZoom?: number;
+    /** The minimum scale, relative to the image covering the frame. Must be at least 1. */
+    minZoom?: number;
+    maxZoom?: number;
+    onZoomChange?: (zoom: number) => void;
+    ref?: Ref<HTMLDivElement>;
+}
+/** Client-side image crop and resize. Compose a viewport, image, selection and external controls. */
+export declare const ImageCropper: FC<ImageCropperProps>;

package/dist/components/ImageCropper/ImageCropper.js

@@ -0,0 +1,360 @@
+import { jsx } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { useLayoutEffect, useRef, useState } from "react";
+import { ImageCropper } from "@ark-ui/react/image-cropper";
+import { cn } from "../../utils/cn.js";
+import { TestIdProvider } from "../../utils/testId.js";
+import { ImageCropperProvider } from "./ImageCropperProvider.js";
+import { exportCrop } from "./lib/exportCrop.js";
+import { getCropperGeometry, validateOutputSize } from "./lib/geometry.js";
+import { useCropperMachine } from "./useCropperMachine.js";
+const ImageCropper_ImageCropper = (t0)=>{
+    const $ = c(101);
+    let children;
+    let className;
+    let id;
+    let onZoomChange;
+    let outputSize;
+    let props;
+    let ref;
+    let t1;
+    let t2;
+    let t3;
+    let testId;
+    let zoom;
+    if ($[0] !== t0) {
+        ({ outputSize, zoom, defaultZoom: t1, minZoom: t2, maxZoom: t3, onZoomChange, ref, id, className, children, "data-testid": testId, ...props } = t0);
+        $[0] = t0;
+        $[1] = children;
+        $[2] = className;
+        $[3] = id;
+        $[4] = onZoomChange;
+        $[5] = outputSize;
+        $[6] = props;
+        $[7] = ref;
+        $[8] = t1;
+        $[9] = t2;
+        $[10] = t3;
+        $[11] = testId;
+        $[12] = zoom;
+    } else {
+        children = $[1];
+        className = $[2];
+        id = $[3];
+        onZoomChange = $[4];
+        outputSize = $[5];
+        props = $[6];
+        ref = $[7];
+        t1 = $[8];
+        t2 = $[9];
+        t3 = $[10];
+        testId = $[11];
+        zoom = $[12];
+    }
+    const defaultZoom = void 0 === t1 ? 1 : t1;
+    const minZoom = void 0 === t2 ? 1 : t2;
+    const maxZoom = void 0 === t3 ? 5 : t3;
+    validateOutputSize(outputSize);
+    if (!Number.isFinite(minZoom) || !Number.isFinite(maxZoom) || minZoom < 1 || maxZoom < minZoom) throw new RangeError("ImageCropper requires 1 <= minZoom <= maxZoom.");
+    let t4;
+    if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
+        t4 = {
+            width: 0,
+            height: 0
+        };
+        $[13] = t4;
+    } else t4 = $[13];
+    const [frameSize, setFrameSize] = useState(t4);
+    const [source, setSource] = useState(null);
+    const [image, setImage] = useState(null);
+    let t5;
+    if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+        t5 = {};
+        $[14] = t5;
+    } else t5 = $[14];
+    const [partIds, setPartIds] = useState(t5);
+    const sourceSize = source?.width && source.height ? source : outputSize;
+    let t6;
+    if ($[15] !== frameSize || $[16] !== sourceSize) {
+        t6 = getCropperGeometry(sourceSize, frameSize);
+        $[15] = frameSize;
+        $[16] = sourceSize;
+        $[17] = t6;
+    } else t6 = $[17];
+    const geometry = t6;
+    const controlledZoom = void 0 === zoom ? void 0 : Math.min(maxZoom, Math.max(minZoom, zoom));
+    if (void 0 !== controlledZoom && !Number.isFinite(controlledZoom)) throw new RangeError("ImageCropper zoom must be finite.");
+    let t7;
+    if ($[18] !== id || $[19] !== partIds) {
+        t7 = {
+            ...partIds,
+            root: id
+        };
+        $[18] = id;
+        $[19] = partIds;
+        $[20] = t7;
+    } else t7 = $[20];
+    const t8 = outputSize.width / outputSize.height;
+    const t9 = frameSize.width;
+    const t10 = frameSize.width;
+    const t11 = frameSize.height;
+    const t12 = frameSize.height;
+    const t13 = Math.min(maxZoom, Math.max(minZoom, defaultZoom));
+    let t14;
+    if ($[21] !== onZoomChange) {
+        t14 = (details)=>onZoomChange?.(details.zoom);
+        $[21] = onZoomChange;
+        $[22] = t14;
+    } else t14 = $[22];
+    let t15;
+    if ($[23] === Symbol.for("react.memo_cache_sentinel")) {
+        t15 = {
+            selectionInstructions: "Use arrow keys to position the image. Hold Shift for larger steps. Press plus or minus to zoom."
+        };
+        $[23] = t15;
+    } else t15 = $[23];
+    let t16;
+    if ($[24] !== controlledZoom || $[25] !== frameSize.height || $[26] !== frameSize.width || $[27] !== maxZoom || $[28] !== minZoom || $[29] !== t13 || $[30] !== t14 || $[31] !== t7 || $[32] !== t8) {
+        t16 = {
+            ids: t7,
+            fixedCropArea: true,
+            aspectRatio: t8,
+            minWidth: t9,
+            maxWidth: t10,
+            minHeight: t11,
+            maxHeight: t12,
+            minZoom,
+            maxZoom,
+            zoom: controlledZoom,
+            defaultZoom: t13,
+            onZoomChange: t14,
+            translations: t15
+        };
+        $[24] = controlledZoom;
+        $[25] = frameSize.height;
+        $[26] = frameSize.width;
+        $[27] = maxZoom;
+        $[28] = minZoom;
+        $[29] = t13;
+        $[30] = t14;
+        $[31] = t7;
+        $[32] = t8;
+        $[33] = t16;
+    } else t16 = $[33];
+    const ark = useCropperMachine(t16);
+    const measured = frameSize.width > 0 && frameSize.height > 0 && Math.abs(ark.viewportRect.width - geometry.viewport.width) < 0.5 && Math.abs(ark.viewportRect.height - geometry.viewport.height) < 0.5;
+    const resetKey = `${source?.src}:${source?.width}:${source?.height}:${frameSize.width}:${frameSize.height}:${outputSize.width / outputSize.height}`;
+    const lastReset = useRef("");
+    const lastSource = useRef(void 0);
+    let t17;
+    if ($[34] !== ark || $[35] !== measured || $[36] !== resetKey || $[37] !== source?.src) {
+        t17 = ()=>{
+            const sourceChanged = lastSource.current !== source?.src;
+            lastSource.current = source?.src;
+            if (!sourceChanged && (!measured || lastReset.current === resetKey)) return;
+            lastReset.current = measured ? resetKey : "";
+            ark.reset();
+        };
+        $[34] = ark;
+        $[35] = measured;
+        $[36] = resetKey;
+        $[37] = source?.src;
+        $[38] = t17;
+    } else t17 = $[38];
+    const t18 = source?.src;
+    let t19;
+    if ($[39] !== ark || $[40] !== measured || $[41] !== resetKey || $[42] !== t18) {
+        t19 = [
+            ark,
+            measured,
+            resetKey,
+            t18
+        ];
+        $[39] = ark;
+        $[40] = measured;
+        $[41] = resetKey;
+        $[42] = t18;
+        $[43] = t19;
+    } else t19 = $[43];
+    useLayoutEffect(t17, t19);
+    const ready = source?.status === "loaded" && source.width > 0 && source.height > 0 && ark.naturalSize.width === source.width && ark.naturalSize.height === source.height && measured && Math.abs(ark.crop.x - geometry.crop.x) < 0.5 && Math.abs(ark.crop.y - geometry.crop.y) < 0.5 && Math.abs(ark.crop.width - frameSize.width) < 0.5 && Math.abs(ark.crop.height - frameSize.height) < 0.5;
+    const sourceScale = geometry.viewport.width > 0 ? sourceSize.width / geometry.viewport.width : 1;
+    const cropWidth = frameSize.width * sourceScale / ark.zoom;
+    const cropHeight = frameSize.height * sourceScale / ark.zoom;
+    const sourceX = ((ark.crop.x - ark.offset.x - geometry.viewport.width / 2) / ark.zoom + geometry.viewport.width / 2) * sourceScale;
+    const sourceY = ((ark.crop.y - ark.offset.y - geometry.viewport.height / 2) / ark.zoom + geometry.viewport.height / 2) * sourceScale;
+    const horizontalRange = Math.max(0, sourceSize.width - cropWidth);
+    const verticalRange = Math.max(0, sourceSize.height - cropHeight);
+    const t20 = !ready || void 0;
+    const t21 = source?.status ?? "loading";
+    let t22;
+    if ($[44] !== className) {
+        t22 = cn("flex min-w-0 flex-col items-center gap-24", className);
+        $[44] = className;
+        $[45] = t22;
+    } else t22 = $[45];
+    const t23 = geometry.viewport;
+    let t24;
+    if ($[46] !== horizontalRange || $[47] !== sourceX || $[48] !== sourceY || $[49] !== verticalRange) {
+        t24 = Math.round(horizontalRange >= verticalRange ? sourceX : sourceY);
+        $[46] = horizontalRange;
+        $[47] = sourceX;
+        $[48] = sourceY;
+        $[49] = verticalRange;
+        $[50] = t24;
+    } else t24 = $[50];
+    const t25 = Math.max(0, t24);
+    let t26;
+    if ($[51] !== horizontalRange || $[52] !== verticalRange) {
+        t26 = Math.round(Math.max(horizontalRange, verticalRange));
+        $[51] = horizontalRange;
+        $[52] = verticalRange;
+        $[53] = t26;
+    } else t26 = $[53];
+    let t27;
+    if ($[54] !== sourceX) {
+        t27 = Math.round(sourceX);
+        $[54] = sourceX;
+        $[55] = t27;
+    } else t27 = $[55];
+    const t28 = Math.max(0, t27);
+    let t29;
+    if ($[56] !== sourceY) {
+        t29 = Math.round(sourceY);
+        $[56] = sourceY;
+        $[57] = t29;
+    } else t29 = $[57];
+    const t30 = Math.max(0, t29);
+    let t31;
+    if ($[58] !== ark.zoom) {
+        t31 = Math.round(100 * ark.zoom);
+        $[58] = ark.zoom;
+        $[59] = t31;
+    } else t31 = $[59];
+    const t32 = `Image position X ${t28}, Y ${t30} pixels. Zoom ${t31}%.`;
+    let t33;
+    if ($[60] !== t25 || $[61] !== t26 || $[62] !== t32) {
+        t33 = {
+            value: t25,
+            max: t26,
+            text: t32
+        };
+        $[60] = t25;
+        $[61] = t26;
+        $[62] = t32;
+        $[63] = t33;
+    } else t33 = $[63];
+    let t34;
+    if ($[64] !== ark || $[65] !== maxZoom || $[66] !== minZoom) {
+        t34 = (value)=>{
+            if (Number.isFinite(value)) ark.setZoom(Math.min(maxZoom, Math.max(minZoom, value)));
+        };
+        $[64] = ark;
+        $[65] = maxZoom;
+        $[66] = minZoom;
+        $[67] = t34;
+    } else t34 = $[67];
+    let t35;
+    if ($[68] !== ark || $[69] !== image || $[70] !== outputSize || $[71] !== ready || $[72] !== source?.src) {
+        t35 = async (options)=>{
+            if (!ready || !image || image.getAttribute("src") !== source?.src) return null;
+            const src = image.currentSrc || image.src;
+            const { topLeft, topRight, bottomLeft } = ark.getCropData().corners;
+            const blob = await exportCrop(image, {
+                x: topLeft.x,
+                y: topLeft.y,
+                width: topRight.x - topLeft.x,
+                height: bottomLeft.y - topLeft.y
+            }, outputSize, options);
+            return image.isConnected && (image.currentSrc || image.src) === src ? blob : null;
+        };
+        $[68] = ark;
+        $[69] = image;
+        $[70] = outputSize;
+        $[71] = ready;
+        $[72] = source?.src;
+        $[73] = t35;
+    } else t35 = $[73];
+    let t36;
+    if ($[74] !== ark.reset || $[75] !== ark.zoom || $[76] !== ready || $[77] !== t34 || $[78] !== t35) {
+        t36 = {
+            ready,
+            zoom: ark.zoom,
+            setZoom: t34,
+            reset: ark.reset,
+            getCroppedImage: t35
+        };
+        $[74] = ark.reset;
+        $[75] = ark.zoom;
+        $[76] = ready;
+        $[77] = t34;
+        $[78] = t35;
+        $[79] = t36;
+    } else t36 = $[79];
+    let t37;
+    if ($[80] !== geometry.viewport || $[81] !== outputSize || $[82] !== source || $[83] !== t33 || $[84] !== t36) {
+        t37 = {
+            outputSize,
+            viewportSize: t23,
+            source,
+            setSource,
+            setFrameSize,
+            setImage,
+            setPartIds,
+            selection: t33,
+            api: t36
+        };
+        $[80] = geometry.viewport;
+        $[81] = outputSize;
+        $[82] = source;
+        $[83] = t33;
+        $[84] = t36;
+        $[85] = t37;
+    } else t37 = $[85];
+    let t38;
+    if ($[86] !== children || $[87] !== t37) {
+        t38 = /*#__PURE__*/ jsx(ImageCropperProvider, {
+            value: t37,
+            children: children
+        });
+        $[86] = children;
+        $[87] = t37;
+        $[88] = t38;
+    } else t38 = $[88];
+    let t39;
+    if ($[89] !== t38 || $[90] !== testId) {
+        t39 = /*#__PURE__*/ jsx(TestIdProvider, {
+            value: testId,
+            children: t38
+        });
+        $[89] = t38;
+        $[90] = testId;
+        $[91] = t39;
+    } else t39 = $[91];
+    let t40;
+    if ($[92] !== ark || $[93] !== props || $[94] !== ref || $[95] !== t20 || $[96] !== t21 || $[97] !== t22 || $[98] !== t39 || $[99] !== testId) {
+        t40 = /*#__PURE__*/ jsx(ImageCropper.RootProvider, {
+            ...props,
+            value: ark,
+            ref: ref,
+            "aria-busy": t20,
+            "data-slot": "image-cropper",
+            "data-testid": testId,
+            "data-state": t21,
+            className: t22,
+            children: t39
+        });
+        $[92] = ark;
+        $[93] = props;
+        $[94] = ref;
+        $[95] = t20;
+        $[96] = t21;
+        $[97] = t22;
+        $[98] = t39;
+        $[99] = testId;
+        $[100] = t40;
+    } else t40 = $[100];
+    return t40;
+};
+ImageCropper_ImageCropper.displayName = "ImageCropper";
+export { ImageCropper_ImageCropper as ImageCropper };

package/dist/components/ImageCropper/ImageCropperContext.d.ts

@@ -0,0 +1,7 @@
+import type { FC, ReactNode } from 'react';
+import { type ImageCropperApi } from './ImageCropperProvider.js';
+export interface ImageCropperContextProps {
+    children: (api: ImageCropperApi) => ReactNode;
+}
+/** Compose Slider/FileUpload/Button controls using the current cropper state. */
+export declare const ImageCropperContext: FC<ImageCropperContextProps>;

package/dist/components/ImageCropper/ImageCropperContext.js

@@ -0,0 +1,17 @@
+import { c } from "react/compiler-runtime";
+import { useImageCropperInternal } from "./ImageCropperProvider.js";
+const ImageCropperContext = (t0)=>{
+    const $ = c(3);
+    const { children } = t0;
+    const t1 = useImageCropperInternal();
+    let t2;
+    if ($[0] !== children || $[1] !== t1.api) {
+        t2 = children(t1.api);
+        $[0] = children;
+        $[1] = t1.api;
+        $[2] = t2;
+    } else t2 = $[2];
+    return t2;
+};
+ImageCropperContext.displayName = "ImageCropperContext";
+export { ImageCropperContext };

package/dist/components/ImageCropper/ImageCropperGrid.d.ts

@@ -0,0 +1,7 @@
+import type { FC, HTMLAttributes, Ref } from 'react';
+import { type TestableProps } from '../../utils/testId.js';
+export interface ImageCropperGridProps extends HTMLAttributes<HTMLDivElement>, TestableProps {
+    ref?: Ref<HTMLDivElement>;
+}
+/** Optional rule-of-thirds guide, clipped by the viewport. */
+export declare const ImageCropperGrid: FC<ImageCropperGridProps>;

package/dist/components/ImageCropper/ImageCropperGrid.js

@@ -0,0 +1,83 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+const ImageCropperGrid = (t0)=>{
+    const $ = c(16);
+    let className;
+    let props;
+    let ref;
+    let testIdProp;
+    if ($[0] !== t0) {
+        ({ ref, className, "data-testid": testIdProp, ...props } = t0);
+        $[0] = t0;
+        $[1] = className;
+        $[2] = props;
+        $[3] = ref;
+        $[4] = testIdProp;
+    } else {
+        className = $[1];
+        props = $[2];
+        ref = $[3];
+        testIdProp = $[4];
+    }
+    const testId = useTestId("grid", testIdProp);
+    let t1;
+    if ($[5] !== className) {
+        t1 = cn("pointer-events-none absolute inset-0", className);
+        $[5] = className;
+        $[6] = t1;
+    } else t1 = $[6];
+    let t2;
+    let t3;
+    let t4;
+    let t5;
+    if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+        t2 = /*#__PURE__*/ jsx("span", {
+            className: "absolute inset-y-0 left-1/3 border-l border-border-primary/60"
+        });
+        t3 = /*#__PURE__*/ jsx("span", {
+            className: "absolute inset-y-0 left-2/3 border-l border-border-primary/60"
+        });
+        t4 = /*#__PURE__*/ jsx("span", {
+            className: "absolute inset-x-0 top-1/3 border-t border-border-primary/60"
+        });
+        t5 = /*#__PURE__*/ jsx("span", {
+            className: "absolute inset-x-0 top-2/3 border-t border-border-primary/60"
+        });
+        $[7] = t2;
+        $[8] = t3;
+        $[9] = t4;
+        $[10] = t5;
+    } else {
+        t2 = $[7];
+        t3 = $[8];
+        t4 = $[9];
+        t5 = $[10];
+    }
+    let t6;
+    if ($[11] !== props || $[12] !== ref || $[13] !== t1 || $[14] !== testId) {
+        t6 = /*#__PURE__*/ jsxs("div", {
+            ...props,
+            ref: ref,
+            "aria-hidden": "true",
+            "data-slot": "image-cropper-grid",
+            "data-testid": testId,
+            className: t1,
+            children: [
+                t2,
+                t3,
+                t4,
+                t5
+            ]
+        });
+        $[11] = props;
+        $[12] = ref;
+        $[13] = t1;
+        $[14] = testId;
+        $[15] = t6;
+    } else t6 = $[15];
+    return t6;
+};
+ImageCropperGrid.displayName = "ImageCropperGrid";
+export { ImageCropperGrid };

package/dist/components/ImageCropper/ImageCropperImage.d.ts

@@ -0,0 +1,6 @@
+import { type FC, type ImgHTMLAttributes, type Ref } from 'react';
+import { type TestableProps } from '../../utils/testId.js';
+export interface ImageCropperImageProps extends ImgHTMLAttributes<HTMLImageElement>, TestableProps {
+    ref?: Ref<HTMLImageElement>;
+}
+export declare const ImageCropperImage: FC<ImageCropperImageProps>;

package/dist/components/ImageCropper/ImageCropperImage.js

@@ -0,0 +1,150 @@
+import { jsx } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { useLayoutEffect, useState } from "react";
+import { ImageCropper } from "@ark-ui/react/image-cropper";
+import { useComposedRefs } from "@radix-ui/react-compose-refs";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+import { useImageCropperInternal, useImageCropperPartId } from "./ImageCropperProvider.js";
+const ImageCropperImage = (t0)=>{
+    const $ = c(35);
+    let className;
+    let id;
+    let onError;
+    let onLoad;
+    let props;
+    let ref;
+    let src;
+    let t1;
+    let testIdProp;
+    if ($[0] !== t0) {
+        ({ ref, id, src, alt: t1, className, onLoad, onError, "data-testid": testIdProp, ...props } = t0);
+        $[0] = t0;
+        $[1] = className;
+        $[2] = id;
+        $[3] = onError;
+        $[4] = onLoad;
+        $[5] = props;
+        $[6] = ref;
+        $[7] = src;
+        $[8] = t1;
+        $[9] = testIdProp;
+    } else {
+        className = $[1];
+        id = $[2];
+        onError = $[3];
+        onLoad = $[4];
+        props = $[5];
+        ref = $[6];
+        src = $[7];
+        t1 = $[8];
+        testIdProp = $[9];
+    }
+    const alt = void 0 === t1 ? "" : t1;
+    const { source, setSource, setImage } = useImageCropperInternal();
+    const [node, setNode] = useState(null);
+    const composedRef = useComposedRefs(ref, setNode, setImage);
+    const testId = useTestId("image", testIdProp);
+    useImageCropperPartId("image", id);
+    let t2;
+    let t3;
+    if ($[10] !== node || $[11] !== setSource || $[12] !== src) {
+        t2 = ()=>{
+            setSource({
+                src: src ?? "",
+                status: "loading",
+                width: 0,
+                height: 0
+            });
+            if (node?.complete && node.naturalWidth && node.naturalHeight && node.currentSrc && node.currentSrc === node.src) setSource({
+                src: src ?? "",
+                status: "loaded",
+                width: node.naturalWidth,
+                height: node.naturalHeight
+            });
+            return ()=>setSource(null);
+        };
+        t3 = [
+            src,
+            node,
+            setSource
+        ];
+        $[10] = node;
+        $[11] = setSource;
+        $[12] = src;
+        $[13] = t2;
+        $[14] = t3;
+    } else {
+        t2 = $[13];
+        t3 = $[14];
+    }
+    useLayoutEffect(t2, t3);
+    const state = source && source.src === src ? source.status : "loading";
+    let t4;
+    if ($[15] !== className) {
+        t4 = cn("block size-full select-none data-[state=loading]:invisible data-[state=error]:invisible", className);
+        $[15] = className;
+        $[16] = t4;
+    } else t4 = $[16];
+    let t5;
+    if ($[17] !== onLoad || $[18] !== setSource || $[19] !== src) {
+        t5 = (event)=>{
+            const image = event.currentTarget;
+            setSource({
+                src: src ?? "",
+                status: "loaded",
+                width: image.naturalWidth,
+                height: image.naturalHeight
+            });
+            onLoad?.(event);
+        };
+        $[17] = onLoad;
+        $[18] = setSource;
+        $[19] = src;
+        $[20] = t5;
+    } else t5 = $[20];
+    let t6;
+    if ($[21] !== onError || $[22] !== setSource || $[23] !== src) {
+        t6 = (event_0)=>{
+            setSource({
+                src: src ?? "",
+                status: "error",
+                width: 0,
+                height: 0
+            });
+            onError?.(event_0);
+        };
+        $[21] = onError;
+        $[22] = setSource;
+        $[23] = src;
+        $[24] = t6;
+    } else t6 = $[24];
+    let t7;
+    if ($[25] !== alt || $[26] !== composedRef || $[27] !== props || $[28] !== src || $[29] !== state || $[30] !== t4 || $[31] !== t5 || $[32] !== t6 || $[33] !== testId) {
+        t7 = /*#__PURE__*/ jsx(ImageCropper.Image, {
+            ...props,
+            ref: composedRef,
+            src: src,
+            alt: alt,
+            "data-slot": "image-cropper-image",
+            "data-testid": testId,
+            "data-state": state,
+            className: t4,
+            onLoad: t5,
+            onError: t6
+        });
+        $[25] = alt;
+        $[26] = composedRef;
+        $[27] = props;
+        $[28] = src;
+        $[29] = state;
+        $[30] = t4;
+        $[31] = t5;
+        $[32] = t6;
+        $[33] = testId;
+        $[34] = t7;
+    } else t7 = $[34];
+    return t7;
+};
+ImageCropperImage.displayName = "ImageCropperImage";
+export { ImageCropperImage };

package/dist/components/ImageCropper/ImageCropperProvider.d.ts

@@ -0,0 +1,37 @@
+import { type Dispatch, type SetStateAction } from 'react';
+import type { ImageCropperExportOptions } from './lib/exportCrop.js';
+import type { ImageCropperSize } from './lib/geometry.js';
+export interface ImageCropperApi {
+    /** True once the current image has loaded and the crop has been measured. */
+    ready: boolean;
+    zoom: number;
+    setZoom: (zoom: number) => void;
+    reset: () => void;
+    /** Returns a rectangular bitmap at outputSize, or null when unavailable or canvas export fails. */
+    getCroppedImage: (options?: ImageCropperExportOptions) => Promise<Blob | null>;
+}
+export interface CropperSource extends ImageCropperSize {
+    src: string;
+    status: 'loading' | 'loaded' | 'error';
+}
+type Part = 'viewport' | 'image' | 'selection';
+export interface ImageCropperInternalContext {
+    api: ImageCropperApi;
+    selection: {
+        value: number;
+        max: number;
+        text: string;
+    };
+    outputSize: ImageCropperSize;
+    viewportSize: ImageCropperSize;
+    source: CropperSource | null;
+    setSource: Dispatch<SetStateAction<CropperSource | null>>;
+    setFrameSize: Dispatch<SetStateAction<ImageCropperSize>>;
+    setImage: Dispatch<SetStateAction<HTMLImageElement | null>>;
+    setPartIds: Dispatch<SetStateAction<Partial<Record<Part, string>>>>;
+}
+export declare const ImageCropperProvider: import("react").Context<ImageCropperInternalContext | null>;
+export declare const useImageCropperInternal: () => ImageCropperInternalContext;
+/** Ark locates elements by id. Publish custom ids into its configuration before paint. */
+export declare const useImageCropperPartId: (part: Part, id?: string) => void;
+export {};