beez-ui 0.5.2 → 0.5.4

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Cambios
 
+## 0.5.4 - 2026-09-09
+
+- Actualiza el paquete a la versión 0.5.4.
+
+## 0.5.3 - 2026-09-09
+
+- Actualiza el paquete a la versión 0.5.3.
+
 ## 0.5.2 - 2026-09-09
 
 - Actualiza el paquete a la versión 0.5.2.

package/README.md

@@ -2,13 +2,44 @@
 
 Biblioteca de componentes React reutilizables, con adaptadores opcionales por framework y tema compartido. Reúne los componentes de LaTribu y las funcionalidades reutilizables de agenda-mensual.
 
-## Consumo
+## Storybook
+
+```bash
+pnpm storybook
+```
+
+Abre `http://localhost:6006` para explorar los componentes con controles de texto,
+variantes, tamaños, estados y comportamiento. El selector de la barra permite
+probar el tema claro, oscuro o del sistema. Las stories de componentes compuestos
+incluyen sus piezas en ejemplos completos; los campos editables y selectores
+sincronizan sus interacciones con Controls. `BeezUIProvider` configura el preview
+y no forma parte del catálogo. Las notificaciones se exploran en `ThemedToaster`,
+sin duplicar una story de `Toaster`; `WhatsappIcon` está en la sección `Icons`.
+
+```bash
+pnpm build-storybook       # Genera storybook-static para servirlo o publicarlo
+pnpm typecheck:stories    # Comprueba stories y configuración con TypeScript
+pnpm test:storybook       # Build y navegación/interacciones en Chromium y WebKit
+```
+
+El catálogo consume los exports públicos y el CSS compilado de la librería. Los
+scripts compilan `beez-ui` antes de arrancar; si editás sus fuentes con Storybook
+abierto, ejecutá `pnpm build` para actualizar el paquete que muestra el preview.
+Los cambios en las stories se actualizan durante el desarrollo. Storybook y sus
+addons son dependencias de desarrollo y no se incluyen en el paquete publicado.
+
+Configuración basada en [React con Vite](https://storybook.js.org/docs/get-started/frameworks/react-vite)
+y [Controls](https://storybook.js.org/docs/essentials/controls).
+
+## Uso del paquete
 
 ```tsx
 import { Button, Avatar, AvatarImage, DataTable, Calendar } from "beez-ui";
 ```
 
-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.
+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.
+
+La utilidad `cn`, también exportada desde `beez-ui`, usa el paquete `cn` para combinar clases condicionales y resolver conflictos de Tailwind.
 
 ```css
 @import "beez-ui/styles.css";
@@ -24,7 +55,39 @@ Los componentes usan por defecto los espaciados compactos de Agenda: `Select` mi
 
 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.
 
-## Providers de UI
+## 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.
+
+`MotionSlot` anima el nodo original del primitive mediante refs compuestos,
+sin agregar wrappers al DOM ni reemplazar sus handlers. Las pulsaciones reducen
+la escala a 0.98; cards y enlaces responden al hover; campos e indicadores
+responden al foco y la selección. Menús, popovers, diálogos y sheets usan entradas
+cortas y salidas de 120 ms. El skeleton pulsa con Motion. Las animaciones
+especializadas existentes de Embla, Sonner y rough-notation se conservan.
+
+El contenido que está saliendo deja de ser interactivo y accesible de inmediato.
+Cada familia de overlays tiene un contexto de visibilidad independiente para
+soportar composiciones anidadas; los portales sin nodo visible no bloquean el
+cierre del padre. `Select` conserva su desmontaje nativo y usa Motion en la entrada.
+La elección explícita de `forceMount` permanece bajo control del consumidor.
+
+Se respeta `prefers-reduced-motion`: las nuevas animaciones se cancelan y se
+restauran los estilos; las anotaciones se dibujan sin animación y el texto aparece
+completo, incluidas todas las palabras de una secuencia. Los controles del carrusel
+avanzan directamente. El CSS solo aporta el fallback de movimiento reducido para
+los efectos heredados. `BeezUIProvider` configura `MotionConfig` con
+`reducedMotion="user"`. El primer render conserva el contrato de SSR.
+
+El selector aplica el tema inmediatamente y anima su icono con Motion; no depende
+de View Transitions nativas ni de una animación para completar el cambio. Los estilos temporales se liberan al terminar
+la reproducción. Las stories permiten probar los gestos y estados reales; el
+selector de tema de la story y la barra de Storybook se mantienen sincronizados.
+
+## Providers de UI
 
 Elegir un único `BeezUIProvider` según el framework. Los componentes y `useTheme` siempre se importan desde `beez-ui`.
 

package/dist/components/alert-dialog.js

@@ -2,11 +2,13 @@
 import { c as _c } from "react/compiler-runtime";
 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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function AlertDialog(t0) {
-	const $ = _c(4);
+	const $ = _c(9);
 	let props;
 	if ($[0] !== t0) {
 		({...props} = t0);
@@ -15,18 +17,36 @@ function AlertDialog(t0) {
 	} else {
 		props = $[1];
 	}
+	const [motionOpen, setMotionOpen] = useMotionOpenState(props);
 	let t1;
-	if ($[2] !== props) {
+	if ($[2] !== motionOpen || $[3] !== props || $[4] !== setMotionOpen) {
 		t1 = /* @__PURE__ */ _jsx(AlertDialogPrimitive.Root, {
 			"data-slot": "alert-dialog",
-			...props
+			...props,
+			open: motionOpen,
+			onOpenChange: setMotionOpen
 		});
-		$[2] = props;
-		$[3] = t1;
+		$[2] = motionOpen;
+		$[3] = props;
+		$[4] = setMotionOpen;
+		$[5] = t1;
 	} else {
-		t1 = $[3];
+		t1 = $[5];
 	}
-	return t1;
+	let t2;
+	if ($[6] !== motionOpen || $[7] !== t1) {
+		t2 = /* @__PURE__ */ _jsx(MotionOpenProvider, {
+			scope: "alert-dialog",
+			open: motionOpen,
+			children: t1
+		});
+		$[6] = motionOpen;
+		$[7] = t1;
+		$[8] = t2;
+	} else {
+		t2 = $[8];
+	}
+	return t2;
 }
 function AlertDialogTrigger(t0) {
 	const $ = _c(4);
@@ -89,7 +109,7 @@ function AlertDialogOverlay(t0) {
 	}
 	let t1;
 	if ($[3] !== className) {
-		t1 = cn("fixed inset-0 z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0", className);
+		t1 = cn("fixed inset-0 z-50 bg-black/10 supports-backdrop-filter:backdrop-blur-xs ", className);
 		$[3] = className;
 		$[4] = t1;
 	} else {
@@ -116,7 +136,7 @@ function AlertDialogOverlay(t0) {
 * @returns The styled primitive with its original interaction contract.
 */
 function AlertDialogContent(t0) {
-	const $ = _c(11);
+	const $ = _c(14);
 	let className;
 	let props;
 	let t1;
@@ -132,37 +152,61 @@ function AlertDialogContent(t0) {
 		t1 = $[3];
 	}
 	const size = t1 === undefined ? "default" : t1;
-	let t2;
+	const t2 = props.forceMount;
+	let t3;
 	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
-		t2 = /* @__PURE__ */ _jsx(AlertDialogOverlay, {});
-		$[4] = t2;
+		t3 = /* @__PURE__ */ _jsx(MotionSlot, {
+			kind: "overlay",
+			children: /* @__PURE__ */ _jsx(AlertDialogOverlay, { forceMount: true })
+		});
+		$[4] = t3;
 	} else {
-		t2 = $[4];
+		t3 = $[4];
 	}
-	let t3;
+	let t4;
 	if ($[5] !== className) {
-		t3 = 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 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", 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);
 		$[5] = className;
-		$[6] = t3;
+		$[6] = t4;
 	} else {
-		t3 = $[6];
+		t4 = $[6];
 	}
-	let t4;
-	if ($[7] !== props || $[8] !== size || $[9] !== t3) {
-		t4 = /* @__PURE__ */ _jsxs(AlertDialogPortal, { children: [t2, /* @__PURE__ */ _jsx(AlertDialogPrimitive.Content, {
-			"data-slot": "alert-dialog-content",
-			"data-size": size,
-			className: t3,
-			...props
+	let t5;
+	if ($[7] !== props || $[8] !== size || $[9] !== t4) {
+		t5 = /* @__PURE__ */ _jsxs(React.Fragment, { children: [t3, /* @__PURE__ */ _jsx(MotionSlot, {
+			kind: "dialog",
+			children: /* @__PURE__ */ _jsx(AlertDialogPrimitive.Content, {
+				forceMount: true,
+				"data-slot": "alert-dialog-content",
+				"data-size": size,
+				className: t4,
+				...props
+			})
 		})] });
 		$[7] = props;
 		$[8] = size;
-		$[9] = t3;
-		$[10] = t4;
+		$[9] = t4;
+		$[10] = t5;
+	} else {
+		t5 = $[10];
+	}
+	let t6;
+	if ($[11] !== props.forceMount || $[12] !== t5) {
+		t6 = /* @__PURE__ */ _jsx(AlertDialogPortal, {
+			forceMount: true,
+			children: /* @__PURE__ */ _jsx(MotionPresence, {
+				scope: "alert-dialog",
+				forceMount: t2,
+				children: t5
+			})
+		});
+		$[11] = props.forceMount;
+		$[12] = t5;
+		$[13] = t6;
 	} else {
-		t4 = $[10];
+		t6 = $[13];
 	}
-	return t4;
+	return t6;
 }
 /**
 * Aligns confirmation headings and media with compact spacing.

package/dist/components/alert.js

@@ -2,6 +2,7 @@
 import { c as _c } from "react/compiler-runtime";
 import * as React from "react";
 import { cva } from "class-variance-authority";
+import { MotionSlot } from "../motion/motion-slot.js";
 import { cn } from "../lib/utils.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const alertVariants = cva("group/alert relative grid w-full gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4", {
@@ -38,11 +39,14 @@ function Alert(t0) {
 	}
 	let t2;
 	if ($[7] !== props || $[8] !== t1) {
-		t2 = /* @__PURE__ */ _jsx("div", {
-			"data-slot": "alert",
-			role: "alert",
-			className: t1,
-			...props
+		t2 = /* @__PURE__ */ _jsx(MotionSlot, {
+			kind: "fade",
+			children: /* @__PURE__ */ _jsx("div", {
+				"data-slot": "alert",
+				role: "alert",
+				className: t1,
+				...props
+			})
 		});
 		$[7] = props;
 		$[8] = t1;

package/dist/components/animated-theme-toggler.js

@@ -1,10 +1,12 @@
 "use client";
 import { c as _c } from "react/compiler-runtime";
-import { useRef, useSyncExternalStore } from "react";
+import { useEffect, useRef, useSyncExternalStore } from "react";
 import { Monitor, Moon, Sun, SunMoon } from "lucide-react";
-import { flushSync } from "react-dom";
+import { animate, frame } from "motion/react";
+import { MOTION_EASE } from "../motion/tokens.js";
 import { useTheme } from "next-themes";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger } from "./dropdown-menu.js";
+import { REDUCED_MOTION_QUERY } from "../constants/motion.js";
 import { cn } from "../lib/utils.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const THEME_OPTIONS = [
@@ -24,12 +26,10 @@ const THEME_OPTIONS = [
 		value: "system"
 	}
 ];
-/** Restricts transition styling to theme changes initiated by this component. */
-const THEME_TRANSITION_CLASS = "BeezThemeTransition";
-/** Respects user preferences when deciding whether to animate a theme change. */
-const REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
+/** Converts the public duration (milliseconds) to Motion seconds. */
+const MILLISECONDS_PER_SECOND = 1e3;
 export const AnimatedThemeToggler = (t0) => {
-	const $ = _c(32);
+	const $ = _c(34);
 	let className;
 	let controlledOnThemeChange;
 	let controlledResolvedTheme;
@@ -62,143 +62,163 @@ export const AnimatedThemeToggler = (t0) => {
 	const resolvedTheme = controlledResolvedTheme ?? providerTheme.resolvedTheme;
 	const onThemeChange = controlledOnThemeChange ?? providerTheme.setTheme;
 	const buttonRef = useRef(null);
+	const animationRef = useRef(null);
+	let t2;
+	let t3;
+	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = () => () => {
+			animationRef.current?.cancel();
+			animationRef.current = null;
+		};
+		t3 = [];
+		$[8] = t2;
+		$[9] = t3;
+	} else {
+		t2 = $[8];
+		t3 = $[9];
+	}
+	useEffect(t2, t3);
 	const isHydrated = useSyncExternalStore(_temp2, _temp3, _temp4);
 	const isThemeReady = isHydrated && (resolvedTheme === "light" || resolvedTheme === "dark");
 	const isDark = resolvedTheme === "dark";
 	const selectedTheme = theme === "light" || theme === "dark" || theme === "system" ? theme : "system";
 	const isDisabled = !isThemeReady || disabled;
-	let t2;
-	if ($[8] !== duration || $[9] !== isDisabled || $[10] !== onThemeChange) {
-		t2 = (nextTheme) => {
+	let t4;
+	if ($[10] !== duration || $[11] !== isDisabled || $[12] !== onThemeChange) {
+		t4 = (nextTheme) => {
 			const button = buttonRef.current;
 			if (!button || typeof document === "undefined" || isDisabled) {
 				return;
 			}
-			const { top, left, width, height } = button.getBoundingClientRect();
-			const x = left + width / 2;
-			const y = top + height / 2;
-			const viewportWidth = window.visualViewport?.width ?? window.innerWidth;
-			const viewportHeight = window.visualViewport?.height ?? window.innerHeight;
-			const maxRadius = Math.hypot(Math.max(x, viewportWidth - x), Math.max(y, viewportHeight - y));
-			const applyTheme = () => {
-				onThemeChange(nextTheme);
-			};
-			if (typeof document.startViewTransition !== "function" || typeof document.documentElement.animate !== "function" || window.matchMedia?.(REDUCED_MOTION_QUERY).matches) {
-				applyTheme();
+			onThemeChange(nextTheme);
+			animationRef.current?.cancel();
+			if (window.matchMedia?.(REDUCED_MOTION_QUERY).matches || !Number.isFinite(duration) || duration <= 0) {
 				return;
 			}
-			document.documentElement.classList.add(THEME_TRANSITION_CLASS);
-			const transition = document.startViewTransition(() => {
-				flushSync(applyTheme);
+			const original = {
+				transform: button.style.transform,
+				opacity: button.style.opacity
+			};
+			const animation = animate(button, {
+				transform: ["rotate(-8deg)", "rotate(0deg)"],
+				opacity: [.65, 1]
+			}, {
+				duration: duration / MILLISECONDS_PER_SECOND,
+				ease: [...MOTION_EASE]
 			});
-			transition.ready.then(() => document.documentElement.animate({ clipPath: [`circle(0px at ${x}px ${y}px)`, `circle(${maxRadius}px at ${x}px ${y}px)`] }, {
-				duration,
-				easing: "ease-in-out",
-				pseudoElement: "::view-transition-new(root)"
-			}).finished).catch(_temp5).finally(_temp6);
+			animationRef.current = animation;
+			animation.then(() => frame.postRender(() => {
+				if (animationRef.current !== animation) {
+					return;
+				}
+				button.style.transform = original.transform;
+				button.style.opacity = original.opacity;
+				animationRef.current = null;
+			}));
 		};
-		$[8] = duration;
-		$[9] = isDisabled;
-		$[10] = onThemeChange;
-		$[11] = t2;
+		$[10] = duration;
+		$[11] = isDisabled;
+		$[12] = onThemeChange;
+		$[13] = t4;
 	} else {
-		t2 = $[11];
+		t4 = $[13];
 	}
-	const selectTheme = t2;
-	let t3;
-	if ($[12] !== className) {
-		t3 = cn(className);
-		$[12] = className;
-		$[13] = t3;
+	const selectTheme = t4;
+	let t5;
+	if ($[14] !== className) {
+		t5 = cn(className);
+		$[14] = className;
+		$[15] = t5;
 	} else {
-		t3 = $[13];
+		t5 = $[15];
 	}
-	let t4;
-	if ($[14] !== isDark || $[15] !== isThemeReady) {
-		t4 = !isThemeReady ? /* @__PURE__ */ _jsx(SunMoon, { "aria-hidden": "true" }) : isDark ? /* @__PURE__ */ _jsx(Moon, { "aria-hidden": "true" }) : /* @__PURE__ */ _jsx(Sun, { "aria-hidden": "true" });
-		$[14] = isDark;
-		$[15] = isThemeReady;
-		$[16] = t4;
+	let t6;
+	if ($[16] !== isDark || $[17] !== isThemeReady) {
+		t6 = !isThemeReady ? /* @__PURE__ */ _jsx(SunMoon, { "aria-hidden": "true" }) : isDark ? /* @__PURE__ */ _jsx(Moon, { "aria-hidden": "true" }) : /* @__PURE__ */ _jsx(Sun, { "aria-hidden": "true" });
+		$[16] = isDark;
+		$[17] = isThemeReady;
+		$[18] = t6;
 	} else {
-		t4 = $[16];
+		t6 = $[18];
 	}
-	let t5;
-	if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
-		t5 = /* @__PURE__ */ _jsx("span", {
+	let t7;
+	if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = /* @__PURE__ */ _jsx("span", {
 			className: "sr-only",
 			children: "Alternar tema"
 		});
-		$[17] = t5;
+		$[19] = t7;
 	} else {
-		t5 = $[17];
+		t7 = $[19];
 	}
-	let t6;
-	if ($[18] !== isDisabled || $[19] !== props || $[20] !== t3 || $[21] !== t4) {
-		t6 = /* @__PURE__ */ _jsx(DropdownMenuTrigger, {
+	let t8;
+	if ($[20] !== isDisabled || $[21] !== props || $[22] !== t5 || $[23] !== t6) {
+		t8 = /* @__PURE__ */ _jsx(DropdownMenuTrigger, {
 			asChild: true,
 			children: /* @__PURE__ */ _jsxs("button", {
 				type: "button",
 				ref: buttonRef,
 				disabled: isDisabled,
-				className: t3,
+				className: t5,
 				...props,
-				children: [t4, t5]
+				children: [t6, t7]
 			})
 		});
-		$[18] = isDisabled;
-		$[19] = props;
-		$[20] = t3;
-		$[21] = t4;
-		$[22] = t6;
+		$[20] = isDisabled;
+		$[21] = props;
+		$[22] = t5;
+		$[23] = t6;
+		$[24] = t8;
 	} else {
-		t6 = $[22];
+		t8 = $[24];
 	}
-	let t7;
-	if ($[23] !== selectTheme) {
-		t7 = (nextTheme_0) => {
+	let t9;
+	if ($[25] !== selectTheme) {
+		t9 = (nextTheme_0) => {
 			selectTheme(nextTheme_0);
 		};
-		$[23] = selectTheme;
-		$[24] = t7;
+		$[25] = selectTheme;
+		$[26] = t9;
 	} else {
-		t7 = $[24];
+		t9 = $[26];
 	}
-	let t8;
-	if ($[25] === Symbol.for("react.memo_cache_sentinel")) {
-		t8 = THEME_OPTIONS.map(_temp7);
-		$[25] = t8;
+	let t10;
+	if ($[27] === Symbol.for("react.memo_cache_sentinel")) {
+		t10 = THEME_OPTIONS.map(_temp5);
+		$[27] = t10;
 	} else {
-		t8 = $[25];
+		t10 = $[27];
 	}
-	let t9;
-	if ($[26] !== selectedTheme || $[27] !== t7) {
-		t9 = /* @__PURE__ */ _jsx(DropdownMenuContent, {
+	let t11;
+	if ($[28] !== selectedTheme || $[29] !== t9) {
+		t11 = /* @__PURE__ */ _jsx(DropdownMenuContent, {
+			"data-beez-theme-menu": true,
 			align: "end",
 			className: "w-44 rounded-xl p-2",
 			side: "bottom",
 			sideOffset: 8,
 			children: /* @__PURE__ */ _jsx(DropdownMenuRadioGroup, {
-				onValueChange: t7,
+				onValueChange: t9,
 				value: selectedTheme,
-				children: t8
+				children: t10
 			})
 		});
-		$[26] = selectedTheme;
-		$[27] = t7;
-		$[28] = t9;
+		$[28] = selectedTheme;
+		$[29] = t9;
+		$[30] = t11;
 	} else {
-		t9 = $[28];
+		t11 = $[30];
 	}
-	let t10;
-	if ($[29] !== t6 || $[30] !== t9) {
-		t10 = /* @__PURE__ */ _jsxs(DropdownMenu, { children: [t6, t9] });
-		$[29] = t6;
-		$[30] = t9;
-		$[31] = t10;
+	let t12;
+	if ($[31] !== t11 || $[32] !== t8) {
+		t12 = /* @__PURE__ */ _jsxs(DropdownMenu, { children: [t8, t11] });
+		$[31] = t11;
+		$[32] = t8;
+		$[33] = t12;
 	} else {
-		t10 = $[31];
+		t12 = $[33];
 	}
-	return t10;
+	return t12;
 };
 function _temp() {}
 function _temp2() {
@@ -210,11 +230,7 @@ function _temp3() {
 function _temp4() {
 	return false;
 }
-function _temp5() {}
-function _temp6() {
-	document.documentElement.classList.remove(THEME_TRANSITION_CLASS);
-}
-function _temp7(t0) {
+function _temp5(t0) {
 	const { icon: Icon, label, value } = t0;
 	return /* @__PURE__ */ _jsxs(DropdownMenuRadioItem, {
 		className: "h-11 gap-3 px-3 pr-9 text-base",

package/dist/components/avatar.js

@@ -2,6 +2,7 @@
 import { c as _c } from "react/compiler-runtime";
 import * as React from "react";
 import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar";
+import { MotionSlot } from "../motion/motion-slot.js";
 import { cn } from "../lib/utils.js";
 import { useBeezUIComponents } from "../providers/beez-ui-provider.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -32,11 +33,14 @@ function Avatar(t0) {
 	}
 	let t3;
 	if ($[6] !== props || $[7] !== size || $[8] !== t2) {
-		t3 = /* @__PURE__ */ _jsx(AvatarPrimitive.Root, {
-			"data-slot": "avatar",
-			"data-size": size,
-			className: t2,
-			...props
+		t3 = /* @__PURE__ */ _jsx(MotionSlot, {
+			kind: "fade",
+			children: /* @__PURE__ */ _jsx(AvatarPrimitive.Root, {
+				"data-slot": "avatar",
+				"data-size": size,
+				className: t2,
+				...props
+			})
 		});
 		$[6] = props;
 		$[7] = size;
@@ -89,16 +93,19 @@ function AvatarImage(t0) {
 	const t5 = src ?? undefined;
 	let t6;
 	if ($[9] !== alt || $[10] !== props || $[11] !== t3 || $[12] !== t4 || $[13] !== t5) {
-		t6 = /* @__PURE__ */ _jsx(AvatarPrimitive.Image, {
-			render: t3,
-			keepMounted: true,
-			alt,
-			"data-slot": "avatar-image",
-			className: t4,
-			src: t5,
-			loading: "lazy",
-			decoding: "async",
-			...props
+		t6 = /* @__PURE__ */ _jsx(MotionSlot, {
+			kind: "field",
+			children: /* @__PURE__ */ _jsx(AvatarPrimitive.Image, {
+				render: t3,
+				keepMounted: true,
+				alt,
+				"data-slot": "avatar-image",
+				className: t4,
+				src: t5,
+				loading: "lazy",
+				decoding: "async",
+				...props
+			})
 		});
 		$[9] = alt;
 		$[10] = props;

package/dist/components/badge.js

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { cva } from "class-variance-authority";
 import { Slot } from "radix-ui";
+import { MotionSlot } from "../motion/motion-slot.js";
 import { cn } from "../lib/utils.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const badgeVariants = cva("group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!", {
@@ -16,11 +17,14 @@ const badgeVariants = cva("group/badge inline-flex h-5 w-fit shrink-0 items-cent
 });
 function Badge({ className, variant = "default", asChild = false, ...props }) {
 	const Comp = asChild ? Slot.Root : "span";
-	return /* @__PURE__ */ _jsx(Comp, {
-		"data-slot": "badge",
-		"data-variant": variant,
-		className: cn(badgeVariants({ variant }), className),
-		...props
+	return /* @__PURE__ */ _jsx(MotionSlot, {
+		kind: "fade",
+		children: /* @__PURE__ */ _jsx(Comp, {
+			"data-slot": "badge",
+			"data-variant": variant,
+			className: cn(badgeVariants({ variant }), className),
+			...props
+		})
 	});
 }
 export { Badge, badgeVariants };