@opensite/ui 1.6.9 → 1.7.0

package/dist/hero-grid-pattern-solutions.js

@@ -1,11 +1,13 @@
 "use client";
 import * as React from 'react';
-import React__default, { useMemo } from 'react';
+import React__default, { useState, useMemo, useCallback } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Img } from '@page-speed/img';
+import { Lightbox } from '@page-speed/lightbox';
+import { Slot } from '@radix-ui/react-slot';
 
 // components/blocks/hero/hero-grid-pattern-solutions.tsx
 function cn(...inputs) {
@@ -909,9 +911,41 @@ var Section = React__default.forwardRef(
   }
 );
 Section.displayName = "Section";
+var badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive: "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "span";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "badge",
+      className: cn(badgeVariants({ variant }), className),
+      ...props
+    }
+  );
+}
 function HeroGridPatternSolutions({
   badgeText,
-  badgeHref = "#",
+  badgeHref,
   badgeSlot,
   heading,
   description,
@@ -919,7 +953,6 @@ function HeroGridPatternSolutions({
   actionsSlot,
   images,
   imagesSlot,
-  showGridPattern = true,
   background,
   spacing = "py-32 md:py-32",
   pattern,
@@ -933,56 +966,114 @@ function HeroGridPatternSolutions({
   imagesClassName,
   optixFlowConfig
 }) {
+  const [lightboxOpen, setLightboxOpen] = useState(false);
+  const [lightboxIndex, setLightboxIndex] = useState(0);
+  const lightboxItems = useMemo(
+    () => (images ?? []).map((img, index) => ({
+      id: `hero-grid-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 renderBadge = useMemo(() => {
     if (badgeSlot) return badgeSlot;
-    return /* @__PURE__ */ jsxs(
-      Pressable,
-      {
-        href: badgeHref,
-        className: "mx-auto mb-4 flex w-fit items-center gap-2 rounded-full px-4 py-2 text-sm bg-card",
-        children: [
-          badgeText,
-          /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-right", size: 16 })
-        ]
-      }
-    );
+    if (!badgeText) return null;
+    return /* @__PURE__ */ jsx(Pressable, { href: badgeHref, children: /* @__PURE__ */ jsxs(Badge, { className: "px-2", children: [
+      badgeText,
+      /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-right" })
+    ] }) });
   }, [badgeSlot, badgeHref, badgeText]);
   const renderActions = useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col justify-center gap-x-2 gap-y-3 sm:flex-row", actionsClassName), children: actions.map((action, index) => {
-      const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
-      return /* @__PURE__ */ jsx(
-        Pressable,
-        {
-          asButton: true,
-          className: actionClassName,
-          ...pressableProps,
-          children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
-            icon,
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "flex flex-col justify-center gap-x-2 gap-y-3 sm:flex-row",
+          actionsClassName
+        ),
+        children: actions.map((action, index) => {
+          const {
             label,
-            iconAfter
-          ] })
-        },
-        index
-      );
-    }) });
+            icon,
+            iconAfter,
+            children,
+            className: actionClassName,
+            ...pressableProps
+          } = action;
+          return /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              asButton: true,
+              className: actionClassName,
+              ...pressableProps,
+              children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+                icon,
+                label,
+                iconAfter
+              ] })
+            },
+            index
+          );
+        })
+      }
+    );
   }, [actionsSlot, actions, actionsClassName]);
   const renderImages = useMemo(() => {
     if (imagesSlot) return imagesSlot;
     if (!images || images.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: cn("mt-20 grid gap-6 md:grid-cols-10", imagesClassName), children: images.map((image, index) => /* @__PURE__ */ jsx(
-      Img,
+    return /* @__PURE__ */ jsx(
+      "div",
       {
-        src: image.src,
-        alt: image.alt,
-        className: cn("h-full max-h-[500px] w-full rounded-xl object-cover", image.className),
-        optixFlowConfig
-      },
-      index
-    )) });
-  }, [imagesSlot, images, imagesClassName, optixFlowConfig]);
-  return /* @__PURE__ */ jsx(
+        className: cn(
+          "mt-8 md:mt-20 grid grid-cols-2 gap-4 md:flex md:flex-row md:items-center md:justify-center md:gap-6",
+          imagesClassName
+        ),
+        children: images.map((image, index) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "cursor-pointer overflow-hidden rounded-xl transition-transform hover:scale-[1.02] hover:shadow-lg",
+            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,
+              {
+                src: image.src,
+                alt: image.alt,
+                className: cn(
+                  "h-full max-h-[200px] max-w-[200px] w-full rounded-xl object-cover shadow-xl",
+                  image.className
+                ),
+                optixFlowConfig
+              }
+            )
+          },
+          index
+        ))
+      }
+    );
+  }, [imagesSlot, images, imagesClassName, optixFlowConfig, handleImageClick]);
+  return /* @__PURE__ */ jsxs(
     Section,
     {
       background,
@@ -991,18 +1082,65 @@ function HeroGridPatternSolutions({
       patternOpacity,
       className: cn("relative flex items-center justify-center", className),
       containerClassName,
-      children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-        /* @__PURE__ */ jsxs("div", { className: "relative overflow-hidden", children: [
-          showGridPattern && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 -top-1 -left-1 -z-10 h-full w-full bg-[linear-gradient(to_right,hsl(var(--muted-foreground))_1px,transparent_1px),linear-gradient(to_bottom,hsl(var(--muted-foreground))_1px,transparent_1px)] mask-[radial-gradient(ellipse_50%_100%_at_50%_50%,transparent_60%,#000_100%)] bg-size-[92px_92px] opacity-15" }),
-          /* @__PURE__ */ jsxs("div", { className: cn("mx-auto max-w-4xl", contentClassName), children: [
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx("div", { className: "relative overflow-hidden", children: /* @__PURE__ */ jsxs("div", { className: cn("mx-auto max-w-4xl", contentClassName), children: [
             renderBadge,
-            heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("my-4 mb-6 text-center text-3xl font-semibold lg:text-8xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("h1", { className: cn("my-4 mb-6 text-center text-3xl font-semibold lg:text-8xl", headingClassName), children: heading })),
-            description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mx-auto mb-8 max-w-2xl text-center lg:text-xl text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+            heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+              "h1",
+              {
+                className: cn(
+                  "my-4 mb-6 text-center text-3xl font-semibold lg:text-8xl text-balance",
+                  headingClassName
+                ),
+                children: heading
+              }
+            ) : /* @__PURE__ */ jsx(
+              "h1",
+              {
+                className: cn(
+                  "my-4 mb-6 text-center text-3xl font-semibold lg:text-8xl text-balance",
+                  headingClassName
+                ),
+                children: heading
+              }
+            )),
+            description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+              "p",
+              {
+                className: cn(
+                  "mx-auto mb-8 max-w-2xl text-center lg:text-xl text-balance",
+                  descriptionClassName
+                ),
+                children: description
+              }
+            ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
             renderActions
-          ] })
+          ] }) }),
+          renderImages
         ] }),
-        renderImages
-      ] })
+        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/hero-marketplace-scattered-images.cjs

@@ -33,32 +33,6 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
-function getNestedCardBg(parentBg, variant = "muted", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "muted":
-        return "bg-background";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-background/50";
-    }
-  } else {
-    switch (variant) {
-      case "muted":
-        return "bg-muted";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-muted/50";
-    }
-  }
-}
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -963,7 +937,7 @@ function HeroMarketplaceScatteredImages({
   action,
   actionSlot,
   tagline,
-  taglineIcon = "lucide/globe",
+  taglineIcon,
   taglineSlot,
   images,
   imagesSlot,
@@ -983,7 +957,14 @@ function HeroMarketplaceScatteredImages({
   const renderAction = React.useMemo(() => {
     if (actionSlot) return actionSlot;
     if (!action) return null;
-    const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
+    const {
+      label,
+      icon,
+      iconAfter,
+      children,
+      className: actionClassName,
+      ...pressableProps
+    } = action;
     return /* @__PURE__ */ jsxRuntime.jsx(Pressable, { asButton: true, className: actionClassName, ...pressableProps, children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       icon,
       label,
@@ -992,6 +973,7 @@ function HeroMarketplaceScatteredImages({
   }, [actionSlot, action]);
   const renderTagline = React.useMemo(() => {
     if (taglineSlot) return taglineSlot;
+    if (!tagline || !taglineIcon) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-7 flex items-start justify-center gap-2 font-medium md:text-xl", children: [
       /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: taglineIcon, size: 20, className: "mt-0.5" }),
       tagline
@@ -1016,50 +998,74 @@ function HeroMarketplaceScatteredImages({
   const renderImages = React.useMemo(() => {
     if (imagesSlot) return imagesSlot;
     if (!images || images.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto mt-14 max-w-7xl overflow-hidden py-8", imagesClassName), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-3 md:grid-cols-3", children: columns.map((colImages, colIndex) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid gap-3", children: colImages.map((image, imgIndex) => {
-      const height = heightPatterns[colIndex][imgIndex % heightPatterns[colIndex].length];
-      const direction = colIndex % 2 === 0 ? "up" : "down";
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        framerMotion.motion.div,
-        {
-          initial: {
-            opacity: 0,
-            scale: 0.9,
-            y: direction === "up" ? 50 : -50
-          },
-          whileInView: {
-            opacity: 1,
-            scale: 1,
-            y: 0
-          },
-          transition: {
-            duration: 0.5,
-            delay: imgIndex * 0.1
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn(
+          "mx-auto max-w-7xl overflow-hidden py-8",
+          imagesClassName
+        ),
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-3 md:grid-cols-3", children: columns.map((colImages, colIndex) => /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "grid gap-3",
+              colIndex === 2 && "hidden md:grid"
+            ),
+            children: colImages.map((image, imgIndex) => {
+              const height = heightPatterns[colIndex][imgIndex % heightPatterns[colIndex].length];
+              const direction = colIndex % 2 === 0 ? "up" : "down";
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                framerMotion.motion.div,
+                {
+                  initial: {
+                    opacity: 0,
+                    scale: 0.9,
+                    y: direction === "up" ? 50 : -50
+                  },
+                  whileInView: {
+                    opacity: 1,
+                    scale: 1,
+                    y: 0
+                  },
+                  transition: {
+                    duration: 0.5,
+                    delay: imgIndex * 0.1
+                  },
+                  viewport: { once: true },
+                  className: cn("w-full overflow-hidden rounded-2xl"),
+                  style: { height },
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    img.Img,
+                    {
+                      src: image.src,
+                      alt: image.alt,
+                      className: cn(
+                        "h-full w-full rounded-2xl object-cover",
+                        image.className
+                      ),
+                      loading: "lazy",
+                      optixFlowConfig
+                    }
+                  )
+                },
+                imgIndex
+              );
+            })
           },
-          viewport: { once: true },
-          className: cn(
-            "w-full overflow-hidden rounded-2xl",
-            getNestedCardBg(background)
-          ),
-          style: { height },
-          children: /* @__PURE__ */ jsxRuntime.jsx(
-            img.Img,
-            {
-              src: image.src,
-              alt: image.alt,
-              className: cn(
-                "h-full w-full rounded-2xl object-cover",
-                image.className
-              ),
-              loading: "lazy",
-              optixFlowConfig
-            }
-          )
-        },
-        imgIndex
-      );
-    }) }, colIndex)) }) });
-  }, [imagesSlot, images, imagesClassName, optixFlowConfig, columns, heightPatterns, background]);
+          colIndex
+        )) })
+      }
+    );
+  }, [
+    imagesSlot,
+    images,
+    imagesClassName,
+    optixFlowConfig,
+    columns,
+    heightPatterns,
+    background
+  ]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -1069,14 +1075,49 @@ function HeroMarketplaceScatteredImages({
       patternOpacity,
       className: cn("relative flex items-center justify-center", className),
       containerClassName,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative mx-auto max-w-xl py-10 text-center", contentClassName), children: [
-          showGridPattern && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 -z-10 h-full w-full bg-[linear-gradient(to_right,hsl(var(--muted))_1px,transparent_1px),linear-gradient(to_bottom,hsl(var(--muted))_1px,transparent_1px)] mask-[radial-gradient(ellipse_50%_100%_at_50%_50%,#000_60%,transparent_100%)] bg-size-[64px_64px]" }),
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mb-3 text-4xl lg:text-7xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mb-3 text-4xl lg:text-7xl", headingClassName), children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-5 text-sm md:text-base text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
-          renderAction,
-          renderTagline
-        ] }),
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-6 items-center", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "relative mx-auto max-w-xl py-10 text-center flex flex-col gap-6 items-center",
+              contentClassName
+            ),
+            children: [
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "h1",
+                {
+                  className: cn(
+                    "mb-3 text-4xl lg:text-7xl text-balance",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx(
+                "h1",
+                {
+                  className: cn(
+                    "mb-3 text-4xl lg:text-7xl text-balance",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              )),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "p",
+                {
+                  className: cn(
+                    "mb-5 text-sm md:text-base text-balance",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+              renderAction,
+              renderTagline
+            ]
+          }
+        ),
         renderImages
       ] })
     }