dune-react 0.0.9 → 0.0.10

package/dist/components/puck-block/testimonial-sections/logo-marquee-1/logo-marquee.js

@@ -7,35 +7,44 @@ const SPEED_DURATION = {
   fast: "15s"
 };
 const LogoMarquee = ({
-  padding,
   heading,
   logos = [],
-  speed = "normal"
-}) => /* @__PURE__ */ jsxs(CompoundContainer, { padding, sectionStyle: "muted", children: [
-  heading && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mb-8 text-center text-sm font-medium tracking-wider uppercase", children: heading }),
-  /* @__PURE__ */ jsx("div", { className: "relative overflow-hidden", children: /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: "flex w-max animate-[marquee_var(--marquee-speed)_linear_infinite] items-center gap-12",
-      style: { "--marquee-speed": SPEED_DURATION[speed] },
-      children: [...logos, ...logos].map((logo, i) => /* @__PURE__ */ jsx(
+  styles
+}) => /* @__PURE__ */ jsxs(
+  CompoundContainer,
+  {
+    padding: styles == null ? void 0 : styles.padding,
+    sectionStyle: (styles == null ? void 0 : styles.sectionStyle) ?? "muted",
+    backgroundColor: styles == null ? void 0 : styles.backgroundColor,
+    children: [
+      heading && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mb-8 text-center text-sm font-medium tracking-wider uppercase", children: heading }),
+      /* @__PURE__ */ jsx("div", { className: "relative overflow-hidden", children: /* @__PURE__ */ jsx(
         "div",
         {
-          className: "h-8 flex-shrink-0 opacity-60 transition-opacity hover:opacity-100 md:h-10",
-          children: logo.src ? /* @__PURE__ */ jsx(
-            CompoundImage,
+          className: "flex w-max animate-[marquee_var(--marquee-speed)_linear_infinite] items-center gap-12",
+          style: {
+            "--marquee-speed": SPEED_DURATION[(styles == null ? void 0 : styles.speed) ?? "normal"]
+          },
+          children: [...logos, ...logos].map((logo, i) => /* @__PURE__ */ jsx(
+            "div",
             {
-              src: logo.src,
-              alt: logo.alt || "",
-              className: "h-full w-auto object-contain"
-            }
-          ) : /* @__PURE__ */ jsx("div", { className: "bg-border/50 text-muted-foreground flex h-full w-24 items-center justify-center rounded text-xs", children: "Logo" })
-        },
-        i
-      ))
-    }
-  ) })
-] });
+              className: "h-8 flex-shrink-0 opacity-60 transition-opacity hover:opacity-100 md:h-10",
+              children: logo.src ? /* @__PURE__ */ jsx(
+                CompoundImage,
+                {
+                  src: logo.src,
+                  alt: logo.alt || "",
+                  className: "h-full w-auto object-contain"
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: "bg-border/50 text-muted-foreground flex h-full w-24 items-center justify-center rounded text-xs", children: "Logo" })
+            },
+            i
+          ))
+        }
+      ) })
+    ]
+  }
+);
 export {
   LogoMarquee
 };

package/dist/components/puck-block/testimonial-sections/logo-wall-1/index.js

@@ -1,9 +1,22 @@
-import { paddingDefaults, backgroundColor, sectionStyle, padding, image, getPlaceholderImageUrl } from "../../../puck-base/core/fields.js";
+import { image, getPlaceholderImageUrl } from "../../../puck-base/core/fields.js";
 import { LogoWall1 } from "./logo-wall.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
 const logoPlaceholder = (name) => ({
   src: getPlaceholderImageUrl("200x200", name),
   alt: name
 });
+const logoWallStylesField = createStylesField({
+  columns: {
+    type: "radio",
+    label: "Columns",
+    options: [
+      { label: "3", value: 3 },
+      { label: "4", value: 4 },
+      { label: "5", value: 5 },
+      { label: "6", value: 6 }
+    ]
+  }
+});
 const conf = {
   fields: {
     heading: { type: "text", contentEditable: true },
@@ -17,31 +30,19 @@ const conf = {
       },
       defaultItemProps: logoPlaceholder("Brand")
     },
-    columns: {
-      type: "radio",
-      options: [
-        { label: "3", value: 3 },
-        { label: "4", value: 4 },
-        { label: "5", value: 5 },
-        { label: "6", value: 6 }
-      ]
-    },
-    padding,
-    sectionStyle,
-    backgroundColor
+    styles: logoWallStylesField
   },
   defaultProps: {
-    padding: paddingDefaults,
     heading: "Brands and tools we use",
     description: "We partner with industry-leading platforms and manufacturers to deliver the best experience.",
-    columns: 5,
     logos: [
       logoPlaceholder("Partner 1"),
       logoPlaceholder("Partner 2"),
       logoPlaceholder("Partner 3"),
       logoPlaceholder("Partner 4"),
       logoPlaceholder("Partner 5")
-    ]
+    ],
+    styles: createStylesDefaults({ columns: 5 })
   },
   render: LogoWall1
 };

package/dist/components/puck-block/testimonial-sections/logo-wall-1/logo-wall.d.ts

@@ -3,13 +3,15 @@ import { PuckComponent } from "@puckeditor/core";
 export interface LogoWall1Props {
     heading?: string;
     description?: string;
-    columns?: 3 | 4 | 5 | 6;
     logos?: {
         src: string;
         alt: string;
     }[];
-    padding?: CompoundContainerProps["padding"];
-    sectionStyle?: CompoundContainerProps["sectionStyle"];
-    backgroundColor?: string;
+    styles?: {
+        padding?: CompoundContainerProps["padding"];
+        sectionStyle?: CompoundContainerProps["sectionStyle"];
+        backgroundColor?: string;
+        columns?: 3 | 4 | 5 | 6;
+    };
 }
 export declare const LogoWall1: PuckComponent<LogoWall1Props>;

package/dist/components/puck-block/testimonial-sections/logo-wall-1/logo-wall.js

@@ -5,18 +5,16 @@ import { cn } from "../../../../utils/css-utils.js";
 const LogoWall1 = ({
   heading,
   description,
-  columns = 5,
   logos = [],
-  padding,
-  sectionStyle,
-  backgroundColor
+  styles
 }) => {
+  const columns = (styles == null ? void 0 : styles.columns) ?? 5;
   return /* @__PURE__ */ jsx(
     CompoundContainer,
     {
-      padding,
-      sectionStyle,
-      backgroundColor,
+      padding: styles == null ? void 0 : styles.padding,
+      sectionStyle: styles == null ? void 0 : styles.sectionStyle,
+      backgroundColor: styles == null ? void 0 : styles.backgroundColor,
       children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-8 md:gap-16", children: [
         /* @__PURE__ */ jsx("div", { className: "flex max-w-3xl flex-col gap-4", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
           heading && /* @__PURE__ */ jsx("h2", { className: "font-serif font-regular max-w-xl text-3xl tracking-tighter md:text-4xl", children: heading }),

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

@@ -0,0 +1,34 @@
+type TestimonialVariant = "customers-1" | "logo-marquee-1" | "logo-wall-1" | "review-section-1" | "testimonials-1";
+type TestimonialPadding = {
+    top?: "none" | "small" | "medium" | "large";
+    bottom?: "none" | "small" | "medium" | "large";
+};
+type TestimonialSectionStyle = "default" | "dark" | "muted" | "inverted" | "custom";
+type TestimonialImage = {
+    src: string;
+    alt?: string;
+};
+type TestimonialItem = {
+    title?: string;
+    quote?: string;
+    name?: string;
+    image?: TestimonialImage;
+    url?: string;
+    rating?: number;
+    company?: string;
+};
+type TestimonialSectionProps = {
+    variant?: TestimonialVariant;
+    heading?: string;
+    description?: string;
+    items?: TestimonialItem[];
+    logos?: TestimonialImage[];
+    styles?: {
+        padding?: TestimonialPadding;
+        sectionStyle?: TestimonialSectionStyle;
+        backgroundColor?: string;
+        layout?: "section" | "inline" | "grid" | "list" | "cards" | "quote";
+        speed?: "slow" | "normal" | "fast";
+        columns?: 3 | 4 | 5 | 6;
+    };
+};

package/dist/components/puck-block/testimonial-sections/review-section-1/index.js

@@ -1,5 +1,6 @@
-import { paddingDefaults, backgroundColor, sectionStyle, padding, image, heading } from "../../../puck-base/core/fields.js";
+import { image, heading } from "../../../puck-base/core/fields.js";
 import { ReviewSection } from "./review-section.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
 const defaultReview = {
   author: "Alex Johnson",
   role: "Verified Buyer",
@@ -11,10 +12,20 @@ const defaultReview = {
   content: "Absolutely love this product! The quality exceeded my expectations and the customer service was fantastic.",
   date: "2 days ago"
 };
+const reviewStylesField = createStylesField({
+  layout: {
+    type: "select",
+    label: "Layout",
+    options: [
+      { label: "Grid", value: "grid" },
+      { label: "List", value: "list" }
+    ]
+  }
+});
 const conf = {
   fields: {
     heading,
-    reviews: {
+    items: {
       type: "array",
       max: 12,
       getItemSummary: (item, index = 0) => item.author || `Review ${index + 1}`,
@@ -28,21 +39,11 @@ const conf = {
       },
       defaultItemProps: defaultReview
     },
-    layout: {
-      type: "select",
-      options: [
-        { label: "Grid", value: "grid" },
-        { label: "List", value: "list" }
-      ]
-    },
-    padding,
-    sectionStyle,
-    backgroundColor
+    styles: reviewStylesField
   },
   defaultProps: {
     heading: "What Our Customers Say",
-    layout: "grid",
-    reviews: [
+    items: [
       {
         ...defaultReview,
         author: "Alex Johnson",
@@ -62,7 +63,7 @@ const conf = {
         content: "Best purchase I've made this year. Highly recommend to everyone!"
       }
     ],
-    padding: paddingDefaults
+    styles: createStylesDefaults({ layout: "grid" })
   },
   render: ReviewSection
 };

package/dist/components/puck-block/testimonial-sections/review-section-1/review-section.d.ts

@@ -11,11 +11,13 @@ export interface Review {
     date?: string;
 }
 export interface ReviewSectionProps {
-    padding?: CompoundContainerProps["padding"];
-    sectionStyle?: CompoundContainerProps["sectionStyle"];
-    backgroundColor?: string;
     heading?: string;
-    reviews?: Review[];
-    layout?: "grid" | "list";
+    items?: Review[];
+    styles?: {
+        padding?: CompoundContainerProps["padding"];
+        sectionStyle?: CompoundContainerProps["sectionStyle"];
+        backgroundColor?: string;
+        layout?: "grid" | "list";
+    };
 }
-export declare const ReviewSection: ({ padding, sectionStyle, backgroundColor, heading, reviews, layout, }: ReviewSectionProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ReviewSection: ({ heading, items, styles, }: ReviewSectionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/puck-block/testimonial-sections/review-section-1/review-section.js

@@ -4,24 +4,29 @@ import { CompoundImage } from "../../../puck-base/image.js";
 import { cn } from "../../../../utils/css-utils.js";
 import { Star } from "lucide-react";
 const ReviewSection = ({
-  padding,
-  sectionStyle,
-  backgroundColor,
   heading,
-  reviews = [],
-  layout = "grid"
-}) => /* @__PURE__ */ jsx(CompoundContainer, { padding, sectionStyle, backgroundColor, children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-10", children: [
-  heading && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl", children: heading }),
-  /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn(
-        layout === "grid" ? "grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3" : "flex max-w-2xl flex-col gap-6"
-      ),
-      children: reviews.map((review, index) => /* @__PURE__ */ jsx(ReviewCard, { review }, index))
-    }
-  )
-] }) });
+  items = [],
+  styles
+}) => /* @__PURE__ */ jsx(
+  CompoundContainer,
+  {
+    padding: styles == null ? void 0 : styles.padding,
+    sectionStyle: styles == null ? void 0 : styles.sectionStyle,
+    backgroundColor: styles == null ? void 0 : styles.backgroundColor,
+    children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-10", children: [
+      heading && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl", children: heading }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            ((styles == null ? void 0 : styles.layout) ?? "grid") === "grid" ? "grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3" : "flex max-w-2xl flex-col gap-6"
+          ),
+          children: items.map((review, index) => /* @__PURE__ */ jsx(ReviewCard, { review }, index))
+        }
+      )
+    ] })
+  }
+);
 const ReviewCard = ({ review }) => {
   var _a;
   return /* @__PURE__ */ jsxs("div", { className: "border-border bg-card text-card-foreground flex flex-col gap-4 rounded-xl border p-6", children: [

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

@@ -1,5 +1,6 @@
-import { paddingDefaults, backgroundColor, sectionStyle, padding, image, heading } from "../../../puck-base/core/fields.js";
+import { image, heading } from "../../../puck-base/core/fields.js";
 import { Testimonials } from "./testimonials.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
 const defaultTestimonial = {
   title: "Best decision ever",
   quote: "Our goal was to streamline SMB trade, making it easier and faster than ever and we did it together.",
@@ -11,18 +12,20 @@ const defaultTestimonial = {
     }
   }
 };
+const testimonialStylesField = createStylesField({
+  layout: {
+    type: "radio",
+    label: "Layout",
+    options: [
+      { label: "Cards", value: "cards" },
+      { label: "Quote", value: "quote" }
+    ]
+  }
+});
 const conf = {
   fields: {
-    layout: {
-      label: "layout",
-      type: "radio",
-      options: [
-        { label: "cards", value: "cards" },
-        { label: "quote", value: "quote" }
-      ]
-    },
     heading,
-    testimonials: {
+    items: {
       type: "array",
       max: 10,
       getItemSummary: (item, index = 0) => item.author.name || `Testimonial ${index + 1}`,
@@ -42,18 +45,15 @@ const conf = {
         instructions: "Generate at least 3 testimonials"
       }
     },
-    padding,
-    sectionStyle,
-    backgroundColor
+    styles: testimonialStylesField
   },
   defaultProps: {
-    layout: "cards",
-    padding: paddingDefaults,
     heading: "Trusted by hundreds of businesses worldwide",
-    testimonials: Array.from({ length: 5 }).map((_, index) => ({
+    items: Array.from({ length: 5 }).map((_, index) => ({
       ...defaultTestimonial,
       title: `Best decision ${index}`
-    }))
+    })),
+    styles: createStylesDefaults({ layout: "cards" })
   },
   render: Testimonials
 };

package/dist/components/puck-block/testimonial-sections/testimonials-1/testimonials.d.ts

@@ -1,12 +1,8 @@
 import { CompoundContainerProps } from "@/components/puck-base/container";
 import { CompoundImageProps } from "@/components/puck-base/image";
 export interface TestimonialsProps {
-    layout?: "cards" | "quote";
-    padding?: CompoundContainerProps["padding"];
-    sectionStyle?: CompoundContainerProps["sectionStyle"];
-    backgroundColor?: string;
     heading: string;
-    testimonials: {
+    items: {
         title: string;
         quote: string;
         author: {
@@ -14,5 +10,11 @@ export interface TestimonialsProps {
             image?: CompoundImageProps;
         };
     }[];
+    styles?: {
+        layout?: "cards" | "quote";
+        padding?: CompoundContainerProps["padding"];
+        sectionStyle?: CompoundContainerProps["sectionStyle"];
+        backgroundColor?: string;
+    };
 }
-export declare const Testimonials: ({ layout, padding, sectionStyle, backgroundColor, heading, testimonials, }: TestimonialsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Testimonials: ({ heading, items: testimonials, styles, }: TestimonialsProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/puck-block/testimonial-sections/testimonials-1/testimonials.js

@@ -7,12 +7,9 @@ import { Avatar, AvatarImage, AvatarFallback } from "../../../shadcn/avatar.js";
 import { usePrefersReducedMotion } from "../../../../hooks/use-prefers-reduced-motion.js";
 import { CompoundContainer } from "../../../puck-base/container.js";
 const Testimonials = ({
-  layout,
-  padding,
-  sectionStyle,
-  backgroundColor,
   heading,
-  testimonials
+  items: testimonials,
+  styles
 }) => {
   var _a;
   const [api, setApi] = useState();
@@ -33,7 +30,7 @@ const Testimonials = ({
     }, 4e3);
   }, [api, currentIndex, prefersReducedMotion]);
   const items = testimonials ?? [];
-  if (layout === "quote") {
+  if ((styles == null ? void 0 : styles.layout) === "quote") {
     const safeIndex = items.length > 0 ? currentIndex % items.length : 0;
     const testimonial = items[safeIndex];
     const prev = () => {
@@ -42,66 +39,82 @@ const Testimonials = ({
     const next = () => {
       setCurrentIndex((i) => (i + 1) % items.length);
     };
-    return /* @__PURE__ */ jsx(CompoundContainer, { padding, sectionStyle, backgroundColor, children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center text-center py-12", children: [
-      /* @__PURE__ */ jsx("p", { className: "text-sm font-medium uppercase tracking-widest text-muted-foreground", children: heading }),
-      testimonial && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsxs("h2", { className: "font-serif text-2xl font-bold italic md:text-4xl max-w-4xl mx-auto mt-6", children: [
-          "“",
-          testimonial.quote,
-          "”"
-        ] }),
-        /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mt-4", children: (_a = testimonial.author) == null ? void 0 : _a.name })
-      ] }),
-      items.length > 1 && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-4 mt-8", children: [
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: prev,
-            className: "rounded-full border border-current/30 p-2 hover:bg-white/10 transition-colors",
-            children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-5 w-5" })
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: next,
-            className: "rounded-full border border-current/30 p-2 hover:bg-white/10 transition-colors",
-            children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-5 w-5" })
-          }
-        )
-      ] })
-    ] }) });
-  }
-  return /* @__PURE__ */ jsx(CompoundContainer, { padding, sectionStyle, backgroundColor, children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-10", children: [
-    /* @__PURE__ */ jsx("h2", { className: "font-regular text-start text-3xl tracking-tighter md:text-5xl lg:max-w-xl", children: heading }),
-    /* @__PURE__ */ jsx(Carousel, { setApi, className: "w-full", children: /* @__PURE__ */ jsx(CarouselContent, { children: items.map((testimonial, index) => {
-      var _a2, _b, _c, _d, _e, _f;
-      return /* @__PURE__ */ jsx(CarouselItem, { className: "me-4 lg:basis-1/2", children: /* @__PURE__ */ jsxs("div", { className: "bg-muted flex aspect-video h-full flex-col justify-between rounded-md p-6 lg:col-span-2", children: [
-        /* @__PURE__ */ jsx(User, { className: "h-8 w-8 stroke-1" }),
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-            /* @__PURE__ */ jsx("h3", { className: "text-xl tracking-tight", children: testimonial.title }),
-            /* @__PURE__ */ jsx("p", { className: "text-muted-foreground max-w-xs text-base", children: testimonial.quote })
-          ] }),
-          /* @__PURE__ */ jsxs("p", { className: "flex flex-row items-center gap-2 text-sm", children: [
-            /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "By" }),
-            " ",
-            /* @__PURE__ */ jsxs(Avatar, { className: "h-6 w-6", children: [
-              /* @__PURE__ */ jsx(
-                AvatarImage,
-                {
-                  src: (_b = (_a2 = testimonial.author) == null ? void 0 : _a2.image) == null ? void 0 : _b.src,
-                  alt: (_d = (_c = testimonial.author) == null ? void 0 : _c.image) == null ? void 0 : _d.alt
-                }
-              ),
-              /* @__PURE__ */ jsx(AvatarFallback, { children: getInitials(((_e = testimonial.author) == null ? void 0 : _e.name) ?? "") })
+    return /* @__PURE__ */ jsx(
+      CompoundContainer,
+      {
+        padding: styles == null ? void 0 : styles.padding,
+        sectionStyle: styles == null ? void 0 : styles.sectionStyle,
+        backgroundColor: styles == null ? void 0 : styles.backgroundColor,
+        children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center text-center py-12", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-medium uppercase tracking-widest text-muted-foreground", children: heading }),
+          testimonial && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs("h2", { className: "font-serif text-2xl font-bold italic md:text-4xl max-w-4xl mx-auto mt-6", children: [
+              "“",
+              testimonial.quote,
+              "”"
             ] }),
-            /* @__PURE__ */ jsx("span", { children: (_f = testimonial.author) == null ? void 0 : _f.name })
+            /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mt-4", children: (_a = testimonial.author) == null ? void 0 : _a.name })
+          ] }),
+          items.length > 1 && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-4 mt-8", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: prev,
+                className: "rounded-full border border-current/30 p-2 hover:bg-white/10 transition-colors",
+                children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-5 w-5" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: next,
+                className: "rounded-full border border-current/30 p-2 hover:bg-white/10 transition-colors",
+                children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-5 w-5" })
+              }
+            )
           ] })
         ] })
-      ] }) }, index);
-    }) }) })
-  ] }) });
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    CompoundContainer,
+    {
+      padding: styles == null ? void 0 : styles.padding,
+      sectionStyle: styles == null ? void 0 : styles.sectionStyle,
+      backgroundColor: styles == null ? void 0 : styles.backgroundColor,
+      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-10", children: [
+        /* @__PURE__ */ jsx("h2", { className: "font-regular text-start text-3xl tracking-tighter md:text-5xl lg:max-w-xl", children: heading }),
+        /* @__PURE__ */ jsx(Carousel, { setApi, className: "w-full", children: /* @__PURE__ */ jsx(CarouselContent, { children: items.map((testimonial, index) => {
+          var _a2, _b, _c, _d, _e, _f;
+          return /* @__PURE__ */ jsx(CarouselItem, { className: "me-4 lg:basis-1/2", children: /* @__PURE__ */ jsxs("div", { className: "bg-muted flex aspect-video h-full flex-col justify-between rounded-md p-6 lg:col-span-2", children: [
+            /* @__PURE__ */ jsx(User, { className: "h-8 w-8 stroke-1" }),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+                /* @__PURE__ */ jsx("h3", { className: "text-xl tracking-tight", children: testimonial.title }),
+                /* @__PURE__ */ jsx("p", { className: "text-muted-foreground max-w-xs text-base", children: testimonial.quote })
+              ] }),
+              /* @__PURE__ */ jsxs("p", { className: "flex flex-row items-center gap-2 text-sm", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "By" }),
+                " ",
+                /* @__PURE__ */ jsxs(Avatar, { className: "h-6 w-6", children: [
+                  /* @__PURE__ */ jsx(
+                    AvatarImage,
+                    {
+                      src: (_b = (_a2 = testimonial.author) == null ? void 0 : _a2.image) == null ? void 0 : _b.src,
+                      alt: (_d = (_c = testimonial.author) == null ? void 0 : _c.image) == null ? void 0 : _d.alt
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(AvatarFallback, { children: getInitials(((_e = testimonial.author) == null ? void 0 : _e.name) ?? "") })
+                ] }),
+                /* @__PURE__ */ jsx("span", { children: (_f = testimonial.author) == null ? void 0 : _f.name })
+              ] })
+            ] })
+          ] }) }, index);
+        }) }) })
+      ] })
+    }
+  );
 };
 function getInitials(name, maxInitials) {
   if (!name) {

package/dist/components/puck-block/text-sections/articles-1/articles.d.ts

@@ -2,13 +2,15 @@ import { CompoundContainerProps } from "@/components/puck-base/container";
 import { CompoundButtonProps } from "@/components/puck-base/button";
 import { PuckComponent, Slot } from "@puckeditor/core";
 export interface ArticlesProps {
-    padding?: CompoundContainerProps["padding"];
-    sectionStyle?: CompoundContainerProps["sectionStyle"];
-    backgroundColor?: string;
     eyebrow?: string;
     heading?: string;
-    button?: CompoundButtonProps;
-    columns?: 2 | 3 | 4;
+    buttons?: CompoundButtonProps[];
     cards?: Slot;
+    styles?: {
+        padding?: CompoundContainerProps["padding"];
+        sectionStyle?: CompoundContainerProps["sectionStyle"];
+        backgroundColor?: string;
+        columns?: 2 | 3 | 4;
+    };
 }
 export declare const Articles: PuckComponent<ArticlesProps>;