dune-react 0.0.20 → 0.0.22

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

@@ -3,12 +3,16 @@ import { BiCheck } from "../../../../node_modules/.pnpm/react-icons@5.6.0_react@
 import { Button } from "../../../shadcn/button.js";
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "../../../shadcn/tabs.js";
 import { cn } from "../../../../utils/css-utils.js";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
 const PricingComparisonTable = (props) => {
   const { tagline, heading, description, pricingPlans, featureCategories, tabs, defaultTabValue, styles } = {
     ...PricingComparisonTableDefaults,
     ...props
   };
   const {
+    className: sectionClassName,
+    style: sectionStyle,
+    css,
     tabSwitching = false,
     tableStyle = "border-separated",
     bottomButtons = false
@@ -74,7 +78,7 @@ const PricingComparisonTable = (props) => {
     /* @__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: [
+  return /* @__PURE__ */ jsx(SectionWrapper, { className: cn("px-[5%] py-8 md:py-12 lg:py-14", sectionClassName), style: sectionStyle, css, 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 }),

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

@@ -47,6 +47,28 @@ declare const conf: {
             type: string;
             label: string;
             objectFields: {
+                className: {
+                    readonly type: "text";
+                    readonly label: "Class Name";
+                    readonly ai: {
+                        readonly instructions: "Additional Tailwind CSS classes to apply to the section wrapper.";
+                    };
+                };
+                style: {
+                    readonly type: "object";
+                    readonly label: "Style";
+                    readonly objectFields: {};
+                    readonly ai: {
+                        readonly instructions: "Inline CSSProperties object for the section wrapper, e.g. { backgroundColor: 'red', minHeight: '100vh' }.";
+                    };
+                };
+                css: {
+                    readonly type: "textarea";
+                    readonly label: "Custom CSS";
+                    readonly ai: {
+                        readonly instructions: "Custom CSS rules. Use & as a placeholder for the section selector.";
+                    };
+                };
                 tabSwitching: {
                     readonly type: "radio";
                     readonly label: "Tab Switching";

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

@@ -1,6 +1,7 @@
 import { PricingComparisonTable, PricingComparisonTableDefaults } from "./component.js";
 import { descriptionField, headingField } from "../../../puck-core/core/props/content.js";
 import { pricingStyleFields } from "../props.js";
+import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
 const conf = {
   fields: {
     tagline: { type: "text" },
@@ -28,7 +29,8 @@ const conf = {
       objectFields: {
         tabSwitching: pricingStyleFields.tabSwitching,
         tableStyle: pricingStyleFields.tableStyle,
-        bottomButtons: pricingStyleFields.bottomButtons
+        bottomButtons: pricingStyleFields.bottomButtons,
+        ...sectionWrapperFields
       }
     }
   },

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

@@ -8,6 +8,9 @@ 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 {
+    className?: string;
+    style?: React.CSSProperties;
+    css?: string;
     cardLayout?: "center-price" | "icon-corner" | "name-desc-divider" | "icon-name-inline";
     columns?: 2 | 3;
     tabSwitching?: boolean;

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

@@ -2,13 +2,15 @@ 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";
+import { cn } from "../../../../utils/css-utils.js";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.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: [
+  const { className: sectionClassName, style: sectionStyle, css, cardLayout = "center-price" } = styles ?? {};
+  return /* @__PURE__ */ jsx(SectionWrapper, { className: cn("px-[5%] py-8 md:py-12 lg:py-14", sectionClassName), style: sectionStyle, css, 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 }),

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

@@ -40,6 +40,28 @@ declare const conf: {
             type: string;
             label: string;
             objectFields: {
+                className: {
+                    readonly type: "text";
+                    readonly label: "Class Name";
+                    readonly ai: {
+                        readonly instructions: "Additional Tailwind CSS classes to apply to the section wrapper.";
+                    };
+                };
+                style: {
+                    readonly type: "object";
+                    readonly label: "Style";
+                    readonly objectFields: {};
+                    readonly ai: {
+                        readonly instructions: "Inline CSSProperties object for the section wrapper, e.g. { backgroundColor: 'red', minHeight: '100vh' }.";
+                    };
+                };
+                css: {
+                    readonly type: "textarea";
+                    readonly label: "Custom CSS";
+                    readonly ai: {
+                        readonly instructions: "Custom CSS rules. Use & as a placeholder for the section selector.";
+                    };
+                };
                 cardLayout: {
                     readonly type: "select";
                     readonly label: "Card Layout";

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

@@ -1,6 +1,7 @@
 import { SinglePricingCard, SinglePricingCardDefaults } from "./component.js";
 import { descriptionField, headingField } from "../../../puck-core/core/props/content.js";
 import { pricingStyleFields } from "../props.js";
+import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
 const conf = {
   fields: {
     tagline: { type: "text" },
@@ -23,7 +24,8 @@ const conf = {
       type: "object",
       label: "Styles",
       objectFields: {
-        cardLayout: pricingStyleFields.cardLayout
+        cardLayout: pricingStyleFields.cardLayout,
+        ...sectionWrapperFields
       }
     }
   },

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

@@ -2,12 +2,15 @@ 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";
+import { cn } from "../../../../utils/css-utils.js";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
 const SplitPricing = (props) => {
-  const { tagline, heading, description, featureSections, pricingPlan } = {
+  const { tagline, heading, description, featureSections, pricingPlan, styles } = {
     ...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: [
+  const { className: sectionClassName, style: sectionStyle, css } = styles ?? {};
+  return /* @__PURE__ */ jsx(SectionWrapper, { className: cn("px-[5%] py-8 md:py-12 lg:py-14", sectionClassName), style: sectionStyle, css, 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 }),

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

@@ -44,6 +44,34 @@ declare const conf: {
                 };
             };
         };
+        styles: {
+            type: string;
+            label: string;
+            objectFields: {
+                className: {
+                    readonly type: "text";
+                    readonly label: "Class Name";
+                    readonly ai: {
+                        readonly instructions: "Additional Tailwind CSS classes to apply to the section wrapper.";
+                    };
+                };
+                style: {
+                    readonly type: "object";
+                    readonly label: "Style";
+                    readonly objectFields: {};
+                    readonly ai: {
+                        readonly instructions: "Inline CSSProperties object for the section wrapper, e.g. { backgroundColor: 'red', minHeight: '100vh' }.";
+                    };
+                };
+                css: {
+                    readonly type: "textarea";
+                    readonly label: "Custom CSS";
+                    readonly ai: {
+                        readonly instructions: "Custom CSS rules. Use & as a placeholder for the section selector.";
+                    };
+                };
+            };
+        };
     };
     defaultProps: SplitPricingProps;
     render: (props: SplitPricingProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,5 +1,6 @@
 import { SplitPricing, SplitPricingDefaults } from "./component.js";
 import { descriptionField, headingField } from "../../../puck-core/core/props/content.js";
+import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
 const conf = {
   fields: {
     tagline: { type: "text" },
@@ -21,6 +22,13 @@ const conf = {
         description: { type: "textarea" },
         monthlyPrice: { type: "text" }
       }
+    },
+    styles: {
+      type: "object",
+      label: "Styles",
+      objectFields: {
+        ...sectionWrapperFields
+      }
     }
   },
   defaultProps: SplitPricingDefaults,

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

@@ -2,15 +2,17 @@ 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";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
 const TabPricingGrid = (props) => {
   const { tagline, heading, description, defaultTabValue, tabs, styles } = {
     ...TabPricingGridDefaults,
     ...props
   };
-  const { columns = 2 } = styles ?? {};
+  const { className: sectionClassName, style: sectionStyle, css, 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: [
+  return /* @__PURE__ */ jsx(SectionWrapper, { className: cn("px-[5%] py-8 md:py-12 lg:py-14", sectionClassName), style: sectionStyle, css, children: /* @__PURE__ */ jsxs("div", { className: `container ${containerMaxW}`, children: [
     /* @__PURE__ */ jsxs("div", { className: "mx-auto mb-8 max-w-lg text-center md:mb-10 lg:mb-12", 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 }),

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

@@ -40,6 +40,28 @@ declare const conf: {
             type: string;
             label: string;
             objectFields: {
+                className: {
+                    readonly type: "text";
+                    readonly label: "Class Name";
+                    readonly ai: {
+                        readonly instructions: "Additional Tailwind CSS classes to apply to the section wrapper.";
+                    };
+                };
+                style: {
+                    readonly type: "object";
+                    readonly label: "Style";
+                    readonly objectFields: {};
+                    readonly ai: {
+                        readonly instructions: "Inline CSSProperties object for the section wrapper, e.g. { backgroundColor: 'red', minHeight: '100vh' }.";
+                    };
+                };
+                css: {
+                    readonly type: "textarea";
+                    readonly label: "Custom CSS";
+                    readonly ai: {
+                        readonly instructions: "Custom CSS rules. Use & as a placeholder for the section selector.";
+                    };
+                };
                 columns: {
                     readonly type: "radio";
                     readonly label: "Columns";

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

@@ -1,6 +1,7 @@
 import { TabPricingGrid, TabPricingGridDefaults } from "./component.js";
 import { descriptionField, headingField } from "../../../puck-core/core/props/content.js";
 import { pricingStyleFields } from "../props.js";
+import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
 const conf = {
   fields: {
     tagline: { type: "text" },
@@ -26,7 +27,8 @@ const conf = {
       label: "Styles",
       objectFields: {
         columns: pricingStyleFields.columns,
-        cardLayout: pricingStyleFields.cardLayout
+        cardLayout: pricingStyleFields.cardLayout,
+        ...sectionWrapperFields
       }
     }
   },

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

@@ -2,12 +2,15 @@ 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";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
 const TabSinglePricing = (props) => {
-  const { tagline, heading, description, defaultTabValue, tabs } = {
+  const { tagline, heading, description, defaultTabValue, tabs, styles } = {
     ...TabSinglePricingDefaults,
     ...props
   };
-  return /* @__PURE__ */ jsx("section", { id: "relume", className: "px-[5%] py-16 md:py-24 lg:py-28", children: /* @__PURE__ */ jsxs("div", { className: "container max-w-lg", children: [
+  const { className: sectionClassName, style: sectionStyle, css } = styles ?? {};
+  return /* @__PURE__ */ jsx(SectionWrapper, { className: cn("px-[5%] py-8 md:py-12 lg:py-14", sectionClassName), style: sectionStyle, css, children: /* @__PURE__ */ jsxs("div", { className: "container max-w-lg", children: [
     /* @__PURE__ */ jsxs("div", { className: "mx-auto mb-8 max-w-lg text-center md:mb-10 lg:mb-12", 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 }),

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

@@ -40,6 +40,28 @@ declare const conf: {
             type: string;
             label: string;
             objectFields: {
+                className: {
+                    readonly type: "text";
+                    readonly label: "Class Name";
+                    readonly ai: {
+                        readonly instructions: "Additional Tailwind CSS classes to apply to the section wrapper.";
+                    };
+                };
+                style: {
+                    readonly type: "object";
+                    readonly label: "Style";
+                    readonly objectFields: {};
+                    readonly ai: {
+                        readonly instructions: "Inline CSSProperties object for the section wrapper, e.g. { backgroundColor: 'red', minHeight: '100vh' }.";
+                    };
+                };
+                css: {
+                    readonly type: "textarea";
+                    readonly label: "Custom CSS";
+                    readonly ai: {
+                        readonly instructions: "Custom CSS rules. Use & as a placeholder for the section selector.";
+                    };
+                };
                 cardLayout: {
                     readonly type: "select";
                     readonly label: "Card Layout";

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

@@ -1,6 +1,7 @@
 import { TabSinglePricing, TabSinglePricingDefaults } from "./component.js";
 import { descriptionField, headingField } from "../../../puck-core/core/props/content.js";
 import { pricingStyleFields } from "../props.js";
+import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
 const conf = {
   fields: {
     tagline: { type: "text" },
@@ -25,7 +26,8 @@ const conf = {
       type: "object",
       label: "Styles",
       objectFields: {
-        cardLayout: pricingStyleFields.cardLayout
+        cardLayout: pricingStyleFields.cardLayout,
+        ...sectionWrapperFields
       }
     }
   },