dune-react 0.0.18 → 0.0.20

package/dist/components/puck-block/cta-sections/feature-card-cta/feature-card-cta.js

@@ -0,0 +1,54 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../../../utils/css-utils.js";
+import { CompoundButton } from "../../../puck-base/button.js";
+import { CompoundImage } from "../../../puck-base/image.js";
+const FeatureCardCta = (props) => {
+  const { featureSections = [], styles } = {
+    ...FeatureCardCtaDefaults,
+    ...props
+  };
+  const { textAlign = "left" } = styles ?? {};
+  const isCenter = textAlign === "center";
+  return /* @__PURE__ */ jsx("section", { id: "relume", className: "px-[5%] py-16 md:py-24 lg:py-28", children: /* @__PURE__ */ jsx("div", { className: "container", children: /* @__PURE__ */ jsx("div", { className: "grid auto-cols-fr grid-cols-1 gap-x-8 gap-y-12 md:grid-cols-2 lg:gap-x-16", children: featureSections.map((feature, index) => /* @__PURE__ */ jsxs("div", { className: cn({ "text-center": isCenter }), children: [
+    /* @__PURE__ */ jsx(
+      CompoundImage,
+      {
+        src: feature.icon.src,
+        className: cn("mb-5 size-12 md:mb-6", { "mx-auto": isCenter }),
+        alt: feature.icon.alt
+      }
+    ),
+    /* @__PURE__ */ jsx("h2", { className: "rb-5 mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl", children: feature.heading }),
+    /* @__PURE__ */ jsx("p", { children: feature.description }),
+    /* @__PURE__ */ jsx("div", { className: cn("mt-6 flex flex-wrap gap-4 md:mt-8", { "justify-center": isCenter }), children: feature.buttons.map((button, btnIndex) => /* @__PURE__ */ jsx(CompoundButton, { label: button.label, variant: button.variant, size: button.size, action: button.action, icon: button.icon }, btnIndex)) })
+  ] }, index)) }) }) });
+};
+const FeatureCardCtaDefaults = {
+  featureSections: [
+    {
+      icon: {
+        src: "https://picsum.photos/seed/cta-icon1/48/48",
+        alt: "Feature icon 1"
+      },
+      heading: "Short heading here",
+      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
+      buttons: [{ label: "Button" }, { label: "Button", variant: "secondary" }]
+    },
+    {
+      icon: {
+        src: "https://picsum.photos/seed/cta-icon2/48/48",
+        alt: "Feature icon 2"
+      },
+      heading: "Short heading here",
+      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
+      buttons: [{ label: "Button" }, { label: "Button", variant: "secondary" }]
+    }
+  ],
+  styles: {
+    textAlign: "left"
+  }
+};
+export {
+  FeatureCardCta,
+  FeatureCardCtaDefaults
+};

package/dist/components/puck-block/cta-sections/feature-card-cta/index.d.ts

@@ -0,0 +1,133 @@
+import { FeatureCardCta, FeatureCardCtaDefaults } from "./feature-card-cta";
+import type { FeatureCardCtaProps } from "./feature-card-cta";
+export { FeatureCardCta, FeatureCardCtaDefaults };
+export type { FeatureCardCtaProps };
+declare const conf: {
+    fields: {
+        featureSections: {
+            type: string;
+            max: number;
+            getItemSummary: (item: {
+                heading?: string;
+            }, index?: number) => string;
+            arrayFields: {
+                icon: {
+                    type: "object";
+                    objectFields: {
+                        src: import("@puckeditor/core").Field<string>;
+                        alt: {
+                            type: "text";
+                        };
+                    };
+                };
+                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";
+                    };
+                };
+            };
+        };
+        styles: {
+            type: string;
+            label: string;
+            objectFields: {
+                textAlign: {
+                    readonly type: "radio";
+                    readonly label: "Text Align";
+                    readonly options: readonly [{
+                        readonly label: "Left";
+                        readonly value: "left";
+                    }, {
+                        readonly label: "Center";
+                        readonly value: "center";
+                    }];
+                };
+            };
+        };
+    };
+    defaultProps: FeatureCardCtaProps;
+    render: (props: FeatureCardCtaProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default conf;

package/dist/components/puck-block/cta-sections/feature-card-cta/index.js

@@ -0,0 +1,34 @@
+import { FeatureCardCta, FeatureCardCtaDefaults } from "./feature-card-cta.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";
+import { ctaStyleFields } from "../props.js";
+const conf = {
+  fields: {
+    featureSections: {
+      type: "array",
+      max: 4,
+      getItemSummary: (item, index = 0) => item.heading || `Feature ${index + 1}`,
+      arrayFields: {
+        icon: imageField,
+        heading: headingField,
+        description: descriptionField,
+        buttons: buttonsField
+      }
+    },
+    styles: {
+      type: "object",
+      label: "Styles",
+      objectFields: {
+        textAlign: ctaStyleFields.textAlign
+      }
+    }
+  },
+  defaultProps: FeatureCardCtaDefaults,
+  render: FeatureCardCta
+};
+export {
+  FeatureCardCta,
+  FeatureCardCtaDefaults,
+  conf as default
+};

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

@@ -0,0 +1,2 @@
+export { default as FeatureCardCtaConf } from "./feature-card-cta";
+export { default as MouseTrackCtaConf } from "./mouse-track-cta";

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

@@ -0,0 +1,61 @@
+import { MouseTrackCta, MouseTrackCtaDefaults } from "./mouse-track-cta";
+import type { MouseTrackCtaProps } from "./mouse-track-cta";
+export { MouseTrackCta, MouseTrackCtaDefaults };
+export type { MouseTrackCtaProps };
+declare const conf: {
+    fields: {
+        tagline: {
+            type: string;
+        };
+        hoverLinks: {
+            type: string;
+            max: number;
+            getItemSummary: (item: {
+                heading?: string;
+            }, index?: number) => string;
+            arrayFields: {
+                action: {
+                    type: "custom";
+                    label: string;
+                    render: typeof import("../../../puck-core").ActionField;
+                };
+                heading: {
+                    readonly type: "text";
+                    readonly contentEditable: true;
+                };
+                listNumber: {
+                    type: string;
+                };
+                image: {
+                    type: "object";
+                    objectFields: {
+                        src: import("@puckeditor/core").Field<string>;
+                        alt: {
+                            type: "text";
+                        };
+                    };
+                };
+            };
+        };
+        styles: {
+            type: string;
+            label: string;
+            objectFields: {
+                listStyle: {
+                    readonly type: "radio";
+                    readonly label: "List Style";
+                    readonly options: readonly [{
+                        readonly label: "Center";
+                        readonly value: "center";
+                    }, {
+                        readonly label: "Numbered";
+                        readonly value: "numbered";
+                    }];
+                };
+            };
+        };
+    };
+    defaultProps: MouseTrackCtaProps;
+    render: (props: MouseTrackCtaProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default conf;

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

@@ -0,0 +1,35 @@
+import { MouseTrackCta, MouseTrackCtaDefaults } from "./mouse-track-cta.js";
+import { headingField } from "../../../puck-core/core/props/content.js";
+import { imageField } from "../../../puck-core/core/props/media.js";
+import { actionField } from "../../../puck-core/core/props/interactive.js";
+import { ctaStyleFields } from "../props.js";
+const conf = {
+  fields: {
+    tagline: { type: "text" },
+    hoverLinks: {
+      type: "array",
+      max: 8,
+      getItemSummary: (item, index = 0) => item.heading || `Link ${index + 1}`,
+      arrayFields: {
+        action: actionField,
+        heading: headingField,
+        listNumber: { type: "text" },
+        image: imageField
+      }
+    },
+    styles: {
+      type: "object",
+      label: "Styles",
+      objectFields: {
+        listStyle: ctaStyleFields.listStyle
+      }
+    }
+  },
+  defaultProps: MouseTrackCtaDefaults,
+  render: MouseTrackCta
+};
+export {
+  MouseTrackCta,
+  MouseTrackCtaDefaults,
+  conf as default
+};

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

@@ -0,0 +1,15 @@
+import type { CtaComponentProps, BaseImage } from "../props";
+import type { Action } from "@/components/puck-core/core/props/interactive";
+type HoverLink = {
+    action?: Action;
+    heading: string;
+    listNumber?: string;
+    image: BaseImage;
+};
+export type MouseTrackCtaProps = CtaComponentProps<{
+    tagline: string;
+    hoverLinks: HoverLink[];
+}>;
+export declare const MouseTrackCta: (props: MouseTrackCtaProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MouseTrackCtaDefaults: MouseTrackCtaProps;
+export {};

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

@@ -0,0 +1,172 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { motion } from "framer-motion";
+import { cn } from "../../../../utils/css-utils.js";
+import { resolveActionUrl } from "../../../puck-core/core/props/interactive.js";
+const getDirection = (ev, obj) => {
+  const { width: w, height: h, left, top } = obj.getBoundingClientRect();
+  const centerX = left + w / 2;
+  const centerY = top + h / 2;
+  const xOffset = ev.clientX - centerX;
+  const yOffset = ev.clientY - centerY;
+  const angleDegrees = Math.atan2(yOffset, xOffset) * (180 / Math.PI);
+  const adjustedAngle = angleDegrees < 0 ? angleDegrees + 360 : angleDegrees;
+  if (adjustedAngle >= 315 || adjustedAngle < 45) return "right";
+  if (adjustedAngle >= 45 && adjustedAngle < 135) return "bottom";
+  if (adjustedAngle >= 135 && adjustedAngle < 225) return "left";
+  return "top";
+};
+const imageVariants = {
+  initial: { x: 0, y: 0 },
+  top: { y: 50, transition: { type: "spring", duration: 1, bounce: 0 } },
+  bottom: { y: -50, transition: { type: "spring", duration: 1, bounce: 0 } },
+  left: { x: 50, transition: { type: "spring", duration: 1, bounce: 0 } },
+  right: { x: -50, transition: { type: "spring", duration: 1, bounce: 0 } }
+};
+const MouseTrackCta = (props) => {
+  const { tagline, hoverLinks = [], styles } = {
+    ...MouseTrackCtaDefaults,
+    ...props
+  };
+  const { listStyle = "center" } = styles ?? {};
+  const isNumbered = listStyle === "numbered";
+  const [cursorPosition, setCursorPosition] = useState({ x: 0, y: 0 });
+  const [hoveredIndex, setHoveredIndex] = useState(null);
+  const [direction, setDirection] = useState("initial");
+  const handleMouseEnter = (event) => {
+    const element = event.currentTarget;
+    if (!element) return;
+    setDirection(getDirection(event, element));
+  };
+  const handleMouseMove = (e) => {
+    if (isNumbered) {
+      const container = e.currentTarget;
+      if (!container) return;
+      const containerRect = container.getBoundingClientRect();
+      const leftBoundary = containerRect.left + containerRect.width / 2 - 100;
+      const rightBoundary = containerRect.right / 2 + 100;
+      const clampedX = Math.max(leftBoundary, Math.min(rightBoundary, e.clientX));
+      const smoothFactor = 0.1;
+      setCursorPosition((prev) => ({
+        x: prev.x + (clampedX - prev.x) * smoothFactor,
+        y: prev.y + (e.clientY - prev.y) * smoothFactor
+      }));
+    } else {
+      setCursorPosition({ x: e.clientX, y: e.clientY });
+    }
+  };
+  const handleMouseLeave = () => {
+    setHoveredIndex(null);
+  };
+  const translateTopInverse = direction === "top" ? isNumbered ? -25 : -50 : 0;
+  const translateBottomInverse = direction === "bottom" ? isNumbered ? 25 : 50 : 0;
+  const translateLeftInverse = direction === "left" ? isNumbered ? -25 : -50 : 0;
+  const translateRightInverse = direction === "right" ? isNumbered ? 25 : 50 : 0;
+  return /* @__PURE__ */ jsx("section", { id: "relume", className: "px-[5%] py-16 md:py-24 lg:py-28", onMouseMove: !isNumbered ? handleMouseMove : void 0, children: /* @__PURE__ */ jsxs("div", { className: cn("container", { "max-w-xl text-center": !isNumbered }), onMouseMove: isNumbered ? handleMouseMove : void 0, children: [
+    /* @__PURE__ */ jsx("p", { className: "mb-6 font-semibold md:mb-8", children: tagline }),
+    /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        initial: "initial",
+        whileHover: direction,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        children: hoverLinks.map((link, index) => /* @__PURE__ */ jsxs(
+          "a",
+          {
+            href: resolveActionUrl(link.action ?? { type: "none" }) ?? "#",
+            onMouseEnter: () => setHoveredIndex(index),
+            className: cn(
+              "flex items-center p-4 transition-colors duration-300",
+              isNumbered ? "relative justify-start border-b border-border-primary py-5 md:py-6" : "justify-center",
+              {
+                "lg:text-black/20": hoveredIndex !== index && hoveredIndex !== null,
+                "lg:text-black": hoveredIndex === index || hoveredIndex === null
+              }
+            ),
+            children: [
+              isNumbered && link.listNumber && /* @__PURE__ */ jsx("p", { className: "mr-6 whitespace-nowrap text-xl font-bold md:mr-8 md:text-2xl", children: link.listNumber }),
+              /* @__PURE__ */ jsx("h3", { className: "text-5xl font-bold md:text-9xl lg:text-10xl", children: link.heading }),
+              /* @__PURE__ */ jsx(
+                motion.div,
+                {
+                  className: cn(
+                    "pointer-events-none fixed inset-0 hidden size-[600px] lg:block",
+                    isNumbered ? "-z-10 ml-[300px]" : "-z-10",
+                    {
+                      "opacity-100": hoveredIndex === index,
+                      "opacity-0": hoveredIndex !== index
+                    }
+                  ),
+                  style: {
+                    translateX: cursorPosition.x - 300 + translateLeftInverse + translateRightInverse,
+                    translateY: cursorPosition.y - 300 + translateTopInverse + translateBottomInverse
+                  },
+                  children: /* @__PURE__ */ jsx(
+                    motion.img,
+                    {
+                      className: "size-full max-w-md",
+                      variants: imageVariants,
+                      src: link.image.src,
+                      alt: link.image.alt
+                    }
+                  )
+                }
+              )
+            ]
+          },
+          index
+        ))
+      }
+    )
+  ] }) });
+};
+const MouseTrackCtaDefaults = {
+  tagline: "Tagline",
+  hoverLinks: [
+    {
+      action: { type: "page", pageUrl: "#" },
+      heading: "Hover over link one",
+      listNumber: "01",
+      image: {
+        src: "https://picsum.photos/seed/cta-hover1/600/600",
+        alt: "Relume placeholder image 1"
+      }
+    },
+    {
+      action: { type: "page", pageUrl: "#" },
+      heading: "Hover over link two",
+      listNumber: "02",
+      image: {
+        src: "https://picsum.photos/seed/cta-hover2/600/600",
+        alt: "Relume placeholder image 2"
+      }
+    },
+    {
+      action: { type: "page", pageUrl: "#" },
+      heading: "Hover over link three",
+      listNumber: "03",
+      image: {
+        src: "https://picsum.photos/seed/cta-hover3/600/600",
+        alt: "Relume placeholder image 3"
+      }
+    },
+    {
+      action: { type: "page", pageUrl: "#" },
+      heading: "Hover over link four",
+      listNumber: "04",
+      image: {
+        src: "https://picsum.photos/seed/cta-hover4/600/600",
+        alt: "Relume placeholder image 4"
+      }
+    }
+  ],
+  styles: {
+    listStyle: "center"
+  }
+};
+export {
+  MouseTrackCta,
+  MouseTrackCtaDefaults
+};