dune-react 0.0.21 → 0.0.22

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: "Relume 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[];
 };

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

@@ -0,0 +1,165 @@
+"use client";
+import { jsxs, Fragment, jsx } 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 TextBlockCta = (props) => {
+  const {
+    heading,
+    description,
+    buttons,
+    images,
+    video,
+    // inputPlaceholder,
+    // formButton,
+    // termsAndConditions,
+    styles,
+    logos
+  } = {
+    ...TextBlockCtaDefaults,
+    ...props
+  };
+  const {
+    className: sectionClassName,
+    style: sectionStyle,
+    css,
+    textLayout = "left",
+    bgMedia = "none",
+    bordered = false,
+    // formType = "buttons",
+    bottomContent = "none"
+  } = styles ?? {};
+  const hasBg = bgMedia !== "none";
+  const isFullscreenBg = bgMedia === "fullscreenImage" || bgMedia === "fullscreenVideo";
+  const isContainerBg = bgMedia === "containerImage" || bgMedia === "containerVideo";
+  const isBgImage = bgMedia === "fullscreenImage" || bgMedia === "containerImage";
+  const isBgVideo = bgMedia === "fullscreenVideo" || bgMedia === "containerVideo";
+  const isCenter = textLayout === "center";
+  const isTwoColumn = textLayout === "twoColumn";
+  const isInlineRow = textLayout === "inlineRow";
+  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 renderBottomContent = () => {
+    if (bottomContent === "image" && images && images.length > 0) {
+      return /* @__PURE__ */ jsx("div", { className: "mt-12 md:mt-18 lg:mt-20", children: /* @__PURE__ */ jsx(
+        CompoundImage,
+        {
+          src: images[0].src,
+          alt: images[0].alt,
+          className: "w-full object-cover"
+        }
+      ) });
+    }
+    if (bottomContent === "logos" && logos && logos.length > 0) {
+      return /* @__PURE__ */ jsx("div", { className: "mt-12 flex flex-wrap items-center justify-center gap-x-8 gap-y-6 md:mt-18 lg:mt-20", children: logos.map((logo, index) => /* @__PURE__ */ jsx(CompoundImage, { src: logo.src, alt: logo.alt, className: "max-h-12" }, index)) });
+    }
+    return null;
+  };
+  const renderBgMedia = () => {
+    var _a, _b;
+    if (!hasBg) return null;
+    if (isFullscreenBg) {
+      return /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 z-0", children: [
+        isBgImage && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(CompoundImage, { src: (_a = images == null ? void 0 : images[0]) == null ? void 0 : _a.src, className: "size-full object-cover", alt: (_b = images == null ? void 0 : images[0]) == null ? void 0 : _b.alt }),
+          /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/50" })
+        ] }),
+        isBgVideo && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("video", { className: "size-full object-cover", autoPlay: true, loop: true, muted: true, children: /* @__PURE__ */ jsx("source", { src: video, type: "video/mp4" }) }),
+          /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/50" })
+        ] })
+      ] });
+    }
+    return null;
+  };
+  const renderContainerMedia = () => {
+    var _a, _b;
+    if (!isContainerBg) return null;
+    return /* @__PURE__ */ jsxs("div", { className: "mt-12 md:mt-18 lg:mt-20", children: [
+      isBgImage && /* @__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 }),
+      isBgVideo && /* @__PURE__ */ jsx("video", { className: "w-full object-cover", autoPlay: true, loop: true, muted: true, children: /* @__PURE__ */ jsx("source", { src: video, type: "video/mp4" }) })
+    ] });
+  };
+  const textColorClass = isFullscreenBg ? "text-text-alternative" : "";
+  const renderTextContent = () => {
+    if (isTwoColumn) {
+      return /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-y-5 md:grid-cols-2 md:gap-x-12 lg:gap-x-20", children: [
+        /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("h2", { className: cn("mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl", textColorClass), children: heading }) }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("p", { className: cn("md:text-md", textColorClass), children: description }),
+          renderActions()
+        ] })
+      ] });
+    }
+    if (isInlineRow) {
+      return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-start gap-6 md:flex-row md:items-center md:justify-between", {
+        "border border-border-primary p-8 md:p-12": bordered && !isFullscreenBg
+      }), children: [
+        /* @__PURE__ */ jsx("h2", { className: cn("text-5xl font-bold md:text-7xl lg:text-8xl", textColorClass), children: heading }),
+        renderActions()
+      ] });
+    }
+    if (isCenter) {
+      return /* @__PURE__ */ jsxs("div", { className: cn("mx-auto max-w-lg text-center", textColorClass), children: [
+        /* @__PURE__ */ jsx("h2", { className: "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()
+      ] });
+    }
+    return /* @__PURE__ */ jsxs("div", { className: cn("w-full max-w-lg", textColorClass), children: [
+      /* @__PURE__ */ jsx("h2", { className: "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()
+    ] });
+  };
+  return /* @__PURE__ */ jsxs(SectionWrapper, { className: cn("px-[5%] py-8 md:py-12 lg:py-14", { relative: isFullscreenBg }, sectionClassName), style: sectionStyle, css, children: [
+    renderBgMedia(),
+    /* @__PURE__ */ jsxs("div", { className: cn("container", { "relative z-10": isFullscreenBg }), children: [
+      renderTextContent(),
+      renderContainerMedia(),
+      renderBottomContent()
+    ] })
+  ] });
+};
+const TextBlockCtaDefaults = {
+  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-bg/1920/1080",
+      alt: "Relume placeholder image"
+    },
+    {
+      src: "https://picsum.photos/seed/cta-bottom/1200/600",
+      alt: "Relume placeholder image"
+    }
+  ],
+  video: "https://www.example.com/video.mp4",
+  // 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>
+  // `,
+  logos: [
+    { src: "https://picsum.photos/seed/logo1/120/40", alt: "Logo 1" },
+    { src: "https://picsum.photos/seed/logo2/120/40", alt: "Logo 2" },
+    { src: "https://picsum.photos/seed/logo3/120/40", alt: "Logo 3" }
+  ],
+  styles: {
+    textLayout: "left",
+    bgMedia: "none",
+    bordered: false,
+    // formType: "buttons",
+    bottomContent: "none"
+  }
+};
+export {
+  TextBlockCta,
+  TextBlockCtaDefaults
+};

package/dist/components/puck-block/faq-sections/dual-column-accordion-faq/index.d.ts

@@ -46,7 +46,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";

package/dist/components/puck-block/faq-sections/icon-card-faq/index.d.ts

@@ -55,7 +55,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";

package/dist/components/puck-block/faq-sections/stacked-accordion-faq/index.d.ts

@@ -46,7 +46,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";

package/dist/components/puck-block/faq-sections/stacked-static-faq/index.d.ts

@@ -46,7 +46,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";

package/dist/components/puck-block/faq-sections/two-column-accordion-faq/index.d.ts

@@ -21,7 +21,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";

package/dist/components/puck-block/faq-sections/two-column-static-faq/index.d.ts

@@ -21,7 +21,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";

package/dist/components/puck-block/feature-sections/feature-cards-grid/index.d.ts

@@ -38,7 +38,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";
@@ -119,7 +119,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";

package/dist/components/puck-block/feature-sections/feature-list-split/index.d.ts

@@ -38,7 +38,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";
@@ -119,7 +119,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";