@wordpress/image-cropper 1.0.1-next.6deb34194.0

package/README.md

@@ -0,0 +1,196 @@
+# Image Cropper
+
+An implementation of [react-easy-crop](https://www.npmjs.com/package/react-easy-crop).
+
+## Current features
+
+-   **Image Cropping**: Interactive aspect ratio-based crop area with drag and resize functionality
+-   **Rotation**: Rotate images in 90-degree increments
+-   **Zoom Control**: Zoom in/out with configurable min/max limits
+-   **Aspect Ratio**: Set and maintain specific aspect ratios
+-   **Flip Controls**: Horizontal and vertical image flipping
+-   **State Management**: Centralized state management with React Context
+-   **Custom Reset State**: Configure custom initial states for reset operations
+
+## Future features
+
+-   [ ] Freeform cropping
+
+## Installation
+
+Install the module
+
+```bash
+npm install @wordpress/image-cropper --save
+```
+
+## API
+
+### Components
+
+-   `ImageCropper` - The main cropping component that provides the cropping canvas.
+
+```tsx
+interface ImageCropperProps {
+	src: string; // Image source URL
+	onLoad?: ( mediaSize: MediaSize ) => void; // Callback when image loads with media dimensions
+	minZoom?: number; // Minimum zoom level (default: 1)
+	maxZoom?: number; // Maximum zoom level (default: 5)
+}
+```
+
+-   `ImageCropperProvider` - Context provider for state management. This component implements the React Context pattern to share cropper state across your application. It manages all internal cropper state including crop position, zoom levels, rotation, flip transformations, aspect ratios, and media dimensions. Any component that needs to read or modify cropper state must be a descendant of this provider. The provider also handles state persistence and provides methods for resetting to custom initial states.
+
+### Hooks
+
+-   `useImageCropper` - Provides access to all cropper state and methods.
+
+```tsx
+import { useImageCropper } from '@wordpress/image-cropper';
+
+const {
+	// Unified state object
+	cropperState, // Complete cropper state { crop, croppedArea, croppedAreaPixels, zoom, rotation, aspectRatio, flip, mediaSize }
+	setCropperState, // Set multiple state properties at once
+
+	// Actions
+	reset, // Reset all changes (uses resetState if set)
+	setResetState, // Set custom reset state
+	getCroppedImage, // Get cropped image as data URL
+
+	// Reset state
+	resetState, // Current reset state configuration
+	isDirty, // Whether the state is dirty based on resetState or default settings
+} = useImageCropper();
+```
+
+### Types
+
+-   `ImageCropperState` - State interface for cropper data
+-   `ImageCropperProps` - Props interface for ImageCropper component
+-   `ImageCropperContextValue` - Context value interface
+-   `Flip` - Flip state interface
+-   `Point`, `Area`, `MediaSize` - Re-exported from react-easy-crop
+
+### Utilities
+
+-   `normalizeRotation` - Utility function to normalize rotation values to 0-360 degrees
+
+```tsx
+import { normalizeRotation } from '@wordpress/image-cropper';
+
+const normalized = normalizeRotation( -90 ); // Returns 270
+const normalized2 = normalizeRotation( 450 ); // Returns 90
+```
+
+## Usage
+
+### Basic Implementation
+
+The image cropper provides the core cropping functionality without any built-in UI controls. You must implement your own tools using the `useImageCropper` hook.
+
+```tsx
+import {
+	ImageCropper,
+	ImageCropperProvider,
+	useImageCropper,
+} from '@wordpress/image-cropper';
+
+function ImageEditor() {
+	return (
+		<ImageCropperProvider>
+			<div className="image-editor">
+				<ImageCropper
+					src="https://example.com/image.jpg"
+					className="image-cropper"
+					onLoad={ ( mediaSize ) =>
+						console.log( 'Image loaded', mediaSize )
+					}
+				/>
+				<ImageEditorTools />
+			</div>
+		</ImageCropperProvider>
+	);
+}
+
+function ImageEditorTools() {
+	const { cropperState, setCropperState, reset, setResetState } =
+		useImageCropper();
+
+	const { zoom, rotation, aspectRatio, flip, mediaSize, croppedArea } =
+		cropperState;
+
+	const handleSave = () => {
+		console.log( 'Cropper state:', {
+			crop: croppedArea,
+			zoom,
+			rotation,
+			aspectRatio,
+			flip,
+		} );
+		// Apply the crop state to your image
+	};
+
+	return (
+		<div className="image-editor-tools">
+			<button
+				onClick={ () => setCropperState( { rotation: rotation + 90 } ) }
+			>
+				Rotate Right
+			</button>
+			<button
+				onClick={ () => setCropperState( { rotation: rotation - 90 } ) }
+			>
+				Rotate Left
+			</button>
+			<button
+				onClick={ () =>
+					setCropperState( {
+						flip: { ...flip, horizontal: ! flip.horizontal },
+					} )
+				}
+			>
+				Flip Horizontal
+			</button>
+			<button
+				onClick={ () =>
+					setCropperState( {
+						flip: { ...flip, vertical: ! flip.vertical },
+					} )
+				}
+			>
+				Flip Vertical
+			</button>
+			<button onClick={ handleSave }>Apply Changes</button>
+			<button onClick={ reset }>Reset</button>
+		</div>
+	);
+}
+```
+
+### Advanced Usage with Custom Reset State
+
+You can configure a custom initial state that will be used when the reset function is called:
+
+```tsx
+function ImageEditorWithCustomReset() {
+	const { setResetState, reset } = useImageCropper();
+
+	// Set custom reset state
+	useEffect( () => {
+		setResetState( {
+			rotation: 90,
+			zoom: 1.5,
+			aspectRatio: 16 / 9,
+			flip: { horizontal: false, vertical: false },
+		} );
+	}, [ setResetState ] );
+
+	return (
+		<div>
+			{ /* Your cropper components */ }
+			<button onClick={ reset }>Reset to Custom State</button>
+		</div>
+	);
+}
+```

package/build/components/image-cropper/index.js

@@ -0,0 +1,97 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/image-cropper/src/components/image-cropper/index.tsx
+var image_cropper_exports = {};
+__export(image_cropper_exports, {
+  default: () => ImageCropper
+});
+module.exports = __toCommonJS(image_cropper_exports);
+var import_react_easy_crop = __toESM(require("react-easy-crop"));
+var import_element = require("@wordpress/element");
+var import_provider = require("../../provider");
+var import_constants = require("../../constants");
+var import_jsx_runtime = require("react/jsx-runtime");
+function ImageCropper({
+  src,
+  onLoad,
+  minZoom = import_constants.MIN_ZOOM,
+  maxZoom = import_constants.MAX_ZOOM,
+  ...props
+}) {
+  const { cropperState, setCropperState } = (0, import_provider.useImageCropper)();
+  const { crop, zoom, rotation, aspectRatio, flip } = cropperState;
+  const setCrop = (newCrop) => setCropperState({ crop: newCrop });
+  const setZoom = (newZoom) => setCropperState({ zoom: newZoom });
+  const setRotation = (newRotation) => setCropperState({ rotation: newRotation });
+  const setMediaSize = (newMediaSize) => setCropperState({ mediaSize: newMediaSize });
+  const onCropComplete = (0, import_element.useCallback)(
+    (areaPercentage, areaPixels) => {
+      setCropperState({
+        croppedArea: areaPercentage,
+        croppedAreaPixels: areaPixels
+      });
+    },
+    [setCropperState]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_react_easy_crop.default,
+    {
+      classes: {
+        containerClassName: "image-cropper__container",
+        cropAreaClassName: "image-cropper__crop-area",
+        mediaClassName: "image-cropper__image"
+      },
+      minZoom,
+      maxZoom,
+      rotation,
+      image: src,
+      setMediaSize,
+      crop,
+      zoom,
+      aspect: aspectRatio,
+      onCropChange: setCrop,
+      onZoomChange: setZoom,
+      onCropComplete,
+      onMediaLoaded: (loadedMediaSize) => {
+        onLoad?.(loadedMediaSize);
+      },
+      onRotationChange: setRotation,
+      transform: [
+        `translate(${crop.x}px, ${crop.y}px)`,
+        `rotateZ(${rotation}deg)`,
+        `rotateY(${flip.horizontal ? 180 : 0}deg)`,
+        `rotateX(${flip.vertical ? 180 : 0}deg)`,
+        `scale(${zoom})`
+      ].join(" "),
+      ...props
+    }
+  );
+}
+//# sourceMappingURL=index.js.map

package/build/components/image-cropper/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/image-cropper/index.tsx"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport Cropper from 'react-easy-crop';\n\n/**\n * WordPress dependencies\n */\nimport { useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { useImageCropper } from '../../provider';\nimport type { Area, ImageCropperProps, MediaSize, Point } from '../../types';\nimport { MIN_ZOOM, MAX_ZOOM } from '../../constants';\n\nexport default function ImageCropper( {\n\tsrc,\n\tonLoad,\n\tminZoom = MIN_ZOOM,\n\tmaxZoom = MAX_ZOOM,\n\t...props\n}: ImageCropperProps ) {\n\tconst { cropperState, setCropperState } = useImageCropper();\n\tconst { crop, zoom, rotation, aspectRatio, flip } = cropperState;\n\n\tconst setCrop = ( newCrop: Point ) => setCropperState( { crop: newCrop } );\n\tconst setZoom = ( newZoom: number ) => setCropperState( { zoom: newZoom } );\n\tconst setRotation = ( newRotation: number ) =>\n\t\tsetCropperState( { rotation: newRotation } );\n\tconst setMediaSize = ( newMediaSize: MediaSize ) =>\n\t\tsetCropperState( { mediaSize: newMediaSize } );\n\n\t/**\n\t * Handles the crop complete event, when a user stops interacting with the cropper.\n\t * Updates the cropped area in percentages and pixels.\n\t *\n\t * @param {Area} areaPercentage - The area percentage.\n\t * @param {Area} areaPixels     - The area pixels.\n\t */\n\tconst onCropComplete = useCallback(\n\t\t( areaPercentage: Area, areaPixels: Area ) => {\n\t\t\tsetCropperState( {\n\t\t\t\tcroppedArea: areaPercentage,\n\t\t\t\tcroppedAreaPixels: areaPixels,\n\t\t\t} );\n\t\t},\n\t\t[ setCropperState ]\n\t);\n\n\treturn (\n\t\t<Cropper\n\t\t\tclasses={ {\n\t\t\t\tcontainerClassName: 'image-cropper__container',\n\t\t\t\tcropAreaClassName: 'image-cropper__crop-area',\n\t\t\t\tmediaClassName: 'image-cropper__image',\n\t\t\t} }\n\t\t\tminZoom={ minZoom }\n\t\t\tmaxZoom={ maxZoom }\n\t\t\trotation={ rotation }\n\t\t\timage={ src }\n\t\t\tsetMediaSize={ setMediaSize }\n\t\t\tcrop={ crop }\n\t\t\tzoom={ zoom }\n\t\t\taspect={ aspectRatio }\n\t\t\tonCropChange={ setCrop }\n\t\t\tonZoomChange={ setZoom }\n\t\t\tonCropComplete={ onCropComplete }\n\t\t\tonMediaLoaded={ ( loadedMediaSize: MediaSize ) => {\n\t\t\t\tonLoad?.( loadedMediaSize );\n\t\t\t} }\n\t\t\tonRotationChange={ setRotation }\n\t\t\ttransform={ [\n\t\t\t\t`translate(${ crop.x }px, ${ crop.y }px)`,\n\t\t\t\t`rotateZ(${ rotation }deg)`,\n\t\t\t\t`rotateY(${ flip.horizontal ? 180 : 0 }deg)`,\n\t\t\t\t`rotateX(${ flip.vertical ? 180 : 0 }deg)`,\n\t\t\t\t`scale(${ zoom })`,\n\t\t\t].join( ' ' ) }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,6BAAoB;AAKpB,qBAA4B;AAK5B,sBAAgC;AAEhC,uBAAmC;AAqCjC;AAnCa,SAAR,aAA+B;AAAA,EACrC;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,UAAU;AAAA,EACV,GAAG;AACJ,GAAuB;AACtB,QAAM,EAAE,cAAc,gBAAgB,QAAI,iCAAgB;AAC1D,QAAM,EAAE,MAAM,MAAM,UAAU,aAAa,KAAK,IAAI;AAEpD,QAAM,UAAU,CAAE,YAAoB,gBAAiB,EAAE,MAAM,QAAQ,CAAE;AACzE,QAAM,UAAU,CAAE,YAAqB,gBAAiB,EAAE,MAAM,QAAQ,CAAE;AAC1E,QAAM,cAAc,CAAE,gBACrB,gBAAiB,EAAE,UAAU,YAAY,CAAE;AAC5C,QAAM,eAAe,CAAE,iBACtB,gBAAiB,EAAE,WAAW,aAAa,CAAE;AAS9C,QAAM,qBAAiB;AAAA,IACtB,CAAE,gBAAsB,eAAsB;AAC7C,sBAAiB;AAAA,QAChB,aAAa;AAAA,QACb,mBAAmB;AAAA,MACpB,CAAE;AAAA,IACH;AAAA,IACA,CAAE,eAAgB;AAAA,EACnB;AAEA,SACC;AAAA,IAAC,uBAAAA;AAAA,IAAA;AAAA,MACA,SAAU;AAAA,QACT,oBAAoB;AAAA,QACpB,mBAAmB;AAAA,QACnB,gBAAgB;AAAA,MACjB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAS;AAAA,MACT,cAAe;AAAA,MACf,cAAe;AAAA,MACf;AAAA,MACA,eAAgB,CAAE,oBAAgC;AACjD,iBAAU,eAAgB;AAAA,MAC3B;AAAA,MACA,kBAAmB;AAAA,MACnB,WAAY;AAAA,QACX,aAAc,KAAK,CAAE,OAAQ,KAAK,CAAE;AAAA,QACpC,WAAY,QAAS;AAAA,QACrB,WAAY,KAAK,aAAa,MAAM,CAAE;AAAA,QACtC,WAAY,KAAK,WAAW,MAAM,CAAE;AAAA,QACpC,SAAU,IAAK;AAAA,MAChB,EAAE,KAAM,GAAI;AAAA,MACV,GAAG;AAAA;AAAA,EACN;AAEF;",
+  "names": ["Cropper"]
+}

package/build/constants.js

@@ -0,0 +1,37 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/image-cropper/src/constants.ts
+var constants_exports = {};
+__export(constants_exports, {
+  DEFAULT_ASPECT_RATIO_SLUG: () => DEFAULT_ASPECT_RATIO_SLUG,
+  MAX_ZOOM: () => MAX_ZOOM,
+  MIN_ZOOM: () => MIN_ZOOM
+});
+module.exports = __toCommonJS(constants_exports);
+var MIN_ZOOM = 1;
+var MAX_ZOOM = 5;
+var DEFAULT_ASPECT_RATIO_SLUG = "original";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DEFAULT_ASPECT_RATIO_SLUG,
+  MAX_ZOOM,
+  MIN_ZOOM
+});
+//# sourceMappingURL=constants.js.map

package/build/constants.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/constants.ts"],
+  "sourcesContent": ["export const MIN_ZOOM = 1;\nexport const MAX_ZOOM = 5;\nexport const DEFAULT_ASPECT_RATIO_SLUG = 'original';\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAO,IAAM,WAAW;AACjB,IAAM,WAAW;AACjB,IAAM,4BAA4B;",
+  "names": []
+}

package/build/index.js

@@ -0,0 +1,52 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/image-cropper/src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  ImageCropper: () => import_image_cropper.default,
+  ImageCropperProvider: () => import_provider.default,
+  normalizeRotation: () => import_utils.normalizeRotation,
+  useImageCropper: () => import_provider.useImageCropper
+});
+module.exports = __toCommonJS(index_exports);
+var import_image_cropper = __toESM(require("./components/image-cropper"));
+var import_provider = __toESM(require("./provider"));
+__reExport(index_exports, require("./types"), module.exports);
+var import_utils = require("./utils");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ImageCropper,
+  ImageCropperProvider,
+  normalizeRotation,
+  useImageCropper,
+  ...require("./types")
+});
+//# sourceMappingURL=index.js.map

package/build/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/index.ts"],
+  "sourcesContent": ["export { default as ImageCropper } from './components/image-cropper';\nexport { useImageCropper, default as ImageCropperProvider } from './provider';\nexport * from './types';\nexport { normalizeRotation } from './utils';\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2BAAwC;AACxC,sBAAiE;AACjE,0BAAc,oBAFd;AAGA,mBAAkC;",
+  "names": []
+}

package/build/provider/index.js

@@ -0,0 +1,86 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/image-cropper/src/provider/index.tsx
+var provider_exports = {};
+__export(provider_exports, {
+  ImageCropperContext: () => ImageCropperContext,
+  default: () => ImageCropperProvider,
+  useImageCropper: () => useImageCropper
+});
+module.exports = __toCommonJS(provider_exports);
+var import_element = require("@wordpress/element");
+var import_use_image_cropper = __toESM(require("./use-image-cropper"));
+var import_constants = require("../constants");
+var import_jsx_runtime = require("react/jsx-runtime");
+var ImageCropperContext = (0, import_element.createContext)({
+  cropperState: {
+    crop: { x: 0, y: 0 },
+    croppedArea: { x: 0, y: 0, width: 100, height: 100 },
+    croppedAreaPixels: null,
+    zoom: import_constants.MIN_ZOOM,
+    rotation: 0,
+    aspectRatio: 1,
+    flip: { horizontal: false, vertical: false },
+    mediaSize: null
+  },
+  setCropperState: () => {
+  },
+  resetState: null,
+  setResetState: () => {
+  },
+  isDirty: false,
+  reset: () => {
+  },
+  getCroppedImage: () => Promise.resolve(null)
+});
+function ImageCropperProvider({
+  children
+}) {
+  const cropperApi = (0, import_use_image_cropper.default)();
+  const contextValue = (0, import_element.useMemo)(() => {
+    return {
+      ...cropperApi
+    };
+  }, [cropperApi]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ImageCropperContext.Provider, { value: contextValue, children });
+}
+var useImageCropper = () => {
+  const context = (0, import_element.useContext)(ImageCropperContext);
+  if (!context) {
+    throw new Error("Missing ImageCropperContext");
+  }
+  return context;
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ImageCropperContext,
+  useImageCropper
+});
+//# sourceMappingURL=index.js.map

package/build/provider/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/provider/index.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { createContext, useContext, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport useCropper from './use-image-cropper';\nimport type { ImageCropperContextValue } from '../types';\nimport { MIN_ZOOM } from '../constants';\n\nexport const ImageCropperContext = createContext< ImageCropperContextValue >( {\n\tcropperState: {\n\t\tcrop: { x: 0, y: 0 },\n\t\tcroppedArea: { x: 0, y: 0, width: 100, height: 100 },\n\t\tcroppedAreaPixels: null,\n\t\tzoom: MIN_ZOOM,\n\t\trotation: 0,\n\t\taspectRatio: 1,\n\t\tflip: { horizontal: false, vertical: false },\n\t\tmediaSize: null,\n\t},\n\tsetCropperState: () => {},\n\tresetState: null,\n\tsetResetState: () => {},\n\tisDirty: false,\n\treset: () => {},\n\tgetCroppedImage: () => Promise.resolve( null ),\n} );\n\nexport default function ImageCropperProvider( {\n\tchildren,\n}: {\n\tchildren: React.ReactNode;\n} ) {\n\tconst cropperApi = useCropper();\n\tconst contextValue = useMemo( () => {\n\t\treturn {\n\t\t\t...cropperApi,\n\t\t};\n\t}, [ cropperApi ] );\n\n\treturn (\n\t\t<ImageCropperContext.Provider value={ contextValue }>\n\t\t\t{ children }\n\t\t</ImageCropperContext.Provider>\n\t);\n}\n\nexport const useImageCropper = () => {\n\tconst context = useContext( ImageCropperContext );\n\tif ( ! context ) {\n\t\tthrow new Error( 'Missing ImageCropperContext' );\n\t}\n\treturn context;\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAAmD;AAKnD,+BAAuB;AAEvB,uBAAyB;AAkCvB;AAhCK,IAAM,0BAAsB,8BAA2C;AAAA,EAC7E,cAAc;AAAA,IACb,MAAM,EAAE,GAAG,GAAG,GAAG,EAAE;AAAA,IACnB,aAAa,EAAE,GAAG,GAAG,GAAG,GAAG,OAAO,KAAK,QAAQ,IAAI;AAAA,IACnD,mBAAmB;AAAA,IACnB,MAAM;AAAA,IACN,UAAU;AAAA,IACV,aAAa;AAAA,IACb,MAAM,EAAE,YAAY,OAAO,UAAU,MAAM;AAAA,IAC3C,WAAW;AAAA,EACZ;AAAA,EACA,iBAAiB,MAAM;AAAA,EAAC;AAAA,EACxB,YAAY;AAAA,EACZ,eAAe,MAAM;AAAA,EAAC;AAAA,EACtB,SAAS;AAAA,EACT,OAAO,MAAM;AAAA,EAAC;AAAA,EACd,iBAAiB,MAAM,QAAQ,QAAS,IAAK;AAC9C,CAAE;AAEa,SAAR,qBAAuC;AAAA,EAC7C;AACD,GAEI;AACH,QAAM,iBAAa,yBAAAA,SAAW;AAC9B,QAAM,mBAAe,wBAAS,MAAM;AACnC,WAAO;AAAA,MACN,GAAG;AAAA,IACJ;AAAA,EACD,GAAG,CAAE,UAAW,CAAE;AAElB,SACC,4CAAC,oBAAoB,UAApB,EAA6B,OAAQ,cACnC,UACH;AAEF;AAEO,IAAM,kBAAkB,MAAM;AACpC,QAAM,cAAU,2BAAY,mBAAoB;AAChD,MAAK,CAAE,SAAU;AAChB,UAAM,IAAI,MAAO,6BAA8B;AAAA,EAChD;AACA,SAAO;AACR;",
+  "names": ["useCropper"]
+}