@beweco/aurora-ui 0.6.75 → 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) {
@@ -4464,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);
@@ -9644,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.
@@ -9689,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);
@@ -9861,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;
@@ -9911,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;
@@ -9920,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;
@@ -9937,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;

package/dist/index.esm.js

@@ -285,6 +285,10 @@ var HolidayType;
     HolidayType["DateRange"] = "dateRange";
 })(HolidayType || (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.
  *
@@ -295,10 +299,24 @@ var HolidayType;
  * - 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 (jsx(Button$1, __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 ? (jsx("span", { className: "linda-aura-content", children: children })) : (children);
+    var clases = [ai ? CLASE_AURA[ai] : "", className]
+        .filter(Boolean)
+        .join(" ");
+    return (jsx(Button$1, __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) {
@@ -582,9 +600,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 = (jsxs(Fragment, { children: [hasHeader && (jsxs("div", { className: "flex items-start justify-between mb-6", children: [jsxs("div", { children: [title != null && (jsx(H3, { className: "text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1", children: title })), value != null && (jsxs("div", { className: "flex items-baseline gap-2", children: [jsx("span", { className: "text-2xl font-bold text-gray-900", children: value }), trend != null && (jsx("span", { className: "text-xs font-medium text-yellow-600 bg-yellow-50 px-2 py-1 rounded", children: trend }))] }))] }), series.length > 0 && (jsx("div", { className: "flex flex-wrap items-center gap-4", children: series.map(function (s) { return (jsxs("div", { className: "flex items-center gap-2", children: [jsx("svg", { width: "16", height: "2", viewBox: "0 0 16 2", fill: "none", children: jsx("line", { x1: "0", y1: "1", x2: "16", y2: "1", stroke: s.color, strokeWidth: "2" }) }), jsx("span", { className: "text-xs text-gray-600 font-medium", children: s.label })] }, s.dataKey)); }) }))] })), jsx("div", { className: "w-full", style: { height: "".concat(height, "px") }, children: jsx(ResponsiveContainer, { width: "100%", height: "100%", children: jsxs(LineChart, { data: data, margin: { top: 5, right: 5, left: 5, bottom: 5 }, children: [jsx("defs", { children: series.map(function (s) { return (jsxs("linearGradient", { id: "area-line-chart-".concat(s.dataKey), x1: "0", y1: "0", x2: "0", y2: "1", children: [jsx("stop", { offset: "0%", stopColor: s.color, stopOpacity: 0.3 }), jsx("stop", { offset: "50%", stopColor: s.color, stopOpacity: 0.15 }), jsx("stop", { offset: "100%", stopColor: s.color, stopOpacity: 0 })] }, s.dataKey)); }) }), jsx(XAxis, { dataKey: xAxisKey, axisLine: false, tickLine: false, tick: { fill: "#9ca3af", fontSize: 12 }, dy: 10 }), jsx(YAxis, { axisLine: false, tickLine: false, tick: { fill: "transparent", fontSize: 0 }, width: 0, tickCount: 6, domain: yAxisDomain, allowDecimals: false }), jsx(CartesianGrid, { strokeDasharray: "3 3", stroke: "#d1d5db", strokeOpacity: 0.5, vertical: false, horizontal: true }), jsx(Tooltip$1, { content: jsx(ChartTooltip, { series: series, formatValue: formatTooltipValue }) }), series.map(function (s) { return (jsx(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 (jsx(Line, { type: "natural", dataKey: s.dataKey, name: s.dataKey, stroke: s.color, strokeWidth: 3, dot: false, activeDot: {
+    var content = (jsxs(Fragment, { children: [hasHeader && (jsxs("div", { className: "flex items-start justify-between mb-6", children: [jsxs("div", { children: [title != null && (jsx(H3, { className: "text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1", children: title })), value != null && (jsxs("div", { className: "flex items-baseline gap-2", children: [jsx("span", { className: "text-2xl font-bold text-gray-900", children: value }), trend != null && (jsx("span", { className: "text-xs font-medium text-yellow-600 bg-yellow-50 px-2 py-1 rounded", children: trend }))] }))] }), series.length > 0 && (jsx("div", { className: "flex flex-wrap items-center gap-4", children: series.map(function (s) { return (jsxs("div", { className: "flex items-center gap-2", children: [jsx("svg", { width: "16", height: "2", viewBox: "0 0 16 2", fill: "none", children: jsx("line", { x1: "0", y1: "1", x2: "16", y2: "1", stroke: s.color, strokeWidth: "2" }) }), jsx("span", { className: "text-xs text-gray-600 font-medium", children: s.label })] }, s.dataKey)); }) }))] })), jsx("div", { className: "w-full", style: { height: "".concat(height, "px") }, children: jsx(ResponsiveContainer, { width: "100%", height: "100%", children: jsxs(LineChart, { data: data, margin: { top: 5, right: 5, left: 5, bottom: 5 }, children: [jsx("defs", { children: series.map(function (s) { return (jsxs("linearGradient", { id: "area-line-chart-".concat(s.dataKey), x1: "0", y1: "0", x2: "0", y2: "1", children: [jsx("stop", { offset: "0%", stopColor: s.color, stopOpacity: 0.3 }), jsx("stop", { offset: "50%", stopColor: s.color, stopOpacity: 0.15 }), jsx("stop", { offset: "100%", stopColor: s.color, stopOpacity: 0 })] }, s.dataKey)); }) }), jsx(XAxis, { dataKey: xAxisKey, axisLine: false, tickLine: false, tick: { fill: "#9ca3af", fontSize: 12 }, dy: 10, interval: xAxisInterval }), jsx(YAxis, { axisLine: false, tickLine: false, tick: { fill: "transparent", fontSize: 0 }, width: 0, tickCount: 6, domain: yAxisDomain, allowDecimals: false }), jsx(CartesianGrid, { strokeDasharray: "3 3", stroke: "#d1d5db", strokeOpacity: 0.5, vertical: false, horizontal: true }), jsx(Tooltip$1, { content: jsx(ChartTooltip, { series: series, formatValue: formatTooltipValue }) }), series.map(function (s) { return (jsx(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 (jsx(Line, { type: "natural", dataKey: s.dataKey, name: s.dataKey, stroke: s.color, strokeWidth: 3, dot: false, activeDot: {
                                     r: 6,
                                     fill: s.color,
                                     stroke: "#fff",
@@ -2968,6 +2986,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.
@@ -2985,6 +3017,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
@@ -3003,7 +3036,7 @@ var DonutChart = function (_a) {
         return formatValue ? formatValue(value) : String(value);
     };
     var isDonut = innerRadiusRatio > 0;
-    return (jsxs("div", { className: className, children: [jsxs("div", { className: "relative w-full", style: { height: height }, children: [jsx(ResponsiveContainer, { width: "100%", height: "100%", children: jsxs(PieChart, { children: [jsx(Pie, { data: slices, dataKey: "value", nameKey: "name", innerRadius: isDonut ? "".concat(innerRadiusRatio * 100, "%") : 0, outerRadius: "90%", stroke: "none", children: slices.map(function (slice) { return (jsx(Cell, { fill: slice.color }, slice.name)); }) }), jsx(Tooltip$1, { formatter: function (value) { return format(value); } })] }) }), isDonut && showTotal && (jsxs("div", { className: "aurora-donut-total pointer-events-none absolute inset-0 flex flex-col items-center justify-center", "aria-hidden": "true", children: [jsx("span", { className: "text-xs text-foreground-500", children: t.totalLabel }), jsx("span", { className: "text-xl font-semibold", children: format(total) })] }))] }), showLegend && (jsx("ul", { className: "mt-3 flex flex-wrap gap-3", children: slices.map(function (slice) { return (jsxs("li", { className: "flex items-center gap-1.5 text-xs", children: [jsx("span", { className: "h-2 w-2 rounded-full", style: { backgroundColor: slice.color }, "aria-hidden": "true" }), jsx("span", { children: slice.name }), jsxs("span", { className: "text-foreground-500", children: [Math.round(slice.percent * 100), "%"] })] }, slice.name)); }) }))] }));
+    return (jsxs("div", { className: className, children: [jsxs("div", { className: "relative w-full", style: { height: height }, children: [jsx(ResponsiveContainer, { width: "100%", height: "100%", children: jsxs(PieChart, { children: [jsx(Pie, { data: slices, dataKey: "value", nameKey: "name", innerRadius: isDonut ? "".concat(innerRadiusRatio * 100, "%") : 0, outerRadius: "90%", stroke: "none", children: slices.map(function (slice) { return (jsx(Cell, { fill: slice.color }, slice.name)); }) }), jsx(Tooltip$1, { formatter: function (value) { return format(value); } })] }) }), isDonut && showTotal && (jsxs("div", { className: "aurora-donut-total pointer-events-none absolute inset-0 flex flex-col items-center justify-center", "aria-hidden": "true", children: [jsx("span", { className: "text-xs text-foreground-500", children: t.totalLabel }), jsx("span", { className: "text-xl font-semibold", children: format(total) })] }))] }), showLegend && (jsx("ul", { className: "mt-3 flex flex-wrap gap-3", children: slices.map(function (slice) { return (jsxs("li", { className: "flex items-center gap-1.5 text-xs", children: [jsx("span", { className: "h-2 w-2 rounded-full", style: { backgroundColor: slice.color }, "aria-hidden": "true" }), jsx("span", { children: slice.name }), jsx("span", { className: "text-foreground-500", children: formatDonutPercent(slice.percent, t.lessThanOnePercent) })] }, slice.name)); }) }))] }));
 };
 
 var H1 = function (_a) {
@@ -4465,13 +4498,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);
@@ -9645,6 +9671,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.
@@ -9690,6 +9837,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
+    useEffect(function () {
+        var html = document.documentElement;
+        applyLindaTones(html.style, getComputedStyle(html).getPropertyValue("--heroui-primary"));
+    }, [customHex, rawTheme]);
     var setMode = useCallback(function (newMode) {
         var effectiveMode = newMode === "dark" ? "light" : newMode;
         var newTheme = color === "blue" ? effectiveMode : "".concat(color, "-").concat(effectiveMode);
@@ -9811,4 +9982,4 @@ var NavigationLoadingProvider = function (_a) {
     return (jsxs(NavigationLoadingContext.Provider, { value: value, children: [children, jsx(NavigationLoadingOverlay, { isVisible: isVisible })] }));
 };
 
-export { ALL_THEMES, AURORA_THEME_FAMILIES, AURORA_THEME_REGISTRY, AccordionList, AddHolidayForm, AnalyticsCard, AreaLineChart, AuraAutocomplete, AuraTable, AuraToastProvider, BEWEOS_THEME_MODE_COOKIE_NAME, BreadcrumbsComponent, Button, CONTAINER_ATTRIBUTE, Card, Chip, ColorPicker, ColorSelector, ContentCarousel, Currency, DEFAULT_DONUT_COLORS, DEFAULT_PREDEFINED_COLORS, DEFAULT_RANKED_BAR_COLORS, DISMISS_CONTROL_ATTRIBUTE, DatePicker, DateRangePicker, DateSelector, DonutChart, DrawerFilters, EmailPreview, EnumMenuNavListItem, GlobalToast, H1, H2, H3, H4, HeaderComponent, HolidayType, IconComponent, ImagePreview, Input, InputPassword, Kanban, KanbanCard, KanbanColumn, LindaIcon, MenuClaw, MenuComponent, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, MultiStepWizard, NavigationLoadingContext, NavigationLoadingOverlay, NavigationLoadingProvider, P, Pagination, Phone, PromotionalBanner, REGISTERED_THEME_COLORS, RangeFilter, RankedBarList, RowSteps, DEFAULT_TRANSLATIONS$1 as SEGMENTATION_DEFAULT_TRANSLATIONS, ScheduleRow, SearchInput, SegmentationBuilder, Select, SimpleLineChart, SocialMediaBar, SocialMediaCarousel, SocialMediaPreview, StatTile, StepIndicator, Switch as SwitchComponent, THEME_COLOR_HEX_MAP, TagsFilter, Textarea, ThemeContext, ThemePicker, ThemeProvider, TimeInput as TimeInputComponent, ToastContext, Tooltip, TwoColumnLayoutAgent, UploadFile, VerticalSteps, ViolinPlot, WhatsAppPreview, Wizard, WizardNavigation, WizardSidebar, applyCustomPrimaryColor, computeBars, computeMax, computeSlices, computeTotal, containerProps, createCurrencyFormatter, uniqueCountries as defaultCountries, defaultCurrencyOptions, defaultTranslations$5 as defaultTranslations, dismissControlProps, forceLightOnlyThemeBeforeReact, formatAuroraThemeTooltip, generateThemeColorScale, getContrastForeground, getRegisteredThemeColorBases, getSelectedKeyFromPath, hexToThemeColor, hslToCssValue, isAuroraFullThemeId, isDismissControl, isDonutEmpty, isExactThemeColor, isGroupState, isHexColor, isRankedBarListEmpty, isSegmentationGroup, removeCustomPrimaryColor, shouldClosePopoverOnInteractOutside, sizeMap, themeColors, useAuraToast, useCloseOnAncestorScroll, useMediaQuery, useNavigationLoading, useThemeContext };
+export { ALL_THEMES, AURORA_THEME_FAMILIES, AURORA_THEME_REGISTRY, AccordionList, AddHolidayForm, AnalyticsCard, AreaLineChart, AuraAutocomplete, AuraTable, AuraToastProvider, BEWEOS_THEME_MODE_COOKIE_NAME, BreadcrumbsComponent, Button, CONTAINER_ATTRIBUTE, Card, Chip, ColorPicker, ColorSelector, ContentCarousel, Currency, DEFAULT_DONUT_COLORS, DEFAULT_PREDEFINED_COLORS, DEFAULT_RANKED_BAR_COLORS, DISMISS_CONTROL_ATTRIBUTE, DatePicker, DateRangePicker, DateSelector, DonutChart, DrawerFilters, EmailPreview, EnumMenuNavListItem, GlobalToast, H1, H2, H3, H4, HeaderComponent, HolidayType, IconComponent, ImagePreview, Input, InputPassword, Kanban, KanbanCard, KanbanColumn, LINDA_TONE_PROPERTIES, LindaIcon, MenuClaw, MenuComponent, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, MultiStepWizard, NavigationLoadingContext, NavigationLoadingOverlay, NavigationLoadingProvider, P, Pagination, Phone, PromotionalBanner, REGISTERED_THEME_COLORS, RangeFilter, RankedBarList, RowSteps, DEFAULT_TRANSLATIONS$1 as SEGMENTATION_DEFAULT_TRANSLATIONS, ScheduleRow, SearchInput, SegmentationBuilder, Select, SimpleLineChart, SocialMediaBar, SocialMediaCarousel, SocialMediaPreview, StatTile, StepIndicator, Switch as SwitchComponent, THEME_COLOR_HEX_MAP, TagsFilter, Textarea, ThemeContext, ThemePicker, ThemeProvider, TimeInput as TimeInputComponent, ToastContext, Tooltip, TwoColumnLayoutAgent, UploadFile, VerticalSteps, ViolinPlot, WhatsAppPreview, Wizard, WizardNavigation, WizardSidebar, applyCustomPrimaryColor, applyLindaTones, computeBars, computeMax, computeSlices, computeTotal, containerProps, createCurrencyFormatter, uniqueCountries as defaultCountries, defaultCurrencyOptions, defaultTranslations$5 as defaultTranslations, deriveLindaTones, dismissControlProps, forceLightOnlyThemeBeforeReact, formatAuroraThemeTooltip, formatDonutPercent, generateThemeColorScale, getContrastForeground, getRegisteredThemeColorBases, getSelectedKeyFromPath, hexToThemeColor, hslToCssValue, isAuroraFullThemeId, isDismissControl, isDonutEmpty, isExactThemeColor, isGroupState, isHexColor, isRankedBarListEmpty, isSegmentationGroup, parseHslTriplet, removeCustomPrimaryColor, removeLindaTones, shouldClosePopoverOnInteractOutside, sizeMap, themeColors, useAuraToast, useCloseOnAncestorScroll, useMediaQuery, useNavigationLoading, useThemeContext };

package/dist/types/components/area-line-chart/AreaLineChart.d.ts

@@ -1,3 +1,3 @@
 import type { AreaLineChartProps } from "./AreaLineChart.types";
-export declare function AreaLineChart<T extends Record<string, unknown>>({ data, xAxisKey, series, title, value, trend, height, className, wrappedInCard, formatTooltipValue, yAxisDomain, }: AreaLineChartProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function AreaLineChart<T extends Record<string, unknown>>({ data, xAxisKey, series, title, value, trend, height, className, wrappedInCard, formatTooltipValue, yAxisDomain, xAxisInterval, }: AreaLineChartProps<T>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=AreaLineChart.d.ts.map

package/dist/types/components/area-line-chart/AreaLineChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AreaLineChart.d.ts","sourceRoot":"","sources":["../../../../src/components/area-line-chart/AreaLineChart.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EACX,kBAAkB,EAElB,MAAM,uBAAuB,CAAC;AAgD/B,wBAAgB,aAAa,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,EAChE,IAAI,EACJ,QAAQ,EACR,MAAM,EACN,KAAK,EACL,KAAK,EACL,KAAK,EACL,MAAY,EACZ,SAAc,EACd,aAAqB,EACrB,kBAAkB,EAClB,WAAkC,GAClC,EAAE,kBAAkB,CAAC,CAAC,CAAC,2CAoJvB"}
+{"version":3,"file":"AreaLineChart.d.ts","sourceRoot":"","sources":["../../../../src/components/area-line-chart/AreaLineChart.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EACX,kBAAkB,EAElB,MAAM,uBAAuB,CAAC;AAgD/B,wBAAgB,aAAa,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,EAChE,IAAI,EACJ,QAAQ,EACR,MAAM,EACN,KAAK,EACL,KAAK,EACL,KAAK,EACL,MAAY,EACZ,SAAc,EACd,aAAqB,EACrB,kBAAkB,EAClB,WAAkC,EAClC,aAAkC,GAClC,EAAE,kBAAkB,CAAC,CAAC,CAAC,2CAqJvB"}

package/dist/types/components/area-line-chart/AreaLineChart.types.d.ts

@@ -35,5 +35,17 @@ export interface AreaLineChartProps<T extends Record<string, unknown> = Record<s
      * corresponde a quien consume el componente, no a AreaLineChart.
      */
     yAxisDomain?: [number | string, number | string];
+    /**
+     * Estrategia de Recharts para decidir qué ticks del eje X pintar cuando no
+     * caben todos. `0` fuerza a pintar cada punto de `data` sin saltar
+     * ninguno — correcto para pocos puntos con labels cortos (ej. una
+     * tendencia mensual de 8-12 meses), pero con muchos puntos o labels
+     * largos los ticks se solapan (Recharts no rota ni elide con `interval={0}`,
+     * y `minTickGap` queda inoperante). Igual que `yAxisDomain`, esa
+     * decisión le corresponde a quien consume el componente según su dataset,
+     * no a `AreaLineChart`.
+     * @default "preserveStartEnd" — garantiza el primer y el último tick sin solapar
+     */
+    xAxisInterval?: number | "preserveStart" | "preserveEnd" | "preserveStartEnd";
 }
 //# sourceMappingURL=AreaLineChart.types.d.ts.map

package/dist/types/components/area-line-chart/AreaLineChart.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AreaLineChart.types.d.ts","sourceRoot":"","sources":["../../../../src/components/area-line-chart/AreaLineChart.types.ts"],"names":[],"mappings":"AAAA,2DAA2D;AAC3D,MAAM,WAAW,yBAAyB;IACzC,sEAAsE;IACtE,OAAO,EAAE,MAAM,CAAC;IAChB,gDAAgD;IAChD,KAAK,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,kBAAkB,CAClC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAE3D,gFAAgF;IAChF,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,0DAA0D;IAC1D,QAAQ,EAAE,MAAM,CAAC,GAAG,MAAM,CAAC;IAC3B,2CAA2C;IAC3C,MAAM,EAAE,yBAAyB,EAAE,CAAC;IACpC,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+BAA+B;IAC/B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uFAAuF;IACvF,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,kDAAkD;IAClD,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,MAAM,CAAC;IAChE;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;CACjD"}
+{"version":3,"file":"AreaLineChart.types.d.ts","sourceRoot":"","sources":["../../../../src/components/area-line-chart/AreaLineChart.types.ts"],"names":[],"mappings":"AAAA,2DAA2D;AAC3D,MAAM,WAAW,yBAAyB;IACzC,sEAAsE;IACtE,OAAO,EAAE,MAAM,CAAC;IAChB,gDAAgD;IAChD,KAAK,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,kBAAkB,CAClC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAE3D,gFAAgF;IAChF,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,0DAA0D;IAC1D,QAAQ,EAAE,MAAM,CAAC,GAAG,MAAM,CAAC;IAC3B,2CAA2C;IAC3C,MAAM,EAAE,yBAAyB,EAAE,CAAC;IACpC,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+BAA+B;IAC/B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uFAAuF;IACvF,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,kDAAkD;IAClD,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,MAAM,CAAC;IAChE;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;IACjD;;;;;;;;;;OAUG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,eAAe,GAAG,aAAa,GAAG,kBAAkB,CAAC;CAC9E"}