dune-react 0.0.18 → 0.0.20

package/dist/components/puck-block/contact-sections/centered-form/index.d.ts

@@ -0,0 +1,105 @@
+import { CenteredForm, CenteredFormDefaults } from "./centered-form";
+import type { CenteredFormProps } from "./centered-form";
+export { CenteredForm, CenteredFormDefaults };
+export type { CenteredFormProps };
+declare const conf: {
+    fields: {
+        tagline: {
+            type: string;
+        };
+        heading: {
+            readonly type: "text";
+            readonly contentEditable: true;
+        };
+        description: {
+            readonly type: "textarea";
+            readonly contentEditable: true;
+        };
+        button: {
+            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;
+                };
+            };
+        };
+        styles: {
+            type: string;
+            label: string;
+            objectFields: {
+                formType: {
+                    readonly type: "radio";
+                    readonly label: "Form Type";
+                    readonly options: readonly [{
+                        readonly label: "Simple";
+                        readonly value: "simple";
+                    }, {
+                        readonly label: "Advanced";
+                        readonly value: "advanced";
+                    }];
+                };
+                textAlign: {
+                    readonly type: "radio";
+                    readonly label: "Text Align";
+                    readonly options: readonly [{
+                        readonly label: "Left";
+                        readonly value: "left";
+                    }, {
+                        readonly label: "Center";
+                        readonly value: "center";
+                    }];
+                };
+            };
+        };
+    };
+    defaultProps: import("../props").ContactSectionBaseProps;
+    render: (props: CenteredFormProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default conf;

package/dist/components/puck-block/contact-sections/centered-form/index.js

@@ -0,0 +1,27 @@
+import { CenteredForm, CenteredFormDefaults } from "./centered-form.js";
+import { descriptionField, headingField } from "../../../puck-core/core/props/content.js";
+import { buttonField } from "../../../puck-core/core/props/interactive.js";
+import { contactStyleFields } from "../props.js";
+const conf = {
+  fields: {
+    tagline: { type: "text" },
+    heading: headingField,
+    description: descriptionField,
+    button: buttonField,
+    styles: {
+      type: "object",
+      label: "Styles",
+      objectFields: {
+        formType: contactStyleFields.formType,
+        textAlign: contactStyleFields.textAlign
+      }
+    }
+  },
+  defaultProps: CenteredFormDefaults,
+  render: CenteredForm
+};
+export {
+  CenteredForm,
+  CenteredFormDefaults,
+  conf as default
+};

package/dist/components/puck-block/contact-sections/contact-cards-grid/contact-cards-grid.d.ts

@@ -0,0 +1,4 @@
+import type { ContactComponentProps, ContactSectionBaseProps } from "../props";
+export type ContactCardsGridProps = ContactComponentProps;
+export declare const ContactCardsGrid: (props: ContactCardsGridProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ContactCardsGridDefaults: ContactSectionBaseProps;

package/dist/components/puck-block/contact-sections/contact-cards-grid/contact-cards-grid.js

@@ -0,0 +1,106 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { BiMap, BiPhone, BiEnvelope } from "../../../../node_modules/.pnpm/react-icons@5.6.0_react@19.2.4/node_modules/react-icons/bi/index.js";
+import { cn } from "../../../../utils/css-utils.js";
+import { resolveActionUrl } from "../../../puck-core/core/props/interactive.js";
+const iconMap = {
+  email: /* @__PURE__ */ jsx(BiEnvelope, { className: "size-12" }),
+  phone: /* @__PURE__ */ jsx(BiPhone, { className: "size-12" }),
+  office: /* @__PURE__ */ jsx(BiMap, { className: "size-12" })
+};
+const ContactCardsGrid = (props) => {
+  const { tagline, heading, description, contacts, styles } = {
+    ...ContactCardsGridDefaults,
+    ...props
+  };
+  const {
+    columns = 3,
+    textAlign = "left",
+    hasHeader = false,
+    headerAlign = "left"
+  } = styles ?? {};
+  const showHeader = hasHeader === true || String(hasHeader) === "true";
+  const isCardCenter = textAlign === "center";
+  const isHeaderCenter = headerAlign === "center";
+  const gridColsClass = columns === 4 ? "md:grid-cols-2 lg:grid-cols-4" : "md:grid-cols-3";
+  return /* @__PURE__ */ jsx("section", { id: "relume", className: "px-[5%] py-16 md:py-24 lg:py-28", children: /* @__PURE__ */ jsxs("div", { className: "container", children: [
+    showHeader && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn("rb-12 mb-12 md:mb-18 lg:mb-20", {
+          "mx-auto max-w-lg text-center": isHeaderCenter,
+          "max-w-lg": !isHeaderCenter
+        }),
+        children: [
+          /* @__PURE__ */ jsx("p", { className: "mb-3 font-semibold md:mb-4", children: tagline }),
+          /* @__PURE__ */ jsx("h2", { className: "rb-5 mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl", children: heading }),
+          /* @__PURE__ */ jsx("p", { className: "md:text-md", children: description })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "grid auto-cols-fr grid-cols-1 gap-x-12 gap-y-12 md:gap-y-16",
+          gridColsClass
+        ),
+        children: contacts.map((contact, index) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn({ "text-center": isCardCenter }),
+            children: [
+              /* @__PURE__ */ jsx("div", { className: cn("mb-5 lg:mb-6", { "flex justify-center": isCardCenter }), children: iconMap[contact.icon] ?? iconMap.email }),
+              /* @__PURE__ */ jsx("h3", { className: "mb-3 text-2xl font-bold leading-[1.4] md:text-3xl lg:mb-4 lg:text-4xl", children: contact.title }),
+              /* @__PURE__ */ jsx("p", { className: "mb-5 md:mb-6", children: contact.description }),
+              contact.link && /* @__PURE__ */ jsx("a", { className: "underline", href: resolveActionUrl(contact.link.action ?? { type: "none" }) ?? "#", children: contact.link.label })
+            ]
+          },
+          index
+        ))
+      }
+    )
+  ] }) });
+};
+const ContactCardsGridDefaults = {
+  tagline: "Tagline",
+  heading: "Contact us",
+  description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+  button: { label: "Submit" },
+  buttons: [],
+  image: { src: "https://picsum.photos/seed/contact-grid/800/600", alt: "Placeholder" },
+  email: "",
+  phone: "",
+  address: "",
+  contacts: [
+    {
+      icon: "email",
+      title: "Email",
+      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in ero.",
+      link: { label: "hello@relume.io", action: { type: "email", email: "hello@relume.io" } }
+    },
+    {
+      icon: "phone",
+      title: "Phone",
+      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in ero.",
+      link: { label: "+1 (555) 000-0000", action: { type: "phone", phone: "+1 (555) 000-0000" } }
+    },
+    {
+      icon: "office",
+      title: "Office",
+      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in ero.",
+      link: { label: "123 Sample St, Sydney NSW 2000 AU", action: { type: "external", externalUrl: "#" } }
+    }
+  ],
+  locations: [],
+  tabs: [],
+  styles: {
+    columns: 3,
+    textAlign: "left",
+    hasHeader: false,
+    headerAlign: "left"
+  }
+};
+export {
+  ContactCardsGrid,
+  ContactCardsGridDefaults
+};

package/dist/components/puck-block/contact-sections/contact-cards-grid/index.d.ts

@@ -0,0 +1,90 @@
+import { ContactCardsGrid, ContactCardsGridDefaults } from "./contact-cards-grid";
+import type { ContactCardsGridProps } from "./contact-cards-grid";
+export { ContactCardsGrid, ContactCardsGridDefaults };
+export type { ContactCardsGridProps };
+declare const conf: {
+    fields: {
+        tagline: {
+            type: string;
+        };
+        heading: {
+            readonly type: "text";
+            readonly contentEditable: true;
+        };
+        description: {
+            readonly type: "textarea";
+            readonly contentEditable: true;
+        };
+        contacts: {
+            type: string;
+            max: number;
+            getItemSummary: (item: {
+                title?: string;
+            }, index?: number) => string;
+            arrayFields: {
+                icon: {
+                    type: string;
+                };
+                title: {
+                    type: string;
+                };
+                description: {
+                    type: string;
+                };
+            };
+        };
+        styles: {
+            type: string;
+            label: string;
+            objectFields: {
+                columns: {
+                    readonly type: "radio";
+                    readonly label: "Columns";
+                    readonly options: readonly [{
+                        readonly label: "3";
+                        readonly value: "3";
+                    }, {
+                        readonly label: "4";
+                        readonly value: "4";
+                    }];
+                };
+                textAlign: {
+                    readonly type: "radio";
+                    readonly label: "Text Align";
+                    readonly options: readonly [{
+                        readonly label: "Left";
+                        readonly value: "left";
+                    }, {
+                        readonly label: "Center";
+                        readonly value: "center";
+                    }];
+                };
+                hasHeader: {
+                    readonly type: "radio";
+                    readonly label: "Show Header";
+                    readonly options: readonly [{
+                        readonly label: "Yes";
+                        readonly value: "true";
+                    }, {
+                        readonly label: "No";
+                        readonly value: "false";
+                    }];
+                };
+                headerAlign: {
+                    readonly type: "radio";
+                    readonly label: "Header Align";
+                    readonly options: readonly [{
+                        readonly label: "Left";
+                        readonly value: "left";
+                    }, {
+                        readonly label: "Center";
+                        readonly value: "center";
+                    }];
+                };
+            };
+        };
+    };
+    defaultProps: import("../props").ContactSectionBaseProps;
+    render: (props: ContactCardsGridProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default conf;

package/dist/components/puck-block/contact-sections/contact-cards-grid/index.js

@@ -0,0 +1,37 @@
+import { ContactCardsGrid, ContactCardsGridDefaults } from "./contact-cards-grid.js";
+import { descriptionField, headingField } from "../../../puck-core/core/props/content.js";
+import { contactStyleFields } from "../props.js";
+const conf = {
+  fields: {
+    tagline: { type: "text" },
+    heading: headingField,
+    description: descriptionField,
+    contacts: {
+      type: "array",
+      max: 8,
+      getItemSummary: (item, index = 0) => item.title || `Contact ${index + 1}`,
+      arrayFields: {
+        icon: { type: "text" },
+        title: { type: "text" },
+        description: { type: "textarea" }
+      }
+    },
+    styles: {
+      type: "object",
+      label: "Styles",
+      objectFields: {
+        columns: contactStyleFields.columns,
+        textAlign: contactStyleFields.textAlign,
+        hasHeader: contactStyleFields.hasHeader,
+        headerAlign: contactStyleFields.headerAlign
+      }
+    }
+  },
+  defaultProps: ContactCardsGridDefaults,
+  render: ContactCardsGrid
+};
+export {
+  ContactCardsGrid,
+  ContactCardsGridDefaults,
+  conf as default
+};

package/dist/components/puck-block/contact-sections/contact-modal/contact-modal.d.ts

@@ -0,0 +1,4 @@
+import type { ContactComponentProps, ContactSectionBaseProps } from "../props";
+export type ContactModalProps = ContactComponentProps;
+export declare const ContactModal: (props: ContactModalProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ContactModalDefaults: ContactSectionBaseProps;

package/dist/components/puck-block/contact-sections/contact-modal/contact-modal.js

@@ -0,0 +1,196 @@
+"use client";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { Button } from "../../../shadcn/button.js";
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "../../../shadcn/select.js";
+import { Sheet, SheetTrigger, SheetContent } from "../../../shadcn/sheet.js";
+import { Dialog, DialogTrigger, DialogContent } from "../../../shadcn/dialog.js";
+import { Input } from "../../../shadcn/input.js";
+import { Checkbox } from "../../../shadcn/checkbox.js";
+import { Label } from "../../../shadcn/label.js";
+import { Textarea } from "../../../shadcn/textarea.js";
+import { CompoundButton } from "../../../puck-base/button.js";
+import { useContactForm } from "../use-contact-form.js";
+import { cn } from "../../../../utils/css-utils.js";
+const ContactModal = (props) => {
+  const { heading, description, button, styles } = {
+    ...ContactModalDefaults,
+    ...props
+  };
+  const { formType = "simple", modalType = "dialog" } = styles ?? {};
+  const { createSubmitHandler, submitting } = useContactForm();
+  const [name, setName] = useState("");
+  const [firstName, setFirstName] = useState("");
+  const [lastName, setLastName] = useState("");
+  const [email, setEmail] = useState("");
+  const [phone, setPhone] = useState("");
+  const [message, setMessage] = useState("");
+  const [topic, setTopic] = useState("");
+  const [acceptTerms, setAcceptTerms] = useState(false);
+  const handleSubmit = createSubmitHandler(
+    () => ({
+      name: name || `${firstName} ${lastName}`.trim() || "",
+      email: email || "",
+      phone: phone || "",
+      message: [topic, message].filter(Boolean).join("\n\n") || ""
+    }),
+    () => {
+      setName("");
+      setFirstName("");
+      setLastName("");
+      setEmail("");
+      setPhone("");
+      setMessage("");
+      setTopic("");
+      setAcceptTerms(false);
+    }
+  );
+  const renderSimpleFields = () => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "grid w-full grid-cols-1 items-center", children: [
+      /* @__PURE__ */ jsx(Label, { htmlFor: "name", className: "mb-2", children: "Name" }),
+      /* @__PURE__ */ jsx(Input, { type: "text", id: "name", value: name, onChange: (e) => setName(e.target.value) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid w-full grid-cols-1 items-center", children: [
+      /* @__PURE__ */ jsx(Label, { htmlFor: "email", className: "mb-2", children: "Email" }),
+      /* @__PURE__ */ jsx(Input, { type: "email", id: "email", value: email, onChange: (e) => setEmail(e.target.value) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid w-full grid-cols-1 items-center", children: [
+      /* @__PURE__ */ jsx(Label, { htmlFor: "phone", className: "mb-2", children: "Phone" }),
+      /* @__PURE__ */ jsx(Input, { type: "tel", id: "phone", value: phone, onChange: (e) => setPhone(e.target.value) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid w-full grid-cols-1 items-center", children: [
+      /* @__PURE__ */ jsx(Label, { htmlFor: "message", className: "mb-2", children: "Message" }),
+      /* @__PURE__ */ jsx(
+        Textarea,
+        {
+          id: "message",
+          placeholder: "Type your message...",
+          className: "min-h-[11.25rem] overflow-auto",
+          value: message,
+          onChange: (e) => setMessage(e.target.value)
+        }
+      )
+    ] })
+  ] });
+  const renderAdvancedFields = () => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-6", children: [
+      /* @__PURE__ */ jsxs("div", { className: "grid w-full grid-cols-1 items-center", children: [
+        /* @__PURE__ */ jsx(Label, { htmlFor: "firstName", className: "mb-2", children: "First name" }),
+        /* @__PURE__ */ jsx(Input, { type: "text", id: "firstName", value: firstName, onChange: (e) => setFirstName(e.target.value) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "grid w-full grid-cols-1 items-center", children: [
+        /* @__PURE__ */ jsx(Label, { htmlFor: "lastName", className: "mb-2", children: "Last name" }),
+        /* @__PURE__ */ jsx(Input, { type: "text", id: "lastName", value: lastName, onChange: (e) => setLastName(e.target.value) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid w-full grid-cols-1 items-center", children: [
+      /* @__PURE__ */ jsx(Label, { htmlFor: "email", className: "mb-2", children: "Email" }),
+      /* @__PURE__ */ jsx(Input, { type: "email", id: "email", value: email, onChange: (e) => setEmail(e.target.value) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid w-full grid-cols-1 items-center", children: [
+      /* @__PURE__ */ jsx(Label, { htmlFor: "phone", className: "mb-2", children: "Phone number" }),
+      /* @__PURE__ */ jsx(Input, { type: "tel", id: "phone", value: phone, onChange: (e) => setPhone(e.target.value) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid w-full grid-cols-1 items-center", children: [
+      /* @__PURE__ */ jsx(Label, { htmlFor: "topic", className: "mb-2", children: "Choose a topic" }),
+      /* @__PURE__ */ jsxs(Select, { value: topic, onValueChange: setTopic, children: [
+        /* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select one..." }) }),
+        /* @__PURE__ */ jsxs(SelectContent, { children: [
+          /* @__PURE__ */ jsx(SelectItem, { value: "topic-1", children: "Topic one" }),
+          /* @__PURE__ */ jsx(SelectItem, { value: "topic-2", children: "Topic two" })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid w-full grid-cols-1 items-center", children: [
+      /* @__PURE__ */ jsx(Label, { htmlFor: "message", className: "mb-2", children: "Message" }),
+      /* @__PURE__ */ jsx(
+        Textarea,
+        {
+          id: "message",
+          placeholder: "Type your message...",
+          className: "min-h-[11.25rem] overflow-auto",
+          value: message,
+          onChange: (e) => setMessage(e.target.value)
+        }
+      )
+    ] })
+  ] });
+  const formContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-8 text-center md:mb-10 lg:mb-12", children: [
+      /* @__PURE__ */ jsx("h2", { className: "mb-3 text-5xl font-bold md:mb-4 md:text-7xl lg:text-8xl", children: heading }),
+      /* @__PURE__ */ jsx("p", { className: "md:text-md", children: description })
+    ] }),
+    /* @__PURE__ */ jsxs("form", { className: "grid gap-6", onSubmit: handleSubmit, children: [
+      formType === "advanced" ? renderAdvancedFields() : renderSimpleFields(),
+      /* @__PURE__ */ jsxs("div", { className: "rb-4 mb-4 flex items-center", children: [
+        /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            id: "terms",
+            checked: acceptTerms,
+            onCheckedChange: setAcceptTerms,
+            className: "mr-2"
+          }
+        ),
+        /* @__PURE__ */ jsxs(Label, { htmlFor: "terms", className: "cursor-pointer text-sm", children: [
+          "I accept the",
+          " ",
+          /* @__PURE__ */ jsx("a", { className: "text-link-primary underline", href: "#", children: "Terms" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "text-center", children: /* @__PURE__ */ jsx(CompoundButton, { label: submitting ? "Submitting..." : button.label, variant: button.variant, size: button.size, action: button.action, icon: button.icon, disabled: submitting }) })
+    ] })
+  ] });
+  if (modalType === "sheet-right" || modalType === "sheet-bottom") {
+    const side = modalType === "sheet-right" ? "right" : "bottom";
+    return /* @__PURE__ */ jsx("section", { id: "relume", className: "px-[5%] py-16 md:py-24 lg:py-28", children: /* @__PURE__ */ jsx("div", { className: "container max-w-lg text-center", children: /* @__PURE__ */ jsxs(Sheet, { children: [
+      /* @__PURE__ */ jsx(SheetTrigger, { render: /* @__PURE__ */ jsx(Button, {}), children: "Open contact form" }),
+      /* @__PURE__ */ jsx(
+        SheetContent,
+        {
+          side,
+          className: cn(
+            "overflow-y-auto bg-neutral-white px-[5%] py-16",
+            {
+              "md:max-w-lg md:px-12 md:py-16": side === "right",
+              "md:px-12 md:py-16": side === "bottom"
+            }
+          ),
+          children: formContent
+        }
+      )
+    ] }) }) });
+  }
+  return /* @__PURE__ */ jsx("section", { id: "relume", className: "px-[5%] py-16 md:py-24 lg:py-28", children: /* @__PURE__ */ jsx("div", { className: "container max-w-lg text-center", children: /* @__PURE__ */ jsxs(Dialog, { children: [
+    /* @__PURE__ */ jsx(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { children: "Open modal" }) }),
+    /* @__PURE__ */ jsx(
+      DialogContent,
+      {
+        className: "fixed left-1/2 top-1/2 h-screen -translate-x-1/2 -translate-y-1/2 overflow-y-scroll border-t bg-neutral-white px-[5%] pb-28 pt-16 transition ease-in-out data-[state=closed]:duration-700 data-[state=open]:duration-700 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:slide-out-to-bottom data-[state=closed]:slide-out-to-left-1/2 data-[state=open]:slide-in-from-bottom data-[state=open]:slide-in-from-left-1/2 md:h-auto md:max-h-[80vh] md:w-[90%] md:px-12 md:py-16 lg:w-full lg:max-w-lg lg:p-16",
+        children: formContent
+      }
+    )
+  ] }) }) });
+};
+const ContactModalDefaults = {
+  tagline: "",
+  heading: "Contact us",
+  description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+  button: { label: "Submit" },
+  buttons: [],
+  image: { src: "https://picsum.photos/seed/contact-modal/800/600", alt: "Placeholder" },
+  email: "",
+  phone: "",
+  address: "",
+  contacts: [],
+  locations: [],
+  tabs: [],
+  styles: {
+    formType: "simple",
+    modalType: "dialog"
+  }
+};
+export {
+  ContactModal,
+  ContactModalDefaults
+};