dune-react 0.0.9 → 0.0.11

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

@@ -4,11 +4,13 @@ export interface Gallery2Image {
     alt?: string;
 }
 export interface Gallery2Props {
-    padding?: CompoundContainerProps["padding"];
-    sectionStyle?: CompoundContainerProps["sectionStyle"];
-    backgroundColor?: string;
     heading?: string;
     description?: string;
     images?: Gallery2Image[];
+    styles?: {
+        padding?: CompoundContainerProps["padding"];
+        sectionStyle?: CompoundContainerProps["sectionStyle"];
+        backgroundColor?: string;
+    };
 }
-export declare const Gallery2: ({ padding, sectionStyle, backgroundColor, heading, description, images, }: Gallery2Props) => import("react/jsx-runtime").JSX.Element;
+export declare const Gallery2: ({ heading, description, images, styles, }: Gallery2Props) => import("react/jsx-runtime").JSX.Element;

package/dist/components/puck-block/gallery-sections/gallery-2/gallery-2.js

@@ -6,12 +6,10 @@ import { ChevronLeft, ChevronRight } from "lucide-react";
 import { CompoundContainer } from "../../../puck-base/container.js";
 import { CompoundImage } from "../../../puck-base/image.js";
 const Gallery2 = ({
-  padding,
-  sectionStyle,
-  backgroundColor,
   heading,
   description,
-  images = []
+  images = [],
+  styles
 }) => {
   const [emblaRef, emblaApi] = useEmblaCarousel({ align: "start", loop: false });
   const [canScrollPrev, setCanScrollPrev] = useState(false);
@@ -34,9 +32,9 @@ const Gallery2 = ({
   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-4 lg:gap-8", children: [
         (heading || description) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between lg:gap-8", children: [
           heading && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3 lg:basis-1/2", children: /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight text-foreground lg:text-4xl", children: heading }) }),
@@ -61,21 +59,29 @@ const Gallery2 = ({
           /* @__PURE__ */ jsx(
             "button",
             {
-              onClick: () => emblaApi == null ? void 0 : emblaApi.scrollPrev(),
+              onClick: (e) => {
+                e.stopPropagation();
+                emblaApi == null ? void 0 : emblaApi.scrollPrev();
+              },
+              style: { pointerEvents: "auto" },
               disabled: !canScrollPrev,
-              className: "absolute left-4 top-1/2 -translate-y-1/2 z-10 flex h-10 w-10 items-center justify-center rounded-full bg-background/90 shadow-md transition hover:bg-background disabled:opacity-30",
+              className: "absolute left-4 top-1/2 -translate-y-1/2 z-10 flex h-10 w-10 items-center justify-center rounded-full bg-background/90 shadow-md transition hover:bg-background disabled:opacity-30 cursor-pointer",
               "aria-label": "Previous image",
-              children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-5 w-5 text-foreground" })
+              children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-5 w-5 text-foreground", style: { pointerEvents: "none" } })
             }
           ),
           /* @__PURE__ */ jsx(
             "button",
             {
-              onClick: () => emblaApi == null ? void 0 : emblaApi.scrollNext(),
+              onClick: (e) => {
+                e.stopPropagation();
+                emblaApi == null ? void 0 : emblaApi.scrollNext();
+              },
+              style: { pointerEvents: "auto" },
               disabled: !canScrollNext,
-              className: "absolute right-4 top-1/2 -translate-y-1/2 z-10 flex h-10 w-10 items-center justify-center rounded-full bg-background/90 shadow-md transition hover:bg-background disabled:opacity-30",
+              className: "absolute right-4 top-1/2 -translate-y-1/2 z-10 flex h-10 w-10 items-center justify-center rounded-full bg-background/90 shadow-md transition hover:bg-background disabled:opacity-30 cursor-pointer",
               "aria-label": "Next image",
-              children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-5 w-5 text-foreground" })
+              children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-5 w-5 text-foreground", style: { pointerEvents: "none" } })
             }
           )
         ] })

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

@@ -1,7 +1,7 @@
-import { paddingDefaults, backgroundColor, sectionStyle, padding } from "../../../puck-base/core/fields.js";
 import { Gallery2 } from "./gallery-2.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
 const defaultImage = {
-  src: "https://dummyimage.com/1400x700/f5f4f4/101010.png&text=Gallery+Image",
+  src: "https://picsum.photos/seed/Gallery%20Image/1400/700",
   alt: "Gallery image"
 };
 const conf = {
@@ -24,9 +24,7 @@ const conf = {
       },
       defaultItemProps: defaultImage
     },
-    padding,
-    sectionStyle,
-    backgroundColor
+    styles: createStylesField()
   },
   defaultProps: {
     heading: "Real transformations from real training",
@@ -35,7 +33,7 @@ const conf = {
       ...defaultImage,
       alt: `Gallery image ${i + 1}`
     })),
-    padding: paddingDefaults
+    styles: createStylesDefaults()
   },
   render: Gallery2
 };

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

@@ -5,13 +5,15 @@ export interface Gallery3Image {
     caption?: string;
 }
 export interface Gallery3Props {
-    padding?: CompoundContainerProps["padding"];
-    sectionStyle?: CompoundContainerProps["sectionStyle"];
-    backgroundColor?: string;
     heading?: string;
     description?: string;
     images?: Gallery3Image[];
     showCaptions?: boolean;
-    gap?: "sm" | "md" | "lg";
+    styles?: {
+        padding?: CompoundContainerProps["padding"];
+        sectionStyle?: CompoundContainerProps["sectionStyle"];
+        backgroundColor?: string;
+        gap?: "sm" | "md" | "lg";
+    };
 }
-export declare const Gallery3: ({ padding, sectionStyle, backgroundColor, heading, description, images, showCaptions, gap, }: Gallery3Props) => import("react/jsx-runtime").JSX.Element;
+export declare const Gallery3: ({ heading, description, images, showCaptions, styles, }: Gallery3Props) => import("react/jsx-runtime").JSX.Element;

package/dist/components/puck-block/gallery-sections/gallery-3/gallery-3.js

@@ -37,23 +37,21 @@ function ImageCard({
   );
 }
 const Gallery3 = ({
-  padding,
-  sectionStyle,
-  backgroundColor,
   heading,
   description,
   images = [],
   showCaptions = true,
-  gap = "md"
+  styles
 }) => {
+  const gap = (styles == null ? void 0 : styles.gap) ?? "md";
   const gc = gapClasses[gap] ?? gapClasses.md;
   const [img1, img2, img3, ...rest] = images;
   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 lg:gap-12", children: [
         (heading || description) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between", children: [
           /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3", children: heading && /* @__PURE__ */ jsx("h2", { className: "text-4xl font-bold tracking-tight text-foreground lg:text-5xl", children: heading }) }),

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

@@ -1,5 +1,6 @@
-import { paddingDefaults, backgroundColor, sectionStyle, padding, getPlaceholderImageUrl } from "../../../puck-base/core/fields.js";
+import { getPlaceholderImageUrl } from "../../../puck-base/core/fields.js";
 import { Gallery3 } from "./gallery-3.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
 const makeDefaultImage = (i) => ({
   src: getPlaceholderImageUrl("1200x800", `Gallery Image ${i + 1}`),
   alt: `Gallery image ${i + 1}`,
@@ -33,25 +34,23 @@ const conf = {
         { label: "隐藏", value: false }
       ]
     },
-    gap: {
-      type: "radio",
-      options: [
-        { label: "紧凑", value: "sm" },
-        { label: "默认", value: "md" },
-        { label: "宽松", value: "lg" }
-      ]
-    },
-    padding,
-    sectionStyle,
-    backgroundColor
+    styles: createStylesField({
+      gap: {
+        type: "radio",
+        options: [
+          { label: "紧凑", value: "sm" },
+          { label: "默认", value: "md" },
+          { label: "宽松", value: "lg" }
+        ]
+      }
+    })
   },
   defaultProps: {
     heading: "Crafted with intention",
     description: "A curated selection of moments that define our work and vision.",
     images: Array.from({ length: 6 }, (_, i) => makeDefaultImage(i)),
     showCaptions: true,
-    gap: "md",
-    padding: paddingDefaults
+    styles: createStylesDefaults({ gap: "md" })
   },
   render: Gallery3
 };

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

@@ -0,0 +1,26 @@
+type GalleryVariant = "gallery-1" | "gallery-2" | "gallery-3";
+type GalleryPadding = {
+    top?: "none" | "small" | "medium" | "large";
+    bottom?: "none" | "small" | "medium" | "large";
+};
+type GallerySectionStyle = "default" | "dark" | "muted" | "inverted" | "custom";
+type GalleryImage = {
+    src: string;
+    alt?: string;
+    caption?: string;
+};
+type GallerySectionProps = {
+    variant?: GalleryVariant;
+    heading?: string;
+    description?: string;
+    images?: GalleryImage[];
+    showCaptions?: boolean;
+    styles?: {
+        padding?: GalleryPadding;
+        sectionStyle?: GallerySectionStyle;
+        backgroundColor?: string;
+        columns?: 2 | 3 | 4;
+        gap?: "sm" | "md" | "lg";
+        aspectRatio?: "square" | "landscape" | "auto";
+    };
+};

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

@@ -18,16 +18,21 @@ type SecondaryNavigationItem = NavigationLink & {
 };
 type NavigationItem = NavigationLink & {
     url?: string;
+    action?: Action;
     description?: string;
-    cta?: CompoundButtonProps;
+    cta?: CompoundButtonProps & {
+        url?: string;
+    };
     items?: SubmenuLink[];
 };
 export interface HeaderProps extends ILayoutProps {
     companyName: string;
-    primaryNavigation?: NavigationItem[];
-    secondaryNavigation?: SecondaryNavigationItem[];
-    sectionStyle?: "default" | "dark" | "muted" | "inverted";
-    backgroundColor?: string;
+    navigation?: NavigationItem[];
+    actions?: SecondaryNavigationItem[];
+    styles?: {
+        sectionStyle?: "default" | "dark" | "muted" | "inverted";
+        backgroundColor?: string;
+    };
 }
-export declare const Header: ({ companyName, primaryNavigation, secondaryNavigation, sectionStyle, backgroundColor, }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Header: ({ companyName, navigation, actions, styles, }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -3,11 +3,15 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useState, Fragment as Fragment$1 } from "react";
 import { cn } from "../../../../utils/css-utils.js";
 import { Button } from "../../../shadcn/button.js";
-import { NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuLink, NavigationMenuTrigger, NavigationMenuContent } from "../../../shadcn/navigation-menu.js";
+import { NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuLink, NavigationMenuTrigger, NavigationMenuContent } from "../../../puck-base/navigation-menu.js";
 import { MoveRight, X, Menu } from "lucide-react";
 import { registerOverlayPortal } from "@puckeditor/core";
 import { CompoundButton } from "../../../puck-base/button.js";
 import { ErrorBoundary } from "../../../puck-base/error-boundary.js";
+import { resolveActionUrl } from "../../../puck-base/core/types.js";
+function coerceAction(action, legacyUrl) {
+  return action ?? (legacyUrl ? /^https?:\/\//i.test(legacyUrl) ? { type: "external", externalUrl: legacyUrl } : { type: "page", pageUrl: legacyUrl } : void 0);
+}
 const HEADER_SECTION_VARS = {
   dark: {
     "--background": "oklch(0.145 0 0)",
@@ -29,29 +33,30 @@ const HEADER_SECTION_VARS = {
 };
 const Header = ({
   companyName,
-  primaryNavigation,
-  secondaryNavigation,
-  sectionStyle,
-  backgroundColor
+  navigation,
+  actions,
+  styles
 }) => {
   const [isOpen, setOpen] = useState(false);
-  const sectionVars = sectionStyle && sectionStyle !== "default" ? HEADER_SECTION_VARS[sectionStyle] ?? {} : {};
+  const sectionVars = (styles == null ? void 0 : styles.sectionStyle) && styles.sectionStyle !== "default" ? HEADER_SECTION_VARS[styles.sectionStyle] ?? {} : {};
   return /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(
     "header",
     {
-      className: cn("bg-background text-foreground sticky top-0 left-0 z-40 w-full"),
+      className: cn(
+        "bg-background text-foreground sticky top-0 left-0 z-40 w-full"
+      ),
       style: {
-        ...backgroundColor ? { backgroundColor } : {},
+        ...(styles == null ? void 0 : styles.backgroundColor) ? { backgroundColor: styles.backgroundColor } : {},
         ...sectionVars
       },
       children: /* @__PURE__ */ jsxs("div", { className: "relative container mx-auto flex min-h-20 flex-row items-center gap-4 lg:grid lg:grid-cols-[auto_1fr_auto]", children: [
         /* @__PURE__ */ jsx("div", { className: "flex lg:justify-start", children: /* @__PURE__ */ jsx("p", { className: "font-semibold whitespace-nowrap", children: companyName }) }),
-        /* @__PURE__ */ jsx("div", { className: "hidden flex-row items-center justify-center gap-4 lg:flex", children: Array.isArray(primaryNavigation) && primaryNavigation.length > 0 ? /* @__PURE__ */ jsx(NavigationMenu, { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(NavigationMenuList, { className: "flex flex-row justify-center gap-4", children: primaryNavigation.map((item, index) => {
-          var _a, _b;
+        /* @__PURE__ */ jsx("div", { className: "hidden flex-row items-center justify-center gap-4 lg:flex", children: Array.isArray(navigation) && navigation.length > 0 ? /* @__PURE__ */ jsx(NavigationMenu, { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(NavigationMenuList, { className: "flex flex-row justify-center gap-4", children: navigation.map((item, index) => {
+          var _a;
           return /* @__PURE__ */ jsx(NavigationMenuItem, { children: item.url ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(NavigationMenuLink, { asChild: true, children: /* @__PURE__ */ jsx(
             CompoundButton,
             {
-              url: item.url,
+              action: coerceAction(item.action, item.url),
               label: item.label,
               variant: "ghost"
             }
@@ -70,20 +75,22 @@ const Header = ({
                   /* @__PURE__ */ jsx("p", { className: "text-base", children: item.label }),
                   item.description ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", children: item.description }) : null
                 ] }),
-                ((_a = item.cta) == null ? void 0 : _a.url) ? /* @__PURE__ */ jsx(
-                  CompoundButton,
-                  {
-                    label: item.cta.label,
-                    url: item.cta.url,
-                    action: item.cta.action,
-                    variant: item.cta.variant,
-                    size: item.cta.size,
-                    icon: item.cta.icon,
-                    className: "mt-10"
-                  }
-                ) : null
+                (() => {
+                  const ctaAction = item.cta && coerceAction(item.cta.action, item.cta.url);
+                  return ctaAction && resolveActionUrl(ctaAction) ? /* @__PURE__ */ jsx(
+                    CompoundButton,
+                    {
+                      label: item.cta.label,
+                      action: ctaAction,
+                      variant: item.cta.variant,
+                      size: item.cta.size,
+                      icon: item.cta.icon,
+                      className: "mt-10"
+                    }
+                  ) : null;
+                })()
               ] }),
-              /* @__PURE__ */ jsx("div", { className: "flex h-full flex-col justify-end text-sm", children: (_b = item.items) == null ? void 0 : _b.map((subItem, index2) => /* @__PURE__ */ jsxs(
+              /* @__PURE__ */ jsx("div", { className: "flex h-full flex-col justify-end text-sm", children: (_a = item.items) == null ? void 0 : _a.map((subItem, index2) => /* @__PURE__ */ jsxs(
                 NavigationMenuLink,
                 {
                   href: subItem.url,
@@ -98,7 +105,7 @@ const Header = ({
             ] }) })
           ] }) }, index);
         }) }) }) : null }),
-        /* @__PURE__ */ jsx("div", { className: "flex w-full justify-end gap-4", children: secondaryNavigation == null ? void 0 : secondaryNavigation.map((item, index) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+        /* @__PURE__ */ jsx("div", { className: "flex w-full justify-end gap-4", children: actions == null ? void 0 : actions.map((item, index) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
           /* @__PURE__ */ jsx(
             CompoundButton,
             {
@@ -106,8 +113,7 @@ const Header = ({
               variant: item.variant,
               size: item.size,
               icon: item.icon,
-              url: item.url,
-              action: item.action,
+              action: coerceAction(item.action, item.url),
               className: cn({
                 "hidden md:inline": item.isHiddenOnMobile === "true"
               })
@@ -125,7 +131,7 @@ const Header = ({
               children: isOpen ? /* @__PURE__ */ jsx(X, { className: "h-5 w-5" }) : /* @__PURE__ */ jsx(Menu, { className: "h-5 w-5" })
             }
           ),
-          isOpen && /* @__PURE__ */ jsx("div", { className: "bg-background absolute top-20 right-0 container flex w-full flex-col gap-8 border-t py-4 shadow-lg", children: primaryNavigation == null ? void 0 : primaryNavigation.map((item, index) => /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+          isOpen && /* @__PURE__ */ jsx("div", { className: "bg-background absolute top-20 right-0 container flex w-full flex-col gap-8 border-t py-4 shadow-lg", children: navigation == null ? void 0 : navigation.map((item, index) => /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
             item.url ? /* @__PURE__ */ jsxs(
               "a",
               {

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

@@ -1,7 +1,7 @@
 import { ComponentConfig } from "@puckeditor/core";
 import { HeaderProps } from "./header";
 export type { HeaderProps };
-export declare const defaultPrimaryNavigationItems: ({
+export declare const defaultNavigationItems: ({
     label: string;
     url: string;
     description: string;

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

@@ -1,6 +1,8 @@
+"use client";
 import { Header } from "./header.js";
-import { backgroundColor, sectionStyle, actionDefaults, button, action } from "../../../puck-base/core/fields.js";
-const defaultPrimaryNavigationItems = [
+import { actionDefaults, button, action } from "../../../puck-base/core/fields.js";
+import { createStylesField } from "../../../puck-base/core/styles.js";
+const defaultNavigationItems = [
   {
     label: "Home",
     url: "/",
@@ -73,30 +75,25 @@ const defaultPrimaryNavigationItems = [
     ]
   }
 ];
-const defaultSecondaryNavigationItems = [
+const defaultActionItems = [
   {
-    label: "Book a demo",
-    url: "#",
-    variant: "ghost",
-    icon: "none",
-    divider: "true",
-    isHiddenOnMobile: "true"
-  },
-  {
-    label: "Sign in",
-    url: "#",
-    variant: "outline",
-    icon: "none",
-    divider: "false",
-    isHiddenOnMobile: "false"
-  },
-  {
-    label: "Get started",
+    label: "Get Start",
     url: "#",
+    action: {
+      type: "email",
+      pageUrl: "",
+      externalUrl: "#",
+      openInNewTab: "false",
+      email: "",
+      subject: "",
+      phone: "",
+      sectionId: "",
+      downloadUrl: ""
+    },
     variant: "default",
     icon: "none",
     divider: "false",
-    isHiddenOnMobile: "true"
+    isHiddenOnMobile: "false"
   }
 ];
 const conf = {
@@ -105,8 +102,8 @@ const conf = {
       label: "company name",
       type: "text"
     },
-    primaryNavigation: {
-      label: "primary navigation",
+    navigation: {
+      label: "navigation",
       type: "array",
       max: 4,
       getItemSummary: (item, index = 0) => item.label || `Link ${index + 1}`,
@@ -142,8 +139,8 @@ const conf = {
         items: []
       }
     },
-    secondaryNavigation: {
-      label: "secondary navigation",
+    actions: {
+      label: "actions",
       type: "array",
       max: 4,
       getItemSummary: (item, index = 0) => item.label || `Link ${index}`,
@@ -179,13 +176,12 @@ const conf = {
         isHiddenOnMobile: "true"
       }
     },
-    sectionStyle,
-    backgroundColor
+    styles: createStylesField()
   },
   defaultProps: {
     companyName: "TWBlocks",
-    primaryNavigation: defaultPrimaryNavigationItems,
-    secondaryNavigation: defaultSecondaryNavigationItems,
+    navigation: defaultNavigationItems,
+    actions: defaultActionItems,
     __metadata: {
       type: "layout"
     }
@@ -194,5 +190,5 @@ const conf = {
 };
 export {
   conf as default,
-  defaultPrimaryNavigationItems
+  defaultNavigationItems
 };

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

@@ -0,0 +1,41 @@
+type HeaderVariant = "header-1" | "sticky-nav-1";
+type HeaderPadding = {
+    top?: "none" | "small" | "medium" | "large";
+    bottom?: "none" | "small" | "medium" | "large";
+};
+type HeaderSectionStyle = "default" | "dark" | "muted" | "inverted" | "custom";
+type HeaderButton = {
+    label: string;
+    url?: string;
+    action?: string;
+    variant?: "default" | "secondary" | "outline" | "ghost" | "link" | "destructive";
+    size?: "default" | "sm" | "lg" | "icon";
+    icon?: string;
+    divider?: boolean;
+    isHiddenOnMobile?: boolean;
+};
+type HeaderNavigationItem = {
+    label: string;
+    url?: string;
+    description?: string;
+    cta?: HeaderButton;
+    items?: Array<{
+        label: string;
+        url: string;
+    }>;
+};
+type HeaderSectionProps = {
+    variant?: HeaderVariant;
+    __metadata?: {
+        type: "layout";
+    };
+    companyName?: string;
+    logo?: string;
+    navigation?: HeaderNavigationItem[];
+    actions?: HeaderButton[];
+    styles?: {
+        padding?: HeaderPadding;
+        sectionStyle?: HeaderSectionStyle;
+        backgroundColor?: string;
+    };
+};

package/dist/components/puck-block/header-sections/sticky-nav-1/index.js

@@ -1,26 +1,26 @@
-import { backgroundColor, sectionStyle } from "../../../puck-base/core/fields.js";
 import { StickyNav } from "./sticky-nav.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
 const conf = {
   fields: {
     logo: { type: "text", contentEditable: true },
-    links: {
+    navigation: {
       type: "array",
       max: 8,
       getItemSummary: (item, i = 0) => item.label || `Link ${i + 1}`,
-      arrayFields: { label: { type: "text" }, href: { type: "text" } },
-      defaultItemProps: { label: "Link", href: "#" }
+      arrayFields: { label: { type: "text" }, url: { type: "text" } },
+      defaultItemProps: { label: "Link", url: "#" }
     },
-    sectionStyle,
-    backgroundColor
+    styles: createStylesField()
   },
   defaultProps: {
     logo: "Brand",
-    links: [
-      { label: "Features", href: "#features" },
-      { label: "Pricing", href: "#pricing" },
-      { label: "About", href: "#about" },
-      { label: "Contact", href: "#contact" }
-    ]
+    navigation: [
+      { label: "Features", url: "#features" },
+      { label: "Pricing", url: "#pricing" },
+      { label: "About", url: "#about" },
+      { label: "Contact", url: "#contact" }
+    ],
+    styles: createStylesDefaults()
   },
   render: StickyNav
 };

package/dist/components/puck-block/header-sections/sticky-nav-1/sticky-nav.d.ts

@@ -1,12 +1,14 @@
 import { type CompoundContainerProps } from "@/components/puck-base/container";
 export interface StickyNavProps {
-    padding?: CompoundContainerProps["padding"];
-    sectionStyle?: CompoundContainerProps["sectionStyle"];
-    backgroundColor?: string;
-    links?: Array<{
+    navigation?: Array<{
         label: string;
-        href: string;
+        url: string;
     }>;
     logo?: string;
+    styles?: {
+        padding?: CompoundContainerProps["padding"];
+        sectionStyle?: CompoundContainerProps["sectionStyle"];
+        backgroundColor?: string;
+    };
 }
-export declare const StickyNav: ({ links, logo, sectionStyle, backgroundColor }: StickyNavProps) => import("react/jsx-runtime").JSX.Element;
+export declare const StickyNav: ({ navigation, logo, styles }: StickyNavProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/puck-block/header-sections/sticky-nav-1/sticky-nav.js

@@ -19,22 +19,22 @@ const NAV_SECTION_VARS = {
     "--border": "oklch(0.87 0 0)"
   }
 };
-const StickyNav = ({ links = [], logo, sectionStyle, backgroundColor }) => {
-  const sectionVars = sectionStyle && sectionStyle !== "default" ? NAV_SECTION_VARS[sectionStyle] ?? {} : {};
+const StickyNav = ({ navigation = [], logo, styles }) => {
+  const sectionVars = (styles == null ? void 0 : styles.sectionStyle) && styles.sectionStyle !== "default" ? NAV_SECTION_VARS[styles.sectionStyle] ?? {} : {};
   return /* @__PURE__ */ jsx(
     "nav",
     {
       className: "bg-background/80 border-border sticky top-0 z-50 border-b backdrop-blur-md",
       style: {
-        ...backgroundColor ? { backgroundColor } : {},
+        ...(styles == null ? void 0 : styles.backgroundColor) ? { backgroundColor: styles.backgroundColor } : {},
         ...sectionVars
       },
       children: /* @__PURE__ */ jsxs("div", { className: "mx-auto flex h-14 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8", children: [
         /* @__PURE__ */ jsx("span", { className: "text-foreground text-lg font-bold", children: logo || "Brand" }),
-        /* @__PURE__ */ jsx("div", { className: "hidden gap-6 md:flex", children: links.map((link, i) => /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("div", { className: "hidden gap-6 md:flex", children: navigation.map((link, i) => /* @__PURE__ */ jsx(
           "a",
           {
-            href: link.href || "#",
+            href: link.url || "#",
             className: "text-muted-foreground hover:text-foreground text-sm transition-colors",
             children: link.label
           },