bonsaif-ui 0.1.105 → 0.1.118

package/CHANGELOG.md

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