@opensite/ui 0.4.7 → 0.4.9

package/dist/hero-floating-images.cjs

@@ -1,17 +1,34 @@
 "use client";
 'use strict';
 
+var React3 = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var img = require('@page-speed/img');
-var React = require('react');
+var lightbox = require('@page-speed/lightbox');
 var jsxRuntime = require('react/jsx-runtime');
 
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
 
-var React__default = /*#__PURE__*/_interopDefault(React);
+var React3__namespace = /*#__PURE__*/_interopNamespace(React3);
 
-// lib/utils.ts
+// components/blocks/hero/hero-floating-images.tsx
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
@@ -24,7 +41,7 @@ var maxWidthStyles = {
   "4xl": "max-w-[1536px]",
   full: "max-w-full"
 };
-var Container = React__default.default.forwardRef(
+var Container = React3__namespace.default.forwardRef(
   ({ children, maxWidth = "xl", className, as = "div", ...props }, ref) => {
     const Component = as;
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -326,7 +343,7 @@ var spacingStyles = {
   lg: "py-20 md:py-32",
   xl: "py-24 md:py-40"
 };
-var Section = React__default.default.forwardRef(
+var Section = React3__namespace.default.forwardRef(
   ({
     id,
     title,
@@ -334,11 +351,13 @@ var Section = React__default.default.forwardRef(
     children,
     className,
     style,
-    background = "white",
+    background = "transparent",
     spacing = "lg",
     pattern,
     patternOpacity,
     patternClassName,
+    containerClassName,
+    containerMaxWidth = "xl",
     ...props
   }, ref) => {
     const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
@@ -365,101 +384,336 @@ var Section = React__default.default.forwardRef(
               className: patternClassName
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsxs(Container, { className: "relative z-10", children: [
-            (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
-              subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
-              title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
-            ] }),
-            children
-          ] })
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            Container,
+            {
+              maxWidth: containerMaxWidth,
+              className: cn("relative z-10", containerClassName),
+              children: [
+                (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
+                  subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
+                  title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
+                ] }),
+                children
+              ]
+            }
+          )
         ]
       }
     );
   }
 );
 Section.displayName = "Section";
-var Swirls = () => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-  /* @__PURE__ */ jsxRuntime.jsx(
-    "svg",
-    {
-      className: "absolute left-0 top-0 -translate-x-1/3 -translate-y-1/3 text-primary/10",
-      width: "600",
-      height: "600",
-      viewBox: "0 0 600 600",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg",
-      "aria-hidden": "true",
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        "path",
-        {
-          d: "M515.266 181.33C377.943 51.564 128.537 136.256 50.8123 293.565C-26.9127 450.874 125.728 600 125.728 600",
-          stroke: "currentColor",
-          strokeWidth: "2",
-          strokeLinecap: "round"
+var svgCache = /* @__PURE__ */ new Map();
+function DynamicIcon({
+  name,
+  size = 28,
+  color,
+  className,
+  alt
+}) {
+  const [svgContent, setSvgContent] = React3__namespace.useState(null);
+  const [isLoading, setIsLoading] = React3__namespace.useState(true);
+  const [error, setError] = React3__namespace.useState(null);
+  const { url, iconName } = React3__namespace.useMemo(() => {
+    const separator = name.includes("/") ? "/" : ":";
+    const [prefix, iconName2] = name.split(separator);
+    const baseUrl = `https://icons.opensite.ai/api/icon/${prefix}/${iconName2}?format=svg&width=${size}&height=${size}`;
+    return {
+      url: baseUrl,
+      iconName: iconName2
+    };
+  }, [name, size]);
+  React3__namespace.useEffect(() => {
+    let isMounted = true;
+    const fetchSvg = async () => {
+      const cached = svgCache.get(url);
+      if (cached) {
+        if (isMounted) {
+          setSvgContent(cached);
+          setIsLoading(false);
         }
-      )
-    }
-  ),
-  /* @__PURE__ */ jsxRuntime.jsx(
-    "svg",
-    {
-      className: "absolute bottom-0 right-0 translate-x-1/4 translate-y-1/4 text-primary/10",
-      width: "700",
-      height: "700",
-      viewBox: "0 0 700 700",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg",
-      "aria-hidden": "true",
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        "path",
-        {
-          d: "M26.8838 528.274C193.934 689.816 480.051 637.218 594.397 451.983C708.742 266.748 543.953 2.22235 543.953 2.22235",
-          stroke: "currentColor",
-          strokeWidth: "2",
-          strokeLinecap: "round"
+        return;
+      }
+      try {
+        setIsLoading(true);
+        setError(null);
+        const response = await fetch(url);
+        if (!response.ok) {
+          throw new Error(`Failed to fetch icon: ${response.status}`);
+        }
+        let svg = await response.text();
+        svg = processSvgForCurrentColor(svg);
+        svgCache.set(url, svg);
+        if (isMounted) {
+          setSvgContent(svg);
+          setIsLoading(false);
+        }
+      } catch (err) {
+        if (isMounted) {
+          setError(err instanceof Error ? err.message : "Failed to load icon");
+          setIsLoading(false);
         }
-      )
+      }
+    };
+    fetchSvg();
+    return () => {
+      isMounted = false;
+    };
+  }, [url]);
+  if (isLoading) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: cn("inline-block", className),
+        style: { width: size, height: size },
+        "aria-hidden": "true"
+      }
+    );
+  }
+  if (error || !svgContent) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: cn("inline-block", className),
+        style: { width: size, height: size },
+        role: "img",
+        "aria-label": alt || iconName
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: cn("inline-flex items-center justify-center", className),
+      style: {
+        width: size,
+        height: size,
+        color: color || "inherit"
+      },
+      role: "img",
+      "aria-label": alt || iconName,
+      dangerouslySetInnerHTML: { __html: svgContent }
     }
-  )
-] });
+  );
+}
+function processSvgForCurrentColor(svg) {
+  let processed = svg;
+  processed = processed.replace(
+    /stroke=["'](#000000|#000|black)["']/gi,
+    'stroke="currentColor"'
+  );
+  processed = processed.replace(
+    /fill=["'](#000000|#000|black)["']/gi,
+    'fill="currentColor"'
+  );
+  return processed;
+}
 function HeroFloatingImages({
-  heading,
-  description,
+  children,
   images,
   imagesSlot,
-  showSwirls = true,
-  backgroundSlot,
-  background = "white",
-  spacing = "lg",
+  zoomIconName = "lucide/zoom-in",
+  enableLightbox = true,
+  background,
+  spacing,
   pattern,
   patternOpacity,
   className,
+  gridClassName,
   contentClassName,
-  headingClassName,
-  descriptionClassName,
-  imagesClassName,
+  galleryClassName,
+  featuredImageClassName,
+  secondaryImageClassName,
+  imageClassName,
+  zoomIndicatorClassName,
   optixFlowConfig
 }) {
-  const renderBackground = () => {
-    if (backgroundSlot) return backgroundSlot;
-    if (!showSwirls) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 z-0", children: /* @__PURE__ */ jsxRuntime.jsx(Swirls, {}) });
-  };
-  const renderImages = () => {
+  const [lightboxOpen, setLightboxOpen] = React3.useState(false);
+  const [lightboxIndex, setLightboxIndex] = React3.useState(0);
+  const { featuredImage, secondaryImages } = React3.useMemo(() => {
+    if (!images || images.length === 0) {
+      return { featuredImage: void 0, secondaryImages: [] };
+    }
+    const featured = images.find((img) => img.featured) ?? images[0];
+    const secondary = images.filter((img) => img !== featured);
+    return { featuredImage: featured, secondaryImages: secondary };
+  }, [images]);
+  const lightboxItems = React3.useMemo(() => {
+    if (!images || images.length === 0) return [];
+    const orderedImages = featuredImage ? [featuredImage, ...secondaryImages] : secondaryImages;
+    return orderedImages.map((img, index) => ({
+      id: `hero-gallery-${index}-${img.src.slice(-12)}`,
+      type: "image",
+      src: img.src,
+      alt: img.alt
+    }));
+  }, [images, featuredImage, secondaryImages]);
+  const handleImageClick = React3.useCallback(
+    (index) => {
+      if (!enableLightbox) return;
+      setLightboxIndex(index);
+      setLightboxOpen(true);
+    },
+    [enableLightbox]
+  );
+  const handleLightboxClose = React3.useCallback(() => {
+    setLightboxOpen(false);
+  }, []);
+  const handleImageKeyDown = React3.useCallback(
+    (e, index) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        handleImageClick(index);
+      }
+    },
+    [handleImageClick]
+  );
+  const zoomIndicator = React3.useMemo(
+    () => /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn(
+          "absolute inset-0 flex items-center justify-center opacity-0 transition-opacity group-hover:opacity-100",
+          zoomIndicatorClassName
+        ),
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-white/90 shadow-lg", children: /* @__PURE__ */ jsxRuntime.jsx(
+          DynamicIcon,
+          {
+            name: zoomIconName,
+            size: 20,
+            className: "text-gray-900"
+          }
+        ) })
+      }
+    ),
+    [zoomIconName, zoomIndicatorClassName]
+  );
+  const featuredImageContent = React3.useMemo(() => {
+    if (!featuredImage) return null;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        className: cn(
+          "group relative col-span-2 aspect-[4/3] overflow-hidden rounded-2xl sm:col-span-1 sm:row-span-2 sm:aspect-auto sm:h-full",
+          featuredImageClassName
+        ),
+        onClick: () => handleImageClick(0),
+        onKeyDown: (e) => handleImageKeyDown(e, 0),
+        "aria-label": `View ${featuredImage.alt} in lightbox`,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            img.Img,
+            {
+              src: featuredImage.src,
+              alt: featuredImage.alt,
+              className: cn(
+                "h-full w-full object-cover transition-transform duration-500 group-hover:scale-105",
+                imageClassName,
+                featuredImage.className
+              ),
+              optixFlowConfig
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-black/0 transition-colors group-hover:bg-black/20" }),
+          enableLightbox && zoomIndicator
+        ]
+      }
+    );
+  }, [
+    featuredImage,
+    featuredImageClassName,
+    imageClassName,
+    optixFlowConfig,
+    enableLightbox,
+    zoomIndicator,
+    handleImageClick,
+    handleImageKeyDown
+  ]);
+  const secondaryImagesContent = React3.useMemo(() => {
+    if (secondaryImages.length === 0) return null;
+    return secondaryImages.map((image, index) => {
+      const lightboxIndex2 = index + 1;
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          className: cn(
+            "group relative aspect-square overflow-hidden rounded-2xl",
+            secondaryImageClassName
+          ),
+          onClick: () => handleImageClick(lightboxIndex2),
+          onKeyDown: (e) => handleImageKeyDown(e, lightboxIndex2),
+          "aria-label": `View ${image.alt} in lightbox`,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              img.Img,
+              {
+                src: image.src,
+                alt: image.alt,
+                className: cn(
+                  "h-full w-full object-cover transition-transform duration-500 group-hover:scale-105",
+                  imageClassName,
+                  image.className
+                ),
+                optixFlowConfig
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-black/0 transition-colors group-hover:bg-black/20" }),
+            enableLightbox && /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: cn(
+                  "absolute inset-0 flex items-center justify-center opacity-0 transition-opacity group-hover:opacity-100",
+                  zoomIndicatorClassName
+                ),
+                children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-full bg-white/90 shadow-lg", children: /* @__PURE__ */ jsxRuntime.jsx(
+                  DynamicIcon,
+                  {
+                    name: zoomIconName,
+                    size: 16,
+                    className: "text-gray-900"
+                  }
+                ) })
+              }
+            )
+          ]
+        },
+        `secondary-${index}-${image.src.slice(-8)}`
+      );
+    });
+  }, [
+    secondaryImages,
+    secondaryImageClassName,
+    imageClassName,
+    optixFlowConfig,
+    enableLightbox,
+    zoomIconName,
+    zoomIndicatorClassName,
+    handleImageClick,
+    handleImageKeyDown
+  ]);
+  const galleryContent = React3.useMemo(() => {
     if (imagesSlot) return imagesSlot;
     if (!images || images.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("absolute inset-0 z-10", imagesClassName), children: images.map((image, index) => /* @__PURE__ */ jsxRuntime.jsx(
-      img.Img,
-      {
-        src: image.src,
-        alt: image.alt,
-        className: cn("absolute w-32 h-32 md:w-48 md:h-48 rounded-lg shadow-lg object-contain", image.className),
-        style: { animationDelay: `${index * 300}ms` },
-        optixFlowConfig
-      },
-      `${image.alt}-${index}`
-    )) });
-  };
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid grid-cols-2 gap-4", galleryClassName), children: [
+      featuredImageContent,
+      secondaryImagesContent
+    ] });
+  }, [
+    imagesSlot,
+    images,
+    galleryClassName,
+    featuredImageContent,
+    secondaryImagesContent
+  ]);
+  const hasContent = React3.useMemo(() => {
+    return children !== void 0 && children !== null;
+  }, [children]);
+  const hasGallery = React3.useMemo(() => {
+    return imagesSlot || images && images.length > 0;
+  }, [imagesSlot, images]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
@@ -467,53 +721,33 @@ function HeroFloatingImages({
       spacing,
       pattern,
       patternOpacity,
-      className: cn(
-        "relative flex min-h-[60vh] items-center justify-center overflow-hidden py-20 md:min-h-[80vh] md:py-32",
-        className
-      ),
+      className: cn("relative flex items-center justify-center", className),
       children: [
-        renderBackground(),
-        renderImages(),
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            className: cn(
-              "relative z-20 mx-auto max-w-2xl px-4 text-center",
-              contentClassName
-            ),
+            className: cn("grid gap-12 lg:grid-cols-2 lg:gap-16", gridClassName),
             children: [
-              heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                "h1",
-                {
-                  className: cn(
-                    "text-4xl font-bold tracking-tight text-primary sm:text-5xl md:text-6xl",
-                    headingClassName
-                  ),
-                  children: heading
-                }
-              ) : /* @__PURE__ */ jsxRuntime.jsx(
-                "h1",
-                {
-                  className: cn(
-                    "text-4xl font-bold tracking-tight text-primary sm:text-5xl md:text-6xl",
-                    headingClassName
-                  ),
-                  children: heading
-                }
-              )),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                "p",
-                {
-                  className: cn(
-                    "mt-6 text-lg leading-8 text-muted-foreground",
-                    descriptionClassName
-                  ),
-                  children: description
-                }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+              hasContent ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col justify-center", contentClassName), children }) : null,
+              hasGallery ? galleryContent : null
             ]
           }
-        )
+        ),
+        enableLightbox && lightboxOpen && lightboxItems.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+          lightbox.Lightbox,
+          {
+            items: lightboxItems,
+            initialIndex: lightboxIndex,
+            onClose: handleLightboxClose,
+            layout: "horizontal",
+            controls: {
+              navigation: true,
+              counter: true,
+              closeButton: true,
+              captions: true
+            }
+          }
+        ) : null
       ]
     }
   );