@beweco/aurora-ui 0.0.8 → 0.0.10

package/dist/index.esm.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { Button, cn, ListboxItem, Popover, PopoverTrigger, Tooltip, PopoverContent, Listbox, Accordion, AccordionItem, ListboxSection, Spacer, Avatar, Card, CardBody, CardFooter, Input } from '@heroui/react';
-import React, { useEffect, useState, createElement, useCallback, useRef, createContext, useContext } from 'react';
+import { Button, cn, ListboxItem, Popover, PopoverTrigger, Tooltip, PopoverContent, Listbox, Accordion, AccordionItem, ListboxSection, Spacer, Avatar, Card, CardBody, CardFooter, Input, Modal, ModalContent, ModalHeader, ModalBody, Slider, ModalFooter } from '@heroui/react';
+import React, { useEffect, useState, createElement, useCallback, useRef, useMemo, createContext, useContext } from 'react';
 import { Icon } from '@iconify/react';
 import { useTheme } from '@heroui/use-theme';
 
@@ -292,13 +292,25 @@ var countries = [
     { code: "+971", name: "UAE", flag: "🇦🇪" },
 ];
 var uniqueCountries = Array.from(new Map(countries.map(function (item) { return [item.code + item.name, item]; })).values());
+var defaultTranslations$1 = {
+    label: "Teléfono",
+    placeholder: "Número de teléfono",
+    searchPlaceholder: "Buscar país...",
+    selectCountryAriaLabel: "Seleccionar país",
+    expandListAriaLabel: "Desplegar lista de países",
+    noCountriesFound: "No se encontraron países",
+};
 var Phone = function (_a) {
-    var _b = _a.label, label = _b === void 0 ? "Teléfono" : _b, _c = _a.required, required = _c === void 0 ? false : _c, _d = _a.error, error = _d === void 0 ? false : _d, _e = _a.errorText, errorText = _e === void 0 ? "" : _e, _f = _a.value, value = _f === void 0 ? "" : _f, onChange = _a.onChange, _g = _a.disabled, disabled = _g === void 0 ? false : _g, _h = _a.name, name = _h === void 0 ? "phone" : _h;
+    var label = _a.label, _b = _a.required, required = _b === void 0 ? false : _b, _c = _a.error, error = _c === void 0 ? false : _c, _d = _a.errorText, errorText = _d === void 0 ? "" : _d, _e = _a.value, value = _e === void 0 ? "" : _e, onChange = _a.onChange, onBlur = _a.onBlur, _f = _a.disabled, disabled = _f === void 0 ? false : _f, _g = _a.name, name = _g === void 0 ? "phone" : _g, _h = _a.translations, translations = _h === void 0 ? {} : _h;
     var _j = useState(false), isDropdownOpen = _j[0], setIsDropdownOpen = _j[1];
     var _k = useState(uniqueCountries[0]), selectedCountry = _k[0], setSelectedCountry = _k[1];
     var _l = useState(""), inputValue = _l[0], setInputValue = _l[1];
     var dropdownRef = useRef(null);
     var _m = useState(uniqueCountries), filteredCountries = _m[0], setFilteredCountries = _m[1];
+    // Combinar traducciones por defecto con las proporcionadas
+    var t = __assign(__assign({}, defaultTranslations$1), translations);
+    // Usar la etiqueta de las traducciones si no se proporciona label explícitamente
+    var finalLabel = label || t.label;
     // Sincroniza valor externo
     useEffect(function () {
         if (value) {
@@ -349,11 +361,11 @@ var Phone = function (_a) {
             onChange(selectedCountry.code + val);
         }
     };
-    return (jsxs("div", { className: "flex flex-col gap-1 w-full relative", children: [label && (jsxs("label", { htmlFor: "phone-input-".concat(name), className: "text-sm font-medium text-gray-700 dark:text-gray-200 mb-1", children: [label, " ", required && jsx("span", { className: "text-pink-600", children: "*" })] })), jsxs("div", { className: "flex items-center w-full min-h-[56px] bg-white dark:bg-gray-900 transition-colors shadow-sm border border-[#E4E4E7] dark:border-gray-700 rounded-2xl focus-within:border-blue-500 dark:focus-within:border-blue-400 ".concat(error
+    return (jsxs("div", { className: "flex flex-col gap-1 w-full relative", children: [finalLabel && (jsxs("label", { htmlFor: "phone-input-".concat(name), className: "text-sm font-medium text-gray-700 dark:text-gray-200 mb-1", children: [finalLabel, " ", required && jsx("span", { className: "text-pink-600", children: "*" })] })), jsxs("div", { className: "flex items-center w-full min-h-[56px] bg-white dark:bg-gray-900 transition-colors shadow-sm border border-[#E4E4E7] dark:border-gray-700 rounded-2xl focus-within:border-blue-500 dark:focus-within:border-blue-400 ".concat(error
                     ? "border-pink-500 dark:border-pink-600"
                     : "border-[#E4E4E7] dark:border-gray-700").concat(disabled ? " bg-gray-100 dark:bg-gray-800 opacity-60" : ""), children: [jsxs("div", { className: "relative ml-2", ref: dropdownRef, children: [jsxs("button", { type: "button", 
                                 ///bg-gray-100
-                                className: "flex items-center gap-1 px-4 h-10 rounded-xl  dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none transition-colors", onClick: function () { return setIsDropdownOpen(function (v) { return !v; }); }, disabled: disabled, tabIndex: 0, "aria-label": "Seleccionar pa\u00EDs", children: [jsx("span", { className: "text-lg", children: selectedCountry.flag }), jsx("span", { className: "text-xs text-gray-700 dark:text-gray-200", children: selectedCountry.code }), jsxs("svg", { className: "w-4 h-4 text-gray-400 dark:text-gray-300 ml-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", role: "img", "aria-label": "Desplegar lista de pa\u00EDses", children: [jsx("title", { children: "Desplegar lista de pa\u00EDses" }), jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" })] })] }), isDropdownOpen && (jsxs("div", { className: "absolute z-30 mt-2 w-60 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg", children: [jsx("div", { className: "p-2", children: jsx("input", { type: "text", className: "w-full px-3 py-2 text-sm bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 text-gray-900 dark:text-gray-100 rounded-lg focus:outline-none focus:border-blue-500 dark:focus:border-blue-400", placeholder: "Buscar pa\u00EDs...", onChange: function (e) {
+                                className: "flex items-center gap-1 px-4 h-10 rounded-xl  dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none transition-colors", onClick: function () { return setIsDropdownOpen(function (v) { return !v; }); }, disabled: disabled, tabIndex: 0, "aria-label": t.selectCountryAriaLabel, children: [jsx("span", { className: "text-lg", children: selectedCountry.flag }), jsx("span", { className: "text-xs text-gray-700 dark:text-gray-200", children: selectedCountry.code }), jsxs("svg", { className: "w-4 h-4 text-gray-400 dark:text-gray-300 ml-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", role: "img", "aria-label": t.expandListAriaLabel, children: [jsx("title", { children: t.expandListAriaLabel }), jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" })] })] }), isDropdownOpen && (jsxs("div", { className: "absolute z-30 mt-2 w-60 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg", children: [jsx("div", { className: "p-2", children: jsx("input", { type: "text", className: "w-full px-3 py-2 text-sm bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 text-gray-900 dark:text-gray-100 rounded-lg focus:outline-none focus:border-blue-500 dark:focus:border-blue-400", placeholder: t.searchPlaceholder, onChange: function (e) {
                                                 var searchTerm = e.target.value.toLowerCase();
                                                 var filtered = uniqueCountries.filter(function (country) {
                                                     return country.name.toLowerCase().includes(searchTerm) ||
@@ -362,8 +374,505 @@ var Phone = function (_a) {
                                                 setFilteredCountries(filtered);
                                             } }) }), jsx("div", { className: "max-h-60 overflow-y-auto", children: filteredCountries.length > 0 ? (filteredCountries.map(function (country) { return (jsxs("button", { type: "button", className: "flex items-center w-full px-4 py-2.5 text-sm hover:bg-gray-50 dark:hover:bg-gray-800 ".concat(country.code === selectedCountry.code
                                                 ? "bg-blue-50 dark:bg-blue-900"
-                                                : ""), onClick: function () { return handleCountrySelect(country); }, children: [jsx("span", { className: "mr-3 text-lg", children: country.flag }), jsx("span", { className: "flex-1 text-left dark:text-gray-100", children: country.name }), jsx("span", { className: "text-xs text-gray-500 dark:text-gray-400", children: country.code })] }, country.code)); })) : (jsx("div", { className: "px-4 py-2 text-sm text-gray-500 dark:text-gray-400", children: "No se encontraron pa\u00EDses" })) })] }))] }), jsx(Input, { type: "tel", className: "flex-1 border-none bg-transparent text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 h-10 px-2", placeholder: "N\u00FAmero de tel\u00E9fono", value: inputValue, onChange: handleInputChange, disabled: disabled, name: name, autoComplete: "tel", id: "phone-input-".concat(name) })] }), error && errorText && (jsx("span", { className: "text-xs text-pink-600 dark:text-pink-400 mt-1", children: errorText }))] }));
+                                                : ""), onClick: function () { return handleCountrySelect(country); }, children: [jsx("span", { className: "mr-3 text-lg", children: country.flag }), jsx("span", { className: "flex-1 text-left dark:text-gray-100", children: country.name }), jsx("span", { className: "text-xs text-gray-500 dark:text-gray-400", children: country.code })] }, country.code)); })) : (jsx("div", { className: "px-4 py-2 text-sm text-gray-500 dark:text-gray-400", children: t.noCountriesFound })) })] }))] }), jsx(Input, { type: "tel", className: "flex-1 border-none bg-transparent text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 h-10 px-2", placeholder: t.placeholder, value: inputValue, onChange: handleInputChange, onBlur: onBlur, disabled: disabled, name: name, autoComplete: "tel", id: "phone-input-".concat(name) })] }), error && errorText && (jsx("span", { className: "text-xs text-pink-600 dark:text-pink-400 mt-1", children: errorText }))] }));
+};
+
+// Traducciones por defecto en español
+var defaultTranslations = {
+    uploadText: "Da clic y selecciona tus archivos",
+    subText: "",
+    dragText: "Suelta el archivo aquí",
+    multipleFilesError: "Solo puedes subir un archivo",
+    maxFilesError: "Puedes subir máximo {maxFiles} archivos",
+    invalidFileTypeError: "Solo se aceptan archivos de tipo: {acceptedTypes}",
+    maxFileSizeError: "El archivo excede el tamaño máximo permitido de {maxSize}",
+    removeFileAriaLabel: "Remover archivo",
+    uploadAreaAriaLabel: "Área de carga de archivos",
+    cropModalTitle: "Recortar imagen",
+    cropSaveButton: "Guardar",
+    cropCancelButton: "Cancelar",
+    cropZoomLabel: "Zoom",
+    cropInstructions: "Arrastra para mover la imagen y usa el zoom para ajustar el tamaño",
+    cropBackgroundLabel: "Color de fondo",
+    cropBackgroundWhite: "Blanco",
+    cropBackgroundBlack: "Negro",
+    cropBackgroundTransparent: "Transparente",
+};
+/**
+ * Formatea el tipo de archivo para mostrar
+ */
+var formatFileType = function (type) {
+    var _a;
+    if (type.startsWith(".")) {
+        return type.toUpperCase();
+    }
+    if (type.includes("/")) {
+        var parts = type.split("/");
+        return ((_a = parts[1]) === null || _a === void 0 ? void 0 : _a.toUpperCase()) || type;
+    }
+    return type.toUpperCase();
+};
+/**
+ * Formatea el tamaño del archivo de forma legible
+ */
+var formatFileSize = function (bytes) {
+    if (bytes === 0) {
+        return "0 Bytes";
+    }
+    var k = 1024;
+    var sizes = ["Bytes", "KB", "MB", "GB"];
+    var i = Math.floor(Math.log(bytes) / Math.log(k));
+    return "".concat(Math.round(bytes / Math.pow(k, i)), " ").concat(sizes[i]);
+};
+/**
+ * Componente de recorte de imagen usando Canvas API
+ */
+var ImageCropModal = function (_a) {
+    var isOpen = _a.isOpen, imageUrl = _a.imageUrl, targetWidth = _a.targetWidth, targetHeight = _a.targetHeight, onSave = _a.onSave, onCancel = _a.onCancel, translations = _a.translations;
+    var canvasRef = useRef(null);
+    var _b = useState(null), imageElement = _b[0], setImageElement = _b[1];
+    var _c = useState(0), zoomValue = _c[0], setZoomValue = _c[1]; // Valor del slider de -1 a 1
+    var _d = useState({ x: 0, y: 0 }), position = _d[0], setPosition = _d[1];
+    var _e = useState(false), isDragging = _e[0], setIsDragging = _e[1];
+    var _f = useState({ x: 0, y: 0 }), dragStart = _f[0], setDragStart = _f[1];
+    var _g = useState(1), baseScale = _g[0], setBaseScale = _g[1]; // Escala base inicial
+    var _h = useState({ width: 400, height: 300 }), canvasSize = _h[0], setCanvasSize = _h[1];
+    var _j = useState("white"), backgroundColor = _j[0], setBackgroundColor = _j[1];
+    // Función para convertir el valor del zoom slider a escala real
+    var getScaleFromZoom = function (zoomValue) {
+        if (zoomValue === 0) {
+            return baseScale;
+        }
+        if (zoomValue > 0) {
+            // Zoom in: de baseScale a baseScale * 3
+            return baseScale + baseScale * 2 * zoomValue;
+        }
+        // Zoom out: de baseScale * 0.3 a baseScale
+        return baseScale + baseScale * 0.7 * zoomValue;
+    };
+    var currentScale = getScaleFromZoom(zoomValue);
+    // Cargar imagen cuando se abre el modal
+    useEffect(function () {
+        if (isOpen && imageUrl) {
+            var img_1 = new Image();
+            img_1.onload = function () {
+                setImageElement(img_1);
+                // Calcular escala inicial para que la imagen quepa en el área de crop
+                var scaleX = targetWidth / img_1.width;
+                var scaleY = targetHeight / img_1.height;
+                var initialScale = Math.max(scaleX, scaleY);
+                setBaseScale(initialScale);
+                setZoomValue(0); // Empezar en el centro
+                setPosition({ x: 0, y: 0 });
+                setBackgroundColor("white"); // Reset color de fondo
+            };
+            img_1.src = imageUrl;
+        }
+    }, [isOpen, imageUrl, targetWidth, targetHeight]);
+    // Dibujar en el canvas
+    useEffect(function () {
+        if (!(imageElement && canvasRef.current)) {
+            return;
+        }
+        var canvas = canvasRef.current;
+        var ctx = canvas.getContext("2d");
+        if (!ctx) {
+            return;
+        }
+        // Limpiar canvas
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        // Dibujar fondo gris del canvas
+        ctx.fillStyle = "#f3f4f6";
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+        // Calcular posición y tamaño de la imagen
+        var imgWidth = imageElement.width * currentScale;
+        var imgHeight = imageElement.height * currentScale;
+        var imgX = (canvas.width - imgWidth) / 2 + position.x;
+        var imgY = (canvas.height - imgHeight) / 2 + position.y;
+        // Dibujar imagen
+        ctx.drawImage(imageElement, imgX, imgY, imgWidth, imgHeight);
+        // Dibujar overlay para mostrar área de recorte
+        ctx.fillStyle = "rgba(0, 0, 0, 0.5)";
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+        // Limpiar área de recorte (centro)
+        var cropX = (canvas.width - targetWidth) / 2;
+        var cropY = (canvas.height - targetHeight) / 2;
+        ctx.clearRect(cropX, cropY, targetWidth, targetHeight);
+        // Dibujar color de fondo del área de recorte
+        if (backgroundColor !== "transparent") {
+            ctx.fillStyle = backgroundColor === "white" ? "#ffffff" : "#000000";
+            ctx.fillRect(cropX, cropY, targetWidth, targetHeight);
+        }
+        // Redibujar imagen solo en el área de recorte
+        ctx.save();
+        ctx.beginPath();
+        ctx.rect(cropX, cropY, targetWidth, targetHeight);
+        ctx.clip();
+        ctx.drawImage(imageElement, imgX, imgY, imgWidth, imgHeight);
+        ctx.restore();
+        // Dibujar borde del área de recorte
+        ctx.strokeStyle = "#3b82f6";
+        ctx.lineWidth = 2;
+        ctx.strokeRect(cropX, cropY, targetWidth, targetHeight);
+    }, [
+        imageElement,
+        currentScale,
+        position,
+        targetWidth,
+        targetHeight,
+        backgroundColor,
+    ]);
+    var handleMouseDown = function (e) {
+        var _a;
+        e.preventDefault();
+        setIsDragging(true);
+        var rect = (_a = canvasRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        if (rect) {
+            setDragStart({
+                x: e.clientX - rect.left - position.x,
+                y: e.clientY - rect.top - position.y,
+            });
+        }
+    };
+    var handleMouseMove = function (e) {
+        var _a;
+        if (!isDragging) {
+            return;
+        }
+        e.preventDefault();
+        var rect = (_a = canvasRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        if (rect) {
+            setPosition({
+                x: e.clientX - rect.left - dragStart.x,
+                y: e.clientY - rect.top - dragStart.y,
+            });
+        }
+    };
+    var handleMouseUp = function () {
+        setIsDragging(false);
+    };
+    // Eventos táctiles para dispositivos móviles
+    var handleTouchStart = function (e) {
+        var _a;
+        e.preventDefault();
+        if (e.touches.length === 1) {
+            setIsDragging(true);
+            var rect = (_a = canvasRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+            if (rect) {
+                var touch = e.touches[0];
+                setDragStart({
+                    x: touch.clientX - rect.left - position.x,
+                    y: touch.clientY - rect.top - position.y,
+                });
+            }
+        }
+    };
+    var handleTouchMove = function (e) {
+        var _a;
+        if (!isDragging || e.touches.length !== 1) {
+            return;
+        }
+        e.preventDefault();
+        var rect = (_a = canvasRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        if (rect) {
+            var touch = e.touches[0];
+            setPosition({
+                x: touch.clientX - rect.left - dragStart.x,
+                y: touch.clientY - rect.top - dragStart.y,
+            });
+        }
+    };
+    var handleTouchEnd = function () {
+        setIsDragging(false);
+    };
+    var handleSave = function () {
+        if (!(imageElement && canvasRef.current)) {
+            return;
+        }
+        // Crear canvas temporal para el recorte
+        var tempCanvas = document.createElement("canvas");
+        tempCanvas.width = targetWidth;
+        tempCanvas.height = targetHeight;
+        var tempCtx = tempCanvas.getContext("2d");
+        if (!tempCtx) {
+            return;
+        }
+        // Dibujar color de fondo si no es transparente
+        if (backgroundColor !== "transparent") {
+            tempCtx.fillStyle = backgroundColor === "white" ? "#ffffff" : "#000000";
+            tempCtx.fillRect(0, 0, targetWidth, targetHeight);
+        }
+        // Calcular parámetros de recorte
+        var canvas = canvasRef.current;
+        var imgWidth = imageElement.width * currentScale;
+        var imgHeight = imageElement.height * currentScale;
+        var imgX = (canvas.width - imgWidth) / 2 + position.x;
+        var imgY = (canvas.height - imgHeight) / 2 + position.y;
+        var cropX = (canvas.width - targetWidth) / 2;
+        var cropY = (canvas.height - targetHeight) / 2;
+        // Calcular área fuente en la imagen original
+        var sourceX = (cropX - imgX) / currentScale;
+        var sourceY = (cropY - imgY) / currentScale;
+        var sourceWidth = targetWidth / currentScale;
+        var sourceHeight = targetHeight / currentScale;
+        // Dibujar recorte sobre el fondo
+        tempCtx.drawImage(imageElement, sourceX, sourceY, sourceWidth, sourceHeight, 0, 0, targetWidth, targetHeight);
+        // Convertir a blob y crear archivo
+        var fileType = backgroundColor === "transparent" ? "image/png" : "image/png";
+        tempCanvas.toBlob(function (blob) {
+            if (blob) {
+                var timestamp = new Date().getTime();
+                var file = new File([blob], "cropped-image-".concat(timestamp, ".png"), {
+                    type: fileType,
+                });
+                onSave(file, imageElement.src);
+            }
+        }, fileType);
+    };
+    // Calcular dimensiones responsive del canvas
+    var updateCanvasSize = useCallback(function () {
+        var minCanvasWidth = Math.min(350, window.innerWidth - 40);
+        var minCanvasHeight = Math.min(250, window.innerHeight - 300);
+        var newCanvasWidth = Math.max(minCanvasWidth, targetWidth + 60);
+        var newCanvasHeight = Math.max(minCanvasHeight, targetHeight + 60);
+        setCanvasSize({ width: newCanvasWidth, height: newCanvasHeight });
+    }, [targetWidth, targetHeight]);
+    // Actualizar tamaño del canvas al cambiar el tamaño de la ventana
+    useEffect(function () {
+        if (!isOpen) {
+            return;
+        }
+        updateCanvasSize();
+        var handleResize = function () {
+            updateCanvasSize();
+        };
+        window.addEventListener("resize", handleResize);
+        return function () {
+            window.removeEventListener("resize", handleResize);
+        };
+    }, [isOpen, updateCanvasSize]);
+    return (jsx(Modal, { isOpen: isOpen, onClose: onCancel, size: "5xl", className: "sm:max-w-4xl", scrollBehavior: "inside", backdrop: "blur", classNames: {
+            backdrop: "bg-black/80",
+            wrapper: "p-0 sm:p-4",
+            base: "m-0 sm:m-4 max-h-screen sm:max-h-[90vh] w-full sm:w-auto",
+        }, children: jsxs(ModalContent, { className: "m-0 sm:m-0 h-screen sm:h-auto sm:max-h-[90vh] sm:rounded-lg", children: [jsxs(ModalHeader, { className: "flex flex-col gap-1 px-4 sm:px-6", children: [translations.cropModalTitle, jsx("p", { className: "text-xs sm:text-sm text-gray-500 font-normal", children: translations.cropInstructions })] }), jsx(ModalBody, { className: "px-4 sm:px-6 py-4", children: jsxs("div", { className: "flex flex-col gap-4", children: [jsx("div", { className: "flex justify-center overflow-hidden", children: jsx("canvas", { ref: canvasRef, width: canvasSize.width, height: canvasSize.height, className: "border border-gray-300 cursor-move select-none max-w-full max-h-[50vh] sm:max-h-[60vh]", onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd, style: { touchAction: "none" } }) }), jsxs("div", { className: "flex flex-col gap-2", children: [jsx("label", { htmlFor: "zoom-slider", className: "text-sm font-medium", children: translations.cropZoomLabel }), jsxs("div", { className: "flex items-center gap-2 sm:gap-3 w-full", children: [jsx("span", { className: "text-xs text-gray-500 min-w-[15px] sm:min-w-[20px]", children: "-" }), jsx(Slider, { id: "zoom-slider", size: "sm", step: 0.1, minValue: -1, maxValue: 1, value: zoomValue, onChange: function (value) { return setZoomValue(value); }, className: "flex-1", marks: [
+                                                    { value: -1, label: "Out" },
+                                                    { value: 0, label: "0" },
+                                                    { value: 1, label: "In" },
+                                                ] }), jsx("span", { className: "text-xs text-gray-500 min-w-[15px] sm:min-w-[20px]", children: "+" })] })] }), jsxs("div", { className: "flex flex-col gap-2", children: [jsx("div", { className: "text-sm font-medium", children: translations.cropBackgroundLabel }), jsxs("div", { className: "flex flex-wrap gap-3 sm:gap-4", children: [jsxs("label", { className: "flex items-center gap-2 cursor-pointer", children: [jsx("input", { type: "radio", name: "background-color", value: "white", checked: backgroundColor === "white", onChange: function (e) {
+                                                            return setBackgroundColor(e.target.value);
+                                                        }, className: "text-blue-600 focus:ring-blue-500" }), jsx("div", { className: "w-4 h-4 bg-white border border-gray-300 rounded" }), jsx("span", { className: "text-sm", children: translations.cropBackgroundWhite })] }), jsxs("label", { className: "flex items-center gap-2 cursor-pointer", children: [jsx("input", { type: "radio", name: "background-color", value: "black", checked: backgroundColor === "black", onChange: function (e) {
+                                                            return setBackgroundColor(e.target.value);
+                                                        }, className: "text-blue-600 focus:ring-blue-500" }), jsx("div", { className: "w-4 h-4 bg-black border border-gray-300 rounded" }), jsx("span", { className: "text-sm", children: translations.cropBackgroundBlack })] }), jsxs("label", { className: "flex items-center gap-2 cursor-pointer", children: [jsx("input", { type: "radio", name: "background-color", value: "transparent", checked: backgroundColor === "transparent", onChange: function (e) {
+                                                            return setBackgroundColor(e.target.value);
+                                                        }, className: "text-blue-600 focus:ring-blue-500" }), jsx("div", { className: "w-4 h-4 bg-gray-200 border border-gray-300 rounded", style: {
+                                                            backgroundImage: "linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%)",
+                                                            backgroundSize: "8px 8px",
+                                                            backgroundPosition: "0 0, 0 4px, 4px -4px, -4px 0px",
+                                                        } }), jsx("span", { className: "text-sm", children: translations.cropBackgroundTransparent })] })] })] })] }) }), jsxs(ModalFooter, { className: "flex flex-col-reverse sm:flex-row gap-2 px-4 sm:px-6", children: [jsx(Button, { color: "danger", variant: "light", onPress: onCancel, className: "w-full sm:w-auto", children: translations.cropCancelButton }), jsx(Button, { color: "primary", onPress: handleSave, className: "w-full sm:w-auto", children: translations.cropSaveButton })] })] }) }));
+};
+/**
+ * Componente de previsualización de archivo
+ */
+var FilePreview = function (_a) {
+    var file = _a.file, onRemove = _a.onRemove, removeAriaLabel = _a.removeAriaLabel;
+    var _b = useState(""), previewUrl = _b[0], setPreviewUrl = _b[1];
+    useEffect(function () {
+        if (file === null || file === void 0 ? void 0 : file.type.startsWith("image/")) {
+            var url_1 = URL.createObjectURL(file);
+            setPreviewUrl(url_1);
+            return function () { return URL.revokeObjectURL(url_1); };
+        }
+    }, [file]);
+    if (!(file === null || file === void 0 ? void 0 : file.type.startsWith("image/"))) {
+        return null;
+    }
+    return (jsxs("div", { className: "absolute inset-0  overflow-hidden z-10", children: [jsx("img", { src: previewUrl, alt: file.name, className: "w-full h-full object-cover" }), jsx(Button, { isIconOnly: true, size: "sm", color: "danger", variant: "solid", className: "absolute top-2 right-2 sm:top-3 sm:right-3 z-20 bg-red-100 hover:bg-red-200 text-red-600 min-w-8 h-8 sm:min-w-10 sm:h-10", onPress: onRemove, "aria-label": removeAriaLabel, children: jsx(IconComponent, { icon: "heroicons:trash", size: "sm" }) })] }));
+};
+/**
+ * Componente UploadDocument basado en Hero UI con funcionalidad mejorada
+ *
+ * @example
+ * ```tsx
+ * <UploadDocument
+ *   onUpload={(files) => console.log(files)}
+ *   acceptedFiles="image/*,.pdf"
+ *   multiple={false}
+ *   translations={{
+ *     uploadText: "Upload your files",
+ *     dragText: "Drop files here"
+ *   }}
+ * />
+ * ```
+ */
+var UploadFile = function (_a) {
+    var text = _a.text, textColor = _a.textColor, subText = _a.subText, 
+    // borderColor, // TODO: Implementar colores personalizados
+    iconColor = _a.iconColor, 
+    // backgroundColor, // TODO: Implementar colores personalizados
+    _b = _a.width, 
+    // backgroundColor, // TODO: Implementar colores personalizados
+    width = _b === void 0 ? "100%" : _b, _c = _a.height, height = _c === void 0 ? "auto" : _c, _d = _a.multiple, multiple = _d === void 0 ? false : _d, _e = _a.maxFiles, maxFiles = _e === void 0 ? 1 : _e, maxFileSize = _a.maxFileSize, _f = _a.acceptedFiles, acceptedFiles = _f === void 0 ? ".pdf" : _f, _g = _a.icon, icon = _g === void 0 ? "heroicons:arrow-up-on-square" : _g, onUpload = _a.onUpload, onError = _a.onError, _h = _a.error, error = _h === void 0 ? false : _h, _j = _a.success, success = _j === void 0 ? false : _j, _k = _a.disabled, disabled = _k === void 0 ? false : _k, errorText = _a.errorText, cropConfig = _a.cropConfig, image = _a.image, _l = _a.className, className = _l === void 0 ? "" : _l, _m = _a.translations, translations = _m === void 0 ? {} : _m;
+    var inputRef = useRef(null);
+    var uploadImageRef = useRef(image || null);
+    var _o = useState(false), isDragging = _o[0], setIsDragging = _o[1];
+    // Estados para el modal de crop
+    var _p = useState(false), showCropModal = _p[0], setShowCropModal = _p[1];
+    var _q = useState(""), selectedImageUrl = _q[0], setSelectedImageUrl = _q[1];
+    var _r = useState(null); _r[0]; var setOriginalFile = _r[1];
+    // Combinar traducciones por defecto con las proporcionadas
+    var t = useMemo(function () { return (__assign(__assign({}, defaultTranslations), translations)); }, [translations]);
+    // Actualizar texto si se pasa como prop (retrocompatibilidad)
+    var finalText = text || t.uploadText;
+    var finalSubText = subText || t.subText;
+    var handleClick = function () {
+        var _a;
+        if (!(disabled || uploadImageRef.current)) {
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
+        }
+    };
+    var validateFiles = useCallback(function (files) {
+        var filesArray = Array.from(files);
+        if (!multiple && filesArray.length > 1) {
+            onError === null || onError === void 0 ? void 0 : onError(t.multipleFilesError);
+            return [];
+        }
+        if (filesArray.length > maxFiles) {
+            onError === null || onError === void 0 ? void 0 : onError(t.maxFilesError.replace("{maxFiles}", maxFiles.toString()));
+            return [];
+        }
+        // Validar tamaño de archivo
+        if (maxFileSize) {
+            var oversizedFiles = filesArray.filter(function (file) { return file.size > maxFileSize; });
+            if (oversizedFiles.length > 0) {
+                var maxSizeFormatted = formatFileSize(maxFileSize);
+                onError === null || onError === void 0 ? void 0 : onError(t.maxFileSizeError.replace("{maxSize}", maxSizeFormatted));
+                return [];
+            }
+        }
+        // Validar tipos de archivo
+        var acceptedExtensions = Array.isArray(acceptedFiles)
+            ? acceptedFiles.map(function (ext) { return ext.trim().toLowerCase(); })
+            : acceptedFiles.split(",").map(function (ext) { return ext.trim().toLowerCase(); });
+        var validFiles = filesArray.filter(function (file) {
+            var _a;
+            if (acceptedFiles.includes("image/*") &&
+                file.type.startsWith("image/")) {
+                return true;
+            }
+            if (acceptedExtensions.some(function (ext) { return ext.includes("/"); })) {
+                return acceptedExtensions.some(function (type) { return file.type === type; });
+            }
+            var fileExtension = ".".concat((_a = file.name.split(".").pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase());
+            return acceptedExtensions.some(function (ext) { return ext === fileExtension || ext === "*"; });
+        });
+        if (validFiles.length === 0) {
+            var formattedTypes = acceptedExtensions
+                .map(formatFileType)
+                .join(", ");
+            onError === null || onError === void 0 ? void 0 : onError(t.invalidFileTypeError.replace("{acceptedTypes}", formattedTypes));
+            return [];
+        }
+        return validFiles;
+    }, [multiple, maxFiles, maxFileSize, acceptedFiles, t, onError]);
+    var handleFileUpload = useCallback(function (files) {
+        var validFiles = validateFiles(files);
+        if (validFiles.length > 0) {
+            var file_1 = validFiles[0];
+            // Si es imagen y hay configuración de crop, abrir modal
+            if (file_1.type.startsWith("image/") && cropConfig) {
+                var reader_1 = new FileReader();
+                reader_1.onload = function () {
+                    setSelectedImageUrl(reader_1.result);
+                    setOriginalFile(file_1);
+                    setShowCropModal(true);
+                };
+                reader_1.readAsDataURL(file_1);
+            }
+            else {
+                // Procesar directamente si no necesita crop
+                uploadImageRef.current = file_1;
+                onUpload(validFiles);
+            }
+        }
+    }, [onUpload, validateFiles, cropConfig]);
+    // Manejar guardado de imagen recortada
+    var handleCropSave = useCallback(function (croppedFile) {
+        uploadImageRef.current = croppedFile;
+        setShowCropModal(false);
+        setSelectedImageUrl("");
+        setOriginalFile(null);
+        onUpload([croppedFile]);
+    }, [onUpload]);
+    // Manejar cancelación de crop
+    var handleCropCancel = useCallback(function () {
+        setShowCropModal(false);
+        setSelectedImageUrl("");
+        setOriginalFile(null);
+    }, []);
+    var handleChange = function (event) {
+        var files = event.target.files;
+        if (files && files.length > 0) {
+            handleFileUpload(files);
+        }
+        // Limpiar el input
+        if (inputRef.current) {
+            inputRef.current.value = "";
+        }
+    };
+    var handleDragEnter = useCallback(function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        if (!disabled) {
+            setIsDragging(true);
+        }
+    }, [disabled]);
+    var handleDragLeave = useCallback(function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragging(false);
+    }, []);
+    var handleDragOver = useCallback(function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+    }, []);
+    var handleDrop = useCallback(function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragging(false);
+        if (disabled) {
+            return;
+        }
+        var droppedFiles = e.dataTransfer.files;
+        if (droppedFiles.length > 0) {
+            handleFileUpload(droppedFiles);
+        }
+    }, [disabled, handleFileUpload]);
+    var handleRemoveImage = function () {
+        uploadImageRef.current = null;
+        onUpload([]);
+    };
+    // Clases CSS dinámicas usando Tailwind
+    var containerClasses = "\n\t\trelative w-full border-2 border-dashed rounded-2xl p-2 sm:p-4 lg:p-4 transition-all duration-300\n\t\t".concat(width !== "100%" ? "w-[".concat(width, "]") : "w-full", "\n\t\t").concat(height !== "auto" ? "h-[".concat(height, "]") : "min-h-[150px] sm:min-h-[180px] lg:min-h-[200px]", "\n\t\t").concat(isDragging
+        ? "border-blue-500 bg-blue-50 dark:bg-blue-950"
+        : error
+            ? "border-red-500 bg-red-50 dark:bg-red-950"
+            : success
+                ? "border-green-500 bg-green-50 dark:bg-green-950"
+                : disabled
+                    ? "border-gray-300 bg-gray-100 dark:bg-gray-800"
+                    : "border-gray-300 hover:border-gray-400 bg-gray-50 dark:bg-gray-900", "\n\t\t").concat(!(disabled || uploadImageRef.current) ? "cursor-pointer" : "cursor-default", "\n\t\t").concat(className, "\n\t")
+        .trim()
+        .replace(/\s+/g, " ");
+    var textClasses = "\n\t\ttext-center mb-1 sm:mb-2 text-sm sm:text-base lg:text-lg font-medium\n\t\t".concat(disabled ? "text-gray-400" : textColor || "text-gray-700 dark:text-gray-200", "\n\t");
+    var subTextClasses = "\n\t\ttext-xs sm:text-sm text-center\n\t\t".concat(disabled ? "text-gray-400" : "text-gray-500 dark:text-gray-400", "\n\t");
+    return (jsxs("div", { className: "relative", children: [jsx(Card, { className: containerClasses, isPressable: !(disabled || uploadImageRef.current), onPress: handleClick, children: jsxs(CardBody, { className: "flex flex-col items-center justify-center gap-3 sm:gap-4 relative", onDragEnter: handleDragEnter, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, children: [uploadImageRef.current && (jsx(FilePreview, { file: uploadImageRef.current, onRemove: handleRemoveImage, removeAriaLabel: t.removeFileAriaLabel })), jsx("div", { className: uploadImageRef.current
+                                ? "opacity-0"
+                                : "opacity-100 transition-opacity", children: jsxs("div", { className: "flex flex-col items-center gap-3 sm:gap-4", children: [jsx(IconComponent, { icon: icon, size: "xl", className: "sm:text-4xl lg:text-5xl ".concat(disabled ? "text-gray-400" : iconColor || "text-primary") }), jsxs("div", { className: "space-y-1 sm:space-y-2 text-center px-2", children: [jsx("p", { className: textClasses, children: isDragging ? t.dragText : finalText }), finalSubText && !isDragging && (jsx("p", { className: subTextClasses, children: finalSubText }))] })] }) }), jsx("input", { ref: inputRef, type: "file", className: "hidden", multiple: multiple, accept: Array.isArray(acceptedFiles)
+                                ? acceptedFiles.join(",")
+                                : acceptedFiles, onChange: handleChange, disabled: disabled, "aria-label": t.uploadAreaAriaLabel })] }) }), error && errorText && (jsx("p", { className: "text-red-500 text-sm mt-2", role: "alert", children: errorText })), showCropModal && selectedImageUrl && cropConfig && (jsx(ImageCropModal, { isOpen: showCropModal, imageUrl: selectedImageUrl, targetWidth: cropConfig.targetWidth, targetHeight: cropConfig.targetHeight, onSave: handleCropSave, onCancel: handleCropCancel, translations: t }))] }));
 };
+UploadFile.displayName = "UploadFile";
 
 var themeColors = {
     "purple-light": {
@@ -563,4 +1072,4 @@ var ThemeProvider = function (_a) {
     return (jsx(ThemeContext.Provider, { value: { theme: theme, setTheme: setTheme }, children: jsx("main", { className: "".concat(theme, " bg-background text-foreground "), children: children }) }));
 };
 
-export { ButtonPrueba, IconComponent, MenuComponent, Phone, ThemeContext, ThemeProvider, sizeMap, themeColors, useThemeContext };
+export { ButtonPrueba, IconComponent, MenuComponent, Phone, ThemeContext, ThemeProvider, UploadFile, sizeMap, themeColors, useThemeContext };

package/dist/types/components/UploadFile/UploadFile.d.ts

@@ -0,0 +1,20 @@
+import type React from "react";
+import type { UploadFileProps } from "./UploadFile.types";
+/**
+ * Componente UploadDocument basado en Hero UI con funcionalidad mejorada
+ *
+ * @example
+ * ```tsx
+ * <UploadDocument
+ *   onUpload={(files) => console.log(files)}
+ *   acceptedFiles="image/*,.pdf"
+ *   multiple={false}
+ *   translations={{
+ *     uploadText: "Upload your files",
+ *     dragText: "Drop files here"
+ *   }}
+ * />
+ * ```
+ */
+export declare const UploadFile: React.FC<UploadFileProps>;
+//# sourceMappingURL=UploadFile.d.ts.map

package/dist/types/components/UploadFile/UploadFile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UploadFile.d.ts","sourceRoot":"","sources":["../../../../src/components/UploadFile/UploadFile.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EACX,eAAe,EAEf,MAAM,oBAAoB,CAAC;AAkiB5B;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA0UhD,CAAC"}