dune-react 0.0.19 → 0.0.21

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

@@ -0,0 +1,83 @@
+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: {
+                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.";
+                    };
+                };
+                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,37 @@
+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";
+import { sectionWrapperFields } from "../../../puck-core/section-wrapper.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,
+        ...sectionWrapperFields
+      }
+    }
+  },
+  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,173 @@
+"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 { SectionWrapper } from "../../../puck-core/section-wrapper.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 { className: sectionClassName, style: sectionStyle, css, 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(SectionWrapper, { className: cn("px-[5%] py-8 md:py-12 lg:py-14", sectionClassName), style: sectionStyle, css, 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
+};

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

@@ -1,47 +1,143 @@
-type CtaVariant = "banner-cta-1" | "cta-1" | "gradient-cta-1" | "newsletter-signup-1" | "promo-section-1";
-type CtaPadding = {
-    top?: "none" | "small" | "medium" | "large";
-    bottom?: "none" | "small" | "medium" | "large";
-};
-type CtaSectionStyle = "default" | "dark" | "muted" | "inverted" | "custom";
-type CtaBadge = {
-    label: string;
-    url?: string;
-    variant?: "default" | "secondary" | "destructive" | "outline";
-};
-type CtaButton = {
-    label: string;
-    url?: string;
-    variant?: "default" | "secondary" | "outline" | "ghost" | "link" | "destructive";
-    size?: "default" | "sm" | "lg" | "icon";
-    icon?: string;
-};
-type CtaImage = {
-    src: string;
-    alt?: string;
-};
-type CtaSectionProps = {
-    variant?: CtaVariant;
-    badge?: CtaBadge;
-    heading?: string;
-    description?: string;
-    buttons?: CtaButton[];
-    alignContent?: "start" | "center" | "end";
-    spacing?: "tight" | "normal" | "relaxed";
-    layout?: "contained" | "full-bleed";
-    displayText?: string;
-    placeholder?: string;
-    image?: CtaImage;
-    imagePosition?: "left" | "right" | "background";
-    styles?: {
-        padding?: CtaPadding;
-        sectionStyle?: CtaSectionStyle;
-        backgroundColor?: string;
-        className?: string;
-        gradientFrom?: string;
-        gradientTo?: string;
-        backgroundCSS?: string;
-        textColor?: string;
-        visualVariant?: "primary" | "dark" | "gradient";
+/**
+ * CTA Section 共享 Props
+ *
+ * 基础类型引用自 ../props/（全局共享）
+ * CtaSectionStyles 为 CTA 特有的样式字段
+ */
+import type { BaseImage } from "@/components/puck-core/core/props/media";
+import type { BaseButton } from "@/components/puck-core/core/props/interactive";
+export type { BaseImage, BaseButton };
+export interface CtaSectionStyles {
+    className?: string;
+    style?: React.CSSProperties;
+    css?: string;
+    textLayout?: "left" | "center" | "twoColumn" | "inlineRow";
+    textAlign?: "left" | "center";
+    mediaPosition?: "left" | "right";
+    bgMedia?: "none" | "fullscreenImage" | "fullscreenVideo" | "containerImage" | "containerVideo";
+    formType?: "buttons" | "email";
+    bordered?: boolean;
+    bottomContent?: "none" | "image" | "logos";
+    listStyle?: "center" | "numbered";
+}
+export interface CtaSectionBaseProps {
+    heading: string;
+    description: string;
+    buttons: BaseButton[];
+    images: BaseImage[];
+    video: string;
+    inputPlaceholder: string;
+    formButton: BaseButton;
+    termsAndConditions: string;
+    styles: CtaSectionStyles;
+}
+export declare const ctaStyleFields: {
+    readonly textLayout: {
+        readonly type: "select";
+        readonly label: "Text Layout";
+        readonly options: readonly [{
+            readonly label: "Left";
+            readonly value: "left";
+        }, {
+            readonly label: "Center";
+            readonly value: "center";
+        }, {
+            readonly label: "Two Column";
+            readonly value: "twoColumn";
+        }, {
+            readonly label: "Inline Row";
+            readonly value: "inlineRow";
+        }];
+    };
+    readonly textAlign: {
+        readonly type: "radio";
+        readonly label: "Text Align";
+        readonly options: readonly [{
+            readonly label: "Left";
+            readonly value: "left";
+        }, {
+            readonly label: "Center";
+            readonly value: "center";
+        }];
+    };
+    readonly mediaPosition: {
+        readonly type: "radio";
+        readonly label: "Media Position";
+        readonly options: readonly [{
+            readonly label: "Left";
+            readonly value: "left";
+        }, {
+            readonly label: "Right";
+            readonly value: "right";
+        }];
+    };
+    readonly bgMedia: {
+        readonly type: "select";
+        readonly label: "Background Media";
+        readonly options: readonly [{
+            readonly label: "None";
+            readonly value: "none";
+        }, {
+            readonly label: "Fullscreen Image";
+            readonly value: "fullscreenImage";
+        }, {
+            readonly label: "Fullscreen Video";
+            readonly value: "fullscreenVideo";
+        }, {
+            readonly label: "Container Image";
+            readonly value: "containerImage";
+        }, {
+            readonly label: "Container Video";
+            readonly value: "containerVideo";
+        }];
+    };
+    readonly formType: {
+        readonly type: "radio";
+        readonly label: "Form Type";
+        readonly options: readonly [{
+            readonly label: "Buttons";
+            readonly value: "buttons";
+        }, {
+            readonly label: "Email";
+            readonly value: "email";
+        }];
+    };
+    readonly bordered: {
+        readonly type: "radio";
+        readonly label: "Bordered";
+        readonly options: readonly [{
+            readonly label: "Yes";
+            readonly value: "true";
+        }, {
+            readonly label: "No";
+            readonly value: "false";
+        }];
+    };
+    readonly bottomContent: {
+        readonly type: "select";
+        readonly label: "Bottom Content";
+        readonly options: readonly [{
+            readonly label: "None";
+            readonly value: "none";
+        }, {
+            readonly label: "Image";
+            readonly value: "image";
+        }, {
+            readonly label: "Logos";
+            readonly value: "logos";
+        }];
+    };
+    readonly listStyle: {
+        readonly type: "radio";
+        readonly label: "List Style";
+        readonly options: readonly [{
+            readonly label: "Center";
+            readonly value: "center";
+        }, {
+            readonly label: "Numbered";
+            readonly value: "numbered";
+        }];
     };
 };
+/** 将 CtaSectionBaseProps 与组件特有字段合并，生成最终 Props */
+export type CtaComponentProps<T extends object = object> = React.ComponentPropsWithoutRef<"section"> & Partial<CtaSectionBaseProps> & Partial<T>;

package/dist/components/puck-block/cta-sections/props.js

@@ -0,0 +1,21 @@
+const ctaStyleFields = {
+  textAlign: {
+    type: "radio",
+    label: "Text Align",
+    options: [
+      { label: "Left", value: "left" },
+      { label: "Center", value: "center" }
+    ]
+  },
+  listStyle: {
+    type: "radio",
+    label: "List Style",
+    options: [
+      { label: "Center", value: "center" },
+      { label: "Numbered", value: "numbered" }
+    ]
+  }
+};
+export {
+  ctaStyleFields
+};