dune-react 0.0.19 → 0.0.21

package/dist/components/puck-block/hero-sections/sticky-expand-hero/index.d.ts

@@ -0,0 +1,107 @@
+import { StickyExpandHero, StickyExpandHeroDefaults } from "./component";
+import type { StickyExpandHeroProps } from "./component";
+export { StickyExpandHero, StickyExpandHeroDefaults };
+export type { StickyExpandHeroProps };
+declare const conf: {
+    fields: {
+        heading: {
+            readonly type: "text";
+            readonly contentEditable: true;
+        };
+        description: {
+            readonly type: "textarea";
+            readonly contentEditable: true;
+        };
+        buttons: {
+            readonly type: "array";
+            readonly max: 3;
+            readonly getItemSummary: (item: {
+                label?: string;
+            }, index?: number) => string;
+            readonly arrayFields: {
+                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;
+                };
+            };
+            readonly defaultItemProps: {
+                readonly label: "Button";
+                readonly action: {
+                    readonly type: "page";
+                    readonly pageUrl: "";
+                    readonly externalUrl: "";
+                    readonly openInNewTab: "false";
+                    readonly email: "";
+                    readonly subject: "";
+                    readonly phone: "";
+                    readonly sectionId: "";
+                    readonly downloadUrl: "";
+                };
+                readonly variant: "default";
+                readonly size: "default";
+                readonly icon: "none";
+            };
+            readonly ai: {
+                readonly instructions: "Buttons must use the same size";
+            };
+        };
+        image: {
+            type: "object";
+            objectFields: {
+                src: import("@puckeditor/core").Field<string>;
+                alt: {
+                    type: "text";
+                };
+            };
+        };
+    };
+    defaultProps: StickyExpandHeroProps;
+    render: (props: StickyExpandHeroProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default conf;

package/dist/components/puck-block/hero-sections/sticky-expand-hero/index.js

@@ -0,0 +1,19 @@
+import { StickyExpandHero, StickyExpandHeroDefaults } from "./component.js";
+import { descriptionField, headingField } from "../../../puck-core/core/props/content.js";
+import { buttonsField } from "../../../puck-core/core/props/interactive.js";
+import { imageField } from "../../../puck-core/core/props/media.js";
+const conf = {
+  fields: {
+    heading: headingField,
+    description: descriptionField,
+    buttons: buttonsField,
+    image: imageField
+  },
+  defaultProps: StickyExpandHeroDefaults,
+  render: StickyExpandHero
+};
+export {
+  StickyExpandHero,
+  StickyExpandHeroDefaults,
+  conf as default
+};

package/dist/components/puck-block/hero-sections/sticky-video-hero/component.d.ts

@@ -0,0 +1,8 @@
+import type { BaseImage, HeroComponentProps } from "../props";
+type StickyVideoHeroExtra = {
+    videoImage: BaseImage;
+};
+export type StickyVideoHeroProps = HeroComponentProps<StickyVideoHeroExtra>;
+export declare const StickyVideoHero: (props: StickyVideoHeroProps) => import("react/jsx-runtime").JSX.Element;
+export declare const StickyVideoHeroDefaults: StickyVideoHeroProps;
+export {};

package/dist/components/puck-block/hero-sections/sticky-video-hero/component.js

@@ -0,0 +1,222 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useRef } from "react";
+import { Dialog, DialogTrigger, DialogContent } from "../../../shadcn/dialog.js";
+import { CompoundButton } from "../../../puck-base/button.js";
+import { CompoundImage } from "../../../puck-base/image.js";
+import { useScroll, useTransform, motion } from "framer-motion";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
+import { useScrollContainer } from "../../../../hooks/use-scroll-container.js";
+import { cn } from "../../../../utils/css-utils.js";
+import { FaCirclePlay } from "../../../../node_modules/.pnpm/react-icons@5.6.0_react@19.2.4/node_modules/react-icons/fa6/index.js";
+import { CgSpinner } from "../../../../node_modules/.pnpm/react-icons@5.6.0_react@19.2.4/node_modules/react-icons/cg/index.js";
+const StickyVideoHero = (props) => {
+  const {
+    heading = "",
+    description = "",
+    buttons = [],
+    video = "",
+    images = [{ src: "", alt: "" }],
+    videoImage = { src: "", alt: "" },
+    styles
+  } = {
+    ...StickyVideoHeroDefaults,
+    ...props
+  };
+  const image = images == null ? void 0 : images[0];
+  const { className: sectionClassName, style: sectionStyle, css, variant = "centered" } = styles ?? {};
+  if (variant === "parallax-bg") {
+    return /* @__PURE__ */ jsx(
+      ParallaxBgVariant,
+      {
+        heading,
+        description,
+        buttons,
+        video,
+        image,
+        videoImage,
+        sectionClassName,
+        sectionStyle,
+        css
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    CenteredVariant,
+    {
+      heading,
+      description,
+      buttons,
+      video,
+      image,
+      sectionClassName,
+      sectionStyle,
+      css
+    }
+  );
+};
+const CenteredVariant = ({
+  heading,
+  description,
+  buttons,
+  video,
+  image,
+  sectionClassName,
+  sectionStyle,
+  css
+}) => {
+  const [isIframeLoaded, setIsIframeLoaded] = useState(false);
+  const sectionRef = useRef(null);
+  const [scrollContainerRef] = useScrollContainer(sectionRef);
+  const halfViewportHeight = typeof window !== "undefined" ? window.innerHeight * 0.5 : 100;
+  const { scrollY } = useScroll(
+    scrollContainerRef.current ? { container: scrollContainerRef } : void 0
+  );
+  const contentMotion = {
+    scale: useTransform(scrollY, [0, halfViewportHeight], [1, 0.95]),
+    opacity: useTransform(scrollY, [0, halfViewportHeight], [1, 0])
+  };
+  return /* @__PURE__ */ jsx(SectionWrapper, { ref: sectionRef, className: cn("px-[5%]", sectionClassName), style: sectionStyle, css, children: /* @__PURE__ */ jsx("div", { className: "container", children: /* @__PURE__ */ jsxs("div", { className: "relative flex h-[300vh] flex-col", children: [
+    /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        className: "sticky top-0 z-0 mx-auto flex min-h-[80vh] max-w-lg items-center justify-center py-16 text-center md:py-24 lg:py-28",
+        style: contentMotion,
+        children: /* @__PURE__ */ jsxs("div", { className: "w-full max-w-xl text-center", children: [
+          /* @__PURE__ */ jsx("h1", { className: "mb-5 text-6xl font-bold md:mb-6 md:text-9xl lg:text-10xl", children: heading }),
+          /* @__PURE__ */ jsx("p", { className: "md:text-md", children: description }),
+          /* @__PURE__ */ jsx("div", { className: "mt-6 flex items-center justify-center gap-x-4 md:mt-8", children: buttons.map((button, index) => /* @__PURE__ */ jsx(CompoundButton, { label: button.label, variant: button.variant, size: button.size, action: button.action, icon: button.icon }, index)) })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "sticky top-0 z-10 flex h-screen flex-col justify-center lg:top-[10vh] lg:justify-start", children: /* @__PURE__ */ jsxs(Dialog, { children: [
+      /* @__PURE__ */ jsx(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsxs("button", { className: "relative flex w-full items-center justify-center", children: [
+        /* @__PURE__ */ jsx(
+          CompoundImage,
+          {
+            src: image.src,
+            alt: image.alt,
+            className: "h-[80vh] max-h-[25rem] w-full object-cover sm:max-h-[30rem] md:max-h-[40rem] lg:max-h-none"
+          }
+        ),
+        /* @__PURE__ */ jsx(FaCirclePlay, { className: "absolute z-20 size-16 text-white" }),
+        /* @__PURE__ */ jsx("span", { className: "absolute inset-0 z-10 bg-black/50" })
+      ] }) }),
+      /* @__PURE__ */ jsxs(DialogContent, { children: [
+        !isIframeLoaded && /* @__PURE__ */ jsx(CgSpinner, { className: "mx-auto size-16 animate-spin text-white" }),
+        /* @__PURE__ */ jsx(
+          "iframe",
+          {
+            className: cn("z-0 mx-auto aspect-video size-full md:w-[738px] lg:w-[940px]", {
+              visible: isIframeLoaded,
+              hidden: !isIframeLoaded
+            }),
+            src: video,
+            allow: "autoplay; encrypted-media; picture-in-picture",
+            allowFullScreen: true,
+            onLoad: () => setIsIframeLoaded(true)
+          }
+        )
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx("div", { className: "absolute inset-0 -z-10 mt-[100vh]" })
+  ] }) }) });
+};
+const ParallaxBgVariant = ({
+  heading,
+  description,
+  buttons,
+  video,
+  image,
+  videoImage,
+  sectionClassName,
+  sectionStyle,
+  css
+}) => {
+  const [isIframeLoaded, setIsIframeLoaded] = useState(false);
+  const sectionRef = useRef(null);
+  const [scrollContainerRef] = useScrollContainer(sectionRef);
+  const { scrollYProgress } = useScroll(
+    scrollContainerRef.current ? { container: scrollContainerRef } : void 0
+  );
+  const containerMotion = {
+    y: useTransform(scrollYProgress, [0, 0.4], ["0vh", "-5vh"]),
+    width: useTransform(scrollYProgress, [0, 0.4], ["90%", "100%"]),
+    height: useTransform(scrollYProgress, [0, 0.4], ["90vh", "100vh"])
+  };
+  const imageTranslate = {
+    y: useTransform(scrollYProgress, [0.4, 1], ["0%", "70%"])
+  };
+  const videoDialogTranslate = {
+    y: useTransform(scrollYProgress, [0.3, 0.4], ["0%", "200%"])
+  };
+  return /* @__PURE__ */ jsxs(SectionWrapper, { ref: sectionRef, className: cn("relative flex h-[150vh] flex-col items-center", sectionClassName), style: sectionStyle, css, children: [
+    /* @__PURE__ */ jsxs(
+      motion.div,
+      {
+        className: "sticky top-[5vh] z-10 mb-[-5vh] mt-[5vh] flex h-[90vh] w-[90%] flex-col items-start justify-center overflow-hidden",
+        style: containerMotion,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "px-[5%] py-8 md:py-12 lg:py-14", children: /* @__PURE__ */ jsxs("div", { className: "container relative z-10 max-w-md", children: [
+            /* @__PURE__ */ jsx("h1", { className: "mb-5 text-6xl font-bold text-text-alternative md:mb-6 md:text-9xl lg:text-10xl", children: heading }),
+            /* @__PURE__ */ jsx("p", { className: "text-text-alternative md:text-md", children: description }),
+            /* @__PURE__ */ jsx("div", { className: "mt-6 flex flex-wrap gap-4 md:mt-8", children: buttons.map((button, index) => /* @__PURE__ */ jsx(CompoundButton, { label: button.label, variant: button.variant, size: button.size, action: button.action, icon: button.icon }, index)) })
+          ] }) }),
+          /* @__PURE__ */ jsxs(motion.div, { className: "absolute inset-0 z-0", style: imageTranslate, children: [
+            /* @__PURE__ */ jsx(CompoundImage, { src: image.src, alt: image.alt, className: "size-full object-cover" }),
+            /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/50" })
+          ] }),
+          /* @__PURE__ */ jsxs(Dialog, { children: [
+            /* @__PURE__ */ jsx(DialogTrigger, { className: "hidden md:flex", asChild: true, children: /* @__PURE__ */ jsxs(
+              motion.button,
+              {
+                className: "absolute bottom-[5%] right-[5%] flex w-full items-center justify-center md:max-w-[14rem] lg:max-w-xxs",
+                style: videoDialogTranslate,
+                children: [
+                  /* @__PURE__ */ jsx(CompoundImage, { src: videoImage.src, alt: videoImage.alt, className: "size-full object-cover" }),
+                  /* @__PURE__ */ jsx(FaCirclePlay, { className: "absolute z-20 size-16 text-white" })
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsxs(DialogContent, { children: [
+              !isIframeLoaded && /* @__PURE__ */ jsx(CgSpinner, { className: "mx-auto size-16 animate-spin text-white" }),
+              /* @__PURE__ */ jsx(
+                "iframe",
+                {
+                  className: cn("z-0 mx-auto aspect-video size-full md:w-[738px] lg:w-[940px]", {
+                    visible: isIframeLoaded,
+                    hidden: !isIframeLoaded
+                  }),
+                  src: video,
+                  allow: "autoplay; encrypted-media; picture-in-picture",
+                  allowFullScreen: true,
+                  onLoad: () => setIsIframeLoaded(true)
+                }
+              )
+            ] })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "absolute inset-0 -z-10 mt-[100vh]" })
+  ] });
+};
+const StickyVideoHeroDefaults = {
+  heading: "Medium length hero heading goes here",
+  description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.",
+  buttons: [{ label: "Button" }, { label: "Button", variant: "secondary" }],
+  video: "https://www.youtube.com/embed/8DKLYsikxTs?si=Ch9W0KrDWWUiCMMW",
+  images: [{
+    src: "https://picsum.photos/seed/hero-video/1200/800",
+    alt: "Relume placeholder image"
+  }],
+  videoImage: {
+    src: "https://picsum.photos/seed/hero-video/1200/800",
+    alt: "Relume placeholder image"
+  },
+  styles: { variant: "centered" }
+};
+export {
+  StickyVideoHero,
+  StickyVideoHeroDefaults
+};

package/dist/components/puck-block/hero-sections/sticky-video-hero/index.d.ts

@@ -0,0 +1,166 @@
+import { StickyVideoHero, StickyVideoHeroDefaults } from "./component";
+import type { StickyVideoHeroProps } from "./component";
+export { StickyVideoHero, StickyVideoHeroDefaults };
+export type { StickyVideoHeroProps };
+declare const conf: {
+    fields: {
+        heading: {
+            readonly type: "text";
+            readonly contentEditable: true;
+        };
+        description: {
+            readonly type: "textarea";
+            readonly contentEditable: true;
+        };
+        buttons: {
+            readonly type: "array";
+            readonly max: 3;
+            readonly getItemSummary: (item: {
+                label?: string;
+            }, index?: number) => string;
+            readonly arrayFields: {
+                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;
+                };
+            };
+            readonly defaultItemProps: {
+                readonly label: "Button";
+                readonly action: {
+                    readonly type: "page";
+                    readonly pageUrl: "";
+                    readonly externalUrl: "";
+                    readonly openInNewTab: "false";
+                    readonly email: "";
+                    readonly subject: "";
+                    readonly phone: "";
+                    readonly sectionId: "";
+                    readonly downloadUrl: "";
+                };
+                readonly variant: "default";
+                readonly size: "default";
+                readonly icon: "none";
+            };
+            readonly ai: {
+                readonly instructions: "Buttons must use the same size";
+            };
+        };
+        video: {
+            type: string;
+        };
+        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;
+            };
+        };
+        videoImage: {
+            type: "object";
+            objectFields: {
+                src: import("@puckeditor/core").Field<string>;
+                alt: {
+                    type: "text";
+                };
+            };
+        };
+        styles: {
+            type: string;
+            label: string;
+            objectFields: {
+                className: {
+                    readonly type: "text";
+                    readonly label: "Class Name";
+                    readonly ai: {
+                        readonly instructions: "Additional Tailwind CSS classes to apply to the section wrapper.";
+                    };
+                };
+                style: {
+                    readonly type: "object";
+                    readonly label: "Style";
+                    readonly objectFields: {};
+                    readonly ai: {
+                        readonly instructions: "Inline CSSProperties object for the section wrapper, e.g. { backgroundColor: 'red', minHeight: '100vh' }.";
+                    };
+                };
+                css: {
+                    readonly type: "textarea";
+                    readonly label: "Custom CSS";
+                    readonly ai: {
+                        readonly instructions: "Custom CSS rules. Use & as a placeholder for the section selector.";
+                    };
+                };
+                variant: {
+                    readonly type: "radio";
+                    readonly label: "Variant";
+                    readonly options: readonly [{
+                        readonly label: "Centered";
+                        readonly value: "centered";
+                    }, {
+                        readonly label: "Parallax BG";
+                        readonly value: "parallax-bg";
+                    }];
+                };
+            };
+        };
+    };
+    defaultProps: StickyVideoHeroProps;
+    render: (props: StickyVideoHeroProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default conf;

package/dist/components/puck-block/hero-sections/sticky-video-hero/index.js

@@ -0,0 +1,31 @@
+import { StickyVideoHero, StickyVideoHeroDefaults } from "./component.js";
+import { descriptionField, headingField } from "../../../puck-core/core/props/content.js";
+import { buttonsField } from "../../../puck-core/core/props/interactive.js";
+import { imageField, imagesField } from "../../../puck-core/core/props/media.js";
+import { heroStyleFields } from "../props.js";
+import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
+const conf = {
+  fields: {
+    heading: headingField,
+    description: descriptionField,
+    buttons: buttonsField,
+    video: { type: "text" },
+    images: imagesField,
+    videoImage: imageField,
+    styles: {
+      type: "object",
+      label: "Styles",
+      objectFields: {
+        variant: heroStyleFields.variant,
+        ...sectionWrapperFields
+      }
+    }
+  },
+  defaultProps: StickyVideoHeroDefaults,
+  render: StickyVideoHero
+};
+export {
+  StickyVideoHero,
+  StickyVideoHeroDefaults,
+  conf as default
+};

package/dist/components/puck-block/hero-sections/tab-hero/component.d.ts

@@ -0,0 +1,24 @@
+import type { BaseImage, BaseButton, HeroComponentProps } from "../props";
+type TabContent = {
+    value: string;
+    heading: string;
+    description: string;
+    buttons: BaseButton[];
+    image: BaseImage;
+};
+type TabTrigger = {
+    value: string;
+    text: string;
+};
+type Tab = {
+    trigger: TabTrigger[];
+    content: TabContent[];
+};
+type TabHeroExtra = {
+    defaultTabValue: string;
+    tabs: Tab;
+};
+export type TabHeroProps = HeroComponentProps<TabHeroExtra>;
+export declare const TabHero: (props: TabHeroProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TabHeroDefaults: TabHeroProps;
+export {};