dune-react 0.0.19 → 0.0.21

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

@@ -1,58 +1,186 @@
-type TextVariant = "articles-1" | "content-section-1" | "rich-text-1" | "tab-section-1" | "timeline-1" | "two-column-1";
-type TextPadding = {
-    top?: "none" | "small" | "medium" | "large";
-    bottom?: "none" | "small" | "medium" | "large";
-};
-type TextSectionStyle = "default" | "dark" | "muted" | "inverted" | "custom";
-type TextButton = {
-    label: string;
-    url?: string;
-    variant?: "default" | "secondary" | "outline" | "ghost" | "link" | "destructive";
-    size?: "default" | "sm" | "lg" | "icon";
-    icon?: string;
-};
-type TextBadge = {
-    label: string;
-    url?: string;
-    variant?: "default" | "secondary" | "destructive" | "outline";
-};
-type TextImage = {
-    src: string;
-    alt?: string;
-    aspectRatio?: "16x9" | "1x1";
-};
-type TextTab = {
-    label: string;
-    content: string;
-    image?: TextImage;
-};
-type TextTimelineItem = {
-    title: string;
+/**
+ * Text Section 共享 Props
+ *
+ * 基础类型引用自 ../props/（全局共享）
+ * TextSectionStyles 为 text-section 特有的样式字段
+ */
+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 TextSectionStyles {
+    className?: string;
+    style?: React.CSSProperties;
+    css?: string;
+    textLayout?: "singleLeft" | "singleCenter" | "twoColumn" | "single" | "twoColumnProse";
+    bgMedia?: "none" | "image" | "video";
+    formType?: "buttons" | "email" | "none";
+    mediaType?: "none" | "image" | "video";
+    mediaPosition?: "left" | "right" | "top" | "bottom";
+    contentPosition?: "left" | "right";
+    asidePosition?: "left" | "right";
+    hasTagline?: boolean;
+    hasMetatags?: boolean;
+    hasBreadcrumbs?: boolean;
+    sidebarType?: "subscribe" | "full";
+}
+export interface TextSectionBaseProps {
+    tagline: string;
+    heading: string;
     description: string;
-    date?: string;
-};
-type TextSectionProps = {
-    variant?: TextVariant;
-    badge?: TextBadge;
-    eyebrow?: string;
-    heading?: string;
-    description?: string;
-    content?: string;
-    buttons?: TextButton[];
-    image?: TextImage;
-    images?: TextImage[];
-    imagePosition?: "left" | "right" | "below" | "none";
-    layout?: "centered" | "split" | "prose" | "text-start" | "text-end";
-    cards?: unknown;
-    tabs?: TextTab[];
-    items?: TextTimelineItem[];
-    styles?: {
-        padding?: TextPadding;
-        sectionStyle?: TextSectionStyle;
-        backgroundColor?: string;
-        columns?: 2 | 3 | 4;
-        dividers?: "none" | "both" | "top" | "bottom";
-        maxWidth?: "sm" | "md" | "lg" | "full";
-        border?: boolean;
+    buttons: BaseButton[];
+    image: BaseImage;
+    video: string;
+    inputPlaceholder: string;
+    formButton: BaseButton;
+    termsAndConditions: string;
+    styles: TextSectionStyles;
+}
+export declare const textStyleFields: {
+    readonly textLayout: {
+        readonly type: "select";
+        readonly label: "Text Layout";
+        readonly options: readonly [{
+            readonly label: "Single Left";
+            readonly value: "singleLeft";
+        }, {
+            readonly label: "Single Center";
+            readonly value: "singleCenter";
+        }, {
+            readonly label: "Two Column";
+            readonly value: "twoColumn";
+        }, {
+            readonly label: "Single Prose";
+            readonly value: "single";
+        }, {
+            readonly label: "Two Column Prose";
+            readonly value: "twoColumnProse";
+        }];
+    };
+    readonly bgMedia: {
+        readonly type: "radio";
+        readonly label: "Background Media";
+        readonly options: readonly [{
+            readonly label: "None";
+            readonly value: "none";
+        }, {
+            readonly label: "Image";
+            readonly value: "image";
+        }, {
+            readonly label: "Video";
+            readonly value: "video";
+        }];
+    };
+    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 label: "None";
+            readonly value: "none";
+        }];
+    };
+    readonly mediaType: {
+        readonly type: "radio";
+        readonly label: "Media Type";
+        readonly options: readonly [{
+            readonly label: "None";
+            readonly value: "none";
+        }, {
+            readonly label: "Image";
+            readonly value: "image";
+        }, {
+            readonly label: "Video";
+            readonly value: "video";
+        }];
+    };
+    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 label: "Top";
+            readonly value: "top";
+        }, {
+            readonly label: "Bottom";
+            readonly value: "bottom";
+        }];
+    };
+    readonly contentPosition: {
+        readonly type: "radio";
+        readonly label: "Content Position";
+        readonly options: readonly [{
+            readonly label: "Left";
+            readonly value: "left";
+        }, {
+            readonly label: "Right";
+            readonly value: "right";
+        }];
+    };
+    readonly asidePosition: {
+        readonly type: "radio";
+        readonly label: "Aside Position";
+        readonly options: readonly [{
+            readonly label: "Left";
+            readonly value: "left";
+        }, {
+            readonly label: "Right";
+            readonly value: "right";
+        }];
+    };
+    readonly hasTagline: {
+        readonly type: "radio";
+        readonly label: "Show Tagline";
+        readonly options: readonly [{
+            readonly label: "Yes";
+            readonly value: "true";
+        }, {
+            readonly label: "No";
+            readonly value: "false";
+        }];
+    };
+    readonly hasMetatags: {
+        readonly type: "radio";
+        readonly label: "Show Metatags";
+        readonly options: readonly [{
+            readonly label: "Yes";
+            readonly value: "true";
+        }, {
+            readonly label: "No";
+            readonly value: "false";
+        }];
+    };
+    readonly hasBreadcrumbs: {
+        readonly type: "radio";
+        readonly label: "Show Breadcrumbs";
+        readonly options: readonly [{
+            readonly label: "Yes";
+            readonly value: "true";
+        }, {
+            readonly label: "No";
+            readonly value: "false";
+        }];
+    };
+    readonly sidebarType: {
+        readonly type: "radio";
+        readonly label: "Sidebar Type";
+        readonly options: readonly [{
+            readonly label: "Subscribe";
+            readonly value: "subscribe";
+        }, {
+            readonly label: "Full";
+            readonly value: "full";
+        }];
     };
 };
+/** 将 TextSectionBaseProps 与组件特有字段合并，生成最终 Props */
+export type TextComponentProps<T extends object = object> = React.ComponentPropsWithoutRef<"section"> & Partial<TextSectionBaseProps> & Partial<T>;

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

@@ -0,0 +1,67 @@
+const textStyleFields = {
+  textLayout: {
+    type: "select",
+    label: "Text Layout",
+    options: [
+      { label: "Single Left", value: "singleLeft" },
+      { label: "Single Center", value: "singleCenter" },
+      { label: "Two Column", value: "twoColumn" },
+      { label: "Single Prose", value: "single" },
+      { label: "Two Column Prose", value: "twoColumnProse" }
+    ]
+  },
+  mediaType: {
+    type: "radio",
+    label: "Media Type",
+    options: [
+      { label: "None", value: "none" },
+      { label: "Image", value: "image" },
+      { label: "Video", value: "video" }
+    ]
+  },
+  mediaPosition: {
+    type: "radio",
+    label: "Media Position",
+    options: [
+      { label: "Left", value: "left" },
+      { label: "Right", value: "right" },
+      { label: "Top", value: "top" },
+      { label: "Bottom", value: "bottom" }
+    ]
+  },
+  contentPosition: {
+    type: "radio",
+    label: "Content Position",
+    options: [
+      { label: "Left", value: "left" },
+      { label: "Right", value: "right" }
+    ]
+  },
+  asidePosition: {
+    type: "radio",
+    label: "Aside Position",
+    options: [
+      { label: "Left", value: "left" },
+      { label: "Right", value: "right" }
+    ]
+  },
+  hasMetatags: {
+    type: "radio",
+    label: "Show Metatags",
+    options: [
+      { label: "Yes", value: "true" },
+      { label: "No", value: "false" }
+    ]
+  },
+  hasBreadcrumbs: {
+    type: "radio",
+    label: "Show Breadcrumbs",
+    options: [
+      { label: "Yes", value: "true" },
+      { label: "No", value: "false" }
+    ]
+  }
+};
+export {
+  textStyleFields
+};

package/dist/components/puck-block/text-sections/prose-content/component.d.ts

@@ -0,0 +1,14 @@
+import type { TextComponentProps, TextSectionBaseProps, BaseImage } from "../props";
+type Metatag = {
+    label: string;
+    value: string;
+};
+type ProseContentExtra = {
+    prose: string;
+    metatags?: Metatag[];
+    mediaImage?: BaseImage;
+};
+export type ProseContentProps = TextComponentProps<ProseContentExtra>;
+export declare const ProseContent: (props: ProseContentProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ProseContentDefaults: Partial<TextSectionBaseProps> & ProseContentExtra;
+export {};

package/dist/components/puck-block/text-sections/prose-content/component.js

@@ -0,0 +1,97 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Dialog, DialogTrigger, DialogContent } from "../../../shadcn/dialog.js";
+import { CompoundImage } from "../../../puck-base/image.js";
+import { FaCirclePlay } from "../../../../node_modules/.pnpm/react-icons@5.6.0_react@19.2.4/node_modules/react-icons/fa6/index.js";
+import { CgSpinner } from "../../../../node_modules/.pnpm/react-icons@5.6.0_react@19.2.4/node_modules/react-icons/cg/index.js";
+import { cn } from "../../../../utils/css-utils.js";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
+const ProseContent = (props) => {
+  const {
+    heading,
+    prose,
+    metatags,
+    mediaImage,
+    video,
+    styles
+  } = {
+    ...ProseContentDefaults,
+    ...props
+  };
+  const {
+    className: sectionClassName,
+    style: sectionStyle,
+    css,
+    textLayout = "single",
+    mediaType = "none",
+    mediaPosition = "bottom",
+    hasMetatags = false
+  } = styles ?? {};
+  const [isIframeLoaded, setIsIframeLoaded] = useState(false);
+  const renderMedia = () => {
+    if (mediaType === "none") return null;
+    if (mediaType === "video") {
+      return /* @__PURE__ */ jsxs(Dialog, { children: [
+        /* @__PURE__ */ jsx(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsxs("button", { className: "relative flex w-full items-center justify-center", children: [
+          /* @__PURE__ */ jsx(CompoundImage, { src: (mediaImage == null ? void 0 : mediaImage.src) ?? "", alt: mediaImage == null ? void 0 : mediaImage.alt, className: "size-full object-cover" }),
+          /* @__PURE__ */ jsx("span", { className: "absolute inset-0 z-10 bg-black/50" }),
+          /* @__PURE__ */ jsx(FaCirclePlay, { className: "absolute z-20 size-16 text-white" })
+        ] }) }),
+        /* @__PURE__ */ jsxs(DialogContent, { children: [
+          !isIframeLoaded && /* @__PURE__ */ jsx(CgSpinner, { className: "mx-auto size-16 animate-spin text-white" }),
+          /* @__PURE__ */ jsx(
+            "iframe",
+            {
+              className: cn("z-0 mx-auto aspect-video size-full md:w-[738px] lg:w-[940px]", {
+                visible: isIframeLoaded,
+                hidden: !isIframeLoaded
+              }),
+              src: video,
+              allow: "autoplay; encrypted-media; picture-in-picture",
+              allowFullScreen: true,
+              onLoad: () => setIsIframeLoaded(true)
+            }
+          )
+        ] })
+      ] });
+    }
+    return mediaImage ? /* @__PURE__ */ jsx(CompoundImage, { src: mediaImage.src, className: "w-full object-cover", alt: mediaImage.alt }) : null;
+  };
+  const mediaElement = renderMedia();
+  const isTwoColumn = textLayout === "twoColumnProse";
+  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: cn("mx-auto w-full", isTwoColumn ? "max-w-4xl" : "max-w-lg"), children: [
+    hasMetatags && metatags && metatags.length > 0 && /* @__PURE__ */ jsx("div", { className: "mb-8 flex flex-wrap gap-x-8 gap-y-4 md:mb-12", children: metatags.map((tag, index) => /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold", children: tag.label }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm", children: tag.value })
+    ] }, index)) }),
+    /* @__PURE__ */ jsx("h2", { className: "rb-5 mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl", children: heading }),
+    mediaPosition === "top" && mediaElement && /* @__PURE__ */ jsx("div", { className: "mb-8 md:mb-12", children: mediaElement }),
+    /* @__PURE__ */ jsx("div", { className: cn("prose", isTwoColumn && "md:columns-2 md:gap-x-12"), dangerouslySetInnerHTML: { __html: prose ?? "" } }),
+    mediaPosition === "bottom" && mediaElement && /* @__PURE__ */ jsx("div", { className: "mt-8 md:mt-12", children: mediaElement })
+  ] }) }) });
+};
+const ProseContentDefaults = {
+  heading: "Short heading goes here",
+  prose: `<p>Morbi sed imperdiet in ipsum, adipiscing elit dui lectus. Tellus id scelerisque est ultricies ultricies. Duis est sit sed leo nisl, blandit elit sagittis. Quisque tristique consequat quam sed. Nisl at scelerisque amet nulla purus habitasse.</p><p>Nunc sed faucibus bibendum feugiat sed interdum. Ipsum egestas condimentum mi massa. In tincidunt pharetra consectetur sed duis facilisis metus. Etiam egestas in nec sed et. Quis lobortis at sit dictum eget nibh tortor commodo cursus.</p><p>Odio felis sagittis, morbi feugiat tortor vitae feugiat fusce aliquet. Nam elementum urna nisi aliquet erat dolor enim. Ornare id morbi eget ipsum. Aliquam senectus neque ut id eget consectetur dictum. Donec posuere pharetra odio consequat scelerisque et, nunc tortor. Nulla adipiscing erat a erat. Condimentum lorem posuere gravida enim posuere cursus diam.</p>`,
+  metatags: [
+    { label: "Author", value: "John Doe" },
+    { label: "Date", value: "Jan 1, 2024" },
+    { label: "Category", value: "Design" }
+  ],
+  mediaImage: {
+    src: "https://picsum.photos/seed/prose-media/1200/600",
+    alt: "Relume placeholder image"
+  },
+  video: "https://www.youtube.com/embed/8DKLYsikxTs?si=Ch9W0KrDWWUiCMMW",
+  styles: {
+    textLayout: "single",
+    mediaType: "none",
+    mediaPosition: "bottom",
+    hasMetatags: false
+  }
+};
+export {
+  ProseContent,
+  ProseContentDefaults
+};

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

@@ -0,0 +1,141 @@
+import { ProseContent, ProseContentDefaults } from "./component";
+import type { ProseContentProps } from "./component";
+export { ProseContent, ProseContentDefaults };
+export type { ProseContentProps };
+declare const conf: {
+    fields: {
+        heading: {
+            readonly type: "text";
+            readonly contentEditable: true;
+        };
+        prose: {
+            type: string;
+        };
+        metatags: {
+            type: string;
+            getItemSummary: (item: {
+                label?: string;
+            }, index?: number) => string;
+            arrayFields: {
+                label: {
+                    type: string;
+                };
+                value: {
+                    type: string;
+                };
+            };
+        };
+        mediaImage: {
+            type: "object";
+            objectFields: {
+                src: import("@puckeditor/core").Field<string>;
+                alt: {
+                    type: "text";
+                };
+            };
+        };
+        video: {
+            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.";
+                    };
+                };
+                textLayout: {
+                    readonly type: "select";
+                    readonly label: "Text Layout";
+                    readonly options: readonly [{
+                        readonly label: "Single Left";
+                        readonly value: "singleLeft";
+                    }, {
+                        readonly label: "Single Center";
+                        readonly value: "singleCenter";
+                    }, {
+                        readonly label: "Two Column";
+                        readonly value: "twoColumn";
+                    }, {
+                        readonly label: "Single Prose";
+                        readonly value: "single";
+                    }, {
+                        readonly label: "Two Column Prose";
+                        readonly value: "twoColumnProse";
+                    }];
+                };
+                mediaType: {
+                    readonly type: "radio";
+                    readonly label: "Media Type";
+                    readonly options: readonly [{
+                        readonly label: "None";
+                        readonly value: "none";
+                    }, {
+                        readonly label: "Image";
+                        readonly value: "image";
+                    }, {
+                        readonly label: "Video";
+                        readonly value: "video";
+                    }];
+                };
+                mediaPosition: {
+                    readonly type: "radio";
+                    readonly label: "Media Position";
+                    readonly options: readonly [{
+                        readonly label: "Left";
+                        readonly value: "left";
+                    }, {
+                        readonly label: "Right";
+                        readonly value: "right";
+                    }, {
+                        readonly label: "Top";
+                        readonly value: "top";
+                    }, {
+                        readonly label: "Bottom";
+                        readonly value: "bottom";
+                    }];
+                };
+                hasMetatags: {
+                    readonly type: "radio";
+                    readonly label: "Show Metatags";
+                    readonly options: readonly [{
+                        readonly label: "Yes";
+                        readonly value: "true";
+                    }, {
+                        readonly label: "No";
+                        readonly value: "false";
+                    }];
+                };
+            };
+        };
+    };
+    defaultProps: Partial<import("../props").TextSectionBaseProps> & {
+        prose: string;
+        metatags?: {
+            label: string;
+            value: string;
+        }[];
+        mediaImage?: import("@/components/puck-core/core/props/media").BaseImage;
+    };
+    render: (props: ProseContentProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default conf;

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

@@ -0,0 +1,39 @@
+import { ProseContent, ProseContentDefaults } from "./component.js";
+import { headingField } from "../../../puck-core/core/props/content.js";
+import { imageField } from "../../../puck-core/core/props/media.js";
+import { textStyleFields } from "../props.js";
+import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
+const conf = {
+  fields: {
+    heading: headingField,
+    prose: { type: "textarea" },
+    metatags: {
+      type: "array",
+      getItemSummary: (item, index = 0) => item.label || `Metatag ${index + 1}`,
+      arrayFields: {
+        label: { type: "text" },
+        value: { type: "text" }
+      }
+    },
+    mediaImage: imageField,
+    video: { type: "text" },
+    styles: {
+      type: "object",
+      label: "Styles",
+      objectFields: {
+        textLayout: textStyleFields.textLayout,
+        mediaType: textStyleFields.mediaType,
+        mediaPosition: textStyleFields.mediaPosition,
+        hasMetatags: textStyleFields.hasMetatags,
+        ...sectionWrapperFields
+      }
+    }
+  },
+  defaultProps: ProseContentDefaults,
+  render: ProseContent
+};
+export {
+  ProseContent,
+  ProseContentDefaults,
+  conf as default
+};

package/dist/components/puck-block/text-sections/prose-sidebar/component.d.ts

@@ -0,0 +1,27 @@
+import type { TextComponentProps, TextSectionBaseProps, BaseButton, BaseImage } from "../props";
+type SubscribeBlock = {
+    title: string;
+    description: string;
+    inputPlaceholder?: string;
+    button: BaseButton;
+    termsAndConditions: string;
+};
+type Contributor = {
+    name: string;
+    role: string;
+    avatar: BaseImage;
+};
+type SocialLink = {
+    platform: string;
+    url: string;
+};
+type ProseSidebarExtra = {
+    prose: string;
+    subscribe: SubscribeBlock;
+    contributors?: Contributor[];
+    socialLinks?: SocialLink[];
+};
+export type ProseSidebarProps = TextComponentProps<ProseSidebarExtra>;
+export declare const ProseSidebar: (props: ProseSidebarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ProseSidebarDefaults: Partial<TextSectionBaseProps> & ProseSidebarExtra;
+export {};