@page-speed/lightbox 0.0.2 → 0.1.0

package/README.md

@@ -2,7 +2,23 @@
 
 # @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/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";

package/dist/components/index.js

@@ -2806,11 +2806,11 @@ var require_react_jsx_runtime_development = __commonJS({
             return jsxWithValidation(type, props, key, false);
           }
         }
-        var jsx11 = jsxWithValidationDynamic;
-        var jsxs7 = jsxWithValidationStatic;
+        var jsx15 = jsxWithValidationDynamic;
+        var jsxs11 = jsxWithValidationStatic;
         exports2.Fragment = REACT_FRAGMENT_TYPE;
-        exports2.jsx = jsx11;
-        exports2.jsxs = jsxs7;
+        exports2.jsx = jsx15;
+        exports2.jsxs = jsxs11;
       })();
     }
   }
@@ -21605,7 +21605,23 @@ var Lightbox_default = {
   captionTitle: "Lightbox_captionTitle3",
   captionText: "Lightbox_captionText3",
   pdfContainer: "Lightbox_pdfContainer3",
-  pdfFallback: "Lightbox_pdfFallback3"
+  pdfFallback: "Lightbox_pdfFallback3",
+  verticalSplitLayoutRoot: "Lightbox_verticalSplitLayoutRoot3",
+  verticalSplitLayoutContainer: "Lightbox_verticalSplitLayoutContainer3",
+  verticalSplitContent: "Lightbox_verticalSplitContent3",
+  verticalSplitSidebar: "Lightbox_verticalSplitSidebar3",
+  customSlideLayoutRoot: "Lightbox_customSlideLayoutRoot3",
+  customSlideLayoutContainer: "Lightbox_customSlideLayoutContainer3",
+  customSlideContent: "Lightbox_customSlideContent3",
+  customSlideChrome: "Lightbox_customSlideChrome3",
+  fullscreenLayoutRoot: "Lightbox_fullscreenLayoutRoot3",
+  fullscreenLayoutContainer: "Lightbox_fullscreenLayoutContainer3",
+  fullscreenContent: "Lightbox_fullscreenContent3",
+  fullscreenChrome: "Lightbox_fullscreenChrome3",
+  inlineLayoutRoot: "Lightbox_inlineLayoutRoot3",
+  inlineLayoutContainer: "Lightbox_inlineLayoutContainer3",
+  inlineContent: "Lightbox_inlineContent3",
+  inlineToolbar: "Lightbox_inlineToolbar3"
 };
 
 // src/components/LightboxOverlay.tsx
@@ -22478,8 +22494,121 @@ function HorizontalLayout({
   ) });
 }
 
-// src/components/Lightbox.tsx
+// src/components/Layouts/VerticalSplitLayout.tsx
 var import_jsx_runtime14 = __toESM(require_jsx_runtime());
+function VerticalSplitLayout({
+  content,
+  chrome,
+  height,
+  maxWidth,
+  className,
+  style
+}) {
+  const containerStyle = {
+    maxWidth,
+    height,
+    ...style
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: Lightbox_default.verticalSplitLayoutRoot, style: containerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+    "div",
+    {
+      className: [
+        Lightbox_default.verticalSplitLayoutContainer,
+        className || ""
+      ].join(" ").trim(),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: Lightbox_default.verticalSplitContent, children: content }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: Lightbox_default.verticalSplitSidebar, children: chrome })
+      ]
+    }
+  ) });
+}
+
+// src/components/Layouts/CustomSlideLayout.tsx
+var import_jsx_runtime15 = __toESM(require_jsx_runtime());
+function CustomSlideLayout({
+  content,
+  chrome,
+  height,
+  maxWidth,
+  className,
+  style
+}) {
+  const containerStyle = {
+    maxWidth,
+    height,
+    ...style
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: Lightbox_default.customSlideLayoutRoot, style: containerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+    "div",
+    {
+      className: [
+        Lightbox_default.customSlideLayoutContainer,
+        className || ""
+      ].join(" ").trim(),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: Lightbox_default.customSlideContent, children: content }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: Lightbox_default.customSlideChrome, children: chrome })
+      ]
+    }
+  ) });
+}
+
+// src/components/Layouts/FullscreenLayout.tsx
+var import_jsx_runtime16 = __toESM(require_jsx_runtime());
+function FullscreenLayout({
+  content,
+  chrome,
+  className,
+  style
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: Lightbox_default.fullscreenLayoutRoot, style, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+    "div",
+    {
+      className: [
+        Lightbox_default.fullscreenLayoutContainer,
+        className || ""
+      ].join(" ").trim(),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: Lightbox_default.fullscreenContent, children: content }),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: Lightbox_default.fullscreenChrome, children: chrome })
+      ]
+    }
+  ) });
+}
+
+// src/components/Layouts/InlineLayout.tsx
+var import_jsx_runtime17 = __toESM(require_jsx_runtime());
+function InlineLayout({
+  content,
+  chrome,
+  height,
+  maxWidth,
+  className,
+  style
+}) {
+  const containerStyle = {
+    maxWidth,
+    height,
+    ...style
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: Lightbox_default.inlineLayoutRoot, style: containerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+    "div",
+    {
+      className: [
+        Lightbox_default.inlineLayoutContainer,
+        className || ""
+      ].join(" ").trim(),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: Lightbox_default.inlineContent, children: content }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: Lightbox_default.inlineToolbar, children: chrome })
+      ]
+    }
+  ) });
+}
+
+// src/components/Lightbox.tsx
+var import_jsx_runtime18 = __toESM(require_jsx_runtime());
 function Lightbox(props) {
   const { items, initialIndex = 0 } = props;
   const gallery = useGalleryState({
@@ -22556,53 +22685,76 @@ function Lightbox(props) {
     captions: true,
     ...props.controls
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: Lightbox_default.lightboxPortal, role: "dialog", "aria-modal": "true", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  const contentNode = /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    LightboxContent,
+    {
+      item: currentItem,
+      layout,
+      optixFlowConfig: props.optixFlowConfig
+    }
+  );
+  const chromeNode = /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    LightboxChrome,
+    {
+      currentIndex: gallery.currentIndex,
+      totalItems: items.length,
+      currentItem,
+      canNext: gallery.canNext,
+      canPrev: gallery.canPrev,
+      controls: effectiveControls,
+      onNext: handleNext,
+      onPrev: handlePrev,
+      onClose: handleClose
+    }
+  );
+  const layoutProps = {
+    content: contentNode,
+    chrome: chromeNode,
+    height: props.height,
+    maxWidth: props.maxWidth,
+    className: props.className,
+    style: props.style
+  };
+  if (layout === "inline") {
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(InlineLayout, { ...layoutProps });
+  }
+  let layoutComponent;
+  switch (layout) {
+    case "vertical-split":
+      layoutComponent = /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(VerticalSplitLayout, { ...layoutProps });
+      break;
+    case "custom-slide":
+      layoutComponent = /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(CustomSlideLayout, { ...layoutProps });
+      break;
+    case "fullscreen":
+      layoutComponent = /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(FullscreenLayout, { ...layoutProps });
+      break;
+    case "horizontal":
+    default:
+      layoutComponent = /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(HorizontalLayout, { ...layoutProps });
+      break;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: Lightbox_default.lightboxPortal, role: "dialog", "aria-modal": "true", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       LightboxOverlay,
       {
         onClose: handleClose,
         closeOnBackdropClick: props.closeOnBackdropClick ?? true
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-      HorizontalLayout,
-      {
-        content: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-          LightboxContent,
-          {
-            item: currentItem,
-            layout,
-            optixFlowConfig: props.optixFlowConfig
-          }
-        ),
-        chrome: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-          LightboxChrome,
-          {
-            currentIndex: gallery.currentIndex,
-            totalItems: items.length,
-            currentItem,
-            canNext: gallery.canNext,
-            canPrev: gallery.canPrev,
-            controls: effectiveControls,
-            onNext: handleNext,
-            onPrev: handlePrev,
-            onClose: handleClose
-          }
-        ),
-        height: props.height,
-        maxWidth: props.maxWidth,
-        className: props.className,
-        style: props.style
-      }
-    )
+    layoutComponent
   ] });
 }
 export {
+  CustomSlideLayout,
+  FullscreenLayout,
   HorizontalLayout,
+  InlineLayout,
   Lightbox,
   LightboxChrome,
   LightboxContent,
-  LightboxOverlay
+  LightboxOverlay,
+  VerticalSplitLayout
 };
 /*! Bundled license information: