@opensite/ui 2.4.9 → 2.5.0

package/dist/cta-accent-background.cjs

@@ -759,7 +759,8 @@ var spacingStyles = {
   sm: "py-12 md:py-16",
   md: "py-16 md:py-24",
   lg: "py-20 md:py-32",
-  xl: "py-24 md:py-40"
+  xl: "py-24 md:py-40",
+  hero: "pt-32 pb-12 md:pt-40 md:pb-40"
 };
 var predefinedSpacings = ["none", "sm", "md", "lg", "xl"];
 var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);

package/dist/cta-accent-background.d.cts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-DcLp6ycJ.cjs';
-import { A as ActionConfig } from './blocks-C1EhIN1e.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-B658AD6n.cjs';
+import { A as ActionConfig } from './blocks-DUr75v0S.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-8mtEHxev.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 import '@opensite/hooks/usePlatformFromUrl';
 

package/dist/cta-accent-background.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-C2nDtDDs.js';
-import { A as ActionConfig } from './blocks-Y0T7PIol.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-BphRfrhZ.js';
+import { A as ActionConfig } from './blocks-BzFuQGP0.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-8mtEHxev.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 import '@opensite/hooks/usePlatformFromUrl';
 

package/dist/cta-accent-background.js

@@ -738,7 +738,8 @@ var spacingStyles = {
   sm: "py-12 md:py-16",
   md: "py-16 md:py-24",
   lg: "py-20 md:py-32",
-  xl: "py-24 md:py-40"
+  xl: "py-24 md:py-40",
+  hero: "pt-32 pb-12 md:pt-40 md:pb-40"
 };
 var predefinedSpacings = ["none", "sm", "md", "lg", "xl"];
 var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);

package/dist/cta-app-download-newsletter.cjs

@@ -2,8 +2,6 @@
 'use strict';
 
 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');
@@ -33,7 +31,6 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 // components/blocks/cta/cta-app-download-newsletter.tsx
-var TextInput = inputs.TextInput;
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
@@ -769,7 +766,8 @@ var spacingStyles = {
   sm: "py-12 md:py-16",
   md: "py-16 md:py-24",
   lg: "py-20 md:py-32",
-  xl: "py-24 md:py-40"
+  xl: "py-24 md:py-40",
+  hero: "pt-32 pb-12 md:pt-40 md:pb-40"
 };
 var predefinedSpacings = ["none", "sm", "md", "lg", "xl"];
 var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
@@ -834,6 +832,22 @@ var Section = React__namespace.default.forwardRef(
   }
 );
 Section.displayName = "Section";
+var DEFAULT_STYLE_RULES = {
+  formContainer: "flex items-stretch w-full",
+  fieldsContainer: "",
+  fieldClassName: "",
+  formClassName: ""
+};
+var DEFAULT_FORM_FIELDS = [
+  {
+    name: "email",
+    type: "email",
+    label: "Email Address",
+    placeholder: "Enter your email",
+    required: true,
+    columnSpan: 12
+  }
+];
 function CtaAppDownloadNewsletter({
   appHeading,
   appDescription,
@@ -842,8 +856,6 @@ function CtaAppDownloadNewsletter({
   phoneMockupImage,
   newsletterHeading,
   newsletterDescription,
-  newsletterButtonText,
-  emailPlaceholder,
   className,
   containerClassName,
   gridClassName,
@@ -859,53 +871,45 @@ function CtaAppDownloadNewsletter({
   spacing,
   pattern,
   patternOpacity,
-  formConfig,
-  onSubmit,
-  onSuccess,
-  onError,
-  optixFlowConfig
+  optixFlowConfig,
+  formEngineSetup,
+  buttonAction,
+  formSlot
 }) {
-  const form = forms.useForm({
-    initialValues: {
-      email: ""
-    },
-    validationSchema: {
-      email: (value) => {
-        if (!value) return "Email is required";
-        if (!integration.isValidEmail(value)) return "Please enter a valid email address";
-        return void 0;
-      }
-    },
-    onSubmit: async (values, helpers) => {
-      const shouldAutoSubmit = Boolean(formConfig?.endpoint);
-      if (!shouldAutoSubmit && !onSubmit) {
-        return;
-      }
-      try {
-        let result;
-        if (shouldAutoSubmit) {
-          result = await integration.submitPageSpeedForm(values, formConfig);
-        }
-        if (onSubmit) {
-          await onSubmit(values.email);
-        }
-        if (shouldAutoSubmit || onSubmit) {
-          if (formConfig?.resetOnSuccess !== false) {
-            helpers.resetForm();
+  const renderForm = React__namespace.useMemo(() => {
+    if (formSlot) return formSlot;
+    if (!formEngineSetup) return null;
+    const defaultButtonAction = {
+      label: "",
+      variant: "default",
+      icon: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/send", size: 16 })
+    };
+    const action = buttonAction || defaultButtonAction;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      integration.FormEngine,
+      {
+        formEngineSetup: {
+          ...formEngineSetup,
+          formLayoutSettings: {
+            ...formEngineSetup.formLayoutSettings,
+            formLayout: "button-group",
+            buttonGroupSetup: {
+              ...formEngineSetup.formLayoutSettings?.buttonGroupSetup,
+              size: "default",
+              submitLabel: action.icon || action.label,
+              submitVariant: action.variant || "default"
+            }
           }
-          onSuccess?.(result);
+        },
+        defaultFields: DEFAULT_FORM_FIELDS,
+        defaultStyleRules: {
+          ...DEFAULT_STYLE_RULES,
+          formContainer: cn(DEFAULT_STYLE_RULES.formContainer, formClassName)
         }
-      } catch (error) {
-        if (error instanceof integration.PageSpeedFormSubmissionError && error.formErrors) {
-          helpers.setErrors(error.formErrors);
-        }
-        onError?.(error);
-        throw error;
       }
-    }
-  });
-  const formMethod = formConfig?.method?.toLowerCase() === "get" ? "get" : "post";
-  const appActionsContent = React.useMemo(() => {
+    );
+  }, [formSlot, formEngineSetup, buttonAction, formClassName]);
+  const appActionsContent = React__namespace.useMemo(() => {
     if (appActionsSlot) return appActionsSlot;
     if (!appActions || appActions.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -1000,43 +1004,7 @@ function CtaAppDownloadNewsletter({
                 }
               ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4", newsletterHeadingClassName), children: newsletterHeading })),
               newsletterDescription && (typeof newsletterDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-8", newsletterDescriptionClassName), children: newsletterDescription }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-8", newsletterDescriptionClassName), children: newsletterDescription })),
-              /* @__PURE__ */ jsxRuntime.jsxs(
-                forms.Form,
-                {
-                  form,
-                  action: formConfig?.endpoint,
-                  method: formMethod,
-                  className: cn("flex flex-col gap-3 sm:flex-row", formClassName),
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(forms.Field, { name: "email", className: "flex-1", children: ({ field, meta }) => /* @__PURE__ */ jsxRuntime.jsx(
-                      TextInput,
-                      {
-                        ...field,
-                        type: "email",
-                        placeholder: emailPlaceholder,
-                        error: meta.touched && !!meta.error,
-                        className: "w-full",
-                        "aria-label": emailPlaceholder || "Email address"
-                      }
-                    ) }),
-                    /* @__PURE__ */ jsxRuntime.jsxs(
-                      Pressable,
-                      {
-                        componentType: "button",
-                        type: "submit",
-                        variant: "default",
-                        className: "shrink-0",
-                        asButton: true,
-                        disabled: form.isSubmitting,
-                        children: [
-                          newsletterButtonText,
-                          /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/send", size: 16, className: "ml-2" })
-                        ]
-                      }
-                    )
-                  ]
-                }
-              )
+              renderForm
             ]
           }
         )

package/dist/cta-app-download-newsletter.d.cts

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { PageSpeedFormConfig } from '@page-speed/forms/integration';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-DcLp6ycJ.cjs';
-import { A as ActionConfig } from './blocks-C1EhIN1e.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-B658AD6n.cjs';
+import { FormEngineProps } from '@page-speed/forms/integration';
+import { A as ActionConfig } from './blocks-DUr75v0S.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-8mtEHxev.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 import '@opensite/hooks/usePlatformFromUrl';
 
@@ -37,14 +37,6 @@ interface CtaAppDownloadNewsletterProps {
      * Newsletter section description
      */
     newsletterDescription?: React.ReactNode;
-    /**
-     * Newsletter button text
-     */
-    newsletterButtonText?: string;
-    /**
-     * Email input placeholder
-     */
-    emailPlaceholder?: string;
     /**
      * Additional CSS classes for the section
      */
@@ -105,60 +97,6 @@ interface CtaAppDownloadNewsletterProps {
      * Pattern overlay opacity (0-1)
      */
     patternOpacity?: number;
-    /**
-     * Optional form submission configuration.
-     *
-     * **Universal Usage**: Works with ANY REST API endpoint. Simply provide an `endpoint` URL
-     * and the form will submit to it in JSON format.
-     *
-     * @example
-     * // Works with any API
-     * formConfig={{ endpoint: "https://api.mysite.com/subscribe", format: "json" }}
-     *
-     * @example
-     * // With custom headers (e.g., authentication)
-     * formConfig={{
-     *   endpoint: "/api/newsletter",
-     *   headers: { "Authorization": "Bearer token123" }
-     * }}
-     *
-     * **Note**: The `apiKey`, `contactCategoryToken`, and other platform-specific fields
-     * are OPTIONAL and only needed when integrating with DashTrack's Rails backend.
-     * For generic REST APIs, just use `endpoint`, `method`, `format`, and `headers`.
-     *
-     * See `FORMS_INTEGRATION_GUIDE.md` for complete examples with Next.js, React, and more.
-     */
-    formConfig?: PageSpeedFormConfig;
-    /**
-     * Optional custom submission handler for maximum flexibility.
-     *
-     * Use this when you need complete control over the submission logic,
-     * such as custom API calls, analytics tracking, or multi-step workflows.
-     *
-     * Can be used alone or in combination with `formConfig` for hybrid approaches.
-     *
-     * @example
-     * onSubmit={async (email) => {
-     *   await fetch("/api/subscribe", {
-     *     method: "POST",
-     *     body: JSON.stringify({ email, source: "homepage" })
-     *   });
-     * }}
-     */
-    onSubmit?: (email: string) => void | Promise<void>;
-    /**
-     * Optional success callback invoked after successful submission.
-     *
-     * Called after `formConfig` submission and/or `onSubmit` completes successfully.
-     * Use for showing success messages, redirecting, analytics tracking, etc.
-     */
-    onSuccess?: (data: unknown) => void;
-    /**
-     * Optional error callback invoked if submission fails.
-     *
-     * Receives the error object for custom error handling, logging, or user notifications.
-     */
-    onError?: (error: Error) => void;
     /**
      * Optional Optix Flow configuration for image optimization
      */
@@ -166,12 +104,27 @@ interface CtaAppDownloadNewsletterProps {
         apiKey: string;
         compression?: number;
     };
+    /**
+     * Full form engine setup and props
+     */
+    formEngineSetup?: FormEngineProps;
+    /**
+     * Submit button configuration
+     */
+    buttonAction?: ActionConfig;
+    /**
+     * Custom slot for the form (overrides form props)
+     */
+    formSlot?: React.ReactNode;
 }
 /**
  * CtaAppDownloadNewsletter - A two-column CTA grid featuring an app download
  * section with phone mockup and a newsletter subscription form. Perfect for
  * mobile app promotions.
  *
+ * The newsletter form is powered by `FormEngine` from `@page-speed/forms/integration`,
+ * which handles validation, submission, error handling, and success states.
+ *
  * @example
  * ```tsx
  * <CtaAppDownloadNewsletter
@@ -183,9 +136,12 @@ interface CtaAppDownloadNewsletterProps {
  *   ]}
  *   newsletterHeading="Stay Updated"
  *   newsletterDescription="Subscribe to our newsletter."
+ *   formEngineSetup={{
+ *     formConfig: { endpoint: "/api/subscribe", format: "json" },
+ *   }}
  * />
  * ```
  */
-declare function CtaAppDownloadNewsletter({ appHeading, appDescription, appActions, appActionsSlot, phoneMockupImage, newsletterHeading, newsletterDescription, newsletterButtonText, emailPlaceholder, className, containerClassName, gridClassName, appCardClassName, appHeadingClassName, appDescriptionClassName, appActionsClassName, newsletterCardClassName, newsletterHeadingClassName, newsletterDescriptionClassName, formClassName, background, spacing, pattern, patternOpacity, formConfig, onSubmit, onSuccess, onError, optixFlowConfig, }: CtaAppDownloadNewsletterProps): React.JSX.Element;
+declare function CtaAppDownloadNewsletter({ appHeading, appDescription, appActions, appActionsSlot, phoneMockupImage, newsletterHeading, newsletterDescription, className, containerClassName, gridClassName, appCardClassName, appHeadingClassName, appDescriptionClassName, appActionsClassName, newsletterCardClassName, newsletterHeadingClassName, newsletterDescriptionClassName, formClassName, background, spacing, pattern, patternOpacity, optixFlowConfig, formEngineSetup, buttonAction, formSlot, }: CtaAppDownloadNewsletterProps): React.JSX.Element;
 
 export { CtaAppDownloadNewsletter, type CtaAppDownloadNewsletterProps };

package/dist/cta-app-download-newsletter.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { PageSpeedFormConfig } from '@page-speed/forms/integration';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-C2nDtDDs.js';
-import { A as ActionConfig } from './blocks-Y0T7PIol.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-BphRfrhZ.js';
+import { FormEngineProps } from '@page-speed/forms/integration';
+import { A as ActionConfig } from './blocks-BzFuQGP0.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-8mtEHxev.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 import '@opensite/hooks/usePlatformFromUrl';
 
@@ -37,14 +37,6 @@ interface CtaAppDownloadNewsletterProps {
      * Newsletter section description
      */
     newsletterDescription?: React.ReactNode;
-    /**
-     * Newsletter button text
-     */
-    newsletterButtonText?: string;
-    /**
-     * Email input placeholder
-     */
-    emailPlaceholder?: string;
     /**
      * Additional CSS classes for the section
      */
@@ -105,60 +97,6 @@ interface CtaAppDownloadNewsletterProps {
      * Pattern overlay opacity (0-1)
      */
     patternOpacity?: number;
-    /**
-     * Optional form submission configuration.
-     *
-     * **Universal Usage**: Works with ANY REST API endpoint. Simply provide an `endpoint` URL
-     * and the form will submit to it in JSON format.
-     *
-     * @example
-     * // Works with any API
-     * formConfig={{ endpoint: "https://api.mysite.com/subscribe", format: "json" }}
-     *
-     * @example
-     * // With custom headers (e.g., authentication)
-     * formConfig={{
-     *   endpoint: "/api/newsletter",
-     *   headers: { "Authorization": "Bearer token123" }
-     * }}
-     *
-     * **Note**: The `apiKey`, `contactCategoryToken`, and other platform-specific fields
-     * are OPTIONAL and only needed when integrating with DashTrack's Rails backend.
-     * For generic REST APIs, just use `endpoint`, `method`, `format`, and `headers`.
-     *
-     * See `FORMS_INTEGRATION_GUIDE.md` for complete examples with Next.js, React, and more.
-     */
-    formConfig?: PageSpeedFormConfig;
-    /**
-     * Optional custom submission handler for maximum flexibility.
-     *
-     * Use this when you need complete control over the submission logic,
-     * such as custom API calls, analytics tracking, or multi-step workflows.
-     *
-     * Can be used alone or in combination with `formConfig` for hybrid approaches.
-     *
-     * @example
-     * onSubmit={async (email) => {
-     *   await fetch("/api/subscribe", {
-     *     method: "POST",
-     *     body: JSON.stringify({ email, source: "homepage" })
-     *   });
-     * }}
-     */
-    onSubmit?: (email: string) => void | Promise<void>;
-    /**
-     * Optional success callback invoked after successful submission.
-     *
-     * Called after `formConfig` submission and/or `onSubmit` completes successfully.
-     * Use for showing success messages, redirecting, analytics tracking, etc.
-     */
-    onSuccess?: (data: unknown) => void;
-    /**
-     * Optional error callback invoked if submission fails.
-     *
-     * Receives the error object for custom error handling, logging, or user notifications.
-     */
-    onError?: (error: Error) => void;
     /**
      * Optional Optix Flow configuration for image optimization
      */
@@ -166,12 +104,27 @@ interface CtaAppDownloadNewsletterProps {
         apiKey: string;
         compression?: number;
     };
+    /**
+     * Full form engine setup and props
+     */
+    formEngineSetup?: FormEngineProps;
+    /**
+     * Submit button configuration
+     */
+    buttonAction?: ActionConfig;
+    /**
+     * Custom slot for the form (overrides form props)
+     */
+    formSlot?: React.ReactNode;
 }
 /**
  * CtaAppDownloadNewsletter - A two-column CTA grid featuring an app download
  * section with phone mockup and a newsletter subscription form. Perfect for
  * mobile app promotions.
  *
+ * The newsletter form is powered by `FormEngine` from `@page-speed/forms/integration`,
+ * which handles validation, submission, error handling, and success states.
+ *
  * @example
  * ```tsx
  * <CtaAppDownloadNewsletter
@@ -183,9 +136,12 @@ interface CtaAppDownloadNewsletterProps {
  *   ]}
  *   newsletterHeading="Stay Updated"
  *   newsletterDescription="Subscribe to our newsletter."
+ *   formEngineSetup={{
+ *     formConfig: { endpoint: "/api/subscribe", format: "json" },
+ *   }}
  * />
  * ```
  */
-declare function CtaAppDownloadNewsletter({ appHeading, appDescription, appActions, appActionsSlot, phoneMockupImage, newsletterHeading, newsletterDescription, newsletterButtonText, emailPlaceholder, className, containerClassName, gridClassName, appCardClassName, appHeadingClassName, appDescriptionClassName, appActionsClassName, newsletterCardClassName, newsletterHeadingClassName, newsletterDescriptionClassName, formClassName, background, spacing, pattern, patternOpacity, formConfig, onSubmit, onSuccess, onError, optixFlowConfig, }: CtaAppDownloadNewsletterProps): React.JSX.Element;
+declare function CtaAppDownloadNewsletter({ appHeading, appDescription, appActions, appActionsSlot, phoneMockupImage, newsletterHeading, newsletterDescription, className, containerClassName, gridClassName, appCardClassName, appHeadingClassName, appDescriptionClassName, appActionsClassName, newsletterCardClassName, newsletterHeadingClassName, newsletterDescriptionClassName, formClassName, background, spacing, pattern, patternOpacity, optixFlowConfig, formEngineSetup, buttonAction, formSlot, }: CtaAppDownloadNewsletterProps): React.JSX.Element;
 
 export { CtaAppDownloadNewsletter, type CtaAppDownloadNewsletterProps };