@opensite/ui 1.7.5 → 1.7.6

package/dist/contact-dark.cjs

@@ -3,11 +3,11 @@
 
 var React = require('react');
 var forms = require('@page-speed/forms');
-var inputs = require('@page-speed/forms/inputs');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var classVarianceAuthority = require('class-variance-authority');
 var jsxRuntime = require('react/jsx-runtime');
+var inputs = require('@page-speed/forms/inputs');
 var LabelPrimitive = require('@radix-ui/react-label');
 var integration = require('@page-speed/forms/integration');
 
@@ -588,6 +588,389 @@ function Label({
     }
   );
 }
+function DynamicFormField({
+  field,
+  className,
+  uploadProgress = {},
+  onFileUpload,
+  onFileRemove,
+  isUploading = false
+}) {
+  const fieldId = `field-${field.name}`;
+  return /* @__PURE__ */ jsxRuntime.jsx(forms.Field, { name: field.name, children: ({ field: formField, meta }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("space-y-2", className), children: [
+    field.type !== "checkbox" && /* @__PURE__ */ jsxRuntime.jsxs(Label, { htmlFor: fieldId, children: [
+      field.label,
+      field.required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-destructive ml-1", children: "*" })
+    ] }),
+    (field.type === "text" || field.type === "email" || field.type === "tel" || field.type === "search" || field.type === "password" || field.type === "url") && /* @__PURE__ */ jsxRuntime.jsx(
+      inputs.TextInput,
+      {
+        ...formField,
+        id: fieldId,
+        type: field.type,
+        placeholder: field.placeholder,
+        error: meta.touched && !!meta.error,
+        disabled: field.disabled,
+        "aria-label": field.label
+      }
+    ),
+    field.type === "number" && /* @__PURE__ */ jsxRuntime.jsx(
+      inputs.TextInput,
+      {
+        ...formField,
+        id: fieldId,
+        type: "text",
+        placeholder: field.placeholder,
+        error: meta.touched && !!meta.error,
+        disabled: field.disabled,
+        "aria-label": field.label
+      }
+    ),
+    field.type === "textarea" && /* @__PURE__ */ jsxRuntime.jsx(
+      inputs.TextArea,
+      {
+        ...formField,
+        id: fieldId,
+        placeholder: field.placeholder,
+        rows: field.rows || 4,
+        error: meta.touched && !!meta.error,
+        disabled: field.disabled,
+        "aria-label": field.label
+      }
+    ),
+    field.type === "select" && field.options && /* @__PURE__ */ jsxRuntime.jsx(
+      inputs.Select,
+      {
+        ...formField,
+        id: fieldId,
+        options: field.options,
+        placeholder: field.placeholder || `Select ${field.label.toLowerCase()}`,
+        error: meta.touched && !!meta.error,
+        disabled: field.disabled,
+        "aria-label": field.label
+      }
+    ),
+    field.type === "multi-select" && field.options && /* @__PURE__ */ jsxRuntime.jsx(
+      inputs.Select,
+      {
+        ...formField,
+        id: fieldId,
+        options: field.options,
+        placeholder: field.placeholder || `Select ${field.label.toLowerCase()}`,
+        error: meta.touched && !!meta.error,
+        disabled: field.disabled,
+        "aria-label": field.label,
+        multiple: true
+      }
+    ),
+    field.type === "radio" && field.options && /* @__PURE__ */ jsxRuntime.jsx(
+      inputs.Radio,
+      {
+        ...formField,
+        id: fieldId,
+        options: field.options,
+        disabled: field.disabled,
+        layout: field.layout || "stacked",
+        error: meta.touched && !!meta.error,
+        "aria-label": field.label
+      }
+    ),
+    field.type === "checkbox" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start space-x-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        inputs.Checkbox,
+        {
+          ...formField,
+          id: fieldId,
+          value: formField.value === true || formField.value === "true",
+          onChange: (checked) => formField.onChange(checked),
+          disabled: field.disabled,
+          error: meta.touched && !!meta.error,
+          "aria-label": field.label
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        Label,
+        {
+          htmlFor: fieldId,
+          className: "font-normal cursor-pointer leading-relaxed",
+          children: [
+            field.label,
+            field.required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-destructive ml-1", children: "*" })
+          ]
+        }
+      )
+    ] }),
+    field.type === "checkbox-group" && field.options && /* @__PURE__ */ jsxRuntime.jsx(
+      inputs.CheckboxGroup,
+      {
+        ...formField,
+        id: fieldId,
+        options: field.options,
+        disabled: field.disabled,
+        layout: field.layout || "stacked",
+        error: meta.touched && !!meta.error,
+        "aria-label": field.label
+      }
+    ),
+    (field.type === "date-picker" || field.type === "date") && /* @__PURE__ */ jsxRuntime.jsx(
+      inputs.DatePicker,
+      {
+        ...formField,
+        id: fieldId,
+        placeholder: field.placeholder,
+        error: meta.touched && !!meta.error,
+        disabled: field.disabled,
+        "aria-label": field.label
+      }
+    ),
+    field.type === "date-range" && /* @__PURE__ */ jsxRuntime.jsx(
+      inputs.DateRangePicker,
+      {
+        ...formField,
+        id: fieldId,
+        error: meta.touched && !!meta.error,
+        disabled: field.disabled,
+        "aria-label": field.label
+      }
+    ),
+    field.type === "time" && /* @__PURE__ */ jsxRuntime.jsx(
+      inputs.TimePicker,
+      {
+        ...formField,
+        id: fieldId,
+        placeholder: field.placeholder,
+        error: meta.touched && !!meta.error,
+        disabled: field.disabled,
+        "aria-label": field.label
+      }
+    ),
+    field.type === "file" && /* @__PURE__ */ jsxRuntime.jsx(
+      inputs.FileInput,
+      {
+        ...formField,
+        id: fieldId,
+        accept: field.accept,
+        maxSize: field.maxSize || 5 * 1024 * 1024,
+        maxFiles: field.maxFiles || 1,
+        multiple: field.multiple || false,
+        placeholder: field.placeholder || "Choose file(s)...",
+        error: meta.touched && !!meta.error,
+        disabled: field.disabled || isUploading,
+        showProgress: true,
+        uploadProgress,
+        onChange: (files) => {
+          formField.onChange(files);
+          if (files.length > 0 && onFileUpload) {
+            onFileUpload(files);
+          }
+        },
+        onFileRemove,
+        "aria-label": field.label
+      }
+    ),
+    field.type === "rich-text" && /* @__PURE__ */ jsxRuntime.jsx(
+      inputs.RichTextEditor,
+      {
+        ...formField,
+        id: fieldId,
+        placeholder: field.placeholder,
+        error: meta.touched && !!meta.error,
+        disabled: field.disabled,
+        "aria-label": field.label
+      }
+    ),
+    meta.touched && meta.error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-destructive", children: meta.error })
+  ] }) });
+}
+
+// lib/form-field-types.ts
+function generateInitialValues(fields) {
+  return fields.reduce(
+    (acc, field) => {
+      if (field.type === "checkbox") {
+        acc[field.name] = false;
+      } else if (field.type === "checkbox-group" || field.type === "multi-select") {
+        acc[field.name] = [];
+      } else if (field.type === "file") {
+        acc[field.name] = [];
+      } else if (field.type === "date-range") {
+        acc[field.name] = { start: null, end: null };
+      } else {
+        acc[field.name] = "";
+      }
+      return acc;
+    },
+    {}
+  );
+}
+function generateValidationSchema(fields) {
+  return fields.reduce(
+    (acc, field) => {
+      acc[field.name] = (value, allValues) => {
+        if (field.required) {
+          if (!value || typeof value === "string" && !value.trim()) {
+            return `${field.label} is required`;
+          }
+        }
+        if (field.type === "email" && value) {
+          if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
+            return "Please enter a valid email address";
+          }
+        }
+        if (field.type === "url" && value) {
+          try {
+            new URL(value);
+          } catch {
+            return "Please enter a valid URL";
+          }
+        }
+        if (field.validator) {
+          return field.validator(value, allValues);
+        }
+        return void 0;
+      };
+      return acc;
+    },
+    {}
+  );
+}
+function getColumnSpanClass(span) {
+  if (!span || span === 12) return "col-span-12";
+  return `col-span-12 sm:col-span-${Math.min(span, 12)}`;
+}
+function useFileUpload(options) {
+  const [uploadTokens, setUploadTokens] = React.useState([]);
+  const [uploadProgress, setUploadProgress] = React.useState({});
+  const [isUploading, setIsUploading] = React.useState(false);
+  const endpoint = options?.endpoint || "https://api.dashtrack.com/contacts/_/contact_form_uploads";
+  const uploadFiles = React.useCallback(
+    async (files) => {
+      if (files.length === 0) return;
+      setIsUploading(true);
+      try {
+        const tokens = [];
+        for (const file of files) {
+          const formData = new FormData();
+          formData.append("contact_form_upload[file_upload]", file);
+          formData.append("contact_form_upload[title]", file.name);
+          formData.append("contact_form_upload[file_name]", file.name);
+          formData.append("contact_form_upload[file_size]", String(file.size));
+          const response = await fetch(endpoint, {
+            method: "POST",
+            body: formData
+          });
+          if (!response.ok) {
+            throw new Error(`Upload failed: ${response.statusText}`);
+          }
+          const data = await response.json();
+          if (data.contact_form_upload?.token) {
+            tokens.push(`upload_${data.contact_form_upload.token}`);
+          }
+          setUploadProgress((prev) => ({
+            ...prev,
+            [file.name]: 100
+          }));
+        }
+        setUploadTokens(tokens);
+      } catch (error) {
+        console.error("File upload error:", error);
+        options?.onError?.(error);
+      } finally {
+        setIsUploading(false);
+      }
+    },
+    [endpoint, options]
+  );
+  const removeFile = React.useCallback((file, index) => {
+    setUploadTokens((prev) => prev.filter((_, i) => i !== index));
+    setUploadProgress((prev) => {
+      const newProgress = { ...prev };
+      delete newProgress[file.name];
+      return newProgress;
+    });
+  }, []);
+  const resetUpload = React.useCallback(() => {
+    setUploadTokens([]);
+    setUploadProgress({});
+  }, []);
+  return {
+    uploadTokens,
+    uploadProgress,
+    isUploading,
+    uploadFiles,
+    removeFile,
+    resetUpload
+  };
+}
+function useContactForm(options) {
+  const {
+    formFields,
+    formConfig,
+    onSubmit,
+    onSuccess,
+    onError,
+    resetOnSuccess = true,
+    uploadTokens = []
+  } = options;
+  const [isSubmitted, setIsSubmitted] = React.useState(false);
+  const [submissionError, setSubmissionError] = React.useState(null);
+  const form = forms.useForm({
+    initialValues: React.useMemo(
+      () => generateInitialValues(formFields),
+      [formFields]
+    ),
+    validationSchema: React.useMemo(
+      () => generateValidationSchema(formFields),
+      [formFields]
+    ),
+    onSubmit: async (values, helpers) => {
+      setSubmissionError(null);
+      const shouldAutoSubmit = Boolean(formConfig?.endpoint);
+      if (!shouldAutoSubmit && !onSubmit) {
+        return;
+      }
+      try {
+        let result;
+        const submissionValues = {
+          ...values,
+          ...uploadTokens.length > 0 && {
+            contact_form_upload_tokens: uploadTokens
+          }
+        };
+        if (shouldAutoSubmit) {
+          result = await submitPageSpeedForm(submissionValues, formConfig);
+        }
+        if (onSubmit) {
+          await onSubmit(submissionValues);
+        }
+        if (shouldAutoSubmit || onSubmit) {
+          setIsSubmitted(true);
+          if (resetOnSuccess) {
+            helpers.resetForm();
+          }
+          onSuccess?.(result);
+          setTimeout(() => setIsSubmitted(false), 5e3);
+        }
+      } catch (error) {
+        if (error instanceof PageSpeedFormSubmissionError && error.formErrors) {
+          helpers.setErrors(error.formErrors);
+        }
+        const errorMessage = error instanceof Error ? error.message : "Form submission failed";
+        setSubmissionError(errorMessage);
+        onError?.(error);
+      }
+    }
+  });
+  const formMethod = formConfig?.method?.toLowerCase() === "get" ? "get" : "post";
+  return {
+    form,
+    isSubmitted,
+    submissionError,
+    formMethod
+  };
+}
+
+// lib/forms.ts
 var PageSpeedFormSubmissionError = class extends Error {
   constructor(message, options = {}) {
     super(message);
@@ -1078,12 +1461,47 @@ var Section = React__namespace.default.forwardRef(
   }
 );
 Section.displayName = "Section";
+var DEFAULT_FORM_FIELDS = [
+  {
+    name: "firstName",
+    type: "text",
+    label: "First Name",
+    placeholder: "First name",
+    required: true,
+    columnSpan: 6
+  },
+  {
+    name: "lastName",
+    type: "text",
+    label: "Last Name",
+    placeholder: "Last name",
+    required: true,
+    columnSpan: 6
+  },
+  {
+    name: "email",
+    type: "email",
+    label: "Email Address",
+    placeholder: "your@email.com",
+    required: true,
+    columnSpan: 12
+  },
+  {
+    name: "message",
+    type: "textarea",
+    label: "Message",
+    placeholder: "Your message...",
+    required: true,
+    rows: 4,
+    columnSpan: 12
+  }
+];
 function ContactDark({
   heading,
   description,
   contactHeading = "Contact Information",
   contactDescription = "Fill up the form and our team will get back to you within 24 hours.",
-  buttonText,
+  buttonText = "Submit",
   buttonIcon,
   actions,
   actionsSlot,
@@ -1091,6 +1509,9 @@ function ContactDark({
   contactOptionsSlot,
   socialLinks,
   socialLinksSlot,
+  formFields = DEFAULT_FORM_FIELDS,
+  successMessage = "Thank you! Your message has been sent successfully.",
+  errorMessage = "There was an error sending your message. Please try again.",
   className,
   headerClassName,
   headingClassName,
@@ -1102,6 +1523,8 @@ function ContactDark({
   infoPanelClassName,
   contactOptionsClassName,
   socialLinksClassName,
+  successMessageClassName,
+  errorMessageClassName,
   background,
   spacing = "py-8 md:py-32",
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
@@ -1112,53 +1535,26 @@ function ContactDark({
   onSuccess,
   onError
 }) {
-  const form = forms.useForm({
-    initialValues: {
-      firstName: "",
-      lastName: "",
-      email: "",
-      message: ""
-    },
-    validationSchema: {
-      firstName: (value) => !value ? "First name is required" : void 0,
-      lastName: (value) => !value ? "Last name is required" : void 0,
-      email: (value) => {
-        if (!value) return "Email is required";
-        if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value))
-          return "Please enter a valid email address";
-        return void 0;
-      },
-      message: (value) => !value ? "Message is required" : void 0
+  const {
+    uploadTokens,
+    uploadProgress,
+    isUploading,
+    uploadFiles,
+    removeFile,
+    resetUpload
+  } = useFileUpload({ onError });
+  const { form, isSubmitted, submissionError, formMethod } = useContactForm({
+    formFields,
+    formConfig,
+    onSubmit,
+    onSuccess: (data) => {
+      resetUpload();
+      onSuccess?.(data);
     },
-    onSubmit: async (values, helpers) => {
-      const shouldAutoSubmit = Boolean(formConfig?.endpoint);
-      if (!shouldAutoSubmit && !onSubmit) {
-        return;
-      }
-      try {
-        let result;
-        if (shouldAutoSubmit) {
-          result = await submitPageSpeedForm(values, formConfig);
-        }
-        if (onSubmit) {
-          await onSubmit(values);
-        }
-        if (shouldAutoSubmit || onSubmit) {
-          if (formConfig?.resetOnSuccess !== false) {
-            helpers.resetForm();
-          }
-          onSuccess?.(result);
-        }
-      } catch (error) {
-        if (error instanceof PageSpeedFormSubmissionError && error.formErrors) {
-          helpers.setErrors(error.formErrors);
-        }
-        onError?.(error);
-        throw error;
-      }
-    }
+    onError,
+    resetOnSuccess: formConfig?.resetOnSuccess !== false,
+    uploadTokens
   });
-  const formMethod = formConfig?.method?.toLowerCase() === "get" ? "get" : "post";
   const actionsContent = React__namespace.useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (actions && actions.length > 0) {
@@ -1269,87 +1665,70 @@ function ContactDark({
               cardClassName
             ),
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("p-6 lg:p-12", formPanelClassName), children: /* @__PURE__ */ jsxRuntime.jsxs(
-                forms.Form,
-                {
-                  form,
-                  action: formConfig?.endpoint,
-                  method: formMethod,
-                  className: cn("space-y-6", formClassName),
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-4 sm:grid-cols-2", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(forms.Field, { name: "firstName", children: ({ field, meta }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-                        /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "first-name", children: "First Name" }),
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          inputs.TextInput,
-                          {
-                            ...field,
-                            id: "first-name",
-                            placeholder: "First name",
-                            error: meta.touched && !!meta.error,
-                            "aria-label": "First Name"
-                          }
-                        )
-                      ] }) }),
-                      /* @__PURE__ */ jsxRuntime.jsx(forms.Field, { name: "lastName", children: ({ field, meta }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-                        /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "last-name", children: "Last Name" }),
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          inputs.TextInput,
-                          {
-                            ...field,
-                            id: "last-name",
-                            placeholder: "Last name",
-                            error: meta.touched && !!meta.error,
-                            "aria-label": "Last Name"
-                          }
-                        )
-                      ] }) })
-                    ] }),
-                    /* @__PURE__ */ jsxRuntime.jsx(forms.Field, { name: "email", children: ({ field, meta }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "email", children: "Email Address" }),
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        inputs.TextInput,
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("p-6 lg:p-12", formPanelClassName), children: [
+                isSubmitted && /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "mb-6 p-4 bg-primary/10 border border-primary rounded-md",
+                      successMessageClassName
+                    ),
+                    children: typeof successMessage === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-primary-foreground/90 text-center", children: successMessage }) : successMessage
+                  }
+                ),
+                submissionError && /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "mb-6 p-4 bg-destructive/10 border border-destructive rounded-md",
+                      errorMessageClassName
+                    ),
+                    children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-destructive text-center", children: submissionError })
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  forms.Form,
+                  {
+                    form,
+                    action: formConfig?.endpoint,
+                    method: formMethod,
+                    className: cn("space-y-6", formClassName),
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-12 gap-4", children: formFields.map((field) => /* @__PURE__ */ jsxRuntime.jsx(
+                        "div",
                         {
-                          ...field,
-                          id: "email",
-                          type: "email",
-                          placeholder: "Your email",
-                          error: meta.touched && !!meta.error,
-                          "aria-label": "Email Address"
-                        }
-                      )
-                    ] }) }),
-                    /* @__PURE__ */ jsxRuntime.jsx(forms.Field, { name: "message", children: ({ field, meta }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "message", children: "Message" }),
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        inputs.TextArea,
+                          className: getColumnSpanClass(field.columnSpan),
+                          children: /* @__PURE__ */ jsxRuntime.jsx(
+                            DynamicFormField,
+                            {
+                              field,
+                              uploadProgress,
+                              onFileUpload: uploadFiles,
+                              onFileRemove: removeFile,
+                              isUploading
+                            }
+                          )
+                        },
+                        field.name
+                      )) }),
+                      actionsSlot || actions && actions.length > 0 ? actionsContent : /* @__PURE__ */ jsxRuntime.jsxs(
+                        Pressable,
                         {
-                          ...field,
-                          id: "message",
-                          placeholder: "Your message...",
-                          rows: 4,
-                          error: meta.touched && !!meta.error,
-                          "aria-label": "Message"
+                          componentType: "button",
+                          type: "submit",
+                          className: cn("w-full", submitClassName),
+                          asButton: true,
+                          disabled: form.isSubmitting,
+                          children: [
+                            buttonIcon,
+                            buttonText
+                          ]
                         }
                       )
-                    ] }) }),
-                    actionsSlot || actions && actions.length > 0 ? actionsContent : /* @__PURE__ */ jsxRuntime.jsxs(
-                      Pressable,
-                      {
-                        componentType: "button",
-                        type: "submit",
-                        className: cn("w-full", submitClassName),
-                        asButton: true,
-                        disabled: form.isSubmitting,
-                        children: [
-                          buttonIcon,
-                          buttonText
-                        ]
-                      }
-                    )
-                  ]
-                }
-              ) }),
+                    ]
+                  }
+                )
+              ] }),
               /* @__PURE__ */ jsxRuntime.jsxs(
                 "div",
                 {