@beweco/aurora-ui 0.0.10 → 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$1 = {
+// 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$1), 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,47 @@ 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",
@@ -876,6 +925,106 @@ var UploadFile = function (_a) {
 };
 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",
@@ -1074,13 +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]; }
+    });
+});

package/dist/index.esm.js

@@ -1,6 +1,7 @@
-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, Modal, ModalContent, ModalHeader, ModalBody, Slider, ModalFooter } from '@heroui/react';
-import React, { useEffect, useState, createElement, useCallback, useRef, useMemo, createContext, useContext } from 'react';
+import { Autocomplete, cn, ListboxItem, Popover, PopoverTrigger, Tooltip, PopoverContent, Listbox, Accordion, AccordionItem, ListboxSection, Spacer, Avatar, Card as Card$1, CardBody, CardFooter, Button as Button$1, Input as Input$1, RadioGroup, Radio, Modal, ModalContent, ModalHeader, ModalBody, Slider, ModalFooter, Dropdown, DropdownTrigger, DropdownMenu, DropdownSection, DropdownItem, Select as Select$1 } from '@heroui/react';
+export * from '@heroui/react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import React, { useId, useState, createElement, useCallback, useRef, useEffect, useMemo, createContext, useContext } from 'react';
 import { Icon } from '@iconify/react';
 import { useTheme } from '@heroui/use-theme';
 
@@ -50,15 +51,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"]);
-    useEffect(function () {
-        // console.log("estamos dentro del botnon");
-    }, []);
-    return (jsx(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 = useId();
+    var autoId = id || generatedId;
+    return (jsxs("div", { children: [label && (jsx("label", { htmlFor: autoId, className: "block mb-2 text-tiny text-default-600", children: label })), jsx(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 = {
@@ -246,9 +254,9 @@ var MenuComponent = React.memo(function Menu(_a) {
     }
     return (jsxs(Fragment, { children: [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 } }), jsx("div", { className: "container__menu ".concat(isCollapsed
                     ? "container__menu--collapsed"
-                    : "container__menu--expanded"), children: jsxs("div", { className: "content__menu", children: [jsxs("div", { className: "content__menu--header", style: { flexDirection: isCollapsed ? "column-reverse" : "row" }, children: [jsxs("div", { className: "flex flex-row items-center justify-center ".concat(isCollapsed ? "gap-0" : "gap-2"), children: [jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-full bg-foreground", children: jsx("img", { src: commerceInfo.logo, alt: "Logo of ".concat(commerceInfo.name) }) }), jsx("span", { className: "collapsible-item text-small font-bold uppercase", children: commerceInfo.name })] }), jsxs("div", { className: "flex items-center", children: [jsx(IconComponent, { icon: "material-symbols-light:close", size: "lg", className: "cursor-pointer block sm:hidden", onClick: handleSidebarClose }), jsx(IconComponent, { icon: isCollapsed
+                    : "container__menu--expanded"), children: jsxs("div", { className: "content__menu", children: [jsxs("div", { className: "content__menu--header", style: { flexDirection: isCollapsed ? "column-reverse" : "row" }, children: [jsxs("div", { className: "flex flex-row items-center justify-center ".concat(isCollapsed ? "gap-0" : "gap-2"), children: [jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-full bg-foreground", children: jsx("img", { src: commerceInfo.logo, alt: "Logo of ".concat(commerceInfo.name) }) }), jsx("span", { className: "collapsible-item text-small font-bold ", children: commerceInfo.name })] }), jsxs("div", { className: "flex items-center", children: [jsx(IconComponent, { icon: "material-symbols-light:close", size: "lg", className: "cursor-pointer block sm:hidden", onClick: handleSidebarClose }), jsx(IconComponent, { icon: isCollapsed
                                                 ? "solar:alt-arrow-right-outline"
-                                                : "solar:alt-arrow-left-outline", size: "lg", className: "hidden sm:block cursor-pointer", onClick: handleCollapseToggle })] })] }), jsx(Spacer, { y: 6 }), jsxs("div", { className: "content__menu--user ".concat(isCollapsed ? "gap-0" : "gap-3"), children: [jsx(Avatar, { size: "md", src: userInfo.avatar, color: userInfo.avatar === "" ? "warning" : "default", name: userInfo.name }), jsxs("div", { className: "collapsible-item flex flex-col", children: [jsx("p", { className: "text-small font-medium text-default-900", children: userInfo.name }), jsx("p", { className: "text-tiny text-default-400", children: userInfo.role })] })] }), jsx("div", { className: "".concat(!isCollapsed ? "flex-1" : "h-full", " min-h-0 py-6"), children: jsx("div", { className: "h-full overflow-y-auto pr-6 -mr-6 [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]", children: jsx(MenuNavList, { defaultSelectedKey: menuItems.selectedKey, items: menuItems.items, isCollapsed: isCollapsed }) }) }), upgradeCard && (jsxs("div", { className: "collapsible-item relative", children: [jsxs(Card, { className: "border-none overflow-visible shadow-none", shadow: "sm", children: [jsxs(CardBody, { className: "items-center py-5 text-center gap-1", children: [jsx("h3", { className: "text-medium font-medium text-default-900", children: upgradeCard.title }), jsx("p", { className: "text-small text-default-500 pb-3 whitespace-normal", children: upgradeCard.description })] }), jsx(CardFooter, { className: "absolute justify-center", style: { bottom: "-30px" }, children: jsx(Button, { className: "px-10 shadow-md", color: "primary", radius: "full", variant: "shadow", onPress: handleUpgradeClick, children: upgradeCard.buttonText }) })] }), jsx(Spacer, { y: 9 })] })), jsx("div", { className: "mt-auto flex flex-col justify-center items-center", children: jsx(Button, { fullWidth: true, className: " text-default-600 data-[hover=true]:text-foreground", startContent: jsx(IconComponent, { className: "text-default-500", icon: "solar:info-circle-line-duotone", size: "md" }), variant: "light", onPress: handleHelpClick, isIconOnly: isCollapsed, children: !isCollapsed && (jsx("span", { className: "collapsible-item", children: helpButton.title })) }) })] }) })] }));
+                                                : "solar:alt-arrow-left-outline", size: "lg", className: "hidden sm:block cursor-pointer", onClick: handleCollapseToggle })] })] }), jsx(Spacer, { y: 6 }), jsxs("div", { className: "content__menu--user ".concat(isCollapsed ? "gap-0" : "gap-3"), children: [jsx(Avatar, { size: "md", src: userInfo.avatar, color: userInfo.avatar === "" ? "warning" : "default", name: userInfo.name }), jsxs("div", { className: "collapsible-item flex flex-col", children: [jsx("p", { className: "text-small font-medium text-default-900", children: userInfo.name }), jsx("p", { className: "text-tiny text-default-400", children: userInfo.role })] })] }), jsx("div", { className: "".concat(!isCollapsed ? "flex-1" : "h-full", " min-h-0 py-6"), children: jsx("div", { className: "h-full overflow-y-auto pr-6 -mr-6 [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]", children: jsx(MenuNavList, { defaultSelectedKey: menuItems.selectedKey, items: menuItems.items, isCollapsed: isCollapsed }) }) }), upgradeCard && (jsxs("div", { className: "collapsible-item relative", children: [jsxs(Card$1, { className: "border-none overflow-visible shadow-none", shadow: "sm", children: [jsxs(CardBody, { className: "items-center py-5 text-center gap-1", children: [jsx("h3", { className: "text-medium font-medium text-default-900", children: upgradeCard.title }), jsx("p", { className: "text-small text-default-500 pb-3 whitespace-normal", children: upgradeCard.description })] }), jsx(CardFooter, { className: "absolute justify-center", style: { bottom: "-30px" }, children: jsx(Button$1, { className: "px-10 shadow-md", color: "primary", radius: "full", variant: "shadow", onPress: handleUpgradeClick, children: upgradeCard.buttonText }) })] }), jsx(Spacer, { y: 9 })] })), jsx("div", { className: "mt-auto flex flex-col justify-center items-center", children: jsx(Button$1, { fullWidth: true, className: " text-default-500 data-[hover=true]:text-default-600", startContent: jsx(IconComponent, { className: "text-default-500", icon: "solar:info-circle-line-duotone", size: "md" }), variant: "light", onPress: handleHelpClick, isIconOnly: isCollapsed, children: !isCollapsed && (jsx("span", { className: "collapsible-item", children: helpButton.title })) }) })] }) })] }));
 });
 
 // Lista simple de países con bandera emoji y código
@@ -292,7 +300,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$1 = {
+// Traducciones por defecto
+var defaultTranslations$2 = {
     label: "Teléfono",
     placeholder: "Número de teléfono",
     searchPlaceholder: "Buscar país...",
@@ -308,7 +317,7 @@ var Phone = function (_a) {
     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);
+    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
@@ -374,7 +383,48 @@ 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: 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 }))] }));
+                                                : ""), 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$1, { 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 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: (jsxs("div", { className: "rounded-lg border border-[#E4E4E7] p-3 mt-4 flex flex-col gap-2", children: [jsx("div", { className: "h-3 w-1/2 bg-[#E4E4E7] rounded mb-2" }), jsxs("div", { className: "flex flex-col gap-1", children: [jsxs("div", { className: "flex items-center gap-2", children: [jsx("div", { className: "h-3 w-3 rounded-full bg-[#E4E4E7]" }), jsx("div", { className: "h-3 w-1/3 rounded bg-[#E4E4E7]" })] }), jsxs("div", { className: "flex items-center gap-2", children: [jsx("div", { className: "h-3 w-3 rounded-full bg-[#E4E4E7]" }), jsx("div", { className: "h-3 w-1/4 rounded bg-[#E4E4E7]" })] })] }), 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: (jsxs("div", { className: "rounded-lg border border-[#3F3F46] p-3 mt-4 flex flex-col gap-2", children: [jsx("div", { className: "h-3 w-1/2 bg-[#3F3F46] rounded mb-2" }), jsxs("div", { className: "flex flex-col gap-1", children: [jsxs("div", { className: "flex items-center gap-2", children: [jsx("div", { className: "h-3 w-3 rounded-full bg-[#3F3F46]" }), jsx("div", { className: "h-3 w-1/3 rounded bg-[#3F3F46]" })] }), jsxs("div", { className: "flex items-center gap-2", children: [jsx("div", { className: "h-3 w-3 rounded-full bg-[#3F3F46]" }), jsx("div", { className: "h-3 w-1/4 rounded bg-[#3F3F46]" })] })] }), jsx("div", { className: "h-8 w-2/3 bg-[#27272A] rounded-lg mt-2" })] })),
+        },
+    ];
+    return (jsx(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 (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: [jsx("div", { className: "absolute top-6 right-6", children: jsx(Radio, { "aria-label": theme.label, color: theme.radioColor, size: "sm", value: theme.key }) }), jsx("span", { className: theme.labelClass, children: theme.label }), theme.previewContent] }, theme.key)); }) }));
 };
 
 // Traducciones por defecto en español
@@ -669,7 +719,7 @@ var ImageCropModal = function (_a) {
                                                             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 })] })] }) }));
+                                                        } }), 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$1, { color: "danger", variant: "light", onPress: onCancel, className: "w-full sm:w-auto", children: translations.cropCancelButton }), jsx(Button$1, { color: "primary", onPress: handleSave, className: "w-full sm:w-auto", children: translations.cropSaveButton })] })] }) }));
 };
 /**
  * Componente de previsualización de archivo
@@ -687,7 +737,7 @@ var FilePreview = function (_a) {
     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" }) })] }));
+    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$1, { 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
@@ -866,7 +916,7 @@ var UploadFile = function (_a) {
         .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
+    return (jsxs("div", { className: "relative", children: [jsx(Card$1, { 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(",")
@@ -874,6 +924,106 @@ var UploadFile = function (_a) {
 };
 UploadFile.displayName = "UploadFile";
 
+var ConfigMenu = function (_a) {
+    var _b;
+    var options = _a.options, onLogout = _a.onLogout, translations = _a.translations;
+    return (jsxs(Dropdown, { className: "min-w-40", children: [jsx(DropdownTrigger, { children: jsx(Button$1, { isIconOnly: true, color: "default", startContent: jsx(IconComponent, { icon: "solar:settings-linear" }) }) }), jsxs(DropdownMenu, { "aria-label": "Configuration", children: [jsx(DropdownSection, { showDivider: true, className: "mb-0", children: options.map(function (item) { return (jsx(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 ? jsx(IconComponent, { icon: item.icon }) : undefined, children: item.label }, item.label)); }) }), jsx(DropdownSection, { children: jsx(DropdownItem, { onPress: onLogout, className: "data-[hover=true]:bg-primary-50 data-[hover=true]:text-default-700", classNames: {
+                                base: "text-default-500",
+                            }, startContent: 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 (jsx(Button$1, { isIconOnly: true, color: "secondary", variant: "flat", startContent: jsx(IconComponent, { icon: "solar:bell-bing-linear" }), children: notificationCount > 0 && (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 (jsxs("header", { className: "header__container", children: [jsx(Button$1, { className: "sm:hidden", isIconOnly: true, variant: "light", startContent: jsx(IconComponent, { icon: "solar:hamburger-menu-linear" }), onPress: onMenuClick }), jsxs("div", { className: "flex items-center gap-4", children: [jsx(NotificationButton, { notificationCount: notificationCount }), 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 (jsx(Button$1, __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 (jsx(Card$1, __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 = useId();
+    var inputId = id || generatedId;
+    return (jsx(Input$1, __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 = useId();
+    var selectId = id || generatedId;
+    return (jsx("div", { className: "group", children: jsx(Select$1, __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",
@@ -1072,4 +1222,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, UploadFile, sizeMap, themeColors, useThemeContext };
+export { AutoComplete, Button, Card, HeaderComponent, IconComponent, Input, MenuComponent, Phone, Select, ThemeContext, ThemePicker, ThemeProvider, UploadFile, sizeMap, themeColors, useThemeContext };

package/dist/types/components/autocomplete/AutoComplete.d.ts

@@ -0,0 +1,13 @@
+import type React from "react";
+import type { AutoCompleteProps } from "./AutoComplete.types";
+/**
+ * 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)
+ */
+export declare const AutoComplete: React.FC<AutoCompleteProps>;
+//# sourceMappingURL=AutoComplete.d.ts.map

package/dist/types/components/autocomplete/AutoComplete.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutoComplete.d.ts","sourceRoot":"","sources":["../../../../src/components/autocomplete/AutoComplete.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAE9D;;;;;;;;GAQG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAsCpD,CAAC"}

package/dist/types/components/autocomplete/AutoComplete.types.d.ts

@@ -0,0 +1,8 @@
+import type { AutocompleteProps as HeroUIAutocompleteProps } from "@heroui/react";
+export type AutoCompleteProps = Omit<HeroUIAutocompleteProps, "size" | "variant" | "radius"> & {
+    label?: string;
+    size?: "sm" | "md" | "lg";
+    variant?: "flat" | "bordered" | "faded" | "underlined";
+    radius?: "none" | "sm" | "md" | "lg" | "full";
+};
+//# sourceMappingURL=AutoComplete.types.d.ts.map

package/dist/types/components/autocomplete/AutoComplete.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutoComplete.types.d.ts","sourceRoot":"","sources":["../../../../src/components/autocomplete/AutoComplete.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,IAAI,uBAAuB,EAAE,MAAM,eAAe,CAAC;AAElF,MAAM,MAAM,iBAAiB,GAAG,IAAI,CACnC,uBAAuB,EACvB,MAAM,GAAG,SAAS,GAAG,QAAQ,CAC7B,GAAG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,OAAO,GAAG,YAAY,CAAC;IACvD,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;CAC9C,CAAC"}

package/dist/types/components/autocomplete/index.d.ts

@@ -0,0 +1,3 @@
+export { AutoComplete } from "./AutoComplete.js";
+export type { AutoCompleteProps } from "./AutoComplete.types.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/types/components/autocomplete/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/autocomplete/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,YAAY,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC"}