dune-react 0.0.18 → 0.0.19

package/dist/components/puck-base/core/with-editable.js

@@ -70,7 +70,7 @@ function withEditable(Component, config) {
     if (isBlock) {
       return /* @__PURE__ */ jsxs("span", { ref: wrapperRef, className: "group relative block h-full w-full", children: [
         /* @__PURE__ */ jsx(Component, { ...props }),
-        /* @__PURE__ */ jsx("span", { className: "absolute inset-0 z-40 flex items-center justify-center", children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("span", { className: "absolute inset-0 z-60 flex items-center justify-center", children: /* @__PURE__ */ jsx(
           "span",
           {
             ref: portalRef,
@@ -84,7 +84,7 @@ function withEditable(Component, config) {
     }
     return /* @__PURE__ */ jsxs("span", { ref: wrapperRef, className: "group relative inline-flex", children: [
       /* @__PURE__ */ jsx(Component, { ...props }),
-      /* @__PURE__ */ jsx("span", { className: "absolute inset-0 z-40 flex items-center justify-center opacity-0 transition-opacity group-hover:opacity-100", children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("span", { className: "absolute inset-0 z-60 flex items-center justify-center opacity-0 transition-opacity group-hover:opacity-100", children: /* @__PURE__ */ jsx(
         "span",
         {
           onClick: handleEdit,

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

@@ -9,10 +9,10 @@ export interface FullscreenHeroProps {
         variant: string;
     };
     buttons?: CompoundButtonProps[];
-    backgroundImage?: {
+    images?: {
         src: string;
         alt?: string;
-    } | string;
+    }[];
     styles?: {
         padding?: CompoundContainerProps["padding"];
         sectionStyle?: CompoundContainerProps["sectionStyle"];
@@ -20,4 +20,4 @@ export interface FullscreenHeroProps {
         overlay?: "none" | "dark" | "gradient";
     };
 }
-export declare const FullscreenHero: ({ heading, description, badge, buttons, backgroundImage, styles, }: FullscreenHeroProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FullscreenHero: ({ heading, description, badge, buttons, images, styles, }: FullscreenHeroProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/puck-block/hero-sections/fullscreen-hero-1/fullscreen-hero.js

@@ -12,15 +12,16 @@ const FullscreenHero = ({
   description,
   badge,
   buttons,
-  backgroundImage,
+  images,
   styles
 }) => {
   const sectionStyle = styles == null ? void 0 : styles.sectionStyle;
   const overlay = (styles == null ? void 0 : styles.overlay) ?? "dark";
   const backgroundColor = styles == null ? void 0 : styles.backgroundColor;
   const padding = styles == null ? void 0 : styles.padding;
-  const bgSrc = typeof backgroundImage === "string" ? backgroundImage : backgroundImage == null ? void 0 : backgroundImage.src;
-  const bgAlt = typeof backgroundImage === "string" ? "" : (backgroundImage == null ? void 0 : backgroundImage.alt) ?? "";
+  const bgImage = images == null ? void 0 : images[0];
+  const bgSrc = bgImage == null ? void 0 : bgImage.src;
+  const bgAlt = (bgImage == null ? void 0 : bgImage.alt) ?? "";
   if (!bgSrc) {
     return /* @__PURE__ */ jsx(
       CompoundContainer,
@@ -29,7 +30,15 @@ const FullscreenHero = ({
         sectionStyle,
         backgroundColor,
         className: "min-h-[100vh] flex flex-col justify-end",
-        children: /* @__PURE__ */ jsx(Content, { badge, heading, description, buttons })
+        children: /* @__PURE__ */ jsx(
+          Content,
+          {
+            badge,
+            heading,
+            description,
+            buttons
+          }
+        )
       }
     );
   }
@@ -40,20 +49,57 @@ const FullscreenHero = ({
     {
       className: cn(
         "relative w-full min-h-[100vh] flex flex-col justify-end overflow-hidden bg-background text-foreground",
-        { "pt-20 lg:pt-40": top === "large", "pb-20 lg:pb-40": bottom === "large" },
-        { "pt-15 lg:pt-30": top === "medium", "pb-15 lg:pb-30": bottom === "medium" },
-        { "pt-10 lg:pt-20": top === "small", "pb-10 lg:pb-20": bottom === "small" }
+        {
+          "pt-20 lg:pt-40": top === "large",
+          "pb-20 lg:pb-40": bottom === "large"
+        },
+        {
+          "pt-15 lg:pt-30": top === "medium",
+          "pb-15 lg:pb-30": bottom === "medium"
+        },
+        {
+          "pt-10 lg:pt-20": top === "small",
+          "pb-10 lg:pb-20": bottom === "small"
+        }
       ),
       style: { ...styleVars, ...backgroundColor ? { backgroundColor } : {} },
       children: [
-        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 [&>span]:h-full [&>span]:w-full", children: /* @__PURE__ */ jsx(CompoundImage, { src: bgSrc, alt: bgAlt, className: "h-full w-full object-cover" }) }),
-        overlay !== "none" && /* @__PURE__ */ jsx("div", { className: cn("absolute inset-0", overlayStyles[overlay] ?? overlayStyles.dark) }),
-        /* @__PURE__ */ jsx("div", { className: "container mx-auto relative z-50", children: /* @__PURE__ */ jsx(Content, { badge, heading, description, buttons }) })
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 [&>span]:h-full [&>span]:w-full", children: /* @__PURE__ */ jsx(
+          CompoundImage,
+          {
+            src: bgSrc,
+            alt: bgAlt,
+            className: "h-full w-full object-cover"
+          }
+        ) }),
+        overlay !== "none" && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "absolute inset-0",
+              overlayStyles[overlay] ?? overlayStyles.dark
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "container mx-auto relative z-50", children: /* @__PURE__ */ jsx(
+          Content,
+          {
+            badge,
+            heading,
+            description,
+            buttons
+          }
+        ) })
       ]
     }
   );
 };
-function Content({ badge, heading, description, buttons }) {
+function Content({
+  badge,
+  heading,
+  description,
+  buttons
+}) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     badge && /* @__PURE__ */ jsx("span", { className: "bg-primary/10 text-primary mb-6 inline-block rounded-full px-3 py-1 text-xs font-medium", children: badge.label }),
     /* @__PURE__ */ jsx("h1", { className: "font-serif text-5xl md:text-7xl lg:text-8xl font-medium leading-[0.95] mb-8 max-w-[800px] text-foreground", children: heading }),

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

@@ -1,6 +1,6 @@
-import { contentFields } from "../../../puck-base/core/fields.js";
+import { images, contentFields } from "../../../puck-base/core/fields.js";
 import { FullscreenHero } from "./fullscreen-hero.js";
-import { backgroundImage, createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
 const conf = {
   fields: {
     badge: contentFields.badge,
@@ -13,7 +13,7 @@ const conf = {
       contentEditable: true
     },
     buttons: contentFields.buttons,
-    backgroundImage,
+    images: { ...images, max: 1 },
     styles: createStylesField({
       overlay: {
         type: "select",
@@ -37,7 +37,7 @@ const conf = {
         icon: "none"
       }
     ],
-    backgroundImage: "https://images.pexels.com/photos/924824/pexels-photo-924824.jpeg?auto=compress&cs=tinysrgb&w=1920",
+    images: [{ src: "https://images.pexels.com/photos/924824/pexels-photo-924824.jpeg?auto=compress&cs=tinysrgb&w=1920", alt: "Hero background" }],
     styles: createStylesDefaults({
       sectionStyle: "dark",
       overlay: "dark"

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

@@ -6,10 +6,10 @@ export interface ImageHeroProps {
     description?: string;
     badge?: CompoundBadgeProps;
     buttons?: CompoundButtonProps[];
-    backgroundImage?: {
+    images?: {
         src: string;
         alt?: string;
-    } | string;
+    }[];
     styles?: {
         padding?: CompoundContainerProps["padding"];
         sectionStyle?: CompoundContainerProps["sectionStyle"];
@@ -19,4 +19,4 @@ export interface ImageHeroProps {
         minHeight?: "medium" | "large" | "full";
     };
 }
-export declare const ImageHero: ({ heading, description, badge, buttons, backgroundImage, styles, }: ImageHeroProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ImageHero: ({ heading, description, badge, buttons, images, styles, }: ImageHeroProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/puck-block/hero-sections/image-hero-1/image-hero.js

@@ -18,14 +18,15 @@ const ImageHero = ({
   description,
   badge,
   buttons,
-  backgroundImage,
+  images,
   styles
 }) => {
   const overlay = (styles == null ? void 0 : styles.overlay) ?? "dark";
   const align = (styles == null ? void 0 : styles.align) ?? "center";
   const minHeight = (styles == null ? void 0 : styles.minHeight) ?? "large";
-  const bgSrc = typeof backgroundImage === "string" ? backgroundImage : backgroundImage == null ? void 0 : backgroundImage.src;
-  const bgAlt = typeof backgroundImage === "string" ? "" : (backgroundImage == null ? void 0 : backgroundImage.alt) ?? "";
+  const bgImage = images == null ? void 0 : images[0];
+  const bgSrc = bgImage == null ? void 0 : bgImage.src;
+  const bgAlt = (bgImage == null ? void 0 : bgImage.alt) ?? "";
   return /* @__PURE__ */ jsx(
     CompoundContainer,
     {

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

@@ -1,4 +1,4 @@
-import { buttons, badge } from "../../../puck-base/core/fields.js";
+import { images, buttons, badge } from "../../../puck-base/core/fields.js";
 import { heroStylesDefaults, createStylesField, sectionOverlay } from "../../../puck-base/core/styles.js";
 import { ImageHero } from "./image-hero.js";
 const imageHeroStylesField = createStylesField({
@@ -26,20 +26,13 @@ const conf = {
     description: { type: "textarea", contentEditable: true },
     badge,
     buttons,
-    backgroundImage: {
-      type: "text",
-      label: "Background Image URL",
-      ai: {
-        instructions: "URL for a full-width background image behind the section.",
-        stream: false
-      }
-    },
+    images: { ...images, max: 1 },
     styles: imageHeroStylesField
   },
   defaultProps: {
     heading: "Build something people want",
     description: "A modern platform for teams who care about speed, quality, and customer experience.",
-    backgroundImage: "https://images.pexels.com/photos/3184291/pexels-photo-3184291.jpeg?auto=compress&cs=tinysrgb&w=1920",
+    images: [{ src: "https://images.pexels.com/photos/3184291/pexels-photo-3184291.jpeg?auto=compress&cs=tinysrgb&w=1920", alt: "Hero background" }],
     buttons: [
       {
         label: "Get Started",

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

@@ -37,9 +37,7 @@ type HeroSectionProps = {
     spacing?: "tight" | "normal" | "relaxed";
     align?: "left" | "center";
     displaySize?: "default" | "display";
-    images?: HeroImage | HeroImage[];
-    backgroundImage?: HeroImage | string;
-    posterImage?: HeroImage;
+    images?: HeroImage[];
     videoUrl?: string;
     adjectives?: {
         adjective: string;

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

@@ -1,4 +1,4 @@
-import { image, contentFields } from "../../../puck-base/core/fields.js";
+import { images, contentFields } from "../../../puck-base/core/fields.js";
 import { VideoHero } from "./video-hero.js";
 import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
 const conf = {
@@ -9,14 +9,14 @@ const conf = {
       label: "Video URL",
       ai: { instructions: "Direct URL to an MP4 video" }
     },
-    posterImage: image,
+    images: { ...images, max: 1 },
     styles: createStylesField()
   },
   defaultProps: {
     heading: "See what's possible",
     description: "Watch how leading teams use our platform to ship 10x faster.",
     buttons: [{ label: "Try It Free", icon: "move-right", variant: "default" }],
-    posterImage: { src: "https://images.pexels.com/photos/6985132/pexels-photo-6985132.jpeg?auto=compress&cs=tinysrgb&w=1920", alt: "Dark gradient background for product demo preview" },
+    images: [{ src: "https://images.pexels.com/photos/6985132/pexels-photo-6985132.jpeg?auto=compress&cs=tinysrgb&w=1920", alt: "Dark gradient background for product demo preview" }],
     styles: createStylesDefaults()
   },
   render: VideoHero

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

@@ -2,14 +2,14 @@ import { CompoundContainerProps } from "@/components/puck-base/container";
 import { CompoundContentProps } from "@/components/puck-base/content";
 export interface VideoHeroProps extends CompoundContentProps {
     videoUrl?: string;
-    posterImage?: {
+    images?: {
         src: string;
-        alt: string;
-    };
+        alt?: string;
+    }[];
     styles?: {
         padding?: CompoundContainerProps["padding"];
         sectionStyle?: CompoundContainerProps["sectionStyle"];
         backgroundColor?: string;
     };
 }
-export declare const VideoHero: ({ badge, heading, description, buttons, videoUrl, posterImage, styles, }: VideoHeroProps) => import("react/jsx-runtime").JSX.Element;
+export declare const VideoHero: ({ badge, heading, description, buttons, videoUrl, images, styles, }: VideoHeroProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/puck-block/hero-sections/video-hero-1/video-hero.js

@@ -7,36 +7,39 @@ const VideoHero = ({
   description,
   buttons,
   videoUrl,
-  posterImage,
+  images,
   styles
-}) => /* @__PURE__ */ jsx(
-  CompoundContainer,
-  {
-    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: "grid grid-cols-1 items-center gap-12 lg:grid-cols-2", children: [
-      /* @__PURE__ */ jsx(
-        CompoundContent,
-        {
-          badge,
-          heading,
-          description,
-          buttons
-        }
-      ),
-      /* @__PURE__ */ jsx("div", { className: "border-border/20 overflow-hidden rounded-xl border bg-black/50", children: videoUrl ? /* @__PURE__ */ jsx(
-        "video",
-        {
-          src: videoUrl,
-          poster: posterImage == null ? void 0 : posterImage.src,
-          controls: true,
-          className: "aspect-video w-full object-cover"
-        }
-      ) : /* @__PURE__ */ jsx("div", { className: "flex aspect-video w-full items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "bg-primary/20 flex h-16 w-16 items-center justify-center rounded-full", children: /* @__PURE__ */ jsx("span", { className: "text-primary text-2xl", children: "▶" }) }) }) })
-    ] })
-  }
-);
+}) => {
+  var _a;
+  return /* @__PURE__ */ jsx(
+    CompoundContainer,
+    {
+      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: "grid grid-cols-1 items-center gap-12 lg:grid-cols-2", children: [
+        /* @__PURE__ */ jsx(
+          CompoundContent,
+          {
+            badge,
+            heading,
+            description,
+            buttons
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "border-border/20 overflow-hidden rounded-xl border bg-black/50", children: videoUrl ? /* @__PURE__ */ jsx(
+          "video",
+          {
+            src: videoUrl,
+            poster: (_a = images == null ? void 0 : images[0]) == null ? void 0 : _a.src,
+            controls: true,
+            className: "aspect-video w-full object-cover"
+          }
+        ) : /* @__PURE__ */ jsx("div", { className: "flex aspect-video w-full items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "bg-primary/20 flex h-16 w-16 items-center justify-center rounded-full", children: /* @__PURE__ */ jsx("span", { className: "text-primary text-2xl", children: "▶" }) }) }) })
+      ] })
+    }
+  );
+};
 export {
   VideoHero
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dune-react",
-  "version": "0.0.18",
+  "version": "0.0.19",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -16,7 +16,7 @@
     "build-storybook": "storybook build && cp -r skills storybook-static/skills",
     "deploy-storybook": "storybook-to-ghpages -- --existing-output-dir=storybook-static",
     "ondeploy": "pnpm build-storybook && pnpm deploy-storybook",
-    "postpublish": "bash scripts/postpublish.sh",
+    "sync:downstream": "bash scripts/postpublish.sh",
     "upload:previews": "tsx scripts/upload-previews-r2.ts"
   },
   "sideEffects": [