dune-react 0.0.20 → 0.0.22

package/dist/components/puck-block/header-sections/drawer-navbar/drawer-navbar.js

@@ -4,26 +4,130 @@ import { useState } from "react";
 import { Button } from "../../../shadcn/button.js";
 import { CompoundImage } from "../../../puck-base/image.js";
 import { AnimatePresence, motion } from "framer-motion";
+import { cn } from "../../../../utils/css-utils.js";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
 const DrawerNavbar = (props) => {
-  const { logo, navLinks, buttons } = { ...DrawerNavbarDefaults, ...props };
+  const { logo, navLinks, buttons, styles } = {
+    ...DrawerNavbarDefaults,
+    ...props
+  };
+  const {
+    className: sectionClassName,
+    style: sectionStyle,
+    css
+  } = styles ?? {};
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
-  return /* @__PURE__ */ jsxs("section", { id: "relume", className: "z-[999] grid w-full grid-cols-[1fr_max-content_1fr] items-center justify-between border-b border-border-primary bg-background-primary px-[5%] md:min-h-18", children: [
-    /* @__PURE__ */ jsx("button", { className: "flex size-12 flex-col justify-center lg:hidden", onClick: () => setIsMobileMenuOpen((prev) => !prev), children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx("span", { className: "my-[3px] h-0.5 w-6 bg-black lg:hidden" }, i)) }),
-    /* @__PURE__ */ jsxs(AnimatePresence, { children: [
-      /* @__PURE__ */ jsxs(motion.div, { initial: "closed", animate: isMobileMenuOpen ? "open" : "closed", exit: "closed", variants: { closed: { x: "-100%", opacity: 1, transition: { type: "spring", duration: 0.6, bounce: 0 }, transitionEnd: { opacity: "var(--opacity-closed, 0%)", x: "var(--x-closed, -100%)" } }, open: { x: 0, opacity: 1, transition: { type: "spring", duration: 0.4, bounce: 0 } } }, className: "absolute left-0 top-0 z-50 flex h-dvh w-[90%] flex-col border-r border-border-primary bg-white px-[5%] pb-4 md:w-[80%] lg:visible lg:static lg:-ml-4 lg:flex lg:h-auto lg:w-auto lg:flex-row lg:border-none lg:px-0 lg:pb-0 lg:[--opacity-closed:100%] lg:[--x-closed:0%]", children: [
-        /* @__PURE__ */ jsx("a", { href: logo == null ? void 0 : logo.url, className: "mb-8 mt-10 flex flex-shrink-0 lg:hidden", children: /* @__PURE__ */ jsx(CompoundImage, { src: logo == null ? void 0 : logo.src, alt: logo == null ? void 0 : logo.alt }) }),
-        navLinks == null ? void 0 : navLinks.map((navLink, index) => /* @__PURE__ */ jsx("a", { href: navLink.url, className: "relative block py-3 text-md lg:px-4 lg:py-2 lg:text-base", children: navLink.title }, index)),
-        /* @__PURE__ */ jsx("div", { className: "mt-6 lg:hidden", children: buttons == null ? void 0 : buttons.map((b, i) => /* @__PURE__ */ jsx(Button, { variant: b.variant, size: b.size, className: "w-full", children: b.label }, i)) })
-      ] }),
-      isMobileMenuOpen && /* @__PURE__ */ jsx(motion.div, { initial: { opacity: 0 }, exit: { opacity: 0 }, animate: { opacity: 0.5 }, transition: { duration: 0.2 }, className: "fixed inset-0 z-40 bg-black lg:hidden", onClick: () => setIsMobileMenuOpen(false) })
-    ] }),
-    /* @__PURE__ */ jsx("a", { href: logo == null ? void 0 : logo.url, className: "flex min-h-16 flex-shrink-0 items-center", children: /* @__PURE__ */ jsx(CompoundImage, { src: logo == null ? void 0 : logo.src, alt: logo == null ? void 0 : logo.alt }) }),
-    /* @__PURE__ */ jsx("div", { className: "flex min-h-16 items-center justify-end gap-x-4", children: buttons == null ? void 0 : buttons.map((b, i) => /* @__PURE__ */ jsx(Button, { variant: b.variant, size: b.size, className: "px-4 py-1 md:px-6 md:py-2", children: b.label }, i)) })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    SectionWrapper,
+    {
+      className: cn(
+        "z-[999] grid w-full grid-cols-[1fr_max-content_1fr] items-center justify-between border-b border-border-primary bg-background-primary px-[5%] md:min-h-18",
+        sectionClassName
+      ),
+      style: sectionStyle,
+      css,
+      children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: "flex size-12 flex-col justify-center lg:hidden",
+            onClick: () => setIsMobileMenuOpen((prev) => !prev),
+            children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx("span", { className: "my-[3px] h-0.5 w-6 bg-black lg:hidden" }, i))
+          }
+        ),
+        /* @__PURE__ */ jsxs(AnimatePresence, { children: [
+          /* @__PURE__ */ jsxs(
+            motion.div,
+            {
+              initial: "closed",
+              animate: isMobileMenuOpen ? "open" : "closed",
+              exit: "closed",
+              variants: {
+                closed: {
+                  x: "-100%",
+                  opacity: 1,
+                  transition: { type: "spring", duration: 0.6, bounce: 0 },
+                  transitionEnd: {
+                    opacity: "var(--opacity-closed, 0%)",
+                    x: "var(--x-closed, -100%)"
+                  }
+                },
+                open: {
+                  x: 0,
+                  opacity: 1,
+                  transition: { type: "spring", duration: 0.4, bounce: 0 }
+                }
+              },
+              className: "absolute left-0 top-0 z-50 flex h-dvh w-[90%] flex-col border-r border-border-primary  px-[5%] pb-4 md:w-[80%] lg:visible lg:static lg:-ml-4 lg:flex lg:h-auto lg:w-auto lg:flex-row lg:border-none lg:px-0 lg:pb-0 lg:[--opacity-closed:100%] lg:[--x-closed:0%]",
+              children: [
+                /* @__PURE__ */ jsx(
+                  "a",
+                  {
+                    href: logo == null ? void 0 : logo.url,
+                    className: "mb-8 mt-10 flex flex-shrink-0 lg:hidden",
+                    children: /* @__PURE__ */ jsx(CompoundImage, { src: logo == null ? void 0 : logo.src, alt: logo == null ? void 0 : logo.alt })
+                  }
+                ),
+                navLinks == null ? void 0 : navLinks.map((navLink, index) => /* @__PURE__ */ jsx(
+                  "a",
+                  {
+                    href: navLink.url,
+                    className: "relative block py-3 text-md lg:px-4 lg:py-2 lg:text-base",
+                    children: navLink.title
+                  },
+                  index
+                )),
+                /* @__PURE__ */ jsx("div", { className: "mt-6 lg:hidden", children: buttons == null ? void 0 : buttons.map((b, i) => /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: b.variant,
+                    size: b.size,
+                    className: "w-full",
+                    children: b.label
+                  },
+                  i
+                )) })
+              ]
+            }
+          ),
+          isMobileMenuOpen && /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              initial: { opacity: 0 },
+              exit: { opacity: 0 },
+              animate: { opacity: 0.5 },
+              transition: { duration: 0.2 },
+              className: "fixed inset-0 z-40 bg-black lg:hidden",
+              onClick: () => setIsMobileMenuOpen(false)
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("a", { href: logo == null ? void 0 : logo.url, className: "flex min-h-16 flex-shrink-0 items-center", children: /* @__PURE__ */ jsx(CompoundImage, { src: logo == null ? void 0 : logo.src, alt: logo == null ? void 0 : logo.alt }) }),
+        /* @__PURE__ */ jsx("div", { className: "flex min-h-16 items-center justify-end gap-x-4", children: buttons == null ? void 0 : buttons.map((b, i) => /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: b.variant,
+            size: b.size,
+            className: "px-4 py-1 md:px-6 md:py-2",
+            children: b.label
+          },
+          i
+        )) })
+      ]
+    }
+  );
 };
 const DrawerNavbarDefaults = {
-  logo: { url: "#", src: "https://d22po4pjz3o32e.cloudfront.net/logo-image.svg", alt: "Logo image" },
-  navLinks: [{ title: "Link One", url: "#" }, { title: "Link Two", url: "#" }, { title: "Link Three", url: "#" }],
+  logo: {
+    url: "#",
+    src: "https://d22po4pjz3o32e.cloudfront.net/logo-image.svg",
+    alt: "Logo image"
+  },
+  navLinks: [
+    { title: "Link One", url: "#" },
+    { title: "Link Two", url: "#" },
+    { title: "Link Three", url: "#" }
+  ],
   button: { label: "Button", size: "sm" },
   buttons: [{ label: "Button", size: "sm" }],
   styles: {}

package/dist/components/puck-block/header-sections/drawer-navbar/index.d.ts

@@ -41,7 +41,7 @@ declare const conf: {
                 readonly action: {
                     type: "custom";
                     label: string;
-                    render: typeof import("../../../puck-core").ActionField;
+                    render: typeof import("../../..").ActionField;
                 };
                 readonly variant: {
                     readonly type: "select";

package/dist/components/puck-block/header-sections/floating-bordered-navbar/floating-bordered-navbar.js

@@ -6,36 +6,177 @@ import { CompoundButton } from "../../../puck-base/button.js";
 import { CompoundImage } from "../../../puck-base/image.js";
 import { motion, AnimatePresence } from "framer-motion";
 import { RxChevronDown } from "../../../../node_modules/.pnpm/react-icons@5.6.0_react@19.2.4/node_modules/react-icons/rx/index.js";
+import { cn } from "../../../../utils/css-utils.js";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
 const FloatingBorderedNavbar = (props) => {
-  const { logo, navLinks, button, styles } = { ...FloatingBorderedNavbarDefaults, ...props };
-  const { position = "relative" } = styles ?? {};
+  const { logo, navLinks, button, styles } = {
+    ...FloatingBorderedNavbarDefaults,
+    ...props
+  };
+  const {
+    className: sectionClassName,
+    style: sectionStyle,
+    css,
+    position = "relative"
+  } = styles ?? {};
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
   const isMobile = useMediaQuery("(max-width: 991px)");
-  return /* @__PURE__ */ jsx("section", { id: "relume", className: `${position === "fixed" ? "fixed" : "relative"} z-[999] mx-auto mt-5 flex w-full items-start justify-center bg-background-primary px-[5%] md:mt-6 lg:mx-[5%] lg:w-auto lg:px-0`, children: /* @__PURE__ */ jsxs("div", { className: "flex min-h-16 w-full items-center justify-between gap-4 border border-border-primary px-5 md:min-h-18 md:px-8 lg:w-auto", children: [
-    /* @__PURE__ */ jsx("a", { href: logo == null ? void 0 : logo.url, children: /* @__PURE__ */ jsx(CompoundImage, { src: logo == null ? void 0 : logo.src, alt: logo == null ? void 0 : logo.alt }) }),
-    /* @__PURE__ */ jsx(motion.div, { variants: { open: { height: "var(--height, 100vh)" }, close: { height: "auto" } }, initial: "close", exit: "close", animate: isMobileMenuOpen ? "open" : "close", className: "absolute left-0 right-0 top-full w-full overflow-hidden lg:static lg:left-auto lg:right-auto lg:top-auto lg:w-auto lg:overflow-visible lg:[--height:auto]", children: /* @__PURE__ */ jsx(motion.div, { variants: { open: { y: 0 }, close: { y: "var(--translate-y, -100%)" } }, animate: isMobileMenuOpen ? "open" : "close", initial: "close", exit: "close", transition: { duration: 0.3 }, className: "absolute left-0 right-0 top-0 mx-auto min-w-[200px] justify-self-center bg-background-primary px-[5%] text-center lg:static lg:inset-auto lg:mx-0 lg:px-0 lg:text-left lg:[--translate-y:0%]", children: /* @__PURE__ */ jsx("div", { className: "flex w-full flex-col border border-t-0 border-border-primary bg-background-primary p-5 md:p-8 lg:w-auto lg:flex-row lg:border-none lg:bg-none lg:p-0", children: navLinks == null ? void 0 : navLinks.map(
-      (navLink, index) => navLink.subMenuLinks && navLink.subMenuLinks.length > 0 ? /* @__PURE__ */ jsx(SubMenu, { navLink, isMobile }, index) : /* @__PURE__ */ jsx("a", { href: navLink.url, className: "relative block py-3 text-center text-md lg:px-4 lg:py-2 lg:text-left lg:text-base", children: navLink.title }, index)
-    ) }) }) }),
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-4", children: [
-      button && /* @__PURE__ */ jsx(CompoundButton, { label: button.label, variant: button.variant, size: button.size, action: button.action, icon: button.icon }),
-      /* @__PURE__ */ jsx("button", { className: "-mr-2 flex size-12 flex-col items-center justify-center justify-self-end lg:hidden", onClick: () => setIsMobileMenuOpen((prev) => !prev), children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx(motion.span, { className: "my-[3px] h-0.5 w-6 bg-black" }, i)) })
-    ] })
-  ] }) });
+  return /* @__PURE__ */ jsx(
+    SectionWrapper,
+    {
+      className: cn(
+        `${position === "fixed" ? "fixed" : "relative"} z-[999] mx-auto mt-5 flex w-full items-start justify-center bg-background-primary px-[5%] md:mt-6 lg:mx-[5%] lg:w-auto lg:px-0`,
+        sectionClassName
+      ),
+      style: sectionStyle,
+      css,
+      children: /* @__PURE__ */ jsxs("div", { className: "flex min-h-16 w-full items-center justify-between gap-4 border-border-primary px-5 md:min-h-18 md:px-8 lg:w-auto", children: [
+        /* @__PURE__ */ jsx("a", { href: logo == null ? void 0 : logo.url, children: /* @__PURE__ */ jsx(CompoundImage, { src: logo == null ? void 0 : logo.src, alt: logo == null ? void 0 : logo.alt }) }),
+        /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            variants: {
+              open: { height: "var(--height, 100vh)" },
+              close: { height: "auto" }
+            },
+            initial: "close",
+            exit: "close",
+            animate: isMobileMenuOpen ? "open" : "close",
+            className: "absolute left-0 right-0 top-full w-full overflow-hidden lg:static lg:left-auto lg:right-auto lg:top-auto lg:w-auto lg:overflow-visible lg:[--height:auto]",
+            children: /* @__PURE__ */ jsx(
+              motion.div,
+              {
+                variants: {
+                  open: { y: 0 },
+                  close: { y: "var(--translate-y, -100%)" }
+                },
+                animate: isMobileMenuOpen ? "open" : "close",
+                initial: "close",
+                exit: "close",
+                transition: { duration: 0.3 },
+                className: "absolute left-0 right-0 top-0 mx-auto min-w-[200px] justify-self-center bg-background-primary px-[5%] text-center lg:static lg:inset-auto lg:mx-0 lg:px-0 lg:text-left lg:[--translate-y:0%]",
+                children: /* @__PURE__ */ jsx("div", { className: "flex w-full flex-col border border-t-0 border-border-primary bg-background-primary p-5 md:p-8 lg:w-auto lg:flex-row lg:border-none lg:bg-none lg:p-0", children: navLinks == null ? void 0 : navLinks.map(
+                  (navLink, index) => navLink.subMenuLinks && navLink.subMenuLinks.length > 0 ? /* @__PURE__ */ jsx(SubMenu, { navLink, isMobile }, index) : /* @__PURE__ */ jsx(
+                    "a",
+                    {
+                      href: navLink.url,
+                      className: "relative block py-3 text-center text-md lg:px-4 lg:py-2 lg:text-left lg:text-base",
+                      children: navLink.title
+                    },
+                    index
+                  )
+                ) })
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-4", children: [
+          button && /* @__PURE__ */ jsx(
+            CompoundButton,
+            {
+              label: button.label,
+              variant: button.variant,
+              size: button.size,
+              action: button.action,
+              icon: button.icon
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: "-mr-2 flex size-12 flex-col items-center justify-center justify-self-end lg:hidden",
+              onClick: () => setIsMobileMenuOpen((prev) => !prev),
+              children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx(motion.span, { className: "my-[3px] h-0.5 w-6 bg-black" }, i))
+            }
+          )
+        ] })
+      ] })
+    }
+  );
 };
-const SubMenu = ({ navLink, isMobile }) => {
+const SubMenu = ({
+  navLink,
+  isMobile
+}) => {
   var _a;
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
-  return /* @__PURE__ */ jsxs("div", { className: "relative", onMouseEnter: () => !isMobile && setIsDropdownOpen(true), onMouseLeave: () => !isMobile && setIsDropdownOpen(false), children: [
-    /* @__PURE__ */ jsxs("button", { className: "relative flex w-full items-center justify-center gap-4 whitespace-nowrap py-3 text-center text-md lg:gap-2 lg:px-4 lg:py-2 lg:text-left lg:text-base", onClick: () => setIsDropdownOpen((prev) => !prev), children: [
-      /* @__PURE__ */ jsx("span", { children: navLink.title }),
-      /* @__PURE__ */ jsx(motion.span, { variants: { rotate: { rotate: 180 }, initial: { rotate: 0 } }, animate: isDropdownOpen ? "rotate" : "initial", transition: { duration: 0.3 }, children: /* @__PURE__ */ jsx(RxChevronDown, {}) })
-    ] }),
-    /* @__PURE__ */ jsx(AnimatePresence, { children: isDropdownOpen && /* @__PURE__ */ jsx(motion.nav, { animate: "open", initial: "close", exit: "close", variants: { open: { opacity: 1, visibility: "visible", height: "auto" }, close: { opacity: 0, visibility: "hidden", height: 0 } }, transition: { duration: 0.2 }, className: "static flex w-full min-w-full flex-col overflow-hidden whitespace-nowrap border-0 border-border-primary bg-background-primary p-0 lg:absolute lg:overflow-visible lg:border lg:p-2", children: (_a = navLink.subMenuLinks) == null ? void 0 : _a.map((link, i) => /* @__PURE__ */ jsx("a", { href: link.url, className: "px-0 py-3 text-center lg:px-4 lg:py-2 lg:text-left", children: link.title }, i)) }) })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "relative",
+      onMouseEnter: () => !isMobile && setIsDropdownOpen(true),
+      onMouseLeave: () => !isMobile && setIsDropdownOpen(false),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            className: "relative flex w-full items-center justify-center gap-4 whitespace-nowrap py-3 text-center text-md lg:gap-2 lg:px-4 lg:py-2 lg:text-left lg:text-base",
+            onClick: () => setIsDropdownOpen((prev) => !prev),
+            children: [
+              /* @__PURE__ */ jsx("span", { children: navLink.title }),
+              /* @__PURE__ */ jsx(
+                motion.span,
+                {
+                  variants: { rotate: { rotate: 180 }, initial: { rotate: 0 } },
+                  animate: isDropdownOpen ? "rotate" : "initial",
+                  transition: { duration: 0.3 },
+                  children: /* @__PURE__ */ jsx(RxChevronDown, {})
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(AnimatePresence, { children: isDropdownOpen && /* @__PURE__ */ jsx(
+          motion.nav,
+          {
+            animate: "open",
+            initial: "close",
+            exit: "close",
+            variants: {
+              open: {
+                opacity: 1,
+                visibility: "visible",
+                height: "auto"
+              },
+              close: { opacity: 0, visibility: "hidden", height: 0 }
+            },
+            transition: { duration: 0.2 },
+            className: "static flex w-full min-w-full flex-col overflow-hidden whitespace-nowrap border-0 border-border-primary bg-background-primary p-0 lg:absolute lg:overflow-visible lg:border lg:p-2",
+            children: (_a = navLink.subMenuLinks) == null ? void 0 : _a.map((link, i) => /* @__PURE__ */ jsx(
+              "a",
+              {
+                href: link.url,
+                className: "px-0 py-3 text-center lg:px-4 lg:py-2 lg:text-left",
+                children: link.title
+              },
+              i
+            ))
+          }
+        ) })
+      ]
+    }
+  );
 };
 const FloatingBorderedNavbarDefaults = {
-  logo: { url: "#", src: "https://d22po4pjz3o32e.cloudfront.net/logo-image.svg", alt: "Relume placeholder logo" },
-  navLinks: [{ url: "#", title: "Link One" }, { url: "#", title: "Link Two" }, { url: "#", title: "Link Three" }, { url: "#", title: "Link Four", subMenuLinks: [{ url: "#", title: "Link Five" }, { url: "#", title: "Link Six" }, { url: "#", title: "Link Seven" }] }],
+  logo: {
+    url: "#",
+    src: "https://d22po4pjz3o32e.cloudfront.net/logo-image.svg",
+    alt: "Relume placeholder logo"
+  },
+  navLinks: [
+    { url: "#", title: "Link One" },
+    { url: "#", title: "Link Two" },
+    { url: "#", title: "Link Three" },
+    {
+      url: "#",
+      title: "Link Four",
+      subMenuLinks: [
+        { url: "#", title: "Link Five" },
+        { url: "#", title: "Link Six" },
+        { url: "#", title: "Link Seven" }
+      ]
+    }
+  ],
   button: { label: "Button", size: "sm" },
   buttons: [],
   styles: { position: "relative" }

package/dist/components/puck-block/header-sections/floating-bordered-navbar/index.d.ts

@@ -37,7 +37,7 @@ declare const conf: {
                 readonly action: {
                     type: "custom";
                     label: string;
-                    render: typeof import("../../../puck-core").ActionField;
+                    render: typeof import("../../..").ActionField;
                 };
                 readonly variant: {
                     readonly type: "select";
@@ -87,6 +87,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.";
+                    };
+                };
                 position: {
                     readonly type: "radio";
                     readonly label: "Position";

package/dist/components/puck-block/header-sections/floating-bordered-navbar/index.js

@@ -2,8 +2,9 @@ import { FloatingBorderedNavbar, FloatingBorderedNavbarDefaults } from "./floati
 import { imageField } from "../../../puck-core/core/props/media.js";
 import { buttonField } from "../../../puck-core/core/props/interactive.js";
 import { headerStyleFields } from "../props.js";
+import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
 const conf = {
-  fields: { logo: imageField, navLinks: { type: "array", max: 6, getItemSummary: (item, i = 0) => item.title || `Link ${i + 1}`, arrayFields: { title: { type: "text" }, url: { type: "text" } } }, button: buttonField, styles: { type: "object", label: "Styles", objectFields: { position: headerStyleFields.position } } },
+  fields: { logo: imageField, navLinks: { type: "array", max: 6, getItemSummary: (item, i = 0) => item.title || `Link ${i + 1}`, arrayFields: { title: { type: "text" }, url: { type: "text" } } }, button: buttonField, styles: { type: "object", label: "Styles", objectFields: { position: headerStyleFields.position, ...sectionWrapperFields } } },
   defaultProps: FloatingBorderedNavbarDefaults,
   render: FloatingBorderedNavbar
 };

package/dist/components/puck-block/header-sections/fullscreen-overlay-navbar/fullscreen-overlay-navbar.js

@@ -4,28 +4,154 @@ import { useState } from "react";
 import { Button } from "../../../shadcn/button.js";
 import { CompoundImage } from "../../../puck-base/image.js";
 import { motion, AnimatePresence } from "framer-motion";
+import { cn } from "../../../../utils/css-utils.js";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
 const FullscreenOverlayNavbar = (props) => {
-  const { logo, navLinks, button } = { ...FullscreenOverlayNavbarDefaults, ...props };
+  const { logo, navLinks, button, styles } = {
+    ...FullscreenOverlayNavbarDefaults,
+    ...props
+  };
+  const {
+    className: sectionClassName,
+    style: sectionStyle,
+    css
+  } = styles ?? {};
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
-  return /* @__PURE__ */ jsxs("section", { id: "relume", className: "relative z-[999] flex min-h-16 w-full items-center border-b border-b-border-primary bg-background-primary px-[5%] md:min-h-18", children: [
-    /* @__PURE__ */ jsxs("div", { className: "mx-auto flex size-full items-center justify-between", children: [
-      /* @__PURE__ */ jsx("a", { href: logo == null ? void 0 : logo.url, children: /* @__PURE__ */ jsx(CompoundImage, { src: logo == null ? void 0 : logo.src, alt: logo == null ? void 0 : logo.alt }) }),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-2 lg:gap-4", children: [
-        button && /* @__PURE__ */ jsx(Button, { variant: button.variant, size: button.size, className: "px-4 py-1 md:px-6 md:py-2", children: button.label }),
-        /* @__PURE__ */ jsx("button", { className: "-mr-2 flex size-12 flex-col items-center justify-center justify-self-end lg:mr-0", onClick: () => setIsMobileMenuOpen((prev) => !prev), children: /* @__PURE__ */ jsxs("span", { className: "relative flex size-6 flex-col items-center justify-center", children: [
-          /* @__PURE__ */ jsx(motion.span, { className: "absolute top-[3px] h-0.5 w-full bg-black", animate: isMobileMenuOpen ? "open" : "close", variants: { open: { width: 0, transition: { duration: 0.1 } }, close: { width: "100%", transition: { duration: 0.1, delay: 0.3 } } } }),
-          /* @__PURE__ */ jsx(motion.span, { className: "absolute h-0.5 w-full bg-black", animate: isMobileMenuOpen ? "open" : "close", variants: { open: { rotate: 135, transition: { duration: 0.3, delay: 0.1 } }, close: { rotate: 0, transition: { duration: 0.3 } } } }),
-          /* @__PURE__ */ jsx(motion.span, { className: "absolute h-0.5 w-full bg-black", animate: isMobileMenuOpen ? "open" : "close", variants: { open: { rotate: 45, transition: { duration: 0.3, delay: 0.1 } }, close: { rotate: 0, transition: { duration: 0.3 } } } }),
-          /* @__PURE__ */ jsx(motion.span, { className: "absolute bottom-[3px] h-0.5 w-full bg-black", animate: isMobileMenuOpen ? "open" : "close", variants: { open: { width: 0, transition: { duration: 0.1 } }, close: { width: "100%", transition: { duration: 0.1, delay: 0.3 } } } })
-        ] }) })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx(AnimatePresence, { children: isMobileMenuOpen && /* @__PURE__ */ jsx(motion.div, { variants: { open: { height: "100dvh" }, close: { height: "auto" } }, animate: "open", initial: "close", exit: "close", className: "absolute left-0 right-0 top-full w-full overflow-hidden", children: /* @__PURE__ */ jsx(motion.div, { variants: { open: { y: 0 }, close: { y: "-100%" } }, animate: "open", initial: "close", exit: "close", transition: { duration: 0.5 }, className: "absolute left-0 right-0 top-0 block h-dvh overflow-auto bg-background-primary px-[5%]", children: /* @__PURE__ */ jsx("div", { className: "-mt-18 flex h-full flex-col justify-center", children: navLinks == null ? void 0 : navLinks.map((navLink, index) => /* @__PURE__ */ jsx("a", { href: navLink.url, className: "static block py-3 text-xl leading-[30px] lg:my-2 lg:py-2 lg:text-2xl lg:leading-[1.5]", children: navLink.title }, index)) }) }) }) })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    SectionWrapper,
+    {
+      className: cn(
+        "relative z-[999] flex min-h-16 w-full items-center border-b border-b-border-primary bg-background-primary px-[5%] md:min-h-18",
+        sectionClassName
+      ),
+      style: sectionStyle,
+      css,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "mx-auto flex size-full items-center justify-between", children: [
+          /* @__PURE__ */ jsx("a", { href: logo == null ? void 0 : logo.url, children: /* @__PURE__ */ jsx(CompoundImage, { src: logo == null ? void 0 : logo.src, alt: logo == null ? void 0 : logo.alt }) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-2 lg:gap-4", children: [
+            button && /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: button.variant,
+                size: button.size,
+                className: "px-4 py-1 md:px-6 md:py-2",
+                children: button.label
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: "-mr-2 flex size-12 flex-col items-center justify-center justify-self-end lg:mr-0",
+                onClick: () => setIsMobileMenuOpen((prev) => !prev),
+                children: /* @__PURE__ */ jsxs("span", { className: "relative flex size-6 flex-col items-center justify-center", children: [
+                  /* @__PURE__ */ jsx(
+                    motion.span,
+                    {
+                      className: "absolute top-[3px] h-0.5 w-full bg-black",
+                      animate: isMobileMenuOpen ? "open" : "close",
+                      variants: {
+                        open: { width: 0, transition: { duration: 0.1 } },
+                        close: {
+                          width: "100%",
+                          transition: { duration: 0.1, delay: 0.3 }
+                        }
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    motion.span,
+                    {
+                      className: "absolute h-0.5 w-full bg-black",
+                      animate: isMobileMenuOpen ? "open" : "close",
+                      variants: {
+                        open: {
+                          rotate: 135,
+                          transition: { duration: 0.3, delay: 0.1 }
+                        },
+                        close: { rotate: 0, transition: { duration: 0.3 } }
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    motion.span,
+                    {
+                      className: "absolute h-0.5 w-full bg-black",
+                      animate: isMobileMenuOpen ? "open" : "close",
+                      variants: {
+                        open: {
+                          rotate: 45,
+                          transition: { duration: 0.3, delay: 0.1 }
+                        },
+                        close: { rotate: 0, transition: { duration: 0.3 } }
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    motion.span,
+                    {
+                      className: "absolute bottom-[3px] h-0.5 w-full bg-black",
+                      animate: isMobileMenuOpen ? "open" : "close",
+                      variants: {
+                        open: { width: 0, transition: { duration: 0.1 } },
+                        close: {
+                          width: "100%",
+                          transition: { duration: 0.1, delay: 0.3 }
+                        }
+                      }
+                    }
+                  )
+                ] })
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(AnimatePresence, { children: isMobileMenuOpen && /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            variants: { open: { height: "100dvh" }, close: { height: "auto" } },
+            animate: "open",
+            initial: "close",
+            exit: "close",
+            className: "absolute left-0 right-0 top-full w-full overflow-hidden",
+            children: /* @__PURE__ */ jsx(
+              motion.div,
+              {
+                variants: { open: { y: 0 }, close: { y: "-100%" } },
+                animate: "open",
+                initial: "close",
+                exit: "close",
+                transition: { duration: 0.5 },
+                className: "absolute left-0 right-0 top-0 block h-dvh overflow-auto bg-background-primary px-[5%]",
+                children: /* @__PURE__ */ jsx("div", { className: "-mt-18 flex h-full flex-col", children: navLinks == null ? void 0 : navLinks.map((navLink, index) => /* @__PURE__ */ jsx(
+                  "a",
+                  {
+                    href: navLink.url,
+                    className: "static block py-3 text-xl leading-[30px] lg:my-2 lg:py-2 lg:text-2xl lg:leading-[1.5]",
+                    children: navLink.title
+                  },
+                  index
+                )) })
+              }
+            )
+          }
+        ) })
+      ]
+    }
+  );
 };
 const FullscreenOverlayNavbarDefaults = {
-  logo: { url: "#", src: "https://d22po4pjz3o32e.cloudfront.net/logo-image.svg", alt: "Relume placeholder logo" },
-  navLinks: [{ url: "#", title: "Link One" }, { url: "#", title: "Link Two" }, { url: "#", title: "Link Three" }, { url: "#", title: "Link Four" }],
+  logo: {
+    url: "#",
+    src: "https://d22po4pjz3o32e.cloudfront.net/logo-image.svg",
+    alt: "Relume placeholder logo"
+  },
+  navLinks: [
+    { url: "#", title: "Link One" },
+    { url: "#", title: "Link Two" },
+    { url: "#", title: "Link Three" },
+    { url: "#", title: "Link Four" }
+  ],
   button: { label: "Button", size: "sm" },
   buttons: [],
   styles: { overlayContent: "linksOnly" }

package/dist/components/puck-block/header-sections/fullscreen-overlay-navbar/index.d.ts

@@ -37,7 +37,7 @@ declare const conf: {
                 readonly action: {
                     type: "custom";
                     label: string;
-                    render: typeof import("../../../puck-core").ActionField;
+                    render: typeof import("../../..").ActionField;
                 };
                 readonly variant: {
                     readonly type: "select";
@@ -87,6 +87,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.";
+                    };
+                };
                 overlayContent: {
                     readonly type: "select";
                     readonly label: "Overlay Content";

package/dist/components/puck-block/header-sections/fullscreen-overlay-navbar/index.js

@@ -2,8 +2,9 @@ import { FullscreenOverlayNavbar, FullscreenOverlayNavbarDefaults } from "./full
 import { imageField } from "../../../puck-core/core/props/media.js";
 import { buttonField } from "../../../puck-core/core/props/interactive.js";
 import { headerStyleFields } from "../props.js";
+import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
 const conf = {
-  fields: { logo: imageField, navLinks: { type: "array", max: 8, getItemSummary: (item, i = 0) => item.title || `Link ${i + 1}`, arrayFields: { title: { type: "text" }, url: { type: "text" } } }, button: buttonField, styles: { type: "object", label: "Styles", objectFields: { overlayContent: headerStyleFields.overlayContent } } },
+  fields: { logo: imageField, navLinks: { type: "array", max: 8, getItemSummary: (item, i = 0) => item.title || `Link ${i + 1}`, arrayFields: { title: { type: "text" }, url: { type: "text" } } }, button: buttonField, styles: { type: "object", label: "Styles", objectFields: { overlayContent: headerStyleFields.overlayContent, ...sectionWrapperFields } } },
   defaultProps: FullscreenOverlayNavbarDefaults,
   render: FullscreenOverlayNavbar
 };