@opensite/ui 2.1.3 → 2.1.5

package/dist/contact-vendor.js

@@ -1,9 +1,10 @@
 "use client";
-import { useFileUpload, FormEngine } from '@page-speed/forms/integration';
+import * as React3 from 'react';
+import React3__default 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';
-import React from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
 
 // components/blocks/contact/contact-vendor.tsx
 function cn(...inputs) {
@@ -41,7 +42,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(
@@ -346,7 +347,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,
@@ -407,6 +408,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: "first_name",
@@ -453,40 +462,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
-  } = 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]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -507,7 +512,7 @@ function ContactVendor({
               ),
               children: heading
             }
-          ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
+          ) : heading),
           description && (typeof description === "string" ? /* @__PURE__ */ jsx(
             "p",
             {
@@ -517,42 +522,19 @@ function ContactVendor({
               ),
               children: description
             }
-          ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
+          ) : description)
         ] }),
-        /* @__PURE__ */ jsx(Card, { className: cn("mx-auto max-w-xl", cardClassName), children: /* @__PURE__ */ jsx(CardContent, { className: cn("p-6 lg:p-8", cardContentClassName), children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(Card, { className: cn("mx-auto max-w-xl", cardClassName), children: /* @__PURE__ */ jsx(CardContent, { className: cn("p-6 lg:p-8", cardContentClassName), children: formEngineSetup ? /* @__PURE__ */ jsx(
           FormEngine,
           {
-            api: formConfig,
-            fields: formFields,
+            ...formEngineSetup,
             formLayoutSettings: {
-              formLayout: "standard",
-              submitButtonSetup: {
-                submitLabel: /* @__PURE__ */ jsxs(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/hero-newsletter-minimal.cjs

@@ -406,6 +406,14 @@ var Section = React3__namespace.default.forwardRef(
   }
 );
 Section.displayName = "Section";
+var DEFAULT_STYLE_RULES = {
+  formContainer: "mt-10 flex justify-center items-center w-full max-w-md flex-col gap-4 sm:flex-row",
+  fieldsContainer: "",
+  fieldClassName: "",
+  formClassName: "",
+  successMessageClassName: "text-primary-foreground mt-4 p-3 rounded-md bg-primary",
+  errorMessageClassName: "text-destructive-foreground mt-4 p-3 rounded-md bg-destructive"
+};
 var DEFAULT_FORM_FIELDS = [
   {
     name: "email",
@@ -419,12 +427,7 @@ var DEFAULT_FORM_FIELDS = [
 function HeroNewsletterMinimal({
   heading,
   description,
-  formFields = DEFAULT_FORM_FIELDS,
-  formConfig,
-  onSubmit,
-  onSuccess,
-  onError,
-  successMessage,
+  formEngineSetup,
   buttonAction,
   helperText,
   formSlot,
@@ -433,25 +436,33 @@ function HeroNewsletterMinimal({
   patternClassName,
   statsSlot,
   background,
-  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  containerClassName = "pmx-auto w-full max-w-7xl relative z-10 px-6 sm:px-6 md:px-8 lg:px-8 flex flex-col items-center justify-center",
   spacing = "xl",
   pattern,
   patternOpacity,
   className,
   headingClassName,
   descriptionClassName,
-  formClassName,
   disclaimerClassName,
   statsClassName
 }) {
-  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]);
   const renderStats = React3__namespace.useMemo(() => {
     if (statsSlot) return statsSlot;
     if (!stats || stats.length === 0) return null;
@@ -480,6 +491,7 @@ function HeroNewsletterMinimal({
   }, [statsSlot, stats]);
   const renderForm = React3__namespace.useMemo(() => {
     if (formSlot) return formSlot;
+    if (!formEngineSetup) return null;
     const defaultButtonAction = {
       label: "Subscribe",
       variant: "default"
@@ -489,51 +501,33 @@ function HeroNewsletterMinimal({
       /* @__PURE__ */ jsxRuntime.jsx(
         integration.FormEngine,
         {
-          api: formConfig,
-          fields: formFields,
+          ...formEngineSetup,
           formLayoutSettings: {
+            ...formEngineSetup.formLayoutSettings,
             formLayout: "button-group",
             buttonGroupSetup: {
+              ...formEngineSetup.formLayoutSettings?.buttonGroupSetup,
               size: "lg",
               submitLabel: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
                 action.label,
                 action.iconAfter
               ] }),
               submitVariant: action.variant || "default"
-            }
+            },
+            styleRules: formStyleRules
           },
-          successMessage,
-          onSubmit,
-          onSuccess: (data) => {
-            resetUpload();
-            onSuccess?.(data);
-          },
-          onError,
-          uploadTokens,
-          uploadProgress,
-          onFileUpload: uploadFiles,
-          onFileRemove: removeFile,
-          isUploading
+          fields: formFields
         }
       ),
       helperText && (typeof helperText === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm mt-2 text-center"), children: helperText }) : helperText)
     ] });
   }, [
     formSlot,
-    formFields,
-    formConfig,
+    formEngineSetup,
     buttonAction,
-    uploadTokens,
-    uploadProgress,
-    uploadFiles,
-    removeFile,
-    isUploading,
-    successMessage,
-    onSubmit,
-    onSuccess,
-    onError,
-    helperText,
-    resetUpload
+    formFields,
+    formStyleRules,
+    helperText
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
@@ -545,58 +539,40 @@ function HeroNewsletterMinimal({
       patternClassName,
       className,
       containerClassName,
-      children: /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          className: cn(
-            "container flex flex-col items-center justify-center text-center",
-            containerClassName
-          ),
-          children: [
-            heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-              "h1",
-              {
-                className: cn(
-                  "max-w-3xl text-5xl font-bold tracking-tight md:text-6xl lg:text-7xl text-pretty",
-                  headingClassName
-                ),
-                children: heading
-              }
-            ) : heading),
-            description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-              "p",
-              {
-                className: cn(
-                  "mt-6 max-w-full md:max-w-lg text-lg md:text-xl text-balance",
-                  descriptionClassName
-                ),
-                children: description
-              }
-            ) : description),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                className: cn(
-                  "mt-10 flex w-full max-w-md flex-col gap-4 sm:flex-row",
-                  formClassName
-                ),
-                children: renderForm
-              }
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center", children: [
+        heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+          "h1",
+          {
+            className: cn(
+              "max-w-3xl text-5xl font-bold tracking-tight md:text-6xl lg:text-7xl text-pretty text-center",
+              headingClassName
             ),
-            disclaimer && (typeof disclaimer === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-4 text-sm", disclaimerClassName), children: disclaimer }) : disclaimer),
-            (statsSlot || stats && stats.length > 0) && /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                className: cn(
-                  "mt-16 flex flex-wrap items-center justify-center gap-8 md:gap-12",
-                  statsClassName
-                ),
-                children: renderStats
-              }
-            )
-          ]
-        }
-      )
+            children: heading
+          }
+        ) : heading),
+        description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+          "p",
+          {
+            className: cn(
+              "mt-6 max-w-full md:max-w-lg text-lg md:text-xl text-balance text-center",
+              descriptionClassName
+            ),
+            children: description
+          }
+        ) : description),
+        renderForm,
+        disclaimer && (typeof disclaimer === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-4 text-sm", disclaimerClassName), children: disclaimer }) : disclaimer),
+        (statsSlot || stats && stats.length > 0) && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "mt-16 flex flex-wrap items-center justify-center gap-8 md:gap-12",
+              statsClassName
+            ),
+            children: renderStats
+          }
+        )
+      ] })
     }
   );
 }

package/dist/hero-newsletter-minimal.d.cts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-r_NhxVet.cjs';
-import { FormFieldConfig, PageSpeedFormConfig } from '@page-speed/forms/integration';
+import { FormEngineProps } from '@page-speed/forms/integration';
 import { A as ActionConfig, S as StatItem } from './blocks-DP3Vofl4.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
@@ -17,29 +17,9 @@ interface HeroNewsletterMinimalProps {
      */
     description?: React.ReactNode;
     /**
-     * Form field configuration
+     * Full form engine setup and props
      */
-    formFields?: FormFieldConfig[];
-    /**
-     * Form configuration for submission
-     */
-    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;
-    /**
-     * Success message to display
-     */
-    successMessage?: React.ReactNode;
+    formEngineSetup?: FormEngineProps;
     /**
      * Submit button configuration
      */
@@ -95,10 +75,6 @@ interface HeroNewsletterMinimalProps {
      * Additional CSS classes for the description
      */
     descriptionClassName?: string;
-    /**
-     * Additional CSS classes for the form container
-     */
-    formClassName?: string;
     /**
      * Additional CSS classes for the input
      */
@@ -116,6 +92,6 @@ interface HeroNewsletterMinimalProps {
      */
     patternClassName?: string;
 }
-declare function HeroNewsletterMinimal({ heading, description, formFields, formConfig, onSubmit, onSuccess, onError, successMessage, buttonAction, helperText, formSlot, disclaimer, stats, patternClassName, statsSlot, background, containerClassName, spacing, pattern, patternOpacity, className, headingClassName, descriptionClassName, formClassName, disclaimerClassName, statsClassName, }: HeroNewsletterMinimalProps): React.JSX.Element;
+declare function HeroNewsletterMinimal({ heading, description, formEngineSetup, buttonAction, helperText, formSlot, disclaimer, stats, patternClassName, statsSlot, background, containerClassName, spacing, pattern, patternOpacity, className, headingClassName, descriptionClassName, disclaimerClassName, statsClassName, }: HeroNewsletterMinimalProps): React.JSX.Element;
 
 export { HeroNewsletterMinimal, type HeroNewsletterMinimalProps };

package/dist/hero-newsletter-minimal.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-DmVsuoHE.js';
-import { FormFieldConfig, PageSpeedFormConfig } from '@page-speed/forms/integration';
+import { FormEngineProps } from '@page-speed/forms/integration';
 import { A as ActionConfig, S as StatItem } from './blocks-XLPGq8A5.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
@@ -17,29 +17,9 @@ interface HeroNewsletterMinimalProps {
      */
     description?: React.ReactNode;
     /**
-     * Form field configuration
+     * Full form engine setup and props
      */
-    formFields?: FormFieldConfig[];
-    /**
-     * Form configuration for submission
-     */
-    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;
-    /**
-     * Success message to display
-     */
-    successMessage?: React.ReactNode;
+    formEngineSetup?: FormEngineProps;
     /**
      * Submit button configuration
      */
@@ -95,10 +75,6 @@ interface HeroNewsletterMinimalProps {
      * Additional CSS classes for the description
      */
     descriptionClassName?: string;
-    /**
-     * Additional CSS classes for the form container
-     */
-    formClassName?: string;
     /**
      * Additional CSS classes for the input
      */
@@ -116,6 +92,6 @@ interface HeroNewsletterMinimalProps {
      */
     patternClassName?: string;
 }
-declare function HeroNewsletterMinimal({ heading, description, formFields, formConfig, onSubmit, onSuccess, onError, successMessage, buttonAction, helperText, formSlot, disclaimer, stats, patternClassName, statsSlot, background, containerClassName, spacing, pattern, patternOpacity, className, headingClassName, descriptionClassName, formClassName, disclaimerClassName, statsClassName, }: HeroNewsletterMinimalProps): React.JSX.Element;
+declare function HeroNewsletterMinimal({ heading, description, formEngineSetup, buttonAction, helperText, formSlot, disclaimer, stats, patternClassName, statsSlot, background, containerClassName, spacing, pattern, patternOpacity, className, headingClassName, descriptionClassName, disclaimerClassName, statsClassName, }: HeroNewsletterMinimalProps): React.JSX.Element;
 
 export { HeroNewsletterMinimal, type HeroNewsletterMinimalProps };