@page-speed/lightbox 0.2.0 → 0.2.1

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

@@ -0,0 +1,21 @@
+import React from "react";
+interface HorizontalShowcaseLayoutProps {
+    content: React.ReactNode;
+    chrome: React.ReactNode;
+    footer?: React.ReactNode;
+    thumbnails?: React.ReactNode;
+    height?: string | number;
+    maxWidth?: string | number;
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * Horizontal showcase layout: large content area at top with
+ * footer panel below containing caption/metadata on left and
+ * thumbnail strip on right.
+ *
+ * Based on the design mockup showing a large image with
+ * caption text on the left and horizontal thumbnail strip on the right.
+ */
+export declare function HorizontalShowcaseLayout({ content, chrome, footer, thumbnails, height, maxWidth, className, style, }: HorizontalShowcaseLayoutProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,25 @@
+import React from "react";
+interface VerticalPeekLayoutProps {
+    content: React.ReactNode;
+    prevContent?: React.ReactNode;
+    nextContent?: React.ReactNode;
+    chrome: React.ReactNode;
+    footer?: React.ReactNode;
+    height?: string | number;
+    maxWidth?: string | number;
+    className?: string;
+    style?: React.CSSProperties;
+    onPrev?: () => void;
+    onNext?: () => void;
+    canPrev?: boolean;
+    canNext?: boolean;
+}
+/**
+ * Vertical peek layout: carousel-style display with adjacent slides
+ * visible on the sides. Ideal for portrait/vertical video content.
+ *
+ * Based on the design mockup showing a centered vertical video with
+ * partially visible adjacent slides on left and right sides.
+ */
+export declare function VerticalPeekLayout({ content, prevContent, nextContent, chrome, footer, height, maxWidth, className, style, onPrev, onNext, canPrev, canNext, }: VerticalPeekLayoutProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/LightboxThumbnails.d.ts

@@ -0,0 +1,20 @@
+import { LightboxItem, LightboxThumbnailsConfig } from "../types";
+interface LightboxThumbnailsProps {
+    items: LightboxItem[];
+    currentIndex: number;
+    onSelect: (index: number) => void;
+    config?: LightboxThumbnailsConfig;
+    className?: string;
+}
+/**
+ * Thumbnail navigation component for the lightbox.
+ *
+ * Supports two variants:
+ * - "strip": Horizontal scrollable strip of thumbnails
+ * - "grid": Grid layout for sidebar placement
+ *
+ * Thumbnails use the item's `thumbnail` property if available,
+ * falling back to `src` for images.
+ */
+export declare function LightboxThumbnails({ items, currentIndex, onSelect, config, className, }: LightboxThumbnailsProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/index.d.ts

@@ -2,8 +2,11 @@ export { Lightbox } from "./Lightbox";
 export { LightboxOverlay } from "./LightboxOverlay";
 export { LightboxContent } from "./LightboxContent";
 export { LightboxChrome } from "./LightboxChrome";
+export { LightboxThumbnails } from "./LightboxThumbnails";
 export { HorizontalLayout } from "./Layouts/HorizontalLayout";
+export { HorizontalShowcaseLayout } from "./Layouts/HorizontalShowcaseLayout";
 export { VerticalSplitLayout } from "./Layouts/VerticalSplitLayout";
+export { VerticalPeekLayout } from "./Layouts/VerticalPeekLayout";
 export { CustomSlideLayout } from "./Layouts/CustomSlideLayout";
 export { FullscreenLayout } from "./Layouts/FullscreenLayout";
 export { InlineLayout } from "./Layouts/InlineLayout";