dune-react 0.0.8 → 0.0.10

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

@@ -1,5 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CompoundContainer } from "../../../puck-base/container.js";
+import { CompoundImage } from "../../../puck-base/image.js";
 import { cn } from "../../../../utils/css-utils.js";
 import DynamicIcon from "../../../../node_modules/.pnpm/lucide-react@0.540.0_react@19.2.4/node_modules/lucide-react/dist/esm/DynamicIcon.js";
 const GridLayout = ({
@@ -7,14 +8,7 @@ const GridLayout = ({
   columns,
   image
 }) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-10", children: [
-  (image == null ? void 0 : image.src) && /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-xl", children: /* @__PURE__ */ jsx(
-    "img",
-    {
-      src: image.src,
-      alt: image.alt || "",
-      className: "h-auto w-full object-cover"
-    }
-  ) }),
+  (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: "w-full object-cover" }) }),
   /* @__PURE__ */ jsx(
     "div",
     {
@@ -48,17 +42,10 @@ const AlternatingLayout = ({ features }) => /* @__PURE__ */ jsx("div", { classNa
           "div",
           {
             className: cn(
-              "bg-muted overflow-hidden rounded-xl",
+              "bg-muted [&>span]:w-full overflow-hidden rounded-xl",
               !isEven && "lg:order-2"
             ),
-            children: ((_a = feature.image) == null ? void 0 : _a.src) ? /* @__PURE__ */ jsx(
-              "img",
-              {
-                src: feature.image.src,
-                alt: feature.image.alt || "",
-                className: "h-auto w-full object-cover"
-              }
-            ) : /* @__PURE__ */ jsx("div", { className: "flex aspect-video items-center justify-center", children: feature.icon && feature.icon !== "none" && /* @__PURE__ */ jsx(
+            children: ((_a = feature.image) == null ? void 0 : _a.src) ? /* @__PURE__ */ jsx(CompoundImage, { src: feature.image.src, alt: feature.image.alt || "", className: "w-full object-cover" }) : /* @__PURE__ */ jsx("div", { className: "flex aspect-video items-center justify-center", children: feature.icon && feature.icon !== "none" && /* @__PURE__ */ jsx(
               DynamicIcon,
               {
                 name: feature.icon,
@@ -107,26 +94,17 @@ const ListLayout = ({
     },
     index
   )) }),
-  (image == null ? void 0 : image.src) && /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-xl", children: /* @__PURE__ */ jsx(
-    "img",
-    {
-      src: image.src,
-      alt: image.alt || "",
-      className: "sticky top-8 h-auto w-full rounded-xl object-cover"
-    }
-  ) })
+  (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

@@ -1,5 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CompoundContainer } from "../../../puck-base/container.js";
+import { CompoundImage } from "../../../puck-base/image.js";
 import { cn } from "../../../../utils/css-utils.js";
 const columnClasses = {
   2: "grid-cols-1 sm:grid-cols-2",
@@ -17,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]), children: image.src && /* @__PURE__ */ jsx(
-              "img",
+      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
 };

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

@@ -1,5 +1,6 @@
-import { paddingDefaults, backgroundColor, sectionStyle, padding, description, heading } from "../../../puck-base/core/fields.js";
+import { description, heading } from "../../../puck-base/core/fields.js";
 import { Gallery } from "./gallery.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
 const defaultImage = {
   src: "https://dummyimage.com/800x600/f5f4f4/101010.png&text=Gallery+Image",
   alt: "Gallery image",
@@ -20,47 +21,44 @@ const conf = {
       },
       defaultItemProps: defaultImage
     },
-    columns: {
-      type: "select",
-      options: [
-        { label: "2 Columns", value: 2 },
-        { label: "3 Columns", value: 3 },
-        { label: "4 Columns", value: 4 }
-      ]
-    },
-    gap: {
-      type: "select",
-      label: "Gap Size",
-      options: [
-        { label: "Small", value: "sm" },
-        { label: "Medium", value: "md" },
-        { label: "Large", value: "lg" }
-      ]
-    },
-    aspectRatio: {
-      type: "select",
-      label: "Aspect Ratio",
-      options: [
-        { label: "Square", value: "square" },
-        { label: "Landscape (16:9)", value: "landscape" },
-        { label: "Auto (original)", value: "auto" }
-      ]
-    },
-    padding,
-    sectionStyle,
-    backgroundColor
+    styles: createStylesField({
+      columns: {
+        type: "select",
+        label: "Columns",
+        options: [
+          { label: "2 Columns", value: 2 },
+          { label: "3 Columns", value: 3 },
+          { label: "4 Columns", value: 4 }
+        ]
+      },
+      gap: {
+        type: "select",
+        label: "Gap Size",
+        options: [
+          { label: "Small", value: "sm" },
+          { label: "Medium", value: "md" },
+          { label: "Large", value: "lg" }
+        ]
+      },
+      aspectRatio: {
+        type: "select",
+        label: "Aspect Ratio",
+        options: [
+          { label: "Square", value: "square" },
+          { label: "Landscape (16:9)", value: "landscape" },
+          { label: "Auto (original)", value: "auto" }
+        ]
+      }
+    })
   },
   defaultProps: {
     heading: "Our Gallery",
     description: "A showcase of our finest work and moments.",
-    columns: 3,
-    gap: "md",
-    aspectRatio: "auto",
     images: Array.from({ length: 6 }).map((_, i) => ({
       ...defaultImage,
       alt: `Gallery image ${i + 1}`
     })),
-    padding: paddingDefaults
+    styles: createStylesDefaults({ columns: 3, gap: "md", aspectRatio: "auto" })
   },
   render: Gallery
 };

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

@@ -0,0 +1,16 @@
+import { CompoundContainerProps } from "@/components/puck-base/container";
+export interface Gallery2Image {
+    src: string;
+    alt?: string;
+}
+export interface Gallery2Props {
+    heading?: string;
+    description?: string;
+    images?: Gallery2Image[];
+    styles?: {
+        padding?: CompoundContainerProps["padding"];
+        sectionStyle?: CompoundContainerProps["sectionStyle"];
+        backgroundColor?: string;
+    };
+}
+export declare const Gallery2: ({ heading, description, images, styles, }: Gallery2Props) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,86 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import useEmblaCarousel from "embla-carousel-react";
+import { useState, useCallback, useEffect } from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { CompoundContainer } from "../../../puck-base/container.js";
+import { CompoundImage } from "../../../puck-base/image.js";
+const Gallery2 = ({
+  heading,
+  description,
+  images = [],
+  styles
+}) => {
+  const [emblaRef, emblaApi] = useEmblaCarousel({ align: "start", loop: false });
+  const [canScrollPrev, setCanScrollPrev] = useState(false);
+  const [canScrollNext, setCanScrollNext] = useState(false);
+  const onSelect = useCallback(() => {
+    if (!emblaApi) return;
+    setCanScrollPrev(emblaApi.canScrollPrev());
+    setCanScrollNext(emblaApi.canScrollNext());
+  }, [emblaApi]);
+  useEffect(() => {
+    if (!emblaApi) return;
+    onSelect();
+    emblaApi.on("select", onSelect);
+    emblaApi.on("reInit", onSelect);
+    return () => {
+      emblaApi.off("select", onSelect);
+      emblaApi.off("reInit", onSelect);
+    };
+  }, [emblaApi, onSelect]);
+  return /* @__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-4 lg:gap-8", children: [
+        (heading || description) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between lg:gap-8", children: [
+          heading && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3 lg:basis-1/2", children: /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight text-foreground lg:text-4xl", children: heading }) }),
+          description && /* @__PURE__ */ jsx("div", { className: "lg:basis-1/2 lg:pt-11", children: /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-base leading-relaxed", children: description }) })
+        ] }),
+        images.length > 0 && /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx("div", { className: "overflow-hidden", ref: emblaRef, children: /* @__PURE__ */ jsx("div", { className: "flex -ml-4 lg:-ml-6", children: images.map((image, index) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "min-w-0 shrink-0 grow-0 pl-4 lg:pl-6 basis-[97%] lg:basis-[92%]",
+              children: /* @__PURE__ */ jsx("div", { className: "relative w-full overflow-hidden aspect-[2/1]", children: /* @__PURE__ */ jsx("div", { className: "rounded-3xl overflow-hidden absolute inset-0 size-full [&>span]:h-full [&>span]:w-full", children: image.src ? /* @__PURE__ */ jsx(
+                CompoundImage,
+                {
+                  src: image.src,
+                  alt: image.alt ?? `Gallery image ${index + 1}`,
+                  className: "h-full w-full object-cover"
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-muted flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-sm", children: image.alt ?? `Image ${index + 1}` }) }) }) })
+            },
+            index
+          )) }) }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => emblaApi == null ? void 0 : emblaApi.scrollPrev(),
+              disabled: !canScrollPrev,
+              className: "absolute left-4 top-1/2 -translate-y-1/2 z-10 flex h-10 w-10 items-center justify-center rounded-full bg-background/90 shadow-md transition hover:bg-background disabled:opacity-30",
+              "aria-label": "Previous image",
+              children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-5 w-5 text-foreground" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => emblaApi == null ? void 0 : emblaApi.scrollNext(),
+              disabled: !canScrollNext,
+              className: "absolute right-4 top-1/2 -translate-y-1/2 z-10 flex h-10 w-10 items-center justify-center rounded-full bg-background/90 shadow-md transition hover:bg-background disabled:opacity-30",
+              "aria-label": "Next image",
+              children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-5 w-5 text-foreground" })
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+};
+export {
+  Gallery2
+};

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

@@ -0,0 +1,5 @@
+import { ComponentConfig } from "@puckeditor/core";
+import { Gallery2Props } from "./gallery-2";
+export type { Gallery2Props };
+export declare const conf: ComponentConfig<Gallery2Props>;
+export default conf;

package/dist/components/puck-block/gallery-sections/gallery-2/index.js

@@ -0,0 +1,42 @@
+import { Gallery2 } from "./gallery-2.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
+const defaultImage = {
+  src: "https://dummyimage.com/1400x700/f5f4f4/101010.png&text=Gallery+Image",
+  alt: "Gallery image"
+};
+const conf = {
+  fields: {
+    heading: {
+      type: "text",
+      contentEditable: true
+    },
+    description: {
+      type: "textarea",
+      contentEditable: true
+    },
+    images: {
+      type: "array",
+      max: 10,
+      getItemSummary: (item, index = 0) => item.alt || `Image ${index + 1}`,
+      arrayFields: {
+        src: { type: "image", label: "图片" },
+        alt: { type: "text", label: "Alt Text" }
+      },
+      defaultItemProps: defaultImage
+    },
+    styles: createStylesField()
+  },
+  defaultProps: {
+    heading: "Real transformations from real training",
+    description: "Watch how customized programs and one-on-one coaching help clients reach their fitness goals. Every session is built around your needs.",
+    images: Array.from({ length: 3 }).map((_, i) => ({
+      ...defaultImage,
+      alt: `Gallery image ${i + 1}`
+    })),
+    styles: createStylesDefaults()
+  },
+  render: Gallery2
+};
+export {
+  conf
+};

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

@@ -0,0 +1,19 @@
+import { CompoundContainerProps } from "@/components/puck-base/container";
+export interface Gallery3Image {
+    src: string;
+    alt?: string;
+    caption?: string;
+}
+export interface Gallery3Props {
+    heading?: string;
+    description?: string;
+    images?: Gallery3Image[];
+    showCaptions?: boolean;
+    styles?: {
+        padding?: CompoundContainerProps["padding"];
+        sectionStyle?: CompoundContainerProps["sectionStyle"];
+        backgroundColor?: string;
+        gap?: "sm" | "md" | "lg";
+    };
+}
+export declare const Gallery3: ({ heading, description, images, showCaptions, styles, }: Gallery3Props) => import("react/jsx-runtime").JSX.Element;