@beweco/aurora-ui 0.0.9 → 0.0.11

package/dist/index.cjs.js

@@ -1,7 +1,7 @@
 'use strict';
 
-var jsxRuntime = require('react/jsx-runtime');
 var react = require('@heroui/react');
+var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var react$1 = require('@iconify/react');
 var useTheme = require('@heroui/use-theme');
@@ -52,15 +52,22 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
 };
 
 /**
- * Button component with HeroUI styling
- * Provides a consistent interface for button interactions across the application
+ * AutoComplete genérico reutilizable basado en HeroUI siguiendo las reglas de diseño BeweOS.
+ *
+ * Reglas aplicadas:
+ * - Variant: Bordered (por defecto)
+ * - Radius: md (por defecto)
+ * - labelPlacement: Outside
+ * - Size: sm, md, lg (configurable)
  */
-var ButtonPrueba = function (_a) {
-    var children = _a.children, startIcon = _a.startIcon, endIcon = _a.endIcon, _b = _a.loading, loading = _b === void 0 ? false : _b, disabled = _a.disabled, _c = _a.variant, variant = _c === void 0 ? "solid" : _c, _d = _a.color, color = _d === void 0 ? "primary" : _d, _e = _a.size, size = _e === void 0 ? "md" : _e, radius = _a.radius, _f = _a.fullWidth, fullWidth = _f === void 0 ? false : _f, _g = _a.className, className = _g === void 0 ? "" : _g, props = __rest(_a, ["children", "startIcon", "endIcon", "loading", "disabled", "variant", "color", "size", "radius", "fullWidth", "className"]);
-    React.useEffect(function () {
-        // console.log("estamos dentro del botnon");
-    }, []);
-    return (jsxRuntime.jsx(react.Button, __assign({ variant: variant, color: color, size: size, radius: radius, fullWidth: fullWidth, isLoading: loading, isDisabled: disabled, startContent: startIcon, endContent: endIcon, className: className }, props, { children: children })));
+var AutoComplete = function (_a) {
+    var label = _a.label, id = _a.id, _b = _a.size, size = _b === void 0 ? "md" : _b, _c = _a.variant, variant = _c === void 0 ? "bordered" : _c, _d = _a.radius, radius = _d === void 0 ? "md" : _d, props = __rest(_a, ["label", "id", "size", "variant", "radius"]);
+    var generatedId = React.useId();
+    var autoId = id || generatedId;
+    return (jsxRuntime.jsxs("div", { children: [label && (jsxRuntime.jsx("label", { htmlFor: autoId, className: "block mb-2 text-tiny text-default-600", children: label })), jsxRuntime.jsx(react.Autocomplete, __assign({}, props, { id: autoId, label: undefined, labelPlacement: "outside", variant: variant, size: size, radius: radius, classNames: {
+                    base: "[&_[data-slot=input-wrapper][data-focus=true]]:!border-primary-500",
+                    popoverContent: "[&_li[data-hover=true]]:!bg-primary-50 [&_li[data-hover=true]]:!text-default-600 [&_li]:!text-default-500",
+                } }))] }));
 };
 
 var sizeMap = {
@@ -248,9 +255,9 @@ var MenuComponent = React.memo(function Menu(_a) {
     }
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("button", { type: "button", "aria-label": "Close sidebar", className: "fixed inset-0 bg-black bg-opacity-40 z-40 xs:block sm:hidden", onClick: handleSidebarClose, style: { border: "none", padding: 0, margin: 0 } }), jsxRuntime.jsx("div", { className: "container__menu ".concat(isCollapsed
                     ? "container__menu--collapsed"
-                    : "container__menu--expanded"), children: jsxRuntime.jsxs("div", { className: "content__menu", children: [jsxRuntime.jsxs("div", { className: "content__menu--header", style: { flexDirection: isCollapsed ? "column-reverse" : "row" }, children: [jsxRuntime.jsxs("div", { className: "flex flex-row items-center justify-center ".concat(isCollapsed ? "gap-0" : "gap-2"), children: [jsxRuntime.jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-full bg-foreground", children: jsxRuntime.jsx("img", { src: commerceInfo.logo, alt: "Logo of ".concat(commerceInfo.name) }) }), jsxRuntime.jsx("span", { className: "collapsible-item text-small font-bold uppercase", children: commerceInfo.name })] }), jsxRuntime.jsxs("div", { className: "flex items-center", children: [jsxRuntime.jsx(IconComponent, { icon: "material-symbols-light:close", size: "lg", className: "cursor-pointer block sm:hidden", onClick: handleSidebarClose }), jsxRuntime.jsx(IconComponent, { icon: isCollapsed
+                    : "container__menu--expanded"), children: jsxRuntime.jsxs("div", { className: "content__menu", children: [jsxRuntime.jsxs("div", { className: "content__menu--header", style: { flexDirection: isCollapsed ? "column-reverse" : "row" }, children: [jsxRuntime.jsxs("div", { className: "flex flex-row items-center justify-center ".concat(isCollapsed ? "gap-0" : "gap-2"), children: [jsxRuntime.jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-full bg-foreground", children: jsxRuntime.jsx("img", { src: commerceInfo.logo, alt: "Logo of ".concat(commerceInfo.name) }) }), jsxRuntime.jsx("span", { className: "collapsible-item text-small font-bold ", children: commerceInfo.name })] }), jsxRuntime.jsxs("div", { className: "flex items-center", children: [jsxRuntime.jsx(IconComponent, { icon: "material-symbols-light:close", size: "lg", className: "cursor-pointer block sm:hidden", onClick: handleSidebarClose }), jsxRuntime.jsx(IconComponent, { icon: isCollapsed
                                                 ? "solar:alt-arrow-right-outline"
-                                                : "solar:alt-arrow-left-outline", size: "lg", className: "hidden sm:block cursor-pointer", onClick: handleCollapseToggle })] })] }), jsxRuntime.jsx(react.Spacer, { y: 6 }), jsxRuntime.jsxs("div", { className: "content__menu--user ".concat(isCollapsed ? "gap-0" : "gap-3"), children: [jsxRuntime.jsx(react.Avatar, { size: "md", src: userInfo.avatar, color: userInfo.avatar === "" ? "warning" : "default", name: userInfo.name }), jsxRuntime.jsxs("div", { className: "collapsible-item flex flex-col", children: [jsxRuntime.jsx("p", { className: "text-small font-medium text-default-900", children: userInfo.name }), jsxRuntime.jsx("p", { className: "text-tiny text-default-400", children: userInfo.role })] })] }), jsxRuntime.jsx("div", { className: "".concat(!isCollapsed ? "flex-1" : "h-full", " min-h-0 py-6"), children: jsxRuntime.jsx("div", { className: "h-full overflow-y-auto pr-6 -mr-6 [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]", children: jsxRuntime.jsx(MenuNavList, { defaultSelectedKey: menuItems.selectedKey, items: menuItems.items, isCollapsed: isCollapsed }) }) }), upgradeCard && (jsxRuntime.jsxs("div", { className: "collapsible-item relative", children: [jsxRuntime.jsxs(react.Card, { className: "border-none overflow-visible shadow-none", shadow: "sm", children: [jsxRuntime.jsxs(react.CardBody, { className: "items-center py-5 text-center gap-1", children: [jsxRuntime.jsx("h3", { className: "text-medium font-medium text-default-900", children: upgradeCard.title }), jsxRuntime.jsx("p", { className: "text-small text-default-500 pb-3 whitespace-normal", children: upgradeCard.description })] }), jsxRuntime.jsx(react.CardFooter, { className: "absolute justify-center", style: { bottom: "-30px" }, children: jsxRuntime.jsx(react.Button, { className: "px-10 shadow-md", color: "primary", radius: "full", variant: "shadow", onPress: handleUpgradeClick, children: upgradeCard.buttonText }) })] }), jsxRuntime.jsx(react.Spacer, { y: 9 })] })), jsxRuntime.jsx("div", { className: "mt-auto flex flex-col justify-center items-center", children: jsxRuntime.jsx(react.Button, { fullWidth: true, className: " text-default-600 data-[hover=true]:text-foreground", startContent: jsxRuntime.jsx(IconComponent, { className: "text-default-500", icon: "solar:info-circle-line-duotone", size: "md" }), variant: "light", onPress: handleHelpClick, isIconOnly: isCollapsed, children: !isCollapsed && (jsxRuntime.jsx("span", { className: "collapsible-item", children: helpButton.title })) }) })] }) })] }));
+                                                : "solar:alt-arrow-left-outline", size: "lg", className: "hidden sm:block cursor-pointer", onClick: handleCollapseToggle })] })] }), jsxRuntime.jsx(react.Spacer, { y: 6 }), jsxRuntime.jsxs("div", { className: "content__menu--user ".concat(isCollapsed ? "gap-0" : "gap-3"), children: [jsxRuntime.jsx(react.Avatar, { size: "md", src: userInfo.avatar, color: userInfo.avatar === "" ? "warning" : "default", name: userInfo.name }), jsxRuntime.jsxs("div", { className: "collapsible-item flex flex-col", children: [jsxRuntime.jsx("p", { className: "text-small font-medium text-default-900", children: userInfo.name }), jsxRuntime.jsx("p", { className: "text-tiny text-default-400", children: userInfo.role })] })] }), jsxRuntime.jsx("div", { className: "".concat(!isCollapsed ? "flex-1" : "h-full", " min-h-0 py-6"), children: jsxRuntime.jsx("div", { className: "h-full overflow-y-auto pr-6 -mr-6 [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]", children: jsxRuntime.jsx(MenuNavList, { defaultSelectedKey: menuItems.selectedKey, items: menuItems.items, isCollapsed: isCollapsed }) }) }), upgradeCard && (jsxRuntime.jsxs("div", { className: "collapsible-item relative", children: [jsxRuntime.jsxs(react.Card, { className: "border-none overflow-visible shadow-none", shadow: "sm", children: [jsxRuntime.jsxs(react.CardBody, { className: "items-center py-5 text-center gap-1", children: [jsxRuntime.jsx("h3", { className: "text-medium font-medium text-default-900", children: upgradeCard.title }), jsxRuntime.jsx("p", { className: "text-small text-default-500 pb-3 whitespace-normal", children: upgradeCard.description })] }), jsxRuntime.jsx(react.CardFooter, { className: "absolute justify-center", style: { bottom: "-30px" }, children: jsxRuntime.jsx(react.Button, { className: "px-10 shadow-md", color: "primary", radius: "full", variant: "shadow", onPress: handleUpgradeClick, children: upgradeCard.buttonText }) })] }), jsxRuntime.jsx(react.Spacer, { y: 9 })] })), jsxRuntime.jsx("div", { className: "mt-auto flex flex-col justify-center items-center", children: jsxRuntime.jsx(react.Button, { fullWidth: true, className: " text-default-500 data-[hover=true]:text-default-600", startContent: jsxRuntime.jsx(IconComponent, { className: "text-default-500", icon: "solar:info-circle-line-duotone", size: "md" }), variant: "light", onPress: handleHelpClick, isIconOnly: isCollapsed, children: !isCollapsed && (jsxRuntime.jsx("span", { className: "collapsible-item", children: helpButton.title })) }) })] }) })] }));
 });
 
 // Lista simple de países con bandera emoji y código
@@ -294,7 +301,8 @@ 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 = {
+// Traducciones por defecto
+var defaultTranslations$2 = {
     label: "Teléfono",
     placeholder: "Número de teléfono",
     searchPlaceholder: "Buscar país...",
@@ -310,7 +318,7 @@ var Phone = function (_a) {
     var dropdownRef = React.useRef(null);
     var _m = React.useState(uniqueCountries), filteredCountries = _m[0], setFilteredCountries = _m[1];
     // Combinar traducciones por defecto con las proporcionadas
-    var t = __assign(__assign({}, defaultTranslations), translations);
+    var t = __assign(__assign({}, defaultTranslations$2), translations);
     // Usar la etiqueta de las traducciones si no se proporciona label explícitamente
     var finalLabel = label || t.label;
     // Sincroniza valor externo
@@ -379,6 +387,644 @@ var Phone = function (_a) {
                                                 : ""), onClick: function () { return handleCountrySelect(country); }, children: [jsxRuntime.jsx("span", { className: "mr-3 text-lg", children: country.flag }), jsxRuntime.jsx("span", { className: "flex-1 text-left dark:text-gray-100", children: country.name }), jsxRuntime.jsx("span", { className: "text-xs text-gray-500 dark:text-gray-400", children: country.code })] }, country.code)); })) : (jsxRuntime.jsx("div", { className: "px-4 py-2 text-sm text-gray-500 dark:text-gray-400", children: t.noCountriesFound })) })] }))] }), jsxRuntime.jsx(react.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 && (jsxRuntime.jsx("span", { className: "text-xs text-pink-600 dark:text-pink-400 mt-1", children: errorText }))] }));
 };
 
+// Traducciones por defecto en español según las reglas de diseño
+var defaultTranslations$1 = {
+    lightTheme: "Claro",
+    darkTheme: "Oscuro",
+};
+/**
+ * Selector de tema visual con preview interactivo siguiendo las reglas de diseño BeweOS.
+ *
+ * Reglas aplicadas:
+ * - Soporte completo de traducciones mediante props
+ * - Sin dependencias de sistemas i18n específicos
+ * - Dark mode compatible
+ * - Uso exclusivo de Tailwind CSS
+ */
+var ThemePicker = function (_a) {
+    var value = _a.value, onChange = _a.onChange, className = _a.className, _b = _a.translations, translations = _b === void 0 ? {} : _b;
+    // Combinar traducciones por defecto con las proporcionadas
+    var t = __assign(__assign({}, defaultTranslations$1), translations);
+    var themes = [
+        {
+            key: "light",
+            label: t.lightTheme,
+            cardClass: "bg-white border border-[#E4E4E7] text-zinc-900",
+            previewClass: "bg-[#F4F4F5] border border-[#E4E4E7]",
+            labelClass: "font-medium text-[14px] leading-[20px] text-zinc-900",
+            radioColor: "primary",
+            previewContent: (jsxRuntime.jsxs("div", { className: "rounded-lg border border-[#E4E4E7] p-3 mt-4 flex flex-col gap-2", children: [jsxRuntime.jsx("div", { className: "h-3 w-1/2 bg-[#E4E4E7] rounded mb-2" }), jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx("div", { className: "h-3 w-3 rounded-full bg-[#E4E4E7]" }), jsxRuntime.jsx("div", { className: "h-3 w-1/3 rounded bg-[#E4E4E7]" })] }), jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx("div", { className: "h-3 w-3 rounded-full bg-[#E4E4E7]" }), jsxRuntime.jsx("div", { className: "h-3 w-1/4 rounded bg-[#E4E4E7]" })] })] }), jsxRuntime.jsx("div", { className: "h-8 w-2/3 bg-[#F4F4F5] rounded-lg mt-2" })] })),
+        },
+        {
+            key: "dark",
+            label: t.darkTheme,
+            cardClass: "bg-black border border-[#3F3F46] text-white",
+            previewClass: "bg-[#27272A] border border-[#3F3F46]",
+            labelClass: "font-medium text-[14px] leading-[20px] text-white",
+            radioColor: "primary",
+            previewContent: (jsxRuntime.jsxs("div", { className: "rounded-lg border border-[#3F3F46] p-3 mt-4 flex flex-col gap-2", children: [jsxRuntime.jsx("div", { className: "h-3 w-1/2 bg-[#3F3F46] rounded mb-2" }), jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx("div", { className: "h-3 w-3 rounded-full bg-[#3F3F46]" }), jsxRuntime.jsx("div", { className: "h-3 w-1/3 rounded bg-[#3F3F46]" })] }), jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx("div", { className: "h-3 w-3 rounded-full bg-[#3F3F46]" }), jsxRuntime.jsx("div", { className: "h-3 w-1/4 rounded bg-[#3F3F46]" })] })] }), jsxRuntime.jsx("div", { className: "h-8 w-2/3 bg-[#27272A] rounded-lg mt-2" })] })),
+        },
+    ];
+    return (jsxRuntime.jsx(react.RadioGroup, { value: value, onChange: function (e) { return onChange(e.target.value); }, className: "flex gap-6 w-full ".concat(className || ""), style: { gap: 16 }, children: themes.map(function (theme) { return (jsxRuntime.jsxs("div", { className: "relative rounded-[14px] ".concat(theme.cardClass, " p-6 w-1/2 min-h-[180px] transition-all duration-200 flex flex-col justify-start"), children: [jsxRuntime.jsx("div", { className: "absolute top-6 right-6", children: jsxRuntime.jsx(react.Radio, { "aria-label": theme.label, color: theme.radioColor, size: "sm", value: theme.key }) }), jsxRuntime.jsx("span", { className: theme.labelClass, children: theme.label }), theme.previewContent] }, theme.key)); }) }));
+};
+
+// 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 = React.useRef(null);
+    var _b = React.useState(null), imageElement = _b[0], setImageElement = _b[1];
+    var _c = React.useState(0), zoomValue = _c[0], setZoomValue = _c[1]; // Valor del slider de -1 a 1
+    var _d = React.useState({ x: 0, y: 0 }), position = _d[0], setPosition = _d[1];
+    var _e = React.useState(false), isDragging = _e[0], setIsDragging = _e[1];
+    var _f = React.useState({ x: 0, y: 0 }), dragStart = _f[0], setDragStart = _f[1];
+    var _g = React.useState(1), baseScale = _g[0], setBaseScale = _g[1]; // Escala base inicial
+    var _h = React.useState({ width: 400, height: 300 }), canvasSize = _h[0], setCanvasSize = _h[1];
+    var _j = React.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
+    React.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
+    React.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 = React.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
+    React.useEffect(function () {
+        if (!isOpen) {
+            return;
+        }
+        updateCanvasSize();
+        var handleResize = function () {
+            updateCanvasSize();
+        };
+        window.addEventListener("resize", handleResize);
+        return function () {
+            window.removeEventListener("resize", handleResize);
+        };
+    }, [isOpen, updateCanvasSize]);
+    return (jsxRuntime.jsx(react.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: jsxRuntime.jsxs(react.ModalContent, { className: "m-0 sm:m-0 h-screen sm:h-auto sm:max-h-[90vh] sm:rounded-lg", children: [jsxRuntime.jsxs(react.ModalHeader, { className: "flex flex-col gap-1 px-4 sm:px-6", children: [translations.cropModalTitle, jsxRuntime.jsx("p", { className: "text-xs sm:text-sm text-gray-500 font-normal", children: translations.cropInstructions })] }), jsxRuntime.jsx(react.ModalBody, { className: "px-4 sm:px-6 py-4", children: jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [jsxRuntime.jsx("div", { className: "flex justify-center overflow-hidden", children: jsxRuntime.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" } }) }), jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [jsxRuntime.jsx("label", { htmlFor: "zoom-slider", className: "text-sm font-medium", children: translations.cropZoomLabel }), jsxRuntime.jsxs("div", { className: "flex items-center gap-2 sm:gap-3 w-full", children: [jsxRuntime.jsx("span", { className: "text-xs text-gray-500 min-w-[15px] sm:min-w-[20px]", children: "-" }), jsxRuntime.jsx(react.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" },
+                                                ] }), jsxRuntime.jsx("span", { className: "text-xs text-gray-500 min-w-[15px] sm:min-w-[20px]", children: "+" })] })] }), jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [jsxRuntime.jsx("div", { className: "text-sm font-medium", children: translations.cropBackgroundLabel }), jsxRuntime.jsxs("div", { className: "flex flex-wrap gap-3 sm:gap-4", children: [jsxRuntime.jsxs("label", { className: "flex items-center gap-2 cursor-pointer", children: [jsxRuntime.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" }), jsxRuntime.jsx("div", { className: "w-4 h-4 bg-white border border-gray-300 rounded" }), jsxRuntime.jsx("span", { className: "text-sm", children: translations.cropBackgroundWhite })] }), jsxRuntime.jsxs("label", { className: "flex items-center gap-2 cursor-pointer", children: [jsxRuntime.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" }), jsxRuntime.jsx("div", { className: "w-4 h-4 bg-black border border-gray-300 rounded" }), jsxRuntime.jsx("span", { className: "text-sm", children: translations.cropBackgroundBlack })] }), jsxRuntime.jsxs("label", { className: "flex items-center gap-2 cursor-pointer", children: [jsxRuntime.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" }), jsxRuntime.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",
+                                                        } }), jsxRuntime.jsx("span", { className: "text-sm", children: translations.cropBackgroundTransparent })] })] })] })] }) }), jsxRuntime.jsxs(react.ModalFooter, { className: "flex flex-col-reverse sm:flex-row gap-2 px-4 sm:px-6", children: [jsxRuntime.jsx(react.Button, { color: "danger", variant: "light", onPress: onCancel, className: "w-full sm:w-auto", children: translations.cropCancelButton }), jsxRuntime.jsx(react.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 = React.useState(""), previewUrl = _b[0], setPreviewUrl = _b[1];
+    React.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 (jsxRuntime.jsxs("div", { className: "absolute inset-0  overflow-hidden z-10", children: [jsxRuntime.jsx("img", { src: previewUrl, alt: file.name, className: "w-full h-full object-cover" }), jsxRuntime.jsx(react.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: jsxRuntime.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 = React.useRef(null);
+    var uploadImageRef = React.useRef(image || null);
+    var _o = React.useState(false), isDragging = _o[0], setIsDragging = _o[1];
+    // Estados para el modal de crop
+    var _p = React.useState(false), showCropModal = _p[0], setShowCropModal = _p[1];
+    var _q = React.useState(""), selectedImageUrl = _q[0], setSelectedImageUrl = _q[1];
+    var _r = React.useState(null); _r[0]; var setOriginalFile = _r[1];
+    // Combinar traducciones por defecto con las proporcionadas
+    var t = React.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 = React.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 = React.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 = React.useCallback(function (croppedFile) {
+        uploadImageRef.current = croppedFile;
+        setShowCropModal(false);
+        setSelectedImageUrl("");
+        setOriginalFile(null);
+        onUpload([croppedFile]);
+    }, [onUpload]);
+    // Manejar cancelación de crop
+    var handleCropCancel = React.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 = React.useCallback(function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        if (!disabled) {
+            setIsDragging(true);
+        }
+    }, [disabled]);
+    var handleDragLeave = React.useCallback(function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragging(false);
+    }, []);
+    var handleDragOver = React.useCallback(function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+    }, []);
+    var handleDrop = React.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 (jsxRuntime.jsxs("div", { className: "relative", children: [jsxRuntime.jsx(react.Card, { className: containerClasses, isPressable: !(disabled || uploadImageRef.current), onPress: handleClick, children: jsxRuntime.jsxs(react.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 && (jsxRuntime.jsx(FilePreview, { file: uploadImageRef.current, onRemove: handleRemoveImage, removeAriaLabel: t.removeFileAriaLabel })), jsxRuntime.jsx("div", { className: uploadImageRef.current
+                                ? "opacity-0"
+                                : "opacity-100 transition-opacity", children: jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-3 sm:gap-4", children: [jsxRuntime.jsx(IconComponent, { icon: icon, size: "xl", className: "sm:text-4xl lg:text-5xl ".concat(disabled ? "text-gray-400" : iconColor || "text-primary") }), jsxRuntime.jsxs("div", { className: "space-y-1 sm:space-y-2 text-center px-2", children: [jsxRuntime.jsx("p", { className: textClasses, children: isDragging ? t.dragText : finalText }), finalSubText && !isDragging && (jsxRuntime.jsx("p", { className: subTextClasses, children: finalSubText }))] })] }) }), jsxRuntime.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 && (jsxRuntime.jsx("p", { className: "text-red-500 text-sm mt-2", role: "alert", children: errorText })), showCropModal && selectedImageUrl && cropConfig && (jsxRuntime.jsx(ImageCropModal, { isOpen: showCropModal, imageUrl: selectedImageUrl, targetWidth: cropConfig.targetWidth, targetHeight: cropConfig.targetHeight, onSave: handleCropSave, onCancel: handleCropCancel, translations: t }))] }));
+};
+UploadFile.displayName = "UploadFile";
+
+var ConfigMenu = function (_a) {
+    var _b;
+    var options = _a.options, onLogout = _a.onLogout, translations = _a.translations;
+    return (jsxRuntime.jsxs(react.Dropdown, { className: "min-w-40", children: [jsxRuntime.jsx(react.DropdownTrigger, { children: jsxRuntime.jsx(react.Button, { isIconOnly: true, color: "default", startContent: jsxRuntime.jsx(IconComponent, { icon: "solar:settings-linear" }) }) }), jsxRuntime.jsxs(react.DropdownMenu, { "aria-label": "Configuration", children: [jsxRuntime.jsx(react.DropdownSection, { showDivider: true, className: "mb-0", children: options.map(function (item) { return (jsxRuntime.jsx(react.DropdownItem, { href: item.href, className: "data-[hover=true]:bg-primary-50 data-[hover=true]:text-default-700", classNames: {
+                                base: "text-default-500",
+                            }, startContent: item.icon ? jsxRuntime.jsx(IconComponent, { icon: item.icon }) : undefined, children: item.label }, item.label)); }) }), jsxRuntime.jsx(react.DropdownSection, { children: jsxRuntime.jsx(react.DropdownItem, { onPress: onLogout, className: "data-[hover=true]:bg-primary-50 data-[hover=true]:text-default-700", classNames: {
+                                base: "text-default-500",
+                            }, startContent: jsxRuntime.jsx(IconComponent, { icon: "solar:logout-2-linear" }), children: (_b = translations === null || translations === void 0 ? void 0 : translations.logout) !== null && _b !== void 0 ? _b : "Logout" }, "logout") })] })] }));
+};
+ConfigMenu.displayName = "ConfigMenu";
+
+var NotificationButton = function (_a) {
+    var _b = _a.notificationCount, notificationCount = _b === void 0 ? 0 : _b;
+    return (jsxRuntime.jsx(react.Button, { isIconOnly: true, color: "secondary", variant: "flat", startContent: jsxRuntime.jsx(IconComponent, { icon: "solar:bell-bing-linear" }), children: notificationCount > 0 && (jsxRuntime.jsx("span", { className: "notification__alert", children: notificationCount })) }));
+};
+NotificationButton.displayName = "NotificationButton";
+
+var HeaderComponent = function (_a) {
+    var notificationCount = _a.notificationCount, options = _a.options, onMenuClick = _a.onMenuClick, onLogout = _a.onLogout, translations = _a.translations;
+    return (jsxRuntime.jsxs("header", { className: "header__container", children: [jsxRuntime.jsx(react.Button, { className: "sm:hidden", isIconOnly: true, variant: "light", startContent: jsxRuntime.jsx(IconComponent, { icon: "solar:hamburger-menu-linear" }), onPress: onMenuClick }), jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [jsxRuntime.jsx(NotificationButton, { notificationCount: notificationCount }), jsxRuntime.jsx(ConfigMenu, { options: options, onLogout: onLogout, translations: translations })] })] }));
+};
+HeaderComponent.displayName = "Header";
+
+/**
+ * Botón genérico basado en HeroUI siguiendo las reglas de diseño BeweOS.
+ *
+ * Reglas aplicadas:
+ * - Variant: Solid, Bordered, Light, Flat, Faded
+ * - Size: sm, md, lg
+ * - StartContent: On, Off
+ * - isLoading: On, Off
+ * - Radius: md (por defecto)
+ * - isIconOnly: True, False
+ */
+var Button = function (_a) {
+    var _b = _a.color, color = _b === void 0 ? "primary" : _b, _c = _a.size, size = _c === void 0 ? "md" : _c, _d = _a.variant, variant = _d === void 0 ? "solid" : _d, _e = _a.radius, radius = _e === void 0 ? "sm" : _e, startContent = _a.startContent, endContent = _a.endContent, _f = _a.isLoading, isLoading = _f === void 0 ? false : _f, _g = _a.isIconOnly, isIconOnly = _g === void 0 ? false : _g, props = __rest(_a, ["color", "size", "variant", "radius", "startContent", "endContent", "isLoading", "isIconOnly"]);
+    return (jsxRuntime.jsx(react.Button, __assign({}, props, { color: color, size: size, variant: variant, radius: radius, startContent: startContent, endContent: endContent, isLoading: isLoading, isIconOnly: isIconOnly })));
+};
+
+var paddingClasses = {
+    sm: "p-4",
+    md: "p-6",
+    lg: "p-8",
+};
+
+/**
+ * Card genérica siguiendo las reglas de diseño BeweOS basada en HeroUI.
+ *
+ * Reglas aplicadas:
+ * - Shadow: none, sm, md, lg (configurable)
+ * - Radius: sm (por defecto, configurable)
+ * - Padding configurable (sm, md, lg)
+ * - Hereda de HeroUI Card con personalización BeweOS
+ */
+var Card = function (_a) {
+    var children = _a.children, _b = _a.className, className = _b === void 0 ? "" : _b, _c = _a.shadow, shadow = _c === void 0 ? "sm" : _c, _d = _a.radius, radius = _d === void 0 ? "sm" : _d, _e = _a.padding, padding = _e === void 0 ? "md" : _e, props = __rest(_a, ["children", "className", "shadow", "radius", "padding"]);
+    var paddingClass = paddingClasses[padding];
+    var combinedClassName = [paddingClass, className].filter(Boolean).join(" ");
+    return (jsxRuntime.jsx(react.Card, __assign({ shadow: shadow, radius: radius, className: combinedClassName }, props, { children: children })));
+};
+
+/**
+ * Input genérico reutilizable basado en HeroUI siguiendo las reglas de diseño BeweOS.
+ *
+ * Reglas aplicadas:
+ * - Variant: Bordered (por defecto)
+ * - labelPlacement: Outside
+ * - Size: sm, md, lg (configurable)
+ * - Radius configurable
+ */
+var Input = function (_a) {
+    var label = _a.label, id = _a.id, _b = _a.size, size = _b === void 0 ? "md" : _b, _c = _a.variant, variant = _c === void 0 ? "bordered" : _c, _d = _a.radius, radius = _d === void 0 ? "md" : _d, placeholder = _a.placeholder, props = __rest(_a, ["label", "id", "size", "variant", "radius", "placeholder"]);
+    var generatedId = React.useId();
+    var inputId = id || generatedId;
+    return (jsxRuntime.jsx(react.Input, __assign({}, props, { id: inputId, label: label, labelPlacement: "outside", placeholder: placeholder, variant: variant, size: size, radius: radius, classNames: {
+            label: "text-default-600 text-tiny",
+            inputWrapper: "focus-within:!border-primary-500",
+        } })));
+};
+
+/**
+ * Select genérico reutilizable basado en HeroUI siguiendo las reglas de diseño BeweOS.
+ *
+ * Reglas aplicadas:
+ * - Variant: Bordered (por defecto)
+ * - Radius: md (por defecto)
+ * - labelPlacement: Outside
+ * - Size: sm, md, lg (configurable)
+ */
+var Select = function (_a) {
+    var label = _a.label, id = _a.id, _b = _a.size, size = _b === void 0 ? "md" : _b, _c = _a.variant, variant = _c === void 0 ? "bordered" : _c, _d = _a.radius, radius = _d === void 0 ? "md" : _d, placeholder = _a.placeholder, props = __rest(_a, ["label", "id", "size", "variant", "radius", "placeholder"]);
+    var generatedId = React.useId();
+    var selectId = id || generatedId;
+    return (jsxRuntime.jsx("div", { className: "group", children: jsxRuntime.jsx(react.Select, __assign({}, props, { id: selectId, label: label, labelPlacement: "outside", placeholder: placeholder, variant: variant, size: size, radius: radius, classNames: {
+                label: "text-default-600 text-tiny group-data-[filled=true]:text-default-600",
+                trigger: "data-[open=true]:!border-primary-500 data-[focus=true]:!border-primary-500",
+                popoverContent: "[&_[data-focus-visible=true]]:!outline-none [&_[data-selectable=true]:focus]:!bg-primary-50 [&_li]:!text-default-500 [&_li[data-hover=true]]:!text-default-600",
+            } })) }));
+};
+
 var themeColors = {
     "purple-light": {
         extend: "light",
@@ -577,12 +1223,25 @@ var ThemeProvider = function (_a) {
     return (jsxRuntime.jsx(ThemeContext.Provider, { value: { theme: theme, setTheme: setTheme }, children: jsxRuntime.jsx("main", { className: "".concat(theme, " bg-background text-foreground "), children: children }) }));
 };
 
-exports.ButtonPrueba = ButtonPrueba;
+exports.AutoComplete = AutoComplete;
+exports.Button = Button;
+exports.Card = Card;
+exports.HeaderComponent = HeaderComponent;
 exports.IconComponent = IconComponent;
+exports.Input = Input;
 exports.MenuComponent = MenuComponent;
 exports.Phone = Phone;
+exports.Select = Select;
 exports.ThemeContext = ThemeContext;
+exports.ThemePicker = ThemePicker;
 exports.ThemeProvider = ThemeProvider;
+exports.UploadFile = UploadFile;
 exports.sizeMap = sizeMap;
 exports.themeColors = themeColors;
 exports.useThemeContext = useThemeContext;
+Object.keys(react).forEach(function (k) {
+    if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+        enumerable: true,
+        get: function () { return react[k]; }
+    });
+});