@beweco/aurora-ui 0.1.50 → 0.1.53

package/dist/index.cjs.js

@@ -1674,32 +1674,42 @@ var H4 = function (_a) {
  * ```
  */
 var BreadcrumbsComponent = function (_a) {
-    var items = _a.items, children = _a.children, heroUIProps = __rest(_a, ["items", "children"]);
+    var items = _a.items, children = _a.children, onItemClick = _a.onItemClick, heroUIProps = __rest(_a, ["items", "children", "onItemClick"]);
     return (jsxRuntime.jsx(react.Breadcrumbs, __assign({}, heroUIProps, { children: items
-            ? items.map(function (item, index) { return (jsxRuntime.jsx(react.BreadcrumbItem, { href: item.href, isCurrent: item.isCurrent, children: item.label }, "".concat(item.href || item.label, "-").concat(index))); })
+            ? items.map(function (item, index) { return (jsxRuntime.jsx(react.BreadcrumbItem, __assign({}, (onItemClick && item.href && !item.isCurrent
+                ? { onPress: function () { return onItemClick(item.href); } }
+                : { href: item.href }), { isCurrent: item.isCurrent, children: item.label }), "".concat(item.href || item.label, "-").concat(index))); })
             : children })));
 };
 
 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-100 data-[hover=true]:text-default-700", classNames: {
+    var options = _a.options, onLogout = _a.onLogout, onOptionSelect = _a.onOptionSelect, 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, __assign({}, (onOptionSelect
+                            ? { onPress: function () { return onOptionSelect(item.href); } }
+                            : { href: item.href }), { className: "data-[hover=true]:bg-primary-100 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-100 data-[hover=true]:text-default-700", classNames: {
+                            }, 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-100 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") })] })] }));
+                            }, startContent: jsxRuntime.jsx(IconComponent, { icon: "solar:logout-2-linear" }), children: translations === null || translations === void 0 ? void 0 : translations.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 })) }));
+    var _b = _a.notificationCount, notificationCount = _b === void 0 ? 0 : _b, onPress = _a.onPress;
+    var handlePress = function () {
+        onPress === null || onPress === void 0 ? void 0 : onPress();
+    };
+    return (jsxRuntime.jsx(react.Button, { isIconOnly: true, color: "secondary", variant: "flat", startContent: jsxRuntime.jsx(IconComponent, { icon: "solar:bell-bing-linear" }), onPress: handlePress, children: notificationCount > 0 && (jsxRuntime.jsx("span", { className: "notification__alert", children: notificationCount })) }));
 };
 NotificationButton.displayName = "NotificationButton";
 
+var DEFAULT_TRANSLATIONS$3 = {
+    logout: "Cerrar sesión",
+};
 var HeaderComponent = function (_a) {
-    var notificationCount = _a.notificationCount, options = _a.options, onMenuClick = _a.onMenuClick, onLogout = _a.onLogout, translations = _a.translations, breadcrumbs = _a.breadcrumbs;
-    return (jsxRuntime.jsx("header", { className: "header__container", children: jsxRuntime.jsxs("div", { className: "flex items-center justify-between w-full", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [jsxRuntime.jsx(react.Button, { className: "sm:hidden", isIconOnly: true, variant: "light", startContent: jsxRuntime.jsx(IconComponent, { icon: "solar:hamburger-menu-linear" }), onPress: onMenuClick }), breadcrumbs && breadcrumbs.length > 0 && (jsxRuntime.jsx(BreadcrumbsComponent, { items: breadcrumbs }))] }), jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [jsxRuntime.jsx(NotificationButton, { notificationCount: notificationCount }), jsxRuntime.jsx(ConfigMenu, { options: options, onLogout: onLogout, translations: translations })] })] }) }));
+    var notificationCount = _a.notificationCount, options = _a.options, onMenuClick = _a.onMenuClick, onLogout = _a.onLogout, _b = _a.translations, translations = _b === void 0 ? {} : _b, breadcrumbs = _a.breadcrumbs, onNotificationClick = _a.onNotificationClick, onOptionSelect = _a.onOptionSelect, onBreadcrumbClick = _a.onBreadcrumbClick;
+    var t = __assign(__assign({}, DEFAULT_TRANSLATIONS$3), translations);
+    return (jsxRuntime.jsx("header", { className: "header__container", children: jsxRuntime.jsxs("div", { className: "flex items-center justify-between w-full", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [jsxRuntime.jsx(react.Button, { className: "sm:hidden", isIconOnly: true, variant: "light", startContent: jsxRuntime.jsx(IconComponent, { icon: "solar:hamburger-menu-linear" }), onPress: onMenuClick }), breadcrumbs && breadcrumbs.length > 0 && (jsxRuntime.jsx(BreadcrumbsComponent, { items: breadcrumbs, onItemClick: onBreadcrumbClick }))] }), jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [jsxRuntime.jsx(NotificationButton, { notificationCount: notificationCount, onPress: onNotificationClick }), jsxRuntime.jsx(ConfigMenu, { options: options, onLogout: onLogout, onOptionSelect: onOptionSelect, translations: t })] })] }) }));
 };
 HeaderComponent.displayName = "Header";
 
@@ -2021,25 +2031,27 @@ var EnumMenuNavListItem;
  * @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 items = _a.items, isCollapsed = _a.isCollapsed, defaultSelectedKey = _a.defaultSelectedKey, onSelect = _a.onSelect, 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.
+    // Handles the click event on an item, updating the selection state
+    // and notifying the consumer via onSelect for programmatic navigation.
     // 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.
+        onSelect === null || onSelect === void 0 ? void 0 : onSelect(keySelected, item.href);
         if (document.activeElement instanceof HTMLElement) {
             document.activeElement.blur();
         }
-    }, [setSelected]);
+    }, [setSelected, onSelect]);
     // 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); } })));
+        item.href; var itemProps = __rest(item, ["href"]);
+        return (React.createElement(react.ListboxItem, __assign({}, itemProps, { 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>
@@ -2048,10 +2060,8 @@ var MenuNavList = React.forwardRef(function (_a, ref) {
         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: {
+        item.href; var itemProps = __rest(item, ["href"]);
+        return (React.createElement(react.ListboxItem, __assign({}, itemProps, { key: item.key, classNames: {
                 base: react.cn({
                     "h-auto p-0": !isCollapsed && isNestType,
                 }, {
@@ -2088,7 +2098,8 @@ var MenuNavList = React.forwardRef(function (_a, ref) {
             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: {
+        item.href; var itemProps = __rest(item, ["href"]);
+        return (React.createElement(react.ListboxItem, __assign({}, itemProps, { 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));
     }, 
@@ -2138,7 +2149,7 @@ var MenuComponent = React.memo(function Menu(_a) {
                     ? "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 ", 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-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 })) }) })] }) })] }));
+                                                : "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, onSelect: menuItems.onSelect }) }) }), 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 })) }) })] }) })] }));
 });
 
 var StepIndicator = function (_a) {

package/dist/index.esm.js

@@ -1675,32 +1675,42 @@ var H4 = function (_a) {
  * ```
  */
 var BreadcrumbsComponent = function (_a) {
-    var items = _a.items, children = _a.children, heroUIProps = __rest(_a, ["items", "children"]);
+    var items = _a.items, children = _a.children, onItemClick = _a.onItemClick, heroUIProps = __rest(_a, ["items", "children", "onItemClick"]);
     return (jsx(Breadcrumbs, __assign({}, heroUIProps, { children: items
-            ? items.map(function (item, index) { return (jsx(BreadcrumbItem, { href: item.href, isCurrent: item.isCurrent, children: item.label }, "".concat(item.href || item.label, "-").concat(index))); })
+            ? items.map(function (item, index) { return (jsx(BreadcrumbItem, __assign({}, (onItemClick && item.href && !item.isCurrent
+                ? { onPress: function () { return onItemClick(item.href); } }
+                : { href: item.href }), { isCurrent: item.isCurrent, children: item.label }), "".concat(item.href || item.label, "-").concat(index))); })
             : children })));
 };
 
 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-100 data-[hover=true]:text-default-700", classNames: {
+    var options = _a.options, onLogout = _a.onLogout, onOptionSelect = _a.onOptionSelect, 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, __assign({}, (onOptionSelect
+                            ? { onPress: function () { return onOptionSelect(item.href); } }
+                            : { href: item.href }), { className: "data-[hover=true]:bg-primary-100 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-100 data-[hover=true]:text-default-700", classNames: {
+                            }, 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-100 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") })] })] }));
+                            }, startContent: jsx(IconComponent, { icon: "solar:logout-2-linear" }), children: translations === null || translations === void 0 ? void 0 : translations.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 })) }));
+    var _b = _a.notificationCount, notificationCount = _b === void 0 ? 0 : _b, onPress = _a.onPress;
+    var handlePress = function () {
+        onPress === null || onPress === void 0 ? void 0 : onPress();
+    };
+    return (jsx(Button$1, { isIconOnly: true, color: "secondary", variant: "flat", startContent: jsx(IconComponent, { icon: "solar:bell-bing-linear" }), onPress: handlePress, children: notificationCount > 0 && (jsx("span", { className: "notification__alert", children: notificationCount })) }));
 };
 NotificationButton.displayName = "NotificationButton";
 
+var DEFAULT_TRANSLATIONS$3 = {
+    logout: "Cerrar sesión",
+};
 var HeaderComponent = function (_a) {
-    var notificationCount = _a.notificationCount, options = _a.options, onMenuClick = _a.onMenuClick, onLogout = _a.onLogout, translations = _a.translations, breadcrumbs = _a.breadcrumbs;
-    return (jsx("header", { className: "header__container", children: jsxs("div", { className: "flex items-center justify-between w-full", children: [jsxs("div", { className: "flex items-center gap-4", children: [jsx(Button$1, { className: "sm:hidden", isIconOnly: true, variant: "light", startContent: jsx(IconComponent, { icon: "solar:hamburger-menu-linear" }), onPress: onMenuClick }), breadcrumbs && breadcrumbs.length > 0 && (jsx(BreadcrumbsComponent, { items: breadcrumbs }))] }), jsxs("div", { className: "flex items-center gap-4", children: [jsx(NotificationButton, { notificationCount: notificationCount }), jsx(ConfigMenu, { options: options, onLogout: onLogout, translations: translations })] })] }) }));
+    var notificationCount = _a.notificationCount, options = _a.options, onMenuClick = _a.onMenuClick, onLogout = _a.onLogout, _b = _a.translations, translations = _b === void 0 ? {} : _b, breadcrumbs = _a.breadcrumbs, onNotificationClick = _a.onNotificationClick, onOptionSelect = _a.onOptionSelect, onBreadcrumbClick = _a.onBreadcrumbClick;
+    var t = __assign(__assign({}, DEFAULT_TRANSLATIONS$3), translations);
+    return (jsx("header", { className: "header__container", children: jsxs("div", { className: "flex items-center justify-between w-full", children: [jsxs("div", { className: "flex items-center gap-4", children: [jsx(Button$1, { className: "sm:hidden", isIconOnly: true, variant: "light", startContent: jsx(IconComponent, { icon: "solar:hamburger-menu-linear" }), onPress: onMenuClick }), breadcrumbs && breadcrumbs.length > 0 && (jsx(BreadcrumbsComponent, { items: breadcrumbs, onItemClick: onBreadcrumbClick }))] }), jsxs("div", { className: "flex items-center gap-4", children: [jsx(NotificationButton, { notificationCount: notificationCount, onPress: onNotificationClick }), jsx(ConfigMenu, { options: options, onLogout: onLogout, onOptionSelect: onOptionSelect, translations: t })] })] }) }));
 };
 HeaderComponent.displayName = "Header";
 
@@ -2022,25 +2032,27 @@ var EnumMenuNavListItem;
  * @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 items = _a.items, isCollapsed = _a.isCollapsed, defaultSelectedKey = _a.defaultSelectedKey, onSelect = _a.onSelect, 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 = 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.
+    // Handles the click event on an item, updating the selection state
+    // and notifying the consumer via onSelect for programmatic navigation.
     // 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.
+        onSelect === null || onSelect === void 0 ? void 0 : onSelect(keySelected, item.href);
         if (document.activeElement instanceof HTMLElement) {
             document.activeElement.blur();
         }
-    }, [setSelected]);
+    }, [setSelected, onSelect]);
     // Renders the item displayed inside the Popover when the menu is collapsed.
     var renderCompactItem = React.useCallback(function (item, parentKey) {
         var _a, _b;
-        return (createElement(ListboxItem, __assign({}, item, { key: item.key, endContent: (_a = item.endContent) !== null && _a !== void 0 ? _a : null, startContent: item.icon ? (jsx(IconComponent, { className: 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); } })));
+        item.href; var itemProps = __rest(item, ["href"]);
+        return (createElement(ListboxItem, __assign({}, itemProps, { key: item.key, endContent: (_a = item.endContent) !== null && _a !== void 0 ? _a : null, startContent: item.icon ? (jsx(IconComponent, { className: 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>
@@ -2049,10 +2061,8 @@ var MenuNavList = React.forwardRef(function (_a, ref) {
         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 (createElement(ListboxItem, __assign({}, item, { key: item.key, classNames: {
+        item.href; var itemProps = __rest(item, ["href"]);
+        return (createElement(ListboxItem, __assign({}, itemProps, { key: item.key, classNames: {
                 base: cn({
                     "h-auto p-0": !isCollapsed && isNestType,
                 }, {
@@ -2089,7 +2099,8 @@ var MenuNavList = React.forwardRef(function (_a, ref) {
             return renderNestItem(item);
         }
         var isItemSelected = selected === item.key;
-        return (createElement(ListboxItem, __assign({}, item, { key: item.key, endContent: isCollapsed || hideEndContent ? null : ((_b = item.endContent) !== null && _b !== void 0 ? _b : null), startContent: isCollapsed ? null : item.icon ? (jsx(IconComponent, { className: 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 ? (jsx(Tooltip$1, { content: item.title, placement: "right", closeDelay: 200, shouldCloseOnBlur: false, classNames: {
+        item.href; var itemProps = __rest(item, ["href"]);
+        return (createElement(ListboxItem, __assign({}, itemProps, { key: item.key, endContent: isCollapsed || hideEndContent ? null : ((_b = item.endContent) !== null && _b !== void 0 ? _b : null), startContent: isCollapsed ? null : item.icon ? (jsx(IconComponent, { className: 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 ? (jsx(Tooltip$1, { content: item.title, placement: "right", closeDelay: 200, shouldCloseOnBlur: false, classNames: {
                 base: "text-default-500",
             }, children: jsx("div", { className: "flex w-full items-center justify-center", "aria-hidden": "true", children: item.icon ? (jsx(IconComponent, { className: 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));
     }, 
@@ -2139,7 +2150,7 @@ var MenuComponent = React.memo(function Menu(_a) {
                     ? "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 ", 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$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 })) }) })] }) })] }));
+                                                : "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, onSelect: menuItems.onSelect }) }) }), 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 })) }) })] }) })] }));
 });
 
 var StepIndicator = function (_a) {

package/dist/types/components/breadcrumbs/Breadcrumbs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumbs.d.ts","sourceRoot":"","sources":["../../../../src/components/breadcrumbs/Breadcrumbs.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,qBAAqB,CAAC;AAErE;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAoBpE,CAAC"}
+{"version":3,"file":"Breadcrumbs.d.ts","sourceRoot":"","sources":["../../../../src/components/breadcrumbs/Breadcrumbs.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,qBAAqB,CAAC;AAErE;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAuBpE,CAAC"}

package/dist/types/components/breadcrumbs/Breadcrumbs.types.d.ts

@@ -39,5 +39,10 @@ export interface BreadcrumbsComponentProps extends HeroUIBreadcrumbsProps {
      * Elementos hijo (BreadcrumbItem components)
      */
     children?: React.ReactNode;
+    /**
+     * Callback for programmatic navigation when a breadcrumb item is clicked.
+     * When provided, replaces native anchor navigation with onPress.
+     */
+    onItemClick?: (href: string) => void;
 }
 //# sourceMappingURL=Breadcrumbs.types.d.ts.map

package/dist/types/components/breadcrumbs/Breadcrumbs.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumbs.types.d.ts","sourceRoot":"","sources":["../../../../src/components/breadcrumbs/Breadcrumbs.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACX,mBAAmB,IAAI,yBAAyB,EAChD,gBAAgB,IAAI,sBAAsB,EAC1C,MAAM,eAAe,CAAC;AACvB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;;GAGG;AACH,MAAM,WAAW,4BAChB,SAAQ,IAAI,CAAC,yBAAyB,EAAE,UAAU,CAAC;IACnD;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;GAGG;AACH,MAAM,WAAW,yBAA0B,SAAQ,sBAAsB;IACxE;;;OAGG;IACH,KAAK,CAAC,EAAE,4BAA4B,EAAE,CAAC;IACvC;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B"}
+{"version":3,"file":"Breadcrumbs.types.d.ts","sourceRoot":"","sources":["../../../../src/components/breadcrumbs/Breadcrumbs.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACX,mBAAmB,IAAI,yBAAyB,EAChD,gBAAgB,IAAI,sBAAsB,EAC1C,MAAM,eAAe,CAAC;AACvB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;;GAGG;AACH,MAAM,WAAW,4BAChB,SAAQ,IAAI,CAAC,yBAAyB,EAAE,UAAU,CAAC;IACnD;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;GAGG;AACH,MAAM,WAAW,yBAA0B,SAAQ,sBAAsB;IACxE;;;OAGG;IACH,KAAK,CAAC,EAAE,4BAA4B,EAAE,CAAC;IACvC;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC"}

package/dist/types/components/header/Header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../../src/components/header/Header.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAElD,OAAO,eAAe,CAAC;AAMvB,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAkCjD,CAAC"}
+{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../../src/components/header/Header.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAsB,MAAM,gBAAgB,CAAC;AAEtE,OAAO,eAAe,CAAC;AAUvB,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA8CjD,CAAC"}

package/dist/types/components/header/Header.types.d.ts

@@ -1,11 +1,22 @@
 import type { BreadcrumbItemComponentProps } from "@/components/breadcrumbs";
+/**
+ * Traducciones disponibles para el componente Header.
+ * Todas las propiedades son opcionales para permitir traducciones parciales.
+ */
+export type HeaderTranslations = {
+    /** Texto del botón/opción de cerrar sesión */
+    logout?: string;
+};
 export interface HeaderProps {
     /**
-     * The translations for the header.
+     * Traducciones i18n del componente.
+     * Si no se proporciona, usa traducciones por defecto en español.
+     * @example
+     * ```tsx
+     * <HeaderComponent translations={{ logout: "Sign out" }} />
+     * ```
      */
-    translations?: {
-        logout?: string;
-    };
+    translations?: HeaderTranslations;
     /**
      * The number of notifications to display in the badge.
      */
@@ -23,6 +34,17 @@ export interface HeaderProps {
      */
     onMenuClick?: () => void;
     onLogout?: () => void;
+    onNotificationClick?: () => void;
+    /**
+     * Callback for programmatic navigation when a config option is selected.
+     * When provided, replaces native anchor navigation with onPress.
+     */
+    onOptionSelect?: (href: string) => void;
+    /**
+     * Callback for programmatic navigation when a breadcrumb is clicked.
+     * When provided, replaces native anchor navigation with onPress.
+     */
+    onBreadcrumbClick?: (href: string) => void;
 }
 export interface HeaderOptions {
     label: string;

package/dist/types/components/header/Header.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Header.types.d.ts","sourceRoot":"","sources":["../../../../src/components/header/Header.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,0BAA0B,CAAC;AAE7E,MAAM,WAAW,WAAW;IAC3B;;OAEG;IACH,YAAY,CAAC,EAAE;QACd,MAAM,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IACF;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B;;OAEG;IACH,OAAO,EAAE,aAAa,EAAE,CAAC;IAEzB;;OAEG;IACH,WAAW,CAAC,EAAE,4BAA4B,EAAE,CAAC;IAE7C;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,MAAM,WAAW,aAAa;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACb"}
+{"version":3,"file":"Header.types.d.ts","sourceRoot":"","sources":["../../../../src/components/header/Header.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,0BAA0B,CAAC;AAE7E;;;GAGG;AACH,MAAM,MAAM,kBAAkB,GAAG;IAChC,8CAA8C;IAC9C,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,WAAW,WAAW;IAC3B;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,kBAAkB,CAAC;IAClC;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B;;OAEG;IACH,OAAO,EAAE,aAAa,EAAE,CAAC;IAEzB;;OAEG;IACH,WAAW,CAAC,EAAE,4BAA4B,EAAE,CAAC;IAE7C;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAC;IACjC;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC;;;OAGG;IACH,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3C;AAED,MAAM,WAAW,aAAa;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACb"}

package/dist/types/components/header/_internal/config-menu/ConfigMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConfigMenu.d.ts","sourceRoot":"","sources":["../../../../../../src/components/header/_internal/config-menu/ConfigMenu.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAE1D,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAgDhD,CAAC"}
+{"version":3,"file":"ConfigMenu.d.ts","sourceRoot":"","sources":["../../../../../../src/components/header/_internal/config-menu/ConfigMenu.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAE1D,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAmDhD,CAAC"}

package/dist/types/components/header/_internal/config-menu/ConfigMenu.types.d.ts

@@ -1,9 +1,12 @@
-import type { HeaderOptions } from "../../Header.types";
+import type { HeaderOptions, HeaderTranslations } from "../../Header.types";
 export interface ConfigMenuProps {
     options: HeaderOptions[];
     onLogout?: () => void;
-    translations?: {
-        logout?: string;
-    };
+    /**
+     * Callback for programmatic navigation (e.g. React Router).
+     * When provided, replaces native anchor navigation with onPress.
+     */
+    onOptionSelect?: (href: string) => void;
+    translations?: HeaderTranslations;
 }
 //# sourceMappingURL=ConfigMenu.types.d.ts.map

package/dist/types/components/header/_internal/config-menu/ConfigMenu.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConfigMenu.types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/header/_internal/config-menu/ConfigMenu.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAExD,MAAM,WAAW,eAAe;IAC/B,OAAO,EAAE,aAAa,EAAE,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,YAAY,CAAC,EAAE;QACd,MAAM,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;CACF"}
+{"version":3,"file":"ConfigMenu.types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/header/_internal/config-menu/ConfigMenu.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAE5E,MAAM,WAAW,eAAe;IAC/B,OAAO,EAAE,aAAa,EAAE,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,YAAY,CAAC,EAAE,kBAAkB,CAAC;CAClC"}

package/dist/types/components/header/_internal/notification-button/NotificationButton.d.ts

@@ -2,6 +2,7 @@ import type React from "react";
 import "./NotificationButton.scss";
 export interface NotificationButtonProps {
     notificationCount?: number;
+    onPress?: () => void;
 }
 export declare const NotificationButton: React.FC<NotificationButtonProps>;
 //# sourceMappingURL=NotificationButton.d.ts.map

package/dist/types/components/header/_internal/notification-button/NotificationButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationButton.d.ts","sourceRoot":"","sources":["../../../../../../src/components/header/_internal/notification-button/NotificationButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,2BAA2B,CAAC;AAEnC,MAAM,WAAW,uBAAuB;IACvC,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAehE,CAAC"}
+{"version":3,"file":"NotificationButton.d.ts","sourceRoot":"","sources":["../../../../../../src/components/header/_internal/notification-button/NotificationButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,2BAA2B,CAAC;AAEnC,MAAM,WAAW,uBAAuB;IACvC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAqBhE,CAAC"}

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

@@ -1,3 +1,3 @@
 export { HeaderComponent } from "./Header";
-export type { HeaderProps, HeaderOptions, } from "./Header.types";
+export type { HeaderProps, HeaderOptions, HeaderTranslations, } from "./Header.types";
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/header/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAC3C,YAAY,EACX,WAAW,EACX,aAAa,GACb,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/header/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAC3C,YAAY,EACX,WAAW,EACX,aAAa,EACb,kBAAkB,GAClB,MAAM,gBAAgB,CAAC"}

package/dist/types/components/menu/Menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../../src/components/menu/Menu.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAC3C,OAAO,aAAa,CAAC;AAGrB,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAGvD;;;;;;;;GAQG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAsLtD,CAAC"}
+{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../../src/components/menu/Menu.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAC3C,OAAO,aAAa,CAAC;AAGrB,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAGvD;;;;;;;;GAQG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAuLtD,CAAC"}

package/dist/types/components/menu/Menu.types.d.ts

@@ -22,6 +22,7 @@ export interface MenuComponentProps {
     menuItems: {
         items: MenuNavListItem[];
         selectedKey: string;
+        onSelect?: (key: string, href?: string) => void;
     };
     isOpenSidebar?: boolean;
     onOpenSidebarChange?: (open: boolean) => void;

package/dist/types/components/menu/Menu.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.types.d.ts","sourceRoot":"","sources":["../../../../src/components/menu/Menu.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,6CAA6C,CAAC;AAEnF,MAAM,WAAW,kBAAkB;IAClC,YAAY,EAAE;QACb,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,MAAM,CAAC;KACb,CAAC;IACF,QAAQ,EAAE;QACT,MAAM,EAAE,MAAM,CAAC;QACf,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,MAAM,CAAC;KACb,CAAC;IACF,UAAU,EAAE;QACX,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,EAAE,MAAM,CAAC;KACjB,CAAC;IACF,WAAW,CAAC,EAAE;QACb,KAAK,EAAE,MAAM,CAAC;QACd,WAAW,EAAE,MAAM,CAAC;QACpB,UAAU,EAAE,MAAM,CAAC;QACnB,UAAU,EAAE,MAAM,CAAC;KACnB,CAAC;IACF,SAAS,EAAE;QACV,KAAK,EAAE,eAAe,EAAE,CAAC;QACzB,WAAW,EAAE,MAAM,CAAC;KACpB,CAAC;IACF,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CAC9C"}
+{"version":3,"file":"Menu.types.d.ts","sourceRoot":"","sources":["../../../../src/components/menu/Menu.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,6CAA6C,CAAC;AAEnF,MAAM,WAAW,kBAAkB;IAClC,YAAY,EAAE;QACb,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,MAAM,CAAC;KACb,CAAC;IACF,QAAQ,EAAE;QACT,MAAM,EAAE,MAAM,CAAC;QACf,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,MAAM,CAAC;KACb,CAAC;IACF,UAAU,EAAE;QACX,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,EAAE,MAAM,CAAC;KACjB,CAAC;IACF,WAAW,CAAC,EAAE;QACb,KAAK,EAAE,MAAM,CAAC;QACd,WAAW,EAAE,MAAM,CAAC;QACpB,UAAU,EAAE,MAAM,CAAC;QACnB,UAAU,EAAE,MAAM,CAAC;KACnB,CAAC;IACF,SAAS,EAAE;QACV,KAAK,EAAE,eAAe,EAAE,CAAC;QACzB,WAAW,EAAE,MAAM,CAAC;QACpB,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;KAChD,CAAC;IACF,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CAC9C"}

package/dist/types/components/menu/_internal/menu-nav-list/MenuNavList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MenuNavList.d.ts","sourceRoot":"","sources":["../../../../../../src/components/menu/_internal/menu-nav-list/MenuNavList.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAG5D;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,WAAW,mGAuWvB,CAAC"}
+{"version":3,"file":"MenuNavList.d.ts","sourceRoot":"","sources":["../../../../../../src/components/menu/_internal/menu-nav-list/MenuNavList.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAG5D;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,WAAW,mGAwWvB,CAAC"}

package/dist/types/components/menu/_internal/menu-nav-list/MenuNavList.types.d.ts

@@ -22,6 +22,6 @@ export type MenuNavListProps = Omit<ListboxProps<MenuNavListItem>, "children"> &
     sectionClasses?: ListboxSectionProps["classNames"];
     classNames?: ListboxProps["classNames"];
     defaultSelectedKey: string;
-    onSelect?: (key: string) => void;
+    onSelect?: (key: string, href?: string) => void;
 };
 //# sourceMappingURL=MenuNavList.types.d.ts.map

package/dist/types/components/menu/_internal/menu-nav-list/MenuNavList.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MenuNavList.types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/menu/_internal/menu-nav-list/MenuNavList.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AACvE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,oBAAY,mBAAmB;IAC9B,IAAI,SAAS;CACb;AAED,MAAM,MAAM,eAAe,GAAG;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,mBAAmB,CAAC,IAAI,CAAC;IAChC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,KAAK,CAAC,EAAE,eAAe,EAAE,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAClC,YAAY,CAAC,eAAe,CAAC,EAC7B,UAAU,CACV,GAAG;IACH,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,mBAAmB,CAAC,YAAY,CAAC,CAAC;IACnD,UAAU,CAAC,EAAE,YAAY,CAAC,YAAY,CAAC,CAAC;IACxC,kBAAkB,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC,CAAC"}
+{"version":3,"file":"MenuNavList.types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/menu/_internal/menu-nav-list/MenuNavList.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AACvE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,oBAAY,mBAAmB;IAC9B,IAAI,SAAS;CACb;AAED,MAAM,MAAM,eAAe,GAAG;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,mBAAmB,CAAC,IAAI,CAAC;IAChC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,KAAK,CAAC,EAAE,eAAe,EAAE,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAClC,YAAY,CAAC,eAAe,CAAC,EAC7B,UAAU,CACV,GAAG;IACH,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,mBAAmB,CAAC,YAAY,CAAC,CAAC;IACnD,UAAU,CAAC,EAAE,YAAY,CAAC,YAAY,CAAC,CAAC;IACxC,kBAAkB,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CAChD,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@beweco/aurora-ui",
-	"version": "0.1.50",
+	"version": "0.1.53",
 	"description": "Bewe Aurora UI Component Library",
 	"main": "./dist/index.cjs.js",
 	"module": "./dist/index.esm.js",