@greatapps/common 1.1.448 → 1.1.449

package/dist/modules/images/hooks/use-image-upload.hook.mjs

@@ -0,0 +1,96 @@
+"use client";
+import { useState, useCallback } from "react";
+import { useMutation } from "@tanstack/react-query";
+import { compressImage } from "../utils/compress-image";
+import { cropImageToCanvas } from "../utils/crop-image";
+import { validateImage } from "../utils/validate-image";
+import { processImageAction } from "../actions/process-image.action";
+function useImageUpload(options) {
+  const { config, onSuccess, onError } = options;
+  const [originalImage, setOriginalImage] = useState(null);
+  const [croppedPreview, setCroppedPreview] = useState(null);
+  const [showCropModal, setShowCropModal] = useState(false);
+  const processMutation = useMutation({
+    mutationFn: processImageAction,
+    onSuccess: (result) => {
+      if (result.success && result.base64Image) {
+        setCroppedPreview(result.base64Image);
+        onSuccess?.(result.base64Image);
+      } else {
+        onError?.(result.error || "Erro desconhecido");
+      }
+    },
+    onError: (error) => {
+      onError?.(error instanceof Error ? error.message : "Erro ao processar");
+    }
+  });
+  const handleFileSelect = useCallback(
+    async (file) => {
+      const validation = validateImage(file);
+      if (!validation.valid) {
+        onError?.(validation.error || "Arquivo inv\xE1lido");
+        return;
+      }
+      try {
+        const compressed = await compressImage(file);
+        const reader = new FileReader();
+        reader.onload = (e) => {
+          setOriginalImage(e.target?.result);
+          setShowCropModal(true);
+        };
+        reader.readAsDataURL(compressed);
+      } catch {
+        onError?.("Erro ao processar imagem");
+      }
+    },
+    [onError]
+  );
+  const handleCropConfirm = useCallback(
+    async (imageElement, cropArea) => {
+      try {
+        const croppedBase64 = await cropImageToCanvas(
+          imageElement,
+          cropArea,
+          config.width,
+          config.height
+        );
+        setCroppedPreview(croppedBase64);
+        setShowCropModal(false);
+        processMutation.mutate({
+          base64Image: croppedBase64,
+          targetWidth: config.width,
+          targetHeight: config.height,
+          cropArea: {
+            x: cropArea.x,
+            y: cropArea.y,
+            width: cropArea.width,
+            height: cropArea.height,
+            unit: cropArea.unit
+          }
+        });
+      } catch {
+        onError?.("Erro ao aplicar crop");
+      }
+    },
+    [config, processMutation, onError]
+  );
+  const clear = useCallback(() => {
+    setOriginalImage(null);
+    setCroppedPreview(null);
+  }, []);
+  return {
+    originalImage,
+    croppedPreview,
+    showCropModal,
+    config,
+    isProcessing: processMutation.isPending,
+    handleFileSelect,
+    handleCropConfirm,
+    setShowCropModal,
+    clear
+  };
+}
+export {
+  useImageUpload
+};
+//# sourceMappingURL=use-image-upload.hook.mjs.map

package/dist/modules/images/hooks/use-image-upload.hook.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/modules/images/hooks/use-image-upload.hook.ts"],"sourcesContent":["'use client'\n\nimport { useState, useCallback } from 'react'\nimport { useMutation } from '@tanstack/react-query'\nimport type { Crop } from 'react-image-crop'\nimport { compressImage } from '../utils/compress-image'\nimport { cropImageToCanvas } from '../utils/crop-image'\nimport { validateImage } from '../utils/validate-image'\nimport { processImageAction } from '../actions/process-image.action'\nimport type { ImageConfig } from '../types/image.type'\n\nexport interface UseImageUploadOptions {\n  config: ImageConfig\n  onSuccess?: (base64Image: string) => void\n  onError?: (error: string) => void\n}\n\nexport function useImageUpload(options: UseImageUploadOptions) {\n  const { config, onSuccess, onError } = options\n\n  const [originalImage, setOriginalImage] = useState<string | null>(null)\n  const [croppedPreview, setCroppedPreview] = useState<string | null>(null)\n  const [showCropModal, setShowCropModal] = useState(false)\n\n  const processMutation = useMutation({\n    mutationFn: processImageAction,\n    onSuccess: (result) => {\n      if (result.success && result.base64Image) {\n        setCroppedPreview(result.base64Image)\n        onSuccess?.(result.base64Image)\n      } else {\n        onError?.(result.error || 'Erro desconhecido')\n      }\n    },\n    onError: (error) => {\n      onError?.(error instanceof Error ? error.message : 'Erro ao processar')\n    },\n  })\n\n  const handleFileSelect = useCallback(\n    async (file: File) => {\n      const validation = validateImage(file)\n      if (!validation.valid) {\n        onError?.(validation.error || 'Arquivo inválido')\n        return\n      }\n\n      try {\n        const compressed = await compressImage(file)\n        const reader = new FileReader()\n        reader.onload = (e) => {\n          setOriginalImage(e.target?.result as string)\n          setShowCropModal(true)\n        }\n        reader.readAsDataURL(compressed)\n      } catch {\n        onError?.('Erro ao processar imagem')\n      }\n    },\n    [onError]\n  )\n\n  const handleCropConfirm = useCallback(\n    async (imageElement: HTMLImageElement, cropArea: Crop) => {\n      try {\n        const croppedBase64 = await cropImageToCanvas(\n          imageElement,\n          cropArea,\n          config.width,\n          config.height\n        )\n\n        setCroppedPreview(croppedBase64)\n        setShowCropModal(false)\n\n        processMutation.mutate({\n          base64Image: croppedBase64,\n          targetWidth: config.width,\n          targetHeight: config.height,\n          cropArea: {\n            x: cropArea.x,\n            y: cropArea.y,\n            width: cropArea.width,\n            height: cropArea.height,\n            unit: cropArea.unit,\n          },\n        })\n      } catch {\n        onError?.('Erro ao aplicar crop')\n      }\n    },\n    [config, processMutation, onError]\n  )\n\n  const clear = useCallback(() => {\n    setOriginalImage(null)\n    setCroppedPreview(null)\n  }, [])\n\n  return {\n    originalImage,\n    croppedPreview,\n    showCropModal,\n    config,\n    isProcessing: processMutation.isPending,\n    handleFileSelect,\n    handleCropConfirm,\n    setShowCropModal,\n    clear,\n  }\n}\n"],"mappings":";AAEA,SAAS,UAAU,mBAAmB;AACtC,SAAS,mBAAmB;AAE5B,SAAS,qBAAqB;AAC9B,SAAS,yBAAyB;AAClC,SAAS,qBAAqB;AAC9B,SAAS,0BAA0B;AAS5B,SAAS,eAAe,SAAgC;AAC7D,QAAM,EAAE,QAAQ,WAAW,QAAQ,IAAI;AAEvC,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAwB,IAAI;AACtE,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAwB,IAAI;AACxE,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,KAAK;AAExD,QAAM,kBAAkB,YAAY;AAAA,IAClC,YAAY;AAAA,IACZ,WAAW,CAAC,WAAW;AACrB,UAAI,OAAO,WAAW,OAAO,aAAa;AACxC,0BAAkB,OAAO,WAAW;AACpC,oBAAY,OAAO,WAAW;AAAA,MAChC,OAAO;AACL,kBAAU,OAAO,SAAS,mBAAmB;AAAA,MAC/C;AAAA,IACF;AAAA,IACA,SAAS,CAAC,UAAU;AAClB,gBAAU,iBAAiB,QAAQ,MAAM,UAAU,mBAAmB;AAAA,IACxE;AAAA,EACF,CAAC;AAED,QAAM,mBAAmB;AAAA,IACvB,OAAO,SAAe;AACpB,YAAM,aAAa,cAAc,IAAI;AACrC,UAAI,CAAC,WAAW,OAAO;AACrB,kBAAU,WAAW,SAAS,qBAAkB;AAChD;AAAA,MACF;AAEA,UAAI;AACF,cAAM,aAAa,MAAM,cAAc,IAAI;AAC3C,cAAM,SAAS,IAAI,WAAW;AAC9B,eAAO,SAAS,CAAC,MAAM;AACrB,2BAAiB,EAAE,QAAQ,MAAgB;AAC3C,2BAAiB,IAAI;AAAA,QACvB;AACA,eAAO,cAAc,UAAU;AAAA,MACjC,QAAQ;AACN,kBAAU,0BAA0B;AAAA,MACtC;AAAA,IACF;AAAA,IACA,CAAC,OAAO;AAAA,EACV;AAEA,QAAM,oBAAoB;AAAA,IACxB,OAAO,cAAgC,aAAmB;AACxD,UAAI;AACF,cAAM,gBAAgB,MAAM;AAAA,UAC1B;AAAA,UACA;AAAA,UACA,OAAO;AAAA,UACP,OAAO;AAAA,QACT;AAEA,0BAAkB,aAAa;AAC/B,yBAAiB,KAAK;AAEtB,wBAAgB,OAAO;AAAA,UACrB,aAAa;AAAA,UACb,aAAa,OAAO;AAAA,UACpB,cAAc,OAAO;AAAA,UACrB,UAAU;AAAA,YACR,GAAG,SAAS;AAAA,YACZ,GAAG,SAAS;AAAA,YACZ,OAAO,SAAS;AAAA,YAChB,QAAQ,SAAS;AAAA,YACjB,MAAM,SAAS;AAAA,UACjB;AAAA,QACF,CAAC;AAAA,MACH,QAAQ;AACN,kBAAU,sBAAsB;AAAA,MAClC;AAAA,IACF;AAAA,IACA,CAAC,QAAQ,iBAAiB,OAAO;AAAA,EACnC;AAEA,QAAM,QAAQ,YAAY,MAAM;AAC9B,qBAAiB,IAAI;AACrB,sBAAkB,IAAI;AAAA,EACxB,GAAG,CAAC,CAAC;AAEL,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc,gBAAgB;AAAA,IAC9B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;","names":[]}

package/dist/modules/images/services/image-processing.service.mjs

@@ -0,0 +1,70 @@
+import {
+  PhotonImage,
+  resize,
+  crop,
+  SamplingFilter
+} from "@cf-wasm/photon/edge-light";
+function processImage(input) {
+  const {
+    imageBytes,
+    targetWidth,
+    targetHeight,
+    outputFormat = "jpeg",
+    quality = 85
+  } = input;
+  const image = PhotonImage.new_from_byteslice(imageBytes);
+  try {
+    const sourceWidth = image.get_width();
+    const sourceHeight = image.get_height();
+    const targetAspect = targetWidth / targetHeight;
+    const sourceAspect = sourceWidth / sourceHeight;
+    let cropX1 = 0;
+    let cropY1 = 0;
+    let cropX2 = sourceWidth;
+    let cropY2 = sourceHeight;
+    if (sourceAspect > targetAspect) {
+      const cropWidth = Math.round(sourceHeight * targetAspect);
+      cropX1 = Math.round((sourceWidth - cropWidth) / 2);
+      cropX2 = cropX1 + cropWidth;
+    } else if (sourceAspect < targetAspect) {
+      const cropHeight = Math.round(sourceWidth / targetAspect);
+      cropY1 = Math.round((sourceHeight - cropHeight) / 2);
+      cropY2 = cropY1 + cropHeight;
+    }
+    const cropped = crop(image, cropX1, cropY1, cropX2, cropY2);
+    const resized = resize(
+      cropped,
+      targetWidth,
+      targetHeight,
+      SamplingFilter.Triangle
+    );
+    let outputBytes;
+    switch (outputFormat) {
+      case "jpeg":
+        outputBytes = resized.get_bytes_jpeg(quality);
+        break;
+      case "png":
+        outputBytes = resized.get_bytes();
+        break;
+      case "webp":
+        outputBytes = resized.get_bytes_webp();
+        break;
+      default:
+        outputBytes = resized.get_bytes_jpeg(quality);
+    }
+    cropped.free();
+    resized.free();
+    return {
+      bytes: outputBytes,
+      width: targetWidth,
+      height: targetHeight,
+      format: `image/${outputFormat}`
+    };
+  } finally {
+    image.free();
+  }
+}
+export {
+  processImage
+};
+//# sourceMappingURL=image-processing.service.mjs.map

package/dist/modules/images/services/image-processing.service.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/modules/images/services/image-processing.service.ts"],"sourcesContent":["import {\n  PhotonImage,\n  resize,\n  crop,\n  SamplingFilter,\n} from '@cf-wasm/photon/edge-light'\nimport type { ProcessImageInput, ProcessImageOutput } from '../types/image.type'\n\nexport function processImage(input: ProcessImageInput): ProcessImageOutput {\n  const {\n    imageBytes,\n    targetWidth,\n    targetHeight,\n    outputFormat = 'jpeg',\n    quality = 85,\n  } = input\n\n  const image = PhotonImage.new_from_byteslice(imageBytes)\n\n  try {\n    const sourceWidth = image.get_width()\n    const sourceHeight = image.get_height()\n    const targetAspect = targetWidth / targetHeight\n    const sourceAspect = sourceWidth / sourceHeight\n\n    let cropX1 = 0\n    let cropY1 = 0\n    let cropX2 = sourceWidth\n    let cropY2 = sourceHeight\n\n    if (sourceAspect > targetAspect) {\n      const cropWidth = Math.round(sourceHeight * targetAspect)\n      cropX1 = Math.round((sourceWidth - cropWidth) / 2)\n      cropX2 = cropX1 + cropWidth\n    } else if (sourceAspect < targetAspect) {\n      const cropHeight = Math.round(sourceWidth / targetAspect)\n      cropY1 = Math.round((sourceHeight - cropHeight) / 2)\n      cropY2 = cropY1 + cropHeight\n    }\n\n    const cropped = crop(image, cropX1, cropY1, cropX2, cropY2)\n    const resized = resize(\n      cropped,\n      targetWidth,\n      targetHeight,\n      SamplingFilter.Triangle\n    )\n\n    let outputBytes: Uint8Array\n    switch (outputFormat) {\n      case 'jpeg':\n        outputBytes = resized.get_bytes_jpeg(quality)\n        break\n      case 'png':\n        outputBytes = resized.get_bytes()\n        break\n      case 'webp':\n        outputBytes = resized.get_bytes_webp()\n        break\n      default:\n        outputBytes = resized.get_bytes_jpeg(quality)\n    }\n\n    cropped.free()\n    resized.free()\n\n    return {\n      bytes: outputBytes,\n      width: targetWidth,\n      height: targetHeight,\n      format: `image/${outputFormat}`,\n    }\n  } finally {\n    image.free()\n  }\n}\n"],"mappings":"AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGA,SAAS,aAAa,OAA8C;AACzE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,UAAU;AAAA,EACZ,IAAI;AAEJ,QAAM,QAAQ,YAAY,mBAAmB,UAAU;AAEvD,MAAI;AACF,UAAM,cAAc,MAAM,UAAU;AACpC,UAAM,eAAe,MAAM,WAAW;AACtC,UAAM,eAAe,cAAc;AACnC,UAAM,eAAe,cAAc;AAEnC,QAAI,SAAS;AACb,QAAI,SAAS;AACb,QAAI,SAAS;AACb,QAAI,SAAS;AAEb,QAAI,eAAe,cAAc;AAC/B,YAAM,YAAY,KAAK,MAAM,eAAe,YAAY;AACxD,eAAS,KAAK,OAAO,cAAc,aAAa,CAAC;AACjD,eAAS,SAAS;AAAA,IACpB,WAAW,eAAe,cAAc;AACtC,YAAM,aAAa,KAAK,MAAM,cAAc,YAAY;AACxD,eAAS,KAAK,OAAO,eAAe,cAAc,CAAC;AACnD,eAAS,SAAS;AAAA,IACpB;AAEA,UAAM,UAAU,KAAK,OAAO,QAAQ,QAAQ,QAAQ,MAAM;AAC1D,UAAM,UAAU;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,MACA,eAAe;AAAA,IACjB;AAEA,QAAI;AACJ,YAAQ,cAAc;AAAA,MACpB,KAAK;AACH,sBAAc,QAAQ,eAAe,OAAO;AAC5C;AAAA,MACF,KAAK;AACH,sBAAc,QAAQ,UAAU;AAChC;AAAA,MACF,KAAK;AACH,sBAAc,QAAQ,eAAe;AACrC;AAAA,MACF;AACE,sBAAc,QAAQ,eAAe,OAAO;AAAA,IAChD;AAEA,YAAQ,KAAK;AACb,YAAQ,KAAK;AAEb,WAAO;AAAA,MACL,OAAO;AAAA,MACP,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,QAAQ,SAAS,YAAY;AAAA,IAC/B;AAAA,EACF,UAAE;AACA,UAAM,KAAK;AAAA,EACb;AACF;","names":[]}

package/dist/modules/images/types/image.type.mjs

@@ -0,0 +1 @@
+//# sourceMappingURL=image.type.mjs.map

package/dist/modules/images/types/image.type.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/modules/images/utils/compress-image.mjs

@@ -0,0 +1,18 @@
+import imageCompression from "browser-image-compression";
+import { TARGET_FILE_SIZE_MB } from "../constants/image.constants";
+async function compressImage(file, options = {}) {
+  const { maxSizeMB = TARGET_FILE_SIZE_MB, maxWidthOrHeight = 1920 } = options;
+  if (file.size <= maxSizeMB * 1024 * 1024) {
+    return file;
+  }
+  return imageCompression(file, {
+    maxSizeMB,
+    maxWidthOrHeight,
+    useWebWorker: true,
+    fileType: file.type
+  });
+}
+export {
+  compressImage
+};
+//# sourceMappingURL=compress-image.mjs.map

package/dist/modules/images/utils/compress-image.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/modules/images/utils/compress-image.ts"],"sourcesContent":["import imageCompression from 'browser-image-compression'\nimport type { CompressImageOptions } from '../types/image.type'\nimport { TARGET_FILE_SIZE_MB } from '../constants/image.constants'\n\nexport async function compressImage(\n  file: File,\n  options: CompressImageOptions = {}\n): Promise<File> {\n  const { maxSizeMB = TARGET_FILE_SIZE_MB, maxWidthOrHeight = 1920 } = options\n\n  if (file.size <= maxSizeMB * 1024 * 1024) {\n    return file\n  }\n\n  return imageCompression(file, {\n    maxSizeMB,\n    maxWidthOrHeight,\n    useWebWorker: true,\n    fileType: file.type as 'image/jpeg' | 'image/png' | 'image/webp',\n  })\n}\n"],"mappings":"AAAA,OAAO,sBAAsB;AAE7B,SAAS,2BAA2B;AAEpC,eAAsB,cACpB,MACA,UAAgC,CAAC,GAClB;AACf,QAAM,EAAE,YAAY,qBAAqB,mBAAmB,KAAK,IAAI;AAErE,MAAI,KAAK,QAAQ,YAAY,OAAO,MAAM;AACxC,WAAO;AAAA,EACT;AAEA,SAAO,iBAAiB,MAAM;AAAA,IAC5B;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,UAAU,KAAK;AAAA,EACjB,CAAC;AACH;","names":[]}

package/dist/modules/images/utils/crop-image.mjs

@@ -0,0 +1,29 @@
+async function cropImageToCanvas(image, crop, targetWidth, targetHeight) {
+  const canvas = document.createElement("canvas");
+  const ctx = canvas.getContext("2d");
+  if (!ctx) throw new Error("Canvas n\xE3o suportado");
+  const pixelCrop = {
+    x: crop.unit === "%" ? crop.x / 100 * image.naturalWidth : crop.x,
+    y: crop.unit === "%" ? crop.y / 100 * image.naturalHeight : crop.y,
+    width: crop.unit === "%" ? crop.width / 100 * image.naturalWidth : crop.width,
+    height: crop.unit === "%" ? crop.height / 100 * image.naturalHeight : crop.height
+  };
+  canvas.width = targetWidth;
+  canvas.height = targetHeight;
+  ctx.drawImage(
+    image,
+    pixelCrop.x,
+    pixelCrop.y,
+    pixelCrop.width,
+    pixelCrop.height,
+    0,
+    0,
+    targetWidth,
+    targetHeight
+  );
+  return canvas.toDataURL("image/jpeg", 0.9);
+}
+export {
+  cropImageToCanvas
+};
+//# sourceMappingURL=crop-image.mjs.map

package/dist/modules/images/utils/crop-image.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/modules/images/utils/crop-image.ts"],"sourcesContent":["import type { Crop } from 'react-image-crop'\n\nexport async function cropImageToCanvas(\n  image: HTMLImageElement,\n  crop: Crop,\n  targetWidth: number,\n  targetHeight: number\n): Promise<string> {\n  const canvas = document.createElement('canvas')\n  const ctx = canvas.getContext('2d')\n\n  if (!ctx) throw new Error('Canvas não suportado')\n\n  const pixelCrop = {\n    x: crop.unit === '%' ? (crop.x / 100) * image.naturalWidth : crop.x,\n    y: crop.unit === '%' ? (crop.y / 100) * image.naturalHeight : crop.y,\n    width:\n      crop.unit === '%' ? (crop.width / 100) * image.naturalWidth : crop.width,\n    height:\n      crop.unit === '%'\n        ? (crop.height / 100) * image.naturalHeight\n        : crop.height,\n  }\n\n  canvas.width = targetWidth\n  canvas.height = targetHeight\n\n  ctx.drawImage(\n    image,\n    pixelCrop.x,\n    pixelCrop.y,\n    pixelCrop.width,\n    pixelCrop.height,\n    0,\n    0,\n    targetWidth,\n    targetHeight\n  )\n\n  return canvas.toDataURL('image/jpeg', 0.9)\n}\n"],"mappings":"AAEA,eAAsB,kBACpB,OACA,MACA,aACA,cACiB;AACjB,QAAM,SAAS,SAAS,cAAc,QAAQ;AAC9C,QAAM,MAAM,OAAO,WAAW,IAAI;AAElC,MAAI,CAAC,IAAK,OAAM,IAAI,MAAM,yBAAsB;AAEhD,QAAM,YAAY;AAAA,IAChB,GAAG,KAAK,SAAS,MAAO,KAAK,IAAI,MAAO,MAAM,eAAe,KAAK;AAAA,IAClE,GAAG,KAAK,SAAS,MAAO,KAAK,IAAI,MAAO,MAAM,gBAAgB,KAAK;AAAA,IACnE,OACE,KAAK,SAAS,MAAO,KAAK,QAAQ,MAAO,MAAM,eAAe,KAAK;AAAA,IACrE,QACE,KAAK,SAAS,MACT,KAAK,SAAS,MAAO,MAAM,gBAC5B,KAAK;AAAA,EACb;AAEA,SAAO,QAAQ;AACf,SAAO,SAAS;AAEhB,MAAI;AAAA,IACF;AAAA,IACA,UAAU;AAAA,IACV,UAAU;AAAA,IACV,UAAU;AAAA,IACV,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,SAAO,OAAO,UAAU,cAAc,GAAG;AAC3C;","names":[]}

package/dist/modules/images/utils/validate-image.mjs

@@ -0,0 +1,50 @@
+import {
+  ACCEPTED_IMAGE_FORMATS,
+  MAX_FILE_SIZE_MB
+} from "../constants/image.constants";
+function validateImageFormat(file) {
+  if (!ACCEPTED_IMAGE_FORMATS.includes(file.type)) {
+    return {
+      valid: false,
+      error: "Formato n\xE3o suportado. Use PNG, JPEG ou WebP."
+    };
+  }
+  return { valid: true };
+}
+function validateImageSize(file, maxSizeMB = MAX_FILE_SIZE_MB) {
+  if (file.size > maxSizeMB * 1024 * 1024) {
+    return {
+      valid: false,
+      error: `Arquivo muito grande. M\xE1ximo ${maxSizeMB}MB.`
+    };
+  }
+  return { valid: true };
+}
+function validateImage(file) {
+  const formatValidation = validateImageFormat(file);
+  if (!formatValidation.valid) return formatValidation;
+  const sizeValidation = validateImageSize(file);
+  if (!sizeValidation.valid) return sizeValidation;
+  return { valid: true };
+}
+async function getImageDimensions(file) {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.onload = () => {
+      resolve({ width: img.naturalWidth, height: img.naturalHeight });
+      URL.revokeObjectURL(img.src);
+    };
+    img.onerror = () => {
+      reject(new Error("Falha ao carregar imagem"));
+      URL.revokeObjectURL(img.src);
+    };
+    img.src = URL.createObjectURL(file);
+  });
+}
+export {
+  getImageDimensions,
+  validateImage,
+  validateImageFormat,
+  validateImageSize
+};
+//# sourceMappingURL=validate-image.mjs.map

package/dist/modules/images/utils/validate-image.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/modules/images/utils/validate-image.ts"],"sourcesContent":["import {\n  ACCEPTED_IMAGE_FORMATS,\n  MAX_FILE_SIZE_MB,\n} from '../constants/image.constants'\n\nexport interface ImageValidationResult {\n  valid: boolean\n  error?: string\n}\n\nexport function validateImageFormat(file: File): ImageValidationResult {\n  if (!ACCEPTED_IMAGE_FORMATS.includes(file.type as (typeof ACCEPTED_IMAGE_FORMATS)[number])) {\n    return {\n      valid: false,\n      error: 'Formato não suportado. Use PNG, JPEG ou WebP.',\n    }\n  }\n  return { valid: true }\n}\n\nexport function validateImageSize(\n  file: File,\n  maxSizeMB: number = MAX_FILE_SIZE_MB\n): ImageValidationResult {\n  if (file.size > maxSizeMB * 1024 * 1024) {\n    return {\n      valid: false,\n      error: `Arquivo muito grande. Máximo ${maxSizeMB}MB.`,\n    }\n  }\n  return { valid: true }\n}\n\nexport function validateImage(file: File): ImageValidationResult {\n  const formatValidation = validateImageFormat(file)\n  if (!formatValidation.valid) return formatValidation\n\n  const sizeValidation = validateImageSize(file)\n  if (!sizeValidation.valid) return sizeValidation\n\n  return { valid: true }\n}\n\nexport async function getImageDimensions(\n  file: File\n): Promise<{ width: number; height: number }> {\n  return new Promise((resolve, reject) => {\n    const img = new Image()\n    img.onload = () => {\n      resolve({ width: img.naturalWidth, height: img.naturalHeight })\n      URL.revokeObjectURL(img.src)\n    }\n    img.onerror = () => {\n      reject(new Error('Falha ao carregar imagem'))\n      URL.revokeObjectURL(img.src)\n    }\n    img.src = URL.createObjectURL(file)\n  })\n}\n"],"mappings":"AAAA;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAOA,SAAS,oBAAoB,MAAmC;AACrE,MAAI,CAAC,uBAAuB,SAAS,KAAK,IAA+C,GAAG;AAC1F,WAAO;AAAA,MACL,OAAO;AAAA,MACP,OAAO;AAAA,IACT;AAAA,EACF;AACA,SAAO,EAAE,OAAO,KAAK;AACvB;AAEO,SAAS,kBACd,MACA,YAAoB,kBACG;AACvB,MAAI,KAAK,OAAO,YAAY,OAAO,MAAM;AACvC,WAAO;AAAA,MACL,OAAO;AAAA,MACP,OAAO,mCAAgC,SAAS;AAAA,IAClD;AAAA,EACF;AACA,SAAO,EAAE,OAAO,KAAK;AACvB;AAEO,SAAS,cAAc,MAAmC;AAC/D,QAAM,mBAAmB,oBAAoB,IAAI;AACjD,MAAI,CAAC,iBAAiB,MAAO,QAAO;AAEpC,QAAM,iBAAiB,kBAAkB,IAAI;AAC7C,MAAI,CAAC,eAAe,MAAO,QAAO;AAElC,SAAO,EAAE,OAAO,KAAK;AACvB;AAEA,eAAsB,mBACpB,MAC4C;AAC5C,SAAO,IAAI,QAAQ,CAAC,SAAS,WAAW;AACtC,UAAM,MAAM,IAAI,MAAM;AACtB,QAAI,SAAS,MAAM;AACjB,cAAQ,EAAE,OAAO,IAAI,cAAc,QAAQ,IAAI,cAAc,CAAC;AAC9D,UAAI,gBAAgB,IAAI,GAAG;AAAA,IAC7B;AACA,QAAI,UAAU,MAAM;AAClB,aAAO,IAAI,MAAM,0BAA0B,CAAC;AAC5C,UAAI,gBAAgB,IAAI,GAAG;AAAA,IAC7B;AACA,QAAI,MAAM,IAAI,gBAAgB,IAAI;AAAA,EACpC,CAAC;AACH;","names":[]}

package/dist/server.mjs

@@ -53,6 +53,8 @@ import { getClientInfoFromRequest } from "./infra/utils/client-info";
 import { getUserContext } from "./modules/auth/utils/get-user-context";
 import { buildWlOverride, buildWlOverrideFromJwt } from "./modules/auth/utils/build-wl-override";
 import { safeServerAction } from "./utils/safeServerAction";
+import { processImageAction } from "./modules/images/actions/process-image.action";
+import { processImage } from "./modules/images/services/image-processing.service";
 export {
   ApiClient,
   accountService,
@@ -94,6 +96,8 @@ export {
   listProjectUsersAction,
   listSubscriptionsAction,
   plansService,
+  processImage,
+  processImageAction,
   projectUsersService,
   removeProjectUserAction,
   requestEmailChangeAction,

package/dist/server.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/server.ts"],"sourcesContent":["import 'server-only';\r\n\r\n// API Client\r\nexport { ApiClient, api, apiClient } from './infra/api/client';\r\n\r\n// Services\r\nexport { authService } from './modules/auth/services/auth.service';\r\nexport { whitelabelService } from './modules/whitelabel/services/whitelabel.service';\r\nexport { revalidateWhitelabelAction } from './modules/whitelabel/actions/revalidate-whitelabel.action';\r\nexport { assertManagementPermission } from './modules/auth/utils/assert-management-permission';\r\nexport { assertManagementSubscription } from './modules/auth/utils/assert-management-subscription';\r\nexport { assertSubscriptionAddon } from './modules/auth/utils/assert-subscription-addon';\r\nexport { assertPaidSubscription } from './modules/auth/utils/assert-paid-subscription';\r\nexport { subscriptionsService } from './modules/subscriptions/services/subscriptions.service';\r\nexport { plansService } from './modules/plans/services/plans.service';\r\nexport { cardsService } from './modules/cards/services/cards.service';\r\nexport { iaCreditsService } from './modules/ia-credits/services/ia-credits.service';\r\n\r\n// Actions\r\nexport { findWhitelabel } from './modules/whitelabel/actions/find-whitelabel.action';\r\nexport { validateSessionAction } from './modules/auth/actions/validate-session.action';\r\nexport { findUserById } from './modules/users/action/find-user-by-id.action';\r\nexport { findCurrentAccount } from './modules/accounts/actions/find-current-account.action';\r\nexport { listSubscriptionsAction } from './modules/subscriptions/actions/list-subscriptions.action';\r\nexport { findPlanByIdAction } from './modules/plans/actions/find-plan-by-id.action';\r\nexport { listPlansAction } from './modules/plans/actions/list-plans.action';\r\nexport { calculateSubscriptionAction } from './modules/subscriptions/actions/calculate-subscription.action';\r\nexport { updateSubscriptionPlanAction } from './modules/subscriptions/actions/update-subscription-plan.action';\r\nexport { listCardsAction } from './modules/cards/actions/list-cards.action';\r\nexport { createCardAction } from './modules/cards/actions/create-card.action';\r\nexport { resolvePlanExtrasPrices } from './modules/subscriptions/utils/resolve-plan-extras-prices';\r\nexport { hasSubscriptionExpired } from './modules/subscriptions/utils/has-subscription-expired';\r\nexport { listIaCreditsAction } from './modules/ia-credits/actions/list-ia-credits.action';\r\n\r\n// Project Users Services & Actions (server-only)\r\nexport { projectUsersService } from './modules/projects/services/project-users.service';\r\nexport { listProjectUsersAction } from './modules/projects/actions/list-project-users.action';\r\nexport { listAvailableUsersAction } from './modules/projects/actions/list-available-users.action';\r\nexport { addProjectUserAction } from './modules/projects/actions/add-project-user.action';\r\nexport { removeProjectUserAction } from './modules/projects/actions/remove-project-user.action';\r\n\r\n// Account Services & Actions (server-only)\r\nexport { accountService } from './modules/accounts/services/account.service';\r\nexport { twoFactorService } from './modules/accounts/services/two-factor.service';\r\nexport {\r\n  listAccountUsersAction,\r\n  updateUserAction,\r\n  updateAccountAction,\r\n  updateAccountUserByIdAction,\r\n  deleteAccountUserAction,\r\n  deleteAccountAction,\r\n  createAccountUserAction,\r\n  changePasswordAction,\r\n  requestEmailChangeAction,\r\n  confirmEmailChangeAction,\r\n  requestPhoneChangeAction,\r\n  confirmPhoneChangeAction,\r\n  generateTwoFactorAction,\r\n  confirmTwoFactorAction,\r\n  disableTwoFactorAction,\r\n} from './modules/accounts/actions/account-management.action';\r\n\r\n// Server Utils\r\nexport { getClientInfoFromRequest } from './infra/utils/client-info';\r\nexport { getUserContext } from './modules/auth/utils/get-user-context';\r\nexport { buildWlOverride, buildWlOverrideFromJwt } from './modules/auth/utils/build-wl-override';\r\nexport { safeServerAction } from './utils/safeServerAction';\r\n"],"mappings":"AAAA,OAAO;AAGP,SAAS,WAAW,KAAK,iBAAiB;AAG1C,SAAS,mBAAmB;AAC5B,SAAS,yBAAyB;AAClC,SAAS,kCAAkC;AAC3C,SAAS,kCAAkC;AAC3C,SAAS,oCAAoC;AAC7C,SAAS,+BAA+B;AACxC,SAAS,8BAA8B;AACvC,SAAS,4BAA4B;AACrC,SAAS,oBAAoB;AAC7B,SAAS,oBAAoB;AAC7B,SAAS,wBAAwB;AAGjC,SAAS,sBAAsB;AAC/B,SAAS,6BAA6B;AACtC,SAAS,oBAAoB;AAC7B,SAAS,0BAA0B;AACnC,SAAS,+BAA+B;AACxC,SAAS,0BAA0B;AACnC,SAAS,uBAAuB;AAChC,SAAS,mCAAmC;AAC5C,SAAS,oCAAoC;AAC7C,SAAS,uBAAuB;AAChC,SAAS,wBAAwB;AACjC,SAAS,+BAA+B;AACxC,SAAS,8BAA8B;AACvC,SAAS,2BAA2B;AAGpC,SAAS,2BAA2B;AACpC,SAAS,8BAA8B;AACvC,SAAS,gCAAgC;AACzC,SAAS,4BAA4B;AACrC,SAAS,+BAA+B;AAGxC,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;AACjC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP,SAAS,gCAAgC;AACzC,SAAS,sBAAsB;AAC/B,SAAS,iBAAiB,8BAA8B;AACxD,SAAS,wBAAwB;","names":[]}
+{"version":3,"sources":["../src/server.ts"],"sourcesContent":["import 'server-only';\r\n\r\n// API Client\r\nexport { ApiClient, api, apiClient } from './infra/api/client';\r\n\r\n// Services\r\nexport { authService } from './modules/auth/services/auth.service';\r\nexport { whitelabelService } from './modules/whitelabel/services/whitelabel.service';\r\nexport { revalidateWhitelabelAction } from './modules/whitelabel/actions/revalidate-whitelabel.action';\r\nexport { assertManagementPermission } from './modules/auth/utils/assert-management-permission';\r\nexport { assertManagementSubscription } from './modules/auth/utils/assert-management-subscription';\r\nexport { assertSubscriptionAddon } from './modules/auth/utils/assert-subscription-addon';\r\nexport { assertPaidSubscription } from './modules/auth/utils/assert-paid-subscription';\r\nexport { subscriptionsService } from './modules/subscriptions/services/subscriptions.service';\r\nexport { plansService } from './modules/plans/services/plans.service';\r\nexport { cardsService } from './modules/cards/services/cards.service';\r\nexport { iaCreditsService } from './modules/ia-credits/services/ia-credits.service';\r\n\r\n// Actions\r\nexport { findWhitelabel } from './modules/whitelabel/actions/find-whitelabel.action';\r\nexport { validateSessionAction } from './modules/auth/actions/validate-session.action';\r\nexport { findUserById } from './modules/users/action/find-user-by-id.action';\r\nexport { findCurrentAccount } from './modules/accounts/actions/find-current-account.action';\r\nexport { listSubscriptionsAction } from './modules/subscriptions/actions/list-subscriptions.action';\r\nexport { findPlanByIdAction } from './modules/plans/actions/find-plan-by-id.action';\r\nexport { listPlansAction } from './modules/plans/actions/list-plans.action';\r\nexport { calculateSubscriptionAction } from './modules/subscriptions/actions/calculate-subscription.action';\r\nexport { updateSubscriptionPlanAction } from './modules/subscriptions/actions/update-subscription-plan.action';\r\nexport { listCardsAction } from './modules/cards/actions/list-cards.action';\r\nexport { createCardAction } from './modules/cards/actions/create-card.action';\r\nexport { resolvePlanExtrasPrices } from './modules/subscriptions/utils/resolve-plan-extras-prices';\r\nexport { hasSubscriptionExpired } from './modules/subscriptions/utils/has-subscription-expired';\r\nexport { listIaCreditsAction } from './modules/ia-credits/actions/list-ia-credits.action';\r\n\r\n// Project Users Services & Actions (server-only)\r\nexport { projectUsersService } from './modules/projects/services/project-users.service';\r\nexport { listProjectUsersAction } from './modules/projects/actions/list-project-users.action';\r\nexport { listAvailableUsersAction } from './modules/projects/actions/list-available-users.action';\r\nexport { addProjectUserAction } from './modules/projects/actions/add-project-user.action';\r\nexport { removeProjectUserAction } from './modules/projects/actions/remove-project-user.action';\r\n\r\n// Account Services & Actions (server-only)\r\nexport { accountService } from './modules/accounts/services/account.service';\r\nexport { twoFactorService } from './modules/accounts/services/two-factor.service';\r\nexport {\r\n  listAccountUsersAction,\r\n  updateUserAction,\r\n  updateAccountAction,\r\n  updateAccountUserByIdAction,\r\n  deleteAccountUserAction,\r\n  deleteAccountAction,\r\n  createAccountUserAction,\r\n  changePasswordAction,\r\n  requestEmailChangeAction,\r\n  confirmEmailChangeAction,\r\n  requestPhoneChangeAction,\r\n  confirmPhoneChangeAction,\r\n  generateTwoFactorAction,\r\n  confirmTwoFactorAction,\r\n  disableTwoFactorAction,\r\n} from './modules/accounts/actions/account-management.action';\r\n\r\n// Server Utils\r\nexport { getClientInfoFromRequest } from './infra/utils/client-info';\r\nexport { getUserContext } from './modules/auth/utils/get-user-context';\r\nexport { buildWlOverride, buildWlOverrideFromJwt } from './modules/auth/utils/build-wl-override';\r\nexport { safeServerAction } from './utils/safeServerAction';\r\n\r\n// Image Processing (server-side)\r\nexport { processImageAction } from './modules/images/actions/process-image.action';\r\nexport { processImage } from './modules/images/services/image-processing.service';\r\nexport type {\r\n  ProcessImageInput,\r\n  ProcessImageOutput,\r\n  ProcessImageActionInput,\r\n  ProcessImageActionOutput,\r\n} from './modules/images/types/image.type';\r\n"],"mappings":"AAAA,OAAO;AAGP,SAAS,WAAW,KAAK,iBAAiB;AAG1C,SAAS,mBAAmB;AAC5B,SAAS,yBAAyB;AAClC,SAAS,kCAAkC;AAC3C,SAAS,kCAAkC;AAC3C,SAAS,oCAAoC;AAC7C,SAAS,+BAA+B;AACxC,SAAS,8BAA8B;AACvC,SAAS,4BAA4B;AACrC,SAAS,oBAAoB;AAC7B,SAAS,oBAAoB;AAC7B,SAAS,wBAAwB;AAGjC,SAAS,sBAAsB;AAC/B,SAAS,6BAA6B;AACtC,SAAS,oBAAoB;AAC7B,SAAS,0BAA0B;AACnC,SAAS,+BAA+B;AACxC,SAAS,0BAA0B;AACnC,SAAS,uBAAuB;AAChC,SAAS,mCAAmC;AAC5C,SAAS,oCAAoC;AAC7C,SAAS,uBAAuB;AAChC,SAAS,wBAAwB;AACjC,SAAS,+BAA+B;AACxC,SAAS,8BAA8B;AACvC,SAAS,2BAA2B;AAGpC,SAAS,2BAA2B;AACpC,SAAS,8BAA8B;AACvC,SAAS,gCAAgC;AACzC,SAAS,4BAA4B;AACrC,SAAS,+BAA+B;AAGxC,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;AACjC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP,SAAS,gCAAgC;AACzC,SAAS,sBAAsB;AAC/B,SAAS,iBAAiB,8BAA8B;AACxD,SAAS,wBAAwB;AAGjC,SAAS,0BAA0B;AACnC,SAAS,oBAAoB;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@greatapps/common",
-  "version": "1.1.448",
+  "version": "1.1.449",
   "description": "Shared library for GreatApps frontend applications",
   "main": "./dist/index.mjs",
   "types": "./src/index.ts",
@@ -31,6 +31,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "@cf-wasm/photon": "^0.3.4",
     "@greatapps/cache": "^2.0.1",
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-checkbox": "^1.3.3",
@@ -47,6 +48,7 @@
     "@tanstack/query-broadcast-client-experimental": "^5.95.2",
     "@tanstack/react-query-persist-client": "^5.95.2",
     "axios": "^1.13.6",
+    "browser-image-compression": "^2.0.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
@@ -55,6 +57,7 @@
     "input-otp": "^1.4.2",
     "libphonenumber-js": "^1.12.40",
     "react-day-picker": "^9.14.0",
+    "react-image-crop": "^11.0.10",
     "server-only": "^0.0.1",
     "sonner": ">=2.0.0",
     "tailwind-merge": "^3.5.0",

package/src/components/modals/cards/AddCardModal.tsx

@@ -9,7 +9,7 @@ import { useCreateCard } from '../../../modules/cards/hooks/create-card.hook';
 import { useUpdateAccount } from '../../../modules/accounts/hooks/useAccountManagement';
 import { CardFormFields, BillingFormFields, cardFormSchema } from './CardFormFields';
 import type { CardFormData, StripeElementsStatus } from './CardFormFields';
-import { IconX } from '@tabler/icons-react';
+import { IconLoader2, IconX } from '@tabler/icons-react';
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { CardNumberElement, useElements, useStripe } from '@stripe/react-stripe-js';
@@ -248,6 +248,7 @@ export default function AddCardModal() {
                   Voltar
                 </Button>
                 <Button type="submit" className="h-10!" disabled={isSubmitting || !isStep2Valid}>
+                  {isSubmitting && <IconLoader2 className="size-4 animate-spin" />}
                   {isSubmitting ? 'Adicionando cartão...' : 'Adicionar cartão'}
                 </Button>
               </>

package/src/components/widgets/ImageUpload/ImageCropModal.tsx

@@ -0,0 +1,97 @@
+'use client'
+
+import { useRef, useState } from 'react'
+import ReactCrop, {
+  type Crop,
+  centerCrop,
+  makeAspectCrop,
+} from 'react-image-crop'
+import 'react-image-crop/dist/ReactCrop.css'
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '../../ui/overlay/Dialog'
+import { Button } from '../../ui/buttons/Button'
+
+interface ImageCropModalProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  imageSrc: string
+  aspectRatio: number
+  onConfirm: (image: HTMLImageElement, crop: Crop) => void
+}
+
+export function ImageCropModal({
+  open,
+  onOpenChange,
+  imageSrc,
+  aspectRatio,
+  onConfirm,
+}: ImageCropModalProps) {
+  const imgRef = useRef<HTMLImageElement>(null)
+  const [crop, setCrop] = useState<Crop>()
+
+  const onImageLoad = (e: React.SyntheticEvent<HTMLImageElement>) => {
+    const { naturalWidth, naturalHeight } = e.currentTarget
+
+    const initialCrop = centerCrop(
+      makeAspectCrop(
+        { unit: '%', width: 90 },
+        aspectRatio,
+        naturalWidth,
+        naturalHeight
+      ),
+      naturalWidth,
+      naturalHeight
+    )
+
+    setCrop(initialCrop)
+  }
+
+  const handleConfirm = () => {
+    if (imgRef.current && crop) {
+      onConfirm(imgRef.current, crop)
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-2xl">
+        <DialogHeader>
+          <DialogTitle>Ajustar imagem</DialogTitle>
+        </DialogHeader>
+
+        <div className="flex justify-center py-4">
+          <ReactCrop
+            crop={crop}
+            onChange={(c) => setCrop(c)}
+            aspect={aspectRatio}
+            className="max-h-[60vh]"
+          >
+            <img
+              ref={imgRef}
+              src={imageSrc}
+              alt="Crop"
+              onLoad={onImageLoad}
+              className="max-h-[60vh] object-contain"
+            />
+          </ReactCrop>
+        </div>
+
+        <p className="paragraph-small-regular text-gray-500 text-center">
+          Arraste para ajustar a área de corte
+        </p>
+
+        <DialogFooter>
+          <Button variant="secondary" onClick={() => onOpenChange(false)}>
+            Cancelar
+          </Button>
+          <Button onClick={handleConfirm}>Confirmar</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/src/components/widgets/ImageUpload/ImageUpload.tsx

@@ -0,0 +1,125 @@
+'use client'
+
+import { useRef } from 'react'
+import { useImageUpload } from '../../../modules/images/hooks/use-image-upload.hook'
+import { ImageCropModal } from './ImageCropModal'
+import { Button } from '../../ui/buttons/Button'
+import type { ImageConfig } from '../../../modules/images/types/image.type'
+
+interface ImageUploadProps {
+  config: ImageConfig
+  value?: string
+  onChange?: (value: string) => void
+  onError?: (error: string) => void
+  className?: string
+}
+
+export function ImageUpload({
+  config,
+  value,
+  onChange,
+  onError,
+  className,
+}: ImageUploadProps) {
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  const {
+    originalImage,
+    croppedPreview,
+    showCropModal,
+    isProcessing,
+    handleFileSelect,
+    handleCropConfirm,
+    setShowCropModal,
+    clear,
+  } = useImageUpload({
+    config,
+    onSuccess: (base64) => onChange?.(base64),
+    onError,
+  })
+
+  const displayImage = croppedPreview || value
+
+  return (
+    <div className={className}>
+      <input
+        ref={inputRef}
+        type="file"
+        accept="image/png,image/jpeg,image/webp,image/gif"
+        className="hidden"
+        onChange={(e) => {
+          const file = e.target.files?.[0]
+          if (file) handleFileSelect(file)
+          e.target.value = ''
+        }}
+      />
+
+      {displayImage ? (
+        <div className="relative">
+          <div
+            className="overflow-hidden rounded-lg border border-gray-200"
+            style={{ aspectRatio: config.aspectRatio }}
+          >
+            <img
+              src={displayImage}
+              alt="Preview"
+              className="w-full h-full object-cover"
+            />
+          </div>
+
+          <div className="flex gap-2 mt-2">
+            <Button
+              variant="secondary"
+              size="sm"
+              onClick={() => inputRef.current?.click()}
+              disabled={isProcessing}
+            >
+              Trocar
+            </Button>
+            <Button
+              variant="secondary"
+              size="sm"
+              onClick={() => {
+                clear()
+                onChange?.('')
+              }}
+              disabled={isProcessing}
+            >
+              Remover
+            </Button>
+          </div>
+
+          {isProcessing && (
+            <p className="paragraph-small-regular text-gray-500 mt-2">
+              Processando...
+            </p>
+          )}
+        </div>
+      ) : (
+        <button
+          type="button"
+          onClick={() => inputRef.current?.click()}
+          className="w-full border-2 border-dashed border-gray-300 rounded-lg p-8 text-center hover:border-gray-400 transition-colors"
+          style={{ aspectRatio: config.aspectRatio }}
+        >
+          <p className="paragraph-medium-regular text-gray-600">
+            Clique para enviar imagem
+          </p>
+          <p className="paragraph-small-regular text-gray-400 mt-1">
+            Tamanho recomendado: {config.width} x {config.height} pixels
+          </p>
+        </button>
+      )}
+
+      {originalImage && (
+        <ImageCropModal
+          open={showCropModal}
+          onOpenChange={setShowCropModal}
+          imageSrc={originalImage}
+          aspectRatio={config.aspectRatio}
+          onConfirm={handleCropConfirm}
+        />
+      )}
+    </div>
+  )
+}

package/src/components/widgets/ImageUpload/index.ts

@@ -0,0 +1,2 @@
+export { ImageUpload } from './ImageUpload'
+export { ImageCropModal } from './ImageCropModal'