dune-react 0.0.9 → 0.0.11

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

@@ -14,76 +14,82 @@ const minHeightStyles = {
   full: "min-h-screen"
 };
 const ImageHero = ({
-  padding,
-  sectionStyle,
-  backgroundColor,
   heading = "Your Story Starts Here",
   description,
   badge,
   buttons,
   backgroundImage,
-  overlay = "dark",
-  align = "center",
-  minHeight = "large"
+  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) ?? "";
-  return /* @__PURE__ */ jsx(CompoundContainer, { padding, sectionStyle, backgroundColor, children: /* @__PURE__ */ jsxs(
-    "div",
+  return /* @__PURE__ */ jsx(
+    CompoundContainer,
     {
-      className: cn(
-        "relative flex items-center overflow-hidden rounded-2xl",
-        minHeightStyles[minHeight] ?? minHeightStyles.large
-      ),
-      children: [
-        bgSrc && /* @__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__ */ jsxs(
-          "div",
-          {
-            className: cn(
-              "relative z-50 flex w-full flex-col gap-6 px-8 py-16 md:px-16",
-              align === "center" && "items-center text-center",
-              align === "left" && "items-start text-left"
+      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: cn(
+            "relative flex items-center overflow-hidden rounded-2xl",
+            minHeightStyles[minHeight] ?? minHeightStyles.large
+          ),
+          children: [
+            bgSrc && /* @__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
+                )
+              }
             ),
-            children: [
-              badge && /* @__PURE__ */ jsx(
-                CompoundBadge,
-                {
-                  label: badge.label,
-                  variant: badge.variant,
-                  url: badge.url
-                }
-              ),
-              heading && /* @__PURE__ */ jsx("h1", { className: "text-white max-w-3xl text-4xl font-bold tracking-tight md:text-6xl lg:text-7xl", children: heading }),
-              description && /* @__PURE__ */ jsx("p", { className: "text-white/80 max-w-2xl text-lg md:text-xl", children: description }),
-              Array.isArray(buttons) && buttons.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-4", children: buttons.map(
-                (button, index) => button.label ? /* @__PURE__ */ jsx(
-                  CompoundButton,
-                  {
-                    label: button.label,
-                    url: button.url,
-                    variant: button.variant,
-                    size: button.size,
-                    icon: button.icon
-                  },
-                  index
-                ) : null
-              ) })
-            ]
-          }
-        )
-      ]
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn(
+                  "relative z-50 flex w-full flex-col gap-6 px-8 py-16 md:px-16",
+                  align === "center" && "items-center text-center",
+                  align === "left" && "items-start text-left"
+                ),
+                children: [
+                  badge && /* @__PURE__ */ jsx(
+                    CompoundBadge,
+                    {
+                      label: badge.label,
+                      variant: badge.variant,
+                      url: badge.url
+                    }
+                  ),
+                  heading && /* @__PURE__ */ jsx("h1", { className: "text-white max-w-3xl text-4xl font-bold tracking-tight md:text-6xl lg:text-7xl", children: heading }),
+                  description && /* @__PURE__ */ jsx("p", { className: "text-white/80 max-w-2xl text-lg md:text-xl", children: description }),
+                  Array.isArray(buttons) && buttons.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-4", children: buttons.map(
+                    (button, index) => button.label ? /* @__PURE__ */ jsx(
+                      CompoundButton,
+                      {
+                        label: button.label,
+                        action: button.action,
+                        variant: button.variant,
+                        size: button.size,
+                        icon: button.icon
+                      },
+                      index
+                    ) : null
+                  ) })
+                ]
+              }
+            )
+          ]
+        }
+      )
     }
-  ) });
+  );
 };
 export {
   ImageHero

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

@@ -1,66 +1,65 @@
-import { paddingDefaults, backgroundColor, sectionStyle, padding, backgroundImage, buttons, badge } from "../../../puck-base/core/fields.js";
+import { 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({
+  overlay: sectionOverlay,
+  align: {
+    type: "radio",
+    options: [
+      { label: "Left", value: "left" },
+      { label: "Center", value: "center" }
+    ]
+  },
+  minHeight: {
+    type: "select",
+    label: "Min Height",
+    options: [
+      { label: "Medium", value: "medium" },
+      { label: "Large", value: "large" },
+      { label: "Full", value: "full" }
+    ]
+  }
+});
 const conf = {
   fields: {
     heading: { type: "text", contentEditable: true },
     description: { type: "textarea", contentEditable: true },
     badge,
     buttons,
-    backgroundImage,
-    overlay: {
-      type: "select",
-      label: "Overlay",
-      options: [
-        { label: "None", value: "none" },
-        { label: "Dark", value: "dark" },
-        { label: "Gradient", value: "gradient" }
-      ]
-    },
-    align: {
-      type: "radio",
-      label: "Alignment",
-      options: [
-        { label: "Left", value: "left" },
-        { label: "Center", value: "center" }
-      ]
-    },
-    minHeight: {
-      type: "select",
-      label: "Min Height",
-      options: [
-        { label: "Medium", value: "medium" },
-        { label: "Large", value: "large" },
-        { label: "Full Screen", value: "full" }
-      ]
+    backgroundImage: {
+      type: "text",
+      label: "Background Image URL",
+      ai: {
+        instructions: "URL for a full-width background image behind the section.",
+        stream: false
+      }
     },
-    padding,
-    sectionStyle,
-    backgroundColor
+    styles: imageHeroStylesField
   },
   defaultProps: {
     heading: "Your Story Starts Here",
     description: "Create something extraordinary with our platform. Built for dreamers, makers, and innovators.",
     backgroundImage: "https://images.pexels.com/photos/3184291/pexels-photo-3184291.jpeg?auto=compress&cs=tinysrgb&w=1920",
-    overlay: "dark",
-    align: "center",
-    minHeight: "large",
     buttons: [
       {
         label: "Get Started",
-        url: "#",
         variant: "default",
         size: "lg",
         icon: "none"
       },
       {
         label: "Learn More",
-        url: "#",
         variant: "outline",
         size: "lg",
         icon: "none"
       }
     ],
-    padding: paddingDefaults
+    styles: {
+      ...heroStylesDefaults,
+      overlay: "dark",
+      align: "center",
+      minHeight: "large"
+    }
   },
   render: ImageHero
 };

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

@@ -0,0 +1,71 @@
+type HeroVariant = "hero-1" | "split-hero-1" | "grid-hero-1" | "image-hero-1" | "video-hero-1" | "gradient-hero-1" | "fullscreen-hero-1";
+type HeroPadding = {
+    top?: "none" | "small" | "medium" | "large";
+    bottom?: "none" | "small" | "medium" | "large";
+};
+type HeroSectionStyle = "default" | "dark" | "muted" | "inverted" | "custom";
+type HeroBadge = {
+    label: string;
+    url?: string;
+    variant?: "default" | "secondary" | "destructive" | "outline" | string;
+};
+type HeroButton = {
+    label: string;
+    url?: string;
+    variant?: "default" | "secondary" | "outline" | "ghost" | "link" | "destructive";
+    size?: "default" | "sm" | "lg" | "icon";
+    icon?: string;
+};
+type HeroFeature = {
+    icon?: string;
+    name?: string;
+    description?: string;
+};
+type HeroImage = {
+    src: string;
+    alt?: string;
+    aspectRatio?: "16x9" | "1x1";
+};
+type HeroSidebarItem = {
+    label: string;
+    value?: string;
+    description?: string;
+    url?: string;
+};
+type HeroSectionProps = {
+    variant?: HeroVariant;
+    badge?: HeroBadge;
+    heading?: string;
+    description?: string;
+    buttons?: HeroButton[];
+    features?: HeroFeature[];
+    alignContent?: "start" | "center" | "end";
+    spacing?: "tight" | "normal" | "relaxed";
+    align?: "left" | "center";
+    displaySize?: "default" | "display";
+    images?: HeroImage | HeroImage[];
+    backgroundImage?: HeroImage | string;
+    posterImage?: HeroImage;
+    videoUrl?: string;
+    adjectives?: {
+        adjective: string;
+    }[];
+    displayText?: string;
+    imageLayout?: "1x1" | "1x1-9x16-1x1" | "16x9";
+    imagePosition?: "left" | "right";
+    leftSidebarTitle?: string;
+    leftSidebar?: HeroSidebarItem[];
+    rightSidebarTitle?: string;
+    rightSidebar?: HeroSidebarItem[];
+    styles?: {
+        padding?: HeroPadding;
+        sectionStyle?: HeroSectionStyle;
+        backgroundColor?: string;
+        className?: string;
+        showGridLines?: boolean;
+        overlay?: "none" | "dark" | "gradient";
+        minHeight?: "medium" | "large" | "full";
+        gradientFrom?: string;
+        gradientTo?: string;
+    };
+};

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

@@ -1,10 +1,11 @@
-import { paddingDefaults, image16x9Placeholder, padding, image, contentFields } from "../../../puck-base/core/fields.js";
+import { image16x9Placeholder, images, contentFields } from "../../../puck-base/core/fields.js";
 import { SplitHero } from "./split-hero.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
 const conf = {
   fields: {
     ...contentFields,
     displayText: { type: "text" },
-    image,
+    images: { ...images, max: 1 },
     imagePosition: {
       type: "radio",
       options: [
@@ -12,7 +13,7 @@ const conf = {
         { label: "Right", value: "right" }
       ]
     },
-    padding
+    styles: createStylesField()
   },
   defaultProps: {
     heading: "Launch your next big idea",
@@ -22,9 +23,9 @@ const conf = {
       { label: "Start building", icon: "move-right", variant: "default" },
       { label: "See demo", icon: "play", variant: "outline" }
     ],
-    image: image16x9Placeholder,
+    images: [image16x9Placeholder],
     imagePosition: "right",
-    padding: paddingDefaults
+    styles: createStylesDefaults()
   },
   render: SplitHero
 };

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

@@ -1,14 +1,14 @@
 import { CompoundContainerProps } from "@/components/puck-base/container";
 import { CompoundContentProps } from "@/components/puck-base/content";
+import { CompoundImageProps } from "@/components/puck-base/image";
 export interface SplitHeroProps extends CompoundContentProps {
-    padding?: CompoundContainerProps["padding"];
-    sectionStyle?: CompoundContainerProps["sectionStyle"];
-    backgroundColor?: string;
-    image?: {
-        src: string;
-        alt: string;
-    };
+    images?: CompoundImageProps | CompoundImageProps[];
     imagePosition?: "left" | "right";
     displayText?: string;
+    styles?: {
+        padding?: CompoundContainerProps["padding"];
+        sectionStyle?: CompoundContainerProps["sectionStyle"];
+        backgroundColor?: string;
+    };
 }
-export declare const SplitHero: ({ padding, sectionStyle, backgroundColor, badge, heading, description, buttons, image, imagePosition, displayText, }: SplitHeroProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SplitHero: ({ badge, heading, description, buttons, images, imagePosition, displayText, styles, }: SplitHeroProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -4,58 +4,59 @@ import { CompoundContainer } from "../../../puck-base/container.js";
 import { CompoundContent } from "../../../puck-base/content.js";
 import { CompoundImage } from "../../../puck-base/image.js";
 const SplitHero = ({
-  padding,
-  sectionStyle,
-  backgroundColor,
   badge,
   heading,
   description,
   buttons,
-  image,
+  images,
   imagePosition = "right",
-  displayText
-}) => /* @__PURE__ */ jsx(
-  CompoundContainer,
-  {
-    padding,
-    sectionStyle,
-    backgroundColor,
-    children: /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: cn(
-          "grid grid-cols-1 items-center gap-8 lg:grid-cols-2 lg:gap-16",
-          imagePosition === "left" && "lg:[direction:rtl] lg:[&>*]:[direction:ltr]"
-        ),
-        children: [
-          /* @__PURE__ */ jsxs("div", { children: [
-            displayText && /* @__PURE__ */ jsx("p", { className: "font-serif text-5xl md:text-7xl lg:text-8xl font-bold tracking-tighter mb-4", children: displayText }),
-            /* @__PURE__ */ jsx(
-              CompoundContent,
-              {
-                badge,
-                heading: displayText ? void 0 : heading,
-                description,
-                buttons
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "border-border/50 aspect-[4/3] overflow-hidden rounded-xl border bg-muted relative [&>span]:h-full [&>span]:w-full", children: [
-            !(image == null ? void 0 : image.src) && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Image" }) }),
-            /* @__PURE__ */ jsx(
-              CompoundImage,
-              {
-                src: (image == null ? void 0 : image.src) || "",
-                alt: (image == null ? void 0 : image.alt) || "",
-                className: "h-full w-full object-cover"
-              }
-            )
-          ] })
-        ]
-      }
-    )
-  }
-);
+  displayText,
+  styles
+}) => {
+  const primaryImage = Array.isArray(images) ? images[0] : images;
+  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: cn(
+            "grid grid-cols-1 items-center gap-8 lg:grid-cols-2 lg:gap-16",
+            imagePosition === "left" && "lg:[direction:rtl] lg:[&>*]:[direction:ltr]"
+          ),
+          children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              displayText && /* @__PURE__ */ jsx("p", { className: "mb-4 font-serif text-5xl font-bold tracking-tighter md:text-7xl lg:text-8xl", children: displayText }),
+              /* @__PURE__ */ jsx(
+                CompoundContent,
+                {
+                  badge,
+                  heading: displayText ? void 0 : heading,
+                  description,
+                  buttons
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "border-border/50 relative aspect-[4/3] overflow-hidden rounded-xl border bg-muted [&>span]:h-full [&>span]:w-full", children: [
+              !(primaryImage == null ? void 0 : primaryImage.src) && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Image" }) }),
+              /* @__PURE__ */ jsx(
+                CompoundImage,
+                {
+                  src: (primaryImage == null ? void 0 : primaryImage.src) || "",
+                  alt: (primaryImage == null ? void 0 : primaryImage.alt) || "",
+                  className: "h-full w-full object-cover"
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    }
+  );
+};
 export {
   SplitHero
 };

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

@@ -1,5 +1,6 @@
-import { paddingDefaults, image16x9Placeholder, padding, image, contentFields } from "../../../puck-base/core/fields.js";
+import { image16x9Placeholder, image, contentFields } from "../../../puck-base/core/fields.js";
 import { VideoHero } from "./video-hero.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
 const conf = {
   fields: {
     ...contentFields,
@@ -9,14 +10,14 @@ const conf = {
       ai: { instructions: "Direct URL to an MP4 video" }
     },
     posterImage: image,
-    padding
+    styles: createStylesField()
   },
   defaultProps: {
     heading: "See it in action",
     description: "Watch how our platform helps teams build faster.",
     buttons: [{ label: "Try it free", icon: "move-right", variant: "default" }],
     posterImage: image16x9Placeholder,
-    padding: paddingDefaults
+    styles: createStylesDefaults()
   },
   render: VideoHero
 };

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

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

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

@@ -2,33 +2,41 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { CompoundContainer } from "../../../puck-base/container.js";
 import { CompoundContent } from "../../../puck-base/content.js";
 const VideoHero = ({
-  padding,
   badge,
   heading,
   description,
   buttons,
   videoUrl,
-  posterImage
-}) => /* @__PURE__ */ jsx(CompoundContainer, { padding, sectionStyle: "dark", 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: "▶" }) }) }) })
-] }) });
+  posterImage,
+  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: "▶" }) }) }) })
+    ] })
+  }
+);
 export {
   VideoHero
 };