beez-ui 2.7.1 → 3.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (110) hide show
  1. package/CHANGELOG.md +78 -0
  2. package/README.md +43 -13
  3. package/THIRD_PARTY_NOTICES.md +1 -1
  4. package/dist/components/account-menu.d.ts +4 -3
  5. package/dist/components/account-menu.js +63 -54
  6. package/dist/components/alert.d.ts +15 -15
  7. package/dist/components/alert.js +289 -270
  8. package/dist/components/animated-theme-toggler.js +1 -1
  9. package/dist/components/avatar.d.ts +56 -31
  10. package/dist/components/avatar.js +394 -277
  11. package/dist/components/badge.d.ts +8 -28
  12. package/dist/components/badge.js +55 -108
  13. package/dist/components/calendar.d.ts +36 -26
  14. package/dist/components/calendar.js +132 -1227
  15. package/dist/components/card.d.ts +36 -25
  16. package/dist/components/card.js +895 -72
  17. package/dist/components/carousel.d.ts +63 -47
  18. package/dist/components/carousel.js +496 -777
  19. package/dist/components/data-table.d.ts +5 -4
  20. package/dist/components/data-table.js +7 -6
  21. package/dist/components/dialog-surface.d.ts +23 -1
  22. package/dist/components/dialog-surface.js +99 -3
  23. package/dist/components/dialog.d.ts +80 -45
  24. package/dist/components/dialog.js +258 -503
  25. package/dist/components/dropdown-menu.d.ts +56 -73
  26. package/dist/components/dropdown-menu.js +79 -714
  27. package/dist/components/field.d.ts +3 -1
  28. package/dist/components/field.js +49 -39
  29. package/dist/components/filter-presets-bar.js +2 -2
  30. package/dist/components/filter-query-bar.js +1 -1
  31. package/dist/components/hover-card.d.ts +42 -41
  32. package/dist/components/hover-card.js +57 -483
  33. package/dist/components/pagination.d.ts +53 -31
  34. package/dist/components/pagination.js +176 -412
  35. package/dist/components/popover.d.ts +11 -23
  36. package/dist/components/popover.js +19 -304
  37. package/dist/components/{alert-dialog.d.ts → primitives/alert-dialog.d.ts} +17 -5
  38. package/dist/components/{alert-dialog.js → primitives/alert-dialog.js} +102 -54
  39. package/dist/components/primitives/avatar.d.ts +46 -0
  40. package/dist/components/primitives/avatar.js +268 -0
  41. package/dist/components/primitives/calendar.d.ts +37 -0
  42. package/dist/components/primitives/calendar.js +1250 -0
  43. package/dist/components/primitives/carousel.d.ts +106 -0
  44. package/dist/components/primitives/carousel.js +928 -0
  45. package/dist/components/primitives/dialog.d.ts +62 -0
  46. package/dist/components/primitives/dialog.js +490 -0
  47. package/dist/components/primitives/dropdown-menu-items.d.ts +59 -0
  48. package/dist/components/primitives/dropdown-menu-items.js +265 -0
  49. package/dist/components/primitives/dropdown-menu.d.ts +64 -0
  50. package/dist/components/primitives/dropdown-menu.js +557 -0
  51. package/dist/components/primitives/hover-card.d.ts +50 -0
  52. package/dist/components/primitives/hover-card.js +507 -0
  53. package/dist/components/primitives/pagination.d.ts +65 -0
  54. package/dist/components/primitives/pagination.js +373 -0
  55. package/dist/components/primitives/popover.d.ts +22 -0
  56. package/dist/components/primitives/popover.js +213 -0
  57. package/dist/components/primitives/select.d.ts +36 -0
  58. package/dist/components/primitives/select.js +407 -0
  59. package/dist/components/primitives/tooltip.d.ts +30 -0
  60. package/dist/components/primitives/tooltip.js +277 -0
  61. package/dist/components/radio-group.d.ts +30 -17
  62. package/dist/components/radio-group.js +266 -315
  63. package/dist/components/rich-link-editor.js +1 -1
  64. package/dist/components/select.d.ts +51 -42
  65. package/dist/components/select.js +163 -495
  66. package/dist/components/skeleton.d.ts +16 -15
  67. package/dist/components/skeleton.js +99 -205
  68. package/dist/components/split-button.js +1 -1
  69. package/dist/components/switch.d.ts +3 -6
  70. package/dist/components/switch.js +163 -170
  71. package/dist/components/tabs.d.ts +3 -11
  72. package/dist/components/tabs.js +61 -75
  73. package/dist/components/themed-toaster.d.ts +1 -1
  74. package/dist/components/themed-toaster.js +1 -1
  75. package/dist/components/toaster.d.ts +1 -1
  76. package/dist/components/toaster.js +1 -1
  77. package/dist/components/tooltip.d.ts +36 -31
  78. package/dist/components/tooltip.js +44 -284
  79. package/dist/constants/alert.d.ts +5 -1
  80. package/dist/constants/alert.js +5 -1
  81. package/dist/constants/avatar.d.ts +29 -1
  82. package/dist/constants/avatar.js +25 -0
  83. package/dist/constants/calendar.d.ts +12 -0
  84. package/dist/constants/calendar.js +12 -0
  85. package/dist/constants/card.d.ts +23 -0
  86. package/dist/constants/card.js +20 -0
  87. package/dist/constants/carousel.d.ts +31 -13
  88. package/dist/constants/carousel.js +32 -11
  89. package/dist/constants/dialog.d.ts +6 -1
  90. package/dist/constants/dialog.js +5 -1
  91. package/dist/constants/dropdown-menu.d.ts +2 -2
  92. package/dist/constants/dropdown-menu.js +2 -2
  93. package/dist/constants/pagination.d.ts +13 -2
  94. package/dist/constants/pagination.js +13 -2
  95. package/dist/constants/select.d.ts +4 -2
  96. package/dist/constants/select.js +4 -2
  97. package/dist/constants/switch.d.ts +5 -16
  98. package/dist/constants/switch.js +6 -14
  99. package/dist/hooks/use-today.d.ts +7 -0
  100. package/dist/hooks/use-today.js +50 -0
  101. package/dist/hooks.d.ts +1 -0
  102. package/dist/hooks.js +1 -0
  103. package/dist/index.d.ts +0 -1
  104. package/dist/index.js +0 -1
  105. package/dist/motion/glide-indicator.d.ts +1 -1
  106. package/dist/motion/glide-indicator.js +1 -1
  107. package/dist/motion/presence.d.ts +0 -1
  108. package/dist/motion/presence.js +0 -1
  109. package/dist/styles.css +1 -1
  110. package/package.json +1 -6
package/CHANGELOG.md CHANGED
@@ -4,6 +4,84 @@ Todos los cambios relevantes de beez-ui se documentan en este archivo con el for
4
4
 
5
5
  ## [Unreleased]
6
6
 
7
+ ## [3.0.1] - 2026-10-16
8
+
9
+ ### Fixed
10
+
11
+ - Las fotos de `Avatar`, `AvatarGroup` y `AccountMenu` se piden sin `Referer` (`referrerPolicy="no-referrer"`), así cargan las fotos de perfil de Google que antes se rechazaban y quedaban las iniciales.
12
+
13
+ ## [3.0.0] - 2026-10-16
14
+
15
+ ### Added
16
+
17
+ - `Dialog` acepta `alert` para confirmaciones: se anuncia como `alertdialog`, no se cierra al hacer click afuera, abre con el foco en el primer `DialogClose` y oculta el botón de cerrar por defecto.
18
+ - `DialogContent` suma `footer`, `hideTitle`, `closeLabel` ("Cerrar diálogo" por defecto), `headerClassName`, `titleClassName`, `descriptionClassName` y `footerClassName`; `title` y `description` aceptan cualquier contenido.
19
+ - `Pagination` suma `getHref` (enlaces con el `Link` del provider, sin dejar de llamar a `onPageChange`), paginación por cursor sin `pageCount` con `hasNextPage`, `previousLabel`, `nextLabel` y `className`.
20
+ - `Tooltip` acepta `side` `left` y `right`, `align`, `sideOffset`, `collisionPadding`, `contentClassName`, `open`, `defaultOpen`, `onOpenChange` y `delayDuration`, y funciona sin provider.
21
+ - `HoverCard` acepta `open`, `defaultOpen`, `onOpenChange`, `sideOffset`, `collisionPadding` y `contentClassName`.
22
+ - `DropdownMenu` acepta un `trigger` propio, ítems con enlace (`href`, `target`, `rel`), `checked`, `trailing`, `id`, `className` e `itemProps`, selección única con `selection` e ítems con `value`, y `side`, `align`, `contentClassName`, `contentLabel`, `open`, `defaultOpen`, `onOpenChange` y `modal`.
23
+ - `Select` acepta `description` y `error` con el mismo patrón que `Input`, `hideLabel` (label solo para lectores de pantalla), `size`, `triggerClassName` y `aria-invalid`; el `id` va al trigger, así un `<label htmlFor>` externo sigue funcionando.
24
+ - `Card` incorpora la vista rápida de Arc (`details`, `open`, `defaultOpen`, `onOpenChange`), el byline con `avatar`, `meta`, `status` y `action`, y las props `media`, `footer` y `headingLevel`.
25
+ - `AvatarGroup` recibe `members` (con `key` opcional para nombres repetidos), `max` (4 por defecto), `size` y `label` ("Integrantes" por defecto), arma solo el chip +N con un número animado y, con puntero fino, muestra el nombre de cada integrante al pasar el mouse.
26
+ - `Avatar` suma `fallback`, `badge` y `alt`; `Alert` suma `action` e `icon`.
27
+ - `Carousel` suma `loop`, `duration`, `watchFocus`, `onSettle` (avisa cuando termina la animación), `previousLabel`, `nextLabel`, `showControls`, `showIndicators` y `slideClassName`, y se reinicializa solo cuando cambian sus diapositivas o su tamaño, esperando a que termine el scroll o el arrastre en curso.
28
+ - `Carousel` acepta `interval` y `autoplay` con un control para pausar o iniciar la rotación, que también se pausa con hover, foco de teclado, arrastre, fuera de pantalla y en pestañas ocultas.
29
+ - `Calendar` acepta `todayLabel`, y el hook `useToday` se exporta desde `beez-ui` y `beez-ui/hooks`.
30
+ - `Pagination` pasa el evento del click como segundo argumento de `onPageChange(page, event)`, en botones, enlaces y flechas; con `getHref`, llamar `event.preventDefault()` evita que el enlace navegue, por ejemplo para paginar en el lugar con clicks simples y dejar que los clicks con modificadores abran otra pestaña.
31
+ - `Carousel` acepta `viewportClassName` y `trackClassName` para dar estilo al viewport recortado y a la pista de diapositivas, por ejemplo una altura definida en un visor de medios, sin apuntar a `[data-slot="carousel-content"]`.
32
+ - `AvatarGroup` acepta `total` para cuando `members` es solo una vista previa: si es mayor que la cantidad de integrantes recibidos, el chip +N cuenta contra el total. También reenvía atributos nativos y ARIA a la raíz (`aria-hidden`, `style`, `data-*`, `id`…).
33
+ - `Select` acepta `aria-describedby` en el trigger, combinado con los ids de `description` y `error`, y `options` acepta arrays de solo lectura, así una lista declarada `as const` no necesita copia.
34
+ - `DialogContent` suma `headerContent`, contenido extra del encabezado (por ejemplo etiquetas de tipo y estado) que se dibuja después del título y fuera de él, sin cambiar el nombre accesible del diálogo, y `closeButtonRef`, el ref del botón de cerrar; con `onOpenAutoFocus` permite abrir el diálogo con el foco en ese botón.
35
+
36
+ ### Changed
37
+
38
+ - **Incompatible:** los componentes adoptados de Arc usan la API pública de Arc en lugar de la composición estilo shadcn: `Switch`, `RadioGroup`, `Badge`, `Avatar`, `AvatarGroup`, `Skeleton`, `Card`, `Alert`, `Tooltip`, `HoverCard`, `DropdownMenu`, `Select`, `Pagination`, `Calendar` y `Carousel` pasan a ser componentes cerrados configurados por props; `Dialog`, `Popover` y `Tabs` conservan sus partes de Arc. El diseño y la motion no cambian.
39
+ - **Incompatible:** `DialogContent` recibe `title` (obligatorio) y `description` como props y dibuja su propio encabezado; el botón de cerrar se llama "Cerrar diálogo" en lugar de "Cerrar".
40
+ - **Incompatible:** `Pagination` recibe `page`, `pageCount`, `onPageChange` y `label`, y dibuja Anterior, Siguiente y una ventana de 5 páginas con botones, o con enlaces si se pasa `getHref`; cada página se llama "Página N".
41
+ - **Incompatible:** `TabsList` usa siempre la lista segmentada de Arc.
42
+ - **Incompatible:** `Tooltip` envuelve a su trigger (`<Tooltip content="…">`) y `HoverCard` recibe `content` con el trigger como hijo, con `side="bottom"` y `align="start"` por defecto.
43
+ - **Incompatible:** `DropdownMenu` recibe `label`, `icon` e `items`; el menú toma su nombre accesible de `label` o de `contentLabel`.
44
+ - **Incompatible:** `Select` recibe `label` (obligatorio y visible salvo con `hideLabel`) y `options`, con el placeholder "Seleccioná una opción" por defecto; la lista se abre debajo del trigger, con su mismo ancho. `className` se aplica al campo y `triggerClassName` al trigger.
45
+ - **Incompatible:** `PopoverContent` se alinea por defecto con el inicio del trigger (`align="start"`).
46
+ - **Incompatible:** `AccountMenu` reemplaza `children` por `items` y `DataTable` reemplaza `columnVisibilityMenuExtraContent` por `columnVisibilityMenuExtraItems`; los dos reciben los mismos ítems que `DropdownMenu`.
47
+ - **Incompatible:** `RadioGroup` recibe `label` (se dibuja como `legend` de un `fieldset`), `options`, `value` o `defaultValue`, `onValueChange` y `name` (se genera si falta).
48
+ - **Incompatible:** `Badge` usa `tone` (`neutral` por defecto), `size` e `icon`.
49
+ - **Incompatible:** `Avatar` recibe `name` (obligatorio), `src`, `size` (`sm`, `md`, `lg` o `xl`; `md` por defecto), `status` y `statusLabel`, y se anuncia como una sola imagen (por ejemplo "Ana, En línea").
50
+ - **Incompatible:** `Skeleton` sigue a Arc: sin hijos dibuja 3 líneas por defecto, y con hijos muestra el placeholder mientras `loading` (verdadero por defecto) y después pasa al contenido; solo reenvía `className`.
51
+ - **Incompatible:** `Card` recibe `title` (opcional), `description` y `children`.
52
+ - **Incompatible:** `Alert` recibe `title` (obligatorio), `tone` (`info` por defecto, anunciado con `role="status"`) y el detalle como `children`; el botón de descartar se llama "Descartar aviso: <título>" por defecto.
53
+ - **Incompatible:** `Calendar` recibe `value` y `onChange`, `month` y `onMonthChange`, `minDate`, `maxDate`, `disabledDates`, `locale` como texto (`"es-AR"` por defecto, semana desde el lunes), `showToday` y `className`.
54
+ - **Incompatible:** `Carousel` recibe `label` (obligatorio), una diapositiva por hijo, `index`, `defaultIndex`, `onIndexChange`, `slideSize` (`min(80cqw, 340px)` por defecto) y `slideLabel`; las flechas quedan debajo de las diapositivas, junto a los indicadores.
55
+ - **Incompatible:** los indicadores del carrusel son pestañas (`role="tab"` con `aria-selected`), las flechas usan `aria-disabled` en los extremos sin perder el foco, las diapositivas inactivas quedan inertes, el cambio de diapositiva se anuncia en una región en vivo y los nombres accesibles pasan a "Diapositiva anterior" y "Diapositiva siguiente".
56
+
57
+ ### Removed
58
+
59
+ - **Incompatible:** `AlertDialog` y todas sus partes, junto con el entrypoint `beez-ui/alert-dialog`; usar `<Dialog alert>`.
60
+ - **Incompatible:** `DialogPortal`, `DialogOverlay`, `DialogHeader`, `DialogFooter`, `DialogTitle` y `DialogDescription`.
61
+ - **Incompatible:** `PaginationContent`, `PaginationItem`, `PaginationLink`, `PaginationPrevious`, `PaginationNext` y `PaginationEllipsis`.
62
+ - **Incompatible:** `variant` de `TabsList` (incluida la variante `line`) y `tabsListVariants`.
63
+ - **Incompatible:** `TooltipTrigger`, `TooltipContent` y `TooltipProvider`.
64
+ - **Incompatible:** `PopoverAnchor`, `PopoverHeader`, `PopoverTitle` y `PopoverDescription`.
65
+ - **Incompatible:** `HoverCardTrigger` y `HoverCardContent`.
66
+ - **Incompatible:** toda la composición de `DropdownMenu` (`DropdownMenuTrigger`, `Content`, `Item`, `CheckboxItem`, `RadioGroup`, `RadioItem`, `Label`, `Separator`, `Shortcut`, `Group`, `Portal` y los submenús `Sub*`); Arc no tiene submenús.
67
+ - **Incompatible:** `SelectGroup`, `SelectValue`, `SelectTrigger`, `SelectContent`, `SelectLabel`, `SelectItem`, `SelectSeparator`, `SelectScrollUpButton` y `SelectScrollDownButton`.
68
+ - **Incompatible:** `size` de `Switch` y `RadioGroupItem`.
69
+ - **Incompatible:** `variant`, `asChild` y `badgeVariants` de `Badge`.
70
+ - **Incompatible:** `AvatarImage`, `AvatarFallback`, `AvatarBadge`, `AvatarGroupCount`, la composición de `AvatarGroup` y `size="default"`.
71
+ - **Incompatible:** el bloque libre de `Skeleton`.
72
+ - **Incompatible:** `CardHeader`, `CardTitle`, `CardDescription`, `CardAction`, `CardContent`, `CardFooter`, `CardMedia` y `size` de `Card`.
73
+ - **Incompatible:** `AlertTitle`, `AlertDescription`, `AlertAction` y `variant` de `Alert`.
74
+ - **Incompatible:** `mode` múltiple y de rango, `selected`, `onSelect`, los matchers de `disabled`, `components`, `classNames`, `buttonVariant`, `CalendarDayButton` y el resto de las props de react-day-picker de `Calendar`.
75
+ - **Incompatible:** `CarouselContent`, `CarouselItem`, `CarouselPrevious`, `CarouselNext`, `CarouselIndicators`, `CarouselIndicator`, `useCarousel`, `opts`, `setApi`, `plugins`, `orientation` (ya no hay carrusel vertical) y el tipo `CarouselApi`.
76
+
77
+ ### Fixed
78
+
79
+ - El click de un ítem de `DropdownMenu` (también en `AccountMenu`, `SplitButton`, `AnimatedThemeToggler` y el menú de columnas de `DataTable`) ya no llega, a través del portal, a los contenedores de React que envuelven el menú: una tarjeta clickeable que contiene el menú no se abre al elegir una opción. La selección, el cierre y la navegación de los ítems con enlace no cambian.
80
+ - Las fotos de `Avatar` con `size="xl"` se piden y se dibujan a 88px, en lugar de 40px estirados, con el provider por defecto y con el de Next.
81
+ - Cuando alguien sale de un `AvatarGroup` (cambian `members` o baja `max`), los lectores de pantalla dejan de anunciarlo apenas empieza a cerrarse su lugar.
82
+ - En pantallas o contenedores angostos, la `action` de un `Alert` baja debajo del texto cuando no entra al lado, en lugar de desbordar el aviso y aplastar el texto.
83
+ - Los números de la ayuda de `Input` y `Textarea` ruedan hasta su línea sin pasarse ni rebotar al asentarse.
84
+
7
85
  ## [2.7.1] - 2026-10-16
8
86
 
9
87
  ### Fixed
package/README.md CHANGED
@@ -48,9 +48,13 @@ si ya no se usa para otros paquetes.
48
48
 
49
49
 
50
50
  ```tsx
51
- import { Button, Avatar, AvatarImage, DataTable, Calendar } from "beez-ui";
51
+ import { Avatar, Button, Calendar, DataTable } from "beez-ui";
52
+
53
+ <Avatar name="Ana Núñez" src="/ana.jpg" />;
52
54
  ```
53
55
 
56
+ Desde 3.0.0 los componentes adoptados de [Arc](https://uiarc.dev) usan la API pública de Arc: `Switch`, `Checkbox`, `RadioGroup`, `Badge`, `Avatar`, `AvatarGroup`, `Skeleton`, `Card`, `Alert`, `Tooltip`, `HoverCard`, `DropdownMenu`, `Select`, `Pagination`, `Calendar` y `Carousel` son componentes cerrados que se configuran por props (`items`, `options`, `members`, `content`, `title`); `Dialog` (`Dialog`, `DialogTrigger`, `DialogContent` con `title` y `description`, `DialogClose`), `Popover` y `Tabs` conservan las partes de Arc. Cada uno suma solo las extensiones que Arc no cubre, con copy en español por defecto, por ejemplo `getHref` en `Pagination`, `trigger` e ítems con `href` en `DropdownMenu`, `onOpenChange` en `HoverCard`, `footer` y el modo `alert` en `Dialog` (reemplaza a `AlertDialog`), `hideLabel` en `Select` y `onSettle` en `Carousel`. La tabla de migración desde 2.x está en [Migración a 3.0.0](#migración-a-300).
57
+
54
58
  Agrupar los imports de componentes desde la raíz. El paquete publica JavaScript ESM y declaraciones TypeScript en `dist`; el consumidor no necesita transpilar el código fuente de la librería. La gramática de filtros y los helpers de mes-año son independientes de React.
55
59
 
56
60
  La utilidad `cn`, también exportada desde `beez-ui`, usa el paquete `cn` para combinar clases condicionales y resolver conflictos de Tailwind.
@@ -63,12 +67,38 @@ La utilidad `cn`, también exportada desde `beez-ui`, usa el paquete `cn` para c
63
67
 
64
68
  El modo oscuro se activa con `data-theme="dark"` o la clase `dark` en `<html>`; `BeezUIProvider` escribe ambos. El acento por defecto es el azul de Arc y se cambia con `data-accent` (`neutral`, `violet`, `blue`, `green`, `amber`, `orange`, `coral` o `rose`) en `<html>`. Los nombres de tokens de shadcn (`--primary`, `--muted`, `--card`…) siguen disponibles como alias de los roles de Arc; `--accent` es el acento de Arc, no el gris de hover de shadcn. Inter se usa para texto y controles y Geist para títulos grandes mediante `--font-display`; las licencias se incluyen en `assets/fonts`. Los consumidores pueden sobrescribir tokens mediante CSS normal. Si la aplicación usa Tailwind para sus propios estilos puede mantenerlo, pero ya no necesita escanear beez-ui.
65
69
 
66
- `DropdownMenuContent` toma el ancho natural de sus opciones, con un mínimo de 12 rem y un máximo limitado por el espacio disponible. No hereda el ancho del botón disparador: los menús abiertos desde un icono deben mantener sus etiquetas legibles. Para un ancho específico, usar `className` y ajustar también el mínimo cuando se necesite un menú más pequeño.
70
+ El menú de `DropdownMenu` toma el ancho natural de sus opciones, con un mínimo de 12 rem y un máximo limitado por el espacio disponible. No hereda el ancho del botón disparador: los menús abiertos desde un icono deben mantener sus etiquetas legibles. Para un ancho específico, usar `contentClassName` y ajustar también el mínimo cuando se necesite un menú más pequeño.
67
71
 
68
- Los componentes usan por defecto los espaciados compactos de Agenda: `Select` mide 2 rem (1.75 rem en tamaño pequeño), `TabsList` horizontal mide 2 rem y `PopoverContent` usa 0.625 rem de padding. Los menús y submenús tienen un mínimo de 12 rem, con filas compactas. `Dialog` y `AlertDialog` usan 1 rem de padding y un footer con borde superior y fondo diferenciado; `Textarea` distingue el estado deshabilitado mediante su fondo. Estos valores conservan los colores y fuentes del tema compartido. Son cambios de los defaults, sin una prop adicional para activarlos; los consumidores pueden personalizarlos mediante `className`.
72
+ Los componentes usan por defecto los espaciados compactos de Agenda: `Select` mide 2 rem (1.75 rem en tamaño pequeño), `TabsList` horizontal mide 2 rem y `PopoverContent` usa 0.625 rem de padding. Los menús tienen un mínimo de 12 rem, con filas compactas. `Dialog` usa 1 rem de padding y un footer con borde superior y fondo diferenciado; `Textarea` distingue el estado deshabilitado mediante su fondo. Estos valores conservan los colores y fuentes del tema compartido. Son cambios de los defaults, sin una prop adicional para activarlos; los consumidores pueden personalizarlos mediante `className`.
69
73
 
70
74
  Los `Sheet` superiores e inferiores limitan su altura al viewport dinámico (`100dvh`) y permiten desplazar el contenido para mantener accesibles las acciones de paneles largos.
71
75
 
76
+ ## Migración a 3.0.0
77
+
78
+ | Componente | 2.x | 3.0.0 |
79
+ | --- | --- | --- |
80
+ | `Switch` | `size="sm"` | Un solo tamaño, sin `size` |
81
+ | `RadioGroup` | `RadioGroup` + `RadioGroupItem` | `<RadioGroup label options={[{ value, label, description }]} value onValueChange />` |
82
+ | `Badge` | `variant` (`default`, `secondary`, `outline`, `ghost`, `link`, `destructive`) | `tone` (`neutral`, `success`, `info`, `warning`, `danger`); `destructive` pasa a `danger`, el resto a `neutral` |
83
+ | `Avatar` | `Avatar` + `AvatarImage` + `AvatarFallback` (+ `AvatarBadge`) | `<Avatar name src size fallback badge />`; `size="default"` pasa a `md` |
84
+ | `AvatarGroup` | `AvatarGroup` con `Avatar` hijos + `AvatarGroupCount` | `<AvatarGroup members={[{ name, src, status }]} max label />`; con una vista previa de los integrantes, `total` hace que el chip +N cuente contra el total |
85
+ | `Skeleton` | `<Skeleton className="h-4 w-24" />` | `<Skeleton lines={1} className />`, `avatar`, `label`, o `loading` con hijos |
86
+ | `Card` | `CardHeader`, `CardTitle`, `CardDescription`, `CardAction`, `CardContent`, `CardFooter`, `CardMedia` | `title`, `description`, `action`, `children`, `footer`, `media` |
87
+ | `Alert` | `AlertTitle`, `AlertDescription`, `AlertAction`, `variant="destructive"` | `<Alert title tone="danger" action>detalle</Alert>` |
88
+ | `Tooltip` | `TooltipProvider` + `Tooltip` + `TooltipTrigger asChild` + `TooltipContent` | `<Tooltip content side align>{trigger}</Tooltip>`, sin provider |
89
+ | `Popover` | `PopoverAnchor`, `PopoverHeader`, `PopoverTitle`, `PopoverDescription`; `align` centrado por defecto | Solo `Popover`, `PopoverTrigger`, `PopoverContent`, `PopoverClose`; `align="start"` por defecto |
90
+ | `HoverCard` | `HoverCard` + `HoverCardTrigger asChild` + `HoverCardContent` | `<HoverCard content onOpenChange className>{trigger}</HoverCard>` |
91
+ | `DropdownMenu` | `DropdownMenuTrigger asChild`, `Content`, `Item`, `Separator`, `RadioGroup`, `RadioItem`, `CheckboxItem`, `Shortcut`, `Sub*` | `<DropdownMenu label trigger items={[{ label, icon, onSelect, href, destructive, separatorBefore, checked, trailing }]} selection />`; sin submenús. El click dentro del menú no sube por el árbol de React hasta los contenedores que lo envuelven |
92
+ | `Select` | `SelectTrigger`, `SelectValue placeholder`, `SelectContent`, `SelectItem` | `<Select label hideLabel placeholder options={[{ value, label, disabled }]} value onValueChange triggerClassName />`; `aria-describedby` del trigger pasa a `Select` y `options` acepta listas `as const` |
93
+ | `Tabs` | `TabsList variant="line"`, `tabsListVariants` | Solo la lista segmentada |
94
+ | `Pagination` | `PaginationContent`, `PaginationItem`, `PaginationLink`, `PaginationPrevious`, `PaginationNext`, `PaginationEllipsis` | `<Pagination page pageCount onPageChange getHref label />`; sin `pageCount`, `hasNextPage` dibuja solo Anterior y Siguiente. `onPageChange(page, event)` recibe el click: con `getHref`, `event.preventDefault()` pagina en el lugar sin navegar |
95
+ | `Dialog` | `DialogHeader`, `DialogTitle`, `DialogDescription`, `DialogFooter`, `DialogPortal`, `DialogOverlay` | `<DialogContent title description footer hideTitle>`; el cierre se llama "Cerrar diálogo". Lo que acompañaba al título dentro de `DialogHeader` (etiquetas, estado) pasa a `headerContent`, y el ref del cierre a `closeButtonRef` |
96
+ | `AlertDialog` | `AlertDialog`, `AlertDialogContent`, `AlertDialogAction`, `AlertDialogCancel`… y `beez-ui/alert-dialog` | `<Dialog alert>` con `DialogContent` y `DialogClose asChild` para cancelar y confirmar |
97
+ | `Calendar` | `mode`, `selected`, `onSelect`, `disabled`, `defaultMonth`, `components`, `classNames` | `<Calendar value onChange month onMonthChange minDate maxDate disabledDates locale showToday />`; solo selección simple |
98
+ | `Carousel` | `CarouselContent`, `CarouselItem`, `CarouselPrevious`, `CarouselNext`, `CarouselIndicators`, `opts`, `setApi`, `CarouselApi` | `<Carousel label loop defaultIndex onIndexChange onSettle slideSize>{slides}</Carousel>`; `reInit` ya no hace falta. Las clases de `CarouselContent` y de su pista pasan a `viewportClassName` y `trackClassName` |
99
+ | `AccountMenu` | `children` con `DropdownMenuItem` | `items` con los ítems de `DropdownMenu` |
100
+ | `DataTable` | `columnVisibilityMenuExtraContent` | `columnVisibilityMenuExtraItems` |
101
+
72
102
  ## Movimiento
73
103
 
74
104
  El movimiento sigue a [Arc](https://uiarc.dev): explica causa y efecto (qué se abrió,
@@ -102,26 +132,26 @@ y del temblor de campos inválidos quedan deprecados y conservan su valor.
102
132
  - `Checkbox` y `RadioGroup` se comprimen a 0.92. La marca del checkbox aparece
103
133
  con pop y trazo (`pathLength`); el punto del radio aparece con spring.
104
134
  - El thumb de `Switch` viaja con el spring `smooth`, sin rebote, y se aplasta mientras se presiona.
105
- - `Input`, `Textarea`, `InputGroup` y `SelectTrigger` no se mueven al pasar a
135
+ - `Input`, `Textarea`, `InputGroup` y el trigger de `Select` no se mueven al pasar a
106
136
  `aria-invalid="true"`: el error se indica con el color y el mensaje. `FormMessage` y
107
137
  `Alert` aparecen con un fundido y una escala breves (desde 0.98), sin desenfoque.
108
138
  - `Tooltip` sube 3 px desde 0.97 mientras aparece y sale en el lugar, sin desenfoque.
109
139
  `Popover` y `HoverCard` se acercan desde su trigger con escala y fundido; `DropdownMenu`
110
140
  y `Select` escalan desde 0.96 y se revelan con un clip desde la esquina más cercana al trigger.
111
- - `Dialog` y `AlertDialog` entran como el diálogo de Arc: el fondo se oscurece en 0.24 s y el
141
+ - `Dialog`, también en su modo `alert`, entra como el diálogo de Arc: el fondo se oscurece en 0.24 s y el
112
142
  panel sube 8 px y crece desde 0.96 con el spring `smooth` mientras aparece en 0.16 s; al
113
143
  cerrar baja 4 px hasta 0.98 y se desvanece en 0.16 s, y una reapertura parte de donde
114
144
  está. `Sheet` entra desde su borde con spring y sale con la curva de cajón (0.24 s), sin
115
145
  demorar la siguiente interacción.
116
146
  - `GlideSlot` desliza el indicador activo entre ítems como un `layoutId` compartido:
117
- la pestaña activa de `Tabs` (fondo o subrayado), la
118
- página actual de `PaginationContent`, y al navegar con teclado el ítem resaltado de
147
+ la pestaña activa de `Tabs`, la
148
+ página actual de `Pagination`, y al navegar con teclado el ítem resaltado de
119
149
  `DropdownMenu` y `Select` y la sugerencia activa de `FilterQueryBar`. Con el puntero,
120
150
  esos resaltados lo siguen al instante: el propio puntero ya marca la posición.
121
151
  - Las superficies que se revelan con clip dejan 24 px libres fuera de la
122
152
  caja, así su borde (`ring`) y su sombra se ven desde el primer frame. Una copia
123
153
  transitoria viaja entre ítems y se elimina al llegar, devolviendo el estilo al ítem.
124
- - El chevron de `SelectTrigger` gira 180° al abrir y los chevrons de `DataTable`
154
+ - El chevron del trigger de `Select` gira 180° al abrir y los chevrons de `DataTable`
125
155
  (grupos y columnas) giran en lugar de cambiar de ícono; CSS define el ángulo final.
126
156
  - Las opciones del `Select` entran todas juntas con un fundido y una escala breves, sin
127
157
  escalonarse ni desenfocarse, y los checks de ítems de `Select` y `DropdownMenu` aparecen con pop.
@@ -136,7 +166,7 @@ y del temblor de campos inválidos quedan deprecados y conservan su valor.
136
166
  eleva. Un brillo recorre el `Skeleton` desde su `::after` con reproducción nativa,
137
167
  sin trabajo por frame en JavaScript.
138
168
  - `Calendar` desliza el mes entrante desde el lado de la navegación (invertido en RTL).
139
- - `AvatarImage` se revela con blur y un zoom de 1.06 al terminar de cargar; las imágenes
169
+ - La foto de `Avatar` se revela con blur y un zoom de 1.06 al terminar de cargar; las imágenes
140
170
  ya cargadas al montar no se animan.
141
171
  - El cursor de `TypingAnimation` queda fijo mientras escribe y parpadea en reposo. Las animaciones especializadas
142
172
  existentes de Embla, Sonner y rough-notation se conservan.
@@ -195,19 +225,19 @@ Next y TanStack Router son peers opcionales aislados en sus entrypoints. El prov
195
225
  ## Responsabilidades del consumidor
196
226
 
197
227
  - Tema: `AnimatedThemeToggler` y `ThemedToaster` consumen el contexto compartido. Sus props explícitas de tema siguen disponibles para usos controlados.
198
- - Navegación: `PaginationNext`, `PaginationPrevious` y `PaginationLink` usan anclas nativas. El prop opcional `component` admite el adaptador del router que elija la app. Sin proveedor usa el elemento nativo; con el proveedor de Next usa su navegación cliente.
199
- - Sidebar: en `SidebarProvider`, `defaultOpen` y el modo controlado conservan la semántica de LaTribu. Los ítems con `href` navegan con el adaptador de router del proveedor. `storageKey` activa opcionalmente persistencia local segura tras hidratar, sin cambiar la cookie pública `sidebar_state` ni sus siete días de duración; `cookieName` y `cookieMaxAge` la reemplazan cuando la app ya lee su propia cookie en el servidor. Para el contenido propio: `SidebarBrandButton` arma la fila de marca (sirve como `DropdownMenuTrigger asChild`), `SidebarLabel` saca del riel de íconos el texto que solo tiene sentido expandido, `useSidebarPanel()` expone `collapsed` y `AccountMenu` con `triggerVariant="sidebar"` se reduce solo al avatar. No dependas de los atributos `data-*` internos del sidebar: pueden cambiar entre versiones.
228
+ - Navegación: con `getHref`, `Pagination` dibuja enlaces con el `Link` del provider. Sin proveedor usa anclas nativas; con el proveedor de Next usa su navegación cliente.
229
+ - Sidebar: en `SidebarProvider`, `defaultOpen` y el modo controlado conservan la semántica de LaTribu. Los ítems con `href` navegan con el adaptador de router del proveedor. `storageKey` activa opcionalmente persistencia local segura tras hidratar, sin cambiar la cookie pública `sidebar_state` ni sus siete días de duración; `cookieName` y `cookieMaxAge` la reemplazan cuando la app ya lee su propia cookie en el servidor. Para el contenido propio: `SidebarBrandButton` arma la fila de marca (sirve como `trigger` de `DropdownMenu`), `SidebarLabel` saca del riel de íconos el texto que solo tiene sentido expandido, `useSidebarPanel()` expone `collapsed` y `AccountMenu` con `triggerVariant="sidebar"` se reduce solo al avatar. No dependas de los atributos `data-*` internos del sidebar: pueden cambiar entre versiones.
200
230
  - Formularios y tablas: el consumidor provee sus datos, validaciones y callbacks. No se importan servicios, modelos de negocio ni endpoints de agenda-mensual.
201
231
 
202
232
  ## Componentes incorporados desde agenda-mensual
203
233
 
204
- `Alert`, `AnimatedThemeToggler`, `Calendar`, `DataTable`, `FilterQueryBar`, `Form`, `Highlighter`, `InputGroup`, `Label`, `RadioGroup`, `TypingAnimation` y `ThemedToaster`, junto con sus subcomponentes, tipos y gramática de filtros.
234
+ `Alert`, `AnimatedThemeToggler`, `Calendar`, `DataTable`, `FilterQueryBar`, `Form`, `Highlighter`, `InputGroup`, `Label`, `RadioGroup`, `TypingAnimation` y `ThemedToaster`, junto con sus tipos y gramática de filtros.
205
235
 
206
236
  `FilterQueryBar` mantiene el foco en el input mientras se recorren las sugerencias con el puntero o las flechas. Enter aplica la opción activa; interactuar con el input no cierra la lista.
207
237
 
208
238
  La tabla conserva agrupación estable, columnas configurables, memoización, exclusiones y sincronización de qualifiers por identificadores. La barra conserva navegación por teclado, autocompletado y filtros de texto, rangos, fechas, presencia y carpetas. `Calendar` usa español por defecto y acepta otra locale. Los textos y configuraciones de filtros se pueden personalizar por props.
209
239
 
210
- Los componentes compartidos conservan el tema de LaTribu. Se incorporaron atributos `data-variant`/`data-size` del botón, scroll para paneles largos y persistencia opcional del sidebar. `Button` sigue la API de Arc: `variant` `primary`, `secondary`, `ghost` o `danger`, `size` `sm`, `md` o `lg` y `loading`; renderiza un `<button>` nativo con `type="button"` por defecto y no admite `asChild`: un link con aspecto de botón se estiliza como link. Se mantienen los estados deshabilitados y los skeletons deterministas. `AvatarImage` delega carga y fallback a Base UI; conserva carga diferida y recuperación al cambiar `src`. El export `Toaster` conserva el aspecto y las props de Sonner, y sus toasts responden al click y al teclado (Alt+T) con un `Dialog`, `AlertDialog` o `Sheet` abierto; `ThemedToaster` se apoya en él y agrega los estilos e iconos compartidos.
240
+ Los componentes compartidos conservan el tema de LaTribu. Se incorporaron atributos `data-variant`/`data-size` del botón, scroll para paneles largos y persistencia opcional del sidebar. `Button` sigue la API de Arc: `variant` `primary`, `secondary`, `ghost` o `danger`, `size` `sm`, `md` o `lg` y `loading`; renderiza un `<button>` nativo con `type="button"` por defecto y no admite `asChild`: un link con aspecto de botón se estiliza como link. Se mantienen los estados deshabilitados y los skeletons deterministas. La foto de `Avatar` delega carga y fallback a Base UI; conserva carga diferida y recuperación al cambiar `src`. El export `Toaster` conserva el aspecto y las props de Sonner, y sus toasts responden al click y al teclado (Alt+T) con un `Dialog` o `Sheet` abierto; `ThemedToaster` se apoya en él y agrega los estilos e iconos compartidos.
211
241
 
212
242
  ## Componentes de producto reutilizables
213
243
 
@@ -4,7 +4,7 @@ beez-ui includes code adapted from the following projects.
4
4
 
5
5
  ## Arc
6
6
 
7
- The theme tokens (`theme.css`, from Arc's `foundation.css`) and the `Button` API, styles and motion (`src/components/button.tsx`, `src/components/button-label.tsx`, `src/components/control-button.tsx`, `src/motion/arc-press.ts`, `src/motion/arc-tokens.ts`, `src/motion/use-morph-width.ts`), and the `ActionButton` and `SplitButton` components and their label morph (`src/components/action-button.tsx`, `src/components/split-button.tsx`, `src/components/morph-text.tsx`), the `Input` and `Textarea` fields with their animated helper and error rows (`src/components/input.tsx`, `src/components/textarea.tsx`, `src/components/field.tsx`), the `Switch`, `Checkbox` and `RadioGroup` controls (`src/components/switch.tsx`, `src/components/checkbox.tsx`, `src/components/radio-group.tsx`, `src/constants/switch.ts`, `src/constants/checkbox.ts`, `src/constants/radio-group.ts`), the `Badge`, `Avatar`, `Skeleton`, `Card` and `Alert` displays (`src/components/badge.tsx`, `src/components/avatar.tsx`, `src/components/skeleton.tsx`, `src/components/card.tsx`, `src/components/alert.tsx`), the `Tooltip`, `Popover` and `HoverCard` overlays and their motion (`src/components/tooltip.tsx`, `src/components/popover.tsx`, `src/components/hover-card.tsx`, `src/motion/arc-floating-slot.tsx`, `src/motion/overlay-warmth.ts`, `src/constants/tooltip.ts`, `src/constants/popover.ts`, `src/constants/hover-card.ts`), the `DropdownMenu` and `Select` menus (`src/components/dropdown-menu.tsx`, `src/components/select.tsx`), the `Tabs` and `Pagination` navigation (`src/components/tabs.tsx`, `src/components/pagination.tsx`, `src/constants/tabs.ts`), the `Dialog` and `AlertDialog` surfaces (`src/components/dialog.tsx`, `src/components/alert-dialog.tsx`, `src/components/dialog-surface.tsx`), and the `Calendar` and `Carousel` (`src/components/calendar.tsx`, `src/components/carousel.tsx`, `src/constants/calendar.ts`, `src/constants/carousel.ts`) are adapted from the free Arc library: https://uiarc.dev, https://github.com/kuratlielia/arc-library
7
+ The theme tokens (`theme.css`, from Arc's `foundation.css`) and the `Button` API, styles and motion (`src/components/button.tsx`, `src/components/button-label.tsx`, `src/components/control-button.tsx`, `src/motion/arc-press.ts`, `src/motion/arc-tokens.ts`, `src/motion/use-morph-width.ts`), and the `ActionButton` and `SplitButton` components and their label morph (`src/components/action-button.tsx`, `src/components/split-button.tsx`, `src/components/morph-text.tsx`), the `Input` and `Textarea` fields with their animated helper and error rows (`src/components/input.tsx`, `src/components/textarea.tsx`, `src/components/field.tsx`), the `Switch`, `Checkbox` and `RadioGroup` controls (`src/components/switch.tsx`, `src/components/checkbox.tsx`, `src/components/radio-group.tsx`, `src/constants/switch.ts`, `src/constants/checkbox.ts`, `src/constants/radio-group.ts`), the `Badge`, `Avatar`, `AvatarGroup`, `Skeleton`, `Card` and `Alert` displays (`src/components/badge.tsx`, `src/components/avatar.tsx`, `src/components/skeleton.tsx`, `src/components/card.tsx`, `src/components/alert.tsx`, `src/constants/avatar.ts`, `src/constants/card.ts`, `src/constants/alert.ts`), the `Tooltip`, `Popover` and `HoverCard` overlays and their motion (`src/components/tooltip.tsx`, `src/components/popover.tsx`, `src/components/hover-card.tsx`, `src/motion/arc-floating-slot.tsx`, `src/motion/overlay-warmth.ts`, `src/constants/tooltip.ts`, `src/constants/popover.ts`, `src/constants/hover-card.ts`), the `DropdownMenu` and `Select` menus (`src/components/dropdown-menu.tsx`, `src/components/select.tsx`), the `Tabs` and `Pagination` navigation (`src/components/tabs.tsx`, `src/components/pagination.tsx`, `src/constants/tabs.ts`), the `Dialog` surface and its `alert` mode (`src/components/dialog.tsx`, `src/components/dialog-surface.tsx`, `src/constants/dialog.ts`), the `Calendar` and `Carousel` (`src/components/calendar.tsx`, `src/components/carousel.tsx`, `src/constants/calendar.ts`, `src/constants/carousel.ts`, `src/hooks/use-today.ts`), and the internal compositions those public components are built on (`src/components/primitives/`) are adapted from the free Arc library: https://uiarc.dev, https://github.com/kuratlielia/arc-library
8
8
 
9
9
  ```
10
10
  MIT License
@@ -1,5 +1,6 @@
1
1
  /** Account menu: avatar trigger, account identity and the sign-in or sign-out action. */
2
2
  import type { ReactNode } from "react";
3
+ import { type DropdownItem } from "./primitives/dropdown-menu-items.js";
3
4
  export type AccountMenuStatus = "authenticated" | "unauthenticated";
4
5
  export interface AccountMenuLabels {
5
6
  signIn?: string;
@@ -54,8 +55,8 @@ export interface AccountMenuProps {
54
55
  align?: "start" | "center" | "end";
55
56
  side?: "top" | "right" | "bottom" | "left";
56
57
  sideOffset?: number;
57
- /** Extra items rendered between the identity header and the session action. */
58
- children?: ReactNode;
58
+ /** Extra rows rendered between the identity header and the session action, as in `DropdownMenu`'s `items`. */
59
+ items?: DropdownItem[];
59
60
  }
60
61
  /**
61
62
  * Presentational account menu: the session and its side effects stay with the caller. Signed in,
@@ -63,4 +64,4 @@ export interface AccountMenuProps {
63
64
  * @param props - Identity, session status, callbacks, copy and layout.
64
65
  * @returns The trigger and its menu.
65
66
  */
66
- export declare function AccountMenu({ name, email, status, image, avatarFallback, onSignOut, signOutDisabled, onSignIn, signInHref, triggerVariant, showStatusBadge, tooltipLabel, labels, classNames, align, side, sideOffset, children, }: AccountMenuProps): import("react").JSX.Element;
67
+ export declare function AccountMenu({ name, email, status, image, avatarFallback, onSignOut, signOutDisabled, onSignIn, signInHref, triggerVariant, showStatusBadge, tooltipLabel, labels, classNames, align, side, sideOffset, items, }: AccountMenuProps): import("react").JSX.Element;
@@ -3,11 +3,12 @@ import { c as _c } from "react/compiler-runtime";
3
3
  import { ChevronDownIcon, LogInIcon, LogOutIcon, PlusIcon } from "lucide-react";
4
4
  import { cn } from "../lib/utils.js";
5
5
  import { getNameInitials } from "../lib/name-initials.js";
6
- import { Avatar, AvatarBadge, AvatarFallback, AvatarImage } from "./avatar.js";
7
- import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "./dropdown-menu.js";
6
+ import { AvatarBadge, AvatarFallback, AvatarImage, AvatarRoot } from "./primitives/avatar.js";
7
+ import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "./primitives/dropdown-menu.js";
8
+ import { DropdownMenuItems } from "./primitives/dropdown-menu-items.js";
8
9
  import { Link } from "./link.js";
9
10
  import { useOptionalSidebarPanel } from "./sidebar-panel-context.js";
10
- import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.js";
11
+ import { Tooltip, TooltipContent, TooltipTrigger } from "./primitives/tooltip.js";
11
12
  import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
12
13
  const ACCOUNT_MENU_DEFAULT_LABELS = {
13
14
  signIn: "Iniciar sesión",
@@ -81,7 +82,7 @@ function AccountAvatar(t0) {
81
82
  }
82
83
  let t8;
83
84
  if ($[16] !== t3 || $[17] !== t4 || $[18] !== t6 || $[19] !== t7) {
84
- t8 = /* @__PURE__ */ _jsxs(Avatar, {
85
+ t8 = /* @__PURE__ */ _jsxs(AvatarRoot, {
85
86
  className: t3,
86
87
  children: [
87
88
  t4,
@@ -106,8 +107,8 @@ function AccountAvatar(t0) {
106
107
  * @returns The trigger and its menu.
107
108
  */
108
109
  export function AccountMenu(t0) {
109
- const $ = _c(80);
110
- const { name, email, status, image: t1, avatarFallback, onSignOut, signOutDisabled: t2, onSignIn, signInHref, triggerVariant: t3, showStatusBadge: t4, tooltipLabel, labels, classNames, align: t5, side: t6, sideOffset: t7, children } = t0;
110
+ const $ = _c(82);
111
+ const { name, email, status, image: t1, avatarFallback, onSignOut, signOutDisabled: t2, onSignIn, signInHref, triggerVariant: t3, showStatusBadge: t4, tooltipLabel, labels, classNames, align: t5, side: t6, sideOffset: t7, items } = t0;
111
112
  const image = t1 === undefined ? null : t1;
112
113
  const signOutDisabled = t2 === undefined ? false : t2;
113
114
  const triggerVariant = t3 === undefined ? "avatar" : t3;
@@ -337,8 +338,16 @@ export function AccountMenu(t0) {
337
338
  t31 = $[54];
338
339
  }
339
340
  let t32;
340
- if ($[55] !== classNames?.item || $[56] !== isAuthenticated || $[57] !== onSignIn || $[58] !== onSignOut || $[59] !== resolvedLabels.signIn || $[60] !== resolvedLabels.signOut || $[61] !== signInHref || $[62] !== signOutDisabled) {
341
- t32 = isAuthenticated ? /* @__PURE__ */ _jsxs(DropdownMenuItem, {
341
+ if ($[55] !== items) {
342
+ t32 = items ? /* @__PURE__ */ _jsx(DropdownMenuItems, { items }) : null;
343
+ $[55] = items;
344
+ $[56] = t32;
345
+ } else {
346
+ t32 = $[56];
347
+ }
348
+ let t33;
349
+ if ($[57] !== classNames?.item || $[58] !== isAuthenticated || $[59] !== onSignIn || $[60] !== onSignOut || $[61] !== resolvedLabels.signIn || $[62] !== resolvedLabels.signOut || $[63] !== signInHref || $[64] !== signOutDisabled) {
350
+ t33 = isAuthenticated ? /* @__PURE__ */ _jsxs(DropdownMenuItem, {
342
351
  className: classNames?.item,
343
352
  disabled: signOutDisabled,
344
353
  onSelect: () => void onSignOut(),
@@ -355,21 +364,21 @@ export function AccountMenu(t0) {
355
364
  onSelect: () => onSignIn?.(),
356
365
  children: [/* @__PURE__ */ _jsx(LogInIcon, { "aria-hidden": "true" }), resolvedLabels.signIn]
357
366
  });
358
- $[55] = classNames?.item;
359
- $[56] = isAuthenticated;
360
- $[57] = onSignIn;
361
- $[58] = onSignOut;
362
- $[59] = resolvedLabels.signIn;
363
- $[60] = resolvedLabels.signOut;
364
- $[61] = signInHref;
365
- $[62] = signOutDisabled;
366
- $[63] = t32;
367
+ $[57] = classNames?.item;
368
+ $[58] = isAuthenticated;
369
+ $[59] = onSignIn;
370
+ $[60] = onSignOut;
371
+ $[61] = resolvedLabels.signIn;
372
+ $[62] = resolvedLabels.signOut;
373
+ $[63] = signInHref;
374
+ $[64] = signOutDisabled;
375
+ $[65] = t33;
367
376
  } else {
368
- t32 = $[63];
377
+ t33 = $[65];
369
378
  }
370
- let t33;
371
- if ($[64] !== align || $[65] !== children || $[66] !== side || $[67] !== sideOffset || $[68] !== t22 || $[69] !== t30 || $[70] !== t32) {
372
- t33 = /* @__PURE__ */ _jsxs(DropdownMenuContent, {
379
+ let t34;
380
+ if ($[66] !== align || $[67] !== side || $[68] !== sideOffset || $[69] !== t22 || $[70] !== t30 || $[71] !== t32 || $[72] !== t33) {
381
+ t34 = /* @__PURE__ */ _jsxs(DropdownMenuContent, {
373
382
  "data-slot": "account-menu-content",
374
383
  align,
375
384
  side,
@@ -378,54 +387,54 @@ export function AccountMenu(t0) {
378
387
  children: [
379
388
  t30,
380
389
  t31,
381
- children,
382
- t32
390
+ t32,
391
+ t33
383
392
  ]
384
393
  });
385
- $[64] = align;
386
- $[65] = children;
387
- $[66] = side;
388
- $[67] = sideOffset;
389
- $[68] = t22;
390
- $[69] = t30;
391
- $[70] = t32;
392
- $[71] = t33;
394
+ $[66] = align;
395
+ $[67] = side;
396
+ $[68] = sideOffset;
397
+ $[69] = t22;
398
+ $[70] = t30;
399
+ $[71] = t32;
400
+ $[72] = t33;
401
+ $[73] = t34;
393
402
  } else {
394
- t33 = $[71];
403
+ t34 = $[73];
395
404
  }
396
- let t34;
397
- if ($[72] !== t20 || $[73] !== t33) {
398
- t34 = /* @__PURE__ */ _jsxs(DropdownMenu, { children: [t20, t33] });
399
- $[72] = t20;
400
- $[73] = t33;
401
- $[74] = t34;
405
+ let t35;
406
+ if ($[74] !== t20 || $[75] !== t34) {
407
+ t35 = /* @__PURE__ */ _jsxs(DropdownMenu, { children: [t20, t34] });
408
+ $[74] = t20;
409
+ $[75] = t34;
410
+ $[76] = t35;
402
411
  } else {
403
- t34 = $[74];
412
+ t35 = $[76];
404
413
  }
405
- const menu = t34;
414
+ const menu = t35;
406
415
  if (!tooltipLabel) {
407
416
  return menu;
408
417
  }
409
- let t35;
410
- if ($[75] !== tooltipLabel) {
411
- t35 = /* @__PURE__ */ _jsx(TooltipContent, {
418
+ let t36;
419
+ if ($[77] !== tooltipLabel) {
420
+ t36 = /* @__PURE__ */ _jsx(TooltipContent, {
412
421
  side: "bottom",
413
422
  sideOffset: 8,
414
423
  children: tooltipLabel
415
424
  });
416
- $[75] = tooltipLabel;
417
- $[76] = t35;
425
+ $[77] = tooltipLabel;
426
+ $[78] = t36;
418
427
  } else {
419
- t35 = $[76];
428
+ t36 = $[78];
420
429
  }
421
- let t36;
422
- if ($[77] !== menu || $[78] !== t35) {
423
- t36 = /* @__PURE__ */ _jsxs(Tooltip, { children: [menu, t35] });
424
- $[77] = menu;
425
- $[78] = t35;
426
- $[79] = t36;
430
+ let t37;
431
+ if ($[79] !== menu || $[80] !== t36) {
432
+ t37 = /* @__PURE__ */ _jsxs(Tooltip, { children: [menu, t36] });
433
+ $[79] = menu;
434
+ $[80] = t36;
435
+ $[81] = t37;
427
436
  } else {
428
- t36 = $[79];
437
+ t37 = $[81];
429
438
  }
430
- return t36;
439
+ return t37;
431
440
  }
@@ -1,31 +1,31 @@
1
1
  import type { ComponentProps, ReactNode } from "react";
2
2
  import type { AlertTone } from "../constants/alert.js";
3
3
  export type { AlertTone };
4
- /** shadcn-compatible variants; `destructive` is drawn with Arc's danger tone. */
5
- export type AlertVariant = "default" | "destructive";
6
- export type AlertProps = ComponentProps<"div"> & {
7
- variant?: AlertVariant | null;
4
+ export type AlertProps = Omit<ComponentProps<"div">, "title" | "children"> & {
5
+ /** Headline. A new title rises in over the old one. */
6
+ title: string;
8
7
  /**
9
- * Arc's semantic tone: tints and picks the icon, and sets the live-region role (`alert` for danger, `status` for
10
- * the rest). Without a tone the alert keeps `role="alert"`.
8
+ * Colour and icon: `info` (default), `success`, `warning` or `danger`. Danger interrupts with `role="alert"`; the
9
+ * rest are announced politely with `role="status"`.
11
10
  */
12
11
  tone?: AlertTone;
13
- /** Replaces the tone icon, or hides it with `false`. Without a tone, place an svg as the first child instead. */
14
- icon?: ReactNode;
12
+ /** Details under the title. String details rise in over the old ones when they change. */
13
+ children?: ReactNode;
15
14
  /** Controls presence: hiding the alert collapses its height while it fades out. */
16
15
  open?: boolean;
17
16
  /** Shows a dismiss button. An uncontrolled alert collapses first and then calls this. */
18
17
  onDismiss?: () => void;
19
- /** Accessible name of the dismiss button; defaults to "Descartar aviso". */
18
+ /** Accessible name of the dismiss button; defaults to "Descartar aviso: " followed by the title. */
20
19
  dismissLabel?: string;
20
+ /** Replaces the tone icon, or hides it with `false`. */
21
+ icon?: ReactNode;
22
+ /** A control beside the copy, such as a button that resolves the alert. */
23
+ action?: ReactNode;
21
24
  };
22
25
  /**
23
- * A persistent message. Compose it with `AlertTitle`, `AlertDescription` and `AlertAction`.
24
- * @param props - Variant, Arc tone and icon, optional presence and dismissal, plus native div attributes.
26
+ * A persistent, in-flow message with a tone icon, a title and optional details, action and dismissal.
27
+ * @param props - Title, tone, details, presence and dismissal, extensions and native div attributes.
25
28
  * @returns The alert; with `open` or `onDismiss` it collapses its own height when hidden.
26
29
  */
27
30
  declare function Alert({ open, onDismiss, ref: consumerRef, ...props }: AlertProps): import("react").JSX.Element;
28
- declare function AlertTitle({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
29
- declare function AlertDescription({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
30
- declare function AlertAction({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
31
- export { Alert, AlertTitle, AlertDescription, AlertAction };
31
+ export { Alert };