dune-react 0.0.8 → 0.0.10

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

@@ -1,35 +1,33 @@
-import { paddingDefaults, backgroundColor, sectionStyle, padding } from "../../../puck-base/core/fields.js";
+import { contentFields } from "../../../puck-base/core/fields.js";
 import { BannerCta } from "./banner-cta.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
+const bannerCtaStylesField = createStylesField({
+  visualVariant: {
+    type: "select",
+    label: "Background Variant",
+    options: [
+      { label: "Primary Color", value: "primary" },
+      { label: "Dark", value: "dark" },
+      { label: "Gradient", value: "gradient" }
+    ]
+  }
+});
 const conf = {
   fields: {
-    heading: { type: "text", contentEditable: true },
-    description: { type: "textarea", contentEditable: true },
-    ctaLabel: { type: "text", contentEditable: true },
-    ctaUrl: { type: "text" },
-    secondaryLabel: { type: "text", contentEditable: true },
-    secondaryUrl: { type: "text" },
-    variant: {
-      type: "select",
-      label: "Background Variant",
-      options: [
-        { label: "Primary Color", value: "primary" },
-        { label: "Dark", value: "dark" },
-        { label: "Gradient", value: "gradient" }
-      ]
-    },
-    padding,
-    sectionStyle,
-    backgroundColor
+    ...contentFields,
+    styles: bannerCtaStylesField
   },
   defaultProps: {
     heading: "Ready to transform your workflow?",
     description: "Join thousands of teams already using our platform to ship faster and smarter.",
-    ctaLabel: "Get started free",
-    ctaUrl: "#",
-    secondaryLabel: "Talk to sales",
-    secondaryUrl: "#",
-    variant: "primary",
-    padding: paddingDefaults
+    buttons: [
+      { label: "Get started free", url: "#", variant: "secondary" },
+      { label: "Talk to sales", url: "#", variant: "outline" }
+    ],
+    styles: {
+      ...createStylesDefaults(),
+      visualVariant: "primary"
+    }
   },
   render: BannerCta
 };

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

@@ -1,10 +1,12 @@
 import { CompoundContainerProps } from "@/components/puck-base/container";
 import { CompoundContentProps } from "@/components/puck-base/content";
 export interface CtaProps extends CompoundContentProps {
-    padding?: CompoundContainerProps["padding"];
-    sectionStyle?: CompoundContainerProps["sectionStyle"];
-    backgroundColor?: string;
     layout?: "contained" | "full-bleed";
     displayText?: string;
+    styles?: {
+        padding?: CompoundContainerProps["padding"];
+        sectionStyle?: CompoundContainerProps["sectionStyle"];
+        backgroundColor?: string;
+    };
 }
-export declare const Cta: ({ padding, sectionStyle, backgroundColor, layout, badge, heading, description, buttons, displayText, }: CtaProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Cta: ({ layout, badge, heading, description, buttons, displayText, styles, }: CtaProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/puck-block/cta-sections/cta-1/cta.js

@@ -3,21 +3,19 @@ import { cn } from "../../../../utils/css-utils.js";
 import { CompoundContainer } from "../../../puck-base/container.js";
 import { CompoundContent } from "../../../puck-base/content.js";
 const Cta = ({
-  padding,
-  sectionStyle,
-  backgroundColor,
   layout,
   badge,
   heading,
   description,
   buttons,
-  displayText
+  displayText,
+  styles
 }) => /* @__PURE__ */ jsxs(
   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,
     className: cn({ "bg-muted": layout === "full-bleed" }),
     children: [
       /* @__PURE__ */ jsx(

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

@@ -1,5 +1,6 @@
-import { paddingDefaults, backgroundColor, sectionStyle, padding, contentFields } from "../../../puck-base/core/fields.js";
+import { contentFields } from "../../../puck-base/core/fields.js";
 import { Cta } from "./cta.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
 const conf = {
   fields: {
     ...contentFields,
@@ -7,16 +8,11 @@ const conf = {
     layout: {
       type: "radio",
       options: [
-        {
-          label: "contained",
-          value: "contained"
-        },
+        { label: "contained", value: "contained" },
         { label: "full bleed", value: "full-bleed" }
       ]
     },
-    padding,
-    sectionStyle,
-    backgroundColor
+    styles: createStylesField()
   },
   defaultProps: {
     heading: "Try our platform today!",
@@ -39,7 +35,7 @@ const conf = {
       }
     ],
     layout: "contained",
-    padding: paddingDefaults
+    styles: createStylesDefaults()
   },
   render: Cta
 };

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

@@ -1,14 +1,14 @@
 import { CompoundContainerProps } from "@/components/puck-base/container";
 import { CompoundContentProps } from "@/components/puck-base/content";
 export interface GradientCtaProps extends CompoundContentProps {
-    padding?: CompoundContainerProps["padding"];
-    sectionStyle?: CompoundContainerProps["sectionStyle"];
-    backgroundColor?: string;
-    gradientFrom?: string;
-    gradientTo?: string;
-    /** Full CSS background value — when set, overrides gradientFrom/To */
-    backgroundCSS?: string;
-    /** Text color override — auto-detected from gradient darkness when omitted */
-    textColor?: string;
+    styles?: {
+        padding?: CompoundContainerProps["padding"];
+        sectionStyle?: CompoundContainerProps["sectionStyle"];
+        backgroundColor?: string;
+        gradientFrom?: string;
+        gradientTo?: string;
+        backgroundCSS?: string;
+        textColor?: string;
+    };
 }
-export declare const GradientCta: ({ padding, sectionStyle, backgroundColor, badge, heading, description, buttons, gradientFrom, gradientTo, backgroundCSS, textColor, }: GradientCtaProps) => import("react/jsx-runtime").JSX.Element;
+export declare const GradientCta: ({ badge, heading, description, buttons, styles, }: GradientCtaProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/puck-block/cta-sections/gradient-cta-1/gradient-cta.js

@@ -2,37 +2,41 @@ import { jsx } from "react/jsx-runtime";
 import { CompoundContainer } from "../../../puck-base/container.js";
 import { CompoundContent } from "../../../puck-base/content.js";
 const GradientCta = ({
-  padding,
-  sectionStyle,
-  backgroundColor,
   badge,
   heading,
   description,
   buttons,
-  gradientFrom = "oklch(0.55 0.2 260)",
-  gradientTo = "oklch(0.55 0.2 330)",
-  backgroundCSS,
-  textColor
+  styles
 }) => {
-  const bg = backgroundCSS || `linear-gradient(135deg, ${gradientFrom}, ${gradientTo})`;
-  const color = textColor || (backgroundCSS ? void 0 : "white");
-  return /* @__PURE__ */ jsx(CompoundContainer, { padding, sectionStyle, backgroundColor, children: /* @__PURE__ */ jsx(
-    "div",
+  const gradientFrom = (styles == null ? void 0 : styles.gradientFrom) ?? "var(--primary)";
+  const gradientTo = (styles == null ? void 0 : styles.gradientTo) ?? "var(--chart-2)";
+  const bg = (styles == null ? void 0 : styles.backgroundCSS) || `linear-gradient(135deg, ${gradientFrom}, ${gradientTo})`;
+  const color = (styles == null ? void 0 : styles.textColor) || ((styles == null ? void 0 : styles.backgroundCSS) ? void 0 : "var(--primary-foreground)");
+  return /* @__PURE__ */ jsx(
+    CompoundContainer,
     {
-      className: "rounded-2xl p-8 text-center md:p-14",
-      style: { background: bg, color },
+      padding: styles == null ? void 0 : styles.padding,
+      sectionStyle: styles == null ? void 0 : styles.sectionStyle,
+      backgroundColor: styles == null ? void 0 : styles.backgroundColor,
       children: /* @__PURE__ */ jsx(
-        CompoundContent,
+        "div",
         {
-          badge,
-          heading,
-          description,
-          buttons,
-          alignContent: "center"
+          className: "rounded-2xl p-8 text-center md:p-14",
+          style: { background: bg, color },
+          children: /* @__PURE__ */ jsx(
+            CompoundContent,
+            {
+              badge,
+              heading,
+              description,
+              buttons,
+              alignContent: "center"
+            }
+          )
         }
       )
     }
-  ) });
+  );
 };
 export {
   GradientCta

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

@@ -1,33 +1,38 @@
-import { paddingDefaults, backgroundColor, sectionStyle, padding, contentFields } from "../../../puck-base/core/fields.js";
+import { contentFields } from "../../../puck-base/core/fields.js";
 import { GradientCta } from "./gradient-cta.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
+const gradientCtaStylesField = createStylesField({
+  gradientFrom: {
+    type: "text",
+    label: "Gradient Start",
+    ai: {
+      instructions: "Use a CSS variable from the template theme, e.g. 'var(--primary)', 'var(--chart-1)'. Also accepts oklch format."
+    }
+  },
+  gradientTo: {
+    type: "text",
+    label: "Gradient End",
+    ai: {
+      instructions: "Use a CSS variable from the template theme, e.g. 'var(--chart-2)', 'var(--accent)'. Also accepts oklch format."
+    }
+  },
+  backgroundCSS: {
+    type: "textarea",
+    label: "Full CSS Background",
+    ai: {
+      instructions: "Full CSS background value (radial-gradient, multi-layer). Overrides gradientFrom/To."
+    }
+  },
+  textColor: {
+    type: "text",
+    label: "Text Color",
+    ai: { instructions: "Override text color, e.g. #333 or white" }
+  }
+});
 const conf = {
   fields: {
     ...contentFields,
-    gradientFrom: {
-      type: "text",
-      label: "Gradient Start",
-      ai: { instructions: "oklch format" }
-    },
-    gradientTo: {
-      type: "text",
-      label: "Gradient End",
-      ai: { instructions: "oklch format" }
-    },
-    backgroundCSS: {
-      type: "textarea",
-      label: "Full CSS Background",
-      ai: {
-        instructions: "Full CSS background value (radial-gradient, multi-layer). Overrides gradientFrom/To."
-      }
-    },
-    textColor: {
-      type: "text",
-      label: "Text Color",
-      ai: { instructions: "Override text color, e.g. #333 or white" }
-    },
-    padding,
-    sectionStyle,
-    backgroundColor
+    styles: gradientCtaStylesField
   },
   defaultProps: {
     heading: "Ready to get started?",
@@ -35,9 +40,11 @@ const conf = {
     buttons: [
       { label: "Start Free Trial", icon: "move-right", variant: "default" }
     ],
-    gradientFrom: "oklch(0.55 0.2 260)",
-    gradientTo: "oklch(0.55 0.2 330)",
-    padding: paddingDefaults
+    styles: {
+      ...createStylesDefaults(),
+      gradientFrom: "var(--primary)",
+      gradientTo: "var(--chart-2)"
+    }
   },
   render: GradientCta
 };

package/dist/components/puck-block/cta-sections/newsletter-signup-1/index.js

@@ -1,19 +1,27 @@
-import { paddingDefaults, padding } from "../../../puck-base/core/fields.js";
 import { NewsletterSignup } from "./newsletter-signup.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
 const conf = {
   fields: {
     heading: { type: "text", contentEditable: true },
     description: { type: "textarea", contentEditable: true },
-    buttonLabel: { type: "text" },
+    buttons: {
+      type: "array",
+      max: 1,
+      getItemSummary: (item, i = 0) => item.label || `Button ${i + 1}`,
+      arrayFields: {
+        label: { type: "text" }
+      },
+      defaultItemProps: { label: "Subscribe" }
+    },
     placeholder: { type: "text" },
-    padding
+    styles: createStylesField()
   },
   defaultProps: {
     heading: "Stay in the loop",
     description: "Get the latest updates delivered to your inbox.",
-    buttonLabel: "Subscribe",
+    buttons: [{ label: "Subscribe" }],
     placeholder: "Enter your email",
-    padding: paddingDefaults
+    styles: createStylesDefaults()
   },
   render: NewsletterSignup
 };

package/dist/components/puck-block/cta-sections/newsletter-signup-1/newsletter-signup.d.ts

@@ -1,9 +1,13 @@
 import { CompoundContainerProps } from "@/components/puck-base/container";
 export interface NewsletterSignupProps {
-    padding?: CompoundContainerProps["padding"];
     heading?: string;
     description?: string;
-    buttonLabel?: string;
+    buttons?: Array<{
+        label: string;
+    }>;
     placeholder?: string;
+    styles?: {
+        padding?: CompoundContainerProps["padding"];
+    };
 }
-export declare const NewsletterSignup: ({ padding, heading, description, buttonLabel, placeholder, }: NewsletterSignupProps) => import("react/jsx-runtime").JSX.Element;
+export declare const NewsletterSignup: ({ heading, description, buttons, placeholder, styles, }: NewsletterSignupProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/puck-block/cta-sections/newsletter-signup-1/newsletter-signup.js

@@ -1,40 +1,44 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CompoundContainer } from "../../../puck-base/container.js";
+import { CompoundButton } from "../../../puck-base/button.js";
 const NewsletterSignup = ({
-  padding,
   heading,
   description,
-  buttonLabel = "Subscribe",
-  placeholder = "Enter your email"
-}) => /* @__PURE__ */ jsx(CompoundContainer, { padding, sectionStyle: "muted", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-xl text-center", children: [
-  heading && /* @__PURE__ */ jsx("h2", { className: "text-foreground font-serif mb-2 text-2xl font-bold tracking-tight md:text-3xl", children: heading }),
-  description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mb-6", children: description }),
-  /* @__PURE__ */ jsxs(
-    "form",
-    {
-      className: "mx-auto flex max-w-md gap-2",
-      onSubmit: (e) => e.preventDefault(),
-      children: [
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            type: "email",
-            placeholder,
-            className: "border-border bg-background text-foreground placeholder:text-muted-foreground focus:ring-primary flex-1 rounded-lg border px-4 py-2.5 focus:ring-2 focus:outline-none"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "submit",
-            className: "bg-primary text-primary-foreground rounded-lg px-6 py-2.5 font-medium transition-opacity hover:opacity-90",
-            children: buttonLabel
-          }
-        )
-      ]
-    }
-  )
-] }) });
+  buttons = [],
+  placeholder = "Enter your email",
+  styles
+}) => {
+  var _a;
+  return /* @__PURE__ */ jsx(CompoundContainer, { padding: styles == null ? void 0 : styles.padding, sectionStyle: "muted", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-xl text-center", children: [
+    heading && /* @__PURE__ */ jsx("h2", { className: "text-foreground font-serif mb-2 text-2xl font-bold tracking-tight md:text-3xl", children: heading }),
+    description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mb-6", children: description }),
+    /* @__PURE__ */ jsxs(
+      "form",
+      {
+        className: "mx-auto flex max-w-md gap-2",
+        onSubmit: (e) => e.preventDefault(),
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "email",
+              placeholder,
+              className: "border-border bg-background text-foreground placeholder:text-muted-foreground focus:ring-primary flex-1 rounded-lg border px-4 py-2.5 focus:ring-2 focus:outline-none"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            CompoundButton,
+            {
+              label: ((_a = buttons[0]) == null ? void 0 : _a.label) ?? "Subscribe",
+              variant: "default",
+              type: "submit"
+            }
+          )
+        ]
+      }
+    )
+  ] }) });
+};
 export {
   NewsletterSignup
 };

package/dist/components/puck-block/cta-sections/promo-section-1/index.js

@@ -1,5 +1,6 @@
-import { paddingDefaults, backgroundColor, sectionStyle, padding, buttons, badge, image } from "../../../puck-base/core/fields.js";
+import { buttons, badge, image } from "../../../puck-base/core/fields.js";
 import { PromoSection } from "./promo-section.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
 const conf = {
   fields: {
     heading: { type: "text", contentEditable: true },
@@ -16,9 +17,7 @@ const conf = {
     },
     badge,
     buttons,
-    padding,
-    sectionStyle,
-    backgroundColor
+    styles: createStylesField()
   },
   defaultProps: {
     heading: "Summer Sale — Up to 50% Off",
@@ -37,7 +36,7 @@ const conf = {
         icon: "none"
       }
     ],
-    padding: paddingDefaults
+    styles: createStylesDefaults()
   },
   render: PromoSection
 };

package/dist/components/puck-block/cta-sections/promo-section-1/promo-section.d.ts

@@ -2,9 +2,6 @@ import { CompoundContainerProps } from "@/components/puck-base/container";
 import { CompoundBadgeProps } from "@/components/puck-base/badge";
 import { CompoundButtonProps } from "@/components/puck-base/button";
 export interface PromoSectionProps {
-    padding?: CompoundContainerProps["padding"];
-    sectionStyle?: CompoundContainerProps["sectionStyle"];
-    backgroundColor?: string;
     heading: string;
     description?: string;
     image?: {
@@ -14,5 +11,10 @@ export interface PromoSectionProps {
     imagePosition?: "left" | "right" | "background";
     buttons?: CompoundButtonProps[];
     badge?: CompoundBadgeProps;
+    styles?: {
+        padding?: CompoundContainerProps["padding"];
+        sectionStyle?: CompoundContainerProps["sectionStyle"];
+        backgroundColor?: string;
+    };
 }
-export declare const PromoSection: ({ padding, sectionStyle, backgroundColor, heading, description, image, imagePosition, buttons, badge, }: PromoSectionProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PromoSection: ({ heading, description, image, imagePosition, buttons, badge, styles, }: PromoSectionProps) => import("react/jsx-runtime").JSX.Element;