dune-react 0.0.8 → 0.0.9

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

@@ -0,0 +1,54 @@
+import { paddingDefaults, image1x1Placeholder, backgroundColor, sectionStyle, padding, image } from "../../../puck-base/core/fields.js";
+import { TeamProfiles } from "./team-profiles.js";
+const defaultMember = {
+  name: "Jane Smith",
+  role: "CEO & Co-founder",
+  image: image1x1Placeholder,
+  description: "Leads the team with a passion for innovation and a commitment to excellence.",
+  instagramUrl: "",
+  linkedinUrl: ""
+};
+const conf = {
+  fields: {
+    heading: { type: "text", contentEditable: true },
+    description: { type: "textarea", contentEditable: true },
+    members: {
+      type: "array",
+      max: 8,
+      getItemSummary: (item, index = 0) => item.name || `Member ${index + 1}`,
+      arrayFields: {
+        name: { type: "text", contentEditable: true },
+        role: { type: "text", contentEditable: true },
+        image,
+        description: { type: "textarea", contentEditable: true },
+        instagramUrl: { type: "text", label: "Instagram URL" },
+        linkedinUrl: { type: "text", label: "LinkedIn URL" }
+      },
+      defaultItemProps: defaultMember
+    },
+    padding,
+    sectionStyle,
+    backgroundColor
+  },
+  defaultProps: {
+    heading: "Your Personal\ntraining partner",
+    description: "Our team brings focused expertise and personalized coaching to help you reach your goals.",
+    members: [
+      {
+        ...defaultMember,
+        name: "Jane Smith",
+        role: "Founder & Head Coach"
+      },
+      {
+        ...defaultMember,
+        name: "Alex Johnson",
+        role: "Strength & Conditioning Coach"
+      }
+    ],
+    padding: paddingDefaults
+  },
+  render: TeamProfiles
+};
+export {
+  conf
+};

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

@@ -0,0 +1,21 @@
+import { CompoundContainerProps } from "@/components/puck-base/container";
+export interface TeamMemberProfile {
+    name: string;
+    role: string;
+    image?: {
+        src: string;
+        alt?: string;
+    };
+    description?: string;
+    instagramUrl?: string;
+    linkedinUrl?: string;
+}
+export interface TeamProfilesProps {
+    padding?: CompoundContainerProps["padding"];
+    sectionStyle?: CompoundContainerProps["sectionStyle"];
+    backgroundColor?: string;
+    heading?: string;
+    description?: string;
+    members?: TeamMemberProfile[];
+}
+export declare const TeamProfiles: ({ padding, sectionStyle, backgroundColor, heading, description, members, }: TeamProfilesProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/puck-block/team-sections/team-profiles-1/team-profiles.js

@@ -0,0 +1,107 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CompoundContainer } from "../../../puck-base/container.js";
+import { CompoundImage } from "../../../puck-base/image.js";
+const InstagramIcon = () => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    width: "20",
+    height: "20",
+    className: "size-5",
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        fill: "currentColor",
+        fillRule: "evenodd",
+        d: "M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2m0 3.75c-1.697 0-1.91.007-2.577.038-.665.03-1.12.136-1.517.29-.411.16-.76.374-1.107.721a3.1 3.1 0 0 0-.72 1.107c-.155.398-.261.852-.291 1.517-.03.667-.038.88-.038 2.577s.007 1.91.038 2.577c.03.665.136 1.12.29 1.517.16.411.374.76.721 1.107.347.348.696.561 1.107.72.398.155.852.261 1.517.291.667.03.88.038 2.577.038s1.91-.007 2.577-.038c.665-.03 1.12-.136 1.517-.29.411-.16.76-.373 1.107-.721.348-.348.561-.696.72-1.107.155-.398.261-.852.291-1.517.03-.667.038-.88.038-2.577s-.007-1.91-.038-2.577c-.03-.665-.136-1.12-.29-1.517a3.1 3.1 0 0 0-.721-1.107 3.1 3.1 0 0 0-1.107-.72c-.398-.155-.852-.261-1.517-.291-.667-.03-.88-.038-2.577-.038m0 1.126c1.669 0 1.867.006 2.525.037.61.027.94.13 1.161.215.292.113.5.249.719.467s.354.427.467.719c.086.22.188.551.215 1.16.03.66.037.857.037 2.526s-.006 1.867-.037 2.525c-.027.61-.13.94-.215 1.161-.113.292-.249.5-.467.719a1.9 1.9 0 0 1-.719.467c-.22.086-.551.188-1.16.215-.66.03-.857.037-2.526.037s-1.867-.006-2.526-.037c-.609-.027-.94-.13-1.16-.215a1.9 1.9 0 0 1-.719-.467 1.9 1.9 0 0 1-.467-.719c-.086-.22-.188-.551-.215-1.16-.03-.66-.037-.857-.037-2.526s.006-1.867.037-2.526c.027-.609.13-.94.215-1.16.113-.292.249-.5.467-.719s.427-.354.719-.467c.22-.086.551-.188 1.16-.215.66-.03.857-.037 2.526-.037m0 1.915a3.21 3.21 0 1 0 0 6.419 3.21 3.21 0 0 0 0-6.42m0 5.292a2.083 2.083 0 1 1 0-4.166 2.083 2.083 0 0 1 0 4.166m4.086-5.42a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0",
+        clipRule: "evenodd"
+      }
+    )
+  }
+);
+const LinkedInIcon = () => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    width: "20",
+    height: "20",
+    className: "size-5",
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        fill: "currentColor",
+        fillRule: "evenodd",
+        d: "M19.557 2A2.445 2.445 0 0 1 22 4.444v15.113A2.445 2.445 0 0 1 19.557 22H4.444A2.445 2.445 0 0 1 2 19.557V4.444A2.445 2.445 0 0 1 4.444 2zM8.268 18.534V9.717H5.337v8.817zm10.568 0v-5.056c0-2.708-1.446-3.968-3.374-3.968-1.555 0-2.252.855-2.642 1.456V9.717H9.89c.039.828 0 8.817 0 8.817h2.93V13.61c0-.263.02-.527.097-.715.212-.527.694-1.072 1.504-1.072 1.06 0 1.484.809 1.484 1.994v4.717zM6.822 5.466c-1.003 0-1.658.659-1.658 1.523 0 .846.635 1.524 1.62 1.524 1.021 0 1.677-.678 1.677-1.524-.02-.863-.635-1.521-1.639-1.523",
+        clipRule: "evenodd"
+      }
+    )
+  }
+);
+const TeamProfiles = ({
+  padding,
+  sectionStyle,
+  backgroundColor,
+  heading,
+  description,
+  members = []
+}) => /* @__PURE__ */ jsx(
+  CompoundContainer,
+  {
+    padding,
+    sectionStyle,
+    backgroundColor,
+    children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-8 md:gap-16", children: [
+      (heading || description) && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 md:gap-8 lg:flex-row lg:justify-between", children: [
+        heading && /* @__PURE__ */ jsx("div", { className: "w-full lg:basis-1/2", children: /* @__PURE__ */ jsx("h2", { className: "text-foreground max-w-xl text-4xl font-bold leading-tight tracking-tight md:text-5xl", children: heading }) }),
+        description && /* @__PURE__ */ jsx("div", { className: "flex w-full flex-col gap-8 lg:basis-1/2", children: /* @__PURE__ */ jsx("p", { className: "text-muted-foreground max-w-xl text-base leading-relaxed", children: description }) })
+      ] }) }),
+      members.length > 0 && /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-10 md:gap-8 lg:grid-cols-2", children: members.map((member, index) => /* @__PURE__ */ jsx(MemberProfileCard, { member }, index)) })
+    ] })
+  }
+);
+const MemberProfileCard = ({ member }) => {
+  var _a;
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6 md:flex-row md:gap-8", children: [
+    /* @__PURE__ */ jsx("div", { className: "shrink-0 md:w-48", children: /* @__PURE__ */ jsx("div", { className: "bg-muted relative h-72 w-full overflow-hidden rounded-3xl md:h-48 md:w-48 [&>span]:h-full [&>span]:w-full", children: ((_a = member.image) == null ? void 0 : _a.src) && /* @__PURE__ */ jsx(CompoundImage, { src: member.image.src, alt: member.image.alt ?? member.name, className: "h-full w-full object-cover" }) }) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col gap-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+        /* @__PURE__ */ jsx("h3", { className: "text-foreground text-lg font-semibold leading-snug", children: member.name }),
+        /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", children: member.role })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "border-border flex flex-col gap-2 border-t pt-4", children: [
+        member.description && /* @__PURE__ */ jsx("p", { className: "text-foreground text-sm leading-relaxed whitespace-pre-line", children: member.description }),
+        (member.instagramUrl || member.linkedinUrl) && /* @__PURE__ */ jsxs("div", { className: "mt-2 flex items-center gap-3", children: [
+          member.instagramUrl && /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: member.instagramUrl,
+              target: "_blank",
+              rel: "noopener noreferrer",
+              className: "text-foreground hover:text-muted-foreground transition-colors",
+              "aria-label": `${member.name} on Instagram`,
+              children: /* @__PURE__ */ jsx(InstagramIcon, {})
+            }
+          ),
+          member.linkedinUrl && /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: member.linkedinUrl,
+              target: "_blank",
+              rel: "noopener noreferrer",
+              className: "text-foreground hover:text-muted-foreground transition-colors",
+              "aria-label": `${member.name} on LinkedIn`,
+              children: /* @__PURE__ */ jsx(LinkedInIcon, {})
+            }
+          )
+        ] })
+      ] })
+    ] })
+  ] });
+};
+export {
+  TeamProfiles
+};

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

@@ -1,5 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { CompoundContainer } from "../../../puck-base/container.js";
+import { CompoundImage } from "../../../puck-base/image.js";
 const SPEED_DURATION = {
   slow: "40s",
   normal: "25s",
@@ -22,7 +23,7 @@ const LogoMarquee = ({
         {
           className: "h-8 flex-shrink-0 opacity-60 transition-opacity hover:opacity-100 md:h-10",
           children: logo.src ? /* @__PURE__ */ jsx(
-            "img",
+            CompoundImage,
             {
               src: logo.src,
               alt: logo.alt || "",

package/dist/components/puck-block/testimonial-sections/logo-wall-1/index.d.ts

@@ -0,0 +1,5 @@
+import { ComponentConfig } from "@puckeditor/core";
+import { LogoWall1Props } from "./logo-wall";
+export type { LogoWall1Props };
+export declare const conf: ComponentConfig<LogoWall1Props>;
+export default conf;

package/dist/components/puck-block/testimonial-sections/logo-wall-1/index.js

@@ -0,0 +1,50 @@
+import { paddingDefaults, backgroundColor, sectionStyle, padding, image, getPlaceholderImageUrl } from "../../../puck-base/core/fields.js";
+import { LogoWall1 } from "./logo-wall.js";
+const logoPlaceholder = (name) => ({
+  src: getPlaceholderImageUrl("200x200", name),
+  alt: name
+});
+const conf = {
+  fields: {
+    heading: { type: "text", contentEditable: true },
+    description: { type: "textarea", contentEditable: true },
+    logos: {
+      type: "array",
+      max: 20,
+      getItemSummary: (item, index = 0) => item.alt || `Logo ${index + 1}`,
+      arrayFields: {
+        ...image.objectFields
+      },
+      defaultItemProps: logoPlaceholder("Brand")
+    },
+    columns: {
+      type: "radio",
+      options: [
+        { label: "3", value: 3 },
+        { label: "4", value: 4 },
+        { label: "5", value: 5 },
+        { label: "6", value: 6 }
+      ]
+    },
+    padding,
+    sectionStyle,
+    backgroundColor
+  },
+  defaultProps: {
+    padding: paddingDefaults,
+    heading: "Brands and tools we use",
+    description: "We partner with industry-leading platforms and manufacturers to deliver the best experience.",
+    columns: 5,
+    logos: [
+      logoPlaceholder("Partner 1"),
+      logoPlaceholder("Partner 2"),
+      logoPlaceholder("Partner 3"),
+      logoPlaceholder("Partner 4"),
+      logoPlaceholder("Partner 5")
+    ]
+  },
+  render: LogoWall1
+};
+export {
+  conf
+};

package/dist/components/puck-block/testimonial-sections/logo-wall-1/logo-wall.d.ts

@@ -0,0 +1,15 @@
+import { CompoundContainerProps } from "@/components/puck-base/container";
+import { PuckComponent } from "@puckeditor/core";
+export interface LogoWall1Props {
+    heading?: string;
+    description?: string;
+    columns?: 3 | 4 | 5 | 6;
+    logos?: {
+        src: string;
+        alt: string;
+    }[];
+    padding?: CompoundContainerProps["padding"];
+    sectionStyle?: CompoundContainerProps["sectionStyle"];
+    backgroundColor?: string;
+}
+export declare const LogoWall1: PuckComponent<LogoWall1Props>;

package/dist/components/puck-block/testimonial-sections/logo-wall-1/logo-wall.js

@@ -0,0 +1,57 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CompoundContainer } from "../../../puck-base/container.js";
+import { CompoundImage } from "../../../puck-base/image.js";
+import { cn } from "../../../../utils/css-utils.js";
+const LogoWall1 = ({
+  heading,
+  description,
+  columns = 5,
+  logos = [],
+  padding,
+  sectionStyle,
+  backgroundColor
+}) => {
+  return /* @__PURE__ */ jsx(
+    CompoundContainer,
+    {
+      padding,
+      sectionStyle,
+      backgroundColor,
+      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-8 md:gap-16", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex max-w-3xl flex-col gap-4", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+          heading && /* @__PURE__ */ jsx("h2", { className: "font-serif font-regular max-w-xl text-3xl tracking-tighter md:text-4xl", children: heading }),
+          description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground max-w-xl text-base leading-relaxed", children: description })
+        ] }) }),
+        logos && logos.length > 0 && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn("grid grid-cols-2 gap-4", {
+              "md:grid-cols-3": columns === 3,
+              "sm:grid-cols-2 md:grid-cols-4": columns === 4,
+              "sm:grid-cols-3 lg:grid-cols-5": columns === 5,
+              "sm:grid-cols-3 lg:grid-cols-6": columns === 6
+            }),
+            children: logos.map((logo, i) => /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "flex aspect-square items-center justify-center rounded-3xl bg-foreground/5 p-8 transition-colors duration-200 hover:bg-foreground/40",
+                children: logo.src && /* @__PURE__ */ jsx(
+                  CompoundImage,
+                  {
+                    src: logo.src,
+                    alt: logo.alt || "",
+                    className: "h-full w-full object-contain"
+                  }
+                )
+              },
+              i
+            ))
+          }
+        )
+      ] })
+    }
+  );
+};
+export {
+  LogoWall1
+};

package/dist/components/puck-block/testimonial-sections/review-section-1/review-section.js

@@ -1,5 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CompoundContainer } from "../../../puck-base/container.js";
+import { CompoundImage } from "../../../puck-base/image.js";
 import { cn } from "../../../../utils/css-utils.js";
 import { Star } from "lucide-react";
 const ReviewSection = ({
@@ -36,8 +37,8 @@ const ReviewCard = ({ review }) => {
     )) }),
     /* @__PURE__ */ jsx("p", { className: "text-sm leading-relaxed", children: review.content }),
     /* @__PURE__ */ jsxs("div", { className: "mt-auto flex items-center gap-3", children: [
-      ((_a = review.avatar) == null ? void 0 : _a.src) && /* @__PURE__ */ jsx("div", { className: "bg-muted h-10 w-10 overflow-hidden rounded-full", children: /* @__PURE__ */ jsx(
-        "img",
+      ((_a = review.avatar) == null ? void 0 : _a.src) && /* @__PURE__ */ jsx("div", { className: "bg-muted h-10 w-10 overflow-hidden rounded-full [&>span]:h-full [&>span]:w-full", children: /* @__PURE__ */ jsx(
+        CompoundImage,
         {
           src: review.avatar.src,
           alt: review.avatar.alt ?? review.author,

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

@@ -8,6 +8,7 @@ export interface ArticlesProps {
     eyebrow?: string;
     heading?: string;
     button?: CompoundButtonProps;
+    columns?: 2 | 3 | 4;
     cards?: Slot;
 }
 export declare const Articles: PuckComponent<ArticlesProps>;

package/dist/components/puck-block/text-sections/articles-1/articles.js

@@ -1,6 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { CompoundContainer } from "../../../puck-base/container.js";
 import { CompoundButton } from "../../../puck-base/button.js";
+import { cn } from "../../../../utils/css-utils.js";
 const Articles = ({
   padding,
   sectionStyle,
@@ -8,13 +9,16 @@ const Articles = ({
   eyebrow,
   heading,
   button,
+  columns = 3,
   cards: Cards
 }) => {
   return /* @__PURE__ */ jsxs(CompoundContainer, { padding, sectionStyle, backgroundColor, children: [
-    eyebrow && /* @__PURE__ */ jsx("p", { className: "text-primary mb-3 text-sm font-semibold tracking-wider uppercase", children: eyebrow }),
-    /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-8 pb-10 sm:flex-row sm:items-center sm:justify-between", children: [
-      /* @__PURE__ */ jsx("h2", { className: "font-serif font-regular max-w-xl text-3xl tracking-tighter md:text-5xl", children: heading }),
-      (button == null ? void 0 : button.label) ? /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsxs("div", { className: "mb-10 flex w-full flex-col gap-6 sm:flex-row sm:items-end sm:justify-between", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+        eyebrow && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm font-medium tracking-wide uppercase", children: eyebrow }),
+        heading && /* @__PURE__ */ jsx("h2", { className: "font-serif font-regular max-w-xl text-3xl tracking-tighter md:text-4xl", children: heading })
+      ] }),
+      (button == null ? void 0 : button.label) ? /* @__PURE__ */ jsx("div", { className: "shrink-0", children: /* @__PURE__ */ jsx(
         CompoundButton,
         {
           label: button.label,
@@ -23,9 +27,18 @@ const Articles = ({
           size: button.size,
           icon: button.icon
         }
-      ) : null
+      ) }) : null
     ] }),
-    Cards && /* @__PURE__ */ jsx(Cards, { className: "grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4" })
+    Cards && /* @__PURE__ */ jsx(
+      Cards,
+      {
+        className: cn("grid grid-cols-1 gap-8", {
+          "sm:grid-cols-2": columns === 2,
+          "sm:grid-cols-2 lg:grid-cols-3": columns === 3,
+          "sm:grid-cols-2 lg:grid-cols-4": columns === 4
+        })
+      }
+    )
   ] });
 };
 export {

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

@@ -14,9 +14,17 @@ const defaultCard = {
 };
 const conf = {
   fields: {
-    eyebrow: { type: "text" },
+    eyebrow: { type: "text", contentEditable: true },
     heading,
     button,
+    columns: {
+      type: "radio",
+      options: [
+        { label: "2", value: 2 },
+        { label: "3", value: 3 },
+        { label: "4", value: 4 }
+      ]
+    },
     cards: {
       type: "slot",
       allow: ["ArticleCard"]
@@ -27,13 +35,17 @@ const conf = {
   },
   defaultProps: {
     padding: paddingDefaults,
-    heading: "Something new!",
+    eyebrow: "Latest News",
+    heading: "Stories worth reading",
     button: defaultButton,
-    cards: Array.from({ length: 1 }).map((_, index) => ({
+    columns: 3,
+    cards: Array.from({ length: 3 }).map((_, index) => ({
       type: "ArticleCard",
       props: {
         ...defaultCard,
-        heading: `Card ${index + 1}`
+        heading: `Article ${index + 1}`,
+        description: "A short summary of this article goes here.",
+        button: { label: "", url: "", variant: "link", size: "default", icon: "move-right" }
       }
     }))
   },

package/dist/components/puck-block/text-sections/content-section-1/content-section.js

@@ -2,6 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../../../../utils/css-utils.js";
 import { CompoundContainer } from "../../../puck-base/container.js";
 import { CompoundButton } from "../../../puck-base/button.js";
+import { CompoundImage } from "../../../puck-base/image.js";
 const TextBlock = ({
   eyebrow,
   heading,
@@ -38,8 +39,8 @@ const TextBlock = ({
     }
   )
 ] });
-const ImageBlock = ({ image }) => /* @__PURE__ */ jsx("div", { className: "bg-muted overflow-hidden rounded-xl", children: (image == null ? void 0 : image.src) ? /* @__PURE__ */ jsx(
-  "img",
+const ImageBlock = ({ image }) => /* @__PURE__ */ jsx("div", { className: "bg-muted overflow-hidden rounded-xl [&>span]:w-full", children: (image == null ? void 0 : image.src) ? /* @__PURE__ */ jsx(
+  CompoundImage,
   {
     src: image.src,
     alt: (image == null ? void 0 : image.alt) || "",
@@ -73,7 +74,7 @@ const ContentSection = ({
       }
     ) }) });
   }
-  if (layout === "split") {
+  if (layout === "split" || imagePosition === "left" || imagePosition === "right") {
     const showImage2 = imagePosition !== "none" && (image == null ? void 0 : image.src);
     return /* @__PURE__ */ jsx(CompoundContainer, { padding, sectionStyle, backgroundColor, children: /* @__PURE__ */ jsxs(
       "div",
@@ -98,7 +99,7 @@ const ContentSection = ({
       }
     ) });
   }
-  const showImage = imagePosition !== "none" && imagePosition !== "left" && imagePosition !== "right" && (image == null ? void 0 : image.src);
+  const showImage = imagePosition !== "none" && (image == null ? void 0 : image.src);
   return /* @__PURE__ */ jsxs(CompoundContainer, { padding, sectionStyle, backgroundColor, children: [
     (dividers === "both" || dividers === "top") && /* @__PURE__ */ jsx("hr", { className: "mb-12 border-foreground/15" }),
     /* @__PURE__ */ jsx("div", { className: "mx-auto max-w-3xl", children: /* @__PURE__ */ jsx(

package/dist/components/puck-block/text-sections/tab-section-1/tab-section.js

@@ -3,6 +3,7 @@ import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useState } from "react";
 import { cn } from "../../../../utils/css-utils.js";
 import { CompoundContainer } from "../../../puck-base/container.js";
+import { CompoundImage } from "../../../puck-base/image.js";
 const TabSection = ({
   padding,
   sectionStyle,
@@ -33,8 +34,8 @@ const TabSection = ({
       )) }),
       /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 items-center gap-8 lg:grid-cols-2", children: [
         /* @__PURE__ */ jsx("p", { className: "text-muted-foreground leading-relaxed", children: (_a = tabs[active]) == null ? void 0 : _a.content }),
-        /* @__PURE__ */ jsx("div", { className: "border-border/50 bg-muted overflow-hidden rounded-xl border", children: ((_c = (_b = tabs[active]) == null ? void 0 : _b.image) == null ? void 0 : _c.src) ? /* @__PURE__ */ jsx(
-          "img",
+        /* @__PURE__ */ jsx("div", { className: "border-border/50 bg-muted [&>span]:w-full overflow-hidden rounded-xl border", children: ((_c = (_b = tabs[active]) == null ? void 0 : _b.image) == null ? void 0 : _c.src) ? /* @__PURE__ */ jsx(
+          CompoundImage,
           {
             src: tabs[active].image.src,
             alt: ((_d = tabs[active].image) == null ? void 0 : _d.alt) || "",

package/dist/components/shadcn/navigation-menu.d.ts

@@ -1,5 +1,5 @@
 import { NavigationMenu as NavigationMenuPrimitive } from "@base-ui/react/navigation-menu";
-declare function NavigationMenu({ align, className, children, ...props }: NavigationMenuPrimitive.Root.Props & Pick<NavigationMenuPrimitive.Positioner.Props, "align">): import("react/jsx-runtime").JSX.Element;
+declare function NavigationMenu({ align, className, children, onValueChange, ...props }: NavigationMenuPrimitive.Root.Props & Pick<NavigationMenuPrimitive.Positioner.Props, "align">): import("react/jsx-runtime").JSX.Element;
 declare function NavigationMenuList({ className, ...props }: React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.List>): import("react/jsx-runtime").JSX.Element;
 declare function NavigationMenuItem({ className, ...props }: React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.Item>): import("react/jsx-runtime").JSX.Element;
 declare const navigationMenuTriggerStyle: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;

package/dist/components/shadcn/navigation-menu.js

@@ -1,14 +1,45 @@
 import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useCallback } from "react";
 import { NavigationMenu as NavigationMenu$1 } from "@base-ui/react/navigation-menu";
 import { cva } from "class-variance-authority";
 import { cn } from "../../utils/css-utils.js";
 import { ChevronDownIcon } from "lucide-react";
+import { useEditorContext } from "../puck-base/editor-context.js";
 function NavigationMenu({
   align = "start",
   className,
   children,
+  onValueChange,
   ...props
 }) {
+  const { isEditor } = useEditorContext();
+  const [value, setValue] = useState(props.defaultValue ?? null);
+  const handleValueChange = useCallback(
+    (newValue, details) => {
+      if (newValue === null && details.reason === "focus-out") return;
+      setValue(newValue);
+      onValueChange == null ? void 0 : onValueChange(newValue, details);
+    },
+    [onValueChange]
+  );
+  if (!isEditor) {
+    return /* @__PURE__ */ jsxs(
+      NavigationMenu$1.Root,
+      {
+        "data-slot": "navigation-menu",
+        className: cn(
+          "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
+          className
+        ),
+        onValueChange,
+        ...props,
+        children: [
+          children,
+          /* @__PURE__ */ jsx(NavigationMenuPositioner, { align })
+        ]
+      }
+    );
+  }
   return /* @__PURE__ */ jsxs(
     NavigationMenu$1.Root,
     {
@@ -17,6 +48,8 @@ function NavigationMenu({
         "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
         className
       ),
+      value,
+      onValueChange: handleValueChange,
       ...props,
       children: [
         children,