dune-react 0.0.18 → 0.0.20

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

@@ -1,46 +1,88 @@
-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;
+/**
+ * Pricing Section 共享 Props
+ *
+ * 基础类型引用自 ../props/（全局共享）
+ * PricingSectionStyles 为 pricing 特有的样式字段
+ */
+import type { BaseImage } from "@/components/puck-core/core/props/media";
+import type { BaseButton } from "@/components/puck-core/core/props/interactive";
+export type { BaseImage, BaseButton };
+export interface PricingSectionStyles {
+    cardLayout?: "center-price" | "icon-corner" | "name-desc-divider" | "icon-name-inline";
+    columns?: 2 | 3;
+    tabSwitching?: boolean;
+    tableStyle?: "border-separated" | "zebra-striped";
+    bottomButtons?: boolean;
+}
+export interface PricingSectionBaseProps {
+    tagline: string;
+    heading: string;
+    description: string;
+    styles: PricingSectionStyles;
+}
+/** 各 styles 字段的 Puck field 选项 */
+export declare const pricingStyleFields: {
+    readonly cardLayout: {
+        readonly type: "select";
+        readonly label: "Card Layout";
+        readonly options: readonly [{
+            readonly label: "Center Price";
+            readonly value: "center-price";
+        }, {
+            readonly label: "Icon Corner";
+            readonly value: "icon-corner";
+        }, {
+            readonly label: "Name + Desc + Divider";
+            readonly value: "name-desc-divider";
+        }, {
+            readonly label: "Icon + Name Inline";
+            readonly value: "icon-name-inline";
+        }];
+    };
+    readonly columns: {
+        readonly type: "radio";
+        readonly label: "Columns";
+        readonly options: readonly [{
+            readonly label: "2";
+            readonly value: "2";
+        }, {
+            readonly label: "3";
+            readonly value: "3";
+        }];
+    };
+    readonly tabSwitching: {
+        readonly type: "radio";
+        readonly label: "Tab Switching";
+        readonly options: readonly [{
+            readonly label: "Yes";
+            readonly value: "true";
+        }, {
+            readonly label: "No";
+            readonly value: "false";
+        }];
+    };
+    readonly tableStyle: {
+        readonly type: "radio";
+        readonly label: "Table Style";
+        readonly options: readonly [{
+            readonly label: "Border Separated";
+            readonly value: "border-separated";
+        }, {
+            readonly label: "Zebra Striped";
+            readonly value: "zebra-striped";
+        }];
+    };
+    readonly bottomButtons: {
+        readonly type: "radio";
+        readonly label: "Bottom Buttons";
+        readonly options: readonly [{
+            readonly label: "Yes";
+            readonly value: "true";
+        }, {
+            readonly label: "No";
+            readonly value: "false";
+        }];
     };
 };
+/** 将 PricingSectionBaseProps 与组件特有字段合并，生成最终 Props */
+export type PricingComponentProps<T extends object = object> = React.ComponentPropsWithoutRef<"section"> & Partial<PricingSectionBaseProps> & Partial<T>;

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

@@ -0,0 +1,47 @@
+const pricingStyleFields = {
+  cardLayout: {
+    type: "select",
+    label: "Card Layout",
+    options: [
+      { label: "Center Price", value: "center-price" },
+      { label: "Icon Corner", value: "icon-corner" },
+      { label: "Name + Desc + Divider", value: "name-desc-divider" },
+      { label: "Icon + Name Inline", value: "icon-name-inline" }
+    ]
+  },
+  columns: {
+    type: "radio",
+    label: "Columns",
+    options: [
+      { label: "2", value: "2" },
+      { label: "3", value: "3" }
+    ]
+  },
+  tabSwitching: {
+    type: "radio",
+    label: "Tab Switching",
+    options: [
+      { label: "Yes", value: "true" },
+      { label: "No", value: "false" }
+    ]
+  },
+  tableStyle: {
+    type: "radio",
+    label: "Table Style",
+    options: [
+      { label: "Border Separated", value: "border-separated" },
+      { label: "Zebra Striped", value: "zebra-striped" }
+    ]
+  },
+  bottomButtons: {
+    type: "radio",
+    label: "Bottom Buttons",
+    options: [
+      { label: "Yes", value: "true" },
+      { label: "No", value: "false" }
+    ]
+  }
+};
+export {
+  pricingStyleFields
+};

package/dist/components/puck-block/pricing-sections/single-pricing-card/component.d.ts

@@ -0,0 +1,17 @@
+import type { PricingComponentProps, BaseImage, BaseButton } from "../props";
+type PricingPlan = {
+    icon?: BaseImage;
+    planName: string;
+    description?: string;
+    monthlyPrice: string;
+    yearlyPrice: string;
+    features: string[];
+    button: BaseButton;
+};
+type SinglePricingCardExtra = {
+    pricingPlan: PricingPlan;
+};
+export type SinglePricingCardProps = PricingComponentProps<SinglePricingCardExtra>;
+export declare const SinglePricingCard: (props: SinglePricingCardProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SinglePricingCardDefaults: SinglePricingCardProps;
+export {};

package/dist/components/puck-block/pricing-sections/single-pricing-card/component.js

@@ -0,0 +1,142 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { BiCheck } from "../../../../node_modules/.pnpm/react-icons@5.6.0_react@19.2.4/node_modules/react-icons/bi/index.js";
+import { Button } from "../../../shadcn/button.js";
+import { CompoundImage } from "../../../puck-base/image.js";
+const SinglePricingCard = (props) => {
+  const { tagline, heading, description, pricingPlan, styles } = {
+    ...SinglePricingCardDefaults,
+    ...props
+  };
+  const { cardLayout = "center-price" } = styles ?? {};
+  return /* @__PURE__ */ jsx("section", { id: "relume", className: "px-[5%] py-16 md:py-24 lg:py-28", children: /* @__PURE__ */ jsxs("div", { className: "container", children: [
+    /* @__PURE__ */ jsxs("div", { className: "mx-auto mb-12 max-w-lg text-center md:mb-18 lg:mb-20", children: [
+      /* @__PURE__ */ jsx("p", { className: "mb-3 font-semibold md:mb-4", children: tagline }),
+      /* @__PURE__ */ jsx("h2", { className: "rb-5 mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl", children: heading }),
+      /* @__PURE__ */ jsx("p", { className: "md:text-md", children: description })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "mx-auto w-full max-w-md", children: /* @__PURE__ */ jsx(PricingPlanCard, { plan: pricingPlan, cardLayout }) })
+  ] }) });
+};
+const PricingPlanCard = ({ plan, cardLayout }) => {
+  if (cardLayout === "icon-name-inline") {
+    return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col justify-between border border-border-primary px-6 py-8 md:p-8", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsxs("div", { className: "mb-6 flex items-start justify-between md:mb-8", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+            plan.icon && /* @__PURE__ */ jsx(CompoundImage, { src: plan.icon.src, alt: plan.icon.alt, className: "size-8" }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("h6", { className: "text-md font-bold md:text-xl", children: plan.planName }),
+              plan.description && /* @__PURE__ */ jsx("p", { className: "text-sm", children: plan.description })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("h1", { className: "text-6xl font-bold md:text-9xl lg:text-10xl", children: [
+            plan.monthlyPrice,
+            /* @__PURE__ */ jsx("span", { className: "text-2xl font-bold md:text-3xl lg:text-4xl", children: "/mo" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "mb-8 grid grid-cols-1 gap-4 py-2 md:grid-cols-2 md:gap-x-6", children: plan.features.map((feature, index) => /* @__PURE__ */ jsxs("div", { className: "flex self-start", children: [
+          /* @__PURE__ */ jsx("div", { className: "mr-4 flex-none self-start", children: /* @__PURE__ */ jsx(BiCheck, { className: "size-6" }) }),
+          /* @__PURE__ */ jsx("p", { children: feature })
+        ] }, index)) })
+      ] }),
+      /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Button, { variant: plan.button.variant, size: plan.button.size, className: "w-full", children: plan.button.label }) })
+    ] });
+  }
+  if (cardLayout === "name-desc-divider") {
+    return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col justify-between border border-border-primary px-6 py-8 md:p-8", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
+          /* @__PURE__ */ jsx("h6", { className: "text-md font-bold md:text-xl", children: plan.planName }),
+          plan.description && /* @__PURE__ */ jsx("p", { className: "mt-1", children: plan.description })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "my-6 h-px w-full bg-border md:my-8" }),
+        /* @__PURE__ */ jsxs("div", { className: "mb-6 text-center md:mb-8", children: [
+          /* @__PURE__ */ jsxs("h1", { className: "my-2 text-6xl font-bold md:text-9xl lg:text-10xl", children: [
+            plan.monthlyPrice,
+            /* @__PURE__ */ jsx("span", { className: "text-2xl font-bold md:text-3xl lg:text-4xl", children: "/mo" })
+          ] }),
+          /* @__PURE__ */ jsxs("p", { children: [
+            "or ",
+            plan.yearlyPrice,
+            " yearly"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "mb-8 grid grid-cols-1 gap-4 py-2", children: plan.features.map((feature, index) => /* @__PURE__ */ jsxs("div", { className: "flex self-start", children: [
+          /* @__PURE__ */ jsx("div", { className: "mr-4 flex-none self-start", children: /* @__PURE__ */ jsx(BiCheck, { className: "size-6" }) }),
+          /* @__PURE__ */ jsx("p", { children: feature })
+        ] }, index)) })
+      ] }),
+      /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Button, { variant: plan.button.variant, size: plan.button.size, className: "w-full", children: plan.button.label }) })
+    ] });
+  }
+  if (cardLayout === "icon-corner") {
+    return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col justify-between border border-border-primary px-6 py-8 md:p-8", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsxs("div", { className: "mb-6 flex items-start justify-between md:mb-8", children: [
+          /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+            /* @__PURE__ */ jsx("h6", { className: "text-md font-bold md:text-xl", children: plan.planName }),
+            /* @__PURE__ */ jsxs("h1", { className: "my-2 text-6xl font-bold md:text-9xl lg:text-10xl", children: [
+              plan.monthlyPrice,
+              /* @__PURE__ */ jsx("span", { className: "text-2xl font-bold md:text-3xl lg:text-4xl", children: "/mo" })
+            ] }),
+            /* @__PURE__ */ jsxs("p", { children: [
+              "or ",
+              plan.yearlyPrice,
+              " yearly"
+            ] })
+          ] }),
+          plan.icon && /* @__PURE__ */ jsx(CompoundImage, { src: plan.icon.src, alt: plan.icon.alt, className: "size-8" })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "mb-8 grid grid-cols-1 gap-4 py-2", children: plan.features.map((feature, index) => /* @__PURE__ */ jsxs("div", { className: "flex self-start", children: [
+          /* @__PURE__ */ jsx("div", { className: "mr-4 flex-none self-start", children: /* @__PURE__ */ jsx(BiCheck, { className: "size-6" }) }),
+          /* @__PURE__ */ jsx("p", { children: feature })
+        ] }, index)) })
+      ] }),
+      /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Button, { variant: plan.button.variant, size: plan.button.size, className: "w-full", children: plan.button.label }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col justify-between border border-border-primary px-6 py-8 md:p-8", children: [
+    /* @__PURE__ */ jsx("div", { className: "mb-6 md:mb-8", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+      /* @__PURE__ */ jsx("h6", { className: "text-md font-bold md:text-xl", children: plan.planName }),
+      /* @__PURE__ */ jsxs("h1", { className: "my-2 text-6xl font-bold md:text-9xl lg:text-10xl", children: [
+        plan.monthlyPrice,
+        /* @__PURE__ */ jsx("span", { className: "text-2xl font-bold md:text-3xl lg:text-4xl", children: "/mo" })
+      ] }),
+      /* @__PURE__ */ jsxs("p", { children: [
+        "or ",
+        plan.yearlyPrice,
+        " yearly"
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx("div", { className: "mb-8 grid grid-cols-1 gap-4 py-2", children: plan.features.map((feature, index) => /* @__PURE__ */ jsxs("div", { className: "flex self-start", children: [
+      /* @__PURE__ */ jsx("div", { className: "mr-4 flex-none self-start", children: /* @__PURE__ */ jsx(BiCheck, { className: "size-6" }) }),
+      /* @__PURE__ */ jsx("p", { children: feature })
+    ] }, index)) }),
+    /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Button, { variant: plan.button.variant, size: plan.button.size, className: "w-full", children: plan.button.label }) })
+  ] });
+};
+const SinglePricingCardDefaults = {
+  tagline: "Tagline",
+  heading: "Pricing plan",
+  description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+  pricingPlan: {
+    planName: "Basic plan",
+    monthlyPrice: "$19",
+    yearlyPrice: "$199",
+    features: [
+      "Feature text goes here",
+      "Feature text goes here",
+      "Feature text goes here",
+      "Feature text goes here",
+      "Feature text goes here"
+    ],
+    button: { label: "Get started" }
+  },
+  styles: {
+    cardLayout: "center-price"
+  }
+};
+export {
+  SinglePricingCard,
+  SinglePricingCardDefaults
+};

package/dist/components/puck-block/pricing-sections/single-pricing-card/index.d.ts

@@ -0,0 +1,66 @@
+import { SinglePricingCard, SinglePricingCardDefaults } from "./component";
+import type { SinglePricingCardProps } from "./component";
+export { SinglePricingCard, SinglePricingCardDefaults };
+export type { SinglePricingCardProps };
+declare const conf: {
+    fields: {
+        tagline: {
+            type: string;
+        };
+        heading: {
+            readonly type: "text";
+            readonly contentEditable: true;
+        };
+        description: {
+            readonly type: "textarea";
+            readonly contentEditable: true;
+        };
+        pricingPlan: {
+            type: string;
+            label: string;
+            objectFields: {
+                planName: {
+                    type: string;
+                };
+                monthlyPrice: {
+                    type: string;
+                };
+                yearlyPrice: {
+                    type: string;
+                };
+                features: {
+                    type: string;
+                    arrayFields: {
+                        type: string;
+                    };
+                };
+            };
+        };
+        styles: {
+            type: string;
+            label: string;
+            objectFields: {
+                cardLayout: {
+                    readonly type: "select";
+                    readonly label: "Card Layout";
+                    readonly options: readonly [{
+                        readonly label: "Center Price";
+                        readonly value: "center-price";
+                    }, {
+                        readonly label: "Icon Corner";
+                        readonly value: "icon-corner";
+                    }, {
+                        readonly label: "Name + Desc + Divider";
+                        readonly value: "name-desc-divider";
+                    }, {
+                        readonly label: "Icon + Name Inline";
+                        readonly value: "icon-name-inline";
+                    }];
+                };
+            };
+        };
+    };
+    defaultProps: SinglePricingCardProps;
+    render: (props: SinglePricingCardProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default conf;

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

@@ -0,0 +1,37 @@
+import { SinglePricingCard, SinglePricingCardDefaults } from "./component.js";
+import { descriptionField, headingField } from "../../../puck-core/core/props/content.js";
+import { pricingStyleFields } from "../props.js";
+const conf = {
+  fields: {
+    tagline: { type: "text" },
+    heading: headingField,
+    description: descriptionField,
+    pricingPlan: {
+      type: "object",
+      label: "Pricing Plan",
+      objectFields: {
+        planName: { type: "text" },
+        monthlyPrice: { type: "text" },
+        yearlyPrice: { type: "text" },
+        features: {
+          type: "array",
+          arrayFields: { type: "text" }
+        }
+      }
+    },
+    styles: {
+      type: "object",
+      label: "Styles",
+      objectFields: {
+        cardLayout: pricingStyleFields.cardLayout
+      }
+    }
+  },
+  defaultProps: SinglePricingCardDefaults,
+  render: SinglePricingCard
+};
+export {
+  SinglePricingCard,
+  SinglePricingCardDefaults,
+  conf as default
+};

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

@@ -0,0 +1,21 @@
+import type { PricingComponentProps, BaseImage, BaseButton } from "../props";
+type FeatureSection = {
+    icon: BaseImage;
+    heading: string;
+    description: string;
+};
+type PricingPlan = {
+    planName: string;
+    description: string;
+    monthlyPrice: string;
+    features: string[];
+    button: BaseButton;
+};
+type SplitPricingExtra = {
+    featureSections: FeatureSection[];
+    pricingPlan: PricingPlan;
+};
+export type SplitPricingProps = PricingComponentProps<SplitPricingExtra>;
+export declare const SplitPricing: (props: SplitPricingProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SplitPricingDefaults: SplitPricingProps;
+export {};

package/dist/components/puck-block/pricing-sections/split-pricing/component.js

@@ -0,0 +1,79 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { BiCheck } from "../../../../node_modules/.pnpm/react-icons@5.6.0_react@19.2.4/node_modules/react-icons/bi/index.js";
+import { Button } from "../../../shadcn/button.js";
+import { CompoundImage } from "../../../puck-base/image.js";
+const SplitPricing = (props) => {
+  const { tagline, heading, description, featureSections, pricingPlan } = {
+    ...SplitPricingDefaults,
+    ...props
+  };
+  return /* @__PURE__ */ jsx("section", { id: "relume", className: "px-[5%] py-16 md:py-24 lg:py-28", children: /* @__PURE__ */ jsxs("div", { className: "container", children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-8 w-full max-w-lg lg:mb-20", children: [
+      /* @__PURE__ */ jsx("p", { className: "mb-3 font-semibold md:mb-4", children: tagline }),
+      /* @__PURE__ */ jsx("h2", { className: "rb-5 mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl", children: heading }),
+      /* @__PURE__ */ jsx("p", { className: "md:text-md", children: description })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid w-full grid-cols-1 items-center gap-y-12 md:gap-x-12 md:gap-y-16 lg:grid-cols-2 lg:gap-x-20", children: [
+      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-x-6 gap-y-8 py-2", children: featureSections.map((featureSection, index) => /* @__PURE__ */ jsxs("div", { className: "flex self-start", children: [
+        /* @__PURE__ */ jsx("div", { className: "mr-6 flex-none self-start", children: /* @__PURE__ */ jsx(CompoundImage, { src: featureSection.icon.src, className: "size-8", alt: featureSection.icon.alt }) }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("h3", { className: "mb-3 text-md font-bold leading-[1.4] md:mb-4 md:text-xl", children: featureSection.heading }),
+          /* @__PURE__ */ jsx("p", { children: featureSection.description })
+        ] })
+      ] }, index)) }),
+      /* @__PURE__ */ jsxs("div", { className: "h-full border border-border-primary px-6 py-8 md:p-8", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("h4", { className: "mb-2 text-xl font-bold md:text-2xl", children: pricingPlan.planName }),
+            /* @__PURE__ */ jsx("p", { children: pricingPlan.description })
+          ] }),
+          /* @__PURE__ */ jsxs("h5", { className: "justify-self-end text-6xl font-bold md:text-9xl lg:text-10xl", children: [
+            pricingPlan.monthlyPrice,
+            /* @__PURE__ */ jsx("span", { className: "text-2xl font-bold md:text-3xl md:leading-[1.3] lg:text-4xl", children: "/mo" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "my-8 h-px w-full shrink-0 bg-border" }),
+        /* @__PURE__ */ jsx("p", { children: "Includes:" }),
+        /* @__PURE__ */ jsx("div", { className: "mb-8 mt-4 grid grid-cols-1 gap-y-4 py-2 md:grid-cols-2 md:gap-x-6", children: pricingPlan.features.map((feature, index) => /* @__PURE__ */ jsxs("div", { className: "flex self-start", children: [
+          /* @__PURE__ */ jsx("div", { className: "mr-4 flex-none self-start", children: /* @__PURE__ */ jsx(BiCheck, { className: "size-6" }) }),
+          /* @__PURE__ */ jsx("p", { children: feature })
+        ] }, index)) }),
+        /* @__PURE__ */ jsx("div", { className: "my-8 h-px w-full shrink-0 bg-border" }),
+        /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Button, { variant: pricingPlan.button.variant, size: pricingPlan.button.size, className: "w-full", children: pricingPlan.button.label }) })
+      ] })
+    ] })
+  ] }) });
+};
+const SplitPricingDefaults = {
+  tagline: "Tagline",
+  heading: "Pricing plan",
+  description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
+  featureSections: [
+    {
+      icon: { src: "https://d22po4pjz3o32e.cloudfront.net/relume-icon.svg", alt: "Relume logo 1" },
+      heading: "Key feature heading",
+      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique."
+    },
+    {
+      icon: { src: "https://d22po4pjz3o32e.cloudfront.net/relume-icon.svg", alt: "Relume logo 2" },
+      heading: "Key feature heading",
+      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique."
+    },
+    {
+      icon: { src: "https://d22po4pjz3o32e.cloudfront.net/relume-icon.svg", alt: "Relume logo 3" },
+      heading: "Key feature heading",
+      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique."
+    }
+  ],
+  pricingPlan: {
+    planName: "Basic plan",
+    description: "Lorem ipsum dolor sit amet",
+    monthlyPrice: "$19",
+    features: Array(10).fill("Feature text goes here"),
+    button: { label: "Get started" }
+  }
+};
+export {
+  SplitPricing,
+  SplitPricingDefaults
+};

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

@@ -0,0 +1,51 @@
+import { SplitPricing, SplitPricingDefaults } from "./component";
+import type { SplitPricingProps } from "./component";
+export { SplitPricing, SplitPricingDefaults };
+export type { SplitPricingProps };
+declare const conf: {
+    fields: {
+        tagline: {
+            type: string;
+        };
+        heading: {
+            readonly type: "text";
+            readonly contentEditable: true;
+        };
+        description: {
+            readonly type: "textarea";
+            readonly contentEditable: true;
+        };
+        featureSections: {
+            type: string;
+            getItemSummary: (item: {
+                heading?: string;
+            }, index?: number) => string;
+            arrayFields: {
+                heading: {
+                    type: string;
+                };
+                description: {
+                    type: string;
+                };
+            };
+        };
+        pricingPlan: {
+            type: string;
+            label: string;
+            objectFields: {
+                planName: {
+                    type: string;
+                };
+                description: {
+                    type: string;
+                };
+                monthlyPrice: {
+                    type: string;
+                };
+            };
+        };
+    };
+    defaultProps: SplitPricingProps;
+    render: (props: SplitPricingProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default conf;

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

@@ -0,0 +1,33 @@
+import { SplitPricing, SplitPricingDefaults } from "./component.js";
+import { descriptionField, headingField } from "../../../puck-core/core/props/content.js";
+const conf = {
+  fields: {
+    tagline: { type: "text" },
+    heading: headingField,
+    description: descriptionField,
+    featureSections: {
+      type: "array",
+      getItemSummary: (item, index = 0) => item.heading || `Feature ${index + 1}`,
+      arrayFields: {
+        heading: { type: "text" },
+        description: { type: "textarea" }
+      }
+    },
+    pricingPlan: {
+      type: "object",
+      label: "Pricing Plan",
+      objectFields: {
+        planName: { type: "text" },
+        description: { type: "textarea" },
+        monthlyPrice: { type: "text" }
+      }
+    }
+  },
+  defaultProps: SplitPricingDefaults,
+  render: SplitPricing
+};
+export {
+  SplitPricing,
+  SplitPricingDefaults,
+  conf as default
+};

package/dist/components/puck-block/pricing-sections/tab-pricing-grid/component.d.ts

@@ -0,0 +1,24 @@
+import type { PricingComponentProps, BaseImage, BaseButton } from "../props";
+type Billing = "monthly" | "yearly";
+type PricingPlan = {
+    icon?: BaseImage;
+    planName: string;
+    description?: string;
+    price: string;
+    discount?: string;
+    features: string[];
+    button: BaseButton;
+};
+type Tab = {
+    value: Billing;
+    tabName: string;
+    plans: PricingPlan[];
+};
+type TabPricingGridExtra = {
+    defaultTabValue: Billing;
+    tabs: Tab[];
+};
+export type TabPricingGridProps = PricingComponentProps<TabPricingGridExtra>;
+export declare const TabPricingGrid: (props: TabPricingGridProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TabPricingGridDefaults: TabPricingGridProps;
+export {};