@beweco/aurora-ui 0.6.68 → 0.6.69-qa.89

package/dist/index.cjs.js

@@ -581,9 +581,9 @@ function ChartTooltip(_a) {
             })] }));
 }
 function AreaLineChart(_a) {
-    var data = _a.data, xAxisKey = _a.xAxisKey, series = _a.series, title = _a.title, value = _a.value, trend = _a.trend, _b = _a.height, height = _b === void 0 ? 200 : _b, _c = _a.className, className = _c === void 0 ? "" : _c, _d = _a.wrappedInCard, wrappedInCard = _d === void 0 ? false : _d, formatTooltipValue = _a.formatTooltipValue;
+    var data = _a.data, xAxisKey = _a.xAxisKey, series = _a.series, title = _a.title, value = _a.value, trend = _a.trend, _b = _a.height, height = _b === void 0 ? 200 : _b, _c = _a.className, className = _c === void 0 ? "" : _c, _d = _a.wrappedInCard, wrappedInCard = _d === void 0 ? false : _d, formatTooltipValue = _a.formatTooltipValue, _e = _a.yAxisDomain, yAxisDomain = _e === void 0 ? [0, "dataMax + 100"] : _e;
     var hasHeader = title != null || value != null || trend != null || series.length > 0;
-    var content = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [hasHeader && (jsxRuntime.jsxs("div", { className: "flex items-start justify-between mb-6", children: [jsxRuntime.jsxs("div", { children: [title != null && (jsxRuntime.jsx(H3, { className: "text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1", children: title })), value != null && (jsxRuntime.jsxs("div", { className: "flex items-baseline gap-2", children: [jsxRuntime.jsx("span", { className: "text-2xl font-bold text-gray-900", children: value }), trend != null && (jsxRuntime.jsx("span", { className: "text-xs font-medium text-yellow-600 bg-yellow-50 px-2 py-1 rounded", children: trend }))] }))] }), series.length > 0 && (jsxRuntime.jsx("div", { className: "flex items-center gap-4", children: series.map(function (s) { return (jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx("svg", { width: "16", height: "2", viewBox: "0 0 16 2", fill: "none", children: jsxRuntime.jsx("line", { x1: "0", y1: "1", x2: "16", y2: "1", stroke: s.color, strokeWidth: "2" }) }), jsxRuntime.jsx("span", { className: "text-xs text-gray-600 font-medium", children: s.label })] }, s.dataKey)); }) }))] })), jsxRuntime.jsx("div", { className: "w-full", style: { height: "".concat(height, "px") }, children: jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: jsxRuntime.jsxs(recharts.LineChart, { data: data, margin: { top: 5, right: 5, left: 5, bottom: 5 }, children: [jsxRuntime.jsx("defs", { children: series.map(function (s) { return (jsxRuntime.jsxs("linearGradient", { id: "area-line-chart-".concat(s.dataKey), x1: "0", y1: "0", x2: "0", y2: "1", children: [jsxRuntime.jsx("stop", { offset: "0%", stopColor: s.color, stopOpacity: 0.3 }), jsxRuntime.jsx("stop", { offset: "50%", stopColor: s.color, stopOpacity: 0.15 }), jsxRuntime.jsx("stop", { offset: "100%", stopColor: s.color, stopOpacity: 0 })] }, s.dataKey)); }) }), jsxRuntime.jsx(recharts.XAxis, { dataKey: xAxisKey, axisLine: false, tickLine: false, tick: { fill: "#9ca3af", fontSize: 12 }, dy: 10 }), jsxRuntime.jsx(recharts.YAxis, { axisLine: false, tickLine: false, tick: { fill: "transparent", fontSize: 0 }, width: 0, tickCount: 6, domain: [0, "dataMax + 100"], allowDecimals: false }), jsxRuntime.jsx(recharts.CartesianGrid, { strokeDasharray: "3 3", stroke: "#d1d5db", strokeOpacity: 0.5, vertical: false, horizontal: true }), jsxRuntime.jsx(recharts.Tooltip, { content: jsxRuntime.jsx(ChartTooltip, { series: series, formatValue: formatTooltipValue }) }), series.map(function (s) { return (jsxRuntime.jsx(recharts.Area, { type: "natural", dataKey: s.dataKey, stroke: "none", fill: "url(#area-line-chart-".concat(s.dataKey, ")"), animationDuration: 1500, animationEasing: "ease-in-out" }, "area-".concat(s.dataKey))); }), series.map(function (s) { return (jsxRuntime.jsx(recharts.Line, { type: "natural", dataKey: s.dataKey, name: s.dataKey, stroke: s.color, strokeWidth: 3, dot: false, activeDot: {
+    var content = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [hasHeader && (jsxRuntime.jsxs("div", { className: "flex items-start justify-between mb-6", children: [jsxRuntime.jsxs("div", { children: [title != null && (jsxRuntime.jsx(H3, { className: "text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1", children: title })), value != null && (jsxRuntime.jsxs("div", { className: "flex items-baseline gap-2", children: [jsxRuntime.jsx("span", { className: "text-2xl font-bold text-gray-900", children: value }), trend != null && (jsxRuntime.jsx("span", { className: "text-xs font-medium text-yellow-600 bg-yellow-50 px-2 py-1 rounded", children: trend }))] }))] }), series.length > 0 && (jsxRuntime.jsx("div", { className: "flex flex-wrap items-center gap-4", children: series.map(function (s) { return (jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx("svg", { width: "16", height: "2", viewBox: "0 0 16 2", fill: "none", children: jsxRuntime.jsx("line", { x1: "0", y1: "1", x2: "16", y2: "1", stroke: s.color, strokeWidth: "2" }) }), jsxRuntime.jsx("span", { className: "text-xs text-gray-600 font-medium", children: s.label })] }, s.dataKey)); }) }))] })), jsxRuntime.jsx("div", { className: "w-full", style: { height: "".concat(height, "px") }, children: jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: jsxRuntime.jsxs(recharts.LineChart, { data: data, margin: { top: 5, right: 5, left: 5, bottom: 5 }, children: [jsxRuntime.jsx("defs", { children: series.map(function (s) { return (jsxRuntime.jsxs("linearGradient", { id: "area-line-chart-".concat(s.dataKey), x1: "0", y1: "0", x2: "0", y2: "1", children: [jsxRuntime.jsx("stop", { offset: "0%", stopColor: s.color, stopOpacity: 0.3 }), jsxRuntime.jsx("stop", { offset: "50%", stopColor: s.color, stopOpacity: 0.15 }), jsxRuntime.jsx("stop", { offset: "100%", stopColor: s.color, stopOpacity: 0 })] }, s.dataKey)); }) }), jsxRuntime.jsx(recharts.XAxis, { dataKey: xAxisKey, axisLine: false, tickLine: false, tick: { fill: "#9ca3af", fontSize: 12 }, dy: 10 }), jsxRuntime.jsx(recharts.YAxis, { axisLine: false, tickLine: false, tick: { fill: "transparent", fontSize: 0 }, width: 0, tickCount: 6, domain: yAxisDomain, allowDecimals: false }), jsxRuntime.jsx(recharts.CartesianGrid, { strokeDasharray: "3 3", stroke: "#d1d5db", strokeOpacity: 0.5, vertical: false, horizontal: true }), jsxRuntime.jsx(recharts.Tooltip, { content: jsxRuntime.jsx(ChartTooltip, { series: series, formatValue: formatTooltipValue }) }), series.map(function (s) { return (jsxRuntime.jsx(recharts.Area, { type: "natural", dataKey: s.dataKey, stroke: "none", fill: "url(#area-line-chart-".concat(s.dataKey, ")"), animationDuration: 1500, animationEasing: "ease-in-out" }, "area-".concat(s.dataKey))); }), series.map(function (s) { return (jsxRuntime.jsx(recharts.Line, { type: "natural", dataKey: s.dataKey, name: s.dataKey, stroke: s.color, strokeWidth: 3, dot: false, activeDot: {
                                     r: 6,
                                     fill: s.color,
                                     stroke: "#fff",
@@ -2946,6 +2946,65 @@ var DateSelector = function (_a) {
     return (jsxRuntime.jsxs("div", { className: "w-full flex flex-wrap xs:gap-5 justify-between items-center ".concat(className), children: [jsxRuntime.jsxs(react.RadioGroup, __assign({ color: "primary", orientation: "horizontal", size: "sm", value: type, onValueChange: handleTypeChange }, radioGroupProps, { children: [jsxRuntime.jsx(react.Radio, __assign({ value: exports.HolidayType.SingleDay }, radioItemProps, { children: t.dayOption })), jsxRuntime.jsx(react.Radio, __assign({ value: exports.HolidayType.DateRange }, radioItemProps, { children: t.dateRangeOption }))] })), type === exports.HolidayType.DateRange ? (jsxRuntime.jsx(react.DateRangePicker, __assign({ className: "xs:w-full md:flex-1 md:max-w-xs", value: dateRange || null, onChange: handleDateRangeChange, "aria-label": t.selectDateRangeAriaLabel, endContent: jsxRuntime.jsx(IconComponent, { icon: "solar:calendar-outline" }) }, dateRangePickerProps))) : (jsxRuntime.jsx(react.DatePicker, __assign({ className: "xs:w-full md:flex-1 md:max-w-40", value: date || null, onChange: handleDateChange, endContent: jsxRuntime.jsx(IconComponent, { icon: "solar:calendar-outline" }), "aria-label": t.selectDateAriaLabel }, datePickerProps)))] }));
 };
 
+/** Paleta categórica por defecto: primary/secondary/success/warning/danger de BeweOS. */
+var DEFAULT_DONUT_COLORS = [
+    "#006fee",
+    "#7828c8",
+    "#17c964",
+    "#f5a524",
+    "#f31260",
+];
+function safeValue$1(value) {
+    return Number.isFinite(value) && value > 0 ? value : 0;
+}
+function computeTotal(data) {
+    return data.reduce(function (sum, d) { return sum + safeValue$1(d.value); }, 0);
+}
+/**
+ * `true` cuando no hay datos o todos los valores son 0 — mismo criterio que el
+ * `NotData` legacy de Guru.js: un donut sin nada que repartir no aporta información.
+ */
+function isDonutEmpty(data) {
+    return data.length === 0 || computeTotal(data) === 0;
+}
+/**
+ * Resuelve las proporciones y el color final de cada categoría.
+ * El color propio de cada dato tiene prioridad; si falta, se cicla `palette` por índice.
+ */
+function computeSlices(data, palette) {
+    if (palette === void 0) { palette = DEFAULT_DONUT_COLORS; }
+    var total = computeTotal(data);
+    return data.map(function (datum, index) {
+        var _a;
+        var value = safeValue$1(datum.value);
+        return __assign(__assign({}, datum), { value: value, color: (_a = datum.color) !== null && _a !== void 0 ? _a : palette[index % palette.length], percent: total > 0 ? value / total : 0 });
+    });
+}
+
+var DEFAULT_TRANSLATIONS$b = {
+    emptyState: "Sin datos para mostrar",
+    totalLabel: "Total",
+};
+/**
+ * DonutChart - Gráfico circular (pie o donut, según `innerRadiusRatio`) con
+ * leyenda y total central propios, renderizados fuera del árbol de Recharts
+ * para que sean estables independientemente del tamaño medido del contenedor.
+ */
+var DonutChart = function (_a) {
+    var data = _a.data, _b = _a.height, height = _b === void 0 ? 220 : _b, _c = _a.innerRadiusRatio, innerRadiusRatio = _c === void 0 ? 0.65 : _c, _d = _a.showLegend, showLegend = _d === void 0 ? true : _d, _e = _a.showTotal, showTotal = _e === void 0 ? true : _e, colors = _a.colors, formatValue = _a.formatValue, _f = _a.translations, translations = _f === void 0 ? {} : _f, className = _a.className;
+    var t = __assign(__assign({}, DEFAULT_TRANSLATIONS$b), translations);
+    if (isDonutEmpty(data)) {
+        return (jsxRuntime.jsx("div", { className: className, children: jsxRuntime.jsx(P, { children: t.emptyState }) }));
+    }
+    var slices = computeSlices(data, colors);
+    var total = slices.reduce(function (sum, s) { return sum + s.value; }, 0);
+    var format = function (value) {
+        return formatValue ? formatValue(value) : String(value);
+    };
+    var isDonut = innerRadiusRatio > 0;
+    return (jsxRuntime.jsxs("div", { className: className, children: [jsxRuntime.jsxs("div", { className: "relative w-full", style: { height: height }, children: [jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: jsxRuntime.jsxs(recharts.PieChart, { children: [jsxRuntime.jsx(recharts.Pie, { data: slices, dataKey: "value", nameKey: "name", innerRadius: isDonut ? "".concat(innerRadiusRatio * 100, "%") : 0, outerRadius: "90%", stroke: "none", children: slices.map(function (slice) { return (jsxRuntime.jsx(recharts.Cell, { fill: slice.color }, slice.name)); }) }), jsxRuntime.jsx(recharts.Tooltip, { formatter: function (value) { return format(value); } })] }) }), isDonut && showTotal && (jsxRuntime.jsxs("div", { className: "aurora-donut-total pointer-events-none absolute inset-0 flex flex-col items-center justify-center", "aria-hidden": "true", children: [jsxRuntime.jsx("span", { className: "text-xs text-foreground-500", children: t.totalLabel }), jsxRuntime.jsx("span", { className: "text-xl font-semibold", children: format(total) })] }))] }), showLegend && (jsxRuntime.jsx("ul", { className: "mt-3 flex flex-wrap gap-3", children: slices.map(function (slice) { return (jsxRuntime.jsxs("li", { className: "flex items-center gap-1.5 text-xs", children: [jsxRuntime.jsx("span", { className: "h-2 w-2 rounded-full", style: { backgroundColor: slice.color }, "aria-hidden": "true" }), jsxRuntime.jsx("span", { children: slice.name }), jsxRuntime.jsxs("span", { className: "text-foreground-500", children: [Math.round(slice.percent * 100), "%"] })] }, slice.name)); }) }))] }));
+};
+
 var H1 = function (_a) {
     var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
     return (jsxRuntime.jsx("h1", __assign({ className: react.cn("text-xl font-bold", className) }, props, { children: children })));
@@ -3011,12 +3070,12 @@ var NotificationButton = function (_a) {
 };
 NotificationButton.displayName = "NotificationButton";
 
-var DEFAULT_TRANSLATIONS$8 = {
+var DEFAULT_TRANSLATIONS$a = {
     logout: "Cerrar sesión",
 };
 var HeaderComponent = function (_a) {
     var notificationCount = _a.notificationCount, options = _a.options, onMenuClick = _a.onMenuClick, onLogout = _a.onLogout, _b = _a.translations, translations = _b === void 0 ? {} : _b, breadcrumbs = _a.breadcrumbs, extraContent = _a.extraContent, _c = _a.showMenuButton, showMenuButton = _c === void 0 ? true : _c, onNotificationClick = _a.onNotificationClick, onOptionSelect = _a.onOptionSelect, onBreadcrumbClick = _a.onBreadcrumbClick;
-    var t = __assign(__assign({}, DEFAULT_TRANSLATIONS$8), translations);
+    var t = __assign(__assign({}, DEFAULT_TRANSLATIONS$a), 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: [showMenuButton && (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: [extraContent, jsxRuntime.jsx(NotificationButton, { notificationCount: notificationCount, onPress: onNotificationClick }), jsxRuntime.jsx(ConfigMenu, { options: options, onLogout: onLogout, onOptionSelect: onOptionSelect, translations: t })] })] }) }));
 };
 HeaderComponent.displayName = "Header";
@@ -3140,7 +3199,7 @@ KanbanColumn.displayName = "KanbanColumn";
  * Traducciones por defecto en español.
  * Se mezclan con las traducciones proporcionadas por el usuario.
  */
-var DEFAULT_TRANSLATIONS$7 = {
+var DEFAULT_TRANSLATIONS$9 = {
     dropHere: "Soltar aquí",
     emptyMessage: "No hay elementos",
 };
@@ -3174,7 +3233,7 @@ var columnGapClasses = {
 var KanbanComponent = function (_a) {
     var columns = _a.columns, renderItem = _a.renderItem, onCardClick = _a.onCardClick, onItemMove = _a.onItemMove, isDraggable = _a.isDraggable, cardClassName = _a.cardClassName, isCardClickable = _a.isCardClickable, className = _a.className, _b = _a.columnWidth, columnWidth = _b === void 0 ? "280px" : _b, _c = _a.columnGap, columnGap = _c === void 0 ? "md" : _c, _d = _a.horizontalScroll, horizontalScroll = _d === void 0 ? true : _d, columnMaxHeight = _a.columnMaxHeight, renderColumnHeader = _a.renderColumnHeader, renderEmptyState = _a.renderEmptyState, _e = _a.translations, translations = _e === void 0 ? {} : _e, onLoadMore = _a.onLoadMore;
     // Mezclar traducciones del usuario con las por defecto
-    var t = __assign(__assign({}, DEFAULT_TRANSLATIONS$7), translations);
+    var t = __assign(__assign({}, DEFAULT_TRANSLATIONS$9), translations);
     // Determinar si drag está habilitado
     var dragEnabled = isDraggable !== null && isDraggable !== void 0 ? isDraggable : !!onItemMove;
     // Estado del drag actual
@@ -3518,7 +3577,7 @@ var MenuNavList = React.forwardRef(function (_a, ref) {
 });
 MenuNavList.displayName = "MenuNavList";
 
-var DEFAULT_TRANSLATIONS$6 = {
+var DEFAULT_TRANSLATIONS$8 = {
     menuLabel: "Menú",
     closeSidebarAriaLabel: "Cerrar menú lateral",
     mobileNavAriaLabel: "Navegación móvil",
@@ -3536,7 +3595,7 @@ var MenuComponent = React.memo(function Menu(_a) {
     var commerceInfo = _a.commerceInfo, userInfo = _a.userInfo, helpButton = _a.helpButton, isOpenSidebar = _a.isOpenSidebar, onOpenSidebarChange = _a.onOpenSidebarChange, menuItems = _a.menuItems, mobileBottomBarGroupKey = _a.mobileBottomBarGroupKey, _d = _a.showNativeMenu, showNativeMenu = _d === void 0 ? true : _d, onUserInfoClick = _a.onUserInfoClick, _e = _a.translations, translations = _e === void 0 ? {} : _e;
     var _f = React.useState(false), isCollapsed = _f[0], setIsCollapsed = _f[1];
     var _g = React.useState(false), logoError = _g[0], setLogoError = _g[1];
-    var t = __assign(__assign({}, DEFAULT_TRANSLATIONS$6), translations);
+    var t = __assign(__assign({}, DEFAULT_TRANSLATIONS$8), translations);
     var selectedKey = React.useMemo(function () {
         var _a, _b, _c;
         if (menuItems.selectedPath) {
@@ -3768,7 +3827,59 @@ var MenuClawHistoryPanel = React.memo(function MenuClawHistoryPanel(_a) {
                                     : "solar:alt-arrow-down-linear", size: "sm", "aria-hidden": true }), isExpanded ? showLessLabel : showMoreLabel] })) : null] })) : null] }));
 });
 
-var DEFAULT_TRANSLATIONS$5 = {
+/** ¿Está la key seleccionada en este ítem o en cualquiera de sus descendientes? */
+var containsKey = function (item, key) {
+    var _a;
+    if (!key) {
+        return false;
+    }
+    if (item.key === key) {
+        return true;
+    }
+    return ((_a = item.items) !== null && _a !== void 0 ? _a : []).some(function (child) { return containsKey(child, key); });
+};
+/**
+ * Fila del menú. Si el ítem trae `items`, se pinta como grupo desplegable en vez
+ * de como enlace.
+ *
+ * Existe porque `MenuClaw` no puede reutilizar `MenuNavList` (heredaría sus filas
+ * de 44px) pero sí necesita el mismo dato jerárquico: los consumidores mandan
+ * módulos con hijos —Catálogo › Productos/Servicios— y sin este render se
+ * perderían en silencio, porque `MenuNavListItem.items` es opcional y no falla
+ * al compilar.
+ *
+ * El grupo que contiene la ruta activa se despliega solo y no se puede plegar:
+ * si se pudiera, el ítem activo quedaría oculto.
+ */
+var MenuClawNavItem = function (_a) {
+    var _b, _c;
+    var item = _a.item, selectedKey = _a.selectedKey, isCollapsed = _a.isCollapsed, onSelect = _a.onSelect, _d = _a.depth, depth = _d === void 0 ? 0 : _d;
+    var submenuId = React.useId();
+    var _e = React.useState(false), isManuallyOpen = _e[0], setIsManuallyOpen = _e[1];
+    var children = (_b = item.items) !== null && _b !== void 0 ? _b : [];
+    // Comprimido no hay sitio para desplegables: la fila vuelve a ser navegable.
+    var isGroup = children.length > 0 && !isCollapsed;
+    var hasSelectedDescendant = React.useMemo(function () { return children.some(function (child) { return containsKey(child, selectedKey); }); }, [children, selectedKey]);
+    var isOpen = hasSelectedDescendant || isManuallyOpen;
+    var isActive = !!item.key && item.key === selectedKey;
+    var handleClick = React.useCallback(function () {
+        if (isGroup) {
+            setIsManuallyOpen(function (prev) { return !prev; });
+            return;
+        }
+        onSelect(item.key, item.href);
+    }, [isGroup, onSelect, item.key, item.href]);
+    var icon = item.icon || item.startContent ? (jsxRuntime.jsx("span", { className: "flex h-5 w-5 shrink-0 items-center justify-center text-default-500 [&_svg]:h-5 [&_svg]:w-5", children: item.icon ? (jsxRuntime.jsx(IconComponent, { icon: item.icon, size: "md", "aria-hidden": true })) : (item.startContent) })) : null;
+    return (jsxRuntime.jsxs("li", { children: [jsxRuntime.jsxs("button", { type: "button", title: isCollapsed ? item.title : undefined, onClick: handleClick, "aria-expanded": isGroup ? isOpen : undefined, "aria-controls": isGroup ? submenuId : undefined, className: react.cn("flex w-full items-center rounded-lg px-2 py-1.5 text-left text-small transition-colors", "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus", depth === 0 ? "min-h-9" : "min-h-8", isCollapsed ? "justify-center" : "gap-3", 
+                // Sangría del hijo: alinea su texto con el del padre (px-2 + icono
+                // de 20px + gap de 12px).
+                !isCollapsed && depth > 0 && !icon ? "pl-10" : undefined, isActive
+                    ? "bg-default-100 font-medium text-foreground"
+                    : "text-default-600 hover:bg-default-100", item.className), children: [icon, !isCollapsed ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: "menu-claw-collapsible flex-1 truncate", children: item.title }), (_c = item.endContent) !== null && _c !== void 0 ? _c : null, isGroup ? (jsxRuntime.jsx(IconComponent, { icon: "solar:alt-arrow-down-linear", size: "sm", "aria-hidden": true, className: react.cn("shrink-0 text-default-400 transition-transform", isOpen && "rotate-180") })) : null] })) : null] }), isGroup && isOpen ? (jsxRuntime.jsx("ul", { id: submenuId, className: "mt-0.5 flex flex-col gap-0.5", children: children.map(function (child) { return (jsxRuntime.jsx(MenuClawNavItem, { item: child, selectedKey: selectedKey, isCollapsed: isCollapsed, onSelect: onSelect, depth: depth + 1 }, child.key)); }) })) : null] }));
+};
+MenuClawNavItem.displayName = "MenuClawNavItem";
+
+var DEFAULT_TRANSLATIONS$7 = {
     menuLabel: "Menú",
     closeSidebarAriaLabel: "Cerrar menú lateral",
     mobileNavAriaLabel: "Navegación móvil",
@@ -3806,7 +3917,7 @@ var MenuClaw = React.memo(function MenuClaw(_a) {
     var _b, _c;
     var userInfo = _a.userInfo, helpButton = _a.helpButton, menuItems = _a.menuItems, history = _a.history, isOpenSidebar = _a.isOpenSidebar, onOpenSidebarChange = _a.onOpenSidebarChange, mobileBottomBarGroupKey = _a.mobileBottomBarGroupKey, _d = _a.showNativeMenu, showNativeMenu = _d === void 0 ? true : _d, _e = _a.translations, translations = _e === void 0 ? {} : _e;
     var _f = React.useState(false), isCollapsed = _f[0], setIsCollapsed = _f[1];
-    var t = __assign(__assign({}, DEFAULT_TRANSLATIONS$5), translations);
+    var t = __assign(__assign({}, DEFAULT_TRANSLATIONS$7), translations);
     var selectedKey = React.useMemo(function () {
         var _a, _b, _c;
         if (menuItems.selectedPath) {
@@ -3878,13 +3989,7 @@ var MenuClaw = React.memo(function MenuClaw(_a) {
                                             ? "solar:alt-arrow-right-linear"
                                             : "solar:alt-arrow-left-linear", size: "md", "aria-hidden": true }) })] }), jsxRuntime.jsxs("div", { className: react.cn("flex items-center py-3", isCollapsed ? "justify-center gap-0" : "gap-3"), children: [jsxRuntime.jsx(react.Avatar, { size: "sm", src: ((_b = userInfo === null || userInfo === void 0 ? void 0 : userInfo.avatar) === null || _b === void 0 ? void 0 : _b.trim()) || undefined, color: !((_c = userInfo === null || userInfo === void 0 ? void 0 : userInfo.avatar) === null || _c === void 0 ? void 0 : _c.trim()) ? "warning" : "default", name: userName, className: "shrink-0" }), !isCollapsed ? (jsxRuntime.jsxs("div", { className: "menu-claw-collapsible flex min-w-0 flex-col overflow-hidden", children: [jsxRuntime.jsx("p", { className: "truncate text-small font-semibold text-foreground", children: userName }), jsxRuntime.jsx("p", { className: "truncate text-tiny text-default-400", children: userRole })] })) : null] }), jsxRuntime.jsx(MenuClawHistoryPanel, { items: historyConfig.items, initialVisibleCount: historyConfig.initialVisibleCount, onNewConversation: history === null || history === void 0 ? void 0 : history.onNewConversation, isCollapsed: isCollapsed, title: t.historyTitle, newLabel: t.historyNewLabel, showMoreLabel: t.historyShowMoreLabel, showLessLabel: t.historyShowLessLabel, onBeforeSelect: handleSidebarClose }), jsxRuntime.jsx("nav", { className: "flex min-h-0 flex-1 flex-col overflow-y-auto [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]", children: menuItems.items.map(function (group) {
                                 var _a;
-                                return (jsxRuntime.jsxs("div", { className: "mb-2", children: [group.title && !isCollapsed ? (jsxRuntime.jsx("p", { className: "px-2 pb-1 pt-2 text-tiny font-medium uppercase tracking-wide text-default-400", children: group.title })) : null, jsxRuntime.jsx("ul", { className: "flex flex-col gap-0.5", children: ((_a = group.items) !== null && _a !== void 0 ? _a : []).map(function (item) {
-                                                var _a;
-                                                var isActive = !!item.key && item.key === selectedKey;
-                                                return (jsxRuntime.jsx("li", { children: jsxRuntime.jsxs("button", { type: "button", title: isCollapsed ? item.title : undefined, onClick: function () { return handleMenuSelect(item.key, item.href); }, className: react.cn("flex min-h-9 w-full items-center rounded-lg px-2 py-1.5 text-left text-small transition-colors", "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus", isCollapsed ? "justify-center" : "gap-3", isActive
-                                                            ? "bg-default-100 font-medium text-foreground"
-                                                            : "text-default-600 hover:bg-default-100", item.className), children: [item.icon || item.startContent ? (jsxRuntime.jsx("span", { className: "flex h-5 w-5 shrink-0 items-center justify-center text-default-500 [&_svg]:h-5 [&_svg]:w-5", children: item.icon ? (jsxRuntime.jsx(IconComponent, { icon: item.icon, size: "md", "aria-hidden": true })) : (item.startContent) })) : null, !isCollapsed ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: "menu-claw-collapsible flex-1 truncate", children: item.title }), (_a = item.endContent) !== null && _a !== void 0 ? _a : null] })) : null] }) }, item.key));
-                                            }) })] }, group.key));
+                                return (jsxRuntime.jsxs("div", { className: "mb-2", children: [group.title && !isCollapsed ? (jsxRuntime.jsx("p", { className: "px-2 pb-1 pt-2 text-tiny font-medium uppercase tracking-wide text-default-400", children: group.title })) : null, jsxRuntime.jsx("ul", { className: "flex flex-col gap-0.5", children: ((_a = group.items) !== null && _a !== void 0 ? _a : []).map(function (item) { return (jsxRuntime.jsx(MenuClawNavItem, { item: item, selectedKey: selectedKey, isCollapsed: isCollapsed, onSelect: handleMenuSelect }, item.key)); }) })] }, group.key));
                             }) }), helpSection ? (jsxRuntime.jsx("div", { className: "mt-auto flex flex-col items-center justify-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: "menu-claw-collapsible truncate", children: helpSection.title })) : null }) })) : null] }) })] }));
 });
 
@@ -4244,13 +4349,6 @@ var Phone = function (_a) {
             document.removeEventListener("mousedown", handleClickOutside);
         };
     }, [isDropdownOpen]);
-    // El dropdown se portea a `body` con posición absoluta fija; cerrarlo cuando
-    // un ancestro hace scroll para que no quede flotando fuera de lugar.
-    useCloseOnAncestorScroll({
-        isOpen: isDropdownOpen,
-        onClose: function () { return setIsDropdownOpen(false); },
-        contentRef: portalDropdownRef,
-    });
     var handleCountrySelect = function (country) {
         setSelectedCountry(country);
         setIsDropdownOpen(false);
@@ -4322,6 +4420,64 @@ var PromotionalBanner = function (_a) {
                 }, variant: "bordered", onClick: handleButtonClick }, buttonProps, { children: finalButtonText })), showCloseButton && (jsxRuntime.jsx("div", { className: "flex flex-1 justify-end", children: jsxRuntime.jsx(react.Button, { isIconOnly: true, "aria-label": t.closeButtonLabel, className: "-m-1", size: "lg", variant: "bordered", onClick: handleClose, children: jsxRuntime.jsx(IconComponent, { "aria-hidden": "true", className: "text-default-500", icon: "lucide:x", size: "md" }) }) }))] }));
 };
 
+/** Paleta categórica por defecto: primary/secondary/success/warning/danger de BeweOS. */
+var DEFAULT_RANKED_BAR_COLORS = [
+    "#006fee",
+    "#7828c8",
+    "#17c964",
+    "#f5a524",
+    "#f31260",
+];
+function safeValue(value) {
+    return Number.isFinite(value) && value > 0 ? value : 0;
+}
+function computeMax(data) {
+    return data.reduce(function (max, d) { return Math.max(max, safeValue(d.value)); }, 0);
+}
+/**
+ * `true` cuando no hay datos o todos los valores son 0 — mismo criterio que el
+ * `NotData` legacy de Guru.js.
+ */
+function isRankedBarListEmpty(data) {
+    return data.length === 0 || computeMax(data) === 0;
+}
+/**
+ * Resuelve el ancho de cada barra como porcentaje del **valor máximo del set**
+ * (no del total) — igual que `BusinessStage.js` legacy (`100 * quantity / max`),
+ * y el color final de cada fila.
+ */
+function computeBars(data, palette) {
+    if (palette === void 0) { palette = DEFAULT_RANKED_BAR_COLORS; }
+    var max = computeMax(data);
+    return data.map(function (item, index) {
+        var _a;
+        var value = safeValue(item.value);
+        return __assign(__assign({}, item), { value: value, color: (_a = item.color) !== null && _a !== void 0 ? _a : palette[index % palette.length], percent: max > 0 ? (value / max) * 100 : 0 });
+    });
+}
+
+var DEFAULT_TRANSLATIONS$6 = {
+    emptyState: "Sin datos para mostrar",
+};
+/**
+ * RankedBarList - Lista de barras horizontales escaladas al valor máximo del
+ * set (no al total) — mismo criterio visual que `BusinessStage.js` legacy.
+ * No reordena las filas: el llamador decide el orden (por relevancia, por
+ * etapa del funnel, etc.).
+ */
+var RankedBarList = function (_a) {
+    var data = _a.data, colors = _a.colors, formatValue = _a.formatValue, _b = _a.showValue, showValue = _b === void 0 ? true : _b, _c = _a.barHeight, barHeight = _c === void 0 ? 8 : _c, _d = _a.translations, translations = _d === void 0 ? {} : _d, className = _a.className;
+    var t = __assign(__assign({}, DEFAULT_TRANSLATIONS$6), translations);
+    if (isRankedBarListEmpty(data)) {
+        return (jsxRuntime.jsx("div", { className: className, children: jsxRuntime.jsx(P, { children: t.emptyState }) }));
+    }
+    var bars = computeBars(data, colors);
+    var format = function (value) {
+        return formatValue ? formatValue(value) : String(value);
+    };
+    return (jsxRuntime.jsx("div", { className: ["flex flex-col gap-3", className].filter(Boolean).join(" "), children: bars.map(function (bar) { return (jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [jsxRuntime.jsxs("div", { className: "flex items-baseline justify-between gap-2", children: [jsxRuntime.jsx(P, { className: "truncate", children: bar.label }), showValue && (jsxRuntime.jsx("span", { className: "text-sm font-medium text-foreground", children: format(bar.value) }))] }), jsxRuntime.jsx("div", { className: "w-full rounded-full bg-default-100", style: { height: barHeight }, children: jsxRuntime.jsx("div", { className: "h-full rounded-full", style: { width: "".concat(bar.percent, "%"), backgroundColor: bar.color } }) })] }, bar.label)); }) }));
+};
+
 var VALID_STEP_COLORS = [
     "primary",
     "secondary",
@@ -5379,7 +5535,7 @@ var ScheduleRow = function (_a) {
         // Return slots exactly as they are - no automatic additions
         return slots;
     };
-    return (jsxRuntime.jsxs("div", { className: "flex flex-col w-full gap-y-4 last:border-b-0 last:mb-0 last:pb-0 border-b border-default-200 xs:py-4 xl:p-4 first:pt-0", children: [jsxRuntime.jsxs("div", { className: "flex  w-full items-center justify-between", children: [jsxRuntime.jsxs("div", { className: "flex xs:space-x-2 sm:space-x-4", children: [jsxRuntime.jsx("h3", { className: "text-small font-semibold text-default-900 capitalize", children: day }), jsxRuntime.jsx(react.Chip, { size: "sm", color: daySchedule.isOpen ? "primary" : "default", className: "text-background", children: daySchedule.isOpen ? t.open : t.closed })] }), jsxRuntime.jsxs("div", { className: "flex xs:gap-2 sm:gap-5", children: [jsxRuntime.jsx(Switch, { size: "sm", color: "primary", isSelected: daySchedule.isOpen, onValueChange: handleToggleDay }), showCopyToAll && onCopyToAll && (jsxRuntime.jsx(Button, { size: "sm", variant: "bordered", onPress: function () { return onCopyToAll(day); }, children: t.copyToAll }))] })] }), daySchedule.isOpen && (jsxRuntime.jsx("div", { className: "flex  flex-col justify-around gap-y-3 ", children: getSlotsToDisplay().map(function (slot, index) {
+    return (jsxRuntime.jsxs("div", { className: "flex flex-col w-full gap-y-4 last:border-b-0 last:mb-0 last:pb-0 border-b border-default-200 xs:py-4 xl:p-4 first:pt-0", children: [jsxRuntime.jsxs("div", { className: "flex  w-full items-center justify-between", children: [jsxRuntime.jsxs("div", { className: "flex items-center xs:space-x-2 sm:space-x-4", children: [jsxRuntime.jsx("h3", { className: "text-small font-semibold text-default-900 capitalize w-24 shrink-0", children: day }), jsxRuntime.jsx(react.Chip, { size: "sm", color: daySchedule.isOpen ? "primary" : "default", className: "text-background", children: daySchedule.isOpen ? t.open : t.closed })] }), jsxRuntime.jsxs("div", { className: "flex xs:gap-2 sm:gap-5", children: [jsxRuntime.jsx(Switch, { size: "sm", color: "primary", isSelected: daySchedule.isOpen, onValueChange: handleToggleDay }), showCopyToAll && onCopyToAll && (jsxRuntime.jsx(Button, { size: "sm", variant: "bordered", onPress: function () { return onCopyToAll(day); }, children: t.copyToAll }))] })] }), daySchedule.isOpen && (jsxRuntime.jsx("div", { className: "flex  flex-col justify-around gap-y-3 ", children: getSlotsToDisplay().map(function (slot, index) {
                     var slotsToDisplay = getSlotsToDisplay();
                     var isLastSlot = index === slotsToDisplay.length - 1;
                     var isSlotFilled = slot.from && slot.to;
@@ -5513,6 +5669,59 @@ var SocialMediaPreview = function (_a) {
     }
 };
 
+var paddingClasses = {
+    sm: "p-4",
+    md: "p-6",
+    lg: "p-8",
+};
+
+/**
+ * Card genérica siguiendo las reglas de diseño BeweOS basada en HeroUI.
+ *
+ * Reglas aplicadas:
+ * - Shadow: none, sm, md, lg (configurable)
+ * - Radius: sm (por defecto, configurable)
+ * - Padding configurable (sm, md, lg)
+ * - Hereda de HeroUI Card con personalización BeweOS
+ */
+var Card = function (_a) {
+    var children = _a.children, _b = _a.className, className = _b === void 0 ? "" : _b, _c = _a.shadow, shadow = _c === void 0 ? "sm" : _c, _d = _a.radius, radius = _d === void 0 ? "sm" : _d, _e = _a.padding, padding = _e === void 0 ? "md" : _e, props = __rest(_a, ["children", "className", "shadow", "radius", "padding"]);
+    var paddingClass = paddingClasses[padding];
+    var combinedClassName = [paddingClass, className].filter(Boolean).join(" ");
+    return (jsxRuntime.jsx(react.Card, __assign({ shadow: shadow, radius: radius, className: combinedClassName }, props, { children: children })));
+};
+
+var DEFAULT_TRANSLATIONS$5 = {
+    trendUpAriaLabel: "Tendencia al alza",
+    trendDownAriaLabel: "Tendencia a la baja",
+    trendNeutralAriaLabel: "Sin variación",
+};
+var TREND_COLOR_CLASS = {
+    positive: "text-success",
+    negative: "text-danger",
+    neutral: "text-foreground-500",
+};
+var TREND_ARIA_KEY = {
+    positive: "trendUpAriaLabel",
+    negative: "trendDownAriaLabel",
+    neutral: "trendNeutralAriaLabel",
+};
+/**
+ * StatTile - Tarjeta KPI compacta: ícono opcional + título + valor + tendencia opcional.
+ *
+ * Cubre el patrón "tile" (título + número, con o sin ícono/variación) que se repite en
+ * varios dashboards de estadísticas y no encajaba en ningún chart existente de AuraUI.
+ */
+var StatTile = function (_a) {
+    var _b;
+    var title = _a.title, value = _a.value, icon = _a.icon, trend = _a.trend, _c = _a.translations, translations = _c === void 0 ? {} : _c, className = _a.className, _d = _a.padding, padding = _d === void 0 ? "md" : _d, cardProps = __rest(_a, ["title", "value", "icon", "trend", "translations", "className", "padding"]);
+    var t = __assign(__assign({}, DEFAULT_TRANSLATIONS$5), translations);
+    var direction = (_b = trend === null || trend === void 0 ? void 0 : trend.direction) !== null && _b !== void 0 ? _b : "neutral";
+    return (jsxRuntime.jsxs(Card, __assign({ padding: padding, className: ["flex flex-row items-center gap-3", className]
+            .filter(Boolean)
+            .join(" ") }, cardProps, { children: [icon && (jsxRuntime.jsx("span", { className: "shrink-0 text-foreground-600", "aria-hidden": "true", children: icon })), jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-col gap-0.5", children: [jsxRuntime.jsx(P, { className: "truncate", children: title }), jsxRuntime.jsxs("div", { className: "flex items-baseline gap-2", children: [jsxRuntime.jsx(H3, { className: "text-2xl font-semibold", children: value }), trend && (jsxRuntime.jsx("span", { className: "text-xs font-medium ".concat(TREND_COLOR_CLASS[direction]), "aria-label": t[TREND_ARIA_KEY[direction]], children: trend.value }))] })] })] })));
+};
+
 function AuraTable(_a) {
     var columns = _a.columns, items = _a.items, renderCell = _a.renderCell, children = _a.children, props = __rest(_a, ["columns", "items", "renderCell", "children"]);
     return (jsxRuntime.jsxs(react.Table, __assign({ removeWrapper: true, radius: "none" }, props, { children: [jsxRuntime.jsx(react.TableHeader, { columns: columns, children: function (column) { return jsxRuntime.jsx(react.TableColumn, { children: column.label }, column.key); } }), jsxRuntime.jsx(react.TableBody, { items: items, children: function (item) { return (jsxRuntime.jsx(react.TableRow, { children: function (columnKey) { return (jsxRuntime.jsx(react.TableCell, { children: renderCell ? renderCell(item, columnKey) : children })); } }, item.id)); } })] })));
@@ -8901,28 +9110,6 @@ ModalBody.displayName = "ModalBody";
 
 var ModalFooter = react.ModalFooter;
 
-var paddingClasses = {
-    sm: "p-4",
-    md: "p-6",
-    lg: "p-8",
-};
-
-/**
- * Card genérica siguiendo las reglas de diseño BeweOS basada en HeroUI.
- *
- * Reglas aplicadas:
- * - Shadow: none, sm, md, lg (configurable)
- * - Radius: sm (por defecto, configurable)
- * - Padding configurable (sm, md, lg)
- * - Hereda de HeroUI Card con personalización BeweOS
- */
-var Card = function (_a) {
-    var children = _a.children, _b = _a.className, className = _b === void 0 ? "" : _b, _c = _a.shadow, shadow = _c === void 0 ? "sm" : _c, _d = _a.radius, radius = _d === void 0 ? "sm" : _d, _e = _a.padding, padding = _e === void 0 ? "md" : _e, props = __rest(_a, ["children", "className", "shadow", "radius", "padding"]);
-    var paddingClass = paddingClasses[padding];
-    var combinedClassName = [paddingClass, className].filter(Boolean).join(" ");
-    return (jsxRuntime.jsx(react.Card, __assign({ shadow: shadow, radius: radius, className: combinedClassName }, props, { children: children })));
-};
-
 /**
  * Tooltip - Componente BeweOS basado en HeroUI.
  *
@@ -9492,10 +9679,13 @@ exports.ColorPicker = ColorPicker;
 exports.ColorSelector = ColorSelector;
 exports.ContentCarousel = ContentCarousel;
 exports.Currency = Currency;
+exports.DEFAULT_DONUT_COLORS = DEFAULT_DONUT_COLORS;
 exports.DEFAULT_PREDEFINED_COLORS = DEFAULT_PREDEFINED_COLORS;
+exports.DEFAULT_RANKED_BAR_COLORS = DEFAULT_RANKED_BAR_COLORS;
 exports.DatePicker = DatePicker;
 exports.DateRangePicker = DateRangePicker;
 exports.DateSelector = DateSelector;
+exports.DonutChart = DonutChart;
 exports.DrawerFilters = DrawerFilters;
 exports.EmailPreview = EmailPreview;
 exports.GlobalToast = GlobalToast;
@@ -9528,6 +9718,7 @@ exports.Phone = Phone;
 exports.PromotionalBanner = PromotionalBanner;
 exports.REGISTERED_THEME_COLORS = REGISTERED_THEME_COLORS;
 exports.RangeFilter = RangeFilter;
+exports.RankedBarList = RankedBarList;
 exports.RowSteps = RowSteps;
 exports.SEGMENTATION_DEFAULT_TRANSLATIONS = DEFAULT_TRANSLATIONS$1;
 exports.ScheduleRow = ScheduleRow;
@@ -9538,6 +9729,7 @@ exports.SimpleLineChart = SimpleLineChart;
 exports.SocialMediaBar = SocialMediaBar;
 exports.SocialMediaCarousel = SocialMediaCarousel;
 exports.SocialMediaPreview = SocialMediaPreview;
+exports.StatTile = StatTile;
 exports.StepIndicator = StepIndicator;
 exports.SwitchComponent = Switch;
 exports.THEME_COLOR_HEX_MAP = THEME_COLOR_HEX_MAP;
@@ -9558,6 +9750,10 @@ exports.Wizard = Wizard;
 exports.WizardNavigation = WizardNavigation;
 exports.WizardSidebar = WizardSidebar;
 exports.applyCustomPrimaryColor = applyCustomPrimaryColor;
+exports.computeBars = computeBars;
+exports.computeMax = computeMax;
+exports.computeSlices = computeSlices;
+exports.computeTotal = computeTotal;
 exports.createCurrencyFormatter = createCurrencyFormatter;
 exports.defaultCountries = uniqueCountries;
 exports.defaultCurrencyOptions = defaultCurrencyOptions;
@@ -9571,9 +9767,11 @@ exports.getSelectedKeyFromPath = getSelectedKeyFromPath;
 exports.hexToThemeColor = hexToThemeColor;
 exports.hslToCssValue = hslToCssValue;
 exports.isAuroraFullThemeId = isAuroraFullThemeId;
+exports.isDonutEmpty = isDonutEmpty;
 exports.isExactThemeColor = isExactThemeColor;
 exports.isGroupState = isGroupState;
 exports.isHexColor = isHexColor;
+exports.isRankedBarListEmpty = isRankedBarListEmpty;
 exports.isSegmentationGroup = isSegmentationGroup;
 exports.removeCustomPrimaryColor = removeCustomPrimaryColor;
 exports.sizeMap = sizeMap;