@beweco/aurora-ui 1.0.0-beta.140 → 1.0.0-beta.141

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import { Card as Card$1, Breadcrumbs, ProgressBar, cn, Label, ListBoxSection, ListBoxItem, Separator, RouterProvider, I18nProvider, useOverlayState, Spinner, buttonVariants, Button as Button$1, Chip as Chip$1, CloseButton, Pagination as Pagination$1, Skeleton, Accordion, DatePicker as DatePicker$1, DateField, Description, Calendar, FieldError, DateRangePicker as DateRangePicker$1, RangeCalendar, TextField, InputGroup, RadioGroup, Radio, Tabs as Tabs$1, Dropdown as Dropdown$1, Header, ComboBox, Input as Input$1, ListBox, Tooltip as Tooltip$2, DropdownTrigger, DropdownPopover, DropdownMenu, DropdownSection as DropdownSection$1, DropdownItem, Badge as Badge$1, Popover, PopoverTrigger, PopoverContent, Avatar, Link, Switch as Switch$1, TimeField, Select as Select$1, Checkbox as Checkbox$1, Table as Table$1, TextArea, toastVariants, WarningIcon, SuccessIcon, InfoIcon, DangerIcon, Modal as Modal$1, Slider, Drawer as Drawer$1, ModalHeader as ModalHeader$1, ModalBody as ModalBody$1, ModalFooter as ModalFooter$1, DrawerHeader as DrawerHeader$1, DrawerBody as DrawerBody$1, DrawerFooter as DrawerFooter$1, Alert as Alert$1 } from '@heroui/react';
+import { Card as Card$1, Breadcrumbs, ProgressBar, cn, Label, ListBoxSection, ListBoxItem, Separator, RouterProvider, I18nProvider, useOverlayState, Spinner, buttonVariants, Button as Button$1, Chip as Chip$1, CloseButton, Pagination as Pagination$1, Skeleton, Accordion, DatePicker as DatePicker$1, DateField, Description, Calendar, FieldError, DateRangePicker as DateRangePicker$1, RangeCalendar, TextField, InputGroup, RadioGroup, Radio, Tabs as Tabs$1, Dropdown as Dropdown$1, Header, ComboBox, Input as Input$1, ListBox, Tooltip as Tooltip$2, DropdownTrigger, DropdownPopover, DropdownMenu, DropdownSection as DropdownSection$1, DropdownItem, Badge as Badge$1, Popover, PopoverTrigger, PopoverContent, Avatar, Link, Switch as Switch$1, TimeField, useFilter, Autocomplete, Select as Select$1, SearchField, Checkbox as Checkbox$1, Table as Table$1, TextArea, toastVariants, WarningIcon, SuccessIcon, InfoIcon, DangerIcon, Modal as Modal$1, Slider, Drawer as Drawer$1, ModalHeader as ModalHeader$1, ModalBody as ModalBody$1, ModalFooter as ModalFooter$1, DrawerHeader as DrawerHeader$1, DrawerBody as DrawerBody$1, DrawerFooter as DrawerFooter$1, Alert as Alert$1 } from '@heroui/react';
 export { Accordion, AccordionItem, Avatar, Breadcrumbs, CardFooter, CardHeader, CheckboxGroup, CloseButton, DropdownItem, DropdownMenu, DropdownTrigger, Link, Popover, PopoverContent, PopoverTrigger, Radio, RadioGroup, Skeleton, Slider, Spinner, TableBody, TableCell, TableColumn, TableHeader, TableRow, cn } from '@heroui/react';
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import $8WNJc$react, { Children, isValidElement, Fragment, useState, useRef, useCallback, useEffect, createElement, useId, forwardRef, useMemo, cloneElement, useImperativeHandle, createContext, useContext, useLayoutEffect, memo, useReducer, version } from 'react';
@@ -759,6 +759,41 @@ const SHAPE_BY_VARIANT = {
     faded: "outline",
     // `shadow` de v2 es `solid` + sombra teñida (ver `SHADOW_CLASS`).
     shadow: "solid",
+    // `dot` de v2: chip neutro con un punto de color (ver `DOT_BASE_CLASS`).
+    dot: "dot",
+};
+// ── `variant="dot"` (TECH-2459, reportado por beweossmbs sobre la .140) ─────────────────────
+//
+// Literal de `@heroui/theme@2.4.15` (`chip.js`) y `@heroui/chip@2.2.25` (`chip.js`):
+//
+//   variant.dot.base = "border-medium border-default text-foreground bg-transparent"
+//   slots.dot        = "w-2 h-2 ml-1 rounded-full"   +   color.<c>.dot = "bg-<c>" (default: "bg-default-400")
+//   render           = `isDot && !startContent` → `<span class={slots.dot}/>` en el hueco de `startContent`
+//
+// O sea: el `color` NO tiñe el chip (no hay ningún `compoundVariant` de `dot` × color), solo el
+// punto; el chip queda neutro con el borde de 2px de `default`. Y el punto NO cuenta como
+// `hasStartContent` (`!!avatar || !!startContent`), así que el texto conserva su sangrado izquierdo
+// normal. El compound `{ isOneChar, variant: "dot" }` (base "w-auto h-7 px-1", content "px-2")
+// anula el cuadrado de un carácter: aquí basta con no aplicarlo.
+//
+// Uso real: `shared/ui/components/page-header` de beweossmbs reenvía un `variant` de su propio tipo
+// que incluye `"dot"` (hoy ningún sitio lo pasa, pero el tipo no compilaba).
+const DOT_BASE_CLASS = "border-2 border-default bg-transparent text-foreground";
+const DOT_SLOT_CLASS = "h-2 w-2 ml-1 shrink-0 rounded-full";
+// Clases literales por color (Tailwind 4 solo genera lo que encuentra escrito). Los 5 colores fijos
+// de Aurora no existían en v2: su punto toma el tono del texto que ya les da `CUSTOM_COLOR_CLASSES`.
+const DOT_COLOR_CLASS = {
+    default: "bg-default-400",
+    primary: "bg-primary",
+    secondary: "bg-secondary",
+    success: "bg-success",
+    warning: "bg-warning",
+    danger: "bg-danger",
+    red: "bg-red-500",
+    purple: "bg-purple-500",
+    blue: "bg-blue-500",
+    green: "bg-green-500",
+    orange: "bg-orange-500",
 };
 // `variant="shadow"` de v2, literal de `@heroui/theme@2.4.15` (`dist/utils/variants.js`,
 // `colorVariants.shadow`): `shadow-lg shadow-<color>/40 bg-<color> text-<color>-foreground`
@@ -876,6 +911,7 @@ const V3_VARIANT_BY_SHAPE = {
     soft: "soft",
     transparent: "tertiary",
     outline: "tertiary",
+    dot: "tertiary",
 };
 /**
  * TECH-2459 · F5 · P-08d — La tabla `flat` de v2, medida contra los PNG congelados y no deducida.
@@ -983,6 +1019,13 @@ const CLOSE_ICON_SIZE_CLASS = {
     lg: "size-5",
 };
 function colorStyle(color, shape) {
+    if (shape === "dot") {
+        // `dot`: el chip es neutro para cualquier color (el color va solo en el punto).
+        return {
+            "--chip-bg": "transparent",
+            "--chip-fg": "var(--color-foreground)",
+        };
+    }
     const t = COLOR_TOKENS[color];
     if (shape === "solid") {
         return { "--chip-bg": t.bg, "--chip-fg": t.fg };
@@ -1018,14 +1061,17 @@ const Chip = ({ color = "default", variant = "solid", size = "md", radius = "ful
     const hasEndContent = Boolean(endContent) || Boolean(onClose);
     // `isOneChar` de v2 (`use-chip.js:58`): SOLO si el children es un string de un carácter — un
     // número no cuenta. El cuadrado además exige no llevar nada a los lados (ver `ONE_CHAR_CLASS`).
-    const isSquare = typeof children === "string" &&
+    const isDot = shape === "dot";
+    const isSquare = !isDot &&
+        typeof children === "string" &&
         children.length === 1 &&
         !startContent &&
         !hasEndContent;
     const vars = isStandard
         ? colorStyle(color, shape)
         : undefined;
-    const customClass = !isStandard ? CUSTOM_COLOR_CLASSES[color] : "";
+    // Con `dot` el color no tiñe el chip, tampoco el de los colores fijos.
+    const customClass = isStandard || isDot ? "" : CUSTOM_COLOR_CLASSES[color];
     const outlineClass = shape === "outline" ? "border-2" : "";
     // El `dark:text-*` que v2 declaraba solo para el texto de `flat` en success/warning/danger
     // (P-08d). Va como clase porque `--chip-fg` es inline y no puede depender del tema; la capa
@@ -1062,7 +1108,7 @@ const Chip = ({ color = "default", variant = "solid", size = "md", radius = "ful
         className: cn(SIZE_CLASS$6[size], 
         // Después de `SIZE_CLASS` a propósito: el cuadrado de un carácter ENCOGE la caja
         // respecto al tamaño normal y tiene que ganar en tailwind-merge.
-        isSquare ? ONE_CHAR_CLASS[size] : "", RADIUS_CLASS$9[radius], outlineClass, shadowClass, flatDarkFgClass, customClass, isDisabled ? "opacity-50 pointer-events-none" : "", classNames?.base, className), style: style, children: [startContent, jsx("span", { className: cn("flex-1 text-inherit font-normal", startContent
+        isSquare ? ONE_CHAR_CLASS[size] : "", RADIUS_CLASS$9[radius], outlineClass, isDot ? DOT_BASE_CLASS : "", shadowClass, flatDarkFgClass, customClass, isDisabled ? "opacity-50 pointer-events-none" : "", classNames?.base, className), style: style, children: [startContent, isDot && !startContent && (jsx("span", { "aria-hidden": "true", "data-slot": "dot", className: cn(DOT_SLOT_CLASS, DOT_COLOR_CLASS[color]) })), jsx("span", { className: cn("flex-1 text-inherit font-normal", startContent
                     ? CONTENT_PADDING[size].leftWithContent
                     : CONTENT_PADDING[size].left, hasEndContent
                     ? CONTENT_PADDING[size].rightWithContent
@@ -1087,7 +1133,11 @@ const sizeMap = {
 const IconComponent = ({ icon, size = "md", className, style, color, hFlip, vFlip, flip, rotate, ...nativeProps }) => {
     // Un número son píxeles tal cual (p. ej. 64): la escala con nombre se queda en 32 y
     // `width`/`height` no son props del componente (caerían en el <span>, sin efecto).
-    const iconSize = typeof size === "number" ? `${size}px` : (sizeMap[size] ?? sizeMap.md);
+    // Un nombre fuera de la escala (`"xs"`, el alias v2 del tipo) cae al default, como en v2
+    // (`sizeMap[size] ?? sizeMap.md`, `@beweco/aurora-ui@0.6.85`): 20px.
+    const iconSize = typeof size === "number"
+        ? `${size}px`
+        : (sizeMap[size] ?? sizeMap.md);
     return (jsx("span", { ...nativeProps, children: jsx(Icon, { icon: icon, width: iconSize, height: iconSize, className: className, style: style, color: color, hFlip: hFlip, vFlip: vFlip, flip: flip, rotate: rotate }) }));
 };
 
@@ -2400,6 +2450,40 @@ const PRESSABLE_CLASS = "isolate cursor-pointer text-foreground outline-none foc
 const PRESS_ANIMATION_CLASS = "transition-[transform,background-color] motion-reduce:transition-none active:scale-[0.97]";
 const HOVERABLE_CLASS = "hover:bg-content2";
 const DISABLED_CLASS = "opacity-50 cursor-not-allowed";
+// Controles que tienen su propia pulsación. Un clic que nace dentro de uno de ellos es SUYO, no de
+// la card: los `Button` de Aurora (react-aria) ya paran la propagación del `click` (medido en
+// jsdom con el `Button` de la librería), pero un `<button>`/`<a>` nativo o un `<input>` no.
+const CONTROL_INTERNO = 'button, a[href], input, select, textarea, summary, [role="button"], [role="link"], [role="checkbox"], [role="switch"], [role="menuitem"], [role="tab"], [role="option"]';
+function desdeControlInterno(event) {
+    const target = event.target;
+    if (!target || target === event.currentTarget) {
+        return false;
+    }
+    const control = target.closest?.(CONTROL_INTERNO);
+    return (!!control &&
+        control !== event.currentTarget &&
+        event.currentTarget.contains(control));
+}
+/**
+ * Tecla → `PressEvent` con la forma del de react-aria (`pointerType: "keyboard"`, punto en el
+ * centro de la card, como hace `pressEventFromClick` con un click sintético de `detail === 0`).
+ */
+function pressEventFromKey(event) {
+    const target = event.currentTarget;
+    const rect = target.getBoundingClientRect();
+    return {
+        type: "press",
+        pointerType: "keyboard",
+        target,
+        shiftKey: event.shiftKey,
+        ctrlKey: event.ctrlKey,
+        metaKey: event.metaKey,
+        altKey: event.altKey,
+        x: rect.width / 2,
+        y: rect.height / 2,
+        continuePropagation: () => undefined,
+    };
+}
 /**
  * Card genérica siguiendo las reglas de diseño BeweOS basada en HeroUI v3.
  *
@@ -2422,39 +2506,83 @@ const DISABLED_CLASS = "opacity-50 cursor-not-allowed";
  *   `isHoverable`/`isDisabled`/`fullWidth`.
  *
  * `ref` se reenvía con `forwardRef` (patrón de las fachadas de campo del repo, ver
- * `Input.tsx`) y apunta al nodo raíz: el `<div>` o, con `isPressable`, el `<button>`.
+ * `Input.tsx`) y apunta al nodo raíz, que es siempre un `<div>` (con `isPressable`,
+ * `<div role="button">`).
  */
-const Card = forwardRef(({ children, className, shadow = "sm", radius = "sm", padding = "md", isPressable = false, onPress, onClick, disableAnimation = false, disableRipple = false, isHoverable = false, isDisabled = false, fullWidth = false, render, ...props }, ref) => {
+const Card = forwardRef(({ children, className, shadow = "sm", radius = "sm", padding = "md", isPressable = false, onPress, onClick, onKeyDown, onKeyUp, disableAnimation = false, disableRipple = false, isHoverable = false, isDisabled = false, fullWidth = false, render, ...props }, ref) => {
     // Como en v2 (`@heroui/card@2.2.21`, `useCard`): `disableAnimation` apaga también la onda.
     const sinRipple = disableRipple || disableAnimation;
     const { ondas, lanzar, quitar } = useRipple();
+    const pulsable = isPressable && !isDisabled;
+    const press = useCallback((pressEvent) => {
+        onPress?.(pressEvent);
+        if (!sinRipple) {
+            lanzar(pressEvent);
+        }
+    }, [onPress, sinRipple, lanzar]);
     const handleClick = useCallback((event) => {
+        // Card pulsable deshabilitada: ni `onClick` de la app, como el `disabled` nativo del
+        // `<button>` que era hasta la .140.
+        if (isPressable && isDisabled) {
+            return;
+        }
         onClick?.(event);
-        if (!isPressable || isDisabled) {
+        if (!pulsable || desdeControlInterno(event)) {
             return;
         }
-        const pressEvent = pressEventFromClick(event);
-        onPress?.(pressEvent);
-        if (!sinRipple) {
-            lanzar(pressEvent);
+        press(pressEventFromClick(event));
+    }, [onClick, isPressable, isDisabled, pulsable, press]);
+    // Teclado de un `<button>` nativo, que el `<div role="button">` no trae: Enter pulsa al
+    // bajar la tecla y Espacio al soltarla. `preventDefault` en ambos: Espacio haría scroll de
+    // la página y Enter podría enviar un `<form>` que envuelva la card. Solo cuando el foco está
+    // EN la card: una tecla sobre un botón interno es de ese botón (react-aria ya para su
+    // propagación, y esta guarda cubre también a los controles nativos).
+    const handleKeyDown = useCallback((event) => {
+        onKeyDown?.(event);
+        if (!pulsable || event.target !== event.currentTarget) {
+            return;
         }
-    }, [onClick, isPressable, isDisabled, onPress, sinRipple, lanzar]);
+        if (event.key === " ") {
+            event.preventDefault();
+        }
+        else if (event.key === "Enter") {
+            event.preventDefault();
+            if (!event.repeat) {
+                press(pressEventFromKey(event));
+            }
+        }
+    }, [onKeyDown, pulsable, press]);
+    const handleKeyUp = useCallback((event) => {
+        onKeyUp?.(event);
+        if (!pulsable ||
+            event.target !== event.currentTarget ||
+            event.key !== " ") {
+            return;
+        }
+        event.preventDefault();
+        press(pressEventFromKey(event));
+    }, [onKeyUp, pulsable, press]);
     const combinedClassName = cn(paddingClasses[padding], RADIUS_CLASS$5[radius], SHADOW_CLASS[shadow], fullWidth ? "w-full" : "", isPressable ? PRESSABLE_CLASS : "", isPressable && !disableAnimation ? PRESS_ANIMATION_CLASS : "", isHoverable ? HOVERABLE_CLASS : "", isDisabled ? DISABLED_CLASS : "", 
     // El `className` de la app, último: gana por fusión (ver JSDoc).
     className);
-    // v2 cambiaba el ELEMENTO a `<button>` con `isPressable` (`Component = as || (isPressable
-    // ? "button" : "div")`). v3 lo permite con `render` (DOMRenderProps: basta con conectar
-    // el `ref`, que ya viene en `domProps`), así que se conserva el `CardContext` del
-    // compound y los `Card.Header`/`CardBody` de dentro siguen funcionando.
-    const pressableRender = isPressable
-        ? (domProps) => (jsx("button", { ...domProps, type: "button", 
-            // v2 (`useCard`): `{ ...buttonProps, ...focusProps, role: "button" }` y
-            // `tabIndex: isPressable ? 0 : -1`. En un `<button>` nativo el rol ya es
-            // `button` implícito (biome marca el explícito como redundante); el
-            // `tabIndex` se escribe igual que v2.
-            tabIndex: isDisabled ? -1 : 0, disabled: isDisabled }))
-        : render;
-    return (jsxs(Card$1, { ...props, ref: ref, className: combinedClassName, "data-pressable": isPressable || undefined, "data-disabled": isDisabled || undefined, onClick: isPressable || onClick ? handleClick : undefined, render: pressableRender, children: [children, isPressable && ondas.length > 0 && (jsx(CapaRipple, { ondas: ondas, onFin: quitar }))] }));
+    // v2 cambiaba el ELEMENTO a `<button>` con `isPressable`, y hasta la .140 esta fachada lo
+    // imitaba con el `render` de v3. Se quitó porque las apps meten botones DENTRO de la card
+    // pulsable (`ChannelCard` de smbs, Linda → Compartir: «Compartir»/«Integrar»), y
+    // `<button>` dentro de `<button>` es HTML inválido: React avisa en consola
+    // («cannot be a descendant of <button>», medido en jsdom) y el parser del navegador lo
+    // reparenta. La card se queda en el `<div>` de v3 con la semántica de botón de v2
+    // (`useCard`: `role: "button"` + `tabIndex: isPressable ? 0 : -1`) y el teclado a mano
+    // (ver `handleKeyDown`). El `render` de la app pasa tal cual.
+    const pressableProps = isPressable
+        ? {
+            role: "button",
+            tabIndex: isDisabled ? undefined : 0,
+            "aria-disabled": isDisabled || undefined,
+            onKeyDown: handleKeyDown,
+            onKeyUp: handleKeyUp,
+        }
+        : {};
+    return (jsxs(Card$1, { ...props, ...pressableProps, ref: ref, className: combinedClassName, "data-pressable": isPressable || undefined, "data-disabled": isDisabled || undefined, onClick: isPressable || onClick ? handleClick : undefined, render: render, children: [children, isPressable && ondas.length > 0 && (jsx(CapaRipple, { ondas: ondas, onFin: quitar }))] }));
 });
 Card.displayName = "Card";
 
@@ -3184,7 +3312,7 @@ const CLEAR_GAP_WITH_TRIGGER_UNDERLINED_CLASS = "me-9";
  * ⚠️ `h-4 w-4 p-0` deja el glifo de 16px ocupando la caja entera; el `[&_svg]:m-0` quita los
  * márgenes negativos de v3 para que el centro del glifo coincida con el centro de la caja.
  */
-const CLEAR_BUTTON_CLASS = "h-4 w-4 min-h-0 shrink-0 rounded-full bg-transparent p-0 text-default-500 hover:bg-transparent [&_svg]:m-0";
+const CLEAR_BUTTON_CLASS$2 = "h-4 w-4 min-h-0 shrink-0 rounded-full bg-transparent p-0 text-default-500 hover:bg-transparent [&_svg]:m-0";
 const DEFAULT_ICON = (jsx(IconComponent, { icon: "solar:magnifer-outline", className: "text-default-400 pointer-events-none shrink-0", size: "sm", "aria-hidden": true }));
 /**
  * AuraAutocomplete genérico reutilizable, migrado al `ComboBox` compound de HeroUI v3 (el
@@ -3209,7 +3337,9 @@ const AuraAutocomplete = ({ label, id, icon, placeholder, className, children, v
 // limpiarlo. Se reenvían tal cual al `ComboBox`, así que para el consumidor no cambia nada:
 // pasar `undefined` es indistinguible de no pasarlos (react-aria decide controlado/no
 // controlado con `!== undefined`).
-isClearable = true, isReadOnly, inputValue, selectedKey, onInputChange, onSelectionChange, translations, radius: _radius, isInvalid, errorMessage, listboxProps, isLoading = false, allowsCustomValue, allowsEmptyCollection, ...props }) => {
+isClearable = true, isReadOnly, inputValue, selectedKey, onInputChange, onSelectionChange, translations, radius: _radius, isInvalid, errorMessage, listboxProps, isLoading = false, allowsCustomValue, allowsEmptyCollection, isOpen, onOpenChange, popoverProps, 
+// Aceptada y descartada: ver `AuraAutocompleteProps.labelPlacement`.
+labelPlacement: _labelPlacement, scrollShadowProps, ...props }) => {
     const generatedId = useId();
     const autoId = id || generatedId;
     // Con `isLoading` el spinner ocupa el extremo (ver `SPINNER`): a efectos de maquetación es el
@@ -3225,6 +3355,26 @@ isClearable = true, isReadOnly, inputValue, selectedKey, onInputChange, onSelect
     const emptyContent = listboxProps?.emptyContent ?? t.emptyContent;
     /** El `<input>` real, para devolverle el foco tras limpiar (ver `handleClear`). */
     const inputRef = useRef(null);
+    /*
+     * `isOpen` controlado (ver `AuraAutocompleteProps.isOpen`). La fachada sigue el estado de
+     * apertura de react-aria por su `onOpenChange` y decide con él si el popover se ve: visible solo
+     * si react-aria lo tiene abierto Y la app no lo ha cerrado. `ComboBox.Popover` es el `Popover`
+     * de react-aria-components, que con `isOpen` propio usa ese valor en vez del estado del
+     * `ComboBox` (`Popover.mjs`: `props.isOpen != null ? localState : contextState`).
+     */
+    const [ariaOpen, setAriaOpen] = useState(false);
+    const handleOpenChange = (open, menuTrigger) => {
+        setAriaOpen(open);
+        onOpenChange?.(open, menuTrigger);
+    };
+    const handleInputChange = (value) => {
+        // La lista está abierta para react-aria pero la app la cerró: react-aria no volverá a avisar
+        // (para él ya está abierta), así que la fachada pide abrir como hacía v2 al teclear.
+        if (isOpen === false && ariaOpen) {
+            onOpenChange?.(true, "input");
+        }
+        onInputChange?.(value);
+    };
     // `data-visible` de v2, traducido a montar/no montar: `!!state.selectedItem ||
     // state.inputValue?.length > 0` (`chunk-NJJHRP6D.mjs:273`), y apagado por `isDisabled`/
     // `isReadOnly` como en el cálculo de `isClearable` del hook (línea 20 del mismo fichero).
@@ -3258,7 +3408,7 @@ isClearable = true, isReadOnly, inputValue, selectedKey, onInputChange, onSelect
         onInputChange?.("");
         inputRef.current?.focus();
     };
-    return (jsxs(ComboBox, { id: autoId, isDisabled: isDisabled, isReadOnly: isReadOnly, inputValue: inputValue, selectedKey: selectedKey, onInputChange: onInputChange, onSelectionChange: onSelectionChange, isInvalid: isInvalid, allowsCustomValue: allowsCustomValue, allowsEmptyCollection: allowsEmptyCollection ?? !hideEmptyContent, className: [FIELD_STACK_CLASS$2, className].filter(Boolean).join(" "), ...props, children: [label && jsx(Label, { className: LABEL_CLASS$3, children: label }), jsxs(ComboBox.InputGroup, { className: [
+    return (jsxs(ComboBox, { id: autoId, isDisabled: isDisabled, isReadOnly: isReadOnly, inputValue: inputValue, selectedKey: selectedKey, onInputChange: handleInputChange, onSelectionChange: onSelectionChange, onOpenChange: handleOpenChange, isInvalid: isInvalid, allowsCustomValue: allowsCustomValue, allowsEmptyCollection: allowsEmptyCollection ?? !hideEmptyContent, className: [FIELD_STACK_CLASS$2, className].filter(Boolean).join(" "), ...props, children: [label && jsx(Label, { className: LABEL_CLASS$3, children: label }), jsxs(ComboBox.InputGroup, { className: [
                     SIZE_CLASS$2[size],
                     PADDING_CLASS$1[size],
                     variant === "underlined" ? UNDERLINED_INNER_CLASS[size] : "",
@@ -3307,7 +3457,7 @@ isClearable = true, isReadOnly, inputValue, selectedKey, onInputChange, onSelect
                          * su `aria-label` traducido, y alcanzable con teclado como la ✕ de `Input`.
                          */
                         slot: null, "aria-label": t.clearButtonAriaLabel, className: [
-                            CLEAR_BUTTON_CLASS,
+                            CLEAR_BUTTON_CLASS$2,
                             resolvedIcon != null
                                 ? CLEAR_GAP_WITH_ICON_CLASS
                                 : variant === "underlined"
@@ -3321,7 +3471,13 @@ isClearable = true, isReadOnly, inputValue, selectedKey, onInputChange, onSelect
                             isDisabled ? ICON_DISABLED_CLASS : "",
                         ]
                             .filter(Boolean)
-                            .join(" "), children: resolvedIcon })), jsx(ComboBox.Trigger, { className: resolvedIcon != null ? "hidden" : undefined })] }), isInvalid && errorMessage != null && errorMessage !== false && (jsx(FieldError, { className: ERROR_MESSAGE_CLASS, children: errorMessage })), jsx(ComboBox.Popover, { children: jsx(ListBox, { autoFocus: "first", className: OPCIONES_CLASS, renderEmptyState: hideEmptyContent
+                            .join(" "), children: resolvedIcon })), jsx(ComboBox.Trigger, { className: resolvedIcon != null ? "hidden" : undefined })] }), isInvalid && errorMessage != null && errorMessage !== false && (jsx(FieldError, { className: ERROR_MESSAGE_CLASS, children: errorMessage })), jsx(ComboBox.Popover, { ...popoverProps, isOpen: isOpen === undefined ? undefined : isOpen && ariaOpen, children: jsx(ListBox, { autoFocus: "first", 
+                    // `scrollShadowProps` de v2 al contenedor con scroll (el `ListBox`): la clase
+                    // de la app va al final y gana por `cn`, y `overflow-y-auto` para que un
+                    // `max-h-*` recorte desplazando y no desbordando.
+                    className: scrollShadowProps?.className
+                        ? cn(OPCIONES_CLASS, "overflow-y-auto", scrollShadowProps.className)
+                        : OPCIONES_CLASS, style: scrollShadowProps?.style, renderEmptyState: hideEmptyContent
                         ? undefined
                         : () => jsx("div", { className: EMPTY_CONTENT_CLASS$1, children: emptyContent }), children: withV2ItemContent(
                     // El normalizador de `utils/` está tipado solo para `ReactNode`; con una
@@ -9662,7 +9818,98 @@ const SPINNER_CLASS = "pointer-events-none absolute inset-y-0 end-3 my-auto text
  */
 const DEFAULT_TRANSLATIONS$8 = {
     emptyContent: "No hay opciones",
+    searchPlaceholder: "Buscar…",
+    // Mismo literal que la lista vacía de `AuraAutocomplete`: es el mismo caso (un filtro por texto
+    // que no encuentra nada), así que las dos fachadas lo dicen igual.
+    noResults: "No se encontraron resultados",
+    // Mismo literal que la ✕ de `Input` y de `AuraAutocomplete`.
+    clearButtonAriaLabel: "Limpiar",
 };
+/*
+ * EL BUSCADOR Y LA ✕ (TECH-2459, hallazgo beweossmbs 23-sep): `isSearchable` e `isClearable`.
+ *
+ * Con cualquiera de los dos la fachada cambia de RAÍZ: monta el compound `Autocomplete` de v3 en
+ * vez de `Select`. No es un compound distinto por dentro —`AutocompleteRoot` ES el `Select` de
+ * react-aria (`@heroui/react/dist/components/autocomplete/autocomplete.js:50`, `jsx(Select, …)`),
+ * así que `value`/`onChange`/`selectionMode`/`disabledKeys` y la colección funcionan igual y la
+ * traducción de la API v2 de abajo no cambia ni una línea—, pero su disparador sí:
+ *
+ * - `Autocomplete.Trigger` es un `Group` (un `<div>`), no un `<button>`. Es lo que permite meter la
+ *   ✕ DENTRO del campo sin anidar dos botones (trampa nº 4 de `auraui-components`). El botón que
+ *   recibe el foco es el del `Autocomplete.Indicator`, que consume el `ButtonContext` del Select
+ *   (`autocomplete.js`, `jsx(Button, { children: indicator })`): Tab llega al chevron y desde ahí
+ *   las flechas/Enter abren la lista, igual que en el `Select` de siempre.
+ * - `Autocomplete.Filter` (el `Autocomplete` de react-aria) conecta un `SearchField` con el
+ *   `ListBox`: el texto filtra la colección y las flechas mueven el foco virtual de la lista sin
+ *   salir del buscador. Es la receta oficial «Migrating to v3 Autocomplete (searchable select)»
+ *   de la guía de migración, con `useFilter({ sensitivity: "base" })`: sin distinguir mayúsculas
+ *   ni acentos («cancun» encuentra «Cancún»).
+ *
+ * Sin ninguna de las dos props la fachada sigue montando `Select`, exactamente como antes: los
+ * 107 `Select` de beweossmbs que no las pasan no cambian ni un nodo.
+ *
+ * Por qué la ✕ va también por aquí y no sobre el `Select`: el disparador de `Select` es un
+ * `<button>` (no admite otro dentro) y la fachada no alcanza el estado de react-aria para vaciar la
+ * selección de un campo no controlado (`SelectStateContext` no lo reexporta `@heroui/react`, e
+ * importarlo de `react-aria-components` metería una SEGUNDA copia del contexto en el bundle, que no
+ * casaría con la de HeroUI). `Autocomplete.ClearButton` sí lo alcanza: vacía la selección con
+ * `state.selectionManager.setSelectedKeys(new Set())` y llama a `onClear`.
+ */
+/** Hueco del valor cuando la ✕ va a su derecha: el hueco del chevron lo reserva la ✕. */
+const VALUE_ROOM_CLEARABLE_CLASS = "me-1 min-w-0 truncate";
+/*
+ * La ✕. `.autocomplete__clear-button` de v3 ya la pinta como v2 (glifo sin caja, `bg-transparent`,
+ * gris `text-muted`) y la esconde con `opacity-0` cuando no hay nada elegido. v2 no la montaba sin
+ * selección (`@heroui/select@2.4.33`, `chunk-BJWIL32D.mjs:64`: `isClearable &&
+ * state.selectedItems?.length`), así que aquí se retira del flujo en ese estado en vez de dejar un
+ * hueco invisible de 20px.
+ *
+ * `me-5`: el chevron es `absolute end-3` (12px del borde, 16px de ancho) y la ✕ va en flujo, que
+ * acaba en el relleno del trigger (`px-3`, 12px). Sin margen caería ENCIMA del chevron; con 20px su
+ * canto derecho queda a 4px del izquierdo del chevron.
+ */
+const CLEAR_BUTTON_CLASS$1 = "z-10 me-5 data-[empty=true]:hidden";
+/*
+ * EL FOCO DEL TECLADO (hallazgo del coordinador con Playwright, 23-sep). En la raíz `Autocomplete`
+ * el único elemento tabulable es el botón del chevron —el `Button` de react-aria que monta
+ * `Autocomplete.Indicator`, sin clase propia ni forma de pasarle una—, y en el flujo mide **0×0**:
+ * su único hijo es el SVG, que es `absolute`. El foco caía en una caja vacía (el borde del disparador
+ * sí cambiaba, por `focus-within`, pero el elemento enfocado no tenía caja para un lector de
+ * pantalla, un magnificador o un anillo propio).
+ *
+ * Se estira ese botón sobre el disparador entero (`absolute inset-0`, mismo radio): el elemento
+ * enfocado pasa a medir lo mismo que el disparador, como el `<button>` del `Select` normal, y el
+ * SVG sigue en su sitio porque su contenedor posicionado cubre la misma caja. Pulsar en cualquier
+ * punto sigue abriendo (el `Group` ya abría al pulsar, y el botón ya estaba DENTRO del grupo).
+ * La ✕ va por encima (`z-10` en `CLEAR_BUTTON_CLASS`) para seguir recibiendo su clic.
+ *
+ * Se apunta por estructura porque es la única vía: `button:not([data-slot])` es ese botón, ya que
+ * la ✕ lleva `data-slot="autocomplete-clear-button"`.
+ */
+const INDICATOR_BUTTON_OVERLAY_CLASS = [
+    "[&>button:not([data-slot])]:absolute",
+    "[&>button:not([data-slot])]:inset-0",
+    "[&>button:not([data-slot])]:rounded-[inherit]",
+    "[&>button:not([data-slot])]:outline-none",
+    "[&>button:not([data-slot])]:cursor-[inherit]",
+].join(" ");
+/*
+ * El foco en el disparador `Group`. El `FOCUS_BORDER_CLASS` del Select casa `aria-expanded` y
+ * `:focus` del `<button>`; aquí el disparador es un `<div>` que no lleva ninguno de los dos: el foco
+ * lo tiene el botón del chevron, DENTRO (`focus-within`), y el estado abierto lo escribe v3 en la
+ * RAÍZ (`data-open="true"` en `div.autocomplete`), así que va por un `group` con nombre.
+ */
+const FOCUS_BORDER_GROUP_CLASS = "focus-within:border-primary-500! group-data-[open=true]/aura-select:border-primary-500!";
+/*
+ * El buscador del desplegable. `.autocomplete__popover` de v3 ya lo coloca (`[data-slot=
+ * "search-field"] { px-3 py-1 }`, `pt-2` en el popover, `overflow-hidden` + lista con su propio
+ * scroll, de modo que el buscador no se va al desplazar la lista). Solo se retira el anillo de
+ * foco de v3 (`status-focused-field` → `ring-2`), por lo mismo que en todos los campos de la
+ * librería (`FIELD_FOCUS_CLASS`): el foco lo marca el borde, en primario.
+ */
+const SEARCH_GROUP_CLASS = "w-full ring-0 ring-offset-0 outline-0 focus-within:border-primary-500";
+/** El `ListBox` es el contenedor que se desplaza cuando el consumidor le fija alto. */
+const LISTBOX_SCROLL_CLASS = "overflow-y-auto";
 // Medidas del estado vacío. Se toman las del ITEM de v3 (`@heroui/styles`,
 // `dist/components/list-box-item.css:6`: `min-h-9 … px-2 py-1.5`) y no las del slot `emptyContent`
 // de v2, y es una decisión medida: el literal de v2 era
@@ -9934,7 +10181,9 @@ size = "md", variant = "bordered", radius = "md",
 //
 // Por eso este componente sigue sin `SelectTranslations`: la corrección consiste precisamente en
 // que la librería no aporte NINGÚN texto propio, no en traducir el que había.
-placeholder = "", selectionMode = "single", selectedKeys, defaultSelectedKeys, onSelectionChange, disabledKeys, isInvalid = false, isRequired = false, isDisabled = false, 
+placeholder = "", selectionMode = "single", selectedKeys, defaultSelectedKeys, onSelectionChange, disabledKeys, isInvalid = false, isRequired = false, 
+// Alias nativo de `isRequired` (ver `SelectProps.required`).
+required = false, isDisabled = false, 
 // `fullWidth` por defecto a `true`: HeroUI v2 lo traía en sus `defaultVariants`
 // (verificado en el paquete v2 compilado, `dist/components/input.js`:
 // `defaultVariants: { variant:"flat", color:"default", size:"md", fullWidth:true, … }`, con
@@ -9944,14 +10193,35 @@ placeholder = "", selectionMode = "single", selectedKeys, defaultSelectedKeys, o
 // columna no se notaba porque el `stretch` del flex lo tapaba — pero afecta a cualquier app.
 fullWidth = true, isLoading = false, 
 // Aceptada y descartada: ver `SelectProps.isVirtualized`.
-isVirtualized: _isVirtualized, disallowEmptySelection = false, isMultiline = false, renderValue, startContent, listboxProps, isOpen, defaultOpen, onOpenChange, className, classNames, translations = {}, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-details": ariaDetails, }) => {
+isVirtualized: _isVirtualized, disallowEmptySelection = false, isMultiline = false, renderValue, startContent, listboxProps, onChange, 
+// Aceptada y descartada: ver `SelectProps.labelPlacement`.
+labelPlacement: _labelPlacement, scrollShadowProps, items, isSearchable = false, searchPlaceholder, isClearable = false, onClear, closeOnSelect, isOpen, defaultOpen, onOpenChange, className, classNames, translations = {}, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-details": ariaDetails, }) => {
     const generatedId = useId();
     const selectId = id || generatedId;
-    const requiredField = isRequired;
+    const requiredField = isRequired || required;
     const t = { ...DEFAULT_TRANSLATIONS$8, ...translations };
+    // Raíz `Autocomplete` (buscador y/o ✕) o `Select` de siempre: ver el bloque «EL BUSCADOR Y LA ✕».
+    const usesAutocompleteShell = isSearchable || isClearable;
+    // Filtro de react-aria sin mayúsculas ni acentos. El hook va fuera de la condición (reglas de
+    // hooks); sin `isSearchable` no se usa.
+    const { contains } = useFilter({ sensitivity: "base" });
+    // Texto del buscador, en la fachada para saber qué mensaje poner en la lista vacía y para
+    // vaciarlo al cerrar (abrir de nuevo = lista completa, que es lo que hacía el buscador manual
+    // de `timezone-search-select` con su `onOpenChange`).
+    const [searchText, setSearchText] = useState("");
     // v2 pintaba `listboxProps.emptyContent` en el hueco de la lista vacía; gana a la traducción,
-    // que es el default de la fachada (el de v2 era el literal inglés "No items.").
-    const emptyContent = listboxProps?.emptyContent ?? t.emptyContent;
+    // que es el default de la fachada (el de v2 era el literal inglés "No items."). Con el buscador
+    // escrito, la lista vacía significa «sin resultados», no «sin opciones».
+    const emptyContent = isSearchable && searchText.trim() !== ""
+        ? t.noResults
+        : (listboxProps?.emptyContent ?? t.emptyContent);
+    const resolvedSearchPlaceholder = searchPlaceholder ?? t.searchPlaceholder;
+    const handleOpenChange = (open) => {
+        if (!open) {
+            setSearchText("");
+        }
+        onOpenChange?.(open);
+    };
     // Estado propio SOLO para `multiple` + `disallowEmptySelection` sin controlar: para rechazar el
     // cambio que vaciaría la selección, la fachada tiene que ser dueña del valor. En los demás casos
     // no se lee (el hook va fuera de la condición por las reglas de hooks).
@@ -9963,55 +10233,97 @@ isVirtualized: _isVirtualized, disallowEmptySelection = false, isMultiline = fal
     // En v2 el estado inválido MANDABA también con el campo enfocado
     // (`group-data-[focus=true]:!border-danger`), así que el borde de foco no se aplica cuando
     // el campo está en error: se queda el `danger`.
-    isInvalid ? INVALID_VARIANT_CLASS[variant] : FOCUS_BORDER_CLASS, FIELD_FOCUS_CLASS$1, FIELD_SHADOW_CLASS$1, 
+    isInvalid
+        ? INVALID_VARIANT_CLASS[variant]
+        : usesAutocompleteShell
+            ? FOCUS_BORDER_GROUP_CLASS
+            : FOCUS_BORDER_CLASS, FIELD_FOCUS_CLASS$1, FIELD_SHADOW_CLASS$1, usesAutocompleteShell ? INDICATOR_BUTTON_OVERLAY_CLASS : "", 
     // Incondicional, como el slot `trigger` de v2 (`"relative px-3 gap-3 w-full inline-flex …"`,
     // sin variante que lo condicione): el disparador llena siempre su raíz, y es la raíz la que
     // responde a `fullWidth` y al ancho que pase el consumidor. v3 hace lo mismo por su cuenta
     // con `.select__trigger--full-width`, pero esa regla vive en la capa `components` y la pisa
     // cualquier utilidad.
     "w-full", classNames?.trigger);
+    // `id`/`textValue` desde la `key` de React: ver `utils/collection-items.ts` — sin esto un select
+    // múltiple no pinta lo elegido y uno controlado arranca vacío. `withV2ItemContent` traduce
+    // `description`/`startContent`/`endContent`/`classNames` del item y `title`/`showDivider` de la
+    // sección a la anatomía de v3 (ver `_internal/v2-collection.tsx` para el orden), y
+    // `withItemIndicator` monta el checkmark del seleccionado, que en v3 es un subcomponente aparte
+    // (ver `_internal/with-item-indicator.tsx`, y ahí por qué va en este orden).
+    const decorate = (nodes) => withItemIndicator(withV2ItemContent(withCollectionItemIds(nodes)));
+    // Colección dinámica (`items` + función, la forma de `Profile.tsx`). La función se envuelve para
+    // decorar lo que devuelva, y el paso de `withCollectionItemIds` importa aquí MÁS que en la forma
+    // estática: react-aria toma la clave de una colección dinámica de `rendered.props.id ??
+    // item.key ?? item.id`, nunca de la `key` de React. Sin reponer el `id` desde la `key`, las
+    // opciones de `Profile.tsx` (objetos `{ value: "es", id: 1 }` con `<SelectItem key={value}>`)
+    // se llamarían `1`/`2` y ni `defaultSelectedKeys={["es"]}` casaría ni `onSelectionChange`
+    // devolvería la clave de la app.
+    const collection = typeof children === "function"
+        ? (item) => decorate(children(item))
+        : decorate(children);
+    const listBox = (jsx(ListBox
+    // v2 `items`: react-aria recorre la colección y llama a la función de `children`.
+    , { 
+        // v2 `items`: react-aria recorre la colección y llama a la función de `children`.
+        items: items, 
+        // v2: `classNames.listboxWrapper` y `scrollShadowProps.className` iban al mismo slot
+        // (`cn(classNames.listboxWrapper, scrollShadowProps.className)`, `chunk-YFRCT47S.mjs:
+        // 321-331`), en ese orden.
+        className: classNames?.listboxWrapper || scrollShadowProps?.className
+            ? cn(LISTBOX_SCROLL_CLASS, classNames?.listboxWrapper, scrollShadowProps?.className)
+            : undefined, style: scrollShadowProps?.style, 
+        // El hueco que v2 llenaba con su `emptyContent` (ver el bloque de
+        // `DEFAULT_TRANSLATIONS`). `renderEmptyState` es la vía de v3: el `ListBox` de
+        // react-aria solo pinta algo con la colección vacía si se le pasa, y envuelve el
+        // resultado en un `<div role="option" style="display:contents">`
+        // (`react-aria-components/dist/private/ListBox.mjs:222-228`), o sea que la caja que se
+        // ve es la nuestra.
+        renderEmptyState: () => (jsx("div", { className: EMPTY_CONTENT_CLASS, children: emptyContent })), children: collection }));
+    // Las piezas del disparador son las mismas en las dos raíces; solo cambia de qué compound salen
+    // (ver el bloque «EL BUSCADOR Y LA ✕»). `Autocomplete.Value` y `Select.Value` son el mismo
+    // `SelectValue` de react-aria con otra clase base, así que reciben las mismas props.
+    const ValuePart = usesAutocompleteShell
+        ? Autocomplete.Value
+        : Select$1.Value;
+    const triggerContent = (jsxs(Fragment$1, { children: [startContent != null && startContent !== false && (jsx("span", { "data-slot": "start-content", className: START_CONTENT_CLASS, children: startContent })), jsx(ValuePart, { className: cn(SIZE_TEXT_CLASS$1[size], isMultiline
+                    ? MULTILINE_VALUE_ROOM_CLASS
+                    : isClearable
+                        ? VALUE_ROOM_CLEARABLE_CLASS
+                        : VALUE_ROOM_CLASS, HIDE_ITEM_EXTRAS_CLASS, isInvalid ? INVALID_TEXT_CLASS$1 : ""), children: renderValue
+                    ? // `renderValue` de v2 (`chunk-BJWIL32D.mjs`): sin selección, el placeholder;
+                        // con selección, la función con los items en la forma de v2. El nodo de la
+                        // colección de v3 trae los mismos campos que el de v2, así que el mapeo es
+                        // 1:1. `defaultChildren` es aquí el placeholder (o `""`, ver arriba).
+                        ({ state, isPlaceholder, defaultChildren }) => {
+                            if (isPlaceholder) {
+                                return defaultChildren;
+                            }
+                            const items = state.selectedItems.map((item) => ({
+                                key: item.key,
+                                data: item.value,
+                                type: item.type,
+                                props: item.props,
+                                textValue: item.textValue,
+                                rendered: item.rendered,
+                                "aria-label": item["aria-label"],
+                            }));
+                            return renderValue(items);
+                        }
+                    : undefined }), isClearable && (jsx(Autocomplete.ClearButton, { "aria-label": t.clearButtonAriaLabel, className: CLEAR_BUTTON_CLASS$1 })), usesAutocompleteShell ? (
+            /* En el `Autocomplete` el chevron es el BOTÓN que recibe el foco (ver el bloque
+                «EL BUSCADOR Y LA ✕»), así que el spinner va DENTRO de él en vez de sustituirlo:
+                sin el botón el campo no se alcanzaría con el teclado. `Autocomplete.Indicator` clona
+                su hijo con la clase del indicador (`absolute inset-y-0 end-2 my-auto`), así que el
+                spinner cae en el sitio del chevron sin clase propia. */
+            jsx(Autocomplete.Indicator, { className: "end-3", children: isLoading ? (jsx(Spinner, { "aria-hidden": true, "data-slot": "select-spinner", size: "sm", color: "current" })) : undefined })) : isLoading ? (jsx(Spinner, { "aria-hidden": true, "data-slot": "select-spinner", size: "sm", color: "current", className: SPINNER_CLASS })) : (
+            /* `.select__indicator` de v3 va a `end-2` (8px del borde interior); el
+                `selectorIcon` de v2 iba a `end-3` (12px). Medido en los PNG: la tinta del chevron
+                acaba a 17px del borde derecho en la referencia y a 13px con el valor de v3 — 4px
+                de más. */
+            jsx(Select$1.Indicator, { className: "end-3" }))] }));
     const inner = (jsxs(Fragment$1, { children: [label && (jsx(Label, { className: cn(LABEL_CLASS$1, hasHelper
                     ? LABEL_OFFSET_HELPER_CLASS[size]
-                    : LABEL_OFFSET_CLASS[size], isInvalid ? INVALID_LABEL_CLASS$1 : "", classNames?.label), children: label })), jsxs(Select$1.Trigger, { className: triggerClassName, children: [startContent != null && startContent !== false && (jsx("span", { "data-slot": "start-content", className: START_CONTENT_CLASS, children: startContent })), jsx(Select$1.Value, { className: cn(SIZE_TEXT_CLASS$1[size], isMultiline ? MULTILINE_VALUE_ROOM_CLASS : VALUE_ROOM_CLASS, HIDE_ITEM_EXTRAS_CLASS, isInvalid ? INVALID_TEXT_CLASS$1 : ""), children: renderValue
-                            ? // `renderValue` de v2 (`chunk-BJWIL32D.mjs`): sin selección, el placeholder;
-                                // con selección, la función con los items en la forma de v2. El nodo de la
-                                // colección de v3 trae los mismos campos que el de v2, así que el mapeo es
-                                // 1:1. `defaultChildren` es aquí el placeholder (o `""`, ver arriba).
-                                ({ state, isPlaceholder, defaultChildren }) => {
-                                    if (isPlaceholder) {
-                                        return defaultChildren;
-                                    }
-                                    const items = state.selectedItems.map((item) => ({
-                                        key: item.key,
-                                        data: item.value,
-                                        type: item.type,
-                                        props: item.props,
-                                        textValue: item.textValue,
-                                        rendered: item.rendered,
-                                        "aria-label": item["aria-label"],
-                                    }));
-                                    return renderValue(items);
-                                }
-                            : undefined }), isLoading ? (jsx(Spinner, { "aria-hidden": true, "data-slot": "select-spinner", size: "sm", color: "current", className: SPINNER_CLASS })) : (
-                    /* `.select__indicator` de v3 va a `end-2` (8px del borde interior); el
-                    `selectorIcon` de v2 iba a `end-3` (12px). Medido en los PNG: la tinta del chevron
-                    acaba a 17px del borde derecho en la referencia y a 13px con el valor de v3 — 4px
-                    de más. */
-                    jsx(Select$1.Indicator, { className: "end-3" }))] }), description && !isInvalid && (jsx(Description, { className: `${HELPER_CLASS$1} text-left`, children: description })), jsx(Select$1.Popover, { className: classNames?.popoverContent, children: jsx(ListBox
-                // El hueco que v2 llenaba con su `emptyContent` (ver el bloque de
-                // `DEFAULT_TRANSLATIONS`). `renderEmptyState` es la vía de v3: el `ListBox` de
-                // react-aria solo pinta algo con la colección vacía si se le pasa, y envuelve
-                // el resultado en un `<div role="option" style="display:contents">`
-                // (`react-aria-components/dist/private/ListBox.mjs:222-228`), o sea que la caja
-                // que se ve es la nuestra.
-                , { 
-                    // El hueco que v2 llenaba con su `emptyContent` (ver el bloque de
-                    // `DEFAULT_TRANSLATIONS`). `renderEmptyState` es la vía de v3: el `ListBox` de
-                    // react-aria solo pinta algo con la colección vacía si se le pasa, y envuelve
-                    // el resultado en un `<div role="option" style="display:contents">`
-                    // (`react-aria-components/dist/private/ListBox.mjs:222-228`), o sea que la caja
-                    // que se ve es la nuestra.
-                    renderEmptyState: () => (jsx("div", { className: EMPTY_CONTENT_CLASS, children: emptyContent })), children: withItemIndicator(withV2ItemContent(withCollectionItemIds(children))) }) }), isInvalid && errorMessage && (jsx(FieldError, { className: `${HELPER_CLASS$1} text-left`, children: errorMessage }))] }));
+                    : LABEL_OFFSET_CLASS[size], isInvalid ? INVALID_LABEL_CLASS$1 : "", classNames?.label), children: label })), usesAutocompleteShell ? (jsx(Autocomplete.Trigger, { className: triggerClassName, children: triggerContent })) : (jsx(Select$1.Trigger, { className: triggerClassName, children: triggerContent })), description && !isInvalid && (jsx(Description, { className: `${HELPER_CLASS$1} text-left`, children: description })), usesAutocompleteShell ? (jsx(Autocomplete.Popover, { className: classNames?.popoverContent, children: isSearchable ? (jsxs(Autocomplete.Filter, { filter: contains, inputValue: searchText, onInputChange: setSearchText, children: [jsx(SearchField, { autoFocus: true, "aria-label": resolvedSearchPlaceholder, fullWidth: true, children: jsxs(SearchField.Group, { className: SEARCH_GROUP_CLASS, children: [jsx(SearchField.SearchIcon, {}), jsx(SearchField.Input, { placeholder: resolvedSearchPlaceholder })] }) }), listBox] })) : (listBox) })) : (jsx(Select$1.Popover, { className: classNames?.popoverContent, children: listBox })), isInvalid && errorMessage && (jsx(FieldError, { className: `${HELPER_CLASS$1} text-left`, children: errorMessage }))] }));
     const commonProps = {
         id: selectId,
         name,
@@ -10037,7 +10349,14 @@ isVirtualized: _isVirtualized, disallowEmptySelection = false, isMultiline = fal
         isDisabled,
         isOpen,
         defaultOpen,
-        onOpenChange,
+        onOpenChange: handleOpenChange,
+        // v2 `closeOnSelect` → `shouldCloseOnSelect` de react-stately, que ya trae el mismo default
+        // por modo (`useSelectState.mjs:23`: cierra en `single`, se queda abierto en `multiple`).
+        // `undefined` deja ese default intacto.
+        ...(closeOnSelect === undefined
+            ? {}
+            : { shouldCloseOnSelect: closeOnSelect }),
+        onClear,
         fullWidth,
         // `cn`, no una concatenación: el `className` del consumidor tiene que GANAR a las clases
         // de la fachada, y con una cadena suelta llegan las dos al DOM y decide el orden en que
@@ -10050,7 +10369,13 @@ isVirtualized: _isVirtualized, disallowEmptySelection = false, isMultiline = fal
         className: cn(FIELD_STACK_CLASS$1[size], 
         // `w-full` y `min-w-40` son las dos ramas EXCLUYENTES de `fullWidth` en el `tv` de v2
         // (ver `ROOT_MIN_WIDTH_CLASS`).
-        fullWidth ? "w-full" : ROOT_MIN_WIDTH_CLASS, className),
+        fullWidth ? "w-full" : ROOT_MIN_WIDTH_CLASS, 
+        // Grupo con nombre para el borde de foco del disparador `Group` (ver
+        // `FOCUS_BORDER_GROUP_CLASS`). Sin la raíz `Autocomplete` no hace falta.
+        usesAutocompleteShell ? "group/aura-select" : "", 
+        // v2 `classNames.base`: la raíz, igual que `className`, y por eso delante de él (en v2
+        // los dos acababan en `slots.base({ class: cn(classNames?.base, className) })`).
+        classNames?.base, className),
     };
     if (selectionMode === "multiple") {
         // `disallowEmptySelection` en `multiple`: react-stately lo fuerza a `false` en este modo
@@ -10058,7 +10383,12 @@ isVirtualized: _isVirtualized, disallowEmptySelection = false, isMultiline = fal
         // la prop), así que la guarda la pone la fachada: el cambio que dejaría la selección vacía
         // no se propaga. Controlado basta con no avisar; sin controlar, la fachada lleva el valor.
         const ownsValue = disallowEmptySelection && selectedKeys === undefined;
-        return (jsx(Select$1, { ...commonProps, selectionMode: "multiple", value: ownsValue ? ownMultiple : toArray(selectedKeys), defaultValue: ownsValue ? undefined : toArray(defaultSelectedKeys), onChange: (keys) => {
+        const multipleProps = {
+            ...commonProps,
+            selectionMode: "multiple",
+            value: ownsValue ? ownMultiple : toArray(selectedKeys),
+            defaultValue: ownsValue ? undefined : toArray(defaultSelectedKeys),
+            onChange: (keys) => {
                 if (disallowEmptySelection && keys.length === 0) {
                     return;
                 }
@@ -10066,7 +10396,10 @@ isVirtualized: _isVirtualized, disallowEmptySelection = false, isMultiline = fal
                     setOwnMultiple(keys);
                 }
                 onSelectionChange?.(new Set(keys));
-            }, children: inner }));
+                onChange?.({ target: { name, value: keys.join(",") } });
+            },
+        };
+        return usesAutocompleteShell ? (jsx(Autocomplete, { ...multipleProps, children: inner })) : (jsx(Select$1, { ...multipleProps, children: inner }));
     }
     // `Array.from` cubre las tres formas de `SelectSelection` sin ramas nuevas: `"all"` sigue
     // cayendo a `null` (v3 no admite "todo" en selección única) y un array se lee igual que un
@@ -10081,7 +10414,17 @@ isVirtualized: _isVirtualized, disallowEmptySelection = false, isMultiline = fal
         : defaultSelectedKeys === "all"
             ? null
             : (Array.from(defaultSelectedKeys)[0] ?? null);
-    return (jsx(Select$1, { ...commonProps, value: singleValue, defaultValue: singleDefault, onChange: (key) => onSelectionChange?.(key == null ? new Set() : new Set([key])), children: inner }));
+    const singleProps = {
+        ...commonProps,
+        value: singleValue,
+        defaultValue: singleDefault,
+        onChange: (key) => {
+            onSelectionChange?.(key == null ? new Set() : new Set([key]));
+            // v2 llamaba a `onChange` después de `onSelectionChange` (ver `SelectChangeEvent`).
+            onChange?.({ target: { name, value: key == null ? "" : String(key) } });
+        },
+    };
+    return usesAutocompleteShell ? (jsx(Autocomplete, { ...singleProps, children: inner })) : (jsx(Select$1, { ...singleProps, children: inner }));
 };
 
 const defaultTranslations$4 = {
@@ -11122,6 +11465,28 @@ const VARIANT_CLASS = {
 // placeholder en el gris `default-500` (`113,113,122`) pese a ser un campo inválido.
 const INVALID_LABEL_CLASS = "text-danger";
 const INVALID_TEXT_CLASS = "text-danger";
+// ── `isClearable` / `onClear` / `classNames.clearButton` (API v2, repuesta) ──────────────────
+//
+// El `Textarea` de v2 ES el `Input` con `isMultiline` (mismo `useInput`), así que heredaba su botón
+// de limpiar: `isClearable = !!onClear || originalProps.isClearable` y `handleClear` pone el valor
+// a "" (lo que dispara `onValueChange("")`), llama a `onClear` y devuelve el foco
+// (`@heroui/input@2.4.33`, `dist/chunk-KQW2TNLT.mjs`); Escape con valor también limpia. Uso real:
+// `campaigns/**/AudienceReachStep.tsx` en beweossmbs (`isClearable` + `onClear` +
+// `classNames.clearButton`), el único de los 33 `Textarea` de la app que lo pide.
+//
+// Posición, literal del `tv` de v2 (`@heroui/theme@2.4.15`, `dist/components/input.js`):
+//   · `isMultiline.clearButton`  → "absolute top-2 right-2 rtl:right-auto rtl:left-2 z-10": la X va
+//     ARRIBA a la derecha, no centrada como en el campo de una línea (aquí `end-2` = right/left
+//     según la dirección, lo mismo que el par `right-2 rtl:left-2`);
+//   · `isClearable.input`        → "pe-6": el texto deja sitio a la X aunque todavía no se vea,
+//     para que no salte al aparecer.
+// Lo relativo en v2 era el `inputWrapper`, que aquí no existe (el `<textarea>` es la caja), así que
+// se añade un envoltorio `relative` SOLO cuando el campo es limpiable: sin la prop el DOM no cambia.
+// El glifo es el `CloseButton` de v3, el mismo que ya usa la fachada `Input` (§9.1: verse como v3),
+// y `classNames.clearButton` va el último para que las clases del consumidor ganen.
+const CLEAR_WRAPPER_CLASS = "relative w-full";
+const CLEAR_BUTTON_CLASS = "absolute top-2 end-2 z-10 h-4 w-4 min-h-0 p-0.5";
+const CLEARABLE_FIELD_CLASS = "pe-6";
 // ── El `className` del consumidor: FUSIONADO y en la RAÍZ ────────────────────────────────────
 //
 // Mismo defecto doble que en `Input.tsx` (ver ahí el razonamiento completo y las medidas), porque
@@ -11164,7 +11529,10 @@ minRows, rows,
 // llegue al DOM (antes viajaba en `...rest` y React avisaba de un atributo desconocido).
 maxRows = DEFAULT_MAX_ROWS, 
 // Compat v2: `true` apaga el autocrecimiento y deja la caja fija en su alto mínimo.
-disableAutosize = false, placeholder, isInvalid = false, isRequired = false, isDisabled = false, isReadOnly = false, 
+disableAutosize = false, placeholder, isClearable: isClearableProp = false, onClear, 
+// Sin efecto (ver `TextareaProps.labelPlacement`): fuera del spread para que no llegue
+// al `<textarea>` como atributo desconocido.
+labelPlacement: _labelPlacement, isInvalid = false, isRequired = false, isDisabled = false, isReadOnly = false, 
 // `fullWidth` por defecto a `true`: HeroUI v2 lo traía en sus `defaultVariants`
 // (verificado en el paquete v2 compilado, `dist/components/input.js`:
 // `defaultVariants: { variant:"flat", color:"default", size:"md", fullWidth:true, … }`, con
@@ -11172,7 +11540,7 @@ disableAutosize = false, placeholder, isInvalid = false, isRequired = false, isD
 // `undefined` y el campo dejaba de llenar su contenedor: en una fila flex se encogía al ancho
 // de su contenido (medido por S2: 208px dentro de una fila de 592, 336px de hueco). En una
 // columna no se notaba porque el `stretch` del flex lo tapaba — pero afecta a cualquier app.
-fullWidth = true, value, defaultValue, onChange, onValueChange, className, classNames, name, style, ...rest }, ref) => {
+fullWidth = true, value, defaultValue, onChange, onValueChange, className, classNames, name, style, onKeyDown, ...rest }, ref) => {
     const generatedId = useId();
     const textareaId = id || generatedId;
     const requestedRows = resolveRows(minRows, rows);
@@ -11209,6 +11577,46 @@ fullWidth = true, value, defaultValue, onChange, onValueChange, className, class
         minHeight: `${fieldRows * SIZE_LINE_HEIGHT[size] + FIELD_PADDING_Y + FIELD_BORDER_Y}px`,
         ...style,
     };
+    // v2: `isClearable = !!onClear || originalProps.isClearable`.
+    const isClearable = isClearableProp || Boolean(onClear);
+    // Limpiar en modo NO controlado tiene que poder vaciar el valor, y el estado interno del
+    // `TextField` no se puede escribir desde fuera: en ese caso (y solo en ese) la fachada lleva
+    // el valor en su propio estado, igual que `Input.tsx`. Sin `isClearable` nada cambia: el
+    // valor no controlado sigue siendo del `TextField` (y su `reset`, de `useFormReset`).
+    const isControlled = value !== undefined;
+    const ownsValue = isClearable && !isControlled;
+    const [ownValue, setOwnValue] = useState(defaultValue ?? "");
+    const currentValue = isControlled ? value : ownsValue ? ownValue : "";
+    const showClear = isClearable && !isDisabled && !isReadOnly && Boolean(currentValue);
+    // Orden de v2 (`handleClear`): el valor a "" —que en v2 disparaba `onValueChange`—, luego
+    // `onClear`. El `onChange` recibe un evento de valor vacío, como en `Input.tsx`, para que un
+    // consumidor que solo escucha `onChange` (p. ej. `field.onChange` de react-hook-form) se entere.
+    const clearValue = () => {
+        if (ownsValue) {
+            setOwnValue("");
+        }
+        onValueChange?.("");
+        if (onChange) {
+            const emptyEvent = {
+                target: { value: "" },
+                currentTarget: { value: "" },
+            };
+            onChange(emptyEvent);
+        }
+        onClear?.();
+    };
+    const handleClear = () => {
+        clearValue();
+        innerRef.current?.focus();
+    };
+    // Escape limpia, igual que v2 (con valor, limpiable y no de solo lectura). El `onKeyDown` del
+    // consumidor se llama primero.
+    const handleKeyDown = (event) => {
+        onKeyDown?.(event);
+        if (event.key === "Escape" && showClear) {
+            clearValue();
+        }
+    };
     // El estado del valor lo actualiza el `TextField` con su propio `onChange` (llega al
     // `<textarea>` por contexto y `mergeProps` encadena los dos). Aquí: medir —el nodo ya trae
     // el valor nuevo, y en modo no controlado la fachada no se re-renderiza— y avisar.
@@ -11217,6 +11625,10 @@ fullWidth = true, value, defaultValue, onChange, onValueChange, className, class
         onChange?.(event);
         onValueChange?.(event.target.value);
     };
+    const field = (jsx(TextArea, { ...rest, ref: setRefs, rows: fieldRows, style: fieldStyle, placeholder: placeholder, onChange: handleChange, onKeyDown: handleKeyDown, className: cn(SIZE_TEXT_CLASS[size], RESIZE_CLASS, RADIUS_CLASS$2[radius], VARIANT_CLASS[variant], isInvalid ? INVALID_TEXT_CLASS : "", FIELD_FOCUS_CLASS, FIELD_SHADOW_CLASS, 
+        // Incondicional, como el slot `input` de v2: el campo llena siempre su raíz,
+        // y es la raíz la que responde a `fullWidth` y al ancho del consumidor.
+        "w-full", isClearable ? CLEARABLE_FIELD_CLASS : "", classNames?.input ?? classNames?.inputWrapper) }));
     return (
     // ── `value` / `defaultValue` van al `TextField`, NO al `<textarea>` ─────────────────────
     //
@@ -11231,13 +11643,12 @@ fullWidth = true, value, defaultValue, onChange, onValueChange, className, class
     //     pero el estado interno del `TextField` seguía en "".
     // Ahora el `TextField` tiene el valor en los dos modos, y el `reset` del formulario también
     // es suyo (`useFormReset` devuelve el estado al `defaultValue`; el autosize lo escucha).
-    jsxs(TextField, { id: textareaId, value: value, defaultValue: defaultValue, name: name, isInvalid: isInvalid, isRequired: isRequired, isDisabled: isDisabled, isReadOnly: isReadOnly, className: cn(FIELD_STACK_CLASS, fullWidth ? "w-full" : "", 
+    jsxs(TextField, { id: textareaId, value: ownsValue ? ownValue : value, defaultValue: ownsValue ? undefined : defaultValue, 
+        // Solo cuando la fachada es dueña del valor (limpiable y no controlado).
+        onChange: ownsValue ? setOwnValue : undefined, name: name, isInvalid: isInvalid, isRequired: isRequired, isDisabled: isDisabled, isReadOnly: isReadOnly, className: cn(FIELD_STACK_CLASS, fullWidth ? "w-full" : "", 
         // El `className` del consumidor, en la raíz y en último lugar: el slot `base` de
         // v2 y la posición que le deja ganar en tailwind-merge (ver bloque de arriba).
-        className), children: [label && (jsx(Label, { className: cn(LABEL_CLASS, isInvalid ? INVALID_LABEL_CLASS : "", classNames?.label), children: label })), jsx(TextArea, { ...rest, ref: setRefs, rows: fieldRows, style: fieldStyle, placeholder: placeholder, onChange: handleChange, className: cn(SIZE_TEXT_CLASS[size], RESIZE_CLASS, RADIUS_CLASS$2[radius], VARIANT_CLASS[variant], isInvalid ? INVALID_TEXT_CLASS : "", FIELD_FOCUS_CLASS, FIELD_SHADOW_CLASS, 
-                // Incondicional, como el slot `input` de v2: el campo llena siempre su raíz,
-                // y es la raíz la que responde a `fullWidth` y al ancho del consumidor.
-                "w-full", classNames?.input ?? classNames?.inputWrapper) }), description && !isInvalid && (jsx(Description, { className: cn(HELPER_CLASS, "text-left", classNames?.description), children: description })), isInvalid && errorMessage && (jsx(FieldError, { className: cn(HELPER_CLASS, "text-left", classNames?.errorMessage), children: errorMessage }))] }));
+        className), children: [label && (jsx(Label, { className: cn(LABEL_CLASS, isInvalid ? INVALID_LABEL_CLASS : "", classNames?.label), children: label })), isClearable ? (jsxs("div", { className: CLEAR_WRAPPER_CLASS, children: [field, showClear && (jsx(CloseButton, { "aria-label": "Limpiar", className: cn(CLEAR_BUTTON_CLASS, classNames?.clearButton), onPress: handleClear }))] })) : (field), description && !isInvalid && (jsx(Description, { className: cn(HELPER_CLASS, "text-left", classNames?.description), children: description })), isInvalid && errorMessage && (jsx(FieldError, { className: cn(HELPER_CLASS, "text-left", classNames?.errorMessage), children: errorMessage }))] }));
 });
 Textarea.displayName = "Textarea";
 
@@ -12990,8 +13401,8 @@ const DrawerFiltersFooter = ({ onClearFilters, onCancel, onApplyFilters, transla
 /**
  * Header of the DrawerFilters with title and description.
  */
-const DrawerFiltersHeader = ({ title, description, }) => {
-    return (jsxs("div", { className: "px-6 pt-10", children: [jsx(H2, { className: "text-xl font-semibold text-foreground mb-2", children: title }), jsx(P, { className: "text-default-500", children: description })] }));
+const DrawerFiltersHeader = ({ titleId, title, description, }) => {
+    return (jsxs("div", { className: "px-6 pt-10", children: [jsx(H2, { id: titleId, className: "text-xl font-semibold text-foreground mb-2", children: title }), jsx(P, { className: "text-default-500", children: description })] }));
 };
 
 const NO_YEAR_CLASS = "[&_[data-type='year']]:hidden [&_[data-type='literal']:has(+[data-type='year'])]:hidden";
@@ -13670,6 +14081,11 @@ const NumberFilter = ({ filter, value, onChange }) => {
  */
 const DrawerFilters = ({ isOpen, onOpenChange, config, onApplyFilters, onClearFilters, onCancel, className, translations, initialValues, }) => {
     const [filterValues, setFilterValues] = useState(initialValues ?? {});
+    // Nombre accesible del panel: su título. Con `Drawer.Root`, el `DialogTrigger` nombraba el
+    // diálogo con el id de su disparador (que aquí no existe); sin root nadie lo nombra y
+    // react-aria avisa en cada apertura («A dialog must have a title for accessibility», medido en
+    // jsdom). Mismo arreglo que `headerId` en la fachada `Drawer`.
+    const titleId = useId();
     // Handle changes in individual filters
     const handleFilterChange = useCallback((filterKey, value) => {
         setFilterValues((prev) => ({
@@ -13782,9 +14198,16 @@ const DrawerFilters = ({ isOpen, onOpenChange, config, onApplyFilters, onClearFi
         onApplyFilters(processedFilters);
         onOpenChange(false);
     }, [filterValues, config.data, onApplyFilters, onOpenChange]);
-    return (jsx(Drawer$1, { children: jsx(Drawer$1.Backdrop, { isOpen: isOpen, onOpenChange: handleOpenChange, isDismissable: false, children: jsx(Drawer$1.Content, { placement: "right", className: cn("drawer-filters", className), children: jsxs(Drawer$1.Dialog, { className: "w-full p-0 sm:max-w-md", children: [jsx(Drawer$1.CloseTrigger, {}), jsx(DrawerFiltersHeader, { title: config.title, description: config.description }), jsx(Drawer$1.Body, { className: "px-6 py-10", children: jsx("div", { className: "space-y-3", children: config.data.map((filter) => {
-                                    return (jsx(FilterSection, { filter: filter, translations: translations, value: filterValues[filter.key], onChange: (value) => handleFilterChange(filter.key, value) }, filter.key));
-                                }) }) }), jsx(DrawerFiltersFooter, { onClearFilters: handleClearFilters, onCancel: handleCancel, onApplyFilters: handleApplyFilters, translations: translations })] }) }) }) }));
+    // Sin `Drawer.Root` (el `DialogTrigger` de react-aria) a propósito, igual que la fachada
+    // `Drawer` (`src/components/drawer/Drawer.tsx`): aquí no hay disparador —lo abre el `isOpen`
+    // de la app— y un `DialogTrigger` sin hijo pulsable avisa en consola en CADA montaje, abierto o
+    // cerrado («A PressResponder was rendered without a pressable child», medido en jsdom y por
+    // beweossmbs con la .140). `Drawer.Backdrop` (`ModalOverlay`) ya crea su propio estado de
+    // overlay con `isOpen`/`onOpenChange` y calcula todos los slots de `drawerVariants()`, así que
+    // el root no aportaba nada.
+    return (jsx(Drawer$1.Backdrop, { isOpen: isOpen, onOpenChange: handleOpenChange, isDismissable: false, children: jsx(Drawer$1.Content, { placement: "right", className: cn("drawer-filters", className), children: jsxs(Drawer$1.Dialog, { "aria-labelledby": titleId, className: "w-full p-0 sm:max-w-md", children: [jsx(Drawer$1.CloseTrigger, {}), jsx(DrawerFiltersHeader, { titleId: titleId, title: config.title, description: config.description }), jsx(Drawer$1.Body, { className: "px-6 py-10", children: jsx("div", { className: "space-y-3", children: config.data.map((filter) => {
+                                return (jsx(FilterSection, { filter: filter, translations: translations, value: filterValues[filter.key], onChange: (value) => handleFilterChange(filter.key, value) }, filter.key));
+                            }) }) }), jsx(DrawerFiltersFooter, { onClearFilters: handleClearFilters, onCancel: handleCancel, onApplyFilters: handleApplyFilters, translations: translations })] }) }) }));
 };
 DrawerFilters.displayName = "DrawerFilters";
 
@@ -16929,21 +17352,66 @@ function hasIndicator(children) {
         return node.type === Fragment && hasIndicator(node.props.children);
     });
 }
+// ---------------------------------------------------------------------------------------------
+// `size` de v2 → medidas de pestaña de v2
+// ---------------------------------------------------------------------------------------------
+/**
+ * Medidas de pestaña por `size`, **copiadas del oráculo** `@heroui/theme@2.4.15`
+ * `dist/components/tabs.js` (slot `tab`, `px-3` en la base y `size.{sm,md,lg}.tab` para la altura y
+ * el cuerpo), traducidas a clases de Tailwind 4 con el MISMO valor. Las `text-tiny` /
+ * `text-small` / `text-medium` de v2 son del plugin `heroui()` y en TW4 no existen
+ * (`default-layout.js:32-40`):
+ *
+ *   | size | v2                     | aquí           | cuerpo / interlineado |
+ *   |------|------------------------|----------------|-----------------------|
+ *   | sm   | `h-7 text-tiny` + px-3 | `h-7 px-3 text-xs`   | 0.75rem / 1rem   |
+ *   | md   | `h-8 text-small` + px-3 | `h-8 px-3 text-sm`  | 0.875rem / 1.25rem |
+ *   | lg   | `h-9 text-medium` + px-3 | `h-9 px-3 text-base` | 1rem / 1.5rem   |
+ *
+ * Por qué se mapea, cuando `radius` y `color` se ignoran (§9.1): `size` no es estética, es
+ * TAMAÑO, y descartarlo provoca un desbordamiento medido. linda-business embebido en el host v1 con
+ * la `.140`: con `size="sm"` descartado, el texto pasaba de 12 px a 14 px y cada pestaña salía de 6
+ * a 17 px más ancha. El carril medía 352 px en una columna de 287 px y el chevron del scroller
+ * tapaba la última pestaña. smbs tiene 10 `size="sm"`.
+ *
+ * Lo que NO se copia: el peso (v3 pone `font-medium`, v2 no ponía nada) y el radio (`rounded-small`),
+ * que siguen como v3 por §9.1. Tampoco el `py-1` de v2: con altura fija y `items-center` no
+ * cambia nada.
+ *
+ * Las clases van ANTES de `classNames.tab` y del `className` del `Tab` en un `cn`
+ * (tailwind-merge): lo de la app gana. El `h-7 px-2` de linda-business sigue mandando sobre el
+ * `px-3`. Clases literales en el fuente (no construidas), para que Tailwind las genere.
+ */
+const TAB_SIZE_CLASS = {
+    sm: "h-7 px-3 text-xs",
+    md: "h-8 px-3 text-sm",
+    lg: "h-9 px-3 text-base",
+};
+/**
+ * El `size` del root llega a los `Tabs.Tab` de la forma v3 por contexto, porque esas pestañas las
+ * escribe la app dentro de su `Tabs.List` y la fachada no las recorre. Sin `size` el valor es
+ * `undefined` y la pestaña sale byte a byte como antes.
+ */
+const TabSizeContext = createContext(undefined);
 const TabFacade = ({ children: ownChildren, title, 
 // `titleValue` es de v2 y no tiene destino en v3: se consume para que no llegue al DOM.
 titleValue: _titleValue, ...props }) => {
     // En la forma v3 la etiqueta son los `children`; si solo viene el `title` de v2 (un `Tab` con
     // `title` dentro de `Tabs.List`), hace de etiqueta. Con los dos, mandan los `children`.
     const children = ownChildren ?? title;
+    const sizeClass = useContext(TabSizeContext);
+    const tabProps = sizeClass
+        ? { ...props, className: cn(sizeClass, props.className) }
+        : props;
     // `children` como función es la forma de render props de react-aria (`TabRenderProps`). No se
     // puede inspeccionar, y menos aún combinar con un hermano —React rechaza una función como
     // hijo junto a un elemento—, así que se pasa tal cual. Un consumidor que la use monta el
     // indicador él (es la vía de escape de este caso). Exposición hoy: 0 usos en los 6 repos.
     if (typeof children === "function") {
-        return jsx(Tabs$1.Tab, { ...props, children: children });
+        return jsx(Tabs$1.Tab, { ...tabProps, children: children });
     }
     if (hasIndicator(children)) {
-        return jsx(Tabs$1.Tab, { ...props, children: children });
+        return jsx(Tabs$1.Tab, { ...tabProps, children: children });
     }
     // El indicador va PRIMERO por legibilidad del marcado, no por efecto: es `position:absolute`
     // con `z-index:-1`, o sea fuera del flujo y detrás del texto, así que el orden no cambia el
@@ -16953,7 +17421,7 @@ titleValue: _titleValue, ...props }) => {
     // `{children}` se pasa SIN normalizar (nada de `Children.toArray`) para no reescribir las
     // keys del consumidor: hacerlo cambiaría la reconciliación de una lista de pestañas
     // condicional. Verificado en el navegador que la anidación no produce aviso de key.
-    return (jsxs(Tabs$1.Tab, { ...props, children: [jsx(Tabs$1.Indicator, {}), children] }));
+    return (jsxs(Tabs$1.Tab, { ...tabProps, children: [jsx(Tabs$1.Indicator, {}), children] }));
 };
 TabFacade.displayName = "Aurora.Tab";
 /**
@@ -17064,8 +17532,10 @@ function hasPanelContent(children) {
 }
 const TabsFacade = (allProps) => {
     const { children, classNames, className, variant, fullWidth, items, isVertical, placement, orientation, destroyInactiveTabPanel = true, 
+    // v2: medidas de pestaña (ver `TAB_SIZE_CLASS`).
+    size, 
     // Sin equivalente en v3: se consumen para que no lleguen al DOM (ver README, «Props v2»).
-    size: _size, radius: _radius, color: _color, disableAnimation: _disableAnimation, disableCursorAnimation: _disableCursorAnimation, shouldSelectOnPressUp: _shouldSelectOnPressUp, ...rest } = allProps;
+    radius: _radius, color: _color, disableAnimation: _disableAnimation, disableCursorAnimation: _disableCursorAnimation, shouldSelectOnPressUp: _shouldSelectOnPressUp, ...rest } = allProps;
     const v3Variant = toV3Variant(variant);
     const v3Orientation = orientation ??
         (isVertical || placement === "start" || placement === "end"
@@ -17126,7 +17596,7 @@ const TabsFacade = (allProps) => {
         // `.tabs[data-orientation="horizontal"] > .tabs__list-container { align-self: start }` de
         // neutralize, que no hace falta: dentro de una fila el carril ya mide su contenido.
         const orientationAttr = v3Orientation ?? "horizontal";
-        return (jsxs(Tabs$1, { ...rootProps, orientation: v3Orientation, variant: v3Variant, children: [jsx("div", { className: cn("flex", v3Variant === "secondary" && "tabs--secondary", fullWidth && "w-full", classNames?.base, className), "data-orientation": orientationAttr, "data-slot": "tabs-base", children: jsx(Tabs$1.ListContainer, { className: cn(fullWidth && "w-full"), children: jsx(Tabs$1.List, { "aria-describedby": ariaDescribedby, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, className: cn(classNames?.tabList), children: tabs.map(({ id, title, tabClassName, tabProps }) => (createElement(Tabs$1.Tab, { ...tabProps, className: cn(classNames?.tab, tabClassName), id: id, key: id },
+        return (jsxs(Tabs$1, { ...rootProps, orientation: v3Orientation, variant: v3Variant, children: [jsx("div", { className: cn("flex", v3Variant === "secondary" && "tabs--secondary", fullWidth && "w-full", classNames?.base, className), "data-orientation": orientationAttr, "data-slot": "tabs-base", children: jsx(Tabs$1.ListContainer, { className: cn(fullWidth && "w-full"), children: jsx(Tabs$1.List, { "aria-describedby": ariaDescribedby, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, className: cn(classNames?.tabList), children: tabs.map(({ id, title, tabClassName, tabProps }) => (createElement(Tabs$1.Tab, { ...tabProps, className: cn(size && TAB_SIZE_CLASS[size], classNames?.tab, tabClassName), id: id, key: id },
                                 jsx(Tabs$1.Indicator, { className: cn(classNames?.cursor) }),
                                 classNames?.tabContent ? (jsx("span", { className: classNames.tabContent, children: title })) : (title)))) }) }) }), tabs
                     .filter(({ panel }) => hasPanelContent(panel))
@@ -17145,7 +17615,9 @@ const TabsFacade = (allProps) => {
         orientation: v3Orientation,
         variant: v3Variant,
     };
-    return jsx(TabsV3, { ...v3Props, children: v3Children });
+    const v3Tabs = jsx(TabsV3, { ...v3Props, children: v3Children });
+    // Sin `size` no se monta el provider: el árbol queda idéntico al de antes.
+    return size ? (jsx(TabSizeContext.Provider, { value: TAB_SIZE_CLASS[size], children: v3Tabs })) : (v3Tabs);
 };
 const TabsV3 = ({ children, ...props }) => {
     const nodes = Children.toArray(children);