@opensite/ui 2.3.6 → 2.3.8

package/dist/about-split-hero.cjs

@@ -812,7 +812,7 @@ function AboutSplitHero({
     }
   }, [background]);
   const desktopOrder = directionConfig.desktop === "mediaRight" ? "lg:flex-row" : "lg:flex-row-reverse";
-  const mobileOrder = directionConfig.mobile === "mediaTop" ? "flex-col" : "flex-col-reverse";
+  const mobileOrder = directionConfig.mobile === "mediaTop" ? "flex-col-reverse" : "flex-col";
   const contentArea = /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {

package/dist/about-split-hero.js

@@ -791,7 +791,7 @@ function AboutSplitHero({
     }
   }, [background]);
   const desktopOrder = directionConfig.desktop === "mediaRight" ? "lg:flex-row" : "lg:flex-row-reverse";
-  const mobileOrder = directionConfig.mobile === "mediaTop" ? "flex-col" : "flex-col-reverse";
+  const mobileOrder = directionConfig.mobile === "mediaTop" ? "flex-col-reverse" : "flex-col";
   const contentArea = /* @__PURE__ */ jsxs(
     "div",
     {

package/dist/about-story-gallery.cjs

@@ -6,6 +6,7 @@ var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var img = require('@page-speed/img');
 var jsxRuntime = require('react/jsx-runtime');
+var lightbox = require('@page-speed/lightbox');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -401,11 +402,31 @@ function AboutStoryGallery({
   imagesClassName,
   optixFlowConfig,
   background,
-  spacing = "py-8 md:py-32",
+  spacing = "lg",
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   pattern,
   patternOpacity
 }) {
+  const [lightboxOpen, setLightboxOpen] = React.useState(false);
+  const [lightboxIndex, setLightboxIndex] = React.useState(0);
+  const lightboxItems = React.useMemo(
+    () => (images ?? []).map((img, index) => ({
+      id: `gallery-image-${index}`,
+      type: "image",
+      src: img.src,
+      alt: img.alt,
+      download: true,
+      share: true
+    })),
+    [images]
+  );
+  const handleImageClick = React.useCallback((index) => {
+    setLightboxIndex(index);
+    setLightboxOpen(true);
+  }, []);
+  const handleLightboxClose = React.useCallback(() => {
+    setLightboxOpen(false);
+  }, []);
   const imagesContent = React.useMemo(() => {
     if (imagesSlot) return imagesSlot;
     if (!images || images.length === 0) return null;
@@ -417,21 +438,38 @@ function AboutStoryGallery({
           imagesClassName
         ),
         children: images.map((image, idx) => /* @__PURE__ */ jsxRuntime.jsx(
-          img.Img,
+          "div",
           {
-            src: image.src,
-            alt: image.alt,
             className: cn(
-              "h-64 w-full rounded-xl object-cover",
-              image.className
+              "cursor-pointer overflow-hidden",
+              "rounded-xl transition-transform duration-500",
+              "hover:scale-[1.02] hover:shadow-lg"
             ),
-            optixFlowConfig
+            onClick: () => handleImageClick(idx),
+            role: "button",
+            tabIndex: 0,
+            onKeyDown: (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                handleImageClick(idx);
+              }
+            },
+            "aria-label": `View ${image.alt} in lightbox`,
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              img.Img,
+              {
+                src: image.src,
+                alt: image.alt,
+                className: cn("h-64 w-full object-cover", image.className),
+                optixFlowConfig
+              }
+            )
           },
           idx
         ))
       }
     );
-  }, [imagesSlot, images, imagesClassName, optixFlowConfig]);
+  }, [imagesSlot, images, imagesClassName, optixFlowConfig, handleImageClick]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
@@ -464,7 +502,28 @@ function AboutStoryGallery({
             }
           ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-6", descriptionClassName), children: description }))
         ] }),
-        imagesContent
+        imagesContent,
+        lightboxOpen && /* @__PURE__ */ jsxRuntime.jsx(
+          lightbox.Lightbox,
+          {
+            items: lightboxItems,
+            initialIndex: lightboxIndex,
+            layout: "horizontal",
+            controls: {
+              navigation: true,
+              thumbnails: true,
+              download: true,
+              share: true,
+              fullscreen: true,
+              captions: true,
+              counter: true
+            },
+            onClose: handleLightboxClose,
+            enableKeyboardShortcuts: true,
+            closeOnEscape: true,
+            closeOnBackdropClick: true
+          }
+        )
       ]
     }
   );

package/dist/about-story-gallery.js

@@ -1,9 +1,10 @@
 "use client";
-import React, { useMemo } from 'react';
+import React, { useState, useMemo, useCallback } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { Img } from '@page-speed/img';
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { Lightbox } from '@page-speed/lightbox';
 
 // components/blocks/about/about-story-gallery.tsx
 function cn(...inputs) {
@@ -395,11 +396,31 @@ function AboutStoryGallery({
   imagesClassName,
   optixFlowConfig,
   background,
-  spacing = "py-8 md:py-32",
+  spacing = "lg",
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   pattern,
   patternOpacity
 }) {
+  const [lightboxOpen, setLightboxOpen] = useState(false);
+  const [lightboxIndex, setLightboxIndex] = useState(0);
+  const lightboxItems = useMemo(
+    () => (images ?? []).map((img, index) => ({
+      id: `gallery-image-${index}`,
+      type: "image",
+      src: img.src,
+      alt: img.alt,
+      download: true,
+      share: true
+    })),
+    [images]
+  );
+  const handleImageClick = useCallback((index) => {
+    setLightboxIndex(index);
+    setLightboxOpen(true);
+  }, []);
+  const handleLightboxClose = useCallback(() => {
+    setLightboxOpen(false);
+  }, []);
   const imagesContent = useMemo(() => {
     if (imagesSlot) return imagesSlot;
     if (!images || images.length === 0) return null;
@@ -411,21 +432,38 @@ function AboutStoryGallery({
           imagesClassName
         ),
         children: images.map((image, idx) => /* @__PURE__ */ jsx(
-          Img,
+          "div",
           {
-            src: image.src,
-            alt: image.alt,
             className: cn(
-              "h-64 w-full rounded-xl object-cover",
-              image.className
+              "cursor-pointer overflow-hidden",
+              "rounded-xl transition-transform duration-500",
+              "hover:scale-[1.02] hover:shadow-lg"
             ),
-            optixFlowConfig
+            onClick: () => handleImageClick(idx),
+            role: "button",
+            tabIndex: 0,
+            onKeyDown: (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                handleImageClick(idx);
+              }
+            },
+            "aria-label": `View ${image.alt} in lightbox`,
+            children: /* @__PURE__ */ jsx(
+              Img,
+              {
+                src: image.src,
+                alt: image.alt,
+                className: cn("h-64 w-full object-cover", image.className),
+                optixFlowConfig
+              }
+            )
           },
           idx
         ))
       }
     );
-  }, [imagesSlot, images, imagesClassName, optixFlowConfig]);
+  }, [imagesSlot, images, imagesClassName, optixFlowConfig, handleImageClick]);
   return /* @__PURE__ */ jsxs(
     Section,
     {
@@ -458,7 +496,28 @@ function AboutStoryGallery({
             }
           ) : /* @__PURE__ */ jsx("div", { className: cn("mt-6", descriptionClassName), children: description }))
         ] }),
-        imagesContent
+        imagesContent,
+        lightboxOpen && /* @__PURE__ */ jsx(
+          Lightbox,
+          {
+            items: lightboxItems,
+            initialIndex: lightboxIndex,
+            layout: "horizontal",
+            controls: {
+              navigation: true,
+              thumbnails: true,
+              download: true,
+              share: true,
+              fullscreen: true,
+              captions: true,
+              counter: true
+            },
+            onClose: handleLightboxClose,
+            enableKeyboardShortcuts: true,
+            closeOnEscape: true,
+            closeOnBackdropClick: true
+          }
+        )
       ]
     }
   );