beez-ui 0.5.5 → 0.6.0
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.
- package/CHANGELOG.md +52 -44
- package/README.md +175 -152
- package/dist/components/animated-theme-toggler.js +6 -4
- package/dist/components/checkbox.js +4 -3
- package/dist/components/data-table.js +16 -8
- package/dist/components/dialog.js +11 -8
- package/dist/components/dropdown-menu.js +27 -14
- package/dist/components/form.js +1 -1
- package/dist/components/radio-group.js +1 -1
- package/dist/components/select.js +29 -16
- package/dist/components/sidebar.js +11 -7
- package/dist/components/tabs.js +12 -8
- package/dist/components/tooltip.js +1 -1
- package/dist/constants/motion.d.ts +4 -0
- package/dist/constants/motion.js +4 -0
- package/dist/motion/glide-indicator.d.ts +66 -0
- package/dist/motion/glide-indicator.js +252 -0
- package/dist/motion/glide-slot.d.ts +9 -0
- package/dist/motion/glide-slot.js +71 -0
- package/dist/motion/motion-slot.js +506 -179
- package/dist/motion/surface-keyframes.d.ts +13 -0
- package/dist/motion/surface-keyframes.js +205 -0
- package/dist/motion/tokens.d.ts +89 -6
- package/dist/motion/tokens.js +107 -6
- package/dist/motion/use-attached-element.d.ts +7 -0
- package/dist/motion/use-attached-element.js +22 -0
- package/dist/styles.css +1 -1
- package/package.json +6 -6
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,13 @@
|
|
|
1
1
|
# Cambios
|
|
2
2
|
|
|
3
|
+
## 0.6.0 - 2026-09-23
|
|
4
|
+
|
|
5
|
+
- Actualiza el paquete a la versión 0.6.0.
|
|
6
|
+
|
|
7
|
+
## 0.5.6 - 2026-09-09
|
|
8
|
+
|
|
9
|
+
- Actualiza el paquete a la versión 0.5.6.
|
|
10
|
+
|
|
3
11
|
## 0.5.5 - 2026-09-09
|
|
4
12
|
|
|
5
13
|
- Actualiza el paquete a la versión 0.5.5.
|
|
@@ -20,47 +28,47 @@
|
|
|
20
28
|
|
|
21
29
|
- Actualiza el paquete a la versión 0.5.1.
|
|
22
30
|
|
|
23
|
-
## 0.5.0 - 2026-09-08
|
|
24
|
-
|
|
25
|
-
- Actualiza el paquete a la versión 0.5.0.
|
|
26
|
-
|
|
27
|
-
## 0.4.2 - 2026-09-08
|
|
28
|
-
|
|
29
|
-
- Actualiza el paquete a la versión 0.4.2.
|
|
30
|
-
|
|
31
|
-
## 0.4.1 - 2026-09-08
|
|
32
|
-
|
|
33
|
-
- Actualiza el paquete a la versión 0.4.1.
|
|
34
|
-
|
|
35
|
-
## 0.4.0 - 2026-09-08
|
|
36
|
-
|
|
37
|
-
- Distribuye los providers nativo, Next y TanStack con tema compartido, navegación e imágenes adaptadas al framework.
|
|
38
|
-
- Incluye CSS precompilado, tema y fuentes; los consumidores sólo importan `beez-ui/styles.css`, sin configurar Tailwind.
|
|
39
|
-
- Valida el tarball sin compiladores CSS y las integraciones en Chromium y WebKit.
|
|
40
|
-
|
|
41
|
-
## 0.3.1 - 2026-09-08
|
|
42
|
-
|
|
43
|
-
- Publica CSS precompilado para que los estilos funcionen sin Tailwind ni detección de clases en el consumidor.
|
|
44
|
-
- Conserva el tema, las fuentes y las utilidades compartidas mediante `beez-ui/styles.css`.
|
|
45
|
-
- Verifica estilos computados del tarball servido por HTTP sin procesadores CSS en Chromium y WebKit.
|
|
46
|
-
|
|
47
|
-
## 0.2.0 - 2026-09-08
|
|
48
|
-
|
|
49
|
-
- Unifica el nombre `BeezUIProvider` en los entrypoints nativo, Next y TanStack; reemplaza `NextBeezUIProvider`.
|
|
50
|
-
- Comparte el tema mediante `next-themes`, `themeOptions` y `useTheme` en todos los providers.
|
|
51
|
-
- Restaura `Link` desde la raíz con navegación por adaptadores y prefetch desactivado por defecto.
|
|
52
|
-
- Integra Unpic para imágenes nativas y de TanStack, y conserva Next Image en el provider de Next.
|
|
53
|
-
- Separa los tipos de tests y valida navegación, imágenes y tema en Chromium y WebKit.
|
|
54
|
-
|
|
55
|
-
## 0.1.1 - 2026-09-08
|
|
56
|
-
|
|
57
|
-
- Publica JavaScript ESM y declaraciones TypeScript en `dist`.
|
|
58
|
-
- Conserva los componentes agrupados y el tema de LaTribu.
|
|
59
|
-
- Mantiene visible el área del avatar durante la carga diferida para permitir que el navegador solicite la imagen.
|
|
60
|
-
- Agrega `BeezUIProvider` para adaptadores nativos o propios y `NextBeezUIProvider` como integración opcional.
|
|
61
|
-
- Incorpora preparación de releases con checks, control del contenido del paquete y checksum SHA-256.
|
|
62
|
-
- Documenta la autenticación con `NPM_TOKEN` y la publicación del artefacto validado.
|
|
63
|
-
|
|
64
|
-
## 0.1.0 - 2026-09-08
|
|
65
|
-
|
|
66
|
-
- Centraliza los componentes de LaTribu y agenda-mensual con su tema, fuentes y pruebas.
|
|
31
|
+
## 0.5.0 - 2026-09-08
|
|
32
|
+
|
|
33
|
+
- Actualiza el paquete a la versión 0.5.0.
|
|
34
|
+
|
|
35
|
+
## 0.4.2 - 2026-09-08
|
|
36
|
+
|
|
37
|
+
- Actualiza el paquete a la versión 0.4.2.
|
|
38
|
+
|
|
39
|
+
## 0.4.1 - 2026-09-08
|
|
40
|
+
|
|
41
|
+
- Actualiza el paquete a la versión 0.4.1.
|
|
42
|
+
|
|
43
|
+
## 0.4.0 - 2026-09-08
|
|
44
|
+
|
|
45
|
+
- Distribuye los providers nativo, Next y TanStack con tema compartido, navegación e imágenes adaptadas al framework.
|
|
46
|
+
- Incluye CSS precompilado, tema y fuentes; los consumidores sólo importan `beez-ui/styles.css`, sin configurar Tailwind.
|
|
47
|
+
- Valida el tarball sin compiladores CSS y las integraciones en Chromium y WebKit.
|
|
48
|
+
|
|
49
|
+
## 0.3.1 - 2026-09-08
|
|
50
|
+
|
|
51
|
+
- Publica CSS precompilado para que los estilos funcionen sin Tailwind ni detección de clases en el consumidor.
|
|
52
|
+
- Conserva el tema, las fuentes y las utilidades compartidas mediante `beez-ui/styles.css`.
|
|
53
|
+
- Verifica estilos computados del tarball servido por HTTP sin procesadores CSS en Chromium y WebKit.
|
|
54
|
+
|
|
55
|
+
## 0.2.0 - 2026-09-08
|
|
56
|
+
|
|
57
|
+
- Unifica el nombre `BeezUIProvider` en los entrypoints nativo, Next y TanStack; reemplaza `NextBeezUIProvider`.
|
|
58
|
+
- Comparte el tema mediante `next-themes`, `themeOptions` y `useTheme` en todos los providers.
|
|
59
|
+
- Restaura `Link` desde la raíz con navegación por adaptadores y prefetch desactivado por defecto.
|
|
60
|
+
- Integra Unpic para imágenes nativas y de TanStack, y conserva Next Image en el provider de Next.
|
|
61
|
+
- Separa los tipos de tests y valida navegación, imágenes y tema en Chromium y WebKit.
|
|
62
|
+
|
|
63
|
+
## 0.1.1 - 2026-09-08
|
|
64
|
+
|
|
65
|
+
- Publica JavaScript ESM y declaraciones TypeScript en `dist`.
|
|
66
|
+
- Conserva los componentes agrupados y el tema de LaTribu.
|
|
67
|
+
- Mantiene visible el área del avatar durante la carga diferida para permitir que el navegador solicite la imagen.
|
|
68
|
+
- Agrega `BeezUIProvider` para adaptadores nativos o propios y `NextBeezUIProvider` como integración opcional.
|
|
69
|
+
- Incorpora preparación de releases con checks, control del contenido del paquete y checksum SHA-256.
|
|
70
|
+
- Documenta la autenticación con `NPM_TOKEN` y la publicación del artefacto validado.
|
|
71
|
+
|
|
72
|
+
## 0.1.0 - 2026-09-08
|
|
73
|
+
|
|
74
|
+
- Centraliza los componentes de LaTribu y agenda-mensual con su tema, fuentes y pruebas.
|
package/README.md
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
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
|
-
|
|
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
5
|
## Storybook
|
|
6
6
|
|
|
7
7
|
```bash
|
|
@@ -32,21 +32,21 @@ Configuración basada en [React con Vite](https://storybook.js.org/docs/get-star
|
|
|
32
32
|
y [Controls](https://storybook.js.org/docs/essentials/controls).
|
|
33
33
|
|
|
34
34
|
## Uso del paquete
|
|
35
|
-
|
|
36
|
-
```tsx
|
|
37
|
-
import { Button, Avatar, AvatarImage, DataTable, Calendar } from "beez-ui";
|
|
38
|
-
```
|
|
39
|
-
|
|
35
|
+
|
|
36
|
+
```tsx
|
|
37
|
+
import { Button, Avatar, AvatarImage, DataTable, Calendar } from "beez-ui";
|
|
38
|
+
```
|
|
39
|
+
|
|
40
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
41
|
|
|
42
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
|
-
|
|
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
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
51
|
|
|
52
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.
|
|
@@ -54,7 +54,7 @@ Los consumidores pueden sobrescribir tokens mediante CSS normal. Poppins se rese
|
|
|
54
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
55
|
|
|
56
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
|
-
|
|
57
|
+
|
|
58
58
|
## Movimiento
|
|
59
59
|
|
|
60
60
|
Las nuevas animaciones usan la dependencia `motion`: `animate` controla la
|
|
@@ -63,11 +63,34 @@ retienen los overlays durante su salida. Los presets y tiempos viven en
|
|
|
63
63
|
`src/motion/`. No se usan keyframes CSS para estas animaciones.
|
|
64
64
|
|
|
65
65
|
`MotionSlot` anima el nodo original del primitive mediante refs compuestos,
|
|
66
|
-
sin agregar wrappers al DOM ni reemplazar sus handlers. Las
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
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.
|
|
71
94
|
|
|
72
95
|
El contenido que está saliendo deja de ser interactivo y accesible de inmediato.
|
|
73
96
|
Cada familia de overlays tiene un contexto de visibilidad independiente para
|
|
@@ -88,136 +111,136 @@ la reproducción. Las stories permiten probar los gestos y estados reales; el
|
|
|
88
111
|
selector de tema de la story y la barra de Storybook se mantienen sincronizados.
|
|
89
112
|
|
|
90
113
|
## Providers de UI
|
|
91
|
-
|
|
92
|
-
Elegir un único `BeezUIProvider` según el framework. Los componentes y `useTheme` siempre se importan desde `beez-ui`.
|
|
93
|
-
|
|
94
|
-
| Import del provider | Navegación | Imágenes de avatar |
|
|
95
|
-
| --- | --- | --- |
|
|
96
|
-
| `beez-ui` | Anclas nativas | `@unpic/react` |
|
|
97
|
-
| `beez-ui/next` | `next/link` | `next/image` |
|
|
98
|
-
| `beez-ui/tanstack` | TanStack Router | `@unpic/react` |
|
|
99
|
-
|
|
100
|
-
```tsx
|
|
101
|
-
"use client";
|
|
102
|
-
|
|
103
|
-
import type { ReactNode } from "react";
|
|
104
|
-
import { BeezUIProvider } from "beez-ui/next";
|
|
105
|
-
|
|
106
|
-
export function Providers({ children }: { children: ReactNode }) {
|
|
107
|
-
return (
|
|
108
|
-
<BeezUIProvider themeOptions={{ storageKey: "tutribu-theme", defaultTheme: "system" }}>
|
|
109
|
-
{children}
|
|
110
|
-
</BeezUIProvider>
|
|
111
|
-
);
|
|
112
|
-
}
|
|
113
|
-
```
|
|
114
|
-
|
|
115
|
-
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.
|
|
116
|
-
|
|
117
|
-
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.
|
|
118
|
-
|
|
119
|
-
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.
|
|
120
|
-
|
|
121
|
-
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.
|
|
122
|
-
|
|
123
|
-
## Responsabilidades del consumidor
|
|
124
|
-
|
|
125
|
-
- Tema: `AnimatedThemeToggler` y `ThemedToaster` consumen el contexto compartido. Sus props explícitas de tema siguen disponibles para usos controlados.
|
|
126
|
-
- 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.
|
|
127
|
-
- 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.
|
|
128
|
-
- Formularios y tablas: el consumidor provee sus datos, validaciones y callbacks. No se importan servicios, modelos de negocio ni endpoints de agenda-mensual.
|
|
129
|
-
|
|
130
|
-
## Componentes incorporados desde agenda-mensual
|
|
131
|
-
|
|
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
|
+
|
|
132
155
|
`Alert`, `AnimatedThemeToggler`, `Calendar`, `DataTable`, `FilterQueryBar`, `Form`, `Highlighter`, `InputGroup`, `Label`, `RadioGroup`, `TypingAnimation` y `ThemedToaster`, junto con sus subcomponentes, tipos y gramática de filtros.
|
|
133
156
|
|
|
134
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.
|
|
135
|
-
|
|
136
|
-
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.
|
|
137
|
-
|
|
138
|
-
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.
|
|
139
|
-
|
|
140
|
-
## React Compiler
|
|
141
|
-
|
|
142
|
-
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.
|
|
143
|
-
|
|
144
|
-
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.
|
|
145
|
-
|
|
146
|
-
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.
|
|
147
|
-
|
|
148
|
-
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.
|
|
149
|
-
|
|
150
|
-
```sh
|
|
151
|
-
# Comparar el comportamiento sin memoización automática.
|
|
152
|
-
pnpm test:uncompiled
|
|
153
|
-
|
|
154
|
-
# Volver a generar la distribución optimizada.
|
|
155
|
-
pnpm build
|
|
156
|
-
```
|
|
157
|
-
|
|
158
|
-
`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.
|
|
159
|
-
|
|
160
|
-
## Desarrollo y validación
|
|
161
|
-
|
|
162
|
-
Usar pnpm **12.3.4**. Las dependencias tienen rangos `^` y el lockfile fija las versiones verificadas.
|
|
163
|
-
|
|
164
|
-
```sh
|
|
165
|
-
pnpm install --frozen-lockfile
|
|
166
|
-
pnpm check
|
|
167
|
-
pnpm exec playwright install chromium webkit
|
|
168
|
-
pnpm test:browser
|
|
169
|
-
pnpm build
|
|
170
|
-
pnpm release:prepare
|
|
171
|
-
```
|
|
172
|
-
|
|
173
|
-
`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.
|
|
174
|
-
|
|
175
|
-
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.
|
|
176
|
-
|
|
177
|
-
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.
|
|
178
|
-
|
|
179
|
-
## Crear y publicar una versión
|
|
180
|
-
|
|
181
|
-
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:
|
|
182
|
-
|
|
183
|
-
```sh
|
|
184
|
-
pnpm run create-version patch
|
|
185
|
-
pnpm run create-version minor --notes "Agrega un componente" --notes "Amplía sus opciones"
|
|
186
|
-
pnpm run create-version 0.5.0 --notes "Describe los cambios de esta versión"
|
|
187
|
-
```
|
|
188
|
-
|
|
189
|
-
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.
|
|
190
|
-
|
|
191
|
-
El comando ejecuta el flujo completo:
|
|
192
|
-
|
|
193
|
-
1. Actualiza `package.json` y agrega la entrada del changelog con fecha UTC, conservando el historial.
|
|
194
|
-
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.
|
|
195
|
-
3. Genera el tarball en `releases/<version>-<sha256>/beez-ui-<version>.tgz` y valida su contenido, exports e integridad.
|
|
196
|
-
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.
|
|
197
|
-
5. Publica ese mismo artefacto en npm con acceso público y etiqueta `latest`.
|
|
198
|
-
|
|
199
|
-
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`.
|
|
200
|
-
|
|
201
|
-
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.
|
|
202
|
-
|
|
203
|
-
Los pasos individuales siguen disponibles:
|
|
204
|
-
|
|
205
|
-
```sh
|
|
206
|
-
# Sólo validar y empaquetar la versión actual, sin publicarla.
|
|
207
|
-
pnpm release:prepare
|
|
208
|
-
|
|
209
|
-
# Publicar un artefacto ya preparado.
|
|
210
|
-
pnpm release:publish releases/<version>-<sha256>/beez-ui-<version>.tgz
|
|
211
|
-
```
|
|
212
|
-
|
|
213
|
-
`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.
|
|
214
|
-
|
|
215
|
-
`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.
|
|
216
|
-
|
|
217
|
-
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.
|
|
218
|
-
|
|
219
|
-
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.
|
|
220
|
-
|
|
221
|
-
## Procedencia
|
|
222
|
-
|
|
223
|
-
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`.
|
|
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`.
|
|
@@ -3,10 +3,11 @@ import { c as _c } from "react/compiler-runtime";
|
|
|
3
3
|
import { useEffect, useRef, useSyncExternalStore } from "react";
|
|
4
4
|
import { Monitor, Moon, Sun, SunMoon } from "lucide-react";
|
|
5
5
|
import { animate, frame } from "motion/react";
|
|
6
|
+
import { MotionSlot } from "../motion/motion-slot.js";
|
|
6
7
|
import { MOTION_EASE } from "../motion/tokens.js";
|
|
7
8
|
import { useTheme } from "next-themes";
|
|
8
9
|
import { DropdownMenu, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger } from "./dropdown-menu.js";
|
|
9
|
-
import { REDUCED_MOTION_QUERY } from "../constants/motion.js";
|
|
10
|
+
import { MILLISECONDS_PER_SECOND, REDUCED_MOTION_QUERY } from "../constants/motion.js";
|
|
10
11
|
import { cn } from "../lib/utils.js";
|
|
11
12
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
12
13
|
const THEME_OPTIONS = [
|
|
@@ -26,8 +27,6 @@ const THEME_OPTIONS = [
|
|
|
26
27
|
value: "system"
|
|
27
28
|
}
|
|
28
29
|
];
|
|
29
|
-
/** Converts the public duration (milliseconds) to Motion seconds. */
|
|
30
|
-
const MILLISECONDS_PER_SECOND = 1e3;
|
|
31
30
|
export const AnimatedThemeToggler = (t0) => {
|
|
32
31
|
const $ = _c(34);
|
|
33
32
|
let className;
|
|
@@ -134,7 +133,10 @@ export const AnimatedThemeToggler = (t0) => {
|
|
|
134
133
|
}
|
|
135
134
|
let t6;
|
|
136
135
|
if ($[16] !== isDark || $[17] !== isThemeReady) {
|
|
137
|
-
t6 = !isThemeReady ? /* @__PURE__ */ _jsx(SunMoon, { "aria-hidden": "true" }) :
|
|
136
|
+
t6 = !isThemeReady ? /* @__PURE__ */ _jsx(SunMoon, { "aria-hidden": "true" }) : /* @__PURE__ */ _jsx(MotionSlot, {
|
|
137
|
+
kind: "icon-swap",
|
|
138
|
+
children: isDark ? /* @__PURE__ */ _jsx(Moon, { "aria-hidden": "true" }) : /* @__PURE__ */ _jsx(Sun, { "aria-hidden": "true" })
|
|
139
|
+
}, isDark ? "dark" : "light");
|
|
138
140
|
$[16] = isDark;
|
|
139
141
|
$[17] = isThemeReady;
|
|
140
142
|
$[18] = t6;
|
|
@@ -30,10 +30,11 @@ function Checkbox(t0) {
|
|
|
30
30
|
let t2;
|
|
31
31
|
if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
|
|
32
32
|
t2 = /* @__PURE__ */ _jsx(MotionSlot, {
|
|
33
|
-
kind: "
|
|
33
|
+
kind: "check",
|
|
34
34
|
children: /* @__PURE__ */ _jsx(CheckboxPrimitive.Indicator, {
|
|
35
|
+
forceMount: true,
|
|
35
36
|
"data-slot": "checkbox-indicator",
|
|
36
|
-
className: "grid place-content-center text-current transition-none [&>svg]:size-3.5",
|
|
37
|
+
className: "grid place-content-center text-current transition-none data-unchecked:opacity-0 [&>svg]:size-3.5",
|
|
37
38
|
children: /* @__PURE__ */ _jsx(CheckIcon, {})
|
|
38
39
|
})
|
|
39
40
|
});
|
|
@@ -44,7 +45,7 @@ function Checkbox(t0) {
|
|
|
44
45
|
let t3;
|
|
45
46
|
if ($[6] !== props || $[7] !== t1) {
|
|
46
47
|
t3 = /* @__PURE__ */ _jsx(MotionSlot, {
|
|
47
|
-
kind: "
|
|
48
|
+
kind: "toggle",
|
|
48
49
|
children: /* @__PURE__ */ _jsx(CheckboxPrimitive.Root, {
|
|
49
50
|
"data-slot": "checkbox",
|
|
50
51
|
className: t1,
|
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
import * as React from "react";
|
|
3
3
|
import { flexRender, getCoreRowModel, getFilteredRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
|
|
4
4
|
import { CircleAlert, ChevronDown, ChevronRight, Ellipsis, Eraser, X } from "lucide-react";
|
|
5
|
+
import { cn } from "../lib/utils.js";
|
|
6
|
+
import { MotionSlot } from "../motion/motion-slot.js";
|
|
5
7
|
import { Button } from "./button.js";
|
|
6
8
|
import { Badge } from "./badge.js";
|
|
7
9
|
import { FilterQueryBar } from "./filter-query-bar.js";
|
|
@@ -510,12 +512,12 @@ export function DataTable({ columns, data, emptyMessage, toolbarActions, onVisib
|
|
|
510
512
|
className: "flex w-full items-center gap-1.5 text-left",
|
|
511
513
|
onClick: () => handleGroupToggle(groupKey),
|
|
512
514
|
type: "button",
|
|
513
|
-
children: [
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
515
|
+
children: [/* @__PURE__ */ _jsx(MotionSlot, {
|
|
516
|
+
kind: "rotate",
|
|
517
|
+
children: /* @__PURE__ */ _jsx(ChevronRight, {
|
|
518
|
+
"aria-hidden": "true",
|
|
519
|
+
className: cn("size-4 shrink-0", !isGroupCollapsed && "rotate-90")
|
|
520
|
+
})
|
|
519
521
|
}), groupHeaderContent]
|
|
520
522
|
}) : groupHeaderContent
|
|
521
523
|
})
|
|
@@ -765,12 +767,18 @@ export function DataTable({ columns, data, emptyMessage, toolbarActions, onVisib
|
|
|
765
767
|
asChild: true,
|
|
766
768
|
children: /* @__PURE__ */ _jsxs(Button, {
|
|
767
769
|
"aria-label": columnVisibilityButtonLabel,
|
|
768
|
-
className: "relative",
|
|
770
|
+
className: "relative aria-expanded:*:data-[slot=data-table-columns-chevron]:rotate-180",
|
|
769
771
|
type: "button",
|
|
770
772
|
variant: "outline",
|
|
771
773
|
children: [
|
|
772
774
|
columnVisibilityButtonLabel,
|
|
773
|
-
/* @__PURE__ */ _jsx(
|
|
775
|
+
/* @__PURE__ */ _jsx(MotionSlot, {
|
|
776
|
+
kind: "rotate",
|
|
777
|
+
children: /* @__PURE__ */ _jsx(ChevronDown, {
|
|
778
|
+
"aria-hidden": "true",
|
|
779
|
+
"data-slot": "data-table-columns-chevron"
|
|
780
|
+
})
|
|
781
|
+
}),
|
|
774
782
|
hasToolbarChanges ? /* @__PURE__ */ _jsxs(_Fragment, { children: [/* @__PURE__ */ _jsx("span", {
|
|
775
783
|
"aria-hidden": "true",
|
|
776
784
|
className: "absolute -right-0.5 -top-0.5 size-2 rounded-full bg-destructive ring-2 ring-background"
|
|
@@ -203,14 +203,17 @@ function DialogContent(t0) {
|
|
|
203
203
|
t5 = showCloseButton && /* @__PURE__ */ _jsx(DialogPrimitive.Close, {
|
|
204
204
|
"data-slot": "dialog-close",
|
|
205
205
|
asChild: true,
|
|
206
|
-
children: /* @__PURE__ */
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
children: "
|
|
213
|
-
|
|
206
|
+
children: /* @__PURE__ */ _jsx(MotionSlot, {
|
|
207
|
+
kind: "delayed-pop",
|
|
208
|
+
children: /* @__PURE__ */ _jsxs(Button, {
|
|
209
|
+
variant: "ghost",
|
|
210
|
+
className: "absolute top-2 right-2",
|
|
211
|
+
size: "icon-sm",
|
|
212
|
+
children: [/* @__PURE__ */ _jsx(XIcon, {}), /* @__PURE__ */ _jsx("span", {
|
|
213
|
+
className: "sr-only",
|
|
214
|
+
children: "Cerrar"
|
|
215
|
+
})]
|
|
216
|
+
})
|
|
214
217
|
})
|
|
215
218
|
});
|
|
216
219
|
$[8] = showCloseButton;
|