beez-ui 0.6.1 → 0.7.0

package/CHANGELOG.md

@@ -1,82 +1,134 @@
-# Cambios
-
-## 0.6.1 - 2026-09-26
-
-- Actualiza pnpm a 12.6.0 y next a 16.3.6
-- Add terminal UI for interactive prompts and spinners
-- Update release banner and icons for improved visibility
-- Remove create-version script
-- Update release command to create-version and improve documentation
-
-## 0.6.0 - 2026-09-23
-
-- Actualiza el paquete a la versión 0.6.0.
-
-## 0.5.6 - 2026-09-09
-
-- Actualiza el paquete a la versión 0.5.6.
-
-## 0.5.5 - 2026-09-09
-
-- Actualiza el paquete a la versión 0.5.5.
-
-## 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.
-
-## 0.5.1 - 2026-09-08
-
-- Actualiza el paquete a la versión 0.5.1.
-
-## 0.5.0 - 2026-09-08
-
-- Actualiza el paquete a la versión 0.5.0.
-
-## 0.4.2 - 2026-09-08
-
-- Actualiza el paquete a la versión 0.4.2.
-
-## 0.4.1 - 2026-09-08
-
-- Actualiza el paquete a la versión 0.4.1.
-
-## 0.4.0 - 2026-09-08
-
-- Distribuye los providers nativo, Next y TanStack con tema compartido, navegación e imágenes adaptadas al framework.
-- Incluye CSS precompilado, tema y fuentes; los consumidores sólo importan `beez-ui/styles.css`, sin configurar Tailwind.
-- Valida el tarball sin compiladores CSS y las integraciones en Chromium y WebKit.
-
-## 0.3.1 - 2026-09-08
-
-- Publica CSS precompilado para que los estilos funcionen sin Tailwind ni detección de clases en el consumidor.
-- Conserva el tema, las fuentes y las utilidades compartidas mediante `beez-ui/styles.css`.
-- Verifica estilos computados del tarball servido por HTTP sin procesadores CSS en Chromium y WebKit.
-
-## 0.2.0 - 2026-09-08
-
-- Unifica el nombre `BeezUIProvider` en los entrypoints nativo, Next y TanStack; reemplaza `NextBeezUIProvider`.
-- Comparte el tema mediante `next-themes`, `themeOptions` y `useTheme` en todos los providers.
-- Restaura `Link` desde la raíz con navegación por adaptadores y prefetch desactivado por defecto.
-- Integra Unpic para imágenes nativas y de TanStack, y conserva Next Image en el provider de Next.
-- Separa los tipos de tests y valida navegación, imágenes y tema en Chromium y WebKit.
-
-## 0.1.1 - 2026-09-08
-
-- Publica JavaScript ESM y declaraciones TypeScript en `dist`.
-- Conserva los componentes agrupados y el tema de LaTribu.
-- Mantiene visible el área del avatar durante la carga diferida para permitir que el navegador solicite la imagen.
-- Agrega `BeezUIProvider` para adaptadores nativos o propios y `NextBeezUIProvider` como integración opcional.
-- Incorpora preparación de releases con checks, control del contenido del paquete y checksum SHA-256.
-- Documenta la autenticación con `NPM_TOKEN` y la publicación del artefacto validado.
-
-## 0.1.0 - 2026-09-08
-
-- Centraliza los componentes de LaTribu y agenda-mensual con su tema, fuentes y pruebas.
+# Cambios
+
+Todos los cambios relevantes de beez-ui se documentan en este archivo con el formato de [Keep a Changelog](https://keepachangelog.com/es-ES/1.1.0/) y versionado [SemVer](https://semver.org/lang/es/). Cada cambio agrega sus entradas en `[Unreleased]`; `pnpm create-version` las pasa a la versión publicada con su fecha.
+
+## [Unreleased]
+
+### Fixed
+
+- `BeezUIProvider` ya no provoca el aviso de React «Encountered a script tag» en apps renderizadas solo en el cliente; con SSR conserva el script que aplica el tema antes de hidratar, sin parpadeo.
+
+## [0.7.0] - 2026-09-26
+
+### Added
+
+- `PaginationContent` desliza el resaltado de la página actual hacia la página elegida cuando la lista permanece montada (paginación en el cliente).
+- `Calendar` desliza el mes entrante desde el lado de la navegación (también en RTL) y se mantiene estático con movimiento reducido.
+- `AvatarImage` revela la imagen con un desenfoque y un zoom breves al terminar de cargar, en lugar de aparecer de golpe sobre el fallback.
+- Las sugerencias de `FilterQueryBar` deslizan el resaltado entre opciones con teclado, como los menús y `Select`.
+- `AvatarGroup` eleva levemente el avatar bajo el puntero en dispositivos con hover real.
+- El chevron de `DropdownMenuSubTrigger` se desplaza hacia el submenú abierto.
+
+### Changed
+
+- `Skeleton` muestra un brillo que recorre el placeholder en lugar del pulso de opacidad; con movimiento reducido queda como un bloque liso.
+- `Sheet` se cierra con una curva de cajón breve en lugar de un spring, y su botón de cierre aparece con un pop demorado como el de `Dialog`.
+- `Alert` entra con un leve desplazamiento y desenfoque.
+- Los anillos de foco y bordes de `Input`, `Textarea`, `InputGroup`, `SelectTrigger`, `Checkbox` y `RadioGroupItem` aparecen con una transición en lugar de saltar.
+- En menús, `Select` y sugerencias, el resaltado sigue al puntero al instante y solo se desliza al navegar con teclado, con un spring más rápido.
+- El sidebar colapsa y expande con una curva de cajón de 300 ms en lugar de una transición lineal.
+- El thumb de `Switch` tiene una sombra sutil que lo separa del track.
+
+### Fixed
+
+- El cursor de `TypingAnimation` vuelve a parpadear: queda fijo mientras escribe o borra, parpadea en reposo y los lectores de pantalla lo ignoran.
+- `Carousel` vertical responde a las flechas arriba y abajo; antes solo reaccionaba a izquierda y derecha.
+- `SidebarMenuButton` con `variant="outline"` vuelve a pintar su borde con los tokens `oklch` del tema.
+- `FormLabel`, `FormControl`, `FormDescription` y `FormMessage` fuera de un `FormField` lanzan un error claro en lugar de fallar en silencio.
+- Los bordes sin color explícito (footers de `Card`, `Dialog` y `AlertDialog`, `Alert`, filas de `Table`, bordes de `Sheet` y del sidebar) usan el token `--border` del tema en lugar del color del texto cuando se consume `beez-ui/styles.css` sin Tailwind.
+- `DropdownMenu`, sus submenús, `Popover`, `HoverCard` y `Select` muestran su borde y su sombra desde el primer frame al abrirse; antes el revelado los recortaba durante ~650 ms.
+- `DataTable` filtra las columnas apuntadas por `queryFilterConfig` que no declaran `filterFn` (rangos numéricos, enums y año-mes); antes un rango sobre una columna numérica lanzaba `TypeError: val is not iterable` y un enum ocultaba todas las filas. Un `filterFn` propio de la columna sigue teniendo prioridad.
+- Las `Card` interactivas conservan su contorno mientras muestran la sombra de hover; antes la sombra reemplazaba el anillo del borde.
+
+## [0.6.2] - 2026-09-26
+
+### Changed
+
+- El comando de release (`pnpm create-version`, alias `pnpm cv`) toma las notas del bloque `[Unreleased]` del CHANGELOG, les asigna la versión y la fecha, y pide a Codex que lo complete cuando está vacío.
+- Las cajas del comando de release ajustan el texto largo en varias líneas en lugar de cortarlo.
+- Un release interrumpido reusa automáticamente el artefacto ya preparado cuando es posterior al último cambio de código.
+
+### Removed
+
+- La opción `--notes` y las preguntas sobre las notas del CHANGELOG y sobre reusar el artefacto preparado.
+
+## 0.6.1 - 2026-09-26
+
+- Actualiza pnpm a 12.6.0 y next a 16.3.6
+- Add terminal UI for interactive prompts and spinners
+- Update release banner and icons for improved visibility
+- Remove create-version script
+- Update release command to create-version and improve documentation
+
+## 0.6.0 - 2026-09-23
+
+- Actualiza el paquete a la versión 0.6.0.
+
+## 0.5.6 - 2026-09-09
+
+- Actualiza el paquete a la versión 0.5.6.
+
+## 0.5.5 - 2026-09-09
+
+- Actualiza el paquete a la versión 0.5.5.
+
+## 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.
+
+## 0.5.1 - 2026-09-08
+
+- Actualiza el paquete a la versión 0.5.1.
+
+## 0.5.0 - 2026-09-08
+
+- Actualiza el paquete a la versión 0.5.0.
+
+## 0.4.2 - 2026-09-08
+
+- Actualiza el paquete a la versión 0.4.2.
+
+## 0.4.1 - 2026-09-08
+
+- Actualiza el paquete a la versión 0.4.1.
+
+## 0.4.0 - 2026-09-08
+
+- Distribuye los providers nativo, Next y TanStack con tema compartido, navegación e imágenes adaptadas al framework.
+- Incluye CSS precompilado, tema y fuentes; los consumidores sólo importan `beez-ui/styles.css`, sin configurar Tailwind.
+- Valida el tarball sin compiladores CSS y las integraciones en Chromium y WebKit.
+
+## 0.3.1 - 2026-09-08
+
+- Publica CSS precompilado para que los estilos funcionen sin Tailwind ni detección de clases en el consumidor.
+- Conserva el tema, las fuentes y las utilidades compartidas mediante `beez-ui/styles.css`.
+- Verifica estilos computados del tarball servido por HTTP sin procesadores CSS en Chromium y WebKit.
+
+## 0.2.0 - 2026-09-08
+
+- Unifica el nombre `BeezUIProvider` en los entrypoints nativo, Next y TanStack; reemplaza `NextBeezUIProvider`.
+- Comparte el tema mediante `next-themes`, `themeOptions` y `useTheme` en todos los providers.
+- Restaura `Link` desde la raíz con navegación por adaptadores y prefetch desactivado por defecto.
+- Integra Unpic para imágenes nativas y de TanStack, y conserva Next Image en el provider de Next.
+- Separa los tipos de tests y valida navegación, imágenes y tema en Chromium y WebKit.
+
+## 0.1.1 - 2026-09-08
+
+- Publica JavaScript ESM y declaraciones TypeScript en `dist`.
+- Conserva los componentes agrupados y el tema de LaTribu.
+- Mantiene visible el área del avatar durante la carga diferida para permitir que el navegador solicite la imagen.
+- Agrega `BeezUIProvider` para adaptadores nativos o propios y `NextBeezUIProvider` como integración opcional.
+- Incorpora preparación de releases con checks, control del contenido del paquete y checksum SHA-256.
+- Documenta la autenticación con `NPM_TOKEN` y la publicación del artefacto validado.
+
+## 0.1.0 - 2026-09-08
+
+- Centraliza los componentes de LaTribu y agenda-mensual con su tema, fuentes y pruebas.

package/README.md

@@ -77,10 +77,15 @@ siguen los tokens de [beui motion](https://beui.dev/components/motion):
 - `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` suben con spring; `Sheet` entra desde su borde con spring.
+- `Dialog` y `AlertDialog` suben con spring; `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), el ítem activo de `SidebarMenu` y
-  el ítem resaltado de `DropdownMenu` y `Select`, también con teclado. Una copia
+  la pestaña activa de `Tabs` (fondo o subrayado), el ítem activo de `SidebarMenu`, 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
+  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.
@@ -88,8 +93,14 @@ siguen los tokens de [beui motion](https://beui.dev/components/motion):
   solo se desvanece) y los checks de ítems de `Select` y `DropdownMenu` aparecen con pop.
 - 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. Cards y enlaces
-  responden al hover. El skeleton pulsa con Motion. Las animaciones especializadas
+- El contenido de `Tabs` entra con un desplazamiento de 4 px y `Alert` entra con blur.
+  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.
+- `Calendar` desliza el mes entrante desde el lado de la navegación (invertido en RTL).
+- `AvatarImage` se revela con blur y un zoom de 1.06 al terminar de cargar; las imágenes
+  ya cargadas al montar no se animan.
+- El cursor de `TypingAnimation` queda fijo mientras escribe y parpadea en reposo. 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.
@@ -209,24 +220,27 @@ Desde el repositorio de beez-ui, configurar `NPM_TOKEN` con permiso de publicaci
 pnpm create-version                         # diagnóstico, plan y release interactivo
 pnpm create-version --bump minor            # patch | minor | major sin preguntar
 pnpm create-version --set-version 0.7.0     # versión exacta
-pnpm create-version --notes "Agrega glide"  # notas del CHANGELOG; se puede repetir
 pnpm create-version --dry-run               # solo muestra el diagnóstico y el plan
 pnpm cv                                     # alias de pnpm create-version
 ```
 
 El comando hace `git fetch`, consulta npm y muestra un panel con la rama, el upstream, el working tree, `main` frente a origin, la versión local, la última versión publicada, los commits posteriores al último cambio de versión y el artefacto ya preparado. Después decide qué falta:
 
-- **Release nuevo**: si hay commits sin publicar, sugiere `patch`, `minor` o `major` según los commits (breaking change, funcionalidades o solo arreglos) y pregunta con las flechas; las notas del CHANGELOG pueden salir de los commits (sin prefijos convencionales), escribirse en el momento o ser la nota básica. Tras confirmar ejecuta el flujo validado completo (ver abajo).
-- **Release a medio terminar**: si `package.json` tiene una versión que npm todavía no tiene, completa solo lo que falta: prepara el artefacto (u ofrece reusar el ya preparado, que `release:publish` vuelve a verificar), si `package.json` y `CHANGELOG.md` quedaron sin commitear los commitea primero, después prepara, pushea el commit de release si todavía no está en origin y publica pidiendo confirmación. Nunca vuelve a subir la versión.
+- **Release nuevo**: si hay commits sin publicar, sugiere `patch`, `minor` o `major` según los commits (breaking change, funcionalidades o solo arreglos) y pregunta con las flechas. Las notas salen del bloque `## [Unreleased]` de `CHANGELOG.md` (ver la sección CHANGELOG más abajo); si está vacío, invoca a Codex (`codex exec`) para completarlo desde los commits sin publicar y muestra el resultado, y si Codex no está o no escribe nada válido, el release se corta. Tras confirmar ejecuta el flujo validado completo (ver abajo).
+- **Release a medio terminar**: si `package.json` tiene una versión que npm todavía no tiene, completa solo lo que falta: si `package.json` y `CHANGELOG.md` quedaron sin commitear los commitea primero; después prepara el artefacto (reusa automáticamente el ya preparado cuando es posterior al último cambio de código, y `release:publish` lo vuelve a verificar), pushea el commit de release si todavía no está en origin y publica (la confirmación del inicio cubre la publicación). Nunca vuelve a subir la versión.
 - **Todo al día**: si la versión está publicada y no hay commits nuevos, no hace nada.
 
-`--set-version` sólo acepta el siguiente patch, minor o major de la versión actual (desde `0.6.0`: `0.6.1`, `0.7.0` o `1.0.0`); rechaza versiones menores, iguales, prerelease o que salteen versiones. Los releases salen sólo desde `main` con upstream configurado. Se detiene y explica qué hacer ante otra rama, `HEAD` desacoplado, cambios sin commitear (salvo `package.json` y `CHANGELOG.md` de un release a medio terminar), `main` divergida o npm sin respuesta; un bloqueo termina con código 0 porque ya está explicado en pantalla, y un paso fallido termina con código 1. Si `main` está atrás, la actualiza con fast-forward antes de versionar. Si algo falla, basta con volver a ejecutar `pnpm create-version`: retoma desde el primer paso pendiente. Sin terminal interactiva cada pregunta toma su opción por defecto.
+`--set-version` sólo acepta el siguiente patch, minor o major de la versión actual (desde `0.6.0`: `0.6.1`, `0.7.0` o `1.0.0`); rechaza versiones menores, iguales, prerelease o que salteen versiones. Los releases salen sólo desde `main` con upstream configurado. Se detiene y explica qué hacer ante otra rama, `HEAD` desacoplado, cambios sin commitear (salvo `CHANGELOG.md` en un release nuevo, que viaja en el commit de release, o `package.json` y `CHANGELOG.md` de un release a medio terminar), secciones de `[Unreleased]` fuera de las de Keep a Changelog, `main` divergida o npm sin respuesta; un bloqueo termina con código 0 porque ya está explicado en pantalla, y un paso fallido termina con código 1. Si `main` está atrás, la actualiza con fast-forward antes de versionar. Si algo falla, basta con volver a ejecutar `pnpm create-version`: retoma desde el primer paso pendiente. Las opciones de cada pregunta están numeradas: se eligen apretando su número, o con las flechas y Enter; cada versión muestra debajo qué significa patch, minor o major. Sin terminal interactiva cada pregunta toma su opción por defecto. El tiempo total que muestra al final no cuenta el tiempo que espera tus respuestas.
 
-La lógica pura vive en `scripts/release-plan.js`, la lectura de Git y npm en `scripts/release-state.js`, la UI de terminal (cajas, colores, íconos Nerd Font, spinner y selector) en `scripts/terminal-ui.js` y el orquestador en `scripts/release.js`, sin dependencias nuevas. Los íconos requieren una Nerd Font en la terminal.
+La lógica pura vive en `scripts/release-plan.js` y `scripts/changelog.js` (lectura y release de `[Unreleased]`), la invocación de Codex en `scripts/changelog-ai.js`, la lectura de Git y npm en `scripts/release-state.js`, la UI de terminal (cajas, colores, íconos Nerd Font, spinner y selector) en `scripts/terminal-ui.js` y el orquestador en `scripts/release.js`, sin dependencias nuevas. Los íconos requieren una Nerd Font en la terminal.
+
+### CHANGELOG
+
+`CHANGELOG.md` sigue [Keep a Changelog](https://keepachangelog.com/es-ES/1.1.0/). Cada cambio agrega sus entradas en el bloque `## [Unreleased]`, agrupadas en `### Added`, `### Changed`, `### Deprecated`, `### Removed`, `### Fixed` y `### Security` (solo las que apliquen). Nunca se escriben la versión ni la fecha a mano: `pnpm create-version` las agrega al publicar. Las versiones anteriores a este formato (`## 0.6.1 - 2026-09-26`) siguen siendo válidas. La regla completa está en `AGENTS.md`.
 
 ### Flujo validado de un release nuevo
 
-1. Actualiza `package.json` y agrega la entrada del changelog con fecha UTC, conservando el historial (`scripts/release-version.js`).
+1. Actualiza `package.json` y renombra `## [Unreleased]` a `## [X.Y.Z] - AAAA-MM-DD` (fecha UTC), dejando un `[Unreleased]` vacío arriba y conservando el historial (`scripts/release-version.js`). Si `[Unreleased]` no tiene cambios o usa secciones no válidas, no toca nada.
 2. Commitea en el momento `package.json` y `CHANGELOG.md` (sólo esos dos archivos, conservando otros archivos staged), antes de las validaciones largas: si algo se corta después, queda un commit local y nunca metadata suelta.
 3. Prepara la release: instalación congelada, tests sin React Compiler, build optimizado de JavaScript, tipos y CSS, lint, typechecks, tests unitarios y pruebas de navegador.
 4. Genera el tarball en `releases/<version>-<sha256>/beez-ui-<version>.tgz` y valida su contenido, exports e integridad.

package/dist/components/alert.js

@@ -40,7 +40,7 @@ function Alert(t0) {
 	let t2;
 	if ($[7] !== props || $[8] !== t1) {
 		t2 = /* @__PURE__ */ _jsx(MotionSlot, {
-			kind: "fade",
+			kind: "message",
 			children: /* @__PURE__ */ _jsx("div", {
 				"data-slot": "alert",
 				role: "alert",

package/dist/components/avatar.d.ts

@@ -7,10 +7,11 @@ export type AvatarImageProps = Omit<React.ComponentProps<"img">, "src"> & {
 declare function Avatar({ className, size, ...props }: AvatarPrimitive.Root.Props & {
     size?: "default" | "sm" | "lg";
 }): React.JSX.Element;
-/** Delegates loading, failure and fallback synchronization to the avatar primitive. */
+/** Delegates loading, failure and fallback synchronization to the avatar primitive; loaded images develop in place. */
 declare function AvatarImage({ alt, className, src, ...props }: AvatarImageProps): React.JSX.Element;
 declare function AvatarFallback({ className, ...props }: AvatarPrimitive.Fallback.Props): React.JSX.Element;
 declare function AvatarBadge({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+/** Overlaps avatars; the hovered one lifts slightly above its neighbours. */
 declare function AvatarGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function AvatarGroupCount({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 export { Avatar, AvatarImage, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarBadge, };

package/dist/components/avatar.js

@@ -51,7 +51,7 @@ function Avatar(t0) {
 	}
 	return t3;
 }
-/** Delegates loading, failure and fallback synchronization to the avatar primitive. */
+/** Delegates loading, failure and fallback synchronization to the avatar primitive; loaded images develop in place. */
 function AvatarImage(t0) {
 	const $ = _c(15);
 	let className;
@@ -94,7 +94,7 @@ function AvatarImage(t0) {
 	let t6;
 	if ($[9] !== alt || $[10] !== props || $[11] !== t3 || $[12] !== t4 || $[13] !== t5) {
 		t6 = /* @__PURE__ */ _jsx(MotionSlot, {
-			kind: "field",
+			kind: "reveal",
 			children: /* @__PURE__ */ _jsx(AvatarPrimitive.Image, {
 				render: t3,
 				keepMounted: true,
@@ -190,6 +190,7 @@ function AvatarBadge(t0) {
 	}
 	return t2;
 }
+/** Overlaps avatars; the hovered one lifts slightly above its neighbours. */
 function AvatarGroup(t0) {
 	const $ = _c(8);
 	let className;
@@ -205,7 +206,7 @@ function AvatarGroup(t0) {
 	}
 	let t1;
 	if ($[3] !== className) {
-		t1 = cn("group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background", className);
+		t1 = cn("group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background *:data-[slot=avatar]:transition-[translate] *:data-[slot=avatar]:duration-200 *:data-[slot=avatar]:ease-out *:data-[slot=avatar]:hover:z-10 *:data-[slot=avatar]:hover:-translate-y-0.5", className);
 		$[3] = className;
 		$[4] = t1;
 	} else {

package/dist/components/calendar.js

@@ -3,6 +3,9 @@ import { c as _c } from "react/compiler-runtime";
 import * as React from "react";
 import { es } from "react-day-picker/locale";
 import { DayPicker, getDefaultClassNames } from "react-day-picker";
+import { animate, frame } from "motion/react";
+import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion.js";
+import { MOTION_EASE, MOTION_MONTH_DISTANCE, MOTION_TIMING } from "../motion/tokens.js";
 import { cn } from "../lib/utils.js";
 import { Button, buttonVariants } from "./button.js";
 import { ChevronLeft, ChevronRight, ChevronDown } from "lucide-react";
@@ -173,6 +176,7 @@ function Calendar(t0) {
 			Root: _temp,
 			Chevron: _temp2,
 			DayButton: t34,
+			Month: CalendarMonth,
 			WeekNumber: _temp3,
 			...components
 		};
@@ -247,6 +251,104 @@ function _temp(t0) {
 		...props_0
 	});
 }
+/**
+* Renders one displayed month and slides it in from the side the user navigated from.
+* DayPicker keys months by display position, so this instance survives navigation and can
+* compare the new month with the previous one. The first render and reduced motion stay static.
+* @param props - DayPicker month properties, including the month being displayed.
+* @returns The month container with its caption and grid.
+*/
+function CalendarMonth(t0) {
+	const $ = _c(13);
+	let calendarMonth;
+	let children;
+	let displayIndex;
+	let props;
+	if ($[0] !== t0) {
+		({calendarMonth, displayIndex, children, ...props} = t0);
+		$[0] = t0;
+		$[1] = calendarMonth;
+		$[2] = children;
+		$[3] = displayIndex;
+		$[4] = props;
+	} else {
+		calendarMonth = $[1];
+		children = $[2];
+		displayIndex = $[3];
+		props = $[4];
+	}
+	const monthRef = React.useRef(null);
+	const monthTime = calendarMonth.date.getTime();
+	const previousMonthTimeRef = React.useRef(monthTime);
+	const reduceMotion = usePrefersReducedMotion();
+	let t1;
+	let t2;
+	if ($[5] !== monthTime || $[6] !== reduceMotion) {
+		t1 = () => {
+			const previousMonthTime = previousMonthTimeRef.current;
+			previousMonthTimeRef.current = monthTime;
+			const element = monthRef.current;
+			if (!element || reduceMotion || previousMonthTime === monthTime) {
+				return;
+			}
+			const isForward = monthTime > previousMonthTime;
+			const isRightToLeft = getComputedStyle(element).direction === "rtl";
+			const direction = isForward !== isRightToLeft ? 1 : -1;
+			const original = {
+				opacity: element.style.opacity,
+				transform: element.style.transform
+			};
+			const restore = () => {
+				element.style.opacity = original.opacity;
+				element.style.transform = original.transform;
+			};
+			const animation = animate(element, {
+				opacity: [0, 1],
+				transform: [`translateX(${direction * MOTION_MONTH_DISTANCE}px)`, "translateX(0px)"]
+			}, {
+				duration: MOTION_TIMING.monthSwap,
+				ease: [...MOTION_EASE]
+			});
+			let isActive = true;
+			animation.then(() => frame.postRender(() => {
+				if (isActive) {
+					restore();
+				}
+			}));
+			return () => {
+				isActive = false;
+				animation.cancel();
+				restore();
+			};
+		};
+		t2 = [monthTime, reduceMotion];
+		$[5] = monthTime;
+		$[6] = reduceMotion;
+		$[7] = t1;
+		$[8] = t2;
+	} else {
+		t1 = $[7];
+		t2 = $[8];
+	}
+	React.useLayoutEffect(t1, t2);
+	let t3;
+	if ($[9] !== children || $[10] !== displayIndex || $[11] !== props) {
+		t3 = /* @__PURE__ */ _jsx("div", {
+			ref: monthRef,
+			"data-slot": "calendar-month",
+			"data-display-index": displayIndex,
+			...props,
+			children
+		});
+		$[9] = children;
+		$[10] = displayIndex;
+		$[11] = props;
+		$[12] = t3;
+	} else {
+		t3 = $[12];
+	}
+	return t3;
+}
 function CalendarDayButton(t0) {
 	const $ = _c(21);
 	let className;