@greatapps/common 1.1.460 → 1.1.462

package/dist/components/ui/overlay/Dialog.mjs

@@ -44,10 +44,11 @@ function DialogContent({
   children,
   showCloseButton = true,
   overlayClassName,
+  hideOverlay = false,
   ...props
 }) {
   return /* @__PURE__ */ jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [
-    /* @__PURE__ */ jsx(DialogOverlay, { className: overlayClassName }),
+    !hideOverlay && /* @__PURE__ */ jsx(DialogOverlay, { className: overlayClassName }),
     /* @__PURE__ */ jsxs(
       DialogPrimitive.Content,
       {

package/dist/components/ui/overlay/Dialog.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ui/overlay/Dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport { IconX } from '@tabler/icons-react';\nimport { cn } from \"../../../infra/utils/clsx\";\n\nfunction Dialog({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Root>) {\n  return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />;\n}\n\nfunction DialogTrigger({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />;\n}\n\nfunction DialogPortal({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Portal>) {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />;\n}\n\nfunction DialogClose({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Close>) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />;\n}\n\nfunction DialogOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {\n  return (\n    <DialogPrimitive.Overlay\n      data-slot=\"dialog-overlay\"\n      className={cn(\n        \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-[1000] bg-black/50\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction DialogContent({\n  className,\n  children,\n  showCloseButton = true,\n  overlayClassName,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Content> & {\n  showCloseButton?: boolean;\n  overlayClassName?: string;\n}) {\n  return (\n    <DialogPortal data-slot=\"dialog-portal\">\n      <DialogOverlay className={overlayClassName} />\n      <DialogPrimitive.Content\n        data-slot=\"dialog-content\"\n        className={cn(\n          \"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-[1001] grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg\",\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <div className=\"absolute top-0.5 right-0\">\n            <div className=\"p-4\">\n              <DialogPrimitive.Close\n                data-slot=\"dialog-close\"\n                className=\"hover:cursor-pointer flex size-8 items-center justify-center rounded-lg p-2 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-950 focus:outline-none\"\n              >\n                <IconX className=\"size-[18px]\" />\n                <span className=\"sr-only\">Close</span>\n              </DialogPrimitive.Close>\n            </div>\n          </div>\n        )}\n      </DialogPrimitive.Content>\n    </DialogPortal>\n  );\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn(\n        \"p-5 flex flex-col gap-2 text-center sm:text-left\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction DialogFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(\n        \"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction DialogTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Title>) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn(\"text-lg leading-none font-semibold\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction DialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Description>) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n};\n"],"mappings":";AAUS,cA8DK,YA9DL;AAPT,YAAY,qBAAqB;AACjC,SAAS,aAAa;AACtB,SAAS,UAAU;AAEnB,SAAS,OAAO;AAAA,EACd,GAAG;AACL,GAAsD;AACpD,SAAO,oBAAC,gBAAgB,MAAhB,EAAqB,aAAU,UAAU,GAAG,OAAO;AAC7D;AAEA,SAAS,cAAc;AAAA,EACrB,GAAG;AACL,GAAyD;AACvD,SAAO,oBAAC,gBAAgB,SAAhB,EAAwB,aAAU,kBAAkB,GAAG,OAAO;AACxE;AAEA,SAAS,aAAa;AAAA,EACpB,GAAG;AACL,GAAwD;AACtD,SAAO,oBAAC,gBAAgB,QAAhB,EAAuB,aAAU,iBAAiB,GAAG,OAAO;AACtE;AAEA,SAAS,YAAY;AAAA,EACnB,GAAG;AACL,GAAuD;AACrD,SAAO,oBAAC,gBAAgB,OAAhB,EAAsB,aAAU,gBAAgB,GAAG,OAAO;AACpE;AAEA,SAAS,cAAc;AAAA,EACrB;AAAA,EACA,GAAG;AACL,GAAyD;AACvD,SACE;AAAA,IAAC,gBAAgB;AAAA,IAAhB;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,cAAc;AAAA,EACrB;AAAA,EACA;AAAA,EACA,kBAAkB;AAAA,EAClB;AAAA,EACA,GAAG;AACL,GAGG;AACD,SACE,qBAAC,gBAAa,aAAU,iBACtB;AAAA,wBAAC,iBAAc,WAAW,kBAAkB;AAAA,IAC5C;AAAA,MAAC,gBAAgB;AAAA,MAAhB;AAAA,QACC,aAAU;AAAA,QACV,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QACF;AAAA,QACC,GAAG;AAAA,QAEH;AAAA;AAAA,UACA,mBACC,oBAAC,SAAI,WAAU,4BACb,8BAAC,SAAI,WAAU,OACb;AAAA,YAAC,gBAAgB;AAAA,YAAhB;AAAA,cACC,aAAU;AAAA,cACV,WAAU;AAAA,cAEV;AAAA,oCAAC,SAAM,WAAU,eAAc;AAAA,gBAC/B,oBAAC,UAAK,WAAU,WAAU,mBAAK;AAAA;AAAA;AAAA,UACjC,GACF,GACF;AAAA;AAAA;AAAA,IAEJ;AAAA,KACF;AAEJ;AAEA,SAAS,aAAa,EAAE,WAAW,GAAG,MAAM,GAAgC;AAC1E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,aAAa,EAAE,WAAW,GAAG,MAAM,GAAgC;AAC1E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,YAAY;AAAA,EACnB;AAAA,EACA,GAAG;AACL,GAAuD;AACrD,SACE;AAAA,IAAC,gBAAgB;AAAA,IAAhB;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,sCAAsC,SAAS;AAAA,MAC5D,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,kBAAkB;AAAA,EACzB;AAAA,EACA,GAAG;AACL,GAA6D;AAC3D,SACE;AAAA,IAAC,gBAAgB;AAAA,IAAhB;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,iCAAiC,SAAS;AAAA,MACvD,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../src/components/ui/overlay/Dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport { IconX } from '@tabler/icons-react';\nimport { cn } from \"../../../infra/utils/clsx\";\n\nfunction Dialog({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Root>) {\n  return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />;\n}\n\nfunction DialogTrigger({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />;\n}\n\nfunction DialogPortal({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Portal>) {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />;\n}\n\nfunction DialogClose({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Close>) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />;\n}\n\nfunction DialogOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {\n  return (\n    <DialogPrimitive.Overlay\n      data-slot=\"dialog-overlay\"\n      className={cn(\n        \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-[1000] bg-black/50\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction DialogContent({\n  className,\n  children,\n  showCloseButton = true,\n  overlayClassName,\n  hideOverlay = false,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Content> & {\n  showCloseButton?: boolean;\n  overlayClassName?: string;\n  hideOverlay?: boolean;\n}) {\n  return (\n    <DialogPortal data-slot=\"dialog-portal\">\n      {!hideOverlay && <DialogOverlay className={overlayClassName} />}\n      <DialogPrimitive.Content\n        data-slot=\"dialog-content\"\n        className={cn(\n          \"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-[1001] grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg\",\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <div className=\"absolute top-0.5 right-0\">\n            <div className=\"p-4\">\n              <DialogPrimitive.Close\n                data-slot=\"dialog-close\"\n                className=\"hover:cursor-pointer flex size-8 items-center justify-center rounded-lg p-2 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-950 focus:outline-none\"\n              >\n                <IconX className=\"size-[18px]\" />\n                <span className=\"sr-only\">Close</span>\n              </DialogPrimitive.Close>\n            </div>\n          </div>\n        )}\n      </DialogPrimitive.Content>\n    </DialogPortal>\n  );\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn(\n        \"p-5 flex flex-col gap-2 text-center sm:text-left\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction DialogFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(\n        \"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction DialogTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Title>) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn(\"text-lg leading-none font-semibold\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction DialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Description>) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n};\n"],"mappings":";AAUS,cAgEK,YAhEL;AAPT,YAAY,qBAAqB;AACjC,SAAS,aAAa;AACtB,SAAS,UAAU;AAEnB,SAAS,OAAO;AAAA,EACd,GAAG;AACL,GAAsD;AACpD,SAAO,oBAAC,gBAAgB,MAAhB,EAAqB,aAAU,UAAU,GAAG,OAAO;AAC7D;AAEA,SAAS,cAAc;AAAA,EACrB,GAAG;AACL,GAAyD;AACvD,SAAO,oBAAC,gBAAgB,SAAhB,EAAwB,aAAU,kBAAkB,GAAG,OAAO;AACxE;AAEA,SAAS,aAAa;AAAA,EACpB,GAAG;AACL,GAAwD;AACtD,SAAO,oBAAC,gBAAgB,QAAhB,EAAuB,aAAU,iBAAiB,GAAG,OAAO;AACtE;AAEA,SAAS,YAAY;AAAA,EACnB,GAAG;AACL,GAAuD;AACrD,SAAO,oBAAC,gBAAgB,OAAhB,EAAsB,aAAU,gBAAgB,GAAG,OAAO;AACpE;AAEA,SAAS,cAAc;AAAA,EACrB;AAAA,EACA,GAAG;AACL,GAAyD;AACvD,SACE;AAAA,IAAC,gBAAgB;AAAA,IAAhB;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,cAAc;AAAA,EACrB;AAAA,EACA;AAAA,EACA,kBAAkB;AAAA,EAClB;AAAA,EACA,cAAc;AAAA,EACd,GAAG;AACL,GAIG;AACD,SACE,qBAAC,gBAAa,aAAU,iBACrB;AAAA,KAAC,eAAe,oBAAC,iBAAc,WAAW,kBAAkB;AAAA,IAC7D;AAAA,MAAC,gBAAgB;AAAA,MAAhB;AAAA,QACC,aAAU;AAAA,QACV,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QACF;AAAA,QACC,GAAG;AAAA,QAEH;AAAA;AAAA,UACA,mBACC,oBAAC,SAAI,WAAU,4BACb,8BAAC,SAAI,WAAU,OACb;AAAA,YAAC,gBAAgB;AAAA,YAAhB;AAAA,cACC,aAAU;AAAA,cACV,WAAU;AAAA,cAEV;AAAA,oCAAC,SAAM,WAAU,eAAc;AAAA,gBAC/B,oBAAC,UAAK,WAAU,WAAU,mBAAK;AAAA;AAAA;AAAA,UACjC,GACF,GACF;AAAA;AAAA;AAAA,IAEJ;AAAA,KACF;AAEJ;AAEA,SAAS,aAAa,EAAE,WAAW,GAAG,MAAM,GAAgC;AAC1E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,aAAa,EAAE,WAAW,GAAG,MAAM,GAAgC;AAC1E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,YAAY;AAAA,EACnB;AAAA,EACA,GAAG;AACL,GAAuD;AACrD,SACE;AAAA,IAAC,gBAAgB;AAAA,IAAhB;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,sCAAsC,SAAS;AAAA,MAC5D,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,kBAAkB;AAAA,EACzB;AAAA,EACA,GAAG;AACL,GAA6D;AAC3D,SACE;AAAA,IAAC,gBAAgB;AAAA,IAAhB;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,iCAAiC,SAAS;AAAA,MACvD,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}

package/dist/components/widgets/ImageUpload/ImageCropModal.mjs

@@ -113,6 +113,7 @@ function ImageCropModal({
   aspectRatio,
   onConfirm,
   onCancel,
+  onImageLoad: onImageLoadCallback,
   showCircleGuide,
   minWidth,
   minHeight
@@ -123,6 +124,7 @@ function ImageCropModal({
   const onImageLoad = (e) => {
     const { naturalWidth, naturalHeight } = e.currentTarget;
     setImageSize({ width: naturalWidth, height: naturalHeight });
+    onImageLoadCallback?.(naturalWidth, naturalHeight);
     const initialCrop = centerCrop(
       makeAspectCrop(
         { unit: "%", width: 90 },
@@ -162,39 +164,46 @@ function ImageCropModal({
   ] });
   return /* @__PURE__ */ jsxs(Dialog, { open, onOpenChange, children: [
     /* @__PURE__ */ jsx("style", { children: baseCropStyles }),
-    /* @__PURE__ */ jsxs(DialogContent, { className: "w-full md:w-[650px]! lg:w-[650px]! max-w-[650px]! max-[650px]:w-[calc(100%-32px)] p-0 gap-0", children: [
-      /* @__PURE__ */ jsx(DialogHeader, { className: "p-5", children: /* @__PURE__ */ jsx(DialogTitle, { className: "text-center text-[16px]!", children: "Ajustar imagem" }) }),
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 px-5 pb-5", children: [
-        /* @__PURE__ */ jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx(
-          ReactCrop,
-          {
-            crop,
-            onChange: (c) => setCrop(c),
-            aspect: aspectRatio,
-            className: `max-h-[50vh] custom-crop-area ${shouldShowCircle ? "with-circle" : ""}`,
-            keepSelection: true,
-            minWidth: minCropWidth,
-            minHeight: minCropHeight,
-            renderSelectionAddon,
-            children: /* @__PURE__ */ jsx(
-              "img",
+    /* @__PURE__ */ jsxs(
+      DialogContent,
+      {
+        className: "w-full md:w-[650px]! lg:w-[650px]! max-w-[650px]! max-[650px]:w-[calc(100%-32px)] p-0 gap-0 z-[1003]!",
+        overlayClassName: "z-[1002]!",
+        children: [
+          /* @__PURE__ */ jsx(DialogHeader, { className: "p-5", children: /* @__PURE__ */ jsx(DialogTitle, { className: "text-center text-[16px]!", children: "Ajustar imagem" }) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 px-5 pb-5", children: [
+            /* @__PURE__ */ jsx("div", { className: "flex justify-center overflow-hidden rounded-lg", children: /* @__PURE__ */ jsx(
+              ReactCrop,
               {
-                ref: imgRef,
-                src: imageSrc,
-                alt: "Crop",
-                onLoad: onImageLoad,
-                className: "max-h-[50vh] object-contain"
+                crop,
+                onChange: (c) => setCrop(c),
+                aspect: aspectRatio,
+                className: `max-h-[50vh] custom-crop-area ${shouldShowCircle ? "with-circle" : ""}`,
+                keepSelection: true,
+                minWidth: minCropWidth,
+                minHeight: minCropHeight,
+                renderSelectionAddon,
+                children: /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    ref: imgRef,
+                    src: imageSrc,
+                    alt: "Crop",
+                    onLoad: onImageLoad,
+                    className: "max-h-[50vh] object-contain"
+                  }
+                )
               }
-            )
-          }
-        ) }),
-        /* @__PURE__ */ jsx("p", { className: "paragraph-small-regular text-zinc-500 text-center", children: "Arraste para ajustar a \xE1rea de corte" })
-      ] }),
-      /* @__PURE__ */ jsxs(DialogFooter, { className: "flex-row items-center justify-end gap-3 p-5 border-t border-zinc-200", children: [
-        /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: handleCancel, children: "Cancelar" }),
-        /* @__PURE__ */ jsx(Button, { onClick: handleConfirm, children: "Confirmar" })
-      ] })
-    ] })
+            ) }),
+            /* @__PURE__ */ jsx("p", { className: "paragraph-small-regular text-zinc-500 text-center", children: "Arraste para ajustar a \xE1rea de corte" })
+          ] }),
+          /* @__PURE__ */ jsxs(DialogFooter, { className: "flex-row! items-center justify-start! gap-3 p-5 border-t border-zinc-200", children: [
+            /* @__PURE__ */ jsx(Button, { onClick: handleConfirm, children: "Confirmar" }),
+            /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: handleCancel, children: "Cancelar" })
+          ] })
+        ]
+      }
+    )
   ] });
 }
 export {

package/dist/components/widgets/ImageUpload/ImageCropModal.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/widgets/ImageUpload/ImageCropModal.tsx"],"sourcesContent":["'use client'\n\nimport { useRef, useState } from 'react'\nimport ReactCrop, {\n  type Crop,\n  centerCrop,\n  makeAspectCrop,\n} from 'react-image-crop'\nimport 'react-image-crop/dist/ReactCrop.css'\nimport {\n  Dialog,\n  DialogContent,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n} from '../../ui/overlay/Dialog'\nimport { Button } from '../../ui/buttons/Button'\n\n// CSS customizado para grid pontilhado fino e círculo\nconst baseCropStyles = `\n  .custom-crop-area .ReactCrop__crop-selection {\n    border: 2px solid white !important;\n    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5) !important;\n  }\n\n  /* Grid de 9 quadrados - linhas pontilhadas finas */\n  .custom-crop-area .ReactCrop__crop-selection .crop-grid {\n    position: absolute;\n    inset: 0;\n    pointer-events: none;\n  }\n\n  .custom-crop-area .ReactCrop__crop-selection .crop-grid-line {\n    position: absolute;\n    background: repeating-linear-gradient(\n      to right,\n      rgba(255, 255, 255, 0.5) 0,\n      rgba(255, 255, 255, 0.5) 4px,\n      transparent 4px,\n      transparent 8px\n    );\n  }\n\n  .custom-crop-area .ReactCrop__crop-selection .crop-grid-line.horizontal {\n    left: 0;\n    right: 0;\n    height: 1px;\n  }\n\n  .custom-crop-area .ReactCrop__crop-selection .crop-grid-line.vertical {\n    top: 0;\n    bottom: 0;\n    width: 1px;\n    background: repeating-linear-gradient(\n      to bottom,\n      rgba(255, 255, 255, 0.5) 0,\n      rgba(255, 255, 255, 0.5) 4px,\n      transparent 4px,\n      transparent 8px\n    );\n  }\n\n  .custom-crop-area .ReactCrop__crop-selection .crop-grid-line.h1 { top: 33.33%; }\n  .custom-crop-area .ReactCrop__crop-selection .crop-grid-line.h2 { top: 66.66%; }\n  .custom-crop-area .ReactCrop__crop-selection .crop-grid-line.v1 { left: 33.33%; }\n  .custom-crop-area .ReactCrop__crop-selection .crop-grid-line.v2 { left: 66.66%; }\n\n  /* Círculo inscrito */\n  .custom-crop-area.with-circle .ReactCrop__crop-selection .crop-circle {\n    position: absolute;\n    inset: 0;\n    border: 1px dashed rgba(255, 255, 255, 0.6);\n    border-radius: 50%;\n    pointer-events: none;\n  }\n\n  /* Bolinhas centrais nas bordas */\n  .custom-crop-area .ReactCrop__crop-selection .crop-handle {\n    position: absolute;\n    width: 10px;\n    height: 10px;\n    background: white;\n    border-radius: 50%;\n    pointer-events: none;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);\n  }\n\n  .custom-crop-area .ReactCrop__crop-selection .crop-handle.top {\n    top: -5px;\n    left: 50%;\n    transform: translateX(-50%);\n  }\n\n  .custom-crop-area .ReactCrop__crop-selection .crop-handle.bottom {\n    bottom: -5px;\n    left: 50%;\n    transform: translateX(-50%);\n  }\n\n  .custom-crop-area .ReactCrop__crop-selection .crop-handle.left {\n    left: -5px;\n    top: 50%;\n    transform: translateY(-50%);\n  }\n\n  .custom-crop-area .ReactCrop__crop-selection .crop-handle.right {\n    right: -5px;\n    top: 50%;\n    transform: translateY(-50%);\n  }\n`\n\ninterface ImageCropModalProps {\n  open: boolean\n  onOpenChange: (open: boolean) => void\n  imageSrc: string\n  aspectRatio: number\n  onConfirm: (image: HTMLImageElement, crop: Crop) => void\n  onCancel?: () => void\n  showCircleGuide?: boolean\n  minWidth?: number\n  minHeight?: number\n}\n\nexport function ImageCropModal({\n  open,\n  onOpenChange,\n  imageSrc,\n  aspectRatio,\n  onConfirm,\n  onCancel,\n  showCircleGuide,\n  minWidth,\n  minHeight,\n}: ImageCropModalProps) {\n  const imgRef = useRef<HTMLImageElement>(null)\n  const [crop, setCrop] = useState<Crop>()\n  const [imageSize, setImageSize] = useState({ width: 0, height: 0 })\n\n  const onImageLoad = (e: React.SyntheticEvent<HTMLImageElement>) => {\n    const { naturalWidth, naturalHeight } = e.currentTarget\n    setImageSize({ width: naturalWidth, height: naturalHeight })\n\n    const initialCrop = centerCrop(\n      makeAspectCrop(\n        { unit: '%', width: 90 },\n        aspectRatio,\n        naturalWidth,\n        naturalHeight\n      ),\n      naturalWidth,\n      naturalHeight\n    )\n\n    setCrop(initialCrop)\n  }\n\n  // Calcula tamanho mínimo em porcentagem baseado nas dimensões mínimas em pixels\n  const minCropWidth = minWidth && imageSize.width > 0\n    ? Math.min((minWidth / imageSize.width) * 100, 100)\n    : undefined\n  const minCropHeight = minHeight && imageSize.height > 0\n    ? Math.min((minHeight / imageSize.height) * 100, 100)\n    : undefined\n\n  const handleConfirm = () => {\n    if (imgRef.current && crop) {\n      onConfirm(imgRef.current, crop)\n    }\n  }\n\n  const handleCancel = () => {\n    onCancel?.()\n    onOpenChange(false)\n  }\n\n  // Determina se deve mostrar círculo (aspect ratio 1:1 por padrão)\n  const shouldShowCircle = showCircleGuide ?? aspectRatio === 1\n\n  // Renderiza grid, círculo e bolinhas dentro da área de crop\n  const renderSelectionAddon = () => (\n    <>\n      {/* Grid de 9 quadrados com linhas pontilhadas */}\n      <div className=\"crop-grid\">\n        <div className=\"crop-grid-line horizontal h1\" />\n        <div className=\"crop-grid-line horizontal h2\" />\n        <div className=\"crop-grid-line vertical v1\" />\n        <div className=\"crop-grid-line vertical v2\" />\n      </div>\n      {/* Círculo inscrito */}\n      {shouldShowCircle && <div className=\"crop-circle\" />}\n      {/* Bolinhas centrais nas bordas */}\n      <div className=\"crop-handle top\" />\n      <div className=\"crop-handle bottom\" />\n      <div className=\"crop-handle left\" />\n      <div className=\"crop-handle right\" />\n    </>\n  )\n\n  return (\n    <Dialog open={open} onOpenChange={onOpenChange}>\n      <style>{baseCropStyles}</style>\n      <DialogContent className=\"w-full md:w-[650px]! lg:w-[650px]! max-w-[650px]! max-[650px]:w-[calc(100%-32px)] p-0 gap-0\">\n        <DialogHeader className=\"p-5\">\n          <DialogTitle className=\"text-center text-[16px]!\">\n            Ajustar imagem\n          </DialogTitle>\n        </DialogHeader>\n\n        <div className=\"flex flex-col gap-4 px-5 pb-5\">\n          <div className=\"flex justify-center\">\n            <ReactCrop\n              crop={crop}\n              onChange={(c) => setCrop(c)}\n              aspect={aspectRatio}\n              className={`max-h-[50vh] custom-crop-area ${shouldShowCircle ? 'with-circle' : ''}`}\n              keepSelection\n              minWidth={minCropWidth}\n              minHeight={minCropHeight}\n              renderSelectionAddon={renderSelectionAddon}\n            >\n              <img\n                ref={imgRef}\n                src={imageSrc}\n                alt=\"Crop\"\n                onLoad={onImageLoad}\n                className=\"max-h-[50vh] object-contain\"\n              />\n            </ReactCrop>\n          </div>\n\n          <p className=\"paragraph-small-regular text-zinc-500 text-center\">\n            Arraste para ajustar a área de corte\n          </p>\n        </div>\n\n        <DialogFooter className=\"flex-row items-center justify-end gap-3 p-5 border-t border-zinc-200\">\n          <Button variant=\"secondary\" onClick={handleCancel}>\n            Cancelar\n          </Button>\n          <Button onClick={handleConfirm}>Confirmar</Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  )\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../../src/components/widgets/ImageUpload/ImageCropModal.tsx"],"sourcesContent":["'use client'\n\nimport { useRef, useState } from 'react'\nimport ReactCrop, {\n  type Crop,\n  centerCrop,\n  makeAspectCrop,\n} from 'react-image-crop'\nimport 'react-image-crop/dist/ReactCrop.css'\nimport {\n  Dialog,\n  DialogContent,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n} from '../../ui/overlay/Dialog'\nimport { Button } from '../../ui/buttons/Button'\n\n// CSS customizado para grid pontilhado fino e círculo\nconst baseCropStyles = `\n  .custom-crop-area .ReactCrop__crop-selection {\n    border: 2px solid white !important;\n    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5) !important;\n  }\n\n  /* Grid de 9 quadrados - linhas pontilhadas finas */\n  .custom-crop-area .ReactCrop__crop-selection .crop-grid {\n    position: absolute;\n    inset: 0;\n    pointer-events: none;\n  }\n\n  .custom-crop-area .ReactCrop__crop-selection .crop-grid-line {\n    position: absolute;\n    background: repeating-linear-gradient(\n      to right,\n      rgba(255, 255, 255, 0.5) 0,\n      rgba(255, 255, 255, 0.5) 4px,\n      transparent 4px,\n      transparent 8px\n    );\n  }\n\n  .custom-crop-area .ReactCrop__crop-selection .crop-grid-line.horizontal {\n    left: 0;\n    right: 0;\n    height: 1px;\n  }\n\n  .custom-crop-area .ReactCrop__crop-selection .crop-grid-line.vertical {\n    top: 0;\n    bottom: 0;\n    width: 1px;\n    background: repeating-linear-gradient(\n      to bottom,\n      rgba(255, 255, 255, 0.5) 0,\n      rgba(255, 255, 255, 0.5) 4px,\n      transparent 4px,\n      transparent 8px\n    );\n  }\n\n  .custom-crop-area .ReactCrop__crop-selection .crop-grid-line.h1 { top: 33.33%; }\n  .custom-crop-area .ReactCrop__crop-selection .crop-grid-line.h2 { top: 66.66%; }\n  .custom-crop-area .ReactCrop__crop-selection .crop-grid-line.v1 { left: 33.33%; }\n  .custom-crop-area .ReactCrop__crop-selection .crop-grid-line.v2 { left: 66.66%; }\n\n  /* Círculo inscrito */\n  .custom-crop-area.with-circle .ReactCrop__crop-selection .crop-circle {\n    position: absolute;\n    inset: 0;\n    border: 1px dashed rgba(255, 255, 255, 0.6);\n    border-radius: 50%;\n    pointer-events: none;\n  }\n\n  /* Bolinhas centrais nas bordas */\n  .custom-crop-area .ReactCrop__crop-selection .crop-handle {\n    position: absolute;\n    width: 10px;\n    height: 10px;\n    background: white;\n    border-radius: 50%;\n    pointer-events: none;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);\n  }\n\n  .custom-crop-area .ReactCrop__crop-selection .crop-handle.top {\n    top: -5px;\n    left: 50%;\n    transform: translateX(-50%);\n  }\n\n  .custom-crop-area .ReactCrop__crop-selection .crop-handle.bottom {\n    bottom: -5px;\n    left: 50%;\n    transform: translateX(-50%);\n  }\n\n  .custom-crop-area .ReactCrop__crop-selection .crop-handle.left {\n    left: -5px;\n    top: 50%;\n    transform: translateY(-50%);\n  }\n\n  .custom-crop-area .ReactCrop__crop-selection .crop-handle.right {\n    right: -5px;\n    top: 50%;\n    transform: translateY(-50%);\n  }\n`\n\ninterface ImageCropModalProps {\n  open: boolean\n  onOpenChange: (open: boolean) => void\n  imageSrc: string\n  aspectRatio: number\n  onConfirm: (image: HTMLImageElement, crop: Crop) => void\n  onCancel?: () => void\n  onImageLoad?: (naturalWidth: number, naturalHeight: number) => void\n  showCircleGuide?: boolean\n  minWidth?: number\n  minHeight?: number\n}\n\nexport function ImageCropModal({\n  open,\n  onOpenChange,\n  imageSrc,\n  aspectRatio,\n  onConfirm,\n  onCancel,\n  onImageLoad: onImageLoadCallback,\n  showCircleGuide,\n  minWidth,\n  minHeight,\n}: ImageCropModalProps) {\n  const imgRef = useRef<HTMLImageElement>(null)\n  const [crop, setCrop] = useState<Crop>()\n  const [imageSize, setImageSize] = useState({ width: 0, height: 0 })\n\n  const onImageLoad = (e: React.SyntheticEvent<HTMLImageElement>) => {\n    const { naturalWidth, naturalHeight } = e.currentTarget\n    setImageSize({ width: naturalWidth, height: naturalHeight })\n\n    // Notifica o hook para verificar dimensões mínimas\n    onImageLoadCallback?.(naturalWidth, naturalHeight)\n\n    const initialCrop = centerCrop(\n      makeAspectCrop(\n        { unit: '%', width: 90 },\n        aspectRatio,\n        naturalWidth,\n        naturalHeight\n      ),\n      naturalWidth,\n      naturalHeight\n    )\n\n    setCrop(initialCrop)\n  }\n\n  // Calcula tamanho mínimo em porcentagem baseado nas dimensões mínimas em pixels\n  const minCropWidth = minWidth && imageSize.width > 0\n    ? Math.min((minWidth / imageSize.width) * 100, 100)\n    : undefined\n  const minCropHeight = minHeight && imageSize.height > 0\n    ? Math.min((minHeight / imageSize.height) * 100, 100)\n    : undefined\n\n  const handleConfirm = () => {\n    if (imgRef.current && crop) {\n      onConfirm(imgRef.current, crop)\n    }\n  }\n\n  const handleCancel = () => {\n    onCancel?.()\n    onOpenChange(false)\n  }\n\n  // Determina se deve mostrar círculo (aspect ratio 1:1 por padrão)\n  const shouldShowCircle = showCircleGuide ?? aspectRatio === 1\n\n  // Renderiza grid, círculo e bolinhas dentro da área de crop\n  const renderSelectionAddon = () => (\n    <>\n      {/* Grid de 9 quadrados com linhas pontilhadas */}\n      <div className=\"crop-grid\">\n        <div className=\"crop-grid-line horizontal h1\" />\n        <div className=\"crop-grid-line horizontal h2\" />\n        <div className=\"crop-grid-line vertical v1\" />\n        <div className=\"crop-grid-line vertical v2\" />\n      </div>\n      {/* Círculo inscrito */}\n      {shouldShowCircle && <div className=\"crop-circle\" />}\n      {/* Bolinhas centrais nas bordas */}\n      <div className=\"crop-handle top\" />\n      <div className=\"crop-handle bottom\" />\n      <div className=\"crop-handle left\" />\n      <div className=\"crop-handle right\" />\n    </>\n  )\n\n  return (\n    <Dialog open={open} onOpenChange={onOpenChange}>\n      <style>{baseCropStyles}</style>\n      <DialogContent\n        className=\"w-full md:w-[650px]! lg:w-[650px]! max-w-[650px]! max-[650px]:w-[calc(100%-32px)] p-0 gap-0 z-[1003]!\"\n        overlayClassName=\"z-[1002]!\"\n      >\n        <DialogHeader className=\"p-5\">\n          <DialogTitle className=\"text-center text-[16px]!\">\n            Ajustar imagem\n          </DialogTitle>\n        </DialogHeader>\n\n        <div className=\"flex flex-col gap-4 px-5 pb-5\">\n          <div className=\"flex justify-center overflow-hidden rounded-lg\">\n            <ReactCrop\n              crop={crop}\n              onChange={(c) => setCrop(c)}\n              aspect={aspectRatio}\n              className={`max-h-[50vh] custom-crop-area ${shouldShowCircle ? 'with-circle' : ''}`}\n              keepSelection\n              minWidth={minCropWidth}\n              minHeight={minCropHeight}\n              renderSelectionAddon={renderSelectionAddon}\n            >\n              <img\n                ref={imgRef}\n                src={imageSrc}\n                alt=\"Crop\"\n                onLoad={onImageLoad}\n                className=\"max-h-[50vh] object-contain\"\n              />\n            </ReactCrop>\n          </div>\n\n          <p className=\"paragraph-small-regular text-zinc-500 text-center\">\n            Arraste para ajustar a área de corte\n          </p>\n        </div>\n\n        <DialogFooter className=\"flex-row! items-center justify-start! gap-3 p-5 border-t border-zinc-200\">\n          <Button onClick={handleConfirm}>Confirmar</Button>\n          <Button variant=\"secondary\" onClick={handleCancel}>\n            Cancelar\n          </Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  )\n}\n"],"mappings":"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","names":[]}

package/dist/components/widgets/ImageUpload/ImageTooSmallModal.mjs

@@ -18,25 +18,32 @@ function ImageTooSmallModal({
   onCancel
 }) {
   const dimensionText = `${minWidth}x${minHeight}px`;
-  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { className: "w-full md:w-[480px]! lg:w-[480px]! max-w-[480px]! max-[480px]:w-[calc(100%-32px)] p-0 gap-0", children: [
-    /* @__PURE__ */ jsx(DialogHeader, { className: "p-5", children: /* @__PURE__ */ jsxs(DialogTitle, { className: "text-center text-[16px]!", children: [
-      "Foto menor que ",
-      dimensionText
-    ] }) }),
-    /* @__PURE__ */ jsx("div", { className: "px-5 pb-5", children: /* @__PURE__ */ jsxs("p", { className: "paragraph-small-regular text-zinc-600 text-center", children: [
-      'O arquivo "',
-      fileName,
-      '" \xE9 menor que ',
-      dimensionText,
-      ". Fa\xE7a envio de uma imagem com pelo menos ",
-      dimensionText,
-      " para continuar."
-    ] }) }),
-    /* @__PURE__ */ jsxs(DialogFooter, { className: "flex-row items-center justify-end gap-3 p-5 border-t border-zinc-200", children: [
-      /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: onCancel, children: "Cancelar" }),
-      /* @__PURE__ */ jsx(Button, { onClick: onSelectAnother, children: "Enviar outra" })
-    ] })
-  ] }) });
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(
+    DialogContent,
+    {
+      className: "w-full md:w-[480px]! lg:w-[480px]! max-w-[480px]! max-[480px]:w-[calc(100%-32px)] p-0 gap-0 z-[1003]!",
+      overlayClassName: "z-[1002]!",
+      children: [
+        /* @__PURE__ */ jsx(DialogHeader, { className: "p-5", children: /* @__PURE__ */ jsxs(DialogTitle, { className: "text-center text-[16px]!", children: [
+          "Foto menor que ",
+          dimensionText
+        ] }) }),
+        /* @__PURE__ */ jsx("div", { className: "px-5 pb-5", children: /* @__PURE__ */ jsxs("p", { className: "paragraph-small-regular text-zinc-600 text-center", children: [
+          'O arquivo "',
+          fileName,
+          '" \xE9 menor que ',
+          dimensionText,
+          ". Fa\xE7a envio de uma imagem com pelo menos ",
+          dimensionText,
+          " para continuar."
+        ] }) }),
+        /* @__PURE__ */ jsxs(DialogFooter, { className: "flex-row! items-center justify-start! gap-3 p-5 border-t border-zinc-200", children: [
+          /* @__PURE__ */ jsx(Button, { onClick: onSelectAnother, children: "Enviar outra" }),
+          /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: onCancel, children: "Cancelar" })
+        ] })
+      ]
+    }
+  ) });
 }
 export {
   ImageTooSmallModal

package/dist/components/widgets/ImageUpload/ImageTooSmallModal.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/widgets/ImageUpload/ImageTooSmallModal.tsx"],"sourcesContent":["'use client'\n\nimport {\n  Dialog,\n  DialogContent,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n} from '../../ui/overlay/Dialog'\nimport { Button } from '../../ui/buttons/Button'\n\ninterface ImageTooSmallModalProps {\n  open: boolean\n  onOpenChange: (open: boolean) => void\n  fileName: string\n  minWidth: number\n  minHeight: number\n  onSelectAnother: () => void\n  onCancel: () => void\n}\n\nexport function ImageTooSmallModal({\n  open,\n  onOpenChange,\n  fileName,\n  minWidth,\n  minHeight,\n  onSelectAnother,\n  onCancel,\n}: ImageTooSmallModalProps) {\n  const dimensionText = `${minWidth}x${minHeight}px`\n\n  return (\n    <Dialog open={open} onOpenChange={onOpenChange}>\n      <DialogContent className=\"w-full md:w-[480px]! lg:w-[480px]! max-w-[480px]! max-[480px]:w-[calc(100%-32px)] p-0 gap-0\">\n        <DialogHeader className=\"p-5\">\n          <DialogTitle className=\"text-center text-[16px]!\">\n            Foto menor que {dimensionText}\n          </DialogTitle>\n        </DialogHeader>\n\n        <div className=\"px-5 pb-5\">\n          <p className=\"paragraph-small-regular text-zinc-600 text-center\">\n            O arquivo \"{fileName}\" é menor que {dimensionText}. Faça envio de\n            uma imagem com pelo menos {dimensionText} para continuar.\n          </p>\n        </div>\n\n        <DialogFooter className=\"flex-row items-center justify-end gap-3 p-5 border-t border-zinc-200\">\n          <Button variant=\"secondary\" onClick={onCancel}>\n            Cancelar\n          </Button>\n          <Button onClick={onSelectAnother}>Enviar outra</Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  )\n}\n"],"mappings":";AAmCQ,cACE,YADF;AAjCR;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,cAAc;AAYhB,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA4B;AAC1B,QAAM,gBAAgB,GAAG,QAAQ,IAAI,SAAS;AAE9C,SACE,oBAAC,UAAO,MAAY,cAClB,+BAAC,iBAAc,WAAU,+FACvB;AAAA,wBAAC,gBAAa,WAAU,OACtB,+BAAC,eAAY,WAAU,4BAA2B;AAAA;AAAA,MAChC;AAAA,OAClB,GACF;AAAA,IAEA,oBAAC,SAAI,WAAU,aACb,+BAAC,OAAE,WAAU,qDAAoD;AAAA;AAAA,MACnD;AAAA,MAAS;AAAA,MAAe;AAAA,MAAc;AAAA,MACvB;AAAA,MAAc;AAAA,OAC3C,GACF;AAAA,IAEA,qBAAC,gBAAa,WAAU,wEACtB;AAAA,0BAAC,UAAO,SAAQ,aAAY,SAAS,UAAU,sBAE/C;AAAA,MACA,oBAAC,UAAO,SAAS,iBAAiB,0BAAY;AAAA,OAChD;AAAA,KACF,GACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../src/components/widgets/ImageUpload/ImageTooSmallModal.tsx"],"sourcesContent":["'use client'\n\nimport {\n  Dialog,\n  DialogContent,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n} from '../../ui/overlay/Dialog'\nimport { Button } from '../../ui/buttons/Button'\n\ninterface ImageTooSmallModalProps {\n  open: boolean\n  onOpenChange: (open: boolean) => void\n  fileName: string\n  minWidth: number\n  minHeight: number\n  onSelectAnother: () => void\n  onCancel: () => void\n}\n\nexport function ImageTooSmallModal({\n  open,\n  onOpenChange,\n  fileName,\n  minWidth,\n  minHeight,\n  onSelectAnother,\n  onCancel,\n}: ImageTooSmallModalProps) {\n  const dimensionText = `${minWidth}x${minHeight}px`\n\n  return (\n    <Dialog open={open} onOpenChange={onOpenChange}>\n      <DialogContent\n        className=\"w-full md:w-[480px]! lg:w-[480px]! max-w-[480px]! max-[480px]:w-[calc(100%-32px)] p-0 gap-0 z-[1003]!\"\n        overlayClassName=\"z-[1002]!\"\n      >\n        <DialogHeader className=\"p-5\">\n          <DialogTitle className=\"text-center text-[16px]!\">\n            Foto menor que {dimensionText}\n          </DialogTitle>\n        </DialogHeader>\n\n        <div className=\"px-5 pb-5\">\n          <p className=\"paragraph-small-regular text-zinc-600 text-center\">\n            O arquivo \"{fileName}\" é menor que {dimensionText}. Faça envio de\n            uma imagem com pelo menos {dimensionText} para continuar.\n          </p>\n        </div>\n\n        <DialogFooter className=\"flex-row! items-center justify-start! gap-3 p-5 border-t border-zinc-200\">\n          <Button onClick={onSelectAnother}>Enviar outra</Button>\n          <Button variant=\"secondary\" onClick={onCancel}>\n            Cancelar\n          </Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  )\n}\n"],"mappings":";AAsCQ,cACE,YADF;AApCR;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,cAAc;AAYhB,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA4B;AAC1B,QAAM,gBAAgB,GAAG,QAAQ,IAAI,SAAS;AAE9C,SACE,oBAAC,UAAO,MAAY,cAClB;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,kBAAiB;AAAA,MAEjB;AAAA,4BAAC,gBAAa,WAAU,OACtB,+BAAC,eAAY,WAAU,4BAA2B;AAAA;AAAA,UAChC;AAAA,WAClB,GACF;AAAA,QAEA,oBAAC,SAAI,WAAU,aACb,+BAAC,OAAE,WAAU,qDAAoD;AAAA;AAAA,UACnD;AAAA,UAAS;AAAA,UAAe;AAAA,UAAc;AAAA,UACvB;AAAA,UAAc;AAAA,WAC3C,GACF;AAAA,QAEA,qBAAC,gBAAa,WAAU,4EACtB;AAAA,8BAAC,UAAO,SAAS,iBAAiB,0BAAY;AAAA,UAC9C,oBAAC,UAAO,SAAQ,aAAY,SAAS,UAAU,sBAE/C;AAAA,WACF;AAAA;AAAA;AAAA,EACF,GACF;AAEJ;","names":[]}

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

@@ -1,6 +1,5 @@
 "use client";
 import { useState, useCallback, useRef } from "react";
-import { compressImage } from "../utils/compress-image";
 import { cropImageToCanvas } from "../utils/crop-image";
 import { validateImage } from "../utils/validate-image";
 function useImageUpload(options) {
@@ -12,55 +11,49 @@ function useImageUpload(options) {
   const [tooSmallError, setTooSmallError] = useState(null);
   const [isProcessing, setIsProcessing] = useState(false);
   const fileInputRef = useRef(null);
-  const lastCompressedFile = useRef(null);
+  const currentFileName = useRef("");
   const handleFileSelect = useCallback(
-    async (file) => {
+    (file) => {
       const validation = validateImage(file);
       if (!validation.valid) {
         onError?.(validation.error || "Arquivo inv\xE1lido");
         return;
       }
-      try {
-        const compressed = await compressImage(file);
-        lastCompressedFile.current = compressed;
-        const imageDimensions = await new Promise((resolve, reject) => {
-          const img = new Image();
-          img.onload = () => resolve({ width: img.naturalWidth, height: img.naturalHeight });
-          img.onerror = reject;
-          img.src = URL.createObjectURL(compressed);
+      currentFileName.current = file.name;
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        setOriginalImage(e.target?.result);
+        setShowCropModal(true);
+      };
+      reader.readAsDataURL(file);
+    },
+    [onError]
+  );
+  const handleImageLoadInModal = useCallback(
+    (naturalWidth, naturalHeight) => {
+      const { width: minW, height: minH, aspectRatio } = config;
+      const imgAspect = naturalWidth / naturalHeight;
+      let canFitMinCrop = false;
+      if (imgAspect >= aspectRatio) {
+        const cropHeight = naturalHeight;
+        const cropWidth = cropHeight * aspectRatio;
+        canFitMinCrop = cropWidth >= minW && cropHeight >= minH;
+      } else {
+        const cropWidth = naturalWidth;
+        const cropHeight = cropWidth / aspectRatio;
+        canFitMinCrop = cropWidth >= minW && cropHeight >= minH;
+      }
+      if (!canFitMinCrop) {
+        setShowCropModal(false);
+        setTooSmallError({
+          fileName: currentFileName.current,
+          minWidth: minW,
+          minHeight: minH
         });
-        const { width: minW, height: minH, aspectRatio } = config;
-        const imgAspect = imageDimensions.width / imageDimensions.height;
-        let canFitMinCrop = false;
-        if (imgAspect >= aspectRatio) {
-          const cropHeight = imageDimensions.height;
-          const cropWidth = cropHeight * aspectRatio;
-          canFitMinCrop = cropWidth >= minW && cropHeight >= minH;
-        } else {
-          const cropWidth = imageDimensions.width;
-          const cropHeight = cropWidth / aspectRatio;
-          canFitMinCrop = cropWidth >= minW && cropHeight >= minH;
-        }
-        if (!canFitMinCrop) {
-          setTooSmallError({
-            fileName: file.name,
-            minWidth: minW,
-            minHeight: minH
-          });
-          setShowTooSmallModal(true);
-          return;
-        }
-        const reader = new FileReader();
-        reader.onload = (e) => {
-          setOriginalImage(e.target?.result);
-          setShowCropModal(true);
-        };
-        reader.readAsDataURL(compressed);
-      } catch {
-        onError?.("Erro ao processar imagem");
+        setShowTooSmallModal(true);
       }
     },
-    [config, onError]
+    [config]
   );
   const handleSelectAnotherFile = useCallback(() => {
     setShowTooSmallModal(false);
@@ -109,6 +102,7 @@ function useImageUpload(options) {
     fileInputRef,
     handleFileSelect,
     handleCropConfirm,
+    handleImageLoadInModal,
     handleSelectAnotherFile,
     handleCancelTooSmall,
     setShowCropModal,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/modules/images/hooks/use-image-upload.hook.ts"],"sourcesContent":["'use client'\n\nimport { useState, useCallback, useRef } from 'react'\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 type { ImageConfig } from '../types/image.type'\n\nexport interface ImageTooSmallError {\n  fileName: string\n  minWidth: number\n  minHeight: number\n}\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  const [showTooSmallModal, setShowTooSmallModal] = useState(false)\n  const [tooSmallError, setTooSmallError] = useState<ImageTooSmallError | null>(null)\n  const [isProcessing, setIsProcessing] = useState(false)\n  const fileInputRef = useRef<HTMLInputElement>(null)\n  const lastCompressedFile = useRef<File | null>(null)\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        lastCompressedFile.current = compressed\n\n        // Verificar dimensões da imagem antes de abrir modal\n        const imageDimensions = await new Promise<{\n          width: number\n          height: number\n        }>((resolve, reject) => {\n          const img = new Image()\n          img.onload = () =>\n            resolve({ width: img.naturalWidth, height: img.naturalHeight })\n          img.onerror = reject\n          img.src = URL.createObjectURL(compressed)\n        })\n\n        // Verificar se a imagem atende às dimensões mínimas considerando o aspect ratio\n        const { width: minW, height: minH, aspectRatio } = config\n        const imgAspect = imageDimensions.width / imageDimensions.height\n\n        let canFitMinCrop = false\n        if (imgAspect >= aspectRatio) {\n          // Imagem mais larga - altura é o limitante\n          const cropHeight = imageDimensions.height\n          const cropWidth = cropHeight * aspectRatio\n          canFitMinCrop = cropWidth >= minW && cropHeight >= minH\n        } else {\n          // Imagem mais alta - largura é o limitante\n          const cropWidth = imageDimensions.width\n          const cropHeight = cropWidth / aspectRatio\n          canFitMinCrop = cropWidth >= minW && cropHeight >= minH\n        }\n\n        if (!canFitMinCrop) {\n          setTooSmallError({\n            fileName: file.name,\n            minWidth: minW,\n            minHeight: minH,\n          })\n          setShowTooSmallModal(true)\n          return\n        }\n\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    [config, onError]\n  )\n\n  const handleSelectAnotherFile = useCallback(() => {\n    setShowTooSmallModal(false)\n    setTooSmallError(null)\n    fileInputRef.current?.click()\n  }, [])\n\n  const handleCancelTooSmall = useCallback(() => {\n    setShowTooSmallModal(false)\n    setShowCropModal(false)\n    setTooSmallError(null)\n    setOriginalImage(null)\n  }, [])\n\n  const handleCropConfirm = useCallback(\n    async (imageElement: HTMLImageElement, cropArea: Crop) => {\n      setIsProcessing(true)\n      try {\n        // Crop é feito inteiramente no cliente via Canvas\n        // Já produz imagem no tamanho final (config.width x config.height)\n        const croppedBase64 = await cropImageToCanvas(\n          imageElement,\n          cropArea,\n          config.width,\n          config.height\n        )\n\n        setCroppedPreview(croppedBase64)\n        setShowCropModal(false)\n        onSuccess?.(croppedBase64)\n      } catch {\n        onError?.('Erro ao aplicar crop')\n      } finally {\n        setIsProcessing(false)\n      }\n    },\n    [config, onSuccess, onError]\n  )\n\n  const clear = useCallback(() => {\n    setOriginalImage(null)\n    setCroppedPreview(null)\n  }, [])\n\n  return {\n    originalImage,\n    croppedPreview,\n    showCropModal,\n    showTooSmallModal,\n    tooSmallError,\n    config,\n    isProcessing,\n    fileInputRef,\n    handleFileSelect,\n    handleCropConfirm,\n    handleSelectAnotherFile,\n    handleCancelTooSmall,\n    setShowCropModal,\n    setShowTooSmallModal,\n    clear,\n  }\n}\n"],"mappings":";AAEA,SAAS,UAAU,aAAa,cAAc;AAE9C,SAAS,qBAAqB;AAC9B,SAAS,yBAAyB;AAClC,SAAS,qBAAqB;AAevB,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;AACxD,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,SAAS,KAAK;AAChE,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAoC,IAAI;AAClF,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,KAAK;AACtD,QAAM,eAAe,OAAyB,IAAI;AAClD,QAAM,qBAAqB,OAAoB,IAAI;AAEnD,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,2BAAmB,UAAU;AAG7B,cAAM,kBAAkB,MAAM,IAAI,QAG/B,CAAC,SAAS,WAAW;AACtB,gBAAM,MAAM,IAAI,MAAM;AACtB,cAAI,SAAS,MACX,QAAQ,EAAE,OAAO,IAAI,cAAc,QAAQ,IAAI,cAAc,CAAC;AAChE,cAAI,UAAU;AACd,cAAI,MAAM,IAAI,gBAAgB,UAAU;AAAA,QAC1C,CAAC;AAGD,cAAM,EAAE,OAAO,MAAM,QAAQ,MAAM,YAAY,IAAI;AACnD,cAAM,YAAY,gBAAgB,QAAQ,gBAAgB;AAE1D,YAAI,gBAAgB;AACpB,YAAI,aAAa,aAAa;AAE5B,gBAAM,aAAa,gBAAgB;AACnC,gBAAM,YAAY,aAAa;AAC/B,0BAAgB,aAAa,QAAQ,cAAc;AAAA,QACrD,OAAO;AAEL,gBAAM,YAAY,gBAAgB;AAClC,gBAAM,aAAa,YAAY;AAC/B,0BAAgB,aAAa,QAAQ,cAAc;AAAA,QACrD;AAEA,YAAI,CAAC,eAAe;AAClB,2BAAiB;AAAA,YACf,UAAU,KAAK;AAAA,YACf,UAAU;AAAA,YACV,WAAW;AAAA,UACb,CAAC;AACD,+BAAqB,IAAI;AACzB;AAAA,QACF;AAEA,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,QAAQ,OAAO;AAAA,EAClB;AAEA,QAAM,0BAA0B,YAAY,MAAM;AAChD,yBAAqB,KAAK;AAC1B,qBAAiB,IAAI;AACrB,iBAAa,SAAS,MAAM;AAAA,EAC9B,GAAG,CAAC,CAAC;AAEL,QAAM,uBAAuB,YAAY,MAAM;AAC7C,yBAAqB,KAAK;AAC1B,qBAAiB,KAAK;AACtB,qBAAiB,IAAI;AACrB,qBAAiB,IAAI;AAAA,EACvB,GAAG,CAAC,CAAC;AAEL,QAAM,oBAAoB;AAAA,IACxB,OAAO,cAAgC,aAAmB;AACxD,sBAAgB,IAAI;AACpB,UAAI;AAGF,cAAM,gBAAgB,MAAM;AAAA,UAC1B;AAAA,UACA;AAAA,UACA,OAAO;AAAA,UACP,OAAO;AAAA,QACT;AAEA,0BAAkB,aAAa;AAC/B,yBAAiB,KAAK;AACtB,oBAAY,aAAa;AAAA,MAC3B,QAAQ;AACN,kBAAU,sBAAsB;AAAA,MAClC,UAAE;AACA,wBAAgB,KAAK;AAAA,MACvB;AAAA,IACF;AAAA,IACA,CAAC,QAAQ,WAAW,OAAO;AAAA,EAC7B;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;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;","names":[]}
+{"version":3,"sources":["../../../../src/modules/images/hooks/use-image-upload.hook.ts"],"sourcesContent":["'use client'\n\nimport { useState, useCallback, useRef } from 'react'\nimport type { Crop } from 'react-image-crop'\nimport { cropImageToCanvas } from '../utils/crop-image'\nimport { validateImage } from '../utils/validate-image'\nimport type { ImageConfig } from '../types/image.type'\n\nexport interface ImageTooSmallError {\n  fileName: string\n  minWidth: number\n  minHeight: number\n}\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  const [showTooSmallModal, setShowTooSmallModal] = useState(false)\n  const [tooSmallError, setTooSmallError] = useState<ImageTooSmallError | null>(null)\n  const [isProcessing, setIsProcessing] = useState(false)\n  const fileInputRef = useRef<HTMLInputElement>(null)\n  const currentFileName = useRef<string>('')\n\n  // Abre modal IMEDIATAMENTE sem processar - muito mais rápido\n  const handleFileSelect = useCallback(\n    (file: File) => {\n      const validation = validateImage(file)\n      if (!validation.valid) {\n        onError?.(validation.error || 'Arquivo inválido')\n        return\n      }\n\n      currentFileName.current = file.name\n\n      // Converte para base64 e abre modal instantaneamente\n      const reader = new FileReader()\n      reader.onload = (e) => {\n        setOriginalImage(e.target?.result as string)\n        setShowCropModal(true)\n      }\n      reader.readAsDataURL(file)\n    },\n    [onError]\n  )\n\n  // Chamado pelo ImageCropModal quando a imagem carrega - verifica dimensões\n  const handleImageLoadInModal = useCallback(\n    (naturalWidth: number, naturalHeight: number) => {\n      const { width: minW, height: minH, aspectRatio } = config\n      const imgAspect = naturalWidth / naturalHeight\n\n      let canFitMinCrop = false\n      if (imgAspect >= aspectRatio) {\n        const cropHeight = naturalHeight\n        const cropWidth = cropHeight * aspectRatio\n        canFitMinCrop = cropWidth >= minW && cropHeight >= minH\n      } else {\n        const cropWidth = naturalWidth\n        const cropHeight = cropWidth / aspectRatio\n        canFitMinCrop = cropWidth >= minW && cropHeight >= minH\n      }\n\n      if (!canFitMinCrop) {\n        // Fecha modal de crop e abre modal de erro\n        setShowCropModal(false)\n        setTooSmallError({\n          fileName: currentFileName.current,\n          minWidth: minW,\n          minHeight: minH,\n        })\n        setShowTooSmallModal(true)\n      }\n    },\n    [config]\n  )\n\n  const handleSelectAnotherFile = useCallback(() => {\n    setShowTooSmallModal(false)\n    setTooSmallError(null)\n    fileInputRef.current?.click()\n  }, [])\n\n  const handleCancelTooSmall = useCallback(() => {\n    setShowTooSmallModal(false)\n    setShowCropModal(false)\n    setTooSmallError(null)\n    setOriginalImage(null)\n  }, [])\n\n  const handleCropConfirm = useCallback(\n    async (imageElement: HTMLImageElement, cropArea: Crop) => {\n      setIsProcessing(true)\n      try {\n        // Crop é feito inteiramente no cliente via Canvas\n        // Já produz imagem no tamanho final (config.width x config.height)\n        const croppedBase64 = await cropImageToCanvas(\n          imageElement,\n          cropArea,\n          config.width,\n          config.height\n        )\n\n        setCroppedPreview(croppedBase64)\n        setShowCropModal(false)\n        onSuccess?.(croppedBase64)\n      } catch {\n        onError?.('Erro ao aplicar crop')\n      } finally {\n        setIsProcessing(false)\n      }\n    },\n    [config, onSuccess, onError]\n  )\n\n  const clear = useCallback(() => {\n    setOriginalImage(null)\n    setCroppedPreview(null)\n  }, [])\n\n  return {\n    originalImage,\n    croppedPreview,\n    showCropModal,\n    showTooSmallModal,\n    tooSmallError,\n    config,\n    isProcessing,\n    fileInputRef,\n    handleFileSelect,\n    handleCropConfirm,\n    handleImageLoadInModal,\n    handleSelectAnotherFile,\n    handleCancelTooSmall,\n    setShowCropModal,\n    setShowTooSmallModal,\n    clear,\n  }\n}\n"],"mappings":"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","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@greatapps/common",
-  "version": "1.1.460",
+  "version": "1.1.462",
   "description": "Shared library for GreatApps frontend applications",
   "main": "./dist/index.mjs",
   "types": "./src/index.ts",

package/src/components/ui/overlay/Dialog.tsx

@@ -50,14 +50,16 @@ function DialogContent({
   children,
   showCloseButton = true,
   overlayClassName,
+  hideOverlay = false,
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Content> & {
   showCloseButton?: boolean;
   overlayClassName?: string;
+  hideOverlay?: boolean;
 }) {
   return (
     <DialogPortal data-slot="dialog-portal">
-      <DialogOverlay className={overlayClassName} />
+      {!hideOverlay && <DialogOverlay className={overlayClassName} />}
       <DialogPrimitive.Content
         data-slot="dialog-content"
         className={cn(

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

@@ -117,6 +117,7 @@ interface ImageCropModalProps {
   aspectRatio: number
   onConfirm: (image: HTMLImageElement, crop: Crop) => void
   onCancel?: () => void
+  onImageLoad?: (naturalWidth: number, naturalHeight: number) => void
   showCircleGuide?: boolean
   minWidth?: number
   minHeight?: number
@@ -129,6 +130,7 @@ export function ImageCropModal({
   aspectRatio,
   onConfirm,
   onCancel,
+  onImageLoad: onImageLoadCallback,
   showCircleGuide,
   minWidth,
   minHeight,
@@ -141,6 +143,9 @@ export function ImageCropModal({
     const { naturalWidth, naturalHeight } = e.currentTarget
     setImageSize({ width: naturalWidth, height: naturalHeight })
 
+    // Notifica o hook para verificar dimensões mínimas
+    onImageLoadCallback?.(naturalWidth, naturalHeight)
+
     const initialCrop = centerCrop(
       makeAspectCrop(
         { unit: '%', width: 90 },
@@ -200,7 +205,10 @@ export function ImageCropModal({
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <style>{baseCropStyles}</style>
-      <DialogContent className="w-full md:w-[650px]! lg:w-[650px]! max-w-[650px]! max-[650px]:w-[calc(100%-32px)] p-0 gap-0">
+      <DialogContent
+        className="w-full md:w-[650px]! lg:w-[650px]! max-w-[650px]! max-[650px]:w-[calc(100%-32px)] p-0 gap-0 z-[1003]!"
+        overlayClassName="z-[1002]!"
+      >
         <DialogHeader className="p-5">
           <DialogTitle className="text-center text-[16px]!">
             Ajustar imagem
@@ -208,7 +216,7 @@ export function ImageCropModal({
         </DialogHeader>
 
         <div className="flex flex-col gap-4 px-5 pb-5">
-          <div className="flex justify-center">
+          <div className="flex justify-center overflow-hidden rounded-lg">
             <ReactCrop
               crop={crop}
               onChange={(c) => setCrop(c)}
@@ -234,11 +242,11 @@ export function ImageCropModal({
           </p>
         </div>
 
-        <DialogFooter className="flex-row items-center justify-end gap-3 p-5 border-t border-zinc-200">
+        <DialogFooter className="flex-row! items-center justify-start! gap-3 p-5 border-t border-zinc-200">
+          <Button onClick={handleConfirm}>Confirmar</Button>
           <Button variant="secondary" onClick={handleCancel}>
             Cancelar
           </Button>
-          <Button onClick={handleConfirm}>Confirmar</Button>
         </DialogFooter>
       </DialogContent>
     </Dialog>

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

@@ -32,7 +32,10 @@ export function ImageTooSmallModal({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="w-full md:w-[480px]! lg:w-[480px]! max-w-[480px]! max-[480px]:w-[calc(100%-32px)] p-0 gap-0">
+      <DialogContent
+        className="w-full md:w-[480px]! lg:w-[480px]! max-w-[480px]! max-[480px]:w-[calc(100%-32px)] p-0 gap-0 z-[1003]!"
+        overlayClassName="z-[1002]!"
+      >
         <DialogHeader className="p-5">
           <DialogTitle className="text-center text-[16px]!">
             Foto menor que {dimensionText}
@@ -46,11 +49,11 @@ export function ImageTooSmallModal({
           </p>
         </div>
 
-        <DialogFooter className="flex-row items-center justify-end gap-3 p-5 border-t border-zinc-200">
+        <DialogFooter className="flex-row! items-center justify-start! gap-3 p-5 border-t border-zinc-200">
+          <Button onClick={onSelectAnother}>Enviar outra</Button>
           <Button variant="secondary" onClick={onCancel}>
             Cancelar
           </Button>
-          <Button onClick={onSelectAnother}>Enviar outra</Button>
         </DialogFooter>
       </DialogContent>
     </Dialog>

package/src/modules/images/hooks/use-image-upload.hook.ts

@@ -2,7 +2,6 @@
 
 import { useState, useCallback, useRef } from 'react'
 import type { Crop } from 'react-image-crop'
-import { compressImage } from '../utils/compress-image'
 import { cropImageToCanvas } from '../utils/crop-image'
 import { validateImage } from '../utils/validate-image'
 import type { ImageConfig } from '../types/image.type'
@@ -29,70 +28,59 @@ export function useImageUpload(options: UseImageUploadOptions) {
   const [tooSmallError, setTooSmallError] = useState<ImageTooSmallError | null>(null)
   const [isProcessing, setIsProcessing] = useState(false)
   const fileInputRef = useRef<HTMLInputElement>(null)
-  const lastCompressedFile = useRef<File | null>(null)
+  const currentFileName = useRef<string>('')
 
+  // Abre modal IMEDIATAMENTE sem processar - muito mais rápido
   const handleFileSelect = useCallback(
-    async (file: File) => {
+    (file: File) => {
       const validation = validateImage(file)
       if (!validation.valid) {
         onError?.(validation.error || 'Arquivo inválido')
         return
       }
 
-      try {
-        const compressed = await compressImage(file)
-        lastCompressedFile.current = compressed
-
-        // Verificar dimensões da imagem antes de abrir modal
-        const imageDimensions = await new Promise<{
-          width: number
-          height: number
-        }>((resolve, reject) => {
-          const img = new Image()
-          img.onload = () =>
-            resolve({ width: img.naturalWidth, height: img.naturalHeight })
-          img.onerror = reject
-          img.src = URL.createObjectURL(compressed)
-        })
+      currentFileName.current = file.name
 
-        // Verificar se a imagem atende às dimensões mínimas considerando o aspect ratio
-        const { width: minW, height: minH, aspectRatio } = config
-        const imgAspect = imageDimensions.width / imageDimensions.height
-
-        let canFitMinCrop = false
-        if (imgAspect >= aspectRatio) {
-          // Imagem mais larga - altura é o limitante
-          const cropHeight = imageDimensions.height
-          const cropWidth = cropHeight * aspectRatio
-          canFitMinCrop = cropWidth >= minW && cropHeight >= minH
-        } else {
-          // Imagem mais alta - largura é o limitante
-          const cropWidth = imageDimensions.width
-          const cropHeight = cropWidth / aspectRatio
-          canFitMinCrop = cropWidth >= minW && cropHeight >= minH
-        }
-
-        if (!canFitMinCrop) {
-          setTooSmallError({
-            fileName: file.name,
-            minWidth: minW,
-            minHeight: minH,
-          })
-          setShowTooSmallModal(true)
-          return
-        }
-
-        const reader = new FileReader()
-        reader.onload = (e) => {
-          setOriginalImage(e.target?.result as string)
-          setShowCropModal(true)
-        }
-        reader.readAsDataURL(compressed)
-      } catch {
-        onError?.('Erro ao processar imagem')
+      // Converte para base64 e abre modal instantaneamente
+      const reader = new FileReader()
+      reader.onload = (e) => {
+        setOriginalImage(e.target?.result as string)
+        setShowCropModal(true)
+      }
+      reader.readAsDataURL(file)
+    },
+    [onError]
+  )
+
+  // Chamado pelo ImageCropModal quando a imagem carrega - verifica dimensões
+  const handleImageLoadInModal = useCallback(
+    (naturalWidth: number, naturalHeight: number) => {
+      const { width: minW, height: minH, aspectRatio } = config
+      const imgAspect = naturalWidth / naturalHeight
+
+      let canFitMinCrop = false
+      if (imgAspect >= aspectRatio) {
+        const cropHeight = naturalHeight
+        const cropWidth = cropHeight * aspectRatio
+        canFitMinCrop = cropWidth >= minW && cropHeight >= minH
+      } else {
+        const cropWidth = naturalWidth
+        const cropHeight = cropWidth / aspectRatio
+        canFitMinCrop = cropWidth >= minW && cropHeight >= minH
+      }
+
+      if (!canFitMinCrop) {
+        // Fecha modal de crop e abre modal de erro
+        setShowCropModal(false)
+        setTooSmallError({
+          fileName: currentFileName.current,
+          minWidth: minW,
+          minHeight: minH,
+        })
+        setShowTooSmallModal(true)
       }
     },
-    [config, onError]
+    [config]
   )
 
   const handleSelectAnotherFile = useCallback(() => {
@@ -149,6 +137,7 @@ export function useImageUpload(options: UseImageUploadOptions) {
     fileInputRef,
     handleFileSelect,
     handleCropConfirm,
+    handleImageLoadInModal,
     handleSelectAnotherFile,
     handleCancelTooSmall,
     setShowCropModal,