dune-react 0.0.20 → 0.0.22

package/dist/components/puck-block/text-sections/blog-article/index.js

@@ -1,6 +1,7 @@
 import { BlogArticle, BlogArticleDefaults } from "./component.js";
 import { imageField } from "../../../puck-core/core/props/media.js";
 import { textStyleFields } from "../props.js";
+import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
 const conf = {
   fields: {
     prose: { type: "textarea" },
@@ -42,7 +43,8 @@ const conf = {
       type: "object",
       label: "Styles",
       objectFields: {
-        hasBreadcrumbs: textStyleFields.hasBreadcrumbs
+        hasBreadcrumbs: textStyleFields.hasBreadcrumbs,
+        ...sectionWrapperFields
       }
     }
   },

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

@@ -8,6 +8,9 @@ import type { BaseImage } from "@/components/puck-core/core/props/media";
 import type { BaseButton } from "@/components/puck-core/core/props/interactive";
 export type { BaseImage, BaseButton };
 export interface TextSectionStyles {
+    className?: string;
+    style?: React.CSSProperties;
+    css?: string;
     textLayout?: "singleLeft" | "singleCenter" | "twoColumn" | "single" | "twoColumnProse";
     bgMedia?: "none" | "image" | "video";
     formType?: "buttons" | "email" | "none";

package/dist/components/puck-block/text-sections/prose-content/component.js

@@ -6,6 +6,7 @@ import { CompoundImage } from "../../../puck-base/image.js";
 import { FaCirclePlay } from "../../../../node_modules/.pnpm/react-icons@5.6.0_react@19.2.4/node_modules/react-icons/fa6/index.js";
 import { CgSpinner } from "../../../../node_modules/.pnpm/react-icons@5.6.0_react@19.2.4/node_modules/react-icons/cg/index.js";
 import { cn } from "../../../../utils/css-utils.js";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
 const ProseContent = (props) => {
   const {
     heading,
@@ -19,6 +20,9 @@ const ProseContent = (props) => {
     ...props
   };
   const {
+    className: sectionClassName,
+    style: sectionStyle,
+    css,
     textLayout = "single",
     mediaType = "none",
     mediaPosition = "bottom",
@@ -56,7 +60,7 @@ const ProseContent = (props) => {
   };
   const mediaElement = renderMedia();
   const isTwoColumn = textLayout === "twoColumnProse";
-  return /* @__PURE__ */ jsx("section", { id: "relume", className: "px-[5%] py-16 md:py-24 lg:py-28", children: /* @__PURE__ */ jsx("div", { className: "container", children: /* @__PURE__ */ jsxs("div", { className: cn("mx-auto w-full", isTwoColumn ? "max-w-4xl" : "max-w-lg"), children: [
+  return /* @__PURE__ */ jsx(SectionWrapper, { className: cn("px-[5%] py-8 md:py-12 lg:py-14", sectionClassName), style: sectionStyle, css, children: /* @__PURE__ */ jsx("div", { className: "container", children: /* @__PURE__ */ jsxs("div", { className: cn("mx-auto w-full", isTwoColumn ? "max-w-4xl" : "max-w-lg"), children: [
     hasMetatags && metatags && metatags.length > 0 && /* @__PURE__ */ jsx("div", { className: "mb-8 flex flex-wrap gap-x-8 gap-y-4 md:mb-12", children: metatags.map((tag, index) => /* @__PURE__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold", children: tag.label }),
       /* @__PURE__ */ jsx("p", { className: "text-sm", children: tag.value })

package/dist/components/puck-block/text-sections/prose-content/index.d.ts

@@ -41,6 +41,28 @@ declare const conf: {
             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.";
+                    };
+                };
                 textLayout: {
                     readonly type: "select";
                     readonly label: "Text Layout";

package/dist/components/puck-block/text-sections/prose-content/index.js

@@ -2,6 +2,7 @@ import { ProseContent, ProseContentDefaults } from "./component.js";
 import { headingField } from "../../../puck-core/core/props/content.js";
 import { imageField } from "../../../puck-core/core/props/media.js";
 import { textStyleFields } from "../props.js";
+import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
 const conf = {
   fields: {
     heading: headingField,
@@ -23,7 +24,8 @@ const conf = {
         textLayout: textStyleFields.textLayout,
         mediaType: textStyleFields.mediaType,
         mediaPosition: textStyleFields.mediaPosition,
-        hasMetatags: textStyleFields.hasMetatags
+        hasMetatags: textStyleFields.hasMetatags,
+        ...sectionWrapperFields
       }
     }
   },

package/dist/components/puck-block/text-sections/prose-sidebar/index.d.ts

@@ -29,7 +29,7 @@ declare const conf: {
                         readonly action: {
                             type: "custom";
                             label: string;
-                            render: typeof import("../../../puck-core").ActionField;
+                            render: typeof import("../../..").ActionField;
                         };
                         readonly variant: {
                             readonly type: "select";
@@ -121,6 +121,28 @@ declare const conf: {
             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.";
+                    };
+                };
                 sidebarType: {
                     readonly type: "radio";
                     readonly label: "Sidebar Type";

package/dist/components/puck-block/text-sections/side-media-content/component.js

@@ -6,6 +6,7 @@ import { CompoundImage } from "../../../puck-base/image.js";
 import { FaCirclePlay } from "../../../../node_modules/.pnpm/react-icons@5.6.0_react@19.2.4/node_modules/react-icons/fa6/index.js";
 import { CgSpinner } from "../../../../node_modules/.pnpm/react-icons@5.6.0_react@19.2.4/node_modules/react-icons/cg/index.js";
 import { cn } from "../../../../utils/css-utils.js";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
 const SideMediaContent = (props) => {
   const {
     heading,
@@ -18,6 +19,9 @@ const SideMediaContent = (props) => {
     ...props
   };
   const {
+    className: sectionClassName,
+    style: sectionStyle,
+    css,
     mediaType = "image",
     mediaPosition = "right"
   } = styles ?? {};
@@ -57,7 +61,7 @@ const SideMediaContent = (props) => {
   const mediaContent = /* @__PURE__ */ jsx("div", { children: renderMedia() });
   const textOrder = mediaPosition === "left" ? "order-2" : "";
   const mediaOrder = mediaPosition === "left" ? "order-1" : "";
-  return /* @__PURE__ */ jsx("section", { id: "relume", className: "px-[5%] py-16 md:py-24 lg:py-28", children: /* @__PURE__ */ jsx("div", { className: "container", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 items-start gap-y-12 md:grid-cols-2 md:gap-x-12 lg:gap-x-20", children: [
+  return /* @__PURE__ */ jsx(SectionWrapper, { className: cn("px-[5%] py-8 md:py-12 lg:py-14", sectionClassName), style: sectionStyle, css, children: /* @__PURE__ */ jsx("div", { className: "container", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 items-start gap-y-12 md:grid-cols-2 md:gap-x-12 lg:gap-x-20", children: [
     /* @__PURE__ */ jsx("div", { className: textOrder, children: textContent }),
     /* @__PURE__ */ jsx("div", { className: mediaOrder, children: mediaContent })
   ] }) }) });

package/dist/components/puck-block/text-sections/side-media-content/index.d.ts

@@ -27,6 +27,28 @@ declare const conf: {
             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.";
+                    };
+                };
                 mediaType: {
                     readonly type: "radio";
                     readonly label: "Media Type";

package/dist/components/puck-block/text-sections/side-media-content/index.js

@@ -2,6 +2,7 @@ import { SideMediaContent, SideMediaContentDefaults } from "./component.js";
 import { headingField } from "../../../puck-core/core/props/content.js";
 import { imageField } from "../../../puck-core/core/props/media.js";
 import { textStyleFields } from "../props.js";
+import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
 const conf = {
   fields: {
     heading: headingField,
@@ -13,7 +14,8 @@ const conf = {
       label: "Styles",
       objectFields: {
         mediaType: textStyleFields.mediaType,
-        mediaPosition: textStyleFields.mediaPosition
+        mediaPosition: textStyleFields.mediaPosition,
+        ...sectionWrapperFields
       }
     }
   },

package/dist/components/puck-block/text-sections/sticky-text-multi-image/component.js

@@ -1,5 +1,7 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { CompoundImage } from "../../../puck-base/image.js";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
+import { cn } from "../../../../utils/css-utils.js";
 const StickyTextMultiImage = (props) => {
   const {
     heading,
@@ -11,6 +13,9 @@ const StickyTextMultiImage = (props) => {
     ...props
   };
   const {
+    className: sectionClassName,
+    style: sectionStyle,
+    css,
     contentPosition = "left"
   } = styles ?? {};
   const textContent = /* @__PURE__ */ jsxs("div", { className: "static top-20 lg:sticky", children: [
@@ -18,7 +23,7 @@ const StickyTextMultiImage = (props) => {
     /* @__PURE__ */ jsx("div", { className: "prose", dangerouslySetInnerHTML: { __html: prose } })
   ] });
   const imagesContent = /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-6 md:gap-8", children: images.map((img, index) => /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(CompoundImage, { src: img.src, alt: img.alt, className: "w-full object-cover" }) }, index)) });
-  return /* @__PURE__ */ jsx("section", { id: "relume", className: "px-[5%] py-16 md:py-24 lg:py-28", children: /* @__PURE__ */ jsx("div", { className: "container", children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 items-start gap-x-12 gap-y-16 md:gap-y-20 lg:grid-cols-[1fr_1.5fr] lg:gap-x-20", children: contentPosition === "left" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsx(SectionWrapper, { className: cn("px-[5%] py-8 md:py-12 lg:py-14", sectionClassName), style: sectionStyle, css, children: /* @__PURE__ */ jsx("div", { className: "container", children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 items-start gap-x-12 gap-y-16 md:gap-y-20 lg:grid-cols-[1fr_1.5fr] lg:gap-x-20", children: contentPosition === "left" ? /* @__PURE__ */ jsxs(Fragment, { children: [
     textContent,
     imagesContent
   ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [

package/dist/components/puck-block/text-sections/sticky-text-multi-image/index.d.ts

@@ -32,6 +32,28 @@ declare const conf: {
             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.";
+                    };
+                };
                 contentPosition: {
                     readonly type: "radio";
                     readonly label: "Content Position";

package/dist/components/puck-block/text-sections/sticky-text-multi-image/index.js

@@ -2,6 +2,7 @@ import { StickyTextMultiImage, StickyTextMultiImageDefaults } from "./component.
 import { headingField } from "../../../puck-core/core/props/content.js";
 import { imagesField } from "../../../puck-core/core/props/media.js";
 import { textStyleFields } from "../props.js";
+import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
 const conf = {
   fields: {
     heading: headingField,
@@ -11,7 +12,8 @@ const conf = {
       type: "object",
       label: "Styles",
       objectFields: {
-        contentPosition: textStyleFields.contentPosition
+        contentPosition: textStyleFields.contentPosition,
+        ...sectionWrapperFields
       }
     }
   },

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

@@ -28,7 +28,7 @@ declare const conf: {
                 readonly action: {
                     type: "custom";
                     label: string;
-                    render: typeof import("../../../puck-core").ActionField;
+                    render: typeof import("../../..").ActionField;
                 };
                 readonly variant: {
                     readonly type: "select";
@@ -106,7 +106,7 @@ declare const conf: {
                 readonly action: {
                     type: "custom";
                     label: string;
-                    render: typeof import("../../../puck-core").ActionField;
+                    render: typeof import("../../..").ActionField;
                 };
                 readonly variant: {
                     readonly type: "select";
@@ -171,6 +171,28 @@ declare const conf: {
             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.";
+                    };
+                };
                 textLayout: {
                     readonly type: "select";
                     readonly label: "Text Layout";

package/dist/components/puck-core/core/context/section-id-context.d.ts

@@ -0,0 +1,6 @@
+import { type ReactNode } from "react";
+export declare const SectionIdProvider: ({ value, children, }: {
+    value: string | null;
+    children: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const useSectionId: () => string | null;

package/dist/components/puck-core/core/context/section-id-context.js

@@ -0,0 +1,12 @@
+import { jsx } from "react/jsx-runtime";
+import { useContext, createContext } from "react";
+const SectionIdContext = createContext(null);
+const SectionIdProvider = ({
+  value,
+  children
+}) => /* @__PURE__ */ jsx(SectionIdContext.Provider, { value, children });
+const useSectionId = () => useContext(SectionIdContext);
+export {
+  SectionIdProvider,
+  useSectionId
+};

package/dist/components/puck-core/core/props/content.js

@@ -1,4 +1,4 @@
-import "./interactive.js";
+import { buttonField, iconField, buttonDefaults } from "./interactive.js";
 const headingField = {
   type: "text",
   contentEditable: true
@@ -7,7 +7,47 @@ const descriptionField = {
   type: "textarea",
   contentEditable: true
 };
+const featuresField = {
+  type: "array",
+  max: 5,
+  getItemSummary: (item, index = 0) => item.name || `Feature ${index + 1}`,
+  arrayFields: {
+    icon: iconField,
+    name: { type: "text", contentEditable: true },
+    description: { type: "textarea", contentEditable: true }
+  },
+  defaultItemProps: {
+    icon: "check",
+    name: "Feature name",
+    description: "Description of the feature"
+  }
+};
+const cardField = {
+  type: "object",
+  objectFields: {
+    icon: iconField,
+    heading: headingField,
+    description: descriptionField,
+    button: buttonField
+  }
+};
+const cardsField = {
+  type: "array",
+  getItemSummary: (item, index = 0) => item.heading || `Card ${index + 1}`,
+  arrayFields: {
+    ...cardField.objectFields
+  },
+  defaultItemProps: {
+    icon: "activity",
+    heading: "Heading",
+    description: "Description",
+    button: buttonDefaults
+  }
+};
 export {
+  cardField,
+  cardsField,
   descriptionField,
+  featuresField,
   headingField
 };

package/dist/components/puck-core/core/props/form.js

@@ -0,0 +1,76 @@
+import { buttonField } from "./interactive.js";
+const fieldTypes = [
+  "text",
+  "number",
+  "password",
+  "date",
+  "file"
+];
+const formMethods = ["get", "post", "put", "patch", "delete"];
+const formFieldField = {
+  type: "object",
+  objectFields: {
+    label: { type: "text", contentEditable: true },
+    name: { type: "text" },
+    type: {
+      type: "select",
+      options: fieldTypes.map((f) => ({ label: f, value: f }))
+    }
+  }
+};
+const formFieldDefaults = {
+  label: "Field Label",
+  type: "text",
+  name: "field_name"
+};
+const { action: _buttonAction, ...formButtonConfig } = buttonField.objectFields;
+const formField = {
+  type: "object",
+  objectFields: {
+    title: { type: "text", contentEditable: true },
+    fields: {
+      type: "array",
+      min: 1,
+      max: 10,
+      arrayFields: { ...formFieldField.objectFields },
+      getItemSummary: (item, index = 0) => item.label || `Field ${index + 1}`,
+      defaultItemProps: formFieldDefaults
+    },
+    action: { type: "text", label: "submit url" },
+    method: {
+      type: "select",
+      label: "submit method",
+      options: formMethods.map((method) => ({ label: method, value: method }))
+    },
+    button: {
+      ...buttonField,
+      objectFields: {
+        ...formButtonConfig
+      }
+    }
+  }
+};
+const formDefaults = {
+  title: "Book a meeting",
+  fields: [
+    { label: "First name", type: "text", name: "first_name" },
+    { label: "Last name", type: "text", name: "last_name" },
+    { label: "Resume", type: "file", name: "resume" }
+  ],
+  action: "/submit-form",
+  method: "post",
+  button: {
+    label: "Book the meeting",
+    variant: "default",
+    size: "default",
+    icon: "move-right"
+  }
+};
+export {
+  fieldTypes,
+  formDefaults,
+  formField,
+  formFieldDefaults,
+  formFieldField,
+  formMethods
+};

package/dist/components/puck-core/core/props/index.js

@@ -0,0 +1,34 @@
+import { buttonsField, badgeField } from "./interactive.js";
+import { actionDefaults, actionField, buttonDefaults, buttonField, iconField, resolveActionUrl } from "./interactive.js";
+import { descriptionField, headingField, featuresField } from "./content.js";
+import { cardField, cardsField } from "./content.js";
+const contentFields = {
+  heading: headingField,
+  description: descriptionField,
+  badge: badgeField,
+  buttons: buttonsField
+};
+const contentFieldsWithFeatures = {
+  heading: headingField,
+  description: descriptionField,
+  badge: badgeField,
+  features: featuresField,
+  buttons: buttonsField
+};
+export {
+  actionDefaults,
+  actionField,
+  badgeField,
+  buttonDefaults,
+  buttonField,
+  buttonsField,
+  cardField,
+  cardsField,
+  contentFields,
+  contentFieldsWithFeatures,
+  descriptionField,
+  featuresField,
+  headingField,
+  iconField,
+  resolveActionUrl
+};

package/dist/components/puck-core/core/props/interactive.js

@@ -90,9 +90,26 @@ const buttonsField = {
     instructions: "Buttons must use the same size"
   }
 };
+const badgeField = {
+  type: "object",
+  objectFields: {
+    label: { type: "text" },
+    url: { type: "text" },
+    variant: {
+      type: "select",
+      options: [
+        { label: "default", value: "default" },
+        { label: "secondary", value: "secondary" },
+        { label: "destructive", value: "destructive" },
+        { label: "outline", value: "outline" }
+      ]
+    }
+  }
+};
 export {
   actionDefaults,
   actionField,
+  badgeField,
   buttonDefaults,
   buttonField,
   buttonsField,

package/dist/components/puck-core/core/props/media.js

@@ -13,12 +13,14 @@ const image16x9Placeholder = {
   alt: "16/9 aspect ratio accessible description of the image",
   src: getPlaceholderImageUrl("1920x1080")
 };
-({
+const image1x1Placeholder = {
+  alt: "1/1 aspect ratio An accessible description of the image",
   src: getPlaceholderImageUrl("1000x1000")
-});
-({
+};
+const image9x16Placeholder = {
+  alt: "9/16 accessible description of the image",
   src: getPlaceholderImageUrl("1080x1920")
-});
+};
 const imagesField = {
   type: "array",
   max: 10,
@@ -36,6 +38,8 @@ const imagesField = {
 export {
   getPlaceholderImageUrl,
   image16x9Placeholder,
+  image1x1Placeholder,
+  image9x16Placeholder,
   imageField,
   imagesField
 };