dune-react 0.0.19 → 0.0.21

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

@@ -0,0 +1,103 @@
+"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 { useScrollContainer } from "../../../../hooks/use-scroll-container.js";
+import { cn } from "../../../../utils/css-utils.js";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
+const StickyScrollTimeline = (props) => {
+  const {
+    tagline,
+    heading,
+    description,
+    buttons = [],
+    timelines = [],
+    styles
+  } = {
+    ...StickyScrollTimelineDefaults,
+    ...props
+  };
+  const {
+    className: sectionClassName,
+    style: sectionStyle,
+    css,
+    bordered = false,
+    hasImage = false
+  } = styles ?? {};
+  return /* @__PURE__ */ jsx(SectionWrapper, { className: cn("px-[5%] py-8 md:py-12 lg:py-14", sectionClassName), style: sectionStyle, css, 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 [scrollContainerRef] = useScrollContainer(circleRef);
+  const { scrollYProgress } = useScroll({
+    target: circleRef,
+    ...scrollContainerRef.current ? { container: scrollContainerRef } : {},
+    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
+};

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

@@ -0,0 +1,264 @@
+import { StickyScrollTimeline, StickyScrollTimelineDefaults } from "./component";
+import type { StickyScrollTimelineProps } from "./component";
+export { StickyScrollTimeline, StickyScrollTimelineDefaults };
+export type { StickyScrollTimelineProps };
+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";
+            };
+        };
+        timelines: {
+            type: string;
+            getItemSummary: (item: {
+                heading?: string;
+            }, index?: number) => string;
+            arrayFields: {
+                date: {
+                    type: string;
+                };
+                heading: {
+                    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: {
+                className: {
+                    readonly type: "text";
+                    readonly label: "Class Name";
+                    readonly ai: {
+                        readonly instructions: "Additional Tailwind CSS classes to apply to the section wrapper.";
+                    };
+                };
+                style: {
+                    readonly type: "object";
+                    readonly label: "Style";
+                    readonly objectFields: {};
+                    readonly ai: {
+                        readonly instructions: "Inline CSSProperties object for the section wrapper, e.g. { backgroundColor: 'red', minHeight: '100vh' }.";
+                    };
+                };
+                css: {
+                    readonly type: "textarea";
+                    readonly label: "Custom CSS";
+                    readonly ai: {
+                        readonly instructions: "Custom CSS rules. Use & as a placeholder for the section selector.";
+                    };
+                };
+                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> & {
+        timelines: {
+            date: string;
+            heading: string;
+            description: string;
+            buttons: import("@/components/puck-core/core/props/interactive").BaseButton[];
+            image?: import("@/components/puck-core/core/props/media").BaseImage;
+        }[];
+    };
+    render: (props: StickyScrollTimelineProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default conf;

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

@@ -0,0 +1,41 @@
+import { StickyScrollTimeline, StickyScrollTimelineDefaults } 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";
+import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
+const conf = {
+  fields: {
+    tagline: { type: "text" },
+    heading: headingField,
+    description: descriptionField,
+    buttons: buttonsField,
+    timelines: {
+      type: "array",
+      getItemSummary: (item, index = 0) => item.heading || `Timeline ${index + 1}`,
+      arrayFields: {
+        date: { type: "text" },
+        heading: { type: "text" },
+        description: { type: "textarea" },
+        buttons: buttonsField,
+        image: imageField
+      }
+    },
+    styles: {
+      type: "object",
+      label: "Styles",
+      objectFields: {
+        bordered: showcaseStyleFields.bordered,
+        hasImage: showcaseStyleFields.hasImage,
+        ...sectionWrapperFields
+      }
+    }
+  },
+  defaultProps: StickyScrollTimelineDefaults,
+  render: StickyScrollTimeline
+};
+export {
+  StickyScrollTimeline,
+  StickyScrollTimelineDefaults,
+  conf as default
+};

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

@@ -0,0 +1,22 @@
+import type { ShowcaseComponentProps, BaseButton, BaseImage } from "../props";
+type TabTimelineContent = {
+    date: string;
+    heading: string;
+    description: string;
+    buttons: BaseButton[];
+    image: BaseImage;
+};
+type Tab = {
+    value: string;
+    trigger: string;
+    content: TabTimelineContent;
+};
+type TabTimelineExtra = {
+    tabs: Tab[];
+};
+export type TabTimelineProps = ShowcaseComponentProps<TabTimelineExtra>;
+export declare const TabTimeline: (props: TabTimelineProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TabTimelineDefaults: TabTimelineExtra & {
+    styles: Partial<import("../props").ShowcaseSectionStyles>;
+};
+export {};

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

@@ -0,0 +1,142 @@
+"use client";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "../../../shadcn/tabs.js";
+import { CompoundButton } from "../../../puck-base/button.js";
+import { CompoundImage } from "../../../puck-base/image.js";
+import { cn } from "../../../../utils/css-utils.js";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
+const TabTimeline = (props) => {
+  var _a, _b;
+  const { tabs = [], styles } = {
+    ...TabTimelineDefaults,
+    ...props
+  };
+  const {
+    className: sectionClassName,
+    style: sectionStyle,
+    css,
+    contentLayout = "text+image"
+  } = styles ?? {};
+  const [activeTab, setActiveTab] = useState((_a = tabs[0]) == null ? void 0 : _a.value);
+  const isTabActive = (tabIndex) => {
+    const activeIndex = tabs.findIndex((tab) => tab.value === activeTab);
+    return tabIndex <= activeIndex;
+  };
+  const progressWidth = () => {
+    const activeIndex = tabs.findIndex((tab) => tab.value === activeTab);
+    return `${100 / (tabs.length * 2) * (activeIndex * 2 + 1)}%`;
+  };
+  return /* @__PURE__ */ jsx(SectionWrapper, { className: cn("px-[5%] py-8 md:py-12 lg:py-14", sectionClassName), style: sectionStyle, css, children: /* @__PURE__ */ jsxs("div", { className: "container relative", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "absolute top-[50px] z-10 h-[3px] bg-neutral-black transition-[width] duration-300 md:top-14",
+        style: { width: progressWidth() }
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      Tabs,
+      {
+        defaultValue: (_b = tabs[0]) == null ? void 0 : _b.value,
+        onValueChange: setActiveTab,
+        className: "relative flex flex-col",
+        children: [
+          /* @__PURE__ */ jsx(TabsList, { className: "no-scrollbar relative mb-12 ml-[-5vw] flex w-screen items-center justify-start border-b border-b-transparent px-[5vw] md:mb-16 md:ml-0 md:w-auto md:justify-between md:px-0", children: tabs.map((tab, index) => /* @__PURE__ */ jsxs(
+            TabsTrigger,
+            {
+              value: tab.value,
+              className: cn(
+                "relative flex flex-1 flex-col items-center justify-center gap-2 border-0 px-0 transition-colors duration-300 data-[state=active]:bg-transparent",
+                isTabActive(index) ? "data-[state=active]:text-text-primary" : "text-neutral-light"
+              ),
+              children: [
+                index === 0 && /* @__PURE__ */ jsx("div", { className: "absolute bottom-3 left-0 z-20 h-[6px] w-16 bg-gradient-to-l from-transparent to-background-primary" }),
+                /* @__PURE__ */ jsx("span", { className: "text-xl font-bold md:text-2xl", children: tab.trigger }),
+                /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center", children: [
+                  /* @__PURE__ */ jsx("div", { className: "h-[3px] w-full bg-neutral-lighter" }),
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "z-20 flex size-[0.9375rem] flex-none items-center justify-center rounded-full shadow-[0_0_0_8px_white]",
+                        isTabActive(index) ? "bg-neutral-black" : "bg-neutral-light"
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("div", { className: "h-[3px] w-full bg-neutral-lighter" })
+                ] }),
+                index === tabs.length - 1 && /* @__PURE__ */ jsx("div", { className: "absolute bottom-3 right-0 z-0 h-2 w-16 bg-gradient-to-r from-transparent to-background-primary" })
+              ]
+            },
+            index
+          )) }),
+          tabs.map((tab, index) => /* @__PURE__ */ jsx(
+            TabsContent,
+            {
+              value: tab.value,
+              className: cn(
+                "data-[state=active]:animate-tabs",
+                contentLayout === "text+image" ? "grid grid-cols-1 gap-x-12 gap-y-12 md:grid-cols-2 md:items-center md:gap-y-16 lg:gap-x-20" : ""
+              ),
+              children: contentLayout === "text+image" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx("h3", { className: "mb-3 text-4xl font-bold leading-[1.2] md:mb-4 md:text-5xl lg:text-6xl", children: tab.content.date }),
+                  /* @__PURE__ */ jsx("h4", { className: "mb-5 text-2xl font-bold md:mb-6 md:text-3xl md:leading-[1.3] lg:text-4xl", children: tab.content.heading }),
+                  /* @__PURE__ */ jsx("p", { className: "md:text-md", children: tab.content.description }),
+                  /* @__PURE__ */ jsx("div", { className: "mt-6 flex flex-wrap gap-4 md:mt-8", children: tab.content.buttons.map((button, bIndex) => /* @__PURE__ */ jsx(CompoundButton, { label: button.label, variant: button.variant, size: button.size, action: button.action, icon: button.icon }, bIndex)) })
+                ] }),
+                /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+                  CompoundImage,
+                  {
+                    src: tab.content.image.src,
+                    alt: tab.content.image.alt,
+                    className: "w-full object-cover"
+                  }
+                ) })
+              ] }) : /* @__PURE__ */ jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx(
+                CompoundImage,
+                {
+                  src: tab.content.image.src,
+                  alt: tab.content.image.alt,
+                  className: "w-full max-w-2xl object-cover"
+                }
+              ) })
+            },
+            index
+          ))
+        ]
+      }
+    )
+  ] }) });
+};
+const defaultTab = (value, index) => ({
+  value,
+  trigger: "Date",
+  content: {
+    date: "Date",
+    heading: "Long heading is what you see here in this feature section",
+    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/tab-timeline${index}/800/600`,
+      alt: `Relume placeholder image ${index + 1}`
+    }
+  }
+});
+const TabTimelineDefaults = {
+  tabs: [
+    defaultTab("tab-one", 0),
+    defaultTab("tab-two", 1),
+    defaultTab("tab-three", 2),
+    defaultTab("tab-four", 3),
+    defaultTab("tab-five", 4)
+  ],
+  styles: {
+    contentLayout: "text+image"
+  }
+};
+export {
+  TabTimeline,
+  TabTimelineDefaults
+};