@beweco/aurora-ui 0.6.74 → 0.6.76-qa.102

package/dist/index.cjs.js

@@ -284,6 +284,10 @@ exports.HolidayType = void 0;
     HolidayType["DateRange"] = "dateRange";
 })(exports.HolidayType || (exports.HolidayType = {}));
 
+var CLASE_AURA = {
+    ring: "linda-aura-ring",
+    surface: "linda-aura",
+};
 /**
  * Botón genérico basado en HeroUI siguiendo las reglas de diseño BeweOS.
  *
@@ -294,10 +298,24 @@ exports.HolidayType = void 0;
  * - isLoading: On, Off
  * - Radius: md (por defecto)
  * - isIconOnly: True, False
+ * - ai: aura de Linda para las acciones que hace la IA (ver `Button.types.ts`)
  */
 var Button = function (_a) {
-    var _b = _a.color, color = _b === void 0 ? "primary" : _b, _c = _a.size, size = _c === void 0 ? "md" : _c, _d = _a.variant, variant = _d === void 0 ? "solid" : _d, _e = _a.radius, radius = _e === void 0 ? "sm" : _e, startContent = _a.startContent, endContent = _a.endContent, _f = _a.isLoading, isLoading = _f === void 0 ? false : _f, _g = _a.isIconOnly, isIconOnly = _g === void 0 ? false : _g, props = __rest(_a, ["color", "size", "variant", "radius", "startContent", "endContent", "isLoading", "isIconOnly"]);
-    return (jsxRuntime.jsx(react.Button, __assign({}, props, { color: color, size: size, variant: variant, radius: radius, startContent: startContent, endContent: endContent, isLoading: isLoading, isIconOnly: isIconOnly })));
+    var _b = _a.color, color = _b === void 0 ? "primary" : _b, _c = _a.size, size = _c === void 0 ? "md" : _c, _d = _a.variant, variant = _d === void 0 ? "solid" : _d, _e = _a.radius, radius = _e === void 0 ? "sm" : _e, startContent = _a.startContent, endContent = _a.endContent, _f = _a.isLoading, isLoading = _f === void 0 ? false : _f, _g = _a.isIconOnly, isIconOnly = _g === void 0 ? false : _g, ai = _a.ai, className = _a.className, children = _a.children, props = __rest(_a, ["color", "size", "variant", "radius", "startContent", "endContent", "isLoading", "isIconOnly", "ai", "className", "children"]);
+    /*
+     * El contenido se envuelve para poder subirlo por encima del aura.
+     *
+     * Y tiene que ser un elemento: `<Button>Crear campaña</Button>` pasa un NODO DE
+     * TEXTO, que no es posicionable, así que ningún selector puede sacarlo del fondo del
+     * apilado —el aura, que sí está posicionada, le pasaría por encima—. Con `ring` daría
+     * igual porque esa capa es solo el canto; con `surface` el texto se leería a través
+     * del degradado.
+     */
+    var contenido = ai ? (jsxRuntime.jsx("span", { className: "linda-aura-content", children: children })) : (children);
+    var clases = [ai ? CLASE_AURA[ai] : "", className]
+        .filter(Boolean)
+        .join(" ");
+    return (jsxRuntime.jsx(react.Button, __assign({}, props, { color: color, size: size, variant: variant, radius: radius, startContent: startContent, endContent: endContent, isLoading: isLoading, isIconOnly: isIconOnly, className: clases || undefined, children: contenido })));
 };
 
 var DatePicker = function (_a) {
@@ -581,9 +599,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, _e = _a.yAxisDomain, yAxisDomain = _e === void 0 ? [0, "dataMax + 100"] : _e;
+    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, _f = _a.xAxisInterval, xAxisInterval = _f === void 0 ? "preserveStartEnd" : _f;
     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 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: {
+    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, interval: xAxisInterval }), 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",
@@ -2967,6 +2985,20 @@ function computeTotal(data) {
 function isDonutEmpty(data) {
     return data.length === 0 || computeTotal(data) === 0;
 }
+/**
+ * Formatea `percent` (0-1) como entero + "%", excepto cuando la porción es
+ * real (>0) pero redondea a 0 — ahí muestra "<1%" en vez de "0%", que se lee
+ * como "no hay nada" y confunde cuando sí hay dato (ej. 4 de 2357 = 0.17%).
+ * `lessThanOneLabel` permite traducir el texto (ver `DonutChartTranslations`).
+ */
+function formatDonutPercent(percent, lessThanOneLabel) {
+    if (lessThanOneLabel === void 0) { lessThanOneLabel = "<1%"; }
+    if (!Number.isFinite(percent) || percent <= 0) {
+        return "0%";
+    }
+    var rounded = Math.round(percent * 100);
+    return rounded === 0 ? lessThanOneLabel : "".concat(rounded, "%");
+}
 /**
  * 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.
@@ -2984,6 +3016,7 @@ function computeSlices(data, palette) {
 var DEFAULT_TRANSLATIONS$b = {
     emptyState: "Sin datos para mostrar",
     totalLabel: "Total",
+    lessThanOnePercent: "<1%",
 };
 /**
  * DonutChart - Gráfico circular (pie o donut, según `innerRadiusRatio`) con
@@ -3002,7 +3035,7 @@ var DonutChart = function (_a) {
         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)); }) }))] }));
+    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.jsx("span", { className: "text-foreground-500", children: formatDonutPercent(slice.percent, t.lessThanOnePercent) })] }, slice.name)); }) }))] }));
 };
 
 var H1 = function (_a) {
@@ -3936,8 +3969,10 @@ var DEFAULT_HISTORY_VISIBLE_COUNT = 5;
  */
 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 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, isCollapsedProp = _a.isCollapsed, onCollapsedChange = _a.onCollapsedChange, defaultCollapsed = _a.defaultCollapsed;
+    var isControlled = isCollapsedProp !== undefined;
+    var _f = React.useState(defaultCollapsed !== null && defaultCollapsed !== void 0 ? defaultCollapsed : false), internalCollapsed = _f[0], setInternalCollapsed = _f[1];
+    var collapsed = isCollapsedProp !== null && isCollapsedProp !== void 0 ? isCollapsedProp : internalCollapsed;
     var t = __assign(__assign({}, DEFAULT_TRANSLATIONS$7), translations);
     var selectedKey = React.useMemo(function () {
         var _a, _b, _c;
@@ -3986,8 +4021,12 @@ var MenuClaw = React.memo(function MenuClaw(_a) {
         onOpenSidebarChange === null || onOpenSidebarChange === void 0 ? void 0 : onOpenSidebarChange(true);
     }, [onOpenSidebarChange]);
     var handleCollapseToggle = React.useCallback(function () {
-        setIsCollapsed(function (prev) { return !prev; });
-    }, []);
+        var next = !collapsed;
+        if (!isControlled) {
+            setInternalCollapsed(next);
+        }
+        onCollapsedChange === null || onCollapsedChange === void 0 ? void 0 : onCollapsedChange(next);
+    }, [collapsed, isControlled, onCollapsedChange]);
     var handleHelpClick = React.useCallback(function () {
         if (helpSection) {
             window.open(helpSection.redirect, "_blank");
@@ -4006,12 +4045,12 @@ var MenuClaw = React.memo(function MenuClaw(_a) {
         (_a = menuItems.onSelect) === null || _a === void 0 ? void 0 : _a.call(menuItems, key, href, "bottomBar");
     }, [onOpenSidebarChange, menuItems.onSelect]);
     var showBottomBar = (mobileBottomBarGroupKey && bottomBarItems.length > 0) || showNativeMenu;
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [showBottomBar ? (jsxRuntime.jsx(MenuMobileBottomBar, { items: bottomBarItems, selectedKey: selectedKey, onSelect: handleBottomBarSelect, onMenuPress: handleSidebarOpen, menuLabel: t.menuLabel, navAriaLabel: t.mobileNavAriaLabel, forceVisible: showNativeMenu && bottomBarItems.length === 0 })) : null, jsxRuntime.jsx("button", { type: "button", "aria-label": t.closeSidebarAriaLabel, className: "menu-claw-overlay ".concat(isOpenSidebar ? "menu-claw-overlay--open" : ""), onClick: handleSidebarClose, tabIndex: isOpenSidebar ? 0 : -1 }), jsxRuntime.jsx("div", { className: react.cn("menu-claw", isCollapsed ? "menu-claw--collapsed" : "menu-claw--expanded", isOpenSidebar && "menu-claw--mobile-open"), "aria-hidden": !isOpenSidebar, children: jsxRuntime.jsxs("div", { className: "menu-claw__content", children: [jsxRuntime.jsxs("div", { className: react.cn("flex items-center", isCollapsed ? "justify-center" : "justify-end"), children: [jsxRuntime.jsx(IconComponent, { icon: "material-symbols-light:close", size: "lg", className: "block cursor-pointer sm:hidden", onClick: handleSidebarClose }), jsxRuntime.jsx("button", { type: "button", "aria-label": t.toggleSidebarAriaLabel, onClick: handleCollapseToggle, className: "hidden h-7 w-7 shrink-0 cursor-pointer items-center justify-center rounded-lg text-default-500 transition-colors hover:bg-default-100 sm:flex", children: jsxRuntime.jsx(IconComponent, { icon: isCollapsed
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [showBottomBar ? (jsxRuntime.jsx(MenuMobileBottomBar, { items: bottomBarItems, selectedKey: selectedKey, onSelect: handleBottomBarSelect, onMenuPress: handleSidebarOpen, menuLabel: t.menuLabel, navAriaLabel: t.mobileNavAriaLabel, forceVisible: showNativeMenu && bottomBarItems.length === 0 })) : null, jsxRuntime.jsx("button", { type: "button", "aria-label": t.closeSidebarAriaLabel, className: "menu-claw-overlay ".concat(isOpenSidebar ? "menu-claw-overlay--open" : ""), onClick: handleSidebarClose, tabIndex: isOpenSidebar ? 0 : -1 }), jsxRuntime.jsx("div", { className: react.cn("menu-claw", collapsed ? "menu-claw--collapsed" : "menu-claw--expanded", isOpenSidebar && "menu-claw--mobile-open"), "aria-hidden": !isOpenSidebar, children: jsxRuntime.jsxs("div", { className: "menu-claw__content", children: [jsxRuntime.jsxs("div", { className: react.cn("flex items-center", collapsed ? "justify-center" : "justify-end"), children: [jsxRuntime.jsx(IconComponent, { icon: "material-symbols-light:close", size: "lg", className: "block cursor-pointer sm:hidden", onClick: handleSidebarClose }), jsxRuntime.jsx("button", { type: "button", "aria-label": t.toggleSidebarAriaLabel, onClick: handleCollapseToggle, className: "hidden h-7 w-7 shrink-0 cursor-pointer items-center justify-center rounded-lg text-default-500 transition-colors hover:bg-default-100 sm:flex", children: jsxRuntime.jsx(IconComponent, { icon: collapsed
                                             ? "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) {
+                                            : "solar:alt-arrow-left-linear", size: "md", "aria-hidden": true }) })] }), jsxRuntime.jsxs("div", { className: react.cn("flex items-center py-3", collapsed ? "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" }), !collapsed ? (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: collapsed, 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) { 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] }) })] }));
+                                return (jsxRuntime.jsxs("div", { className: "mb-2", children: [group.title && !collapsed ? (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: collapsed, 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: collapsed, children: !collapsed ? (jsxRuntime.jsx("span", { className: "menu-claw-collapsible truncate", children: helpSection.title })) : null }) })) : null] }) })] }));
 });
 
 /**
@@ -4458,13 +4497,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);
@@ -9638,6 +9670,127 @@ function removeCustomPrimaryColor() {
     }
 }
 
+/**
+ * Los tres tonos del aura de Linda, derivados del `primary` de la agencia.
+ *
+ * Linda no tiene color propio: es el `primary` que el negocio eligió en el onboarding,
+ * y por eso aquí no hay ni un color escrito. Lo único que se fija es CUÁNTO se gira ese
+ * tono y en qué banda de luz se pinta.
+ */
+/**
+ * Grados que se gira el `primary` para cada tono, en el orden en que se pintan.
+ *
+ * Son muchos grados a propósito. La gracia del aura es que haya MÁS DE UN COLOR: con
+ * un giro discreto —del orden de 18°, el que usa un degradado de profundidad— salen
+ * tres versiones del mismo tono y el resultado se lee como un plano. A ±55° el salto
+ * se ve como otro color y sigue dentro de la familia del `primary`, que es lo que
+ * permite que esto funcione con la agencia número siete sin tocar nada.
+ *
+ * El tono del medio va casi sin girar: es el que ancla el conjunto al color de la
+ * agencia, para que el aura se lea como suya y no como una decoración pegada encima.
+ */
+var GIROS = [-56, 8, 54];
+/**
+ * Banda de luz en la que se pintan los tres tonos, en porcentaje HSL.
+ *
+ * Los tonos NO heredan la luz del `primary`, y esto es lo que más se nota: un primary
+ * oscuro y poco saturado sobre una superficie clara se lee como una mancha gris —sucia,
+ * no como color—, y uno casi blanco desaparece contra el fondo. Se llevan al paso medio
+ * de la escala, que es el que funciona en los dos casos.
+ */
+var BANDA_LUZ = { min: 52, max: 72 };
+/**
+ * Banda de saturación de los tres tonos, en porcentaje HSL.
+ *
+ * El techo es lo que evita que el aura grite. A plena saturación los tonos dejan de ser
+ * ambiente y pasan a ser tres focos de color encima de un control de 40 pt: bonito en
+ * una captura, insoportable en una barra que se mira todo el día.
+ *
+ * ⚠️ **Y hay una razón que no es estética.** Girar el tono puede caer en un rojo vivo:
+ * un `primary` amarillo —51°— girado −56° aterriza en 355°, que a saturación 100 se lee
+ * como un estado de error alrededor de un botón que no ha fallado. Visto al renderizarlo,
+ * no razonándolo. Bajado a 65 el mismo tono es un rosa apagado y vuelve a leerse como lo
+ * que es: decoración.
+ *
+ * El suelo existe por lo contrario: un `primary` casi gris da tres tonos que no se
+ * distinguen entre sí, y entonces no hay degradado que ver —el aura se lee como una
+ * mancha plana—.
+ */
+var BANDA_SATURACION = { min: 35, max: 65 };
+var VUELTA = 360;
+/** `H S% L%` — el formato exacto en el que HeroUI guarda sus variables de color. */
+var TRIPLETE = /^\s*(-?\d+(?:\.\d+)?)\s+(\d+(?:\.\d+)?)%\s+(\d+(?:\.\d+)?)%\s*$/;
+/**
+ * Lee el triplete que HeroUI deja en una variable de color.
+ *
+ * Devuelve `null` en vez de lanzar: esto corre en un efecto de tema y el valor puede
+ * no estar todavía —la clase del tema aún no está en el `<html>`, o el consumidor no
+ * cargó la hoja de estilos—. Un aura que no se pinta es un problema menor; una
+ * excepción que tumba el provider de tema, no.
+ */
+function parseHslTriplet(value) {
+    var encontrado = TRIPLETE.exec(value);
+    if (!encontrado) {
+        return null;
+    }
+    var h = encontrado[1], s = encontrado[2], l = encontrado[3];
+    return { h: Number(h), s: Number(s), l: Number(l) };
+}
+/** Deja un ángulo dentro de `[0, 360)`, venga de donde venga. */
+function normalizarTono(grados) {
+    return ((grados % VUELTA) + VUELTA) % VUELTA;
+}
+function acotar(valor, min, max) {
+    return Math.min(Math.max(valor, min), max);
+}
+/**
+ * Los tres tonos del aura, listos para escribirse en una variable CSS.
+ *
+ * Se redondean a entero: es un degradado decorativo, y las décimas de grado solo
+ * alargan la hoja de estilos.
+ */
+function deriveLindaTones(primary) {
+    var luz = Math.round(acotar(primary.l, BANDA_LUZ.min, BANDA_LUZ.max));
+    var saturacion = Math.round(acotar(primary.s, BANDA_SATURACION.min, BANDA_SATURACION.max));
+    var tonos = GIROS.map(function (giro) {
+        return "".concat(Math.round(normalizarTono(primary.h + giro)), " ").concat(saturacion, "% ").concat(luz, "%");
+    });
+    return tonos;
+}
+/** Las variables que se escriben en el `<html>`, en el orden en que se pintan. */
+var LINDA_TONE_PROPERTIES = [
+    "--linda-1",
+    "--linda-2",
+    "--linda-3",
+];
+/**
+ * Escribe los tres tonos del aura a partir del valor de `--heroui-primary`.
+ *
+ * Si el primary no se puede leer, **borra los que hubiera** y devuelve `false`. Es lo
+ * contrario de dejarlos: unos tonos viejos son de otro tema, y un aura del color
+ * anterior es peor que un aura que no se pinta —la CSS del efecto ya está escrita para
+ * desaparecer sin sus variables—.
+ */
+function applyLindaTones(style, primaryValue) {
+    var primary = parseHslTriplet(primaryValue);
+    if (!primary) {
+        removeLindaTones(style);
+        return false;
+    }
+    var tonos = deriveLindaTones(primary);
+    LINDA_TONE_PROPERTIES.forEach(function (propiedad, indice) {
+        style.setProperty(propiedad, tonos[indice]);
+    });
+    return true;
+}
+/** Quita los tres tonos del aura. */
+function removeLindaTones(style) {
+    for (var _i = 0, LINDA_TONE_PROPERTIES_1 = LINDA_TONE_PROPERTIES; _i < LINDA_TONE_PROPERTIES_1.length; _i++) {
+        var propiedad = LINDA_TONE_PROPERTIES_1[_i];
+        style.removeProperty(propiedad);
+    }
+}
+
 /**
  * Custom hook to manage the theme state and side effects.
  * Supports both named ThemeColor values and arbitrary hex colors.
@@ -9683,6 +9836,30 @@ var useThemeManager = function () {
             removeCustomPrimaryColor();
         }
     }, [customHex, mode]);
+    /*
+     * Los tres tonos del aura de Linda, derivados del primary que acaba de quedar fijado.
+     *
+     * Va DESPUÉS de los dos efectos de arriba y depende de lo mismo que ellos, que es lo
+     * que garantiza que lea el primary definitivo: React ejecuta los efectos en orden de
+     * declaración, así que aquí la clase del tema ya está en el `<html>` y el hex a medida
+     * ya está escrito o retirado.
+     *
+     * Se lee del estilo COMPUTADO y no de `customHex` a propósito: el primary llega por
+     * dos caminos —el hex del negocio o la clase de una de las familias de tema— y el
+     * computado es el único sitio donde los dos han convergido. Derivarlo solo de
+     * `customHex` dejaría sin aura a toda agencia que use una familia tal cual.
+     */
+    /*
+     * `customHex` y `rawTheme` están en la lista aunque el cuerpo no los lea: son la señal
+     * de que el `<html>` acaba de cambiar. La entrada real de este efecto es el estilo
+     * computado, que la regla no puede ver, y sin ellos el aura se quedaría con los tonos
+     * del tema anterior.
+     */
+    // biome-ignore lint/correctness/useExhaustiveDependencies: ver el comentario de arriba
+    React.useEffect(function () {
+        var html = document.documentElement;
+        applyLindaTones(html.style, getComputedStyle(html).getPropertyValue("--heroui-primary"));
+    }, [customHex, rawTheme]);
     var setMode = React.useCallback(function (newMode) {
         var effectiveMode = newMode === "dark" ? "light" : newMode;
         var newTheme = color === "blue" ? effectiveMode : "".concat(color, "-").concat(effectiveMode);
@@ -9855,6 +10032,7 @@ exports.InputPassword = InputPassword;
 exports.Kanban = Kanban;
 exports.KanbanCard = KanbanCard;
 exports.KanbanColumn = KanbanColumn;
+exports.LINDA_TONE_PROPERTIES = LINDA_TONE_PROPERTIES;
 exports.LindaIcon = LindaIcon;
 exports.MenuClaw = MenuClaw;
 exports.MenuComponent = MenuComponent;
@@ -9905,6 +10083,7 @@ exports.Wizard = Wizard;
 exports.WizardNavigation = WizardNavigation;
 exports.WizardSidebar = WizardSidebar;
 exports.applyCustomPrimaryColor = applyCustomPrimaryColor;
+exports.applyLindaTones = applyLindaTones;
 exports.computeBars = computeBars;
 exports.computeMax = computeMax;
 exports.computeSlices = computeSlices;
@@ -9914,9 +10093,11 @@ exports.createCurrencyFormatter = createCurrencyFormatter;
 exports.defaultCountries = uniqueCountries;
 exports.defaultCurrencyOptions = defaultCurrencyOptions;
 exports.defaultTranslations = defaultTranslations$5;
+exports.deriveLindaTones = deriveLindaTones;
 exports.dismissControlProps = dismissControlProps;
 exports.forceLightOnlyThemeBeforeReact = forceLightOnlyThemeBeforeReact;
 exports.formatAuroraThemeTooltip = formatAuroraThemeTooltip;
+exports.formatDonutPercent = formatDonutPercent;
 exports.generateThemeColorScale = generateThemeColorScale;
 exports.getContrastForeground = getContrastForeground;
 exports.getRegisteredThemeColorBases = getRegisteredThemeColorBases;
@@ -9931,7 +10112,9 @@ exports.isGroupState = isGroupState;
 exports.isHexColor = isHexColor;
 exports.isRankedBarListEmpty = isRankedBarListEmpty;
 exports.isSegmentationGroup = isSegmentationGroup;
+exports.parseHslTriplet = parseHslTriplet;
 exports.removeCustomPrimaryColor = removeCustomPrimaryColor;
+exports.removeLindaTones = removeLindaTones;
 exports.shouldClosePopoverOnInteractOutside = shouldClosePopoverOnInteractOutside;
 exports.sizeMap = sizeMap;
 exports.themeColors = themeColors;