dune-react 0.0.9 → 0.0.10

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

@@ -1,49 +1,26 @@
-import { paddingDefaults, backgroundColor, sectionStyle, padding, backgroundImage, buttons, badge } from "../../../puck-base/core/fields.js";
+import { buttons, badge } from "../../../puck-base/core/fields.js";
 import { ImageHero } from "./image-hero.js";
+import { heroStylesDefaults, heroStylesField } from "../../../puck-base/core/styles.js";
 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: heroStylesField
   },
   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",
@@ -60,7 +37,12 @@ const conf = {
         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) ?? "dark",
+    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
 };

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

@@ -1,19 +1,25 @@
-import { paddingDefaults, backgroundColor, sectionStyle, padding, button } from "../../../puck-base/core/fields.js";
+import { button } from "../../../puck-base/core/fields.js";
 import { LocationSection } from "./location.js";
-const locationButtonField = {
-  type: "object",
-  objectFields: {
-    ...button.objectFields,
-    colorMode: {
-      type: "select",
-      options: [
-        { label: "Theme", value: "theme" },
-        { label: "Custom", value: "custom" }
-      ]
-    },
-    backgroundColor: { type: "text" },
-    textColor: { type: "text" }
-  }
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
+const locationButtonFields = {
+  ...button.objectFields,
+  colorMode: {
+    type: "select",
+    options: [
+      { label: "Theme", value: "theme" },
+      { label: "Custom", value: "custom" }
+    ]
+  },
+  backgroundColor: { type: "text" },
+  textColor: { type: "text" }
+};
+const locationButtonDefaults = {
+  label: "Button",
+  url: "",
+  variant: "default",
+  size: "default",
+  icon: "none",
+  colorMode: "theme"
 };
 const conf = {
   fields: {
@@ -55,17 +61,14 @@ const conf = {
       max: 1,
       step: 0.01
     },
-    primaryButton: {
-      ...locationButtonField,
-      label: "Primary Button"
-    },
-    secondaryButton: {
-      ...locationButtonField,
-      label: "Secondary Button"
+    buttons: {
+      type: "array",
+      max: 3,
+      getItemSummary: (item, index = 0) => item.label || `Button ${index + 1}`,
+      arrayFields: locationButtonFields,
+      defaultItemProps: locationButtonDefaults
     },
-    padding,
-    sectionStyle,
-    backgroundColor
+    styles: createStylesField()
   },
   defaultProps: {
     heading: "Find us in\nLos Angeles",
@@ -78,23 +81,25 @@ const conf = {
     mapTintMode: "theme",
     mapTintColor: "var(--primary)",
     mapTintOpacity: 0.21,
-    primaryButton: {
-      label: "Call to visit",
-      url: "tel:+12345678900",
-      variant: "default",
-      size: "default",
-      icon: "none",
-      colorMode: "theme"
-    },
-    secondaryButton: {
-      label: "Get directions",
-      url: "mailto:email@mybusiness.com",
-      variant: "secondary",
-      size: "default",
-      icon: "none",
-      colorMode: "theme"
-    },
-    padding: paddingDefaults
+    buttons: [
+      {
+        label: "Call to visit",
+        url: "tel:+12345678900",
+        variant: "default",
+        size: "default",
+        icon: "none",
+        colorMode: "theme"
+      },
+      {
+        label: "Get directions",
+        url: "mailto:email@mybusiness.com",
+        variant: "secondary",
+        size: "default",
+        icon: "none",
+        colorMode: "theme"
+      }
+    ],
+    styles: createStylesDefaults()
   },
   render: LocationSection
 };

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

@@ -7,9 +7,6 @@ interface LocationButton extends Omit<CompoundButtonProps, "label"> {
     textColor?: string;
 }
 export interface LocationSectionProps {
-    padding?: CompoundContainerProps["padding"];
-    sectionStyle?: CompoundContainerProps["sectionStyle"];
-    backgroundColor?: string;
     heading?: string;
     description?: string;
     contentAlign?: "left" | "right";
@@ -20,8 +17,12 @@ export interface LocationSectionProps {
     mapTintMode?: "theme" | "custom" | "none";
     mapTintColor?: string;
     mapTintOpacity?: number;
-    primaryButton?: LocationButton;
-    secondaryButton?: LocationButton;
+    buttons?: LocationButton[];
+    styles?: {
+        padding?: CompoundContainerProps["padding"];
+        sectionStyle?: CompoundContainerProps["sectionStyle"];
+        backgroundColor?: string;
+    };
 }
-export declare const LocationSection: ({ padding, sectionStyle, backgroundColor, heading, description, contentAlign, contentPosition, mapEmbedUrl, mapTitle, mapFilter, mapTintMode, mapTintColor, mapTintOpacity, primaryButton, secondaryButton, }: LocationSectionProps) => import("react/jsx-runtime").JSX.Element;
+export declare const LocationSection: ({ heading, description, contentAlign, contentPosition, mapEmbedUrl, mapTitle, mapFilter, mapTintMode, mapTintColor, mapTintOpacity, buttons, styles, }: LocationSectionProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -37,9 +37,6 @@ const LocationActionButton = ({
   ) });
 };
 const LocationSection = ({
-  padding,
-  sectionStyle,
-  backgroundColor,
   heading,
   description,
   contentAlign = "left",
@@ -50,8 +47,8 @@ const LocationSection = ({
   mapTintMode = "theme",
   mapTintColor,
   mapTintOpacity = 0.2,
-  primaryButton,
-  secondaryButton
+  buttons = [],
+  styles
 }) => {
   const isTextRight = contentAlign === "right";
   const isContentRight = contentPosition === "right";
@@ -60,9 +57,9 @@ const LocationSection = ({
   return /* @__PURE__ */ jsx(
     CompoundContainer,
     {
-      padding,
-      sectionStyle,
-      backgroundColor,
+      padding: styles == null ? void 0 : styles.padding,
+      sectionStyle: styles == null ? void 0 : styles.sectionStyle,
+      backgroundColor: styles == null ? void 0 : styles.backgroundColor,
       className: "relative overflow-hidden",
       children: /* @__PURE__ */ jsxs(
         "div",
@@ -91,17 +88,14 @@ const LocationSection = ({
                       children: description
                     }
                   ) : null,
-                  ((primaryButton == null ? void 0 : primaryButton.label) || (secondaryButton == null ? void 0 : secondaryButton.label)) && /* @__PURE__ */ jsxs(
+                  buttons.some((button) => button == null ? void 0 : button.label) && /* @__PURE__ */ jsx(
                     "div",
                     {
                       className: cn(
                         "grid grid-cols-1 gap-4 sm:flex sm:flex-row",
                         isTextRight ? "items-end sm:justify-end" : "items-start sm:justify-start"
                       ),
-                      children: [
-                        /* @__PURE__ */ jsx(LocationActionButton, { ...primaryButton }),
-                        /* @__PURE__ */ jsx(LocationActionButton, { ...secondaryButton })
-                      ]
+                      children: buttons.map((button, index) => /* @__PURE__ */ jsx(LocationActionButton, { ...button }, index))
                     }
                   )
                 ]