@opensite/ui 0.4.7 → 0.4.8

package/dist/hero-floating-images.d.ts

@@ -1,45 +1,64 @@
 import * as React from 'react';
 import { P as PatternName } from './pattern-background-a7gKHzHy.js';
 import { SectionBackground, SectionSpacing } from './types.js';
-import { I as ImageItem, O as OptixFlowConfig } from './blocks-k17uluAz.js';
+import { O as OptixFlowConfig } from './blocks-BWc_7JNA.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-DJbzb6lO.js';
 import 'class-variance-authority/types';
 
-interface HeroFloatingImagesItem extends ImageItem {
+/**
+ * Image configuration for the gallery section.
+ * Supports featured images that span full height and secondary images in a stacked layout.
+ */
+interface HeroFloatingImagesImage {
+    /**
+     * Image source URL
+     */
+    src: string;
+    /**
+     * Alt text for accessibility
+     */
+    alt: string;
+    /**
+     * Whether this is a featured image (displays larger/taller in the gallery)
+     */
+    featured?: boolean;
     /**
-     * Optional Tailwind classes for positioning and sizing.
-     * Default styling: "w-32 h-32 md:w-48 md:h-48 rounded-lg shadow-lg" - provides responsive sizing with rounded corners and shadow.
-     * Override this to customize individual image appearance and positioning.
+     * Additional CSS classes for the image
      */
     className?: string;
 }
 interface HeroFloatingImagesProps {
     /**
-     * Main heading text
+     * Flexible content slot for the left side of the hero.
+     * Renders any content the application/AI builder provides (badges, headings, descriptions, actions, etc.)
+     * This allows maximum flexibility without prescribing specific content structure.
      */
-    heading?: React.ReactNode;
+    children?: React.ReactNode;
     /**
-     * Supporting description
+     * Array of images for the gallery section.
+     * First image with `featured: true` (or first image if none marked) displays as the tall featured image.
+     * Remaining images display in a stacked layout beside it.
      */
-    description?: React.ReactNode;
+    images?: HeroFloatingImagesImage[];
     /**
-     * Floating images to render
-     */
-    images?: HeroFloatingImagesItem[];
-    /**
-     * Custom slot for images (overrides images array)
+     * Custom slot for rendering the gallery (overrides images array).
+     * Use when you need complete control over the gallery layout.
      */
     imagesSlot?: React.ReactNode;
     /**
-     * Whether to show decorative swirl backgrounds
+     * Icon name for the zoom indicator on gallery images.
+     * Uses DynamicIcon format: "prefix/icon-name"
+     * @default "lucide/zoom-in"
      */
-    showSwirls?: boolean;
+    zoomIconName?: string;
     /**
-     * Custom slot for background decorations (overrides showSwirls)
+     * Whether to enable lightbox functionality for gallery images.
+     * When enabled, clicking an image opens it in a fullscreen lightbox.
+     * @default true
      */
-    backgroundSlot?: React.ReactNode;
+    enableLightbox?: boolean;
     /**
      * Background style for the section
      */
@@ -51,7 +70,7 @@ interface HeroFloatingImagesProps {
     /**
      * Optional background pattern name
      */
-    pattern?: PatternName | undefined;
+    pattern?: PatternName;
     /**
      * Pattern overlay opacity (0-1)
      */
@@ -61,30 +80,69 @@ interface HeroFloatingImagesProps {
      */
     className?: string;
     /**
-     * Additional CSS classes for the content area
+     * Additional CSS classes for the main grid container
+     */
+    gridClassName?: string;
+    /**
+     * Additional CSS classes for the content area (left side)
      */
     contentClassName?: string;
     /**
-     * Additional CSS classes for the heading
+     * Additional CSS classes for the gallery container (right side)
+     */
+    galleryClassName?: string;
+    /**
+     * Additional CSS classes for the featured image wrapper
+     */
+    featuredImageClassName?: string;
+    /**
+     * Additional CSS classes for secondary image wrappers
      */
-    headingClassName?: string;
+    secondaryImageClassName?: string;
     /**
-     * Additional CSS classes for the description
+     * Additional CSS classes for all images
      */
-    descriptionClassName?: string;
+    imageClassName?: string;
     /**
-     * Additional CSS classes for the images container
+     * Additional CSS classes for the zoom indicator overlay
      */
-    imagesClassName?: string;
+    zoomIndicatorClassName?: string;
     /**
-     * Optional Optix Flow configuration for image optimization
+     * OptixFlow image optimization configuration
      */
     optixFlowConfig?: OptixFlowConfig;
 }
 /**
- * HeroFloatingImages - A centered hero with floating imagery and decorative
- * swirl backgrounds. Great for playful, lifestyle, or hospitality landing pages.
+ * HeroFloatingImages - A split-layout hero with flexible content and an interactive image gallery.
+ *
+ * Features a two-column layout: content on the left (fully customizable via children prop)
+ * and a gallery on the right with a featured tall image and stacked secondary images.
+ * Each image has a hover effect with zoom indicator and opens in a lightbox when clicked.
+ *
+ * The component uses the children prop pattern for maximum flexibility - the application
+ * or AI builder can render any content structure without being constrained to specific
+ * heading/description/badge props.
+ *
+ * @example
+ * ```tsx
+ * <HeroFloatingImages
+ *   images={[
+ *     { src: "/featured.jpg", alt: "Featured work", featured: true },
+ *     { src: "/work-1.jpg", alt: "Project 1" },
+ *     { src: "/work-2.jpg", alt: "Project 2" },
+ *   ]}
+ * >
+ *   <Badge className="mb-6 w-fit" variant="secondary">Featured Work</Badge>
+ *   <h1 className="mb-6 text-4xl font-bold">Your Headline Here</h1>
+ *   <p className="mb-8 text-lg text-muted-foreground">Your description...</p>
+ *   <div className="flex gap-4">
+ *     <Pressable href="/portfolio" variant="default" size="lg" asButton>
+ *       View Portfolio
+ *     </Pressable>
+ *   </div>
+ * </HeroFloatingImages>
+ * ```
  */
-declare function HeroFloatingImages({ heading, description, images, imagesSlot, showSwirls, backgroundSlot, background, spacing, pattern, patternOpacity, className, contentClassName, headingClassName, descriptionClassName, imagesClassName, optixFlowConfig, }: HeroFloatingImagesProps): React.JSX.Element;
+declare function HeroFloatingImages({ children, images, imagesSlot, zoomIconName, enableLightbox, background, spacing, pattern, patternOpacity, className, gridClassName, contentClassName, galleryClassName, featuredImageClassName, secondaryImageClassName, imageClassName, zoomIndicatorClassName, optixFlowConfig, }: HeroFloatingImagesProps): React.JSX.Element;
 
 export { HeroFloatingImages, type HeroFloatingImagesProps };

package/dist/hero-floating-images.js

@@ -1,11 +1,13 @@
 "use client";
+import * as React3 from 'react';
+import React3__default, { useState, useMemo, useCallback } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { Img } from '@page-speed/img';
-import React from 'react';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Lightbox } from '@page-speed/lightbox';
+import { jsx, jsxs } from 'react/jsx-runtime';
 
-// lib/utils.ts
+// components/blocks/hero/hero-floating-images.tsx
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
@@ -18,7 +20,7 @@ var maxWidthStyles = {
   "4xl": "max-w-[1536px]",
   full: "max-w-full"
 };
-var Container = React.forwardRef(
+var Container = React3__default.forwardRef(
   ({ children, maxWidth = "xl", className, as = "div", ...props }, ref) => {
     const Component = as;
     return /* @__PURE__ */ jsx(
@@ -320,7 +322,7 @@ var spacingStyles = {
   lg: "py-20 md:py-32",
   xl: "py-24 md:py-40"
 };
-var Section = React.forwardRef(
+var Section = React3__default.forwardRef(
   ({
     id,
     title,
@@ -328,7 +330,7 @@ var Section = React.forwardRef(
     children,
     className,
     style,
-    background = "white",
+    background = "transparent",
     spacing = "lg",
     pattern,
     patternOpacity,
@@ -372,88 +374,305 @@ var Section = React.forwardRef(
   }
 );
 Section.displayName = "Section";
-var Swirls = () => /* @__PURE__ */ jsxs(Fragment, { children: [
-  /* @__PURE__ */ 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__ */ 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.useState(null);
+  const [isLoading, setIsLoading] = React3.useState(true);
+  const [error, setError] = React3.useState(null);
+  const { url, iconName } = React3.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.useEffect(() => {
+    let isMounted = true;
+    const fetchSvg = async () => {
+      const cached = svgCache.get(url);
+      if (cached) {
+        if (isMounted) {
+          setSvgContent(cached);
+          setIsLoading(false);
         }
-      )
-    }
-  ),
-  /* @__PURE__ */ 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__ */ 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__ */ jsx(
+      "span",
+      {
+        className: cn("inline-block", className),
+        style: { width: size, height: size },
+        "aria-hidden": "true"
+      }
+    );
+  }
+  if (error || !svgContent) {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn("inline-block", className),
+        style: { width: size, height: size },
+        role: "img",
+        "aria-label": alt || iconName
+      }
+    );
+  }
+  return /* @__PURE__ */ 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__ */ jsx("div", { className: "absolute inset-0 z-0", children: /* @__PURE__ */ jsx(Swirls, {}) });
-  };
-  const renderImages = () => {
+  const [lightboxOpen, setLightboxOpen] = useState(false);
+  const [lightboxIndex, setLightboxIndex] = useState(0);
+  const { featuredImage, secondaryImages } = 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 = 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 = useCallback(
+    (index) => {
+      if (!enableLightbox) return;
+      setLightboxIndex(index);
+      setLightboxOpen(true);
+    },
+    [enableLightbox]
+  );
+  const handleLightboxClose = useCallback(() => {
+    setLightboxOpen(false);
+  }, []);
+  const handleImageKeyDown = useCallback(
+    (e, index) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        handleImageClick(index);
+      }
+    },
+    [handleImageClick]
+  );
+  const zoomIndicator = useMemo(
+    () => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "absolute inset-0 flex items-center justify-center opacity-0 transition-opacity group-hover:opacity-100",
+          zoomIndicatorClassName
+        ),
+        children: /* @__PURE__ */ jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-white/90 shadow-lg", children: /* @__PURE__ */ jsx(DynamicIcon, { name: zoomIconName, size: 20, className: "text-gray-900" }) })
+      }
+    ),
+    [zoomIconName, zoomIndicatorClassName]
+  );
+  const featuredImageContent = useMemo(() => {
+    if (!featuredImage) return null;
+    return /* @__PURE__ */ 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__ */ jsx(
+            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__ */ 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 = useMemo(() => {
+    if (secondaryImages.length === 0) return null;
+    return secondaryImages.map((image, index) => {
+      const lightboxIndex2 = index + 1;
+      return /* @__PURE__ */ 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__ */ jsx(
+              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__ */ jsx("div", { className: "absolute inset-0 bg-black/0 transition-colors group-hover:bg-black/20" }),
+            enableLightbox && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "absolute inset-0 flex items-center justify-center opacity-0 transition-opacity group-hover:opacity-100",
+                  zoomIndicatorClassName
+                ),
+                children: /* @__PURE__ */ jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-full bg-white/90 shadow-lg", children: /* @__PURE__ */ 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 = useMemo(() => {
     if (imagesSlot) return imagesSlot;
     if (!images || images.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: cn("absolute inset-0 z-10", imagesClassName), children: images.map((image, index) => /* @__PURE__ */ jsx(
-      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__ */ jsxs("div", { className: cn("grid grid-cols-2 gap-4", galleryClassName), children: [
+      featuredImageContent,
+      secondaryImagesContent
+    ] });
+  }, [
+    imagesSlot,
+    images,
+    galleryClassName,
+    featuredImageContent,
+    secondaryImagesContent
+  ]);
+  const hasContent = children !== void 0 && children !== null;
+  const hasGallery = imagesSlot || images && images.length > 0;
   return /* @__PURE__ */ jsxs(
     Section,
     {
@@ -461,53 +680,36 @@ 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,
       children: [
-        renderBackground(),
-        renderImages(),
         /* @__PURE__ */ jsxs(
           "div",
           {
             className: cn(
-              "relative z-20 mx-auto max-w-2xl px-4 text-center",
-              contentClassName
+              "grid gap-12 lg:grid-cols-2 lg:gap-16",
+              gridClassName
             ),
             children: [
-              heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
-                "h1",
-                {
-                  className: cn(
-                    "text-4xl font-bold tracking-tight text-primary sm:text-5xl md:text-6xl",
-                    headingClassName
-                  ),
-                  children: heading
-                }
-              ) : /* @__PURE__ */ 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__ */ jsx(
-                "p",
-                {
-                  className: cn(
-                    "mt-6 text-lg leading-8 text-muted-foreground",
-                    descriptionClassName
-                  ),
-                  children: description
-                }
-              ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
+              hasContent ? /* @__PURE__ */ jsx("div", { className: cn("flex flex-col justify-center", contentClassName), children }) : null,
+              hasGallery ? galleryContent : null
             ]
           }
-        )
+        ),
+        enableLightbox && lightboxOpen && lightboxItems.length > 0 ? /* @__PURE__ */ jsx(
+          Lightbox,
+          {
+            items: lightboxItems,
+            initialIndex: lightboxIndex,
+            onClose: handleLightboxClose,
+            layout: "horizontal",
+            controls: {
+              navigation: true,
+              counter: true,
+              closeButton: true,
+              captions: true
+            }
+          }
+        ) : null
       ]
     }
   );

package/dist/hero-fullscreen-background-image.cjs

@@ -768,7 +768,7 @@ var Section = React__namespace.default.forwardRef(
     children,
     className,
     style,
-    background = "white",
+    background = "transparent",
     spacing = "lg",
     pattern,
     patternOpacity,