dune-react 0.0.18 → 0.0.20

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

@@ -0,0 +1,33 @@
+import { InteractivePortfolio, InteractivePortfolioDefaults } from "./interactive-portfolio.js";
+import { imageField } from "../../../puck-core/core/props/media.js";
+import { galleryStyleFields } from "../props.js";
+const conf = {
+  fields: {
+    tagline: { type: "text" },
+    hoverLinks: {
+      type: "array",
+      max: 10,
+      getItemSummary: (item, index = 0) => item.heading || `Link ${index + 1}`,
+      arrayFields: {
+        url: { type: "text" },
+        heading: { type: "text" },
+        tag: { type: "text" },
+        image: imageField
+      }
+    },
+    styles: {
+      type: "object",
+      label: "Styles",
+      objectFields: {
+        listLayout: galleryStyleFields.listLayout
+      }
+    }
+  },
+  defaultProps: InteractivePortfolioDefaults,
+  render: InteractivePortfolio
+};
+export {
+  InteractivePortfolio,
+  InteractivePortfolioDefaults,
+  conf as default
+};

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

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

package/dist/components/puck-block/gallery-sections/interactive-portfolio/interactive-portfolio.js

@@ -0,0 +1,187 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { motion } from "framer-motion";
+import { cn } from "../../../../utils/css-utils.js";
+import { CompoundImage } from "../../../puck-base/image.js";
+const getDirection = (ev, obj) => {
+  const { width: w, height: h, left, top } = obj.getBoundingClientRect();
+  const centerX = left + w / 2;
+  const centerY = top + h / 2;
+  const xOffset = ev.clientX - centerX;
+  const yOffset = ev.clientY - centerY;
+  const angleDegrees = Math.atan2(yOffset, xOffset) * (180 / Math.PI);
+  const adjustedAngle = angleDegrees < 0 ? angleDegrees + 360 : angleDegrees;
+  if (adjustedAngle >= 315 || adjustedAngle < 45) return "right";
+  if (adjustedAngle >= 45 && adjustedAngle < 135) return "bottom";
+  if (adjustedAngle >= 135 && adjustedAngle < 225) return "left";
+  return "top";
+};
+const InteractivePortfolio = (props) => {
+  var _a, _b;
+  const { tagline, hoverLinks, styles } = {
+    ...InteractivePortfolioDefaults,
+    ...props
+  };
+  const { listLayout = "center" } = styles ?? {};
+  const ref = useRef(null);
+  const [cursorPosition, setCursorPosition] = useState({ x: 0, y: 0 });
+  const [hoveredIndex, setHoveredIndex] = useState(null);
+  const [direction, setDirection] = useState("initial");
+  const handleMouseEnter = (event) => {
+    if (!ref.current) return;
+    setDirection(getDirection(event, ref.current));
+  };
+  const handleMouseMove = (e) => {
+    setCursorPosition({ x: e.clientX, y: e.clientY });
+  };
+  const handleMouseLeave = () => setHoveredIndex(null);
+  const imageVariants = {
+    initial: { x: 0, y: 0 },
+    top: { y: 50, transition: { type: "spring", duration: 1, bounce: 0 } },
+    bottom: { y: -50, transition: { type: "spring", duration: 1, bounce: 0 } },
+    left: { x: 50, transition: { type: "spring", duration: 1, bounce: 0 } },
+    right: { x: -50, transition: { type: "spring", duration: 1, bounce: 0 } }
+  };
+  const translateTopInverse = direction === "top" ? -50 : 0;
+  const translateBottomInverse = direction === "bottom" ? 50 : 0;
+  const translateLeftInverse = direction === "left" ? -50 : 0;
+  const translateRightInverse = direction === "right" ? 50 : 0;
+  if (listLayout === "left-with-sticky-image") {
+    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__ */ jsx("p", { className: "mb-6 font-semibold md:mb-8", children: tagline }),
+      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-12 lg:grid-cols-2 lg:gap-16", children: [
+        /* @__PURE__ */ jsx("div", { className: "lg:sticky lg:top-20 lg:self-start", children: /* @__PURE__ */ jsx("div", { className: "aspect-square w-full overflow-hidden", children: /* @__PURE__ */ jsx(
+          CompoundImage,
+          {
+            src: hoveredIndex !== null ? hoverLinks[hoveredIndex].image.src : (_a = hoverLinks[0]) == null ? void 0 : _a.image.src,
+            alt: hoveredIndex !== null ? hoverLinks[hoveredIndex].image.alt : (_b = hoverLinks[0]) == null ? void 0 : _b.image.alt,
+            className: "size-full object-cover transition-all duration-500"
+          }
+        ) }) }),
+        /* @__PURE__ */ jsx("div", { children: hoverLinks.map((link, index) => /* @__PURE__ */ jsxs(
+          "a",
+          {
+            href: link.url,
+            onMouseEnter: () => setHoveredIndex(index),
+            onMouseLeave: () => setHoveredIndex(null),
+            className: "flex items-center justify-between border-b border-border-primary py-6 md:py-8",
+            children: [
+              /* @__PURE__ */ jsx(
+                "h3",
+                {
+                  className: cn(
+                    "text-2xl font-bold transition-colors duration-300 md:text-4xl lg:text-5xl",
+                    {
+                      "text-black/20": hoveredIndex !== index && hoveredIndex !== null
+                    }
+                  ),
+                  children: link.heading
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { className: "bg-background-secondary px-2 py-1 text-sm font-semibold", children: link.tag })
+            ]
+          },
+          index
+        )) })
+      ] })
+    ] }) });
+  }
+  const isLeftAligned = listLayout === "left-aligned";
+  return /* @__PURE__ */ jsx("section", { id: "relume", className: "px-[5%] py-16 md:py-24 lg:py-28", onMouseMove: handleMouseMove, children: /* @__PURE__ */ jsxs("div", { className: cn("container", { "max-w-xl text-center": !isLeftAligned }), children: [
+    /* @__PURE__ */ jsx("p", { className: "mb-6 font-semibold md:mb-8", children: tagline }),
+    /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        initial: "initial",
+        whileHover: direction,
+        ref,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        children: hoverLinks.map((link, index) => /* @__PURE__ */ jsxs(
+          "a",
+          {
+            href: link.url,
+            onMouseEnter: () => setHoveredIndex(index),
+            className: cn("flex items-center gap-2 p-4 sm:gap-4 md:gap-8", {
+              "flex-col justify-center sm:flex-row": !isLeftAligned,
+              "flex-row justify-between border-b border-border-primary": isLeftAligned
+            }),
+            children: [
+              isLeftAligned && /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-neutral-500", children: String(index + 1).padStart(2, "0") }),
+              /* @__PURE__ */ jsx(
+                "h3",
+                {
+                  className: cn(
+                    "font-bold transition-colors duration-300",
+                    {
+                      "text-6xl md:text-9xl lg:text-10xl": !isLeftAligned,
+                      "text-2xl md:text-4xl lg:text-5xl": isLeftAligned,
+                      "lg:text-black/20": hoveredIndex !== index && hoveredIndex !== null,
+                      "lg:text-black": hoveredIndex === index || hoveredIndex === null
+                    }
+                  ),
+                  children: link.heading
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { className: "bg-background-secondary border border-neutral-lightest px-2 py-1 text-sm font-semibold", children: link.tag }),
+              /* @__PURE__ */ jsx(
+                motion.div,
+                {
+                  className: `pointer-events-none fixed inset-0 -z-10 hidden size-[600px] lg:block ${hoveredIndex === index ? "opacity-100" : "opacity-0"}`,
+                  style: {
+                    translateX: cursorPosition.x - 300 + translateLeftInverse + translateRightInverse,
+                    translateY: cursorPosition.y - 300 + translateTopInverse + translateBottomInverse
+                  },
+                  children: /* @__PURE__ */ jsx(
+                    motion.img,
+                    {
+                      className: "size-full max-w-md",
+                      variants: imageVariants,
+                      src: link.image.src,
+                      alt: link.image.alt
+                    }
+                  )
+                }
+              )
+            ]
+          },
+          index
+        ))
+      }
+    )
+  ] }) });
+};
+const defaultHoverLink = {
+  url: "#",
+  heading: "Project name",
+  tag: "Tag",
+  image: {
+    src: "https://picsum.photos/seed/interactive-port/800/800",
+    alt: "Relume placeholder image"
+  }
+};
+const InteractivePortfolioDefaults = {
+  tagline: "Tagline",
+  heading: "",
+  description: "",
+  button: { label: "View all" },
+  buttons: [],
+  images: [],
+  projects: [],
+  hoverLinks: [
+    { ...defaultHoverLink, image: { src: "https://picsum.photos/seed/ip-1/800/800", alt: "Project 1" } },
+    { ...defaultHoverLink, image: { src: "https://picsum.photos/seed/ip-2/800/800", alt: "Project 2" } },
+    { ...defaultHoverLink, image: { src: "https://picsum.photos/seed/ip-3/800/800", alt: "Project 3" } },
+    { ...defaultHoverLink, image: { src: "https://picsum.photos/seed/ip-4/800/800", alt: "Project 4" } },
+    { ...defaultHoverLink, image: { src: "https://picsum.photos/seed/ip-5/800/800", alt: "Project 5" } },
+    { ...defaultHoverLink, image: { src: "https://picsum.photos/seed/ip-6/800/800", alt: "Project 6" } }
+  ],
+  styles: {
+    listLayout: "center"
+  }
+};
+export {
+  InteractivePortfolio,
+  InteractivePortfolioDefaults
+};

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

@@ -0,0 +1,46 @@
+import { MasonryGrid, MasonryGridDefaults } from "./masonry-grid";
+import type { MasonryGridProps } from "./masonry-grid";
+export { MasonryGrid, MasonryGridDefaults };
+export type { MasonryGridProps };
+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;
+            };
+        };
+        styles: {
+            type: string;
+            label: string;
+            objectFields: {
+                columns: {
+                    readonly type: "text";
+                    readonly label: "Columns";
+                };
+            };
+        };
+    };
+    defaultProps: import("../props").GallerySectionBaseProps;
+    render: (props: MasonryGridProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default conf;

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

@@ -0,0 +1,25 @@
+import { MasonryGrid, MasonryGridDefaults } from "./masonry-grid.js";
+import { descriptionField, headingField } from "../../../puck-core/core/props/content.js";
+import { imagesField } from "../../../puck-core/core/props/media.js";
+import { galleryStyleFields } from "../props.js";
+const conf = {
+  fields: {
+    heading: headingField,
+    description: descriptionField,
+    images: imagesField,
+    styles: {
+      type: "object",
+      label: "Styles",
+      objectFields: {
+        columns: galleryStyleFields.columns
+      }
+    }
+  },
+  defaultProps: MasonryGridDefaults,
+  render: MasonryGrid
+};
+export {
+  MasonryGrid,
+  MasonryGridDefaults,
+  conf as default
+};

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

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

package/dist/components/puck-block/gallery-sections/masonry-grid/masonry-grid.js

@@ -0,0 +1,65 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../../../utils/css-utils.js";
+import { CompoundImage } from "../../../puck-base/image.js";
+const MasonryGrid = (props) => {
+  const { heading, description, images, styles } = {
+    ...MasonryGridDefaults,
+    ...props
+  };
+  const { columns = "2" } = styles ?? {};
+  const cols = parseInt(columns, 10) || 2;
+  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: "mb-12 text-center md:mb-18 lg:mb-20", children: [
+      /* @__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: cn("gap-x-8", {
+          "md:columns-2": cols === 2,
+          "md:columns-2 lg:columns-3": cols === 3
+        }),
+        children: images.map((image, index) => /* @__PURE__ */ jsx("a", { href: "#", className: "mb-8 inline-block w-full", children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn("relative inline-block w-full", {
+              "pt-[100%]": index % 3 === 0,
+              "pt-[66.66%]": index % 3 !== 0
+            }),
+            children: /* @__PURE__ */ jsx(
+              CompoundImage,
+              {
+                src: image.src,
+                alt: image.alt,
+                className: "absolute inset-0 size-full object-cover"
+              }
+            )
+          }
+        ) }, index))
+      }
+    )
+  ] }) });
+};
+const MasonryGridDefaults = {
+  tagline: "",
+  heading: "Image Gallery",
+  description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+  button: { label: "View all" },
+  buttons: [],
+  images: [
+    { src: "https://picsum.photos/seed/masonry-1/800/800", alt: "Gallery image 1" },
+    { src: "https://picsum.photos/seed/masonry-2/800/533", alt: "Gallery image 2" },
+    { src: "https://picsum.photos/seed/masonry-3/800/533", alt: "Gallery image 3" },
+    { src: "https://picsum.photos/seed/masonry-4/800/800", alt: "Gallery image 4" }
+  ],
+  projects: [],
+  hoverLinks: [],
+  styles: {
+    columns: "2"
+  }
+};
+export {
+  MasonryGrid,
+  MasonryGridDefaults
+};

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

@@ -0,0 +1,211 @@
+import { PortfolioCards, PortfolioCardsDefaults } from "./portfolio-cards";
+import type { PortfolioCardsProps } from "./portfolio-cards";
+export { PortfolioCards, PortfolioCardsDefaults };
+export type { PortfolioCardsProps };
+declare const conf: {
+    fields: {
+        tagline: {
+            type: string;
+        };
+        heading: {
+            readonly type: "text";
+            readonly contentEditable: true;
+        };
+        description: {
+            readonly type: "textarea";
+            readonly contentEditable: true;
+        };
+        button: {
+            readonly type: "object";
+            readonly objectFields: {
+                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;
+                };
+            };
+        };
+        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";
+                        };
+                    };
+                };
+                url: {
+                    type: string;
+                };
+                button: {
+                    readonly type: "object";
+                    readonly objectFields: {
+                        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;
+                        };
+                    };
+                };
+            };
+        };
+        styles: {
+            type: string;
+            label: string;
+            objectFields: {
+                columns: {
+                    readonly type: "text";
+                    readonly label: "Columns";
+                };
+                bordered: {
+                    readonly type: "radio";
+                    readonly label: "Bordered";
+                    readonly options: readonly [{
+                        readonly label: "Yes";
+                        readonly value: "true";
+                    }, {
+                        readonly label: "No";
+                        readonly value: "false";
+                    }];
+                };
+                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";
+                    }];
+                };
+                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";
+                    }];
+                };
+            };
+        };
+    };
+    defaultProps: import("../props").GallerySectionBaseProps;
+    render: (props: PortfolioCardsProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default conf;

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

@@ -0,0 +1,42 @@
+import { PortfolioCards, PortfolioCardsDefaults } from "./portfolio-cards.js";
+import { descriptionField, headingField } from "../../../puck-core/core/props/content.js";
+import { buttonField } from "../../../puck-core/core/props/interactive.js";
+import { imageField } from "../../../puck-core/core/props/media.js";
+import { galleryStyleFields } from "../props.js";
+const conf = {
+  fields: {
+    tagline: { type: "text" },
+    heading: headingField,
+    description: descriptionField,
+    button: buttonField,
+    projects: {
+      type: "array",
+      max: 14,
+      getItemSummary: (item, index = 0) => item.title || `Project ${index + 1}`,
+      arrayFields: {
+        title: { type: "text" },
+        description: { type: "textarea" },
+        image: imageField,
+        url: { type: "text" },
+        button: buttonField
+      }
+    },
+    styles: {
+      type: "object",
+      label: "Styles",
+      objectFields: {
+        columns: galleryStyleFields.columns,
+        bordered: galleryStyleFields.bordered,
+        cardLayout: galleryStyleFields.cardLayout,
+        metaType: galleryStyleFields.metaType
+      }
+    }
+  },
+  defaultProps: PortfolioCardsDefaults,
+  render: PortfolioCards
+};
+export {
+  PortfolioCards,
+  PortfolioCardsDefaults,
+  conf as default
+};

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

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