dune-react 0.0.9 → 0.0.10

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

@@ -4,67 +4,73 @@ import { CompoundContainer } from "../../../puck-base/container.js";
 import { cn } from "../../../../utils/css-utils.js";
 import { CompoundContent } from "../../../puck-base/content.js";
 const Stats = ({
-  padding,
-  sectionStyle,
-  backgroundColor,
   layout = "section",
   badge,
   heading,
   description,
   buttons,
-  statistics
+  items,
+  styles
 }) => {
-  return /* @__PURE__ */ jsxs(CompoundContainer, { padding, sectionStyle, backgroundColor, children: [
-    layout === "inline" ? /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-4 text-start sm:grid-cols-2 lg:grid-cols-4 lg:gap-8", children: (statistics ?? []).map((stat, index) => /* @__PURE__ */ jsx(
-      Stat,
-      {
-        value: stat.value,
-        label: stat.label,
-        direction: stat.direction,
-        polarity: stat.polarity,
-        percentage: stat.percentage
-      },
-      index
-    )) }) : null,
-    layout === "section" ? /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-10 lg:grid-cols-2", children: [
-      /* @__PURE__ */ jsx(
-        CompoundContent,
-        {
-          badge,
-          heading,
-          description,
-          buttons
-        }
-      ),
-      /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "grid w-full grid-cols-1 gap-2 text-start sm:grid-cols-2 lg:grid-cols-2", children: (statistics ?? []).map((stat, index) => /* @__PURE__ */ jsx(
-        Stat,
-        {
-          value: stat.value,
-          label: stat.label,
-          direction: stat.direction,
-          polarity: stat.polarity,
-          percentage: stat.percentage
-        },
-        index
-      )) }) })
-    ] }) : null,
-    layout === "centered" ? /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-      /* @__PURE__ */ jsx(
-        CompoundContent,
-        {
-          badge,
-          heading,
-          description,
-          buttons,
-          alignContent: "center"
-        }
-      ),
-      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-12 mt-16", children: (statistics ?? []).map((stat, index) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-3", children: [
-        /* @__PURE__ */ jsx("h2", { className: "font-serif text-5xl md:text-6xl font-medium text-foreground", children: stat.value }),
-        /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm leading-relaxed", children: stat.label })
-      ] }, index)) })
-    ] }) : null
-  ] });
+  return /* @__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: [
+        layout === "inline" ? /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-4 text-start sm:grid-cols-2 lg:grid-cols-4 lg:gap-8", children: (items ?? []).map((stat, index) => /* @__PURE__ */ jsx(
+          Stat,
+          {
+            value: stat.value,
+            label: stat.label,
+            direction: stat.direction,
+            polarity: stat.polarity,
+            percentage: stat.percentage
+          },
+          index
+        )) }) : null,
+        layout === "section" ? /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-10 lg:grid-cols-2", children: [
+          /* @__PURE__ */ jsx(
+            CompoundContent,
+            {
+              badge,
+              heading,
+              description,
+              buttons
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "grid w-full grid-cols-1 gap-2 text-start sm:grid-cols-2 lg:grid-cols-2", children: (items ?? []).map((stat, index) => /* @__PURE__ */ jsx(
+            Stat,
+            {
+              value: stat.value,
+              label: stat.label,
+              direction: stat.direction,
+              polarity: stat.polarity,
+              percentage: stat.percentage
+            },
+            index
+          )) }) })
+        ] }) : null,
+        layout === "centered" ? /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+          /* @__PURE__ */ jsx(
+            CompoundContent,
+            {
+              badge,
+              heading,
+              description,
+              buttons,
+              alignContent: "center"
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-12 mt-16", children: (items ?? []).map((stat, index) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-3", children: [
+            /* @__PURE__ */ jsx("h2", { className: "font-serif text-5xl md:text-6xl font-medium text-foreground", children: stat.value }),
+            /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm leading-relaxed", children: stat.label })
+          ] }, index)) })
+        ] }) : null
+      ]
+    }
+  );
 };
 const Stat = ({
   value,

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

@@ -1,5 +1,6 @@
-import { paddingDefaults, backgroundColor, sectionStyle, padding, buttons } from "../../../puck-base/core/fields.js";
+import { buttons } from "../../../puck-base/core/fields.js";
 import { Stats2 } from "./stats-2.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
 const conf = {
   fields: {
     heading: {
@@ -40,9 +41,7 @@ const conf = {
         variant: "light"
       }
     },
-    padding,
-    sectionStyle,
-    backgroundColor
+    styles: createStylesField()
   },
   defaultProps: {
     heading: "Real results from dedicated training",
@@ -68,7 +67,7 @@ const conf = {
       { metric: "1:1", title: "Personalized attention", variant: "light" },
       { metric: "LA", title: "Local Los Angeles training", variant: "light" }
     ],
-    padding: paddingDefaults
+    styles: createStylesDefaults()
   },
   render: Stats2
 };

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

@@ -9,8 +9,10 @@ export interface Stats2Props {
         title: string;
         variant: "dark" | "light";
     }[];
-    padding?: CompoundContainerProps["padding"];
-    sectionStyle?: CompoundContainerProps["sectionStyle"];
-    backgroundColor?: string;
+    styles?: {
+        padding?: CompoundContainerProps["padding"];
+        sectionStyle?: CompoundContainerProps["sectionStyle"];
+        backgroundColor?: string;
+    };
 }
-export declare const Stats2: ({ heading, description, buttons, items, padding, sectionStyle, backgroundColor, }: Stats2Props) => import("react/jsx-runtime").JSX.Element;
+export declare const Stats2: ({ heading, description, buttons, items, styles, }: Stats2Props) => import("react/jsx-runtime").JSX.Element;

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

@@ -7,16 +7,14 @@ const Stats2 = ({
   description,
   buttons,
   items = [],
-  padding,
-  sectionStyle,
-  backgroundColor
+  styles
 }) => {
   return /* @__PURE__ */ jsx(
     CompoundContainer,
     {
-      padding,
-      sectionStyle,
-      backgroundColor,
+      padding: styles == null ? void 0 : styles.padding,
+      sectionStyle: styles == null ? void 0 : styles.sectionStyle,
+      backgroundColor: styles == null ? void 0 : styles.backgroundColor,
       children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-8", children: [
         /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 md:flex-row md:justify-between", children: [
           /* @__PURE__ */ jsx("div", { className: "w-full md:w-1/2", children: heading && /* @__PURE__ */ jsx("h2", { className: "max-w-xl text-4xl font-semibold tracking-tight text-foreground", children: heading }) }),

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

@@ -1,5 +1,6 @@
-import { paddingDefaults, actionDefaults, backgroundColor, sectionStyle, padding, button } from "../../../puck-base/core/fields.js";
+import { buttons } from "../../../puck-base/core/fields.js";
 import { Stats3 } from "./stats-3.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
 const conf = {
   fields: {
     heading: {
@@ -10,14 +11,7 @@ const conf = {
       type: "textarea",
       contentEditable: true
     },
-    primaryButton: {
-      type: "object",
-      objectFields: { ...button.objectFields }
-    },
-    secondaryButton: {
-      type: "object",
-      objectFields: { ...button.objectFields }
-    },
+    buttons,
     items: {
       type: "array",
       max: 6,
@@ -45,29 +39,27 @@ const conf = {
         description: "A brief description of what this statistic means."
       }
     },
-    padding,
-    sectionStyle,
-    backgroundColor
+    styles: createStylesField()
   },
   defaultProps: {
     heading: "Real progress from personalized training",
     description: "We focus on measurable improvements and sustainable habits that fit your life.",
-    primaryButton: {
-      label: "Get started",
-      url: "#",
-      action: actionDefaults,
-      variant: "default",
-      size: "default",
-      icon: "none"
-    },
-    secondaryButton: {
-      label: "Learn more",
-      url: "#",
-      action: actionDefaults,
-      variant: "outline",
-      size: "default",
-      icon: "none"
-    },
+    buttons: [
+      {
+        label: "Get started",
+        url: "#",
+        variant: "default",
+        size: "default",
+        icon: "none"
+      },
+      {
+        label: "Learn more",
+        url: "#",
+        variant: "outline",
+        size: "default",
+        icon: "none"
+      }
+    ],
     items: [
       {
         metric: "100%",
@@ -85,7 +77,7 @@ const conf = {
         description: "Most clients see measurable strength and endurance improvements within the first month."
       }
     ],
-    padding: paddingDefaults
+    styles: createStylesDefaults()
   },
   render: Stats3
 };

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

@@ -1,17 +1,18 @@
 import { CompoundContainerProps } from "@/components/puck-base/container";
 import { CompoundButtonProps } from "@/components/puck-base/button";
 export interface Stats3Props {
-    padding?: CompoundContainerProps["padding"];
-    sectionStyle?: CompoundContainerProps["sectionStyle"];
-    backgroundColor?: string;
     heading?: string;
     description?: string;
-    primaryButton?: CompoundButtonProps;
-    secondaryButton?: CompoundButtonProps;
+    buttons?: CompoundButtonProps[];
     items: {
         metric: string;
         title: string;
         description: string;
     }[];
+    styles?: {
+        padding?: CompoundContainerProps["padding"];
+        sectionStyle?: CompoundContainerProps["sectionStyle"];
+        backgroundColor?: string;
+    };
 }
-export declare const Stats3: ({ padding, sectionStyle, backgroundColor, heading, description, primaryButton, secondaryButton, items, }: Stats3Props) => import("react/jsx-runtime").JSX.Element;
+export declare const Stats3: ({ heading, description, buttons, items, styles, }: Stats3Props) => import("react/jsx-runtime").JSX.Element;

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

@@ -8,30 +8,26 @@ const ITEM_STAGGER = {
   2: "lg:pt-8"
 };
 const Stats3 = ({
-  padding,
-  sectionStyle,
-  backgroundColor,
   heading,
   description,
-  primaryButton,
-  secondaryButton,
-  items = []
+  buttons = [],
+  items = [],
+  styles
 }) => {
   return /* @__PURE__ */ jsx(
     CompoundContainer,
     {
-      padding,
-      sectionStyle,
-      backgroundColor,
+      padding: styles == null ? void 0 : styles.padding,
+      sectionStyle: styles == null ? void 0 : styles.sectionStyle,
+      backgroundColor: styles == null ? void 0 : styles.backgroundColor,
       children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-8", children: [
         /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 md:gap-8 lg:flex-row lg:justify-between", children: [
           /* @__PURE__ */ jsx("div", { className: "w-full lg:basis-1/2", children: heading && /* @__PURE__ */ jsx("h2", { className: "max-w-xl text-4xl font-semibold tracking-tight text-foreground", children: heading }) }),
           /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-8 lg:basis-1/2", children: [
             description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: description }),
-            ((primaryButton == null ? void 0 : primaryButton.label) || (secondaryButton == null ? void 0 : secondaryButton.label)) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 sm:flex-row", children: [
-              (primaryButton == null ? void 0 : primaryButton.label) && /* @__PURE__ */ jsx(CompoundButton, { ...primaryButton }),
-              (secondaryButton == null ? void 0 : secondaryButton.label) && /* @__PURE__ */ jsx(CompoundButton, { ...secondaryButton })
-            ] })
+            buttons.some((button) => button == null ? void 0 : button.label) && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3 sm:flex-row", children: buttons.map(
+              (button, index) => (button == null ? void 0 : button.label) ? /* @__PURE__ */ jsx(CompoundButton, { ...button }, index) : null
+            ) })
           ] })
         ] }) }),
         /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-y-6 sm:grid-cols-2 lg:grid-cols-3", children: items.map((item, index) => /* @__PURE__ */ jsx(

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

@@ -1,14 +1,16 @@
 import { CompoundContainerProps } from "@/components/puck-base/container";
 export interface ComparisonProps {
-    padding?: CompoundContainerProps["padding"];
-    sectionStyle?: CompoundContainerProps["sectionStyle"];
-    backgroundColor?: string;
     heading?: string;
     description?: string;
-    columns?: Array<{
+    plans?: Array<{
         name: string;
         highlighted?: boolean;
         features: string[];
     }>;
+    styles?: {
+        padding?: CompoundContainerProps["padding"];
+        sectionStyle?: CompoundContainerProps["sectionStyle"];
+        backgroundColor?: string;
+    };
 }
-export declare const Comparison: ({ padding, sectionStyle, backgroundColor, heading, description, columns, }: ComparisonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Comparison: ({ heading, description, plans, styles, }: ComparisonProps) => import("react/jsx-runtime").JSX.Element;

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;