dune-react 0.0.19 → 0.0.21

package/dist/components/puck-block/testimonial-sections/testimonial-card-grid/component.d.ts

@@ -0,0 +1,18 @@
+import type { TestimonialComponentProps, BaseImage, BaseButton } from "../props";
+type Testimonial = {
+    image: BaseImage;
+    quote: string;
+    avatar: BaseImage;
+    name: string;
+    position: string;
+    numberOfStars: number;
+    logo?: BaseImage;
+    button?: BaseButton;
+};
+type TestimonialCardGridExtra = {
+    testimonials: Testimonial[];
+};
+export type TestimonialCardGridProps = TestimonialComponentProps<TestimonialCardGridExtra>;
+export declare const TestimonialCardGrid: (props: TestimonialCardGridProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TestimonialCardGridDefaults: TestimonialCardGridProps;
+export {};

package/dist/components/puck-block/testimonial-sections/testimonial-card-grid/component.js

@@ -0,0 +1,95 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { BiSolidStar } from "../../../../node_modules/.pnpm/react-icons@5.6.0_react@19.2.4/node_modules/react-icons/bi/index.js";
+import { Button } from "../../../shadcn/button.js";
+import { CompoundImage } from "../../../puck-base/image.js";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
+import { cn } from "../../../../utils/css-utils.js";
+const TestimonialCardGrid = (props) => {
+  const {
+    heading,
+    description,
+    testimonials,
+    styles
+  } = {
+    ...TestimonialCardGridDefaults,
+    ...props
+  };
+  const {
+    className: sectionClassName,
+    style: sectionStyle,
+    css,
+    textAlign = "center",
+    gridColumns = 2,
+    ratingType = "logo",
+    bordered = false,
+    hasButton = false
+  } = styles ?? {};
+  const gridColsClass = gridColumns === 3 ? "md:grid-cols-2 lg:grid-cols-3" : "md:grid-cols-2";
+  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", children: [
+    /* @__PURE__ */ jsxs("div", { className: `mx-auto mb-12 w-full max-w-lg md:mb-18 lg:mb-20 ${textAlign === "center" ? "text-center" : "text-left"}`, children: [
+      /* @__PURE__ */ jsx("h1", { 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: `grid grid-cols-1 gap-y-12 md:gap-x-8 lg:gap-16 ${gridColsClass}`, children: testimonials.map((testimonial, index) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `flex flex-col items-center justify-center text-center ${bordered ? "border border-border-primary p-6 md:p-8" : ""}`,
+        children: [
+          ratingType === "logo" && testimonial.image && /* @__PURE__ */ jsx("div", { className: "mb-6 md:mb-8", children: /* @__PURE__ */ jsx(CompoundImage, { src: testimonial.image.src, alt: testimonial.image.alt, className: "max-h-14" }) }),
+          ratingType === "stars" && /* @__PURE__ */ jsx("div", { className: "mb-5 flex md:mb-6", children: Array(testimonial.numberOfStars).fill(null).map((_, starIndex) => /* @__PURE__ */ jsx(BiSolidStar, { className: "mr-1 size-6" }, starIndex)) }),
+          /* @__PURE__ */ jsx("blockquote", { className: "text-md font-bold leading-[1.4] md:text-xl", children: testimonial.quote }),
+          /* @__PURE__ */ jsxs("div", { className: "mt-6 flex flex-col items-center justify-center md:mt-8", children: [
+            /* @__PURE__ */ jsx("div", { className: "mb-3 md:mb-4", children: /* @__PURE__ */ jsx(
+              CompoundImage,
+              {
+                src: testimonial.avatar.src,
+                alt: testimonial.avatar.alt,
+                className: "size-16 min-h-16 min-w-16 rounded-full object-cover"
+              }
+            ) }),
+            /* @__PURE__ */ jsx("p", { className: "font-semibold", children: testimonial.name }),
+            /* @__PURE__ */ jsx("p", { children: testimonial.position })
+          ] }),
+          hasButton && testimonial.logo && /* @__PURE__ */ jsxs("div", { className: "mt-5 flex items-center gap-4 md:mt-6", children: [
+            /* @__PURE__ */ jsx(CompoundImage, { src: testimonial.logo.src, alt: testimonial.logo.alt, className: "max-h-12" }),
+            testimonial.button && /* @__PURE__ */ jsx(Button, { variant: testimonial.button.variant, size: testimonial.button.size, children: testimonial.button.label })
+          ] })
+        ]
+      },
+      index
+    )) })
+  ] }) });
+};
+const TestimonialCardGridDefaults = {
+  heading: "Customer testimonials",
+  description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+  testimonials: [
+    {
+      image: { src: "https://d22po4pjz3o32e.cloudfront.net/webflow-logo.svg", alt: "Webflow logo 1" },
+      quote: '"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."',
+      avatar: { src: "https://picsum.photos/seed/testimonial-1/100/100", alt: "Testimonial avatar 1" },
+      name: "Name Surname",
+      position: "Position, Company name",
+      numberOfStars: 5
+    },
+    {
+      image: { src: "https://d22po4pjz3o32e.cloudfront.net/webflow-logo.svg", alt: "Webflow logo 2" },
+      quote: '"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."',
+      avatar: { src: "https://picsum.photos/seed/testimonial-2/100/100", alt: "Testimonial avatar 2" },
+      name: "Name Surname",
+      position: "Position, Company name",
+      numberOfStars: 5
+    }
+  ],
+  styles: {
+    textAlign: "center",
+    gridColumns: 2,
+    ratingType: "logo",
+    bordered: false,
+    hasButton: false
+  }
+};
+export {
+  TestimonialCardGrid,
+  TestimonialCardGridDefaults
+};

package/dist/components/puck-block/testimonial-sections/testimonial-card-grid/index.d.ts

@@ -0,0 +1,119 @@
+import { TestimonialCardGrid, TestimonialCardGridDefaults } from "./component";
+import type { TestimonialCardGridProps } from "./component";
+export { TestimonialCardGrid, TestimonialCardGridDefaults };
+export type { TestimonialCardGridProps };
+declare const conf: {
+    fields: {
+        heading: {
+            readonly type: "text";
+            readonly contentEditable: true;
+        };
+        description: {
+            readonly type: "textarea";
+            readonly contentEditable: true;
+        };
+        testimonials: {
+            type: string;
+            getItemSummary: (item: {
+                name?: string;
+            }, index?: number) => string;
+            arrayFields: {
+                quote: {
+                    type: string;
+                };
+                name: {
+                    type: string;
+                };
+                position: {
+                    type: string;
+                };
+            };
+        };
+        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.";
+                    };
+                };
+                textAlign: {
+                    readonly type: "radio";
+                    readonly label: "Text Align";
+                    readonly options: readonly [{
+                        readonly label: "Left";
+                        readonly value: "left";
+                    }, {
+                        readonly label: "Center";
+                        readonly value: "center";
+                    }];
+                };
+                gridColumns: {
+                    readonly type: "radio";
+                    readonly label: "Grid Columns";
+                    readonly options: readonly [{
+                        readonly label: "2";
+                        readonly value: "2";
+                    }, {
+                        readonly label: "3";
+                        readonly value: "3";
+                    }];
+                };
+                ratingType: {
+                    readonly type: "radio";
+                    readonly label: "Rating Type";
+                    readonly options: readonly [{
+                        readonly label: "Logo";
+                        readonly value: "logo";
+                    }, {
+                        readonly label: "Stars";
+                        readonly value: "stars";
+                    }];
+                };
+                bordered: {
+                    readonly type: "radio";
+                    readonly label: "Bordered";
+                    readonly options: readonly [{
+                        readonly label: "Yes";
+                        readonly value: "true";
+                    }, {
+                        readonly label: "No";
+                        readonly value: "false";
+                    }];
+                };
+                hasButton: {
+                    readonly type: "radio";
+                    readonly label: "Has Button";
+                    readonly options: readonly [{
+                        readonly label: "Yes";
+                        readonly value: "true";
+                    }, {
+                        readonly label: "No";
+                        readonly value: "false";
+                    }];
+                };
+            };
+        };
+    };
+    defaultProps: TestimonialCardGridProps;
+    render: (props: TestimonialCardGridProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default conf;

package/dist/components/puck-block/testimonial-sections/testimonial-card-grid/index.js

@@ -0,0 +1,38 @@
+import { TestimonialCardGrid, TestimonialCardGridDefaults } from "./component.js";
+import { descriptionField, headingField } from "../../../puck-core/core/props/content.js";
+import { testimonialStyleFields } from "../props.js";
+import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
+const conf = {
+  fields: {
+    heading: headingField,
+    description: descriptionField,
+    testimonials: {
+      type: "array",
+      getItemSummary: (item, index = 0) => item.name || `Testimonial ${index + 1}`,
+      arrayFields: {
+        quote: { type: "textarea" },
+        name: { type: "text" },
+        position: { type: "text" }
+      }
+    },
+    styles: {
+      type: "object",
+      label: "Styles",
+      objectFields: {
+        textAlign: testimonialStyleFields.textAlign,
+        gridColumns: testimonialStyleFields.gridColumns,
+        ratingType: testimonialStyleFields.ratingType,
+        bordered: testimonialStyleFields.bordered,
+        hasButton: testimonialStyleFields.hasButton,
+        ...sectionWrapperFields
+      }
+    }
+  },
+  defaultProps: TestimonialCardGridDefaults,
+  render: TestimonialCardGrid
+};
+export {
+  TestimonialCardGrid,
+  TestimonialCardGridDefaults,
+  conf as default
+};

package/dist/components/puck-block/testimonial-sections/testimonial-carousel/component.d.ts

@@ -0,0 +1,17 @@
+import type { TestimonialComponentProps, BaseImage, BaseButton } from "../props";
+type Testimonial = {
+    quote: string;
+    logo?: BaseImage;
+    avatar: BaseImage;
+    name: string;
+    position: string;
+    numberOfStars: number;
+    button?: BaseButton;
+};
+type TestimonialCarouselExtra = {
+    testimonials: Testimonial[];
+};
+export type TestimonialCarouselProps = TestimonialComponentProps<TestimonialCarouselExtra>;
+export declare const TestimonialCarousel: (props: TestimonialCarouselProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TestimonialCarouselDefaults: TestimonialCarouselProps;
+export {};

package/dist/components/puck-block/testimonial-sections/testimonial-carousel/component.js

@@ -0,0 +1,122 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { Button } from "../../../shadcn/button.js";
+import { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext } from "../../../shadcn/carousel.js";
+import { CompoundImage } from "../../../puck-base/image.js";
+import { cn } from "../../../../utils/css-utils.js";
+import { BiSolidStar } from "../../../../node_modules/.pnpm/react-icons@5.6.0_react@19.2.4/node_modules/react-icons/bi/index.js";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
+const TestimonialCarousel = (props) => {
+  const {
+    heading,
+    description,
+    testimonials,
+    styles
+  } = {
+    ...TestimonialCarouselDefaults,
+    ...props
+  };
+  const {
+    className: sectionClassName,
+    style: sectionStyle,
+    css,
+    ratingType = "logo",
+    hasHeading = false,
+    textAlign = "center",
+    carouselColumns = 1,
+    bordered = false,
+    hasButton = false
+  } = styles ?? {};
+  const [api, setApi] = useState();
+  const [current, setCurrent] = useState(0);
+  useEffect(() => {
+    if (!api) return;
+    setCurrent(api.selectedScrollSnap() + 1);
+    api.on("select", () => {
+      setCurrent(api.selectedScrollSnap() + 1);
+    });
+  }, [api]);
+  const basisClass = carouselColumns === 3 ? "md:basis-1/2 lg:basis-1/3" : carouselColumns === 2 ? "md:basis-1/2" : "md:basis-full";
+  return /* @__PURE__ */ jsx(SectionWrapper, { className: cn("overflow-hidden px-[5%] py-8 md:py-12 lg:py-14", sectionClassName), style: sectionStyle, css, children: /* @__PURE__ */ jsxs("div", { className: "container", children: [
+    hasHeading && /* @__PURE__ */ jsxs("div", { className: `mb-12 w-full max-w-lg md:mb-18 lg:mb-20 ${textAlign === "center" ? "mx-auto text-center" : ""}`, children: [
+      /* @__PURE__ */ jsx("h1", { 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__ */ jsxs(
+      Carousel,
+      {
+        setApi,
+        opts: { loop: true, align: "start" },
+        className: "overflow-hidden",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+            /* @__PURE__ */ jsx(CarouselContent, { className: "ml-0 md:mx-3", children: testimonials.map((testimonial2, index) => /* @__PURE__ */ jsx(
+              CarouselItem,
+              {
+                className: `pl-0 ${carouselColumns === 1 ? "md:px-16" : "pr-6 md:pr-8"} ${basisClass}`,
+                children: /* @__PURE__ */ jsxs("div", { className: `mx-auto flex w-full max-w-lg flex-col items-center text-center ${bordered ? "border border-border-primary p-6 md:p-8" : ""}`, children: [
+                  ratingType === "logo" && testimonial2.logo && /* @__PURE__ */ jsx("div", { className: "mb-6 md:mb-8", children: /* @__PURE__ */ jsx(CompoundImage, { src: testimonial2.logo.src, alt: testimonial2.logo.alt, className: "max-h-14" }) }),
+                  ratingType === "stars" && /* @__PURE__ */ jsx("div", { className: "mb-5 flex md:mb-6", children: Array(testimonial2.numberOfStars).fill(null).map((_, starIndex) => /* @__PURE__ */ jsx(BiSolidStar, { className: "mr-1 size-6" }, starIndex)) }),
+                  /* @__PURE__ */ jsx("blockquote", { className: `font-bold ${carouselColumns === 1 ? "text-xl md:text-2xl" : "text-md leading-[1.4] md:text-xl"}`, children: testimonial2.quote }),
+                  /* @__PURE__ */ jsxs("div", { className: "mt-6 flex flex-col items-center justify-center md:mt-8", children: [
+                    /* @__PURE__ */ jsx("div", { className: "mb-3 md:mb-4", children: /* @__PURE__ */ jsx(
+                      CompoundImage,
+                      {
+                        src: testimonial2.avatar.src,
+                        alt: testimonial2.avatar.alt,
+                        className: "size-16 min-h-16 min-w-16 rounded-full object-cover"
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx("p", { className: "font-semibold", children: testimonial2.name }),
+                    /* @__PURE__ */ jsx("p", { children: testimonial2.position })
+                  ] }),
+                  hasButton && testimonial2.button && /* @__PURE__ */ jsx("div", { className: "mt-4", children: /* @__PURE__ */ jsx(Button, { variant: testimonial2.button.variant, size: testimonial2.button.size, children: testimonial2.button.label }) })
+                ] })
+              },
+              index
+            )) }),
+            /* @__PURE__ */ jsx(CarouselPrevious, { className: "mt-8 hidden md:flex md:size-14" }),
+            /* @__PURE__ */ jsx(CarouselNext, { className: "mt-8 hidden md:flex md:size-14" })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "mt-[30px] flex items-center justify-center md:mt-[46px]", children: testimonials.map((_, index) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => api == null ? void 0 : api.scrollTo(index),
+              className: cn("relative mx-[3px] inline-block size-2 rounded-full", {
+                "bg-black": current === index + 1,
+                "bg-neutral-darker/40": current !== index + 1
+              })
+            },
+            index
+          )) })
+        ]
+      }
+    )
+  ] }) });
+};
+const testimonial = {
+  quote: '"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."',
+  logo: { src: "https://d22po4pjz3o32e.cloudfront.net/webflow-logo.svg", alt: "Webflow logo" },
+  avatar: { src: "https://picsum.photos/seed/testimonial-carousel/100/100", alt: "Testimonial avatar" },
+  name: "Name Surname",
+  position: "Position, Company name",
+  numberOfStars: 5
+};
+const TestimonialCarouselDefaults = {
+  heading: "Customer testimonials",
+  description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+  testimonials: [testimonial, testimonial, testimonial],
+  styles: {
+    ratingType: "logo",
+    hasHeading: false,
+    textAlign: "center",
+    carouselColumns: 1,
+    bordered: false,
+    hasButton: false
+  }
+};
+export {
+  TestimonialCarousel,
+  TestimonialCarouselDefaults
+};

package/dist/components/puck-block/testimonial-sections/testimonial-carousel/index.d.ts

@@ -0,0 +1,133 @@
+import { TestimonialCarousel, TestimonialCarouselDefaults } from "./component";
+import type { TestimonialCarouselProps } from "./component";
+export { TestimonialCarousel, TestimonialCarouselDefaults };
+export type { TestimonialCarouselProps };
+declare const conf: {
+    fields: {
+        heading: {
+            readonly type: "text";
+            readonly contentEditable: true;
+        };
+        description: {
+            readonly type: "textarea";
+            readonly contentEditable: true;
+        };
+        testimonials: {
+            type: string;
+            getItemSummary: (item: {
+                name?: string;
+            }, index?: number) => string;
+            arrayFields: {
+                quote: {
+                    type: string;
+                };
+                name: {
+                    type: string;
+                };
+                position: {
+                    type: string;
+                };
+            };
+        };
+        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.";
+                    };
+                };
+                ratingType: {
+                    readonly type: "radio";
+                    readonly label: "Rating Type";
+                    readonly options: readonly [{
+                        readonly label: "Logo";
+                        readonly value: "logo";
+                    }, {
+                        readonly label: "Stars";
+                        readonly value: "stars";
+                    }];
+                };
+                hasHeading: {
+                    readonly type: "radio";
+                    readonly label: "Has Heading";
+                    readonly options: readonly [{
+                        readonly label: "Yes";
+                        readonly value: "true";
+                    }, {
+                        readonly label: "No";
+                        readonly value: "false";
+                    }];
+                };
+                textAlign: {
+                    readonly type: "radio";
+                    readonly label: "Text Align";
+                    readonly options: readonly [{
+                        readonly label: "Left";
+                        readonly value: "left";
+                    }, {
+                        readonly label: "Center";
+                        readonly value: "center";
+                    }];
+                };
+                carouselColumns: {
+                    readonly type: "radio";
+                    readonly label: "Carousel Columns";
+                    readonly options: readonly [{
+                        readonly label: "1";
+                        readonly value: "1";
+                    }, {
+                        readonly label: "2";
+                        readonly value: "2";
+                    }, {
+                        readonly label: "3";
+                        readonly value: "3";
+                    }];
+                };
+                bordered: {
+                    readonly type: "radio";
+                    readonly label: "Bordered";
+                    readonly options: readonly [{
+                        readonly label: "Yes";
+                        readonly value: "true";
+                    }, {
+                        readonly label: "No";
+                        readonly value: "false";
+                    }];
+                };
+                hasButton: {
+                    readonly type: "radio";
+                    readonly label: "Has Button";
+                    readonly options: readonly [{
+                        readonly label: "Yes";
+                        readonly value: "true";
+                    }, {
+                        readonly label: "No";
+                        readonly value: "false";
+                    }];
+                };
+            };
+        };
+    };
+    defaultProps: TestimonialCarouselProps;
+    render: (props: TestimonialCarouselProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default conf;

package/dist/components/puck-block/testimonial-sections/testimonial-carousel/index.js

@@ -0,0 +1,39 @@
+import { TestimonialCarousel, TestimonialCarouselDefaults } from "./component.js";
+import { descriptionField, headingField } from "../../../puck-core/core/props/content.js";
+import { testimonialStyleFields } from "../props.js";
+import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
+const conf = {
+  fields: {
+    heading: headingField,
+    description: descriptionField,
+    testimonials: {
+      type: "array",
+      getItemSummary: (item, index = 0) => item.name || `Testimonial ${index + 1}`,
+      arrayFields: {
+        quote: { type: "textarea" },
+        name: { type: "text" },
+        position: { type: "text" }
+      }
+    },
+    styles: {
+      type: "object",
+      label: "Styles",
+      objectFields: {
+        ratingType: testimonialStyleFields.ratingType,
+        hasHeading: testimonialStyleFields.hasHeading,
+        textAlign: testimonialStyleFields.textAlign,
+        carouselColumns: testimonialStyleFields.carouselColumns,
+        bordered: testimonialStyleFields.bordered,
+        hasButton: testimonialStyleFields.hasButton,
+        ...sectionWrapperFields
+      }
+    }
+  },
+  defaultProps: TestimonialCarouselDefaults,
+  render: TestimonialCarousel
+};
+export {
+  TestimonialCarousel,
+  TestimonialCarouselDefaults,
+  conf as default
+};

package/dist/components/puck-block/text-sections/aside-nav-content/component.d.ts

@@ -0,0 +1,17 @@
+import type { TextComponentProps, TextSectionBaseProps } from "../props";
+type AsideLink = {
+    title: string;
+    href: string;
+};
+type Aside = {
+    title: string;
+    links: AsideLink[];
+};
+type AsideNavContentExtra = {
+    aside: Aside;
+    prose: string;
+};
+export type AsideNavContentProps = TextComponentProps<AsideNavContentExtra>;
+export declare const AsideNavContent: (props: AsideNavContentProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AsideNavContentDefaults: Partial<TextSectionBaseProps> & AsideNavContentExtra;
+export {};

package/dist/components/puck-block/text-sections/aside-nav-content/component.js

@@ -0,0 +1,65 @@
+"use client";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { cn } from "../../../../utils/css-utils.js";
+import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "../../../shadcn/accordion.js";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
+const AsideNavContent = (props) => {
+  var _a;
+  const {
+    aside,
+    prose,
+    styles
+  } = {
+    ...AsideNavContentDefaults,
+    ...props
+  };
+  const {
+    className: sectionClassName,
+    style: sectionStyle,
+    css,
+    asidePosition = "left"
+  } = styles ?? {};
+  const currentHash = (_a = aside.links[0]) == null ? void 0 : _a.href;
+  const asideContent = /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("div", { className: "lg:sticky lg:top-24", children: /* @__PURE__ */ jsx(Accordion, { type: "single", defaultValue: ["aside-menu"], className: "lg:block", collapsible: true, children: /* @__PURE__ */ jsxs(AccordionItem, { value: "aside-menu", className: "border-none", children: [
+    /* @__PURE__ */ jsx(AccordionTrigger, { className: "flex cursor-pointer items-center justify-between gap-3 border border-border-primary px-4 py-3 lg:pointer-events-none lg:cursor-auto lg:border-none lg:p-0 [&_svg]:size-4 [&_svg]:lg:hidden", children: /* @__PURE__ */ jsx("h3", { className: "text-lg font-bold leading-[1.4] md:text-2xl", children: aside.title }) }),
+    /* @__PURE__ */ jsx(AccordionContent, { className: "pb-0", children: /* @__PURE__ */ jsx("div", { className: "mt-3 md:mt-4", children: aside.links.map((link, index) => /* @__PURE__ */ jsx(
+      "a",
+      {
+        href: link.href,
+        className: cn("block px-4 py-3 md:text-md", {
+          "bg-background-secondary font-semibold": link.href === currentHash
+        }),
+        children: link.title
+      },
+      index
+    )) }) })
+  ] }) }) }) });
+  const proseContent = /* @__PURE__ */ jsx("div", { className: "max-w-lg", children: /* @__PURE__ */ jsx("div", { className: "prose md:prose-md lg:prose-lg", dangerouslySetInnerHTML: { __html: prose } }) });
+  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__ */ jsx("div", { className: "grid grid-cols-1 gap-y-8 lg:grid-cols-[20rem_1fr] lg:gap-x-16 xxl:gap-x-48", children: asidePosition === "left" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    asideContent,
+    proseContent
+  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    proseContent,
+    asideContent
+  ] }) }) }) });
+};
+const AsideNavContentDefaults = {
+  aside: {
+    title: "Table of contents",
+    links: [
+      { title: "Heading 2", href: "#heading-2" },
+      { title: "Heading 3", href: "#heading-3" },
+      { title: "Heading 4", href: "#heading-4" },
+      { title: "Heading 5", href: "#heading-5" },
+      { title: "Heading 6", href: "#heading-6" }
+    ]
+  },
+  prose: `<h2 id="heading-2">Heading 2</h2><p>Dolor enim eu tortor urna sed duis nulla. Aliquam vestibulum, nulla odio nisl vitae. In aliquet pellentesque aenean hac vestibulum turpis mi bibendum diam.</p><h3 id="heading-3">Heading 3</h3><p>Eget quis mi enim, leo lacinia pharetra, semper. Eget in volutpat mollis at volutpat lectus velit, sed auctor. Porttitor fames arcu quis fusce augue enim.</p><h4 id="heading-4">Heading 4</h4><p>Morbi sed imperdiet in ipsum, adipiscing elit dui lectus. Tellus id scelerisque est ultricies ultricies.</p><h5 id="heading-5">Heading 5</h5><p>Morbi sed imperdiet in ipsum, adipiscing elit dui lectus. Tellus id scelerisque est ultricies ultricies.</p><h6 id="heading-6">Heading 6</h6><p>Nunc sed faucibus bibendum feugiat sed interdum. Ipsum egestas condimentum mi massa.</p>`,
+  styles: {
+    asidePosition: "left"
+  }
+};
+export {
+  AsideNavContent,
+  AsideNavContentDefaults
+};