beez-ui 2.6.1 → 2.7.0

package/CHANGELOG.md

@@ -4,6 +4,35 @@ Todos los cambios relevantes de beez-ui se documentan en este archivo con el for
 
 ## [Unreleased]
 
+## [2.7.0] - 2026-10-16
+
+### Added
+
+- `beez-ui/motion-tokens` suma los presets de Arc que faltaban: `MOTION_TIMING.instant`, `MOTION_TIMING.standard`, `MOTION_TIMING.considered`, `MOTION_EASE_EXIT`, `MOTION_EASE_STANDARD`, `MOTION_EXIT_SCALE`, `MOTION_TOOLTIP_SCALE` y `MOTION_DIALOG_EXIT_DISTANCE`.
+
+### Changed
+
+- Los tokens de `beez-ui/motion-tokens` toman los valores de los presets de Arc y conservan sus nombres: los springs pasan a `snappy`, `smooth` o `morph` (expresados con `visualDuration` y `bounce` en lugar de `stiffness`, `damping` y `mass`), las duraciones y curvas usan las de Arc y la presión baja a 0.97.
+- `Dialog` y `AlertDialog` entran como el diálogo de Arc: el panel sube 8 px y crece desde 0.96 con un resorte suave mientras aparece, y sale rápido (0.16 s), en lugar de desplegarse desde el centro. La transformación y la opacidad que el panel recibe por `className` o `style` se mantienen durante toda la animación, y reabrirlo mientras sale lo devuelve desde donde está.
+- `Input`, `Textarea`, `InputGroup` y `SelectTrigger` ya no tiemblan al pasar a `aria-invalid="true"`: el error se indica con el color y el mensaje, sin mover el campo.
+- Las opciones de `Select`, `Alert`, `FormMessage` y el ícono de `AnimatedThemeToggler` aparecen con un fundido y una escala breves, sin desenfoque; las opciones del `Select` entran todas juntas, sin escalonarse.
+- El ancho del `Sidebar` cambia con el resorte `smooth` de Arc (0.4 s, sin rebote), más suave que antes.
+
+### Deprecated
+
+- `MOTION_TIMING.centerMorph`, `MOTION_TIMING.centerMorphFold`, `MOTION_EASE_UNFOLD` y `MOTION_CENTER_MORPH_FOLDED_PERCENT`: los diálogos ya no se despliegan desde el centro. Siguen exportados con su valor.
+- `MOTION_TIMING.shake` y `MOTION_INVALID_SHAKE_PX`: los campos inválidos ya no tiemblan. Siguen exportados con su valor.
+
+### Fixed
+
+- Al moverse con el teclado mientras un `Select` o un `DropdownMenu` todavía se está abriendo, el resaltado se desliza hasta el tamaño y la posición finales de la opción y ya no salta al terminar.
+
+## [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

package/README.md

@@ -71,47 +71,67 @@ Los `Sheet` superiores e inferiores limitan su altura al viewport dinámico (`10
 
 ## Movimiento
 
-Las nuevas animaciones usan la dependencia `motion`: `animate` controla la
-reproducción, `hover` y `press` los gestos, y `AnimatePresence` / `usePresence`
-retienen los overlays durante su salida. Los presets y tiempos viven en
-`src/motion/`. No se usan keyframes CSS para estas animaciones.
+El movimiento sigue a [Arc](https://uiarc.dev): explica causa y efecto (qué se abrió,
+qué cambió, de dónde vino) y no decora. Si una animación no explica nada, no está.
+Las animaciones usan la dependencia `motion`: `animate` controla la reproducción,
+`hover` y `press` los gestos, y `AnimatePresence` / `usePresence` retienen los
+overlays durante su salida. Los presets y tiempos viven en `src/motion/`. No se usan
+keyframes CSS para estas animaciones.
 
 `MotionSlot` anima el nodo original del primitive mediante refs compuestos,
-sin agregar wrappers al DOM ni reemplazar sus handlers. Las curvas y springs
-siguen los tokens de [beui motion](https://beui.dev/components/motion):
-
-- `Button` usa la presión de Arc: se comprime a 0.97 con un spring rápido (un poco más en
+sin agregar wrappers al DOM ni reemplazar sus handlers. Los tokens exportados en
+`beez-ui/motion-tokens` toman los valores de los presets de Arc
+(`components/arc/lib/motion-tokens.ts`):
+
+- Springs: `snappy` (0.26 s, rebote 0.12) para presiones, indicadores chicos y cambios de
+  ícono (`SPRING_PRESS`, `SPRING_POP`, `SPRING_CHEVRON`, `SPRING_HIGHLIGHT`, `SPRING_TOOLTIP`);
+  `smooth` (0.4 s, sin rebote) para paneles y todo lo que informa un estado
+  (`SPRING_PANEL`, `SPRING_THUMB`); `morph` (0.42 s, rebote 0.16) para resaltados compartidos
+  (`SPRING_LAYOUT`, `SPRING_TABS`).
+- Duraciones: `instant` 0.12 s, `fast` 0.16 s, `exit` 0.18 s, `enter`/`standard` 0.24 s y
+  `considered` 0.48 s. Las salidas son más cortas que las entradas.
+- Curvas: `MOTION_EASE` (entrada), `MOTION_EASE_EXIT`, `MOTION_EASE_STANDARD` y
+  `MOTION_EASE_IN_OUT`.
+
+Los nombres de los tokens se mantienen entre versiones; los del despliegue desde el centro
+y del temblor de campos inválidos quedan deprecados y conservan su valor.
+
+- `Button` usa la presión de Arc: se comprime a 0.97 con el spring `snappy` (un poco más en
   botones de solo ícono y menos en los anchos), sin escalar los disparadores de menús; su
   texto cambia de ancho con un spring. Los ítems de `Sidebar` y `Tabs` se comprimen a 0.98.
 - `Checkbox` y `RadioGroup` se comprimen a 0.92. La marca del checkbox aparece
-  con pop y trazo (`pathLength`) y sale con blur; el punto del radio aparece con spring.
-- El thumb de `Switch` viaja con un spring pesado y se aplasta mientras se presiona.
-- `Input`, `Textarea`, `InputGroup` y `SelectTrigger` tiemblan al pasar a
-  `aria-invalid="true"`; `FormMessage` entra con blur.
-- `Tooltip` entra con blur, escala y desplazamiento desde el trigger.
-  `Popover`, `HoverCard`, `DropdownMenu` y `Select` escalan desde 0.96 y se revelan
-  con un clip desde la esquina más cercana al trigger.
-- `Dialog` y `AlertDialog` se despliegan desde su centro y se pliegan al cerrar; `Sheet` entra desde su borde con spring
-  y sale con la curva de cajón (0.24 s), sin demorar la siguiente interacción.
+  con pop y trazo (`pathLength`); el punto del radio aparece con spring.
+- El thumb de `Switch` viaja con el spring `smooth`, sin rebote, y se aplasta mientras se presiona.
+- `Input`, `Textarea`, `InputGroup` y `SelectTrigger` no se mueven al pasar a
+  `aria-invalid="true"`: el error se indica con el color y el mensaje. `FormMessage` y
+  `Alert` aparecen con un fundido y una escala breves (desde 0.98), sin desenfoque.
+- `Tooltip` sube 3 px desde 0.97 mientras aparece y sale en el lugar, sin desenfoque.
+  `Popover` y `HoverCard` se acercan desde su trigger con escala y fundido; `DropdownMenu`
+  y `Select` escalan desde 0.96 y se revelan con un clip desde la esquina más cercana al trigger.
+- `Dialog` y `AlertDialog` entran como el diálogo de Arc: el fondo se oscurece en 0.24 s y el
+  panel sube 8 px y crece desde 0.96 con el spring `smooth` mientras aparece en 0.16 s; al
+  cerrar baja 4 px hasta 0.98 y se desvanece en 0.16 s, y una reapertura parte de donde
+  está. `Sheet` entra desde su borde con spring y sale con la curva de cajón (0.24 s), sin
+  demorar la siguiente interacción.
 - `GlideSlot` desliza el indicador activo entre ítems como un `layoutId` compartido:
   la pestaña activa de `Tabs` (fondo o subrayado), la
   página actual de `PaginationContent`, y al navegar con teclado el ítem resaltado de
   `DropdownMenu` y `Select` y la sugerencia activa de `FilterQueryBar`. Con el puntero,
   esos resaltados lo siguen al instante: el propio puntero ya marca la posición.
-- Las superficies flotantes se revelan con un clip que deja 24 px libres fuera de la
+- Las superficies que se revelan con clip dejan 24 px libres fuera de la
   caja, así su borde (`ring`) y su sombra se ven desde el primer frame. Una copia
   transitoria viaja entre ítems y se elimina al llegar, devolviendo el estilo al ítem.
 - El chevron de `SelectTrigger` gira 180° al abrir y los chevrons de `DataTable`
   (grupos y columnas) giran en lugar de cambiar de ícono; CSS define el ángulo final.
-- Las opciones del `Select` entran escalonadas con blur (las primeras 10; el resto
-  solo se desvanece) y los checks de ítems de `Select` y `DropdownMenu` aparecen con pop.
-- `Sidebar` sigue a [beui animated sidebar](https://beui.dev/components/motion/animated-sidebar):
-  el ancho cambia con un spring entre el panel y el riel de íconos, las etiquetas se
-  desvanecen al colapsar, una píldora compartida sigue al ítem activo y al hovereado, los
-  submenús se despliegan escalonados y en pantallas chicas se abre como hoja con foco atrapado.
-- El ícono de `AnimatedThemeToggler` cambia con blur y escala; el botón de cierre de
-  `Dialog` aparece con un pop demorado.
-- El contenido de `Tabs` entra con un desplazamiento de 4 px y `Alert` entra con blur.
+- Las opciones del `Select` entran todas juntas con un fundido y una escala breves, sin
+  escalonarse ni desenfocarse, y los checks de ítems de `Select` y `DropdownMenu` aparecen con pop.
+- El ancho de `Sidebar` cambia con el spring `smooth` entre el panel y el riel de íconos, las
+  etiquetas se desvanecen al colapsar, una píldora compartida sigue al ítem activo y al
+  hovereado, los submenús se despliegan escalonados y en pantallas chicas se abre como hoja
+  con foco atrapado.
+- El ícono de `AnimatedThemeToggler` crece desde 0.6 con el spring `snappy` mientras aparece,
+  sin desenfoque; el botón de cierre de `Dialog` aparece con un pop demorado.
+- El contenido de `Tabs` entra con un desplazamiento de 4 px.
   Cards y enlaces responden al hover; el avatar bajo el puntero de un `AvatarGroup` se
   eleva. Un brillo recorre el `Skeleton` desde su `::after` con reproducción nativa,
   sin trabajo por frame en JavaScript.
@@ -187,7 +207,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/alert-dialog.d.ts

@@ -1,7 +1,7 @@
 /**
  * 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.
+ * overlay, raised panel, title and description type and dialog transition as `Dialog`, so both read as one family. It
+ * keeps beez-ui's media slot and Arc `Button` actions.
  */
 import * as React from "react";
 import { AlertDialog as AlertDialogPrimitive } from "radix-ui";

package/dist/components/alert-dialog.js

@@ -2,8 +2,8 @@
 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.
+* overlay, raised panel, title and description type and dialog transition as `Dialog`, so both read as one family. It
+* keeps beez-ui's media slot and Arc `Button` actions.
 */
 import * as React from "react";
 import { AlertDialog as AlertDialogPrimitive } from "radix-ui";
@@ -180,7 +180,7 @@ function AlertDialogContent(t0) {
 	let t5;
 	if ($[7] !== props || $[8] !== size || $[9] !== t4) {
 		t5 = /* @__PURE__ */ _jsxs(React.Fragment, { children: [t3, /* @__PURE__ */ _jsx(MotionSlot, {
-			kind: "center-morph",
+			kind: "dialog",
 			children: /* @__PURE__ */ _jsx(AlertDialogPrimitive.Content, {
 				forceMount: true,
 				"data-slot": "alert-dialog-content",

package/dist/components/dialog-surface.js

@@ -4,7 +4,7 @@ import { c as _c } from "react/compiler-runtime";
 * Arc's Dialog surface (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md), shared by `Dialog` and
 * `AlertDialog`: the dimmed, blurred overlay, the raised panel with Arc's surface radius, border and floating shadow,
 * the title and description type, the bordered close button and the text swap that animates a title or description
-* changed while the dialog is open. Internal: the entrance stays beez-ui's center morph, not Arc's rise.
+* changed while the dialog is open. Internal: the panel's entrance and exit are Arc's, played by `MotionSlot`.
 */
 import { AnimatePresence, motion, useIsPresent } from "motion/react";
 import { DIALOG_TEXT_SWAP_OFFSET_EM } from "../constants/dialog.js";

package/dist/components/dialog.d.ts

@@ -1,8 +1,9 @@
 /**
  * Arc's Dialog (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md): a focused surface for decisions that need
  * attention, on Arc's overlay, raised panel, title and description type and bordered close button, with Arc's swap of
- * a title or description changed while open. It keeps beez-ui's composable parts, the center morph entrance and the
- * viewport close button placement instead of Arc's single `title`/`description` content and rise entrance.
+ * a title or description changed while open, and Arc's dialog transition: the panel rises and scales in on the smooth
+ * spring and leaves quickly. It keeps beez-ui's composable parts and the viewport close button placement instead of
+ * Arc's single `title`/`description` content.
  */
 import * as React from "react";
 import { Dialog as DialogPrimitive } from "radix-ui";
@@ -14,8 +15,8 @@ declare function DialogOverlay({ className, ...props }: React.ComponentProps<typ
 /** Where the dialog close button sits: inside the panel or pinned to the viewport corner. */
 type DialogCloseButtonPlacement = "content" | "viewport";
 /**
- * Renders compact dialog content with viewport-safe scrolling. The panel unfolds from its
- * exact center toward every edge and folds back the same way when it closes.
+ * Renders compact dialog content with viewport-safe scrolling. The panel rises 8px and scales
+ * from 0.96 on Arc's smooth spring while it fades in, and leaves with a short drop and fade.
  * @param props - Primitive properties and optional consumer overrides.
  * @param props.showCloseButton - Whether the dialog renders its own close button.
  * @param props.closeButtonPlacement - `viewport` pins the close button to the viewport corner

package/dist/components/dialog.js

@@ -3,8 +3,9 @@ import { c as _c } from "react/compiler-runtime";
 /**
 * Arc's Dialog (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md): a focused surface for decisions that need
 * attention, on Arc's overlay, raised panel, title and description type and bordered close button, with Arc's swap of
-* a title or description changed while open. It keeps beez-ui's composable parts, the center morph entrance and the
-* viewport close button placement instead of Arc's single `title`/`description` content and rise entrance.
+* a title or description changed while open, and Arc's dialog transition: the panel rises and scales in on the smooth
+* spring and leaves quickly. It keeps beez-ui's composable parts and the viewport close button placement instead of
+* Arc's single `title`/`description` content.
 */
 import * as React from "react";
 import { Dialog as DialogPrimitive } from "radix-ui";
@@ -165,7 +166,7 @@ function DialogOverlay(t0) {
 }
 /**
 * Renders a close button pinned to the viewport corner. It stays hidden while the panel
-* unfolds, because the entrance clip would otherwise cut it with the panel, and
+* enters, because the entrance transform would otherwise carry it along with the panel, and
 * fades in once the panel settles. It hides at once when the dialog starts closing.
 * While hidden it is also `visibility: hidden`, so the dialog's initial focus and the
 * keyboard can never land on a control that cannot be seen.
@@ -202,8 +203,8 @@ function DialogViewportCloseButton() {
 	return t1;
 }
 /**
-* Renders compact dialog content with viewport-safe scrolling. The panel unfolds from its
-* exact center toward every edge and folds back the same way when it closes.
+* Renders compact dialog content with viewport-safe scrolling. The panel rises 8px and scales
+* from 0.96 on Arc's smooth spring while it fades in, and leaves with a short drop and fade.
 * @param props - Primitive properties and optional consumer overrides.
 * @param props.showCloseButton - Whether the dialog renders its own close button.
 * @param props.closeButtonPlacement - `viewport` pins the close button to the viewport corner
@@ -300,7 +301,7 @@ function DialogContent(t0) {
 	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",
+			kind: "dialog",
 			children: /* @__PURE__ */ _jsxs(DialogPrimitive.Content, {
 				forceMount: true,
 				"data-slot": "dialog-content",

package/dist/components/sidebar.js

@@ -20,7 +20,7 @@ import { SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME } from "../constants/sideba
 import { cn } from "../lib/utils.js";
 import { MotionSlot } from "../motion/motion-slot.js";
 import { SharedLayoutBg } from "../motion/shared-layout-bg.js";
-import { MOTION_EASE, MOTION_EASE_DRAWER, MOTION_LIST_ITEM_DISTANCE, MOTION_TIMING, SPRING_LAYOUT } from "../motion/tokens.js";
+import { MOTION_EASE, MOTION_EASE_DRAWER, MOTION_LIST_ITEM_DISTANCE, MOTION_TIMING, SPRING_LAYOUT, SPRING_PANEL } from "../motion/tokens.js";
 import { Link } from "./link.js";
 import { SidebarPanelContext } from "./sidebar-panel-context.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
@@ -42,15 +42,10 @@ const PANEL_TRANSITION = {
 	ease: MOTION_EASE_DRAWER
 };
 /**
-* The desktop rail settles at a hard zero-width boundary. Keep the spring critically damped so it
-* cannot overshoot, pause against that boundary, and then snap back during the final frame.
+* The desktop rail settles at a hard zero-width boundary, and its width reports the panel state. Arc's smooth spring
+* is critically damped, so it cannot overshoot, pause against that boundary and snap back during the final frame.
 */
-const SIDEBAR_MORPH_TRANSITION = {
-	type: "spring",
-	stiffness: 380,
-	damping: 35,
-	mass: .75
-};
+const SIDEBAR_MORPH_TRANSITION = SPRING_PANEL;
 const LABEL_ENTER_TRANSITION = {
 	duration: MOTION_TIMING.message,
 	delay: .08,

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

@@ -1,8 +1,7 @@
-import { type ToasterProps } from "sonner";
+import type { ToasterProps } from "sonner";
 /**
- * Renders shared notification styling using the consumer's resolved theme. Toasts take pointer input even while a
- * modal overlay (which disables pointer events on the page) is open, and Sonner's hotkey moves keyboard focus into
- * them past the modal's focus trap, so their actions stay usable from a dialog.
+ * 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

@@ -2,19 +2,16 @@
 import { c as _c } from "react/compiler-runtime";
 import { MotionSlot } from "../motion/motion-slot.js";
 import { cn } from "../lib/utils.js";
-import { letFocusReachToastLayer } from "../lib/toast-layer.js";
-import { useEffect } from "react";
-import { Toaster as Sonner } from "sonner";
+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. Toasts take pointer input even while a
-* modal overlay (which disables pointer events on the page) is open, and Sonner's hotkey moves keyboard focus into
-* them past the modal's focus trap, so their actions stay usable from a dialog.
+* 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(17);
+	const $ = _c(16);
 	let className;
 	let props;
 	let theme;
@@ -32,17 +29,19 @@ const ThemedToaster = (t0) => {
 	const { resolvedTheme } = useTheme();
 	const activeTheme = theme ?? (resolvedTheme === "dark" ? "dark" : "light");
 	let t1;
-	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
-		t1 = [];
-		$[4] = t1;
+	if ($[4] !== className) {
+		t1 = cn("toaster group", className);
+		$[4] = className;
+		$[5] = t1;
 	} else {
-		t1 = $[4];
+		t1 = $[5];
 	}
-	useEffect(_temp, t1);
 	let t2;
-	if ($[5] !== className) {
-		t2 = cn("toaster group pointer-events-auto", className);
-		$[5] = className;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ _jsx(MotionSlot, {
+			kind: "selection",
+			children: /* @__PURE__ */ _jsx(CircleCheck, { className: "size-4" })
+		});
 		$[6] = t2;
 	} else {
 		t2 = $[6];
@@ -51,7 +50,7 @@ const ThemedToaster = (t0) => {
 	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
 		t3 = /* @__PURE__ */ _jsx(MotionSlot, {
 			kind: "selection",
-			children: /* @__PURE__ */ _jsx(CircleCheck, { className: "size-4" })
+			children: /* @__PURE__ */ _jsx(Info, { className: "size-4" })
 		});
 		$[7] = t3;
 	} else {
@@ -61,74 +60,61 @@ const ThemedToaster = (t0) => {
 	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
 		t4 = /* @__PURE__ */ _jsx(MotionSlot, {
 			kind: "selection",
-			children: /* @__PURE__ */ _jsx(Info, { className: "size-4" })
+			children: /* @__PURE__ */ _jsx(TriangleAlert, { className: "size-4" })
 		});
 		$[8] = t4;
 	} else {
 		t4 = $[8];
 	}
 	let t5;
-	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
-		t5 = /* @__PURE__ */ _jsx(MotionSlot, {
-			kind: "selection",
-			children: /* @__PURE__ */ _jsx(TriangleAlert, { className: "size-4" })
-		});
-		$[9] = t5;
-	} else {
-		t5 = $[9];
-	}
 	let t6;
-	let t7;
-	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
-		t6 = {
-			success: t3,
-			info: t4,
-			warning: t5,
+	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" })
 		};
-		t7 = {
+		t6 = {
 			"--normal-bg": "var(--popover)",
 			"--normal-text": "var(--popover-foreground)",
 			"--normal-border": "var(--border)",
 			"--border-radius": "var(--radius)"
 		};
+		$[9] = t5;
 		$[10] = t6;
-		$[11] = t7;
 	} else {
+		t5 = $[9];
 		t6 = $[10];
-		t7 = $[11];
 	}
-	let t8;
-	if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
-		t8 = { classNames: { toast: "cn-toast" } };
-		$[12] = t8;
+	let t7;
+	if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = { classNames: { toast: "cn-toast" } };
+		$[11] = t7;
 	} else {
-		t8 = $[12];
+		t7 = $[11];
 	}
-	let t9;
-	if ($[13] !== activeTheme || $[14] !== props || $[15] !== t2) {
-		t9 = /* @__PURE__ */ _jsx(Sonner, {
+	let t8;
+	if ($[12] !== activeTheme || $[13] !== props || $[14] !== t1) {
+		t8 = /* @__PURE__ */ _jsx(Toaster, {
 			theme: activeTheme,
-			className: t2,
-			icons: t6,
-			style: t7,
-			toastOptions: t8,
+			className: t1,
+			icons: t5,
+			style: t6,
+			toastOptions: t7,
 			...props
 		});
-		$[13] = activeTheme;
-		$[14] = props;
-		$[15] = t2;
-		$[16] = t9;
+		$[12] = activeTheme;
+		$[13] = props;
+		$[14] = t1;
+		$[15] = t8;
 	} else {
-		t9 = $[16];
+		t8 = $[15];
 	}
-	return t9;
+	return t8;
 };
 export { ThemedToaster };
-function _temp() {
-	return letFocusReachToastLayer(document);
-}

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/motion/arc-tokens.d.ts

@@ -8,11 +8,14 @@ export declare const ARC_DURATION: {
     readonly fast: 0.16;
     readonly exit: 0.18;
     readonly standard: 0.24;
+    readonly considered: 0.48;
 };
-/** Cubic-bezier curves for entrances and color or opacity tweens. */
+/** Cubic-bezier curves: entrances, exits, color or opacity tweens, and moves of elements already on screen. */
 export declare const ARC_EASE: {
     readonly enter: readonly [0.16, 1, 0.3, 1];
+    readonly exit: readonly [0.7, 0, 0.84, 0];
     readonly standard: readonly [0.22, 1, 0.36, 1];
+    readonly inOut: readonly [0.65, 0, 0.35, 1];
 };
 /** Presses, toggles and small indicators: settles fast with a hint of life. */
 export declare const ARC_SPRING_SNAPPY: {
@@ -35,6 +38,7 @@ export declare const ARC_SPRING_MORPH: {
 /** Stagger steps in seconds; keep a whole staggered entrance under roughly 0.4s. */
 export declare const ARC_STAGGER: {
     readonly char: 0.016;
+    readonly item: 0.035;
 };
 /** Blur radii in pixels for brief content crossfades. */
 export declare const ARC_BLUR: {

package/dist/motion/arc-tokens.js

@@ -7,9 +7,10 @@ export const ARC_DURATION = {
 	instant: .12,
 	fast: .16,
 	exit: .18,
-	standard: .24
+	standard: .24,
+	considered: .48
 };
-/** Cubic-bezier curves for entrances and color or opacity tweens. */
+/** Cubic-bezier curves: entrances, exits, color or opacity tweens, and moves of elements already on screen. */
 export const ARC_EASE = {
 	enter: [
 		.16,
@@ -17,11 +18,23 @@ export const ARC_EASE = {
 		.3,
 		1
 	],
+	exit: [
+		.7,
+		0,
+		.84,
+		0
+	],
 	standard: [
 		.22,
 		1,
 		.36,
 		1
+	],
+	inOut: [
+		.65,
+		0,
+		.35,
+		1
 	]
 };
 /** Presses, toggles and small indicators: settles fast with a hint of life. */
@@ -43,7 +56,10 @@ export const ARC_SPRING_MORPH = {
 	bounce: .16
 };
 /** Stagger steps in seconds; keep a whole staggered entrance under roughly 0.4s. */
-export const ARC_STAGGER = { char: .016 };
+export const ARC_STAGGER = {
+	char: .016,
+	item: .035
+};
 /** Blur radii in pixels for brief content crossfades. */
 export const ARC_BLUR = {
 	subtle: 2,

package/dist/motion/glide-indicator.d.ts

@@ -55,9 +55,8 @@ export declare const GLIDE_PRESETS: {
         surface: () => "background";
         spring: {
             readonly type: "spring";
-            readonly stiffness: 700;
-            readonly damping: 45;
-            readonly mass: 0.5;
+            readonly visualDuration: 0.26;
+            readonly bounce: 0.12;
         };
         instantOnPointer: true;
     };
@@ -69,9 +68,8 @@ export declare const GLIDE_PRESETS: {
         surface: () => "background";
         spring: {
             readonly type: "spring";
-            readonly stiffness: 700;
-            readonly damping: 45;
-            readonly mass: 0.5;
+            readonly visualDuration: 0.26;
+            readonly bounce: 0.12;
         };
         instantOnPointer: true;
     };