dune-react 0.0.19 → 0.0.20

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

@@ -0,0 +1,130 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { Button } from "../../../shadcn/button.js";
+import { CompoundImage } from "../../../puck-base/image.js";
+import { useScroll, useTransform, motion } from "framer-motion";
+const FullscreenPortfolio = (props) => {
+  const { projects, styles } = {
+    ...FullscreenPortfolioDefaults,
+    ...props
+  };
+  const { animation = "sticky-stack" } = styles ?? {};
+  if (animation === "scroll-fade") {
+    return /* @__PURE__ */ jsx(ScrollFadeVariant, { projects });
+  }
+  return /* @__PURE__ */ jsx("section", { id: "relume", children: projects.map((project, index) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "sticky top-0 flex h-screen items-center justify-center px-[5%]",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "absolute inset-0", children: [
+          /* @__PURE__ */ jsx(
+            CompoundImage,
+            {
+              src: project.image.src,
+              alt: project.image.alt,
+              className: "size-full object-cover"
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "absolute inset-0 z-10 bg-black/50" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "relative z-20 mx-auto flex max-w-lg flex-col items-center text-center text-text-alternative md:text-md", children: [
+          /* @__PURE__ */ jsx("h2", { className: "text-5xl font-bold md:text-7xl lg:text-8xl", children: project.title }),
+          /* @__PURE__ */ jsx("p", { className: "mt-5 md:mt-6", children: project.description }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: project.button.variant,
+              size: project.button.size,
+              className: "mt-6 h-12 text-base md:mt-8",
+              children: project.button.label
+            }
+          )
+        ] })
+      ]
+    },
+    index
+  )) });
+};
+const ScrollFadeVariant = ({
+  projects
+}) => {
+  const containerRef = useRef(null);
+  const { scrollYProgress } = useScroll({ target: containerRef });
+  return /* @__PURE__ */ jsx("section", { id: "relume", ref: containerRef, className: "relative", children: /* @__PURE__ */ jsx("div", { className: "h-[300vh]", children: /* @__PURE__ */ jsx("div", { className: "sticky top-0 flex h-screen items-center justify-center px-[5%]", 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.2, end - segmentSize * 0.2, end],
+      [0, 1, 1, 0]
+    );
+    return /* @__PURE__ */ jsxs(
+      motion.div,
+      {
+        style: { opacity },
+        className: "absolute inset-0 flex items-center justify-center px-[5%]",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "absolute inset-0", children: [
+            /* @__PURE__ */ jsx(
+              CompoundImage,
+              {
+                src: project.image.src,
+                alt: project.image.alt,
+                className: "size-full object-cover"
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "absolute inset-0 z-10 bg-black/50" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "relative z-20 mx-auto flex max-w-lg flex-col items-center text-center text-text-alternative md:text-md", children: [
+            /* @__PURE__ */ jsx("h2", { className: "text-5xl font-bold md:text-7xl lg:text-8xl", children: project.title }),
+            /* @__PURE__ */ jsx("p", { className: "mt-5 md:mt-6", children: project.description }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: project.button.variant,
+                size: project.button.size,
+                className: "mt-6 h-12 text-base md:mt-8",
+                children: project.button.label
+              }
+            )
+          ] })
+        ]
+      },
+      index
+    );
+  }) }) }) });
+};
+const defaultProject = {
+  title: "Project name here",
+  description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
+  image: {
+    src: "https://picsum.photos/seed/fullscreen-port/1920/1080",
+    alt: "Relume placeholder image"
+  },
+  url: "#",
+  button: { label: "View project", variant: "secondary" }
+};
+const FullscreenPortfolioDefaults = {
+  tagline: "",
+  heading: "",
+  description: "",
+  button: { label: "View all" },
+  buttons: [],
+  images: [],
+  projects: [
+    { ...defaultProject, image: { src: "https://picsum.photos/seed/fs-port-1/1920/1080", alt: "Project 1" } },
+    { ...defaultProject, image: { src: "https://picsum.photos/seed/fs-port-2/1920/1080", alt: "Project 2" } },
+    { ...defaultProject, image: { src: "https://picsum.photos/seed/fs-port-3/1920/1080", alt: "Project 3" } }
+  ],
+  hoverLinks: [],
+  styles: {
+    animation: "sticky-stack"
+  }
+};
+export {
+  FullscreenPortfolio,
+  FullscreenPortfolioDefaults
+};

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

@@ -0,0 +1,104 @@
+import { FullscreenPortfolio, FullscreenPortfolioDefaults } from "./fullscreen-portfolio";
+import type { FullscreenPortfolioProps } from "./fullscreen-portfolio";
+export { FullscreenPortfolio, FullscreenPortfolioDefaults };
+export type { FullscreenPortfolioProps };
+declare const conf: {
+    fields: {
+        projects: {
+            type: string;
+            max: number;
+            getItemSummary: (item: {
+                title?: string;
+            }, index?: number) => string;
+            arrayFields: {
+                title: {
+                    type: string;
+                };
+                description: {
+                    type: string;
+                };
+                image: {
+                    type: "object";
+                    objectFields: {
+                        src: import("@puckeditor/core").Field<string>;
+                        alt: {
+                            type: "text";
+                        };
+                    };
+                };
+                button: {
+                    readonly type: "object";
+                    readonly objectFields: {
+                        readonly label: {
+                            readonly type: "text";
+                        };
+                        readonly action: {
+                            type: "custom";
+                            label: string;
+                            render: typeof import("../../../puck-core").ActionField;
+                        };
+                        readonly variant: {
+                            readonly type: "select";
+                            readonly options: readonly [{
+                                readonly label: "primary";
+                                readonly value: "default";
+                            }, {
+                                readonly label: "secondary";
+                                readonly value: "secondary";
+                            }, {
+                                readonly label: "outline";
+                                readonly value: "outline";
+                            }, {
+                                readonly label: "ghost";
+                                readonly value: "ghost";
+                            }, {
+                                readonly label: "link";
+                                readonly value: "link";
+                            }, {
+                                readonly label: "destructive";
+                                readonly value: "destructive";
+                            }];
+                        };
+                        readonly size: {
+                            readonly type: "select";
+                            readonly options: readonly [{
+                                readonly label: "default";
+                                readonly value: "default";
+                            }, {
+                                readonly label: "sm";
+                                readonly value: "sm";
+                            }, {
+                                readonly label: "lg";
+                                readonly value: "lg";
+                            }, {
+                                readonly label: "icon";
+                                readonly value: "icon";
+                            }];
+                        };
+                        readonly icon: {
+                            type: "custom";
+                            render: typeof import("../../../puck-core/fields/icon-picker-field").IconPickerField;
+                        };
+                    };
+                };
+            };
+        };
+        styles: {
+            type: string;
+            label: string;
+            objectFields: {
+                animation: {
+                    type: "radio";
+                    label: string;
+                    options: {
+                        label: string;
+                        value: string;
+                    }[];
+                };
+            };
+        };
+    };
+    defaultProps: import("../props").GallerySectionBaseProps;
+    render: (props: FullscreenPortfolioProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default conf;

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

@@ -0,0 +1,39 @@
+import { FullscreenPortfolio, FullscreenPortfolioDefaults } from "./fullscreen-portfolio.js";
+import { buttonField } from "../../../puck-core/core/props/interactive.js";
+import { imageField } from "../../../puck-core/core/props/media.js";
+const conf = {
+  fields: {
+    projects: {
+      type: "array",
+      max: 6,
+      getItemSummary: (item, index = 0) => item.title || `Project ${index + 1}`,
+      arrayFields: {
+        title: { type: "text" },
+        description: { type: "textarea" },
+        image: imageField,
+        button: buttonField
+      }
+    },
+    styles: {
+      type: "object",
+      label: "Styles",
+      objectFields: {
+        animation: {
+          type: "radio",
+          label: "Animation",
+          options: [
+            { label: "Sticky Stack", value: "sticky-stack" },
+            { label: "Scroll Fade", value: "scroll-fade" }
+          ]
+        }
+      }
+    }
+  },
+  defaultProps: FullscreenPortfolioDefaults,
+  render: FullscreenPortfolio
+};
+export {
+  FullscreenPortfolio,
+  FullscreenPortfolioDefaults,
+  conf as default
+};

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

@@ -0,0 +1,4 @@
+import type { GalleryComponentProps, GallerySectionBaseProps } from "../props";
+export type ImageCarouselProps = GalleryComponentProps;
+export declare const ImageCarousel: (props: ImageCarouselProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ImageCarouselDefaults: GallerySectionBaseProps;

package/dist/components/puck-block/gallery-sections/image-carousel/image-carousel.js

@@ -0,0 +1,173 @@
+"use client";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext } from "../../../shadcn/carousel.js";
+import { CompoundImage } from "../../../puck-base/image.js";
+import { cn } from "../../../../utils/css-utils.js";
+const ImageCarousel = (props) => {
+  const { heading, description, images, styles } = {
+    ...ImageCarouselDefaults,
+    ...props
+  };
+  const {
+    fullscreen = false,
+    headerAlign = "center",
+    navStyle = "centerDots",
+    slidesPerView = "1",
+    slideOverflow = "hidden",
+    activeOpacity = false
+  } = styles ?? {};
+  const isFullscreen = fullscreen === true || String(fullscreen) === "true";
+  const isHeaderCenter = headerAlign === "center";
+  const isBottomBar = navStyle === "bottomBar";
+  const hasActiveOpacity = activeOpacity === true || String(activeOpacity) === "true";
+  const [api, setApi] = useState();
+  const [current, setCurrent] = useState(0);
+  useEffect(() => {
+    if (!api) return;
+    setCurrent(api.selectedScrollSnap() + 1);
+    api.on("select", () => {
+      setCurrent(api.selectedScrollSnap() + 1);
+    });
+  }, [api]);
+  const getBasisClass = () => {
+    switch (slidesPerView) {
+      case "1":
+        return "basis-full";
+      case "1-md2":
+        return "basis-full md:basis-1/2";
+      case "2-md3":
+        return "basis-1/2 md:basis-1/3";
+      case "2-md4":
+        return "basis-1/2 md:basis-1/4";
+      default:
+        return "basis-full";
+    }
+  };
+  return /* @__PURE__ */ jsxs("section", { id: "relume", className: cn({ "h-dvh": isFullscreen }), children: [
+    /* @__PURE__ */ jsx("div", { className: "px-[5%] py-16 md:py-24 lg:py-28", children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn("container", {
+          "text-center": isHeaderCenter,
+          "text-left": !isHeaderCenter
+        }),
+        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__ */ jsxs(
+      Carousel,
+      {
+        setApi,
+        opts: { loop: true, align: "start" },
+        className: cn({ "overflow-hidden": slideOverflow === "hidden" }),
+        children: [
+          /* @__PURE__ */ jsx(CarouselContent, { className: "ml-0", children: images.map((image, index) => /* @__PURE__ */ jsx(
+            CarouselItem,
+            {
+              className: cn(
+                "pl-0",
+                getBasisClass(),
+                {
+                  "relative h-dvh": isFullscreen,
+                  "pr-6 md:pr-8": slidesPerView !== "1"
+                }
+              ),
+              children: hasActiveOpacity ? /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn("size-full transition-opacity duration-300", {
+                    "opacity-100": current === index + 1,
+                    "opacity-40": current !== index + 1
+                  }),
+                  children: /* @__PURE__ */ jsx(
+                    CompoundImage,
+                    {
+                      src: image.src,
+                      alt: image.alt,
+                      className: cn("size-full object-cover", {
+                        "absolute inset-0": isFullscreen
+                      })
+                    }
+                  )
+                }
+              ) : /* @__PURE__ */ jsx(
+                CompoundImage,
+                {
+                  src: image.src,
+                  alt: image.alt,
+                  className: cn("size-full object-cover", {
+                    "absolute inset-0": isFullscreen
+                  })
+                }
+              )
+            },
+            index
+          )) }),
+          isFullscreen && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(CarouselPrevious, { className: "-mt-8 ml-8 hidden lg:flex" }),
+            /* @__PURE__ */ jsx(CarouselNext, { className: "-mt-8 mr-8 hidden lg:flex" })
+          ] }),
+          isBottomBar ? /* @__PURE__ */ jsxs("div", { className: "container mt-8 flex items-center justify-between px-[5%]", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex gap-2 md:gap-4", children: [
+              /* @__PURE__ */ jsx(CarouselPrevious, { className: "static left-0 top-0 size-12 -translate-y-0" }),
+              /* @__PURE__ */ jsx(CarouselNext, { className: "static left-0 top-0 size-12 -translate-y-0" })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "flex items-center", children: images.map((_, index) => /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => api == null ? void 0 : api.scrollTo(index),
+                className: cn("mx-[3px] inline-block size-2 rounded-full", {
+                  "bg-black": current === index + 1,
+                  "bg-neutral-light": current !== index + 1
+                })
+              },
+              index
+            )) })
+          ] }) : /* @__PURE__ */ jsx("div", { className: "absolute bottom-8 left-1/2 -translate-x-1/2 transform", children: images.map((_, index) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => api == null ? void 0 : api.scrollTo(index),
+              className: cn("relative mx-[3px] inline-block size-2 rounded-full", {
+                "bg-white": isFullscreen && current === index + 1,
+                "bg-white/40": isFullscreen && current !== index + 1,
+                "bg-black": !isFullscreen && current === index + 1,
+                "bg-neutral-light": !isFullscreen && current !== index + 1
+              })
+            },
+            index
+          )) })
+        ]
+      }
+    )
+  ] });
+};
+const ImageCarouselDefaults = {
+  tagline: "",
+  heading: "Image Gallery",
+  description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+  button: { label: "View all" },
+  buttons: [],
+  images: [
+    { src: "https://picsum.photos/seed/carousel-1/1920/1080", alt: "Gallery image 1" },
+    { src: "https://picsum.photos/seed/carousel-2/1920/1080", alt: "Gallery image 2" },
+    { src: "https://picsum.photos/seed/carousel-3/1920/1080", alt: "Gallery image 3" }
+  ],
+  projects: [],
+  hoverLinks: [],
+  styles: {
+    fullscreen: false,
+    headerAlign: "center",
+    navStyle: "centerDots",
+    slidesPerView: "1",
+    slideOverflow: "hidden",
+    activeOpacity: false
+  }
+};
+export {
+  ImageCarousel,
+  ImageCarouselDefaults
+};

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

@@ -0,0 +1,101 @@
+import { ImageCarousel, ImageCarouselDefaults } from "./image-carousel";
+import type { ImageCarouselProps } from "./image-carousel";
+export { ImageCarousel, ImageCarouselDefaults };
+export type { ImageCarouselProps };
+declare const conf: {
+    fields: {
+        heading: {
+            readonly type: "text";
+            readonly contentEditable: true;
+        };
+        description: {
+            readonly type: "textarea";
+            readonly contentEditable: true;
+        };
+        images: {
+            readonly type: "array";
+            readonly max: 10;
+            readonly getItemSummary: (item: {
+                alt?: string;
+            }, index?: number) => string;
+            readonly arrayFields: {
+                readonly src: import("@puckeditor/core").Field<string>;
+                readonly alt: {
+                    type: "text";
+                };
+            };
+            readonly defaultItemProps: {
+                alt: string;
+                src: string;
+            };
+        };
+        styles: {
+            type: string;
+            label: string;
+            objectFields: {
+                fullscreen: {
+                    readonly type: "radio";
+                    readonly label: "Fullscreen";
+                    readonly options: readonly [{
+                        readonly label: "Yes";
+                        readonly value: "true";
+                    }, {
+                        readonly label: "No";
+                        readonly value: "false";
+                    }];
+                };
+                headerAlign: {
+                    readonly type: "radio";
+                    readonly label: "Header Align";
+                    readonly options: readonly [{
+                        readonly label: "Center";
+                        readonly value: "center";
+                    }, {
+                        readonly label: "Left";
+                        readonly value: "left";
+                    }];
+                };
+                navStyle: {
+                    readonly type: "radio";
+                    readonly label: "Nav Style";
+                    readonly options: readonly [{
+                        readonly label: "Center Dots";
+                        readonly value: "centerDots";
+                    }, {
+                        readonly label: "Bottom Bar";
+                        readonly value: "bottomBar";
+                    }];
+                };
+                slidesPerView: {
+                    readonly type: "text";
+                    readonly label: "Slides Per View";
+                };
+                slideOverflow: {
+                    readonly type: "radio";
+                    readonly label: "Slide Overflow";
+                    readonly options: readonly [{
+                        readonly label: "Hidden";
+                        readonly value: "hidden";
+                    }, {
+                        readonly label: "Visible";
+                        readonly value: "visible";
+                    }];
+                };
+                activeOpacity: {
+                    readonly type: "radio";
+                    readonly label: "Active Opacity";
+                    readonly options: readonly [{
+                        readonly label: "Yes";
+                        readonly value: "true";
+                    }, {
+                        readonly label: "No";
+                        readonly value: "false";
+                    }];
+                };
+            };
+        };
+    };
+    defaultProps: import("../props").GallerySectionBaseProps;
+    render: (props: ImageCarouselProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default conf;

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

@@ -0,0 +1,30 @@
+import { ImageCarousel, ImageCarouselDefaults } from "./image-carousel.js";
+import { descriptionField, headingField } from "../../../puck-core/core/props/content.js";
+import { imagesField } from "../../../puck-core/core/props/media.js";
+import { galleryStyleFields } from "../props.js";
+const conf = {
+  fields: {
+    heading: headingField,
+    description: descriptionField,
+    images: imagesField,
+    styles: {
+      type: "object",
+      label: "Styles",
+      objectFields: {
+        fullscreen: galleryStyleFields.fullscreen,
+        headerAlign: galleryStyleFields.headerAlign,
+        navStyle: galleryStyleFields.navStyle,
+        slidesPerView: galleryStyleFields.slidesPerView,
+        slideOverflow: galleryStyleFields.slideOverflow,
+        activeOpacity: galleryStyleFields.activeOpacity
+      }
+    }
+  },
+  defaultProps: ImageCarouselDefaults,
+  render: ImageCarousel
+};
+export {
+  ImageCarousel,
+  ImageCarouselDefaults,
+  conf as default
+};

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

@@ -0,0 +1,11 @@
+export { default as AsymmetricGridConf } from "./asymmetric-grid";
+export { default as FullscreenPortfolioConf } from "./fullscreen-portfolio";
+export { default as ImageCarouselConf } from "./image-carousel";
+export { default as InteractivePortfolioConf } from "./interactive-portfolio";
+export { default as MasonryGridConf } from "./masonry-grid";
+export { default as PortfolioCardsConf } from "./portfolio-cards";
+export { default as PortfolioDividerConf } from "./portfolio-divider";
+export { default as ScrollParallaxConf } from "./scroll-parallax";
+export { default as ScrollParallaxPortfolioConf } from "./scroll-parallax-portfolio";
+export { default as SplitCarouselConf } from "./split-carousel";
+export { default as StaticGridConf } from "./static-grid";

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

@@ -0,0 +1,61 @@
+import { InteractivePortfolio, InteractivePortfolioDefaults } from "./interactive-portfolio";
+import type { InteractivePortfolioProps } from "./interactive-portfolio";
+export { InteractivePortfolio, InteractivePortfolioDefaults };
+export type { InteractivePortfolioProps };
+declare const conf: {
+    fields: {
+        tagline: {
+            type: string;
+        };
+        hoverLinks: {
+            type: string;
+            max: number;
+            getItemSummary: (item: {
+                heading?: string;
+            }, index?: number) => string;
+            arrayFields: {
+                url: {
+                    type: string;
+                };
+                heading: {
+                    type: string;
+                };
+                tag: {
+                    type: string;
+                };
+                image: {
+                    type: "object";
+                    objectFields: {
+                        src: import("@puckeditor/core").Field<string>;
+                        alt: {
+                            type: "text";
+                        };
+                    };
+                };
+            };
+        };
+        styles: {
+            type: string;
+            label: string;
+            objectFields: {
+                listLayout: {
+                    readonly type: "select";
+                    readonly label: "List Layout";
+                    readonly options: readonly [{
+                        readonly label: "Center";
+                        readonly value: "center";
+                    }, {
+                        readonly label: "Left Aligned";
+                        readonly value: "left-aligned";
+                    }, {
+                        readonly label: "Left + Sticky Image";
+                        readonly value: "left-with-sticky-image";
+                    }];
+                };
+            };
+        };
+    };
+    defaultProps: import("../props").GallerySectionBaseProps;
+    render: (props: InteractivePortfolioProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default conf;