dune-react 0.0.9 → 0.0.11

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

@@ -7,19 +7,16 @@ import { Carousel, CarouselContent, CarouselItem } from "../../../shadcn/carouse
 import { CompoundContainer } from "../../../puck-base/container.js";
 import { CompoundImage } from "../../../puck-base/image.js";
 const Customers = ({
-  padding,
-  sectionStyle,
-  backgroundColor,
-  layout = "section",
   heading,
-  customers
+  items,
+  styles
 }) => {
   const [api, setApi] = useState();
   const [currentIndex, setCurrentIndex] = useState(0);
   const [isPaused, setIsPaused] = useState(false);
   const prefersReducedMotion = usePrefersReducedMotion();
-  const isSectionLayout = layout === "section";
-  const isInlineLayout = layout === "inline";
+  const isSectionLayout = ((styles == null ? void 0 : styles.layout) ?? "section") === "section";
+  const isInlineLayout = (styles == null ? void 0 : styles.layout) === "inline";
   useEffect(() => {
     if (!api || prefersReducedMotion || isPaused) {
       return;
@@ -38,9 +35,9 @@ const Customers = ({
   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",
         {
@@ -80,7 +77,7 @@ const Customers = ({
                       onMouseOut: () => {
                         setIsPaused(false);
                       },
-                      children: /* @__PURE__ */ jsx(CarouselContent, { children: customers.map((customer, index) => {
+                      children: /* @__PURE__ */ jsx(CarouselContent, { children: items.map((customer, index) => {
                         var _a;
                         return /* @__PURE__ */ jsx(CarouselItem, { className: "basis-1/4 lg:basis-1/6", children: /* @__PURE__ */ jsx("div", { className: "bg-muted flex aspect-square items-center justify-center rounded-md p-6", children: ((_a = customer.image) == null ? void 0 : _a.src) ? /* @__PURE__ */ jsx(
                           CompoundImage,

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

@@ -1,9 +1,20 @@
-import { paddingDefaults, padding, image1x1Placeholder, image, heading, getPlaceholderImageUrl } from "../../../puck-base/core/fields.js";
+import { image1x1Placeholder, image, heading, getPlaceholderImageUrl } from "../../../puck-base/core/fields.js";
 import { Customers } from "./customers.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
+const customersStylesField = createStylesField({
+  layout: {
+    type: "radio",
+    label: "Layout",
+    options: [
+      { label: "Section", value: "section" },
+      { label: "Inline", value: "inline" }
+    ]
+  }
+});
 const conf = {
   fields: {
     heading,
-    customers: {
+    items: {
       type: "array",
       max: 15,
       getItemSummary: (item, index = 0) => item.name || `Customer ${index + 1}`,
@@ -16,29 +27,18 @@ const conf = {
         image: image1x1Placeholder
       }
     },
-    layout: {
-      type: "radio",
-      options: [
-        {
-          label: "section",
-          value: "section"
-        },
-        { label: "inline", value: "inline" }
-      ]
-    },
-    padding
+    styles: customersStylesField
   },
   defaultProps: {
-    padding: paddingDefaults,
-    layout: "section",
     heading: "Trusted by hundreds of businesses worldwide",
-    customers: Array.from({ length: 10 }).map((_, index) => ({
+    items: Array.from({ length: 10 }).map((_, index) => ({
       name: `Customer ${index + 1}`,
       image: {
         src: getPlaceholderImageUrl("1000x1000", `Customer ${index + 1}`),
         alt: ""
       }
-    }))
+    })),
+    styles: createStylesDefaults({ layout: "section" })
   },
   render: Customers
 };

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

@@ -1,9 +1,21 @@
-import { paddingDefaults, padding, getPlaceholderImageUrl } from "../../../puck-base/core/fields.js";
+import { getPlaceholderImageUrl } from "../../../puck-base/core/fields.js";
 import { LogoMarquee } from "./logo-marquee.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
 const logoPlaceholder = (name) => ({
   src: getPlaceholderImageUrl("200x60", name),
   alt: name
 });
+const marqueeStylesField = createStylesField({
+  speed: {
+    type: "radio",
+    label: "Speed",
+    options: [
+      { label: "Slow", value: "slow" },
+      { label: "Normal", value: "normal" },
+      { label: "Fast", value: "fast" }
+    ]
+  }
+});
 const conf = {
   fields: {
     heading: { type: "text", contentEditable: true },
@@ -17,15 +29,7 @@ const conf = {
       },
       defaultItemProps: logoPlaceholder("Brand")
     },
-    speed: {
-      type: "radio",
-      options: [
-        { label: "Slow", value: "slow" },
-        { label: "Normal", value: "normal" },
-        { label: "Fast", value: "fast" }
-      ]
-    },
-    padding
+    styles: marqueeStylesField
   },
   defaultProps: {
     heading: "Trusted by industry leaders",
@@ -36,8 +40,7 @@ const conf = {
       logoPlaceholder("DataFlow"),
       logoPlaceholder("CloudNet")
     ],
-    speed: "normal",
-    padding: paddingDefaults
+    styles: createStylesDefaults({ sectionStyle: "muted", speed: "normal" })
   },
   render: LogoMarquee
 };

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

@@ -1,11 +1,15 @@
 import { CompoundContainerProps } from "@/components/puck-base/container";
 export interface LogoMarqueeProps {
-    padding?: CompoundContainerProps["padding"];
     heading?: string;
     logos?: Array<{
         src: string;
         alt: string;
     }>;
-    speed?: "slow" | "normal" | "fast";
+    styles?: {
+        padding?: CompoundContainerProps["padding"];
+        sectionStyle?: CompoundContainerProps["sectionStyle"];
+        backgroundColor?: string;
+        speed?: "slow" | "normal" | "fast";
+    };
 }
-export declare const LogoMarquee: ({ padding, heading, logos, speed, }: LogoMarqueeProps) => import("react/jsx-runtime").JSX.Element;
+export declare const LogoMarquee: ({ heading, logos, styles, }: LogoMarqueeProps) => import("react/jsx-runtime").JSX.Element;

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,
+    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,20 +1,31 @@
-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",
   avatar: {
-    src: "https://dummyimage.com/200x200/f5f4f4/101010.png&text=AJ",
+    src: "https://picsum.photos/seed/AJ/200/200",
     alt: "Reviewer avatar"
   },
   rating: 5,
   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;