@opensite/ui 2.0.8 → 2.1.0

package/dist/hero-split-image-newsletter.cjs

@@ -7,6 +7,8 @@ var tailwindMerge = require('tailwind-merge');
 var classVarianceAuthority = require('class-variance-authority');
 var jsxRuntime = require('react/jsx-runtime');
 var img = require('@page-speed/img');
+var forms = require('@page-speed/forms');
+var integration = require('@page-speed/forms/integration');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -450,22 +452,6 @@ var Pressable = React__namespace.forwardRef(
   }
 );
 Pressable.displayName = "Pressable";
-function Input({ className, type, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "input",
-    {
-      type,
-      "data-slot": "input",
-      className: cn(
-        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-        className
-      ),
-      ...props
-    }
-  );
-}
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -841,11 +827,28 @@ var Section = React__namespace.default.forwardRef(
   }
 );
 Section.displayName = "Section";
+var DEFAULT_FORM_FIELDS = [
+  {
+    name: "email",
+    type: "email",
+    label: "Email Address",
+    placeholder: "Enter your email",
+    required: true,
+    columnSpan: 12
+  }
+];
 function HeroSplitImageNewsletter({
   heading,
   description,
-  newsletterForm,
-  newsletterFormSlot,
+  formFields = DEFAULT_FORM_FIELDS,
+  formConfig,
+  onSubmit,
+  onSuccess,
+  onError,
+  successMessage,
+  buttonAction,
+  helperText,
+  formSlot,
   image,
   imageSlot,
   background,
@@ -860,36 +863,75 @@ function HeroSplitImageNewsletter({
   imageClassName,
   optixFlowConfig
 }) {
-  const renderNewsletterForm = React.useMemo(() => {
-    if (newsletterFormSlot) return newsletterFormSlot;
-    if (!newsletterForm) return null;
-    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 sm:flex-row", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          Input,
-          {
-            type: "email",
-            placeholder: newsletterForm.placeholder,
-            className: "h-12 flex-1 rounded-full px-6"
-          }
-        ),
-        newsletterForm.action && /* @__PURE__ */ jsxRuntime.jsxs(
-          Pressable,
-          {
-            href: newsletterForm.action.href,
-            asButton: true,
-            variant: newsletterForm.action.variant,
-            className: newsletterForm.action.className,
-            children: [
-              newsletterForm.action.label,
-              newsletterForm.action.iconAfter
-            ]
-          }
-        )
-      ] }),
-      newsletterForm.helperText && (typeof newsletterForm.helperText === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm"), children: newsletterForm.helperText }) : newsletterForm.helperText)
-    ] });
-  }, [newsletterFormSlot, newsletterForm]);
+  const { uploadTokens, uploadProgress, isUploading, uploadFiles, removeFile, resetUpload } = integration.useFileUpload({ onError });
+  const { form, submissionError, formMethod, resetSubmissionState } = integration.useContactForm({
+    formFields,
+    formConfig,
+    onSubmit,
+    onSuccess: (data) => {
+      resetUpload();
+      onSuccess?.(data);
+    },
+    onError,
+    uploadTokens
+  });
+  const renderForm = React.useMemo(() => {
+    if (formSlot) return formSlot;
+    const defaultButtonAction = {
+      label: "Subscribe",
+      variant: "default",
+      className: "h-12"
+    };
+    const action = buttonAction || defaultButtonAction;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      forms.Form,
+      {
+        form,
+        notificationConfig: {
+          submissionError,
+          successMessage
+        },
+        formConfig: {
+          endpoint: formConfig?.endpoint,
+          method: formMethod,
+          submissionConfig: formConfig?.submissionConfig
+        },
+        onNewSubmission: () => {
+          resetUpload();
+          resetSubmissionState();
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 sm:flex-row", children: [
+            formFields.map((field) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(
+              integration.DynamicFormField,
+              {
+                field,
+                uploadProgress,
+                onFileUpload: uploadFiles,
+                onFileRemove: removeFile,
+                isUploading
+              }
+            ) }, field.name)),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              Pressable,
+              {
+                onClick: form.handleSubmit,
+                asButton: true,
+                variant: action.variant,
+                className: cn("h-12", action.className),
+                disabled: form.isSubmitting,
+                children: [
+                  action.label,
+                  action.iconAfter
+                ]
+              }
+            )
+          ] }),
+          helperText && (typeof helperText === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm mt-2"), children: helperText }) : helperText)
+        ]
+      }
+    );
+  }, [formSlot, formFields, form, formConfig, formMethod, buttonAction, uploadProgress, uploadFiles, removeFile, isUploading, submissionError, successMessage, helperText, resetUpload, resetSubmissionState]);
   const renderImage = React.useMemo(() => {
     if (imageSlot) return imageSlot;
     if (!image) return null;
@@ -954,7 +996,7 @@ function HeroSplitImageNewsletter({
                   children: description
                 }
               ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
-              renderNewsletterForm
+              renderForm
             ]
           }
         ),

package/dist/hero-split-image-newsletter.d.cts

@@ -1,42 +1,57 @@
 import * as React from 'react';
 import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bz_A5vLU.cjs';
+import { FormFieldConfig, PageSpeedFormConfig } from '@page-speed/forms/integration';
 import { A as ActionConfig, I as ImageItem, O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
 import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 
-interface NewsletterFormConfig {
+interface HeroSplitImageNewsletterProps {
     /**
-     * Input placeholder text
+     * Main heading content
      */
-    placeholder?: string;
+    heading?: React.ReactNode;
     /**
-     * Submit button action
+     * Description text below heading
      */
-    action?: ActionConfig;
+    description?: React.ReactNode;
     /**
-     * Helper text below form
+     * Form field configuration
      */
-    helperText?: React.ReactNode;
-}
-interface HeroSplitImageNewsletterProps {
+    formFields?: FormFieldConfig[];
     /**
-     * Main heading content
+     * Form configuration for submission
      */
-    heading?: React.ReactNode;
+    formConfig?: PageSpeedFormConfig;
     /**
-     * Description text below heading
+     * Custom submit handler
      */
-    description?: React.ReactNode;
+    onSubmit?: (values: Record<string, any>) => void | Promise<void>;
+    /**
+     * Success callback
+     */
+    onSuccess?: (data: unknown) => void;
     /**
-     * Newsletter form configuration
+     * Error callback
      */
-    newsletterForm?: NewsletterFormConfig;
+    onError?: (error: Error) => void;
+    /**
+     * Success message to display
+     */
+    successMessage?: React.ReactNode;
+    /**
+     * Submit button configuration
+     */
+    buttonAction?: ActionConfig;
+    /**
+     * Helper text below form
+     */
+    helperText?: React.ReactNode;
     /**
-     * Custom slot for newsletter form (overrides newsletterForm prop)
+     * Custom slot for form (overrides form props)
      */
-    newsletterFormSlot?: React.ReactNode;
+    formSlot?: React.ReactNode;
     /**
      * Feature image on the right side
      */
@@ -89,6 +104,6 @@ interface HeroSplitImageNewsletterProps {
      */
     optixFlowConfig?: OptixFlowConfig;
 }
-declare function HeroSplitImageNewsletter({ heading, description, newsletterForm, newsletterFormSlot, image, imageSlot, background, spacing, containerClassName, pattern, patternOpacity, className, contentClassName, headingClassName, descriptionClassName, imageClassName, optixFlowConfig, }: HeroSplitImageNewsletterProps): React.JSX.Element;
+declare function HeroSplitImageNewsletter({ heading, description, formFields, formConfig, onSubmit, onSuccess, onError, successMessage, buttonAction, helperText, formSlot, image, imageSlot, background, spacing, containerClassName, pattern, patternOpacity, className, contentClassName, headingClassName, descriptionClassName, imageClassName, optixFlowConfig, }: HeroSplitImageNewsletterProps): React.JSX.Element;
 
 export { HeroSplitImageNewsletter, type HeroSplitImageNewsletterProps };

package/dist/hero-split-image-newsletter.d.ts

@@ -1,42 +1,57 @@
 import * as React from 'react';
 import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bi_ClKrO.js';
+import { FormFieldConfig, PageSpeedFormConfig } from '@page-speed/forms/integration';
 import { A as ActionConfig, I as ImageItem, O as OptixFlowConfig } from './blocks-k17uluAz.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
 import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
-interface NewsletterFormConfig {
+interface HeroSplitImageNewsletterProps {
     /**
-     * Input placeholder text
+     * Main heading content
      */
-    placeholder?: string;
+    heading?: React.ReactNode;
     /**
-     * Submit button action
+     * Description text below heading
      */
-    action?: ActionConfig;
+    description?: React.ReactNode;
     /**
-     * Helper text below form
+     * Form field configuration
      */
-    helperText?: React.ReactNode;
-}
-interface HeroSplitImageNewsletterProps {
+    formFields?: FormFieldConfig[];
     /**
-     * Main heading content
+     * Form configuration for submission
      */
-    heading?: React.ReactNode;
+    formConfig?: PageSpeedFormConfig;
     /**
-     * Description text below heading
+     * Custom submit handler
      */
-    description?: React.ReactNode;
+    onSubmit?: (values: Record<string, any>) => void | Promise<void>;
+    /**
+     * Success callback
+     */
+    onSuccess?: (data: unknown) => void;
     /**
-     * Newsletter form configuration
+     * Error callback
      */
-    newsletterForm?: NewsletterFormConfig;
+    onError?: (error: Error) => void;
+    /**
+     * Success message to display
+     */
+    successMessage?: React.ReactNode;
+    /**
+     * Submit button configuration
+     */
+    buttonAction?: ActionConfig;
+    /**
+     * Helper text below form
+     */
+    helperText?: React.ReactNode;
     /**
-     * Custom slot for newsletter form (overrides newsletterForm prop)
+     * Custom slot for form (overrides form props)
      */
-    newsletterFormSlot?: React.ReactNode;
+    formSlot?: React.ReactNode;
     /**
      * Feature image on the right side
      */
@@ -89,6 +104,6 @@ interface HeroSplitImageNewsletterProps {
      */
     optixFlowConfig?: OptixFlowConfig;
 }
-declare function HeroSplitImageNewsletter({ heading, description, newsletterForm, newsletterFormSlot, image, imageSlot, background, spacing, containerClassName, pattern, patternOpacity, className, contentClassName, headingClassName, descriptionClassName, imageClassName, optixFlowConfig, }: HeroSplitImageNewsletterProps): React.JSX.Element;
+declare function HeroSplitImageNewsletter({ heading, description, formFields, formConfig, onSubmit, onSuccess, onError, successMessage, buttonAction, helperText, formSlot, image, imageSlot, background, spacing, containerClassName, pattern, patternOpacity, className, contentClassName, headingClassName, descriptionClassName, imageClassName, optixFlowConfig, }: HeroSplitImageNewsletterProps): React.JSX.Element;
 
 export { HeroSplitImageNewsletter, type HeroSplitImageNewsletterProps };

package/dist/hero-split-image-newsletter.js

@@ -4,8 +4,10 @@ import React__default, { useMemo } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { Img } from '@page-speed/img';
+import { Form } from '@page-speed/forms';
+import { useFileUpload, useContactForm, DynamicFormField } from '@page-speed/forms/integration';
 
 // components/blocks/hero/hero-split-image-newsletter.tsx
 function cn(...inputs) {
@@ -429,22 +431,6 @@ var Pressable = React.forwardRef(
   }
 );
 Pressable.displayName = "Pressable";
-function Input({ className, type, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "input",
-    {
-      type,
-      "data-slot": "input",
-      className: cn(
-        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-        className
-      ),
-      ...props
-    }
-  );
-}
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -820,11 +806,28 @@ var Section = React__default.forwardRef(
   }
 );
 Section.displayName = "Section";
+var DEFAULT_FORM_FIELDS = [
+  {
+    name: "email",
+    type: "email",
+    label: "Email Address",
+    placeholder: "Enter your email",
+    required: true,
+    columnSpan: 12
+  }
+];
 function HeroSplitImageNewsletter({
   heading,
   description,
-  newsletterForm,
-  newsletterFormSlot,
+  formFields = DEFAULT_FORM_FIELDS,
+  formConfig,
+  onSubmit,
+  onSuccess,
+  onError,
+  successMessage,
+  buttonAction,
+  helperText,
+  formSlot,
   image,
   imageSlot,
   background,
@@ -839,36 +842,75 @@ function HeroSplitImageNewsletter({
   imageClassName,
   optixFlowConfig
 }) {
-  const renderNewsletterForm = useMemo(() => {
-    if (newsletterFormSlot) return newsletterFormSlot;
-    if (!newsletterForm) return null;
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 sm:flex-row", children: [
-        /* @__PURE__ */ jsx(
-          Input,
-          {
-            type: "email",
-            placeholder: newsletterForm.placeholder,
-            className: "h-12 flex-1 rounded-full px-6"
-          }
-        ),
-        newsletterForm.action && /* @__PURE__ */ jsxs(
-          Pressable,
-          {
-            href: newsletterForm.action.href,
-            asButton: true,
-            variant: newsletterForm.action.variant,
-            className: newsletterForm.action.className,
-            children: [
-              newsletterForm.action.label,
-              newsletterForm.action.iconAfter
-            ]
-          }
-        )
-      ] }),
-      newsletterForm.helperText && (typeof newsletterForm.helperText === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-sm"), children: newsletterForm.helperText }) : newsletterForm.helperText)
-    ] });
-  }, [newsletterFormSlot, newsletterForm]);
+  const { uploadTokens, uploadProgress, isUploading, uploadFiles, removeFile, resetUpload } = useFileUpload({ onError });
+  const { form, submissionError, formMethod, resetSubmissionState } = useContactForm({
+    formFields,
+    formConfig,
+    onSubmit,
+    onSuccess: (data) => {
+      resetUpload();
+      onSuccess?.(data);
+    },
+    onError,
+    uploadTokens
+  });
+  const renderForm = useMemo(() => {
+    if (formSlot) return formSlot;
+    const defaultButtonAction = {
+      label: "Subscribe",
+      variant: "default",
+      className: "h-12"
+    };
+    const action = buttonAction || defaultButtonAction;
+    return /* @__PURE__ */ jsxs(
+      Form,
+      {
+        form,
+        notificationConfig: {
+          submissionError,
+          successMessage
+        },
+        formConfig: {
+          endpoint: formConfig?.endpoint,
+          method: formMethod,
+          submissionConfig: formConfig?.submissionConfig
+        },
+        onNewSubmission: () => {
+          resetUpload();
+          resetSubmissionState();
+        },
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 sm:flex-row", children: [
+            formFields.map((field) => /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(
+              DynamicFormField,
+              {
+                field,
+                uploadProgress,
+                onFileUpload: uploadFiles,
+                onFileRemove: removeFile,
+                isUploading
+              }
+            ) }, field.name)),
+            /* @__PURE__ */ jsxs(
+              Pressable,
+              {
+                onClick: form.handleSubmit,
+                asButton: true,
+                variant: action.variant,
+                className: cn("h-12", action.className),
+                disabled: form.isSubmitting,
+                children: [
+                  action.label,
+                  action.iconAfter
+                ]
+              }
+            )
+          ] }),
+          helperText && (typeof helperText === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-sm mt-2"), children: helperText }) : helperText)
+        ]
+      }
+    );
+  }, [formSlot, formFields, form, formConfig, formMethod, buttonAction, uploadProgress, uploadFiles, removeFile, isUploading, submissionError, successMessage, helperText, resetUpload, resetSubmissionState]);
   const renderImage = useMemo(() => {
     if (imageSlot) return imageSlot;
     if (!image) return null;
@@ -933,7 +975,7 @@ function HeroSplitImageNewsletter({
                   children: description
                 }
               ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
-              renderNewsletterForm
+              renderForm
             ]
           }
         ),

package/dist/hero-startup-launch-cta.cjs

@@ -1008,7 +1008,7 @@ function HeroStartupLaunchCta({
             "h1",
             {
               className: cn(
-                "mb-8 text-4xl font-normal text-balance md:text-7xl",
+                "text-4xl font-normal text-balance md:text-7xl",
                 headingClassName
               ),
               children: heading
@@ -1018,7 +1018,7 @@ function HeroStartupLaunchCta({
             "p",
             {
               className: cn(
-                "mb-12 max-w-full md:max-w-[70%] text-lg md:text-xl font-normal text-balance",
+                "max-w-full md:max-w-[70%] text-lg md:text-xl font-normal text-balance",
                 descriptionClassName
               ),
               children: description

package/dist/hero-startup-launch-cta.js

@@ -987,7 +987,7 @@ function HeroStartupLaunchCta({
             "h1",
             {
               className: cn(
-                "mb-8 text-4xl font-normal text-balance md:text-7xl",
+                "text-4xl font-normal text-balance md:text-7xl",
                 headingClassName
               ),
               children: heading
@@ -997,7 +997,7 @@ function HeroStartupLaunchCta({
             "p",
             {
               className: cn(
-                "mb-12 max-w-full md:max-w-[70%] text-lg md:text-xl font-normal text-balance",
+                "max-w-full md:max-w-[70%] text-lg md:text-xl font-normal text-balance",
                 descriptionClassName
               ),
               children: description