dune-react 0.0.18 → 0.0.20

package/dist/components/puck-block/showcase-sections/zigzag-timeline/component.js

@@ -0,0 +1,117 @@
+"use client";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useRef } from "react";
+import { CompoundButton } from "../../../puck-base/button.js";
+import { CompoundImage } from "../../../puck-base/image.js";
+import { useScroll, useTransform, motion } from "framer-motion";
+import { cn } from "../../../../utils/css-utils.js";
+const ZigzagTimeline = (props) => {
+  const {
+    tagline,
+    heading,
+    description,
+    buttons = [],
+    timelineItems = [],
+    styles
+  } = {
+    ...ZigzagTimelineDefaults,
+    ...props
+  };
+  const {
+    bordered = false,
+    hasImage = false
+  } = styles ?? {};
+  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("div", { className: "flex flex-col items-center", children: [
+    /* @__PURE__ */ jsx("div", { className: "mb-12 text-center md:mb-18 lg:mb-20", children: /* @__PURE__ */ jsxs("div", { className: "relative z-10 w-full max-w-lg", children: [
+      /* @__PURE__ */ jsx("p", { className: "mb-3 font-semibold md:mb-4", children: tagline }),
+      /* @__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 }),
+      /* @__PURE__ */ jsx("div", { className: "mt-6 flex items-center justify-center gap-x-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)) })
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: "relative grid grid-cols-1 justify-items-center gap-12 md:gap-20", children: [
+      /* @__PURE__ */ jsxs("div", { className: "absolute flex h-full w-8 flex-col items-center justify-self-start md:justify-self-auto", children: [
+        /* @__PURE__ */ jsx("div", { className: "absolute z-10 h-16 w-1 bg-gradient-to-b from-background-primary to-transparent" }),
+        /* @__PURE__ */ jsx("div", { className: "sticky top-0 mt-[-50vh] h-[50vh] w-[3px] bg-neutral-black" }),
+        /* @__PURE__ */ jsx("div", { className: "h-full w-[3px] bg-neutral-lighter" }),
+        /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 z-0 h-16 w-1 bg-gradient-to-b from-transparent to-background-primary" }),
+        /* @__PURE__ */ jsx("div", { className: "absolute top-[-50vh] h-[50vh] w-full bg-background-primary" })
+      ] }),
+      timelineItems.map((item, index) => /* @__PURE__ */ jsx(ZigzagEntry, { index, item, bordered, hasImage }, index))
+    ] })
+  ] }) }) });
+};
+const ZigzagEntry = ({
+  item,
+  index,
+  bordered,
+  hasImage
+}) => {
+  const isEven = index % 2 === 0;
+  const circleRef = useRef(null);
+  const { scrollYProgress } = useScroll({
+    target: circleRef,
+    offset: ["end end", "end center"]
+  });
+  const backgroundColor = {
+    backgroundColor: useTransform(scrollYProgress, [0.85, 1], ["#ccc", "#000"])
+  };
+  const content = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "z-20 mt-4 flex w-full flex-col md:w-auto",
+        !isEven && "items-start text-left md:items-end md:text-right",
+        bordered && "border border-border-primary p-6 md:p-8"
+      ),
+      children: [
+        /* @__PURE__ */ jsx("h3", { className: "mb-5 text-4xl font-bold leading-[1.2] md:mb-6 md:text-5xl lg:text-6xl", children: item.heading }),
+        /* @__PURE__ */ jsx("h4", { className: "mb-3 text-xl font-bold md:mb-4 md:text-2xl", children: item.title }),
+        /* @__PURE__ */ jsx("p", { children: item.description }),
+        hasImage && item.image && /* @__PURE__ */ jsx("div", { className: "mt-6 w-full", children: /* @__PURE__ */ jsx(CompoundImage, { src: item.image.src, alt: item.image.alt, className: "w-full object-cover" }) }),
+        /* @__PURE__ */ jsx("div", { className: "mt-6 flex flex-wrap items-center gap-4 md:mt-8", children: item.buttons.map((button, bIndex) => /* @__PURE__ */ jsx(CompoundButton, { label: button.label, variant: button.variant, size: button.size, action: button.action, icon: button.icon }, bIndex)) })
+      ]
+    }
+  );
+  const circle = /* @__PURE__ */ jsx("div", { className: cn("flex h-full w-8 justify-center", !isEven && "order-first md:order-none"), children: /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      ref: circleRef,
+      style: backgroundColor,
+      className: "z-20 mt-7 size-[0.9375rem] rounded-full shadow-[0_0_0_8px_white] md:mt-8"
+    }
+  ) });
+  return /* @__PURE__ */ jsx("div", { className: "grid grid-cols-[max-content_1fr] items-start justify-items-center gap-4 md:grid-cols-[1fr_max-content_1fr] md:gap-8 lg:gap-12", children: isEven ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "hidden w-full md:block" }),
+    circle,
+    content
+  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    content,
+    circle,
+    /* @__PURE__ */ jsx("div", { className: "hidden w-full md:block" })
+  ] }) });
+};
+const defaultItem = {
+  heading: "Date",
+  title: "Short heading 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.",
+  buttons: [{ label: "Button", variant: "secondary" }, { label: "Button", variant: "link" }],
+  image: {
+    src: "https://picsum.photos/seed/timeline-zigzag/600/400",
+    alt: "Timeline image"
+  }
+};
+const ZigzagTimelineDefaults = {
+  tagline: "Tagline",
+  heading: "Medium length section 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.",
+  buttons: [{ label: "Button" }, { label: "Button", variant: "secondary" }],
+  timelineItems: [defaultItem, defaultItem, defaultItem, defaultItem],
+  styles: {
+    bordered: false,
+    hasImage: false
+  }
+};
+export {
+  ZigzagTimeline,
+  ZigzagTimelineDefaults
+};

package/dist/components/puck-block/showcase-sections/zigzag-timeline/index.d.ts

@@ -0,0 +1,242 @@
+import { ZigzagTimeline, ZigzagTimelineDefaults } from "./component";
+import type { ZigzagTimelineProps } from "./component";
+export { ZigzagTimeline, ZigzagTimelineDefaults };
+export type { ZigzagTimelineProps };
+declare const conf: {
+    fields: {
+        tagline: {
+            type: string;
+        };
+        heading: {
+            readonly type: "text";
+            readonly contentEditable: true;
+        };
+        description: {
+            readonly type: "textarea";
+            readonly contentEditable: true;
+        };
+        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";
+            };
+        };
+        timelineItems: {
+            type: string;
+            getItemSummary: (item: {
+                title?: string;
+            }, index?: number) => string;
+            arrayFields: {
+                heading: {
+                    type: string;
+                };
+                title: {
+                    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";
+                    };
+                };
+                image: {
+                    type: "object";
+                    objectFields: {
+                        src: import("@puckeditor/core").Field<string>;
+                        alt: {
+                            type: "text";
+                        };
+                    };
+                };
+            };
+        };
+        styles: {
+            type: string;
+            label: string;
+            objectFields: {
+                bordered: {
+                    readonly type: "radio";
+                    readonly label: "Bordered";
+                    readonly options: readonly [{
+                        readonly label: "Yes";
+                        readonly value: "true";
+                    }, {
+                        readonly label: "No";
+                        readonly value: "false";
+                    }];
+                };
+                hasImage: {
+                    readonly type: "radio";
+                    readonly label: "Show Images";
+                    readonly options: readonly [{
+                        readonly label: "Yes";
+                        readonly value: "true";
+                    }, {
+                        readonly label: "No";
+                        readonly value: "false";
+                    }];
+                };
+            };
+        };
+    };
+    defaultProps: Partial<import("../props").ShowcaseSectionBaseProps> & {
+        timelineItems: {
+            heading: string;
+            title: string;
+            description: string;
+            buttons: import("@/components/puck-core/core/props/interactive").BaseButton[];
+            image?: import("@/components/puck-core/core/props/media").BaseImage;
+        }[];
+    };
+    render: (props: ZigzagTimelineProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default conf;

package/dist/components/puck-block/showcase-sections/zigzag-timeline/index.js

@@ -0,0 +1,39 @@
+import { ZigzagTimeline, ZigzagTimelineDefaults } from "./component.js";
+import { descriptionField, headingField } from "../../../puck-core/core/props/content.js";
+import { buttonsField } from "../../../puck-core/core/props/interactive.js";
+import { imageField } from "../../../puck-core/core/props/media.js";
+import { showcaseStyleFields } from "../props.js";
+const conf = {
+  fields: {
+    tagline: { type: "text" },
+    heading: headingField,
+    description: descriptionField,
+    buttons: buttonsField,
+    timelineItems: {
+      type: "array",
+      getItemSummary: (item, index = 0) => item.title || `Item ${index + 1}`,
+      arrayFields: {
+        heading: { type: "text" },
+        title: { type: "text" },
+        description: { type: "textarea" },
+        buttons: buttonsField,
+        image: imageField
+      }
+    },
+    styles: {
+      type: "object",
+      label: "Styles",
+      objectFields: {
+        bordered: showcaseStyleFields.bordered,
+        hasImage: showcaseStyleFields.hasImage
+      }
+    }
+  },
+  defaultProps: ZigzagTimelineDefaults,
+  render: ZigzagTimeline
+};
+export {
+  ZigzagTimeline,
+  ZigzagTimelineDefaults,
+  conf as default
+};

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

@@ -0,0 +1,5 @@
+export { default as TeamCarouselConf } from "./team-carousel";
+export { default as TeamGridConf } from "./team-grid";
+export { default as TeamInlineCardConf } from "./team-inline-card";
+export { default as TeamStickyScatterConf } from "./team-sticky-scatter";
+export { default as TeamTwoColumnConf } from "./team-two-column";

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

@@ -1,39 +1,98 @@
-type TeamVariant = "team-grid-1" | "team-grid-2" | "team-profiles-1";
-type TeamPadding = {
-    top?: "none" | "small" | "medium" | "large";
-    bottom?: "none" | "small" | "medium" | "large";
-};
-type TeamSectionStyle = "default" | "dark" | "muted" | "inverted" | "custom";
-type TeamButton = {
-    label: string;
-    url?: string;
-    variant?: "default" | "secondary" | "outline" | "ghost" | "link" | "destructive";
-    size?: "default" | "sm" | "lg" | "icon";
-    icon?: string;
-};
-type TeamImage = {
-    src: string;
-    alt?: string;
-};
-type TeamMember = {
-    name: string;
-    role: string;
-    image?: TeamImage;
-    description?: string;
-    instagramUrl?: string;
-    linkedinUrl?: string;
-};
-type TeamSectionProps = {
-    variant?: TeamVariant;
-    heading?: string;
-    description?: string;
-    buttons?: TeamButton[];
-    members?: TeamMember[];
-    columns?: 2 | 3 | 4;
-    layout?: "card" | "simple" | "round";
-    styles?: {
-        padding?: TeamPadding;
-        sectionStyle?: TeamSectionStyle;
-        backgroundColor?: string;
+/**
+ * Team Section 共享 Props
+ *
+ * 基础类型引用自 ../props/（全局共享）
+ * TeamSectionStyles 为 team 特有的样式字段
+ */
+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 TeamSectionStyles {
+    textAlign?: "left" | "center";
+    gridColumns?: 2 | 3 | 4;
+    imageShape?: "circle" | "square";
+    hasFooter?: boolean;
+    cardLayout?: "vertical" | "horizontal";
+    memberGridColumns?: 1 | 2;
+}
+export interface TeamSectionBaseProps {
+    tagline: string;
+    heading: string;
+    description: string;
+    buttons: BaseButton[];
+    styles: TeamSectionStyles;
+}
+/** 各 styles 字段的 Puck field 选项 */
+export declare const teamStyleFields: {
+    readonly textAlign: {
+        readonly type: "radio";
+        readonly label: "Text Align";
+        readonly options: readonly [{
+            readonly label: "Left";
+            readonly value: "left";
+        }, {
+            readonly label: "Center";
+            readonly value: "center";
+        }];
+    };
+    readonly gridColumns: {
+        readonly type: "radio";
+        readonly label: "Grid Columns";
+        readonly options: readonly [{
+            readonly label: "2";
+            readonly value: "2";
+        }, {
+            readonly label: "3";
+            readonly value: "3";
+        }, {
+            readonly label: "4";
+            readonly value: "4";
+        }];
+    };
+    readonly imageShape: {
+        readonly type: "radio";
+        readonly label: "Image Shape";
+        readonly options: readonly [{
+            readonly label: "Circle";
+            readonly value: "circle";
+        }, {
+            readonly label: "Square";
+            readonly value: "square";
+        }];
+    };
+    readonly hasFooter: {
+        readonly type: "radio";
+        readonly label: "Has Footer";
+        readonly options: readonly [{
+            readonly label: "Yes";
+            readonly value: "true";
+        }, {
+            readonly label: "No";
+            readonly value: "false";
+        }];
+    };
+    readonly cardLayout: {
+        readonly type: "radio";
+        readonly label: "Card Layout";
+        readonly options: readonly [{
+            readonly label: "Vertical";
+            readonly value: "vertical";
+        }, {
+            readonly label: "Horizontal";
+            readonly value: "horizontal";
+        }];
+    };
+    readonly memberGridColumns: {
+        readonly type: "radio";
+        readonly label: "Member Grid Columns";
+        readonly options: readonly [{
+            readonly label: "1";
+            readonly value: "1";
+        }, {
+            readonly label: "2";
+            readonly value: "2";
+        }];
     };
 };
+/** 将 TeamSectionBaseProps 与组件特有字段合并，生成最终 Props */
+export type TeamComponentProps<T extends object = object> = React.ComponentPropsWithoutRef<"section"> & Partial<TeamSectionBaseProps> & Partial<T>;

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

@@ -0,0 +1,54 @@
+const teamStyleFields = {
+  textAlign: {
+    type: "radio",
+    label: "Text Align",
+    options: [
+      { label: "Left", value: "left" },
+      { label: "Center", value: "center" }
+    ]
+  },
+  gridColumns: {
+    type: "radio",
+    label: "Grid Columns",
+    options: [
+      { label: "2", value: "2" },
+      { label: "3", value: "3" },
+      { label: "4", value: "4" }
+    ]
+  },
+  imageShape: {
+    type: "radio",
+    label: "Image Shape",
+    options: [
+      { label: "Circle", value: "circle" },
+      { label: "Square", value: "square" }
+    ]
+  },
+  hasFooter: {
+    type: "radio",
+    label: "Has Footer",
+    options: [
+      { label: "Yes", value: "true" },
+      { label: "No", value: "false" }
+    ]
+  },
+  cardLayout: {
+    type: "radio",
+    label: "Card Layout",
+    options: [
+      { label: "Vertical", value: "vertical" },
+      { label: "Horizontal", value: "horizontal" }
+    ]
+  },
+  memberGridColumns: {
+    type: "radio",
+    label: "Member Grid Columns",
+    options: [
+      { label: "1", value: "1" },
+      { label: "2", value: "2" }
+    ]
+  }
+};
+export {
+  teamStyleFields
+};

package/dist/components/puck-block/team-sections/team-carousel/component.d.ts

@@ -0,0 +1,25 @@
+import type { TeamComponentProps, BaseImage, BaseButton } from "../props";
+type SocialLink = {
+    href: string;
+    icon: React.ReactNode;
+};
+type TeamMember = {
+    image: BaseImage;
+    name: string;
+    jobTitle: string;
+    description: string;
+    socialLinks: SocialLink[];
+};
+type Footer = {
+    heading: string;
+    description: string;
+    button: BaseButton;
+};
+type TeamCarouselExtra = {
+    teamMembers: TeamMember[];
+    footer: Footer;
+};
+export type TeamCarouselProps = TeamComponentProps<TeamCarouselExtra>;
+export declare const TeamCarousel: (props: TeamCarouselProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TeamCarouselDefaults: TeamCarouselProps;
+export {};