dune-react 0.0.19 → 0.0.20

package/dist/components/puck-block/hero-sections/mouse-track-hero/component.js

@@ -0,0 +1,144 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useMediaQuery } from "../../../../hooks/use-media-query.js";
+import { CompoundButton } from "../../../puck-base/button.js";
+import { CompoundImage } from "../../../puck-base/image.js";
+import { motion, useMotionValue, useSpring, useTransform } from "framer-motion";
+import { useCallback } from "react";
+const imagePositions = {
+  group1: [
+    "bottom-[5%] left-[-8%] z-10 max-w-[18%] sm:bottom-[10%] lg:bottom-auto",
+    "left-[30%] top-[8%] z-10 max-w-[18%] sm:top-[10%] sm:max-w-[12%] lg:left-[40%] lg:top-[5%]",
+    "bottom-[-5%] right-[-5%] z-10 max-w-[25%] lg:max-w-[18%]",
+    "bottom-[-2%] left-[20%] z-10 max-w-[18%] sm:bottom-[-5%] sm:max-w-[16%] lg:bottom-[-10%]"
+  ],
+  group2: [
+    "left-[2%] top-[-5%] max-w-[30%] sm:left-[5%] sm:max-w-[18%] lg:left-[10%] lg:top-[-10%]",
+    "right-[20%] top-[-2%] max-w-[25%] sm:top-[5%] sm:max-w-[16%] lg:right-[20%] lg:top-[-10%]",
+    "right-[-5%] top-[10%] max-w-[20%] sm:max-w-[15%] lg:top-[25%]",
+    "bottom-[5%] right-[32%] max-w-[18%] sm:right-[30%] sm:max-w-[15%] lg:bottom-[5%] lg:max-w-[12%]"
+  ]
+};
+const useMouseMove = () => {
+  const mouseX = useMotionValue(0.55);
+  const mouseY = useMotionValue(0.55);
+  const smoothMouseX = useSpring(mouseX, { damping: 50, stiffness: 500 });
+  const smoothMouseY = useSpring(mouseY, { damping: 50, stiffness: 500 });
+  const handleMouseMove = useCallback(
+    (event) => {
+      const { clientX, clientY } = event;
+      const { left, top, width, height } = event.currentTarget.getBoundingClientRect();
+      const x = (clientX - left) / width;
+      const y = (clientY - top) / height;
+      mouseX.set(x);
+      mouseY.set(y);
+    },
+    [mouseX, mouseY]
+  );
+  return { smoothMouseX, smoothMouseY, handleMouseMove };
+};
+const getTransformStyles = (smoothMouseX, smoothMouseY, xRange, yRange) => {
+  return {
+    x: useTransform(smoothMouseX, [0, 1], xRange),
+    y: useTransform(smoothMouseY, [0, 1], yRange)
+  };
+};
+const MouseTrackHero = (props) => {
+  const { heading, description, buttons = [], group1Images = [], group2Images = [] } = {
+    ...MouseTrackHeroDefaults,
+    ...props
+  };
+  const { smoothMouseX, smoothMouseY, handleMouseMove } = useMouseMove();
+  const isMobile = useMediaQuery("(max-width: 991px)");
+  const Animate = isMobile ? "div" : motion.div;
+  const canvasTransform = getTransformStyles(
+    smoothMouseX,
+    smoothMouseY,
+    ["10vw", "-5vw"],
+    ["10vh", "-5vh"]
+  );
+  const group1Transform = getTransformStyles(
+    smoothMouseX,
+    smoothMouseY,
+    ["8%", "-8%"],
+    ["8%", "-8%"]
+  );
+  const group2Transform = getTransformStyles(
+    smoothMouseX,
+    smoothMouseY,
+    ["2%", "-2%"],
+    ["2%", "-2%"]
+  );
+  const renderImages = (images, positions, transformStyles) => /* @__PURE__ */ jsx(
+    Animate,
+    {
+      className: "absolute inset-0 flex origin-bottom items-center justify-center",
+      style: transformStyles,
+      children: images.map((image, index) => /* @__PURE__ */ jsx("div", { className: `absolute w-full ${positions[index]}`, children: /* @__PURE__ */ jsx(CompoundImage, { src: image.src, alt: image.alt, className: "size-full" }) }, index))
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      id: "relume",
+      className: "relative flex h-svh items-center justify-center overflow-hidden lg:h-screen",
+      onMouseMove: handleMouseMove,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "px-[5%] py-16 md:py-24 lg:py-28", children: /* @__PURE__ */ jsx("div", { className: "container max-w-lg", children: /* @__PURE__ */ jsxs("div", { className: "relative z-10 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-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(Animate, { className: "absolute size-full", style: canvasTransform, children: [
+          renderImages(group1Images, imagePositions.group1, group1Transform),
+          renderImages(group2Images, imagePositions.group2, group2Transform)
+        ] })
+      ]
+    }
+  );
+};
+const MouseTrackHeroDefaults = {
+  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" }],
+  group1Images: [
+    {
+      src: "https://picsum.photos/seed/hero-square/1200/1200",
+      alt: "Relume placeholder image 1"
+    },
+    {
+      src: "https://picsum.photos/seed/hero-square/1200/1200",
+      alt: "Relume placeholder image 2"
+    },
+    {
+      src: "https://picsum.photos/seed/hero-square/1200/1200",
+      alt: "Relume placeholder image 3"
+    },
+    {
+      src: "https://picsum.photos/seed/hero-square/1200/1200",
+      alt: "Relume placeholder image 4"
+    }
+  ],
+  group2Images: [
+    {
+      src: "https://picsum.photos/seed/hero-landscape/1200/800",
+      alt: "Relume placeholder image 5"
+    },
+    {
+      src: "https://picsum.photos/seed/hero-square/1200/1200",
+      alt: "Relume placeholder image 6"
+    },
+    {
+      src: "https://picsum.photos/seed/hero-landscape/1200/800",
+      alt: "Relume placeholder image 7"
+    },
+    {
+      src: "https://picsum.photos/seed/hero-landscape/1200/800",
+      alt: "Relume placeholder image 8"
+    }
+  ]
+};
+export {
+  MouseTrackHero,
+  MouseTrackHeroDefaults
+};

package/dist/components/puck-block/hero-sections/mouse-track-hero/index.d.ts

@@ -0,0 +1,132 @@
+import { MouseTrackHero, MouseTrackHeroDefaults } from "./component";
+import type { MouseTrackHeroProps } from "./component";
+export { MouseTrackHero, MouseTrackHeroDefaults };
+export type { MouseTrackHeroProps };
+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";
+            };
+        };
+        group1Images: {
+            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;
+            };
+        };
+        group2Images: {
+            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;
+            };
+        };
+    };
+    defaultProps: MouseTrackHeroProps;
+    render: (props: MouseTrackHeroProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default conf;

package/dist/components/puck-block/hero-sections/mouse-track-hero/index.js

@@ -0,0 +1,20 @@
+import { MouseTrackHero, MouseTrackHeroDefaults } from "./component.js";
+import { descriptionField, headingField } from "../../../puck-core/core/props/content.js";
+import { buttonsField } from "../../../puck-core/core/props/interactive.js";
+import { imagesField } from "../../../puck-core/core/props/media.js";
+const conf = {
+  fields: {
+    heading: headingField,
+    description: descriptionField,
+    buttons: buttonsField,
+    group1Images: imagesField,
+    group2Images: imagesField
+  },
+  defaultProps: MouseTrackHeroDefaults,
+  render: MouseTrackHero
+};
+export {
+  MouseTrackHero,
+  MouseTrackHeroDefaults,
+  conf as default
+};

package/dist/components/puck-block/hero-sections/multi-image-grid-hero/index.d.ts

@@ -0,0 +1,133 @@
+import { MultiImageGridHero, MultiImageGridHeroDefaults } from "./multi-image-grid-hero";
+import type { MultiImageGridHeroProps } from "./multi-image-grid-hero";
+export { MultiImageGridHero, MultiImageGridHeroDefaults };
+export type { MultiImageGridHeroProps };
+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";
+            };
+        };
+        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: {
+                textLayout: {
+                    type: "select";
+                    label: string;
+                    options: {
+                        label: string;
+                        value: string;
+                    }[];
+                };
+                imageGridRatio: {
+                    readonly type: "text";
+                    readonly label: "Image Grid Ratio";
+                };
+            };
+        };
+    };
+    defaultProps: MultiImageGridHeroProps;
+    render: (props: MultiImageGridHeroProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default conf;

package/dist/components/puck-block/hero-sections/multi-image-grid-hero/index.js

@@ -0,0 +1,36 @@
+import { MultiImageGridHero, MultiImageGridHeroDefaults } from "./multi-image-grid-hero.js";
+import { descriptionField, headingField } from "../../../puck-core/core/props/content.js";
+import { buttonsField } from "../../../puck-core/core/props/interactive.js";
+import { imagesField } from "../../../puck-core/core/props/media.js";
+import { heroStyleFields } from "../props.js";
+const conf = {
+  fields: {
+    heading: headingField,
+    description: descriptionField,
+    buttons: buttonsField,
+    images: imagesField,
+    styles: {
+      type: "object",
+      label: "Styles",
+      objectFields: {
+        textLayout: {
+          type: "select",
+          label: "Text Layout",
+          options: [
+            { label: "Two Column Top", value: "two-column-top" },
+            { label: "Left Block", value: "left-block" },
+            { label: "Centered", value: "centered" }
+          ]
+        },
+        imageGridRatio: heroStyleFields.imageGridRatio
+      }
+    }
+  },
+  defaultProps: MultiImageGridHeroDefaults,
+  render: MultiImageGridHero
+};
+export {
+  MultiImageGridHero,
+  MultiImageGridHeroDefaults,
+  conf as default
+};

package/dist/components/puck-block/hero-sections/multi-image-grid-hero/multi-image-grid-hero.d.ts

@@ -0,0 +1,4 @@
+import type { HeroComponentProps } from "../props";
+export type MultiImageGridHeroProps = HeroComponentProps;
+export declare const MultiImageGridHero: (props: MultiImageGridHeroProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MultiImageGridHeroDefaults: MultiImageGridHeroProps;

package/dist/components/puck-block/hero-sections/multi-image-grid-hero/multi-image-grid-hero.js

@@ -0,0 +1,84 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CompoundButton } from "../../../puck-base/button.js";
+import { CompoundImage } from "../../../puck-base/image.js";
+const MultiImageGridHero = (props) => {
+  const { heading, description, buttons, images, styles: rawStyles } = {
+    ...MultiImageGridHeroDefaults,
+    ...props
+  };
+  const { textLayout, imageGridRatio } = rawStyles ?? {};
+  const imageAspectRatios = ["aspect-[3/2]", "aspect-[2/3]", "aspect-square", "aspect-[3/4]"];
+  const imageMarginTops = ["mt-[10%]", "", "mt-[70%]", "mt-[15%]"];
+  const renderButtons = () => /* @__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)) });
+  const renderImages = () => {
+    const gridStyle = { gridTemplateColumns: (imageGridRatio ?? "").replace(/_/g, " ") };
+    return /* @__PURE__ */ jsx("div", { className: "grid items-start gap-6 sm:gap-8 md:gap-16", style: gridStyle, children: images.map((image, index) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `w-full ${imageMarginTops[index % imageMarginTops.length] || ""}`,
+        children: /* @__PURE__ */ jsx(
+          CompoundImage,
+          {
+            className: `${imageAspectRatios[index % imageAspectRatios.length]} size-full object-cover`,
+            src: image.src,
+            alt: image.alt
+          }
+        )
+      },
+      index
+    )) });
+  };
+  if (textLayout === "centered") {
+    return /* @__PURE__ */ jsx("section", { id: "relume", className: "px-[5%] py-16 md:py-24 lg:py-28", children: /* @__PURE__ */ jsxs("div", { className: "container", children: [
+      /* @__PURE__ */ jsx("div", { className: "rb-12 mb-12 flex flex-col items-center text-center md:mb-18 lg:mb-20", children: /* @__PURE__ */ jsxs("div", { className: "w-full max-w-lg", 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)) })
+      ] }) }),
+      renderImages()
+    ] }) });
+  }
+  if (textLayout === "left-block") {
+    return /* @__PURE__ */ jsx("section", { id: "relume", className: "px-[5%] py-16 md:py-24 lg:py-28", children: /* @__PURE__ */ jsxs("div", { className: "container", children: [
+      /* @__PURE__ */ jsx("div", { className: "ml-[5%]", children: /* @__PURE__ */ jsxs("div", { className: "mb-12 w-full max-w-lg md:mb-18 lg:mb-20", children: [
+        /* @__PURE__ */ jsx("h2", { 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 }),
+        renderButtons()
+      ] }) }),
+      renderImages()
+    ] }) });
+  }
+  return /* @__PURE__ */ jsx("section", { id: "relume", className: "px-[5%] py-16 md:py-24 lg:py-28", children: /* @__PURE__ */ jsxs("div", { className: "container", children: [
+    /* @__PURE__ */ jsxs("div", { className: "rb-12 mb-12 grid grid-cols-1 items-start gap-5 md:mb-18 md:grid-cols-2 md:gap-12 lg:mb-20 lg:gap-20", children: [
+      /* @__PURE__ */ jsx("h1", { className: "text-6xl font-bold md:text-9xl lg:text-10xl", children: heading }),
+      /* @__PURE__ */ jsxs("div", { className: "mx-[7.5%] flex flex-col justify-end md:mt-48", children: [
+        /* @__PURE__ */ jsx("p", { className: "md:text-md", children: description }),
+        renderButtons()
+      ] })
+    ] }),
+    renderImages()
+  ] }) });
+};
+const MultiImageGridHeroDefaults = {
+  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" }],
+  images: [
+    {
+      src: "https://picsum.photos/seed/hero-landscape/1200/800",
+      alt: "Relume placeholder image 1"
+    },
+    {
+      src: "https://picsum.photos/seed/hero-square/1200/1200",
+      alt: "Relume placeholder image 2"
+    }
+  ],
+  styles: {
+    textLayout: "two-column-top",
+    imageGridRatio: "1fr_0.33fr"
+  }
+};
+export {
+  MultiImageGridHero,
+  MultiImageGridHeroDefaults
+};