@page-speed/lightbox 0.0.1 → 0.1.0

package/README.md

@@ -1,6 +1,24 @@
+![Page Speed React Lightbox](https://octane.cdn.ing/api/v1/images/transform?url=https://cdn.ing/assets/i/r/286338/xmo09liynb5kdq8o8e0yk3j1kjgf/github.png&q=90)
+
 # @page-speed/lightbox
 
-High‑performance, media‑rich lightbox for React, designed for the DashTrack / OpenSite ecosystem and the Semantic Site Builder engine.
+High‑performance, media‑rich lightbox for React, professionally designed by the UI/UX team at [OpenSite](https://opensite.ai/) for their Semantic UI engine.
+
+
+## Page Speed Lightbox Showcase
+
+> Below you can see the wide range of layouts that are available automatically, enabling a modern UI experience for users. And since the component was specifically engineered for our Semantic UI engine, in addition to the default layout and style variants, the Lightbox components are also completely customizable.
+
+<p>
+  <br />
+  <div align="center">
+    <img src="https://github.com/user-attachments/assets/fe5c9392-5b8b-4e68-afe3-7dfccc5e657e" alt="ShadCN and Tailwind Lightbox Library" width="100%">
+  </div>
+  <br />
+</p>
+<br />
+<p></p>
+
 
 ## Overview
 

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

@@ -0,0 +1,15 @@
+import React from "react";
+interface CustomSlideLayoutProps {
+    content: React.ReactNode;
+    chrome: React.ReactNode;
+    height?: string | number;
+    maxWidth?: string | number;
+    className?: string;
+    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.
+ */
+export declare function CustomSlideLayout({ content, chrome, height, maxWidth, className, style, }: CustomSlideLayoutProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,15 @@
+import React from "react";
+interface FullscreenLayoutProps {
+    content: React.ReactNode;
+    chrome: React.ReactNode;
+    height?: string | number;
+    maxWidth?: string | number;
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * Fullscreen layout: takes up the entire viewport with minimal chrome.
+ * Ideal for mobile devices and immersive viewing experiences.
+ */
+export declare function FullscreenLayout({ content, chrome, className, style, }: FullscreenLayoutProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,15 @@
+import React from "react";
+interface InlineLayoutProps {
+    content: React.ReactNode;
+    chrome: React.ReactNode;
+    height?: string | number;
+    maxWidth?: string | number;
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * Inline layout: renders the lightbox content inline on the page without
+ * the modal overlay. Useful for embedding galleries directly in page flow.
+ */
+export declare function InlineLayout({ content, chrome, height, maxWidth, className, style, }: InlineLayoutProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,16 @@
+import React from "react";
+interface VerticalSplitLayoutProps {
+    content: React.ReactNode;
+    chrome: 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.
+ */
+export declare function VerticalSplitLayout({ content, chrome, height, maxWidth, className, style, }: VerticalSplitLayoutProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/LightboxContent.d.ts

@@ -1,7 +1,8 @@
-import { LightboxItem, LightboxLayoutType } from "../types";
+import { LightboxItem, LightboxLayoutType, LightboxOptixFlowConfig } from "../types";
 interface LightboxContentProps {
     item: LightboxItem | null;
     layout: LightboxLayoutType;
+    optixFlowConfig?: LightboxOptixFlowConfig;
 }
 /**
  * Dispatches to the appropriate renderer based on the LightboxItem type.
@@ -9,5 +10,5 @@ interface LightboxContentProps {
  * This component stays very small so individual renderers can be
  * tree-shaken and swapped out by the Semantic UI engine if needed.
  */
-export declare function LightboxContent({ item, layout }: LightboxContentProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function LightboxContent({ item, layout, optixFlowConfig }: LightboxContentProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/components/index.css

@@ -97,3 +97,164 @@
   height: 100%;
   color: var(--lightbox-text-muted, rgba(255, 255, 255, 0.7));
 }
+.Lightbox_verticalSplitLayoutRoot3 {
+  position: relative;
+  max-width: var(--lightbox-max-width, 90vw);
+  width: 100%;
+  padding: var(--lightbox-padding, 24px);
+  box-sizing: border-box;
+}
+.Lightbox_verticalSplitLayoutContainer3 {
+  position: relative;
+  background: var(--lightbox-modal-bg, #111);
+  color: var(--lightbox-text, #fff);
+  border-radius: var(--lightbox-radius, 12px);
+  overflow: hidden;
+  display: flex;
+  flex-direction: row;
+  min-height: 70vh;
+}
+.Lightbox_verticalSplitContent3 {
+  flex: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--lightbox-content-bg, #000);
+  overflow: auto;
+}
+.Lightbox_verticalSplitSidebar3 {
+  flex: 1;
+  min-width: 300px;
+  max-width: 400px;
+  border-left: 1px solid var(--lightbox-border, rgba(255, 255, 255, 0.1));
+  display: flex;
+  flex-direction: column;
+  background: var(--lightbox-sidebar-bg, rgba(0, 0, 0, 0.3));
+}
+@media (max-width: 1024px) {
+  .Lightbox_verticalSplitLayoutContainer3 {
+    flex-direction: column;
+  }
+  .Lightbox_verticalSplitSidebar3 {
+    min-width: auto;
+    max-width: none;
+    border-left: none;
+    border-top: 1px solid var(--lightbox-border, rgba(255, 255, 255, 0.1));
+  }
+}
+.Lightbox_customSlideLayoutRoot3 {
+  position: relative;
+  max-width: var(--lightbox-max-width, 95vw);
+  width: 100%;
+  padding: var(--lightbox-padding, 16px);
+  box-sizing: border-box;
+}
+.Lightbox_customSlideLayoutContainer3 {
+  position: relative;
+  background: var(--lightbox-modal-bg, #111);
+  color: var(--lightbox-text, #fff);
+  border-radius: var(--lightbox-radius, 12px);
+  overflow: hidden;
+  min-height: 80vh;
+  display: flex;
+  flex-direction: column;
+}
+.Lightbox_customSlideContent3 {
+  flex: 1;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--lightbox-content-bg, #000);
+  overflow: auto;
+}
+.Lightbox_customSlideChrome3 {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background:
+    linear-gradient(
+      to top,
+      rgba(0, 0, 0, 0.8) 0%,
+      transparent 100%);
+  padding: 24px 16px 16px;
+  z-index: 10;
+}
+.Lightbox_fullscreenLayoutRoot3 {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  background: var(--lightbox-fullscreen-bg, #000);
+}
+.Lightbox_fullscreenLayoutContainer3 {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: var(--lightbox-text, #fff);
+}
+.Lightbox_fullscreenContent3 {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--lightbox-content-bg, #000);
+  overflow: auto;
+}
+.Lightbox_fullscreenChrome3 {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  background:
+    linear-gradient(
+      to bottom,
+      rgba(0, 0, 0, 0.8) 0%,
+      transparent 100%);
+  padding: 16px 24px 48px;
+  z-index: 10;
+}
+.Lightbox_inlineLayoutRoot3 {
+  position: relative;
+  max-width: var(--lightbox-max-width, 100%);
+  width: 100%;
+  margin: 0 auto;
+}
+.Lightbox_inlineLayoutContainer3 {
+  position: relative;
+  background: var(--lightbox-modal-bg, #111);
+  color: var(--lightbox-text, #fff);
+  border-radius: var(--lightbox-radius, 12px);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+.Lightbox_inlineContent3 {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--lightbox-content-bg, #000);
+  min-height: 400px;
+}
+.Lightbox_inlineToolbar3 {
+  border-top: 1px solid var(--lightbox-border, rgba(255, 255, 255, 0.1));
+}
+@media (max-width: 768px) {
+  .Lightbox_verticalSplitLayoutRoot3,
+  .Lightbox_customSlideLayoutRoot3 {
+    padding: 0;
+    max-width: 100vw;
+    max-height: 100vh;
+  }
+  .Lightbox_verticalSplitLayoutContainer3,
+  .Lightbox_customSlideLayoutContainer3 {
+    border-radius: 0;
+    min-height: 100vh;
+  }
+  .Lightbox_customSlideChrome3,
+  .Lightbox_fullscreenChrome3 {
+    padding: 12px;
+  }
+}

package/dist/components/index.d.ts

@@ -3,3 +3,7 @@ export { LightboxOverlay } from "./LightboxOverlay";
 export { LightboxContent } from "./LightboxContent";
 export { LightboxChrome } from "./LightboxChrome";
 export { HorizontalLayout } from "./Layouts/HorizontalLayout";
+export { VerticalSplitLayout } from "./Layouts/VerticalSplitLayout";
+export { CustomSlideLayout } from "./Layouts/CustomSlideLayout";
+export { FullscreenLayout } from "./Layouts/FullscreenLayout";
+export { InlineLayout } from "./Layouts/InlineLayout";