dune-react 0.0.23 → 0.0.24

package/dist/components/puck-block/gallery-sections/interactive-portfolio/interactive-portfolio.js

@@ -24,7 +24,12 @@ const InteractivePortfolio = (props) => {
     ...InteractivePortfolioDefaults,
     ...props
   };
-  const { className: sectionClassName, style: sectionStyle, css, listLayout = "center" } = styles ?? {};
+  const {
+    className: sectionClassName,
+    style: sectionStyle,
+    css,
+    listLayout = "center"
+  } = styles ?? {};
   const ref = useRef(null);
   const [cursorPosition, setCursorPosition] = useState({ x: 0, y: 0 });
   const [hoveredIndex, setHoveredIndex] = useState(null);
@@ -49,109 +54,129 @@ const InteractivePortfolio = (props) => {
   const translateLeftInverse = direction === "left" ? -50 : 0;
   const translateRightInverse = direction === "right" ? 50 : 0;
   if (listLayout === "left-with-sticky-image") {
-    return /* @__PURE__ */ jsx(SectionWrapper, { className: cn("px-[5%] py-8 md:py-12 lg:py-14", sectionClassName), style: sectionStyle, css, children: /* @__PURE__ */ jsxs("div", { className: "container", children: [
-      /* @__PURE__ */ jsx("p", { className: "mb-6 font-semibold md:mb-8", children: tagline }),
-      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-12 lg:grid-cols-2 lg:gap-16", children: [
-        /* @__PURE__ */ jsx("div", { className: "lg:sticky lg:top-20 lg:self-start", children: /* @__PURE__ */ jsx("div", { className: "aspect-square w-full overflow-hidden", children: /* @__PURE__ */ jsx(
-          CompoundImage,
-          {
-            src: hoveredIndex !== null ? hoverLinks[hoveredIndex].image.src : (_a = hoverLinks[0]) == null ? void 0 : _a.image.src,
-            alt: hoveredIndex !== null ? hoverLinks[hoveredIndex].image.alt : (_b = hoverLinks[0]) == null ? void 0 : _b.image.alt,
-            className: "size-full object-cover transition-all duration-500"
-          }
-        ) }) }),
-        /* @__PURE__ */ jsx("div", { children: hoverLinks.map((link, index) => /* @__PURE__ */ jsxs(
-          "a",
-          {
-            href: link.url,
-            onMouseEnter: () => setHoveredIndex(index),
-            onMouseLeave: () => setHoveredIndex(null),
-            className: "flex items-center justify-between border-b border-border-primary py-6 md:py-8",
-            children: [
-              /* @__PURE__ */ jsx(
-                "h3",
-                {
-                  className: cn(
-                    "text-2xl font-bold transition-colors duration-300 md:text-4xl lg:text-5xl",
+    return /* @__PURE__ */ jsx(
+      SectionWrapper,
+      {
+        className: cn("px-[5%] py-8 md:py-12 lg:py-14", sectionClassName),
+        style: sectionStyle,
+        css,
+        children: /* @__PURE__ */ jsxs("div", { className: "container", children: [
+          /* @__PURE__ */ jsx("p", { className: "mb-6 font-semibold md:mb-8", children: tagline }),
+          /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-12 lg:grid-cols-2 lg:gap-16", children: [
+            /* @__PURE__ */ jsx("div", { className: "lg:sticky lg:top-20 lg:self-start", children: /* @__PURE__ */ jsx("div", { className: "aspect-square w-full overflow-hidden", children: /* @__PURE__ */ jsx(
+              CompoundImage,
+              {
+                src: hoveredIndex !== null ? hoverLinks[hoveredIndex].image.src : (_a = hoverLinks[0]) == null ? void 0 : _a.image.src,
+                alt: hoveredIndex !== null ? hoverLinks[hoveredIndex].image.alt : (_b = hoverLinks[0]) == null ? void 0 : _b.image.alt,
+                className: "size-full object-cover transition-all duration-500"
+              }
+            ) }) }),
+            /* @__PURE__ */ jsx("div", { children: hoverLinks.map((link, index) => /* @__PURE__ */ jsxs(
+              "a",
+              {
+                href: link.url,
+                onMouseEnter: () => setHoveredIndex(index),
+                onMouseLeave: () => setHoveredIndex(null),
+                className: "flex items-center justify-between border-b border-border-primary py-6 md:py-8",
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "h3",
                     {
-                      "text-black/20": hoveredIndex !== index && hoveredIndex !== null
+                      className: cn(
+                        "text-2xl font-bold transition-colors duration-300 md:text-4xl lg:text-5xl",
+                        {
+                          "text-black/20": hoveredIndex !== index && hoveredIndex !== null
+                        }
+                      ),
+                      children: link.heading
                     }
                   ),
-                  children: link.heading
-                }
-              ),
-              /* @__PURE__ */ jsx("div", { className: "bg-background-secondary px-2 py-1 text-sm font-semibold", children: link.tag })
-            ]
-          },
-          index
-        )) })
-      ] })
-    ] }) });
+                  /* @__PURE__ */ jsx("div", { className: "bg-background-secondary px-2 py-1 text-sm font-semibold", children: link.tag })
+                ]
+              },
+              index
+            )) })
+          ] })
+        ] })
+      }
+    );
   }
   const isLeftAligned = listLayout === "left-aligned";
-  return /* @__PURE__ */ jsx(SectionWrapper, { className: cn("px-[5%] py-8 md:py-12 lg:py-14", sectionClassName), style: sectionStyle, css, onMouseMove: handleMouseMove, children: /* @__PURE__ */ jsxs("div", { className: cn("container", { "max-w-xl text-center": !isLeftAligned }), children: [
-    /* @__PURE__ */ jsx("p", { className: "mb-6 font-semibold md:mb-8", children: tagline }),
-    /* @__PURE__ */ jsx(
-      motion.div,
-      {
-        initial: "initial",
-        whileHover: direction,
-        ref,
-        onMouseEnter: handleMouseEnter,
-        onMouseLeave: handleMouseLeave,
-        children: hoverLinks.map((link, index) => /* @__PURE__ */ jsxs(
-          "a",
-          {
-            href: link.url,
-            onMouseEnter: () => setHoveredIndex(index),
-            className: cn("flex items-center gap-2 p-4 sm:gap-4 md:gap-8", {
-              "flex-col justify-center sm:flex-row": !isLeftAligned,
-              "flex-row justify-between border-b border-border-primary": isLeftAligned
-            }),
-            children: [
-              isLeftAligned && /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-neutral-500", children: String(index + 1).padStart(2, "0") }),
-              /* @__PURE__ */ jsx(
-                "h3",
-                {
-                  className: cn(
-                    "font-bold transition-colors duration-300",
-                    {
-                      "text-6xl md:text-9xl lg:text-10xl": !isLeftAligned,
-                      "text-2xl md:text-4xl lg:text-5xl": isLeftAligned,
-                      "lg:text-black/20": hoveredIndex !== index && hoveredIndex !== null,
-                      "lg:text-black": hoveredIndex === index || hoveredIndex === null
-                    }
-                  ),
-                  children: link.heading
-                }
-              ),
-              /* @__PURE__ */ jsx("div", { className: "bg-background-secondary border border-neutral-lightest px-2 py-1 text-sm font-semibold", children: link.tag }),
-              /* @__PURE__ */ jsx(
-                motion.div,
-                {
-                  className: `pointer-events-none fixed inset-0 -z-10 hidden size-[600px] lg:block ${hoveredIndex === index ? "opacity-100" : "opacity-0"}`,
-                  style: {
-                    translateX: cursorPosition.x - 300 + translateLeftInverse + translateRightInverse,
-                    translateY: cursorPosition.y - 300 + translateTopInverse + translateBottomInverse
+  return /* @__PURE__ */ jsx(
+    SectionWrapper,
+    {
+      className: cn("px-[5%] py-8 md:py-12 lg:py-14", sectionClassName),
+      style: sectionStyle,
+      css,
+      onMouseMove: handleMouseMove,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn("container", { "max-w-xl text-center": !isLeftAligned }),
+          children: [
+            /* @__PURE__ */ jsx("p", { className: "mb-6 font-semibold md:mb-8", children: tagline }),
+            /* @__PURE__ */ jsx(
+              motion.div,
+              {
+                initial: "initial",
+                whileHover: direction,
+                ref,
+                onMouseEnter: handleMouseEnter,
+                onMouseLeave: handleMouseLeave,
+                children: hoverLinks.map((link, index) => /* @__PURE__ */ jsxs(
+                  "a",
+                  {
+                    href: link.url,
+                    onMouseEnter: () => setHoveredIndex(index),
+                    className: cn("flex items-center gap-2 p-4 sm:gap-4 md:gap-8", {
+                      "flex-col justify-center sm:flex-row": !isLeftAligned,
+                      "flex-row justify-between border-b border-border-primary": isLeftAligned
+                    }),
+                    children: [
+                      isLeftAligned && /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-neutral-500", children: String(index + 1).padStart(2, "0") }),
+                      /* @__PURE__ */ jsx(
+                        "h3",
+                        {
+                          className: cn("font-bold transition-colors duration-300", {
+                            "text-6xl md:text-9xl lg:text-10xl": !isLeftAligned,
+                            "text-2xl md:text-4xl lg:text-5xl": isLeftAligned,
+                            "lg:text-black/20": hoveredIndex !== index && hoveredIndex !== null,
+                            "lg:text-black": hoveredIndex === index || hoveredIndex === null
+                          }),
+                          children: link.heading
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("div", { className: "bg-background-secondary whitespace-nowrap border border-neutral-lightest px-2 py-1 text-sm font-semibold", children: link.tag }),
+                      /* @__PURE__ */ jsx(
+                        motion.div,
+                        {
+                          className: `pointer-events-none fixed inset-0 -z-10 hidden size-[600px] lg:block ${hoveredIndex === index ? "opacity-100" : "opacity-0"}`,
+                          style: {
+                            translateX: cursorPosition.x - 300 + translateLeftInverse + translateRightInverse,
+                            translateY: cursorPosition.y - 300 + translateTopInverse + translateBottomInverse
+                          },
+                          children: /* @__PURE__ */ jsx(
+                            motion.img,
+                            {
+                              className: "size-full max-w-md",
+                              variants: imageVariants,
+                              src: link.image.src,
+                              alt: link.image.alt
+                            }
+                          )
+                        }
+                      )
+                    ]
                   },
-                  children: /* @__PURE__ */ jsx(
-                    motion.img,
-                    {
-                      className: "size-full max-w-md",
-                      variants: imageVariants,
-                      src: link.image.src,
-                      alt: link.image.alt
-                    }
-                  )
-                }
-              )
-            ]
-          },
-          index
-        ))
-      }
-    )
-  ] }) });
+                  index
+                ))
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
 };
 const defaultHoverLink = {
   url: "#",
@@ -171,12 +196,48 @@ const InteractivePortfolioDefaults = {
   images: [],
   projects: [],
   hoverLinks: [
-    { ...defaultHoverLink, image: { src: "https://picsum.photos/seed/ip-1/800/800", alt: "Project 1" } },
-    { ...defaultHoverLink, image: { src: "https://picsum.photos/seed/ip-2/800/800", alt: "Project 2" } },
-    { ...defaultHoverLink, image: { src: "https://picsum.photos/seed/ip-3/800/800", alt: "Project 3" } },
-    { ...defaultHoverLink, image: { src: "https://picsum.photos/seed/ip-4/800/800", alt: "Project 4" } },
-    { ...defaultHoverLink, image: { src: "https://picsum.photos/seed/ip-5/800/800", alt: "Project 5" } },
-    { ...defaultHoverLink, image: { src: "https://picsum.photos/seed/ip-6/800/800", alt: "Project 6" } }
+    {
+      ...defaultHoverLink,
+      image: {
+        src: "https://picsum.photos/seed/ip-1/800/800",
+        alt: "Project 1"
+      }
+    },
+    {
+      ...defaultHoverLink,
+      image: {
+        src: "https://picsum.photos/seed/ip-2/800/800",
+        alt: "Project 2"
+      }
+    },
+    {
+      ...defaultHoverLink,
+      image: {
+        src: "https://picsum.photos/seed/ip-3/800/800",
+        alt: "Project 3"
+      }
+    },
+    {
+      ...defaultHoverLink,
+      image: {
+        src: "https://picsum.photos/seed/ip-4/800/800",
+        alt: "Project 4"
+      }
+    },
+    {
+      ...defaultHoverLink,
+      image: {
+        src: "https://picsum.photos/seed/ip-5/800/800",
+        alt: "Project 5"
+      }
+    },
+    {
+      ...defaultHoverLink,
+      image: {
+        src: "https://picsum.photos/seed/ip-6/800/800",
+        alt: "Project 6"
+      }
+    }
   ],
   styles: {
     listLayout: "center"

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

@@ -56,8 +56,24 @@ declare const conf: {
                     };
                 };
                 columns: {
-                    readonly type: "text";
+                    readonly type: "select";
                     readonly label: "Columns";
+                    readonly options: readonly [{
+                        readonly label: "1";
+                        readonly value: "1";
+                    }, {
+                        readonly label: "2";
+                        readonly value: "2";
+                    }, {
+                        readonly label: "3";
+                        readonly value: "3";
+                    }, {
+                        readonly label: "2 → 3 (responsive)";
+                        readonly value: "2-lg3";
+                    }, {
+                        readonly label: "2 → 4 (responsive)";
+                        readonly value: "2-lg4";
+                    }];
                 };
             };
         };

package/dist/components/puck-block/gallery-sections/masonry-grid/masonry-grid.js

@@ -7,40 +7,53 @@ const MasonryGrid = (props) => {
     ...MasonryGridDefaults,
     ...props
   };
-  const { className: sectionClassName, style: sectionStyle, css, columns = "2" } = styles ?? {};
+  const {
+    className: sectionClassName,
+    style: sectionStyle,
+    css,
+    columns = "2"
+  } = styles ?? {};
   const cols = parseInt(columns, 10) || 2;
-  return /* @__PURE__ */ jsx(SectionWrapper, { className: cn("px-[5%] py-8 md:py-12 lg:py-14", sectionClassName), style: sectionStyle, css, children: /* @__PURE__ */ jsxs("div", { className: "container", children: [
-    /* @__PURE__ */ jsxs("div", { className: "mb-12 text-center md:mb-18 lg:mb-20", children: [
-      /* @__PURE__ */ jsx("h2", { className: "mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl", children: heading }),
-      /* @__PURE__ */ jsx("p", { className: "md:text-md", children: description })
-    ] }),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: cn("gap-x-8", {
-          "md:columns-2": cols === 2,
-          "md:columns-2 lg:columns-3": cols === 3
-        }),
-        children: images.map((image, index) => /* @__PURE__ */ jsx("a", { href: "#", className: "mb-8 inline-block w-full", children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(
+    SectionWrapper,
+    {
+      className: cn("px-[5%] py-8 md:py-12 lg:py-14", sectionClassName),
+      style: sectionStyle,
+      css,
+      children: /* @__PURE__ */ jsxs("div", { className: "container", children: [
+        /* @__PURE__ */ jsxs("div", { className: "mb-12 text-center md:mb-18 lg:mb-20", children: [
+          /* @__PURE__ */ jsx("h2", { className: "mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl", children: heading }),
+          /* @__PURE__ */ jsx("p", { className: "md:text-md", children: description })
+        ] }),
+        /* @__PURE__ */ jsx(
           "div",
           {
-            className: cn("relative inline-block w-full", {
-              "pt-[100%]": index % 3 === 0,
-              "pt-[66.66%]": index % 3 !== 0
+            className: cn("gap-x-8", {
+              "md:columns-2": cols === 2,
+              "md:columns-2 lg:columns-3": cols === 3
             }),
-            children: /* @__PURE__ */ jsx(
-              CompoundImage,
+            children: images.map((image, index) => /* @__PURE__ */ jsx("a", { href: "#", className: "mb-8 inline-block w-full", children: /* @__PURE__ */ jsx(
+              "div",
               {
-                src: image.src,
-                alt: image.alt,
-                className: "absolute inset-0 size-full object-cover"
+                className: cn("relative inline-block w-full", {
+                  "pt-[100%]": index % 3 === 0,
+                  "pt-[66.66%]": index % 3 !== 0
+                }),
+                children: /* @__PURE__ */ jsx(
+                  CompoundImage,
+                  {
+                    src: image.src,
+                    alt: image.alt,
+                    className: "absolute inset-0 size-full object-cover"
+                  }
+                )
               }
-            )
+            ) }, index))
           }
-        ) }, index))
-      }
-    )
-  ] }) });
+        )
+      ] })
+    }
+  );
 };
 const MasonryGridDefaults = {
   tagline: "",
@@ -49,10 +62,22 @@ const MasonryGridDefaults = {
   button: { label: "View all" },
   buttons: [],
   images: [
-    { src: "https://picsum.photos/seed/masonry-1/800/800", alt: "Gallery image 1" },
-    { src: "https://picsum.photos/seed/masonry-2/800/533", alt: "Gallery image 2" },
-    { src: "https://picsum.photos/seed/masonry-3/800/533", alt: "Gallery image 3" },
-    { src: "https://picsum.photos/seed/masonry-4/800/800", alt: "Gallery image 4" }
+    {
+      src: "https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=800&h=800&fit=crop",
+      alt: "Gallery image 1"
+    },
+    {
+      src: "https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=800&h=533&fit=crop",
+      alt: "Gallery image 2"
+    },
+    {
+      src: "https://images.unsplash.com/photo-1542291026-7eec264c27ff?w=800&h=533&fit=crop",
+      alt: "Gallery image 3"
+    },
+    {
+      src: "https://images.unsplash.com/photo-1526170375885-4d8ecf77b99f?w=800&h=800&fit=crop",
+      alt: "Gallery image 4"
+    }
   ],
   projects: [],
   hoverLinks: [],

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

@@ -179,8 +179,24 @@ declare const conf: {
                     };
                 };
                 columns: {
-                    readonly type: "text";
+                    readonly type: "select";
                     readonly label: "Columns";
+                    readonly options: readonly [{
+                        readonly label: "1";
+                        readonly value: "1";
+                    }, {
+                        readonly label: "2";
+                        readonly value: "2";
+                    }, {
+                        readonly label: "3";
+                        readonly value: "3";
+                    }, {
+                        readonly label: "2 → 3 (responsive)";
+                        readonly value: "2-lg3";
+                    }, {
+                        readonly label: "2 → 4 (responsive)";
+                        readonly value: "2-lg4";
+                    }];
                 };
                 bordered: {
                     readonly type: "radio";

package/dist/components/puck-block/gallery-sections/portfolio-cards/portfolio-cards.js

@@ -42,7 +42,7 @@ const PortfolioCards = (props) => {
     const isStacked = cardLayout === "stacked";
     const isZigzag = cardLayout === "zigzag";
     const isMasonry = cardLayout === "masonry";
-    const imageElement = /* @__PURE__ */ jsx("a", { href: project.url, className: cn({ "block": true }), children: /* @__PURE__ */ jsx(
+    const imageElement = /* @__PURE__ */ jsx("a", { href: project.url, className: cn({ block: true }), children: /* @__PURE__ */ jsx(
       CompoundImage,
       {
         src: project.image.src,
@@ -64,7 +64,14 @@ const PortfolioCards = (props) => {
           children: tag.label
         }
       ) }, tagIndex)) }),
-      (metaType === "tags-button" || metaType === "none") && project.button && /* @__PURE__ */ jsx("div", { className: "mt-5 md:mt-6", children: /* @__PURE__ */ jsx(Button, { variant: project.button.variant, size: project.button.size, children: project.button.label }) })
+      (metaType === "tags-button" || metaType === "none") && project.button && /* @__PURE__ */ jsx("div", { className: "mt-5 md:mt-6", children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: project.button.variant,
+          size: project.button.size,
+          children: project.button.label
+        }
+      ) })
     ] });
     if (isZigzag) {
       return /* @__PURE__ */ jsx(
@@ -114,15 +121,32 @@ const PortfolioCards = (props) => {
       index
     );
   };
-  return /* @__PURE__ */ jsx(SectionWrapper, { className: cn("px-[5%] py-8 md:py-12 lg:py-14", sectionClassName), style: sectionStyle, css, children: /* @__PURE__ */ jsxs("div", { className: "container", children: [
-    /* @__PURE__ */ jsxs("header", { className: "mx-auto mb-12 max-w-lg text-center md:mb-18 lg:mb-20", children: [
-      /* @__PURE__ */ jsx("p", { className: "mb-3 font-semibold md:mb-4", children: tagline }),
-      /* @__PURE__ */ jsx("h2", { className: "mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl", children: heading }),
-      /* @__PURE__ */ jsx("p", { className: "md:text-md", children: description })
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: getGridClass(), children: projects.map((project, index) => renderProject(project, index)) }),
-    /* @__PURE__ */ jsx("footer", { className: "mt-12 flex justify-center md:mt-18 lg:mt-20", children: /* @__PURE__ */ jsx(CompoundButton, { label: button.label, variant: button.variant, size: button.size, action: button.action, icon: button.icon }) })
-  ] }) });
+  return /* @__PURE__ */ jsx(
+    SectionWrapper,
+    {
+      className: cn("px-[5%] py-8 md:py-12 lg:py-14", sectionClassName),
+      style: sectionStyle,
+      css,
+      children: /* @__PURE__ */ jsxs("div", { className: "container", children: [
+        /* @__PURE__ */ jsxs("header", { className: "mx-auto mb-12 max-w-lg text-center md:mb-18 lg:mb-20", children: [
+          /* @__PURE__ */ jsx("p", { className: "mb-3 font-semibold md:mb-4", children: tagline }),
+          /* @__PURE__ */ jsx("h2", { className: "mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl", children: heading }),
+          /* @__PURE__ */ jsx("p", { className: "md:text-md", children: description })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: getGridClass(), children: projects.map((project, index) => renderProject(project, index)) }),
+        /* @__PURE__ */ jsx("footer", { className: "mt-12 flex justify-center md:mt-18 lg:mt-20", children: /* @__PURE__ */ jsx(
+          CompoundButton,
+          {
+            label: button.label,
+            variant: button.variant,
+            size: button.size,
+            action: button.action,
+            icon: button.icon
+          }
+        ) })
+      ] })
+    }
+  );
 };
 const defaultProject = {
   title: "Project name here",
@@ -132,7 +156,11 @@ const defaultProject = {
     alt: "Placeholder image"
   },
   url: "#",
-  button: { label: "View project", variant: "link", size: "sm" },
+  button: {
+    label: "View project",
+    variant: "link",
+    size: "sm"
+  },
   tags: [
     { label: "Tag one", url: "#" },
     { label: "Tag two", url: "#" }

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

@@ -59,8 +59,24 @@ export interface GallerySectionBaseProps {
 }
 export declare const galleryStyleFields: {
     readonly columns: {
-        readonly type: "text";
+        readonly type: "select";
         readonly label: "Columns";
+        readonly options: readonly [{
+            readonly label: "1";
+            readonly value: "1";
+        }, {
+            readonly label: "2";
+            readonly value: "2";
+        }, {
+            readonly label: "3";
+            readonly value: "3";
+        }, {
+            readonly label: "2 → 3 (responsive)";
+            readonly value: "2-lg3";
+        }, {
+            readonly label: "2 → 4 (responsive)";
+            readonly value: "2-lg4";
+        }];
     };
     readonly gap: {
         readonly type: "radio";
@@ -118,8 +134,21 @@ export declare const galleryStyleFields: {
         }];
     };
     readonly slidesPerView: {
-        readonly type: "text";
+        readonly type: "select";
         readonly label: "Slides Per View";
+        readonly options: readonly [{
+            readonly label: "1";
+            readonly value: "1";
+        }, {
+            readonly label: "1 → 2 (responsive)";
+            readonly value: "1-md2";
+        }, {
+            readonly label: "2 → 3 (responsive)";
+            readonly value: "2-md3";
+        }, {
+            readonly label: "2 → 4 (responsive)";
+            readonly value: "2-md4";
+        }];
     };
     readonly slideOverflow: {
         readonly type: "radio";

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

@@ -1,7 +1,14 @@
 const galleryStyleFields = {
   columns: {
-    type: "text",
-    label: "Columns"
+    type: "select",
+    label: "Columns",
+    options: [
+      { label: "1", value: "1" },
+      { label: "2", value: "2" },
+      { label: "3", value: "3" },
+      { label: "2 → 3 (responsive)", value: "2-lg3" },
+      { label: "2 → 4 (responsive)", value: "2-lg4" }
+    ]
   },
   gap: {
     type: "radio",
@@ -44,8 +51,14 @@ const galleryStyleFields = {
     ]
   },
   slidesPerView: {
-    type: "text",
-    label: "Slides Per View"
+    type: "select",
+    label: "Slides Per View",
+    options: [
+      { label: "1", value: "1" },
+      { label: "1 → 2 (responsive)", value: "1-md2" },
+      { label: "2 → 3 (responsive)", value: "2-md3" },
+      { label: "2 → 4 (responsive)", value: "2-md4" }
+    ]
   },
   slideOverflow: {
     type: "radio",