dune-react 0.0.9 → 0.0.10

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

@@ -6,32 +6,39 @@ const SPEED_DURATION = {
   fast: "15s"
 };
 const Marquee = ({
-  padding,
-  sectionStyle,
-  backgroundColor,
   items = [],
-  speed = "normal",
-  variant = "default"
+  styles
 }) => {
-  const textClass = variant === "outline" ? "text-transparent [-webkit-text-stroke:1px_currentColor]" : variant === "muted" ? "text-muted-foreground/30" : "text-foreground";
-  return /* @__PURE__ */ jsx(CompoundContainer, { padding, sectionStyle, backgroundColor, children: /* @__PURE__ */ jsx("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsx(
-    "div",
+  const normalized = items.map((v) => typeof v === "string" ? v : (v == null ? void 0 : v.text) ?? "");
+  const speed = (styles == null ? void 0 : styles.speed) ?? "normal";
+  const tone = (styles == null ? void 0 : styles.tone) ?? "default";
+  const textClass = tone === "outline" ? "text-transparent [-webkit-text-stroke:1px_currentColor]" : tone === "muted" ? "text-muted-foreground/30" : "text-foreground";
+  return /* @__PURE__ */ jsx(
+    CompoundContainer,
     {
-      className: "flex w-max animate-[marquee_var(--marquee-speed)_linear_infinite] items-center gap-8",
-      style: { "--marquee-speed": SPEED_DURATION[speed] },
-      children: [...items, ...items].map((item, i) => /* @__PURE__ */ jsxs(
-        "span",
+      padding: styles == null ? void 0 : styles.padding,
+      sectionStyle: styles == null ? void 0 : styles.sectionStyle,
+      backgroundColor: styles == null ? void 0 : styles.backgroundColor,
+      children: /* @__PURE__ */ jsx("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsx(
+        "div",
         {
-          className: `font-serif text-4xl font-bold whitespace-nowrap md:text-6xl ${textClass}`,
-          children: [
-            item.text,
-            /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/30 mx-4", children: "•" })
-          ]
-        },
-        i
-      ))
+          className: "flex w-max animate-[marquee_var(--marquee-speed)_linear_infinite] items-center gap-8",
+          style: { "--marquee-speed": SPEED_DURATION[speed] },
+          children: [...normalized, ...normalized].map((item, i) => /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: `font-serif text-4xl font-bold whitespace-nowrap md:text-6xl ${textClass}`,
+              children: [
+                item,
+                /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/30 mx-4", children: "•" })
+              ]
+            },
+            i
+          ))
+        }
+      ) })
     }
-  ) }) });
+  );
 };
 export {
   Marquee

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

@@ -0,0 +1,22 @@
+type BannerVariant = "announcement-banner-1" | "marquee-1";
+type BannerPadding = {
+    top?: "none" | "small" | "medium" | "large";
+    bottom?: "none" | "small" | "medium" | "large";
+};
+type BannerSectionStyle = "default" | "dark" | "muted" | "inverted" | "custom";
+type BannerSectionProps = {
+    variant?: BannerVariant;
+    items?: string[];
+    linkLabel?: string;
+    linkUrl?: string;
+    styles?: {
+        padding?: BannerPadding;
+        sectionStyle?: BannerSectionStyle;
+        backgroundColor?: string;
+        textColor?: string;
+        align?: "left" | "center" | "right";
+        size?: "small" | "default";
+        speed?: "slow" | "normal" | "fast";
+        tone?: "default" | "outline" | "muted";
+    };
+};

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

@@ -21,9 +21,18 @@ export interface ContactForm {
     };
 }
 export interface ContactUsProps extends CompoundContentProps {
-    padding?: CompoundContainerProps["padding"];
-    sectionStyle?: CompoundContainerProps["sectionStyle"];
-    backgroundColor?: string;
-    form?: ContactForm;
+    fields?: ContactFormField[];
+    action?: string;
+    method?: "get" | "post" | "dialog";
+    formTitle?: string;
+    submitLabel?: string;
+    submitVariant?: string;
+    submitSize?: string;
+    submitIcon?: string;
+    styles?: {
+        padding?: CompoundContainerProps["padding"];
+        sectionStyle?: CompoundContainerProps["sectionStyle"];
+        backgroundColor?: string;
+    };
 }
 export declare const ContactUs: (props: ContactUsProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/puck-block/contact-sections/contact-us-1/contact-us.js

@@ -18,9 +18,9 @@ const DEFAULT_FIELDS = [
   { label: "Message", name: "message", type: "textarea", required: true }
 ];
 const ContactUs = (props) => {
-  var _a, _b, _c, _d, _e, _f;
+  var _a, _b, _c, _d;
   const { isEditor: isEditorMode, siteId, domain } = useEditorContext();
-  const formFields = ((_b = (_a = props.form) == null ? void 0 : _a.fields) == null ? void 0 : _b.length) ? props.form.fields : DEFAULT_FIELDS;
+  const formFields = ((_a = props.fields) == null ? void 0 : _a.length) ? props.fields : DEFAULT_FIELDS;
   const [values, setValues] = useState({});
   const [submitting, setSubmitting] = useState(false);
   const setValue = (name, value) => setValues((prev) => ({ ...prev, [name]: value }));
@@ -46,114 +46,123 @@ const ContactUs = (props) => {
       setSubmitting(false);
     }
   };
-  const submitLabel = ((_d = (_c = props.form) == null ? void 0 : _c.button) == null ? void 0 : _d.label) ?? "Send Message";
-  const submitIcon = ((_f = (_e = props.form) == null ? void 0 : _e.button) == null ? void 0 : _f.icon) ?? "send";
-  return /* @__PURE__ */ jsx(CompoundContainer, { padding: props.padding, sectionStyle: props.sectionStyle, backgroundColor: props.backgroundColor, className: props.className, children: /* @__PURE__ */ jsxs("div", { className: "grid lg:grid-cols-2 gap-10", children: [
-    /* @__PURE__ */ jsx(
-      CompoundContent,
-      {
-        badge: props.badge,
-        heading: props.heading,
-        description: props.description,
-        features: props.features,
-        buttons: props.buttons,
-        alignContent: "start",
-        spacing: "normal"
-      }
-    ),
-    /* @__PURE__ */ jsx("div", { className: "justify-center flex items-center", children: /* @__PURE__ */ jsxs(
-      "form",
-      {
-        className: "rounded-md max-w-md w-full flex flex-col border p-8 gap-4",
-        onSubmit: handleSubmit,
-        children: [
-          formFields.reduce((rows, field, i) => {
-            var _a2, _b2, _c2;
-            const fieldEl = /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
-              /* @__PURE__ */ jsxs(Label, { htmlFor: `contact-${field.name}`, children: [
-                field.label,
-                field.required ? " *" : ""
-              ] }),
-              field.type === "textarea" ? /* @__PURE__ */ jsx(
-                Textarea,
-                {
-                  id: `contact-${field.name}`,
-                  value: values[field.name] ?? "",
-                  onChange: (e) => setValue(field.name, e.target.value),
-                  rows: 4,
-                  required: field.required
+  const submitLabel = props.submitLabel ?? "Send Message";
+  const submitIcon = props.submitIcon ?? "send";
+  return /* @__PURE__ */ jsx(
+    CompoundContainer,
+    {
+      padding: (_b = props.styles) == null ? void 0 : _b.padding,
+      sectionStyle: (_c = props.styles) == null ? void 0 : _c.sectionStyle,
+      backgroundColor: (_d = props.styles) == null ? void 0 : _d.backgroundColor,
+      className: props.className,
+      children: /* @__PURE__ */ jsxs("div", { className: "grid lg:grid-cols-2 gap-10", children: [
+        /* @__PURE__ */ jsx(
+          CompoundContent,
+          {
+            badge: props.badge,
+            heading: props.heading,
+            description: props.description,
+            features: props.features,
+            buttons: props.buttons,
+            alignContent: "start",
+            spacing: "normal"
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "justify-center flex items-center", children: /* @__PURE__ */ jsxs(
+          "form",
+          {
+            className: "rounded-md max-w-md w-full flex flex-col border p-8 gap-4",
+            onSubmit: handleSubmit,
+            children: [
+              formFields.reduce((rows, field, i) => {
+                var _a2, _b2, _c2;
+                const fieldEl = /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+                  /* @__PURE__ */ jsxs(Label, { htmlFor: `contact-${field.name}`, children: [
+                    field.label,
+                    field.required ? " *" : ""
+                  ] }),
+                  field.type === "textarea" ? /* @__PURE__ */ jsx(
+                    Textarea,
+                    {
+                      id: `contact-${field.name}`,
+                      value: values[field.name] ?? "",
+                      onChange: (e) => setValue(field.name, e.target.value),
+                      rows: 4,
+                      required: field.required
+                    }
+                  ) : field.type === "select" ? /* @__PURE__ */ jsxs(
+                    "select",
+                    {
+                      id: `contact-${field.name}`,
+                      value: values[field.name] ?? "",
+                      onChange: (e) => setValue(field.name, e.target.value),
+                      className: "border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+                      required: field.required,
+                      children: [
+                        /* @__PURE__ */ jsx("option", { value: "", children: "Select..." }),
+                        (_a2 = field.options) == null ? void 0 : _a2.map((opt) => /* @__PURE__ */ jsx("option", { value: opt, children: opt }, opt))
+                      ]
+                    }
+                  ) : /* @__PURE__ */ jsx(
+                    Input,
+                    {
+                      id: `contact-${field.name}`,
+                      type: field.type,
+                      value: values[field.name] ?? "",
+                      onChange: (e) => setValue(field.name, e.target.value),
+                      required: field.required
+                    }
+                  )
+                ] }, field.name);
+                if (field.half && ((_b2 = formFields[i + 1]) == null ? void 0 : _b2.half)) {
+                  return rows;
                 }
-              ) : field.type === "select" ? /* @__PURE__ */ jsxs(
-                "select",
-                {
-                  id: `contact-${field.name}`,
-                  value: values[field.name] ?? "",
-                  onChange: (e) => setValue(field.name, e.target.value),
-                  className: "border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
-                  required: field.required,
-                  children: [
-                    /* @__PURE__ */ jsx("option", { value: "", children: "Select..." }),
-                    (_a2 = field.options) == null ? void 0 : _a2.map((opt) => /* @__PURE__ */ jsx("option", { value: opt, children: opt }, opt))
-                  ]
+                if (field.half && i > 0 && ((_c2 = formFields[i - 1]) == null ? void 0 : _c2.half)) {
+                  const prevField = formFields[i - 1];
+                  const prevEl = /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+                    /* @__PURE__ */ jsxs(Label, { htmlFor: `contact-${prevField.name}`, children: [
+                      prevField.label,
+                      prevField.required ? " *" : ""
+                    ] }),
+                    /* @__PURE__ */ jsx(
+                      Input,
+                      {
+                        id: `contact-${prevField.name}`,
+                        type: prevField.type,
+                        value: values[prevField.name] ?? "",
+                        onChange: (e) => setValue(prevField.name, e.target.value),
+                        required: prevField.required
+                      }
+                    )
+                  ] }, prevField.name);
+                  rows.push(
+                    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+                      prevEl,
+                      fieldEl
+                    ] }, `row-${prevField.name}-${field.name}`)
+                  );
+                  return rows;
                 }
-              ) : /* @__PURE__ */ jsx(
-                Input,
+                rows.push(fieldEl);
+                return rows;
+              }, []),
+              /* @__PURE__ */ jsx(
+                CompoundButton,
                 {
-                  id: `contact-${field.name}`,
-                  type: field.type,
-                  value: values[field.name] ?? "",
-                  onChange: (e) => setValue(field.name, e.target.value),
-                  required: field.required
+                  label: submitting ? "Sending..." : submitLabel,
+                  variant: props.submitVariant ?? "default",
+                  size: props.submitSize ?? "default",
+                  icon: submitting ? "loader" : submitIcon,
+                  type: "submit",
+                  disabled: submitting
                 }
               )
-            ] }, field.name);
-            if (field.half && ((_b2 = formFields[i + 1]) == null ? void 0 : _b2.half)) {
-              return rows;
-            }
-            if (field.half && i > 0 && ((_c2 = formFields[i - 1]) == null ? void 0 : _c2.half)) {
-              const prevField = formFields[i - 1];
-              const prevEl = /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
-                /* @__PURE__ */ jsxs(Label, { htmlFor: `contact-${prevField.name}`, children: [
-                  prevField.label,
-                  prevField.required ? " *" : ""
-                ] }),
-                /* @__PURE__ */ jsx(
-                  Input,
-                  {
-                    id: `contact-${prevField.name}`,
-                    type: prevField.type,
-                    value: values[prevField.name] ?? "",
-                    onChange: (e) => setValue(prevField.name, e.target.value),
-                    required: prevField.required
-                  }
-                )
-              ] }, prevField.name);
-              rows.push(
-                /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
-                  prevEl,
-                  fieldEl
-                ] }, `row-${prevField.name}-${field.name}`)
-              );
-              return rows;
-            }
-            rows.push(fieldEl);
-            return rows;
-          }, []),
-          /* @__PURE__ */ jsx(
-            CompoundButton,
-            {
-              label: submitting ? "Sending..." : submitLabel,
-              variant: "default",
-              size: "default",
-              icon: submitting ? "loader" : submitIcon,
-              type: "submit",
-              disabled: submitting
-            }
-          )
-        ]
-      }
-    ) })
-  ] }) });
+            ]
+          }
+        ) })
+      ] })
+    }
+  );
 };
 export {
   ContactUs

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

@@ -1,12 +1,82 @@
-import { paddingDefaults, formDefaults, backgroundColor, sectionStyle, padding, form, contentFieldsWithFeatures } from "../../../puck-base/core/fields.js";
+import { icon, contentFieldsWithFeatures } from "../../../puck-base/core/fields.js";
 import { ContactUs } from "./contact-us.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
+const fieldTypeOptions = [
+  "text",
+  "email",
+  "tel",
+  "number",
+  "date",
+  "url",
+  "file",
+  "textarea",
+  "select"
+].map((t) => ({ label: t, value: t }));
 const conf = {
   fields: {
     ...contentFieldsWithFeatures,
-    form,
-    padding,
-    sectionStyle,
-    backgroundColor
+    formTitle: { type: "text", contentEditable: true },
+    fields: {
+      type: "array",
+      max: 10,
+      getItemSummary: (item, i = 0) => item.label || `Field ${i + 1}`,
+      arrayFields: {
+        label: { type: "text", contentEditable: true },
+        name: { type: "text" },
+        type: { type: "select", options: fieldTypeOptions },
+        required: {
+          type: "radio",
+          options: [
+            { label: "Yes", value: true },
+            { label: "No", value: false }
+          ]
+        },
+        half: {
+          type: "radio",
+          options: [
+            { label: "Yes", value: true },
+            { label: "No", value: false }
+          ]
+        }
+      },
+      defaultItemProps: {
+        label: "Field",
+        name: "field",
+        type: "text"
+      }
+    },
+    action: { type: "text", label: "Submit URL" },
+    method: {
+      type: "select",
+      label: "Submit Method",
+      options: [
+        { label: "GET", value: "get" },
+        { label: "POST", value: "post" },
+        { label: "Dialog", value: "dialog" }
+      ]
+    },
+    submitLabel: { type: "text" },
+    submitVariant: {
+      type: "select",
+      options: [
+        { label: "Primary", value: "default" },
+        { label: "Secondary", value: "secondary" },
+        { label: "Outline", value: "outline" },
+        { label: "Ghost", value: "ghost" },
+        { label: "Link", value: "link" },
+        { label: "Destructive", value: "destructive" }
+      ]
+    },
+    submitSize: {
+      type: "select",
+      options: [
+        { label: "Default", value: "default" },
+        { label: "Small", value: "sm" },
+        { label: "Large", value: "lg" }
+      ]
+    },
+    submitIcon: icon,
+    styles: createStylesField()
   },
   defaultProps: {
     badge: {
@@ -24,8 +94,18 @@ const conf = {
         description: "We've made it easy to use and understand."
       })
     ),
-    form: formDefaults,
-    padding: paddingDefaults
+    fields: [
+      { label: "Name", name: "name", type: "text", required: true },
+      { label: "Email", name: "email", type: "email", required: true },
+      { label: "Phone", name: "phone", type: "tel" },
+      { label: "Company", name: "company", type: "text" },
+      { label: "Message", name: "message", type: "textarea", required: true }
+    ],
+    submitLabel: "Send Message",
+    submitVariant: "default",
+    submitSize: "default",
+    submitIcon: "send",
+    styles: createStylesDefaults()
   },
   render: ContactUs
 };

package/dist/components/puck-block/contact-sections/contact-us-2/contact-us-2.d.ts

@@ -8,19 +8,23 @@ export interface ContactUs2Button {
 export interface ContactUs2Props {
     heading?: string;
     description?: string;
-    nameLabel?: string;
-    emailLabel?: string;
-    phoneLabel?: string;
-    companyLabel?: string;
-    messageLabel?: string;
-    button?: ContactUs2Button;
+    fields?: Array<{
+        label: string;
+        name: string;
+    }>;
+    submitLabel?: string;
+    submitVariant?: string;
+    submitSize?: string;
+    submitIcon?: string;
     image?: {
         src: string;
         alt: string;
     };
-    imagePosition?: "start" | "end";
-    padding?: CompoundContainerProps["padding"];
-    sectionStyle?: CompoundContainerProps["sectionStyle"];
-    backgroundColor?: string;
+    styles?: {
+        imagePosition?: "start" | "end";
+        padding?: CompoundContainerProps["padding"];
+        sectionStyle?: CompoundContainerProps["sectionStyle"];
+        backgroundColor?: string;
+    };
 }
-export declare const ContactUs2: ({ heading, description, nameLabel, emailLabel, phoneLabel, companyLabel, messageLabel, button, image, imagePosition, padding, sectionStyle, backgroundColor, }: ContactUs2Props) => import("react/jsx-runtime").JSX.Element;
+export declare const ContactUs2: ({ heading, description, fields, submitLabel, submitVariant, submitSize, submitIcon, image, styles, }: ContactUs2Props) => import("react/jsx-runtime").JSX.Element;

package/dist/components/puck-block/contact-sections/contact-us-2/contact-us-2.js

@@ -14,18 +14,23 @@ import { submitFormLead } from "../api/form-leads.js";
 const ContactUs2 = ({
   heading,
   description,
-  nameLabel,
-  emailLabel,
-  phoneLabel = "Phone",
-  companyLabel = "Company",
-  messageLabel,
-  button,
+  fields = [],
+  submitLabel,
+  submitVariant,
+  submitSize,
+  submitIcon,
   image,
-  imagePosition = "end",
-  padding,
-  sectionStyle,
-  backgroundColor
+  styles
 }) => {
+  var _a, _b, _c, _d, _e;
+  const labels = {
+    name: ((_a = fields.find((field) => field.name === "name")) == null ? void 0 : _a.label) ?? "Your Name",
+    email: ((_b = fields.find((field) => field.name === "email")) == null ? void 0 : _b.label) ?? "Email Address",
+    phone: ((_c = fields.find((field) => field.name === "phone")) == null ? void 0 : _c.label) ?? "Phone",
+    company: ((_d = fields.find((field) => field.name === "company")) == null ? void 0 : _d.label) ?? "Company",
+    message: ((_e = fields.find((field) => field.name === "message")) == null ? void 0 : _e.label) ?? "Tell us about your fitness goals"
+  };
+  const imagePosition = (styles == null ? void 0 : styles.imagePosition) ?? "end";
   const { isEditor: isEditorMode, siteId, domain } = useEditorContext();
   const [name, setName] = useState("");
   const [email, setEmail] = useState("");
@@ -71,7 +76,7 @@ const ContactUs2 = ({
           {
             htmlFor: "contact2-name",
             className: "text-sm font-medium text-foreground",
-            children: nameLabel
+            children: labels.name
           }
         ),
         /* @__PURE__ */ jsx(
@@ -93,7 +98,7 @@ const ContactUs2 = ({
           {
             htmlFor: "contact2-email",
             className: "text-sm font-medium text-foreground",
-            children: emailLabel
+            children: labels.email
           }
         ),
         /* @__PURE__ */ jsx(
@@ -115,7 +120,7 @@ const ContactUs2 = ({
           {
             htmlFor: "contact2-phone",
             className: "text-sm font-medium text-foreground",
-            children: phoneLabel
+            children: labels.phone
           }
         ),
         /* @__PURE__ */ jsx(
@@ -136,7 +141,7 @@ const ContactUs2 = ({
           {
             htmlFor: "contact2-company",
             className: "text-sm font-medium text-foreground",
-            children: companyLabel
+            children: labels.company
           }
         ),
         /* @__PURE__ */ jsx(
@@ -157,7 +162,7 @@ const ContactUs2 = ({
           {
             htmlFor: "contact2-message",
             className: "text-sm font-medium text-foreground",
-            children: messageLabel
+            children: labels.message
           }
         ),
         /* @__PURE__ */ jsx(
@@ -175,10 +180,10 @@ const ContactUs2 = ({
       /* @__PURE__ */ jsx(
         CompoundButton,
         {
-          label: submitting ? "Sending..." : (button == null ? void 0 : button.label) ?? "Send Message",
-          variant: (button == null ? void 0 : button.variant) ?? "default",
-          size: (button == null ? void 0 : button.size) ?? "default",
-          icon: submitting ? "loader" : (button == null ? void 0 : button.icon) ?? "none",
+          label: submitting ? "Sending..." : submitLabel ?? "Send Message",
+          variant: submitVariant ?? "default",
+          size: submitSize ?? "default",
+          icon: submitting ? "loader" : submitIcon ?? "none",
           type: "submit",
           disabled: submitting
         }
@@ -205,9 +210,9 @@ const ContactUs2 = ({
   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",
         {