dune-react 0.0.8 → 0.0.10

package/dist/components/puck-block/gallery-sections/gallery-3/gallery-3.js

@@ -0,0 +1,119 @@
+import { jsx, jsxs, Fragment } 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 gapClasses = {
+  sm: "gap-2",
+  md: "gap-3",
+  lg: "gap-5"
+};
+function ImageCard({
+  image,
+  index,
+  showCaption,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        // [&>span] targets the span wrapper that withEditable inserts in editor mode
+        "group relative overflow-hidden rounded-2xl bg-muted [&>span]:h-full [&>span]:w-full",
+        className
+      ),
+      children: [
+        !image.src && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: image.alt ?? `Image ${index + 1}` }) }),
+        /* @__PURE__ */ jsx(
+          CompoundImage,
+          {
+            src: image.src || "",
+            alt: image.alt ?? `Gallery image ${index + 1}`,
+            className: "h-full w-full object-cover transition-transform duration-500 ease-out group-hover:scale-105"
+          }
+        ),
+        showCaption && image.caption && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 flex items-end bg-gradient-to-t from-black/65 via-black/10 to-transparent p-5 opacity-0 transition-all duration-300 group-hover:opacity-100", children: /* @__PURE__ */ jsx("p", { className: "translate-y-2 text-sm font-medium text-white transition-transform duration-300 group-hover:translate-y-0", children: image.caption }) })
+      ]
+    }
+  );
+}
+const Gallery3 = ({
+  heading,
+  description,
+  images = [],
+  showCaptions = true,
+  styles
+}) => {
+  const gap = (styles == null ? void 0 : styles.gap) ?? "md";
+  const gc = gapClasses[gap] ?? gapClasses.md;
+  const [img1, img2, img3, ...rest] = 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: "flex flex-col gap-8 lg:gap-12", children: [
+        (heading || description) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3", children: heading && /* @__PURE__ */ jsx("h2", { className: "text-4xl font-bold tracking-tight text-foreground lg:text-5xl", children: heading }) }),
+          description && /* @__PURE__ */ jsx("p", { className: "max-w-sm text-base leading-relaxed text-muted-foreground lg:text-right", children: description })
+        ] }),
+        images.length > 0 && /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col", gc), children: [
+          img1 && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("div", { className: cn("flex flex-col lg:hidden", gc), children: [img1, img2, img3].filter(Boolean).map((img, i) => /* @__PURE__ */ jsx("div", { className: "aspect-[4/3]", children: /* @__PURE__ */ jsx(
+              ImageCard,
+              {
+                image: img,
+                index: i,
+                showCaption: showCaptions,
+                className: "h-full"
+              }
+            ) }, i)) }),
+            /* @__PURE__ */ jsxs("div", { className: cn("hidden h-[520px] lg:flex", gc), children: [
+              /* @__PURE__ */ jsx(
+                ImageCard,
+                {
+                  image: img1,
+                  index: 0,
+                  showCaption: showCaptions,
+                  className: "basis-[58%] shrink-0"
+                }
+              ),
+              (img2 || img3) && /* @__PURE__ */ jsxs("div", { className: cn("flex flex-1 flex-col", gc), children: [
+                img2 && /* @__PURE__ */ jsx(
+                  ImageCard,
+                  {
+                    image: img2,
+                    index: 1,
+                    showCaption: showCaptions,
+                    className: "flex-1"
+                  }
+                ),
+                img3 && /* @__PURE__ */ jsx(
+                  ImageCard,
+                  {
+                    image: img3,
+                    index: 2,
+                    showCaption: showCaptions,
+                    className: "flex-1"
+                  }
+                )
+              ] })
+            ] })
+          ] }),
+          rest.length > 0 && /* @__PURE__ */ jsx("div", { className: cn("grid grid-cols-2 lg:grid-cols-3", gc), children: rest.map((img, idx) => /* @__PURE__ */ jsx("div", { className: "aspect-[4/3]", children: /* @__PURE__ */ jsx(
+            ImageCard,
+            {
+              image: img,
+              index: idx + 3,
+              showCaption: showCaptions,
+              className: "h-full"
+            }
+          ) }, idx + 3)) })
+        ] })
+      ] })
+    }
+  );
+};
+export {
+  Gallery3
+};

package/dist/components/puck-block/gallery-sections/gallery-3/index.d.ts

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

package/dist/components/puck-block/gallery-sections/gallery-3/index.js

@@ -0,0 +1,59 @@
+import { getPlaceholderImageUrl } from "../../../puck-base/core/fields.js";
+import { Gallery3 } from "./gallery-3.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
+const makeDefaultImage = (i) => ({
+  src: getPlaceholderImageUrl("1200x800", `Gallery Image ${i + 1}`),
+  alt: `Gallery image ${i + 1}`,
+  caption: ""
+});
+const conf = {
+  fields: {
+    heading: {
+      type: "text",
+      contentEditable: true
+    },
+    description: {
+      type: "textarea",
+      contentEditable: true
+    },
+    images: {
+      type: "array",
+      max: 9,
+      getItemSummary: (item, index = 0) => item.alt || `Image ${index + 1}`,
+      arrayFields: {
+        src: { type: "image", label: "图片" },
+        alt: { type: "text", label: "Alt Text" },
+        caption: { type: "text", label: "Caption" }
+      },
+      defaultItemProps: makeDefaultImage(0)
+    },
+    showCaptions: {
+      type: "radio",
+      options: [
+        { label: "显示", value: true },
+        { label: "隐藏", value: false }
+      ]
+    },
+    styles: createStylesField({
+      gap: {
+        type: "radio",
+        options: [
+          { label: "紧凑", value: "sm" },
+          { label: "默认", value: "md" },
+          { label: "宽松", value: "lg" }
+        ]
+      }
+    })
+  },
+  defaultProps: {
+    heading: "Crafted with intention",
+    description: "A curated selection of moments that define our work and vision.",
+    images: Array.from({ length: 6 }, (_, i) => makeDefaultImage(i)),
+    showCaptions: true,
+    styles: createStylesDefaults({ gap: "md" })
+  },
+  render: Gallery3
+};
+export {
+  conf
+};

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

@@ -0,0 +1,26 @@
+type GalleryVariant = "gallery-1" | "gallery-2" | "gallery-3";
+type GalleryPadding = {
+    top?: "none" | "small" | "medium" | "large";
+    bottom?: "none" | "small" | "medium" | "large";
+};
+type GallerySectionStyle = "default" | "dark" | "muted" | "inverted" | "custom";
+type GalleryImage = {
+    src: string;
+    alt?: string;
+    caption?: string;
+};
+type GallerySectionProps = {
+    variant?: GalleryVariant;
+    heading?: string;
+    description?: string;
+    images?: GalleryImage[];
+    showCaptions?: boolean;
+    styles?: {
+        padding?: GalleryPadding;
+        sectionStyle?: GallerySectionStyle;
+        backgroundColor?: string;
+        columns?: 2 | 3 | 4;
+        gap?: "sm" | "md" | "lg";
+        aspectRatio?: "square" | "landscape" | "auto";
+    };
+};

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

@@ -24,10 +24,12 @@ type NavigationItem = NavigationLink & {
 };
 export interface HeaderProps extends ILayoutProps {
     companyName: string;
-    primaryNavigation?: NavigationItem[];
-    secondaryNavigation?: SecondaryNavigationItem[];
-    sectionStyle?: "default" | "dark" | "muted" | "inverted";
-    backgroundColor?: string;
+    navigation?: NavigationItem[];
+    actions?: SecondaryNavigationItem[];
+    styles?: {
+        sectionStyle?: "default" | "dark" | "muted" | "inverted";
+        backgroundColor?: string;
+    };
 }
-export declare const Header: ({ companyName, primaryNavigation, secondaryNavigation, sectionStyle, backgroundColor, }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Header: ({ companyName, navigation, actions, styles, }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -29,24 +29,23 @@ const HEADER_SECTION_VARS = {
 };
 const Header = ({
   companyName,
-  primaryNavigation,
-  secondaryNavigation,
-  sectionStyle,
-  backgroundColor
+  navigation,
+  actions,
+  styles
 }) => {
   const [isOpen, setOpen] = useState(false);
-  const sectionVars = sectionStyle && sectionStyle !== "default" ? HEADER_SECTION_VARS[sectionStyle] ?? {} : {};
+  const sectionVars = (styles == null ? void 0 : styles.sectionStyle) && styles.sectionStyle !== "default" ? HEADER_SECTION_VARS[styles.sectionStyle] ?? {} : {};
   return /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(
     "header",
     {
       className: cn("bg-background text-foreground sticky top-0 left-0 z-40 w-full"),
       style: {
-        ...backgroundColor ? { backgroundColor } : {},
+        ...(styles == null ? void 0 : styles.backgroundColor) ? { backgroundColor: styles.backgroundColor } : {},
         ...sectionVars
       },
       children: /* @__PURE__ */ jsxs("div", { className: "relative container mx-auto flex min-h-20 flex-row items-center gap-4 lg:grid lg:grid-cols-[auto_1fr_auto]", children: [
         /* @__PURE__ */ jsx("div", { className: "flex lg:justify-start", children: /* @__PURE__ */ jsx("p", { className: "font-semibold whitespace-nowrap", children: companyName }) }),
-        /* @__PURE__ */ jsx("div", { className: "hidden flex-row items-center justify-center gap-4 lg:flex", children: Array.isArray(primaryNavigation) && primaryNavigation.length > 0 ? /* @__PURE__ */ jsx(NavigationMenu, { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(NavigationMenuList, { className: "flex flex-row justify-center gap-4", children: primaryNavigation.map((item, index) => {
+        /* @__PURE__ */ jsx("div", { className: "hidden flex-row items-center justify-center gap-4 lg:flex", children: Array.isArray(navigation) && navigation.length > 0 ? /* @__PURE__ */ jsx(NavigationMenu, { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(NavigationMenuList, { className: "flex flex-row justify-center gap-4", children: navigation.map((item, index) => {
           var _a, _b;
           return /* @__PURE__ */ jsx(NavigationMenuItem, { children: item.url ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(NavigationMenuLink, { asChild: true, children: /* @__PURE__ */ jsx(
             CompoundButton,
@@ -98,7 +97,7 @@ const Header = ({
             ] }) })
           ] }) }, index);
         }) }) }) : null }),
-        /* @__PURE__ */ jsx("div", { className: "flex w-full justify-end gap-4", children: secondaryNavigation == null ? void 0 : secondaryNavigation.map((item, index) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+        /* @__PURE__ */ jsx("div", { className: "flex w-full justify-end gap-4", children: actions == null ? void 0 : actions.map((item, index) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
           /* @__PURE__ */ jsx(
             CompoundButton,
             {
@@ -125,7 +124,7 @@ const Header = ({
               children: isOpen ? /* @__PURE__ */ jsx(X, { className: "h-5 w-5" }) : /* @__PURE__ */ jsx(Menu, { className: "h-5 w-5" })
             }
           ),
-          isOpen && /* @__PURE__ */ jsx("div", { className: "bg-background absolute top-20 right-0 container flex w-full flex-col gap-8 border-t py-4 shadow-lg", children: primaryNavigation == null ? void 0 : primaryNavigation.map((item, index) => /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+          isOpen && /* @__PURE__ */ jsx("div", { className: "bg-background absolute top-20 right-0 container flex w-full flex-col gap-8 border-t py-4 shadow-lg", children: navigation == null ? void 0 : navigation.map((item, index) => /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
             item.url ? /* @__PURE__ */ jsxs(
               "a",
               {

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

@@ -1,7 +1,7 @@
 import { ComponentConfig } from "@puckeditor/core";
 import { HeaderProps } from "./header";
 export type { HeaderProps };
-export declare const defaultPrimaryNavigationItems: ({
+export declare const defaultNavigationItems: ({
     label: string;
     url: string;
     description: string;

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

@@ -1,6 +1,8 @@
+"use client";
 import { Header } from "./header.js";
-import { backgroundColor, sectionStyle, actionDefaults, button, action } from "../../../puck-base/core/fields.js";
-const defaultPrimaryNavigationItems = [
+import { actionDefaults, button, action } from "../../../puck-base/core/fields.js";
+import { createStylesField } from "../../../puck-base/core/styles.js";
+const defaultNavigationItems = [
   {
     label: "Home",
     url: "/",
@@ -73,7 +75,7 @@ const defaultPrimaryNavigationItems = [
     ]
   }
 ];
-const defaultSecondaryNavigationItems = [
+const defaultActionItems = [
   {
     label: "Book a demo",
     url: "#",
@@ -105,8 +107,8 @@ const conf = {
       label: "company name",
       type: "text"
     },
-    primaryNavigation: {
-      label: "primary navigation",
+    navigation: {
+      label: "navigation",
       type: "array",
       max: 4,
       getItemSummary: (item, index = 0) => item.label || `Link ${index + 1}`,
@@ -142,8 +144,8 @@ const conf = {
         items: []
       }
     },
-    secondaryNavigation: {
-      label: "secondary navigation",
+    actions: {
+      label: "actions",
       type: "array",
       max: 4,
       getItemSummary: (item, index = 0) => item.label || `Link ${index}`,
@@ -179,13 +181,12 @@ const conf = {
         isHiddenOnMobile: "true"
       }
     },
-    sectionStyle,
-    backgroundColor
+    styles: createStylesField()
   },
   defaultProps: {
     companyName: "TWBlocks",
-    primaryNavigation: defaultPrimaryNavigationItems,
-    secondaryNavigation: defaultSecondaryNavigationItems,
+    navigation: defaultNavigationItems,
+    actions: defaultActionItems,
     __metadata: {
       type: "layout"
     }
@@ -194,5 +195,5 @@ const conf = {
 };
 export {
   conf as default,
-  defaultPrimaryNavigationItems
+  defaultNavigationItems
 };

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

@@ -0,0 +1,41 @@
+type HeaderVariant = "header-1" | "sticky-nav-1";
+type HeaderPadding = {
+    top?: "none" | "small" | "medium" | "large";
+    bottom?: "none" | "small" | "medium" | "large";
+};
+type HeaderSectionStyle = "default" | "dark" | "muted" | "inverted" | "custom";
+type HeaderButton = {
+    label: string;
+    url?: string;
+    action?: string;
+    variant?: "default" | "secondary" | "outline" | "ghost" | "link" | "destructive";
+    size?: "default" | "sm" | "lg" | "icon";
+    icon?: string;
+    divider?: boolean;
+    isHiddenOnMobile?: boolean;
+};
+type HeaderNavigationItem = {
+    label: string;
+    url?: string;
+    description?: string;
+    cta?: HeaderButton;
+    items?: Array<{
+        label: string;
+        url: string;
+    }>;
+};
+type HeaderSectionProps = {
+    variant?: HeaderVariant;
+    __metadata?: {
+        type: "layout";
+    };
+    companyName?: string;
+    logo?: string;
+    navigation?: HeaderNavigationItem[];
+    actions?: HeaderButton[];
+    styles?: {
+        padding?: HeaderPadding;
+        sectionStyle?: HeaderSectionStyle;
+        backgroundColor?: string;
+    };
+};

package/dist/components/puck-block/header-sections/sticky-nav-1/index.js

@@ -1,26 +1,26 @@
-import { backgroundColor, sectionStyle } from "../../../puck-base/core/fields.js";
 import { StickyNav } from "./sticky-nav.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
 const conf = {
   fields: {
     logo: { type: "text", contentEditable: true },
-    links: {
+    navigation: {
       type: "array",
       max: 8,
       getItemSummary: (item, i = 0) => item.label || `Link ${i + 1}`,
-      arrayFields: { label: { type: "text" }, href: { type: "text" } },
-      defaultItemProps: { label: "Link", href: "#" }
+      arrayFields: { label: { type: "text" }, url: { type: "text" } },
+      defaultItemProps: { label: "Link", url: "#" }
     },
-    sectionStyle,
-    backgroundColor
+    styles: createStylesField()
   },
   defaultProps: {
     logo: "Brand",
-    links: [
-      { label: "Features", href: "#features" },
-      { label: "Pricing", href: "#pricing" },
-      { label: "About", href: "#about" },
-      { label: "Contact", href: "#contact" }
-    ]
+    navigation: [
+      { label: "Features", url: "#features" },
+      { label: "Pricing", url: "#pricing" },
+      { label: "About", url: "#about" },
+      { label: "Contact", url: "#contact" }
+    ],
+    styles: createStylesDefaults()
   },
   render: StickyNav
 };

package/dist/components/puck-block/header-sections/sticky-nav-1/sticky-nav.d.ts

@@ -1,12 +1,14 @@
 import { type CompoundContainerProps } from "@/components/puck-base/container";
 export interface StickyNavProps {
-    padding?: CompoundContainerProps["padding"];
-    sectionStyle?: CompoundContainerProps["sectionStyle"];
-    backgroundColor?: string;
-    links?: Array<{
+    navigation?: Array<{
         label: string;
-        href: string;
+        url: string;
     }>;
     logo?: string;
+    styles?: {
+        padding?: CompoundContainerProps["padding"];
+        sectionStyle?: CompoundContainerProps["sectionStyle"];
+        backgroundColor?: string;
+    };
 }
-export declare const StickyNav: ({ links, logo, sectionStyle, backgroundColor }: StickyNavProps) => import("react/jsx-runtime").JSX.Element;
+export declare const StickyNav: ({ navigation, logo, styles }: StickyNavProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/puck-block/header-sections/sticky-nav-1/sticky-nav.js

@@ -19,22 +19,22 @@ const NAV_SECTION_VARS = {
     "--border": "oklch(0.87 0 0)"
   }
 };
-const StickyNav = ({ links = [], logo, sectionStyle, backgroundColor }) => {
-  const sectionVars = sectionStyle && sectionStyle !== "default" ? NAV_SECTION_VARS[sectionStyle] ?? {} : {};
+const StickyNav = ({ navigation = [], logo, styles }) => {
+  const sectionVars = (styles == null ? void 0 : styles.sectionStyle) && styles.sectionStyle !== "default" ? NAV_SECTION_VARS[styles.sectionStyle] ?? {} : {};
   return /* @__PURE__ */ jsx(
     "nav",
     {
       className: "bg-background/80 border-border sticky top-0 z-50 border-b backdrop-blur-md",
       style: {
-        ...backgroundColor ? { backgroundColor } : {},
+        ...(styles == null ? void 0 : styles.backgroundColor) ? { backgroundColor: styles.backgroundColor } : {},
         ...sectionVars
       },
       children: /* @__PURE__ */ jsxs("div", { className: "mx-auto flex h-14 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8", children: [
         /* @__PURE__ */ jsx("span", { className: "text-foreground text-lg font-bold", children: logo || "Brand" }),
-        /* @__PURE__ */ jsx("div", { className: "hidden gap-6 md:flex", children: links.map((link, i) => /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("div", { className: "hidden gap-6 md:flex", children: navigation.map((link, i) => /* @__PURE__ */ jsx(
           "a",
           {
-            href: link.href || "#",
+            href: link.url || "#",
             className: "text-muted-foreground hover:text-foreground text-sm transition-colors",
             children: link.label
           },

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

@@ -1,9 +1,6 @@
 import { CompoundContainerProps } from "@/components/puck-base/container";
 import { CompoundButtonProps } from "@/components/puck-base/button";
 export interface FullscreenHeroProps {
-    padding?: CompoundContainerProps["padding"];
-    sectionStyle?: CompoundContainerProps["sectionStyle"];
-    backgroundColor?: string;
     heading?: string;
     description?: string;
     badge?: {
@@ -12,5 +9,15 @@ export interface FullscreenHeroProps {
         variant: string;
     };
     buttons?: CompoundButtonProps[];
+    backgroundImage?: {
+        src: string;
+        alt?: string;
+    } | string;
+    styles?: {
+        padding?: CompoundContainerProps["padding"];
+        sectionStyle?: CompoundContainerProps["sectionStyle"];
+        backgroundColor?: string;
+        overlay?: "none" | "dark" | "gradient";
+    };
 }
-export declare const FullscreenHero: ({ padding, sectionStyle, backgroundColor, heading, description, badge, buttons, }: FullscreenHeroProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FullscreenHero: ({ heading, description, badge, buttons, backgroundImage, styles, }: FullscreenHeroProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,32 +1,69 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { CompoundContainer } from "../../../puck-base/container.js";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { CompoundContainer, SECTION_STYLE_VARS } from "../../../puck-base/container.js";
 import { CompoundButton } from "../../../puck-base/button.js";
+import { CompoundImage } from "../../../puck-base/image.js";
+import { cn } from "../../../../utils/css-utils.js";
+const overlayStyles = {
+  dark: "bg-black/55",
+  gradient: "bg-gradient-to-t from-black/80 to-black/10"
+};
 const FullscreenHero = ({
-  padding,
-  sectionStyle = "dark",
-  backgroundColor,
   heading = "",
   description,
   badge,
-  buttons
-}) => /* @__PURE__ */ jsxs(
-  CompoundContainer,
-  {
-    padding,
-    sectionStyle,
-    backgroundColor,
-    className: "min-h-[100vh] flex flex-col justify-end",
-    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 }),
-      /* @__PURE__ */ jsx("hr", { className: "w-full my-4 border-foreground/20" }),
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-col md:flex-row justify-between items-start md:items-end gap-6 mt-4", children: [
-        description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-base leading-relaxed max-w-lg", children: description }),
-        buttons && buttons.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex gap-4", children: buttons.map((btn, i) => /* @__PURE__ */ jsx(CompoundButton, { ...btn }, i)) })
-      ] })
-    ]
+  buttons,
+  backgroundImage,
+  styles
+}) => {
+  const sectionStyle = (styles == null ? void 0 : styles.sectionStyle) ?? "dark";
+  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) ?? "";
+  if (!bgSrc) {
+    return /* @__PURE__ */ jsx(
+      CompoundContainer,
+      {
+        padding,
+        sectionStyle,
+        backgroundColor,
+        className: "min-h-[100vh] flex flex-col justify-end",
+        children: /* @__PURE__ */ jsx(Content, { badge, heading, description, buttons })
+      }
+    );
   }
-);
+  const { top = "large", bottom = "large" } = padding ?? {};
+  const styleVars = sectionStyle && sectionStyle !== "default" && sectionStyle !== "custom" ? SECTION_STYLE_VARS[sectionStyle] : {};
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      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" }
+      ),
+      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 }) })
+      ]
+    }
+  );
+};
+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 }),
+    /* @__PURE__ */ jsx("hr", { className: "w-full my-4 border-foreground/20" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col md:flex-row justify-between items-start md:items-end gap-6 mt-4", children: [
+      description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-base leading-relaxed max-w-lg", children: description }),
+      buttons && buttons.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex gap-4", children: buttons.map((btn, i) => /* @__PURE__ */ jsx(CompoundButton, { ...btn }, i)) })
+    ] })
+  ] });
+}
 export {
   FullscreenHero
 };