dune-react 0.0.22 → 0.0.24

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";
@@ -144,8 +173,18 @@ export declare const galleryStyleFields: {
         }];
     };
     readonly slideBasis: {
-        readonly type: "text";
+        readonly type: "select";
         readonly label: "Slide Basis";
+        readonly options: readonly [{
+            readonly label: "4/5";
+            readonly value: "4/5";
+        }, {
+            readonly label: "45%";
+            readonly value: "45%";
+        }, {
+            readonly label: "30%";
+            readonly value: "30%";
+        }];
     };
     readonly bordered: {
         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",
@@ -64,8 +77,13 @@ const galleryStyleFields = {
     ]
   },
   slideBasis: {
-    type: "text",
-    label: "Slide Basis"
+    type: "select",
+    label: "Slide Basis",
+    options: [
+      { label: "4/5", value: "4/5" },
+      { label: "45%", value: "45%" },
+      { label: "30%", value: "30%" }
+    ]
   },
   bordered: {
     type: "radio",

package/dist/components/puck-block/gallery-sections/scroll-parallax/scroll-parallax.js

@@ -5,13 +5,19 @@ import { useScroll, useTransform, motion } from "framer-motion";
 import { cn } from "../../../../utils/css-utils.js";
 import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
 import { useScrollContainer } from "../../../../hooks/use-scroll-container.js";
+import { useEditorContext } from "../../../puck-core/core/context/editor-context.js";
 import { CompoundImage } from "../../../puck-base/image.js";
 const ScrollParallax = (props) => {
   const { heading, description, images, styles } = {
     ...ScrollParallaxDefaults,
     ...props
   };
-  const { className: sectionClassName, style: sectionStyle, css } = styles ?? {};
+  const {
+    className: sectionClassName,
+    style: sectionStyle,
+    css
+  } = styles ?? {};
+  const { isEditor } = useEditorContext();
   const transformRef = useRef(null);
   const [scrollContainerRef] = useScrollContainer(transformRef);
   const { scrollYProgress } = useScroll({
@@ -19,27 +25,61 @@ const ScrollParallax = (props) => {
     ...scrollContainerRef.current ? { container: scrollContainerRef } : {}
   });
   const x = useTransform(scrollYProgress, [0, 1], ["0%", "-100%"]);
-  return /* @__PURE__ */ jsxs(SectionWrapper, { ref: transformRef, className: cn(sectionClassName), style: sectionStyle, css, children: [
-    /* @__PURE__ */ jsx("div", { className: "px-[5%] pt-16 md:pt-24 lg:pt-28", children: /* @__PURE__ */ jsxs("div", { className: "container text-center", children: [
-      /* @__PURE__ */ jsx("h2", { className: "rb-5 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: "h-[400vh]", children: /* @__PURE__ */ jsx("div", { className: "sticky top-0 mt-[-10vh] flex h-screen w-screen max-w-full flex-col items-start justify-center overflow-hidden px-[5%] md:mt-0", children: /* @__PURE__ */ jsx(
-      motion.div,
+  if (isEditor) {
+    return /* @__PURE__ */ jsxs(
+      SectionWrapper,
       {
-        style: { x },
-        className: "flex w-[150vh] items-center gap-x-6 sm:w-[200vh] md:gap-x-8 lg:w-[400vh]",
-        children: images.map((image, index) => /* @__PURE__ */ jsx("a", { className: "inline-block max-w-full", children: /* @__PURE__ */ jsx("div", { className: "relative size-full max-w-full overflow-hidden", children: /* @__PURE__ */ jsx(
-          CompoundImage,
+        ref: transformRef,
+        className: cn(sectionClassName),
+        style: sectionStyle,
+        css,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "px-[5%] pt-16 md:pt-24 lg:pt-28", children: /* @__PURE__ */ jsxs("div", { className: "container text-center", children: [
+            /* @__PURE__ */ jsx("h2", { className: "rb-5 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: "px-[5%] py-12", children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3", children: images.map((image, index) => /* @__PURE__ */ jsx("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsx(
+            CompoundImage,
+            {
+              className: "aspect-video w-full object-cover",
+              src: image.src,
+              alt: image.alt
+            }
+          ) }, index)) }) })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    SectionWrapper,
+    {
+      ref: transformRef,
+      className: cn(sectionClassName),
+      style: sectionStyle,
+      css,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "px-[5%] pt-16 md:pt-24 lg:pt-28", children: /* @__PURE__ */ jsxs("div", { className: "container text-center", children: [
+          /* @__PURE__ */ jsx("h2", { className: "rb-5 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: "h-[400vh]", children: /* @__PURE__ */ jsx("div", { className: "sticky top-0 mt-[-10vh] flex h-screen w-screen max-w-full flex-col items-start justify-center overflow-hidden px-[5%] md:mt-0", children: /* @__PURE__ */ jsx(
+          motion.div,
           {
-            className: "h-[80vh] max-h-[25rem] object-cover sm:max-h-[30rem] sm:w-[90vw] md:max-h-[40rem] md:w-[80vw] lg:max-h-none",
-            src: image.src,
-            alt: image.alt
+            style: { x },
+            className: "flex w-[150vh] items-center gap-x-6 sm:w-[200vh] md:gap-x-8 lg:w-[400vh]",
+            children: images.map((image, index) => /* @__PURE__ */ jsx("a", { className: "inline-block max-w-full", children: /* @__PURE__ */ jsx("div", { className: "relative size-full max-w-full overflow-hidden", children: /* @__PURE__ */ jsx(
+              CompoundImage,
+              {
+                className: "h-[80vh] max-h-[25rem] object-cover sm:max-h-[30rem] sm:w-[90vw] md:max-h-[40rem] md:w-[80vw] lg:max-h-none",
+                src: image.src,
+                alt: image.alt
+              }
+            ) }) }, index))
           }
-        ) }) }, index))
-      }
-    ) }) })
-  ] });
+        ) }) })
+      ]
+    }
+  );
 };
 const ScrollParallaxDefaults = {
   tagline: "",
@@ -48,9 +88,18 @@ const ScrollParallaxDefaults = {
   button: { label: "View all" },
   buttons: [],
   images: [
-    { src: "https://picsum.photos/seed/scroll-1/1200/800", alt: "Gallery image 1" },
-    { src: "https://picsum.photos/seed/scroll-2/1200/800", alt: "Gallery image 2" },
-    { src: "https://picsum.photos/seed/scroll-3/1200/800", alt: "Gallery image 3" }
+    {
+      src: "https://picsum.photos/seed/scroll-1/1200/800",
+      alt: "Gallery image 1"
+    },
+    {
+      src: "https://picsum.photos/seed/scroll-2/1200/800",
+      alt: "Gallery image 2"
+    },
+    {
+      src: "https://picsum.photos/seed/scroll-3/1200/800",
+      alt: "Gallery image 3"
+    }
   ],
   projects: [],
   hoverLinks: [],