dune-react 0.0.8 → 0.0.10

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

@@ -2,51 +2,57 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { cn } from "../../../../utils/css-utils.js";
 import { CompoundContainer } from "../../../puck-base/container.js";
 const Comparison = ({
-  padding,
-  sectionStyle,
-  backgroundColor,
   heading,
   description,
-  columns = []
-}) => /* @__PURE__ */ jsxs(CompoundContainer, { padding, sectionStyle, backgroundColor, children: [
-  /* @__PURE__ */ jsxs("div", { className: "mx-auto mb-12 max-w-2xl text-center", children: [
-    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 })
-  ] }),
-  /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn(
-        "grid gap-6",
-        columns.length === 2 ? "grid-cols-1 md:grid-cols-2" : "grid-cols-1 md:grid-cols-3"
-      ),
-      children: columns.map((col, i) => /* @__PURE__ */ jsxs(
+  plans = [],
+  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: [
+      /* @__PURE__ */ jsxs("div", { className: "mx-auto mb-12 max-w-2xl text-center", children: [
+        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 })
+      ] }),
+      /* @__PURE__ */ jsx(
         "div",
         {
           className: cn(
-            "rounded-xl border p-6",
-            col.highlighted ? "border-primary bg-primary/5 shadow-lg" : "border-border bg-card"
+            "grid gap-6",
+            plans.length === 2 ? "grid-cols-1 md:grid-cols-2" : "grid-cols-1 md:grid-cols-3"
           ),
-          children: [
-            /* @__PURE__ */ jsx("h3", { className: "text-foreground mb-4 text-xl font-bold", children: col.name }),
-            /* @__PURE__ */ jsx("ul", { className: "space-y-3", children: col.features.map((f, fi) => /* @__PURE__ */ jsxs(
-              "li",
-              {
-                className: "text-muted-foreground flex items-start gap-2",
-                children: [
-                  /* @__PURE__ */ jsx("span", { className: "text-primary mt-0.5", children: "✓" }),
-                  /* @__PURE__ */ jsx("span", { children: f })
-                ]
-              },
-              fi
-            )) })
-          ]
-        },
-        i
-      ))
-    }
-  )
-] });
+          children: plans.map((col, i) => /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "rounded-xl border p-6",
+                col.highlighted ? "border-primary bg-primary/5 shadow-lg" : "border-border bg-card"
+              ),
+              children: [
+                /* @__PURE__ */ jsx("h3", { className: "text-foreground mb-4 text-xl font-bold", children: col.name }),
+                /* @__PURE__ */ jsx("ul", { className: "space-y-3", children: col.features.map((f, fi) => /* @__PURE__ */ jsxs(
+                  "li",
+                  {
+                    className: "text-muted-foreground flex items-start gap-2",
+                    children: [
+                      /* @__PURE__ */ jsx("span", { className: "text-primary mt-0.5", children: "✓" }),
+                      /* @__PURE__ */ jsx("span", { children: f })
+                    ]
+                  },
+                  fi
+                )) })
+              ]
+            },
+            i
+          ))
+        }
+      )
+    ]
+  }
+);
 export {
   Comparison
 };

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

@@ -1,10 +1,10 @@
-import { paddingDefaults, backgroundColor, sectionStyle, padding } from "../../../puck-base/core/fields.js";
 import { Comparison } from "./comparison.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
 const conf = {
   fields: {
     heading: { type: "text", contentEditable: true },
     description: { type: "textarea", contentEditable: true },
-    columns: {
+    plans: {
       type: "array",
       max: 4,
       getItemSummary: (item, i = 0) => item.name || `Column ${i + 1}`,
@@ -31,14 +31,12 @@ const conf = {
         features: ["Feature 1"]
       }
     },
-    padding,
-    sectionStyle,
-    backgroundColor
+    styles: createStylesField()
   },
   defaultProps: {
     heading: "Compare Plans",
     description: "Choose the plan that best fits your needs.",
-    columns: [
+    plans: [
       {
         name: "Starter",
         highlighted: false,
@@ -60,7 +58,7 @@ const conf = {
         features: ["Everything in Pro", "SLA", "Dedicated Manager", "SSO"]
       }
     ],
-    padding: paddingDefaults
+    styles: createStylesDefaults()
   },
   render: Comparison
 };

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

@@ -1,15 +1,16 @@
 import { Pricing } from "./pricing.js";
-import { paddingDefaults, backgroundColor, sectionStyle, padding, features, button, contentFields } from "../../../puck-base/core/fields.js";
+import { features, button, contentFields } from "../../../puck-base/core/fields.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
 const conf = {
   fields: {
     ...contentFields,
-    tiers: {
+    plans: {
       type: "array",
       getItemSummary: (item, index = 0) => item.name || `Tier ${index + 1}`,
       arrayFields: {
         name: { type: "text", contentEditable: true },
         description: { type: "textarea", contentEditable: true },
-        cost: { type: "text", contentEditable: true },
+        price: { type: "text", contentEditable: true },
         cycle: { type: "text", contentEditable: true },
         features,
         button
@@ -17,7 +18,7 @@ const conf = {
       defaultItemProps: {
         name: "Plan / product / pricing tier name",
         description: "Product description",
-        cost: "$50",
+        price: "$50",
         cycle: "month",
         features: [features.defaultItemProps],
         button: {
@@ -31,12 +32,9 @@ const conf = {
       min: 1,
       max: 3
     },
-    padding,
-    sectionStyle,
-    backgroundColor
+    styles: createStylesField()
   },
   defaultProps: {
-    padding: paddingDefaults,
     badge: {
       label: "Platform",
       url: "",
@@ -45,10 +43,10 @@ const conf = {
     heading: "Something new!",
     description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt",
     buttons: [],
-    tiers: Array.from({ length: 3 }).map((_, index) => ({
+    plans: Array.from({ length: 3 }).map((_, index) => ({
       name: `Plan ${index + 1}`,
       description: "Our goal is to streamline SMB trade, making it easier and faster than ever for everyone and everywhere.",
-      cost: "$40",
+      price: "$40",
       cycle: "month",
       features: Array.from({ length: 3 }).map((_2, index2) => ({
         icon: "check",
@@ -62,7 +60,8 @@ const conf = {
         variant: "outline",
         size: "default"
       }
-    }))
+    })),
+    styles: createStylesDefaults()
   },
   render: Pricing
 };

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

@@ -3,17 +3,19 @@ import { CompoundContainerProps } from "@/components/puck-base/container";
 import { CompoundContentProps } from "@/components/puck-base/content";
 import { Feature } from "@/components/puck-base/core/types";
 export interface PricingProps extends CompoundContentProps {
-    padding?: CompoundContainerProps["padding"];
-    sectionStyle?: CompoundContainerProps["sectionStyle"];
-    backgroundColor?: string;
-    tiers: {
+    plans: {
         name: string;
         description: string;
-        cost: string;
+        price: string;
         cycle: string;
         features: Feature[];
         button: CompoundButtonProps;
     }[];
-    className?: string;
+    styles?: {
+        padding?: CompoundContainerProps["padding"];
+        sectionStyle?: CompoundContainerProps["sectionStyle"];
+        backgroundColor?: string;
+        className?: string;
+    };
 }
 export declare const Pricing: (props: PricingProps) => import("react/jsx-runtime").JSX.Element;

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.d.ts

@@ -0,0 +1,5 @@
+import { ComponentConfig } from "@puckeditor/core";
+import { Pricing2Props } from "./pricing-2";
+export type { Pricing2Props };
+export declare const conf: ComponentConfig<Pricing2Props>;
+export default conf;

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

@@ -0,0 +1,151 @@
+import { Pricing2 } from "./pricing-2.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 },
+    plans: {
+      type: "array",
+      getItemSummary: (item, index = 0) => item.title || `Tier ${index + 1}`,
+      arrayFields: {
+        badgeLabel: {
+          type: "text",
+          label: "Badge (optional)",
+          contentEditable: true
+        },
+        title: { type: "text", contentEditable: true },
+        description: { type: "textarea", contentEditable: true },
+        price: { type: "text", label: "Price", contentEditable: true },
+        period: { type: "text", label: "Period", contentEditable: true },
+        button,
+        featuresLabel: {
+          type: "text",
+          label: "Features heading",
+          contentEditable: true
+        },
+        features: {
+          type: "array",
+          max: 8,
+          getItemSummary: (item, index = 0) => item.title || `Feature ${index + 1}`,
+          arrayFields: {
+            title: { type: "text", contentEditable: true }
+          },
+          defaultItemProps: { title: "Feature item" }
+        },
+        isFeatured: {
+          type: "radio",
+          label: "Card style",
+          options: [
+            { label: "Featured (elevated)", value: true },
+            { label: "Standard", value: false }
+          ]
+        }
+      },
+      defaultItemProps: {
+        badgeLabel: "",
+        title: "Plan Name",
+        description: "Brief description of this plan.",
+        price: "$50",
+        period: "per month",
+        button: {
+          label: "Get started",
+          url: "#",
+          variant: "outline",
+          size: "default",
+          icon: "none"
+        },
+        featuresLabel: "What's included:",
+        features: [
+          { title: "Feature one" },
+          { title: "Feature two" },
+          { title: "Feature three" }
+        ],
+        isFeatured: false
+      },
+      min: 1,
+      max: 4
+    },
+    styles: createStylesField()
+  },
+  defaultProps: {
+    heading: "Training plans tailored to you",
+    description: "Choose the package that fits your goals. Start with one session or commit to a program.",
+    plans: [
+      {
+        badgeLabel: "",
+        title: "Single Session",
+        description: "Try a one-on-one training session. Perfect for first-timers or testing your fit.",
+        price: "$75",
+        period: "per session",
+        button: {
+          label: "Schedule a session",
+          url: "#",
+          variant: "outline",
+          size: "default",
+          icon: "none"
+        },
+        featuresLabel: "What's included:",
+        features: [
+          { title: "One 60-minute session" },
+          { title: "Form and technique guidance" },
+          { title: "Personalized exercise selection" },
+          { title: "No commitment required" }
+        ],
+        isFeatured: false
+      },
+      {
+        badgeLabel: "Most popular",
+        title: "4-Week Program",
+        description: "Four weekly sessions designed around your goals. Build momentum and see real progress in a month.",
+        price: "$260",
+        period: "per month",
+        button: {
+          label: "Start your program",
+          url: "#",
+          variant: "default",
+          size: "default",
+          icon: "none"
+        },
+        featuresLabel: "What's included:",
+        features: [
+          { title: "Four 60-minute sessions" },
+          { title: "Custom workout plan" },
+          { title: "Monthly progress check-in" },
+          { title: "Email support between sessions" },
+          { title: "Form videos and tips" }
+        ],
+        isFeatured: true
+      },
+      {
+        badgeLabel: "",
+        title: "8-Week Intensive",
+        description: "Two sessions per week for eight weeks. Get serious results with consistent training and close coaching.",
+        price: "$480",
+        period: "per month",
+        button: {
+          label: "Join the intensive",
+          url: "#",
+          variant: "outline",
+          size: "default",
+          icon: "none"
+        },
+        featuresLabel: "What's included:",
+        features: [
+          { title: "Eight 60-minute sessions" },
+          { title: "Detailed fitness assessment" },
+          { title: "Progressive training plan" },
+          { title: "Bi-weekly progress reviews" },
+          { title: "Priority scheduling" },
+          { title: "Direct phone and email support" }
+        ],
+        isFeatured: false
+      }
+    ],
+    styles: createStylesDefaults()
+  },
+  render: Pricing2
+};
+export {
+  conf
+};

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

@@ -0,0 +1,26 @@
+import { CompoundButtonProps } from "@/components/puck-base/button";
+import { CompoundContainerProps } from "@/components/puck-base/container";
+export interface PricingTierItem {
+    badgeLabel: string;
+    title: string;
+    description: string;
+    price: string;
+    period: string;
+    button: CompoundButtonProps;
+    featuresLabel: string;
+    features: {
+        title: string;
+    }[];
+    isFeatured: boolean;
+}
+export interface Pricing2Props {
+    heading: string;
+    description: 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

@@ -0,0 +1,71 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+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) => {
+  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__ */ 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
+        )) })
+      ] })
+    }
+  );
+};
+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

@@ -0,0 +1,22 @@
+import { CompoundContainerProps } from "@/components/puck-base/container";
+import { CompoundButtonProps } from "@/components/puck-base/button";
+export interface BeforeAfterItem {
+    text: string;
+}
+export interface BeforeAfterProps {
+    eyebrow?: string;
+    heading?: string;
+    description?: string;
+    beforeLabel?: string;
+    beforeItems?: BeforeAfterItem[];
+    afterLabel?: string;
+    afterItems?: BeforeAfterItem[];
+    button?: CompoundButtonProps;
+    layout?: "side-by-side" | "stacked";
+    styles?: {
+        padding?: CompoundContainerProps["padding"];
+        sectionStyle?: CompoundContainerProps["sectionStyle"];
+        backgroundColor?: string;
+    };
+}
+export declare const BeforeAfter: ({ eyebrow, heading, description, beforeLabel, beforeItems, afterLabel, afterItems, button, layout, styles, }: BeforeAfterProps) => import("react/jsx-runtime").JSX.Element;