@opensite/ui 1.9.8 → 2.0.0

package/dist/contact-demo.d.cts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { PageSpeedFormConfig } from '@page-speed/forms/integration';
+import { FormFieldConfig, PageSpeedFormConfig } from '@page-speed/forms/integration';
 import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bz_A5vLU.cjs';
 import { A as ActionConfig } from './blocks-Cohq4eio.cjs';
 import 'react/jsx-runtime';
@@ -7,78 +7,52 @@ import 'class-variance-authority';
 import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 
-interface DemoFormValues {
-    useCase: string;
-    teamSize: string;
-    timeline: string;
-    firstName: string;
-    lastName: string;
-    email: string;
-    company: string;
-    jobTitle: string;
-    updates: boolean;
-}
 interface ContactDemoProps {
-    /**
-     * Main heading content
-     */
+    /** Main heading text */
     heading?: React.ReactNode;
-    /**
-     * Description text below the heading
-     */
+    /** Description text below heading */
     description?: React.ReactNode;
-    /**
-     * Submit button text
-     */
+    /** Submit button text */
     buttonText?: string;
-    /**
-     * Submit button icon (displayed before text)
-     */
+    /** Icon to display in submit button */
     buttonIcon?: React.ReactNode;
-    /**
-     * Array of action configurations for additional buttons
-     */
+    /** Array of action configurations for custom buttons */
     actions?: ActionConfig[];
-    /**
-     * Custom slot for rendering actions (overrides actions array and default submit)
-     */
+    /** Custom slot for rendering actions (overrides actions array) */
     actionsSlot?: React.ReactNode;
     /**
-     * Additional CSS classes for the section
+     * Array of form field configurations
+     * If not provided, defaults to: first_name, last_name, email, phone, message
      */
-    className?: string;
+    formFields?: FormFieldConfig[];
     /**
-     * Additional CSS classes for the container
+     * 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 */
     containerClassName?: string;
-    /**
-     * Additional CSS classes for the header wrapper
-     */
+    /** Additional CSS classes for the header */
     headerClassName?: string;
-    /**
-     * Additional CSS classes for the heading
-     */
+    /** Additional CSS classes for the heading */
     headingClassName?: string;
-    /**
-     * Additional CSS classes for the description
-     */
+    /** Additional CSS classes for the description */
     descriptionClassName?: string;
-    /**
-     * Additional CSS classes for the card
-     */
+    /** Additional CSS classes for the card */
     cardClassName?: string;
-    /**
-     * Additional CSS classes for the card content
-     */
+    /** Additional CSS classes for the card content */
     cardContentClassName?: string;
-    /**
-     * Additional CSS classes for the form
-     */
+    /** 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;
     /**
-     * Additional CSS classes for the submit button
-     */
-    submitClassName?: string; /**
      * Background style for the section
      */
     background?: SectionBackground;
@@ -94,75 +68,26 @@ interface ContactDemoProps {
      * 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/demo", format: "json" }}
-     *
-     * @example
-     * // With custom headers (e.g., authentication)
-     * formConfig={{
-     *   endpoint: "/api/demo",
-     *   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.
-     */
+    /** Form configuration for PageSpeed forms */
     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 (values) => {
-     *   await fetch("/api/demo", {
-     *     method: "POST",
-     *     body: JSON.stringify(values)
-     *   });
-     * }}
-     */
-    onSubmit?: (values: DemoFormValues) => 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.
-     */
+    /** Custom submit handler */
+    onSubmit?: (values: Record<string, any>) => void | Promise<void>;
+    /** Success callback */
     onSuccess?: (data: unknown) => void;
-    /**
-     * Optional error callback invoked if submission fails.
-     *
-     * Receives the error object for custom error handling, logging, or user notifications.
-     */
+    /** Error callback */
     onError?: (error: Error) => void;
 }
 /**
- * ContactDemo - A demo request form with use case selection, team size,
- * and timeline information. Perfect for SaaS products and B2B services.
+ * ContactDemo - Contact form with flexible field configuration
  *
  * @example
  * ```tsx
  * <ContactDemo
  *   heading="Request a Demo"
- *   description="See how we can help your team work smarter."
- *   buttonText="Request Demo"
- *   formConfig={{ endpoint: "/api/demo", format: "json" }}
+ *   formConfig={{ endpoint: "/api/contact", format: "json" }}
  * />
  * ```
  */
-declare function ContactDemo({ heading, description, buttonText, buttonIcon, actions, actionsSlot, className, headerClassName, headingClassName, descriptionClassName, cardClassName, cardContentClassName, formClassName, submitClassName, spacing, containerClassName, background, pattern, patternOpacity, formConfig, onSubmit, onSuccess, onError, }: ContactDemoProps): React.JSX.Element;
+declare function ContactDemo({ 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, }: ContactDemoProps): React.JSX.Element;
 
 export { ContactDemo, type ContactDemoProps };

package/dist/contact-demo.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { PageSpeedFormConfig } from '@page-speed/forms/integration';
+import { FormFieldConfig, PageSpeedFormConfig } from '@page-speed/forms/integration';
 import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bi_ClKrO.js';
 import { A as ActionConfig } from './blocks-k17uluAz.js';
 import 'react/jsx-runtime';
@@ -7,78 +7,52 @@ import 'class-variance-authority';
 import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
-interface DemoFormValues {
-    useCase: string;
-    teamSize: string;
-    timeline: string;
-    firstName: string;
-    lastName: string;
-    email: string;
-    company: string;
-    jobTitle: string;
-    updates: boolean;
-}
 interface ContactDemoProps {
-    /**
-     * Main heading content
-     */
+    /** Main heading text */
     heading?: React.ReactNode;
-    /**
-     * Description text below the heading
-     */
+    /** Description text below heading */
     description?: React.ReactNode;
-    /**
-     * Submit button text
-     */
+    /** Submit button text */
     buttonText?: string;
-    /**
-     * Submit button icon (displayed before text)
-     */
+    /** Icon to display in submit button */
     buttonIcon?: React.ReactNode;
-    /**
-     * Array of action configurations for additional buttons
-     */
+    /** Array of action configurations for custom buttons */
     actions?: ActionConfig[];
-    /**
-     * Custom slot for rendering actions (overrides actions array and default submit)
-     */
+    /** Custom slot for rendering actions (overrides actions array) */
     actionsSlot?: React.ReactNode;
     /**
-     * Additional CSS classes for the section
+     * Array of form field configurations
+     * If not provided, defaults to: first_name, last_name, email, phone, message
      */
-    className?: string;
+    formFields?: FormFieldConfig[];
     /**
-     * Additional CSS classes for the container
+     * 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 */
     containerClassName?: string;
-    /**
-     * Additional CSS classes for the header wrapper
-     */
+    /** Additional CSS classes for the header */
     headerClassName?: string;
-    /**
-     * Additional CSS classes for the heading
-     */
+    /** Additional CSS classes for the heading */
     headingClassName?: string;
-    /**
-     * Additional CSS classes for the description
-     */
+    /** Additional CSS classes for the description */
     descriptionClassName?: string;
-    /**
-     * Additional CSS classes for the card
-     */
+    /** Additional CSS classes for the card */
     cardClassName?: string;
-    /**
-     * Additional CSS classes for the card content
-     */
+    /** Additional CSS classes for the card content */
     cardContentClassName?: string;
-    /**
-     * Additional CSS classes for the form
-     */
+    /** 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;
     /**
-     * Additional CSS classes for the submit button
-     */
-    submitClassName?: string; /**
      * Background style for the section
      */
     background?: SectionBackground;
@@ -94,75 +68,26 @@ interface ContactDemoProps {
      * 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/demo", format: "json" }}
-     *
-     * @example
-     * // With custom headers (e.g., authentication)
-     * formConfig={{
-     *   endpoint: "/api/demo",
-     *   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.
-     */
+    /** Form configuration for PageSpeed forms */
     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 (values) => {
-     *   await fetch("/api/demo", {
-     *     method: "POST",
-     *     body: JSON.stringify(values)
-     *   });
-     * }}
-     */
-    onSubmit?: (values: DemoFormValues) => 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.
-     */
+    /** Custom submit handler */
+    onSubmit?: (values: Record<string, any>) => void | Promise<void>;
+    /** Success callback */
     onSuccess?: (data: unknown) => void;
-    /**
-     * Optional error callback invoked if submission fails.
-     *
-     * Receives the error object for custom error handling, logging, or user notifications.
-     */
+    /** Error callback */
     onError?: (error: Error) => void;
 }
 /**
- * ContactDemo - A demo request form with use case selection, team size,
- * and timeline information. Perfect for SaaS products and B2B services.
+ * ContactDemo - Contact form with flexible field configuration
  *
  * @example
  * ```tsx
  * <ContactDemo
  *   heading="Request a Demo"
- *   description="See how we can help your team work smarter."
- *   buttonText="Request Demo"
- *   formConfig={{ endpoint: "/api/demo", format: "json" }}
+ *   formConfig={{ endpoint: "/api/contact", format: "json" }}
  * />
  * ```
  */
-declare function ContactDemo({ heading, description, buttonText, buttonIcon, actions, actionsSlot, className, headerClassName, headingClassName, descriptionClassName, cardClassName, cardContentClassName, formClassName, submitClassName, spacing, containerClassName, background, pattern, patternOpacity, formConfig, onSubmit, onSuccess, onError, }: ContactDemoProps): React.JSX.Element;
+declare function ContactDemo({ 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, }: ContactDemoProps): React.JSX.Element;
 
 export { ContactDemo, type ContactDemoProps };