dune-react 0.0.19 → 0.0.21

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

@@ -1,65 +1,155 @@
-type ContactVariant = "contact-us-1" | "contact-us-2" | "contact-us-3";
-type ContactPadding = {
-    top?: "none" | "small" | "medium" | "large";
-    bottom?: "none" | "small" | "medium" | "large";
-};
-type ContactSectionStyle = "default" | "dark" | "muted" | "inverted" | "custom";
-type ContactBadge = {
-    label: string;
-    url?: string;
-    variant?: "default" | "secondary" | "destructive" | "outline";
-};
-type ContactButton = {
-    label: string;
-    url?: string;
-    variant?: "default" | "secondary" | "outline" | "ghost" | "link" | "destructive";
-    size?: "default" | "sm" | "lg" | "icon";
-    icon?: string;
-};
-type ContactFeature = {
-    icon?: string;
-    name?: string;
-    description?: string;
-};
-type ContactField = {
-    label: string;
-    name: string;
-    type?: "text" | "email" | "tel" | "number" | "date" | "url" | "file" | "textarea" | "select";
-    options?: string[];
-    required?: boolean;
-    half?: boolean;
-};
-type ContactImage = {
-    src: string;
-    alt?: string;
-};
-type ContactInfoItem = {
-    icon?: "phone" | "mail" | "map-pin" | "clock" | string;
-    label: string;
-    value: string;
-};
-type ContactSectionProps = {
-    variant?: ContactVariant;
-    heading?: string;
-    description?: string;
-    badge?: ContactBadge;
-    features?: ContactFeature[];
-    buttons?: ContactButton[];
-    formTitle?: string;
-    fields?: ContactField[];
-    action?: string;
-    method?: "get" | "post" | "dialog";
-    submitLabel?: string;
-    submitVariant?: "default" | "secondary" | "outline" | "ghost" | "link" | "destructive";
-    submitSize?: "default" | "sm" | "lg" | "icon";
-    submitIcon?: string;
-    image?: ContactImage;
-    infoItems?: ContactInfoItem[];
-    styles?: {
-        padding?: ContactPadding;
-        sectionStyle?: ContactSectionStyle;
-        backgroundColor?: string;
-        imagePosition?: "start" | "end";
-        panelStyle?: "dark" | "primary" | "muted";
+/**
+ * Contact Section 共享 Props
+ *
+ * 基础类型引用自 ../props/（全局共享）
+ * ContactSectionStyles 为 contact 特有的样式字段
+ */
+import type { BaseImage } from "@/components/puck-core/core/props/media";
+import type { BaseButton, Action } from "@/components/puck-core/core/props/interactive";
+export type { BaseImage, BaseButton, Action };
+export interface ContactSectionStyles {
+    className?: string;
+    style?: React.CSSProperties;
+    css?: string;
+    formType?: "simple" | "advanced";
+    textAlign?: "left" | "center";
+    mediaPosition?: "left" | "right";
+    mediaType?: "image" | "map";
+    columns?: 3 | 4;
+    hasHeader?: boolean;
+    headerAlign?: "left" | "center";
+    modalType?: "dialog" | "sheet-right" | "sheet-bottom";
+}
+export interface ContactSectionBaseProps {
+    tagline: string;
+    heading: string;
+    description: string;
+    button: BaseButton;
+    buttons: BaseButton[];
+    image: BaseImage;
+    email: string;
+    phone: string;
+    address: string;
+    contacts: {
+        icon: string;
+        title: string;
+        description: string;
+        link?: {
+            label: string;
+            action?: Action;
+        };
+        button?: BaseButton;
+    }[];
+    locations: {
+        image: BaseImage;
+        mapUrl: string;
+        title: string;
+        address: string;
+        button: BaseButton;
+    }[];
+    tabs: {
+        value: string;
+        title: string;
+        addressLine1: string;
+        addressLine2: string;
+        image: BaseImage;
+        mapUrl: string;
+        buttonLabel: string;
+    }[];
+    styles: ContactSectionStyles;
+}
+export declare const contactStyleFields: {
+    readonly formType: {
+        readonly type: "radio";
+        readonly label: "Form Type";
+        readonly options: readonly [{
+            readonly label: "Simple";
+            readonly value: "simple";
+        }, {
+            readonly label: "Advanced";
+            readonly value: "advanced";
+        }];
+    };
+    readonly textAlign: {
+        readonly type: "radio";
+        readonly label: "Text Align";
+        readonly options: readonly [{
+            readonly label: "Left";
+            readonly value: "left";
+        }, {
+            readonly label: "Center";
+            readonly value: "center";
+        }];
+    };
+    readonly mediaPosition: {
+        readonly type: "radio";
+        readonly label: "Media Position";
+        readonly options: readonly [{
+            readonly label: "Left";
+            readonly value: "left";
+        }, {
+            readonly label: "Right";
+            readonly value: "right";
+        }];
+    };
+    readonly mediaType: {
+        readonly type: "radio";
+        readonly label: "Media Type";
+        readonly options: readonly [{
+            readonly label: "Image";
+            readonly value: "image";
+        }, {
+            readonly label: "Map";
+            readonly value: "map";
+        }];
+    };
+    readonly columns: {
+        readonly type: "radio";
+        readonly label: "Columns";
+        readonly options: readonly [{
+            readonly label: "3";
+            readonly value: "3";
+        }, {
+            readonly label: "4";
+            readonly value: "4";
+        }];
+    };
+    readonly hasHeader: {
+        readonly type: "radio";
+        readonly label: "Show Header";
+        readonly options: readonly [{
+            readonly label: "Yes";
+            readonly value: "true";
+        }, {
+            readonly label: "No";
+            readonly value: "false";
+        }];
+    };
+    readonly headerAlign: {
+        readonly type: "radio";
+        readonly label: "Header Align";
+        readonly options: readonly [{
+            readonly label: "Left";
+            readonly value: "left";
+        }, {
+            readonly label: "Center";
+            readonly value: "center";
+        }];
+    };
+    readonly modalType: {
+        readonly type: "select";
+        readonly label: "Modal Type";
+        readonly options: readonly [{
+            readonly label: "Dialog";
+            readonly value: "dialog";
+        }, {
+            readonly label: "Sheet Right";
+            readonly value: "sheet-right";
+        }, {
+            readonly label: "Sheet Bottom";
+            readonly value: "sheet-bottom";
+        }];
     };
 };
+/** 将 ContactSectionBaseProps 与组件特有字段合并，生成最终 Props */
+export type ContactComponentProps<T extends object = object> = React.ComponentPropsWithoutRef<"section"> & Partial<ContactSectionBaseProps> & Partial<T>;

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

@@ -0,0 +1,70 @@
+const contactStyleFields = {
+  formType: {
+    type: "radio",
+    label: "Form Type",
+    options: [
+      { label: "Simple", value: "simple" },
+      { label: "Advanced", value: "advanced" }
+    ]
+  },
+  textAlign: {
+    type: "radio",
+    label: "Text Align",
+    options: [
+      { label: "Left", value: "left" },
+      { label: "Center", value: "center" }
+    ]
+  },
+  mediaPosition: {
+    type: "radio",
+    label: "Media Position",
+    options: [
+      { label: "Left", value: "left" },
+      { label: "Right", value: "right" }
+    ]
+  },
+  mediaType: {
+    type: "radio",
+    label: "Media Type",
+    options: [
+      { label: "Image", value: "image" },
+      { label: "Map", value: "map" }
+    ]
+  },
+  columns: {
+    type: "radio",
+    label: "Columns",
+    options: [
+      { label: "3", value: "3" },
+      { label: "4", value: "4" }
+    ]
+  },
+  hasHeader: {
+    type: "radio",
+    label: "Show Header",
+    options: [
+      { label: "Yes", value: "true" },
+      { label: "No", value: "false" }
+    ]
+  },
+  headerAlign: {
+    type: "radio",
+    label: "Header Align",
+    options: [
+      { label: "Left", value: "left" },
+      { label: "Center", value: "center" }
+    ]
+  },
+  modalType: {
+    type: "select",
+    label: "Modal Type",
+    options: [
+      { label: "Dialog", value: "dialog" },
+      { label: "Sheet Right", value: "sheet-right" },
+      { label: "Sheet Bottom", value: "sheet-bottom" }
+    ]
+  }
+};
+export {
+  contactStyleFields
+};

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

@@ -0,0 +1,125 @@
+import { SplitInfoForm, SplitInfoFormDefaults } from "./split-info-form";
+import type { SplitInfoFormProps } from "./split-info-form";
+export { SplitInfoForm, SplitInfoFormDefaults };
+export type { SplitInfoFormProps };
+declare const conf: {
+    fields: {
+        tagline: {
+            type: string;
+        };
+        heading: {
+            readonly type: "text";
+            readonly contentEditable: true;
+        };
+        description: {
+            readonly type: "textarea";
+            readonly contentEditable: true;
+        };
+        email: {
+            type: string;
+        };
+        phone: {
+            type: string;
+        };
+        address: {
+            type: string;
+        };
+        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: {
+                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.";
+                    };
+                };
+                formType: {
+                    readonly type: "radio";
+                    readonly label: "Form Type";
+                    readonly options: readonly [{
+                        readonly label: "Simple";
+                        readonly value: "simple";
+                    }, {
+                        readonly label: "Advanced";
+                        readonly value: "advanced";
+                    }];
+                };
+            };
+        };
+    };
+    defaultProps: import("../props").ContactSectionBaseProps;
+    render: (props: SplitInfoFormProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default conf;

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

@@ -0,0 +1,31 @@
+import { SplitInfoForm, SplitInfoFormDefaults } from "./split-info-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";
+import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
+const conf = {
+  fields: {
+    tagline: { type: "text" },
+    heading: headingField,
+    description: descriptionField,
+    email: { type: "text" },
+    phone: { type: "text" },
+    address: { type: "text" },
+    button: buttonField,
+    styles: {
+      type: "object",
+      label: "Styles",
+      objectFields: {
+        formType: contactStyleFields.formType,
+        ...sectionWrapperFields
+      }
+    }
+  },
+  defaultProps: SplitInfoFormDefaults,
+  render: SplitInfoForm
+};
+export {
+  SplitInfoForm,
+  SplitInfoFormDefaults,
+  conf as default
+};

package/dist/components/puck-block/contact-sections/split-info-form/split-info-form.d.ts

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

package/dist/components/puck-block/contact-sections/split-info-form/split-info-form.js

@@ -0,0 +1,162 @@
+"use client";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "../../../shadcn/select.js";
+import { Input } from "../../../shadcn/input.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 { BiEnvelope, BiPhone, BiMap } 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 { SectionWrapper } from "../../../puck-core/section-wrapper.js";
+const SplitInfoForm = (props) => {
+  const { tagline, heading, description, email, phone, address, button, styles } = {
+    ...SplitInfoFormDefaults,
+    ...props
+  };
+  const { className: sectionClassName, style: sectionStyle, css, formType = "simple" } = styles ?? {};
+  const { createSubmitHandler, submitting } = useContactForm();
+  const [nameInput, setNameInput] = useState("");
+  const [firstName, setFirstName] = useState("");
+  const [lastName, setLastName] = useState("");
+  const [emailInput, setEmailInput] = useState("");
+  const [phoneInput, setPhoneInput] = useState("");
+  const [messageInput, setMessageInput] = useState("");
+  const [topic, setTopic] = useState("");
+  const handleSubmit = createSubmitHandler(
+    () => ({
+      name: nameInput || `${firstName} ${lastName}`.trim() || "",
+      email: emailInput || "",
+      phone: phoneInput || "",
+      message: [topic, messageInput].filter(Boolean).join("\n\n") || ""
+    }),
+    () => {
+      setNameInput("");
+      setFirstName("");
+      setLastName("");
+      setEmailInput("");
+      setPhoneInput("");
+      setMessageInput("");
+      setTopic("");
+    }
+  );
+  const renderSimpleFields = () => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "grid w-full items-center", children: [
+      /* @__PURE__ */ jsx(Label, { htmlFor: "name", className: "mb-2", children: "Name" }),
+      /* @__PURE__ */ jsx(Input, { type: "text", id: "name", value: nameInput, onChange: (e) => setNameInput(e.target.value) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid w-full items-center", children: [
+      /* @__PURE__ */ jsx(Label, { htmlFor: "email", className: "mb-2", children: "Email" }),
+      /* @__PURE__ */ jsx(Input, { type: "email", id: "email", value: emailInput, onChange: (e) => setEmailInput(e.target.value) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid w-full items-center", children: [
+      /* @__PURE__ */ jsx(Label, { htmlFor: "phone", className: "mb-2", children: "Phone" }),
+      /* @__PURE__ */ jsx(Input, { type: "tel", id: "phone", value: phoneInput, onChange: (e) => setPhoneInput(e.target.value) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid w-full 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: messageInput,
+          onChange: (e) => setMessageInput(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 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 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 items-center", children: [
+      /* @__PURE__ */ jsx(Label, { htmlFor: "email", className: "mb-2", children: "Email" }),
+      /* @__PURE__ */ jsx(Input, { type: "email", id: "email", value: emailInput, onChange: (e) => setEmailInput(e.target.value) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid w-full items-center", children: [
+      /* @__PURE__ */ jsx(Label, { htmlFor: "phone", className: "mb-2", children: "Phone number" }),
+      /* @__PURE__ */ jsx(Input, { type: "tel", id: "phone", value: phoneInput, onChange: (e) => setPhoneInput(e.target.value) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid w-full 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 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: messageInput,
+          onChange: (e) => setMessageInput(e.target.value)
+        }
+      )
+    ] })
+  ] });
+  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-flow-row md:grid-cols-2 md:gap-x-12 lg:grid-flow-col lg:gap-x-20 lg:gap-y-16", children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("p", { className: "mb-3 font-semibold md:mb-4", children: tagline }),
+      /* @__PURE__ */ jsxs("div", { className: "mb-6 md:mb-8", children: [
+        /* @__PURE__ */ jsx("h2", { className: "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__ */ jsxs("div", { className: "grid grid-cols-1 gap-4 py-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+          /* @__PURE__ */ jsx(BiEnvelope, { className: "size-6 flex-none" }),
+          /* @__PURE__ */ jsx("p", { children: email })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+          /* @__PURE__ */ jsx(BiPhone, { className: "size-6 flex-none" }),
+          /* @__PURE__ */ jsx("p", { children: phone })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+          /* @__PURE__ */ jsx(BiMap, { className: "size-6 flex-none" }),
+          /* @__PURE__ */ jsx("p", { children: address })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("form", { className: "grid grid-cols-1 grid-rows-[auto_auto] gap-6", onSubmit: handleSubmit, children: [
+      formType === "advanced" ? renderAdvancedFields() : renderSimpleFields(),
+      /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(CompoundButton, { label: submitting ? "Submitting..." : button.label, variant: button.variant, size: button.size, action: button.action, icon: button.icon, disabled: submitting }) })
+    ] })
+  ] }) }) });
+};
+const SplitInfoFormDefaults = {
+  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-split/800/600", alt: "Placeholder" },
+  email: "hello@relume.io",
+  phone: "+1 (555) 000-0000",
+  address: "123 Sample St, Sydney NSW 2000 AU",
+  contacts: [],
+  locations: [],
+  tabs: [],
+  styles: {
+    formType: "simple"
+  }
+};
+export {
+  SplitInfoForm,
+  SplitInfoFormDefaults
+};