@beweco/aurora-ui 0.6.70 → 0.6.72-qa.94

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) {
@@ -3820,7 +3879,7 @@ var MenuClawNavItem = function (_a) {
 };
 MenuClawNavItem.displayName = "MenuClawNavItem";
 
-var DEFAULT_TRANSLATIONS$5 = {
+var DEFAULT_TRANSLATIONS$7 = {
     menuLabel: "Menú",
     closeSidebarAriaLabel: "Cerrar menú lateral",
     mobileNavAriaLabel: "Navegación móvil",
@@ -3858,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) {
@@ -4290,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);
@@ -4368,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",
@@ -5425,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;
@@ -5559,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)); } })] })));
@@ -7614,18 +7777,19 @@ var SelectFilter = function (_a) {
 // MULTISELECT FILTER
 // =========================================================================
 var MultiSelectFilter = function (_a) {
-    var _b, _c, _d, _e;
+    var _b, _c, _d, _e, _f;
     var filter = _a.filter, value = _a.value, onChange = _a.onChange, translations = _a.translations;
     var triggerRef = React.useRef(null);
-    var _f = React.useState(null), triggerWidthPx = _f[0], setTriggerWidthPx = _f[1];
-    var _g = React.useState(false), isOpen = _g[0], setIsOpen = _g[1];
-    var _h = React.useState(""), searchQuery = _h[0], setSearchQuery = _h[1];
+    var _g = React.useState(null), triggerWidthPx = _g[0], setTriggerWidthPx = _g[1];
+    var _h = React.useState(false), isOpen = _h[0], setIsOpen = _h[1];
+    var _j = React.useState(""), searchQuery = _j[0], setSearchQuery = _j[1];
     var currentValues = (value === null || value === void 0 ? void 0 : value.values) || [];
     var searchable = filter.searchable === true;
     var searchPlaceholder = (_b = translations === null || translations === void 0 ? void 0 : translations.multiselectSearchPlaceholder) !== null && _b !== void 0 ? _b : "Buscar opciones...";
     var moreLabelTemplate = (_c = translations === null || translations === void 0 ? void 0 : translations.multiselectMoreLabel) !== null && _c !== void 0 ? _c : "+{more} más";
     var noResultsText = (_d = translations === null || translations === void 0 ? void 0 : translations.multiselectNoResults) !== null && _d !== void 0 ? _d : "Sin coincidencias";
-    var triggerPlaceholder = "Seleccionar ".concat(filter.title.toLowerCase());
+    var selectPlaceholderTemplate = (_e = translations === null || translations === void 0 ? void 0 : translations.selectPlaceholder) !== null && _e !== void 0 ? _e : "Seleccionar {label}";
+    var triggerPlaceholder = selectPlaceholderTemplate.replace("{label}", filter.title.toLowerCase());
     var filteredData = React.useMemo(function () {
         if (!searchable) {
             return filter.data;
@@ -7680,7 +7844,7 @@ var MultiSelectFilter = function (_a) {
         }
         onChange({ values: Array.from(keys) });
     }, [filteredData, onChange]);
-    var maxVisibleChips = Math.min(Math.max((_e = filter.maxVisibleChips) !== null && _e !== void 0 ? _e : 5, 1), 24);
+    var maxVisibleChips = Math.min(Math.max((_f = filter.maxVisibleChips) !== null && _f !== void 0 ? _f : 5, 1), 24);
     var triggerSelection = React.useMemo(function () {
         if (currentValues.length === 0) {
             return { visible: [], overflow: 0 };
@@ -7834,7 +7998,24 @@ var DateFilter = function (_a) {
         }
         return undefined;
     };
-    return (jsxRuntime.jsx(DateSelector, { initialType: getInitialType(), initialDate: getInitialDate(), initialDateRange: getInitialDateRange(), onChange: handleDateSelectorChange, className: "w-full" }));
+    // Solo se reenvían las claves definidas: pasar `undefined` explícito pisaría
+    // los defaults en español de DateSelector (el spread copia la clave igual).
+    var dateSelectorTranslations = {};
+    if ((translations === null || translations === void 0 ? void 0 : translations.dayOption) !== undefined) {
+        dateSelectorTranslations.dayOption = translations.dayOption;
+    }
+    if ((translations === null || translations === void 0 ? void 0 : translations.dateRangeOption) !== undefined) {
+        dateSelectorTranslations.dateRangeOption = translations.dateRangeOption;
+    }
+    if ((translations === null || translations === void 0 ? void 0 : translations.selectDateAriaLabel) !== undefined) {
+        dateSelectorTranslations.selectDateAriaLabel =
+            translations.selectDateAriaLabel;
+    }
+    if ((translations === null || translations === void 0 ? void 0 : translations.selectDateRangeAriaLabel) !== undefined) {
+        dateSelectorTranslations.selectDateRangeAriaLabel =
+            translations.selectDateRangeAriaLabel;
+    }
+    return (jsxRuntime.jsx(DateSelector, { initialType: getInitialType(), initialDate: getInitialDate(), initialDateRange: getInitialDateRange(), onChange: handleDateSelectorChange, translations: dateSelectorTranslations, className: "w-full" }));
 };
 // =========================================================================
 // TEXT FILTER
@@ -8655,6 +8836,7 @@ function TagsFilter(_a) {
     var _m = React.useState(0), autocompleteKey = _m[0], setAutocompleteKey = _m[1];
     var selectedList = value !== null && value !== void 0 ? value : [];
     var _o = React.useState(null), sentinelNode = _o[0], setSentinelNode = _o[1];
+    var rootRef = React.useRef(null);
     React.useEffect(function () {
         if (!onLoadMore || !sentinelNode || !hasMore) {
             return;
@@ -8726,7 +8908,7 @@ function TagsFilter(_a) {
     if (isLoading) {
         return (jsxRuntime.jsx("div", { className: "flex flex-col gap-4 ".concat(className), children: jsxRuntime.jsx("div", { className: "flex justify-center py-4", children: jsxRuntime.jsx(react.Spinner, { size: "sm" }) }) }));
     }
-    return (jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 ".concat(className), children: [error && (jsxRuntime.jsxs("div", { className: "text-danger text-small py-2", children: [t.errorLoadingPrefix, ": ", error] })), !error && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "flex flex-col gap-3", children: [jsxRuntime.jsxs(H4, { className: "text-tiny text-left text-default-700", children: [t.labelSelect, required && jsxRuntime.jsx("span", { className: "text-danger ml-0.5", children: "*" })] }), jsxRuntime.jsx(AuraAutocomplete, { placeholder: t.placeholder, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : t.placeholder, inputValue: inputValue, onInputChange: function (v) {
+    return (jsxRuntime.jsxs("div", { ref: rootRef, className: "flex flex-col gap-4 ".concat(className), children: [error && (jsxRuntime.jsxs("div", { className: "text-danger text-small py-2", children: [t.errorLoadingPrefix, ": ", error] })), !error && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "flex flex-col gap-3", children: [jsxRuntime.jsxs(H4, { className: "text-tiny text-left text-default-700", children: [t.labelSelect, required && jsxRuntime.jsx("span", { className: "text-danger ml-0.5", children: "*" })] }), jsxRuntime.jsx(AuraAutocomplete, { placeholder: t.placeholder, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : t.placeholder, inputValue: inputValue, onInputChange: function (v) {
                                     setInputValue(v);
                                     onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(v);
                                 }, selectedKey: null, items: itemsWithSentinel, onSelectionChange: handleAutocompleteSelection, 
@@ -8745,7 +8927,16 @@ function TagsFilter(_a) {
                                     // intercepts pointer events, blocking the parent modal's close button.
                                     // shouldCloseOnInteractOutside already handles closing on outside clicks.
                                     isNonModal: true,
-                                    shouldCloseOnInteractOutside: function () { return true; },
+                                    // El desplegable se renderiza en un portal, así que el campo de
+                                    // búsqueda queda FUERA de él y una pulsación sobre el texto contaba
+                                    // como interacción externa. Al cerrarse, el FocusScope devolvía el
+                                    // foco con un `.focus()` que abortaba el gesto de selección que el
+                                    // navegador acababa de iniciar: de ahí que arrastrar o hacer doble
+                                    // clic no seleccionara nada y solo quedara borrar letra a letra
+                                    // (con el teclado sí funcionaba, porque no pasa por aquí).
+                                    // Las pulsaciones dentro del componente dejan de contar como
+                                    // externas; las de fuera siguen cerrando el desplegable igual.
+                                    shouldCloseOnInteractOutside: function (element) { var _a; return !((_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.contains(element)); },
                                 }, listboxProps: {
                                     className: "max-h-[200px] overflow-y-auto",
                                 }, className: "w-full", children: function (item) {
@@ -8947,28 +9138,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.
  *
@@ -9538,10 +9707,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;
@@ -9574,6 +9746,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;
@@ -9584,6 +9757,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;
@@ -9604,6 +9778,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;
@@ -9617,9 +9795,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;