dune-react 0.0.21 → 0.0.23

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

@@ -26,11 +26,20 @@ const imageVariants = {
   right: { x: -50, transition: { type: "spring", duration: 1, bounce: 0 } }
 };
 const MouseTrackCta = (props) => {
-  const { tagline, hoverLinks = [], styles } = {
+  const {
+    tagline,
+    hoverLinks = [],
+    styles
+  } = {
     ...MouseTrackCtaDefaults,
     ...props
   };
-  const { className: sectionClassName, style: sectionStyle, css, listStyle = "center" } = styles ?? {};
+  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);
@@ -47,7 +56,10 @@ const MouseTrackCta = (props) => {
       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 clampedX = Math.max(
+        leftBoundary,
+        Math.min(rightBoundary, e.clientX)
+      );
       const smoothFactor = 0.1;
       setCursorPosition((prev) => ({
         x: prev.x + (clampedX - prev.x) * smoothFactor,
@@ -64,64 +76,81 @@ const MouseTrackCta = (props) => {
   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",
+  return /* @__PURE__ */ jsx(
+    SectionWrapper,
+    {
+      className: cn("isolate 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,
               {
-                "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
+                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] transition-opacity duration-300 lg:block",
+                            isNumbered ? "-z-10 ml-[300px]" : "-z-10",
+                            {
+                              "opacity-70": hoveredIndex === index,
+                              "opacity-0": hoveredIndex !== index
+                            }
+                          ),
+                          animate: {
+                            x: cursorPosition.x - 300 + translateLeftInverse + translateRightInverse,
+                            y: cursorPosition.y - 300 + translateTopInverse + translateBottomInverse
+                          },
+                          transition: { type: "spring", damping: 20, stiffness: 150, mass: 0.5 },
+                          children: /* @__PURE__ */ jsx(
+                            motion.img,
+                            {
+                              className: "size-full max-w-md",
+                              variants: imageVariants,
+                              src: link.image.src,
+                              alt: link.image.alt
+                            }
+                          )
+                        }
+                      )
+                    ]
                   },
-                  children: /* @__PURE__ */ jsx(
-                    motion.img,
-                    {
-                      className: "size-full max-w-md",
-                      variants: imageVariants,
-                      src: link.image.src,
-                      alt: link.image.alt
-                    }
-                  )
-                }
-              )
-            ]
-          },
-          index
-        ))
-      }
-    )
-  ] }) });
+                  index
+                ))
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
 };
 const MouseTrackCtaDefaults = {
   tagline: "Tagline",
@@ -132,7 +161,7 @@ const MouseTrackCtaDefaults = {
       listNumber: "01",
       image: {
         src: "https://picsum.photos/seed/cta-hover1/600/600",
-        alt: "Relume placeholder image 1"
+        alt: "Placeholder image 1"
       }
     },
     {
@@ -141,7 +170,7 @@ const MouseTrackCtaDefaults = {
       listNumber: "02",
       image: {
         src: "https://picsum.photos/seed/cta-hover2/600/600",
-        alt: "Relume placeholder image 2"
+        alt: "Placeholder image 2"
       }
     },
     {
@@ -150,7 +179,7 @@ const MouseTrackCtaDefaults = {
       listNumber: "03",
       image: {
         src: "https://picsum.photos/seed/cta-hover3/600/600",
-        alt: "Relume placeholder image 3"
+        alt: "Placeholder image 3"
       }
     },
     {
@@ -159,7 +188,7 @@ const MouseTrackCtaDefaults = {
       listNumber: "04",
       image: {
         src: "https://picsum.photos/seed/cta-hover4/600/600",
-        alt: "Relume placeholder image 4"
+        alt: "Placeholder image 4"
       }
     }
   ],

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

@@ -1,4 +1,14 @@
 const ctaStyleFields = {
+  textLayout: {
+    type: "select",
+    label: "Text Layout",
+    options: [
+      { label: "Left", value: "left" },
+      { label: "Center", value: "center" },
+      { label: "Two Column", value: "twoColumn" },
+      { label: "Inline Row", value: "inlineRow" }
+    ]
+  },
   textAlign: {
     type: "radio",
     label: "Text Align",
@@ -7,6 +17,42 @@ const ctaStyleFields = {
       { label: "Center", value: "center" }
     ]
   },
+  mediaPosition: {
+    type: "radio",
+    label: "Media Position",
+    options: [
+      { label: "Left", value: "left" },
+      { label: "Right", value: "right" }
+    ]
+  },
+  bgMedia: {
+    type: "select",
+    label: "Background Media",
+    options: [
+      { label: "None", value: "none" },
+      { label: "Fullscreen Image", value: "fullscreenImage" },
+      { label: "Fullscreen Video", value: "fullscreenVideo" },
+      { label: "Container Image", value: "containerImage" },
+      { label: "Container Video", value: "containerVideo" }
+    ]
+  },
+  bordered: {
+    type: "radio",
+    label: "Bordered",
+    options: [
+      { label: "Yes", value: "true" },
+      { label: "No", value: "false" }
+    ]
+  },
+  bottomContent: {
+    type: "select",
+    label: "Bottom Content",
+    options: [
+      { label: "None", value: "none" },
+      { label: "Image", value: "image" },
+      { label: "Logos", value: "logos" }
+    ]
+  },
   listStyle: {
     type: "radio",
     label: "List Style",

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

@@ -25,7 +25,7 @@ declare const conf: {
                 readonly action: {
                     type: "custom";
                     label: string;
-                    render: typeof import("../../../puck-core").ActionField;
+                    render: typeof import("../../..").ActionField;
                 };
                 readonly variant: {
                     readonly type: "select";
@@ -108,67 +108,6 @@ declare const conf: {
                 src: string;
             };
         };
-        inputPlaceholder: {
-            type: string;
-        };
-        formButton: {
-            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;
-                };
-            };
-        };
-        termsAndConditions: {
-            type: string;
-        };
         styles: {
             type: string;
             label: string;
@@ -217,17 +156,6 @@ declare const conf: {
                         readonly value: "false";
                     }];
                 };
-                formType: {
-                    readonly type: "radio";
-                    readonly label: "Form Type";
-                    readonly options: readonly [{
-                        readonly label: "Buttons";
-                        readonly value: "buttons";
-                    }, {
-                        readonly label: "Email";
-                        readonly value: "email";
-                    }];
-                };
             };
         };
     };

package/dist/components/puck-block/cta-sections/side-media-cta/index.js

@@ -0,0 +1,35 @@
+import { SideMediaCta, SideMediaCtaDefaults } from "./side-media-cta.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 { ctaStyleFields } from "../props.js";
+import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
+const conf = {
+  fields: {
+    heading: headingField,
+    description: descriptionField,
+    buttons: buttonsField,
+    images: imagesField,
+    // TODO: email form 字段待设计完成后启用
+    // inputPlaceholder: { type: "text" },
+    // formButton: buttonField,
+    // termsAndConditions: { type: "textarea" },
+    styles: {
+      type: "object",
+      label: "Styles",
+      objectFields: {
+        mediaPosition: ctaStyleFields.mediaPosition,
+        bordered: ctaStyleFields.bordered,
+        // formType: ctaStyleFields.formType,
+        ...sectionWrapperFields
+      }
+    }
+  },
+  defaultProps: SideMediaCtaDefaults,
+  render: SideMediaCta
+};
+export {
+  SideMediaCta,
+  SideMediaCtaDefaults,
+  conf as default
+};

package/dist/components/puck-block/cta-sections/side-media-cta/side-media-cta.js

@@ -0,0 +1,84 @@
+"use client";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { CompoundButton } from "../../../puck-base/button.js";
+import { CompoundImage } from "../../../puck-base/image.js";
+import { cn } from "../../../../utils/css-utils.js";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
+const SideMediaCta = (props) => {
+  var _a, _b;
+  const {
+    heading,
+    description,
+    buttons,
+    images,
+    // inputPlaceholder,
+    // formButton,
+    // termsAndConditions,
+    styles
+  } = {
+    ...SideMediaCtaDefaults,
+    ...props
+  };
+  const {
+    className: sectionClassName,
+    style: sectionStyle,
+    css,
+    mediaPosition = "right",
+    bordered = false
+    // formType = "buttons",
+  } = styles ?? {};
+  const renderActions = () => {
+    return /* @__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 textContent = /* @__PURE__ */ jsxs("div", { className: cn({ "flex flex-col justify-center p-8 md:p-12": bordered }), 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 }),
+    renderActions()
+  ] });
+  const mediaContent = /* @__PURE__ */ jsx("div", { className: cn({ "flex items-center justify-center": bordered }), children: /* @__PURE__ */ jsx(CompoundImage, { src: (_a = images == null ? void 0 : images[0]) == null ? void 0 : _a.src, className: "w-full object-cover", alt: (_b = images == null ? void 0 : images[0]) == null ? void 0 : _b.alt }) });
+  const isLeftMedia = mediaPosition === "left";
+  if (bordered) {
+    return /* @__PURE__ */ jsx(SectionWrapper, { className: cn("px-[5%] py-6 md:py-8 lg:py-10", sectionClassName), style: sectionStyle, css, children: /* @__PURE__ */ jsx("div", { className: "container", children: /* @__PURE__ */ jsx("div", { className: "grid auto-cols-fr grid-cols-1 border border-border-primary lg:grid-cols-2", children: isLeftMedia ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      mediaContent,
+      textContent
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      textContent,
+      mediaContent
+    ] }) }) }) });
+  }
+  const textOrder = isLeftMedia ? "order-1 lg:order-2" : "";
+  const mediaOrder = isLeftMedia ? "order-2 lg:order-1" : "";
+  return /* @__PURE__ */ jsx(SectionWrapper, { className: cn("px-[5%] py-8 md:py-12 lg:py-14", sectionClassName), style: sectionStyle, css, children: /* @__PURE__ */ jsx("div", { className: "container", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-x-20 gap-y-12 md:gap-y-16 lg:grid-cols-2 lg:items-center", children: [
+    /* @__PURE__ */ jsx("div", { className: textOrder, children: textContent }),
+    /* @__PURE__ */ jsx("div", { className: mediaOrder, children: mediaContent })
+  ] }) }) });
+};
+const SideMediaCtaDefaults = {
+  heading: "Medium length heading goes here",
+  description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
+  buttons: [{ label: "Button" }, { label: "Button", variant: "secondary" }],
+  images: [
+    {
+      src: "https://picsum.photos/seed/cta-side/800/600",
+      alt: "Placeholder image"
+    }
+  ],
+  video: "",
+  inputPlaceholder: "Enter your email",
+  formButton: { label: "Sign up" },
+  termsAndConditions: `
+  <p class='text-xs'>
+    By clicking Sign Up you're confirming that you agree with our
+    <a href='#' class='underline'>Terms and Conditions</a>.
+  </p>
+  `,
+  styles: {
+    mediaPosition: "right",
+    bordered: false,
+    formType: "buttons"
+  }
+};
+export {
+  SideMediaCta,
+  SideMediaCtaDefaults
+};

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

@@ -25,7 +25,7 @@ declare const conf: {
                 readonly action: {
                     type: "custom";
                     label: string;
-                    render: typeof import("../../../puck-core").ActionField;
+                    render: typeof import("../../..").ActionField;
                 };
                 readonly variant: {
                     readonly type: "select";
@@ -111,67 +111,6 @@ declare const conf: {
         video: {
             type: string;
         };
-        inputPlaceholder: {
-            type: string;
-        };
-        formButton: {
-            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;
-                };
-            };
-        };
-        termsAndConditions: {
-            type: string;
-        };
         logos: {
             readonly type: "array";
             readonly max: 10;
@@ -263,17 +202,6 @@ declare const conf: {
                         readonly value: "false";
                     }];
                 };
-                formType: {
-                    readonly type: "radio";
-                    readonly label: "Form Type";
-                    readonly options: readonly [{
-                        readonly label: "Buttons";
-                        readonly value: "buttons";
-                    }, {
-                        readonly label: "Email";
-                        readonly value: "email";
-                    }];
-                };
                 bottomContent: {
                     readonly type: "select";
                     readonly label: "Bottom Content";
@@ -291,7 +219,7 @@ declare const conf: {
             };
         };
     };
-    defaultProps: import("../props").CtaSectionBaseProps & {
+    defaultProps: Omit<import("../props").CtaSectionBaseProps, "inputPlaceholder" | "formButton" | "termsAndConditions"> & {
         logos: import("@/components/puck-core/core/props/media").BaseImage[];
     };
     render: (props: TextBlockCtaProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,38 @@
+import { TextBlockCta, TextBlockCtaDefaults } from "./text-block-cta.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 { ctaStyleFields } from "../props.js";
+import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
+const conf = {
+  fields: {
+    heading: headingField,
+    description: descriptionField,
+    buttons: buttonsField,
+    images: imagesField,
+    video: { type: "text" },
+    // inputPlaceholder: { type: "text" },
+    // formButton: buttonField,
+    // termsAndConditions: { type: "textarea" },
+    logos: imagesField,
+    styles: {
+      type: "object",
+      label: "Styles",
+      objectFields: {
+        textLayout: ctaStyleFields.textLayout,
+        bgMedia: ctaStyleFields.bgMedia,
+        bordered: ctaStyleFields.bordered,
+        // formType: ctaStyleFields.formType,
+        bottomContent: ctaStyleFields.bottomContent,
+        ...sectionWrapperFields
+      }
+    }
+  },
+  defaultProps: TextBlockCtaDefaults,
+  render: TextBlockCta
+};
+export {
+  TextBlockCta,
+  TextBlockCtaDefaults,
+  conf as default
+};

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

@@ -3,6 +3,6 @@ export type TextBlockCtaProps = CtaComponentProps<{
     logos: BaseImage[];
 }>;
 export declare const TextBlockCta: (props: TextBlockCtaProps) => import("react/jsx-runtime").JSX.Element;
-export declare const TextBlockCtaDefaults: CtaSectionBaseProps & {
+export declare const TextBlockCtaDefaults: Omit<CtaSectionBaseProps, "inputPlaceholder" | "formButton" | "termsAndConditions"> & {
     logos: BaseImage[];
 };