beez-ui 2.5.0 → 2.6.1

package/CHANGELOG.md

@@ -4,6 +4,69 @@ Todos los cambios relevantes de beez-ui se documentan en este archivo con el for
 
 ## [Unreleased]
 
+## [2.6.1] - 2026-10-16
+
+### Fixed
+
+- Los botones de un toast de `ThemedToaster` (acción, cancelar o cerrar) responden mientras hay un `Dialog`, `AlertDialog` o `Sheet` abierto, y presionarlos ya no cierra el `Dialog` o el `Sheet`. También se alcanzan con el teclado mediante el atajo de Sonner (Alt+T), que ya no queda bloqueado por la trampa de foco del modal; si el control enfocado cierra su toast, el foco vuelve al modal en lugar de perderse.
+- Presionar Escape en un menú, select o diálogo abierto desde el `Sidebar` en mobile cierra solo esa capa y deja el sidebar abierto.
+- Abrir el `Sidebar` en mobile en una ventana de escritorio angosta ya no desplaza la página de costado cuando desaparece la barra de scroll.
+- El contenido de `PopoverContent` más alto que el espacio disponible en pantalla se desplaza dentro del panel en lugar de quedar cortado fuera del viewport.
+
+## [2.6.0] - 2026-10-15
+
+### Added
+
+- `Switch` acepta `label` para mostrar el texto dentro del control con la altura táctil de Arc.
+- `Checkbox` acepta `label` y `description` para mostrar el campo con etiqueta de Arc, con la descripción vinculada por `aria-describedby`.
+- `RadioGroupItem` acepta `label` y `description` para mostrar las filas de opción de Arc, con un resaltado que se desliza hacia la opción elegida, también con las flechas del teclado.
+- `Badge` acepta `tone` (`neutral`, `success`, `info`, `warning`, `danger`), `size` (`sm`, `md`) e `icon`; cuando cambia el texto, el nuevo entra animado y el ancho se ajusta con un resorte.
+- `Avatar` acepta `size="xl"` (88 px) y `status` (`online`, `offline`) con un punto de presencia animado y un texto accesible configurable con `statusLabel`; si el avatar también tiene un `AvatarBadge`, el punto pasa a la esquina superior.
+- `Skeleton` acepta `lines`, `avatar` y `label` para dibujar el placeholder completo de Arc, y `loading` para pasar del placeholder al contenido con una transición.
+- `CardMedia` agrega un marco para fotos en `Card` con un zoom suave al pasar el puntero.
+- `Alert` acepta `tone` con su ícono y rol accesible, `icon`, `onDismiss` con `dismissLabel` para descartarlo, y `open` para ocultarlo colapsando su altura.
+- `Tooltip` acepta `content` y `side` para envolver directamente su trigger, y funciona sin `TooltipProvider`.
+- `PopoverClose` cierra el popover desde un control dentro del panel.
+- `HoverCardProfile` muestra una vista previa de persona (retrato o iniciales, nombre, rol, bio, números y pie) dentro de `HoverCardContent`.
+- `DialogTitle`, `DialogDescription`, `AlertDialogTitle` y `AlertDialogDescription` animan el cambio de texto mientras el diálogo está abierto, sin animar el primer render y sin movimiento con `prefers-reduced-motion`.
+- `DialogHeader` deja espacio al botón de cerrar del panel para que un título largo no quede debajo.
+- Los enlaces de `Pagination` con `aria-disabled` se muestran atenuados y no navegan ni con clic ni con el teclado.
+- `Calendar` acepta `showToday` y `todayLabel` para mostrar un botón "Hoy" que vuelve al mes actual y selecciona el día de hoy.
+- `CarouselIndicators` muestra un grupo de botones de puntos, con el activo marcado por `aria-current`, cuyo punto activo se estira en una píldora que acompaña el desplazamiento.
+- `Carousel` responde a `Home` y `End` para ir a la primera y la última diapositiva.
+
+### Changed
+
+- `Switch` adopta el diseño de Arc: pista de 42×24 (la variante `sm` pasa a 32×18) y thumb que se desliza con un resorte y se estira mientras se mantiene presionado.
+- `Checkbox` adopta el diseño de Arc: cuadrado de 18 px con relleno animado, tilde que se dibuja y se transforma en guion en el estado indeterminado, y zona táctil de 44 px.
+- `RadioGroupItem` adopta la marca de Arc: 17 px, rellena con el color de selección y con un punto que aparece con un resorte al elegirla.
+- `Badge` adopta el diseño de Arc: altura de 26 px por defecto, borde y fondo según el tono; las variantes actuales se dibujan con los tonos de Arc.
+- `Avatar`, `Card` y `Alert` adoptan los tokens de Arc: borde visible, superficie, radios, espaciado de 20 px en `Card` y descripción más chica en `Alert`.
+- `Card` con enlaces o botones se eleva levemente al pasar el puntero, y su footer ya no tiene banda de fondo.
+- `Skeleton` reemplaza el brillo deslizante por el pulso escalonado de Arc, que se detiene a los 20 segundos aproximadamente.
+- `Tooltip`, `Popover` y `HoverCard` adoptan el diseño de Arc: superficies con radio, borde y sombra de Arc; el tooltip pierde la flecha. Las tres capas entran desde su trigger y, con movimiento reducido, solo se desvanecen.
+- Los tooltips esperan 250 ms antes de abrir (`TooltipProvider` por defecto) y los hover cards abren a los 500 ms y cierran a los 140 ms; tras cerrar uno, el siguiente abre al instante.
+- `sideOffset` y `collisionPadding` por defecto pasan a 8/12 px en tooltip y hover card, y a 6/10 px en popover; el popover usa más padding y el hover card mide 18.5rem.
+- `DropdownMenu` adopta el diseño de Arc: panel sólido elevado (sin el efecto translúcido), filas de 36 px, tono de peligro en los ítems destructivos, ítems deshabilitados más tenues y entrada escalonada de las filas que respeta `prefers-reduced-motion`.
+- `DropdownMenuContent` usa por defecto `sideOffset` 6, `collisionPadding` 12 y `loop`, así que las flechas del teclado vuelven del último ítem al primero; `DropdownMenuSubContent` también usa `collisionPadding` 12 y `loop`. Se pueden sobrescribir.
+- `Select` adopta el diseño de Arc: el trigger usa las alturas de control de Arc (`default` igual que `Input`, `sm` de 36 px), responde al hover solo con puntero fino y marca `aria-invalid` con el borde de peligro; la lista tiene panel elevado, filas de 36 px y, con `position="popper"`, `collisionPadding` 12 y una altura máxima de 20rem.
+- `Tabs` adopta el diseño y la motion de Arc: lista segmentada con superficie elevada en el tab activo, resaltado que se desliza con el resorte de Arc y paneles que entran desde el lado del tab elegido ajustando su altura.
+- La lista de `Tabs` se desplaza de costado cuando no entra en pantalla y mantiene visible el tab activo o enfocado.
+- `Pagination` adopta el diseño de Arc: controles compactos con números tabulares, marca de la página actual que se desliza y flechas que responden al presionarlas; sigue navegando con el `Link` del provider.
+- `Pagination` usa textos por defecto en español ("Paginación", "Anterior", "Siguiente", "Ir a la página anterior", "Ir a la página siguiente", "Más páginas").
+- `Dialog` y `AlertDialog` adoptan la superficie del Dialog de Arc: velo más oscuro con desenfoque, panel elevado con radio de superficie, borde fino, sombra flotante y padding de 24 px; conservan el despliegue desde el centro.
+- El ancho máximo de `DialogContent` pasa de 384 px a 440 px, los títulos de los diálogos usan Inter a 18 px y las descripciones el color de texto secundario de Arc.
+- El botón de cerrar de `DialogContent` pasa a 32 px, con borde y fondo suave, alineado con la primera línea del título.
+- `DialogFooter` y `AlertDialogFooter` sobresalen 24 px hacia los costados y abajo, acompañando el nuevo padding.
+- El texto plano de títulos y descripciones de los diálogos se renderiza dentro de un `span` con `data-slot="dialog-swap-text"`.
+- `Calendar` adopta el diseño de Arc: días redondos de 36 px, título a la izquierda, punto bajo el día de hoy y un disco de selección que se desliza entre días.
+- Los controles anterior y siguiente de `Carousel` adoptan el diseño de Arc (redondos, con borde, 36 px) y el carrusel muestra el cursor de arrastre.
+
+### Fixed
+
+- Las flechas del teclado dentro de un campo de texto de una diapositiva ya no mueven el `Carousel`.
+- El día elegido de `Calendar` ya no pierde su color al pasar el puntero.
+
 ## [2.5.0] - 2026-10-15
 
 ### Added

package/THIRD_PARTY_NOTICES.md

@@ -4,7 +4,7 @@ beez-ui includes code adapted from the following projects.
 
 ## Arc
 
-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`), and the `Input` and `Textarea` fields with their animated helper and error rows (`src/components/input.tsx`, `src/components/textarea.tsx`, `src/components/field.tsx`) are adapted from the free Arc library: https://uiarc.dev, https://github.com/kuratlielia/arc-library
+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
 
 ```
 MIT License

package/dist/components/alert-dialog.d.ts

@@ -1,3 +1,8 @@
+/**
+ * Confirmation dialog on Arc's Dialog surface (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md): the same
+ * overlay, raised panel, title and description type as `Dialog`, so both read as one family. It keeps beez-ui's center
+ * morph entrance, media slot and Arc `Button` actions.
+ */
 import * as React from "react";
 import { AlertDialog as AlertDialogPrimitive } from "radix-ui";
 import { Button } from "./button.js";
@@ -20,7 +25,7 @@ declare function AlertDialogContent({ className, size, ...props }: React.Compone
  */
 declare function AlertDialogHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 /**
- * Separates confirmation actions with an edge-to-edge muted footer.
+ * Separates confirmation actions with an edge-to-edge footer under a hairline, bleeding through the panel padding.
  * @param props - Primitive properties and optional consumer overrides.
  * @returns The styled primitive with its original interaction contract.
  */
@@ -32,12 +37,18 @@ declare function AlertDialogFooter({ className, ...props }: React.ComponentProps
  */
 declare function AlertDialogMedia({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 /**
- * Renders confirmation headings using the shared font and compact text size.
+ * Renders the confirmation heading in Arc's title type. Plain text that changes while open swaps with Arc's rise.
+ * @param props - Primitive properties and optional consumer overrides.
+ * @returns The styled primitive with its original interaction contract.
+ */
+declare function AlertDialogTitle({ className, children, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Title>): React.JSX.Element;
+/**
+ * Renders the confirmation description in Arc's secondary text. Plain text that changes while open swaps with Arc's
+ * rise.
  * @param props - Primitive properties and optional consumer overrides.
  * @returns The styled primitive with its original interaction contract.
  */
-declare function AlertDialogTitle({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Title>): React.JSX.Element;
-declare function AlertDialogDescription({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Description>): React.JSX.Element;
+declare function AlertDialogDescription({ className, children, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Description>): React.JSX.Element;
 /** Confirms the dialog with an Arc `Button`; Radix merges its behavior onto the button through `asChild`. */
 declare function AlertDialogAction({ className, variant, size, children, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Action> & Pick<React.ComponentProps<typeof Button>, "variant" | "size">): React.JSX.Element;
 /** Dismisses the dialog with an Arc secondary `Button` by default. */

package/dist/components/alert-dialog.js

@@ -1,11 +1,17 @@
 "use client";
 import { c as _c } from "react/compiler-runtime";
+/**
+* Confirmation dialog on Arc's Dialog surface (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md): the same
+* overlay, raised panel, title and description type as `Dialog`, so both read as one family. It keeps beez-ui's center
+* morph entrance, media slot and Arc `Button` actions.
+*/
 import * as React from "react";
 import { AlertDialog as AlertDialogPrimitive } from "radix-ui";
 import { MotionSlot } from "../motion/motion-slot.js";
 import { MotionPresence, MotionOpenProvider, useMotionOpenState } from "../motion/presence.js";
 import { cn } from "../lib/utils.js";
 import { Button } from "./button.js";
+import { withDialogSwapText, dialogDescriptionClassName, dialogFooterClassName, dialogOverlayClassName, dialogSurfaceClassName, dialogTitleClassName } from "./dialog-surface.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function AlertDialog(t0) {
 	const $ = _c(9);
@@ -109,7 +115,7 @@ function AlertDialogOverlay(t0) {
 	}
 	let t1;
 	if ($[3] !== className) {
-		t1 = cn("fixed inset-0 z-50 bg-black/10 supports-backdrop-filter:backdrop-blur-xs ", className);
+		t1 = cn(dialogOverlayClassName, className);
 		$[3] = className;
 		$[4] = t1;
 	} else {
@@ -165,7 +171,7 @@ function AlertDialogContent(t0) {
 	}
 	let t4;
 	if ($[5] !== className) {
-		t4 = cn("group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid max-h-[calc(100svh-2rem)] overflow-y-auto overscroll-contain w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-popover-foreground ring-1 ring-foreground/10 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm ", className);
+		t4 = cn(dialogSurfaceClassName, "group/alert-dialog-content fixed top-1/2 left-1/2 grid max-h-[calc(100svh-2rem)] overflow-y-auto overscroll-contain w-full -translate-x-1/2 -translate-y-1/2 data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm", className);
 		$[5] = className;
 		$[6] = t4;
 	} else {
@@ -228,7 +234,7 @@ function AlertDialogHeader(t0) {
 	}
 	let t1;
 	if ($[3] !== className) {
-		t1 = cn("grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]", className);
+		t1 = cn("grid grid-rows-[auto_1fr] place-items-center gap-(--space-2) text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]", className);
 		$[3] = className;
 		$[4] = t1;
 	} else {
@@ -250,7 +256,7 @@ function AlertDialogHeader(t0) {
 	return t2;
 }
 /**
-* Separates confirmation actions with an edge-to-edge muted footer.
+* Separates confirmation actions with an edge-to-edge footer under a hairline, bleeding through the panel padding.
 * @param props - Primitive properties and optional consumer overrides.
 * @returns The styled primitive with its original interaction contract.
 */
@@ -269,7 +275,7 @@ function AlertDialogFooter(t0) {
 	}
 	let t1;
 	if ($[3] !== className) {
-		t1 = cn("-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end", className);
+		t1 = cn(dialogFooterClassName, "group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2", className);
 		$[3] = className;
 		$[4] = t1;
 	} else {
@@ -332,81 +338,115 @@ function AlertDialogMedia(t0) {
 	return t2;
 }
 /**
-* Renders confirmation headings using the shared font and compact text size.
+* Renders the confirmation heading in Arc's title type. Plain text that changes while open swaps with Arc's rise.
 * @param props - Primitive properties and optional consumer overrides.
 * @returns The styled primitive with its original interaction contract.
 */
 function AlertDialogTitle(t0) {
-	const $ = _c(8);
+	const $ = _c(13);
+	let children;
 	let className;
 	let props;
 	if ($[0] !== t0) {
-		({className, ...props} = t0);
+		({className, children, ...props} = t0);
 		$[0] = t0;
-		$[1] = className;
-		$[2] = props;
+		$[1] = children;
+		$[2] = className;
+		$[3] = props;
 	} else {
-		className = $[1];
-		props = $[2];
+		children = $[1];
+		className = $[2];
+		props = $[3];
 	}
 	let t1;
-	if ($[3] !== className) {
-		t1 = cn("font-heading text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2", className);
-		$[3] = className;
-		$[4] = t1;
+	if ($[4] !== className) {
+		t1 = cn(dialogTitleClassName, "sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2", className);
+		$[4] = className;
+		$[5] = t1;
 	} else {
-		t1 = $[4];
+		t1 = $[5];
 	}
 	let t2;
-	if ($[5] !== props || $[6] !== t1) {
-		t2 = /* @__PURE__ */ _jsx(AlertDialogPrimitive.Title, {
+	if ($[6] !== children || $[7] !== props.asChild) {
+		t2 = withDialogSwapText(children, props.asChild);
+		$[6] = children;
+		$[7] = props.asChild;
+		$[8] = t2;
+	} else {
+		t2 = $[8];
+	}
+	let t3;
+	if ($[9] !== props || $[10] !== t1 || $[11] !== t2) {
+		t3 = /* @__PURE__ */ _jsx(AlertDialogPrimitive.Title, {
 			"data-slot": "alert-dialog-title",
 			className: t1,
-			...props
+			...props,
+			children: t2
 		});
-		$[5] = props;
-		$[6] = t1;
-		$[7] = t2;
+		$[9] = props;
+		$[10] = t1;
+		$[11] = t2;
+		$[12] = t3;
 	} else {
-		t2 = $[7];
+		t3 = $[12];
 	}
-	return t2;
+	return t3;
 }
+/**
+* Renders the confirmation description in Arc's secondary text. Plain text that changes while open swaps with Arc's
+* rise.
+* @param props - Primitive properties and optional consumer overrides.
+* @returns The styled primitive with its original interaction contract.
+*/
 function AlertDialogDescription(t0) {
-	const $ = _c(8);
+	const $ = _c(13);
+	let children;
 	let className;
 	let props;
 	if ($[0] !== t0) {
-		({className, ...props} = t0);
+		({className, children, ...props} = t0);
 		$[0] = t0;
-		$[1] = className;
-		$[2] = props;
+		$[1] = children;
+		$[2] = className;
+		$[3] = props;
 	} else {
-		className = $[1];
-		props = $[2];
+		children = $[1];
+		className = $[2];
+		props = $[3];
 	}
 	let t1;
-	if ($[3] !== className) {
-		t1 = cn("text-sm text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground", className);
-		$[3] = className;
-		$[4] = t1;
+	if ($[4] !== className) {
+		t1 = cn(dialogDescriptionClassName, "text-balance md:text-pretty", className);
+		$[4] = className;
+		$[5] = t1;
 	} else {
-		t1 = $[4];
+		t1 = $[5];
 	}
 	let t2;
-	if ($[5] !== props || $[6] !== t1) {
-		t2 = /* @__PURE__ */ _jsx(AlertDialogPrimitive.Description, {
+	if ($[6] !== children || $[7] !== props.asChild) {
+		t2 = withDialogSwapText(children, props.asChild);
+		$[6] = children;
+		$[7] = props.asChild;
+		$[8] = t2;
+	} else {
+		t2 = $[8];
+	}
+	let t3;
+	if ($[9] !== props || $[10] !== t1 || $[11] !== t2) {
+		t3 = /* @__PURE__ */ _jsx(AlertDialogPrimitive.Description, {
 			"data-slot": "alert-dialog-description",
 			className: t1,
-			...props
+			...props,
+			children: t2
 		});
-		$[5] = props;
-		$[6] = t1;
-		$[7] = t2;
+		$[9] = props;
+		$[10] = t1;
+		$[11] = t2;
+		$[12] = t3;
 	} else {
-		t2 = $[7];
+		t3 = $[12];
 	}
-	return t2;
+	return t3;
 }
 /** Confirms the dialog with an Arc `Button`; Radix merges its behavior onto the button through `asChild`. */
 function AlertDialogAction(t0) {

package/dist/components/alert.d.ts

@@ -1,10 +1,31 @@
-import * as React from "react";
-import { type VariantProps } from "class-variance-authority";
-declare const alertVariants: (props?: ({
-    variant?: "default" | "destructive" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
-declare function Alert({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>): React.JSX.Element;
-declare function AlertTitle({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
-declare function AlertDescription({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
-declare function AlertAction({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+import type { ComponentProps, ReactNode } from "react";
+import type { AlertTone } from "../constants/alert.js";
+export type { AlertTone };
+/** shadcn-compatible variants; `destructive` is drawn with Arc's danger tone. */
+export type AlertVariant = "default" | "destructive";
+export type AlertProps = ComponentProps<"div"> & {
+    variant?: AlertVariant | null;
+    /**
+     * Arc's semantic tone: tints and picks the icon, and sets the live-region role (`alert` for danger, `status` for
+     * the rest). Without a tone the alert keeps `role="alert"`.
+     */
+    tone?: AlertTone;
+    /** Replaces the tone icon, or hides it with `false`. Without a tone, place an svg as the first child instead. */
+    icon?: ReactNode;
+    /** Controls presence: hiding the alert collapses its height while it fades out. */
+    open?: boolean;
+    /** Shows a dismiss button. An uncontrolled alert collapses first and then calls this. */
+    onDismiss?: () => void;
+    /** Accessible name of the dismiss button; defaults to "Descartar aviso". */
+    dismissLabel?: string;
+};
+/**
+ * A persistent message. Compose it with `AlertTitle`, `AlertDescription` and `AlertAction`.
+ * @param props - Variant, Arc tone and icon, optional presence and dismissal, plus native div attributes.
+ * @returns The alert; with `open` or `onDismiss` it collapses its own height when hidden.
+ */
+declare function Alert({ open, onDismiss, ref: consumerRef, ...props }: AlertProps): import("react").JSX.Element;
+declare function AlertTitle({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+declare function AlertDescription({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+declare function AlertAction({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
 export { Alert, AlertTitle, AlertDescription, AlertAction };