beez-ui 0.6.0 → 0.6.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/README.md +260 -246
  3. package/package.json +4 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # Cambios
2
2
 
3
+ ## 0.6.1 - 2026-09-26
4
+
5
+ - Actualiza pnpm a 12.6.0 y next a 16.3.6
6
+ - Add terminal UI for interactive prompts and spinners
7
+ - Update release banner and icons for improved visibility
8
+ - Remove create-version script
9
+ - Update release command to create-version and improve documentation
10
+
3
11
  ## 0.6.0 - 2026-09-23
4
12
 
5
13
  - Actualiza el paquete a la versión 0.6.0.
package/README.md CHANGED
@@ -1,246 +1,260 @@
1
- # beez-ui
2
-
3
- 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.
4
-
5
- ## Storybook
6
-
7
- ```bash
8
- pnpm storybook
9
- ```
10
-
11
- Abre `http://localhost:6006` para explorar los componentes con controles de texto,
12
- variantes, tamaños, estados y comportamiento. El selector de la barra permite
13
- probar el tema claro, oscuro o del sistema. Las stories de componentes compuestos
14
- incluyen sus piezas en ejemplos completos; los campos editables y selectores
15
- sincronizan sus interacciones con Controls. `BeezUIProvider` configura el preview
16
- y no forma parte del catálogo. Las notificaciones se exploran en `ThemedToaster`,
17
- sin duplicar una story de `Toaster`; `WhatsappIcon` está en la sección `Icons`.
18
-
19
- ```bash
20
- pnpm build-storybook # Genera storybook-static para servirlo o publicarlo
21
- pnpm typecheck:stories # Comprueba stories y configuración con TypeScript
22
- pnpm test:storybook # Build y navegación/interacciones en Chromium y WebKit
23
- ```
24
-
25
- El catálogo consume los exports públicos y el CSS compilado de la librería. Los
26
- scripts compilan `beez-ui` antes de arrancar; si editás sus fuentes con Storybook
27
- abierto, ejecutá `pnpm build` para actualizar el paquete que muestra el preview.
28
- Los cambios en las stories se actualizan durante el desarrollo. Storybook y sus
29
- addons son dependencias de desarrollo y no se incluyen en el paquete publicado.
30
-
31
- Configuración basada en [React con Vite](https://storybook.js.org/docs/get-started/frameworks/react-vite)
32
- y [Controls](https://storybook.js.org/docs/essentials/controls).
33
-
34
- ## Uso del paquete
35
-
36
- ```tsx
37
- import { Button, Avatar, AvatarImage, DataTable, Calendar } from "beez-ui";
38
- ```
39
-
40
- 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.
41
-
42
- La utilidad `cn`, también exportada desde `beez-ui`, usa el paquete `cn` para combinar clases condicionales y resolver conflictos de Tailwind.
43
-
44
- ```css
45
- @import "beez-ui/styles.css";
46
- ```
47
-
48
- `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.
49
-
50
- 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.
51
-
52
- `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.
53
-
54
- 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`.
55
-
56
- 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.
57
-
58
- ## Movimiento
59
-
60
- Las nuevas animaciones usan la dependencia `motion`: `animate` controla la
61
- reproducción, `hover` y `press` los gestos, y `AnimatePresence` / `usePresence`
62
- retienen los overlays durante su salida. Los presets y tiempos viven en
63
- `src/motion/`. No se usan keyframes CSS para estas animaciones.
64
-
65
- `MotionSlot` anima el nodo original del primitive mediante refs compuestos,
66
- sin agregar wrappers al DOM ni reemplazar sus handlers. Las curvas y springs
67
- siguen los tokens de [beui motion](https://beui.dev/components/motion):
68
-
69
- - `Button` se comprime con spring a 0.93 y se eleva a 1.02 al hover, solo en
70
- dispositivos con hover real (`(hover: hover) and (pointer: fine)`); los ítems de
71
- `Sidebar` y `Tabs` se comprimen a 0.98.
72
- - `Checkbox` y `RadioGroup` se comprimen a 0.92. La marca del checkbox aparece
73
- con pop y trazo (`pathLength`) y sale con blur; el punto del radio aparece con spring.
74
- - El thumb de `Switch` viaja con un spring pesado y se aplasta mientras se presiona.
75
- - `Input`, `Textarea`, `InputGroup` y `SelectTrigger` tiemblan al pasar a
76
- `aria-invalid="true"`; `FormMessage` entra con blur.
77
- - `Tooltip` entra con blur, escala y desplazamiento desde el trigger.
78
- `Popover`, `HoverCard`, `DropdownMenu` y `Select` escalan desde 0.96 y se revelan
79
- con un clip desde la esquina más cercana al trigger.
80
- - `Dialog` y `AlertDialog` suben con spring; `Sheet` entra desde su borde con spring.
81
- - `GlideSlot` desliza el indicador activo entre ítems como un `layoutId` compartido:
82
- la pestaña activa de `Tabs` (fondo o subrayado), el ítem activo de `SidebarMenu` y
83
- el ítem resaltado de `DropdownMenu` y `Select`, también con teclado. Una copia
84
- transitoria viaja entre ítems y se elimina al llegar, devolviendo el estilo al ítem.
85
- - El chevron de `SelectTrigger` gira 180° al abrir y los chevrons de `DataTable`
86
- (grupos y columnas) giran en lugar de cambiar de ícono; CSS define el ángulo final.
87
- - Las opciones del `Select` entran escalonadas con blur (las primeras 10; el resto
88
- solo se desvanece) y los checks de ítems de `Select` y `DropdownMenu` aparecen con pop.
89
- - El ícono de `AnimatedThemeToggler` cambia con blur y escala; el botón de cierre de
90
- `Dialog` aparece con un pop demorado.
91
- - El contenido de `Tabs` entra con un desplazamiento de 4 px. Cards y enlaces
92
- responden al hover. El skeleton pulsa con Motion. Las animaciones especializadas
93
- existentes de Embla, Sonner y rough-notation se conservan.
94
-
95
- El contenido que está saliendo deja de ser interactivo y accesible de inmediato.
96
- Cada familia de overlays tiene un contexto de visibilidad independiente para
97
- soportar composiciones anidadas; los portales sin nodo visible no bloquean el
98
- cierre del padre. `Select` conserva su desmontaje nativo y usa Motion en la entrada.
99
- La elección explícita de `forceMount` permanece bajo control del consumidor.
100
-
101
- Se respeta `prefers-reduced-motion`: las nuevas animaciones se cancelan y se
102
- restauran los estilos; las anotaciones se dibujan sin animación y el texto aparece
103
- completo, incluidas todas las palabras de una secuencia. Los controles del carrusel
104
- avanzan directamente. El CSS solo aporta el fallback de movimiento reducido para
105
- los efectos heredados. `BeezUIProvider` configura `MotionConfig` con
106
- `reducedMotion="user"`. El primer render conserva el contrato de SSR.
107
-
108
- El selector aplica el tema inmediatamente y anima su icono con Motion; no depende
109
- de View Transitions nativas ni de una animación para completar el cambio. Los estilos temporales se liberan al terminar
110
- la reproducción. Las stories permiten probar los gestos y estados reales; el
111
- selector de tema de la story y la barra de Storybook se mantienen sincronizados.
112
-
113
- ## Providers de UI
114
-
115
- Elegir un único `BeezUIProvider` según el framework. Los componentes y `useTheme` siempre se importan desde `beez-ui`.
116
-
117
- | Import del provider | Navegación | Imágenes de avatar |
118
- | --- | --- | --- |
119
- | `beez-ui` | Anclas nativas | `@unpic/react` |
120
- | `beez-ui/next` | `next/link` | `next/image` |
121
- | `beez-ui/tanstack` | TanStack Router | `@unpic/react` |
122
-
123
- ```tsx
124
- "use client";
125
-
126
- import type { ReactNode } from "react";
127
- import { BeezUIProvider } from "beez-ui/next";
128
-
129
- export function Providers({ children }: { children: ReactNode }) {
130
- return (
131
- <BeezUIProvider themeOptions={{ storageKey: "tutribu-theme", defaultTheme: "system" }}>
132
- {children}
133
- </BeezUIProvider>
134
- );
135
- }
136
- ```
137
-
138
- Todos los providers usan `next-themes` con clases CSS. El consumidor configura `themeOptions` y conecta sus controles a `useTheme` desde `beez-ui`. Al migrar una aplicación, conservar su clave de almacenamiento y retirar los scripts y estados anteriores que modifiquen el tema. En Next, mantener `suppressHydrationWarning` en el elemento `html` porque el provider restaura la preferencia antes de hidratar.
139
-
140
- El provider de Next desactiva prefetch y optimización de imágenes por defecto, como LaTribu. Se activan con `prefetch` y `optimizeImages`; para optimizar imágenes remotas hay que configurar sus hosts en la app. `Link` y los enlaces de paginación usan el adaptador del provider. El contrato común de `Link` acepta href como string y atributos de ancla, no todas las opciones exclusivas de Next.
141
-
142
- El provider de TanStack se monta dentro del router de la aplicación. Preserva query y hash; `prefetch` activa precarga por intención. TanStack no aporta un componente Image propio: Unpic genera variantes responsivas para CDNs compatibles y conserva las URLs que no reconoce; no instala un servidor de optimización.
143
-
144
- Next y TanStack Router son peers opcionales aislados en sus entrypoints. El provider nativo admite overrides mediante `components`. Sin provider, los componentes conservan anclas e imágenes HTML como fallback.
145
-
146
- ## Responsabilidades del consumidor
147
-
148
- - Tema: `AnimatedThemeToggler` y `ThemedToaster` consumen el contexto compartido. Sus props explícitas de tema siguen disponibles para usos controlados.
149
- - Navegación: `PaginationNext`, `PaginationPrevious` y `PaginationLink` usan anclas nativas. El prop opcional `component` admite el adaptador del router que elija la app. Sin proveedor usa el elemento nativo; con el proveedor de Next usa su navegación cliente.
150
- - Sidebar: `defaultOpen` y el modo controlado conservan la semántica de LaTribu. `storageKey` activa opcionalmente persistencia local segura tras hidratar, sin cambiar la cookie pública `sidebar_state` ni sus siete días de duración.
151
- - Formularios y tablas: el consumidor provee sus datos, validaciones y callbacks. No se importan servicios, modelos de negocio ni endpoints de agenda-mensual.
152
-
153
- ## Componentes incorporados desde agenda-mensual
154
-
155
- `Alert`, `AnimatedThemeToggler`, `Calendar`, `DataTable`, `FilterQueryBar`, `Form`, `Highlighter`, `InputGroup`, `Label`, `RadioGroup`, `TypingAnimation` y `ThemedToaster`, junto con sus subcomponentes, tipos y gramática de filtros.
156
-
157
- `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.
158
-
159
- 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.
160
-
161
- 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. Se mantienen `Button.asChild`, estados deshabilitados y 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.
162
-
163
- ## React Compiler
164
-
165
- El build usa el port de React Compiler en Rust de [Oxc](https://oxc.rs/blog/2026-08-18-react-compiler-support), mediante `oxc-transform-react`. Esta integración sigue marcada como experimental por Oxc.
166
-
167
- Las optimizaciones se incluyen en el JavaScript publicado: el consumidor no necesita habilitar React Compiler en Vite, Next ni otro bundler. El target es React 19 y utiliza `react/compiler-runtime`, incluido en el peer React 19.2; no se añade un runtime independiente.
168
-
169
- TypeScript 7 valida los tipos y genera las declaraciones. Oxc recibe los fuentes originales y ejecuta React Compiler antes de eliminar TypeScript y transformar JSX. Conserva ESM, los exports y las directivas de cliente. Sólo los módulos cuyo prólogo declara `"use client"` reciben memoización automática; los módulos compatibles con Server Components se emiten sin cachés de cliente. Esto evita introducir hooks del runtime de cliente en el render servidor de Next.
170
-
171
- La cobertura depende de las heurísticas del compilador y de las reglas de React: algunas funciones conservan su implementación sin optimizar. Las memoizaciones y comentarios del código fuente permanecen intactos. El build informa cuántos módulos incluyen memoización automática y falla ante errores fatales de transformación.
172
-
173
- ```sh
174
- # Comparar el comportamiento sin memoización automática.
175
- pnpm test:uncompiled
176
-
177
- # Volver a generar la distribución optimizada.
178
- pnpm build
179
- ```
180
-
181
- `test:uncompiled` usa `pnpm build --no-react-compiler` y ejecuta Vitest. CI y `release:prepare` ejecutan esa comparación antes del check normal, que restaura el build optimizado. Los consumidores de prueba no habilitan un segundo compilador: ejercen el paquete generado, incluido un componente de servidor real en Next.
182
-
183
- ## Desarrollo y validación
184
-
185
- Usar pnpm **12.3.4**. Las dependencias tienen rangos `^` y el lockfile fija las versiones verificadas.
186
-
187
- ```sh
188
- pnpm install --frozen-lockfile
189
- pnpm check
190
- pnpm exec playwright install chromium webkit
191
- pnpm test:browser
192
- pnpm build
193
- pnpm release:prepare
194
- ```
195
-
196
- `pnpm build` genera las declaraciones con TypeScript 7, JavaScript con Oxc/React Compiler y CSS con el CLI de Tailwind. `pnpm check` ejecuta ESLint 10, los typechecks separados de código y tests con TypeScript 7, y Vitest 5. `tests/tsconfig.json` incorpora los matchers de Testing Library y los tipos de Vite sin incluirlos en el código de producción. `test:browser` verifica una app React/Vite nativa y una app Next real en Chromium y WebKit, tanto en desktop como en móvil. Los tests unitarios importan los archivos compilados. Los consumidores de navegador no instalan plugins de Tailwind, y una prueba adicional sirve el tarball por HTTP sin procesadores CSS para verificar estilos computados y carga de fuentes. Una prueba adicional instala el tarball en un consumidor aislado sin Next y verifica render, filtrado y declaraciones públicas.
197
-
198
- Los tests resuelven `beez-ui`, `beez-ui/next` y `beez-ui/tanstack` mediante rutas explícitas a las declaraciones compiladas en `tests/tsconfig.json`. Ejecutar `pnpm build` después de clonar o si falta `dist`; los comandos de validación completos ya lo hacen. Si el editor conserva diagnósticos anteriores después del build, reiniciar su servidor de TypeScript.
199
-
200
- El compilador `tsc` es TypeScript 7. Para `typescript-eslint`, se mantiene la [API de compatibilidad oficial de TypeScript 6](https://devblogs.microsoft.com/typescript/announcing-typescript-7-0/#running-side-by-side-with-typescript-6.0) mediante un alias; no reemplaza el compilador de los typechecks.
201
-
202
- ## Crear y publicar una versión
203
-
204
- 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:
205
-
206
- ```sh
207
- pnpm run create-version patch
208
- pnpm run create-version minor --notes "Agrega un componente" --notes "Amplía sus opciones"
209
- pnpm run create-version 0.5.0 --notes "Describe los cambios de esta versión"
210
- ```
211
-
212
- 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.
213
-
214
- El comando ejecuta el flujo completo:
215
-
216
- 1. Actualiza `package.json` y agrega la entrada del changelog con fecha UTC, conservando el historial.
217
- 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.
218
- 3. Genera el tarball en `releases/<version>-<sha256>/beez-ui-<version>.tgz` y valida su contenido, exports e integridad.
219
- 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.
220
- 5. Publica ese mismo artefacto en npm con acceso público y etiqueta `latest`.
221
-
222
- 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`.
223
-
224
- 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.
225
-
226
- Los pasos individuales siguen disponibles:
227
-
228
- ```sh
229
- # Sólo validar y empaquetar la versión actual, sin publicarla.
230
- pnpm release:prepare
231
-
232
- # Publicar un artefacto ya preparado.
233
- pnpm release:publish releases/<version>-<sha256>/beez-ui-<version>.tgz
234
- ```
235
-
236
- `release:publish` vuelve a verificar nombre, versión, contenido y checksum antes de invocar `npm publish`. El paquete excluye fuentes privadas, tests, scripts, `.env` y `.npmrc`; incluye JavaScript, declaraciones, CSS, fuentes tipográficas y licencias. Conserva releases anteriores.
237
-
238
- `prepack` ejecuta el build para los empaquetados manuales. `dist` y `releases` son generados e ignorados por Git. La CI verifica los checks y los tres providers en ambos motores de navegador en Linux y Windows; no publica automáticamente.
239
-
240
- Tras publicar, los consumidores pueden instalar `pnpm add beez-ui`. También pueden instalar directamente el `.tgz` validado antes de una publicación. LaTribu consume la versión publicada en npm y fija la resolución e integridad mediante su lockfile, sin guardar tarballs locales.
241
-
242
- Los componentes nuevos de shadcn/ui se agregan mediante su CLI en esta biblioteca y se exportan desde la raíz. No editar las copias instaladas en los consumidores.
243
-
244
- ## Procedencia
245
-
246
- Fuentes originales: `guidomodarelli/TuTribu` (`components/ui`) y `agenda-mensual` (`src/components/ui`). Se preservan las funcionalidades y los comentarios que explican sus decisiones; la integración adapta imports, contratos y dependencias del consumidor. Consultar `LICENSE.md` para la licencia original de shadcn/ui y `assets/fonts/*-LICENSE.txt` para las fuentes. El icono de WhatsApp proviene del registry `@svgl`.
1
+ # beez-ui
2
+
3
+ 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.
4
+
5
+ ## Storybook
6
+
7
+ ```bash
8
+ pnpm storybook
9
+ ```
10
+
11
+ Abre `http://localhost:6006` para explorar los componentes con controles de texto,
12
+ variantes, tamaños, estados y comportamiento. El selector de la barra permite
13
+ probar el tema claro, oscuro o del sistema. Las stories de componentes compuestos
14
+ incluyen sus piezas en ejemplos completos; los campos editables y selectores
15
+ sincronizan sus interacciones con Controls. `BeezUIProvider` configura el preview
16
+ y no forma parte del catálogo. Las notificaciones se exploran en `ThemedToaster`,
17
+ sin duplicar una story de `Toaster`; `WhatsappIcon` está en la sección `Icons`.
18
+
19
+ ```bash
20
+ pnpm build-storybook # Genera storybook-static para servirlo o publicarlo
21
+ pnpm typecheck:stories # Comprueba stories y configuración con TypeScript
22
+ pnpm test:storybook # Build y navegación/interacciones en Chromium y WebKit
23
+ ```
24
+
25
+ El catálogo consume los exports públicos y el CSS compilado de la librería. Los
26
+ scripts compilan `beez-ui` antes de arrancar; si editás sus fuentes con Storybook
27
+ abierto, ejecutá `pnpm build` para actualizar el paquete que muestra el preview.
28
+ Los cambios en las stories se actualizan durante el desarrollo. Storybook y sus
29
+ addons son dependencias de desarrollo y no se incluyen en el paquete publicado.
30
+
31
+ Configuración basada en [React con Vite](https://storybook.js.org/docs/get-started/frameworks/react-vite)
32
+ y [Controls](https://storybook.js.org/docs/essentials/controls).
33
+
34
+ ## Uso del paquete
35
+
36
+ ```tsx
37
+ import { Button, Avatar, AvatarImage, DataTable, Calendar } from "beez-ui";
38
+ ```
39
+
40
+ 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.
41
+
42
+ La utilidad `cn`, también exportada desde `beez-ui`, usa el paquete `cn` para combinar clases condicionales y resolver conflictos de Tailwind.
43
+
44
+ ```css
45
+ @import "beez-ui/styles.css";
46
+ ```
47
+
48
+ `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.
49
+
50
+ 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.
51
+
52
+ `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.
53
+
54
+ 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`.
55
+
56
+ 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.
57
+
58
+ ## Movimiento
59
+
60
+ Las nuevas animaciones usan la dependencia `motion`: `animate` controla la
61
+ reproducción, `hover` y `press` los gestos, y `AnimatePresence` / `usePresence`
62
+ retienen los overlays durante su salida. Los presets y tiempos viven en
63
+ `src/motion/`. No se usan keyframes CSS para estas animaciones.
64
+
65
+ `MotionSlot` anima el nodo original del primitive mediante refs compuestos,
66
+ sin agregar wrappers al DOM ni reemplazar sus handlers. Las curvas y springs
67
+ siguen los tokens de [beui motion](https://beui.dev/components/motion):
68
+
69
+ - `Button` se comprime con spring a 0.93 y se eleva a 1.02 al hover, solo en
70
+ dispositivos con hover real (`(hover: hover) and (pointer: fine)`); los ítems de
71
+ `Sidebar` y `Tabs` se comprimen a 0.98.
72
+ - `Checkbox` y `RadioGroup` se comprimen a 0.92. La marca del checkbox aparece
73
+ con pop y trazo (`pathLength`) y sale con blur; el punto del radio aparece con spring.
74
+ - El thumb de `Switch` viaja con un spring pesado y se aplasta mientras se presiona.
75
+ - `Input`, `Textarea`, `InputGroup` y `SelectTrigger` tiemblan al pasar a
76
+ `aria-invalid="true"`; `FormMessage` entra con blur.
77
+ - `Tooltip` entra con blur, escala y desplazamiento desde el trigger.
78
+ `Popover`, `HoverCard`, `DropdownMenu` y `Select` escalan desde 0.96 y se revelan
79
+ con un clip desde la esquina más cercana al trigger.
80
+ - `Dialog` y `AlertDialog` suben con spring; `Sheet` entra desde su borde con spring.
81
+ - `GlideSlot` desliza el indicador activo entre ítems como un `layoutId` compartido:
82
+ la pestaña activa de `Tabs` (fondo o subrayado), el ítem activo de `SidebarMenu` y
83
+ el ítem resaltado de `DropdownMenu` y `Select`, también con teclado. Una copia
84
+ transitoria viaja entre ítems y se elimina al llegar, devolviendo el estilo al ítem.
85
+ - El chevron de `SelectTrigger` gira 180° al abrir y los chevrons de `DataTable`
86
+ (grupos y columnas) giran en lugar de cambiar de ícono; CSS define el ángulo final.
87
+ - Las opciones del `Select` entran escalonadas con blur (las primeras 10; el resto
88
+ solo se desvanece) y los checks de ítems de `Select` y `DropdownMenu` aparecen con pop.
89
+ - El ícono de `AnimatedThemeToggler` cambia con blur y escala; el botón de cierre de
90
+ `Dialog` aparece con un pop demorado.
91
+ - El contenido de `Tabs` entra con un desplazamiento de 4 px. Cards y enlaces
92
+ responden al hover. El skeleton pulsa con Motion. Las animaciones especializadas
93
+ existentes de Embla, Sonner y rough-notation se conservan.
94
+
95
+ El contenido que está saliendo deja de ser interactivo y accesible de inmediato.
96
+ Cada familia de overlays tiene un contexto de visibilidad independiente para
97
+ soportar composiciones anidadas; los portales sin nodo visible no bloquean el
98
+ cierre del padre. `Select` conserva su desmontaje nativo y usa Motion en la entrada.
99
+ La elección explícita de `forceMount` permanece bajo control del consumidor.
100
+
101
+ Se respeta `prefers-reduced-motion`: las nuevas animaciones se cancelan y se
102
+ restauran los estilos; las anotaciones se dibujan sin animación y el texto aparece
103
+ completo, incluidas todas las palabras de una secuencia. Los controles del carrusel
104
+ avanzan directamente. El CSS solo aporta el fallback de movimiento reducido para
105
+ los efectos heredados. `BeezUIProvider` configura `MotionConfig` con
106
+ `reducedMotion="user"`. El primer render conserva el contrato de SSR.
107
+
108
+ El selector aplica el tema inmediatamente y anima su icono con Motion; no depende
109
+ de View Transitions nativas ni de una animación para completar el cambio. Los estilos temporales se liberan al terminar
110
+ la reproducción. Las stories permiten probar los gestos y estados reales; el
111
+ selector de tema de la story y la barra de Storybook se mantienen sincronizados.
112
+
113
+ ## Providers de UI
114
+
115
+ Elegir un único `BeezUIProvider` según el framework. Los componentes y `useTheme` siempre se importan desde `beez-ui`.
116
+
117
+ | Import del provider | Navegación | Imágenes de avatar |
118
+ | --- | --- | --- |
119
+ | `beez-ui` | Anclas nativas | `@unpic/react` |
120
+ | `beez-ui/next` | `next/link` | `next/image` |
121
+ | `beez-ui/tanstack` | TanStack Router | `@unpic/react` |
122
+
123
+ ```tsx
124
+ "use client";
125
+
126
+ import type { ReactNode } from "react";
127
+ import { BeezUIProvider } from "beez-ui/next";
128
+
129
+ export function Providers({ children }: { children: ReactNode }) {
130
+ return (
131
+ <BeezUIProvider themeOptions={{ storageKey: "tutribu-theme", defaultTheme: "system" }}>
132
+ {children}
133
+ </BeezUIProvider>
134
+ );
135
+ }
136
+ ```
137
+
138
+ Todos los providers usan `next-themes` con clases CSS. El consumidor configura `themeOptions` y conecta sus controles a `useTheme` desde `beez-ui`. Al migrar una aplicación, conservar su clave de almacenamiento y retirar los scripts y estados anteriores que modifiquen el tema. En Next, mantener `suppressHydrationWarning` en el elemento `html` porque el provider restaura la preferencia antes de hidratar.
139
+
140
+ El provider de Next desactiva prefetch y optimización de imágenes por defecto, como LaTribu. Se activan con `prefetch` y `optimizeImages`; para optimizar imágenes remotas hay que configurar sus hosts en la app. `Link` y los enlaces de paginación usan el adaptador del provider. El contrato común de `Link` acepta href como string y atributos de ancla, no todas las opciones exclusivas de Next.
141
+
142
+ El provider de TanStack se monta dentro del router de la aplicación. Preserva query y hash; `prefetch` activa precarga por intención. TanStack no aporta un componente Image propio: Unpic genera variantes responsivas para CDNs compatibles y conserva las URLs que no reconoce; no instala un servidor de optimización.
143
+
144
+ Next y TanStack Router son peers opcionales aislados en sus entrypoints. El provider nativo admite overrides mediante `components`. Sin provider, los componentes conservan anclas e imágenes HTML como fallback.
145
+
146
+ ## Responsabilidades del consumidor
147
+
148
+ - Tema: `AnimatedThemeToggler` y `ThemedToaster` consumen el contexto compartido. Sus props explícitas de tema siguen disponibles para usos controlados.
149
+ - Navegación: `PaginationNext`, `PaginationPrevious` y `PaginationLink` usan anclas nativas. El prop opcional `component` admite el adaptador del router que elija la app. Sin proveedor usa el elemento nativo; con el proveedor de Next usa su navegación cliente.
150
+ - Sidebar: `defaultOpen` y el modo controlado conservan la semántica de LaTribu. `storageKey` activa opcionalmente persistencia local segura tras hidratar, sin cambiar la cookie pública `sidebar_state` ni sus siete días de duración.
151
+ - Formularios y tablas: el consumidor provee sus datos, validaciones y callbacks. No se importan servicios, modelos de negocio ni endpoints de agenda-mensual.
152
+
153
+ ## Componentes incorporados desde agenda-mensual
154
+
155
+ `Alert`, `AnimatedThemeToggler`, `Calendar`, `DataTable`, `FilterQueryBar`, `Form`, `Highlighter`, `InputGroup`, `Label`, `RadioGroup`, `TypingAnimation` y `ThemedToaster`, junto con sus subcomponentes, tipos y gramática de filtros.
156
+
157
+ `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.
158
+
159
+ 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.
160
+
161
+ 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. Se mantienen `Button.asChild`, estados deshabilitados y 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.
162
+
163
+ ## React Compiler
164
+
165
+ El build usa el port de React Compiler en Rust de [Oxc](https://oxc.rs/blog/2026-08-18-react-compiler-support), mediante `oxc-transform-react`. Esta integración sigue marcada como experimental por Oxc.
166
+
167
+ Las optimizaciones se incluyen en el JavaScript publicado: el consumidor no necesita habilitar React Compiler en Vite, Next ni otro bundler. El target es React 19 y utiliza `react/compiler-runtime`, incluido en el peer React 19.2; no se añade un runtime independiente.
168
+
169
+ TypeScript 7 valida los tipos y genera las declaraciones. Oxc recibe los fuentes originales y ejecuta React Compiler antes de eliminar TypeScript y transformar JSX. Conserva ESM, los exports y las directivas de cliente. Sólo los módulos cuyo prólogo declara `"use client"` reciben memoización automática; los módulos compatibles con Server Components se emiten sin cachés de cliente. Esto evita introducir hooks del runtime de cliente en el render servidor de Next.
170
+
171
+ La cobertura depende de las heurísticas del compilador y de las reglas de React: algunas funciones conservan su implementación sin optimizar. Las memoizaciones y comentarios del código fuente permanecen intactos. El build informa cuántos módulos incluyen memoización automática y falla ante errores fatales de transformación.
172
+
173
+ ```sh
174
+ # Comparar el comportamiento sin memoización automática.
175
+ pnpm test:uncompiled
176
+
177
+ # Volver a generar la distribución optimizada.
178
+ pnpm build
179
+ ```
180
+
181
+ `test:uncompiled` usa `pnpm build --no-react-compiler` y ejecuta Vitest. CI y `release:prepare` ejecutan esa comparación antes del check normal, que restaura el build optimizado. Los consumidores de prueba no habilitan un segundo compilador: ejercen el paquete generado, incluido un componente de servidor real en Next.
182
+
183
+ ## Desarrollo y validación
184
+
185
+ Usar pnpm **12.3.4**. Las dependencias tienen rangos `^` y el lockfile fija las versiones verificadas.
186
+
187
+ ```sh
188
+ pnpm install --frozen-lockfile
189
+ pnpm check
190
+ pnpm exec playwright install chromium webkit
191
+ pnpm test:browser
192
+ pnpm build
193
+ pnpm release:prepare
194
+ ```
195
+
196
+ `pnpm build` genera las declaraciones con TypeScript 7, JavaScript con Oxc/React Compiler y CSS con el CLI de Tailwind. `pnpm check` ejecuta ESLint 10, los typechecks separados de código y tests con TypeScript 7, y Vitest 5. `tests/tsconfig.json` incorpora los matchers de Testing Library y los tipos de Vite sin incluirlos en el código de producción. `test:browser` verifica una app React/Vite nativa y una app Next real en Chromium y WebKit, tanto en desktop como en móvil. Los tests unitarios importan los archivos compilados. Los consumidores de navegador no instalan plugins de Tailwind, y una prueba adicional sirve el tarball por HTTP sin procesadores CSS para verificar estilos computados y carga de fuentes. Una prueba adicional instala el tarball en un consumidor aislado sin Next y verifica render, filtrado y declaraciones públicas.
197
+
198
+ Los tests resuelven `beez-ui`, `beez-ui/next` y `beez-ui/tanstack` mediante rutas explícitas a las declaraciones compiladas en `tests/tsconfig.json`. Ejecutar `pnpm build` después de clonar o si falta `dist`; los comandos de validación completos ya lo hacen. Si el editor conserva diagnósticos anteriores después del build, reiniciar su servidor de TypeScript.
199
+
200
+ El compilador `tsc` es TypeScript 7. Para `typescript-eslint`, se mantiene la [API de compatibilidad oficial de TypeScript 6](https://devblogs.microsoft.com/typescript/announcing-typescript-7-0/#running-side-by-side-with-typescript-6.0) mediante un alias; no reemplaza el compilador de los typechecks.
201
+
202
+ ## Crear y publicar una versión
203
+
204
+ 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.
205
+
206
+ ### Un solo comando: `pnpm create-version` (alias `pnpm cv`)
207
+
208
+ ```sh
209
+ pnpm create-version # diagnóstico, plan y release interactivo
210
+ pnpm create-version --bump minor # patch | minor | major sin preguntar
211
+ pnpm create-version --set-version 0.7.0 # versión exacta
212
+ pnpm create-version --notes "Agrega glide" # notas del CHANGELOG; se puede repetir
213
+ pnpm create-version --dry-run # solo muestra el diagnóstico y el plan
214
+ pnpm cv # alias de pnpm create-version
215
+ ```
216
+
217
+ 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:
218
+
219
+ - **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).
220
+ - **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.
221
+ - **Todo al día**: si la versión está publicada y no hay commits nuevos, no hace nada.
222
+
223
+ `--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.
224
+
225
+ 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.
226
+
227
+ ### Flujo validado de un release nuevo
228
+
229
+ 1. Actualiza `package.json` y agrega la entrada del changelog con fecha UTC, conservando el historial (`scripts/release-version.js`).
230
+ 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.
231
+ 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.
232
+ 4. Genera el tarball en `releases/<version>-<sha256>/beez-ui-<version>.tgz` y valida su contenido, exports e integridad.
233
+ 5. Pushea el commit de release a la rama upstream configurada, sólo si sigue siendo el commit actual.
234
+ 6. Publica ese mismo artefacto en npm con acceso público y etiqueta `latest`.
235
+
236
+ 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`).
237
+
238
+ 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.
239
+
240
+ Los pasos individuales siguen disponibles:
241
+
242
+ ```sh
243
+ # Sólo validar y empaquetar la versión actual, sin publicarla.
244
+ pnpm release:prepare
245
+
246
+ # Publicar un artefacto ya preparado.
247
+ pnpm release:publish releases/<version>-<sha256>/beez-ui-<version>.tgz
248
+ ```
249
+
250
+ `release:publish` vuelve a verificar nombre, versión, contenido y checksum antes de invocar `npm publish`. El paquete excluye fuentes privadas, tests, scripts, `.env` y `.npmrc`; incluye JavaScript, declaraciones, CSS, fuentes tipográficas y licencias. Conserva releases anteriores.
251
+
252
+ `prepack` ejecuta el build para los empaquetados manuales. `dist` y `releases` son generados e ignorados por Git. La CI verifica los checks y los tres providers en ambos motores de navegador en Linux y Windows; no publica automáticamente.
253
+
254
+ Tras publicar, los consumidores pueden instalar `pnpm add beez-ui`. También pueden instalar directamente el `.tgz` validado antes de una publicación. LaTribu consume la versión publicada en npm y fija la resolución e integridad mediante su lockfile, sin guardar tarballs locales.
255
+
256
+ Los componentes nuevos de shadcn/ui se agregan mediante su CLI en esta biblioteca y se exportan desde la raíz. No editar las copias instaladas en los consumidores.
257
+
258
+ ## Procedencia
259
+
260
+ Fuentes originales: `guidomodarelli/TuTribu` (`components/ui`) y `agenda-mensual` (`src/components/ui`). Se preservan las funcionalidades y los comentarios que explican sus decisiones; la integración adapta imports, contratos y dependencias del consumidor. Consultar `LICENSE.md` para la licencia original de shadcn/ui y `assets/fonts/*-LICENSE.txt` para las fuentes. El icono de WhatsApp proviene del registry `@svgl`.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "beez-ui",
3
- "version": "0.6.0",
3
+ "version": "0.6.1",
4
4
  "description": "Shared UI components with the customizations extracted from TuTribu.",
5
5
  "type": "module",
6
6
  "sideEffects": [
@@ -289,7 +289,7 @@
289
289
  "eslint-plugin-react-hooks": "^7.1.1",
290
290
  "happy-dom": "^20.14.0",
291
291
  "lucide-react": "^1.41.0",
292
- "next": "^16.3.4",
292
+ "next": "^16.3.6",
293
293
  "oxc-parser": "^0.149.0",
294
294
  "oxc-transform-react": "^0.149.0",
295
295
  "react": "^19.3.0",
@@ -338,7 +338,8 @@
338
338
  "lint": "eslint .",
339
339
  "test:browser": "pnpm build && playwright test",
340
340
  "build": "node scripts/build.js",
341
- "create-version": "node scripts/create-version.js",
341
+ "create-version": "node scripts/release.js",
342
+ "cv": "node scripts/release.js",
342
343
  "release:prepare": "node scripts/prepare-release.js",
343
344
  "release:publish": "node scripts/publish-release.js",
344
345
  "storybook": "pnpm build && storybook dev -p 6006 --no-open",