dune-react 0.0.9 → 0.0.10

package/dist/components/puck-block/feature-sections/feature-showcase-1/feature-showcase.js

@@ -3,15 +3,13 @@ import { cn } from "../../../../utils/css-utils.js";
 import { CompoundContainer } from "../../../puck-base/container.js";
 import { CompoundImage } from "../../../puck-base/image.js";
 const FeatureShowcase = ({
-  padding,
-  sectionStyle,
-  backgroundColor,
+  styles,
   heading,
   description,
   image,
   features = [],
   layout = "image-right"
-}) => /* @__PURE__ */ jsxs(CompoundContainer, { padding, sectionStyle, backgroundColor, children: [
+}) => /* @__PURE__ */ jsxs(CompoundContainer, { padding: styles == null ? void 0 : styles.padding, sectionStyle: styles == null ? void 0 : styles.sectionStyle, backgroundColor: styles == null ? void 0 : styles.backgroundColor, children: [
   /* @__PURE__ */ jsxs("div", { className: "mb-12 max-w-2xl", children: [
     heading && /* @__PURE__ */ jsx("h2", { className: "text-foreground text-3xl font-bold tracking-tight md:text-4xl", children: heading }),
     description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mt-4 text-lg", children: description })

package/dist/components/puck-block/feature-sections/feature-showcase-1/index.js

@@ -1,5 +1,6 @@
-import { paddingDefaults, image16x9Placeholder, backgroundColor, sectionStyle, padding, image } from "../../../puck-base/core/fields.js";
+import { image16x9Placeholder, image } from "../../../puck-base/core/fields.js";
 import { FeatureShowcase } from "./feature-showcase.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
 const conf = {
   fields: {
     heading: { type: "text", contentEditable: true },
@@ -25,9 +26,7 @@ const conf = {
         { label: "Image Right", value: "image-right" }
       ]
     },
-    padding,
-    sectionStyle,
-    backgroundColor
+    styles: createStylesField()
   },
   defaultProps: {
     heading: "Everything you need",
@@ -48,7 +47,7 @@ const conf = {
       }
     ],
     layout: "image-right",
-    padding: paddingDefaults
+    styles: createStylesDefaults()
   },
   render: FeatureShowcase
 };

package/dist/components/puck-block/feature-sections/icon-grid-1/icon-grid.d.ts

@@ -1,17 +1,19 @@
 import { CompoundContainerProps } from "@/components/puck-base/container";
 import { CompoundButtonProps } from "@/components/puck-base/button";
 export interface IconGridProps {
-    padding?: CompoundContainerProps["padding"];
-    sectionStyle?: CompoundContainerProps["sectionStyle"];
-    backgroundColor?: string;
     heading?: string;
     description?: string;
     buttons?: CompoundButtonProps[];
     columns?: 2 | 3 | 4;
-    items?: Array<{
+    features?: Array<{
         icon: string;
         title: string;
         description: string;
     }>;
+    styles?: {
+        padding?: CompoundContainerProps["padding"];
+        sectionStyle?: CompoundContainerProps["sectionStyle"];
+        backgroundColor?: string;
+    };
 }
 export declare const IconGrid: (allProps: IconGridProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/puck-block/feature-sections/icon-grid-1/icon-grid.js

@@ -16,64 +16,70 @@ function getLucideIcon(name) {
 const IconGrid = (allProps) => {
   const componentId = allProps.id;
   const {
-    padding,
-    sectionStyle,
-    backgroundColor,
     heading,
     description,
     buttons,
     columns = 3,
-    items = []
+    features = [],
+    styles
   } = allProps;
-  return /* @__PURE__ */ jsxs(CompoundContainer, { padding, sectionStyle, backgroundColor, children: [
-    heading && /* @__PURE__ */ jsx("h2", { className: "text-foreground font-serif text-2xl md:text-3xl leading-snug mb-16 max-w-3xl", children: heading }),
-    description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mt-4 text-lg mb-8", children: description }),
-    Array.isArray(buttons) && buttons.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-4 mb-8", children: buttons.filter((b) => b.label).map((button, idx) => /* @__PURE__ */ jsx(
-      CompoundButton,
-      {
-        label: button.label,
-        url: button.url,
-        variant: button.variant,
-        size: button.size,
-        icon: button.icon
-      },
-      idx
-    )) }),
-    /* @__PURE__ */ jsx("div", { className: cn(
-      "grid grid-cols-1 gap-x-12",
-      gridColsClass[columns] || ""
-    ), children: items.map((item, i) => /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-6 py-6", children: [
-        /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 mt-1 text-muted-foreground", children: (() => {
-          const Icon = getLucideIcon(item.icon);
-          return Icon ? /* @__PURE__ */ jsx(Icon, { className: "h-9 w-9 stroke-[1.5]" }) : /* @__PURE__ */ jsx("span", { className: "text-3xl", children: "📦" });
-        })() }),
-        /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
-          /* @__PURE__ */ jsx(
-            InlineEditable,
-            {
-              tag: "h3",
-              className: "text-foreground font-serif text-xl font-medium mb-3",
-              value: item.title,
-              componentId: componentId || "",
-              propPath: `items[${i}].title`
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            InlineEditable,
-            {
-              tag: "p",
-              className: "text-muted-foreground text-sm leading-relaxed max-w-2xl",
-              value: item.description,
-              componentId: componentId || "",
-              propPath: `items[${i}].description`
-            }
-          )
-        ] })
-      ] }),
-      /* @__PURE__ */ jsx("hr", { className: "border-foreground/10" })
-    ] }, i)) })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    CompoundContainer,
+    {
+      padding: styles == null ? void 0 : styles.padding,
+      sectionStyle: styles == null ? void 0 : styles.sectionStyle,
+      backgroundColor: styles == null ? void 0 : styles.backgroundColor,
+      children: [
+        heading && /* @__PURE__ */ jsx("h2", { className: "text-foreground font-serif text-2xl md:text-3xl leading-snug mb-16 max-w-3xl", children: heading }),
+        description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mt-4 text-lg mb-8", children: description }),
+        Array.isArray(buttons) && buttons.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-4 mb-8", children: buttons.filter((b) => b.label).map((button, idx) => /* @__PURE__ */ jsx(
+          CompoundButton,
+          {
+            label: button.label,
+            url: button.url,
+            variant: button.variant,
+            size: button.size,
+            icon: button.icon
+          },
+          idx
+        )) }),
+        /* @__PURE__ */ jsx("div", { className: cn(
+          "grid grid-cols-1 gap-x-12",
+          gridColsClass[columns] || ""
+        ), children: features.map((item, i) => /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-6 py-6", children: [
+            /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 mt-1 text-muted-foreground", children: (() => {
+              const Icon = getLucideIcon(item.icon);
+              return Icon ? /* @__PURE__ */ jsx(Icon, { className: "h-9 w-9 stroke-[1.5]" }) : /* @__PURE__ */ jsx("span", { className: "text-3xl", children: "📦" });
+            })() }),
+            /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+              /* @__PURE__ */ jsx(
+                InlineEditable,
+                {
+                  tag: "h3",
+                  className: "text-foreground font-serif text-xl font-medium mb-3",
+                  value: item.title,
+                  componentId: componentId || "",
+                  propPath: `features[${i}].title`
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                InlineEditable,
+                {
+                  tag: "p",
+                  className: "text-muted-foreground text-sm leading-relaxed max-w-2xl",
+                  value: item.description,
+                  componentId: componentId || "",
+                  propPath: `features[${i}].description`
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("hr", { className: "border-foreground/10" })
+        ] }, i)) })
+      ]
+    }
+  );
 };
 export {
   IconGrid

package/dist/components/puck-block/feature-sections/icon-grid-1/index.js

@@ -1,5 +1,6 @@
-import { paddingDefaults, backgroundColor, sectionStyle, padding, buttons } from "../../../puck-base/core/fields.js";
+import { buttons } from "../../../puck-base/core/fields.js";
 import { IconGrid } from "./icon-grid.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
 const conf = {
   fields: {
     heading: { type: "text", contentEditable: true },
@@ -13,10 +14,10 @@ const conf = {
         { label: "4 Columns", value: 4 }
       ]
     },
-    items: {
+    features: {
       type: "array",
       max: 12,
-      getItemSummary: (item, i = 0) => item.title || `Item ${i + 1}`,
+      getItemSummary: (item, i = 0) => item.title || `Feature ${i + 1}`,
       arrayFields: {
         icon: {
           type: "text",
@@ -33,15 +34,13 @@ const conf = {
         description: "Description"
       }
     },
-    padding,
-    sectionStyle,
-    backgroundColor
+    styles: createStylesField()
   },
   defaultProps: {
     heading: "Why choose us",
     description: "Features that set us apart.",
     columns: 3,
-    items: [
+    features: [
       {
         icon: "zap",
         title: "Fast",
@@ -61,7 +60,7 @@ const conf = {
         description: "Built with latest tech."
       }
     ],
-    padding: paddingDefaults
+    styles: createStylesDefaults()
   },
   render: IconGrid
 };

package/dist/components/puck-block/feature-sections/product-features-1/index.js

@@ -1,5 +1,6 @@
-import { paddingDefaults, backgroundColor, sectionStyle, padding, image, icon, description, heading, getPlaceholderImageUrl } from "../../../puck-base/core/fields.js";
+import { image, icon, description, heading, getPlaceholderImageUrl } from "../../../puck-base/core/fields.js";
 import { ProductFeatures } from "./product-features.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
 const defaultFeature = {
   icon: "box",
   title: "Feature Name",
@@ -38,9 +39,7 @@ const conf = {
       ]
     },
     image,
-    padding,
-    sectionStyle,
-    backgroundColor
+    styles: createStylesField()
   },
   defaultProps: {
     heading: "Built for the Trail",
@@ -83,7 +82,7 @@ const conf = {
       src: getPlaceholderImageUrl("1200x800", "Product Image"),
       alt: "Summit 32L hiking backpack"
     },
-    padding: paddingDefaults
+    styles: createStylesDefaults()
   },
   render: ProductFeatures
 };

package/dist/components/puck-block/feature-sections/product-features-1/product-features.d.ts

@@ -9,9 +9,11 @@ export interface ProductFeature {
     };
 }
 export interface ProductFeaturesProps {
-    padding?: CompoundContainerProps["padding"];
-    sectionStyle?: CompoundContainerProps["sectionStyle"];
-    backgroundColor?: string;
+    styles?: {
+        padding?: CompoundContainerProps["padding"];
+        sectionStyle?: CompoundContainerProps["sectionStyle"];
+        backgroundColor?: string;
+    };
     heading?: string;
     description?: string;
     features?: ProductFeature[];
@@ -22,4 +24,4 @@ export interface ProductFeaturesProps {
         alt?: string;
     };
 }
-export declare const ProductFeatures: ({ padding, sectionStyle, backgroundColor, heading, description, features, layout, columns, image, }: ProductFeaturesProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ProductFeatures: ({ styles, heading, description, features, layout, columns, image, }: ProductFeaturesProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/puck-block/feature-sections/product-features-1/product-features.js

@@ -97,16 +97,14 @@ const ListLayout = ({
   (image == null ? void 0 : image.src) && /* @__PURE__ */ jsx("div", { className: "[&>span]:w-full overflow-hidden rounded-xl", children: /* @__PURE__ */ jsx(CompoundImage, { src: image.src, alt: image.alt || "", className: "sticky top-8 w-full rounded-xl object-cover" }) })
 ] });
 const ProductFeatures = ({
-  padding,
-  sectionStyle,
-  backgroundColor,
+  styles,
   heading,
   description,
   features = [],
   layout = "grid",
   columns = 3,
   image
-}) => /* @__PURE__ */ jsx(CompoundContainer, { padding, sectionStyle, backgroundColor, children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-12", children: [
+}) => /* @__PURE__ */ jsx(CompoundContainer, { padding: styles == null ? void 0 : styles.padding, sectionStyle: styles == null ? void 0 : styles.sectionStyle, backgroundColor: styles == null ? void 0 : styles.backgroundColor, children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-12", children: [
   (heading || description) && /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-2xl text-center", children: [
     heading && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl", children: heading }),
     description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mt-4 text-lg", children: description })

package/dist/components/puck-block/feature-sections/props.d.ts

@@ -0,0 +1,48 @@
+type FeatureVariant = "bento-1" | "feature-cards-1" | "feature-showcase-1" | "icon-grid-1" | "product-features-1";
+type FeaturePadding = {
+    top?: "none" | "small" | "medium" | "large";
+    bottom?: "none" | "small" | "medium" | "large";
+};
+type FeatureSectionStyle = "default" | "dark" | "muted" | "inverted" | "custom";
+type FeatureButton = {
+    label: string;
+    url?: string;
+    variant?: "default" | "secondary" | "outline" | "ghost" | "link" | "destructive";
+    size?: "default" | "sm" | "lg" | "icon";
+    icon?: string;
+};
+type FeatureImage = {
+    src: string;
+    alt?: string;
+};
+type FeatureItem = {
+    title?: string;
+    name?: string;
+    description?: string;
+    icon?: string;
+    image?: FeatureImage;
+};
+type FeatureCard = {
+    title?: string;
+    description?: string;
+    image?: FeatureImage;
+    badge?: string;
+    icon?: string;
+    href?: string;
+};
+type FeatureSectionProps = {
+    variant?: FeatureVariant;
+    heading?: string;
+    description?: string;
+    buttons?: FeatureButton[];
+    features?: FeatureItem[];
+    cards?: FeatureCard[];
+    image?: FeatureImage;
+    layout?: "image-left" | "image-right" | "grid" | "alternating" | "list";
+    columns?: 1 | 2 | 3 | 4;
+    styles?: {
+        padding?: FeaturePadding;
+        sectionStyle?: FeatureSectionStyle;
+        backgroundColor?: string;
+    };
+};

package/dist/components/puck-block/footer-sections/footer-1/footer.d.ts

@@ -11,12 +11,14 @@ interface PrimaryLinks extends Omit<Link, "url"> {
 export interface FooterProps extends ILayoutProps {
     companyName: string;
     tagLine?: string;
-    padding: CompoundContainerProps["padding"];
-    sectionStyle?: CompoundContainerProps["sectionStyle"];
-    backgroundColor?: string;
     address?: string;
     legalLinks: Link[];
     navigation: PrimaryLinks[];
+    styles?: {
+        padding?: CompoundContainerProps["padding"];
+        sectionStyle?: CompoundContainerProps["sectionStyle"];
+        backgroundColor?: string;
+    };
 }
 export declare const Footer: (props: FooterProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/puck-block/footer-sections/footer-1/footer.js

@@ -1,13 +1,13 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CompoundContainer } from "../../../puck-base/container.js";
 const Footer = (props) => {
-  var _a, _b;
+  var _a, _b, _c, _d, _e;
   return /* @__PURE__ */ jsx(
     CompoundContainer,
     {
-      padding: props.padding,
-      sectionStyle: props.sectionStyle,
-      backgroundColor: props.backgroundColor,
+      padding: (_a = props.styles) == null ? void 0 : _a.padding,
+      sectionStyle: (_b = props.styles) == null ? void 0 : _b.sectionStyle,
+      backgroundColor: (_c = props.styles) == null ? void 0 : _c.backgroundColor,
       className: "bg-background/95 text-muted-foreground",
       children: /* @__PURE__ */ jsxs("div", { className: "grid items-center gap-10 lg:grid-cols-2", children: [
         /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start gap-8", children: [
@@ -17,10 +17,10 @@ const Footer = (props) => {
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-20", children: [
             /* @__PURE__ */ jsx("div", { className: "flex max-w-lg flex-col text-left text-sm leading-relaxed tracking-tight", children: /* @__PURE__ */ jsx("p", { style: { whiteSpace: "pre-line" }, children: props.address }) }),
-            /* @__PURE__ */ jsx("div", { className: "flex max-w-lg flex-col text-left text-sm leading-relaxed tracking-tight", children: (_a = props.legalLinks) == null ? void 0 : _a.map((link, index) => /* @__PURE__ */ jsx("a", { href: link.url, children: link.label }, index)) })
+            /* @__PURE__ */ jsx("div", { className: "flex max-w-lg flex-col text-left text-sm leading-relaxed tracking-tight", children: (_d = props.legalLinks) == null ? void 0 : _d.map((link, index) => /* @__PURE__ */ jsx("a", { href: link.url, children: link.label }, index)) })
           ] })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "grid items-start gap-10 lg:grid-cols-3", children: (_b = props.navigation) == null ? void 0 : _b.map((item, index) => {
+        /* @__PURE__ */ jsx("div", { className: "grid items-start gap-10 lg:grid-cols-3", children: (_e = props.navigation) == null ? void 0 : _e.map((item, index) => {
           var _a2;
           return /* @__PURE__ */ jsx(
             "div",

package/dist/components/puck-block/footer-sections/footer-1/index.js

@@ -1,5 +1,5 @@
 import { Footer } from "./footer.js";
-import { paddingDefaults, backgroundColor, sectionStyle, padding } from "../../../puck-base/core/fields.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
 const conf = {
   fields: {
     companyName: {
@@ -58,12 +58,9 @@ const conf = {
         url: ""
       }
     },
-    padding,
-    sectionStyle,
-    backgroundColor
+    styles: createStylesField()
   },
   defaultProps: {
-    padding: paddingDefaults,
     companyName: "Puck Visual Editor",
     tagLine: "Build visually. Launch instantly.",
     address: "1 Puck Avenue\nVisual Park\nCA 123123\n© 2024 Puck, Inc.",
@@ -126,6 +123,7 @@ const conf = {
         url: "/privacy"
       }
     ],
+    styles: createStylesDefaults(),
     __metadata: {
       type: "layout"
     }

package/dist/components/puck-block/footer-sections/props.d.ts

@@ -0,0 +1,31 @@
+type FooterVariant = "footer-1";
+type FooterPadding = {
+    top?: "none" | "small" | "medium" | "large";
+    bottom?: "none" | "small" | "medium" | "large";
+};
+type FooterSectionStyle = "default" | "dark" | "muted" | "inverted" | "custom";
+type FooterLink = {
+    label: string;
+    url?: string;
+};
+type FooterNavigationGroup = {
+    label: string;
+    url?: string;
+    items?: FooterLink[];
+};
+type FooterSectionProps = {
+    variant?: FooterVariant;
+    __metadata?: {
+        type: "layout";
+    };
+    companyName?: string;
+    tagLine?: string;
+    address?: string;
+    legalLinks?: FooterLink[];
+    navigation?: FooterNavigationGroup[];
+    styles?: {
+        padding?: FooterPadding;
+        sectionStyle?: FooterSectionStyle;
+        backgroundColor?: string;
+    };
+};

package/dist/components/puck-block/gallery-sections/gallery-1/gallery.d.ts

@@ -5,14 +5,16 @@ export interface GalleryImage {
     caption?: string;
 }
 export interface GalleryProps {
-    padding?: CompoundContainerProps["padding"];
-    sectionStyle?: CompoundContainerProps["sectionStyle"];
-    backgroundColor?: string;
     heading?: string;
     description?: string;
     images?: GalleryImage[];
-    columns?: 2 | 3 | 4;
-    gap?: "sm" | "md" | "lg";
-    aspectRatio?: "square" | "landscape" | "auto";
+    styles?: {
+        padding?: CompoundContainerProps["padding"];
+        sectionStyle?: CompoundContainerProps["sectionStyle"];
+        backgroundColor?: string;
+        columns?: 2 | 3 | 4;
+        gap?: "sm" | "md" | "lg";
+        aspectRatio?: "square" | "landscape" | "auto";
+    };
 }
-export declare const Gallery: ({ padding, sectionStyle, backgroundColor, heading, description, images, columns, gap, aspectRatio, }: GalleryProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Gallery: ({ heading, description, images, styles, }: GalleryProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/puck-block/gallery-sections/gallery-1/gallery.js

@@ -18,52 +18,60 @@ const aspectClasses = {
   auto: ""
 };
 const Gallery = ({
-  padding,
-  sectionStyle,
-  backgroundColor,
   heading,
   description,
   images = [],
-  columns = 3,
-  gap = "md",
-  aspectRatio = "auto"
-}) => /* @__PURE__ */ jsx(CompoundContainer, { padding, sectionStyle, backgroundColor, children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-10", children: [
-  (heading || description) && /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-    heading && /* @__PURE__ */ jsx("h2", { className: "font-serif text-3xl font-bold tracking-tight md:text-4xl", children: heading }),
-    description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mx-auto mt-4 max-w-2xl text-lg", children: description })
-  ] }),
-  /* @__PURE__ */ jsx(
-    "div",
+  styles
+}) => {
+  const columns = (styles == null ? void 0 : styles.columns) ?? 3;
+  const gap = (styles == null ? void 0 : styles.gap) ?? "md";
+  const aspectRatio = (styles == null ? void 0 : styles.aspectRatio) ?? "auto";
+  return /* @__PURE__ */ jsx(
+    CompoundContainer,
     {
-      className: cn(
-        "grid",
-        columnClasses[columns] ?? columnClasses[3],
-        gapClasses[gap] ?? gapClasses.md
-      ),
-      children: images.map((image, index) => /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: "group bg-muted relative overflow-hidden rounded-lg",
-          children: [
-            /* @__PURE__ */ jsx("div", { className: cn(aspectClasses[aspectRatio], "[&>span]:w-full", aspectRatio !== "auto" && "[&>span]:h-full"), children: image.src && /* @__PURE__ */ jsx(
-              CompoundImage,
+      padding: styles == null ? void 0 : styles.padding,
+      sectionStyle: styles == null ? void 0 : styles.sectionStyle,
+      backgroundColor: styles == null ? void 0 : styles.backgroundColor,
+      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-10", children: [
+        (heading || description) && /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+          heading && /* @__PURE__ */ jsx("h2", { className: "font-serif text-3xl font-bold tracking-tight md:text-4xl", children: heading }),
+          description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mx-auto mt-4 max-w-2xl text-lg", children: description })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "grid",
+              columnClasses[columns] ?? columnClasses[3],
+              gapClasses[gap] ?? gapClasses.md
+            ),
+            children: images.map((image, index) => /* @__PURE__ */ jsxs(
+              "div",
               {
-                src: image.src,
-                alt: image.alt ?? `Gallery image ${index + 1}`,
-                className: cn(
-                  "w-full object-cover transition-transform duration-300 group-hover:scale-105",
-                  aspectRatio !== "auto" && "h-full"
-                )
-              }
-            ) }),
-            image.caption && /* @__PURE__ */ jsx("div", { className: "from-foreground/60 absolute inset-x-0 bottom-0 bg-gradient-to-t to-transparent p-4", children: /* @__PURE__ */ jsx("p", { className: "text-background text-sm", children: image.caption }) })
-          ]
-        },
-        index
-      ))
+                className: "group bg-muted relative overflow-hidden rounded-lg",
+                children: [
+                  /* @__PURE__ */ jsx("div", { className: cn(aspectClasses[aspectRatio], "[&>span]:w-full", aspectRatio !== "auto" && "[&>span]:h-full"), children: image.src && /* @__PURE__ */ jsx(
+                    CompoundImage,
+                    {
+                      src: image.src,
+                      alt: image.alt ?? `Gallery image ${index + 1}`,
+                      className: cn(
+                        "w-full object-cover transition-transform duration-300 group-hover:scale-105",
+                        aspectRatio !== "auto" && "h-full"
+                      )
+                    }
+                  ) }),
+                  image.caption && /* @__PURE__ */ jsx("div", { className: "from-foreground/60 absolute inset-x-0 bottom-0 bg-gradient-to-t to-transparent p-4", children: /* @__PURE__ */ jsx("p", { className: "text-background text-sm", children: image.caption }) })
+                ]
+              },
+              index
+            ))
+          }
+        )
+      ] })
     }
-  )
-] }) });
+  );
+};
 export {
   Gallery
 };