dune-react 0.0.9 → 0.0.10

package/dist/components/puck-block/pricing-sections/pricing-1/pricing.js

@@ -4,43 +4,55 @@ import { CompoundButton } from "../../../puck-base/button.js";
 import { CompoundContainer } from "../../../puck-base/container.js";
 import { CompoundContent } from "../../../puck-base/content.js";
 import DynamicIcon from "../../../../node_modules/.pnpm/lucide-react@0.540.0_react@19.2.4/node_modules/lucide-react/dist/esm/DynamicIcon.js";
-const Pricing = (props) => /* @__PURE__ */ jsx(CompoundContainer, { padding: props.padding, sectionStyle: props.sectionStyle, backgroundColor: props.backgroundColor, className: props.className, children: /* @__PURE__ */ jsxs("div", { children: [
-  /* @__PURE__ */ jsx(
-    CompoundContent,
+const Pricing = (props) => {
+  var _a, _b, _c, _d;
+  return /* @__PURE__ */ jsx(
+    CompoundContainer,
     {
-      badge: props.badge,
-      heading: props.heading,
-      description: props.description,
-      buttons: props.buttons,
-      alignContent: "center",
-      spacing: "tight"
+      padding: (_a = props.styles) == null ? void 0 : _a.padding,
+      sectionStyle: (_b = props.styles) == null ? void 0 : _b.sectionStyle,
+      backgroundColor: (_c = props.styles) == null ? void 0 : _c.backgroundColor,
+      className: (_d = props.styles) == null ? void 0 : _d.className,
+      children: /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(
+          CompoundContent,
+          {
+            badge: props.badge,
+            heading: props.heading,
+            description: props.description,
+            buttons: props.buttons,
+            alignContent: "center",
+            spacing: "tight"
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "grid w-full grid-cols-1 gap-8 pt-20 text-left lg:grid-cols-3", children: (props.plans ?? []).map((tier, index) => /* @__PURE__ */ jsxs(Card, { className: "w-full rounded-md shadow", children: [
+          /* @__PURE__ */ jsxs(CardHeader, { children: [
+            /* @__PURE__ */ jsx(CardTitle, { children: /* @__PURE__ */ jsx("span", { className: "flex flex-row items-center gap-4 font-normal", children: tier.name }) }),
+            /* @__PURE__ */ jsx(CardDescription, { children: tier.description })
+          ] }),
+          /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col justify-start gap-8", children: [
+            /* @__PURE__ */ jsxs("p", { className: "flex flex-row items-center gap-2 text-xl", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-4xl", children: tier.price }),
+              /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground text-sm", children: [
+                " ",
+                "/ ",
+                tier.cycle
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "flex flex-col justify-start gap-4", children: (tier.features ?? []).map((feature, index2) => /* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-4", children: [
+              feature.icon && feature.icon !== "none" ? /* @__PURE__ */ jsx(DynamicIcon, { name: feature.icon }) : null,
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+                /* @__PURE__ */ jsx("p", { children: feature.name }),
+                feature.description ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", children: feature.description }) : null
+              ] })
+            ] }, index2)) }),
+            /* @__PURE__ */ jsx(CompoundButton, { ...tier.button })
+          ] }) })
+        ] }, index)) })
+      ] })
     }
-  ),
-  /* @__PURE__ */ jsx("div", { className: "grid w-full grid-cols-1 gap-8 pt-20 text-left lg:grid-cols-3", children: (props.tiers ?? []).map((tier, index) => /* @__PURE__ */ jsxs(Card, { className: "w-full rounded-md shadow", children: [
-    /* @__PURE__ */ jsxs(CardHeader, { children: [
-      /* @__PURE__ */ jsx(CardTitle, { children: /* @__PURE__ */ jsx("span", { className: "flex flex-row items-center gap-4 font-normal", children: tier.name }) }),
-      /* @__PURE__ */ jsx(CardDescription, { children: tier.description })
-    ] }),
-    /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col justify-start gap-8", children: [
-      /* @__PURE__ */ jsxs("p", { className: "flex flex-row items-center gap-2 text-xl", children: [
-        /* @__PURE__ */ jsx("span", { className: "text-4xl", children: tier.cost }),
-        /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground text-sm", children: [
-          " ",
-          "/ ",
-          tier.cycle
-        ] })
-      ] }),
-      /* @__PURE__ */ jsx("div", { className: "flex flex-col justify-start gap-4", children: (tier.features ?? []).map((feature, index2) => /* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-4", children: [
-        feature.icon && feature.icon !== "none" ? /* @__PURE__ */ jsx(DynamicIcon, { name: feature.icon }) : null,
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-          /* @__PURE__ */ jsx("p", { children: feature.name }),
-          feature.description ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", children: feature.description }) : null
-        ] })
-      ] }, index2)) }),
-      /* @__PURE__ */ jsx(CompoundButton, { ...tier.button })
-    ] }) })
-  ] }, index)) })
-] }) });
+  );
+};
 export {
   Pricing
 };

package/dist/components/puck-block/pricing-sections/pricing-2/index.js

@@ -1,10 +1,11 @@
 import { Pricing2 } from "./pricing-2.js";
-import { paddingDefaults, backgroundColor, sectionStyle, padding, button } from "../../../puck-base/core/fields.js";
+import { button } from "../../../puck-base/core/fields.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
 const conf = {
   fields: {
     heading: { type: "text", contentEditable: true },
     description: { type: "textarea", contentEditable: true },
-    tiers: {
+    plans: {
       type: "array",
       getItemSummary: (item, index = 0) => item.title || `Tier ${index + 1}`,
       arrayFields: {
@@ -65,15 +66,12 @@ const conf = {
       min: 1,
       max: 4
     },
-    padding,
-    sectionStyle,
-    backgroundColor
+    styles: createStylesField()
   },
   defaultProps: {
-    padding: paddingDefaults,
     heading: "Training plans tailored to you",
     description: "Choose the package that fits your goals. Start with one session or commit to a program.",
-    tiers: [
+    plans: [
       {
         badgeLabel: "",
         title: "Single Session",
@@ -143,7 +141,8 @@ const conf = {
         ],
         isFeatured: false
       }
-    ]
+    ],
+    styles: createStylesDefaults()
   },
   render: Pricing2
 };

package/dist/components/puck-block/pricing-sections/pricing-2/pricing-2.d.ts

@@ -16,9 +16,11 @@ export interface PricingTierItem {
 export interface Pricing2Props {
     heading: string;
     description: string;
-    tiers: PricingTierItem[];
-    padding?: CompoundContainerProps["padding"];
-    sectionStyle?: CompoundContainerProps["sectionStyle"];
-    backgroundColor?: string;
+    plans: PricingTierItem[];
+    styles?: {
+        padding?: CompoundContainerProps["padding"];
+        sectionStyle?: CompoundContainerProps["sectionStyle"];
+        backgroundColor?: string;
+    };
 }
 export declare const Pricing2: (props: Pricing2Props) => import("react/jsx-runtime").JSX.Element;

package/dist/components/puck-block/pricing-sections/pricing-2/pricing-2.js

@@ -3,66 +3,69 @@ import { Check } from "lucide-react";
 import { cn } from "../../../../utils/css-utils.js";
 import { CompoundButton } from "../../../puck-base/button.js";
 import { CompoundContainer } from "../../../puck-base/container.js";
-const Pricing2 = (props) => /* @__PURE__ */ jsx(
-  CompoundContainer,
-  {
-    padding: props.padding,
-    sectionStyle: props.sectionStyle,
-    backgroundColor: props.backgroundColor,
-    children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-14", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex max-w-2xl flex-col items-center gap-4 text-center", children: [
-        /* @__PURE__ */ jsx("h2", { className: "text-foreground text-balance text-4xl font-bold tracking-tight", children: props.heading }),
-        /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-base leading-relaxed", children: props.description })
-      ] }),
-      /* @__PURE__ */ jsx("div", { className: "grid w-full max-w-7xl grid-cols-1 gap-6 lg:grid-cols-3", children: (props.tiers ?? []).map((tier, index) => /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: cn("flex flex-col", tier.isFeatured && "lg:-mt-8"),
-          children: /* @__PURE__ */ jsxs("div", { className: "bg-foreground/5 flex h-full flex-col gap-6 overflow-hidden rounded-3xl px-1 pt-1 pb-8", children: [
-            /* @__PURE__ */ jsxs(
-              "div",
-              {
-                className: cn(
-                  "bg-foreground/5 flex w-full flex-col gap-2 rounded-3xl px-8 py-7",
-                  tier.isFeatured ? "min-h-44" : "min-h-36"
-                ),
-                children: [
-                  tier.badgeLabel && /* @__PURE__ */ jsx("div", { className: "w-fit rounded-full bg-foreground px-2.5 py-1", children: /* @__PURE__ */ jsx("span", { className: "text-background text-xs font-medium", children: tier.badgeLabel }) }),
-                  /* @__PURE__ */ jsx("h3", { className: "text-foreground text-xl font-semibold", children: tier.title }),
-                  /* @__PURE__ */ jsx("p", { className: "text-foreground/70 text-sm", children: tier.description })
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6 px-8", children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
-                /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-baseline gap-1", children: [
-                  /* @__PURE__ */ jsx("span", { className: "text-foreground text-4xl font-bold", children: tier.price }),
-                  /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-sm", children: tier.period })
+const Pricing2 = (props) => {
+  var _a, _b, _c;
+  return /* @__PURE__ */ jsx(
+    CompoundContainer,
+    {
+      padding: (_a = props.styles) == null ? void 0 : _a.padding,
+      sectionStyle: (_b = props.styles) == null ? void 0 : _b.sectionStyle,
+      backgroundColor: (_c = props.styles) == null ? void 0 : _c.backgroundColor,
+      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-14", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex max-w-2xl flex-col items-center gap-4 text-center", children: [
+          /* @__PURE__ */ jsx("h2", { className: "text-foreground text-balance text-4xl font-bold tracking-tight", children: props.heading }),
+          /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-base leading-relaxed", children: props.description })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "grid w-full max-w-7xl grid-cols-1 gap-6 lg:grid-cols-3", children: (props.plans ?? []).map((tier, index) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn("flex flex-col", tier.isFeatured && "lg:-mt-8"),
+            children: /* @__PURE__ */ jsxs("div", { className: "bg-foreground/5 flex h-full flex-col gap-6 overflow-hidden rounded-3xl px-1 pt-1 pb-8", children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: cn(
+                    "bg-foreground/5 flex w-full flex-col gap-2 rounded-3xl px-8 py-7",
+                    tier.isFeatured ? "min-h-44" : "min-h-36"
+                  ),
+                  children: [
+                    tier.badgeLabel && /* @__PURE__ */ jsx("div", { className: "w-fit rounded-full bg-foreground px-2.5 py-1", children: /* @__PURE__ */ jsx("span", { className: "text-background text-xs font-medium", children: tier.badgeLabel }) }),
+                    /* @__PURE__ */ jsx("h3", { className: "text-foreground text-xl font-semibold", children: tier.title }),
+                    /* @__PURE__ */ jsx("p", { className: "text-foreground/70 text-sm", children: tier.description })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6 px-8", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-baseline gap-1", children: [
+                    /* @__PURE__ */ jsx("span", { className: "text-foreground text-4xl font-bold", children: tier.price }),
+                    /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-sm", children: tier.period })
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    CompoundButton,
+                    {
+                      ...tier.button,
+                      className: cn("w-full", tier.button.className)
+                    }
+                  )
                 ] }),
-                /* @__PURE__ */ jsx(
-                  CompoundButton,
-                  {
-                    ...tier.button,
-                    className: cn("w-full", tier.button.className)
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
-                /* @__PURE__ */ jsx("div", { className: "bg-border h-px w-full" }),
-                tier.featuresLabel && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-xs font-medium uppercase tracking-wider", children: tier.featuresLabel }),
-                /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: (tier.features ?? []).map((feature, fi) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsx(Check, { className: "text-foreground h-4 w-4 shrink-0" }),
-                  /* @__PURE__ */ jsx("span", { className: "text-foreground text-sm", children: feature.title })
-                ] }, fi)) })
+                /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+                  /* @__PURE__ */ jsx("div", { className: "bg-border h-px w-full" }),
+                  tier.featuresLabel && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-xs font-medium uppercase tracking-wider", children: tier.featuresLabel }),
+                  /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: (tier.features ?? []).map((feature, fi) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsx(Check, { className: "text-foreground h-4 w-4 shrink-0" }),
+                    /* @__PURE__ */ jsx("span", { className: "text-foreground text-sm", children: feature.title })
+                  ] }, fi)) })
+                ] })
               ] })
             ] })
-          ] })
-        },
-        index
-      )) })
-    ] })
-  }
-);
+          },
+          index
+        )) })
+      ] })
+    }
+  );
+};
 export {
   Pricing2
 };

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

@@ -0,0 +1,46 @@
+type PricingVariant = "comparison-1" | "pricing-1" | "pricing-2";
+type PricingPadding = {
+    top?: "none" | "small" | "medium" | "large";
+    bottom?: "none" | "small" | "medium" | "large";
+};
+type PricingSectionStyle = "default" | "dark" | "muted" | "inverted" | "custom";
+type PricingBadge = {
+    label: string;
+    url?: string;
+    variant?: "default" | "secondary" | "destructive" | "outline";
+};
+type PricingButton = {
+    label: string;
+    url?: string;
+    variant?: "default" | "secondary" | "outline" | "ghost" | "link" | "destructive";
+    size?: "default" | "sm" | "lg" | "icon";
+    icon?: string;
+};
+type PricingFeature = string | {
+    name: string;
+    description?: string;
+    icon?: string;
+};
+type PricingPlan = {
+    name: string;
+    description?: string;
+    price?: string;
+    cycle?: string;
+    features?: PricingFeature[];
+    button?: PricingButton;
+    highlighted?: boolean;
+};
+type PricingSectionProps = {
+    variant?: PricingVariant;
+    badge?: PricingBadge;
+    heading?: string;
+    description?: string;
+    buttons?: PricingButton[];
+    plans?: PricingPlan[];
+    styles?: {
+        padding?: PricingPadding;
+        sectionStyle?: PricingSectionStyle;
+        backgroundColor?: string;
+        className?: string;
+    };
+};

package/dist/components/puck-block/showcase-sections/before-after-1/before-after.d.ts

@@ -4,10 +4,7 @@ export interface BeforeAfterItem {
     text: string;
 }
 export interface BeforeAfterProps {
-    padding?: CompoundContainerProps["padding"];
-    sectionStyle?: CompoundContainerProps["sectionStyle"];
-    backgroundColor?: string;
-    kicker?: string;
+    eyebrow?: string;
     heading?: string;
     description?: string;
     beforeLabel?: string;
@@ -16,5 +13,10 @@ export interface BeforeAfterProps {
     afterItems?: BeforeAfterItem[];
     button?: CompoundButtonProps;
     layout?: "side-by-side" | "stacked";
+    styles?: {
+        padding?: CompoundContainerProps["padding"];
+        sectionStyle?: CompoundContainerProps["sectionStyle"];
+        backgroundColor?: string;
+    };
 }
-export declare const BeforeAfter: ({ padding, sectionStyle, backgroundColor, kicker, heading, description, beforeLabel, beforeItems, afterLabel, afterItems, button, layout, }: BeforeAfterProps) => import("react/jsx-runtime").JSX.Element;
+export declare const BeforeAfter: ({ eyebrow, heading, description, beforeLabel, beforeItems, afterLabel, afterItems, button, layout, styles, }: BeforeAfterProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/puck-block/showcase-sections/before-after-1/before-after.js

@@ -5,10 +5,7 @@ import { CompoundButton } from "../../../puck-base/button.js";
 import { cn } from "../../../../utils/css-utils.js";
 import { X, Check } from "lucide-react";
 const BeforeAfter = ({
-  padding,
-  sectionStyle,
-  backgroundColor,
-  kicker,
+  eyebrow,
   heading,
   description,
   beforeLabel = "Before",
@@ -16,16 +13,17 @@ const BeforeAfter = ({
   afterLabel = "After",
   afterItems = [],
   button,
-  layout = "side-by-side"
+  layout = "side-by-side",
+  styles
 }) => /* @__PURE__ */ jsxs(
   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: [
-      (kicker || heading || description) && /* @__PURE__ */ jsxs("div", { className: "mb-12 text-center max-w-2xl mx-auto", children: [
-        kicker && /* @__PURE__ */ jsx("p", { className: "text-primary text-sm font-semibold uppercase tracking-widest mb-3", children: kicker }),
+      (eyebrow || heading || description) && /* @__PURE__ */ jsxs("div", { className: "mb-12 text-center max-w-2xl mx-auto", children: [
+        eyebrow && /* @__PURE__ */ jsx("p", { className: "text-primary text-sm font-semibold uppercase tracking-widest mb-3", children: eyebrow }),
         heading && /* @__PURE__ */ jsx("h2", { className: "text-foreground text-3xl font-bold tracking-tight md:text-4xl", children: heading }),
         description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mt-4 text-lg", children: description })
       ] }),

package/dist/components/puck-block/showcase-sections/before-after-1/index.js

@@ -1,8 +1,9 @@
-import { paddingDefaults, actionDefaults, backgroundColor, sectionStyle, padding, button } from "../../../puck-base/core/fields.js";
+import { actionDefaults, button } from "../../../puck-base/core/fields.js";
 import { BeforeAfter } from "./before-after.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
 const conf = {
   fields: {
-    kicker: { type: "text", contentEditable: true },
+    eyebrow: { type: "text", contentEditable: true },
     heading: { type: "text", contentEditable: true },
     description: { type: "textarea", contentEditable: true },
     layout: {
@@ -34,12 +35,10 @@ const conf = {
       defaultItemProps: { text: "Benefit or new way of doing things" }
     },
     button,
-    padding,
-    sectionStyle,
-    backgroundColor
+    styles: createStylesField()
   },
   defaultProps: {
-    kicker: "Why choose us",
+    eyebrow: "Why choose us",
     heading: "The old way vs. the better way",
     description: "See exactly what changes when you switch to a smarter solution.",
     layout: "side-by-side",
@@ -65,7 +64,7 @@ const conf = {
       size: "lg",
       icon: "arrow-right"
     },
-    padding: paddingDefaults
+    styles: createStylesDefaults()
   },
   render: BeforeAfter
 };

package/dist/components/puck-block/showcase-sections/case-study-1/case-study.d.ts

@@ -1,6 +1,5 @@
 import { CompoundContainerProps } from "@/components/puck-base/container";
 export interface CaseStudyProps {
-    padding?: CompoundContainerProps["padding"];
     heading?: string;
     description?: string;
     stats?: Array<{
@@ -13,5 +12,10 @@ export interface CaseStudyProps {
         src: string;
         alt: string;
     };
+    styles?: {
+        padding?: CompoundContainerProps["padding"];
+        sectionStyle?: CompoundContainerProps["sectionStyle"];
+        backgroundColor?: string;
+    };
 }
-export declare const CaseStudy: ({ padding, heading, description, stats, quote, author, logo, }: CaseStudyProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CaseStudy: ({ heading, description, stats, quote, author, logo, styles, }: CaseStudyProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/puck-block/showcase-sections/case-study-1/case-study.js

@@ -2,33 +2,41 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { CompoundContainer } from "../../../puck-base/container.js";
 import { CompoundImage } from "../../../puck-base/image.js";
 const CaseStudy = ({
-  padding,
   heading,
   description,
   stats = [],
   quote,
   author,
-  logo
-}) => /* @__PURE__ */ jsx(CompoundContainer, { padding, sectionStyle: "muted", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-4xl", children: [
-  (logo == null ? void 0 : logo.src) && /* @__PURE__ */ jsx("span", { className: "mb-8 inline-block opacity-60", children: /* @__PURE__ */ jsx(CompoundImage, { src: logo.src, alt: logo.alt || "", className: "h-8 w-auto" }) }),
-  heading && /* @__PURE__ */ jsx("h2", { className: "text-foreground mb-4 text-3xl font-bold tracking-tight md:text-4xl", children: heading }),
-  description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mb-8 text-lg", children: description }),
-  stats.length > 0 && /* @__PURE__ */ jsx("div", { className: "mb-10 grid grid-cols-2 gap-6 md:grid-cols-4", children: stats.map((s, i) => /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx("p", { className: "text-primary text-3xl font-bold", children: s.value }),
-    /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mt-1 text-sm", children: s.label })
-  ] }, i)) }),
-  quote && /* @__PURE__ */ jsxs("blockquote", { className: "border-primary border-l-4 py-2 pl-6", children: [
-    /* @__PURE__ */ jsxs("p", { className: "text-foreground text-lg italic", children: [
-      "“",
-      quote,
-      "”"
-    ] }),
-    author && /* @__PURE__ */ jsxs("cite", { className: "text-muted-foreground mt-2 block text-sm not-italic", children: [
-      "— ",
-      author
+  logo,
+  styles
+}) => /* @__PURE__ */ jsx(
+  CompoundContainer,
+  {
+    padding: styles == null ? void 0 : styles.padding,
+    sectionStyle: (styles == null ? void 0 : styles.sectionStyle) ?? "muted",
+    backgroundColor: styles == null ? void 0 : styles.backgroundColor,
+    children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-4xl", children: [
+      (logo == null ? void 0 : logo.src) && /* @__PURE__ */ jsx("span", { className: "mb-8 inline-block opacity-60", children: /* @__PURE__ */ jsx(CompoundImage, { src: logo.src, alt: logo.alt || "", className: "h-8 w-auto" }) }),
+      heading && /* @__PURE__ */ jsx("h2", { className: "text-foreground mb-4 text-3xl font-bold tracking-tight md:text-4xl", children: heading }),
+      description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mb-8 text-lg", children: description }),
+      stats.length > 0 && /* @__PURE__ */ jsx("div", { className: "mb-10 grid grid-cols-2 gap-6 md:grid-cols-4", children: stats.map((s, i) => /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("p", { className: "text-primary text-3xl font-bold", children: s.value }),
+        /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mt-1 text-sm", children: s.label })
+      ] }, i)) }),
+      quote && /* @__PURE__ */ jsxs("blockquote", { className: "border-primary border-l-4 py-2 pl-6", children: [
+        /* @__PURE__ */ jsxs("p", { className: "text-foreground text-lg italic", children: [
+          "“",
+          quote,
+          "”"
+        ] }),
+        author && /* @__PURE__ */ jsxs("cite", { className: "text-muted-foreground mt-2 block text-sm not-italic", children: [
+          "— ",
+          author
+        ] })
+      ] })
     ] })
-  ] })
-] }) });
+  }
+);
 export {
   CaseStudy
 };

package/dist/components/puck-block/showcase-sections/case-study-1/index.js

@@ -1,5 +1,6 @@
-import { paddingDefaults, padding, image } from "../../../puck-base/core/fields.js";
+import { image } from "../../../puck-base/core/fields.js";
 import { CaseStudy } from "./case-study.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
 const conf = {
   fields: {
     heading: { type: "text", contentEditable: true },
@@ -14,7 +15,7 @@ const conf = {
     },
     quote: { type: "textarea", contentEditable: true },
     author: { type: "text" },
-    padding
+    styles: createStylesField()
   },
   defaultProps: {
     heading: "How Acme Corp grew 3x in 6 months",
@@ -26,7 +27,7 @@ const conf = {
     ],
     quote: "This product changed everything for our team. We can't imagine going back.",
     author: "Jane Doe, CEO at Acme",
-    padding: paddingDefaults
+    styles: createStylesDefaults()
   },
   render: CaseStudy
 };

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

@@ -0,0 +1,48 @@
+type ShowcaseVariant = "before-after-1" | "case-study-1" | "step-by-step-1";
+type ShowcasePadding = {
+    top?: "none" | "small" | "medium" | "large";
+    bottom?: "none" | "small" | "medium" | "large";
+};
+type ShowcaseSectionStyle = "default" | "dark" | "muted" | "inverted" | "custom";
+type ShowcaseButton = {
+    label: string;
+    url?: string;
+    variant?: "default" | "secondary" | "outline" | "ghost" | "link" | "destructive";
+    size?: "default" | "sm" | "lg" | "icon";
+    icon?: string;
+};
+type ShowcaseImage = {
+    src: string;
+    alt?: string;
+};
+type ShowcaseItem = {
+    title?: string;
+    description?: string;
+    label?: string;
+    value?: string;
+};
+type ShowcaseSectionProps = {
+    variant?: ShowcaseVariant;
+    eyebrow?: string;
+    heading?: string;
+    description?: string;
+    beforeLabel?: string;
+    beforeItems?: ShowcaseItem[];
+    afterLabel?: string;
+    afterItems?: ShowcaseItem[];
+    layout?: "side-by-side" | "stacked" | "vertical" | "horizontal" | "numbered";
+    button?: ShowcaseButton;
+    steps?: ShowcaseItem[];
+    stats?: Array<{
+        value: string;
+        label: string;
+    }>;
+    quote?: string;
+    author?: string;
+    logo?: ShowcaseImage;
+    styles?: {
+        padding?: ShowcasePadding;
+        sectionStyle?: ShowcaseSectionStyle;
+        backgroundColor?: string;
+    };
+};

package/dist/components/puck-block/showcase-sections/step-by-step-1/index.js

@@ -1,5 +1,5 @@
-import { paddingDefaults, backgroundColor, sectionStyle, padding } from "../../../puck-base/core/fields.js";
 import { StepByStep } from "./step-by-step.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
 const conf = {
   fields: {
     heading: { type: "text", contentEditable: true },
@@ -28,9 +28,7 @@ const conf = {
         description: "Describe what happens in this step."
       }
     },
-    padding,
-    sectionStyle,
-    backgroundColor
+    styles: createStylesField()
   },
   defaultProps: {
     heading: "How it works",
@@ -53,7 +51,7 @@ const conf = {
         description: "Launch your first project and see results immediately."
       }
     ],
-    padding: paddingDefaults
+    styles: createStylesDefaults()
   },
   render: StepByStep
 };

package/dist/components/puck-block/showcase-sections/step-by-step-1/step-by-step.d.ts

@@ -6,12 +6,14 @@ export interface StepByStepItem {
     iconUrl?: string;
 }
 export interface StepByStepProps {
-    padding?: CompoundContainerProps["padding"];
-    sectionStyle?: CompoundContainerProps["sectionStyle"];
-    backgroundColor?: string;
     heading?: string;
     description?: string;
     layout?: "vertical" | "horizontal" | "numbered";
     steps?: StepByStepItem[];
+    styles?: {
+        padding?: CompoundContainerProps["padding"];
+        sectionStyle?: CompoundContainerProps["sectionStyle"];
+        backgroundColor?: string;
+    };
 }
-export declare const StepByStep: ({ padding, sectionStyle, backgroundColor, heading, description, layout, steps, }: StepByStepProps) => import("react/jsx-runtime").JSX.Element;
+export declare const StepByStep: ({ heading, description, layout, steps, styles, }: StepByStepProps) => import("react/jsx-runtime").JSX.Element;