@opensite/ui 2.1.9 → 2.2.1

package/dist/contact-image.d.cts

@@ -1,57 +1,113 @@
 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-Bz_A5vLU.cjs';
-import { A as ActionConfig } from './blocks-Cohq4eio.cjs';
+import { 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';
 
+/**
+ * Configuration for a contact overlay item displayed over the image.
+ */
+interface ContactOverlayItem {
+    /**
+     * Icon name for DynamicIcon (e.g., "lucide/phone")
+     */
+    icon: string;
+    /**
+     * Eyebrow label above the title (e.g., "PHONE", "EMAIL")
+     */
+    label: string;
+    /**
+     * Main title text (e.g., phone number, email address)
+     */
+    title: string;
+    /**
+     * Optional description text
+     */
+    description?: string;
+    /**
+     * Optional link URL (e.g., "tel:+15551234567", "mailto:support@example.com")
+     */
+    href?: string;
+    /**
+     * Additional CSS classes for the item container
+     */
+    className?: string;
+}
 interface ContactImageProps {
-    /** Main heading text */
+    /**
+     * Eyebrow label above the heading
+     */
+    eyebrow?: React.ReactNode;
+    /**
+     * Main heading text
+     */
     heading?: React.ReactNode;
-    /** Description text below heading */
+    /**
+     * Description text below heading
+     */
     description?: React.ReactNode;
-    /** Submit button text */
+    /**
+     * Submit button text
+     */
     buttonText?: string;
-    /** Icon to display in submit button */
+    /**
+     * 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
+     * Image configuration for the left panel
+     */
+    image?: {
+        src: string;
+        alt: string;
+    };
+    /**
+     * Contact overlay items displayed over the image
+     */
+    contactOverlays?: ContactOverlayItem[];
+    /**
+     * Custom slot for rendering contact overlays (overrides contactOverlays array)
      */
-    formFields?: FormFieldConfig[];
+    contactOverlaysSlot?: React.ReactNode;
     /**
-     * Success message to display after form submission
-     * @default "Thank you! Your message has been sent successfully."
+     * Full form engine setup and props
+     */
+    formEngineSetup?: FormEngineProps;
+    /**
+     * Additional CSS classes for the section
      */
-    successMessage?: React.ReactNode;
-    /** Additional CSS classes for the section */
     className?: string;
-    /** Additional CSS classes for the container */
+    /**
+     * Additional CSS classes for the container
+     */
     containerClassName?: string;
-    /** Additional CSS classes for the header */
-    headerClassName?: string;
-    /** Additional CSS classes for the heading */
+    /**
+     * Additional CSS classes for the content grid
+     */
+    contentClassName?: string;
+    /**
+     * Additional CSS classes for the eyebrow text
+     */
+    eyebrowClassName?: string;
+    /**
+     * 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 */
-    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;
+    /**
+     * Additional CSS classes for the image
+     */
+    imageClassName?: string;
+    /**
+     * Additional CSS classes for the contact overlays container
+     */
+    contactOverlaysClassName?: string;
     /**
      * Background style for the section
      */
@@ -68,41 +124,30 @@ interface ContactImageProps {
      * 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;
-    /**
-     * Additional CSS classes for the content container
-     */
-    contentClassName?: string;
-    /**
-     * Background image URL
-     */
-    backgroundImage?: string;
     /**
      * Optional Optix Flow configuration for image optimization
      */
-    optixFlowConfig?: {
-        apiKey: string;
-        compression?: number;
-    };
+    optixFlowConfig?: OptixFlowConfig;
 }
 /**
- * ContactImage - Contact form with flexible field configuration
+ * ContactImage - Split-layout contact form with image panel and overlay contact items.
+ * Features a large image on the left with contact info overlays and form on the right.
  *
  * @example
  * ```tsx
  * <ContactImage
- *   heading="Get in Touch"
- *   formConfig={{ endpoint: "/api/contact", format: "json" }}
+ *   eyebrow="Get in Touch"
+ *   heading="Contact Us"
+ *   description="We'd love to hear from you."
+ *   image={{ src: "/office.jpg", alt: "Our office" }}
+ *   contactOverlays={[
+ *     { icon: "lucide/phone", label: "Phone", title: "+1 (555) 987-6543" },
+ *     { icon: "lucide/mail", label: "Email", title: "support@example.com" },
+ *   ]}
+ *   formEngineSetup={{ formConfig: { endpoint: "/api/contact", format: "json" } }}
  * />
  * ```
  */
-declare function ContactImage({ heading, description, buttonText, buttonIcon, actions, actionsSlot, formFields, successMessage, headingClassName, descriptionClassName, cardClassName, cardContentClassName, formClassName, submitClassName, successMessageClassName, errorMessageClassName, backgroundImage, background, optixFlowConfig, spacing, className, containerClassName, contentClassName, pattern, patternOpacity, formConfig, onSubmit, onSuccess, onError, }: ContactImageProps): React.JSX.Element;
+declare function ContactImage({ eyebrow, heading, description, buttonText, buttonIcon, image, contactOverlays, contactOverlaysSlot, formEngineSetup, className, containerClassName, contentClassName, eyebrowClassName, headingClassName, descriptionClassName, imageClassName, contactOverlaysClassName, background, spacing, pattern, patternOpacity, optixFlowConfig, }: ContactImageProps): React.JSX.Element;
 
-export { ContactImage, type ContactImageProps };
+export { ContactImage, type ContactImageProps, type ContactOverlayItem };

package/dist/contact-image.d.ts

@@ -1,57 +1,113 @@
 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-Bi_ClKrO.js';
-import { A as ActionConfig } from './blocks-k17uluAz.js';
+import { 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';
 
+/**
+ * Configuration for a contact overlay item displayed over the image.
+ */
+interface ContactOverlayItem {
+    /**
+     * Icon name for DynamicIcon (e.g., "lucide/phone")
+     */
+    icon: string;
+    /**
+     * Eyebrow label above the title (e.g., "PHONE", "EMAIL")
+     */
+    label: string;
+    /**
+     * Main title text (e.g., phone number, email address)
+     */
+    title: string;
+    /**
+     * Optional description text
+     */
+    description?: string;
+    /**
+     * Optional link URL (e.g., "tel:+15551234567", "mailto:support@example.com")
+     */
+    href?: string;
+    /**
+     * Additional CSS classes for the item container
+     */
+    className?: string;
+}
 interface ContactImageProps {
-    /** Main heading text */
+    /**
+     * Eyebrow label above the heading
+     */
+    eyebrow?: React.ReactNode;
+    /**
+     * Main heading text
+     */
     heading?: React.ReactNode;
-    /** Description text below heading */
+    /**
+     * Description text below heading
+     */
     description?: React.ReactNode;
-    /** Submit button text */
+    /**
+     * Submit button text
+     */
     buttonText?: string;
-    /** Icon to display in submit button */
+    /**
+     * 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
+     * Image configuration for the left panel
+     */
+    image?: {
+        src: string;
+        alt: string;
+    };
+    /**
+     * Contact overlay items displayed over the image
+     */
+    contactOverlays?: ContactOverlayItem[];
+    /**
+     * Custom slot for rendering contact overlays (overrides contactOverlays array)
      */
-    formFields?: FormFieldConfig[];
+    contactOverlaysSlot?: React.ReactNode;
     /**
-     * Success message to display after form submission
-     * @default "Thank you! Your message has been sent successfully."
+     * Full form engine setup and props
+     */
+    formEngineSetup?: FormEngineProps;
+    /**
+     * Additional CSS classes for the section
      */
-    successMessage?: React.ReactNode;
-    /** Additional CSS classes for the section */
     className?: string;
-    /** Additional CSS classes for the container */
+    /**
+     * Additional CSS classes for the container
+     */
     containerClassName?: string;
-    /** Additional CSS classes for the header */
-    headerClassName?: string;
-    /** Additional CSS classes for the heading */
+    /**
+     * Additional CSS classes for the content grid
+     */
+    contentClassName?: string;
+    /**
+     * Additional CSS classes for the eyebrow text
+     */
+    eyebrowClassName?: string;
+    /**
+     * 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 */
-    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;
+    /**
+     * Additional CSS classes for the image
+     */
+    imageClassName?: string;
+    /**
+     * Additional CSS classes for the contact overlays container
+     */
+    contactOverlaysClassName?: string;
     /**
      * Background style for the section
      */
@@ -68,41 +124,30 @@ interface ContactImageProps {
      * 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;
-    /**
-     * Additional CSS classes for the content container
-     */
-    contentClassName?: string;
-    /**
-     * Background image URL
-     */
-    backgroundImage?: string;
     /**
      * Optional Optix Flow configuration for image optimization
      */
-    optixFlowConfig?: {
-        apiKey: string;
-        compression?: number;
-    };
+    optixFlowConfig?: OptixFlowConfig;
 }
 /**
- * ContactImage - Contact form with flexible field configuration
+ * ContactImage - Split-layout contact form with image panel and overlay contact items.
+ * Features a large image on the left with contact info overlays and form on the right.
  *
  * @example
  * ```tsx
  * <ContactImage
- *   heading="Get in Touch"
- *   formConfig={{ endpoint: "/api/contact", format: "json" }}
+ *   eyebrow="Get in Touch"
+ *   heading="Contact Us"
+ *   description="We'd love to hear from you."
+ *   image={{ src: "/office.jpg", alt: "Our office" }}
+ *   contactOverlays={[
+ *     { icon: "lucide/phone", label: "Phone", title: "+1 (555) 987-6543" },
+ *     { icon: "lucide/mail", label: "Email", title: "support@example.com" },
+ *   ]}
+ *   formEngineSetup={{ formConfig: { endpoint: "/api/contact", format: "json" } }}
  * />
  * ```
  */
-declare function ContactImage({ heading, description, buttonText, buttonIcon, actions, actionsSlot, formFields, successMessage, headingClassName, descriptionClassName, cardClassName, cardContentClassName, formClassName, submitClassName, successMessageClassName, errorMessageClassName, backgroundImage, background, optixFlowConfig, spacing, className, containerClassName, contentClassName, pattern, patternOpacity, formConfig, onSubmit, onSuccess, onError, }: ContactImageProps): React.JSX.Element;
+declare function ContactImage({ eyebrow, heading, description, buttonText, buttonIcon, image, contactOverlays, contactOverlaysSlot, formEngineSetup, className, containerClassName, contentClassName, eyebrowClassName, headingClassName, descriptionClassName, imageClassName, contactOverlaysClassName, background, spacing, pattern, patternOpacity, optixFlowConfig, }: ContactImageProps): React.JSX.Element;
 
-export { ContactImage, type ContactImageProps };
+export { ContactImage, type ContactImageProps, type ContactOverlayItem };