@opensite/ui 2.1.3 → 2.1.5

package/dist/contact-faq.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FormFieldConfig, PageSpeedFormConfig } from '@page-speed/forms/integration';
+import { FormEngineProps } from '@page-speed/forms/integration';
 import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-DmVsuoHE.js';
 import 'react/jsx-runtime';
 import './blocks-XLPGq8A5.js';
@@ -46,15 +46,9 @@ interface ContactFaqProps {
      */
     faqHeading?: React.ReactNode;
     /**
-     * Array of form field configurations
-     * If not provided, defaults to: name, email, subject, message
+     * Full form engine setup and props
      */
-    formFields?: FormFieldConfig[];
-    /**
-     * Success message to display after form submission
-     * @default "Thank you! Your message has been sent successfully."
-     */
-    successMessage?: React.ReactNode;
+    formEngineSetup?: FormEngineProps;
     /**
      * Additional CSS classes for the section
      */
@@ -87,14 +81,6 @@ interface ContactFaqProps {
      * Additional CSS classes for the form heading
      */
     formHeadingClassName?: string;
-    /**
-     * Additional CSS classes for the form
-     */
-    formClassName?: string;
-    /**
-     * Additional CSS classes for the submit button
-     */
-    submitClassName?: string;
     /**
      * Additional CSS classes for the FAQ heading
      */
@@ -123,14 +109,6 @@ interface ContactFaqProps {
      * Additional CSS classes for the two-column grid wrapper
      */
     gridClassName?: string;
-    /**
-     * Additional CSS classes for the success message
-     */
-    successMessageClassName?: string;
-    /**
-     * Additional CSS classes for the error message
-     */
-    errorMessageClassName?: string;
     /**
      * Background style for the section
      */
@@ -147,26 +125,10 @@ interface ContactFaqProps {
      * Pattern overlay opacity (0-1)
      */
     patternOpacity?: number;
-    /**
-     * Form configuration for PageSpeed forms
-     */
-    formConfig?: PageSpeedFormConfig;
-    /**
-     * Custom submit handler
-     */
-    onSubmit?: (values: Record<string, any>) => void | Promise<void>;
-    /**
-     * Success callback
-     */
-    onSuccess?: (data: unknown) => void;
-    /**
-     * Error callback
-     */
-    onError?: (error: Error) => void;
 }
 /**
  * ContactFaq - FAQ contact form with flexible field configuration
  */
-declare function ContactFaq({ heading, description, formHeading, buttonText, buttonIcon, items, itemsSlot, faqHeading, formFields, successMessage, className, containerClassName, headerClassName, headingClassName, descriptionClassName, cardClassName, cardContentClassName, formHeadingClassName, formClassName, faqHeadingClassName, faqContainerClassName, accordionClassName, accordionItemClassName, accordionTriggerClassName, accordionContentClassName, gridClassName, successMessageClassName, errorMessageClassName, background, spacing, pattern, patternOpacity, formConfig, onSubmit, onSuccess, onError, }: ContactFaqProps): React.JSX.Element;
+declare function ContactFaq({ heading, description, formHeading, buttonText, buttonIcon, items, itemsSlot, faqHeading, formEngineSetup, className, containerClassName, headerClassName, headingClassName, descriptionClassName, cardClassName, cardContentClassName, formHeadingClassName, faqHeadingClassName, faqContainerClassName, accordionClassName, accordionItemClassName, accordionTriggerClassName, accordionContentClassName, gridClassName, background, spacing, pattern, patternOpacity, }: ContactFaqProps): React.JSX.Element;
 
 export { ContactFaq, type ContactFaqProps, type FaqItem };

package/dist/contact-faq.js

@@ -1,6 +1,7 @@
 "use client";
-import React, { useMemo } from 'react';
-import { useFileUpload, FormEngine } from '@page-speed/forms/integration';
+import * as React3 from 'react';
+import React3__default, { useMemo } from 'react';
+import { FormEngine } from '@page-speed/forms/integration';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -107,7 +108,7 @@ var maxWidthStyles = {
   "4xl": "max-w-[1536px]",
   full: "max-w-full"
 };
-var Container = React.forwardRef(
+var Container = React3__default.forwardRef(
   ({ children, maxWidth = "xl", className, as = "div", ...props }, ref) => {
     const Component = as;
     return /* @__PURE__ */ jsx(
@@ -412,7 +413,7 @@ var spacingStyles = {
 };
 var predefinedSpacings = ["none", "sm", "md", "lg", "xl"];
 var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
-var Section = React.forwardRef(
+var Section = React3__default.forwardRef(
   ({
     id,
     title,
@@ -473,6 +474,14 @@ var Section = React.forwardRef(
   }
 );
 Section.displayName = "Section";
+var DEFAULT_STYLE_RULES = {
+  formContainer: "",
+  fieldsContainer: "",
+  fieldClassName: "",
+  formClassName: "space-y-6",
+  successMessageClassName: "text-green-600 dark:text-green-400 mt-4 p-3 rounded-md bg-green-50 dark:bg-green-950/20",
+  errorMessageClassName: "text-red-600 dark:text-red-400 mt-4 p-3 rounded-md bg-red-50 dark:bg-red-950/20"
+};
 var DEFAULT_FORM_FIELDS = [
   {
     name: "name",
@@ -517,8 +526,7 @@ function ContactFaq({
   items,
   itemsSlot,
   faqHeading,
-  formFields = DEFAULT_FORM_FIELDS,
-  successMessage = "Thank you! Your message has been sent successfully.",
+  formEngineSetup,
   className,
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   headerClassName,
@@ -527,7 +535,6 @@ function ContactFaq({
   cardClassName,
   cardContentClassName,
   formHeadingClassName,
-  formClassName,
   faqHeadingClassName,
   faqContainerClassName,
   accordionClassName,
@@ -535,25 +542,28 @@ function ContactFaq({
   accordionTriggerClassName,
   accordionContentClassName,
   gridClassName,
-  successMessageClassName,
-  errorMessageClassName,
   background,
   spacing = "py-8 md:py-32",
   pattern,
-  patternOpacity,
-  formConfig,
-  onSubmit,
-  onSuccess,
-  onError
+  patternOpacity
 }) {
-  const {
-    uploadTokens,
-    uploadProgress,
-    isUploading,
-    uploadFiles,
-    removeFile,
-    resetUpload
-  } = useFileUpload({ onError });
+  const formStyleRules = React3.useMemo(() => {
+    return {
+      formContainer: formEngineSetup?.formLayoutSettings?.styleRules?.formContainer ?? DEFAULT_STYLE_RULES.formContainer,
+      fieldsContainer: formEngineSetup?.formLayoutSettings?.styleRules?.fieldsContainer ?? DEFAULT_STYLE_RULES.fieldsContainer,
+      fieldClassName: formEngineSetup?.formLayoutSettings?.styleRules?.fieldClassName ?? DEFAULT_STYLE_RULES.fieldClassName,
+      formClassName: formEngineSetup?.formLayoutSettings?.styleRules?.formClassName ?? DEFAULT_STYLE_RULES.formClassName,
+      successMessageClassName: formEngineSetup?.formLayoutSettings?.styleRules?.successMessageClassName ?? DEFAULT_STYLE_RULES.successMessageClassName,
+      errorMessageClassName: formEngineSetup?.formLayoutSettings?.styleRules?.errorMessageClassName ?? DEFAULT_STYLE_RULES.errorMessageClassName
+    };
+  }, [formEngineSetup?.formLayoutSettings?.styleRules]);
+  const formFields = React3.useMemo(() => {
+    if (formEngineSetup && formEngineSetup?.fields && formEngineSetup?.fields?.length > 0) {
+      return formEngineSetup.fields;
+    } else {
+      return DEFAULT_FORM_FIELDS;
+    }
+  }, [formEngineSetup?.fields]);
   const hasFaqItems = itemsSlot || items && items.length > 0;
   const faqContent = useMemo(() => {
     if (itemsSlot) return itemsSlot;
@@ -648,40 +658,25 @@ function ContactFaq({
                     children: formHeading
                   }
                 ) : /* @__PURE__ */ jsx("div", { className: formHeadingClassName, children: formHeading })),
-                /* @__PURE__ */ jsx(
+                formEngineSetup ? /* @__PURE__ */ jsx(
                   FormEngine,
                   {
-                    api: formConfig,
-                    fields: formFields,
+                    ...formEngineSetup,
                     formLayoutSettings: {
+                      ...formEngineSetup.formLayoutSettings,
                       formLayout: "standard",
                       submitButtonSetup: {
+                        ...formEngineSetup.formLayoutSettings?.submitButtonSetup,
                         submitLabel: /* @__PURE__ */ jsxs(Fragment, { children: [
                           buttonIcon,
                           buttonText
                         ] })
                       },
-                      styleRules: {
-                        formClassName: cn("space-y-6", formClassName),
-                        successMessageClassName,
-                        errorMessageClassName
-                      }
-                    },
-                    successMessage,
-                    onSubmit,
-                    onSuccess: (data) => {
-                      resetUpload();
-                      onSuccess?.(data);
+                      styleRules: formStyleRules
                     },
-                    onError,
-                    resetOnSuccess: formConfig?.resetOnSuccess !== false,
-                    uploadTokens,
-                    uploadProgress,
-                    onFileUpload: uploadFiles,
-                    onFileRemove: removeFile,
-                    isUploading
+                    fields: formFields
                   }
-                )
+                ) : null
               ] }) }),
               hasFaqItems && /* @__PURE__ */ jsxs("div", { className: cn("relative", faqContainerClassName), children: [
                 faqHeading && (typeof faqHeading === "string" ? /* @__PURE__ */ jsx(

package/dist/contact-vendor.cjs

@@ -1,15 +1,31 @@
 "use client";
 'use strict';
 
+var React3 = require('react');
 var integration = require('@page-speed/forms/integration');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
 
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
 
-var React__default = /*#__PURE__*/_interopDefault(React);
+var React3__namespace = /*#__PURE__*/_interopNamespace(React3);
 
 // components/blocks/contact/contact-vendor.tsx
 function cn(...inputs) {
@@ -47,7 +63,7 @@ var maxWidthStyles = {
   "4xl": "max-w-[1536px]",
   full: "max-w-full"
 };
-var Container = React__default.default.forwardRef(
+var Container = React3__namespace.default.forwardRef(
   ({ children, maxWidth = "xl", className, as = "div", ...props }, ref) => {
     const Component = as;
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -352,7 +368,7 @@ var spacingStyles = {
 };
 var predefinedSpacings = ["none", "sm", "md", "lg", "xl"];
 var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
-var Section = React__default.default.forwardRef(
+var Section = React3__namespace.default.forwardRef(
   ({
     id,
     title,
@@ -413,6 +429,14 @@ var Section = React__default.default.forwardRef(
   }
 );
 Section.displayName = "Section";
+var DEFAULT_STYLE_RULES = {
+  formContainer: "",
+  fieldsContainer: "",
+  fieldClassName: "",
+  formClassName: "space-y-6",
+  successMessageClassName: "text-green-600 dark:text-green-400 mt-4 p-3 rounded-md bg-green-50 dark:bg-green-950/20",
+  errorMessageClassName: "text-red-600 dark:text-red-400 mt-4 p-3 rounded-md bg-red-50 dark:bg-red-950/20"
+};
 var DEFAULT_FORM_FIELDS = [
   {
     name: "first_name",
@@ -459,40 +483,36 @@ var DEFAULT_FORM_FIELDS = [
 function ContactVendor({
   heading,
   description,
-  buttonText = "Submit",
-  buttonIcon,
-  actions,
-  actionsSlot,
-  formFields = DEFAULT_FORM_FIELDS,
-  successMessage = "Thank you! Your message has been sent successfully.",
   className,
+  formEngineSetup,
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   headerClassName,
   headingClassName,
   descriptionClassName,
   cardClassName,
   cardContentClassName,
-  formClassName,
-  submitClassName,
-  successMessageClassName,
-  errorMessageClassName,
-  background = "white",
+  background,
   spacing = "xl",
   pattern,
-  patternOpacity = 0.1,
-  formConfig,
-  onSubmit,
-  onSuccess,
-  onError
+  patternOpacity = 0.1
 }) {
-  const {
-    uploadTokens,
-    uploadProgress,
-    isUploading,
-    uploadFiles,
-    removeFile,
-    resetUpload
-  } = integration.useFileUpload({ onError });
+  const formStyleRules = React3__namespace.useMemo(() => {
+    return {
+      formContainer: formEngineSetup?.formLayoutSettings?.styleRules?.formContainer ?? DEFAULT_STYLE_RULES.formContainer,
+      fieldsContainer: formEngineSetup?.formLayoutSettings?.styleRules?.fieldsContainer ?? DEFAULT_STYLE_RULES.fieldsContainer,
+      fieldClassName: formEngineSetup?.formLayoutSettings?.styleRules?.fieldClassName ?? DEFAULT_STYLE_RULES.fieldClassName,
+      formClassName: formEngineSetup?.formLayoutSettings?.styleRules?.formClassName ?? DEFAULT_STYLE_RULES.formClassName,
+      successMessageClassName: formEngineSetup?.formLayoutSettings?.styleRules?.successMessageClassName ?? DEFAULT_STYLE_RULES.successMessageClassName,
+      errorMessageClassName: formEngineSetup?.formLayoutSettings?.styleRules?.errorMessageClassName ?? DEFAULT_STYLE_RULES.errorMessageClassName
+    };
+  }, [formEngineSetup?.formLayoutSettings?.styleRules]);
+  const formFields = React3__namespace.useMemo(() => {
+    if (formEngineSetup && formEngineSetup?.fields && formEngineSetup?.fields?.length > 0) {
+      return formEngineSetup.fields;
+    } else {
+      return DEFAULT_FORM_FIELDS;
+    }
+  }, [formEngineSetup?.fields]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -513,7 +533,7 @@ function ContactVendor({
               ),
               children: heading
             }
-          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+          ) : heading),
           description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
             "p",
             {
@@ -523,42 +543,19 @@ function ContactVendor({
               ),
               children: description
             }
-          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+          ) : description)
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(Card, { className: cn("mx-auto max-w-xl", cardClassName), children: /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: cn("p-6 lg:p-8", cardContentClassName), children: /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx(Card, { className: cn("mx-auto max-w-xl", cardClassName), children: /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: cn("p-6 lg:p-8", cardContentClassName), children: formEngineSetup ? /* @__PURE__ */ jsxRuntime.jsx(
           integration.FormEngine,
           {
-            api: formConfig,
-            fields: formFields,
+            ...formEngineSetup,
             formLayoutSettings: {
-              formLayout: "standard",
-              submitButtonSetup: {
-                submitLabel: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                  buttonIcon,
-                  buttonText
-                ] })
-              },
-              styleRules: {
-                formClassName: cn("space-y-4", formClassName),
-                successMessageClassName,
-                errorMessageClassName
-              }
-            },
-            successMessage,
-            onSubmit,
-            onSuccess: (data) => {
-              resetUpload();
-              onSuccess?.(data);
+              ...formEngineSetup.formLayoutSettings,
+              styleRules: formStyleRules
             },
-            onError,
-            resetOnSuccess: formConfig?.resetOnSuccess !== false,
-            uploadTokens,
-            uploadProgress,
-            onFileUpload: uploadFiles,
-            onFileRemove: removeFile,
-            isUploading
+            fields: formFields
           }
-        ) }) })
+        ) : null }) })
       ] })
     }
   );

package/dist/contact-vendor.d.cts

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { FormFieldConfig, PageSpeedFormConfig } from '@page-speed/forms/integration';
+import { FormEngineProps } from '@page-speed/forms/integration';
 import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-r_NhxVet.cjs';
-import { A as ActionConfig } from './blocks-DP3Vofl4.cjs';
 import 'react/jsx-runtime';
+import './blocks-DP3Vofl4.cjs';
 import 'class-variance-authority';
 import './button-variants-CdNtNOuP.cjs';
 import 'class-variance-authority/types';
@@ -12,24 +12,6 @@ interface ContactVendorProps {
     heading?: React.ReactNode;
     /** Description text below heading */
     description?: React.ReactNode;
-    /** Submit button text */
-    buttonText?: string;
-    /** Icon to display in submit button */
-    buttonIcon?: React.ReactNode;
-    /** Array of action configurations for custom buttons */
-    actions?: ActionConfig[];
-    /** Custom slot for rendering actions (overrides actions array) */
-    actionsSlot?: React.ReactNode;
-    /**
-     * Array of form field configurations
-     * If not provided, defaults to: first_name, last_name, email, phone, message
-     */
-    formFields?: FormFieldConfig[];
-    /**
-     * Success message to display after form submission
-     * @default "Thank you! Your message has been sent successfully."
-     */
-    successMessage?: React.ReactNode;
     /** Additional CSS classes for the section */
     className?: string;
     /** Additional CSS classes for the container */
@@ -44,14 +26,6 @@ interface ContactVendorProps {
     cardClassName?: string;
     /** Additional CSS classes for the card content */
     cardContentClassName?: string;
-    /** Additional CSS classes for the form */
-    formClassName?: string;
-    /** Additional CSS classes for the submit button */
-    submitClassName?: string;
-    /** Additional CSS classes for the success message */
-    successMessageClassName?: string;
-    /** Additional CSS classes for the error message */
-    errorMessageClassName?: string;
     /**
      * Background style for the section
      */
@@ -68,14 +42,10 @@ interface ContactVendorProps {
      * Pattern overlay opacity (0-1)
      */
     patternOpacity?: number;
-    /** Form configuration for PageSpeed forms */
-    formConfig?: PageSpeedFormConfig;
-    /** Custom submit handler */
-    onSubmit?: (values: Record<string, any>) => void | Promise<void>;
-    /** Success callback */
-    onSuccess?: (data: unknown) => void;
-    /** Error callback */
-    onError?: (error: Error) => void;
+    /**
+     * Full form engine setup and props
+     */
+    formEngineSetup?: FormEngineProps;
 }
 /**
  * ContactVendor - Contact form with flexible field configuration
@@ -88,6 +58,6 @@ interface ContactVendorProps {
  * />
  * ```
  */
-declare function ContactVendor({ heading, description, buttonText, buttonIcon, actions, actionsSlot, formFields, successMessage, className, containerClassName, headerClassName, headingClassName, descriptionClassName, cardClassName, cardContentClassName, formClassName, submitClassName, successMessageClassName, errorMessageClassName, background, spacing, pattern, patternOpacity, formConfig, onSubmit, onSuccess, onError, }: ContactVendorProps): React.JSX.Element;
+declare function ContactVendor({ heading, description, className, formEngineSetup, containerClassName, headerClassName, headingClassName, descriptionClassName, cardClassName, cardContentClassName, background, spacing, pattern, patternOpacity, }: ContactVendorProps): React.JSX.Element;
 
 export { ContactVendor, type ContactVendorProps };

package/dist/contact-vendor.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { FormFieldConfig, PageSpeedFormConfig } from '@page-speed/forms/integration';
+import { FormEngineProps } from '@page-speed/forms/integration';
 import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-DmVsuoHE.js';
-import { A as ActionConfig } from './blocks-XLPGq8A5.js';
 import 'react/jsx-runtime';
+import './blocks-XLPGq8A5.js';
 import 'class-variance-authority';
 import './button-variants-CdNtNOuP.js';
 import 'class-variance-authority/types';
@@ -12,24 +12,6 @@ interface ContactVendorProps {
     heading?: React.ReactNode;
     /** Description text below heading */
     description?: React.ReactNode;
-    /** Submit button text */
-    buttonText?: string;
-    /** Icon to display in submit button */
-    buttonIcon?: React.ReactNode;
-    /** Array of action configurations for custom buttons */
-    actions?: ActionConfig[];
-    /** Custom slot for rendering actions (overrides actions array) */
-    actionsSlot?: React.ReactNode;
-    /**
-     * Array of form field configurations
-     * If not provided, defaults to: first_name, last_name, email, phone, message
-     */
-    formFields?: FormFieldConfig[];
-    /**
-     * Success message to display after form submission
-     * @default "Thank you! Your message has been sent successfully."
-     */
-    successMessage?: React.ReactNode;
     /** Additional CSS classes for the section */
     className?: string;
     /** Additional CSS classes for the container */
@@ -44,14 +26,6 @@ interface ContactVendorProps {
     cardClassName?: string;
     /** Additional CSS classes for the card content */
     cardContentClassName?: string;
-    /** Additional CSS classes for the form */
-    formClassName?: string;
-    /** Additional CSS classes for the submit button */
-    submitClassName?: string;
-    /** Additional CSS classes for the success message */
-    successMessageClassName?: string;
-    /** Additional CSS classes for the error message */
-    errorMessageClassName?: string;
     /**
      * Background style for the section
      */
@@ -68,14 +42,10 @@ interface ContactVendorProps {
      * Pattern overlay opacity (0-1)
      */
     patternOpacity?: number;
-    /** Form configuration for PageSpeed forms */
-    formConfig?: PageSpeedFormConfig;
-    /** Custom submit handler */
-    onSubmit?: (values: Record<string, any>) => void | Promise<void>;
-    /** Success callback */
-    onSuccess?: (data: unknown) => void;
-    /** Error callback */
-    onError?: (error: Error) => void;
+    /**
+     * Full form engine setup and props
+     */
+    formEngineSetup?: FormEngineProps;
 }
 /**
  * ContactVendor - Contact form with flexible field configuration
@@ -88,6 +58,6 @@ interface ContactVendorProps {
  * />
  * ```
  */
-declare function ContactVendor({ heading, description, buttonText, buttonIcon, actions, actionsSlot, formFields, successMessage, className, containerClassName, headerClassName, headingClassName, descriptionClassName, cardClassName, cardContentClassName, formClassName, submitClassName, successMessageClassName, errorMessageClassName, background, spacing, pattern, patternOpacity, formConfig, onSubmit, onSuccess, onError, }: ContactVendorProps): React.JSX.Element;
+declare function ContactVendor({ heading, description, className, formEngineSetup, containerClassName, headerClassName, headingClassName, descriptionClassName, cardClassName, cardContentClassName, background, spacing, pattern, patternOpacity, }: ContactVendorProps): React.JSX.Element;
 
 export { ContactVendor, type ContactVendorProps };