dune-react 0.0.19 → 0.0.20

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

@@ -0,0 +1,242 @@
+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: {
+                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,39 @@
+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";
+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
+      }
+    }
+  },
+  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,24 @@
+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: {
+        contentLayout: string;
+    };
+};
+export {};

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

@@ -0,0 +1,138 @@
+"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";
+const TabTimeline = (props) => {
+  var _a, _b;
+  const { tabs = [], styles } = {
+    ...TabTimelineDefaults,
+    ...props
+  };
+  const {
+    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("section", { id: "relume", className: "px-[5%] py-16 md:py-24 lg:py-28", 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
+};

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

@@ -0,0 +1,161 @@
+import { TabTimeline, TabTimelineDefaults } from "./component";
+import type { TabTimelineProps } from "./component";
+export { TabTimeline, TabTimelineDefaults };
+export type { TabTimelineProps };
+declare const conf: {
+    fields: {
+        tabs: {
+            type: string;
+            getItemSummary: (item: {
+                trigger?: string;
+            }, index?: number) => string;
+            arrayFields: {
+                value: {
+                    type: string;
+                };
+                trigger: {
+                    type: string;
+                };
+                content: {
+                    type: string;
+                    label: string;
+                    objectFields: {
+                        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: {
+                contentLayout: {
+                    readonly type: "radio";
+                    readonly label: "Content Layout";
+                    readonly options: readonly [{
+                        readonly label: "Image Only";
+                        readonly value: "image-only";
+                    }, {
+                        readonly label: "Text + Image";
+                        readonly value: "text+image";
+                    }];
+                };
+            };
+        };
+    };
+    defaultProps: {
+        tabs: {
+            value: string;
+            trigger: string;
+            content: {
+                date: string;
+                heading: string;
+                description: string;
+                buttons: import("@/components/puck-core/core/props/interactive").BaseButton[];
+                image: import("@/components/puck-core/core/props/media").BaseImage;
+            };
+        }[];
+    } & {
+        styles: {
+            contentLayout: string;
+        };
+    };
+    render: (props: TabTimelineProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default conf;

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

@@ -0,0 +1,41 @@
+import { TabTimeline, TabTimelineDefaults } from "./component.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: {
+    tabs: {
+      type: "array",
+      getItemSummary: (item, index = 0) => item.trigger || `Tab ${index + 1}`,
+      arrayFields: {
+        value: { type: "text" },
+        trigger: { type: "text" },
+        content: {
+          type: "object",
+          label: "Content",
+          objectFields: {
+            date: { type: "text" },
+            heading: { type: "text" },
+            description: { type: "textarea" },
+            buttons: buttonsField,
+            image: imageField
+          }
+        }
+      }
+    },
+    styles: {
+      type: "object",
+      label: "Styles",
+      objectFields: {
+        contentLayout: showcaseStyleFields.contentLayout
+      }
+    }
+  },
+  defaultProps: TabTimelineDefaults,
+  render: TabTimeline
+};
+export {
+  TabTimeline,
+  TabTimelineDefaults,
+  conf as default
+};

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

@@ -0,0 +1,15 @@
+import type { ShowcaseComponentProps, ShowcaseSectionBaseProps, BaseButton, BaseImage } from "../props";
+type TimelineItem = {
+    heading: string;
+    title: string;
+    description: string;
+    buttons: BaseButton[];
+    image?: BaseImage;
+};
+type ZigzagTimelineExtra = {
+    timelineItems: TimelineItem[];
+};
+export type ZigzagTimelineProps = ShowcaseComponentProps<ZigzagTimelineExtra>;
+export declare const ZigzagTimeline: (props: ZigzagTimelineProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ZigzagTimelineDefaults: Partial<ShowcaseSectionBaseProps> & ZigzagTimelineExtra;
+export {};