dune-react 0.0.19 → 0.0.20

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

@@ -0,0 +1,98 @@
+"use client";
+import { jsx, jsxs } 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 SingleColumnTimeline = (props) => {
+  const {
+    tagline,
+    heading,
+    description,
+    buttons = [],
+    timelineItems = [],
+    styles
+  } = {
+    ...SingleColumnTimelineDefaults,
+    ...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__ */ jsxs("div", { className: "container max-w-lg", children: [
+    /* @__PURE__ */ jsx("div", { className: "mb-12 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 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__ */ jsxs("div", { className: "grid w-full max-w-lg auto-cols-fr grid-cols-[max-content_1fr] items-start justify-items-center", children: [
+      /* @__PURE__ */ jsxs("div", { className: "relative left-0 flex h-full w-8 flex-col items-center md:left-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" })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "grid auto-cols-fr grid-cols-1 gap-y-8 sm:gap-12 md:gap-20", children: timelineItems.map((item, index) => /* @__PURE__ */ jsx(TimelineEntry, { item, bordered, hasImage }, index)) })
+    ] })
+  ] }) });
+};
+const TimelineEntry = ({
+  item,
+  bordered,
+  hasImage
+}) => {
+  const circleRef = useRef(null);
+  const { scrollYProgress } = useScroll({
+    target: circleRef,
+    offset: ["end end", "end center"]
+  });
+  const backgroundColor = {
+    backgroundColor: useTransform(scrollYProgress, [0.85, 1], ["#ccc", "#000"])
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative", bordered && "border border-border-primary p-6 md:p-8"), children: [
+    /* @__PURE__ */ jsx("div", { className: "absolute -ml-8 flex h-full w-8 items-start justify-center", 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"
+      }
+    ) }),
+    /* @__PURE__ */ jsxs("div", { className: "ml-4 mt-4 flex flex-col md:ml-12", children: [
+      /* @__PURE__ */ jsx("h3", { className: "mb-3 text-4xl font-bold leading-[1.2] md:mb-4 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", 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, index) => /* @__PURE__ */ jsx(CompoundButton, { label: button.label, variant: button.variant, size: button.size, action: button.action, icon: button.icon }, index)) })
+    ] })
+  ] });
+};
+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-single/600/400",
+    alt: "Timeline image"
+  }
+};
+const SingleColumnTimelineDefaults = {
+  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 {
+  SingleColumnTimeline,
+  SingleColumnTimelineDefaults
+};

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

@@ -0,0 +1,242 @@
+import { SingleColumnTimeline, SingleColumnTimelineDefaults } from "./component";
+import type { SingleColumnTimelineProps } from "./component";
+export { SingleColumnTimeline, SingleColumnTimelineDefaults };
+export type { SingleColumnTimelineProps };
+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: SingleColumnTimelineProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default conf;

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

@@ -0,0 +1,39 @@
+import { SingleColumnTimeline, SingleColumnTimelineDefaults } 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: SingleColumnTimelineDefaults,
+  render: SingleColumnTimeline
+};
+export {
+  SingleColumnTimeline,
+  SingleColumnTimelineDefaults,
+  conf as default
+};

package/dist/components/puck-block/showcase-sections/sticky-scroll-timeline/component.d.ts

@@ -0,0 +1,15 @@
+import type { ShowcaseComponentProps, ShowcaseSectionBaseProps, BaseButton, BaseImage } from "../props";
+type TimelineItem = {
+    date: string;
+    heading: string;
+    description: string;
+    buttons: BaseButton[];
+    image?: BaseImage;
+};
+type StickyScrollTimelineExtra = {
+    timelines: TimelineItem[];
+};
+export type StickyScrollTimelineProps = ShowcaseComponentProps<StickyScrollTimelineExtra>;
+export declare const StickyScrollTimeline: (props: StickyScrollTimelineProps) => import("react/jsx-runtime").JSX.Element;
+export declare const StickyScrollTimelineDefaults: Partial<ShowcaseSectionBaseProps> & StickyScrollTimelineExtra;
+export {};

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

@@ -0,0 +1,96 @@
+"use client";
+import { jsx, jsxs } 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 StickyScrollTimeline = (props) => {
+  const {
+    tagline,
+    heading,
+    description,
+    buttons = [],
+    timelines = [],
+    styles
+  } = {
+    ...StickyScrollTimelineDefaults,
+    ...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: "relative grid auto-cols-fr grid-cols-1 items-start justify-center gap-6 sm:gap-12 md:grid-cols-2 md:gap-24 lg:gap-32", children: [
+    /* @__PURE__ */ jsxs("div", { className: "relative top-0 z-10 md:sticky md:top-20 md:z-auto md:pr-4", 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 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__ */ jsxs("div", { className: "absolute z-0 flex h-full w-8 flex-col items-center justify-self-start [grid-area:2/1/3/2] md:z-auto md:justify-self-center md:[grid-area: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" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "grid auto-cols-fr gap-x-12 gap-y-8 sm:gap-y-12 md:gap-x-20 md:gap-y-20", children: timelines.map((timeline, index) => /* @__PURE__ */ jsx(TimelineEntry, { timeline, bordered, hasImage }, index)) })
+  ] }) }) });
+};
+const TimelineEntry = ({
+  timeline,
+  bordered,
+  hasImage
+}) => {
+  const circleRef = useRef(null);
+  const { scrollYProgress } = useScroll({
+    target: circleRef,
+    offset: ["end end", "end center"]
+  });
+  const backgroundColor = {
+    backgroundColor: useTransform(scrollYProgress, [0.85, 1], ["#ccc", "#000"])
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative", bordered && "border border-border-primary p-6 md:p-8"), children: [
+    /* @__PURE__ */ jsx("div", { className: "absolute flex h-full w-8 items-start justify-center md:-ml-24 md:w-24 lg:-ml-32 lg:w-32", children: /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        ref: circleRef,
+        style: backgroundColor,
+        className: "z-20 mt-7 size-4 rounded-full shadow-[0_0_0_8px_#fff] md:mt-8"
+      }
+    ) }),
+    /* @__PURE__ */ jsxs("div", { className: "ml-12 mt-4 flex flex-col md:ml-0", children: [
+      /* @__PURE__ */ jsx("h3", { className: "mb-3 text-4xl font-bold leading-[1.2] md:mb-4 md:text-5xl lg:text-6xl", children: timeline.date }),
+      /* @__PURE__ */ jsx("h4", { className: "mb-3 text-xl font-bold md:mb-4 md:text-2xl", children: timeline.heading }),
+      /* @__PURE__ */ jsx("p", { children: timeline.description }),
+      hasImage && timeline.image && /* @__PURE__ */ jsx("div", { className: "mt-6", children: /* @__PURE__ */ jsx(CompoundImage, { src: timeline.image.src, alt: timeline.image.alt, className: "w-full object-cover" }) }),
+      /* @__PURE__ */ jsx("div", { className: "mt-6 flex flex-wrap items-center gap-4 md:mt-8", children: timeline.buttons.map((button, index) => /* @__PURE__ */ jsx(CompoundButton, { label: button.label, variant: button.variant, size: button.size, action: button.action, icon: button.icon }, index)) })
+    ] })
+  ] });
+};
+const defaultTimelineItem = {
+  date: "Date",
+  heading: "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-sticky/600/400",
+    alt: "Timeline image"
+  }
+};
+const StickyScrollTimelineDefaults = {
+  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" }],
+  timelines: [defaultTimelineItem, defaultTimelineItem, defaultTimelineItem, defaultTimelineItem],
+  styles: {
+    bordered: false,
+    hasImage: false
+  }
+};
+export {
+  StickyScrollTimeline,
+  StickyScrollTimelineDefaults
+};