@opensite/ui 0.8.5 → 0.8.7

package/dist/hero-split-geometric-shapes.cjs

@@ -6,6 +6,8 @@ var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var classVarianceAuthority = require('class-variance-authority');
 var jsxRuntime = require('react/jsx-runtime');
+var img = require('@page-speed/img');
+var lightbox = require('@page-speed/lightbox');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -830,22 +832,55 @@ function HeroSplitGeometricShapes({
   description,
   actions,
   actionsSlot,
-  shapesSlot,
+  images,
+  imagesSlot,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   className,
   containerClassName,
   contentClassName,
   headingClassName,
-  descriptionClassName
+  descriptionClassName,
+  imagesClassName,
+  imageClassName,
+  optixFlowConfig
 }) {
+  const [lightboxOpen, setLightboxOpen] = React.useState(false);
+  const [lightboxIndex, setLightboxIndex] = React.useState(0);
+  const lightboxItems = React.useMemo(() => {
+    if (!images || images.length === 0) return [];
+    return images.map((image, index) => {
+      const src = typeof image === "string" ? image : image.src;
+      const alt = typeof image === "string" ? "Gallery image" : image.alt || "Gallery image";
+      return {
+        id: `hero-split-geometric-${index}-${src.slice(-8)}`,
+        src,
+        alt,
+        type: "image"
+      };
+    });
+  }, [images]);
+  const handleImageClick = React.useCallback((index) => {
+    setLightboxIndex(index);
+    setLightboxOpen(true);
+  }, []);
+  const handleLightboxClose = React.useCallback(() => {
+    setLightboxOpen(false);
+  }, []);
   const renderActions = React.useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full flex-col justify-center gap-2 sm:flex-row lg:justify-start", children: actions.map((action, index) => {
-      const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
+      const {
+        label,
+        icon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
       return /* @__PURE__ */ jsxRuntime.jsx(
         Pressable,
         {
@@ -862,16 +897,75 @@ function HeroSplitGeometricShapes({
       );
     }) });
   }, [actionsSlot, actions]);
-  const renderShapes = React.useMemo(() => {
-    if (shapesSlot) return shapesSlot;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative aspect-7/8 h-full w-full", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-[12%] right-[50%] flex aspect-square w-[24%] justify-center rounded-lg border border-border bg-accent" }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-[36%] right-[50%] flex aspect-5/6 w-[40%] justify-center rounded-lg border border-border bg-accent" }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-[36%] left-[54%] flex aspect-5/6 w-[40%] justify-center rounded-lg border border-border bg-accent" }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-[12%] left-[54%] flex aspect-square w-[24%] justify-center rounded-lg border border-border bg-accent" })
-    ] }) });
-  }, [shapesSlot]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  const renderImages = React.useMemo(() => {
+    if (imagesSlot) return imagesSlot;
+    if (!images || images.length === 0) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn(
+          "flex flex-col items-center justify-center",
+          imagesClassName
+        ),
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative aspect-7/8 h-full w-full", children: images.map((image, index) => {
+          const src = typeof image === "string" ? image : image.src;
+          const alt = typeof image === "string" ? "Gallery image" : image.alt || "Gallery image";
+          const itemClass = typeof image === "string" ? void 0 : image.className;
+          const positionClasses = [
+            "absolute top-[12%] right-[50%] aspect-square w-[24%]",
+            // Top left, small square
+            "absolute top-[36%] right-[50%] aspect-5/6 w-[40%]",
+            // Middle left, tall rectangle
+            "absolute bottom-[36%] left-[54%] aspect-5/6 w-[40%]",
+            // Middle right, tall rectangle
+            "absolute bottom-[12%] left-[54%] aspect-square w-[24%]"
+            // Bottom right, small square
+          ];
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn(
+                "cursor-pointer overflow-hidden rounded-lg border border-border",
+                positionClasses[index % 4],
+                itemClass
+              ),
+              onClick: () => handleImageClick(index),
+              role: "button",
+              tabIndex: 0,
+              onKeyDown: (e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  handleImageClick(index);
+                }
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                img.Img,
+                {
+                  src,
+                  alt,
+                  className: cn(
+                    "h-full w-full object-cover transition-opacity hover:opacity-90",
+                    imageClassName
+                  ),
+                  loading: "lazy",
+                  optixFlowConfig
+                }
+              )
+            },
+            index
+          );
+        }) })
+      }
+    );
+  }, [
+    imagesSlot,
+    images,
+    imagesClassName,
+    imageClassName,
+    optixFlowConfig,
+    handleImageClick
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
       background,
@@ -879,15 +973,75 @@ function HeroSplitGeometricShapes({
       pattern,
       patternOpacity,
       className: cn(className),
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container flex flex-col items-center", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "2xl:w-[calc(min(100vw-2*theme(container.padding),100%+8rem))] w-full overflow-clip rounded-lg bg-accent/50", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid items-center gap-8 lg:grid-cols-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container flex flex-col items-center px-16 py-16 text-center lg:mx-auto lg:items-start lg:px-16 lg:py-32 lg:text-left", contentClassName), children: [
-          badgeText && (typeof badgeText === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { children: badgeText }) : badgeText),
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("my-6 text-4xl font-bold text-pretty lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("my-6 text-4xl font-bold text-pretty lg:text-6xl", headingClassName), children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-8 max-w-xl text-muted-foreground lg:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
-          renderActions
-        ] }),
-        renderShapes
-      ] }) }) })
+      containerClassName,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col items-center"), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "2xl:w-[calc(min(100vw-2*theme(container.padding),100%+8rem))] w-full overflow-clip rounded-lg bg-muted", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid items-center gap-0 md:gap-8 lg:grid-cols-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: cn(
+                "container flex flex-col items-center px-10 py-8 text-center lg:mx-auto lg:items-start lg:px-16 lg:py-32 lg:text-left",
+                contentClassName
+              ),
+              children: [
+                badgeText && (typeof badgeText === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { children: badgeText }) : badgeText),
+                heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "h1",
+                  {
+                    className: cn(
+                      "my-6 text-4xl font-bold text-pretty lg:text-6xl",
+                      headingClassName
+                    ),
+                    children: heading
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsx(
+                  "h1",
+                  {
+                    className: cn(
+                      "my-6 text-4xl font-bold text-pretty lg:text-6xl",
+                      headingClassName
+                    ),
+                    children: heading
+                  }
+                )),
+                description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "p",
+                  {
+                    className: cn(
+                      "mb-8 max-w-xl lg:text-xl",
+                      descriptionClassName
+                    ),
+                    children: description
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+                renderActions
+              ]
+            }
+          ),
+          renderImages
+        ] }) }) }),
+        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/hero-split-geometric-shapes.d.cts

@@ -1,12 +1,29 @@
 import * as React from 'react';
 import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-Sm_ZSgyv.cjs';
 import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
-import { A as ActionConfig } from './blocks-Cohq4eio.cjs';
+import { A as ActionConfig, O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
 import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 
+/**
+ * Image configuration for hero split geometric shapes.
+ */
+interface HeroSplitGeometricShapesImage {
+    /**
+     * Image source URL
+     */
+    src: string;
+    /**
+     * Alt text for the image
+     */
+    alt?: string;
+    /**
+     * Additional CSS classes for the image
+     */
+    className?: string;
+}
 interface HeroSplitGeometricShapesProps {
     /**
      * Badge/label text above heading
@@ -29,9 +46,13 @@ interface HeroSplitGeometricShapesProps {
      */
     actionsSlot?: React.ReactNode;
     /**
-     * Custom slot for geometric shapes (overrides default shapes)
+     * Array of images to display in masonry layout (can be strings or objects)
      */
-    shapesSlot?: React.ReactNode; /**
+    images?: (string | HeroSplitGeometricShapesImage)[];
+    /**
+     * Custom slot for rendering images (overrides images array)
+     */
+    imagesSlot?: React.ReactNode; /**
      * Background style for the section
      */
     background?: SectionBackground;
@@ -67,7 +88,19 @@ interface HeroSplitGeometricShapesProps {
      * Additional CSS classes for the description
      */
     descriptionClassName?: string;
+    /**
+     * Additional CSS classes for the images container
+     */
+    imagesClassName?: string;
+    /**
+     * Additional CSS classes for each image
+     */
+    imageClassName?: string;
+    /**
+     * OptixFlow image optimization configuration
+     */
+    optixFlowConfig?: OptixFlowConfig;
 }
-declare function HeroSplitGeometricShapes({ badgeText, heading, description, actions, actionsSlot, shapesSlot, background, spacing, pattern, patternOpacity, className, containerClassName, contentClassName, headingClassName, descriptionClassName, }: HeroSplitGeometricShapesProps): React.JSX.Element;
+declare function HeroSplitGeometricShapes({ badgeText, heading, description, actions, actionsSlot, images, imagesSlot, background, spacing, pattern, patternOpacity, className, containerClassName, contentClassName, headingClassName, descriptionClassName, imagesClassName, imageClassName, optixFlowConfig, }: HeroSplitGeometricShapesProps): React.JSX.Element;
 
-export { HeroSplitGeometricShapes, type HeroSplitGeometricShapesProps };
+export { HeroSplitGeometricShapes, type HeroSplitGeometricShapesImage, type HeroSplitGeometricShapesProps };

package/dist/hero-split-geometric-shapes.d.ts

@@ -1,12 +1,29 @@
 import * as React from 'react';
 import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-BeWIIjA4.js';
 import { P as PatternName } from './pattern-background-a7gKHzHy.js';
-import { A as ActionConfig } from './blocks-k17uluAz.js';
+import { A as ActionConfig, O as OptixFlowConfig } from './blocks-k17uluAz.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
 import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
+/**
+ * Image configuration for hero split geometric shapes.
+ */
+interface HeroSplitGeometricShapesImage {
+    /**
+     * Image source URL
+     */
+    src: string;
+    /**
+     * Alt text for the image
+     */
+    alt?: string;
+    /**
+     * Additional CSS classes for the image
+     */
+    className?: string;
+}
 interface HeroSplitGeometricShapesProps {
     /**
      * Badge/label text above heading
@@ -29,9 +46,13 @@ interface HeroSplitGeometricShapesProps {
      */
     actionsSlot?: React.ReactNode;
     /**
-     * Custom slot for geometric shapes (overrides default shapes)
+     * Array of images to display in masonry layout (can be strings or objects)
      */
-    shapesSlot?: React.ReactNode; /**
+    images?: (string | HeroSplitGeometricShapesImage)[];
+    /**
+     * Custom slot for rendering images (overrides images array)
+     */
+    imagesSlot?: React.ReactNode; /**
      * Background style for the section
      */
     background?: SectionBackground;
@@ -67,7 +88,19 @@ interface HeroSplitGeometricShapesProps {
      * Additional CSS classes for the description
      */
     descriptionClassName?: string;
+    /**
+     * Additional CSS classes for the images container
+     */
+    imagesClassName?: string;
+    /**
+     * Additional CSS classes for each image
+     */
+    imageClassName?: string;
+    /**
+     * OptixFlow image optimization configuration
+     */
+    optixFlowConfig?: OptixFlowConfig;
 }
-declare function HeroSplitGeometricShapes({ badgeText, heading, description, actions, actionsSlot, shapesSlot, background, spacing, pattern, patternOpacity, className, containerClassName, contentClassName, headingClassName, descriptionClassName, }: HeroSplitGeometricShapesProps): React.JSX.Element;
+declare function HeroSplitGeometricShapes({ badgeText, heading, description, actions, actionsSlot, images, imagesSlot, background, spacing, pattern, patternOpacity, className, containerClassName, contentClassName, headingClassName, descriptionClassName, imagesClassName, imageClassName, optixFlowConfig, }: HeroSplitGeometricShapesProps): React.JSX.Element;
 
-export { HeroSplitGeometricShapes, type HeroSplitGeometricShapesProps };
+export { HeroSplitGeometricShapes, type HeroSplitGeometricShapesImage, type HeroSplitGeometricShapesProps };

package/dist/hero-split-geometric-shapes.js

@@ -1,10 +1,12 @@
 "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';
 
 // components/blocks/hero/hero-split-geometric-shapes.tsx
 function cn(...inputs) {
@@ -809,22 +811,55 @@ function HeroSplitGeometricShapes({
   description,
   actions,
   actionsSlot,
-  shapesSlot,
+  images,
+  imagesSlot,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   className,
   containerClassName,
   contentClassName,
   headingClassName,
-  descriptionClassName
+  descriptionClassName,
+  imagesClassName,
+  imageClassName,
+  optixFlowConfig
 }) {
+  const [lightboxOpen, setLightboxOpen] = useState(false);
+  const [lightboxIndex, setLightboxIndex] = useState(0);
+  const lightboxItems = useMemo(() => {
+    if (!images || images.length === 0) return [];
+    return images.map((image, index) => {
+      const src = typeof image === "string" ? image : image.src;
+      const alt = typeof image === "string" ? "Gallery image" : image.alt || "Gallery image";
+      return {
+        id: `hero-split-geometric-${index}-${src.slice(-8)}`,
+        src,
+        alt,
+        type: "image"
+      };
+    });
+  }, [images]);
+  const handleImageClick = useCallback((index) => {
+    setLightboxIndex(index);
+    setLightboxOpen(true);
+  }, []);
+  const handleLightboxClose = useCallback(() => {
+    setLightboxOpen(false);
+  }, []);
   const renderActions = useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return /* @__PURE__ */ jsx("div", { className: "flex w-full flex-col justify-center gap-2 sm:flex-row lg:justify-start", children: actions.map((action, index) => {
-      const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
+      const {
+        label,
+        icon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
       return /* @__PURE__ */ jsx(
         Pressable,
         {
@@ -841,16 +876,75 @@ function HeroSplitGeometricShapes({
       );
     }) });
   }, [actionsSlot, actions]);
-  const renderShapes = useMemo(() => {
-    if (shapesSlot) return shapesSlot;
-    return /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center justify-center", children: /* @__PURE__ */ jsxs("div", { className: "relative aspect-7/8 h-full w-full", children: [
-      /* @__PURE__ */ jsx("div", { className: "absolute top-[12%] right-[50%] flex aspect-square w-[24%] justify-center rounded-lg border border-border bg-accent" }),
-      /* @__PURE__ */ jsx("div", { className: "absolute top-[36%] right-[50%] flex aspect-5/6 w-[40%] justify-center rounded-lg border border-border bg-accent" }),
-      /* @__PURE__ */ jsx("div", { className: "absolute bottom-[36%] left-[54%] flex aspect-5/6 w-[40%] justify-center rounded-lg border border-border bg-accent" }),
-      /* @__PURE__ */ jsx("div", { className: "absolute bottom-[12%] left-[54%] flex aspect-square w-[24%] justify-center rounded-lg border border-border bg-accent" })
-    ] }) });
-  }, [shapesSlot]);
-  return /* @__PURE__ */ jsx(
+  const renderImages = useMemo(() => {
+    if (imagesSlot) return imagesSlot;
+    if (!images || images.length === 0) return null;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "flex flex-col items-center justify-center",
+          imagesClassName
+        ),
+        children: /* @__PURE__ */ jsx("div", { className: "relative aspect-7/8 h-full w-full", children: images.map((image, index) => {
+          const src = typeof image === "string" ? image : image.src;
+          const alt = typeof image === "string" ? "Gallery image" : image.alt || "Gallery image";
+          const itemClass = typeof image === "string" ? void 0 : image.className;
+          const positionClasses = [
+            "absolute top-[12%] right-[50%] aspect-square w-[24%]",
+            // Top left, small square
+            "absolute top-[36%] right-[50%] aspect-5/6 w-[40%]",
+            // Middle left, tall rectangle
+            "absolute bottom-[36%] left-[54%] aspect-5/6 w-[40%]",
+            // Middle right, tall rectangle
+            "absolute bottom-[12%] left-[54%] aspect-square w-[24%]"
+            // Bottom right, small square
+          ];
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "cursor-pointer overflow-hidden rounded-lg border border-border",
+                positionClasses[index % 4],
+                itemClass
+              ),
+              onClick: () => handleImageClick(index),
+              role: "button",
+              tabIndex: 0,
+              onKeyDown: (e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  handleImageClick(index);
+                }
+              },
+              children: /* @__PURE__ */ jsx(
+                Img,
+                {
+                  src,
+                  alt,
+                  className: cn(
+                    "h-full w-full object-cover transition-opacity hover:opacity-90",
+                    imageClassName
+                  ),
+                  loading: "lazy",
+                  optixFlowConfig
+                }
+              )
+            },
+            index
+          );
+        }) })
+      }
+    );
+  }, [
+    imagesSlot,
+    images,
+    imagesClassName,
+    imageClassName,
+    optixFlowConfig,
+    handleImageClick
+  ]);
+  return /* @__PURE__ */ jsxs(
     Section,
     {
       background,
@@ -858,15 +952,75 @@ function HeroSplitGeometricShapes({
       pattern,
       patternOpacity,
       className: cn(className),
-      children: /* @__PURE__ */ jsx("div", { className: cn("container flex flex-col items-center", containerClassName), children: /* @__PURE__ */ jsx("div", { className: "2xl:w-[calc(min(100vw-2*theme(container.padding),100%+8rem))] w-full overflow-clip rounded-lg bg-accent/50", children: /* @__PURE__ */ jsxs("div", { className: "grid items-center gap-8 lg:grid-cols-2", children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("container flex flex-col items-center px-16 py-16 text-center lg:mx-auto lg:items-start lg:px-16 lg:py-32 lg:text-left", contentClassName), children: [
-          badgeText && (typeof badgeText === "string" ? /* @__PURE__ */ jsx("p", { children: badgeText }) : badgeText),
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("my-6 text-4xl font-bold text-pretty lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("h1", { className: cn("my-6 text-4xl font-bold text-pretty lg:text-6xl", headingClassName), children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mb-8 max-w-xl text-muted-foreground lg:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
-          renderActions
-        ] }),
-        renderShapes
-      ] }) }) })
+      containerClassName,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: cn("flex flex-col items-center"), children: /* @__PURE__ */ jsx("div", { className: "2xl:w-[calc(min(100vw-2*theme(container.padding),100%+8rem))] w-full overflow-clip rounded-lg bg-muted", children: /* @__PURE__ */ jsxs("div", { className: "grid items-center gap-0 md:gap-8 lg:grid-cols-2", children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "container flex flex-col items-center px-10 py-8 text-center lg:mx-auto lg:items-start lg:px-16 lg:py-32 lg:text-left",
+                contentClassName
+              ),
+              children: [
+                badgeText && (typeof badgeText === "string" ? /* @__PURE__ */ jsx("p", { children: badgeText }) : badgeText),
+                heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+                  "h1",
+                  {
+                    className: cn(
+                      "my-6 text-4xl font-bold text-pretty lg:text-6xl",
+                      headingClassName
+                    ),
+                    children: heading
+                  }
+                ) : /* @__PURE__ */ jsx(
+                  "h1",
+                  {
+                    className: cn(
+                      "my-6 text-4xl font-bold text-pretty lg:text-6xl",
+                      headingClassName
+                    ),
+                    children: heading
+                  }
+                )),
+                description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    className: cn(
+                      "mb-8 max-w-xl lg:text-xl",
+                      descriptionClassName
+                    ),
+                    children: description
+                  }
+                ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+                renderActions
+              ]
+            }
+          ),
+          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-split-icon-cards.cjs

@@ -984,7 +984,7 @@ function HeroSplitIconCards({
       const card = /* @__PURE__ */ jsxRuntime.jsx(Card, { className: "h-full border-border/60 px-0 py-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-4 p-6", children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-14 w-14 items-center justify-center rounded-xl bg-primary/10 text-primary", children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: item.icon, size: 24 }) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-bold text-foreground", children: item.title }),
+          /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-bold ", children: item.title }),
           item.subtitle ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: item.subtitle }) : null
         ] })
       ] }) });
@@ -1002,7 +1002,7 @@ function HeroSplitIconCards({
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 gap-10 lg:grid-cols-2 lg:items-center", children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("space-y-6", contentClassName), children: children ? children : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           eyebrow && (typeof eyebrow === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-semibold uppercase tracking-[0.25em] text-primary", children: eyebrow }) : eyebrow),
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-3xl font-bold text-foreground md:text-4xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-3xl font-bold text-foreground md:text-4xl", headingClassName), children: heading })),
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-3xl font-bold md:text-4xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-3xl font-bold md:text-4xl", headingClassName), children: heading })),
           description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-lg text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
           renderActions
         ] }) }),

package/dist/hero-split-icon-cards.js

@@ -963,7 +963,7 @@ function HeroSplitIconCards({
       const card = /* @__PURE__ */ jsx(Card, { className: "h-full border-border/60 px-0 py-0", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-4 p-6", children: [
         /* @__PURE__ */ jsx("div", { className: "flex h-14 w-14 items-center justify-center rounded-xl bg-primary/10 text-primary", children: /* @__PURE__ */ jsx(DynamicIcon, { name: item.icon, size: 24 }) }),
         /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("h3", { className: "text-lg font-bold text-foreground", children: item.title }),
+          /* @__PURE__ */ jsx("h3", { className: "text-lg font-bold ", children: item.title }),
           item.subtitle ? /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: item.subtitle }) : null
         ] })
       ] }) });
@@ -981,7 +981,7 @@ function HeroSplitIconCards({
       children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-10 lg:grid-cols-2 lg:items-center", children: [
         /* @__PURE__ */ jsx("div", { className: cn("space-y-6", contentClassName), children: children ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
           eyebrow && (typeof eyebrow === "string" ? /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold uppercase tracking-[0.25em] text-primary", children: eyebrow }) : eyebrow),
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("text-3xl font-bold text-foreground md:text-4xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("h2", { className: cn("text-3xl font-bold text-foreground md:text-4xl", headingClassName), children: heading })),
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("text-3xl font-bold md:text-4xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("h2", { className: cn("text-3xl font-bold md:text-4xl", headingClassName), children: heading })),
           description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-lg text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
           renderActions
         ] }) }),