@page-speed/lightbox 0.0.2 → 0.1.1

package/dist/index.cjs

@@ -2802,11 +2802,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;
       })();
     }
   }
@@ -20856,7 +20856,7 @@ var require_pdf = __commonJS({
   }
 });
 
-// node_modules/.pnpm/@page-speed+pdf-viewer@0.0.2_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@page-speed/pdf-viewer/dist/index.js
+// node_modules/.pnpm/@page-speed+pdf-viewer@0.1.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@page-speed/pdf-viewer/dist/index.js
 var dist_exports = {};
 __export(dist_exports, {
   PDFCanvas: () => PDFCanvas,
@@ -21453,7 +21453,7 @@ function createProgressiveFetchHandler(onProgress) {
 }
 var import_react8, import_react9, pdfjsLib, import_react10, import_react11, import_react12, import_react13, import_react14, import_jsx_runtime5, import_jsx_runtime6, import_react15, import_jsx_runtime7, import_jsx_runtime8, DEFAULT_SCALE, CACHE_SIZE, MIN_ZOOM, MAX_ZOOM, ZOOM_STEP, PDFViewer_default, linearizedPDFConfig;
 var init_dist = __esm({
-  "node_modules/.pnpm/@page-speed+pdf-viewer@0.0.2_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@page-speed/pdf-viewer/dist/index.js"() {
+  "node_modules/.pnpm/@page-speed+pdf-viewer@0.1.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@page-speed/pdf-viewer/dist/index.js"() {
     import_react8 = __toESM(require_react());
     import_react9 = __toESM(require_react());
     pdfjsLib = __toESM(require_pdf());
@@ -21506,13 +21506,17 @@ var init_dist = __esm({
 var index_exports = {};
 __export(index_exports, {
   ComponentRenderer: () => ComponentRenderer,
+  CustomSlideLayout: () => CustomSlideLayout,
+  FullscreenLayout: () => FullscreenLayout,
   HorizontalLayout: () => HorizontalLayout,
   ImageRenderer: () => ImageRenderer,
+  InlineLayout: () => InlineLayout,
   Lightbox: () => Lightbox,
   LightboxChrome: () => LightboxChrome,
   LightboxContent: () => LightboxContent,
   LightboxOverlay: () => LightboxOverlay,
   PDFRenderer: () => PDFRenderer,
+  VerticalSplitLayout: () => VerticalSplitLayout,
   VideoRenderer: () => VideoRenderer,
   useGalleryState: () => useGalleryState,
   useKeyboardShortcuts: () => useKeyboardShortcuts,
@@ -21621,7 +21625,23 @@ var Lightbox_default = {
   captionTitle: "Lightbox_captionTitle",
   captionText: "Lightbox_captionText",
   pdfContainer: "Lightbox_pdfContainer",
-  pdfFallback: "Lightbox_pdfFallback"
+  pdfFallback: "Lightbox_pdfFallback",
+  verticalSplitLayoutRoot: "Lightbox_verticalSplitLayoutRoot",
+  verticalSplitLayoutContainer: "Lightbox_verticalSplitLayoutContainer",
+  verticalSplitContent: "Lightbox_verticalSplitContent",
+  verticalSplitSidebar: "Lightbox_verticalSplitSidebar",
+  customSlideLayoutRoot: "Lightbox_customSlideLayoutRoot",
+  customSlideLayoutContainer: "Lightbox_customSlideLayoutContainer",
+  customSlideContent: "Lightbox_customSlideContent",
+  customSlideChrome: "Lightbox_customSlideChrome",
+  fullscreenLayoutRoot: "Lightbox_fullscreenLayoutRoot",
+  fullscreenLayoutContainer: "Lightbox_fullscreenLayoutContainer",
+  fullscreenContent: "Lightbox_fullscreenContent",
+  fullscreenChrome: "Lightbox_fullscreenChrome",
+  inlineLayoutRoot: "Lightbox_inlineLayoutRoot",
+  inlineLayoutContainer: "Lightbox_inlineLayoutContainer",
+  inlineContent: "Lightbox_inlineContent",
+  inlineToolbar: "Lightbox_inlineToolbar"
 };
 
 // src/components/LightboxOverlay.tsx
@@ -22494,8 +22514,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({
@@ -22572,45 +22705,64 @@ 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
   ] });
 }
 

package/dist/index.css

@@ -97,3 +97,164 @@
   height: 100%;
   color: var(--lightbox-text-muted, rgba(255, 255, 255, 0.7));
 }
+.Lightbox_verticalSplitLayoutRoot {
+  position: relative;
+  max-width: var(--lightbox-max-width, 90vw);
+  width: 100%;
+  padding: var(--lightbox-padding, 24px);
+  box-sizing: border-box;
+}
+.Lightbox_verticalSplitLayoutContainer {
+  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_verticalSplitContent {
+  flex: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--lightbox-content-bg, #000);
+  overflow: auto;
+}
+.Lightbox_verticalSplitSidebar {
+  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_verticalSplitLayoutContainer {
+    flex-direction: column;
+  }
+  .Lightbox_verticalSplitSidebar {
+    min-width: auto;
+    max-width: none;
+    border-left: none;
+    border-top: 1px solid var(--lightbox-border, rgba(255, 255, 255, 0.1));
+  }
+}
+.Lightbox_customSlideLayoutRoot {
+  position: relative;
+  max-width: var(--lightbox-max-width, 95vw);
+  width: 100%;
+  padding: var(--lightbox-padding, 16px);
+  box-sizing: border-box;
+}
+.Lightbox_customSlideLayoutContainer {
+  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_customSlideContent {
+  flex: 1;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--lightbox-content-bg, #000);
+  overflow: auto;
+}
+.Lightbox_customSlideChrome {
+  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_fullscreenLayoutRoot {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  background: var(--lightbox-fullscreen-bg, #000);
+}
+.Lightbox_fullscreenLayoutContainer {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: var(--lightbox-text, #fff);
+}
+.Lightbox_fullscreenContent {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--lightbox-content-bg, #000);
+  overflow: auto;
+}
+.Lightbox_fullscreenChrome {
+  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_inlineLayoutRoot {
+  position: relative;
+  max-width: var(--lightbox-max-width, 100%);
+  width: 100%;
+  margin: 0 auto;
+}
+.Lightbox_inlineLayoutContainer {
+  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_inlineContent {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--lightbox-content-bg, #000);
+  min-height: 400px;
+}
+.Lightbox_inlineToolbar {
+  border-top: 1px solid var(--lightbox-border, rgba(255, 255, 255, 0.1));
+}
+@media (max-width: 768px) {
+  .Lightbox_verticalSplitLayoutRoot,
+  .Lightbox_customSlideLayoutRoot {
+    padding: 0;
+    max-width: 100vw;
+    max-height: 100vh;
+  }
+  .Lightbox_verticalSplitLayoutContainer,
+  .Lightbox_customSlideLayoutContainer {
+    border-radius: 0;
+    min-height: 100vh;
+  }
+  .Lightbox_customSlideChrome,
+  .Lightbox_fullscreenChrome {
+    padding: 12px;
+  }
+}