@page-speed/lightbox 0.1.2 → 0.1.4

package/dist/components/Layouts/CustomSlideLayout.d.ts

@@ -8,8 +8,9 @@ interface CustomSlideLayoutProps {
     style?: React.CSSProperties;
 }
 /**
- * Custom slide layout: optimized for component-type items where you want
- * full creative control over the slide content. Chrome is overlaid or minimal.
+ * Custom slide layout: optimized for PDF/slide presentations.
+ * Based on the design mockups showing a centered white card with
+ * rounded corners containing the slide content.
  */
 export declare function CustomSlideLayout({ content, chrome, height, maxWidth, className, style, }: CustomSlideLayoutProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Layouts/HorizontalLayout.d.ts

@@ -8,9 +8,9 @@ interface HorizontalLayoutProps {
     style?: React.CSSProperties;
 }
 /**
- * Default desktop layout: primary content area with chrome and optional
- * thumbnails below. For v1 we only implement the main content + chrome
- * region; thumbnails can be added later as a non-breaking enhancement.
+ * Default desktop layout: primary content area with chrome below.
+ * Based on the design mockups showing a large content card with
+ * thumbnail strip and navigation at the bottom.
  */
 export declare function HorizontalLayout({ content, chrome, height, maxWidth, className, style, }: HorizontalLayoutProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Layouts/VerticalSplitLayout.d.ts

@@ -2,15 +2,16 @@ import React from "react";
 interface VerticalSplitLayoutProps {
     content: React.ReactNode;
     chrome: React.ReactNode;
+    sidebar?: React.ReactNode;
     height?: string | number;
     maxWidth?: string | number;
     className?: string;
     style?: React.CSSProperties;
 }
 /**
- * Vertical split layout: content on the left, chrome/controls on the right.
- * Ideal for tablet and medium-sized viewports where you want side-by-side
- * media and metadata/controls.
+ * Vertical split layout: content on the left, sidebar on the right.
+ * Based on the design mockups showing a large image with a sidebar
+ * containing social media post details and thumbnail grid.
  */
-export declare function VerticalSplitLayout({ content, chrome, height, maxWidth, className, style, }: VerticalSplitLayoutProps): import("react/jsx-runtime").JSX.Element;
+export declare function VerticalSplitLayout({ content, chrome, sidebar, height, maxWidth, className, style, }: VerticalSplitLayoutProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Lightbox.d.ts

@@ -7,4 +7,4 @@ import { LightboxProps } from "../types";
  * That keeps it easy to integrate into the Semantic Site Builder while
  * still providing strong defaults for keyboard and scroll handling.
  */
-export declare function Lightbox(props: LightboxProps): import("react/jsx-runtime").JSX.Element;
+export declare function Lightbox(props: LightboxProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/LightboxChrome.d.ts

@@ -9,13 +9,20 @@ interface LightboxChromeProps {
     onNext: () => void;
     onPrev: () => void;
     onClose?: () => void;
+    className?: string;
+    variant?: "toolbar" | "floating";
 }
 /**
- * Toolbar / chrome shown above or below the main content.
+ * Toolbar / chrome for the lightbox.
  *
- * For v1 this focuses on navigation, close button, basic captions, and
- * counter. More advanced controls (share, download, fullscreen) can be
- * layered in later without breaking the API.
+ * Supports two variants:
+ * - "toolbar": Traditional toolbar layout (default)
+ * - "floating": Floating buttons positioned around the viewport
+ *
+ * The floating variant matches the design mockups with:
+ * - Top-right action buttons (fullscreen, download, share, close)
+ * - Bottom-right navigation arrows
+ * - Bottom-left caption card
  */
-export declare function LightboxChrome({ currentIndex, totalItems, currentItem, canNext, canPrev, controls, onNext, onPrev, onClose, }: LightboxChromeProps): import("react/jsx-runtime").JSX.Element;
+export declare function LightboxChrome({ currentIndex, totalItems, currentItem, canNext, canPrev, controls, onNext, onPrev, onClose, className, variant, }: LightboxChromeProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/LightboxOverlay.d.ts

@@ -1,12 +1,14 @@
 interface LightboxOverlayProps {
     onClose?: () => void;
     closeOnBackdropClick?: boolean;
+    className?: string;
 }
 /**
  * Full-screen dark overlay that sits behind the lightbox content.
  *
+ * Uses a subtle grid pattern background matching the design mockups.
  * Kept intentionally minimal so it works well with the Semantic Site
  * Builder and external layout containers.
  */
-export declare function LightboxOverlay({ onClose, closeOnBackdropClick, }: LightboxOverlayProps): import("react/jsx-runtime").JSX.Element;
+export declare function LightboxOverlay({ onClose, closeOnBackdropClick, className, }: LightboxOverlayProps): import("react/jsx-runtime").JSX.Element;
 export {};