npm - infinity-forge - Versions diffs - 11.2.7 → 11.2.9 - Mend

infinity-forge 11.2.7 → 11.2.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (121) hide show

package/dist/ui/components/form/input-file/input-crop-image/crop-image/components/crop-interface/index.js ADDED Viewed

@@ -0,0 +1,236 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CropInterface = CropInterface;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var ui_1 = require("../../../../../../../../ui/index.js");
+var preview_panel_1 = __importDefault(require("../preview-panel/index.js"));
+var crop_utils_1 = require("../../utils/crop-utils.js");
+function CropInterface(_a) {
+    var _this = this;
+    var file = _a.file, onCancel = _a.onCancel, onError = _a.onError, onApplyCrop = _a.onApplyCrop;
+    var _b = (0, react_1.useState)({ width: 0, height: 0 }), imageDimensions = _b[0], setImageDimensions = _b[1];
+    var _c = (0, react_1.useState)({
+        x: 0,
+        y: 0,
+        width: 0,
+        height: 0,
+    }), cropArea = _c[0], setCropArea = _c[1];
+    var _d = (0, react_1.useState)(false), isDragging = _d[0], setIsDragging = _d[1];
+    var _e = (0, react_1.useState)(false), isResizing = _e[0], setIsResizing = _e[1];
+    var _f = (0, react_1.useState)({ x: 0, y: 0 }), dragStart = _f[0], setDragStart = _f[1];
+    var _g = (0, react_1.useState)(null), aspectRatio = _g[0], setAspectRatio = _g[1];
+    var _h = (0, react_1.useState)(false), isLoading = _h[0], setIsLoading = _h[1];
+    var _j = (0, react_1.useState)(false), isMobile = _j[0], setIsMobile = _j[1];
+    var imageRef = (0, react_1.useRef)(null);
+    var containerRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(function () {
+        var checkMobile = function () {
+            setIsMobile(window.innerWidth <= 1024);
+        };
+        checkMobile();
+        window.addEventListener('resize', checkMobile);
+        return function () { return window.removeEventListener('resize', checkMobile); };
+    }, []);
+    (0, react_1.useEffect)(function () {
+        if (file === null || file === void 0 ? void 0 : file.url) {
+            var img_1 = new Image();
+            img_1.onload = function () {
+                var dimensions = { width: img_1.naturalWidth, height: img_1.naturalHeight };
+                setImageDimensions(dimensions);
+                setCropArea({
+                    x: dimensions.width * 0.15,
+                    y: dimensions.height * 0.15,
+                    width: dimensions.width * 0.7,
+                    height: dimensions.height * 0.6,
+                });
+            };
+            img_1.src = ((file === null || file === void 0 ? void 0 : file.url) || "");
+        }
+    }, [file]);
+    var getDisplayScale = function () {
+        if (!imageRef.current || imageDimensions.width === 0)
+            return 1;
+        return imageRef.current.clientWidth / imageDimensions.width;
+    };
+    var handleStart = function (e, action) {
+        e.preventDefault();
+        var clientX = 'touches' in e ? e.touches[0].clientX : e.clientX;
+        var clientY = 'touches' in e ? e.touches[0].clientY : e.clientY;
+        setDragStart({ x: clientX, y: clientY });
+        if (action === 'move') {
+            setIsDragging(true);
+        }
+        else {
+            setIsResizing(true);
+        }
+    };
+    (0, react_1.useEffect)(function () {
+        var handleMove = function (e) {
+            if (!isDragging && !isResizing)
+                return;
+            var clientX = 'touches' in e ? e.touches[0].clientX : e.clientX;
+            var clientY = 'touches' in e ? e.touches[0].clientY : e.clientY;
+            var scale = getDisplayScale();
+            var deltaX = (clientX - dragStart.x) / scale;
+            var deltaY = (clientY - dragStart.y) / scale;
+            if (isDragging) {
+                setCropArea(function (prev) { return (__assign(__assign({}, prev), { x: Math.max(0, Math.min(prev.x + deltaX, imageDimensions.width - prev.width)), y: Math.max(0, Math.min(prev.y + deltaY, imageDimensions.height - prev.height)) })); });
+            }
+            else if (isResizing) {
+                setCropArea(function (prev) {
+                    var newWidth = Math.max(50, prev.width + deltaX);
+                    var newHeight = Math.max(50, prev.height + deltaY);
+                    if (aspectRatio) {
+                        newHeight = newWidth / aspectRatio;
+                    }
+                    newWidth = Math.min(newWidth, imageDimensions.width - prev.x);
+                    newHeight = Math.min(newHeight, imageDimensions.height - prev.y);
+                    return __assign(__assign({}, prev), { width: newWidth, height: newHeight });
+                });
+            }
+            setDragStart({ x: clientX, y: clientY });
+        };
+        var handleEnd = function () {
+            setIsDragging(false);
+            setIsResizing(false);
+        };
+        if (isDragging || isResizing) {
+            document.addEventListener('mousemove', handleMove);
+            document.addEventListener('mouseup', handleEnd);
+            document.addEventListener('touchmove', handleMove, { passive: false });
+            document.addEventListener('touchend', handleEnd);
+        }
+        return function () {
+            document.removeEventListener('mousemove', handleMove);
+            document.removeEventListener('mouseup', handleEnd);
+            document.removeEventListener('touchmove', handleMove);
+            document.removeEventListener('touchend', handleEnd);
+        };
+    }, [isDragging, isResizing, dragStart, imageDimensions.width, imageDimensions.height, aspectRatio]);
+    var restoreOriginal = function () {
+        setCropArea({
+            x: 0,
+            y: 0,
+            width: imageDimensions.width,
+            height: imageDimensions.height,
+        });
+        setAspectRatio(null);
+    };
+    var setAspectRatioPreset = function (ratio) {
+        if (ratio === 'free') {
+            setAspectRatio(null);
+            return;
+        }
+        var _a = ratio.split(':').map(Number), w = _a[0], h = _a[1];
+        var newAspectRatio = w / h;
+        setAspectRatio(newAspectRatio);
+        setCropArea(function (prev) { return (__assign(__assign({}, prev), { height: prev.width / newAspectRatio })); });
+    };
+    var handleApplyCrop = function () { return __awaiter(_this, void 0, void 0, function () {
+        var croppedFile, error_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    _a.trys.push([0, 2, 3, 4]);
+                    setIsLoading(true);
+                    return [4 /*yield*/, (0, crop_utils_1.applyCrop)(file, cropArea, 'png', 90 / 100)];
+                case 1:
+                    croppedFile = _a.sent();
+                    if (onApplyCrop) {
+                        onApplyCrop(croppedFile);
+                    }
+                    onCancel();
+                    return [3 /*break*/, 4];
+                case 2:
+                    error_1 = _a.sent();
+                    console.error('Error applying crop:', error_1);
+                    onError('Erro ao aplicar o recorte. Tente novamente.');
+                    return [3 /*break*/, 4];
+                case 3:
+                    setIsLoading(false);
+                    return [7 /*endfinally*/];
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); };
+    var scale = getDisplayScale();
+    var displayCropArea = {
+        x: cropArea.x * scale,
+        y: cropArea.y * scale,
+        width: cropArea.width * scale,
+        height: cropArea.height * scale,
+    };
+    if (imageDimensions.width === 0 || imageDimensions.height === 0) {
+        return ((0, jsx_runtime_1.jsx)("div", { className: 'loading-wrapper', children: (0, jsx_runtime_1.jsx)(ui_1.Icon, { name: 'IconLoading' }) }));
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { className: 'crop-interface', children: [(0, jsx_runtime_1.jsxs)("div", { className: 'actions-wrapper', children: [(0, jsx_runtime_1.jsxs)("div", { className: 'actions-group', children: [(0, jsx_runtime_1.jsx)(ui_1.Button, { text: 'Restaurar Original', onClick: restoreOriginal, disabled: isLoading, className: 'px-6 py-2.5', svg: 'IconUndo' }), (0, jsx_runtime_1.jsx)(ui_1.Button, { className: 'cancel', text: 'Cancelar', onClick: onCancel, disabled: isLoading, svg: 'IconClose' })] }), (0, jsx_runtime_1.jsx)(ui_1.Button, { className: 'accept', text: 'Aplicar Recorte', onClick: handleApplyCrop, svg: 'Checked', disabled: isLoading })] }), (0, jsx_runtime_1.jsxs)("div", { className: 'main-crop-area', children: [(0, jsx_runtime_1.jsxs)("div", { className: 'crop-area-wrapper', children: [(0, jsx_runtime_1.jsxs)("div", { className: 'crop-image-box', children: [(0, jsx_runtime_1.jsx)("img", { className: 'crop-image', ref: imageRef, src: file === null || file === void 0 ? void 0 : file.url, alt: 'Image to crop' }), (0, jsx_runtime_1.jsxs)("div", { className: 'crop-overlay', ref: containerRef, children: [(0, jsx_runtime_1.jsx)("div", { className: 'dimmed-overlay' }), (0, jsx_runtime_1.jsx)("div", { className: 'clear-crop-area', style: {
+                                                    left: displayCropArea.x,
+                                                    top: displayCropArea.y,
+                                                    width: displayCropArea.width,
+                                                    height: displayCropArea.height,
+                                                    boxShadow: '0 0 0 9999px rgba(0, 0, 0, 0.4)',
+                                                } }), (0, jsx_runtime_1.jsxs)("div", { className: 'crop-selection-area', style: {
+                                                    left: displayCropArea.x,
+                                                    top: displayCropArea.y,
+                                                    width: displayCropArea.width,
+                                                    height: displayCropArea.height,
+                                                }, onMouseDown: function (e) { return handleStart(e, 'move'); }, onTouchStart: function (e) { return handleStart(e, 'move'); }, children: [(0, jsx_runtime_1.jsx)("div", { className: 'corner-handle nw' }), (0, jsx_runtime_1.jsx)("div", { className: 'corner-handle ne' }), (0, jsx_runtime_1.jsx)("div", { className: 'corner-handle sw' }), (0, jsx_runtime_1.jsx)("div", { className: 'corner-handle se', onMouseDown: function (e) {
+                                                            e.stopPropagation();
+                                                            handleStart(e, 'resize');
+                                                        }, onTouchStart: function (e) {
+                                                            e.stopPropagation();
+                                                            handleStart(e, 'resize');
+                                                        } }), (0, jsx_runtime_1.jsx)("div", { className: 'edge-handle n' }), (0, jsx_runtime_1.jsx)("div", { className: 'edge-handle s' }), (0, jsx_runtime_1.jsx)("div", { className: 'edge-handle w' }), (0, jsx_runtime_1.jsx)("div", { className: 'edge-handle e' })] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: 'crop-dimensions', children: [(0, jsx_runtime_1.jsxs)("div", { className: 'crop-dimension-item', children: [(0, jsx_runtime_1.jsx)(ui_1.Icon, { name: 'IconLeftArrowBar' }), Math.round(cropArea.width), " \u00D7 ", Math.round(cropArea.height), " px"] }), (0, jsx_runtime_1.jsxs)("div", { className: 'crop-dimension-item', children: ["Aspect Ratio: ", aspectRatio ? "".concat(aspectRatio.toFixed(2), ":1") : 'Free'] })] })] }), (0, jsx_runtime_1.jsx)(preview_panel_1.default, { file: file, imageDimensions: imageDimensions, cropArea: cropArea, onAspectRatioChange: setAspectRatioPreset })] })] }));
+}
+//# sourceMappingURL=index.js.map

package/dist/ui/components/form/input-file/input-crop-image/crop-image/components/crop-interface/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../src/ui/components/form/input-file/input-crop-image/crop-image/components/crop-interface/index.tsx"],"names":[],"mappings":"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"}

package/dist/ui/components/form/input-file/input-crop-image/crop-image/components/crop-interface/styles.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const cropInterfaceStyles: import("styled-components").RuleSet<object>;

package/dist/ui/components/form/input-file/input-crop-image/crop-image/components/crop-interface/styles.js ADDED Viewed

@@ -0,0 +1,11 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cropInterfaceStyles = void 0;
+var styled_components_1 = require("styled-components");
+exports.cropInterfaceStyles = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  .crop-interface {\n    .actions-wrapper {\n      border-bottom: 1px solid #e5e7eb;\n      padding: 1.5rem 2rem;\n      background: #f9fafb;\n      display: flex;\n      justify-content: space-between;\n      gap: 1rem;\n\n      @media (max-width: 1024px) {\n        flex-direction: column;\n        padding: 1rem;\n        gap: 0.5rem;\n\n        .actions-group {\n          flex-direction: column;\n          width: 100%;\n\n          button {\n            width: 100%;\n            max-width: 100%;\n          }\n        }\n\n        > div:last-child {\n          width: 100%;\n          button {\n            width: 100%;\n            max-width: 100%;\n          }\n        }\n      }\n\n      @media (max-width: 768px) {\n        padding: 0.75rem;\n        gap: 0.5rem;\n      }\n\n      .actions-group {\n        display: flex;\n        gap: 1rem;\n        align-items: center;\n\n        @media (max-width: 1024px) {\n          gap: 0.5rem;\n          > div {\n            width: 100%;\n          }\n        }\n      }\n\n      .button-icon {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        svg {\n          width: 1.6rem;\n          height: 1.6rem;\n          margin-right: 1rem;\n          stroke: currentColor;\n        }\n      }\n\n      button {\n        max-width: fit-content;\n        height: 4rem;\n        padding: 0 1.5rem;\n        background: #fff;\n        border: 1px solid hsl(20, 5.9%, 90%);\n        border-radius: 0.5rem;\n        font-size: 1.4rem;\n        font-weight: 500;\n        color: #1f2937;\n        cursor: pointer;\n        transition: all 0.1s ease-in-out;\n        font-weight: 600;\n\n        @media (max-width: 768px) {\n          height: 3.5rem;\n          padding: 0 1rem;\n          font-size: 1.3rem;\n        }\n\n        &:hover {\n          background: #f3f4f6;\n        }\n\n        &.cancel {\n          color: #dc2626;\n\n          &:hover {\n            background: #dc262610;\n          }\n\n          svg {\n            fill: #dc2626;\n          }\n        }\n\n        &.accept {\n          color: #fff;\n          background: #10b981;\n\n          &:hover {\n            background: rgb(12, 136, 94);\n          }\n        }\n      }\n    }\n\n    .main-crop-area {\n      display: flex;\n      background: rgb(243 244 246);\n\n      @media (max-width: 1024px) {\n        flex-direction: column;\n        min-height: calc(100vh - 200px);\n      }\n    }\n\n    .crop-area-wrapper {\n      position: relative;\n      display: inline-block;\n      max-width: 100%;\n      padding: 2rem;\n      flex: 1;\n\n      @media (max-width: 1024px) {\n        padding: 1rem;\n        flex: none;\n        height: auto;\n      }\n\n      @media (max-width: 768px) {\n        padding: 0.5rem;\n      }\n    }\n\n    .crop-image-box {\n      position: relative;\n      background: #fff;\n      border-radius: 1rem;\n      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);\n      overflow: hidden;\n      height: 100%;\n      width: 100%;\n      max-width: 64vw;\n      max-height: 70vh;\n\n      @media (max-width: 1024px) {\n        max-width: 100%;\n        max-height: 50vh;\n        min-height: 300px;\n      }\n\n      @media (max-width: 768px) {\n        max-height: 40vh;\n        min-height: 250px;\n        border-radius: 0.5rem;\n      }\n\n      .crop-image {\n        display: block;\n        height: auto;\n        width: 100%;\n        max-width: 100%;\n        max-height: 100%;\n        object-fit: contain;\n      }\n    }\n\n    .loading-wrapper {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      padding: 2rem;\n\n      @media (max-width: 768px) {\n        padding: 1rem;\n      }\n    }\n\n    .loading-text {\n      color: #6b7280;\n    }\n\n    .crop-overlay {\n      position: absolute;\n      inset: 0;\n      cursor: crosshair;\n      touch-action: none; /* Previne scroll durante touch */\n\n      @media (max-width: 1024px) {\n        cursor: default;\n      }\n    }\n\n    .dimmed-overlay {\n      position: absolute;\n      inset: 0;\n      background: rgba(0, 0, 0, 0.4);\n      pointer-events: none;\n    }\n\n    .clear-crop-area {\n      position: absolute;\n      background: transparent;\n    }\n\n    .crop-selection-area {\n      position: absolute;\n      border: 2px dashed #fff;\n      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);\n      cursor: move;\n      touch-action: none;\n\n      @media (max-width: 1024px) {\n        border-width: 3px;\n        cursor: default;\n      }\n\n      @media (max-width: 768px) {\n        border-width: 2px;\n      }\n    }\n\n    .corner-handle {\n      position: absolute;\n      width: 12px;\n      height: 12px;\n      background: #fff;\n      border: 2px solid #3b82f6;\n      border-radius: 2px;\n      touch-action: none;\n\n      @media (max-width: 1024px) {\n        width: 16px;\n        height: 16px;\n        border-width: 3px;\n      }\n\n      @media (max-width: 768px) {\n        width: 14px;\n        height: 14px;\n        border-width: 2px;\n      }\n\n      &.nw {\n        top: -4px;\n        left: -4px;\n        cursor: nw-resize;\n\n        @media (max-width: 1024px) {\n          top: -6px;\n          left: -6px;\n          cursor: default;\n        }\n\n        @media (max-width: 768px) {\n          top: -5px;\n          left: -5px;\n        }\n      }\n\n      &.ne {\n        top: -4px;\n        right: -4px;\n        cursor: ne-resize;\n\n        @media (max-width: 1024px) {\n          top: -6px;\n          right: -6px;\n          cursor: default;\n        }\n\n        @media (max-width: 768px) {\n          top: -5px;\n          right: -5px;\n        }\n      }\n\n      &.sw {\n        bottom: -4px;\n        left: -4px;\n        cursor: sw-resize;\n\n        @media (max-width: 1024px) {\n          bottom: -6px;\n          left: -6px;\n          cursor: default;\n        }\n\n        @media (max-width: 768px) {\n          bottom: -5px;\n          left: -5px;\n        }\n      }\n\n      &.se {\n        bottom: -4px;\n        right: -4px;\n        cursor: se-resize;\n\n        @media (max-width: 1024px) {\n          bottom: -6px;\n          right: -6px;\n          cursor: default;\n        }\n\n        @media (max-width: 768px) {\n          bottom: -5px;\n          right: -5px;\n        }\n      }\n    }\n\n    .edge-handle {\n      position: absolute;\n      width: 12px;\n      height: 12px;\n      background: #fff;\n      border: 2px solid #3b82f6;\n      border-radius: 2px;\n      touch-action: none;\n\n      @media (max-width: 1024px) {\n        width: 16px;\n        height: 16px;\n        border-width: 3px;\n      }\n\n      @media (max-width: 768px) {\n        width: 14px;\n        height: 14px;\n        border-width: 2px;\n      }\n\n      &.n {\n        top: -4px;\n        left: 50%;\n        transform: translateX(-50%);\n        cursor: n-resize;\n\n        @media (max-width: 1024px) {\n          top: -6px;\n          cursor: default;\n        }\n\n        @media (max-width: 768px) {\n          top: -5px;\n        }\n      }\n\n      &.s {\n        bottom: -4px;\n        left: 50%;\n        transform: translateX(-50%);\n        cursor: s-resize;\n\n        @media (max-width: 1024px) {\n          bottom: -6px;\n          cursor: default;\n        }\n\n        @media (max-width: 768px) {\n          bottom: -5px;\n        }\n      }\n\n      &.w {\n        left: -4px;\n        top: 50%;\n        transform: translateY(-50%);\n        cursor: w-resize;\n\n        @media (max-width: 1024px) {\n          left: -6px;\n          cursor: default;\n        }\n\n        @media (max-width: 768px) {\n          left: -5px;\n        }\n      }\n\n      &.e {\n        right: -4px;\n        top: 50%;\n        transform: translateY(-50%);\n        cursor: e-resize;\n\n        @media (max-width: 1024px) {\n          right: -6px;\n          cursor: default;\n        }\n\n        @media (max-width: 768px) {\n          right: -5px;\n        }\n      }\n    }\n\n    .crop-dimensions {\n      margin-top: 1.5rem;\n      display: flex;\n      flex-wrap: wrap;\n      gap: 1rem;\n      font-size: 1.4rem;\n      color: #4b5563;\n\n      @media (max-width: 1024px) {\n        margin-top: 1rem;\n        gap: 0.75rem;\n        font-size: 1.3rem;\n      }\n\n      @media (max-width: 768px) {\n        margin-top: 0.75rem;\n        gap: 0.5rem;\n        font-size: 1.2rem;\n        flex-direction: column;\n      }\n\n      svg {\n        width: 1.5rem;\n        height: 1.5rem;\n        margin-right: 1rem;\n        stroke: currentColor;\n\n        @media (max-width: 768px) {\n          width: 1.3rem;\n          height: 1.3rem;\n          margin-right: 0.75rem;\n        }\n      }\n    }\n\n    .crop-dimension-item {\n      display: flex;\n      align-items: center;\n\n      @media (max-width: 768px) {\n        font-size: 1.1rem;\n      }\n    }\n\n    .action-buttons-inner {\n      @media (min-width: 640px) {\n        flex-direction: row;\n        justify-content: space-between;\n        align-items: center;\n      }\n    }\n\n    .action-buttons-group {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 0.75rem;\n    }\n  }\n"], ["\n  .crop-interface {\n    .actions-wrapper {\n      border-bottom: 1px solid #e5e7eb;\n      padding: 1.5rem 2rem;\n      background: #f9fafb;\n      display: flex;\n      justify-content: space-between;\n      gap: 1rem;\n\n      @media (max-width: 1024px) {\n        flex-direction: column;\n        padding: 1rem;\n        gap: 0.5rem;\n\n        .actions-group {\n          flex-direction: column;\n          width: 100%;\n\n          button {\n            width: 100%;\n            max-width: 100%;\n          }\n        }\n\n        > div:last-child {\n          width: 100%;\n          button {\n            width: 100%;\n            max-width: 100%;\n          }\n        }\n      }\n\n      @media (max-width: 768px) {\n        padding: 0.75rem;\n        gap: 0.5rem;\n      }\n\n      .actions-group {\n        display: flex;\n        gap: 1rem;\n        align-items: center;\n\n        @media (max-width: 1024px) {\n          gap: 0.5rem;\n          > div {\n            width: 100%;\n          }\n        }\n      }\n\n      .button-icon {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        svg {\n          width: 1.6rem;\n          height: 1.6rem;\n          margin-right: 1rem;\n          stroke: currentColor;\n        }\n      }\n\n      button {\n        max-width: fit-content;\n        height: 4rem;\n        padding: 0 1.5rem;\n        background: #fff;\n        border: 1px solid hsl(20, 5.9%, 90%);\n        border-radius: 0.5rem;\n        font-size: 1.4rem;\n        font-weight: 500;\n        color: #1f2937;\n        cursor: pointer;\n        transition: all 0.1s ease-in-out;\n        font-weight: 600;\n\n        @media (max-width: 768px) {\n          height: 3.5rem;\n          padding: 0 1rem;\n          font-size: 1.3rem;\n        }\n\n        &:hover {\n          background: #f3f4f6;\n        }\n\n        &.cancel {\n          color: #dc2626;\n\n          &:hover {\n            background: #dc262610;\n          }\n\n          svg {\n            fill: #dc2626;\n          }\n        }\n\n        &.accept {\n          color: #fff;\n          background: #10b981;\n\n          &:hover {\n            background: rgb(12, 136, 94);\n          }\n        }\n      }\n    }\n\n    .main-crop-area {\n      display: flex;\n      background: rgb(243 244 246);\n\n      @media (max-width: 1024px) {\n        flex-direction: column;\n        min-height: calc(100vh - 200px);\n      }\n    }\n\n    .crop-area-wrapper {\n      position: relative;\n      display: inline-block;\n      max-width: 100%;\n      padding: 2rem;\n      flex: 1;\n\n      @media (max-width: 1024px) {\n        padding: 1rem;\n        flex: none;\n        height: auto;\n      }\n\n      @media (max-width: 768px) {\n        padding: 0.5rem;\n      }\n    }\n\n    .crop-image-box {\n      position: relative;\n      background: #fff;\n      border-radius: 1rem;\n      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);\n      overflow: hidden;\n      height: 100%;\n      width: 100%;\n      max-width: 64vw;\n      max-height: 70vh;\n\n      @media (max-width: 1024px) {\n        max-width: 100%;\n        max-height: 50vh;\n        min-height: 300px;\n      }\n\n      @media (max-width: 768px) {\n        max-height: 40vh;\n        min-height: 250px;\n        border-radius: 0.5rem;\n      }\n\n      .crop-image {\n        display: block;\n        height: auto;\n        width: 100%;\n        max-width: 100%;\n        max-height: 100%;\n        object-fit: contain;\n      }\n    }\n\n    .loading-wrapper {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      padding: 2rem;\n\n      @media (max-width: 768px) {\n        padding: 1rem;\n      }\n    }\n\n    .loading-text {\n      color: #6b7280;\n    }\n\n    .crop-overlay {\n      position: absolute;\n      inset: 0;\n      cursor: crosshair;\n      touch-action: none; /* Previne scroll durante touch */\n\n      @media (max-width: 1024px) {\n        cursor: default;\n      }\n    }\n\n    .dimmed-overlay {\n      position: absolute;\n      inset: 0;\n      background: rgba(0, 0, 0, 0.4);\n      pointer-events: none;\n    }\n\n    .clear-crop-area {\n      position: absolute;\n      background: transparent;\n    }\n\n    .crop-selection-area {\n      position: absolute;\n      border: 2px dashed #fff;\n      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);\n      cursor: move;\n      touch-action: none;\n\n      @media (max-width: 1024px) {\n        border-width: 3px;\n        cursor: default;\n      }\n\n      @media (max-width: 768px) {\n        border-width: 2px;\n      }\n    }\n\n    .corner-handle {\n      position: absolute;\n      width: 12px;\n      height: 12px;\n      background: #fff;\n      border: 2px solid #3b82f6;\n      border-radius: 2px;\n      touch-action: none;\n\n      @media (max-width: 1024px) {\n        width: 16px;\n        height: 16px;\n        border-width: 3px;\n      }\n\n      @media (max-width: 768px) {\n        width: 14px;\n        height: 14px;\n        border-width: 2px;\n      }\n\n      &.nw {\n        top: -4px;\n        left: -4px;\n        cursor: nw-resize;\n\n        @media (max-width: 1024px) {\n          top: -6px;\n          left: -6px;\n          cursor: default;\n        }\n\n        @media (max-width: 768px) {\n          top: -5px;\n          left: -5px;\n        }\n      }\n\n      &.ne {\n        top: -4px;\n        right: -4px;\n        cursor: ne-resize;\n\n        @media (max-width: 1024px) {\n          top: -6px;\n          right: -6px;\n          cursor: default;\n        }\n\n        @media (max-width: 768px) {\n          top: -5px;\n          right: -5px;\n        }\n      }\n\n      &.sw {\n        bottom: -4px;\n        left: -4px;\n        cursor: sw-resize;\n\n        @media (max-width: 1024px) {\n          bottom: -6px;\n          left: -6px;\n          cursor: default;\n        }\n\n        @media (max-width: 768px) {\n          bottom: -5px;\n          left: -5px;\n        }\n      }\n\n      &.se {\n        bottom: -4px;\n        right: -4px;\n        cursor: se-resize;\n\n        @media (max-width: 1024px) {\n          bottom: -6px;\n          right: -6px;\n          cursor: default;\n        }\n\n        @media (max-width: 768px) {\n          bottom: -5px;\n          right: -5px;\n        }\n      }\n    }\n\n    .edge-handle {\n      position: absolute;\n      width: 12px;\n      height: 12px;\n      background: #fff;\n      border: 2px solid #3b82f6;\n      border-radius: 2px;\n      touch-action: none;\n\n      @media (max-width: 1024px) {\n        width: 16px;\n        height: 16px;\n        border-width: 3px;\n      }\n\n      @media (max-width: 768px) {\n        width: 14px;\n        height: 14px;\n        border-width: 2px;\n      }\n\n      &.n {\n        top: -4px;\n        left: 50%;\n        transform: translateX(-50%);\n        cursor: n-resize;\n\n        @media (max-width: 1024px) {\n          top: -6px;\n          cursor: default;\n        }\n\n        @media (max-width: 768px) {\n          top: -5px;\n        }\n      }\n\n      &.s {\n        bottom: -4px;\n        left: 50%;\n        transform: translateX(-50%);\n        cursor: s-resize;\n\n        @media (max-width: 1024px) {\n          bottom: -6px;\n          cursor: default;\n        }\n\n        @media (max-width: 768px) {\n          bottom: -5px;\n        }\n      }\n\n      &.w {\n        left: -4px;\n        top: 50%;\n        transform: translateY(-50%);\n        cursor: w-resize;\n\n        @media (max-width: 1024px) {\n          left: -6px;\n          cursor: default;\n        }\n\n        @media (max-width: 768px) {\n          left: -5px;\n        }\n      }\n\n      &.e {\n        right: -4px;\n        top: 50%;\n        transform: translateY(-50%);\n        cursor: e-resize;\n\n        @media (max-width: 1024px) {\n          right: -6px;\n          cursor: default;\n        }\n\n        @media (max-width: 768px) {\n          right: -5px;\n        }\n      }\n    }\n\n    .crop-dimensions {\n      margin-top: 1.5rem;\n      display: flex;\n      flex-wrap: wrap;\n      gap: 1rem;\n      font-size: 1.4rem;\n      color: #4b5563;\n\n      @media (max-width: 1024px) {\n        margin-top: 1rem;\n        gap: 0.75rem;\n        font-size: 1.3rem;\n      }\n\n      @media (max-width: 768px) {\n        margin-top: 0.75rem;\n        gap: 0.5rem;\n        font-size: 1.2rem;\n        flex-direction: column;\n      }\n\n      svg {\n        width: 1.5rem;\n        height: 1.5rem;\n        margin-right: 1rem;\n        stroke: currentColor;\n\n        @media (max-width: 768px) {\n          width: 1.3rem;\n          height: 1.3rem;\n          margin-right: 0.75rem;\n        }\n      }\n    }\n\n    .crop-dimension-item {\n      display: flex;\n      align-items: center;\n\n      @media (max-width: 768px) {\n        font-size: 1.1rem;\n      }\n    }\n\n    .action-buttons-inner {\n      @media (min-width: 640px) {\n        flex-direction: row;\n        justify-content: space-between;\n        align-items: center;\n      }\n    }\n\n    .action-buttons-group {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 0.75rem;\n    }\n  }\n"])));
+var templateObject_1;
+//# sourceMappingURL=styles.js.map

package/dist/ui/components/form/input-file/input-crop-image/crop-image/components/crop-interface/styles.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../../../../../src/ui/components/form/input-file/input-crop-image/crop-image/components/crop-interface/styles.ts"],"names":[],"mappings":";;;;;;;AAAA,uDAAuC;AAE1B,QAAA,mBAAmB,OAAG,uBAAG,qpSAAA,ilSA8crC,KAAA"}

package/dist/ui/components/form/input-file/input-crop-image/crop-image/components/index.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export * from './preview-panel/index.js';
2	+ export * from './crop-interface/index.js';

package/dist/ui/components/form/input-file/input-crop-image/crop-image/components/index.js ADDED Viewed

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./preview-panel/index.js"), exports);
+__exportStar(require("./crop-interface/index.js"), exports);
+//# sourceMappingURL=index.js.map

package/dist/ui/components/form/input-file/input-crop-image/crop-image/components/index.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../src/ui/components/form/input-file/input-crop-image/crop-image/components/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,kDAA+B;AAC/B,mDAAgC"}

package/dist/ui/components/form/input-file/input-crop-image/crop-image/components/preview-panel/index.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import { PreviewPanelProps } from './interfaces.js';
2	+ export default function PreviewPanel({ file, imageDimensions, cropArea, onAspectRatioChange }: PreviewPanelProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/form/input-file/input-crop-image/crop-image/components/preview-panel/index.js ADDED Viewed

@@ -0,0 +1,78 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = PreviewPanel;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var ui_1 = require("../../../../../../../../ui/index.js");
+var crop_utils_1 = require("../../utils/crop-utils.js");
+function PreviewPanel(_a) {
+    var _this = this;
+    var file = _a.file, imageDimensions = _a.imageDimensions, cropArea = _a.cropArea, onAspectRatioChange = _a.onAspectRatioChange;
+    var _b = (0, react_1.useState)(''), previewUrl = _b[0], setPreviewUrl = _b[1];
+    (0, react_1.useEffect)(function () {
+        var generatePreview = function () { return __awaiter(_this, void 0, void 0, function () {
+            var preview, error_1;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        _a.trys.push([0, 2, , 3]);
+                        return [4 /*yield*/, (0, crop_utils_1.getCropPreview)(file, cropArea, 300)];
+                    case 1:
+                        preview = _a.sent();
+                        setPreviewUrl(preview);
+                        return [3 /*break*/, 3];
+                    case 2:
+                        error_1 = _a.sent();
+                        console.error('Preview generation error:', error_1);
+                        return [3 /*break*/, 3];
+                    case 3: return [2 /*return*/];
+                }
+            });
+        }); };
+        generatePreview();
+    }, [file, imageDimensions, cropArea]);
+    var aspectRatios = [
+        { label: '1:1', value: '1:1' },
+        { label: '4:3', value: '4:3' },
+        { label: '16:9', value: '16:9' },
+        { label: 'Free', value: 'free' },
+    ];
+    return ((0, jsx_runtime_1.jsxs)("div", { className: 'preview-panel', children: [(0, jsx_runtime_1.jsxs)("h3", { className: 'title', children: [(0, jsx_runtime_1.jsx)(ui_1.Icon, { name: 'IconEye' }), "Pr\u00E9via do Recorte:"] }), (0, jsx_runtime_1.jsx)("div", { className: 'preview-image-container', children: (0, jsx_runtime_1.jsx)("div", { className: 'preview-image-box', children: previewUrl ? ((0, jsx_runtime_1.jsx)("img", { className: 'preview-image', src: previewUrl, alt: 'Crop preview' })) : ((0, jsx_runtime_1.jsx)("div", { className: 'preview-image-loading', children: "Generating preview..." })) }) }), (0, jsx_runtime_1.jsxs)("div", { className: 'quick-ratios-wrapper', children: [(0, jsx_runtime_1.jsx)("span", { className: 'quick-ratios-label', children: "Propor\u00E7\u00F5es R\u00E1pidas" }), (0, jsx_runtime_1.jsx)("div", { className: 'quick-ratios-grid', children: aspectRatios.map(function (ratio) { return ((0, jsx_runtime_1.jsx)("button", { onClick: function () { return onAspectRatioChange(ratio.value); }, children: ratio.label }, ratio.value)); }) })] })] }));
+}
+//# sourceMappingURL=index.js.map

package/dist/ui/components/form/input-file/input-crop-image/crop-image/components/preview-panel/index.js.map ADDED Viewed

@@ -0,0 +1 @@

package/dist/ui/components/form/input-file/input-crop-image/crop-image/components/preview-panel/interfaces.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import { FileSystemType } from '../../../../../../../../ui/index.js';
+import { CropArea } from '../../shared/interfaces.js';
+export interface PreviewPanelProps {
+    file: FileSystemType;
+    imageDimensions: {
+        width: number;
+        height: number;
+    };
+    cropArea: CropArea;
+    onAspectRatioChange: (ratio: string) => void;
+}

package/dist/ui/components/form/input-file/input-crop-image/crop-image/components/preview-panel/interfaces.js ADDED Viewed

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=interfaces.js.map

package/dist/ui/components/form/input-file/input-crop-image/crop-image/components/preview-panel/interfaces.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../../../../../../../src/ui/components/form/input-file/input-crop-image/crop-image/components/preview-panel/interfaces.ts"],"names":[],"mappings":""}

package/dist/ui/components/form/input-file/input-crop-image/crop-image/components/preview-panel/styles.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const previewPanelStyles: import("styled-components").RuleSet<object>;

package/dist/ui/components/form/input-file/input-crop-image/crop-image/components/preview-panel/styles.js ADDED Viewed

@@ -0,0 +1,11 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.previewPanelStyles = void 0;
+var styled_components_1 = require("styled-components");
+exports.previewPanelStyles = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  .preview-panel {\n    width: 100%;\n    max-width: 35rem;\n    background: #fff;\n    border-left: 1px solid #e5e7eb;\n    padding: 2rem;\n\n    @media (max-width: 1024px) {\n      max-width: 100%;\n      border-left: none;\n      border-top: 1px solid #e5e7eb;\n      padding: 1.5rem;\n    }\n\n    @media (max-width: 768px) {\n      padding: 1rem;\n    }\n\n    .title {\n      font-size: 1.8rem;\n      font-weight: 600;\n      color: #1f2937;\n      margin-bottom: 1rem;\n      display: flex;\n      align-items: center;\n      gap: 1rem;\n      justify-content: flex-start;\n\n      @media (max-width: 768px) {\n        font-size: 1.6rem;\n        margin-bottom: 0.75rem;\n      }\n\n      svg {\n        width: 2rem;\n        height: 2rem;\n        fill: rgb(59 130 246);\n\n        @media (max-width: 768px) {\n          width: 1.8rem;\n          height: 1.8rem;\n        }\n      }\n    }\n\n    .preview-image-container {\n      background: #f3f4f6;\n      border-radius: 0.5rem;\n      padding: 1rem;\n      margin-bottom: 1.5rem;\n\n      @media (max-width: 768px) {\n        padding: 0.75rem;\n        margin-bottom: 1rem;\n      }\n    }\n\n    .preview-image-box {\n      aspect-ratio: 1 / 1;\n      background: #fff;\n      border-radius: 0.5rem;\n      overflow: hidden;\n      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 100%;\n\n      @media (max-width: 1024px) {\n        max-width: 200px;\n        margin: 0 auto;\n      }\n\n      @media (max-width: 768px) {\n        max-width: 150px;\n      }\n    }\n\n    .preview-image {\n      width: 100%;\n      height: 100%;\n      object-fit: cover;\n    }\n\n    .preview-image-loading {\n      width: 100%;\n      height: 100%;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      color: #9ca3af;\n      font-size: 1.3rem;\n\n      @media (max-width: 768px) {\n        font-size: 1.2rem;\n      }\n    }\n\n    .quick-ratios-wrapper {\n      margin-bottom: 2rem;\n\n      @media (max-width: 768px) {\n        margin-bottom: 1rem;\n      }\n    }\n\n    .quick-ratios-label {\n      display: block;\n      font-size: 1.4rem;\n      font-weight: 500;\n      color: #374151;\n      margin-bottom: 0.75rem;\n\n      @media (max-width: 768px) {\n        font-size: 1.3rem;\n        margin-bottom: 0.5rem;\n      }\n    }\n\n    .quick-ratios-grid {\n      display: grid;\n      grid-template-columns: repeat(2, 1fr);\n      gap: 0.5rem;\n\n      @media (max-width: 768px) {\n        gap: 0.4rem;\n      }\n\n      button {\n        max-width: 100%;\n        height: 4rem;\n        padding: 0 1.5rem;\n        background: #fff;\n        border: 1px solid hsl(20, 5.9%, 90%);\n        border-radius: 0.5rem;\n        font-size: 1.4rem;\n        font-weight: 500;\n        color: #1f2937;\n        cursor: pointer;\n        transition: all 0.1s ease-in-out;\n        font-weight: 600;\n\n        @media (max-width: 768px) {\n          height: 3.5rem;\n          padding: 0 0.75rem;\n          font-size: 1.2rem;\n        }\n\n        &:hover {\n          background: #f3f4f6;\n        }\n      }\n    }\n  }\n"], ["\n  .preview-panel {\n    width: 100%;\n    max-width: 35rem;\n    background: #fff;\n    border-left: 1px solid #e5e7eb;\n    padding: 2rem;\n\n    @media (max-width: 1024px) {\n      max-width: 100%;\n      border-left: none;\n      border-top: 1px solid #e5e7eb;\n      padding: 1.5rem;\n    }\n\n    @media (max-width: 768px) {\n      padding: 1rem;\n    }\n\n    .title {\n      font-size: 1.8rem;\n      font-weight: 600;\n      color: #1f2937;\n      margin-bottom: 1rem;\n      display: flex;\n      align-items: center;\n      gap: 1rem;\n      justify-content: flex-start;\n\n      @media (max-width: 768px) {\n        font-size: 1.6rem;\n        margin-bottom: 0.75rem;\n      }\n\n      svg {\n        width: 2rem;\n        height: 2rem;\n        fill: rgb(59 130 246);\n\n        @media (max-width: 768px) {\n          width: 1.8rem;\n          height: 1.8rem;\n        }\n      }\n    }\n\n    .preview-image-container {\n      background: #f3f4f6;\n      border-radius: 0.5rem;\n      padding: 1rem;\n      margin-bottom: 1.5rem;\n\n      @media (max-width: 768px) {\n        padding: 0.75rem;\n        margin-bottom: 1rem;\n      }\n    }\n\n    .preview-image-box {\n      aspect-ratio: 1 / 1;\n      background: #fff;\n      border-radius: 0.5rem;\n      overflow: hidden;\n      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 100%;\n\n      @media (max-width: 1024px) {\n        max-width: 200px;\n        margin: 0 auto;\n      }\n\n      @media (max-width: 768px) {\n        max-width: 150px;\n      }\n    }\n\n    .preview-image {\n      width: 100%;\n      height: 100%;\n      object-fit: cover;\n    }\n\n    .preview-image-loading {\n      width: 100%;\n      height: 100%;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      color: #9ca3af;\n      font-size: 1.3rem;\n\n      @media (max-width: 768px) {\n        font-size: 1.2rem;\n      }\n    }\n\n    .quick-ratios-wrapper {\n      margin-bottom: 2rem;\n\n      @media (max-width: 768px) {\n        margin-bottom: 1rem;\n      }\n    }\n\n    .quick-ratios-label {\n      display: block;\n      font-size: 1.4rem;\n      font-weight: 500;\n      color: #374151;\n      margin-bottom: 0.75rem;\n\n      @media (max-width: 768px) {\n        font-size: 1.3rem;\n        margin-bottom: 0.5rem;\n      }\n    }\n\n    .quick-ratios-grid {\n      display: grid;\n      grid-template-columns: repeat(2, 1fr);\n      gap: 0.5rem;\n\n      @media (max-width: 768px) {\n        gap: 0.4rem;\n      }\n\n      button {\n        max-width: 100%;\n        height: 4rem;\n        padding: 0 1.5rem;\n        background: #fff;\n        border: 1px solid hsl(20, 5.9%, 90%);\n        border-radius: 0.5rem;\n        font-size: 1.4rem;\n        font-weight: 500;\n        color: #1f2937;\n        cursor: pointer;\n        transition: all 0.1s ease-in-out;\n        font-weight: 600;\n\n        @media (max-width: 768px) {\n          height: 3.5rem;\n          padding: 0 0.75rem;\n          font-size: 1.2rem;\n        }\n\n        &:hover {\n          background: #f3f4f6;\n        }\n      }\n    }\n  }\n"])));
+var templateObject_1;
+//# sourceMappingURL=styles.js.map

package/dist/ui/components/form/input-file/input-crop-image/crop-image/components/preview-panel/styles.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../../../../../src/ui/components/form/input-file/input-crop-image/crop-image/components/preview-panel/styles.ts"],"names":[],"mappings":";;;;;;;AAAA,uDAAuC;AAE1B,QAAA,kBAAkB,OAAG,uBAAG,0sGAAA,soGA2JpC,KAAA"}

package/dist/ui/components/form/input-file/input-crop-image/crop-image/index.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+import { FileSystemType } from '../../../../../../ui/index.js';
+type CropImageProps = {
+    file: FileSystemType;
+    setFile: (file: FileSystemType | null) => void;
+    onApplyCrop?: (croppedFile: FileSystemType) => void;
+};
+export declare function CropImage({ file, setFile, onApplyCrop }: CropImageProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/ui/components/form/input-file/input-crop-image/crop-image/index.js ADDED Viewed

@@ -0,0 +1,31 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CropImage = CropImage;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var ui_1 = require("../../../../../../ui/index.js");
+var styled_components_1 = require("styled-components");
+var styles_1 = require("./styles.js");
+var crop_interface_1 = require("./components/crop-interface/index.js");
+var styles_2 = require("./components/crop-interface/styles.js");
+var styles_3 = require("./components/preview-panel/styles.js");
+//TODO Remover e adicionar apenas uma prop de passar um custom styled pra dentro do modal
+var GlobalStyles = (0, styled_components_1.createGlobalStyle)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  ", "\n  \n  @media (max-width: 1024px) {\n    .ReactModal__Content {\n      max-width: 95vw !important;\n      max-height: 95vh !important;\n      border-radius: 1rem !important;\n    }\n    \n    .ReactModal__Overlay {\n      border-radius: 1rem !important;\n    }\n  }\n  \n  @media (max-width: 768px) {\n    .ReactModal__Content {\n      max-width: 100vw !important;\n      max-height: 100vh !important;\n      border-radius: 0 !important;\n      margin: 0 !important;\n    }\n    \n    .ReactModal__Overlay {\n      border-radius: 0 !important;\n    }\n  }\n"], ["\n  ", "\n  ", "\n  \n  @media (max-width: 1024px) {\n    .ReactModal__Content {\n      max-width: 95vw !important;\n      max-height: 95vh !important;\n      border-radius: 1rem !important;\n    }\n    \n    .ReactModal__Overlay {\n      border-radius: 1rem !important;\n    }\n  }\n  \n  @media (max-width: 768px) {\n    .ReactModal__Content {\n      max-width: 100vw !important;\n      max-height: 100vh !important;\n      border-radius: 0 !important;\n      margin: 0 !important;\n    }\n    \n    .ReactModal__Overlay {\n      border-radius: 0 !important;\n    }\n  }\n"])), styles_2.cropInterfaceStyles, styles_3.previewPanelStyles);
+function CropImage(_a) {
+    var file = _a.file, setFile = _a.setFile, onApplyCrop = _a.onApplyCrop;
+    var handleCancel = function () {
+        setFile(null);
+    };
+    var handleApplyCrop = function (croppedFile) {
+        if (onApplyCrop) {
+            onApplyCrop(croppedFile);
+        }
+        setFile(null);
+    };
+    return ((0, jsx_runtime_1.jsxs)(ui_1.Modal, { hideCloseButton: true, stylesContent: styles_1.modalStyles.content, styles: styles_1.modalStyles.modal, open: !!file, onClose: handleCancel, children: [(0, jsx_runtime_1.jsx)(GlobalStyles, {}), (0, jsx_runtime_1.jsx)(crop_interface_1.CropInterface, { file: file, onCancel: handleCancel, onError: function () { }, onApplyCrop: handleApplyCrop })] }));
+}
+var templateObject_1;
+//# sourceMappingURL=index.js.map

package/dist/ui/components/form/input-file/input-crop-image/crop-image/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../src/ui/components/form/input-file/input-crop-image/crop-image/index.tsx"],"names":[],"mappings":";;;;;;AA6CA,8BAwBC;;AArED,2BAA4C;AAC5C,uDAAqD;AAErD,mCAAsC;AACtC,8DAA2D;AAC3D,6DAAwE;AACxE,4DAAsE;AAEtE,yFAAyF;AACzF,IAAM,YAAY,OAAG,qCAAiB,ooBAAA,MAClC,EAAmB,MACnB,EAAkB,gjBA0BrB,KA3BG,4BAAmB,EACnB,2BAAkB,CA0BrB,CAAA;AAQD,SAAgB,SAAS,CAAC,EAA8C;QAA5C,IAAI,UAAA,EAAE,OAAO,aAAA,EAAE,WAAW,iBAAA;IACpD,IAAM,YAAY,GAAG;QACnB,OAAO,CAAC,IAAI,CAAC,CAAA;IACf,CAAC,CAAA;IAED,IAAM,eAAe,GAAG,UAAC,WAA2B;QAClD,IAAI,WAAW,EAAE,CAAC;YAChB,WAAW,CAAC,WAAW,CAAC,CAAA;QAC1B,CAAC;QACD,OAAO,CAAC,IAAI,CAAC,CAAA;IACf,CAAC,CAAA;IAED,OAAO,CACL,wBAAC,UAAK,IACJ,eAAe,QACf,aAAa,EAAE,oBAAW,CAAC,OAAO,EAClC,MAAM,EAAE,oBAAW,CAAC,KAAK,EACzB,IAAI,EAAE,CAAC,CAAC,IAAI,EACZ,OAAO,EAAE,YAAY,aAErB,uBAAC,YAAY,KAAG,EAChB,uBAAC,8BAAa,IAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,YAAY,EAAE,OAAO,EAAE,cAAO,CAAC,EAAE,WAAW,EAAE,eAAe,GAAI,IAChG,CACT,CAAA;AACH,CAAC"}

package/dist/ui/components/form/input-file/input-crop-image/crop-image/shared/interfaces.d.ts ADDED Viewed

@@ -0,0 +1,6 @@
+export interface CropArea {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}

package/dist/ui/components/form/input-file/input-crop-image/crop-image/shared/interfaces.js ADDED Viewed

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=interfaces.js.map

package/dist/ui/components/form/input-file/input-crop-image/crop-image/shared/interfaces.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../../../../../../src/ui/components/form/input-file/input-crop-image/crop-image/shared/interfaces.ts"],"names":[],"mappings":""}

package/dist/ui/components/form/input-file/input-crop-image/crop-image/styles.d.ts ADDED Viewed

@@ -0,0 +1,5 @@
+import { CSSProperties } from 'styled-components';
+export declare const modalStyles: {
+    content: CSSProperties;
+    modal: CSSProperties;
+};

package/dist/ui/components/form/input-file/input-crop-image/crop-image/styles.js ADDED Viewed

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.modalStyles = void 0;
+exports.modalStyles = {
+    content: {
+        maxWidth: 'fit-content',
+        maxHeight: 'fit-content',
+        padding: 0,
+        margin: 'auto',
+        borderRadius: '1.5rem',
+    },
+    modal: {
+        maxWidth: 'fit-content',
+        maxHeight: 'auto',
+        background: 'rgba(0, 0, 0, 0.5)',
+        width: 'calc(100vw - 20px)',
+        borderRadius: '1.5rem',
+        padding: '0',
+    },
+};
+//# sourceMappingURL=styles.js.map

package/dist/ui/components/form/input-file/input-crop-image/crop-image/styles.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../../../src/ui/components/form/input-file/input-crop-image/crop-image/styles.ts"],"names":[],"mappings":";;;AAEa,QAAA,WAAW,GAAqD;IAC3E,OAAO,EAAE;QACP,QAAQ,EAAE,aAAa;QACvB,SAAS,EAAE,aAAa;QACxB,OAAO,EAAE,CAAC;QACV,MAAM,EAAE,MAAM;QACd,YAAY,EAAE,QAAQ;KACvB;IACD,KAAK,EAAE;QACL,QAAQ,EAAE,aAAa;QACvB,SAAS,EAAE,MAAM;QACjB,UAAU,EAAE,oBAAoB;QAChC,KAAK,EAAE,oBAAoB;QAC3B,YAAY,EAAE,QAAQ;QACtB,OAAO,EAAE,GAAG;KACb;CACF,CAAA"}

package/dist/ui/components/form/input-file/input-crop-image/crop-image/utils/crop-utils.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+import { CropArea } from '../shared/interfaces.js';
+import { FileSystemType } from '../../../../../../../ui/index.js';
+export declare function getCropPreview(file: FileSystemType, cropArea: CropArea, maxSize?: number): Promise<string>;
+export declare function applyCrop(file: FileSystemType, cropArea: CropArea, format?: 'png' | 'jpg' | 'webp', quality?: number): Promise<FileSystemType>;