@page-speed/lightbox 0.2.0 → 0.2.2

package/dist/types.d.ts

@@ -1,5 +1,8 @@
 import type { OptixFlowConfig as ImgOptixFlowConfig } from "@page-speed/img";
-export type LightboxLayoutType = "horizontal" | "vertical-split" | "custom-slide" | "fullscreen" | "inline";
+export type LightboxLayoutType = "horizontal" | "horizontal-showcase" | "vertical-split" | "vertical-peek" | "custom-slide" | "fullscreen" | "inline";
+export type LightboxChromeVariant = "toolbar" | "floating";
+export type LightboxThumbnailsPosition = "bottom" | "sidebar" | "none";
+export type LightboxThumbnailsVariant = "strip" | "grid";
 export type LightboxItemType = "image" | "video" | "pdf" | "component";
 export interface LightboxDownload {
     enabled?: boolean;
@@ -56,6 +59,12 @@ export interface LightboxControls {
     fullscreen?: boolean;
     closeButton?: boolean;
 }
+export interface LightboxThumbnailsConfig {
+    position?: LightboxThumbnailsPosition;
+    variant?: LightboxThumbnailsVariant;
+    size?: "sm" | "md" | "lg";
+    showOnMobile?: boolean;
+}
 export interface LightboxProps {
     items: LightboxItem[];
     initialIndex?: number;
@@ -70,6 +79,30 @@ export interface LightboxProps {
      * the underlying @page-speed/img <Img /> component.
      */
     optixFlowConfig?: LightboxOptixFlowConfig;
+    /**
+     * Custom sidebar content for vertical-split layout.
+     * Renders in the right sidebar area alongside the main content.
+     */
+    sidebar?: React.ReactNode;
+    /**
+     * Custom footer content for layouts that support it.
+     * Renders below the main content area (e.g., info cards, metadata).
+     */
+    footer?: React.ReactNode;
+    /**
+     * Chrome UI variant: "toolbar" for traditional bottom bar,
+     * "floating" for floating buttons around the viewport.
+     */
+    chromeVariant?: LightboxChromeVariant;
+    /**
+     * Thumbnails configuration for gallery navigation.
+     */
+    thumbnails?: LightboxThumbnailsConfig;
+    /**
+     * Enable smooth CSS animations for slide transitions.
+     * Respects prefers-reduced-motion automatically.
+     */
+    enableAnimations?: boolean;
     onOpen?: () => void;
     onClose?: () => void;
     onSelect?: (index: number) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@page-speed/lightbox",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "High-performance, feature-rich lightbox for OpenSite platform",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
@@ -80,7 +80,7 @@
   },
   "dependencies": {
     "@page-speed/img": "^0.4.3",
-    "@page-speed/pdf-viewer": "0.1.8",
+    "@page-speed/pdf-viewer": "^0.1.9",
     "clsx": "^2.1.1",
     "tailwind-merge": "^3.4.0"
   }