dune-react 0.0.22 → 0.0.24

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

@@ -5,24 +5,47 @@ import { useScroll, useTransform, motion, useSpring, easeOut, easeInOut } from "
 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 ScrollParallaxPortfolio = (props) => {
-  const { projects, styles } = {
+  const { projects: projects2, styles } = {
     ...ScrollParallaxPortfolioDefaults,
     ...props
   };
-  const { className: sectionClassName, style: sectionStyle, css, animation = "threeImageParallax" } = styles ?? {};
+  const {
+    className: sectionClassName,
+    style: sectionStyle,
+    css,
+    animation = "threeImageParallax"
+  } = styles ?? {};
   if (animation === "scaleOpacity") {
-    return /* @__PURE__ */ jsx(ScaleOpacityVariant, { projects, sectionClassName, sectionStyle, css });
+    return /* @__PURE__ */ jsx(
+      ScaleOpacityVariant,
+      {
+        projects: projects2,
+        sectionClassName,
+        sectionStyle,
+        css
+      }
+    );
   }
-  return /* @__PURE__ */ jsx(ThreeImageParallaxVariant, { projects, sectionClassName, sectionStyle, css });
+  return /* @__PURE__ */ jsx(
+    ThreeImageParallaxVariant,
+    {
+      projects: projects2,
+      sectionClassName,
+      sectionStyle,
+      css
+    }
+  );
 };
 const ThreeImageParallaxVariant = ({
-  projects,
+  projects: projects2,
   sectionClassName,
   sectionStyle,
   css
 }) => {
+  const { isEditor } = useEditorContext();
   const transformRef = useRef(null);
   const [scrollContainerRef] = useScrollContainer(transformRef);
   const { scrollYProgress } = useScroll({
@@ -35,19 +58,29 @@ const ThreeImageParallaxVariant = ({
     restDelta: 1e-3,
     mass: 0.5
   });
-  const computedStyles = projects.map((_, index) => {
-    const blockOffset = projects.length ? index / projects.length : 0;
+  const computedStyles = projects2.map((_, index) => {
+    const blockOffset = projects2.length ? index / projects2.length : 0;
     return {
       headerStyles: {
         opacity: useTransform(
           smoothProgress,
-          [45e-4 + blockOffset, 0.022 + blockOffset, 0.06 + blockOffset, 0.082 + blockOffset],
+          [
+            45e-4 + blockOffset,
+            0.022 + blockOffset,
+            0.06 + blockOffset,
+            0.082 + blockOffset
+          ],
           [0, 1, 1, 0],
           { ease: easeInOut }
         ),
         scale: useTransform(
           smoothProgress,
-          [0 + blockOffset, 0.022 + blockOffset, 0.06 + blockOffset, 0.082 + blockOffset],
+          [
+            0 + blockOffset,
+            0.022 + blockOffset,
+            0.06 + blockOffset,
+            0.082 + blockOffset
+          ],
           [0.9, 1, 1, 0.9],
           { ease: easeInOut }
         )
@@ -70,159 +103,265 @@ const ThreeImageParallaxVariant = ({
       }
     };
   });
-  return /* @__PURE__ */ jsxs(SectionWrapper, { className: cn("relative px-[5%]", sectionClassName), style: sectionStyle, css, children: [
-    /* @__PURE__ */ jsx("div", { ref: transformRef, className: "container", children: /* @__PURE__ */ jsx("div", { className: "py-6 md:py-8 lg:py-10", children: projects.map((project, index) => {
-      var _a, _b, _c, _d, _e, _f;
-      return /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: cn("relative flex h-[500vh] flex-col", {
-            "mt-[-40vh]": index > 0
-          }),
-          children: [
-            /* @__PURE__ */ jsx(
-              motion.div,
-              {
-                className: "sticky top-0 flex h-[150vh] justify-center",
-                style: computedStyles[index].headerStyles,
-                children: /* @__PURE__ */ jsxs("div", { className: "absolute top-[50vh] -z-10 flex w-full max-w-lg flex-col items-center text-center", children: [
-                  /* @__PURE__ */ jsx("h3", { className: "text-5xl font-bold md:text-7xl lg:text-8xl", children: project.title }),
-                  project.tags && /* @__PURE__ */ jsx("div", { className: "mt-4 flex flex-wrap justify-center gap-2", children: project.tags.map((tag, tagIndex) => /* @__PURE__ */ jsx("li", { className: "flex", children: /* @__PURE__ */ jsx("div", { className: "inline-flex border border-neutral-lightest bg-background-secondary px-2 py-1 text-sm font-semibold text-text-primary", children: tag.label }) }, tagIndex)) })
-                ] })
-              }
-            ),
-            /* @__PURE__ */ jsxs("div", { className: "sticky top-0 z-10 flex h-screen items-center justify-center overflow-hidden", children: [
-              /* @__PURE__ */ jsx("a", { href: "#", className: "inline-block max-w-full", children: /* @__PURE__ */ jsx("div", { className: "flex h-screen w-full max-w-lg items-center justify-center overflow-hidden", children: /* @__PURE__ */ jsx(
-                CompoundImage,
-                {
-                  src: ((_a = project.imageCenter) == null ? void 0 : _a.src) ?? project.image.src,
-                  alt: ((_b = project.imageCenter) == null ? void 0 : _b.alt) ?? project.image.alt,
-                  className: "size-full object-contain"
-                }
-              ) }) }),
-              /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 left-0 right-auto z-20 hidden h-screen w-full max-w-xxs lg:flex", children: /* @__PURE__ */ jsx(
-                motion.div,
+  return /* @__PURE__ */ jsxs(
+    SectionWrapper,
+    {
+      className: cn("relative px-[5%]", sectionClassName),
+      style: sectionStyle,
+      css,
+      children: [
+        /* @__PURE__ */ jsx("div", { ref: transformRef, className: "container", children: /* @__PURE__ */ jsx("div", { className: "py-6 md:py-8 lg:py-10", children: projects2.map((project, index) => {
+          var _a, _b, _c, _d, _e, _f;
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "relative flex flex-col",
+                isEditor ? "h-auto mb-12" : "h-[500vh]",
                 {
-                  className: "relative w-full pt-[100vh]",
-                  style: computedStyles[index].imageLeftStyles,
-                  children: /* @__PURE__ */ jsx(
-                    CompoundImage,
-                    {
-                      src: ((_c = project.imageLeft) == null ? void 0 : _c.src) ?? project.image.src,
-                      alt: ((_d = project.imageLeft) == null ? void 0 : _d.alt) ?? project.image.alt,
-                      className: "w-full object-contain"
-                    }
-                  )
+                  "mt-[-40vh]": !isEditor && index > 0
                 }
-              ) }),
-              /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 left-auto right-0 z-20 hidden h-screen w-full max-w-xxs lg:flex", children: /* @__PURE__ */ jsx(
-                motion.div,
-                {
-                  className: "relative w-full pt-[100vh]",
-                  style: computedStyles[index].imageRightStyles,
-                  children: /* @__PURE__ */ jsx(
-                    CompoundImage,
-                    {
-                      src: ((_e = project.imageRight) == null ? void 0 : _e.src) ?? project.image.src,
-                      alt: ((_f = project.imageRight) == null ? void 0 : _f.alt) ?? project.image.alt,
-                      className: "w-full object-contain"
-                    }
-                  )
-                }
-              ) })
-            ] }),
-            /* @__PURE__ */ jsx("div", { className: "absolute inset-0 -z-10 mt-[100vh]" })
-          ]
-        },
-        index
-      );
-    }) }) }),
-    /* @__PURE__ */ jsx("div", { className: "h-screen" })
-  ] });
+              ),
+              children: [
+                /* @__PURE__ */ jsx(
+                  motion.div,
+                  {
+                    className: cn(
+                      "flex justify-center",
+                      isEditor ? "relative h-auto py-8" : "sticky top-0 h-[150vh]"
+                    ),
+                    style: isEditor ? { opacity: 1, scale: 1 } : computedStyles[index].headerStyles,
+                    children: /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        className: cn(
+                          "-z-10 flex w-full max-w-lg flex-col items-center text-center",
+                          isEditor ? "relative" : "absolute top-[50vh]"
+                        ),
+                        children: [
+                          /* @__PURE__ */ jsx("h3", { className: "text-5xl font-bold md:text-7xl lg:text-8xl", children: project.title }),
+                          project.tags && /* @__PURE__ */ jsx("div", { className: "mt-4 flex flex-wrap justify-center gap-2", children: project.tags.map((tag, tagIndex) => /* @__PURE__ */ jsx("li", { className: "flex", children: /* @__PURE__ */ jsx("div", { className: "inline-flex border border-neutral-lightest bg-background-secondary px-2 py-1 text-sm font-semibold text-text-primary", children: tag.label }) }, tagIndex)) })
+                        ]
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: cn(
+                      "z-10 flex items-center justify-center overflow-hidden",
+                      isEditor ? "relative h-auto" : "sticky top-0 h-screen"
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsx("a", { href: "#", className: "inline-block max-w-full", children: /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          className: cn(
+                            "flex w-full max-w-5xl items-center justify-center overflow-hidden",
+                            isEditor ? "h-auto" : "h-screen"
+                          ),
+                          children: /* @__PURE__ */ jsx(
+                            CompoundImage,
+                            {
+                              src: ((_a = project.imageCenter) == null ? void 0 : _a.src) ?? project.image.src,
+                              alt: ((_b = project.imageCenter) == null ? void 0 : _b.alt) ?? project.image.alt,
+                              className: "size-full object-contain"
+                            }
+                          )
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          className: cn(
+                            "absolute inset-y-0 left-0 right-auto z-20 hidden w-full max-w-xs lg:flex",
+                            isEditor ? "h-auto" : "h-screen"
+                          ),
+                          children: /* @__PURE__ */ jsx(
+                            motion.div,
+                            {
+                              className: cn(
+                                "relative w-full",
+                                isEditor ? "pt-0" : "pt-[100vh]"
+                              ),
+                              style: isEditor ? { y: 0 } : computedStyles[index].imageLeftStyles,
+                              children: /* @__PURE__ */ jsx(
+                                CompoundImage,
+                                {
+                                  src: ((_c = project.imageLeft) == null ? void 0 : _c.src) ?? project.image.src,
+                                  alt: ((_d = project.imageLeft) == null ? void 0 : _d.alt) ?? project.image.alt,
+                                  className: "w-full object-contain"
+                                }
+                              )
+                            }
+                          )
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          className: cn(
+                            "absolute inset-y-0 left-auto right-0 z-20 hidden w-full max-w-xs lg:flex",
+                            isEditor ? "h-auto" : "h-screen"
+                          ),
+                          children: /* @__PURE__ */ jsx(
+                            motion.div,
+                            {
+                              className: cn(
+                                "relative w-full",
+                                isEditor ? "pt-0" : "pt-[100vh]"
+                              ),
+                              style: isEditor ? { y: 0 } : computedStyles[index].imageRightStyles,
+                              children: /* @__PURE__ */ jsx(
+                                CompoundImage,
+                                {
+                                  src: ((_e = project.imageRight) == null ? void 0 : _e.src) ?? project.image.src,
+                                  alt: ((_f = project.imageRight) == null ? void 0 : _f.alt) ?? project.image.alt,
+                                  className: "w-full object-contain"
+                                }
+                              )
+                            }
+                          )
+                        }
+                      )
+                    ]
+                  }
+                ),
+                !isEditor && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 -z-10 mt-[100vh]" })
+              ]
+            },
+            index
+          );
+        }) }) }),
+        !isEditor && /* @__PURE__ */ jsx("div", { className: "h-screen" })
+      ]
+    }
+  );
 };
 const ScaleOpacityVariant = ({
-  projects,
+  projects: projects2,
   sectionClassName,
   sectionStyle,
   css
 }) => {
+  const { isEditor } = useEditorContext();
   const containerRef = useRef(null);
   const [scrollContainerRef] = useScrollContainer(containerRef);
   const { scrollYProgress } = useScroll({
     target: containerRef,
     ...scrollContainerRef.current ? { container: scrollContainerRef } : {}
   });
-  return /* @__PURE__ */ jsx(SectionWrapper, { ref: containerRef, className: cn("relative px-[5%]", sectionClassName), style: sectionStyle, css, children: /* @__PURE__ */ jsx("div", { className: "h-[300vh]", children: /* @__PURE__ */ jsx("div", { className: "sticky top-0 flex h-screen items-center justify-center", children: projects.map((project, index) => {
-    const segmentSize = 1 / projects.length;
-    const start = index * segmentSize;
-    const end = start + segmentSize;
-    const opacity = useTransform(
-      scrollYProgress,
-      [start, start + segmentSize * 0.15, end - segmentSize * 0.15, end],
-      [0, 1, 1, 0]
-    );
-    const scale = useTransform(
-      scrollYProgress,
-      [start, start + segmentSize * 0.15, end - segmentSize * 0.15, end],
-      [0.8, 1, 1, 0.8]
-    );
-    return /* @__PURE__ */ jsx(
-      motion.div,
-      {
-        style: { opacity, scale },
-        className: "absolute inset-0 flex items-center justify-center",
-        children: /* @__PURE__ */ jsxs("div", { className: "container max-w-4xl border border-border-primary bg-background-primary p-8 md:p-12", children: [
-          /* @__PURE__ */ jsx("div", { className: "mb-6", children: /* @__PURE__ */ jsx(
-            CompoundImage,
-            {
-              src: project.image.src,
-              alt: project.image.alt,
-              className: "aspect-video w-full object-cover"
-            }
-          ) }),
-          /* @__PURE__ */ jsx("h3", { className: "mb-2 text-2xl font-bold md:text-3xl", children: project.title }),
-          /* @__PURE__ */ jsx("p", { children: project.description }),
-          project.tags && /* @__PURE__ */ jsx("div", { className: "mt-4 flex flex-wrap gap-2", children: project.tags.map((tag, tagIndex) => /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: "bg-background-secondary px-2 py-1 text-sm font-semibold",
-              children: tag.label
-            },
-            tagIndex
-          )) })
-        ] })
-      },
-      index
-    );
-  }) }) }) });
+  return /* @__PURE__ */ jsx(
+    SectionWrapper,
+    {
+      ref: containerRef,
+      className: cn("relative px-[5%]", sectionClassName),
+      style: sectionStyle,
+      css,
+      children: /* @__PURE__ */ jsx("div", { className: isEditor ? "h-auto" : "h-[300vh]", children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "flex items-center justify-center",
+            isEditor ? "relative flex-col gap-8 py-12" : "sticky top-0 h-screen"
+          ),
+          children: projects2.map((project, index) => {
+            const segmentSize = 1 / projects2.length;
+            const start = index * segmentSize;
+            const end = start + segmentSize;
+            const opacity = useTransform(
+              scrollYProgress,
+              [
+                start,
+                start + segmentSize * 0.15,
+                end - segmentSize * 0.15,
+                end
+              ],
+              [0, 1, 1, 0]
+            );
+            const scale = useTransform(
+              scrollYProgress,
+              [
+                start,
+                start + segmentSize * 0.15,
+                end - segmentSize * 0.15,
+                end
+              ],
+              [0.8, 1, 1, 0.8]
+            );
+            return /* @__PURE__ */ jsx(
+              motion.div,
+              {
+                style: isEditor ? { opacity: 1, scale: 1 } : { opacity, scale },
+                className: cn(
+                  "flex items-center justify-center",
+                  isEditor ? "relative w-full" : "absolute inset-0"
+                ),
+                children: /* @__PURE__ */ jsxs("div", { className: "container max-w-4xl border border-border-primary bg-background-primary p-8 md:p-12", children: [
+                  /* @__PURE__ */ jsx("div", { className: "mb-6", children: /* @__PURE__ */ jsx(
+                    CompoundImage,
+                    {
+                      src: project.image.src,
+                      alt: project.image.alt,
+                      className: "aspect-video w-full object-cover"
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx("h3", { className: "mb-2 text-2xl font-bold md:text-3xl", children: project.title }),
+                  /* @__PURE__ */ jsx("p", { children: project.description }),
+                  project.tags && /* @__PURE__ */ jsx("div", { className: "mt-4 flex flex-wrap gap-2", children: project.tags.map((tag, tagIndex) => /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: "bg-background-secondary px-2 py-1 text-sm font-semibold",
+                      children: tag.label
+                    },
+                    tagIndex
+                  )) })
+                ] })
+              },
+              index
+            );
+          })
+        }
+      ) })
+    }
+  );
 };
-const defaultProject = {
-  title: "Project name",
-  description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
-  image: {
-    src: "https://picsum.photos/seed/scroll-port/1200/800",
-    alt: "Relume placeholder image"
+const projects = [
+  {
+    title: "Project name",
+    description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
+    image: { src: "https://images.unsplash.com/photo-1547658719-da2b51169166?w=1200&h=800&fit=crop", alt: "Web design workspace" },
+    url: "#",
+    button: { label: "View project" },
+    tags: [{ label: "Tag one", url: "#" }, { label: "Tag two", url: "#" }, { label: "Tag three", url: "#" }],
+    imageCenter: { src: "https://images.unsplash.com/photo-1559028012-481c04fa702d?w=1000&h=660&fit=crop", alt: "Web design process" },
+    imageLeft: { src: "https://images.unsplash.com/photo-1581291518857-4e27b48ff24e?w=600&h=400&fit=crop", alt: "Wireframe sketches" },
+    imageRight: { src: "https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=600&h=400&fit=crop", alt: "Analytics dashboard" }
   },
-  url: "#",
-  button: { label: "View project" },
-  tags: [
-    { label: "Tag one", url: "#" },
-    { label: "Tag two", url: "#" },
-    { label: "Tag three", url: "#" }
-  ],
-  imageCenter: {
-    src: "https://picsum.photos/seed/scroll-port-center/800/1000",
-    alt: "Relume placeholder center"
+  {
+    title: "Project name",
+    description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
+    image: { src: "https://images.unsplash.com/photo-1626785774573-4b799315345d?w=1200&h=800&fit=crop", alt: "Design studio" },
+    url: "#",
+    button: { label: "View project" },
+    tags: [{ label: "Tag one", url: "#" }, { label: "Tag two", url: "#" }, { label: "Tag three", url: "#" }],
+    imageCenter: { src: "https://images.unsplash.com/photo-1618004912476-29818d81ae2e?w=1000&h=660&fit=crop", alt: "Colorful abstract shapes" },
+    imageLeft: { src: "https://images.unsplash.com/photo-1561070791-2526d30994b5?w=600&h=400&fit=crop", alt: "Brand color palette" },
+    imageRight: { src: "https://images.unsplash.com/photo-1611532736597-de2d4265fba3?w=600&h=400&fit=crop", alt: "Typography design" }
   },
-  imageLeft: {
-    src: "https://picsum.photos/seed/scroll-port-left/400/600",
-    alt: "Relume placeholder left"
-  },
-  imageRight: {
-    src: "https://picsum.photos/seed/scroll-port-right/400/600",
-    alt: "Relume placeholder right"
+  {
+    title: "Project name",
+    description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
+    image: { src: "https://images.unsplash.com/photo-1512941937669-90a1b58e7e9c?w=1200&h=800&fit=crop", alt: "Mobile device" },
+    url: "#",
+    button: { label: "View project" },
+    tags: [{ label: "Tag one", url: "#" }, { label: "Tag two", url: "#" }, { label: "Tag three", url: "#" }],
+    imageCenter: { src: "https://images.unsplash.com/photo-1551650975-87deedd944c3?w=1000&h=660&fit=crop", alt: "App mockup" },
+    imageLeft: { src: "https://images.unsplash.com/photo-1522542550221-31fd19575a2d?w=600&h=400&fit=crop", alt: "Wireframe sketches" },
+    imageRight: { src: "https://images.unsplash.com/photo-1586953208448-b95a79798f07?w=600&h=400&fit=crop", alt: "Mobile app in use" }
   }
-};
+];
 const ScrollParallaxPortfolioDefaults = {
   tagline: "",
   heading: "",
@@ -230,21 +369,7 @@ const ScrollParallaxPortfolioDefaults = {
   button: { label: "View all" },
   buttons: [],
   images: [],
-  projects: [
-    { ...defaultProject },
-    {
-      ...defaultProject,
-      imageCenter: { src: "https://picsum.photos/seed/spp-c2/800/1000", alt: "Center 2" },
-      imageLeft: { src: "https://picsum.photos/seed/spp-l2/400/600", alt: "Left 2" },
-      imageRight: { src: "https://picsum.photos/seed/spp-r2/400/600", alt: "Right 2" }
-    },
-    {
-      ...defaultProject,
-      imageCenter: { src: "https://picsum.photos/seed/spp-c3/800/1000", alt: "Center 3" },
-      imageLeft: { src: "https://picsum.photos/seed/spp-l3/400/600", alt: "Left 3" },
-      imageRight: { src: "https://picsum.photos/seed/spp-r3/400/600", alt: "Right 3" }
-    }
-  ],
+  projects,
   hoverLinks: [],
   styles: {
     animation: "threeImageParallax"

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

@@ -56,8 +56,18 @@ declare const conf: {
                     };
                 };
                 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%";
+                    }];
                 };
             };
         };

package/dist/components/puck-block/gallery-sections/static-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";
+                    }];
                 };
                 gap: {
                     readonly type: "radio";