dune-react 0.0.31 → 0.0.33

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

@@ -1,10 +1,10 @@
 import { FloatingBorderedNavbar, FloatingBorderedNavbarDefaults } from "./floating-bordered-navbar.js";
-import { imageField } from "../../../puck-core/core/props/media.js";
-import { buttonField } from "../../../puck-core/core/props/interactive.js";
+import { mediaField } from "../../../puck-core/core/props/media.js";
+import { socialLinksField, buttonsField } 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, ...sectionWrapperFields } } },
+  fields: { __metadata: { type: "object", ai: { instructions: "Layout metadata identifying this component as a header section. The type field must always be 'header'." }, objectFields: { type: { type: "text" } } }, logo: mediaField, navLinks: { type: "array", max: 6, getItemSummary: (item, i = 0) => item.title || `Link ${i + 1}`, arrayFields: { title: { type: "text" }, url: { type: "text" } } }, buttons: buttonsField, socialLinks: socialLinksField, styles: { type: "object", label: "Styles", objectFields: { position: headerStyleFields.position, showSocialLinks: headerStyleFields.showSocialLinks, ...sectionWrapperFields } } },
   defaultProps: FloatingBorderedNavbarDefaults,
   render: FloatingBorderedNavbar
 };

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

@@ -2,12 +2,13 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useState } from "react";
 import { Button } from "../../../shadcn/button.js";
-import { CompoundImage } from "../../../puck-base/image.js";
+import { CompoundMedia } from "../../../puck-base/media.js";
 import { motion, AnimatePresence } from "motion/react";
 import { cn } from "../../../../utils/css-utils.js";
 import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
+import { CompoundSocialLinks } from "../../../puck-base/social-links.js";
 const FullscreenOverlayNavbar = (props) => {
-  const { logo, navLinks, button, styles } = {
+  const { logo, navLinks, buttons, socialLinks, styles } = {
     ...FullscreenOverlayNavbarDefaults,
     ...props
   };
@@ -28,17 +29,18 @@ const FullscreenOverlayNavbar = (props) => {
       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, className: "h-9 w-auto" }) }),
+          /* @__PURE__ */ jsx("a", { href: logo == null ? void 0 : logo.url, children: /* @__PURE__ */ jsx(CompoundMedia, { src: logo == null ? void 0 : logo.src, alt: logo == null ? void 0 : logo.alt, className: "h-9 w-auto" }) }),
           /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-2 lg:gap-4", children: [
-            button && /* @__PURE__ */ jsx(
+            (buttons == null ? void 0 : buttons[0]) && /* @__PURE__ */ jsx(
               Button,
               {
-                variant: button.variant,
-                size: button.size,
+                variant: buttons[0].variant,
+                size: buttons[0].size,
                 className: "px-4 py-1 md:px-6 md:py-2",
-                children: button.label
+                children: buttons[0].label
               }
             ),
+            (styles == null ? void 0 : styles.showSocialLinks) === "true" && /* @__PURE__ */ jsx(CompoundSocialLinks, { links: socialLinks ?? [], iconClassName: "size-5", className: "gap-2" }),
             /* @__PURE__ */ jsx(
               "button",
               {
@@ -123,15 +125,18 @@ const FullscreenOverlayNavbar = (props) => {
                 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
-                )) })
+                children: /* @__PURE__ */ jsxs("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
+                  )),
+                  (styles == null ? void 0 : styles.showSocialLinks) === "true" && /* @__PURE__ */ jsx(CompoundSocialLinks, { links: socialLinks ?? [], className: "pt-6" })
+                ] })
               }
             )
           }
@@ -153,8 +158,8 @@ const FullscreenOverlayNavbarDefaults = {
     { url: "#", title: "Link Three" },
     { url: "#", title: "Link Four" }
   ],
-  button: { label: "Button", size: "sm" },
-  buttons: [],
+  buttons: [{ label: "Button", size: "sm" }],
+  socialLinks: [],
   styles: { overlayContent: "linksOnly" }
 };
 export {

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

@@ -4,6 +4,17 @@ export { FullscreenOverlayNavbar, FullscreenOverlayNavbarDefaults };
 export type { FullscreenOverlayNavbarProps };
 declare const conf: {
     fields: {
+        __metadata: {
+            type: string;
+            ai: {
+                instructions: string;
+            };
+            objectFields: {
+                type: {
+                    type: string;
+                };
+            };
+        };
         logo: {
             type: "object";
             objectFields: {
@@ -28,9 +39,13 @@ declare const conf: {
                 };
             };
         };
-        button: {
-            readonly type: "object";
-            readonly objectFields: {
+        buttons: {
+            readonly type: "array";
+            readonly max: 3;
+            readonly getItemSummary: (item: {
+                label?: string;
+            }, index?: number) => string;
+            readonly arrayFields: {
                 readonly label: {
                     readonly type: "text";
                 };
@@ -82,6 +97,68 @@ declare const conf: {
                     render: typeof import("../../../puck-core/fields/icon-picker-field").IconPickerField;
                 };
             };
+            readonly defaultItemProps: {
+                readonly label: "Button";
+                readonly action: {
+                    readonly type: "page";
+                    readonly pageUrl: "";
+                    readonly externalUrl: "";
+                    readonly openInNewTab: "false";
+                    readonly email: "";
+                    readonly subject: "";
+                    readonly phone: "";
+                    readonly sectionId: "";
+                    readonly downloadUrl: "";
+                };
+                readonly variant: "default";
+                readonly size: "default";
+                readonly icon: "none";
+            };
+            readonly ai: {
+                readonly instructions: "Buttons must use the same size";
+            };
+        };
+        socialLinks: {
+            readonly type: "array";
+            readonly label: "Social Links";
+            readonly getItemSummary: (item: {
+                platform?: string;
+            }, i?: number) => string;
+            readonly arrayFields: {
+                readonly platform: {
+                    readonly type: "select";
+                    readonly label: "Platform";
+                    readonly options: readonly [{
+                        readonly label: "Twitter / X";
+                        readonly value: "twitter";
+                    }, {
+                        readonly label: "Facebook";
+                        readonly value: "facebook";
+                    }, {
+                        readonly label: "Instagram";
+                        readonly value: "instagram";
+                    }, {
+                        readonly label: "LinkedIn";
+                        readonly value: "linkedin";
+                    }, {
+                        readonly label: "YouTube";
+                        readonly value: "youtube";
+                    }, {
+                        readonly label: "GitHub";
+                        readonly value: "github";
+                    }, {
+                        readonly label: "TikTok";
+                        readonly value: "tiktok";
+                    }, {
+                        readonly label: "Discord";
+                        readonly value: "discord";
+                    }];
+                };
+                readonly url: {
+                    readonly type: "text";
+                    readonly label: "URL";
+                };
+            };
         };
         styles: {
             type: string;
@@ -129,6 +206,17 @@ declare const conf: {
                         readonly value: "withForm";
                     }];
                 };
+                showSocialLinks: {
+                    readonly type: "radio";
+                    readonly label: "Display Social Links";
+                    readonly options: readonly [{
+                        readonly label: "Yes";
+                        readonly value: "true";
+                    }, {
+                        readonly label: "No";
+                        readonly value: "false";
+                    }];
+                };
             };
         };
     };

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

@@ -1,10 +1,10 @@
 import { FullscreenOverlayNavbar, FullscreenOverlayNavbarDefaults } from "./fullscreen-overlay-navbar.js";
-import { imageField } from "../../../puck-core/core/props/media.js";
-import { buttonField } from "../../../puck-core/core/props/interactive.js";
+import { mediaField } from "../../../puck-core/core/props/media.js";
+import { socialLinksField, buttonsField } 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, ...sectionWrapperFields } } },
+  fields: { __metadata: { type: "object", ai: { instructions: "Layout metadata identifying this component as a header section. The type field must always be 'header'." }, objectFields: { type: { type: "text" } } }, logo: mediaField, navLinks: { type: "array", max: 8, getItemSummary: (item, i = 0) => item.title || `Link ${i + 1}`, arrayFields: { title: { type: "text" }, url: { type: "text" } } }, buttons: buttonsField, socialLinks: socialLinksField, styles: { type: "object", label: "Styles", objectFields: { overlayContent: headerStyleFields.overlayContent, showSocialLinks: headerStyleFields.showSocialLinks, ...sectionWrapperFields } } },
   defaultProps: FullscreenOverlayNavbarDefaults,
   render: FullscreenOverlayNavbar
 };

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

@@ -4,6 +4,17 @@ export { MegaMenuNavbar, MegaMenuNavbarDefaults };
 export type { MegaMenuNavbarProps };
 declare const conf: {
     fields: {
+        __metadata: {
+            type: string;
+            ai: {
+                instructions: string;
+            };
+            objectFields: {
+                type: {
+                    type: string;
+                };
+            };
+        };
         logo: {
             type: "object";
             objectFields: {
@@ -107,6 +118,48 @@ declare const conf: {
                 readonly instructions: "Buttons must use the same size";
             };
         };
+        socialLinks: {
+            readonly type: "array";
+            readonly label: "Social Links";
+            readonly getItemSummary: (item: {
+                platform?: string;
+            }, i?: number) => string;
+            readonly arrayFields: {
+                readonly platform: {
+                    readonly type: "select";
+                    readonly label: "Platform";
+                    readonly options: readonly [{
+                        readonly label: "Twitter / X";
+                        readonly value: "twitter";
+                    }, {
+                        readonly label: "Facebook";
+                        readonly value: "facebook";
+                    }, {
+                        readonly label: "Instagram";
+                        readonly value: "instagram";
+                    }, {
+                        readonly label: "LinkedIn";
+                        readonly value: "linkedin";
+                    }, {
+                        readonly label: "YouTube";
+                        readonly value: "youtube";
+                    }, {
+                        readonly label: "GitHub";
+                        readonly value: "github";
+                    }, {
+                        readonly label: "TikTok";
+                        readonly value: "tiktok";
+                    }, {
+                        readonly label: "Discord";
+                        readonly value: "discord";
+                    }];
+                };
+                readonly url: {
+                    readonly type: "text";
+                    readonly label: "URL";
+                };
+            };
+        };
         styles: {
             type: string;
             label: string;
@@ -156,6 +209,17 @@ declare const conf: {
                         readonly value: "linksBlog";
                     }];
                 };
+                showSocialLinks: {
+                    readonly type: "radio";
+                    readonly label: "Display Social Links";
+                    readonly options: readonly [{
+                        readonly label: "Yes";
+                        readonly value: "true";
+                    }, {
+                        readonly label: "No";
+                        readonly value: "false";
+                    }];
+                };
             };
         };
     };

package/dist/components/puck-block/header-sections/mega-menu-navbar/index.js

@@ -1,10 +1,10 @@
 import { MegaMenuNavbar, MegaMenuNavbarDefaults } from "./mega-menu-navbar.js";
-import { imageField } from "../../../puck-core/core/props/media.js";
-import { buttonsField } from "../../../puck-core/core/props/interactive.js";
+import { mediaField } from "../../../puck-core/core/props/media.js";
+import { socialLinksField, buttonsField } 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" } } }, buttons: buttonsField, styles: { type: "object", label: "Styles", objectFields: { megaMenuLayout: headerStyleFields.megaMenuLayout, ...sectionWrapperFields } } },
+  fields: { __metadata: { type: "object", ai: { instructions: "Layout metadata identifying this component as a header section. The type field must always be 'header'." }, objectFields: { type: { type: "text" } } }, logo: mediaField, navLinks: { type: "array", max: 6, getItemSummary: (item, i = 0) => item.title || `Link ${i + 1}`, arrayFields: { title: { type: "text" }, url: { type: "text" } } }, buttons: buttonsField, socialLinks: socialLinksField, styles: { type: "object", label: "Styles", objectFields: { megaMenuLayout: headerStyleFields.megaMenuLayout, showSocialLinks: headerStyleFields.showSocialLinks, ...sectionWrapperFields } } },
   defaultProps: MegaMenuNavbarDefaults,
   render: MegaMenuNavbar
 };

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

@@ -3,34 +3,41 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { Button } from "../../../shadcn/button.js";
 import { CompoundButton } from "../../../puck-base/button.js";
-import { CompoundImage } from "../../../puck-base/image.js";
+import { CompoundMedia } from "../../../puck-base/media.js";
 import { motion } from "motion/react";
 import { cn } from "../../../../utils/css-utils.js";
 import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
+import { CompoundSocialLinks } from "../../../puck-base/social-links.js";
 const MegaMenuNavbar = (props) => {
-  const { logo, navLinks, buttons, styles } = { ...MegaMenuNavbarDefaults, ...props };
+  const { logo, navLinks, buttons, socialLinks, styles } = { ...MegaMenuNavbarDefaults, ...props };
   const { className: sectionClassName, style: sectionStyle, css } = styles ?? {};
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
   return /* @__PURE__ */ jsx(SectionWrapper, { className: cn("relative z-[999] flex w-full items-center justify-between border-b border-border-primary bg-background-primary lg:min-h-18 lg:px-[5%]", sectionClassName), style: sectionStyle, css, children: /* @__PURE__ */ jsxs("div", { className: "size-full lg:flex lg:items-center lg:justify-between", children: [
     /* @__PURE__ */ jsxs("div", { className: "lg:flex", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex min-h-16 items-center justify-between px-[5%] md:min-h-18 lg:min-h-full lg:px-0", 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, className: "h-9 w-auto" }) }),
+        /* @__PURE__ */ jsx("a", { href: logo == null ? void 0 : logo.url, children: /* @__PURE__ */ jsx(CompoundMedia, { src: logo == null ? void 0 : logo.src, alt: logo == null ? void 0 : logo.alt, className: "h-9 w-auto" }) }),
         /* @__PURE__ */ jsx("button", { className: "-mr-2 flex size-12 flex-col items-center 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" }, i)) })
       ] }),
       /* @__PURE__ */ jsxs(motion.div, { variants: { open: { height: "var(--height-open, 100dvh)" }, close: { height: "var(--height-closed, 0)" } }, initial: "close", exit: "close", animate: isMobileMenuOpen ? "open" : "close", transition: { duration: 0.4 }, className: "overflow-auto px-[5%] lg:ml-6 lg:flex lg:items-center lg:px-0 lg:[--height-closed:auto] lg:[--height-open:auto]", children: [
         navLinks == null ? void 0 : navLinks.map((navLink, index) => /* @__PURE__ */ jsx("a", { href: navLink.url, className: "block py-3 text-md first:pt-7 lg:px-4 lg:py-6 lg:text-base first:lg:pt-6", children: navLink.title }, index)),
-        /* @__PURE__ */ jsx("div", { className: "mt-6 flex w-full flex-col gap-y-4 pb-24 lg:hidden lg:pb-0", children: buttons == null ? void 0 : buttons.map((b, i) => /* @__PURE__ */ jsx(Button, { className: "w-full", variant: b.variant, size: b.size, children: b.label }, i)) })
+        /* @__PURE__ */ jsxs("div", { className: "mt-6 flex w-full flex-col gap-y-4 pb-24 lg:hidden lg:pb-0", children: [
+          buttons == null ? void 0 : buttons.map((b, i) => /* @__PURE__ */ jsx(Button, { className: "w-full", variant: b.variant, size: b.size, children: b.label }, i)),
+          (styles == null ? void 0 : styles.showSocialLinks) === "true" && /* @__PURE__ */ jsx(CompoundSocialLinks, { links: socialLinks ?? [], iconClassName: "size-5", className: "pt-4" })
+        ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "hidden lg:flex lg:gap-4", children: buttons == null ? void 0 : buttons.map((b, i) => /* @__PURE__ */ jsx(CompoundButton, { label: b.label, variant: b.variant, size: b.size, action: b.action, icon: b.icon }, i)) })
+    /* @__PURE__ */ jsxs("div", { className: "hidden lg:flex lg:items-center lg:gap-4", children: [
+      buttons == null ? void 0 : buttons.map((b, i) => /* @__PURE__ */ jsx(CompoundButton, { label: b.label, variant: b.variant, size: b.size, action: b.action, icon: b.icon }, i)),
+      (styles == null ? void 0 : styles.showSocialLinks) === "true" && /* @__PURE__ */ jsx(CompoundSocialLinks, { links: socialLinks ?? [], iconClassName: "size-5", className: "gap-2" })
+    ] })
   ] }) });
 };
 const MegaMenuNavbarDefaults = {
   __metadata: { type: "header" },
   logo: { url: "#", src: "https://file.springbrand.ai/web_assets/template-logo.svg", alt: "Logo image" },
   navLinks: [{ title: "Link One", url: "#" }, { title: "Link Two", url: "#" }, { title: "Link Three", url: "#" }, { title: "Link Four", url: "#" }],
-  button: { label: "Button", size: "sm" },
   buttons: [{ label: "Button", variant: "secondary", size: "sm" }, { label: "Button", size: "sm" }],
+  socialLinks: [],
   styles: { megaMenuLayout: "2colGrid" }
 };
 export {

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

@@ -4,9 +4,9 @@
  * 基础类型引用自 ../props/（全局共享）
  * HeaderSectionStyles 为 header 特有的样式字段
  */
-import type { BaseImage } from "@/components/puck-core/core/props/media";
-import type { BaseButton } from "@/components/puck-core/core/props/interactive";
-export type { BaseImage, BaseButton };
+import type { BaseMedia } from "@/components/puck-core/core/props/media";
+import type { BaseButton, BaseSocialLink } from "@/components/puck-core/core/props/interactive";
+export type { BaseMedia, BaseButton, BaseSocialLink };
 export interface HeaderSectionStyles {
     className?: string;
     style?: React.CSSProperties;
@@ -15,6 +15,7 @@ export interface HeaderSectionStyles {
     overlayContent?: "linksOnly" | "withSocial" | "withContact" | "withArticles" | "withForm";
     megaMenuLayout?: "2colGrid" | "3colGrid" | "4colGrid" | "3colSidebar" | "4colFooter" | "linksBlog";
     position?: "relative" | "fixed";
+    showSocialLinks?: string;
 }
 export interface NavLink {
     url: string;
@@ -22,12 +23,12 @@ export interface NavLink {
     subMenuLinks?: NavLink[];
 }
 export interface HeaderSectionBaseProps {
-    logo: BaseImage & {
+    logo: BaseMedia & {
         url?: string;
     };
     navLinks: NavLink[];
-    button: BaseButton;
     buttons: BaseButton[];
+    socialLinks: BaseSocialLink[];
     styles: HeaderSectionStyles;
     __metadata?: {
         type: "header";
@@ -102,6 +103,17 @@ export declare const headerStyleFields: {
             readonly value: "fixed";
         }];
     };
+    readonly showSocialLinks: {
+        readonly type: "radio";
+        readonly label: "Display Social Links";
+        readonly options: readonly [{
+            readonly label: "Yes";
+            readonly value: "true";
+        }, {
+            readonly label: "No";
+            readonly value: "false";
+        }];
+    };
 };
 /** 将 HeaderSectionBaseProps 与组件特有字段合并，生成最终 Props */
 export type HeaderComponentProps<T extends object = object> = React.ComponentPropsWithoutRef<"section"> & Partial<HeaderSectionBaseProps> & Partial<T>;

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

@@ -38,6 +38,14 @@ const headerStyleFields = {
       { label: "Relative", value: "relative" },
       { label: "Fixed", value: "fixed" }
     ]
+  },
+  showSocialLinks: {
+    type: "radio",
+    label: "Display Social Links",
+    options: [
+      { label: "Yes", value: "true" },
+      { label: "No", value: "false" }
+    ]
   }
 };
 export {

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

@@ -4,6 +4,17 @@ export { StandardNavbar, StandardNavbarDefaults };
 export type { StandardNavbarProps };
 declare const conf: {
     fields: {
+        __metadata: {
+            type: string;
+            ai: {
+                instructions: string;
+            };
+            objectFields: {
+                type: {
+                    type: string;
+                };
+            };
+        };
         logo: {
             type: "object";
             objectFields: {
@@ -107,6 +118,48 @@ declare const conf: {
                 readonly instructions: "Buttons must use the same size";
             };
         };
+        socialLinks: {
+            readonly type: "array";
+            readonly label: "Social Links";
+            readonly getItemSummary: (item: {
+                platform?: string;
+            }, i?: number) => string;
+            readonly arrayFields: {
+                readonly platform: {
+                    readonly type: "select";
+                    readonly label: "Platform";
+                    readonly options: readonly [{
+                        readonly label: "Twitter / X";
+                        readonly value: "twitter";
+                    }, {
+                        readonly label: "Facebook";
+                        readonly value: "facebook";
+                    }, {
+                        readonly label: "Instagram";
+                        readonly value: "instagram";
+                    }, {
+                        readonly label: "LinkedIn";
+                        readonly value: "linkedin";
+                    }, {
+                        readonly label: "YouTube";
+                        readonly value: "youtube";
+                    }, {
+                        readonly label: "GitHub";
+                        readonly value: "github";
+                    }, {
+                        readonly label: "TikTok";
+                        readonly value: "tiktok";
+                    }, {
+                        readonly label: "Discord";
+                        readonly value: "discord";
+                    }];
+                };
+                readonly url: {
+                    readonly type: "text";
+                    readonly label: "URL";
+                };
+            };
+        };
         styles: {
             type: string;
             label: string;
@@ -147,6 +200,17 @@ declare const conf: {
                         readonly value: "richGrouped";
                     }];
                 };
+                showSocialLinks: {
+                    readonly type: "radio";
+                    readonly label: "Display Social Links";
+                    readonly options: readonly [{
+                        readonly label: "Yes";
+                        readonly value: "true";
+                    }, {
+                        readonly label: "No";
+                        readonly value: "false";
+                    }];
+                };
             };
         };
     };

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

@@ -1,14 +1,16 @@
 import { StandardNavbar, StandardNavbarDefaults } from "./standard-navbar.js";
-import { imageField } from "../../../puck-core/core/props/media.js";
-import { buttonsField } from "../../../puck-core/core/props/interactive.js";
+import { mediaField } from "../../../puck-core/core/props/media.js";
+import { socialLinksField, buttonsField } 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,
+    __metadata: { type: "object", ai: { instructions: "Layout metadata identifying this component as a header section. The type field must always be 'header'." }, objectFields: { type: { type: "text" } } },
+    logo: mediaField,
     navLinks: { type: "array", max: 6, getItemSummary: (item, i = 0) => item.title || `Link ${i + 1}`, arrayFields: { title: { type: "text" }, url: { type: "text" } } },
     buttons: buttonsField,
-    styles: { type: "object", label: "Styles", objectFields: { dropdownType: headerStyleFields.dropdownType, ...sectionWrapperFields } }
+    socialLinks: socialLinksField,
+    styles: { type: "object", label: "Styles", objectFields: { dropdownType: headerStyleFields.dropdownType, showSocialLinks: headerStyleFields.showSocialLinks, ...sectionWrapperFields } }
   },
   defaultProps: StandardNavbarDefaults,
   render: StandardNavbar

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

@@ -3,19 +3,20 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { Button } from "../../../shadcn/button.js";
 import { useMediaQuery } from "../../../../hooks/use-media-query.js";
-import { CompoundImage } from "../../../puck-base/image.js";
+import { CompoundMedia } from "../../../puck-base/media.js";
 import { motion, AnimatePresence } from "motion/react";
 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";
+import { CompoundSocialLinks } from "../../../puck-base/social-links.js";
 const StandardNavbar = (props) => {
-  const { logo, navLinks, buttons, styles } = { ...StandardNavbarDefaults, ...props };
+  const { logo, navLinks, buttons, socialLinks, styles } = { ...StandardNavbarDefaults, ...props };
   const { className: sectionClassName, style: sectionStyle, css } = styles ?? {};
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
   const isMobile = useMediaQuery("(max-width: 991px)");
   return /* @__PURE__ */ jsx(SectionWrapper, { className: cn("z-[999] flex w-full items-center border-b border-border-primary bg-background-primary lg:min-h-18 lg:px-[5%]", sectionClassName), style: sectionStyle, css, children: /* @__PURE__ */ jsxs("div", { className: "size-full lg:flex lg:items-center lg:justify-between", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex min-h-16 items-center justify-between px-[5%] md:min-h-18 lg:min-h-full lg:px-0", 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, className: "h-9 w-auto" }) }),
+      /* @__PURE__ */ jsx("a", { href: logo == null ? void 0 : logo.url, children: /* @__PURE__ */ jsx(CompoundMedia, { src: logo == null ? void 0 : logo.src, alt: logo == null ? void 0 : logo.alt, className: "h-9 w-auto" }) }),
       /* @__PURE__ */ jsxs("button", { className: "-mr-2 flex size-12 flex-col items-center justify-center lg:hidden", onClick: () => setIsMobileMenuOpen((prev) => !prev), children: [
         /* @__PURE__ */ jsx(motion.span, { className: "my-[3px] h-0.5 w-6 bg-black", animate: isMobileMenuOpen ? ["open", "rotatePhase"] : "closed", variants: topLineVariants }),
         /* @__PURE__ */ jsx(motion.span, { className: "my-[3px] h-0.5 w-6 bg-black", animate: isMobileMenuOpen ? "open" : "closed", variants: middleLineVariants }),
@@ -26,7 +27,10 @@ const StandardNavbar = (props) => {
       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: "block py-3 text-md first:pt-7 lg:px-4 lg:py-2 lg:text-base first:lg:pt-2", children: navLink.title }, index)
       ),
-      /* @__PURE__ */ jsx("div", { className: "mt-6 flex flex-col items-center gap-4 lg:ml-4 lg:mt-0 lg:flex-row", children: buttons == null ? void 0 : buttons.map((button, index) => /* @__PURE__ */ jsx(Button, { variant: button.variant, size: button.size, className: "w-full", children: button.label }, index)) })
+      /* @__PURE__ */ jsxs("div", { className: "mt-6 flex flex-col items-center gap-4 lg:ml-4 lg:mt-0 lg:flex-row", children: [
+        buttons == null ? void 0 : buttons.map((button, index) => /* @__PURE__ */ jsx(Button, { variant: button.variant, size: button.size, className: "w-full", children: button.label }, index)),
+        (styles == null ? void 0 : styles.showSocialLinks) === "true" && /* @__PURE__ */ jsx(CompoundSocialLinks, { links: socialLinks ?? [], iconClassName: "size-5", className: "gap-2" })
+      ] })
     ] })
   ] }) });
 };
@@ -53,8 +57,8 @@ const StandardNavbarDefaults = {
     { title: "Link Three", url: "#" },
     { title: "Link Four", url: "#", subMenuLinks: [{ title: "Link Five", url: "#" }, { title: "Link Six", url: "#" }, { title: "Link Seven", url: "#" }] }
   ],
-  button: { label: "Button", size: "sm" },
   buttons: [{ label: "Button", variant: "secondary", size: "sm" }, { label: "Button", size: "sm" }],
+  socialLinks: [],
   styles: { dropdownType: "simple" }
 };
 export {