dune-react 0.0.19 → 0.0.21

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

@@ -0,0 +1,276 @@
+import { DismissibleBanner, DismissibleBannerDefaults } from "./dismissible-banner";
+import type { DismissibleBannerProps } from "./dismissible-banner";
+export { DismissibleBanner, DismissibleBannerDefaults };
+export type { DismissibleBannerProps };
+declare const conf: {
+    fields: {
+        heading: {
+            readonly type: "text";
+            readonly contentEditable: true;
+        };
+        description: {
+            readonly type: "textarea";
+            readonly contentEditable: true;
+        };
+        logo: {
+            type: "object";
+            objectFields: {
+                src: import("@puckeditor/core").Field<string>;
+                alt: {
+                    type: "text";
+                };
+            };
+        };
+        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";
+            };
+        };
+        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;
+                };
+            };
+        };
+        headingStart: {
+            type: string;
+        };
+        headingEnd: {
+            type: string;
+        };
+        link: {
+            type: string;
+            objectFields: {
+                action: {
+                    type: "custom";
+                    label: string;
+                    render: typeof import("../../../puck-core").ActionField;
+                };
+                title: {
+                    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.";
+                        };
+                    };
+                    type: string;
+                };
+            };
+        };
+        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.";
+                    };
+                };
+                containerStyle: {
+                    readonly type: "radio";
+                    readonly label: "Container Style";
+                    readonly options: readonly [{
+                        readonly label: "Boxed";
+                        readonly value: "boxed";
+                    }, {
+                        readonly label: "Full Width";
+                        readonly value: "fullWidth";
+                    }];
+                };
+                textLayout: {
+                    readonly type: "radio";
+                    readonly label: "Text Layout";
+                    readonly options: readonly [{
+                        readonly label: "Default";
+                        readonly value: "default";
+                    }, {
+                        readonly label: "Centered";
+                        readonly value: "centered";
+                    }, {
+                        readonly label: "Inline Link";
+                        readonly value: "inlineLink";
+                    }];
+                };
+                ctaType: {
+                    readonly type: "select";
+                    readonly label: "CTA Type";
+                    readonly options: readonly [{
+                        readonly label: "Email Form";
+                        readonly value: "email";
+                    }, {
+                        readonly label: "Single Button";
+                        readonly value: "button";
+                    }, {
+                        readonly label: "Multiple Buttons";
+                        readonly value: "buttons";
+                    }, {
+                        readonly label: "Social Links";
+                        readonly value: "socialLinks";
+                    }];
+                };
+            };
+        };
+    };
+    defaultProps: Partial<import("../props").BannerSectionBaseProps>;
+    render: (props: DismissibleBannerProps) => import("react/jsx-runtime").JSX.Element | null;
+};
+export default conf;

package/dist/components/puck-block/banner-sections/dual-row-marquee/dual-row-marquee.d.ts

@@ -0,0 +1,4 @@
+import type { BannerComponentProps, BannerSectionBaseProps } from "../props";
+export type DualRowMarqueeProps = BannerComponentProps;
+export declare const DualRowMarquee: (props: DualRowMarqueeProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DualRowMarqueeDefaults: Partial<BannerSectionBaseProps>;

package/dist/components/puck-block/banner-sections/dual-row-marquee/dual-row-marquee.js

@@ -0,0 +1,90 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useMediaQuery } from "../../../../hooks/use-media-query.js";
+import { useScroll, useTransform, motion } from "framer-motion";
+import React__default, { useRef } from "react";
+import { cn } from "../../../../utils/css-utils.js";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
+import { useScrollContainer } from "../../../../hooks/use-scroll-container.js";
+const DualRowMarquee = (props) => {
+  const {
+    headingsTop = [],
+    headingsBottom = [],
+    styles
+  } = {
+    ...DualRowMarqueeDefaults,
+    ...props
+  };
+  const {
+    className: sectionClassName,
+    style: sectionStyle,
+    css
+  } = styles ?? {};
+  const sectionRef = useRef(null);
+  const [scrollContainerRef] = useScrollContainer(sectionRef);
+  const { scrollYProgress } = useScroll({
+    target: sectionRef,
+    ...scrollContainerRef.current ? { container: scrollContainerRef } : {},
+    offset: ["start end", "end start"]
+  });
+  const isMobile = useMediaQuery("(max-width: 991px)");
+  const headingTopTranslate = useTransform(
+    scrollYProgress,
+    [0, 1],
+    isMobile ? ["5%", "0%"] : ["25%", "0%"]
+  );
+  const headingBottomTranslate = useTransform(
+    scrollYProgress,
+    [0, 1],
+    isMobile ? ["-5%", "0%"] : ["-25%", "0%"]
+  );
+  const renderHeadings = (headings, translate) => /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      className: "grid auto-cols-max grid-flow-col grid-cols-[max-content] items-center justify-around py-2",
+      style: { x: translate },
+      children: headings.map((heading, index) => /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
+        /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center whitespace-nowrap px-4 text-center lg:text-left", children: /* @__PURE__ */ jsx("h1", { className: "text-xl font-bold md:text-2xl", children: heading.title }) }),
+        /* @__PURE__ */ jsx("div", { className: "relative w-full overflow-hidden", children: /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: heading.image.src,
+            alt: heading.image.alt,
+            className: "aspect-square size-full max-h-16 object-cover"
+          }
+        ) })
+      ] }, index))
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    SectionWrapper,
+    {
+      ref: sectionRef,
+      className: cn("flex w-screen max-w-full flex-col justify-end overflow-hidden", sectionClassName),
+      style: sectionStyle,
+      css,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: Array(2).fill(0).map((_, index) => /* @__PURE__ */ jsx(React__default.Fragment, { children: renderHeadings(headingsTop, headingTopTranslate) }, index)) }),
+        /* @__PURE__ */ jsx("div", { className: "flex justify-start", children: Array(2).fill(0).map((_, index) => /* @__PURE__ */ jsx(React__default.Fragment, { children: renderHeadings(headingsBottom, headingBottomTranslate) }, index)) })
+      ]
+    }
+  );
+};
+const DualRowMarqueeDefaults = {
+  headingsTop: [
+    { title: "Relume Library", image: { src: "https://picsum.photos/seed/banner-dual-1/100/100", alt: "Relume Library 1" } },
+    { title: "Relume Library", image: { src: "https://picsum.photos/seed/banner-dual-2/100/100", alt: "Relume Library 2" } },
+    { title: "Relume Library", image: { src: "https://picsum.photos/seed/banner-dual-3/100/100", alt: "Relume Library 3" } },
+    { title: "Relume Library", image: { src: "https://picsum.photos/seed/banner-dual-4/100/100", alt: "Relume Library 4" } }
+  ],
+  headingsBottom: [
+    { title: "Relume Library", image: { src: "https://picsum.photos/seed/banner-dual-5/100/100", alt: "Relume Library 5" } },
+    { title: "Relume Library", image: { src: "https://picsum.photos/seed/banner-dual-6/100/100", alt: "Relume Library 6" } },
+    { title: "Relume Library", image: { src: "https://picsum.photos/seed/banner-dual-7/100/100", alt: "Relume Library 7" } },
+    { title: "Relume Library", image: { src: "https://picsum.photos/seed/banner-dual-8/100/100", alt: "Relume Library 8" } }
+  ]
+};
+export {
+  DualRowMarquee,
+  DualRowMarqueeDefaults
+};

package/dist/components/puck-block/banner-sections/dual-row-marquee/index.d.ts

@@ -0,0 +1,53 @@
+import { DualRowMarquee, DualRowMarqueeDefaults } from "./dual-row-marquee";
+import type { DualRowMarqueeProps } from "./dual-row-marquee";
+export { DualRowMarquee, DualRowMarqueeDefaults };
+export type { DualRowMarqueeProps };
+declare const conf: {
+    fields: {
+        headingsTop: {
+            type: string;
+            max: number;
+            getItemSummary: (item: {
+                title?: string;
+            }, index?: number) => string;
+            arrayFields: {
+                title: {
+                    type: string;
+                };
+                image: {
+                    type: "object";
+                    objectFields: {
+                        src: import("@puckeditor/core").Field<string>;
+                        alt: {
+                            type: "text";
+                        };
+                    };
+                };
+            };
+        };
+        headingsBottom: {
+            type: string;
+            max: number;
+            getItemSummary: (item: {
+                title?: string;
+            }, index?: number) => string;
+            arrayFields: {
+                title: {
+                    type: string;
+                };
+                image: {
+                    type: "object";
+                    objectFields: {
+                        src: import("@puckeditor/core").Field<string>;
+                        alt: {
+                            type: "text";
+                        };
+                    };
+                };
+            };
+        };
+    };
+    defaultProps: Partial<import("../props").BannerSectionBaseProps>;
+    render: (props: DualRowMarqueeProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default conf;

package/dist/components/puck-block/banner-sections/dual-row-marquee/index.js

@@ -0,0 +1,31 @@
+import { DualRowMarquee, DualRowMarqueeDefaults } from "./dual-row-marquee.js";
+import { imageField } from "../../../puck-core/core/props/media.js";
+const conf = {
+  fields: {
+    headingsTop: {
+      type: "array",
+      max: 6,
+      getItemSummary: (item, index = 0) => item.title || `Item ${index + 1}`,
+      arrayFields: {
+        title: { type: "text" },
+        image: imageField
+      }
+    },
+    headingsBottom: {
+      type: "array",
+      max: 6,
+      getItemSummary: (item, index = 0) => item.title || `Item ${index + 1}`,
+      arrayFields: {
+        title: { type: "text" },
+        image: imageField
+      }
+    }
+  },
+  defaultProps: DualRowMarqueeDefaults,
+  render: DualRowMarquee
+};
+export {
+  DualRowMarquee,
+  DualRowMarqueeDefaults,
+  conf as default
+};

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

@@ -0,0 +1,4 @@
+export { default as CssMarqueeBannerConf } from "./css-marquee-banner";
+export { default as DualRowMarqueeConf } from "./dual-row-marquee";
+export { default as ScrollDrivenMarqueeConf } from "./scroll-driven-marquee";
+export { default as ScrollParallaxTextConf } from "./scroll-parallax-text";

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

@@ -1,22 +1,122 @@
-type BannerVariant = "announcement-banner-1" | "marquee-1";
-type BannerPadding = {
-    top?: "none" | "small" | "medium" | "large";
-    bottom?: "none" | "small" | "medium" | "large";
-};
-type BannerSectionStyle = "default" | "dark" | "muted" | "inverted" | "custom";
-type BannerSectionProps = {
-    variant?: BannerVariant;
-    items?: string[];
-    linkLabel?: string;
-    linkUrl?: string;
-    styles?: {
-        padding?: BannerPadding;
-        sectionStyle?: BannerSectionStyle;
-        backgroundColor?: string;
-        textColor?: string;
-        align?: "left" | "center" | "right";
-        size?: "small" | "default";
-        speed?: "slow" | "normal" | "fast";
-        tone?: "default" | "outline" | "muted";
+/**
+ * Banner Section 共享 Props
+ *
+ * 基础类型引用自 ../props/（全局共享）
+ * BannerSectionStyles 为 banner 特有的样式字段
+ */
+import type { BaseImage } from "@/components/puck-core/core/props/media";
+import type { BaseButton, Action } from "@/components/puck-core/core/props/interactive";
+export type { BaseImage, BaseButton, Action };
+export interface BannerSectionStyles {
+    className?: string;
+    style?: React.CSSProperties;
+    css?: string;
+    containerStyle?: "boxed" | "fullWidth";
+    textLayout?: "default" | "centered" | "inlineLink";
+    ctaType?: "email" | "button" | "buttons" | "socialLinks";
+    direction?: "left" | "right";
+    contentType?: "text" | "textWithImage";
+}
+export interface BannerSectionBaseProps {
+    heading: string;
+    description: string;
+    headings: string[];
+    buttons: BaseButton[];
+    logo: BaseImage & {
+        url?: string;
+    };
+    inputPlaceholder: string;
+    formButton: BaseButton;
+    headingStart: string;
+    headingEnd: string;
+    link: {
+        action?: Action;
+        title: string;
+    };
+    socialMediaLinks: {
+        platform: string;
+        url: string;
+    }[];
+    sections: {
+        title: string;
+        image: BaseImage;
+    }[];
+    headingsTop: {
+        title: string;
+        image: BaseImage;
+    }[];
+    headingsBottom: {
+        title: string;
+        image: BaseImage;
+    }[];
+    images: BaseImage[];
+    styles: BannerSectionStyles;
+}
+export declare const bannerStyleFields: {
+    readonly containerStyle: {
+        readonly type: "radio";
+        readonly label: "Container Style";
+        readonly options: readonly [{
+            readonly label: "Boxed";
+            readonly value: "boxed";
+        }, {
+            readonly label: "Full Width";
+            readonly value: "fullWidth";
+        }];
+    };
+    readonly textLayout: {
+        readonly type: "radio";
+        readonly label: "Text Layout";
+        readonly options: readonly [{
+            readonly label: "Default";
+            readonly value: "default";
+        }, {
+            readonly label: "Centered";
+            readonly value: "centered";
+        }, {
+            readonly label: "Inline Link";
+            readonly value: "inlineLink";
+        }];
+    };
+    readonly ctaType: {
+        readonly type: "select";
+        readonly label: "CTA Type";
+        readonly options: readonly [{
+            readonly label: "Email Form";
+            readonly value: "email";
+        }, {
+            readonly label: "Single Button";
+            readonly value: "button";
+        }, {
+            readonly label: "Multiple Buttons";
+            readonly value: "buttons";
+        }, {
+            readonly label: "Social Links";
+            readonly value: "socialLinks";
+        }];
+    };
+    readonly direction: {
+        readonly type: "radio";
+        readonly label: "Direction";
+        readonly options: readonly [{
+            readonly label: "Left";
+            readonly value: "left";
+        }, {
+            readonly label: "Right";
+            readonly value: "right";
+        }];
+    };
+    readonly contentType: {
+        readonly type: "radio";
+        readonly label: "Content Type";
+        readonly options: readonly [{
+            readonly label: "Text Only";
+            readonly value: "text";
+        }, {
+            readonly label: "Text + Image";
+            readonly value: "textWithImage";
+        }];
     };
 };
+/** 将 BannerSectionBaseProps 与组件特有字段合并，生成最终 Props */
+export type BannerComponentProps<T extends object = object> = React.ComponentPropsWithoutRef<"section"> & Partial<BannerSectionBaseProps> & Partial<T>;

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

@@ -0,0 +1,21 @@
+const bannerStyleFields = {
+  direction: {
+    type: "radio",
+    label: "Direction",
+    options: [
+      { label: "Left", value: "left" },
+      { label: "Right", value: "right" }
+    ]
+  },
+  contentType: {
+    type: "radio",
+    label: "Content Type",
+    options: [
+      { label: "Text Only", value: "text" },
+      { label: "Text + Image", value: "textWithImage" }
+    ]
+  }
+};
+export {
+  bannerStyleFields
+};

package/dist/components/puck-block/banner-sections/scroll-driven-marquee/index.d.ts

@@ -0,0 +1,19 @@
+import { ScrollDrivenMarquee, ScrollDrivenMarqueeDefaults } from "./scroll-driven-marquee";
+import type { ScrollDrivenMarqueeProps } from "./scroll-driven-marquee";
+export { ScrollDrivenMarquee, ScrollDrivenMarqueeDefaults };
+export type { ScrollDrivenMarqueeProps };
+declare const conf: {
+    fields: {
+        headings: {
+            type: string;
+            max: number;
+            getItemSummary: (item: string, index?: number) => string;
+            arrayFields: {
+                type: string;
+            };
+        };
+    };
+    defaultProps: Partial<import("../props").BannerSectionBaseProps>;
+    render: (props: ScrollDrivenMarqueeProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default conf;

package/dist/components/puck-block/banner-sections/scroll-driven-marquee/index.js

@@ -0,0 +1,20 @@
+import { ScrollDrivenMarquee, ScrollDrivenMarqueeDefaults } from "./scroll-driven-marquee.js";
+const conf = {
+  fields: {
+    headings: {
+      type: "array",
+      max: 8,
+      getItemSummary: (item, index = 0) => item || `Heading ${index + 1}`,
+      arrayFields: {
+        type: "text"
+      }
+    }
+  },
+  defaultProps: ScrollDrivenMarqueeDefaults,
+  render: ScrollDrivenMarquee
+};
+export {
+  ScrollDrivenMarquee,
+  ScrollDrivenMarqueeDefaults,
+  conf as default
+};

package/dist/components/puck-block/banner-sections/scroll-driven-marquee/scroll-driven-marquee.d.ts

@@ -0,0 +1,4 @@
+import type { BannerComponentProps, BannerSectionBaseProps } from "../props";
+export type ScrollDrivenMarqueeProps = BannerComponentProps;
+export declare const ScrollDrivenMarquee: (props: ScrollDrivenMarqueeProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ScrollDrivenMarqueeDefaults: Partial<BannerSectionBaseProps>;