beez-ui 2.6.0 → 2.6.2

package/CHANGELOG.md

@@ -4,6 +4,21 @@ Todos los cambios relevantes de beez-ui se documentan en este archivo con el for
 
 ## [Unreleased]
 
+## [2.6.2] - 2026-10-16
+
+### Fixed
+
+- El `Toaster` exportado por beez-ui (desde `beez-ui` y `beez-ui/sonner`) también responde al click y al teclado (Alt+T) mientras hay un `Dialog`, `AlertDialog` o `Sheet` abierto, y devuelve el foco al modal cuando se cierra el toast enfocado, sin cambiar su aspecto ni sus props.
+
+## [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

package/README.md

@@ -187,7 +187,7 @@ Next y TanStack Router son peers opcionales aislados en sus entrypoints. El prov
 
 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.
 
-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 original `Toaster` permanece disponible; `ThemedToaster` agrega los estilos e iconos compartidos.
+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.
 
 ## Componentes de producto reutilizables
 

package/dist/components/dialog.js

@@ -11,6 +11,7 @@ import { Dialog as DialogPrimitive } 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 { keepOpenOnToastInteraction } from "../lib/toast-layer.js";
 import { Button } from "./button.js";
 import { ControlButton } from "./control-button.js";
 import { XIcon } from "lucide-react";
@@ -210,7 +211,7 @@ function DialogViewportCloseButton() {
 * @returns The styled primitive with its original interaction contract.
 */
 function DialogContent(t0) {
-	const $ = _c(26);
+	const $ = _c(29);
 	let children;
 	let className;
 	let props;
@@ -256,17 +257,25 @@ function DialogContent(t0) {
 		t7 = $[9];
 	}
 	let t8;
-	if ($[10] !== closeButtonPlacement || $[11] !== showCloseButton) {
-		t8 = showCloseButton && closeButtonPlacement === "viewport" && /* @__PURE__ */ _jsx(DialogViewportCloseButton, {});
-		$[10] = closeButtonPlacement;
-		$[11] = showCloseButton;
-		$[12] = t8;
+	if ($[10] !== props.onInteractOutside) {
+		t8 = keepOpenOnToastInteraction(props.onInteractOutside);
+		$[10] = props.onInteractOutside;
+		$[11] = t8;
 	} else {
-		t8 = $[12];
+		t8 = $[11];
 	}
 	let t9;
-	if ($[13] !== closeButtonPlacement || $[14] !== showCloseButton) {
-		t9 = showCloseButton && closeButtonPlacement === "content" && /* @__PURE__ */ _jsx(DialogPrimitive.Close, {
+	if ($[12] !== closeButtonPlacement || $[13] !== showCloseButton) {
+		t9 = showCloseButton && closeButtonPlacement === "viewport" && /* @__PURE__ */ _jsx(DialogViewportCloseButton, {});
+		$[12] = closeButtonPlacement;
+		$[13] = showCloseButton;
+		$[14] = t9;
+	} else {
+		t9 = $[14];
+	}
+	let t10;
+	if ($[15] !== closeButtonPlacement || $[16] !== showCloseButton) {
+		t10 = showCloseButton && closeButtonPlacement === "content" && /* @__PURE__ */ _jsx(DialogPrimitive.Close, {
 			"data-slot": "dialog-close",
 			asChild: true,
 			children: /* @__PURE__ */ _jsx(MotionSlot, {
@@ -282,15 +291,15 @@ function DialogContent(t0) {
 				})
 			})
 		});
-		$[13] = closeButtonPlacement;
-		$[14] = showCloseButton;
-		$[15] = t9;
+		$[15] = closeButtonPlacement;
+		$[16] = showCloseButton;
+		$[17] = t10;
 	} else {
-		t9 = $[15];
+		t10 = $[17];
 	}
-	let t10;
-	if ($[16] !== children || $[17] !== props || $[18] !== t5 || $[19] !== t7 || $[20] !== t8 || $[21] !== t9) {
-		t10 = /* @__PURE__ */ _jsxs(React.Fragment, { children: [t4, /* @__PURE__ */ _jsx(MotionSlot, {
+	let t11;
+	if ($[18] !== children || $[19] !== props || $[20] !== t10 || $[21] !== t5 || $[22] !== t7 || $[23] !== t8 || $[24] !== t9) {
+		t11 = /* @__PURE__ */ _jsxs(React.Fragment, { children: [t4, /* @__PURE__ */ _jsx(MotionSlot, {
 			kind: "center-morph",
 			children: /* @__PURE__ */ _jsxs(DialogPrimitive.Content, {
 				forceMount: true,
@@ -298,40 +307,42 @@ function DialogContent(t0) {
 				"data-close-button-placement": t5,
 				className: t7,
 				...props,
+				onInteractOutside: t8,
 				children: [
 					children,
-					t8,
-					t9
+					t9,
+					t10
 				]
 			})
 		})] });
-		$[16] = children;
-		$[17] = props;
-		$[18] = t5;
-		$[19] = t7;
-		$[20] = t8;
-		$[21] = t9;
-		$[22] = t10;
+		$[18] = children;
+		$[19] = props;
+		$[20] = t10;
+		$[21] = t5;
+		$[22] = t7;
+		$[23] = t8;
+		$[24] = t9;
+		$[25] = t11;
 	} else {
-		t10 = $[22];
+		t11 = $[25];
 	}
-	let t11;
-	if ($[23] !== props.forceMount || $[24] !== t10) {
-		t11 = /* @__PURE__ */ _jsx(DialogPortal, {
+	let t12;
+	if ($[26] !== props.forceMount || $[27] !== t11) {
+		t12 = /* @__PURE__ */ _jsx(DialogPortal, {
 			forceMount: true,
 			children: /* @__PURE__ */ _jsx(MotionPresence, {
 				scope: "dialog",
 				forceMount: t3,
-				children: t10
+				children: t11
 			})
 		});
-		$[23] = props.forceMount;
-		$[24] = t10;
-		$[25] = t11;
+		$[26] = props.forceMount;
+		$[27] = t11;
+		$[28] = t12;
 	} else {
-		t11 = $[25];
+		t12 = $[28];
 	}
-	return t11;
+	return t12;
 }
 /**
 * Stacks the title and description. While the panel shows its own close button, the header keeps Arc's gap to it so

package/dist/components/popover.d.ts

@@ -11,6 +11,7 @@ declare function PopoverTrigger({ ...props }: React.ComponentProps<typeof Popove
 declare function PopoverClose({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Close>): React.JSX.Element;
 /**
  * Renders Arc's panel: raised surface, hairline border, panel radius and floating shadow, kept inside the viewport.
+ * Content taller than the room left on the placed side scrolls inside the panel instead of running off screen.
  * @param props - Radix content properties. `align` defaults to `center`, `sideOffset` to 6px and `collisionPadding`
  *   to 10px.
  * @returns The portaled panel.

package/dist/components/popover.js

@@ -106,6 +106,7 @@ function resolvePopoverMotion() {
 }
 /**
 * Renders Arc's panel: raised surface, hairline border, panel radius and floating shadow, kept inside the viewport.
+* Content taller than the room left on the placed side scrolls inside the panel instead of running off screen.
 * @param props - Radix content properties. `align` defaults to `center`, `sideOffset` to 6px and `collisionPadding`
 *   to 10px.
 * @returns The portaled panel.
@@ -138,7 +139,7 @@ function PopoverContent(t0) {
 	const t4 = props.forceMount;
 	let t5;
 	if ($[6] !== className) {
-		t5 = cn("z-50 flex w-72 max-w-[calc(100vw-20px)] origin-(--radix-popover-content-transform-origin) flex-col gap-2.5 rounded-(--radius-panel) border border-border bg-surface-raised p-(--space-4) text-sm leading-(--leading-body) text-foreground shadow-(--shadow-floating) outline-hidden", className);
+		t5 = cn("z-50 flex max-h-(--radix-popover-content-available-height) w-72 max-w-[calc(100vw-20px)] origin-(--radix-popover-content-transform-origin) flex-col gap-2.5 overflow-y-auto overscroll-contain *:shrink-0 rounded-(--radius-panel) border border-border bg-surface-raised p-(--space-4) text-sm leading-(--leading-body) text-foreground shadow-(--shadow-floating) outline-hidden", className);
 		$[6] = className;
 		$[7] = t5;
 	} else {

package/dist/components/sheet.js

@@ -5,6 +5,7 @@ import { Dialog as SheetPrimitive } 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 { keepOpenOnToastInteraction } from "../lib/toast-layer.js";
 import { ControlButton } from "./control-button.js";
 import { XIcon } from "lucide-react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -160,7 +161,7 @@ function SheetOverlay(t0) {
 * @returns The styled primitive with its original interaction contract.
 */
 function SheetContent(t0) {
-	const $ = _c(20);
+	const $ = _c(23);
 	let children;
 	let className;
 	let props;
@@ -203,8 +204,16 @@ function SheetContent(t0) {
 		t5 = $[8];
 	}
 	let t6;
-	if ($[9] !== showCloseButton) {
-		t6 = showCloseButton && /* @__PURE__ */ _jsx(SheetPrimitive.Close, {
+	if ($[9] !== props.onInteractOutside) {
+		t6 = keepOpenOnToastInteraction(props.onInteractOutside);
+		$[9] = props.onInteractOutside;
+		$[10] = t6;
+	} else {
+		t6 = $[10];
+	}
+	let t7;
+	if ($[11] !== showCloseButton) {
+		t7 = showCloseButton && /* @__PURE__ */ _jsx(SheetPrimitive.Close, {
 			"data-slot": "sheet-close",
 			asChild: true,
 			children: /* @__PURE__ */ _jsx(MotionSlot, {
@@ -220,14 +229,14 @@ function SheetContent(t0) {
 				})
 			})
 		});
-		$[9] = showCloseButton;
-		$[10] = t6;
+		$[11] = showCloseButton;
+		$[12] = t7;
 	} else {
-		t6 = $[10];
+		t7 = $[12];
 	}
-	let t7;
-	if ($[11] !== children || $[12] !== props || $[13] !== side || $[14] !== t5 || $[15] !== t6) {
-		t7 = /* @__PURE__ */ _jsxs(React.Fragment, { children: [t4, /* @__PURE__ */ _jsx(MotionSlot, {
+	let t8;
+	if ($[13] !== children || $[14] !== props || $[15] !== side || $[16] !== t5 || $[17] !== t6 || $[18] !== t7) {
+		t8 = /* @__PURE__ */ _jsxs(React.Fragment, { children: [t4, /* @__PURE__ */ _jsx(MotionSlot, {
 			kind: "sheet",
 			children: /* @__PURE__ */ _jsxs(SheetPrimitive.Content, {
 				forceMount: true,
@@ -235,35 +244,37 @@ function SheetContent(t0) {
 				"data-side": side,
 				className: t5,
 				...props,
-				children: [children, t6]
+				onInteractOutside: t6,
+				children: [children, t7]
 			})
 		})] });
-		$[11] = children;
-		$[12] = props;
-		$[13] = side;
-		$[14] = t5;
-		$[15] = t6;
-		$[16] = t7;
+		$[13] = children;
+		$[14] = props;
+		$[15] = side;
+		$[16] = t5;
+		$[17] = t6;
+		$[18] = t7;
+		$[19] = t8;
 	} else {
-		t7 = $[16];
+		t8 = $[19];
 	}
-	let t8;
-	if ($[17] !== props.forceMount || $[18] !== t7) {
-		t8 = /* @__PURE__ */ _jsx(SheetPortal, {
+	let t9;
+	if ($[20] !== props.forceMount || $[21] !== t8) {
+		t9 = /* @__PURE__ */ _jsx(SheetPortal, {
 			forceMount: true,
 			children: /* @__PURE__ */ _jsx(MotionPresence, {
 				scope: "sheet",
 				forceMount: t3,
-				children: t7
+				children: t8
 			})
 		});
-		$[17] = props.forceMount;
-		$[18] = t7;
-		$[19] = t8;
+		$[20] = props.forceMount;
+		$[21] = t8;
+		$[22] = t9;
 	} else {
-		t8 = $[19];
+		t9 = $[22];
 	}
-	return t8;
+	return t9;
 }
 function SheetHeader(t0) {
 	const $ = _c(8);

package/dist/components/sidebar.js

@@ -404,15 +404,22 @@ function MobileSidebar(t0) {
 			const previousBodyStyles = {
 				left: body.style.left,
 				overflow: body.style.overflow,
+				paddingRight: body.style.paddingRight,
 				position: body.style.position,
 				right: body.style.right,
 				top: body.style.top
 			};
+			const clientWidthBeforeLock = document.documentElement.clientWidth;
+			const bodyPaddingRight = Number.parseFloat(getComputedStyle(body).paddingRight) || 0;
 			body.style.position = "fixed";
 			body.style.top = `-${scrollY}px`;
 			body.style.left = "0";
 			body.style.right = "0";
 			body.style.overflow = "hidden";
+			const scrollbarWidth = document.documentElement.clientWidth - clientWidthBeforeLock;
+			if (scrollbarWidth > 0) {
+				body.style.paddingRight = `${bodyPaddingRight + scrollbarWidth}px`;
+			}
 			const restoreTriggerFocus = () => triggerRef.current?.focus({ preventScroll: true });
 			const focusFrame = requestAnimationFrame(() => {
 				const firstFocusable = panelRef.current?.querySelector(FOCUSABLE_SELECTOR);
@@ -425,6 +432,7 @@ function MobileSidebar(t0) {
 				body.style.left = previousBodyStyles.left;
 				body.style.right = previousBodyStyles.right;
 				body.style.overflow = previousBodyStyles.overflow;
+				body.style.paddingRight = previousBodyStyles.paddingRight;
 				window.scrollTo(0, scrollY);
 				restoreTriggerFocus();
 			};
@@ -447,6 +455,9 @@ function MobileSidebar(t0) {
 	let t5;
 	if ($[7] !== setOpenMobile) {
 		t5 = (event) => {
+			if (event.defaultPrevented || !panelRef.current?.contains(event.target)) {
+				return;
+			}
 			if (event.key === "Escape") {
 				event.preventDefault();
 				setOpenMobile(false);

package/dist/components/themed-toaster.d.ts

@@ -1,4 +1,7 @@
-import { type ToasterProps } from "sonner";
-/** Renders shared notification styling using the consumer's resolved theme. */
-declare const ThemedToaster: ({ theme, ...props }: ToasterProps) => import("react").JSX.Element;
+import type { ToasterProps } from "sonner";
+/**
+ * Renders shared notification styling using the consumer's resolved theme, on top of beez-ui's `Toaster`, so its
+ * toasts stay usable from an open `Dialog`, `AlertDialog` or `Sheet`.
+ */
+declare const ThemedToaster: ({ theme, className, ...props }: ToasterProps) => import("react").JSX.Element;
 export { ThemedToaster };

package/dist/components/themed-toaster.js

@@ -1,104 +1,120 @@
 "use client";
 import { c as _c } from "react/compiler-runtime";
 import { MotionSlot } from "../motion/motion-slot.js";
-import { Toaster as Sonner } from "sonner";
+import { cn } from "../lib/utils.js";
+import { Toaster } from "./toaster.js";
 import { useTheme } from "next-themes";
 import { CircleCheck, Info, TriangleAlert, OctagonAlert, Loader } from "lucide-react";
 import { jsx as _jsx } from "react/jsx-runtime";
-/** Renders shared notification styling using the consumer's resolved theme. */
+/**
+* Renders shared notification styling using the consumer's resolved theme, on top of beez-ui's `Toaster`, so its
+* toasts stay usable from an open `Dialog`, `AlertDialog` or `Sheet`.
+*/
 const ThemedToaster = (t0) => {
-	const $ = _c(12);
+	const $ = _c(16);
+	let className;
 	let props;
 	let theme;
 	if ($[0] !== t0) {
-		({theme, ...props} = t0);
+		({theme, className, ...props} = t0);
 		$[0] = t0;
-		$[1] = props;
-		$[2] = theme;
+		$[1] = className;
+		$[2] = props;
+		$[3] = theme;
 	} else {
-		props = $[1];
-		theme = $[2];
+		className = $[1];
+		props = $[2];
+		theme = $[3];
 	}
 	const { resolvedTheme } = useTheme();
 	const activeTheme = theme ?? (resolvedTheme === "dark" ? "dark" : "light");
 	let t1;
-	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
-		t1 = /* @__PURE__ */ _jsx(MotionSlot, {
-			kind: "selection",
-			children: /* @__PURE__ */ _jsx(CircleCheck, { className: "size-4" })
-		});
-		$[3] = t1;
+	if ($[4] !== className) {
+		t1 = cn("toaster group", className);
+		$[4] = className;
+		$[5] = t1;
 	} else {
-		t1 = $[3];
+		t1 = $[5];
 	}
 	let t2;
-	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
 		t2 = /* @__PURE__ */ _jsx(MotionSlot, {
 			kind: "selection",
-			children: /* @__PURE__ */ _jsx(Info, { className: "size-4" })
+			children: /* @__PURE__ */ _jsx(CircleCheck, { className: "size-4" })
 		});
-		$[4] = t2;
+		$[6] = t2;
 	} else {
-		t2 = $[4];
+		t2 = $[6];
 	}
 	let t3;
-	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
 		t3 = /* @__PURE__ */ _jsx(MotionSlot, {
 			kind: "selection",
-			children: /* @__PURE__ */ _jsx(TriangleAlert, { className: "size-4" })
+			children: /* @__PURE__ */ _jsx(Info, { className: "size-4" })
 		});
-		$[5] = t3;
+		$[7] = t3;
 	} else {
-		t3 = $[5];
+		t3 = $[7];
 	}
 	let t4;
+	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ _jsx(MotionSlot, {
+			kind: "selection",
+			children: /* @__PURE__ */ _jsx(TriangleAlert, { className: "size-4" })
+		});
+		$[8] = t4;
+	} else {
+		t4 = $[8];
+	}
 	let t5;
-	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
-		t4 = {
-			success: t1,
-			info: t2,
-			warning: t3,
+	let t6;
+	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = {
+			success: t2,
+			info: t3,
+			warning: t4,
 			error: /* @__PURE__ */ _jsx(MotionSlot, {
 				kind: "selection",
 				children: /* @__PURE__ */ _jsx(OctagonAlert, { className: "size-4" })
 			}),
 			loading: /* @__PURE__ */ _jsx(Loader, { className: "size-4 animate-spin" })
 		};
-		t5 = {
+		t6 = {
 			"--normal-bg": "var(--popover)",
 			"--normal-text": "var(--popover-foreground)",
 			"--normal-border": "var(--border)",
 			"--border-radius": "var(--radius)"
 		};
-		$[6] = t4;
-		$[7] = t5;
+		$[9] = t5;
+		$[10] = t6;
 	} else {
-		t4 = $[6];
-		t5 = $[7];
+		t5 = $[9];
+		t6 = $[10];
 	}
-	let t6;
-	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
-		t6 = { classNames: { toast: "cn-toast" } };
-		$[8] = t6;
+	let t7;
+	if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = { classNames: { toast: "cn-toast" } };
+		$[11] = t7;
 	} else {
-		t6 = $[8];
+		t7 = $[11];
 	}
-	let t7;
-	if ($[9] !== activeTheme || $[10] !== props) {
-		t7 = /* @__PURE__ */ _jsx(Sonner, {
+	let t8;
+	if ($[12] !== activeTheme || $[13] !== props || $[14] !== t1) {
+		t8 = /* @__PURE__ */ _jsx(Toaster, {
 			theme: activeTheme,
-			className: "toaster group",
-			icons: t4,
-			style: t5,
-			toastOptions: t6,
+			className: t1,
+			icons: t5,
+			style: t6,
+			toastOptions: t7,
 			...props
 		});
-		$[9] = activeTheme;
-		$[10] = props;
-		$[11] = t7;
+		$[12] = activeTheme;
+		$[13] = props;
+		$[14] = t1;
+		$[15] = t8;
 	} else {
-		t7 = $[11];
+		t8 = $[15];
 	}
-	return t7;
+	return t8;
 };
 export { ThemedToaster };

package/dist/components/toaster.d.ts

@@ -0,0 +1,12 @@
+import { type ComponentProps } from "react";
+import { Toaster as SonnerToaster } from "sonner";
+/**
+ * Renders Sonner's toaster unchanged in look, but keeps its toasts usable while a modal `Dialog`, `AlertDialog` or
+ * `Sheet` is open: the toast layer takes pointer input even though the modal disables pointer events on the page,
+ * and Sonner's hotkey moves keyboard focus into the toasts past the modal's focus trap (focus returns to the modal
+ * when the focused toast goes away). Accepts every Sonner prop, including `ref`, and keeps the consumer's `className`.
+ * @param props - Sonner's toaster props.
+ * @returns The toast layer.
+ */
+declare const Toaster: ({ className, ...props }: ComponentProps<typeof SonnerToaster>) => import("react").JSX.Element;
+export { Toaster };

package/dist/components/toaster.js

@@ -0,0 +1,62 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+import { cn } from "../lib/utils.js";
+import { letFocusReachToastLayer } from "../lib/toast-layer.js";
+import { useEffect } from "react";
+import { Toaster as SonnerToaster } from "sonner";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+* Renders Sonner's toaster unchanged in look, but keeps its toasts usable while a modal `Dialog`, `AlertDialog` or
+* `Sheet` is open: the toast layer takes pointer input even though the modal disables pointer events on the page,
+* and Sonner's hotkey moves keyboard focus into the toasts past the modal's focus trap (focus returns to the modal
+* when the focused toast goes away). Accepts every Sonner prop, including `ref`, and keeps the consumer's `className`.
+* @param props - Sonner's toaster props.
+* @returns The toast layer.
+*/
+const Toaster = (t0) => {
+	const $ = _c(9);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = [];
+		$[3] = t1;
+	} else {
+		t1 = $[3];
+	}
+	useEffect(_temp, t1);
+	let t2;
+	if ($[4] !== className) {
+		t2 = cn("pointer-events-auto", className);
+		$[4] = className;
+		$[5] = t2;
+	} else {
+		t2 = $[5];
+	}
+	let t3;
+	if ($[6] !== props || $[7] !== t2) {
+		t3 = /* @__PURE__ */ _jsx(SonnerToaster, {
+			className: t2,
+			...props
+		});
+		$[6] = props;
+		$[7] = t2;
+		$[8] = t3;
+	} else {
+		t3 = $[8];
+	}
+	return t3;
+};
+export { Toaster };
+function _temp() {
+	return letFocusReachToastLayer(document);
+}

package/dist/constants/toast.d.ts

@@ -0,0 +1,3 @@
+/** Contract with the toast layer rendered by `ThemedToaster` (Sonner). */
+/** Selector of the list Sonner renders for each toast position, the outermost element of the toast layer. */
+export declare const TOAST_LAYER_SELECTOR = "[data-sonner-toaster]";

package/dist/constants/toast.js

@@ -0,0 +1,3 @@
+/** Contract with the toast layer rendered by `ThemedToaster` (Sonner). */
+/** Selector of the list Sonner renders for each toast position, the outermost element of the toast layer. */
+export const TOAST_LAYER_SELECTOR = "[data-sonner-toaster]";

package/dist/lib/toast-layer.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Tells whether an event target belongs to the toast layer.
+ * @param target - Target of the outside interaction.
+ * @returns `true` when the target is a toast or one of its controls.
+ */
+export declare function isToastLayerTarget(target: EventTarget | null): boolean;
+/**
+ * Lets keyboard focus enter the toast layer while a modal traps focus. Radix's focus trap listens for `focusin` and
+ * `focusout` on the document and pulls focus back into the modal whenever it lands outside, so Sonner's hotkey could
+ * never move focus to a toast's controls. Focus changes that land on a toast stop at the body, after React has run
+ * its own handlers and before the document-level trap sees them; every other focus change still reaches the trap.
+ * Because the trap never sees focus leave, it cannot pull it back either: when the focused toast control is removed
+ * (an action or close button dismisses its toast), focus returns to the element it came from instead of the body.
+ * @param ownerDocument - Document whose body hosts the app and the modal portals.
+ * @returns Removes the listeners.
+ */
+export declare function letFocusReachToastLayer(ownerDocument: Document): () => void;
+/**
+ * Wraps a modal's `onInteractOutside` so presses on toasts never dismiss it. The consumer's handler still runs first
+ * and can keep preventing dismissal for its own reasons.
+ * @param handler - The consumer's `onInteractOutside`, if any.
+ * @returns The handler to give the Radix content.
+ */
+export declare function keepOpenOnToastInteraction<OutsideEvent extends Event>(handler?: (event: OutsideEvent) => void): (event: OutsideEvent) => void;