dune-react 0.0.18 → 0.0.20

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

@@ -0,0 +1,224 @@
+import { FeatureListSplit, FeatureListSplitDefaults } from "./component";
+import type { FeatureListSplitProps } from "./component";
+export { FeatureListSplit, FeatureListSplitDefaults };
+export type { FeatureListSplitProps };
+declare const conf: {
+    fields: {
+        featureSections: {
+            type: string;
+            getItemSummary: (item: {
+                heading?: string;
+            }, index?: number) => string;
+            arrayFields: {
+                icon: {
+                    type: "object";
+                    objectFields: {
+                        src: import("@puckeditor/core").Field<string>;
+                        alt: {
+                            type: "text";
+                        };
+                    };
+                };
+                heading: {
+                    type: string;
+                };
+                description: {
+                    type: string;
+                };
+                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";
+                    };
+                };
+            };
+        };
+        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";
+            };
+        };
+        image: {
+            type: "object";
+            objectFields: {
+                src: import("@puckeditor/core").Field<string>;
+                alt: {
+                    type: "text";
+                };
+            };
+        };
+        video: {
+            type: string;
+        };
+        styles: {
+            type: string;
+            label: string;
+            objectFields: {
+                mediaType: {
+                    readonly type: "radio";
+                    readonly label: "Media Type";
+                    readonly options: readonly [{
+                        readonly label: "Image";
+                        readonly value: "image";
+                    }, {
+                        readonly label: "Video";
+                        readonly value: "video";
+                    }, {
+                        readonly label: "Play Button";
+                        readonly value: "play";
+                    }];
+                };
+            };
+        };
+    };
+    defaultProps: FeatureListSplitProps;
+    render: (props: FeatureListSplitProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default conf;

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

@@ -0,0 +1,35 @@
+import { FeatureListSplit, FeatureListSplitDefaults } from "./component.js";
+import { buttonsField } from "../../../puck-core/core/props/interactive.js";
+import { imageField } from "../../../puck-core/core/props/media.js";
+import { featureStyleFields } from "../props.js";
+const conf = {
+  fields: {
+    featureSections: {
+      type: "array",
+      getItemSummary: (item, index = 0) => item.heading || `Feature ${index + 1}`,
+      arrayFields: {
+        icon: imageField,
+        heading: { type: "text" },
+        description: { type: "textarea" },
+        buttons: buttonsField
+      }
+    },
+    buttons: buttonsField,
+    image: imageField,
+    video: { type: "text" },
+    styles: {
+      type: "object",
+      label: "Styles",
+      objectFields: {
+        mediaType: featureStyleFields.mediaType
+      }
+    }
+  },
+  defaultProps: FeatureListSplitDefaults,
+  render: FeatureListSplit
+};
+export {
+  FeatureListSplit,
+  FeatureListSplitDefaults,
+  conf as default
+};

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

@@ -0,0 +1,5 @@
+export { default as FeatureCardsGridConf } from "./feature-cards-grid";
+export { default as FeatureListSplitConf } from "./feature-list-split";
+export { default as TabFeatureConf } from "./tab-feature";
+export { default as TextMediaSplitConf } from "./text-media-split";
+export { default as TextOnlySectionConf } from "./text-only-section";

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

@@ -1,48 +1,147 @@
-type FeatureVariant = "bento-1" | "feature-cards-1" | "feature-showcase-1" | "icon-grid-1" | "product-features-1";
-type FeaturePadding = {
-    top?: "none" | "small" | "medium" | "large";
-    bottom?: "none" | "small" | "medium" | "large";
-};
-type FeatureSectionStyle = "default" | "dark" | "muted" | "inverted" | "custom";
-type FeatureButton = {
-    label: string;
-    url?: string;
-    variant?: "default" | "secondary" | "outline" | "ghost" | "link" | "destructive";
-    size?: "default" | "sm" | "lg" | "icon";
-    icon?: string;
-};
-type FeatureImage = {
-    src: string;
-    alt?: string;
-};
-type FeatureItem = {
-    title?: string;
-    name?: string;
-    description?: string;
-    icon?: string;
-    image?: FeatureImage;
-};
-type FeatureCard = {
-    title?: string;
-    description?: string;
-    image?: FeatureImage;
-    badge?: string;
-    icon?: string;
-    href?: string;
-};
-type FeatureSectionProps = {
-    variant?: FeatureVariant;
-    heading?: string;
-    description?: string;
-    buttons?: FeatureButton[];
-    features?: FeatureItem[];
-    cards?: FeatureCard[];
-    image?: FeatureImage;
-    layout?: "image-left" | "image-right" | "grid" | "alternating" | "list";
-    columns?: 1 | 2 | 3 | 4;
-    styles?: {
-        padding?: FeaturePadding;
-        sectionStyle?: FeatureSectionStyle;
-        backgroundColor?: string;
+/**
+ * Feature Section 共享 Props
+ *
+ * 基础类型引用自 ../props/（全局共享）
+ * FeatureSectionStyles 为 feature 特有的样式字段
+ */
+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 FeatureSectionStyles {
+    mediaType?: "image" | "video" | "play";
+    textLayout?: "single" | "twoColumn";
+    bgMedia?: "none" | "image" | "video";
+    contentSlots?: "default" | "subHeadings" | "subHeadingsInlineIcon" | "subHeadingsBlockIcon" | "logos" | "checklist" | "bulletList" | "icon" | "stats";
+    featureCardLayout?: "grid" | "list";
+    bordered?: boolean;
+    hasTagline?: boolean;
+    hasButtons?: boolean;
+}
+export interface FeatureSectionBaseProps {
+    tagline: string;
+    heading: string;
+    description: string;
+    buttons: BaseButton[];
+    image: BaseImage;
+    video: string;
+    styles: FeatureSectionStyles;
+}
+export declare const featureStyleFields: {
+    readonly mediaType: {
+        readonly type: "radio";
+        readonly label: "Media Type";
+        readonly options: readonly [{
+            readonly label: "Image";
+            readonly value: "image";
+        }, {
+            readonly label: "Video";
+            readonly value: "video";
+        }, {
+            readonly label: "Play Button";
+            readonly value: "play";
+        }];
+    };
+    readonly textLayout: {
+        readonly type: "radio";
+        readonly label: "Text Layout";
+        readonly options: readonly [{
+            readonly label: "Single";
+            readonly value: "single";
+        }, {
+            readonly label: "Two Column";
+            readonly value: "twoColumn";
+        }];
+    };
+    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 contentSlots: {
+        readonly type: "select";
+        readonly label: "Content Slots";
+        readonly options: readonly [{
+            readonly label: "Default";
+            readonly value: "default";
+        }, {
+            readonly label: "Sub Headings";
+            readonly value: "subHeadings";
+        }, {
+            readonly label: "Inline Icon + Text";
+            readonly value: "subHeadingsInlineIcon";
+        }, {
+            readonly label: "Block Icon + Text";
+            readonly value: "subHeadingsBlockIcon";
+        }, {
+            readonly label: "Logos";
+            readonly value: "logos";
+        }, {
+            readonly label: "Checklist";
+            readonly value: "checklist";
+        }, {
+            readonly label: "Bullet List";
+            readonly value: "bulletList";
+        }, {
+            readonly label: "Icon";
+            readonly value: "icon";
+        }, {
+            readonly label: "Stats";
+            readonly value: "stats";
+        }];
+    };
+    readonly featureCardLayout: {
+        readonly type: "radio";
+        readonly label: "Feature Card Layout";
+        readonly options: readonly [{
+            readonly label: "Grid";
+            readonly value: "grid";
+        }, {
+            readonly label: "List";
+            readonly value: "list";
+        }];
+    };
+    readonly bordered: {
+        readonly type: "radio";
+        readonly label: "Bordered";
+        readonly options: readonly [{
+            readonly label: "Yes";
+            readonly value: "true";
+        }, {
+            readonly label: "No";
+            readonly value: "false";
+        }];
+    };
+    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 hasButtons: {
+        readonly type: "radio";
+        readonly label: "Show Buttons";
+        readonly options: readonly [{
+            readonly label: "Yes";
+            readonly value: "true";
+        }, {
+            readonly label: "No";
+            readonly value: "false";
+        }];
     };
 };
+/** 将 FeatureSectionBaseProps 与组件特有字段合并，生成最终 Props */
+export type FeatureComponentProps<T extends object = object> = React.ComponentPropsWithoutRef<"section"> & Partial<FeatureSectionBaseProps> & Partial<T>;

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

@@ -0,0 +1,62 @@
+const featureStyleFields = {
+  mediaType: {
+    type: "radio",
+    label: "Media Type",
+    options: [
+      { label: "Image", value: "image" },
+      { label: "Video", value: "video" },
+      { label: "Play Button", value: "play" }
+    ]
+  },
+  textLayout: {
+    type: "radio",
+    label: "Text Layout",
+    options: [
+      { label: "Single", value: "single" },
+      { label: "Two Column", value: "twoColumn" }
+    ]
+  },
+  bgMedia: {
+    type: "radio",
+    label: "Background Media",
+    options: [
+      { label: "None", value: "none" },
+      { label: "Image", value: "image" },
+      { label: "Video", value: "video" }
+    ]
+  },
+  contentSlots: {
+    type: "select",
+    label: "Content Slots",
+    options: [
+      { label: "Default", value: "default" },
+      { label: "Sub Headings", value: "subHeadings" },
+      { label: "Inline Icon + Text", value: "subHeadingsInlineIcon" },
+      { label: "Block Icon + Text", value: "subHeadingsBlockIcon" },
+      { label: "Logos", value: "logos" },
+      { label: "Checklist", value: "checklist" },
+      { label: "Bullet List", value: "bulletList" },
+      { label: "Icon", value: "icon" },
+      { label: "Stats", value: "stats" }
+    ]
+  },
+  hasTagline: {
+    type: "radio",
+    label: "Show Tagline",
+    options: [
+      { label: "Yes", value: "true" },
+      { label: "No", value: "false" }
+    ]
+  },
+  hasButtons: {
+    type: "radio",
+    label: "Show Buttons",
+    options: [
+      { label: "Yes", value: "true" },
+      { label: "No", value: "false" }
+    ]
+  }
+};
+export {
+  featureStyleFields
+};

package/dist/components/puck-block/feature-sections/tab-feature/component.d.ts

@@ -0,0 +1,16 @@
+import type { FeatureComponentProps, BaseImage } from "../props";
+type TabItem = {
+    value: string;
+    heading: string;
+    description: string;
+    image?: BaseImage;
+    videoUrl?: string;
+};
+type TabFeatureExtra = {
+    defaultTabValue: string;
+    tabs: TabItem[];
+};
+export type TabFeatureProps = FeatureComponentProps<TabFeatureExtra>;
+export declare const TabFeature: (props: TabFeatureProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TabFeatureDefaults: TabFeatureProps;
+export {};

package/dist/components/puck-block/feature-sections/tab-feature/component.js

@@ -0,0 +1,121 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Dialog, DialogTrigger, DialogContent } from "../../../shadcn/dialog.js";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "../../../shadcn/tabs.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";
+const TabFeature = (props) => {
+  const { defaultTabValue, tabs = [] } = {
+    ...TabFeatureDefaults,
+    ...props
+  };
+  const [isIframeLoaded, setIsIframeLoaded] = useState(false);
+  return /* @__PURE__ */ jsx("section", { id: "relume", className: "px-[5%] py-16 md:py-24 lg:py-28", children: /* @__PURE__ */ jsx("div", { className: "container", children: /* @__PURE__ */ jsxs(
+    Tabs,
+    {
+      defaultValue: defaultTabValue,
+      className: "grid grid-cols-1 items-center gap-y-12 md:grid-cols-2 md:gap-x-12 lg:gap-x-20",
+      children: [
+        /* @__PURE__ */ jsx(TabsList, { className: "col-start-1 col-end-2 row-start-1 row-end-2 grid grid-cols-1 items-center gap-x-4 gap-y-10", children: tabs.map((tab) => /* @__PURE__ */ jsxs(
+          TabsTrigger,
+          {
+            value: tab.value,
+            className: "flex-col items-start justify-start whitespace-normal border-0 border-l-2 border-transparent py-0 pl-8 pr-0 text-left data-[state=active]:border-black data-[state=active]:bg-transparent data-[state=active]:text-text-primary",
+            children: [
+              /* @__PURE__ */ jsx("h3", { className: "mb-3 text-2xl font-bold md:mb-4 md:text-3xl md:leading-[1.3] lg:text-4xl", children: tab.heading }),
+              /* @__PURE__ */ jsx("p", { children: tab.description })
+            ]
+          },
+          tab.value
+        )) }),
+        /* @__PURE__ */ jsx("div", { className: "max-size-full flex items-center justify-center overflow-hidden", children: tabs.map((tab) => /* @__PURE__ */ jsxs(
+          TabsContent,
+          {
+            value: tab.value,
+            className: "data-[state=active]:animate-tabs",
+            children: [
+              tab.image && !tab.videoUrl && /* @__PURE__ */ jsx(
+                CompoundImage,
+                {
+                  src: tab.image.src,
+                  alt: tab.image.alt,
+                  className: "size-full object-cover"
+                }
+              ),
+              tab.videoUrl && tab.image && /* @__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: tab.image.src,
+                      alt: tab.image.alt,
+                      className: "size-full object-cover"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(FaCirclePlay, { className: "absolute z-20 size-16 text-white" }),
+                  /* @__PURE__ */ jsx("span", { className: "absolute inset-0 z-10 bg-black/50" })
+                ] }) }),
+                /* @__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: tab.videoUrl,
+                      allow: "autoplay; encrypted-media; picture-in-picture",
+                      allowFullScreen: true,
+                      onLoad: () => setIsIframeLoaded(true)
+                    }
+                  )
+                ] })
+              ] })
+            ]
+          },
+          tab.value
+        )) })
+      ]
+    }
+  ) }) });
+};
+const TabFeatureDefaults = {
+  defaultTabValue: "tab-1",
+  tabs: [
+    {
+      value: "tab-1",
+      heading: "Short heading goes here",
+      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.",
+      image: {
+        src: "https://picsum.photos/seed/tab-feature1/800/600",
+        alt: "Relume placeholder image 1"
+      }
+    },
+    {
+      value: "tab-2",
+      heading: "Short heading goes here",
+      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.",
+      image: {
+        src: "https://picsum.photos/seed/tab-feature2/800/600",
+        alt: "Relume placeholder image 2"
+      }
+    },
+    {
+      value: "tab-3",
+      heading: "Short heading goes here",
+      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.",
+      image: {
+        src: "https://picsum.photos/seed/tab-feature3/800/600",
+        alt: "Relume placeholder image 3"
+      }
+    }
+  ]
+};
+export {
+  TabFeature,
+  TabFeatureDefaults
+};