Big News: Socket raises $60M Series C at a $1B valuation to secure software supply chains for AI-driven development.Announcement →
Sign In

@page-speed/lightbox

Package Overview
Dependencies
Maintainers
1
Versions
16
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@page-speed/lightbox - npm Package Compare versions

Comparing version
0.2.0
 to
0.2.1
+21
dist/components/Layouts/HorizontalShowcaseLayout.d.ts
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 {};
+25
dist/components/Layouts/VerticalPeekLayout.d.ts
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 {};
+20
dist/components/LightboxThumbnails.d.ts
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 {};
+3
-0
dist/components/index.d.ts

@@ -5,6 +5,9 @@ export { Lightbox } from "./Lightbox";

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";
+5
-0
dist/core/index.js

@@ -12,2 +12,4 @@ // src/hooks/useGalleryState.ts

const currentItem = items[currentIndex] ?? null;
const prevItem = currentIndex > 0 ? items[currentIndex - 1] : null;
const nextItem = currentIndex < items.length - 1 ? items[currentIndex + 1] : null;
const goToIndex = useCallback(

@@ -28,4 +30,7 @@ (index) => {

return {
items,
currentIndex,
currentItem,
prevItem,
nextItem,
goToIndex,

@@ -32,0 +37,0 @@ next,

+5
-0
dist/hooks/index.js

@@ -12,2 +12,4 @@ // src/hooks/useGalleryState.ts

const currentItem = items[currentIndex] ?? null;
const prevItem = currentIndex > 0 ? items[currentIndex - 1] : null;
const nextItem = currentIndex < items.length - 1 ? items[currentIndex + 1] : null;
const goToIndex = useCallback(

@@ -28,4 +30,7 @@ (index) => {

return {
items,
currentIndex,
currentItem,
prevItem,
nextItem,
goToIndex,

@@ -32,0 +37,0 @@ next,

+3
-0
dist/hooks/useGalleryState.d.ts

@@ -7,4 +7,7 @@ import { LightboxItem } from "../types";

}): {
items: LightboxItem[];
currentIndex: number;
currentItem: LightboxItem;
prevItem: LightboxItem | null;
nextItem: LightboxItem | null;
goToIndex: (index: number) => void;

@@ -11,0 +14,0 @@ next: () => void;

+34
-1
dist/types.d.ts
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";

@@ -59,2 +62,8 @@ export interface LightboxDownload {

}
export interface LightboxThumbnailsConfig {
position?: LightboxThumbnailsPosition;
variant?: LightboxThumbnailsVariant;
size?: "sm" | "md" | "lg";
showOnMobile?: boolean;
}
export interface LightboxProps {

@@ -74,2 +83,26 @@ items: LightboxItem[];

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;

@@ -76,0 +109,0 @@ onClose?: () => void;

+2
-2
package.json
{
"name": "@page-speed/lightbox",
"version": "0.2.0",
"version": "0.2.1",
"description": "High-performance, feature-rich lightbox for OpenSite platform",

@@ -83,3 +83,3 @@ "main": "dist/index.cjs",

"@page-speed/img": "^0.4.3",
"@page-speed/pdf-viewer": "0.1.8",
"@page-speed/pdf-viewer": "0.1.9",
"clsx": "^2.1.1",

@@ -86,0 +86,0 @@ "tailwind-merge": "^3.4.0"

dist/components/index.js

Sorry, the diff of this file is too big to display

dist/index.cjs

Sorry, the diff of this file is too big to display

dist/index.js

Sorry, the diff of this file is too big to display

dist/renderers/index.js

Sorry, the diff of this file is too big to display