dune-react 0.0.19 → 0.0.21

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/core/with-editable.js

@@ -4,7 +4,7 @@ import { useRef, useEffect, useCallback } from "react";
 import { registerOverlayPortal } from "@puckeditor/core";
 import { usePuckDispatch, usePuckAppState } from "./hooks.js";
 import { Pencil } from "lucide-react";
-import { useEditorContext } from "../editor-context.js";
+import { useEditorContext } from "../../puck-core/core/context/editor-context.js";
 import set from "../../../node_modules/.pnpm/lodash-es@4.17.23/node_modules/lodash-es/set.js";
 const BLOCK_LEVEL_TYPES = /* @__PURE__ */ new Set(["image"]);
 function getComponentIdFromDOM(el) {
@@ -68,7 +68,18 @@ function withEditable(Component, config) {
       [props, handleSave]
     );
     if (isBlock) {
-      return /* @__PURE__ */ jsxs("span", { ref: wrapperRef, className: "group relative block h-full w-full", children: [
+      const imgClass = String(props.className || "");
+      const isAbsoluteChild = /\babsolute\b/.test(imgClass);
+      const hasExplicitSize = /\bsize-\d/.test(imgClass) || /\b[wh]-\d+\b/.test(imgClass) && !/\b[wh]-full\b/.test(imgClass);
+      let wrapperClassName;
+      if (isAbsoluteChild) {
+        wrapperClassName = "group block h-full w-full";
+      } else if (hasExplicitSize) {
+        wrapperClassName = "group relative inline-block";
+      } else {
+        wrapperClassName = "group relative block";
+      }
+      return /* @__PURE__ */ jsxs("span", { ref: wrapperRef, className: wrapperClassName, children: [
         /* @__PURE__ */ jsx(Component, { ...props }),
         /* @__PURE__ */ jsx("span", { className: "absolute inset-0 z-60 flex items-center justify-center", children: /* @__PURE__ */ jsx(
           "span",

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

@@ -5,7 +5,7 @@ import { Input } from "../../shadcn/input.js";
 import { Label } from "../../shadcn/label.js";
 import { Tabs, TabsList, TabsTrigger } from "../../shadcn/tabs.js";
 import { LinkIcon, XIcon, GlobeIcon } from "lucide-react";
-import { useEditorContext } from "../editor-context.js";
+import { useEditorContext } from "../../puck-core/core/context/editor-context.js";
 const ACTION_TYPE_OPTIONS = [
   { label: "Page Link", value: "page" },
   { label: "External Link", value: "external" },

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

@@ -4,7 +4,7 @@ import { memo, useState, useRef, useEffect, useCallback } from "react";
 import { Input } from "../../shadcn/input.js";
 import { Label } from "../../shadcn/label.js";
 import { Loader2, Search, X, MapPin } from "lucide-react";
-import { useEditorContext } from "../editor-context.js";
+import { useEditorContext } from "../../puck-core/core/context/editor-context.js";
 let googleLoadPromise = null;
 function loadGooglePlaces(apiKey) {
   var _a, _b;
@@ -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-base/form.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { CompoundButton } from "./button.js";
 import { CompoundField } from "./field.js";
-import { useEditorContext } from "./editor-context.js";
+import { useEditorContext } from "../puck-core/core/context/editor-context.js";
 const formMethods = ["get", "post", "put", "patch", "delete"];
 const CompoundForm = (props) => {
   const { isEditor: isEditorMode } = useEditorContext();

package/dist/components/puck-base/image.js

@@ -14,7 +14,7 @@ import { ScrollArea } from "../shadcn/scroll-area.js";
 import { Slider } from "../shadcn/slider.js";
 import { Tabs, TabsList, TabsTrigger } from "../shadcn/tabs.js";
 import useUpload from "./use-upload.js";
-import { useEditorContext } from "./editor-context.js";
+import { useEditorContext } from "../puck-core/core/context/editor-context.js";
 const createImage = (url) => new Promise((resolve, reject) => {
   const image2 = new Image();
   image2.addEventListener("load", () => resolve(image2));

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

@@ -17,6 +17,7 @@ export { withEditable } from "./core/with-editable";
 export { usePuckDispatch, usePuckAppState, usePuckHistory, usePuckConfig, usePuckGetSelectorForId, type PuckComponentInfo, } from "./core/hooks";
 export { findComponentById, getRandomAdjective } from "./core/utils";
 export { icon, action, actionDefaults, button, buttons, badge, image, images, padding, paddingDefaults, paddingLevel, heading, description, features, contentFields, contentFieldsWithFeatures, card, cards, field, fieldDefaults, form, formDefaults, getPlaceholderImageUrl, image16x9Placeholder, image1x1Placeholder, image9x16Placeholder, sectionStyle, sectionOverlay, backgroundColor, backgroundImage, } from "./core/fields";
-export { EditorContextProvider, useEditorContext } from "./editor-context";
+export { EditorContextProvider, useEditorContext } from "@/components/puck-core/core/context/editor-context";
+export { SectionIdProvider, useSectionId } from "@/components/puck-core/core/context/section-id-context";
 export { AutoField, type FieldDef, type AutoFieldProps, type FieldsPanelProps } from "./fields";
 export { default as useUpload, type UploadFileItem, type UploadStatus, type UseUploadOptions } from "./use-upload";

package/dist/components/puck-base/inline-editable.js

@@ -2,7 +2,7 @@
 import { jsx } from "react/jsx-runtime";
 import { createElement, useRef, useEffect, useCallback } from "react";
 import { registerOverlayPortal } from "@puckeditor/core";
-import { useEditorContext } from "./editor-context.js";
+import { useEditorContext } from "../puck-core/core/context/editor-context.js";
 import { usePuckDispatch } from "./core/hooks.js";
 import set from "../../node_modules/.pnpm/lodash-es@4.17.23/node_modules/lodash-es/set.js";
 import { findComponentById } from "./core/utils.js";

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,116 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React__default from "react";
+import { cn } from "../../../../utils/css-utils.js";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
+const CssMarqueeBanner = (props) => {
+  const {
+    headings = [],
+    sections = [],
+    styles
+  } = {
+    ...CssMarqueeBannerDefaults,
+    ...props
+  };
+  const {
+    className: sectionClassName,
+    style: sectionStyle,
+    css,
+    direction = "left",
+    contentType = "text"
+  } = styles ?? {};
+  const animationClass = direction === "left" ? "animate-marquee-left" : "animate-marquee-right";
+  if (contentType === "textWithImage") {
+    return /* @__PURE__ */ jsx(SectionWrapper, { className: cn("flex w-screen max-w-full justify-end overflow-hidden", sectionClassName), style: sectionStyle, css, 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(
+    SectionWrapper,
+    {
+      className: cn("flex w-screen max-w-full justify-end overflow-hidden border-b border-border-primary", sectionClassName),
+      style: sectionStyle,
+      css,
+      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,90 @@
+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: {
+                className: {
+                    readonly type: "text";
+                    readonly label: "Class Name";
+                    readonly ai: {
+                        readonly instructions: "Additional Tailwind CSS classes to apply to the section wrapper.";
+                    };
+                };
+                style: {
+                    readonly type: "object";
+                    readonly label: "Style";
+                    readonly objectFields: {};
+                    readonly ai: {
+                        readonly instructions: "Inline CSSProperties object for the section wrapper, e.g. { backgroundColor: 'red', minHeight: '100vh' }.";
+                    };
+                };
+                css: {
+                    readonly type: "textarea";
+                    readonly label: "Custom CSS";
+                    readonly ai: {
+                        readonly instructions: "Custom CSS rules. Use & as a placeholder for the section selector.";
+                    };
+                };
+                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,41 @@
+import { CssMarqueeBanner, CssMarqueeBannerDefaults } from "./css-marquee-banner.js";
+import { imageField } from "../../../puck-core/core/props/media.js";
+import { bannerStyleFields } from "../props.js";
+import { sectionWrapperFields } from "../../../puck-core/section-wrapper.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,
+        ...sectionWrapperFields
+      }
+    }
+  },
+  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>;