@opensite/ui 1.1.7 → 1.1.9

package/dist/carousel-badge-cards.cjs

@@ -9,7 +9,6 @@ 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 }; }
 
@@ -1152,8 +1151,6 @@ 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;
@@ -1168,30 +1165,10 @@ function CarouselBadgeCards({
       carouselApi.off("select", updateSelection);
     };
   }, [carouselApi]);
-  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, index) => /* @__PURE__ */ jsxRuntime.jsx(
+    return items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
       CarouselItem,
       {
         className: cn("max-w-[320px] pl-5 lg:max-w-[360px]", itemClassName),
@@ -1200,42 +1177,26 @@ function CarouselBadgeCards({
           {
             href: item.href,
             className: cn(
-              "group flex flex-col justify-between rounded-xl p-6",
+              "group flex flex-col justify-between rounded-xl p-6 w-full",
               getNestedCardBg(background),
               getNestedCardTextColor(background),
               item.className,
               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",
+              /* @__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,
                 {
-                  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
-                    }
-                  )
+                  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 }),
@@ -1266,7 +1227,7 @@ function CarouselBadgeCards({
     imageClassName,
     optixFlowConfig,
     readMoreText,
-    handleImageClick
+    background
   ]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
@@ -1290,7 +1251,7 @@ function CarouselBadgeCards({
                 "h2",
                 {
                   className: cn(
-                    "text-3xl font-medium tracking-tight md:text-4xl lg:text-5xl",
+                    "text-xl font-medium tracking-tight md:text-2xl lg:text-3xl",
                     headingClassName
                   ),
                   children: heading
@@ -1350,28 +1311,7 @@ function CarouselBadgeCards({
               }
             )
           }
-        ) }),
-        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,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-CPyEa7IX.cjs';
-import { O as OptixFlowConfig } from './blocks-tmd_MRJv.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bz_A5vLU.cjs';
+import { O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-8mtEHxev.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 
 /**

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

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-hxnFe3w6.js';
-import { O as OptixFlowConfig } from './blocks-DRE-f6cS.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bi_ClKrO.js';
+import { O as OptixFlowConfig } from './blocks-k17uluAz.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-8mtEHxev.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
 /**

package/dist/carousel-badge-cards.js

@@ -1,6 +1,6 @@
 "use client";
 import * as React4 from 'react';
-import React4__default, { useState, useEffect, useMemo, useCallback } from 'react';
+import React4__default, { useState, useEffect, useMemo } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { Slot } from '@radix-ui/react-slot';
@@ -8,7 +8,6 @@ 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) {
@@ -1128,8 +1127,6 @@ 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;
@@ -1144,30 +1141,10 @@ function CarouselBadgeCards({
       carouselApi.off("select", updateSelection);
     };
   }, [carouselApi]);
-  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, index) => /* @__PURE__ */ jsx(
+    return items.map((item) => /* @__PURE__ */ jsx(
       CarouselItem,
       {
         className: cn("max-w-[320px] pl-5 lg:max-w-[360px]", itemClassName),
@@ -1176,42 +1153,26 @@ function CarouselBadgeCards({
           {
             href: item.href,
             className: cn(
-              "group flex flex-col justify-between rounded-xl p-6",
+              "group flex flex-col justify-between rounded-xl p-6 w-full",
               getNestedCardBg(background),
               getNestedCardTextColor(background),
               item.className,
               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",
+              /* @__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,
                 {
-                  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
-                    }
-                  )
+                  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 }),
@@ -1242,7 +1203,7 @@ function CarouselBadgeCards({
     imageClassName,
     optixFlowConfig,
     readMoreText,
-    handleImageClick
+    background
   ]);
   return /* @__PURE__ */ jsxs(
     Section,
@@ -1266,7 +1227,7 @@ function CarouselBadgeCards({
                 "h2",
                 {
                   className: cn(
-                    "text-3xl font-medium tracking-tight md:text-4xl lg:text-5xl",
+                    "text-xl font-medium tracking-tight md:text-2xl lg:text-3xl",
                     headingClassName
                   ),
                   children: heading
@@ -1326,28 +1287,7 @@ function CarouselBadgeCards({
               }
             )
           }
-        ) }),
-        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-demo-link.cjs

@@ -8,7 +8,6 @@ var jsxRuntime = require('react/jsx-runtime');
 var img = require('@page-speed/img');
 var useEmblaCarousel = require('embla-carousel-react');
 var classVarianceAuthority = require('class-variance-authority');
-var lightbox = require('@page-speed/lightbox');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -1091,8 +1090,6 @@ function CarouselDemoLink({
   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;
@@ -1107,26 +1104,6 @@ function CarouselDemoLink({
       carouselApi.off("select", updateSelection);
     };
   }, [carouselApi]);
-  const lightboxItems = React4.useMemo(
-    () => (items ?? []).map((item, index) => ({
-      id: `demo-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 demoActionContent = React4.useMemo(() => {
     if (demoActionSlot) return demoActionSlot;
     if (!demoAction) return null;
@@ -1168,7 +1145,11 @@ function CarouselDemoLink({
     return items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
       CarouselItem,
       {
-        className: cn("ml-8 md:max-w-[452px]", itemClassName),
+        className: cn(
+          "basis-[85%] md:basis-auto md:max-w-[452px]",
+          index === 0 ? "ml-0" : "ml-4 md:ml-6",
+          itemClassName
+        ),
         children: /* @__PURE__ */ jsxRuntime.jsxs(
           "a",
           {
@@ -1179,35 +1160,19 @@ function CarouselDemoLink({
               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",
+              /* @__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,
                 {
-                  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
-                    }
-                  )
+                  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: "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.summary }),
               readMoreText && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center text-sm", children: [
@@ -1228,16 +1193,7 @@ function CarouselDemoLink({
       },
       item.id
     ));
-  }, [
-    itemsSlot,
-    items,
-    itemClassName,
-    cardClassName,
-    imageClassName,
-    optixFlowConfig,
-    readMoreText,
-    handleImageClick
-  ]);
+  }, [itemsSlot, items, itemClassName, cardClassName, imageClassName, optixFlowConfig, readMoreText]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
@@ -1309,7 +1265,7 @@ function CarouselDemoLink({
             ]
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full max-w-full -mx-4 sm:-mx-6 lg:-mx-8", children: /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsx(
           Carousel,
           {
             setApi: setCarouselApi,
@@ -1320,43 +1276,16 @@ function CarouselDemoLink({
                 }
               }
             },
-            className: cn(
-              "relative w-full max-w-full md:-left-4",
-              carouselClassName
-            ),
+            className: cn("relative w-full", carouselClassName),
             children: /* @__PURE__ */ jsxRuntime.jsx(
               CarouselContent,
               {
-                className: cn(
-                  "hide-scrollbar w-full max-w-full md:-mr-4 md:ml-8 2xl:mr-[max(0rem,calc(50vw-700px-1rem))] 2xl:ml-[max(8rem,calc(50vw-700px+1rem))]",
-                  carouselContentClassName
-                ),
+                className: cn("hide-scrollbar w-full", carouselContentClassName),
                 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-demo-link.d.cts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-CPyEa7IX.cjs';
-import { A as ActionConfig, O as OptixFlowConfig } from './blocks-tmd_MRJv.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bz_A5vLU.cjs';
+import { A as ActionConfig, O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-8mtEHxev.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 
 /**

package/dist/carousel-demo-link.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-hxnFe3w6.js';
-import { A as ActionConfig, O as OptixFlowConfig } from './blocks-DRE-f6cS.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bi_ClKrO.js';
+import { A as ActionConfig, O as OptixFlowConfig } from './blocks-k17uluAz.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-8mtEHxev.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
 /**