dune-react 0.0.9 → 0.0.11

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

@@ -7,33 +7,42 @@ 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();
   const [currentIndex, setCurrentIndex] = useState(0);
   const prefersReducedMotion = usePrefersReducedMotion();
   useEffect(() => {
-    if (!api || prefersReducedMotion) {
+    if (!api || prefersReducedMotion || (styles == null ? void 0 : styles.layout) === "quote") {
       return;
     }
-    setTimeout(() => {
+    const timer = setTimeout(() => {
       if (api.selectedScrollSnap() + 1 === api.scrollSnapList().length) {
         setCurrentIndex(0);
         api.scrollTo(0);
       } else {
         api.scrollNext();
-        setCurrentIndex(currentIndex + 1);
+        setCurrentIndex((prev) => prev + 1);
       }
     }, 4e3);
-  }, [api, currentIndex, prefersReducedMotion]);
+    return () => clearTimeout(timer);
+  }, [api, currentIndex, prefersReducedMotion, styles == null ? void 0 : styles.layout]);
+  useEffect(() => {
+    if ((styles == null ? void 0 : styles.layout) !== "quote" || prefersReducedMotion) {
+      return;
+    }
+    const count = (testimonials ?? []).length;
+    if (count <= 1) return;
+    const timer = setTimeout(() => {
+      setCurrentIndex((prev) => (prev + 1) % count);
+    }, 5e3);
+    return () => clearTimeout(timer);
+  }, [currentIndex, prefersReducedMotion, styles == null ? void 0 : styles.layout, testimonials]);
   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 +51,90 @@ 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: (e) => {
+                  e.stopPropagation();
+                  prev();
+                },
+                style: { pointerEvents: "auto" },
+                className: "relative z-10 rounded-full border border-current/30 p-2 hover:bg-white/10 transition-colors cursor-pointer",
+                children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-5 w-5", style: { pointerEvents: "none" } })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: (e) => {
+                  e.stopPropagation();
+                  next();
+                },
+                style: { pointerEvents: "auto" },
+                className: "relative z-10 rounded-full border border-current/30 p-2 hover:bg-white/10 transition-colors cursor-pointer",
+                children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-5 w-5", style: { pointerEvents: "none" } })
+              }
+            )
           ] })
         ] })
-      ] }) }, 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>;

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

@@ -3,43 +3,50 @@ import { CompoundContainer } from "../../../puck-base/container.js";
 import { CompoundButton } from "../../../puck-base/button.js";
 import { cn } from "../../../../utils/css-utils.js";
 const Articles = ({
-  padding,
-  sectionStyle,
-  backgroundColor,
   eyebrow,
   heading,
-  button,
-  columns = 3,
-  cards: Cards
+  buttons,
+  cards: Cards,
+  styles
 }) => {
-  return /* @__PURE__ */ jsxs(CompoundContainer, { padding, sectionStyle, backgroundColor, children: [
-    /* @__PURE__ */ jsxs("div", { className: "mb-10 flex w-full flex-col gap-6 sm:flex-row sm:items-end sm:justify-between", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
-        eyebrow && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm font-medium tracking-wide uppercase", children: eyebrow }),
-        heading && /* @__PURE__ */ jsx("h2", { className: "font-serif font-regular max-w-xl text-3xl tracking-tighter md:text-4xl", children: heading })
-      ] }),
-      (button == null ? void 0 : button.label) ? /* @__PURE__ */ jsx("div", { className: "shrink-0", children: /* @__PURE__ */ jsx(
-        CompoundButton,
-        {
-          label: button.label,
-          url: button.url,
-          variant: button.variant,
-          size: button.size,
-          icon: button.icon
-        }
-      ) }) : null
-    ] }),
-    Cards && /* @__PURE__ */ jsx(
-      Cards,
-      {
-        className: cn("grid grid-cols-1 gap-8", {
-          "sm:grid-cols-2": columns === 2,
-          "sm:grid-cols-2 lg:grid-cols-3": columns === 3,
-          "sm:grid-cols-2 lg:grid-cols-4": columns === 4
-        })
-      }
-    )
-  ] });
+  var _a;
+  const columns = (styles == null ? void 0 : styles.columns) ?? 3;
+  return /* @__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: [
+        /* @__PURE__ */ jsxs("div", { className: "mb-10 flex w-full flex-col gap-6 sm:flex-row sm:items-end sm:justify-between", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+            eyebrow && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm font-medium tracking-wide uppercase", children: eyebrow }),
+            heading && /* @__PURE__ */ jsx("h2", { className: "font-serif font-regular max-w-xl text-3xl tracking-tighter md:text-4xl", children: heading })
+          ] }),
+          ((_a = buttons == null ? void 0 : buttons[0]) == null ? void 0 : _a.label) ? /* @__PURE__ */ jsx("div", { className: "shrink-0", children: /* @__PURE__ */ jsx(
+            CompoundButton,
+            {
+              label: buttons[0].label,
+              action: buttons[0].action,
+              variant: buttons[0].variant,
+              size: buttons[0].size,
+              icon: buttons[0].icon
+            }
+          ) }) : null
+        ] }),
+        Cards && /* @__PURE__ */ jsx(
+          Cards,
+          {
+            className: cn("grid grid-cols-1 gap-8", {
+              "sm:grid-cols-2": columns === 2,
+              "sm:grid-cols-2 lg:grid-cols-3": columns === 3,
+              "sm:grid-cols-2 lg:grid-cols-4": columns === 4
+            })
+          }
+        )
+      ]
+    }
+  );
 };
 export {
   Articles

package/dist/components/puck-block/text-sections/articles-1/index.js

@@ -1,12 +1,6 @@
-import { paddingDefaults, backgroundColor, sectionStyle, padding, button, heading, image16x9Placeholder, cards } from "../../../puck-base/core/fields.js";
+import { buttons, heading, image16x9Placeholder, cards } from "../../../puck-base/core/fields.js";
 import { Articles } from "./articles.js";
-const defaultButton = {
-  label: "",
-  url: "",
-  variant: "default",
-  size: "default",
-  icon: "none"
-};
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
 const { icon: defaultIcon, ...defaultCardProps } = cards.defaultItemProps;
 const defaultCard = {
   ...defaultCardProps,
@@ -16,38 +10,43 @@ const conf = {
   fields: {
     eyebrow: { type: "text", contentEditable: true },
     heading,
-    button,
-    columns: {
-      type: "radio",
-      options: [
-        { label: "2", value: 2 },
-        { label: "3", value: 3 },
-        { label: "4", value: 4 }
-      ]
-    },
+    buttons,
     cards: {
       type: "slot",
       allow: ["ArticleCard"]
     },
-    padding,
-    sectionStyle,
-    backgroundColor
+    styles: createStylesField({
+      columns: {
+        type: "radio",
+        options: [
+          { label: "2", value: 2 },
+          { label: "3", value: 3 },
+          { label: "4", value: 4 }
+        ]
+      }
+    })
   },
   defaultProps: {
-    padding: paddingDefaults,
     eyebrow: "Latest News",
     heading: "Stories worth reading",
-    button: defaultButton,
-    columns: 3,
+    buttons: [
+      {
+        label: "",
+        variant: "default",
+        size: "default",
+        icon: "none"
+      }
+    ],
     cards: Array.from({ length: 3 }).map((_, index) => ({
       type: "ArticleCard",
       props: {
         ...defaultCard,
         heading: `Article ${index + 1}`,
         description: "A short summary of this article goes here.",
-        button: { label: "", url: "", variant: "link", size: "default", icon: "move-right" }
+        button: { label: "", variant: "link", size: "default", icon: "move-right" }
       }
-    }))
+    })),
+    styles: createStylesDefaults({ columns: 3 })
   },
   render: Articles
 };

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

@@ -1,9 +1,6 @@
 import { CompoundContainerProps } from "@/components/puck-base/container";
 import { CompoundButtonProps } from "@/components/puck-base/button";
 export interface ContentSectionProps {
-    padding?: CompoundContainerProps["padding"];
-    sectionStyle?: CompoundContainerProps["sectionStyle"];
-    backgroundColor?: string;
     heading?: string;
     eyebrow?: string;
     description?: string;
@@ -14,7 +11,12 @@ export interface ContentSectionProps {
     };
     imagePosition?: "left" | "right" | "below" | "none";
     layout?: "centered" | "split" | "prose";
-    dividers?: "none" | "both" | "top" | "bottom";
     buttons?: CompoundButtonProps[];
+    styles?: {
+        padding?: CompoundContainerProps["padding"];
+        sectionStyle?: CompoundContainerProps["sectionStyle"];
+        backgroundColor?: string;
+        dividers?: "none" | "both" | "top" | "bottom";
+    };
 }
-export declare const ContentSection: ({ padding, sectionStyle, backgroundColor, heading, eyebrow, description, content, image, imagePosition, layout, dividers, buttons, }: ContentSectionProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ContentSection: ({ heading, eyebrow, description, content, image, imagePosition, layout, buttons, styles, }: ContentSectionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/puck-block/text-sections/content-section-1/content-section.js

@@ -27,7 +27,6 @@ const TextBlock = ({
           CompoundButton,
           {
             label: button.label,
-            url: button.url,
             action: button.action,
             variant: button.variant,
             size: button.size,
@@ -48,9 +47,6 @@ const ImageBlock = ({ image }) => /* @__PURE__ */ jsx("div", { className: "bg-mu
   }
 ) : /* @__PURE__ */ jsx("div", { className: "flex aspect-[4/3] w-full items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Content Image" }) }) });
 const ContentSection = ({
-  padding,
-  sectionStyle,
-  backgroundColor,
   heading,
   eyebrow,
   description,
@@ -58,11 +54,12 @@ const ContentSection = ({
   image,
   imagePosition = "right",
   layout = "centered",
-  dividers = "none",
-  buttons
+  buttons,
+  styles
 }) => {
+  const dividers = (styles == null ? void 0 : styles.dividers) ?? "none";
   if (layout === "prose") {
-    return /* @__PURE__ */ jsx(CompoundContainer, { padding, sectionStyle, backgroundColor, children: /* @__PURE__ */ jsx("div", { className: "mx-auto max-w-3xl", children: /* @__PURE__ */ jsx(
+    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__ */ jsx("div", { className: "mx-auto max-w-3xl", children: /* @__PURE__ */ jsx(
       TextBlock,
       {
         eyebrow,
@@ -76,7 +73,7 @@ const ContentSection = ({
   }
   if (layout === "split" || imagePosition === "left" || imagePosition === "right") {
     const showImage2 = imagePosition !== "none" && (image == null ? void 0 : image.src);
-    return /* @__PURE__ */ jsx(CompoundContainer, { padding, sectionStyle, backgroundColor, children: /* @__PURE__ */ jsxs(
+    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: cn(
@@ -100,7 +97,7 @@ const ContentSection = ({
     ) });
   }
   const showImage = imagePosition !== "none" && (image == null ? void 0 : image.src);
-  return /* @__PURE__ */ jsxs(CompoundContainer, { padding, sectionStyle, backgroundColor, children: [
+  return /* @__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: [
     (dividers === "both" || dividers === "top") && /* @__PURE__ */ jsx("hr", { className: "mb-12 border-foreground/15" }),
     /* @__PURE__ */ jsx("div", { className: "mx-auto max-w-3xl", children: /* @__PURE__ */ jsx(
       TextBlock,

package/dist/components/puck-block/text-sections/content-section-1/index.js

@@ -1,5 +1,6 @@
-import { paddingDefaults, image16x9Placeholder, backgroundColor, sectionStyle, padding, buttons, image } from "../../../puck-base/core/fields.js";
+import { image16x9Placeholder, buttons, image } from "../../../puck-base/core/fields.js";
 import { ContentSection } from "./content-section.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
 const conf = {
   fields: {
     eyebrow: { type: "text" },
@@ -24,19 +25,18 @@ const conf = {
         { label: "Prose", value: "prose" }
       ]
     },
-    dividers: {
-      type: "radio",
-      options: [
-        { label: "None", value: "none" },
-        { label: "Top", value: "top" },
-        { label: "Bottom", value: "bottom" },
-        { label: "Both", value: "both" }
-      ]
-    },
     buttons,
-    padding,
-    sectionStyle,
-    backgroundColor
+    styles: createStylesField({
+      dividers: {
+        type: "radio",
+        options: [
+          { label: "None", value: "none" },
+          { label: "Top", value: "top" },
+          { label: "Bottom", value: "bottom" },
+          { label: "Both", value: "both" }
+        ]
+      }
+    })
   },
   defaultProps: {
     eyebrow: "Why choose us",
@@ -49,20 +49,18 @@ const conf = {
     buttons: [
       {
         label: "Get started",
-        url: "#",
         variant: "default",
         size: "lg",
         icon: "none"
       },
       {
         label: "Learn more",
-        url: "#",
         variant: "outline",
         size: "lg",
         icon: "none"
       }
     ],
-    padding: paddingDefaults
+    styles: createStylesDefaults({ dividers: "none" })
   },
   render: ContentSection
 };

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

@@ -0,0 +1,58 @@
+type TextVariant = "articles-1" | "content-section-1" | "rich-text-1" | "tab-section-1" | "timeline-1" | "two-column-1";
+type TextPadding = {
+    top?: "none" | "small" | "medium" | "large";
+    bottom?: "none" | "small" | "medium" | "large";
+};
+type TextSectionStyle = "default" | "dark" | "muted" | "inverted" | "custom";
+type TextButton = {
+    label: string;
+    url?: string;
+    variant?: "default" | "secondary" | "outline" | "ghost" | "link" | "destructive";
+    size?: "default" | "sm" | "lg" | "icon";
+    icon?: string;
+};
+type TextBadge = {
+    label: string;
+    url?: string;
+    variant?: "default" | "secondary" | "destructive" | "outline";
+};
+type TextImage = {
+    src: string;
+    alt?: string;
+    aspectRatio?: "16x9" | "1x1";
+};
+type TextTab = {
+    label: string;
+    content: string;
+    image?: TextImage;
+};
+type TextTimelineItem = {
+    title: string;
+    description: string;
+    date?: string;
+};
+type TextSectionProps = {
+    variant?: TextVariant;
+    badge?: TextBadge;
+    eyebrow?: string;
+    heading?: string;
+    description?: string;
+    content?: string;
+    buttons?: TextButton[];
+    image?: TextImage;
+    images?: TextImage[];
+    imagePosition?: "left" | "right" | "below" | "none";
+    layout?: "centered" | "split" | "prose" | "text-start" | "text-end";
+    cards?: unknown;
+    tabs?: TextTab[];
+    items?: TextTimelineItem[];
+    styles?: {
+        padding?: TextPadding;
+        sectionStyle?: TextSectionStyle;
+        backgroundColor?: string;
+        columns?: 2 | 3 | 4;
+        dividers?: "none" | "both" | "top" | "bottom";
+        maxWidth?: "sm" | "md" | "lg" | "full";
+        border?: boolean;
+    };
+};

package/dist/components/puck-block/text-sections/rich-text-1/index.js

@@ -1,5 +1,5 @@
-import { paddingDefaults, backgroundColor, sectionStyle, padding } from "../../../puck-base/core/fields.js";
 import { RichText } from "./rich-text.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
 const conf = {
   fields: {
     content: {
@@ -9,23 +9,21 @@ const conf = {
         instructions: "Write rich HTML content with headings, paragraphs, lists, and links."
       }
     },
-    maxWidth: {
-      type: "select",
-      options: [
-        { label: "Small", value: "sm" },
-        { label: "Medium", value: "md" },
-        { label: "Large", value: "lg" },
-        { label: "Full Width", value: "full" }
-      ]
-    },
-    padding,
-    sectionStyle,
-    backgroundColor
+    styles: createStylesField({
+      maxWidth: {
+        type: "select",
+        options: [
+          { label: "Small", value: "sm" },
+          { label: "Medium", value: "md" },
+          { label: "Large", value: "lg" },
+          { label: "Full Width", value: "full" }
+        ]
+      }
+    })
   },
   defaultProps: {
     content: "<h2>About Us</h2><p>We are a team of passionate builders creating tools that empower everyone to build beautiful websites.</p><p>Our mission is to make web design accessible to everyone.</p>",
-    maxWidth: "md",
-    padding: paddingDefaults
+    styles: createStylesDefaults({ maxWidth: "md" })
   },
   render: RichText
 };

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

@@ -1,9 +1,11 @@
 import { CompoundContainerProps } from "@/components/puck-base/container";
 export interface RichTextProps {
-    padding?: CompoundContainerProps["padding"];
-    sectionStyle?: CompoundContainerProps["sectionStyle"];
-    backgroundColor?: string;
     content?: string;
-    maxWidth?: "sm" | "md" | "lg" | "full";
+    styles?: {
+        padding?: CompoundContainerProps["padding"];
+        sectionStyle?: CompoundContainerProps["sectionStyle"];
+        backgroundColor?: string;
+        maxWidth?: "sm" | "md" | "lg" | "full";
+    };
 }
-export declare const RichText: ({ padding, sectionStyle, backgroundColor, content, maxWidth, }: RichTextProps) => import("react/jsx-runtime").JSX.Element;
+export declare const RichText: ({ content, styles, }: RichTextProps) => import("react/jsx-runtime").JSX.Element;