dune-react 0.0.22 → 0.0.24

package/dist/components/puck-block/hero-sections/sticky-expand-hero/index.d.ts

@@ -91,14 +91,22 @@ declare const conf: {
                 readonly instructions: "Buttons must use the same size";
             };
         };
-        image: {
-            type: "object";
-            objectFields: {
-                src: import("@puckeditor/core").Field<string>;
-                alt: {
+        images: {
+            readonly type: "array";
+            readonly max: 10;
+            readonly getItemSummary: (item: {
+                alt?: string;
+            }, index?: number) => string;
+            readonly arrayFields: {
+                readonly src: import("@puckeditor/core").Field<string>;
+                readonly alt: {
                     type: "text";
                 };
             };
+            readonly defaultItemProps: {
+                alt: string;
+                src: string;
+            };
         };
     };
     defaultProps: StickyExpandHeroProps;

package/dist/components/puck-block/hero-sections/sticky-expand-hero/index.js

@@ -1,13 +1,13 @@
 import { StickyExpandHero, StickyExpandHeroDefaults } from "./component.js";
 import { descriptionField, headingField } from "../../../puck-core/core/props/content.js";
 import { buttonsField } from "../../../puck-core/core/props/interactive.js";
-import { imageField } from "../../../puck-core/core/props/media.js";
+import { imagesField } from "../../../puck-core/core/props/media.js";
 const conf = {
   fields: {
     heading: headingField,
     description: descriptionField,
     buttons: buttonsField,
-    image: imageField
+    images: imagesField
   },
   defaultProps: StickyExpandHeroDefaults,
   render: StickyExpandHero

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

@@ -208,11 +208,11 @@ const StickyVideoHeroDefaults = {
   video: "https://www.youtube.com/embed/8DKLYsikxTs?si=Ch9W0KrDWWUiCMMW",
   images: [{
     src: "https://picsum.photos/seed/hero-video/1200/800",
-    alt: "Relume placeholder image"
+    alt: "Placeholder image"
   }],
   videoImage: {
     src: "https://picsum.photos/seed/hero-video/1200/800",
-    alt: "Relume placeholder image"
+    alt: "Placeholder image"
   },
   styles: { variant: "centered" }
 };

package/dist/components/puck-block/hero-sections/tab-hero/component.js

@@ -31,7 +31,7 @@ const TabHero = (props) => {
       {
         value: trigger.value,
         onClick: () => setActiveTab(trigger.value),
-        className: "relative flex-1 whitespace-normal border-0 bg-transparent px-4 py-4 text-center text-neutral-light duration-0 data-[state=active]:bg-transparent data-[state=active]:text-neutral-white sm:px-8 md:min-w-32",
+        className: "relative flex-1 whitespace-nowrap border-0 bg-transparent px-4 py-4 text-center text-neutral-light duration-0 data-[state=active]:bg-transparent data-[state=active]:text-neutral-white sm:px-8 md:min-w-32",
         children: [
           /* @__PURE__ */ jsx("span", { children: trigger.text }),
           /* @__PURE__ */ jsx("div", { className: "absolute inset-0 top-auto h-1 w-full bg-white/20", children: /* @__PURE__ */ jsx(
@@ -108,7 +108,7 @@ const TabHeroDefaults = {
         buttons: [{ label: "Button" }, { label: "Button", variant: "secondary" }],
         image: {
           src: "https://picsum.photos/seed/hero-landscape/1200/800",
-          alt: "Relume placeholder image 1"
+          alt: "Placeholder image 1"
         }
       },
       {
@@ -118,7 +118,7 @@ const TabHeroDefaults = {
         buttons: [{ label: "Button" }, { label: "Button", variant: "secondary" }],
         image: {
           src: "https://picsum.photos/seed/hero-landscape/1200/800",
-          alt: "Relume placeholder image 2"
+          alt: "Placeholder image 2"
         }
       },
       {
@@ -128,7 +128,7 @@ const TabHeroDefaults = {
         buttons: [{ label: "Button" }, { label: "Button", variant: "secondary" }],
         image: {
           src: "https://picsum.photos/seed/hero-landscape/1200/800",
-          alt: "Relume placeholder image 3"
+          alt: "Placeholder image 3"
         }
       },
       {
@@ -138,7 +138,7 @@ const TabHeroDefaults = {
         buttons: [{ label: "Button" }, { label: "Button", variant: "secondary" }],
         image: {
           src: "https://picsum.photos/seed/hero-landscape/1200/800",
-          alt: "Relume placeholder image 4"
+          alt: "Placeholder image 4"
         }
       }
     ]

package/dist/components/puck-block/hero-sections/three-image-parallax-hero/component.js

@@ -159,15 +159,15 @@ const ThreeImageParallaxHeroDefaults = {
   buttons: [{ label: "Button" }, { label: "Button", variant: "secondary" }],
   imageLeft: {
     src: "https://picsum.photos/seed/hero-portrait/800/1200",
-    alt: "Relume placeholder image 1"
+    alt: "Placeholder image 1"
   },
   imageCenter: {
     src: "https://picsum.photos/seed/hero-square/1200/1200",
-    alt: "Relume placeholder image 2"
+    alt: "Placeholder image 2"
   },
   imageRight: {
     src: "https://picsum.photos/seed/hero-portrait/800/1200",
-    alt: "Relume placeholder image 3"
+    alt: "Placeholder image 3"
   },
   styles: {
     textAlign: "left",

package/dist/components/puck-block/hero-sections/vertical-gallery-hero/component.js

@@ -74,27 +74,27 @@ const VerticalGalleryHeroDefaults = {
   images: [
     {
       src: "https://picsum.photos/seed/hero-square/1200/1200",
-      alt: "Relume placeholder image 1"
+      alt: "Placeholder image 1"
     },
     {
       src: "https://picsum.photos/seed/hero-square/1200/1200",
-      alt: "Relume placeholder image 2"
+      alt: "Placeholder image 2"
     },
     {
       src: "https://picsum.photos/seed/hero-square/1200/1200",
-      alt: "Relume placeholder image 3"
+      alt: "Placeholder image 3"
     },
     {
       src: "https://picsum.photos/seed/hero-square/1200/1200",
-      alt: "Relume placeholder image 4"
+      alt: "Placeholder image 4"
     },
     {
       src: "https://picsum.photos/seed/hero-square/1200/1200",
-      alt: "Relume placeholder image 5"
+      alt: "Placeholder image 5"
     },
     {
       src: "https://picsum.photos/seed/hero-square/1200/1200",
-      alt: "Relume placeholder image 6"
+      alt: "Placeholder image 6"
     }
   ]
 };

package/dist/components/puck-block/hero-sections/zoom-grid-hero/component.js

@@ -6,6 +6,7 @@ import { CompoundButton } from "../../../puck-base/button.js";
 import { CompoundImage } from "../../../puck-base/image.js";
 import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
 import { useScrollContainer } from "../../../../hooks/use-scroll-container.js";
+import { useEditorContext } from "../../../puck-core/core/context/editor-context.js";
 import { useScroll, useTransform, motion } from "framer-motion";
 const ZoomGridHero = (props) => {
   const { heading, description, buttons = [], images = [], styles } = {
@@ -13,6 +14,7 @@ const ZoomGridHero = (props) => {
     ...props
   };
   const { className: sectionClassName, style: sectionStyle, css } = styles ?? {};
+  const { isEditor } = useEditorContext();
   const sectionRef = useRef(null);
   const [scrollContainerRef] = useScrollContainer(sectionRef);
   const { scrollYProgress } = useScroll(
@@ -26,7 +28,7 @@ const ZoomGridHero = (props) => {
       motion.div,
       {
         className: "flex h-full items-center justify-center",
-        style: { opacity: opacityContent },
+        style: { opacity: isEditor ? 1 : opacityContent },
         children: /* @__PURE__ */ jsx("div", { className: "px-[5%] py-8 md:py-12 lg:py-14", children: /* @__PURE__ */ jsxs("div", { className: "relative z-10 mx-auto max-w-lg text-center", children: [
           /* @__PURE__ */ jsx("h1", { className: "mb-5 text-6xl font-bold text-text-alternative md:mb-6 md:text-9xl lg:text-10xl", children: heading }),
           /* @__PURE__ */ jsx("p", { className: "text-text-alternative md:text-md", children: description }),
@@ -39,13 +41,13 @@ const ZoomGridHero = (props) => {
         motion.div,
         {
           className: "absolute inset-0 z-10 bg-black/50",
-          style: { opacity: opacityOverlay }
+          style: { opacity: isEditor ? 0 : opacityOverlay }
         }
       ),
       /* @__PURE__ */ jsx(
         motion.div,
         {
-          style: { scale },
+          style: { scale: isEditor ? 1 : scale },
           className: "grid size-full auto-cols-fr grid-cols-1 gap-x-4 gap-y-4 md:grid-cols-3",
           children: images.map((image, index) => /* @__PURE__ */ jsx(
             "div",
@@ -77,39 +79,39 @@ const ZoomGridHeroDefaults = {
   images: [
     {
       src: "https://picsum.photos/seed/hero-square/1200/1200",
-      alt: "Relume placeholder image 1"
+      alt: "Placeholder image 1"
     },
     {
       src: "https://picsum.photos/seed/hero-square/1200/1200",
-      alt: "Relume placeholder image 2"
+      alt: "Placeholder image 2"
     },
     {
       src: "https://picsum.photos/seed/hero-square/1200/1200",
-      alt: "Relume placeholder image 3"
+      alt: "Placeholder image 3"
     },
     {
       src: "https://picsum.photos/seed/hero-square/1200/1200",
-      alt: "Relume placeholder image 4"
+      alt: "Placeholder image 4"
     },
     {
       src: "https://picsum.photos/seed/hero-square/1200/1200",
-      alt: "Relume placeholder image 5"
+      alt: "Placeholder image 5"
     },
     {
       src: "https://picsum.photos/seed/hero-square/1200/1200",
-      alt: "Relume placeholder image 6"
+      alt: "Placeholder image 6"
     },
     {
       src: "https://picsum.photos/seed/hero-square/1200/1200",
-      alt: "Relume placeholder image 7"
+      alt: "Placeholder image 7"
     },
     {
       src: "https://picsum.photos/seed/hero-square/1200/1200",
-      alt: "Relume placeholder image 8"
+      alt: "Placeholder image 8"
     },
     {
       src: "https://picsum.photos/seed/hero-square/1200/1200",
-      alt: "Relume placeholder image 9"
+      alt: "Placeholder image 9"
     }
   ]
 };

package/dist/components/puck-block/index.d.ts

@@ -13,5 +13,6 @@ export * from "./text-sections";
 export * from "./showcase-sections";
 export * from "./team-sections";
 export * from "./footer-sections";
+export * from "./location-sections";
 export { confMap, categories, sectionsMap, buildComponents, getComponentDefaultProps } from "./registry.generated";
 export type { ComponentName, ComponentProps } from "./registry.generated";

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

@@ -0,0 +1,3 @@
+export { default as LocationConf } from "./location-1";
+export { default as Location2Conf } from "./location-2";
+export { default as Location3Conf } from "./location-3";

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

@@ -0,0 +1,102 @@
+import { LocationSection } from "./location.js";
+import { locationDefaults, locationField } from "../../../puck-core/core/props/form.js";
+import { buttonField } from "../../../puck-core/core/props/interactive.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-core/core/styles.js";
+const locationButtonFields = {
+  ...buttonField.objectFields,
+  colorMode: {
+    type: "select",
+    options: [
+      { label: "Theme", value: "theme" },
+      { label: "Custom", value: "custom" }
+    ]
+  },
+  backgroundColor: { type: "text" },
+  textColor: { type: "text" }
+};
+const locationButtonDefaults = {
+  label: "Button",
+  variant: "default",
+  size: "default",
+  icon: "none",
+  colorMode: "theme"
+};
+const conf = {
+  fields: {
+    heading: { type: "textarea", contentEditable: true },
+    description: { type: "textarea", contentEditable: true },
+    contentAlign: {
+      type: "radio",
+      label: "Text Align",
+      options: [
+        { label: "Left", value: "left" },
+        { label: "Right", value: "right" }
+      ]
+    },
+    contentPosition: {
+      type: "radio",
+      label: "Layout",
+      options: [
+        { label: "Text Left / Map Right", value: "left" },
+        { label: "Map Left / Text Right", value: "right" }
+      ]
+    },
+    location: locationField,
+    mapStyle: {
+      type: "radio",
+      label: "Map Style",
+      options: [
+        { label: "Default", value: "default" },
+        { label: "Grayscale", value: "grayscale" },
+        { label: "Dark", value: "dark" }
+      ]
+    },
+    mapTint: {
+      type: "radio",
+      label: "Map Tint",
+      options: [
+        { label: "Theme", value: "theme" },
+        { label: "None", value: "none" }
+      ]
+    },
+    buttons: {
+      type: "array",
+      max: 3,
+      getItemSummary: (item, index = 0) => item.label || `Button ${index + 1}`,
+      arrayFields: locationButtonFields,
+      defaultItemProps: locationButtonDefaults
+    },
+    styles: createStylesField()
+  },
+  defaultProps: {
+    heading: "Our Offices",
+    description: "We have offices around the globe. Visit us or get in touch with a local team near you.",
+    contentAlign: "left",
+    contentPosition: "left",
+    location: locationDefaults,
+    mapStyle: "grayscale",
+    mapTint: "theme",
+    buttons: [
+      {
+        label: "Contact us",
+        variant: "default",
+        size: "default",
+        icon: "none",
+        colorMode: "theme"
+      },
+      {
+        label: "Get directions",
+        variant: "secondary",
+        size: "default",
+        icon: "none",
+        colorMode: "theme"
+      }
+    ],
+    styles: createStylesDefaults()
+  },
+  render: LocationSection
+};
+export {
+  conf,
+  conf as default
+};

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

@@ -18,9 +18,6 @@ export interface LocationSectionProps {
     mapTint?: "none" | "theme";
     buttons?: LocationButton[];
     styles?: {
-        className?: string;
-        style?: Record<string, unknown>;
-        css?: string;
         padding?: CompoundContainerProps["padding"];
         sectionStyle?: CompoundContainerProps["sectionStyle"];
         backgroundColor?: string;

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

@@ -0,0 +1,139 @@
+import { jsx, jsxs } 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";
+import { getMapEmbedUrl } from "../../../puck-core/core/props/form.js";
+const LocationActionButton = ({
+  label,
+  url,
+  action,
+  variant = "default",
+  size = "default",
+  icon = "none",
+  colorMode = "theme",
+  backgroundColor,
+  textColor
+}) => {
+  if (!label) return null;
+  const useCustomColors = colorMode === "custom";
+  const styleVars = {
+    ...useCustomColors && backgroundColor ? { "--location-btn-bg": backgroundColor } : {},
+    ...useCustomColors && textColor ? { "--location-btn-text": textColor } : {}
+  };
+  return /* @__PURE__ */ jsx("span", { style: Object.keys(styleVars).length ? styleVars : void 0, children: /* @__PURE__ */ jsx(
+    CompoundButton,
+    {
+      label,
+      action: action ?? (url ? /^https?:\/\//i.test(url) ? { type: "external", externalUrl: url } : { type: "page", pageUrl: url } : void 0),
+      variant,
+      size,
+      icon,
+      className: cn(
+        "rounded-3xl !h-auto !px-5 !py-2.5 !text-sm !font-medium transition-opacity hover:opacity-90",
+        useCustomColors && backgroundColor && "!border-[var(--location-btn-bg)] !bg-[var(--location-btn-bg)] hover:!bg-[var(--location-btn-bg)]",
+        useCustomColors && textColor && "!text-[var(--location-btn-text)]"
+      )
+    }
+  ) });
+};
+const MAP_STYLE_FILTERS = {
+  default: "",
+  grayscale: "grayscale(45%) contrast(1.06) brightness(0.98) saturate(0.9)",
+  dark: "grayscale(100%) invert(1) contrast(1.1) brightness(0.8)"
+};
+const LocationSection = ({
+  heading,
+  description,
+  contentAlign = "left",
+  contentPosition = "left",
+  location: loc,
+  mapStyle = "default",
+  mapTint = "theme",
+  buttons = [],
+  styles
+}) => {
+  const isTextRight = contentAlign === "right";
+  const isContentRight = contentPosition === "right";
+  const showMapTint = mapTint === "theme";
+  const mapEmbedUrl = loc && loc.lat !== 0 ? getMapEmbedUrl(loc) : void 0;
+  const mapFilter = MAP_STYLE_FILTERS[mapStyle] || "";
+  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,
+      className: "relative overflow-hidden",
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "grid grid-cols-1 items-center gap-10 lg:grid-cols-2 lg:gap-12",
+            isContentRight && "lg:[direction:rtl] lg:[&>*]:[direction:ltr]"
+          ),
+          children: [
+            /* @__PURE__ */ jsx("div", { className: "flex w-full", children: /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn(
+                  "flex w-full min-w-0 flex-col justify-center gap-6",
+                  isTextRight ? "items-end text-right" : "items-start text-left"
+                ),
+                children: [
+                  heading && /* @__PURE__ */ jsx("div", { className: "flex w-full flex-col gap-3", children: /* @__PURE__ */ jsx("h2", { className: "text-foreground whitespace-pre-line font-serif text-4xl leading-tight tracking-tighter md:text-6xl", children: heading }) }),
+                  description ? /* @__PURE__ */ jsx(
+                    "p",
+                    {
+                      className: cn(
+                        "text-muted-foreground max-w-xl text-lg leading-relaxed tracking-tight",
+                        isTextRight && "ml-auto"
+                      ),
+                      children: description
+                    }
+                  ) : null,
+                  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: buttons.map((button, index) => /* @__PURE__ */ jsx(LocationActionButton, { ...button }, index))
+                    }
+                  )
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsx("div", { className: "h-[320px] w-full overflow-hidden md:h-[400px] lg:h-[460px]", children: /* @__PURE__ */ jsxs("div", { className: "relative h-full w-full overflow-hidden rounded-3xl", children: [
+              mapEmbedUrl ? /* @__PURE__ */ jsx(
+                "iframe",
+                {
+                  src: mapEmbedUrl,
+                  title: (loc == null ? void 0 : loc.address) || "Google Maps",
+                  className: "h-full w-full border-0",
+                  loading: "lazy",
+                  referrerPolicy: "no-referrer-when-downgrade",
+                  allowFullScreen: true,
+                  style: mapFilter ? { filter: mapFilter } : void 0
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: "flex h-full w-full items-center justify-center bg-muted text-muted-foreground", children: "Map address not configured" }),
+              showMapTint ? /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "bg-primary pointer-events-none absolute inset-0",
+                  style: {
+                    opacity: 0.2,
+                    mixBlendMode: "color"
+                  }
+                }
+              ) : null
+            ] }) })
+          ]
+        }
+      )
+    }
+  );
+};
+export {
+  LocationSection
+};

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

@@ -0,0 +1,126 @@
+import { Location2 } from "./location.js";
+import { buttonField } from "../../../puck-core/core/props/interactive.js";
+import { locationField } from "../../../puck-core/core/props/form.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-core/core/styles.js";
+const locationButtonFields = {
+  ...buttonField.objectFields,
+  colorMode: {
+    type: "select",
+    options: [
+      { label: "Theme", value: "theme" },
+      { label: "Custom", value: "custom" }
+    ]
+  },
+  backgroundColor: { type: "text" },
+  textColor: { type: "text" }
+};
+const locationButtonDefaults = {
+  label: "Button",
+  variant: "default",
+  size: "default",
+  icon: "none",
+  colorMode: "theme"
+};
+const location2ExtraStyleFields = {
+  cardStyle: {
+    type: "radio",
+    label: "Card Style",
+    options: [
+      { label: "Solid", value: "solid" },
+      { label: "Glass", value: "glass" }
+    ]
+  },
+  sectionHeight: {
+    type: "radio",
+    label: "Section Height",
+    options: [
+      { label: "Compact", value: "sm" },
+      { label: "Medium", value: "md" },
+      { label: "Tall", value: "lg" }
+    ]
+  }
+};
+const conf = {
+  fields: {
+    heading: { type: "textarea", contentEditable: true },
+    description: { type: "textarea", contentEditable: true },
+    displayAddress: {
+      type: "textarea",
+      label: "Display Address",
+      contentEditable: true
+    },
+    contentPosition: {
+      type: "radio",
+      label: "Card Position",
+      options: [
+        { label: "Left", value: "left" },
+        { label: "Right", value: "right" }
+      ]
+    },
+    location: locationField,
+    mapStyle: {
+      type: "radio",
+      label: "Map Style",
+      options: [
+        { label: "Default", value: "default" },
+        { label: "Grayscale", value: "grayscale" },
+        { label: "Dark", value: "dark" }
+      ]
+    },
+    mapTint: {
+      type: "radio",
+      label: "Map Tint",
+      options: [
+        { label: "None", value: "none" },
+        { label: "Theme", value: "theme" }
+      ]
+    },
+    buttons: {
+      type: "array",
+      max: 3,
+      getItemSummary: (item, index = 0) => item.label || `Button ${index + 1}`,
+      arrayFields: locationButtonFields,
+      defaultItemProps: locationButtonDefaults
+    },
+    styles: createStylesField(location2ExtraStyleFields)
+  },
+  defaultProps: {
+    heading: "Our Offices",
+    description: "Visit our headquarters in London or reach out to one of our regional offices worldwide.",
+    displayAddress: "10 Finsbury Square\nLondon, UK EC2A 1AF",
+    contentPosition: "left",
+    location: {
+      address: "London, United Kingdom",
+      lat: 51.5074,
+      lng: -0.1278,
+      zoom: 13
+    },
+    mapStyle: "grayscale",
+    mapTint: "none",
+    buttons: [
+      {
+        label: "Get Directions",
+        variant: "default",
+        size: "default",
+        icon: "none",
+        colorMode: "theme"
+      },
+      {
+        label: "Call Us",
+        variant: "outline",
+        size: "default",
+        icon: "none",
+        colorMode: "theme"
+      }
+    ],
+    styles: createStylesDefaults({
+      cardStyle: "solid",
+      sectionHeight: "md"
+    })
+  },
+  render: Location2
+};
+export {
+  conf,
+  conf as default
+};

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

@@ -18,9 +18,6 @@ export interface Location2Props {
     mapTint?: "none" | "theme";
     buttons?: LocationButton[];
     styles?: {
-        className?: string;
-        style?: Record<string, unknown>;
-        css?: string;
         padding?: CompoundContainerProps["padding"];
         sectionStyle?: CompoundContainerProps["sectionStyle"];
         backgroundColor?: string;