@page-speed/lightbox 0.0.2 → 0.1.0

package/dist/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_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
@@ -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,45 +22685,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
   ] });
 }
 
@@ -22669,13 +22817,17 @@ function useLightbox(props) {
 }
 export {
   ComponentRenderer,
+  CustomSlideLayout,
+  FullscreenLayout,
   HorizontalLayout,
   ImageRenderer,
+  InlineLayout,
   Lightbox,
   LightboxChrome,
   LightboxContent,
   LightboxOverlay,
   PDFRenderer,
+  VerticalSplitLayout,
   VideoRenderer,
   useGalleryState,
   useKeyboardShortcuts,

package/dist/renderers/index.css

@@ -97,3 +97,164 @@
   height: 100%;
   color: var(--lightbox-text-muted, rgba(255, 255, 255, 0.7));
 }
+.Lightbox_verticalSplitLayoutRoot2 {
+  position: relative;
+  max-width: var(--lightbox-max-width, 90vw);
+  width: 100%;
+  padding: var(--lightbox-padding, 24px);
+  box-sizing: border-box;
+}
+.Lightbox_verticalSplitLayoutContainer2 {
+  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_verticalSplitContent2 {
+  flex: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--lightbox-content-bg, #000);
+  overflow: auto;
+}
+.Lightbox_verticalSplitSidebar2 {
+  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_verticalSplitLayoutContainer2 {
+    flex-direction: column;
+  }
+  .Lightbox_verticalSplitSidebar2 {
+    min-width: auto;
+    max-width: none;
+    border-left: none;
+    border-top: 1px solid var(--lightbox-border, rgba(255, 255, 255, 0.1));
+  }
+}
+.Lightbox_customSlideLayoutRoot2 {
+  position: relative;
+  max-width: var(--lightbox-max-width, 95vw);
+  width: 100%;
+  padding: var(--lightbox-padding, 16px);
+  box-sizing: border-box;
+}
+.Lightbox_customSlideLayoutContainer2 {
+  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_customSlideContent2 {
+  flex: 1;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--lightbox-content-bg, #000);
+  overflow: auto;
+}
+.Lightbox_customSlideChrome2 {
+  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_fullscreenLayoutRoot2 {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  background: var(--lightbox-fullscreen-bg, #000);
+}
+.Lightbox_fullscreenLayoutContainer2 {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: var(--lightbox-text, #fff);
+}
+.Lightbox_fullscreenContent2 {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--lightbox-content-bg, #000);
+  overflow: auto;
+}
+.Lightbox_fullscreenChrome2 {
+  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_inlineLayoutRoot2 {
+  position: relative;
+  max-width: var(--lightbox-max-width, 100%);
+  width: 100%;
+  margin: 0 auto;
+}
+.Lightbox_inlineLayoutContainer2 {
+  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_inlineContent2 {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--lightbox-content-bg, #000);
+  min-height: 400px;
+}
+.Lightbox_inlineToolbar2 {
+  border-top: 1px solid var(--lightbox-border, rgba(255, 255, 255, 0.1));
+}
+@media (max-width: 768px) {
+  .Lightbox_verticalSplitLayoutRoot2,
+  .Lightbox_customSlideLayoutRoot2 {
+    padding: 0;
+    max-width: 100vw;
+    max-height: 100vh;
+  }
+  .Lightbox_verticalSplitLayoutContainer2,
+  .Lightbox_customSlideLayoutContainer2 {
+    border-radius: 0;
+    min-height: 100vh;
+  }
+  .Lightbox_customSlideChrome2,
+  .Lightbox_fullscreenChrome2 {
+    padding: 12px;
+  }
+}

package/dist/renderers/index.js

@@ -22167,7 +22167,23 @@ var Lightbox_default = {
   captionTitle: "Lightbox_captionTitle2",
   captionText: "Lightbox_captionText2",
   pdfContainer: "Lightbox_pdfContainer2",
-  pdfFallback: "Lightbox_pdfFallback2"
+  pdfFallback: "Lightbox_pdfFallback2",
+  verticalSplitLayoutRoot: "Lightbox_verticalSplitLayoutRoot2",
+  verticalSplitLayoutContainer: "Lightbox_verticalSplitLayoutContainer2",
+  verticalSplitContent: "Lightbox_verticalSplitContent2",
+  verticalSplitSidebar: "Lightbox_verticalSplitSidebar2",
+  customSlideLayoutRoot: "Lightbox_customSlideLayoutRoot2",
+  customSlideLayoutContainer: "Lightbox_customSlideLayoutContainer2",
+  customSlideContent: "Lightbox_customSlideContent2",
+  customSlideChrome: "Lightbox_customSlideChrome2",
+  fullscreenLayoutRoot: "Lightbox_fullscreenLayoutRoot2",
+  fullscreenLayoutContainer: "Lightbox_fullscreenLayoutContainer2",
+  fullscreenContent: "Lightbox_fullscreenContent2",
+  fullscreenChrome: "Lightbox_fullscreenChrome2",
+  inlineLayoutRoot: "Lightbox_inlineLayoutRoot2",
+  inlineLayoutContainer: "Lightbox_inlineLayoutContainer2",
+  inlineContent: "Lightbox_inlineContent2",
+  inlineToolbar: "Lightbox_inlineToolbar2"
 };
 
 // src/renderers/ImageRenderer.tsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@page-speed/lightbox",
-  "version": "0.0.2",
+  "version": "0.1.0",
   "description": "High-performance, feature-rich lightbox for OpenSite platform",
   "main": "dist/index.cjs",
   "module": "dist/index.js",