@beweco/aurora-ui 0.0.6 → 0.0.8

package/dist/assets/output-Ck0ffzyL.css

@@ -0,0 +1,73 @@
+.container__menu {
+  @apply relative
+    flex
+    h-screen
+    bg-transparent
+    transition-all
+    duration-300;
+}
+.container__menu--expanded {
+  @apply max-w-72
+        flex-1
+        flex-col
+        xs:p-0
+        sm:px-4
+        sm:py-6
+        xs:rounded-r-xl
+        xs:bg-default-100
+        sm:bg-transparent
+        xs:fixed
+        xs:left-0
+        xs:top-0
+        xs:z-50
+        xs:w-full
+        xs:h-full;
+}
+.container__menu--collapsed {
+  @apply max-w-24
+            flex-1
+            flex-col
+            p-4;
+}
+.container__menu--collapsed .content__menu {
+  @apply px-2 py-6;
+}
+.container__menu--collapsed .content__menu--header {
+  @apply flex-col gap-4;
+}
+.container__menu--collapsed .content__menu--user {
+  @apply justify-center py-0;
+}
+.container__menu--collapsed .collapsible-item {
+  opacity: 0;
+  max-width: 0;
+}
+
+.content__menu {
+  @apply w-full
+    h-full
+    rounded-2xl
+    p-6
+    bg-default-100
+    flex
+    flex-col;
+}
+.content__menu--header {
+  @apply flex
+        items-center
+        gap-2
+        justify-between;
+}
+.content__menu--user {
+  @apply flex
+        items-center
+        py-3;
+}
+
+.collapsible-item {
+  transition: all 300ms ease-in-out;
+  opacity: 1;
+  max-width: 1000px;
+  overflow: hidden;
+  white-space: nowrap;
+}

package/dist/index.cjs.js

@@ -1,9 +1,10 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var react$1 = require('@heroui/react');
-var react = require('react');
-var react$2 = require('@iconify/react');
+var react = require('@heroui/react');
+var React = require('react');
+var react$1 = require('@iconify/react');
+var useTheme = require('@heroui/use-theme');
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -56,10 +57,10 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
  */
 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 () {
+    React.useEffect(function () {
         // console.log("estamos dentro del botnon");
     }, []);
-    return (jsxRuntime.jsx(react$1.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 })));
+    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 sizeMap = {
@@ -72,16 +73,299 @@ var IconComponent = function (_a) {
     var _b;
     var icon = _a.icon, _c = _a.size, size = _c === void 0 ? "md" : _c, className = _a.className, style = _a.style, color = _a.color, hFlip = _a.hFlip, vFlip = _a.vFlip, flip = _a.flip, rotate = _a.rotate, nativeProps = __rest(_a, ["icon", "size", "className", "style", "color", "hFlip", "vFlip", "flip", "rotate"]);
     var iconSize = (_b = sizeMap[size]) !== null && _b !== void 0 ? _b : sizeMap.md;
-    return (jsxRuntime.jsx("span", __assign({}, nativeProps, { children: jsxRuntime.jsx(react$2.Icon, { icon: icon, width: iconSize, height: iconSize, className: className, style: style, color: color, hFlip: hFlip, vFlip: vFlip, flip: flip, rotate: rotate }) })));
+    return (jsxRuntime.jsx("span", __assign({}, nativeProps, { children: jsxRuntime.jsx(react$1.Icon, { icon: icon, width: iconSize, height: iconSize, className: className, style: style, color: color, hFlip: hFlip, vFlip: vFlip, flip: flip, rotate: rotate }) })));
 };
 
-var MenuPrueba = function (_a) {
-    var logo = _a.logo, company = _a.company, user = _a.user, items = _a.items, _b = _a.collapsed, collapsed = _b === void 0 ? false : _b, onCollapse = _a.onCollapse;
-    return (jsxRuntime.jsxs("aside", { className: "h-screen flex flex-col bg-transparent border-r border-gray-800 transition-all duration-300", style: { minWidth: collapsed ? 80 : 256, maxWidth: collapsed ? 80 : 256 }, children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-3 px-6 py-5 border-b border-gray-800", children: [jsxRuntime.jsx("img", { src: logo, alt: company, className: "rounded-full bg-white", style: { width: 40, height: 40 } }), !collapsed && (jsxRuntime.jsx("span", { className: "font-bold uppercase text-base tracking-widest text-white", children: company })), jsxRuntime.jsx("button", { type: "button", className: "ml-auto text-white opacity-60 hover:opacity-100 bg-transparent", onClick: onCollapse, "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar", children: collapsed ? "»" : "«" })] }), jsxRuntime.jsxs("div", { className: "flex items-center gap-3 px-6 py-4 border-b border-gray-800", children: [jsxRuntime.jsx("img", { src: user.avatar, alt: user.name, className: "rounded-full", style: { width: 36, height: 36 } }), !collapsed && (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("div", { className: "font-semibold text-white text-sm", children: user.name }), jsxRuntime.jsx("div", { className: "text-xs text-gray-400", children: user.email })] }))] }), jsxRuntime.jsx("nav", { className: "flex-1 mt-4", children: jsxRuntime.jsx("ul", { className: "flex flex-col gap-1", children: items.map(function (item, _idx) { return (jsxRuntime.jsx("li", { className: "list-none", children: jsxRuntime.jsxs("button", { type: "button", className: "flex items-center w-full gap-3 px-6 py-3 cursor-pointer transition-colors bg-transparent ".concat(item.selected
-                                ? "bg-gray-800 text-white font-semibold"
-                                : "hover:bg-gray-800 text-gray-300"), onClick: item.onClick, children: [jsxRuntime.jsx("span", { className: "text-lg", children: item.icon }), !collapsed && jsxRuntime.jsx("span", { className: "text-base", children: item.label })] }) }, item.label)); }) }) }), jsxRuntime.jsx("div", { className: "px-6 py-4 text-xs text-gray-500 border-t border-gray-800", children: !collapsed && "© BeweOS" })] }));
+function normalizeClass(value) {
+    if (typeof value === "string") {
+        return value || undefined;
+    }
+    if (Array.isArray(value)) {
+        return value.filter(Boolean).join(" ") || undefined;
+    }
+    return undefined;
+}
+var getSectionClasses = function (isCollapsed, sectionClassesProp) {
+    if (sectionClassesProp === void 0) { sectionClassesProp = {}; }
+    return (__assign(__assign({}, Object.fromEntries(Object.entries(sectionClassesProp).map(function (_a) {
+        var k = _a[0], v = _a[1];
+        return [k, normalizeClass(v)];
+    }))), { base: normalizeClass(react.cn(sectionClassesProp === null || sectionClassesProp === void 0 ? void 0 : sectionClassesProp.base, "w-full", {
+            "p-0 max-w-[44px]": isCollapsed,
+        })), group: normalizeClass(react.cn(sectionClassesProp === null || sectionClassesProp === void 0 ? void 0 : sectionClassesProp.group, {
+            "flex flex-col gap-1": isCollapsed,
+        })), heading: normalizeClass(react.cn(sectionClassesProp === null || sectionClassesProp === void 0 ? void 0 : sectionClassesProp.heading, {
+            hidden: isCollapsed,
+        })) }));
+};
+var getItemClasses = function (isCollapsed, itemClassesProp) {
+    if (itemClassesProp === void 0) { itemClassesProp = {}; }
+    return (__assign(__assign({}, Object.fromEntries(Object.entries(itemClassesProp).map(function (_a) {
+        var k = _a[0], v = _a[1];
+        return [k, normalizeClass(v)];
+    }))), { base: normalizeClass(react.cn(itemClassesProp === null || itemClassesProp === void 0 ? void 0 : itemClassesProp.base, {
+            "w-11 h-11 gap-0 p-0": isCollapsed,
+        })) }));
+};
+
+var EnumMenuNavListItem;
+(function (EnumMenuNavListItem) {
+    EnumMenuNavListItem["Nest"] = "nest";
+})(EnumMenuNavListItem || (EnumMenuNavListItem = {}));
+
+/**
+ * @component MenuNavList
+ * @description A versatile navigation list component that can be displayed in an expanded or collapsed state.
+ * It supports nested items, sections, and tooltips for items in the collapsed state.
+ *
+ * @param {MenuNavListProps} props - Props for configuring the component.
+ * @param {MenuNavListItem[]} props.items - Array of items to display in the list.
+ * @param {boolean} [props.isCollapsed] - If `true`, the menu is displayed in its collapsed state (icons only).
+ * @param {React.Key} [props.defaultSelectedKey] - The key of the default selected item.
+ * @param {(key: React.Key) => void} [props.onSelect] - Callback executed when an item is selected.
+ * @param {boolean} [props.hideEndContent] - If `true`, hides the end content of the items.
+ * @param {object} [props.sectionClasses] - CSS classes to customize the sections.
+ * @param {object} [props.itemClasses] - CSS classes to customize the items.
+ * @param {string} [props.iconClassName] - CSS class for the icons.
+ * @param {object} [props.classNames] - CSS classes to customize the Listbox component.
+ * @param {string} [props.className] - CSS class for the main container.
+ *
+ * @forwardRef
+ */
+var MenuNavList = React.forwardRef(function (_a, ref) {
+    var items = _a.items, isCollapsed = _a.isCollapsed, defaultSelectedKey = _a.defaultSelectedKey; _a.onSelect; var hideEndContent = _a.hideEndContent, _b = _a.sectionClasses, sectionClassesProp = _b === void 0 ? {} : _b, _c = _a.itemClasses, itemClassesProp = _c === void 0 ? {} : _c, iconClassName = _a.iconClassName, classNames = _a.classNames, className = _a.className, props = __rest(_a, ["items", "isCollapsed", "defaultSelectedKey", "onSelect", "hideEndContent", "sectionClasses", "itemClasses", "iconClassName", "classNames", "className"]);
+    var _d = React.useState(defaultSelectedKey), selected = _d[0], setSelected = _d[1];
+    // Component styles
+    var sectionClasses = getSectionClasses(isCollapsed, sectionClassesProp);
+    var itemClasses = getItemClasses(isCollapsed, itemClassesProp);
+    // Handles the click event on an item, updating the selection state.
+    // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+    var handleItemPress = React.useCallback(function (item, parentKey) {
+        var keySelected = typeof parentKey === "string" ? parentKey : item.key;
+        setSelected(keySelected);
+        // Force blur to remove hover state after click.
+        if (document.activeElement instanceof HTMLElement) {
+            document.activeElement.blur();
+        }
+    }, [setSelected]);
+    // Renders the item displayed inside the Popover when the menu is collapsed.
+    var renderCompactItem = React.useCallback(function (item, parentKey) {
+        var _a, _b;
+        return (React.createElement(react.ListboxItem, __assign({}, item, { key: item.key, endContent: (_a = item.endContent) !== null && _a !== void 0 ? _a : null, startContent: item.icon ? (jsxRuntime.jsx(IconComponent, { className: react.cn("text-default-500", "group-data-[selected=true]:text-default-600", iconClassName), icon: item.icon, size: "lg" })) : (((_b = item.startContent) !== null && _b !== void 0 ? _b : null)), textValue: item.title, title: item.title, className: "data-[hover=true]:text-default-600", onPress: function () { return handleItemPress(item, parentKey); } })));
+    }, [handleItemPress, iconClassName]);
+    // Renders a nested item, i.e., an item that has sub-items.
+    // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+    var renderNestItem = React.useCallback(function (item) {
+        var _a, _b, _c, _d, _e, _f, _g;
+        var isNestType = item.items &&
+            ((_a = item.items) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
+            (item === null || item === void 0 ? void 0 : item.type) === EnumMenuNavListItem.Nest;
+        if (isNestType) {
+            item.href = undefined;
+        }
+        return (React.createElement(react.ListboxItem, __assign({}, item, { key: item.key, classNames: {
+                base: react.cn({
+                    "h-auto p-0": !isCollapsed && isNestType,
+                }, {
+                    "inline-block w-11": isCollapsed && isNestType,
+                }, {
+                    "data-[selected=true]:bg-primary-100 h-11 justify-center items-center flex": isCollapsed && isNestType,
+                }, "rounded-large"),
+            }, endContent: isCollapsed || isNestType || hideEndContent
+                ? null
+                : ((_b = item.endContent) !== null && _b !== void 0 ? _b : null), startContent: isCollapsed || isNestType ? null : item.icon ? (jsxRuntime.jsx(IconComponent, { className: react.cn("text-default-500 group-data-[selected=true]:text-foreground", iconClassName), icon: item.icon, size: "lg" })) : (((_c = item.startContent) !== null && _c !== void 0 ? _c : null)), title: isCollapsed || isNestType ? null : item.title }),
+            isCollapsed && isNestType ? (jsxRuntime.jsxs(react.Popover, { placement: "right", offset: 10, children: [jsxRuntime.jsx(react.PopoverTrigger, { children: jsxRuntime.jsx("div", { className: "flex w-full items-center justify-center", children: jsxRuntime.jsx(react.Tooltip, { content: item.title, placement: "right", classNames: {
+                                    base: "text-default-500",
+                                }, children: jsxRuntime.jsx("div", { className: "flex w-full items-center justify-center", children: item.icon ? (jsxRuntime.jsx(IconComponent, { className: react.cn("text-default-500 group-data-[selected=true]:text-default-600", iconClassName), icon: item.icon, size: "lg" })) : (((_d = item.startContent) !== null && _d !== void 0 ? _d : null)) }) }) }) }), jsxRuntime.jsx(react.PopoverContent, { className: "p-0", children: jsxRuntime.jsxs("div", { className: "min-w-[200px] rounded-large p-2", children: [jsxRuntime.jsx("div", { className: "p-2 text-small font-semibold text-default-500", children: item.title }), jsxRuntime.jsx(react.Listbox, { className: "mt-0.5 text-default-500", "aria-label": "Nested menu items", items: item.items, variant: "flat", children: item.items && ((_e = item.items) === null || _e === void 0 ? void 0 : _e.length) > 0
+                                        ? item.items.map(function (child) {
+                                            return renderCompactItem(child, item.key);
+                                        })
+                                        : renderCompactItem(item) })] }) })] })) : null,
+            !isCollapsed && isNestType ? (jsxRuntime.jsx(react.Accordion, { className: "p-0", children: jsxRuntime.jsx(react.AccordionItem, { "aria-label": item.title, classNames: {
+                        heading: "pr-3 group-data-[selected=true]:bg-primary-100 rounded-large",
+                        trigger: "p-0",
+                        content: "py-0 pl-4",
+                    }, title: item.icon ? (jsxRuntime.jsxs("div", { className: "flex h-11 items-center gap-2 px-3 py-1.5", children: [jsxRuntime.jsx(IconComponent, { className: react.cn("text-default-500 group-data-[selected=true]:text-default-600", iconClassName), icon: item.icon, size: "lg" }), jsxRuntime.jsx("span", { className: "text-small font-medium text-default-500 group-data-[selected=true]:text-default-600", children: item.title })] })) : (((_f = item.startContent) !== null && _f !== void 0 ? _f : null)), children: item.items && ((_g = item.items) === null || _g === void 0 ? void 0 : _g.length) > 0 ? (jsxRuntime.jsx(react.Listbox, { className: "mt-0.5 text-default-500", classNames: {
+                            list: react.cn("border-l border-default-200 pl-4"),
+                        }, items: item.items, variant: "flat", children: item.items.map(function (child) { return renderItem(child, item.key); }) })) : (renderItem(item)) }, item.key) })) : null));
+    }, [isCollapsed, hideEndContent, iconClassName, items, selected]);
+    // Renders a simple item (without children) in the navigation list.
+    // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+    var renderItem = React.useCallback(function (item, parentKey) {
+        var _a, _b, _c, _d;
+        var isNestType = item.items &&
+            ((_a = item.items) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
+            (item === null || item === void 0 ? void 0 : item.type) === EnumMenuNavListItem.Nest;
+        if (isNestType) {
+            return renderNestItem(item);
+        }
+        var isItemSelected = selected === item.key;
+        return (React.createElement(react.ListboxItem, __assign({}, item, { key: item.key, endContent: isCollapsed || hideEndContent ? null : ((_b = item.endContent) !== null && _b !== void 0 ? _b : null), startContent: isCollapsed ? null : item.icon ? (jsxRuntime.jsx(IconComponent, { className: react.cn("text-default-500", "group-data-[selected=true]:text-default-600", iconClassName), icon: item.icon, size: "lg" })) : (((_c = item.startContent) !== null && _c !== void 0 ? _c : null)), textValue: item.title, title: isCollapsed ? null : item.title, onPress: function () { return handleItemPress(item, parentKey); }, "aria-selected": isItemSelected, "aria-label": item.title || "Menu item ".concat(item.key) }), isCollapsed ? (jsxRuntime.jsx(react.Tooltip, { content: item.title, placement: "right", closeDelay: 200, shouldCloseOnBlur: false, classNames: {
+                base: "text-default-500",
+            }, children: jsxRuntime.jsx("div", { className: "flex w-full items-center justify-center", "aria-hidden": "true", children: item.icon ? (jsxRuntime.jsx(IconComponent, { className: react.cn("text-default-500", "group-data-[selected=true]:text-default-600", iconClassName), icon: item.icon, size: "lg" })) : (((_d = item.startContent) !== null && _d !== void 0 ? _d : null)) }) })) : null));
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [isCollapsed, hideEndContent, iconClassName, itemClasses === null || itemClasses === void 0 ? void 0 : itemClasses.base]);
+    return (jsxRuntime.jsx(react.Listbox, __assign({ ref: ref, hideSelectedIcon: true, as: "nav", className: react.cn("list-none", className), classNames: __assign(__assign({}, classNames), { list: react.cn("items-center", classNames === null || classNames === void 0 ? void 0 : classNames.list) }), color: "default", itemClasses: __assign(__assign({}, itemClasses), { base: react.cn("px-3 min-h-11 rounded-large h-[44px] data-[selected=true]:bg-primary-100", itemClasses === null || itemClasses === void 0 ? void 0 : itemClasses.base), title: react.cn("text-small font-medium text-default-500 group-data-[selected=true]:text-default-600 ", itemClasses === null || itemClasses === void 0 ? void 0 : itemClasses.title) }), items: items, selectedKeys: [selected], selectionMode: "single", variant: "flat" }, props, { children: function (item) {
+            var _a, _b;
+            return item.items &&
+                ((_a = item.items) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
+                (item === null || item === void 0 ? void 0 : item.type) === EnumMenuNavListItem.Nest ? (renderNestItem(item)) : item.items && ((_b = item.items) === null || _b === void 0 ? void 0 : _b.length) > 0 ? (jsxRuntime.jsx(react.ListboxSection, { classNames: sectionClasses, showDivider: isCollapsed, title: item.title, children: item.items.map(renderItem) }, item.key)) : (renderItem(item));
+        } }), isCollapsed ? "compact" : "default"));
+});
+MenuNavList.displayName = "MenuNavList";
+
+/**
+ * Sidebar menu component for navigation and user actions.
+ * @param commerceInfo - Object with logo and name of the company.
+ * @param userInfo - Object with user avatar, name, and email.
+ * @param helpButton - Help button configuration.
+ * @param upgradeCard - Optional upgrade card configuration.
+ * @param isOpenSidebar - Controls sidebar visibility.
+ * @param onOpenSidebarChange - Callback to open/close sidebar.
+ */
+var MenuComponent = React.memo(function Menu(_a) {
+    var commerceInfo = _a.commerceInfo, userInfo = _a.userInfo, helpButton = _a.helpButton, upgradeCard = _a.upgradeCard, isOpenSidebar = _a.isOpenSidebar, onOpenSidebarChange = _a.onOpenSidebarChange, menuItems = _a.menuItems;
+    // State to control menu collapse on desktop devices
+    var _b = React.useState(false), isCollapsed = _b[0], setIsCollapsed = _b[1];
+    // Memoized handlers for performance
+    var handleSidebarClose = React.useCallback(function () {
+        onOpenSidebarChange === null || onOpenSidebarChange === void 0 ? void 0 : onOpenSidebarChange(false);
+    }, [onOpenSidebarChange]);
+    var handleCollapseToggle = React.useCallback(function () {
+        setIsCollapsed(function (prev) { return !prev; });
+    }, []);
+    var handleUpgradeClick = React.useCallback(function () {
+        if (upgradeCard) {
+            window.open(upgradeCard.buttonLink, "_blank");
+        }
+    }, [upgradeCard]);
+    var handleHelpClick = React.useCallback(function () {
+        window.open(helpButton.redirect, "_blank");
+    }, [helpButton]);
+    if (!isOpenSidebar) {
+        return null;
+    }
+    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
+                                                ? "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 })) }) })] }) })] }));
+});
+
+// Lista simple de países con bandera emoji y código
+var countries = [
+    { code: "+57", name: "Colombia", flag: "🇨🇴" },
+    { code: "+54", name: "Argentina", flag: "🇦🇷" },
+    { code: "+55", name: "Brazil", flag: "🇧🇷" },
+    { code: "+52", name: "Mexico", flag: "🇲🇽" },
+    { code: "+503", name: "El Salvador", flag: "🇸🇻" },
+    { code: "+51", name: "Peru", flag: "🇵🇪" },
+    { code: "+56", name: "Chile", flag: "🇨🇱" },
+    { code: "+1", name: "United States", flag: "🇺🇸" },
+    { code: "+7", name: "Russia", flag: "🇷🇺" },
+    { code: "+20", name: "Egypt", flag: "🇪🇬" },
+    { code: "+27", name: "South Africa", flag: "🇿🇦" },
+    { code: "+33", name: "France", flag: "🇫🇷" },
+    { code: "+34", name: "Spain", flag: "🇪🇸" },
+    { code: "+39", name: "Italy", flag: "🇮🇹" },
+    { code: "+44", name: "United Kingdom", flag: "🇬🇧" },
+    { code: "+49", name: "Germany", flag: "🇩🇪" },
+    { code: "+51", name: "Peru", flag: "🇵🇪" },
+    { code: "+52", name: "Mexico", flag: "🇲🇽" },
+    { code: "+54", name: "Argentina", flag: "🇦🇷" },
+    { code: "+55", name: "Brazil", flag: "🇧🇷" },
+    { code: "+56", name: "Chile", flag: "🇨🇱" },
+    { code: "+57", name: "Colombia", flag: "🇨🇴" },
+    { code: "+60", name: "Malaysia", flag: "🇲🇾" },
+    { code: "+61", name: "Australia", flag: "🇦🇺" },
+    { code: "+62", name: "Indonesia", flag: "🇮🇩" },
+    { code: "+64", name: "New Zealand", flag: "🇳🇿" },
+    { code: "+65", name: "Singapore", flag: "🇸🇬" },
+    { code: "+66", name: "Thailand", flag: "🇹🇭" },
+    { code: "+81", name: "Japan", flag: "🇯🇵" },
+    { code: "+82", name: "South Korea", flag: "🇰🇷" },
+    { code: "+84", name: "Vietnam", flag: "🇻🇳" },
+    { code: "+86", name: "China", flag: "🇨🇳" },
+    { code: "+91", name: "India", flag: "🇮🇳" },
+    { code: "+351", name: "Portugal", flag: "🇵🇹" },
+    { code: "+503", name: "El Salvador", flag: "🇸🇻" },
+    { code: "+966", name: "Saudi Arabia", flag: "🇸🇦" },
+    { code: "+971", name: "UAE", flag: "🇦🇪" },
+];
+var uniqueCountries = Array.from(new Map(countries.map(function (item) { return [item.code + item.name, item]; })).values());
+var Phone = function (_a) {
+    var _b = _a.label, label = _b === void 0 ? "Teléfono" : _b, _c = _a.required, required = _c === void 0 ? false : _c, _d = _a.error, error = _d === void 0 ? false : _d, _e = _a.errorText, errorText = _e === void 0 ? "" : _e, _f = _a.value, value = _f === void 0 ? "" : _f, onChange = _a.onChange, _g = _a.disabled, disabled = _g === void 0 ? false : _g, _h = _a.name, name = _h === void 0 ? "phone" : _h;
+    var _j = React.useState(false), isDropdownOpen = _j[0], setIsDropdownOpen = _j[1];
+    var _k = React.useState(uniqueCountries[0]), selectedCountry = _k[0], setSelectedCountry = _k[1];
+    var _l = React.useState(""), inputValue = _l[0], setInputValue = _l[1];
+    var dropdownRef = React.useRef(null);
+    var _m = React.useState(uniqueCountries), filteredCountries = _m[0], setFilteredCountries = _m[1];
+    // Sincroniza valor externo
+    React.useEffect(function () {
+        if (value) {
+            // Si value incluye el código, lo separamos
+            var found = uniqueCountries.find(function (c) { return value.startsWith(c.code); });
+            if (found) {
+                setSelectedCountry(found);
+                setInputValue(value.replace(found.code, "").trim());
+            }
+            else {
+                setInputValue(value);
+            }
+        }
+    }, [value]);
+    // Open dropdown: reset filteredCountries
+    React.useEffect(function () {
+        if (isDropdownOpen) {
+            setFilteredCountries(uniqueCountries);
+        }
+    }, [isDropdownOpen]);
+    // Cierra dropdown al hacer click fuera
+    React.useEffect(function () {
+        var handleClickOutside = function (event) {
+            if (dropdownRef.current &&
+                !dropdownRef.current.contains(event.target)) {
+                setIsDropdownOpen(false);
+            }
+        };
+        if (isDropdownOpen) {
+            document.addEventListener("mousedown", handleClickOutside);
+        }
+        return function () {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [isDropdownOpen]);
+    var handleCountrySelect = function (country) {
+        setSelectedCountry(country);
+        setIsDropdownOpen(false);
+        if (onChange) {
+            onChange(country.code + inputValue);
+        }
+    };
+    var handleInputChange = function (e) {
+        // Solo números
+        var val = e.target.value.replace(/\D/g, "");
+        setInputValue(val);
+        if (onChange) {
+            onChange(selectedCountry.code + val);
+        }
+    };
+    return (jsxRuntime.jsxs("div", { className: "flex flex-col gap-1 w-full relative", children: [label && (jsxRuntime.jsxs("label", { htmlFor: "phone-input-".concat(name), className: "text-sm font-medium text-gray-700 dark:text-gray-200 mb-1", children: [label, " ", required && jsxRuntime.jsx("span", { className: "text-pink-600", children: "*" })] })), jsxRuntime.jsxs("div", { className: "flex items-center w-full min-h-[56px] bg-white dark:bg-gray-900 transition-colors shadow-sm border border-[#E4E4E7] dark:border-gray-700 rounded-2xl focus-within:border-blue-500 dark:focus-within:border-blue-400 ".concat(error
+                    ? "border-pink-500 dark:border-pink-600"
+                    : "border-[#E4E4E7] dark:border-gray-700").concat(disabled ? " bg-gray-100 dark:bg-gray-800 opacity-60" : ""), children: [jsxRuntime.jsxs("div", { className: "relative ml-2", ref: dropdownRef, children: [jsxRuntime.jsxs("button", { type: "button", 
+                                ///bg-gray-100
+                                className: "flex items-center gap-1 px-4 h-10 rounded-xl  dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none transition-colors", onClick: function () { return setIsDropdownOpen(function (v) { return !v; }); }, disabled: disabled, tabIndex: 0, "aria-label": "Seleccionar pa\u00EDs", children: [jsxRuntime.jsx("span", { className: "text-lg", children: selectedCountry.flag }), jsxRuntime.jsx("span", { className: "text-xs text-gray-700 dark:text-gray-200", children: selectedCountry.code }), jsxRuntime.jsxs("svg", { className: "w-4 h-4 text-gray-400 dark:text-gray-300 ml-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", role: "img", "aria-label": "Desplegar lista de pa\u00EDses", children: [jsxRuntime.jsx("title", { children: "Desplegar lista de pa\u00EDses" }), jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" })] })] }), isDropdownOpen && (jsxRuntime.jsxs("div", { className: "absolute z-30 mt-2 w-60 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg", children: [jsxRuntime.jsx("div", { className: "p-2", children: jsxRuntime.jsx("input", { type: "text", className: "w-full px-3 py-2 text-sm bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 text-gray-900 dark:text-gray-100 rounded-lg focus:outline-none focus:border-blue-500 dark:focus:border-blue-400", placeholder: "Buscar pa\u00EDs...", onChange: function (e) {
+                                                var searchTerm = e.target.value.toLowerCase();
+                                                var filtered = uniqueCountries.filter(function (country) {
+                                                    return country.name.toLowerCase().includes(searchTerm) ||
+                                                        country.code.toLowerCase().includes(searchTerm);
+                                                });
+                                                setFilteredCountries(filtered);
+                                            } }) }), jsxRuntime.jsx("div", { className: "max-h-60 overflow-y-auto", children: filteredCountries.length > 0 ? (filteredCountries.map(function (country) { return (jsxRuntime.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: [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: "No se encontraron pa\u00EDses" })) })] }))] }), 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: "N\u00FAmero de tel\u00E9fono", value: inputValue, onChange: handleInputChange, 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 }))] }));
 };
-MenuPrueba.displayName = "MenuPrueba";
 
 var themeColors = {
     "purple-light": {
@@ -262,13 +546,13 @@ var themeColors = {
     },
 };
 
-var ThemeContext = react.createContext({
+var ThemeContext = React.createContext({
     theme: "light",
     // biome-ignore lint/suspicious/noEmptyBlockStatements: <explanation>
     setTheme: function () { },
 });
 var useThemeContext = function () {
-    var context = react.useContext(ThemeContext);
+    var context = React.useContext(ThemeContext);
     if (!context) {
         throw new Error("useThemeContext debe ser usado dentro de un ThemeProvider");
     }
@@ -277,13 +561,14 @@ var useThemeContext = function () {
 
 var ThemeProvider = function (_a) {
     var children = _a.children;
-    var _b = useThemeContext(), theme = _b.theme, setTheme = _b.setTheme;
+    var _b = useTheme.useTheme(), theme = _b.theme, setTheme = _b.setTheme;
     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.IconComponent = IconComponent;
-exports.MenuPrueba = MenuPrueba;
+exports.MenuComponent = MenuComponent;
+exports.Phone = Phone;
 exports.ThemeContext = ThemeContext;
 exports.ThemeProvider = ThemeProvider;
 exports.sizeMap = sizeMap;