bonsaif-ui 0.1.106 → 0.1.119

package/CHANGELOG.md

@@ -1,5 +1,68 @@
 # Changelog
 
+## 0.1.119 - 2026-08-14
+
+- `DataTable`: las celdas del cuerpo (y el checkbox de selección) centran el contenido en vertical por defecto (`flex items-center`), para alinear badges, botones y texto cuando la fila crece.
+
+## 0.1.118 - 2026-08-14
+
+- `ImageLightbox`: mueve `openImageLightboxFromEvent` a archivo aparte para corregir el warning `react-refresh/only-export-components`.
+
+## 0.1.117 - 2026-08-14
+
+- `ImageLightbox`: miniaturas del mismo tamaño (sin crecer); la activa solo a opacity 100%. `border-radius` uniforme (10px) en imagen principal y thumbs.
+
+## 0.1.116 - 2026-08-14
+
+- `ImageLightbox`: franja de miniaturas sin bordes (ni contenedor ni thumbs); la activa se distingue por opacidad y tamaño.
+
+## 0.1.115 - 2026-08-14
+
+- `ImageLightbox`: sin marco/matte detrás de la imagen (borde, padding y damero) para un look más limpio.
+
+## 0.1.114 - 2026-08-14
+
+- `ImageLightbox` / `ImageLightboxHost`: al cambiar de slide ya no se reanima el shrink hacia la miniatura original; el cierre solo hace FLIP de vuelta si sigues en la misma imagen que abriste (si no, fade).
+- `ImageLightboxHost`: deja de resetear el índice a 0 al cerrar (`index=-1` + `Math.max`), que hacía que al cerrar desde otra slide la foto saltara/se minimizara en la primera.
+
+## 0.1.113 - 2026-08-14
+
+- `ImageLightbox`: el fondo translúcido usa el verde Bonsaif (`--bg-sidebar`, fallback `--primary`) en lugar de `--bg-main` (que en claro quedaba casi blanco).
+
+## 0.1.112 - 2026-08-14
+
+- `ImageLightbox`: chrome/backdrop/matte/miniaturas usan tokens de tema (`--bg-card`, `--bg-main`, `--border`, `--text-main`, `--primary`, etc.).
+- `ImageLightbox`: animación de apertura/cierre desde `originRect` (FLIP): la imagen crece desde la miniatura clicada y se encoge al cerrar. `ImageLightboxHost` y `openImageLightboxFromEvent` capturan el `getBoundingClientRect()` automáticamente.
+
+## 0.1.111 - 2026-08-14
+
+- `ImageLightbox`: transición de slide direccional (slide + fade + blur suave) al cambiar de imagen, con loop.
+
+## 0.1.110 - 2026-08-14
+
+- `ImageLightbox`: `loop` (última → primera / primera → última) y `showThumbnails` (franja semitransparente inferior configurable). También en `ImageLightboxHost`.
+
+## 0.1.109 - 2026-08-14
+
+- `ImageLightbox`: botón para restablecer tamaño (centro + zoom 1×); animaciones más suaves al abrir/cerrar, zoom, cambio de slide y hover de controles.
+
+## 0.1.108 - 2026-08-14
+
+- `ImageLightbox`: controles siempre por encima de la imagen; backdrop con blur; botones frosted legibles en claro/oscuro; marco con damero para que la foto contraste sobre cualquier superficie.
+- `ImageLightbox`: al reducir zoom (`-` / rueda) la imagen vuelve al centro; el pan se limita para que no se quede pegada a un borde.
+
+## 0.1.107 - 2026-08-14
+
+- `ImageLightbox` / `ImageLightboxHost`: lightbox de imágenes (portal) con zoom libre hasta `maxZoom` (default 8) aunque pixele, pan, rueda/pinch, contador y navegación entre slides. API cercana a yet-another-react-lightbox; el Host abre al hacer clic en `<img>` hijos (HTML enriquecido).
+
+## 0.1.106 - 2026-08-12
+
+- `PageHeader`: `subtitle` accepts `ReactNode` (not only `string`), so callers can render avatars or other rich greetings under the title.
+
+## 0.1.105 - 2026-08-12
+
+- `Drawer`: `loading` now enables the interaction-lock overlay automatically (spinner + `"Guardando…"` by default). Escape, backdrop, and form controls are blocked while saving; `disabled` still works for non-loading locks.
+
 ## 0.1.104 - 2026-08-10
 
 - `Drawer`: when `disabled`, the lock overlay can show a centered spinner + status text (`disabledMessage`, or `"Guardando…"` automatically if `loading`). Escape/close are blocked while disabled.

package/README.md

@@ -40,6 +40,7 @@ For Next.js consumers using a local package or monorepo setup, add `transpilePac
 | Search or filter a list | `SearchableSelect`, `CompactFilterSelect`, `CompactSearchInput` | Compact controls that work inside toolbars and table headers. |
 | Show tabular records | `DataTable`, `Pagination` | Sorting, selection, loading, empty state, column width behavior, and paging. |
 | Confirm or edit in context | `Drawer`, `Modal`, `ConfirmDialog` | Overlays with consistent chrome and guardrails for unsaved changes. |
+| Preview images fullscreen | `ImageLightbox`, `ImageLightboxHost` | Free zoom (may pixelate), pan, counter, and multi-slide navigation. |
 | Explain status | `Alert`, `StatusBadge`, `StatusSelect`, `EmptyState`, `LoadingState` | Clear operational feedback for data states and workflows. |
 | Compose related modules | `DynamicDetailTabs` | Parent-detail layout with lazy loaded child modules. |
 
@@ -254,8 +255,28 @@ function AccountFormExample() {
 - `DropdownMenu`: contextual action menu.
 - `CopyButton`, `CopyLinkButton`: clipboard utilities.
 - `Modal`, `Drawer`, `ConfirmDialog`: overlays and confirmations.
+- `ImageLightbox`, `ImageLightboxHost`: fullscreen image viewer with theme tokens, free zoom (may pixelate), pan, optional `loop` / `showThumbnails`, and open/close FLIP animation from the clicked image (`originRect`).
 - `MouseTooltip`: lightweight hover tooltip.
 
+#### Image lightbox
+
+```tsx
+import { ImageLightbox, ImageLightboxHost } from "bonsaif-ui";
+
+<ImageLightbox
+  open={open}
+  onClose={() => setOpen(false)}
+  index={index}
+  onIndexChange={setIndex}
+  slides={[{ src: "/photo.jpg", alt: "Foto" }]}
+  maxZoom={8}
+/>
+
+<ImageLightboxHost maxZoom={8}>
+  <div dangerouslySetInnerHTML={{ __html: html }} />
+</ImageLightboxHost>
+```
+
 #### Drawer Unsaved Changes Guard
 
 Use `hasUnsavedChanges` when a drawer edits data and must not close silently. When the prop is `true`, the drawer intercepts its own close controls: backdrop click, Escape, the X button, and the default Cancel button. It shows a confirmation modal and only calls `onClose` after the user confirms that unsaved data can be discarded.
@@ -428,7 +449,7 @@ When pagination is enabled with `pageSize`, the pagination footer is hidden auto
 
 Header controls for column reordering, resizing, and visibility are floating controls. The drag handle and column visibility menu animate in on hover/focus and do not consume label width, so narrow headers keep as much readable text as possible.
 
-DataTable renders its rows with CSS Grid instead of the browser's native table layout. Column resizing uses the saved column widths as the base grid tracks, fills any spare container width across visible columns, and switches to horizontal scrolling when the resized columns exceed the available space. This keeps resize behavior predictable without leaving a blank gutter on the right side.
+DataTable renders its rows with CSS Grid instead of the browser's native table layout. Body cells vertically center their content by default (`flex items-center`) so mixed-height content (badges, actions, text) stays aligned when a row grows. Column resizing uses the saved column widths as the base grid tracks, fills any spare container width across visible columns, and switches to horizontal scrolling when the resized columns exceed the available space. This keeps resize behavior predictable without leaving a blank gutter on the right side.
 
 DataTable can also expose a table query state for server-backed screens. Enable `enableBql` to show a compact BQL input in the toolbar, listen to `onQueryChange` to receive the current BQL text, column filters, sort, page, page size, and hidden columns, and use `persistState` with `storageKey` when a screen should reopen with saved filters or BQL. The component only emits and stores query state; each app should validate and translate BQL on the server for its own allowed fields.