@orioro/react-image-crop 0.0.1

package/README.md

@@ -0,0 +1 @@
+# Template react lib

package/dist/CheckeredBg/index.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const CheckeredBg: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;

package/dist/ImageCropDialog/ImageCropDialog.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { ImageCropDialogProps } from '../types';
+export declare function ImageCropDialog(props: ImageCropDialogProps): React.JSX.Element;

package/dist/ImageCropDialog/InstructionsOverlay.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare function InstructionsOverlay({ active, style, }: {
+    active?: boolean;
+    style?: Record<string, any>;
+}): React.JSX.Element;

package/dist/ImageCropDialog/dialogSpec.d.ts

@@ -0,0 +1,2 @@
+import { DialogSpec } from '@orioro/react-ui-core';
+export declare const IMAGE_CROP_DIALOG_SPEC: DialogSpec;

package/dist/ImageCropDialog/index.d.ts

@@ -0,0 +1,3 @@
+export * from './ImageCropDialog';
+export * from './onSubmitApplyCrop';
+export * from './dialogSpec';

package/dist/ImageCropDialog/onSubmitApplyCrop.d.ts

@@ -0,0 +1,7 @@
+import { Merge } from 'type-fest';
+import { ImageCropDialogProps } from '../types';
+import { ApplyImageCropOptions } from '../util';
+export declare function onSubmitApplyCrop({ onSuccess, onError, ...options }: Merge<Pick<ApplyImageCropOptions, 'maxWidth' | 'maxHeight' | 'background'>, {
+    onSuccess: (file: File) => any;
+    onError: (error: any) => any;
+}>): ImageCropDialogProps['onSubmit'];

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from './CheckeredBg';
+export * from './ImageCropDialog';
+export * from './util';

package/dist/index.mjs

@@ -0,0 +1,909 @@
+import styled from 'styled-components';
+import React, { useCallback, useState, useEffect, useMemo } from 'react';
+import { Dialog, Slider, IconButton } from '@radix-ui/themes';
+import { withDefaults, Flex, Box, mergeable, Button, pickPromptUIProps, usePromptUI, SingleFileInput, LoadingOverlay, CANCELLED } from '@orioro/react-ui-core';
+import Cropper from 'react-easy-crop';
+import { useDebounce } from 'react-use';
+import canvasSize from 'canvas-size';
+import Compressor from 'compressorjs';
+import { Icon } from '@mdi/react';
+import { mdiMouseScrollWheel, mdiArrowAll, mdiGestureSpread, mdiGestureSwipe, mdiFlipHorizontal, mdiFlipVertical, mdiHelpCircleOutline } from '@mdi/js';
+
+function _typeof(o) {
+  "@babel/helpers - typeof";
+
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
+    return typeof o;
+  } : function (o) {
+    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+  }, _typeof(o);
+}
+
+var _assign = function __assign() {
+  _assign = Object.assign || function __assign(t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+    return t;
+  };
+  return _assign.apply(this, arguments);
+};
+function __rest(s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+}
+function __awaiter(thisArg, _arguments, P, generator) {
+  function adopt(value) {
+    return value instanceof P ? value : new P(function (resolve) {
+      resolve(value);
+    });
+  }
+  return new (P || (P = Promise))(function (resolve, reject) {
+    function fulfilled(value) {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+    function rejected(value) {
+      try {
+        step(generator["throw"](value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+    function step(result) {
+      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+    }
+    step((generator = generator.apply(thisArg, _arguments || [])).next());
+  });
+}
+function __generator(thisArg, body) {
+  var _ = {
+      label: 0,
+      sent: function sent() {
+        if (t[0] & 1) throw t[1];
+        return t[1];
+      },
+      trys: [],
+      ops: []
+    },
+    f,
+    y,
+    t,
+    g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+  return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function () {
+    return this;
+  }), g;
+  function verb(n) {
+    return function (v) {
+      return step([n, v]);
+    };
+  }
+  function step(op) {
+    if (f) throw new TypeError("Generator is already executing.");
+    while (g && (g = 0, op[0] && (_ = 0)), _) try {
+      if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+      if (y = 0, t) op = [op[0] & 2, t.value];
+      switch (op[0]) {
+        case 0:
+        case 1:
+          t = op;
+          break;
+        case 4:
+          _.label++;
+          return {
+            value: op[1],
+            done: false
+          };
+        case 5:
+          _.label++;
+          y = op[1];
+          op = [0];
+          continue;
+        case 7:
+          op = _.ops.pop();
+          _.trys.pop();
+          continue;
+        default:
+          if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
+            _ = 0;
+            continue;
+          }
+          if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) {
+            _.label = op[1];
+            break;
+          }
+          if (op[0] === 6 && _.label < t[1]) {
+            _.label = t[1];
+            t = op;
+            break;
+          }
+          if (t && _.label < t[2]) {
+            _.label = t[2];
+            _.ops.push(op);
+            break;
+          }
+          if (t[2]) _.ops.pop();
+          _.trys.pop();
+          continue;
+      }
+      op = body.call(thisArg, _);
+    } catch (e) {
+      op = [6, e];
+      y = 0;
+    } finally {
+      f = t = 0;
+    }
+    if (op[0] & 5) throw op[1];
+    return {
+      value: op[0] ? op[1] : void 0,
+      done: true
+    };
+  }
+}
+function __makeTemplateObject(cooked, raw) {
+  if (Object.defineProperty) {
+    Object.defineProperty(cooked, "raw", {
+      value: raw
+    });
+  } else {
+    cooked.raw = raw;
+  }
+  return cooked;
+}
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+  var e = new Error(message);
+  return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+var CheckeredBg = styled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n  font-size: 24px;\n  --backgroundColor: rgba(239, 239, 239);\n  --squareColor: rgba(204, 204, 204);\n  --squareSize: 2em;\n\n  background-color: var(--backgroundColor);\n  background-image: linear-gradient(\n      45deg,\n      var(--squareColor) 25%,\n      transparent 25%\n    ),\n    linear-gradient(135deg, var(--squareColor) 25%, transparent 25%),\n    linear-gradient(45deg, transparent 75%, var(--squareColor) 75%),\n    linear-gradient(135deg, transparent 75%, var(--squareColor) 75%);\n  background-size: calc(2 * var(--squareSize)) calc(2 * var(--squareSize));\n  background-position:\n    0 0,\n    var(--squareSize) 0,\n    var(--squareSize) calc(-1 * var(--squareSize)),\n    0 calc(-1 * var(--squareSize));\n\n  > img {\n    display: block;\n    width: 100%;\n    height: 100%;\n  }\n"], ["\n  font-size: 24px;\n  --backgroundColor: rgba(239, 239, 239);\n  --squareColor: rgba(204, 204, 204);\n  --squareSize: 2em;\n\n  background-color: var(--backgroundColor);\n  background-image: linear-gradient(\n      45deg,\n      var(--squareColor) 25%,\n      transparent 25%\n    ),\n    linear-gradient(135deg, var(--squareColor) 25%, transparent 25%),\n    linear-gradient(45deg, transparent 75%, var(--squareColor) 75%),\n    linear-gradient(135deg, transparent 75%, var(--squareColor) 75%);\n  background-size: calc(2 * var(--squareSize)) calc(2 * var(--squareSize));\n  background-position:\n    0 0,\n    var(--squareSize) 0,\n    var(--squareSize) calc(-1 * var(--squareSize)),\n    0 calc(-1 * var(--squareSize));\n\n  > img {\n    display: block;\n    width: 100%;\n    height: 100%;\n  }\n"])));
+var templateObject_1$2;
+
+function toImageUrl(src) {
+  if (typeof src === 'string') {
+    return src;
+  } else if (src instanceof File || src instanceof Blob) {
+    return URL.createObjectURL(src);
+  } else {
+    return src.url;
+  }
+}
+function toImageFile(src) {
+  return __awaiter(this, void 0, void 0, function () {
+    var url, response, blob, file;
+    return __generator(this, function (_a) {
+      switch (_a.label) {
+        case 0:
+          if (!(src instanceof File)) return [3 /*break*/, 1];
+          return [2 /*return*/, src];
+        case 1:
+          if (!(src instanceof Blob)) return [3 /*break*/, 2];
+          return [2 /*return*/, new File([src], 'image', {
+            type: src.type
+          })];
+        case 2:
+          url = typeof src === 'string' ? src : src.url;
+          return [4 /*yield*/, fetch(url)];
+        case 3:
+          response = _a.sent();
+          if (!response.ok) {
+            throw new Error("Failed to fetch ".concat(url, ": ").concat(response.statusText));
+          }
+          return [4 /*yield*/, response.blob()
+          // Step 3: Create a File object from the Blob
+          ];
+        case 4:
+          blob = _a.sent();
+          file = new File([blob], inferImageName(src), {
+            type: blob.type
+          });
+          return [2 /*return*/, file];
+      }
+    });
+  });
+}
+function inferImageName(src) {
+  if (typeof src === 'string') {
+    var parts = src.split(/s*\/s*/g);
+    return parts[parts.length - 1];
+  } else if (src instanceof File) {
+    return src.name;
+  } else if (src === null || src instanceof Blob) {
+    return 'image';
+  } else if (_typeof(src) === 'object') {
+    return inferImageName(src.url);
+  } else {
+    return 'image';
+  }
+}
+function canvasToBlobPromise(canvas, mimeType) {
+  if (mimeType === void 0) {
+    mimeType = 'image/png';
+  }
+  return new Promise(function (resolve, reject) {
+    canvas.toBlob(function (file) {
+      if (file) {
+        resolve(file);
+      } else {
+        reject(new Error('Failed to create blob'));
+      }
+    }, mimeType);
+  });
+}
+var createImage = function createImage(src) {
+  return __awaiter(void 0, void 0, void 0, function () {
+    var url;
+    return __generator(this, function (_a) {
+      switch (_a.label) {
+        case 0:
+          return [4 /*yield*/, toImageUrl(src)];
+        case 1:
+          url = _a.sent();
+          if (!url) {
+            throw new Error('Error retrieving image url');
+          }
+          return [2 /*return*/, new Promise(function (resolve, reject) {
+            var image = new Image();
+            image.addEventListener('load', function () {
+              return resolve(image);
+            });
+            image.addEventListener('error', function (error) {
+              return reject(error);
+            });
+            image.setAttribute('crossOrigin', 'anonymous'); // needed to avoid cross-origin issues on CodeSandbox
+            image.src = url;
+          })];
+      }
+    });
+  });
+};
+function drawCanvas(_a) {
+  var width = _a.width,
+    height = _a.height,
+    _b = _a.background,
+    background = _b === void 0 ? 'transparent' : _b;
+  var canvas = document.createElement('canvas');
+  var ctx = canvas.getContext('2d');
+  if (!ctx) {
+    throw new Error('Could not retrieve canvas context');
+  }
+  canvas.width = width;
+  canvas.height = height;
+  if (background === 'transparent') {
+    ctx.clearRect(0, 0, width, height);
+  } else {
+    ctx.fillStyle = background;
+    ctx.fillRect(0, 0, width, height);
+    ctx.fillStyle = '#000';
+  }
+  return {
+    canvas: canvas,
+    ctx: ctx
+  };
+}
+
+function getRadianAngle(degreeValue) {
+  return degreeValue * Math.PI / 180;
+}
+/**
+ * Returns the new bounding area of a rotated rectangle.
+ */
+function computeRotationSize(width, height, rotation) {
+  var rotRad = getRadianAngle(rotation);
+  return {
+    width: Math.abs(Math.cos(rotRad) * width) + Math.abs(Math.sin(rotRad) * height),
+    height: Math.abs(Math.sin(rotRad) * width) + Math.abs(Math.cos(rotRad) * height)
+  };
+}
+function _scaleProperties(obj, factor) {
+  return Object.fromEntries(Object.entries(obj).map(function (_a) {
+    var key = _a[0],
+      value = _a[1];
+    return [key, factor * value];
+  }));
+}
+/**
+ * This function was adapted from the one in the ReadMe of https://github.com/DominicTobias/react-image-crop
+ */
+function applyImageCrop(src, _a) {
+  var area = _a.area,
+    _b = _a.flipHorizontal,
+    flipHorizontal = _b === void 0 ? false : _b,
+    _c = _a.flipVertical,
+    flipVertical = _c === void 0 ? false : _c,
+    _d = _a.rotation,
+    rotation = _d === void 0 ? 0 : _d,
+    _e = _a.background,
+    background = _e === void 0 ? 'transparent' : _e,
+    _f = _a.mimeType,
+    mimeType = _f === void 0 ? 'image/png' : _f,
+    _g = _a.maxWidth,
+    maxWidth = _g === void 0 ? Infinity : _g,
+    _h = _a.maxHeight,
+    maxHeight = _h === void 0 ? Infinity : _h;
+  return __awaiter(this, void 0, void 0, function () {
+    var image, rotRad, _j, bBoxWidth, bBoxHeight, canvasMaxSize, finalMaxWidth, finalMaxHeight, canvasMaxSizeScaleFactor, dimensions, transferCanvas, cropCanvas;
+    return __generator(this, function (_k) {
+      switch (_k.label) {
+        case 0:
+          return [4 /*yield*/, createImage(src)];
+        case 1:
+          image = _k.sent();
+          rotRad = getRadianAngle(rotation);
+          _j = computeRotationSize(image.width, image.height, rotation), bBoxWidth = _j.width, bBoxHeight = _j.height;
+          return [4 /*yield*/, canvasSize.maxArea()];
+        case 2:
+          canvasMaxSize = _k.sent();
+          finalMaxWidth = Math.min(maxWidth, canvasMaxSize.width);
+          finalMaxHeight = Math.min(maxHeight, canvasMaxSize.height);
+          canvasMaxSizeScaleFactor = Math.min(1, finalMaxWidth / bBoxWidth, finalMaxHeight / bBoxHeight, finalMaxWidth / area.width, finalMaxHeight / area.height);
+          dimensions = {
+            //
+            // Scaled image dimensions
+            //
+            image: _scaleProperties({
+              width: image.width,
+              height: image.height
+            }, canvasMaxSizeScaleFactor),
+            //
+            // The canvas on which rotation operation will be executed
+            //
+            transferCanvas: _scaleProperties({
+              width: bBoxWidth,
+              height: bBoxHeight
+            }, canvasMaxSizeScaleFactor),
+            //
+            // Crop area
+            //
+            area: _scaleProperties(area, canvasMaxSizeScaleFactor)
+          };
+          transferCanvas = drawCanvas({
+            width: dimensions.transferCanvas.width,
+            height: dimensions.transferCanvas.height,
+            background: background
+          });
+          // translate canvas context to a central location to allow rotating and flipping around the center
+          transferCanvas.ctx.translate(dimensions.transferCanvas.width / 2, dimensions.transferCanvas.height / 2);
+          transferCanvas.ctx.rotate(rotRad);
+          transferCanvas.ctx.scale(flipHorizontal ? -1 : 1, flipVertical ? -1 : 1);
+          transferCanvas.ctx.translate(-dimensions.image.width / 2, -dimensions.image.height / 2);
+          // Draw rotated image onto transfer canvas
+          transferCanvas.ctx.drawImage(image, 0,
+          // source x
+          0,
+          // source y
+          dimensions.image.width,
+          // source width
+          dimensions.image.height);
+          cropCanvas = drawCanvas({
+            width: dimensions.area.width,
+            height: dimensions.area.height,
+            background: background
+          });
+          // Draw the cropped image onto the new canvas
+          cropCanvas.ctx.drawImage(transferCanvas.canvas,
+          // prevent negative positions (bug detected on iOS)
+          dimensions.area.x < 0 ? 0 : dimensions.area.x,
+          // source x
+          dimensions.area.y < 0 ? 0 : dimensions.area.y,
+          // source y
+          dimensions.area.width,
+          // source width
+          dimensions.area.height,
+          // source height
+          // transfer negative positions to drawing target (bug detected on iOS)
+          dimensions.area.x < 0 ? -1 * dimensions.area.x : 0,
+          // target x
+          dimensions.area.y < 0 ? -1 * dimensions.area.y : 0,
+          // target y
+          dimensions.area.width,
+          // target width
+          dimensions.area.height);
+          // Export as blob
+          return [2 /*return*/, canvasToBlobPromise(cropCanvas.canvas, mimeType)];
+      }
+    });
+  });
+}
+
+function compressImage(input, options) {
+  if (options === void 0) {
+    options = {};
+  }
+  return __awaiter(this, void 0, void 0, function () {
+    return __generator(this, function (_a) {
+      return [2 /*return*/, new Promise(function (resolve, reject) {
+        new Compressor(input, _assign({
+          success: function success(output) {
+            if (input instanceof File) {
+              if (output instanceof Blob) {
+                resolve(new File([output], input.name, {
+                  type: input.type
+                }));
+              } else {
+                resolve(output);
+              }
+            } else {
+              resolve(output);
+            }
+          },
+          error: function error(_error) {
+            reject(_error);
+          }
+        }, options));
+      })];
+    });
+  });
+}
+
+var InstructionBlock = withDefaults(styled(Flex)(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n    width: 100px;\n    font-size: 1rem;\n    text-align: center;\n  "], ["\n    width: 100px;\n    font-size: 1rem;\n    text-align: center;\n  "]))), {
+  direction: 'column',
+  alignItems: 'center',
+  gap: '3'
+});
+var InstructionsLayout = withDefaults(Flex, {
+  direction: 'row',
+  gap: '5',
+  height: '100%',
+  alignItems: 'center',
+  justifyContent: 'center'
+});
+var MouseInstructions = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 100%;\n  display: none;\n\n  @media (pointer: fine) {\n    display: block;\n  }\n"], ["\n  height: 100%;\n  display: none;\n\n  @media (pointer: fine) {\n    display: block;\n  }\n"])));
+var TouchInstructions = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 100%;\n  display: none;\n\n  @media (pointer: coarse) {\n    display: block;\n  }\n"], ["\n  height: 100%;\n  display: none;\n\n  @media (pointer: coarse) {\n    display: block;\n  }\n"])));
+function InstructionsOverlay(_a) {
+  var _b = _a.active,
+    active = _b === void 0 ? true : _b,
+    _c = _a.style,
+    style = _c === void 0 ? {} : _c;
+  return /*#__PURE__*/React.createElement(Box, {
+    style: _assign({
+      position: 'absolute',
+      zIndex: 2,
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      transition: 'opacity .5s ease, backdrop-filter .5s ease',
+      opacity: active ? 1 : 0,
+      backdropFilter: active ? 'blur(10px)' : 'none',
+      backgroundColor: 'rgba(0, 0, 0, 0.5)',
+      color: 'white',
+      pointerEvents: 'none'
+    }, style)
+  }, /*#__PURE__*/React.createElement(MouseInstructions, null, /*#__PURE__*/React.createElement(InstructionsLayout, null, /*#__PURE__*/React.createElement(InstructionBlock, null, /*#__PURE__*/React.createElement(Icon, {
+    path: mdiMouseScrollWheel,
+    size: 1.5
+  }), /*#__PURE__*/React.createElement("div", null, "Use scroll para zoom")), /*#__PURE__*/React.createElement(InstructionBlock, null, /*#__PURE__*/React.createElement(Icon, {
+    path: mdiArrowAll,
+    size: 1.5
+  }), /*#__PURE__*/React.createElement("div", null, "Arraste para reposicionar")))), /*#__PURE__*/React.createElement(TouchInstructions, null, /*#__PURE__*/React.createElement(InstructionsLayout, null, /*#__PURE__*/React.createElement(InstructionBlock, null, /*#__PURE__*/React.createElement(Icon, {
+    path: mdiGestureSpread,
+    size: 1.5
+  }), /*#__PURE__*/React.createElement("div", null, "Use dois dedos para zoom")), /*#__PURE__*/React.createElement(InstructionBlock, null, /*#__PURE__*/React.createElement(Icon, {
+    path: mdiGestureSwipe,
+    size: 1.5
+  }), /*#__PURE__*/React.createElement("div", null, "Arraste para reposicionar")))));
+}
+var templateObject_1$1, templateObject_2, templateObject_3;
+
+var CropperContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  height: 400px;\n"], ["\n  position: relative;\n  height: 400px;\n"])));
+var SupportButton = mergeable(Button, {
+  variant: 'soft',
+  color: 'gray',
+  type: 'button'
+});
+var Submit = mergeable(Button, {
+  type: 'submit'
+});
+function Control(_a) {
+  var label = _a.label,
+    children = _a.children;
+  return /*#__PURE__*/React.createElement(Flex, {
+    direction: "column",
+    gap: "2"
+  }, /*#__PURE__*/React.createElement("label", {
+    style: {
+      fontWeight: 'bold',
+      fontSize: '.9rem'
+    }
+  }, label), children);
+}
+function initialValue(_a) {
+  var src = _a.src,
+    background = _a.background;
+  return {
+    src: src,
+    background: background,
+    originalSize: undefined,
+    area: undefined,
+    areaPercentage: undefined,
+    rotation: 0,
+    zoom: 1,
+    flipHorizontal: false,
+    flipVertical: false
+  };
+}
+var CENTER_CROP_POSITION = {
+  x: 0,
+  y: 0
+};
+function ImageCropDialog(props) {
+  var _this = this;
+  var _a = pickPromptUIProps(_assign({}, props)),
+    promptUIProps = _a[0],
+    _b = _a[1],
+    _c = _b.open,
+    open = _c === void 0 ? false : _c,
+    _d = _b.src,
+    src = _d === void 0 ? null : _d,
+    _e = _b.background,
+    background = _e === void 0 ? 'transparent' : _e,
+    _f = _b.aspectRatio,
+    aspectRatio = _f === void 0 ? 1 : _f,
+    _g = _b.loading,
+    loading = _g === void 0 ? 'Carregando' : _g,
+    _h = _b.submit,
+    submit = _h === void 0 ? 'Enviar' : _h,
+    _j = _b.cancel,
+    cancel = _j === void 0 ? 'Cancelar' : _j,
+    _k = _b.zoom,
+    enableZoom = _k === void 0 ? false : _k,
+    _l = _b.minZoom,
+    minZoom = _l === void 0 ? 0.3 : _l,
+    _m = _b.maxZoom,
+    maxZoom = _m === void 0 ? 5 : _m,
+    _o = _b.rotation,
+    enableRotation = _o === void 0 ? false : _o,
+    _p = _b.flip,
+    enableFlip = _p === void 0 ? false : _p,
+    _q = _b.restrictPosition,
+    restrictPosition = _q === void 0 ? true : _q;
+  var promptUI = usePromptUI(_assign(_assign({}, promptUIProps), {
+    active: open,
+    initialValue: initialValue({
+      src: src,
+      background: background
+    })
+  }));
+  var currentState = promptUI.value;
+  var onCropComplete = useCallback(function (areaPercentage, area) {
+    promptUI.setValue(_assign(_assign({}, currentState), {
+      area: area,
+      areaPercentage: areaPercentage
+    }));
+  }, [promptUI.value]);
+  var _r = useState(false),
+    openReady = _r[0],
+    setOpenReady = _r[1];
+  useEffect(function () {
+    if (open) {
+      // Re-center
+      _setCropPos(CENTER_CROP_POSITION);
+      //
+      // Wait for dialog scale transition to be ready before
+      // rendering cropper: react-easy-crop has trouble
+      // rendering when inside elements that animate size (transform: scale)
+      //
+      // https://github.com/ValentinH/react-easy-crop/issues/428
+      // https://github.com/ValentinH/react-easy-crop/issues/409
+      // https://github.com/ValentinH/react-easy-crop/issues/267
+      // https://github.com/ValentinH/react-easy-crop/issues/400
+      //
+      var readyDelayTimeout_1 = setTimeout(function () {
+        return setOpenReady(true);
+      }, 200);
+      return function () {
+        return clearTimeout(readyDelayTimeout_1);
+      };
+    } else {
+      setOpenReady(false);
+    }
+  }, [open]);
+  var _srcImageUrl = useMemo(function () {
+    return currentState.src ? toImageUrl(currentState.src) : null;
+  }, [currentState.src]);
+  //
+  // Zoom and rotation are controlled simultaneously in mobile,
+  // store in separate states in order to be capable of handling
+  // their simultaneous changes
+  //
+  var _s = useState(1),
+    _zoom = _s[0],
+    _setZoom = _s[1];
+  var _t = useState(0),
+    _rotation = _t[0],
+    _setRotation = _t[1];
+  var _u = useState(CENTER_CROP_POSITION),
+    _cropPos = _u[0],
+    _setCropPos = _u[1];
+  useDebounce(function () {
+    promptUI.setValue(_assign(_assign({}, currentState), {
+      zoom: _zoom,
+      rotation: _rotation
+    }));
+  }, 200, [_zoom, _rotation]);
+  var EFFECTIVE_MIN_ZOOM = useMemo(function () {
+    return restrictPosition ? Math.max(1, minZoom) : minZoom;
+  }, [minZoom, restrictPosition]);
+  var _v = useState(false),
+    showInstructions = _v[0],
+    setShowInstructions = _v[1];
+  // //
+  // // https://github.com/ValentinH/react-easy-crop/issues/435
+  // //
+  // const _finalCropPos = useMemo(
+  //   () => (restrictPosition && _zoom < 1 ? CENTER_CROP_POSITION : _cropPos),
+  //   [_cropPos, _zoom, restrictPosition],
+  // )
+  //
+  // Resets all modifications
+  //
+  function _resetChanges() {
+    _setCropPos({
+      x: 0,
+      y: 0
+    });
+    _setZoom(1);
+    _setRotation(0);
+  }
+  //
+  // Resets all modifications redefines image
+  //
+  function _clear() {
+    _resetChanges();
+    promptUI.setValue(initialValue({
+      src: null,
+      background: background
+    }));
+    setShowInstructions(false);
+  }
+  useEffect(function () {
+    if (!open) {
+      _clear();
+    } else {
+      setShowInstructions(true);
+      var instructionsTimeout_1 = setTimeout(function () {
+        return setShowInstructions(false);
+      }, 2000);
+      return function () {
+        return clearTimeout(instructionsTimeout_1);
+      };
+    }
+  }, [open]);
+  return /*#__PURE__*/React.createElement(Dialog.Root, {
+    open: open
+  }, /*#__PURE__*/React.createElement(Dialog.Content, {
+    onEscapeKeyDown: promptUI.cancel,
+    onPointerDownOutside: promptUI.cancel
+  }, /*#__PURE__*/React.createElement("form", {
+    onSubmit: function onSubmit(e) {
+      return __awaiter(_this, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+          e.preventDefault();
+          promptUI.submit();
+          return [2 /*return*/];
+        });
+      });
+    }
+  }, /*#__PURE__*/React.createElement(Flex, {
+    direction: "column",
+    gap: "3"
+  }, !Boolean(currentState.src) && ( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SingleFileInput, {
+    value: currentState.src,
+    onSetValue: function onSetValue(file) {
+      return promptUI.setValue(_assign(_assign({}, currentState), {
+        src: file
+      }));
+    },
+    accept: "image/*"
+  }))), _srcImageUrl && ( /*#__PURE__*/React.createElement(Flex, {
+    direction: "column"
+  }, /*#__PURE__*/React.createElement(CheckeredBg, null, /*#__PURE__*/React.createElement(CropperContainer, {
+    style: {
+      backgroundColor: background
+    }
+  }, openReady ? ( /*#__PURE__*/React.createElement(Cropper, {
+    image: _srcImageUrl,
+    transform: ["translate(".concat(_cropPos.x, "px, ").concat(_cropPos.y, "px)"), "rotateY(".concat(currentState.flipHorizontal ? 180 : 0, "deg)"), "rotateX(".concat(currentState.flipVertical ? 180 : 0, "deg)"), "rotateZ(".concat(_rotation, "deg)"), "scale(".concat(_zoom, ")")].join(' '),
+    crop: _cropPos,
+    onCropChange: _setCropPos,
+    aspect: aspectRatio,
+    onCropComplete: onCropComplete,
+    zoom: _zoom,
+    minZoom: EFFECTIVE_MIN_ZOOM,
+    maxZoom: maxZoom,
+    onZoomChange: function onZoomChange(zoom) {
+      return _setZoom(zoom);
+    },
+    rotation: _rotation,
+    onRotationChange: function onRotationChange(rotation) {
+      return _setRotation(rotation % 360);
+    },
+    onMediaLoaded: function onMediaLoaded(mediaSize) {
+      return promptUI.setValue(_assign(_assign({}, currentState), {
+        originalSize: {
+          width: mediaSize.naturalWidth,
+          height: mediaSize.naturalHeight
+        }
+      }));
+    },
+    restrictPosition: restrictPosition,
+    objectFit: props.objectFit
+  })) : ( /*#__PURE__*/React.createElement(LoadingOverlay, {
+    message: loading
+  })), promptUI.isLoading && ( /*#__PURE__*/React.createElement(LoadingOverlay, {
+    message: "Processando"
+  })), /*#__PURE__*/React.createElement(InstructionsOverlay, {
+    active: showInstructions
+  }))), (enableZoom || enableRotation) && ( /*#__PURE__*/React.createElement(Flex, {
+    direction: {
+      xs: 'column',
+      md: 'row'
+    },
+    // alignItems="center"
+    justifyContent: "center",
+    gap: "5",
+    mb: "4"
+  }, enableRotation && ( /*#__PURE__*/React.createElement(Control, {
+    label: "Rota\xE7\xE3o: ".concat(_rotation, "\xB0")
+  }, /*#__PURE__*/React.createElement(Slider, {
+    style: {
+      width: 200
+    },
+    min: -359,
+    step: 1,
+    max: 359,
+    value: [_rotation],
+    onValueChange: function onValueChange(value) {
+      return _setRotation(value[0] % 360);
+    },
+    size: "1"
+  }))), enableZoom && ( /*#__PURE__*/React.createElement(Control, {
+    label: "Zoom: ".concat(_zoom.toFixed(2), "x")
+  }, /*#__PURE__*/React.createElement(Slider, {
+    style: {
+      width: 200
+    },
+    min: EFFECTIVE_MIN_ZOOM,
+    step: 0.01,
+    max: maxZoom,
+    value: [_zoom],
+    onValueChange: function onValueChange(value) {
+      return _setZoom(value[0]);
+    },
+    size: "1"
+  }))), enableFlip && ( /*#__PURE__*/React.createElement(Control, {
+    label: "Sentido:"
+  }, /*#__PURE__*/React.createElement(Flex, {
+    direction: "row",
+    gap: "3"
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    size: "2",
+    type: "button",
+    variant: currentState.flipHorizontal ? 'outline' : 'soft',
+    onClick: function onClick() {
+      return promptUI.setValue(_assign(_assign({}, currentState), {
+        flipHorizontal: !currentState.flipHorizontal
+      }));
+    }
+  }, /*#__PURE__*/React.createElement(Icon, {
+    path: mdiFlipHorizontal,
+    size: 1
+  })), /*#__PURE__*/React.createElement(IconButton, {
+    size: "2",
+    type: "button",
+    variant: currentState.flipVertical ? 'outline' : 'soft',
+    onClick: function onClick() {
+      return promptUI.setValue(_assign(_assign({}, currentState), {
+        flipVertical: !currentState.flipVertical
+      }));
+    }
+  }, /*#__PURE__*/React.createElement(Icon, {
+    path: mdiFlipVertical,
+    size: 1
+  }))))))))), /*#__PURE__*/React.createElement(Flex, {
+    direction: "row",
+    justifyContent: "space-between"
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    type: "button",
+    radius: "full",
+    onClick: function onClick() {
+      return setShowInstructions(!showInstructions);
+    },
+    onMouseEnter: function onMouseEnter() {
+      return setShowInstructions(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setShowInstructions(false);
+    },
+    variant: "ghost"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    path: mdiHelpCircleOutline,
+    size: "16px"
+  })), /*#__PURE__*/React.createElement(Flex, {
+    direction: "row",
+    justifyContent: "flex-end"
+  }, !promptUI.isLoading && ( /*#__PURE__*/React.createElement(React.Fragment, null, _srcImageUrl && promptUI.hasUnsubmittedChanges && ( /*#__PURE__*/React.createElement(SupportButton, {
+    type: "button",
+    onClick: _resetChanges
+  }, "Redefinir")), /*#__PURE__*/React.createElement(Dialog.Close, _assign({}, promptUI.cancelProps), /*#__PURE__*/React.createElement(SupportButton, {
+    children: cancel
+  })))), /*#__PURE__*/React.createElement(Dialog.Close, null, /*#__PURE__*/React.createElement(Submit, _assign({}, promptUI.submitProps, {
+    loading: promptUI.isLoading
+  }), submit))))))));
+}
+var templateObject_1;
+
+function onSubmitApplyCrop(_a) {
+  var onSuccess = _a.onSuccess,
+    onError = _a.onError,
+    options = __rest(_a, ["onSuccess", "onError"]);
+  return function (imageCropState) {
+    return __awaiter(this, void 0, void 0, function () {
+      var src, cropOptions, croppedImageBlob, err_1;
+      return __generator(this, function (_a) {
+        switch (_a.label) {
+          case 0:
+            src = imageCropState.src, cropOptions = __rest(imageCropState, ["src"]);
+            _a.label = 1;
+          case 1:
+            _a.trys.push([1, 3,, 4]);
+            return [4 /*yield*/, applyImageCrop(src, _assign(_assign({}, cropOptions), options))];
+          case 2:
+            croppedImageBlob = _a.sent();
+            if (!croppedImageBlob) {
+              throw new Error('Error generating cropped image');
+            }
+            return [3 /*break*/, 4];
+          case 3:
+            err_1 = _a.sent();
+            onError(err_1);
+            return [2 /*return*/];
+          case 4:
+            return [4 /*yield*/, onSuccess(new File([croppedImageBlob], inferImageName(src), {
+              type: croppedImageBlob.type
+            }))];
+          case 5:
+            _a.sent();
+            return [2 /*return*/];
+        }
+      });
+    });
+  };
+}
+
+var IMAGE_CROP_DIALOG_SPEC = [ImageCropDialog, {
+  getProps: function getProps(_a, propsOrImage) {
+    var resolve = _a.resolve,
+      reject = _a.reject;
+    if (propsOrImage === void 0) {
+      propsOrImage = {};
+    }
+    var isImage = propsOrImage instanceof File || propsOrImage instanceof Blob || typeof propsOrImage === 'string';
+    var baseProps = {
+      onCancel: function onCancel() {
+        return resolve(CANCELLED);
+      },
+      onSubmit: onSubmitApplyCrop(_assign({
+        onSuccess: resolve,
+        onError: reject
+      }, isImage ? {} : {
+        maxHeight: propsOrImage.maxHeight,
+        maxWidth: propsOrImage.maxWidth,
+        background: propsOrImage.background
+      }))
+    };
+    return isImage ? _assign({
+      src: propsOrImage
+    }, baseProps) : _assign(_assign({}, propsOrImage), baseProps);
+  }
+}];
+
+export { CheckeredBg, IMAGE_CROP_DIALOG_SPEC, ImageCropDialog, applyImageCrop, canvasToBlobPromise, compressImage, computeRotationSize, createImage, drawCanvas, getRadianAngle, inferImageName, onSubmitApplyCrop, toImageFile, toImageUrl };

package/dist/types.d.ts

@@ -0,0 +1,31 @@
+import type { Area } from 'react-easy-crop';
+export type FileRepresentation = {
+    url: string;
+    [key: string]: any;
+};
+export type ImageSpec = string | FileRepresentation | File | Blob;
+export type ImageCropDialogProps = {
+    open?: boolean;
+    aspectRatio?: number;
+    rotation?: boolean;
+    zoom?: boolean;
+    minZoom?: number;
+    maxZoom?: number;
+    flip?: boolean;
+    background?: string;
+    src?: ImageSpec;
+    submit?: any;
+    onSubmit: (result: ImageCropState) => any;
+    cancel?: any;
+    onCancel?: () => any;
+};
+export type ImageCropState = {
+    src: ImageSpec;
+    area: Area;
+    areaPercentage: Area;
+    rotation: number;
+    zoom: number;
+    flipHorizontal: boolean;
+    flipVertical: boolean;
+    background: string;
+};

package/dist/util/applyImageCrop.d.ts

@@ -0,0 +1,24 @@
+import { ImageCropState } from '../types';
+import { Area } from 'react-easy-crop';
+export declare function getRadianAngle(degreeValue: number): number;
+/**
+ * Returns the new bounding area of a rotated rectangle.
+ */
+export declare function computeRotationSize(width: number, height: number, rotation: number): {
+    width: number;
+    height: number;
+};
+export type ApplyImageCropOptions = {
+    area: Area;
+    rotation?: number;
+    flipHorizontal?: boolean;
+    flipVertical?: boolean;
+    background?: string;
+    mimeType?: 'image/png' | 'image/jpeg' | 'image/webp';
+    maxWidth?: number;
+    maxHeight?: number;
+};
+/**
+ * This function was adapted from the one in the ReadMe of https://github.com/DominicTobias/react-image-crop
+ */
+export declare function applyImageCrop(src: ImageCropState['src'], { area, flipHorizontal, flipVertical, rotation, background, mimeType, maxWidth, maxHeight, }: ApplyImageCropOptions): Promise<Blob>;

package/dist/util/compressImage.d.ts

@@ -0,0 +1,4 @@
+import Compressor from 'compressorjs';
+type CompressorOptions = ConstructorParameters<typeof Compressor>[1];
+export declare function compressImage(input: File | Blob, options?: CompressorOptions): Promise<File | Blob>;
+export {};

package/dist/util/index.d.ts

@@ -0,0 +1,3 @@
+export * from './misc';
+export * from './applyImageCrop';
+export * from './compressImage';

package/dist/util/misc.d.ts

@@ -0,0 +1,14 @@
+import { SrcImage } from '../types';
+export declare function toImageUrl(src: SrcImage): string;
+export declare function toImageFile(src: SrcImage): Promise<File>;
+export declare function inferImageName(src: SrcImage): string;
+export declare function canvasToBlobPromise(canvas: HTMLCanvasElement, mimeType?: string): Promise<Blob>;
+export declare const createImage: (src: SrcImage) => Promise<HTMLImageElement>;
+export declare function drawCanvas({ width, height, background, }: {
+    width: number;
+    height: number;
+    background: string;
+}): {
+    canvas: HTMLCanvasElement;
+    ctx: CanvasRenderingContext2D;
+};

package/dist/util/tmp_appbackup.d.ts

@@ -0,0 +1,20 @@
+import { ImageCropState } from '../types';
+import { Merge } from 'type-fest';
+export declare function getRadianAngle(degreeValue: number): number;
+type ImageSize = {
+    width: number;
+    height: number;
+};
+/**
+ * Returns the new bounding area of a rotated rectangle.
+ */
+export declare function computeRotatedImageSize(size: ImageSize, rotation: number): ImageSize;
+/**
+ * This function was adapted from the one in the ReadMe of https://github.com/DominicTobias/react-image-crop
+ */
+export declare function applyImageCrop(src: ImageCropState['src'], { area, rotation, zoom, flip, background, mimeType, }: Merge<Pick<ImageCropState, 'area' | 'rotation' | 'flip'>, {
+    background?: 'transparent' | string;
+    zoom?: number;
+    mimeType?: 'image/png' | 'image/jpeg' | 'image/webp';
+}>): Promise<Blob>;
+export {};

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@orioro/react-image-crop",
+  "version": "0.0.1",
+  "packageManager": "yarn@4.0.2",
+  "type": "module",
+  "main": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": "./dist/index.mjs",
+    "./*": "./dist/*"
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "ISC",
+  "scripts": {
+    "build": "rm -rf dist && rollup --config ./rollup.config.mjs",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "devDependencies": {
+    "@orioro/dev": "workspace:^",
+    "@types/canvas-size": "^1.2.2",
+    "rollup": "^4.13.0",
+    "storybook": "^8.0.0"
+  },
+  "dependencies": {
+    "@mdi/js": "^7.4.47",
+    "@mdi/react": "^1.6.1",
+    "@orioro/react-ui-core": "workspace:^",
+    "@radix-ui/themes": "^3.0.1",
+    "canvas-size": "^2.0.0",
+    "compressorjs": "^1.2.1",
+    "react": "^18.2.0",
+    "react-easy-crop": "^5.1.0",
+    "react-use": "^17.5.1",
+    "styled-components": "^6.1.8",
+    "type-fest": "^4.26.1"
+  }
+}