dune-react 0.0.19 → 0.0.20

package/dist/components/puck-block/metrics-sections/tab-stats/tab-stats.d.ts

@@ -0,0 +1,19 @@
+import type { MetricsComponentProps, BaseImage } from "../props";
+type TabStatItem = {
+    value: string;
+    percentage: string;
+    heading: string;
+    description: string;
+    image?: BaseImage;
+    video?: {
+        image: BaseImage;
+        url: string;
+    };
+};
+export type TabStatsProps = MetricsComponentProps<{
+    tabs: TabStatItem[];
+    defaultTabValue: string;
+}>;
+export declare const TabStats: (props: TabStatsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TabStatsDefaults: TabStatsProps;
+export {};

package/dist/components/puck-block/metrics-sections/tab-stats/tab-stats.js

@@ -0,0 +1,137 @@
+"use client";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { FaCirclePlay } from "../../../../node_modules/.pnpm/react-icons@5.6.0_react@19.2.4/node_modules/react-icons/fa6/index.js";
+import { VideoIframe } from "../../../shadcn/video-iframe.js";
+import { Dialog, DialogTrigger, DialogContent } from "../../../shadcn/dialog.js";
+import { TabsContent, TabsList, TabsTrigger, Tabs } from "../../../shadcn/tabs.js";
+import { CompoundImage } from "../../../puck-base/image.js";
+const TabStats = (props) => {
+  const {
+    tagline,
+    heading,
+    description,
+    tabs = [],
+    defaultTabValue,
+    styles
+  } = {
+    ...TabStatsDefaults,
+    ...props
+  };
+  const { mediaPosition = "left" } = styles ?? {};
+  const isMediaLeft = mediaPosition === "left";
+  const mediaPanel = /* @__PURE__ */ jsx("div", { className: "max-size-full flex items-center justify-center overflow-hidden", children: tabs.map((tab) => /* @__PURE__ */ jsx(
+    TabsContent,
+    {
+      value: tab.value,
+      className: "data-[state=active]:animate-tabs",
+      children: /* @__PURE__ */ jsxs("div", { className: "relative size-full", children: [
+        tab.image && /* @__PURE__ */ jsx(
+          CompoundImage,
+          {
+            src: tab.image.src,
+            alt: tab.image.alt,
+            className: "size-full object-cover"
+          }
+        ),
+        tab.video && /* @__PURE__ */ jsxs(Dialog, { children: [
+          /* @__PURE__ */ jsx(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsxs("button", { className: "relative flex w-full items-center justify-center", children: [
+            /* @__PURE__ */ jsx(
+              CompoundImage,
+              {
+                src: tab.video.image.src,
+                alt: tab.video.image.alt,
+                className: "size-full object-cover"
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "absolute inset-0 z-10 bg-black/50" }),
+            /* @__PURE__ */ jsx(FaCirclePlay, { className: "absolute z-20 size-16 text-white" })
+          ] }) }),
+          /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsx(VideoIframe, { video: tab.video.url }) })
+        ] })
+      ] })
+    },
+    tab.value
+  )) });
+  const tabTriggers = /* @__PURE__ */ jsx(TabsList, { className: "grid grid-cols-1 items-center gap-x-4 gap-y-10", children: tabs.map((tab, index) => /* @__PURE__ */ jsxs(
+    TabsTrigger,
+    {
+      value: tab.value,
+      className: "flex-col items-start justify-start whitespace-normal border-0 border-l-2 border-transparent py-0 pl-8 pr-0 text-left data-[state=active]:border-black data-[state=active]:bg-transparent data-[state=active]:text-text-primary",
+      children: [
+        /* @__PURE__ */ jsx("h2", { className: "mb-2 text-6xl font-bold md:text-9xl lg:text-10xl", children: tab.percentage }),
+        /* @__PURE__ */ jsx("h3", { className: "text-md font-bold leading-[1.4] md:text-xl", children: tab.heading }),
+        /* @__PURE__ */ jsx("p", { className: "mt-2", children: tab.description })
+      ]
+    },
+    index
+  )) });
+  return /* @__PURE__ */ jsx("section", { id: "relume", className: "px-[5%] py-16 md:py-24 lg:py-28", children: /* @__PURE__ */ jsxs("div", { className: "container flex flex-col items-start", children: [
+    /* @__PURE__ */ jsxs("div", { className: "rb-12 mb-12 w-full max-w-lg md:mb-18 lg:mb-20", children: [
+      /* @__PURE__ */ jsx("p", { className: "mb-3 font-semibold md:mb-4", children: tagline }),
+      /* @__PURE__ */ jsx("h1", { className: "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(
+      Tabs,
+      {
+        defaultValue: defaultTabValue,
+        className: "grid grid-cols-1 items-center gap-y-12 md:grid-cols-2 md:gap-x-12 lg:gap-x-20",
+        children: isMediaLeft ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          mediaPanel,
+          tabTriggers
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          tabTriggers,
+          mediaPanel
+        ] })
+      }
+    )
+  ] }) });
+};
+const TabStatsDefaults = {
+  tagline: "Tagline",
+  heading: "Medium length section heading goes here",
+  description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.",
+  defaultTabValue: "tab-1",
+  tabs: [
+    {
+      value: "tab-1",
+      percentage: "50%",
+      heading: "Short heading goes here",
+      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+      image: {
+        src: "https://picsum.photos/seed/stats-tab1/800/600",
+        alt: "Relume placeholder image 1"
+      }
+    },
+    {
+      value: "tab-2",
+      percentage: "50%",
+      heading: "Short heading goes here",
+      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+      video: {
+        image: {
+          src: "https://picsum.photos/seed/stats-tab2/800/600",
+          alt: "Relume placeholder image 2"
+        },
+        url: "https://www.youtube.com/embed/8DKLYsikxTs?si=Ch9W0KrDWWUiCMMW"
+      }
+    },
+    {
+      value: "tab-3",
+      percentage: "50%",
+      heading: "Short heading goes here",
+      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+      image: {
+        src: "https://picsum.photos/seed/stats-tab3/800/600",
+        alt: "Relume placeholder image 3"
+      }
+    }
+  ],
+  styles: {
+    mediaPosition: "left"
+  }
+};
+export {
+  TabStats,
+  TabStatsDefaults
+};

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

@@ -0,0 +1,6 @@
+export { default as PricingCardGridConf } from "./pricing-card-grid";
+export { default as PricingComparisonTableConf } from "./pricing-comparison-table";
+export { default as SinglePricingCardConf } from "./single-pricing-card";
+export { default as SplitPricingConf } from "./split-pricing";
+export { default as TabPricingGridConf } from "./tab-pricing-grid";
+export { default as TabSinglePricingConf } from "./tab-single-pricing";

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

@@ -0,0 +1,15 @@
+import type { PricingComponentProps, BaseButton } from "../props";
+type PricingPlan = {
+    planName: string;
+    monthlyPrice: string;
+    yearlyPrice: string;
+    features: string[];
+    button: BaseButton;
+};
+type PricingCardGridExtra = {
+    pricingPlans: PricingPlan[];
+};
+export type PricingCardGridProps = PricingComponentProps<PricingCardGridExtra>;
+export declare const PricingCardGrid: (props: PricingCardGridProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PricingCardGridDefaults: PricingCardGridProps;
+export {};

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

@@ -0,0 +1,69 @@
+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";
+const PricingCardGrid = (props) => {
+  const { tagline, heading, description, pricingPlans, styles } = {
+    ...PricingCardGridDefaults,
+    ...props
+  };
+  const { columns = 2 } = styles ?? {};
+  const gridColsClass = columns === 3 ? "md:grid-cols-2 lg:grid-cols-3" : "md:grid-cols-2";
+  const containerMaxW = columns === 3 ? "" : "max-w-xl";
+  return /* @__PURE__ */ jsx("section", { id: "relume", className: "px-[5%] py-16 md:py-24 lg:py-28", children: /* @__PURE__ */ jsxs("div", { className: `container ${containerMaxW}`, 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: `grid grid-cols-1 gap-8 ${gridColsClass}`, children: pricingPlans.map((plan, index) => /* @__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: "rb-6 mb-6 text-center md:mb-8", children: [
+          /* @__PURE__ */ jsx("h6", { className: "text-md font-bold leading-[1.4] 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, featureIndex) => /* @__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 })
+        ] }, featureIndex)) })
+      ] }),
+      /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Button, { variant: plan.button.variant, size: plan.button.size, className: "w-full", children: plan.button.label }) })
+    ] }, index)) })
+  ] }) });
+};
+const PricingCardGridDefaults = {
+  tagline: "Tagline",
+  heading: "Pricing plan",
+  description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+  pricingPlans: [
+    {
+      planName: "Basic plan",
+      monthlyPrice: "$19",
+      yearlyPrice: "$199",
+      features: ["Feature text goes here", "Feature text goes here", "Feature text goes here"],
+      button: { label: "Get started" }
+    },
+    {
+      planName: "Business plan",
+      monthlyPrice: "$29",
+      yearlyPrice: "$299",
+      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: {
+    columns: 2,
+    cardLayout: "center-price"
+  }
+};
+export {
+  PricingCardGrid,
+  PricingCardGridDefaults
+};

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

@@ -0,0 +1,79 @@
+import { PricingCardGrid, PricingCardGridDefaults } from "./component";
+import type { PricingCardGridProps } from "./component";
+export { PricingCardGrid, PricingCardGridDefaults };
+export type { PricingCardGridProps };
+declare const conf: {
+    fields: {
+        tagline: {
+            type: string;
+        };
+        heading: {
+            readonly type: "text";
+            readonly contentEditable: true;
+        };
+        description: {
+            readonly type: "textarea";
+            readonly contentEditable: true;
+        };
+        pricingPlans: {
+            type: string;
+            getItemSummary: (item: {
+                planName?: string;
+            }, index?: number) => string;
+            arrayFields: {
+                planName: {
+                    type: string;
+                };
+                monthlyPrice: {
+                    type: string;
+                };
+                yearlyPrice: {
+                    type: string;
+                };
+                features: {
+                    type: string;
+                    arrayFields: {
+                        type: string;
+                    };
+                };
+            };
+        };
+        styles: {
+            type: string;
+            label: string;
+            objectFields: {
+                columns: {
+                    readonly type: "radio";
+                    readonly label: "Columns";
+                    readonly options: readonly [{
+                        readonly label: "2";
+                        readonly value: "2";
+                    }, {
+                        readonly label: "3";
+                        readonly value: "3";
+                    }];
+                };
+                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: PricingCardGridProps;
+    render: (props: PricingCardGridProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default conf;

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

@@ -0,0 +1,38 @@
+import { PricingCardGrid, PricingCardGridDefaults } 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,
+    pricingPlans: {
+      type: "array",
+      getItemSummary: (item, index = 0) => item.planName || `Plan ${index + 1}`,
+      arrayFields: {
+        planName: { type: "text" },
+        monthlyPrice: { type: "text" },
+        yearlyPrice: { type: "text" },
+        features: {
+          type: "array",
+          arrayFields: { type: "text" }
+        }
+      }
+    },
+    styles: {
+      type: "object",
+      label: "Styles",
+      objectFields: {
+        columns: pricingStyleFields.columns,
+        cardLayout: pricingStyleFields.cardLayout
+      }
+    }
+  },
+  defaultProps: PricingCardGridDefaults,
+  render: PricingCardGrid
+};
+export {
+  PricingCardGrid,
+  PricingCardGridDefaults,
+  conf as default
+};

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

@@ -0,0 +1,31 @@
+import type { PricingComponentProps, BaseButton } from "../props";
+type Feature = {
+    text: string;
+    items: React.ReactNode[];
+};
+type FeatureCategory = {
+    title?: string;
+    features: Feature[];
+};
+type PricingPlan = {
+    planName: string;
+    monthlyPrice: string;
+    description: string;
+    button: BaseButton;
+};
+type Billing = "monthly" | "yearly";
+type Tab = {
+    value: Billing;
+    tabName: string;
+    pricingPlans: PricingPlan[];
+};
+type PricingComparisonTableExtra = {
+    pricingPlans: PricingPlan[];
+    featureCategories: FeatureCategory[];
+    defaultTabValue?: Billing;
+    tabs?: Tab[];
+};
+export type PricingComparisonTableProps = PricingComponentProps<PricingComparisonTableExtra>;
+export declare const PricingComparisonTable: (props: PricingComparisonTableProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PricingComparisonTableDefaults: PricingComparisonTableProps;
+export {};

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

@@ -0,0 +1,127 @@
+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 { Tabs, TabsList, TabsTrigger, TabsContent } from "../../../shadcn/tabs.js";
+import { cn } from "../../../../utils/css-utils.js";
+const PricingComparisonTable = (props) => {
+  const { tagline, heading, description, pricingPlans, featureCategories, tabs, defaultTabValue, styles } = {
+    ...PricingComparisonTableDefaults,
+    ...props
+  };
+  const {
+    tabSwitching = false,
+    tableStyle = "border-separated",
+    bottomButtons = false
+  } = styles ?? {};
+  const renderHeader = (plans) => /* @__PURE__ */ jsxs("div", { className: "sticky top-0 grid grid-cols-3 border-b border-border-primary bg-white md:grid-cols-[1.5fr_1fr_1fr_1fr]", children: [
+    /* @__PURE__ */ jsx("div", { className: "hidden md:block" }),
+    plans.map((plan, index) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "flex h-full flex-col justify-between border-border-primary px-2 py-4 sm:px-4 sm:py-6 lg:px-6 lg:py-8",
+          {
+            "border-0 md:border-l": index === 0,
+            "border-l": index > 0
+          }
+        ),
+        children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("h2", { className: "text-md font-bold leading-[1.4] md:text-xl", children: plan.planName }),
+            /* @__PURE__ */ jsxs("div", { className: "my-3 md:my-4", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-2xl font-bold leading-[1.2] sm:text-6xl md:text-9xl lg:text-10xl", children: plan.monthlyPrice }),
+              /* @__PURE__ */ jsx("p", { className: "font-bold", children: "Per month" })
+            ] }),
+            /* @__PURE__ */ jsx("p", { children: plan.description })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "mt-6 md:mt-8", children: /* @__PURE__ */ jsx(Button, { variant: plan.button.variant, size: plan.button.size, className: "w-full whitespace-normal px-3 py-1 sm:px-4 sm:py-3", children: plan.button.label }) })
+        ]
+      },
+      index
+    ))
+  ] });
+  const renderFeatures = () => /* @__PURE__ */ jsx("div", { children: featureCategories.map((featureCategory, catIndex) => /* @__PURE__ */ jsxs("div", { children: [
+    featureCategory.title && /* @__PURE__ */ jsx("div", { className: `border-b border-border-primary py-5 ${tableStyle === "zebra-striped" ? "bg-background-secondary" : ""}`, children: /* @__PURE__ */ jsx("h3", { className: "text-md font-bold leading-[1.4] md:text-xl", children: featureCategory.title }) }),
+    featureCategory.features.map((feature, featureIndex) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "grid grid-cols-3 border-b border-border-primary md:grid-cols-[1.5fr_1fr_1fr_1fr]",
+          { "bg-background-secondary": tableStyle === "zebra-striped" && featureIndex % 2 === 0 }
+        ),
+        children: [
+          /* @__PURE__ */ jsx("p", { className: "col-span-3 row-span-1 border-b border-border-primary py-4 pr-4 md:col-span-1 md:border-0 md:pr-6", children: feature.text }),
+          feature.items.map((item, itemIndex) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "flex items-center justify-center border-border-primary px-4 py-4 text-center font-semibold md:px-6",
+                {
+                  "border-0 md:border-l": itemIndex === 0,
+                  "border-l": itemIndex > 0
+                }
+              ),
+              children: /* @__PURE__ */ jsx("p", { children: item })
+            },
+            itemIndex
+          ))
+        ]
+      },
+      featureIndex
+    ))
+  ] }, catIndex)) });
+  const renderBottomButtons = (plans) => /* @__PURE__ */ jsxs("div", { className: "mt-8 grid grid-cols-3 md:grid-cols-[1.5fr_1fr_1fr_1fr]", children: [
+    /* @__PURE__ */ jsx("div", { className: "hidden md:block" }),
+    plans.map((plan, index) => /* @__PURE__ */ jsx("div", { className: cn("px-2 sm:px-4 lg:px-6", { "border-l border-border-primary": index > 0 }), children: /* @__PURE__ */ jsx(Button, { variant: plan.button.variant, size: plan.button.size, className: "w-full whitespace-normal px-3 py-1 sm:px-4 sm:py-3", children: plan.button.label }) }, index))
+  ] });
+  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("h1", { className: "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 })
+    ] }),
+    tabSwitching && tabs ? /* @__PURE__ */ jsxs(Tabs, { defaultValue: defaultTabValue || "monthly", children: [
+      /* @__PURE__ */ jsx(TabsList, { className: "mx-auto mb-12 w-fit", children: tabs.map((tab, index) => /* @__PURE__ */ jsx(TabsTrigger, { value: tab.value, children: tab.tabName }, index)) }),
+      tabs.map((tab, index) => /* @__PURE__ */ jsxs(TabsContent, { value: tab.value, className: "w-full data-[state=active]:animate-tabs", children: [
+        renderHeader(tab.pricingPlans),
+        renderFeatures(),
+        bottomButtons && renderBottomButtons(tab.pricingPlans)
+      ] }, index))
+    ] }) : /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
+      renderHeader(pricingPlans),
+      renderFeatures(),
+      bottomButtons && renderBottomButtons(pricingPlans)
+    ] })
+  ] }) });
+};
+const defaultPlans = [
+  { planName: "Basic", monthlyPrice: "$19", description: "Lorem ipsum dolor sit amet", button: { label: "Get started" } },
+  { planName: "Business", monthlyPrice: "$29", description: "Lorem ipsum dolor sit amet", button: { label: "Get started" } },
+  { planName: "Enterprise", monthlyPrice: "$49", description: "Lorem ipsum dolor sit amet", button: { label: "Get started" } }
+];
+const defaultFeatureCategory = {
+  title: "Feature Category",
+  features: [
+    { text: "Feature text goes here", items: ["10", "25", "Unlimited"] },
+    { text: "Feature text goes here", items: [/* @__PURE__ */ jsx(BiCheck, { className: "size-6" }), /* @__PURE__ */ jsx(BiCheck, { className: "size-6" }), /* @__PURE__ */ jsx(BiCheck, { className: "size-6" })] },
+    { text: "Feature text goes here", items: [/* @__PURE__ */ jsx(BiCheck, { className: "size-6" }), /* @__PURE__ */ jsx(BiCheck, { className: "size-6" }), /* @__PURE__ */ jsx(BiCheck, { className: "size-6" })] },
+    { text: "Feature text goes here", items: ["", /* @__PURE__ */ jsx(BiCheck, { className: "size-6" }), /* @__PURE__ */ jsx(BiCheck, { className: "size-6" })] },
+    { text: "Feature text goes here", items: ["", "", /* @__PURE__ */ jsx(BiCheck, { className: "size-6" })] }
+  ]
+};
+const PricingComparisonTableDefaults = {
+  tagline: "Tagline",
+  heading: "Pricing plan",
+  description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+  pricingPlans: defaultPlans,
+  featureCategories: [defaultFeatureCategory, defaultFeatureCategory, defaultFeatureCategory],
+  styles: {
+    tabSwitching: false,
+    tableStyle: "border-separated",
+    bottomButtons: false
+  }
+};
+export {
+  PricingComparisonTable,
+  PricingComparisonTableDefaults
+};

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

@@ -0,0 +1,89 @@
+import { PricingComparisonTable, PricingComparisonTableDefaults } from "./component";
+import type { PricingComparisonTableProps } from "./component";
+export { PricingComparisonTable, PricingComparisonTableDefaults };
+export type { PricingComparisonTableProps };
+declare const conf: {
+    fields: {
+        tagline: {
+            type: string;
+        };
+        heading: {
+            readonly type: "text";
+            readonly contentEditable: true;
+        };
+        description: {
+            readonly type: "textarea";
+            readonly contentEditable: true;
+        };
+        pricingPlans: {
+            type: string;
+            getItemSummary: (item: {
+                planName?: string;
+            }, index?: number) => string;
+            arrayFields: {
+                planName: {
+                    type: string;
+                };
+                monthlyPrice: {
+                    type: string;
+                };
+                description: {
+                    type: string;
+                };
+            };
+        };
+        featureCategories: {
+            type: string;
+            getItemSummary: (item: {
+                title?: string;
+            }, index?: number) => string;
+            arrayFields: {
+                title: {
+                    type: string;
+                };
+            };
+        };
+        styles: {
+            type: string;
+            label: string;
+            objectFields: {
+                tabSwitching: {
+                    readonly type: "radio";
+                    readonly label: "Tab Switching";
+                    readonly options: readonly [{
+                        readonly label: "Yes";
+                        readonly value: "true";
+                    }, {
+                        readonly label: "No";
+                        readonly value: "false";
+                    }];
+                };
+                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";
+                    }];
+                };
+                bottomButtons: {
+                    readonly type: "radio";
+                    readonly label: "Bottom Buttons";
+                    readonly options: readonly [{
+                        readonly label: "Yes";
+                        readonly value: "true";
+                    }, {
+                        readonly label: "No";
+                        readonly value: "false";
+                    }];
+                };
+            };
+        };
+    };
+    defaultProps: PricingComparisonTableProps;
+    render: (props: PricingComparisonTableProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default conf;

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

@@ -0,0 +1,42 @@
+import { PricingComparisonTable, PricingComparisonTableDefaults } 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,
+    pricingPlans: {
+      type: "array",
+      getItemSummary: (item, index = 0) => item.planName || `Plan ${index + 1}`,
+      arrayFields: {
+        planName: { type: "text" },
+        monthlyPrice: { type: "text" },
+        description: { type: "textarea" }
+      }
+    },
+    featureCategories: {
+      type: "array",
+      getItemSummary: (item, index = 0) => item.title || `Category ${index + 1}`,
+      arrayFields: {
+        title: { type: "text" }
+      }
+    },
+    styles: {
+      type: "object",
+      label: "Styles",
+      objectFields: {
+        tabSwitching: pricingStyleFields.tabSwitching,
+        tableStyle: pricingStyleFields.tableStyle,
+        bottomButtons: pricingStyleFields.bottomButtons
+      }
+    }
+  },
+  defaultProps: PricingComparisonTableDefaults,
+  render: PricingComparisonTable
+};
+export {
+  PricingComparisonTable,
+  PricingComparisonTableDefaults,
+  conf as default
+};