dune-react 0.0.18 → 0.0.20

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

@@ -1,26 +1,233 @@
-type GalleryVariant = "gallery-1" | "gallery-2" | "gallery-3";
-type GalleryPadding = {
-    top?: "none" | "small" | "medium" | "large";
-    bottom?: "none" | "small" | "medium" | "large";
-};
-type GallerySectionStyle = "default" | "dark" | "muted" | "inverted" | "custom";
-type GalleryImage = {
-    src: string;
-    alt?: string;
-    caption?: string;
-};
-type GallerySectionProps = {
-    variant?: GalleryVariant;
-    heading?: string;
-    description?: string;
-    images?: GalleryImage[];
-    showCaptions?: boolean;
-    styles?: {
-        padding?: GalleryPadding;
-        sectionStyle?: GallerySectionStyle;
-        backgroundColor?: string;
-        columns?: 2 | 3 | 4;
-        gap?: "sm" | "md" | "lg";
-        aspectRatio?: "square" | "landscape" | "auto";
+/**
+ * Gallery Section 共享 Props
+ *
+ * 基础类型引用自 ../props/（全局共享）
+ * GallerySectionStyles 为 gallery 特有的样式字段
+ */
+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 GallerySectionStyles {
+    columns?: string;
+    gap?: "with" | "without";
+    gridPattern?: "1large-2small" | "1large-4small";
+    fullscreen?: boolean;
+    headerAlign?: "center" | "left";
+    navStyle?: "centerDots" | "bottomBar";
+    slidesPerView?: string;
+    slideOverflow?: "hidden" | "visible";
+    activeOpacity?: boolean;
+    slideBasis?: string;
+    bordered?: boolean;
+    cardLayout?: "inline" | "stacked" | "masonry" | "zigzag";
+    metaType?: "none" | "tags" | "tags-button";
+    mediaPosition?: "left" | "right";
+    animation?: "sticky-stack" | "scroll-fade" | "threeImageParallax" | "scaleOpacity";
+    listLayout?: "center" | "left-aligned" | "left-with-sticky-image";
+}
+export interface GallerySectionBaseProps {
+    tagline: string;
+    heading: string;
+    description: string;
+    button: BaseButton;
+    buttons: BaseButton[];
+    images: BaseImage[];
+    projects: {
+        title: string;
+        description: string;
+        image: BaseImage;
+        url: string;
+        button: BaseButton;
+        tags?: {
+            label: string;
+            url: string;
+        }[];
+        imageCenter?: BaseImage;
+        imageLeft?: BaseImage;
+        imageRight?: BaseImage;
+    }[];
+    hoverLinks: {
+        url: string;
+        heading: string;
+        tag: string;
+        image: BaseImage;
+    }[];
+    styles: GallerySectionStyles;
+}
+export declare const galleryStyleFields: {
+    readonly columns: {
+        readonly type: "text";
+        readonly label: "Columns";
+    };
+    readonly gap: {
+        readonly type: "radio";
+        readonly label: "Gap";
+        readonly options: readonly [{
+            readonly label: "With";
+            readonly value: "with";
+        }, {
+            readonly label: "Without";
+            readonly value: "without";
+        }];
+    };
+    readonly gridPattern: {
+        readonly type: "select";
+        readonly label: "Grid Pattern";
+        readonly options: readonly [{
+            readonly label: "1 Large + 2 Small";
+            readonly value: "1large-2small";
+        }, {
+            readonly label: "1 Large + 4 Small";
+            readonly value: "1large-4small";
+        }];
+    };
+    readonly fullscreen: {
+        readonly type: "radio";
+        readonly label: "Fullscreen";
+        readonly options: readonly [{
+            readonly label: "Yes";
+            readonly value: "true";
+        }, {
+            readonly label: "No";
+            readonly value: "false";
+        }];
+    };
+    readonly headerAlign: {
+        readonly type: "radio";
+        readonly label: "Header Align";
+        readonly options: readonly [{
+            readonly label: "Center";
+            readonly value: "center";
+        }, {
+            readonly label: "Left";
+            readonly value: "left";
+        }];
+    };
+    readonly navStyle: {
+        readonly type: "radio";
+        readonly label: "Nav Style";
+        readonly options: readonly [{
+            readonly label: "Center Dots";
+            readonly value: "centerDots";
+        }, {
+            readonly label: "Bottom Bar";
+            readonly value: "bottomBar";
+        }];
+    };
+    readonly slidesPerView: {
+        readonly type: "text";
+        readonly label: "Slides Per View";
+    };
+    readonly slideOverflow: {
+        readonly type: "radio";
+        readonly label: "Slide Overflow";
+        readonly options: readonly [{
+            readonly label: "Hidden";
+            readonly value: "hidden";
+        }, {
+            readonly label: "Visible";
+            readonly value: "visible";
+        }];
+    };
+    readonly activeOpacity: {
+        readonly type: "radio";
+        readonly label: "Active Opacity";
+        readonly options: readonly [{
+            readonly label: "Yes";
+            readonly value: "true";
+        }, {
+            readonly label: "No";
+            readonly value: "false";
+        }];
+    };
+    readonly slideBasis: {
+        readonly type: "text";
+        readonly label: "Slide Basis";
+    };
+    readonly bordered: {
+        readonly type: "radio";
+        readonly label: "Bordered";
+        readonly options: readonly [{
+            readonly label: "Yes";
+            readonly value: "true";
+        }, {
+            readonly label: "No";
+            readonly value: "false";
+        }];
+    };
+    readonly cardLayout: {
+        readonly type: "select";
+        readonly label: "Card Layout";
+        readonly options: readonly [{
+            readonly label: "Inline";
+            readonly value: "inline";
+        }, {
+            readonly label: "Stacked";
+            readonly value: "stacked";
+        }, {
+            readonly label: "Masonry";
+            readonly value: "masonry";
+        }, {
+            readonly label: "Zigzag";
+            readonly value: "zigzag";
+        }];
+    };
+    readonly metaType: {
+        readonly type: "select";
+        readonly label: "Meta Type";
+        readonly options: readonly [{
+            readonly label: "None";
+            readonly value: "none";
+        }, {
+            readonly label: "Tags";
+            readonly value: "tags";
+        }, {
+            readonly label: "Tags + Button";
+            readonly value: "tags-button";
+        }];
+    };
+    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 animation: {
+        readonly type: "select";
+        readonly label: "Animation";
+        readonly options: readonly [{
+            readonly label: "Sticky Stack";
+            readonly value: "sticky-stack";
+        }, {
+            readonly label: "Scroll Fade";
+            readonly value: "scroll-fade";
+        }, {
+            readonly label: "Three Image Parallax";
+            readonly value: "threeImageParallax";
+        }, {
+            readonly label: "Scale Opacity";
+            readonly value: "scaleOpacity";
+        }];
+    };
+    readonly listLayout: {
+        readonly type: "select";
+        readonly label: "List Layout";
+        readonly options: readonly [{
+            readonly label: "Center";
+            readonly value: "center";
+        }, {
+            readonly label: "Left Aligned";
+            readonly value: "left-aligned";
+        }, {
+            readonly label: "Left + Sticky Image";
+            readonly value: "left-with-sticky-image";
+        }];
     };
 };
+/** 将 GallerySectionBaseProps 与组件特有字段合并，生成最终 Props */
+export type GalleryComponentProps<T extends object = object> = React.ComponentPropsWithoutRef<"section"> & Partial<GallerySectionBaseProps> & Partial<T>;

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

@@ -0,0 +1,117 @@
+const galleryStyleFields = {
+  columns: {
+    type: "text",
+    label: "Columns"
+  },
+  gap: {
+    type: "radio",
+    label: "Gap",
+    options: [
+      { label: "With", value: "with" },
+      { label: "Without", value: "without" }
+    ]
+  },
+  gridPattern: {
+    type: "select",
+    label: "Grid Pattern",
+    options: [
+      { label: "1 Large + 2 Small", value: "1large-2small" },
+      { label: "1 Large + 4 Small", value: "1large-4small" }
+    ]
+  },
+  fullscreen: {
+    type: "radio",
+    label: "Fullscreen",
+    options: [
+      { label: "Yes", value: "true" },
+      { label: "No", value: "false" }
+    ]
+  },
+  headerAlign: {
+    type: "radio",
+    label: "Header Align",
+    options: [
+      { label: "Center", value: "center" },
+      { label: "Left", value: "left" }
+    ]
+  },
+  navStyle: {
+    type: "radio",
+    label: "Nav Style",
+    options: [
+      { label: "Center Dots", value: "centerDots" },
+      { label: "Bottom Bar", value: "bottomBar" }
+    ]
+  },
+  slidesPerView: {
+    type: "text",
+    label: "Slides Per View"
+  },
+  slideOverflow: {
+    type: "radio",
+    label: "Slide Overflow",
+    options: [
+      { label: "Hidden", value: "hidden" },
+      { label: "Visible", value: "visible" }
+    ]
+  },
+  activeOpacity: {
+    type: "radio",
+    label: "Active Opacity",
+    options: [
+      { label: "Yes", value: "true" },
+      { label: "No", value: "false" }
+    ]
+  },
+  slideBasis: {
+    type: "text",
+    label: "Slide Basis"
+  },
+  bordered: {
+    type: "radio",
+    label: "Bordered",
+    options: [
+      { label: "Yes", value: "true" },
+      { label: "No", value: "false" }
+    ]
+  },
+  cardLayout: {
+    type: "select",
+    label: "Card Layout",
+    options: [
+      { label: "Inline", value: "inline" },
+      { label: "Stacked", value: "stacked" },
+      { label: "Masonry", value: "masonry" },
+      { label: "Zigzag", value: "zigzag" }
+    ]
+  },
+  metaType: {
+    type: "select",
+    label: "Meta Type",
+    options: [
+      { label: "None", value: "none" },
+      { label: "Tags", value: "tags" },
+      { label: "Tags + Button", value: "tags-button" }
+    ]
+  },
+  mediaPosition: {
+    type: "radio",
+    label: "Media Position",
+    options: [
+      { label: "Left", value: "left" },
+      { label: "Right", value: "right" }
+    ]
+  },
+  listLayout: {
+    type: "select",
+    label: "List Layout",
+    options: [
+      { label: "Center", value: "center" },
+      { label: "Left Aligned", value: "left-aligned" },
+      { label: "Left + Sticky Image", value: "left-with-sticky-image" }
+    ]
+  }
+};
+export {
+  galleryStyleFields
+};

package/dist/components/puck-block/gallery-sections/scroll-parallax/index.d.ts

@@ -0,0 +1,36 @@
+import { ScrollParallax, ScrollParallaxDefaults } from "./scroll-parallax";
+import type { ScrollParallaxProps } from "./scroll-parallax";
+export { ScrollParallax, ScrollParallaxDefaults };
+export type { ScrollParallaxProps };
+declare const conf: {
+    fields: {
+        heading: {
+            readonly type: "text";
+            readonly contentEditable: true;
+        };
+        description: {
+            readonly type: "textarea";
+            readonly contentEditable: true;
+        };
+        images: {
+            readonly type: "array";
+            readonly max: 10;
+            readonly getItemSummary: (item: {
+                alt?: string;
+            }, index?: number) => string;
+            readonly arrayFields: {
+                readonly src: import("@puckeditor/core").Field<string>;
+                readonly alt: {
+                    type: "text";
+                };
+            };
+            readonly defaultItemProps: {
+                alt: string;
+                src: string;
+            };
+        };
+    };
+    defaultProps: import("../props").GallerySectionBaseProps;
+    render: (props: ScrollParallaxProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default conf;

package/dist/components/puck-block/gallery-sections/scroll-parallax/index.js

@@ -0,0 +1,17 @@
+import { ScrollParallax, ScrollParallaxDefaults } from "./scroll-parallax.js";
+import { descriptionField, headingField } from "../../../puck-core/core/props/content.js";
+import { imagesField } from "../../../puck-core/core/props/media.js";
+const conf = {
+  fields: {
+    heading: headingField,
+    description: descriptionField,
+    images: imagesField
+  },
+  defaultProps: ScrollParallaxDefaults,
+  render: ScrollParallax
+};
+export {
+  ScrollParallax,
+  ScrollParallaxDefaults,
+  conf as default
+};

package/dist/components/puck-block/gallery-sections/scroll-parallax/scroll-parallax.d.ts

@@ -0,0 +1,4 @@
+import type { GalleryComponentProps, GallerySectionBaseProps } from "../props";
+export type ScrollParallaxProps = GalleryComponentProps;
+export declare const ScrollParallax: (props: ScrollParallaxProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ScrollParallaxDefaults: GallerySectionBaseProps;

package/dist/components/puck-block/gallery-sections/scroll-parallax/scroll-parallax.js

@@ -0,0 +1,56 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useRef } from "react";
+import { useScroll, useTransform, motion } from "framer-motion";
+import { CompoundImage } from "../../../puck-base/image.js";
+const ScrollParallax = (props) => {
+  const { heading, description, images } = {
+    ...ScrollParallaxDefaults,
+    ...props
+  };
+  const transformRef = useRef(null);
+  const { scrollYProgress } = useScroll({
+    target: transformRef
+  });
+  const x = useTransform(scrollYProgress, [0, 1], ["0%", "-100%"]);
+  return /* @__PURE__ */ jsxs("section", { id: "relume", ref: transformRef, children: [
+    /* @__PURE__ */ jsx("div", { className: "px-[5%] pt-16 md:pt-24 lg:pt-28", children: /* @__PURE__ */ jsxs("div", { className: "container text-center", 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: "h-[400vh]", children: /* @__PURE__ */ jsx("div", { className: "sticky top-0 mt-[-10vh] flex h-screen w-screen max-w-full flex-col items-start justify-center overflow-hidden px-[5%] md:mt-0", children: /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        style: { x },
+        className: "flex w-[150vh] items-center gap-x-6 sm:w-[200vh] md:gap-x-8 lg:w-[400vh]",
+        children: images.map((image, index) => /* @__PURE__ */ jsx("a", { className: "inline-block max-w-full", children: /* @__PURE__ */ jsx("div", { className: "relative size-full max-w-full overflow-hidden", children: /* @__PURE__ */ jsx(
+          CompoundImage,
+          {
+            className: "h-[80vh] max-h-[25rem] object-cover sm:max-h-[30rem] sm:w-[90vw] md:max-h-[40rem] md:w-[80vw] lg:max-h-none",
+            src: image.src,
+            alt: image.alt
+          }
+        ) }) }, index))
+      }
+    ) }) })
+  ] });
+};
+const ScrollParallaxDefaults = {
+  tagline: "",
+  heading: "Image Gallery",
+  description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+  button: { label: "View all" },
+  buttons: [],
+  images: [
+    { src: "https://picsum.photos/seed/scroll-1/1200/800", alt: "Gallery image 1" },
+    { src: "https://picsum.photos/seed/scroll-2/1200/800", alt: "Gallery image 2" },
+    { src: "https://picsum.photos/seed/scroll-3/1200/800", alt: "Gallery image 3" }
+  ],
+  projects: [],
+  hoverLinks: [],
+  styles: {}
+};
+export {
+  ScrollParallax,
+  ScrollParallaxDefaults
+};

package/dist/components/puck-block/gallery-sections/scroll-parallax-portfolio/index.d.ts

@@ -0,0 +1,76 @@
+import { ScrollParallaxPortfolio, ScrollParallaxPortfolioDefaults } from "./scroll-parallax-portfolio";
+import type { ScrollParallaxPortfolioProps } from "./scroll-parallax-portfolio";
+export { ScrollParallaxPortfolio, ScrollParallaxPortfolioDefaults };
+export type { ScrollParallaxPortfolioProps };
+declare const conf: {
+    fields: {
+        projects: {
+            type: string;
+            max: number;
+            getItemSummary: (item: {
+                title?: string;
+            }, index?: number) => string;
+            arrayFields: {
+                title: {
+                    type: string;
+                };
+                description: {
+                    type: string;
+                };
+                image: {
+                    type: "object";
+                    objectFields: {
+                        src: import("@puckeditor/core").Field<string>;
+                        alt: {
+                            type: "text";
+                        };
+                    };
+                };
+                imageCenter: {
+                    type: "object";
+                    objectFields: {
+                        src: import("@puckeditor/core").Field<string>;
+                        alt: {
+                            type: "text";
+                        };
+                    };
+                };
+                imageLeft: {
+                    type: "object";
+                    objectFields: {
+                        src: import("@puckeditor/core").Field<string>;
+                        alt: {
+                            type: "text";
+                        };
+                    };
+                };
+                imageRight: {
+                    type: "object";
+                    objectFields: {
+                        src: import("@puckeditor/core").Field<string>;
+                        alt: {
+                            type: "text";
+                        };
+                    };
+                };
+            };
+        };
+        styles: {
+            type: string;
+            label: string;
+            objectFields: {
+                animation: {
+                    type: "radio";
+                    label: string;
+                    options: {
+                        label: string;
+                        value: string;
+                    }[];
+                };
+            };
+        };
+    };
+    defaultProps: import("../props").GallerySectionBaseProps;
+    render: (props: ScrollParallaxPortfolioProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default conf;

package/dist/components/puck-block/gallery-sections/scroll-parallax-portfolio/index.js

@@ -0,0 +1,40 @@
+import { ScrollParallaxPortfolio, ScrollParallaxPortfolioDefaults } from "./scroll-parallax-portfolio.js";
+import { imageField } from "../../../puck-core/core/props/media.js";
+const conf = {
+  fields: {
+    projects: {
+      type: "array",
+      max: 6,
+      getItemSummary: (item, index = 0) => item.title || `Project ${index + 1}`,
+      arrayFields: {
+        title: { type: "text" },
+        description: { type: "textarea" },
+        image: imageField,
+        imageCenter: imageField,
+        imageLeft: imageField,
+        imageRight: imageField
+      }
+    },
+    styles: {
+      type: "object",
+      label: "Styles",
+      objectFields: {
+        animation: {
+          type: "radio",
+          label: "Animation",
+          options: [
+            { label: "Three Image Parallax", value: "threeImageParallax" },
+            { label: "Scale Opacity", value: "scaleOpacity" }
+          ]
+        }
+      }
+    }
+  },
+  defaultProps: ScrollParallaxPortfolioDefaults,
+  render: ScrollParallaxPortfolio
+};
+export {
+  ScrollParallaxPortfolio,
+  ScrollParallaxPortfolioDefaults,
+  conf as default
+};

package/dist/components/puck-block/gallery-sections/scroll-parallax-portfolio/scroll-parallax-portfolio.d.ts

@@ -0,0 +1,4 @@
+import type { GalleryComponentProps, GallerySectionBaseProps } from "../props";
+export type ScrollParallaxPortfolioProps = GalleryComponentProps;
+export declare const ScrollParallaxPortfolio: (props: ScrollParallaxPortfolioProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ScrollParallaxPortfolioDefaults: GallerySectionBaseProps;