beez-ui 0.5.6 → 0.6.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # 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.

package/README.md

@@ -2,44 +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.
 
-## 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
+## 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.
-
-La utilidad `cn`, también exportada desde `beez-ui`, usa el paquete `cn` para combinar clases condicionales y resolver conflictos de Tailwind.
+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";
@@ -47,47 +47,70 @@ La utilidad `cn`, también exportada desde `beez-ui`, usa el paquete `cn` para c
 
 `beez-ui/styles.css` es CSS listo para el navegador: incluye reset, utilidades, tema claro/oscuro, radios y fuentes locales Geist, Poppins e IBM Plex Mono. No requiere Tailwind, plugins PostCSS ni declaraciones `@source` en el consumidor. Las clases se compilan en el build de la biblioteca y se publican en `dist/styles.css`; `styles.source.css` es la entrada de desarrollo y no se distribuye.
 
-Los consumidores pueden sobrescribir tokens mediante CSS normal. Poppins se reserva para títulos grandes mediante `--font-display`; las licencias se incluyen en `assets/fonts`. Si la aplicación usa Tailwind para sus propios estilos puede mantenerlo, pero ya no necesita escanear beez-ui.
-
-`DropdownMenuContent` toma el ancho natural de sus opciones, con un mínimo de 12 rem y un máximo limitado por el espacio disponible. No hereda el ancho del botón disparador: los menús abiertos desde un icono deben mantener sus etiquetas legibles. Para un ancho específico, usar `className` y ajustar también el mínimo cuando se necesite un menú más pequeño.
-
-Los componentes usan por defecto los espaciados compactos de Agenda: `Select` mide 2 rem (1.75 rem en tamaño pequeño), `TabsList` horizontal mide 2 rem y `PopoverContent` usa 0.625 rem de padding. Los menús y submenús tienen un mínimo de 12 rem, con filas compactas. `Dialog` y `AlertDialog` usan 1 rem de padding y un footer con borde superior y fondo diferenciado; `Textarea` distingue el estado deshabilitado mediante su fondo. Estos valores conservan los colores y fuentes del tema compartido. Son cambios de los defaults, sin una prop adicional para activarlos; los consumidores pueden personalizarlos mediante `className`.
-
-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.
-
-## 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
+Los consumidores pueden sobrescribir tokens mediante CSS normal. Poppins se reserva para títulos grandes mediante `--font-display`; las licencias se incluyen en `assets/fonts`. Si la aplicación usa Tailwind para sus propios estilos puede mantenerlo, pero ya no necesita escanear beez-ui.
+
+`DropdownMenuContent` toma el ancho natural de sus opciones, con un mínimo de 12 rem y un máximo limitado por el espacio disponible. No hereda el ancho del botón disparador: los menús abiertos desde un icono deben mantener sus etiquetas legibles. Para un ancho específico, usar `className` y ajustar también el mínimo cuando se necesite un menú más pequeño.
+
+Los componentes usan por defecto los espaciados compactos de Agenda: `Select` mide 2 rem (1.75 rem en tamaño pequeño), `TabsList` horizontal mide 2 rem y `PopoverContent` usa 0.625 rem de padding. Los menús y submenús tienen un mínimo de 12 rem, con filas compactas. `Dialog` y `AlertDialog` usan 1 rem de padding y un footer con borde superior y fondo diferenciado; `Textarea` distingue el estado deshabilitado mediante su fondo. Estos valores conservan los colores y fuentes del tema compartido. Son cambios de los defaults, sin una prop adicional para activarlos; los consumidores pueden personalizarlos mediante `className`.
+
+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.
+
+## 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 curvas y springs
+siguen los tokens de [beui motion](https://beui.dev/components/motion):
+
+- `Button` se comprime con spring a 0.93 y se eleva a 1.02 al hover, solo en
+  dispositivos con hover real (`(hover: hover) and (pointer: fine)`); 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` suben con spring; `Sheet` entra desde su borde con spring.
+- `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
+  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.
+- 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
+  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`.
 
@@ -129,9 +152,9 @@ Next y TanStack Router son peers opcionales aislados en sus entrypoints. El prov
 
 ## Componentes incorporados desde agenda-mensual
 
-`Alert`, `AnimatedThemeToggler`, `Calendar`, `DataTable`, `FilterQueryBar`, `Form`, `Highlighter`, `InputGroup`, `Label`, `RadioGroup`, `TypingAnimation` y `ThemedToaster`, junto con sus subcomponentes, tipos y gramática de filtros.
-
-`FilterQueryBar` mantiene el foco en el input mientras se recorren las sugerencias con el puntero o las flechas. Enter aplica la opción activa; interactuar con el input no cierra la lista.
+`Alert`, `AnimatedThemeToggler`, `Calendar`, `DataTable`, `FilterQueryBar`, `Form`, `Highlighter`, `InputGroup`, `Label`, `RadioGroup`, `TypingAnimation` y `ThemedToaster`, junto con sus subcomponentes, tipos y gramática de filtros.
+
+`FilterQueryBar` mantiene el foco en el input mientras se recorren las sugerencias con el puntero o las flechas. Enter aplica la opción activa; interactuar con el input no cierra la lista.
 
 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.
 
@@ -178,27 +201,41 @@ El compilador `tsc` es TypeScript 7. Para `typescript-eslint`, se mantiene la [A
 
 ## Crear y publicar una versión
 
-Desde el repositorio de beez-ui, configurar `NPM_TOKEN` con permiso de publicación en el entorno o en `.env`, tomando `.env.example` como referencia. Mantener el archivo local existente si ya está configurado. Después ejecutar:
+Desde el repositorio de beez-ui, configurar `NPM_TOKEN` con permiso de publicación en el entorno o en `.env`, tomando `.env.example` como referencia. Mantener el archivo local existente si ya está configurado.
+
+### Un solo comando: `pnpm create-version` (alias `pnpm cv`)
 
 ```sh
-pnpm run create-version patch
-pnpm run create-version minor --notes "Agrega un componente" --notes "Amplía sus opciones"
-pnpm run create-version 0.5.0 --notes "Describe los cambios de esta versión"
+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
 ```
 
-Acepta `patch`, `minor`, `major` o una versión estable explícita mayor que la actual. Las notas son opcionales y pueden repetirse. Sin `--notes`, se agrega una entrada básica que indica la nueva versión; las notas explícitas no pueden estar vacías. `pnpm run create-version --help` muestra la sintaxis.
+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.
+- **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.
+
+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.
 
-El comando ejecuta el flujo completo:
+### Flujo validado de un release nuevo
 
-1. Actualiza `package.json` y agrega la entrada del changelog con fecha UTC, conservando el historial.
-2. 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.
-3. Genera el tarball en `releases/<version>-<sha256>/beez-ui-<version>.tgz` y valida su contenido, exports e integridad.
-4. Crea un commit con el contenido validado de `package.json` y `CHANGELOG.md`, conservando otros archivos staged, y pushea ese commit a la rama upstream configurada.
-5. Publica ese mismo artefacto en npm con acceso público y etiqueta `latest`.
+1. Actualiza `package.json` y agrega la entrada del changelog con fecha UTC, conservando el historial (`scripts/release-version.js`).
+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.
+5. Pushea el commit de release a la rama upstream configurada, sólo si sigue siendo el commit actual.
+6. Publica ese mismo artefacto en npm con acceso público y etiqueta `latest`.
 
-La publicación usa el cliente oficial de npm para admitir su flujo interactivo de verificación en el navegador/2FA. Instalación, build y checks siguen usando pnpm 12. Ejecutar desde una terminal interactiva cuando la cuenta requiera autenticación adicional. El token se carga sólo al publicar, no se imprime y se referencia mediante `${NPM_TOKEN}` en `.npmrc`.
+La publicación usa el cliente oficial de npm para admitir su flujo interactivo de verificación en el navegador/2FA. Instalación, build y checks siguen usando pnpm 12. Ejecutar desde una terminal interactiva cuando la cuenta requiera autenticación adicional. El token se carga sólo al publicar y no se imprime. El repositorio no tiene `.npmrc`: pnpm 12 ignora las variables de entorno en credenciales controladas por el repositorio y avisaba en cada comando. `release:publish` crea un config temporal de npm fuera del repositorio que sólo referencia `${NPM_TOKEN}` (npm lo expande desde el entorno; el token no se escribe en disco ni en la línea de comandos), lo pasa con `--userconfig` y lo borra al terminar, también si la publicación falla (`scripts/npm-auth.js`).
 
-El comando requiere una rama Git con upstream configurado. El commit se limita a los dos archivos de metadatos, incluidos sus cambios previos; revisar el código antes de ejecutar la release. No crea tags ni hace force push. Si cambian el checkout, el upstream o los metadatos durante las validaciones, se detiene. También comprueba que los hooks de Git no hayan agregado archivos ni alterado los metadatos validados antes de pushear. Si falla una validación, el commit o el push, no publica. Los metadatos de la nueva versión quedan disponibles: corregir el error, ejecutar `pnpm release:prepare`, commitear y pushear los metadatos y publicar el artefacto resultante. Si falla el push después del commit, resolver el problema y pushear ese commit antes de publicar el tarball preparado. Si falla la publicación, comprobar primero si npm recibió la versión y reintentar sólo la publicación del mismo tarball. No ejecutar nuevamente `create-version` para reintentar la misma release.
+El commit se limita a los dos archivos de metadatos, incluidos sus cambios previos; revisar el código antes de ejecutar la release. No crea tags ni hace force push. Si cambian el checkout, el upstream o los metadatos durante las validaciones, se detiene. También comprueba que los hooks de Git no hayan agregado archivos ni alterado los metadatos validados antes de pushear. Si falla una validación o el push, no publica y el commit de release queda en local: `pnpm create-version` lo detecta y retoma sólo lo que falte (preparar, pushear, publicar), sin volver a subir la versión. Si falla la publicación, comprobar primero si npm recibió la versión; si no, `pnpm create-version` reintenta sólo la publicación del mismo tarball.
 
 Los pasos individuales siguen disponibles:
 

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

@@ -3,10 +3,11 @@ import { c as _c } from "react/compiler-runtime";
 import { useEffect, useRef, useSyncExternalStore } from "react";
 import { Monitor, Moon, Sun, SunMoon } from "lucide-react";
 import { animate, frame } from "motion/react";
+import { MotionSlot } from "../motion/motion-slot.js";
 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 { MILLISECONDS_PER_SECOND, 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 = [
@@ -26,8 +27,6 @@ const THEME_OPTIONS = [
 		value: "system"
 	}
 ];
-/** Converts the public duration (milliseconds) to Motion seconds. */
-const MILLISECONDS_PER_SECOND = 1e3;
 export const AnimatedThemeToggler = (t0) => {
 	const $ = _c(34);
 	let className;
@@ -134,7 +133,10 @@ export const AnimatedThemeToggler = (t0) => {
 	}
 	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" });
+		t6 = !isThemeReady ? /* @__PURE__ */ _jsx(SunMoon, { "aria-hidden": "true" }) : /* @__PURE__ */ _jsx(MotionSlot, {
+			kind: "icon-swap",
+			children: isDark ? /* @__PURE__ */ _jsx(Moon, { "aria-hidden": "true" }) : /* @__PURE__ */ _jsx(Sun, { "aria-hidden": "true" })
+		}, isDark ? "dark" : "light");
 		$[16] = isDark;
 		$[17] = isThemeReady;
 		$[18] = t6;

package/dist/components/checkbox.js

@@ -30,10 +30,11 @@ function Checkbox(t0) {
 	let t2;
 	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
 		t2 = /* @__PURE__ */ _jsx(MotionSlot, {
-			kind: "selection",
+			kind: "check",
 			children: /* @__PURE__ */ _jsx(CheckboxPrimitive.Indicator, {
+				forceMount: true,
 				"data-slot": "checkbox-indicator",
-				className: "grid place-content-center text-current transition-none [&>svg]:size-3.5",
+				className: "grid place-content-center text-current transition-none data-unchecked:opacity-0 [&>svg]:size-3.5",
 				children: /* @__PURE__ */ _jsx(CheckIcon, {})
 			})
 		});
@@ -44,7 +45,7 @@ function Checkbox(t0) {
 	let t3;
 	if ($[6] !== props || $[7] !== t1) {
 		t3 = /* @__PURE__ */ _jsx(MotionSlot, {
-			kind: "field",
+			kind: "toggle",
 			children: /* @__PURE__ */ _jsx(CheckboxPrimitive.Root, {
 				"data-slot": "checkbox",
 				className: t1,

package/dist/components/data-table.js

@@ -2,6 +2,8 @@
 import * as React from "react";
 import { flexRender, getCoreRowModel, getFilteredRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
 import { CircleAlert, ChevronDown, ChevronRight, Ellipsis, Eraser, X } from "lucide-react";
+import { cn } from "../lib/utils.js";
+import { MotionSlot } from "../motion/motion-slot.js";
 import { Button } from "./button.js";
 import { Badge } from "./badge.js";
 import { FilterQueryBar } from "./filter-query-bar.js";
@@ -510,12 +512,12 @@ export function DataTable({ columns, data, emptyMessage, toolbarActions, onVisib
 								className: "flex w-full items-center gap-1.5 text-left",
 								onClick: () => handleGroupToggle(groupKey),
 								type: "button",
-								children: [isGroupCollapsed ? /* @__PURE__ */ _jsx(ChevronRight, {
-									"aria-hidden": "true",
-									className: "size-4 shrink-0"
-								}) : /* @__PURE__ */ _jsx(ChevronDown, {
-									"aria-hidden": "true",
-									className: "size-4 shrink-0"
+								children: [/* @__PURE__ */ _jsx(MotionSlot, {
+									kind: "rotate",
+									children: /* @__PURE__ */ _jsx(ChevronRight, {
+										"aria-hidden": "true",
+										className: cn("size-4 shrink-0", !isGroupCollapsed && "rotate-90")
+									})
 								}), groupHeaderContent]
 							}) : groupHeaderContent
 						})
@@ -765,12 +767,18 @@ export function DataTable({ columns, data, emptyMessage, toolbarActions, onVisib
 						asChild: true,
 						children: /* @__PURE__ */ _jsxs(Button, {
 							"aria-label": columnVisibilityButtonLabel,
-							className: "relative",
+							className: "relative aria-expanded:*:data-[slot=data-table-columns-chevron]:rotate-180",
 							type: "button",
 							variant: "outline",
 							children: [
 								columnVisibilityButtonLabel,
-								/* @__PURE__ */ _jsx(ChevronDown, { "aria-hidden": "true" }),
+								/* @__PURE__ */ _jsx(MotionSlot, {
+									kind: "rotate",
+									children: /* @__PURE__ */ _jsx(ChevronDown, {
+										"aria-hidden": "true",
+										"data-slot": "data-table-columns-chevron"
+									})
+								}),
 								hasToolbarChanges ? /* @__PURE__ */ _jsxs(_Fragment, { children: [/* @__PURE__ */ _jsx("span", {
 									"aria-hidden": "true",
 									className: "absolute -right-0.5 -top-0.5 size-2 rounded-full bg-destructive ring-2 ring-background"

package/dist/components/dialog.js

@@ -203,14 +203,17 @@ function DialogContent(t0) {
 		t5 = showCloseButton && /* @__PURE__ */ _jsx(DialogPrimitive.Close, {
 			"data-slot": "dialog-close",
 			asChild: true,
-			children: /* @__PURE__ */ _jsxs(Button, {
-				variant: "ghost",
-				className: "absolute top-2 right-2",
-				size: "icon-sm",
-				children: [/* @__PURE__ */ _jsx(XIcon, {}), /* @__PURE__ */ _jsx("span", {
-					className: "sr-only",
-					children: "Cerrar"
-				})]
+			children: /* @__PURE__ */ _jsx(MotionSlot, {
+				kind: "delayed-pop",
+				children: /* @__PURE__ */ _jsxs(Button, {
+					variant: "ghost",
+					className: "absolute top-2 right-2",
+					size: "icon-sm",
+					children: [/* @__PURE__ */ _jsx(XIcon, {}), /* @__PURE__ */ _jsx("span", {
+						className: "sr-only",
+						children: "Cerrar"
+					})]
+				})
 			})
 		});
 		$[8] = showCloseButton;

package/dist/components/dropdown-menu.js

@@ -2,6 +2,7 @@
 import { c as _c } from "react/compiler-runtime";
 import * as React from "react";
 import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
+import { GlideSlot } from "../motion/glide-slot.js";
 import { MotionSlot } from "../motion/motion-slot.js";
 import { MotionPresence, MotionOpenProvider, useMotionOpenState } from "../motion/presence.js";
 import { cn } from "../lib/utils.js";
@@ -129,13 +130,16 @@ function DropdownMenuContent(t0) {
 	if ($[7] !== align || $[8] !== props || $[9] !== sideOffset || $[10] !== t4) {
 		t5 = /* @__PURE__ */ _jsx(MotionSlot, {
 			kind: "surface",
-			children: /* @__PURE__ */ _jsx(DropdownMenuPrimitive.Content, {
-				forceMount: true,
-				"data-slot": "dropdown-menu-content",
-				sideOffset,
-				align,
-				className: t4,
-				...props
+			children: /* @__PURE__ */ _jsx(GlideSlot, {
+				preset: "menu",
+				children: /* @__PURE__ */ _jsx(DropdownMenuPrimitive.Content, {
+					forceMount: true,
+					"data-slot": "dropdown-menu-content",
+					sideOffset,
+					align,
+					className: t4,
+					...props
+				})
 			})
 		});
 		$[7] = align;
@@ -279,7 +283,10 @@ function DropdownMenuCheckboxItem(t0) {
 		t2 = /* @__PURE__ */ _jsx("span", {
 			className: "pointer-events-none absolute right-2 flex items-center justify-center",
 			"data-slot": "dropdown-menu-checkbox-item-indicator",
-			children: /* @__PURE__ */ _jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ _jsx(CheckIcon, {}) })
+			children: /* @__PURE__ */ _jsx(MotionSlot, {
+				kind: "item-check",
+				children: /* @__PURE__ */ _jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ _jsx(CheckIcon, {}) })
+			})
 		});
 		$[8] = t2;
 	} else {
@@ -366,7 +373,10 @@ function DropdownMenuRadioItem(t0) {
 		t2 = /* @__PURE__ */ _jsx("span", {
 			className: "pointer-events-none absolute right-2 flex items-center justify-center",
 			"data-slot": "dropdown-menu-radio-item-indicator",
-			children: /* @__PURE__ */ _jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ _jsx(CheckIcon, {}) })
+			children: /* @__PURE__ */ _jsx(MotionSlot, {
+				kind: "item-check",
+				children: /* @__PURE__ */ _jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ _jsx(CheckIcon, {}) })
+			})
 		});
 		$[7] = t2;
 	} else {
@@ -639,11 +649,14 @@ function DropdownMenuSubContent(t0) {
 	if ($[5] !== props || $[6] !== t2) {
 		t3 = /* @__PURE__ */ _jsx(MotionSlot, {
 			kind: "surface",
-			children: /* @__PURE__ */ _jsx(DropdownMenuPrimitive.SubContent, {
-				forceMount: true,
-				"data-slot": "dropdown-menu-sub-content",
-				className: t2,
-				...props
+			children: /* @__PURE__ */ _jsx(GlideSlot, {
+				preset: "menu",
+				children: /* @__PURE__ */ _jsx(DropdownMenuPrimitive.SubContent, {
+					forceMount: true,
+					"data-slot": "dropdown-menu-sub-content",
+					className: t2,
+					...props
+				})
 			})
 		});
 		$[5] = props;

package/dist/components/form.js

@@ -306,7 +306,7 @@ function FormMessage(t0) {
 	let t2;
 	if ($[5] !== body || $[6] !== formMessageId || $[7] !== props || $[8] !== t1) {
 		t2 = /* @__PURE__ */ _jsx(MotionSlot, {
-			kind: "fade",
+			kind: "message",
 			children: /* @__PURE__ */ _jsx("p", {
 				"data-slot": "form-message",
 				id: formMessageId,

package/dist/components/radio-group.js

@@ -79,7 +79,7 @@ function RadioGroupItem(t0) {
 	let t3;
 	if ($[6] !== props || $[7] !== t1) {
 		t3 = /* @__PURE__ */ _jsx(MotionSlot, {
-			kind: "field",
+			kind: "toggle",
 			children: /* @__PURE__ */ _jsx(RadioGroupPrimitive.Item, {
 				"data-slot": "radio-group-item",
 				className: t1,

package/dist/components/select.js

@@ -2,6 +2,7 @@
 import { c as _c } from "react/compiler-runtime";
 import * as React from "react";
 import { Select as SelectPrimitive } from "radix-ui";
+import { GlideSlot } from "../motion/glide-slot.js";
 import { MotionSlot } from "../motion/motion-slot.js";
 import { cn } from "../lib/utils.js";
 import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react";
@@ -115,7 +116,7 @@ function SelectTrigger(t0) {
 	const size = t1 === undefined ? "default" : t1;
 	let t2;
 	if ($[5] !== className) {
-		t2 = cn("flex w-fit items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className);
+		t2 = cn("flex w-fit items-center justify-between gap-1.5 rounded-lg border data-[state=open]:*:data-[slot=select-icon]:rotate-180 border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className);
 		$[5] = className;
 		$[6] = t2;
 	} else {
@@ -125,7 +126,13 @@ function SelectTrigger(t0) {
 	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
 		t3 = /* @__PURE__ */ _jsx(SelectPrimitive.Icon, {
 			asChild: true,
-			children: /* @__PURE__ */ _jsx(ChevronDownIcon, { className: "pointer-events-none size-4 text-muted-foreground" })
+			children: /* @__PURE__ */ _jsx(MotionSlot, {
+				kind: "rotate",
+				children: /* @__PURE__ */ _jsx(ChevronDownIcon, {
+					"data-slot": "select-icon",
+					className: "pointer-events-none size-4 text-muted-foreground"
+				})
+			})
 		});
 		$[7] = t3;
 	} else {
@@ -234,18 +241,21 @@ function SelectContent(t0) {
 	if ($[17] !== align || $[18] !== position || $[19] !== props || $[20] !== t3 || $[21] !== t5 || $[22] !== t9) {
 		t11 = /* @__PURE__ */ _jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ _jsx(MotionSlot, {
 			kind: "surface",
-			children: /* @__PURE__ */ _jsxs(SelectPrimitive.Content, {
-				"data-slot": "select-content",
-				"data-align-trigger": t3,
-				className: t5,
-				position,
-				align,
-				...props,
-				children: [
-					t6,
-					t9,
-					t10
-				]
+			children: /* @__PURE__ */ _jsx(GlideSlot, {
+				preset: "menu",
+				children: /* @__PURE__ */ _jsxs(SelectPrimitive.Content, {
+					"data-slot": "select-content",
+					"data-align-trigger": t3,
+					className: t5,
+					position,
+					align,
+					...props,
+					children: [
+						t6,
+						t9,
+						t10
+					]
+				})
 			})
 		}) });
 		$[17] = align;
@@ -334,7 +344,10 @@ function SelectItem(t0) {
 	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
 		t2 = /* @__PURE__ */ _jsx("span", {
 			className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center",
-			children: /* @__PURE__ */ _jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ _jsx(CheckIcon, { className: "pointer-events-none" }) })
+			children: /* @__PURE__ */ _jsx(MotionSlot, {
+				kind: "item-check",
+				children: /* @__PURE__ */ _jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ _jsx(CheckIcon, { className: "pointer-events-none" }) })
+			})
 		});
 		$[6] = t2;
 	} else {
@@ -351,7 +364,7 @@ function SelectItem(t0) {
 	let t4;
 	if ($[9] !== props || $[10] !== t1 || $[11] !== t3) {
 		t4 = /* @__PURE__ */ _jsx(MotionSlot, {
-			kind: "field",
+			kind: "list-item",
 			children: /* @__PURE__ */ _jsxs(SelectPrimitive.Item, {
 				"data-slot": "select-item",
 				className: t1,