@opensite/ui 0.5.5 → 0.5.6

package/dist/blur-vignette-grid.js

@@ -1,10 +1,11 @@
 "use client";
+import React, { useState, useMemo, useCallback } from 'react';
 import { motion } from 'framer-motion';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { Img } from '@page-speed/img';
-import React from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { Lightbox } from '@page-speed/lightbox';
 
 // components/blocks/gallery/blur-vignette-grid.tsx
 function cn(...inputs) {
@@ -476,20 +477,40 @@ function BlurVignetteGrid({
   gridClassName,
   itemClassName,
   imageClassName,
-  background = "white",
-  spacing = "lg",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   patternClassName,
   optixFlowConfig
 }) {
+  const [lightboxOpen, setLightboxOpen] = useState(false);
+  const [lightboxIndex, setLightboxIndex] = useState(0);
   const {
     radius = "24px",
     inset = "10px",
     transitionLength = "100px",
     blur = "15px"
   } = vignetteConfig || {};
-  const renderImages = () => {
+  const lightboxItems = useMemo(
+    () => (images ?? []).map((img, index) => ({
+      id: `vignette-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;
     return images.map((image, index) => /* @__PURE__ */ jsx(
@@ -502,30 +523,56 @@ function BlurVignetteGrid({
         className: cn(
           `col-span-${image.colSpan}`,
           image.height,
-          "rounded-[2.5rem]",
+          "rounded-[2.5rem] cursor-pointer",
           image.className,
           itemClassName
         ),
         children: /* @__PURE__ */ jsx(
-          Img,
+          "div",
           {
-            width: 200,
-            height: 200,
-            className: cn(
-              "size-full rounded-[2.5rem] object-cover",
-              imageClassName
-            ),
-            src: image.src,
-            alt: image.alt,
-            loading: "lazy",
-            optixFlowConfig
+            onClick: () => handleImageClick(index),
+            role: "button",
+            tabIndex: 0,
+            onKeyDown: (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                handleImageClick(index);
+              }
+            },
+            "aria-label": `View ${image.alt} in lightbox`,
+            children: /* @__PURE__ */ jsx(
+              Img,
+              {
+                width: 200,
+                height: 200,
+                className: cn(
+                  "size-full rounded-[2.5rem] object-cover",
+                  imageClassName
+                ),
+                src: image.src,
+                alt: image.alt,
+                loading: "lazy",
+                optixFlowConfig
+              }
+            )
           }
         )
       },
       index
     ));
-  };
-  return /* @__PURE__ */ jsx(
+  }, [
+    imagesSlot,
+    images,
+    radius,
+    inset,
+    transitionLength,
+    blur,
+    itemClassName,
+    imageClassName,
+    optixFlowConfig,
+    handleImageClick
+  ]);
+  return /* @__PURE__ */ jsxs(
     Section,
     {
       background,
@@ -534,13 +581,36 @@ function BlurVignetteGrid({
       patternOpacity,
       patternClassName,
       className,
-      children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: cn(`grid grid-cols-${gridColumns}`, gridGap, gridClassName),
-          children: renderImages()
-        }
-      )
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(`grid grid-cols-${gridColumns}`, gridGap, gridClassName),
+            children: 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
+          }
+        )
+      ]
     }
   );
 }

package/dist/carousel-badge-cards.cjs

@@ -9,6 +9,7 @@ var classVarianceAuthority = require('class-variance-authority');
 var jsxRuntime = require('react/jsx-runtime');
 var img = require('@page-speed/img');
 var useEmblaCarousel = require('embla-carousel-react');
+var lightbox = require('@page-speed/lightbox');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -1098,7 +1099,7 @@ function CarouselBadgeCards({
   heading,
   items,
   itemsSlot,
-  readMoreText = "Read more",
+  readMoreText,
   className,
   headerClassName,
   headingClassName,
@@ -1109,8 +1110,8 @@ function CarouselBadgeCards({
   cardClassName,
   imageClassName,
   badgeClassName,
-  background = "white",
-  spacing = "lg",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   patternClassName,
@@ -1119,6 +1120,8 @@ function CarouselBadgeCards({
   const [carouselApi, setCarouselApi] = React4.useState();
   const [canScrollPrev, setCanScrollPrev] = React4.useState(false);
   const [canScrollNext, setCanScrollNext] = React4.useState(false);
+  const [lightboxOpen, setLightboxOpen] = React4.useState(false);
+  const [lightboxIndex, setLightboxIndex] = React4.useState(0);
   React4.useEffect(() => {
     if (!carouselApi) {
       return;
@@ -1133,10 +1136,30 @@ function CarouselBadgeCards({
       carouselApi.off("select", updateSelection);
     };
   }, [carouselApi]);
-  const renderItems = () => {
+  const lightboxItems = React4.useMemo(
+    () => (items ?? []).map((item, index) => ({
+      id: `badge-card-${index}`,
+      type: "image",
+      src: item.image,
+      alt: typeof item.title === "string" ? item.title : item.imageAlt || "Card image",
+      download: true,
+      share: true
+    })),
+    [items]
+  );
+  const handleImageClick = React4.useCallback((index, e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setLightboxIndex(index);
+    setLightboxOpen(true);
+  }, []);
+  const handleLightboxClose = React4.useCallback(() => {
+    setLightboxOpen(false);
+  }, []);
+  const itemsContent = React4.useMemo(() => {
     if (itemsSlot) return itemsSlot;
     if (!items || items.length === 0) return null;
-    return items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+    return items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
       CarouselItem,
       {
         className: cn("max-w-[320px] pl-5 lg:max-w-[360px]", itemClassName),
@@ -1150,23 +1173,39 @@ function CarouselBadgeCards({
               cardClassName
             ),
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex aspect-3/2 overflow-clip rounded-xl", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative h-full w-full origin-bottom transition duration-300 group-hover:scale-105", children: /* @__PURE__ */ jsxRuntime.jsx(
-                img.Img,
+              /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex aspect-3/2 overflow-clip rounded-xl", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
                 {
-                  src: item.image,
-                  alt: typeof item.title === "string" ? item.title : item.imageAlt || "Card image",
-                  className: cn(
-                    "h-full w-full object-cover object-center",
-                    imageClassName
-                  ),
-                  loading: "lazy",
-                  optixFlowConfig
+                  className: "relative h-full w-full origin-bottom transition duration-300 group-hover:scale-105 cursor-pointer",
+                  onClick: (e) => handleImageClick(index, e),
+                  role: "button",
+                  tabIndex: 0,
+                  onKeyDown: (e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                      e.preventDefault();
+                      handleImageClick(index, e);
+                    }
+                  },
+                  "aria-label": `View ${typeof item.title === "string" ? item.title : "image"} in lightbox`,
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    img.Img,
+                    {
+                      src: item.image,
+                      alt: typeof item.title === "string" ? item.title : item.imageAlt || "Card image",
+                      className: cn(
+                        "h-full w-full object-cover object-center",
+                        imageClassName
+                      ),
+                      loading: "lazy",
+                      optixFlowConfig
+                    }
+                  )
                 }
-              ) }) }) }) }),
+              ) }) }) }),
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-6", children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { className: badgeClassName, children: item.label }) }),
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2 line-clamp-3 pt-4 text-lg font-medium wrap-break-word md:mb-3 md:pt-4 md:text-xl lg:pt-4 lg:text-2xl", children: item.title }),
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-8 line-clamp-2 text-sm text-muted-foreground md:mb-12 md:text-base lg:mb-9", children: item.description }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center text-sm", children: [
+              readMoreText && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center text-sm", children: [
                 readMoreText,
                 " ",
                 /* @__PURE__ */ jsxRuntime.jsx(
@@ -1184,7 +1223,17 @@ function CarouselBadgeCards({
       },
       item.id
     ));
-  };
+  }, [
+    itemsSlot,
+    items,
+    itemClassName,
+    cardClassName,
+    badgeClassName,
+    imageClassName,
+    optixFlowConfig,
+    readMoreText,
+    handleImageClick
+  ]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
@@ -1263,11 +1312,32 @@ function CarouselBadgeCards({
                   "mr-5 ml-5 2xl:mr-[calc(50vw-700px+20px)] 2xl:ml-[calc(50vw-700px+20px)]",
                   carouselContentClassName
                 ),
-                children: renderItems()
+                children: itemsContent
               }
             )
           }
-        ) })
+        ) }),
+        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/carousel-badge-cards.d.cts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
-import { SectionBackground, SectionSpacing } from './types.cjs';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-BudEyO90.cjs';
 import { O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
@@ -59,7 +59,6 @@ interface CarouselBadgeCardsProps {
     itemsSlot?: React.ReactNode;
     /**
      * Text for the "Read more" link
-     * @default "Read more"
      */
     readMoreText?: React.ReactNode;
     /**

package/dist/carousel-badge-cards.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { P as PatternName } from './pattern-background-a7gKHzHy.js';
-import { SectionBackground, SectionSpacing } from './types.js';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-FG_f_Y4z.js';
 import { O as OptixFlowConfig } from './blocks-k17uluAz.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
@@ -59,7 +59,6 @@ interface CarouselBadgeCardsProps {
     itemsSlot?: React.ReactNode;
     /**
      * Text for the "Read more" link
-     * @default "Read more"
      */
     readMoreText?: React.ReactNode;
     /**

package/dist/carousel-badge-cards.js

@@ -1,6 +1,6 @@
 "use client";
 import * as React4 from 'react';
-import React4__default, { useState, useEffect } from 'react';
+import React4__default, { useState, useEffect, useMemo, useCallback } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { Slot } from '@radix-ui/react-slot';
@@ -8,6 +8,7 @@ import { cva } from 'class-variance-authority';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { Img } from '@page-speed/img';
 import useEmblaCarousel from 'embla-carousel-react';
+import { Lightbox } from '@page-speed/lightbox';
 
 // components/blocks/gallery/carousel-badge-cards.tsx
 function cn(...inputs) {
@@ -1074,7 +1075,7 @@ function CarouselBadgeCards({
   heading,
   items,
   itemsSlot,
-  readMoreText = "Read more",
+  readMoreText,
   className,
   headerClassName,
   headingClassName,
@@ -1085,8 +1086,8 @@ function CarouselBadgeCards({
   cardClassName,
   imageClassName,
   badgeClassName,
-  background = "white",
-  spacing = "lg",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   patternClassName,
@@ -1095,6 +1096,8 @@ function CarouselBadgeCards({
   const [carouselApi, setCarouselApi] = useState();
   const [canScrollPrev, setCanScrollPrev] = useState(false);
   const [canScrollNext, setCanScrollNext] = useState(false);
+  const [lightboxOpen, setLightboxOpen] = useState(false);
+  const [lightboxIndex, setLightboxIndex] = useState(0);
   useEffect(() => {
     if (!carouselApi) {
       return;
@@ -1109,10 +1112,30 @@ function CarouselBadgeCards({
       carouselApi.off("select", updateSelection);
     };
   }, [carouselApi]);
-  const renderItems = () => {
+  const lightboxItems = useMemo(
+    () => (items ?? []).map((item, index) => ({
+      id: `badge-card-${index}`,
+      type: "image",
+      src: item.image,
+      alt: typeof item.title === "string" ? item.title : item.imageAlt || "Card image",
+      download: true,
+      share: true
+    })),
+    [items]
+  );
+  const handleImageClick = useCallback((index, e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setLightboxIndex(index);
+    setLightboxOpen(true);
+  }, []);
+  const handleLightboxClose = useCallback(() => {
+    setLightboxOpen(false);
+  }, []);
+  const itemsContent = useMemo(() => {
     if (itemsSlot) return itemsSlot;
     if (!items || items.length === 0) return null;
-    return items.map((item) => /* @__PURE__ */ jsx(
+    return items.map((item, index) => /* @__PURE__ */ jsx(
       CarouselItem,
       {
         className: cn("max-w-[320px] pl-5 lg:max-w-[360px]", itemClassName),
@@ -1126,23 +1149,39 @@ function CarouselBadgeCards({
               cardClassName
             ),
             children: [
-              /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("div", { className: "flex aspect-3/2 overflow-clip rounded-xl", children: /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx("div", { className: "relative h-full w-full origin-bottom transition duration-300 group-hover:scale-105", children: /* @__PURE__ */ jsx(
-                Img,
+              /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("div", { className: "flex aspect-3/2 overflow-clip rounded-xl", children: /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(
+                "div",
                 {
-                  src: item.image,
-                  alt: typeof item.title === "string" ? item.title : item.imageAlt || "Card image",
-                  className: cn(
-                    "h-full w-full object-cover object-center",
-                    imageClassName
-                  ),
-                  loading: "lazy",
-                  optixFlowConfig
+                  className: "relative h-full w-full origin-bottom transition duration-300 group-hover:scale-105 cursor-pointer",
+                  onClick: (e) => handleImageClick(index, e),
+                  role: "button",
+                  tabIndex: 0,
+                  onKeyDown: (e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                      e.preventDefault();
+                      handleImageClick(index, e);
+                    }
+                  },
+                  "aria-label": `View ${typeof item.title === "string" ? item.title : "image"} in lightbox`,
+                  children: /* @__PURE__ */ jsx(
+                    Img,
+                    {
+                      src: item.image,
+                      alt: typeof item.title === "string" ? item.title : item.imageAlt || "Card image",
+                      className: cn(
+                        "h-full w-full object-cover object-center",
+                        imageClassName
+                      ),
+                      loading: "lazy",
+                      optixFlowConfig
+                    }
+                  )
                 }
-              ) }) }) }) }),
+              ) }) }) }),
               /* @__PURE__ */ jsx("div", { className: "mt-6", children: /* @__PURE__ */ jsx(Badge, { className: badgeClassName, children: item.label }) }),
               /* @__PURE__ */ jsx("div", { className: "mb-2 line-clamp-3 pt-4 text-lg font-medium wrap-break-word md:mb-3 md:pt-4 md:text-xl lg:pt-4 lg:text-2xl", children: item.title }),
               /* @__PURE__ */ jsx("div", { className: "mb-8 line-clamp-2 text-sm text-muted-foreground md:mb-12 md:text-base lg:mb-9", children: item.description }),
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center text-sm", children: [
+              readMoreText && /* @__PURE__ */ jsxs("div", { className: "flex items-center text-sm", children: [
                 readMoreText,
                 " ",
                 /* @__PURE__ */ jsx(
@@ -1160,7 +1199,17 @@ function CarouselBadgeCards({
       },
       item.id
     ));
-  };
+  }, [
+    itemsSlot,
+    items,
+    itemClassName,
+    cardClassName,
+    badgeClassName,
+    imageClassName,
+    optixFlowConfig,
+    readMoreText,
+    handleImageClick
+  ]);
   return /* @__PURE__ */ jsxs(
     Section,
     {
@@ -1239,11 +1288,32 @@ function CarouselBadgeCards({
                   "mr-5 ml-5 2xl:mr-[calc(50vw-700px+20px)] 2xl:ml-[calc(50vw-700px+20px)]",
                   carouselContentClassName
                 ),
-                children: renderItems()
+                children: itemsContent
               }
             )
           }
-        ) })
+        ) }),
+        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
+          }
+        )
       ]
     }
   );