dune-react 0.0.19 → 0.0.20

package/dist/components/puck-base/core/fields.js

@@ -1,7 +1,6 @@
 import { fieldTypes } from "../field.js";
 import { ActionField } from "../fields/action-field.js";
 import { IconPickerField } from "../icon-picker-field.js";
-import { LocationField } from "../fields/location-field.js";
 const formMethods = ["get", "post", "put", "patch", "delete"];
 const icon = {
   type: "custom",
@@ -241,25 +240,6 @@ const formDefaults = {
     icon: "move-right"
   }
 };
-function getMapEmbedUrl(loc) {
-  const { lat, lng, zoom = 14 } = loc;
-  return `https://maps.google.com/maps?q=${lat},${lng}&z=${zoom}&output=embed`;
-}
-function getDirectionsUrl(loc) {
-  return `https://www.google.com/maps/dir/?api=1&destination=${loc.lat},${loc.lng}`;
-}
-const locationDefaults = {
-  address: "San Francisco, CA, USA",
-  lat: 37.7749,
-  lng: -122.4194,
-  zoom: 13
-};
-const location = {
-  type: "custom",
-  label: "Location",
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  render: LocationField
-};
 export {
   action,
   actionDefaults,
@@ -276,8 +256,6 @@ export {
   fieldDefaults,
   form,
   formDefaults,
-  getDirectionsUrl,
-  getMapEmbedUrl,
   getPlaceholderImageUrl,
   heading,
   icon,
@@ -285,7 +263,5 @@ export {
   image16x9Placeholder,
   image1x1Placeholder,
   image9x16Placeholder,
-  images,
-  location,
-  locationDefaults
+  images
 };

package/dist/components/puck-base/core/styles.js

@@ -82,7 +82,7 @@ function createStylesDefaults(extraDefaults) {
     ...extraDefaults
   };
 }
-const bannerStylesField = createStylesField({
+createStylesField({
   textColor: { type: "text", label: "Text Color" },
   align: {
     type: "radio",
@@ -100,7 +100,7 @@ const bannerStylesField = createStylesField({
     ]
   }
 });
-const bannerStylesDefaults = createStylesDefaults();
+createStylesDefaults();
 createStylesField({
   backgroundImage,
   overlay: sectionOverlay,
@@ -121,7 +121,7 @@ createStylesField({
     ]
   }
 });
-const heroStylesDefaults = createStylesDefaults();
+createStylesDefaults();
 createStylesField({
   layout: {
     type: "radio",
@@ -231,11 +231,8 @@ createStylesDefaults();
 export {
   backgroundColor,
   backgroundImage,
-  bannerStylesDefaults,
-  bannerStylesField,
   createStylesDefaults,
   createStylesField,
-  heroStylesDefaults,
   padding,
   paddingDefaults,
   paddingLevel,

package/dist/components/puck-base/fields/location-field.js

@@ -25,7 +25,7 @@ function loadGooglePlaces(apiKey) {
   });
   return googleLoadPromise;
 }
-const LocationField = memo(function LocationField2({
+memo(function LocationField2({
   value,
   onChange
 }) {
@@ -202,6 +202,3 @@ const LocationField = memo(function LocationField2({
     ] })
   ] });
 });
-export {
-  LocationField
-};

package/dist/components/puck-block/banner-sections/css-marquee-banner/css-marquee-banner.d.ts

@@ -0,0 +1,4 @@
+import type { BannerComponentProps, BannerSectionBaseProps } from "../props";
+export type CssMarqueeBannerProps = BannerComponentProps;
+export declare const CssMarqueeBanner: (props: CssMarqueeBannerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CssMarqueeBannerDefaults: Partial<BannerSectionBaseProps>;

package/dist/components/puck-block/banner-sections/css-marquee-banner/css-marquee-banner.js

@@ -0,0 +1,111 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React__default from "react";
+import { cn } from "../../../../utils/css-utils.js";
+const CssMarqueeBanner = (props) => {
+  const {
+    headings = [],
+    sections = [],
+    styles
+  } = {
+    ...CssMarqueeBannerDefaults,
+    ...props
+  };
+  const {
+    direction = "left",
+    contentType = "text"
+  } = styles ?? {};
+  const animationClass = direction === "left" ? "animate-marquee-left" : "animate-marquee-right";
+  if (contentType === "textWithImage") {
+    return /* @__PURE__ */ jsx("section", { id: "relume", className: "flex w-screen max-w-full justify-end overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: Array(2).fill(0).map((_, index) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `grid ${animationClass} auto-cols-max grid-flow-col grid-cols-[max-content] items-center justify-around py-4`,
+        children: sections.map((section, sectionIndex) => /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center whitespace-nowrap px-8 text-center lg:text-left", children: /* @__PURE__ */ jsx("h1", { className: "text-6xl font-bold md:text-9xl lg:text-10xl", children: section.title }) }),
+          /* @__PURE__ */ jsx("div", { className: "relative aspect-[3/2] w-full overflow-hidden object-cover", children: /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: section.image.src,
+              alt: section.image.alt,
+              className: "aspect-[3/2] size-full h-16 max-h-24 object-cover md:h-auto"
+            }
+          ) })
+        ] }, sectionIndex))
+      },
+      index
+    )) }) });
+  }
+  return /* @__PURE__ */ jsx(
+    "section",
+    {
+      id: "relume",
+      className: "flex w-screen max-w-full justify-end overflow-hidden border-b border-border-primary",
+      children: /* @__PURE__ */ jsx("div", { className: "flex w-[200vw]", children: Array(2).fill(0).map((_, index) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `flex w-screen ${animationClass} items-center justify-around py-4`,
+          children: headings.map((heading, headingIndex) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "items-center justify-center px-4",
+                headingIndex >= 2 && headingIndex < 4 && "hidden lg:flex",
+                headingIndex === 4 && "hidden md:flex"
+              ),
+              children: /* @__PURE__ */ jsx("h1", { className: "text-md font-bold md:text-lg", children: heading })
+            },
+            headingIndex
+          ))
+        },
+        index
+      )) })
+    }
+  );
+};
+const CssMarqueeBannerDefaults = {
+  headings: [
+    "Relume Library",
+    "Relume Library",
+    "Relume Library",
+    "Relume Library",
+    "Relume Library"
+  ],
+  sections: [
+    {
+      title: "Relume Library",
+      image: {
+        src: "https://picsum.photos/seed/banner-marquee-1/400/267",
+        alt: "Relume Library"
+      }
+    },
+    {
+      title: "Relume Library",
+      image: {
+        src: "https://picsum.photos/seed/banner-marquee-2/400/267",
+        alt: "Relume Library"
+      }
+    },
+    {
+      title: "Relume Library",
+      image: {
+        src: "https://picsum.photos/seed/banner-marquee-3/400/267",
+        alt: "Relume Library"
+      }
+    },
+    {
+      title: "Relume Library",
+      image: {
+        src: "https://picsum.photos/seed/banner-marquee-4/400/267",
+        alt: "Relume Library"
+      }
+    }
+  ],
+  styles: {
+    direction: "left",
+    contentType: "text"
+  }
+};
+export {
+  CssMarqueeBanner,
+  CssMarqueeBannerDefaults
+};

package/dist/components/puck-block/banner-sections/css-marquee-banner/index.d.ts

@@ -0,0 +1,68 @@
+import { CssMarqueeBanner, CssMarqueeBannerDefaults } from "./css-marquee-banner";
+import type { CssMarqueeBannerProps } from "./css-marquee-banner";
+export { CssMarqueeBanner, CssMarqueeBannerDefaults };
+export type { CssMarqueeBannerProps };
+declare const conf: {
+    fields: {
+        headings: {
+            type: string;
+            max: number;
+            getItemSummary: (item: string, index?: number) => string;
+            arrayFields: {
+                type: string;
+            };
+        };
+        sections: {
+            type: string;
+            max: number;
+            getItemSummary: (item: {
+                title?: string;
+            }, index?: number) => string;
+            arrayFields: {
+                title: {
+                    type: string;
+                };
+                image: {
+                    type: "object";
+                    objectFields: {
+                        src: import("@puckeditor/core").Field<string>;
+                        alt: {
+                            type: "text";
+                        };
+                    };
+                };
+            };
+        };
+        styles: {
+            type: string;
+            label: string;
+            objectFields: {
+                direction: {
+                    readonly type: "radio";
+                    readonly label: "Direction";
+                    readonly options: readonly [{
+                        readonly label: "Left";
+                        readonly value: "left";
+                    }, {
+                        readonly label: "Right";
+                        readonly value: "right";
+                    }];
+                };
+                contentType: {
+                    readonly type: "radio";
+                    readonly label: "Content Type";
+                    readonly options: readonly [{
+                        readonly label: "Text Only";
+                        readonly value: "text";
+                    }, {
+                        readonly label: "Text + Image";
+                        readonly value: "textWithImage";
+                    }];
+                };
+            };
+        };
+    };
+    defaultProps: Partial<import("../props").BannerSectionBaseProps>;
+    render: (props: CssMarqueeBannerProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default conf;

package/dist/components/puck-block/banner-sections/css-marquee-banner/index.js

@@ -0,0 +1,39 @@
+import { CssMarqueeBanner, CssMarqueeBannerDefaults } from "./css-marquee-banner.js";
+import { imageField } from "../../../puck-core/core/props/media.js";
+import { bannerStyleFields } from "../props.js";
+const conf = {
+  fields: {
+    headings: {
+      type: "array",
+      max: 8,
+      getItemSummary: (item, index = 0) => item || `Heading ${index + 1}`,
+      arrayFields: {
+        type: "text"
+      }
+    },
+    sections: {
+      type: "array",
+      max: 6,
+      getItemSummary: (item, index = 0) => item.title || `Section ${index + 1}`,
+      arrayFields: {
+        title: { type: "text" },
+        image: imageField
+      }
+    },
+    styles: {
+      type: "object",
+      label: "Styles",
+      objectFields: {
+        direction: bannerStyleFields.direction,
+        contentType: bannerStyleFields.contentType
+      }
+    }
+  },
+  defaultProps: CssMarqueeBannerDefaults,
+  render: CssMarqueeBanner
+};
+export {
+  CssMarqueeBanner,
+  CssMarqueeBannerDefaults,
+  conf as default
+};

package/dist/components/puck-block/banner-sections/dismissible-banner/dismissible-banner.d.ts

@@ -0,0 +1,4 @@
+import type { BannerComponentProps, BannerSectionBaseProps } from "../props";
+export type DismissibleBannerProps = BannerComponentProps;
+export declare const DismissibleBanner: (props: DismissibleBannerProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const DismissibleBannerDefaults: Partial<BannerSectionBaseProps>;

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

@@ -0,0 +1,232 @@
+import { DismissibleBanner, DismissibleBannerDefaults } from "./dismissible-banner";
+import type { DismissibleBannerProps } from "./dismissible-banner";
+export { DismissibleBanner, DismissibleBannerDefaults };
+export type { DismissibleBannerProps };
+declare const conf: {
+    fields: {
+        heading: {
+            readonly type: "text";
+            readonly contentEditable: true;
+        };
+        description: {
+            readonly type: "textarea";
+            readonly contentEditable: true;
+        };
+        logo: {
+            type: "object";
+            objectFields: {
+                src: import("@puckeditor/core").Field<string>;
+                alt: {
+                    type: "text";
+                };
+            };
+        };
+        buttons: {
+            readonly type: "array";
+            readonly max: 3;
+            readonly getItemSummary: (item: {
+                label?: string;
+            }, index?: number) => string;
+            readonly arrayFields: {
+                readonly label: {
+                    readonly type: "text";
+                };
+                readonly action: {
+                    type: "custom";
+                    label: string;
+                    render: typeof import("../../../puck-core").ActionField;
+                };
+                readonly variant: {
+                    readonly type: "select";
+                    readonly options: readonly [{
+                        readonly label: "primary";
+                        readonly value: "default";
+                    }, {
+                        readonly label: "secondary";
+                        readonly value: "secondary";
+                    }, {
+                        readonly label: "outline";
+                        readonly value: "outline";
+                    }, {
+                        readonly label: "ghost";
+                        readonly value: "ghost";
+                    }, {
+                        readonly label: "link";
+                        readonly value: "link";
+                    }, {
+                        readonly label: "destructive";
+                        readonly value: "destructive";
+                    }];
+                };
+                readonly size: {
+                    readonly type: "select";
+                    readonly options: readonly [{
+                        readonly label: "default";
+                        readonly value: "default";
+                    }, {
+                        readonly label: "sm";
+                        readonly value: "sm";
+                    }, {
+                        readonly label: "lg";
+                        readonly value: "lg";
+                    }, {
+                        readonly label: "icon";
+                        readonly value: "icon";
+                    }];
+                };
+                readonly icon: {
+                    type: "custom";
+                    render: typeof import("../../../puck-core/fields/icon-picker-field").IconPickerField;
+                };
+            };
+            readonly defaultItemProps: {
+                readonly label: "Button";
+                readonly action: {
+                    readonly type: "page";
+                    readonly pageUrl: "";
+                    readonly externalUrl: "";
+                    readonly openInNewTab: "false";
+                    readonly email: "";
+                    readonly subject: "";
+                    readonly phone: "";
+                    readonly sectionId: "";
+                    readonly downloadUrl: "";
+                };
+                readonly variant: "default";
+                readonly size: "default";
+                readonly icon: "none";
+            };
+            readonly ai: {
+                readonly instructions: "Buttons must use the same size";
+            };
+        };
+        inputPlaceholder: {
+            type: string;
+        };
+        formButton: {
+            readonly type: "object";
+            readonly objectFields: {
+                readonly label: {
+                    readonly type: "text";
+                };
+                readonly action: {
+                    type: "custom";
+                    label: string;
+                    render: typeof import("../../../puck-core").ActionField;
+                };
+                readonly variant: {
+                    readonly type: "select";
+                    readonly options: readonly [{
+                        readonly label: "primary";
+                        readonly value: "default";
+                    }, {
+                        readonly label: "secondary";
+                        readonly value: "secondary";
+                    }, {
+                        readonly label: "outline";
+                        readonly value: "outline";
+                    }, {
+                        readonly label: "ghost";
+                        readonly value: "ghost";
+                    }, {
+                        readonly label: "link";
+                        readonly value: "link";
+                    }, {
+                        readonly label: "destructive";
+                        readonly value: "destructive";
+                    }];
+                };
+                readonly size: {
+                    readonly type: "select";
+                    readonly options: readonly [{
+                        readonly label: "default";
+                        readonly value: "default";
+                    }, {
+                        readonly label: "sm";
+                        readonly value: "sm";
+                    }, {
+                        readonly label: "lg";
+                        readonly value: "lg";
+                    }, {
+                        readonly label: "icon";
+                        readonly value: "icon";
+                    }];
+                };
+                readonly icon: {
+                    type: "custom";
+                    render: typeof import("../../../puck-core/fields/icon-picker-field").IconPickerField;
+                };
+            };
+        };
+        headingStart: {
+            type: string;
+        };
+        headingEnd: {
+            type: string;
+        };
+        link: {
+            type: string;
+            objectFields: {
+                action: {
+                    type: "custom";
+                    label: string;
+                    render: typeof import("../../../puck-core").ActionField;
+                };
+                title: {
+                    type: string;
+                };
+            };
+        };
+        styles: {
+            type: string;
+            label: string;
+            objectFields: {
+                containerStyle: {
+                    readonly type: "radio";
+                    readonly label: "Container Style";
+                    readonly options: readonly [{
+                        readonly label: "Boxed";
+                        readonly value: "boxed";
+                    }, {
+                        readonly label: "Full Width";
+                        readonly value: "fullWidth";
+                    }];
+                };
+                textLayout: {
+                    readonly type: "radio";
+                    readonly label: "Text Layout";
+                    readonly options: readonly [{
+                        readonly label: "Default";
+                        readonly value: "default";
+                    }, {
+                        readonly label: "Centered";
+                        readonly value: "centered";
+                    }, {
+                        readonly label: "Inline Link";
+                        readonly value: "inlineLink";
+                    }];
+                };
+                ctaType: {
+                    readonly type: "select";
+                    readonly label: "CTA Type";
+                    readonly options: readonly [{
+                        readonly label: "Email Form";
+                        readonly value: "email";
+                    }, {
+                        readonly label: "Single Button";
+                        readonly value: "button";
+                    }, {
+                        readonly label: "Multiple Buttons";
+                        readonly value: "buttons";
+                    }, {
+                        readonly label: "Social Links";
+                        readonly value: "socialLinks";
+                    }];
+                };
+            };
+        };
+    };
+    defaultProps: Partial<import("../props").BannerSectionBaseProps>;
+    render: (props: DismissibleBannerProps) => import("react/jsx-runtime").JSX.Element | null;
+};
+export default conf;

package/dist/components/puck-block/banner-sections/dual-row-marquee/dual-row-marquee.d.ts

@@ -0,0 +1,4 @@
+import type { BannerComponentProps, BannerSectionBaseProps } from "../props";
+export type DualRowMarqueeProps = BannerComponentProps;
+export declare const DualRowMarquee: (props: DualRowMarqueeProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DualRowMarqueeDefaults: Partial<BannerSectionBaseProps>;

package/dist/components/puck-block/banner-sections/dual-row-marquee/dual-row-marquee.js

@@ -0,0 +1,78 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useMediaQuery } from "../../../../hooks/use-media-query.js";
+import { useScroll, useTransform, motion } from "framer-motion";
+import React__default, { useRef } from "react";
+const DualRowMarquee = (props) => {
+  const {
+    headingsTop = [],
+    headingsBottom = []
+  } = {
+    ...DualRowMarqueeDefaults,
+    ...props
+  };
+  const sectionRef = useRef(null);
+  const { scrollYProgress } = useScroll({
+    target: sectionRef,
+    offset: ["start end", "end start"]
+  });
+  const isMobile = useMediaQuery("(max-width: 991px)");
+  const headingTopTranslate = useTransform(
+    scrollYProgress,
+    [0, 1],
+    isMobile ? ["5%", "0%"] : ["25%", "0%"]
+  );
+  const headingBottomTranslate = useTransform(
+    scrollYProgress,
+    [0, 1],
+    isMobile ? ["-5%", "0%"] : ["-25%", "0%"]
+  );
+  const renderHeadings = (headings, translate) => /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      className: "grid auto-cols-max grid-flow-col grid-cols-[max-content] items-center justify-around py-2",
+      style: { x: translate },
+      children: headings.map((heading, index) => /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
+        /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center whitespace-nowrap px-4 text-center lg:text-left", children: /* @__PURE__ */ jsx("h1", { className: "text-xl font-bold md:text-2xl", children: heading.title }) }),
+        /* @__PURE__ */ jsx("div", { className: "relative w-full overflow-hidden", children: /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: heading.image.src,
+            alt: heading.image.alt,
+            className: "aspect-square size-full max-h-16 object-cover"
+          }
+        ) })
+      ] }, index))
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      id: "relume",
+      ref: sectionRef,
+      className: "flex w-screen max-w-full flex-col justify-end overflow-hidden",
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: Array(2).fill(0).map((_, index) => /* @__PURE__ */ jsx(React__default.Fragment, { children: renderHeadings(headingsTop, headingTopTranslate) }, index)) }),
+        /* @__PURE__ */ jsx("div", { className: "flex justify-start", children: Array(2).fill(0).map((_, index) => /* @__PURE__ */ jsx(React__default.Fragment, { children: renderHeadings(headingsBottom, headingBottomTranslate) }, index)) })
+      ]
+    }
+  );
+};
+const DualRowMarqueeDefaults = {
+  headingsTop: [
+    { title: "Relume Library", image: { src: "https://picsum.photos/seed/banner-dual-1/100/100", alt: "Relume Library 1" } },
+    { title: "Relume Library", image: { src: "https://picsum.photos/seed/banner-dual-2/100/100", alt: "Relume Library 2" } },
+    { title: "Relume Library", image: { src: "https://picsum.photos/seed/banner-dual-3/100/100", alt: "Relume Library 3" } },
+    { title: "Relume Library", image: { src: "https://picsum.photos/seed/banner-dual-4/100/100", alt: "Relume Library 4" } }
+  ],
+  headingsBottom: [
+    { title: "Relume Library", image: { src: "https://picsum.photos/seed/banner-dual-5/100/100", alt: "Relume Library 5" } },
+    { title: "Relume Library", image: { src: "https://picsum.photos/seed/banner-dual-6/100/100", alt: "Relume Library 6" } },
+    { title: "Relume Library", image: { src: "https://picsum.photos/seed/banner-dual-7/100/100", alt: "Relume Library 7" } },
+    { title: "Relume Library", image: { src: "https://picsum.photos/seed/banner-dual-8/100/100", alt: "Relume Library 8" } }
+  ]
+};
+export {
+  DualRowMarquee,
+  DualRowMarqueeDefaults
+};