dune-react 0.0.18 → 0.0.20

package/dist/components/puck-block/testimonial-sections/masonry-testimonial/component.d.ts

@@ -0,0 +1,16 @@
+import type { TestimonialComponentProps, BaseImage } from "../props";
+type Testimonial = {
+    quote: string;
+    avatar: BaseImage;
+    name: string;
+    position: string;
+    companyName: string;
+    numberOfStars: number;
+};
+type MasonryTestimonialExtra = {
+    testimonials: Testimonial[];
+};
+export type MasonryTestimonialProps = TestimonialComponentProps<MasonryTestimonialExtra>;
+export declare const MasonryTestimonial: (props: MasonryTestimonialProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MasonryTestimonialDefaults: MasonryTestimonialProps;
+export {};

package/dist/components/puck-block/testimonial-sections/masonry-testimonial/component.js

@@ -0,0 +1,71 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { BiSolidStar } from "../../../../node_modules/.pnpm/react-icons@5.6.0_react@19.2.4/node_modules/react-icons/bi/index.js";
+import { CompoundImage } from "../../../puck-base/image.js";
+const MasonryTestimonial = (props) => {
+  const {
+    heading,
+    description,
+    testimonials,
+    styles
+  } = {
+    ...MasonryTestimonialDefaults,
+    ...props
+  };
+  const { masonryColumns = 3 } = styles ?? {};
+  const columnsClass = masonryColumns === 2 ? "md:columns-2" : "md:columns-2 lg:columns-3";
+  return /* @__PURE__ */ jsx("section", { id: "relume", className: "px-[5%] py-16 md:py-24 lg:py-28", children: /* @__PURE__ */ jsxs("div", { className: "container", children: [
+    /* @__PURE__ */ jsxs("div", { className: "mx-auto mb-12 w-full max-w-lg text-center md:mb-18 lg:mb-20", children: [
+      /* @__PURE__ */ jsx("h1", { 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: `columns-1 gap-x-8 ${columnsClass}`, children: testimonials.map((testimonial2, index) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "mb-8 inline-block w-full border border-border-primary p-6 md:p-8",
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "mb-5 flex md:mb-6", children: Array(testimonial2.numberOfStars).fill(null).map((_, starIndex) => /* @__PURE__ */ jsx(BiSolidStar, { className: "mr-1 size-6" }, starIndex)) }),
+          /* @__PURE__ */ jsx("blockquote", { className: "md:text-md", children: testimonial2.quote }),
+          /* @__PURE__ */ jsxs("div", { className: "mt-5 flex w-full flex-col items-start gap-4 md:mt-6 md:w-fit md:flex-row md:items-center", children: [
+            /* @__PURE__ */ jsx(
+              CompoundImage,
+              {
+                src: testimonial2.avatar.src,
+                alt: testimonial2.avatar.alt,
+                className: "size-12 min-h-12 min-w-12 rounded-full object-cover"
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("p", { className: "font-semibold", children: testimonial2.name }),
+              /* @__PURE__ */ jsxs("p", { children: [
+                /* @__PURE__ */ jsx("span", { children: testimonial2.position }),
+                ", ",
+                /* @__PURE__ */ jsx("span", { children: testimonial2.companyName })
+              ] })
+            ] })
+          ] })
+        ]
+      },
+      index
+    )) })
+  ] }) });
+};
+const testimonial = {
+  quote: '"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare."',
+  avatar: { src: "https://picsum.photos/seed/masonry-testimonial/100/100", alt: "Testimonial avatar" },
+  name: "Name Surname",
+  position: "Position",
+  companyName: "Company name",
+  numberOfStars: 5
+};
+const MasonryTestimonialDefaults = {
+  heading: "Customer testimonials",
+  description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+  testimonials: [testimonial, testimonial, testimonial, testimonial, testimonial, testimonial],
+  styles: {
+    masonryColumns: 3
+  }
+};
+export {
+  MasonryTestimonial,
+  MasonryTestimonialDefaults
+};

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

@@ -0,0 +1,59 @@
+import { MasonryTestimonial, MasonryTestimonialDefaults } from "./component";
+import type { MasonryTestimonialProps } from "./component";
+export { MasonryTestimonial, MasonryTestimonialDefaults };
+export type { MasonryTestimonialProps };
+declare const conf: {
+    fields: {
+        heading: {
+            readonly type: "text";
+            readonly contentEditable: true;
+        };
+        description: {
+            readonly type: "textarea";
+            readonly contentEditable: true;
+        };
+        testimonials: {
+            type: string;
+            getItemSummary: (item: {
+                name?: string;
+            }, index?: number) => string;
+            arrayFields: {
+                quote: {
+                    type: string;
+                };
+                name: {
+                    type: string;
+                };
+                position: {
+                    type: string;
+                };
+                companyName: {
+                    type: string;
+                };
+                numberOfStars: {
+                    type: string;
+                };
+            };
+        };
+        styles: {
+            type: string;
+            label: string;
+            objectFields: {
+                masonryColumns: {
+                    readonly type: "radio";
+                    readonly label: "Masonry Columns";
+                    readonly options: readonly [{
+                        readonly label: "2";
+                        readonly value: "2";
+                    }, {
+                        readonly label: "3";
+                        readonly value: "3";
+                    }];
+                };
+            };
+        };
+    };
+    defaultProps: MasonryTestimonialProps;
+    render: (props: MasonryTestimonialProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default conf;

package/dist/components/puck-block/testimonial-sections/masonry-testimonial/index.js

@@ -0,0 +1,34 @@
+import { MasonryTestimonial, MasonryTestimonialDefaults } from "./component.js";
+import { descriptionField, headingField } from "../../../puck-core/core/props/content.js";
+import { testimonialStyleFields } from "../props.js";
+const conf = {
+  fields: {
+    heading: headingField,
+    description: descriptionField,
+    testimonials: {
+      type: "array",
+      getItemSummary: (item, index = 0) => item.name || `Testimonial ${index + 1}`,
+      arrayFields: {
+        quote: { type: "textarea" },
+        name: { type: "text" },
+        position: { type: "text" },
+        companyName: { type: "text" },
+        numberOfStars: { type: "number" }
+      }
+    },
+    styles: {
+      type: "object",
+      label: "Styles",
+      objectFields: {
+        masonryColumns: testimonialStyleFields.masonryColumns
+      }
+    }
+  },
+  defaultProps: MasonryTestimonialDefaults,
+  render: MasonryTestimonial
+};
+export {
+  MasonryTestimonial,
+  MasonryTestimonialDefaults,
+  conf as default
+};

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

@@ -1,34 +1,208 @@
-type TestimonialVariant = "customers-1" | "logo-marquee-1" | "logo-wall-1" | "review-section-1" | "testimonials-1";
-type TestimonialPadding = {
-    top?: "none" | "small" | "medium" | "large";
-    bottom?: "none" | "small" | "medium" | "large";
-};
-type TestimonialSectionStyle = "default" | "dark" | "muted" | "inverted" | "custom";
-type TestimonialImage = {
-    src: string;
-    alt?: string;
-};
-type TestimonialItem = {
-    title?: string;
-    quote?: string;
-    name?: string;
-    image?: TestimonialImage;
-    url?: string;
-    rating?: number;
-    company?: string;
-};
-type TestimonialSectionProps = {
-    variant?: TestimonialVariant;
-    heading?: string;
-    description?: string;
-    items?: TestimonialItem[];
-    logos?: TestimonialImage[];
-    styles?: {
-        padding?: TestimonialPadding;
-        sectionStyle?: TestimonialSectionStyle;
-        backgroundColor?: string;
-        layout?: "section" | "inline" | "grid" | "list" | "cards" | "quote";
-        speed?: "slow" | "normal" | "fast";
-        columns?: 3 | 4 | 5 | 6;
+/**
+ * Testimonial Section 共享 Props
+ *
+ * 基础类型引用自 ../props/（全局共享）
+ * TestimonialSectionStyles 为 testimonial 特有的样式字段
+ */
+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 TestimonialSectionStyles {
+    ratingType?: "logo" | "stars";
+    attributionLayout?: "stacked" | "inline";
+    textAlign?: "left" | "center";
+    gridColumns?: 2 | 3;
+    carouselColumns?: 1 | 2 | 3;
+    masonryColumns?: 2 | 3;
+    bordered?: boolean;
+    hasHeading?: boolean;
+    hasButton?: boolean;
+    hasImage?: boolean;
+    hasBackgroundCards?: boolean;
+    mediaType?: "image" | "video";
+    animation?: "stickyStack" | "parallaxScroll";
+    overflow?: "halfscreen" | "contained";
+    navStyle?: "dots-arrows" | "dots-only";
+    gridLayout?: "4x2" | "4x3";
+}
+export interface TestimonialSectionBaseProps {
+    heading: string;
+    description: string;
+    buttons: BaseButton[];
+    image: BaseImage;
+    images: BaseImage[];
+    styles: TestimonialSectionStyles;
+}
+/** 各 styles 字段的 Puck field 选项 */
+export declare const testimonialStyleFields: {
+    readonly ratingType: {
+        readonly type: "radio";
+        readonly label: "Rating Type";
+        readonly options: readonly [{
+            readonly label: "Logo";
+            readonly value: "logo";
+        }, {
+            readonly label: "Stars";
+            readonly value: "stars";
+        }];
+    };
+    readonly attributionLayout: {
+        readonly type: "radio";
+        readonly label: "Attribution Layout";
+        readonly options: readonly [{
+            readonly label: "Stacked";
+            readonly value: "stacked";
+        }, {
+            readonly label: "Inline";
+            readonly value: "inline";
+        }];
+    };
+    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 carouselColumns: {
+        readonly type: "radio";
+        readonly label: "Carousel Columns";
+        readonly options: readonly [{
+            readonly label: "1";
+            readonly value: "1";
+        }, {
+            readonly label: "2";
+            readonly value: "2";
+        }, {
+            readonly label: "3";
+            readonly value: "3";
+        }];
+    };
+    readonly masonryColumns: {
+        readonly type: "radio";
+        readonly label: "Masonry Columns";
+        readonly options: readonly [{
+            readonly label: "2";
+            readonly value: "2";
+        }, {
+            readonly label: "3";
+            readonly value: "3";
+        }];
+    };
+    readonly bordered: {
+        readonly type: "radio";
+        readonly label: "Bordered";
+        readonly options: readonly [{
+            readonly label: "Yes";
+            readonly value: "true";
+        }, {
+            readonly label: "No";
+            readonly value: "false";
+        }];
+    };
+    readonly hasHeading: {
+        readonly type: "radio";
+        readonly label: "Has Heading";
+        readonly options: readonly [{
+            readonly label: "Yes";
+            readonly value: "true";
+        }, {
+            readonly label: "No";
+            readonly value: "false";
+        }];
+    };
+    readonly hasButton: {
+        readonly type: "radio";
+        readonly label: "Has Button";
+        readonly options: readonly [{
+            readonly label: "Yes";
+            readonly value: "true";
+        }, {
+            readonly label: "No";
+            readonly value: "false";
+        }];
+    };
+    readonly hasImage: {
+        readonly type: "radio";
+        readonly label: "Has Image";
+        readonly options: readonly [{
+            readonly label: "Yes";
+            readonly value: "true";
+        }, {
+            readonly label: "No";
+            readonly value: "false";
+        }];
+    };
+    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 animation: {
+        readonly type: "radio";
+        readonly label: "Animation";
+        readonly options: readonly [{
+            readonly label: "Sticky Stack";
+            readonly value: "stickyStack";
+        }, {
+            readonly label: "Parallax Scroll";
+            readonly value: "parallaxScroll";
+        }];
+    };
+    readonly overflow: {
+        readonly type: "radio";
+        readonly label: "Overflow";
+        readonly options: readonly [{
+            readonly label: "Halfscreen";
+            readonly value: "halfscreen";
+        }, {
+            readonly label: "Contained";
+            readonly value: "contained";
+        }];
+    };
+    readonly hasBackgroundCards: {
+        readonly type: "radio";
+        readonly label: "Has Background Cards";
+        readonly options: readonly [{
+            readonly label: "Yes";
+            readonly value: "true";
+        }, {
+            readonly label: "No";
+            readonly value: "false";
+        }];
+    };
+    readonly gridLayout: {
+        readonly type: "radio";
+        readonly label: "Grid Layout";
+        readonly options: readonly [{
+            readonly label: "4x2";
+            readonly value: "4x2";
+        }, {
+            readonly label: "4x3";
+            readonly value: "4x3";
+        }];
     };
 };
+/** 将 TestimonialSectionBaseProps 与组件特有字段合并，生成最终 Props */
+export type TestimonialComponentProps<T extends object = object> = React.ComponentPropsWithoutRef<"section"> & Partial<TestimonialSectionBaseProps> & Partial<T>;

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

@@ -0,0 +1,126 @@
+const testimonialStyleFields = {
+  ratingType: {
+    type: "radio",
+    label: "Rating Type",
+    options: [
+      { label: "Logo", value: "logo" },
+      { label: "Stars", value: "stars" }
+    ]
+  },
+  attributionLayout: {
+    type: "radio",
+    label: "Attribution Layout",
+    options: [
+      { label: "Stacked", value: "stacked" },
+      { label: "Inline", value: "inline" }
+    ]
+  },
+  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" }
+    ]
+  },
+  carouselColumns: {
+    type: "radio",
+    label: "Carousel Columns",
+    options: [
+      { label: "1", value: "1" },
+      { label: "2", value: "2" },
+      { label: "3", value: "3" }
+    ]
+  },
+  masonryColumns: {
+    type: "radio",
+    label: "Masonry Columns",
+    options: [
+      { label: "2", value: "2" },
+      { label: "3", value: "3" }
+    ]
+  },
+  bordered: {
+    type: "radio",
+    label: "Bordered",
+    options: [
+      { label: "Yes", value: "true" },
+      { label: "No", value: "false" }
+    ]
+  },
+  hasHeading: {
+    type: "radio",
+    label: "Has Heading",
+    options: [
+      { label: "Yes", value: "true" },
+      { label: "No", value: "false" }
+    ]
+  },
+  hasButton: {
+    type: "radio",
+    label: "Has Button",
+    options: [
+      { label: "Yes", value: "true" },
+      { label: "No", value: "false" }
+    ]
+  },
+  hasImage: {
+    type: "radio",
+    label: "Has Image",
+    options: [
+      { label: "Yes", value: "true" },
+      { label: "No", value: "false" }
+    ]
+  },
+  mediaType: {
+    type: "radio",
+    label: "Media Type",
+    options: [
+      { label: "Image", value: "image" },
+      { label: "Video", value: "video" }
+    ]
+  },
+  animation: {
+    type: "radio",
+    label: "Animation",
+    options: [
+      { label: "Sticky Stack", value: "stickyStack" },
+      { label: "Parallax Scroll", value: "parallaxScroll" }
+    ]
+  },
+  overflow: {
+    type: "radio",
+    label: "Overflow",
+    options: [
+      { label: "Halfscreen", value: "halfscreen" },
+      { label: "Contained", value: "contained" }
+    ]
+  },
+  hasBackgroundCards: {
+    type: "radio",
+    label: "Has Background Cards",
+    options: [
+      { label: "Yes", value: "true" },
+      { label: "No", value: "false" }
+    ]
+  },
+  gridLayout: {
+    type: "radio",
+    label: "Grid Layout",
+    options: [
+      { label: "4x2", value: "4x2" },
+      { label: "4x3", value: "4x3" }
+    ]
+  }
+};
+export {
+  testimonialStyleFields
+};

package/dist/components/puck-block/testimonial-sections/sticky-testimonial/component.d.ts

@@ -0,0 +1,16 @@
+import type { TestimonialComponentProps, BaseImage } from "../props";
+type Testimonial = {
+    numberOfStars: number;
+    quote: string;
+    avatar: BaseImage;
+    name: string;
+    position: string;
+    companyName: string;
+};
+type StickyTestimonialExtra = {
+    testimonials: Testimonial[];
+};
+export type StickyTestimonialProps = TestimonialComponentProps<StickyTestimonialExtra>;
+export declare const StickyTestimonial: (props: StickyTestimonialProps) => import("react/jsx-runtime").JSX.Element;
+export declare const StickyTestimonialDefaults: StickyTestimonialProps;
+export {};

package/dist/components/puck-block/testimonial-sections/sticky-testimonial/component.js

@@ -0,0 +1,86 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React__default from "react";
+import { CompoundButton } from "../../../puck-base/button.js";
+import { CompoundImage } from "../../../puck-base/image.js";
+import { BiSolidStar } from "../../../../node_modules/.pnpm/react-icons@5.6.0_react@19.2.4/node_modules/react-icons/bi/index.js";
+const StickyTestimonial = (props) => {
+  const {
+    heading,
+    description,
+    buttons,
+    testimonials,
+    styles
+  } = {
+    ...StickyTestimonialDefaults,
+    ...props
+  };
+  const { animation = "stickyStack" } = 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: "grid grid-cols-1 items-start gap-y-12 md:grid-flow-row md:grid-cols-2 md:gap-x-12 lg:gap-x-20", children: [
+    /* @__PURE__ */ jsxs("div", { className: "static md:sticky md:top-[30%]", children: [
+      /* @__PURE__ */ jsx("h2", { className: "rb-5 mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl", children: heading }),
+      /* @__PURE__ */ jsx("p", { className: "md:text-md", children: description }),
+      /* @__PURE__ */ jsx("div", { className: "mt-6 flex flex-wrap items-center gap-4 md:mt-8", children: buttons.map((button, index) => /* @__PURE__ */ jsx(CompoundButton, { label: button.label, variant: button.variant, size: button.size, action: button.action, icon: button.icon }, index)) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { children: animation === "stickyStack" ? testimonials.map((testimonial2, index) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "sticky mb-8 border border-border-primary bg-background-primary p-8",
+        style: { top: `${30 + index * 2}%` },
+        children: /* @__PURE__ */ jsx(TestimonialCard, { testimonial: testimonial2 })
+      },
+      index
+    )) : /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-8", children: testimonials.map((testimonial2, index) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "border border-border-primary bg-background-primary p-8",
+        children: /* @__PURE__ */ jsx(TestimonialCard, { testimonial: testimonial2 })
+      },
+      index
+    )) }) })
+  ] }) }) });
+};
+const TestimonialCard = ({ testimonial: testimonial2 }) => /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
+  /* @__PURE__ */ jsxs("div", { className: "rb-5 mb-5 md:mb-6", children: [
+    /* @__PURE__ */ jsx("div", { className: "rb-6 mb-6 flex items-center", children: Array(testimonial2.numberOfStars).fill(null).map((_, starIndex) => /* @__PURE__ */ jsx(BiSolidStar, { className: "mr-1 size-6" }, starIndex)) }),
+    /* @__PURE__ */ jsx("blockquote", { className: "md:text-md", children: testimonial2.quote })
+  ] }),
+  /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start gap-4 md:flex-row md:items-center", children: [
+    /* @__PURE__ */ jsx(
+      CompoundImage,
+      {
+        src: testimonial2.avatar.src,
+        alt: testimonial2.avatar.alt,
+        className: "size-12 min-h-12 min-w-12 rounded-full object-cover"
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("p", { className: "font-semibold", children: testimonial2.name }),
+      /* @__PURE__ */ jsxs("p", { children: [
+        /* @__PURE__ */ jsx("span", { children: testimonial2.position }),
+        ", ",
+        /* @__PURE__ */ jsx("span", { children: testimonial2.companyName })
+      ] })
+    ] })
+  ] })
+] });
+const testimonial = {
+  numberOfStars: 5,
+  quote: '"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare."',
+  avatar: { src: "https://picsum.photos/seed/sticky-testimonial/100/100", alt: "Testimonial avatar" },
+  name: "Name Surname",
+  position: "Position",
+  companyName: "Company name"
+};
+const StickyTestimonialDefaults = {
+  heading: "Customer testimonials",
+  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" }],
+  testimonials: [testimonial, testimonial, testimonial, testimonial],
+  styles: {
+    animation: "stickyStack"
+  }
+};
+export {
+  StickyTestimonial,
+  StickyTestimonialDefaults
+};