@opensite/ui 2.1.8 → 2.2.1

package/dist/contact-dark-VpMwwNkH.d.cts

@@ -0,0 +1,152 @@
+import * as React from 'react';
+import { FormEngineProps } from '@page-speed/forms/integration';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bz_A5vLU.cjs';
+
+interface ContactDarkOption {
+    /**
+     * Icon name for the contact option
+     */
+    icon: string;
+    /**
+     * Contact information text
+     */
+    info: string;
+    /**
+     * Optional href for the contact option
+     */
+    href?: string;
+}
+interface ContactDarkSocialLink {
+    /**
+     * Icon name for the social platform
+     */
+    icon: string;
+    /**
+     * Link href
+     */
+    href: string;
+    /**
+     * Accessible label for the link
+     */
+    label: string;
+}
+interface ContactDarkProps {
+    /**
+     * Main heading content
+     */
+    heading?: React.ReactNode;
+    /**
+     * Description text below the heading
+     */
+    description?: React.ReactNode;
+    /**
+     * Contact information heading
+     */
+    contactHeading?: React.ReactNode;
+    /**
+     * Contact information description
+     */
+    contactDescription?: React.ReactNode;
+    /**
+     * Submit button text
+     */
+    buttonText?: string;
+    /**
+     * Submit button icon (displayed before text)
+     */
+    buttonIcon?: React.ReactNode;
+    /**
+     * Contact options to display
+     */
+    contactOptions?: ContactDarkOption[];
+    /**
+     * Custom slot for rendering contact options (overrides contactOptions array)
+     */
+    contactOptionsSlot?: React.ReactNode;
+    /**
+     * Social media links to display
+     */
+    socialLinks?: ContactDarkSocialLink[];
+    /**
+     * Custom slot for rendering social links (overrides socialLinks array)
+     */
+    socialLinksSlot?: React.ReactNode;
+    /**
+     * Full form engine setup and props
+     */
+    formEngineSetup?: FormEngineProps;
+    /**
+     * Additional CSS classes for the section
+     */
+    className?: string;
+    /**
+     * Additional CSS classes for the container
+     */
+    containerClassName?: string;
+    /**
+     * Additional CSS classes for the header wrapper
+     */
+    headerClassName?: string;
+    /**
+     * Additional CSS classes for the heading
+     */
+    headingClassName?: string;
+    /**
+     * Additional CSS classes for the description
+     */
+    descriptionClassName?: string;
+    /**
+     * Additional CSS classes for the card
+     */
+    cardClassName?: string;
+    /**
+     * Additional CSS classes for the form panel
+     */
+    formPanelClassName?: string;
+    /**
+     * Additional CSS classes for the info panel
+     */
+    infoPanelClassName?: string;
+    /**
+     * Additional CSS classes for the contact options container
+     */
+    contactOptionsClassName?: string;
+    /**
+     * Additional CSS classes for the social links container
+     */
+    socialLinksClassName?: string;
+    /**
+     * Background style for the section
+     */
+    background?: SectionBackground;
+    /**
+     * Vertical spacing for the section
+     */
+    spacing?: SectionSpacing;
+    /**
+     * Optional background pattern name or URL
+     */
+    pattern?: PatternName | undefined;
+    /**
+     * Pattern overlay opacity (0-1)
+     */
+    patternOpacity?: number;
+}
+/**
+ * ContactDark - A dark-themed contact form with split layout featuring a form
+ * on one side and contact information with social links on a dark background.
+ * Perfect for modern, high-contrast designs.
+ *
+ * @example
+ * ```tsx
+ * <ContactDark
+ *   heading="Contact Us"
+ *   description="Any questions or remarks? Just write us a message!"
+ *   buttonText="Send Message"
+ *   formEngineSetup={{ formConfig: { endpoint: "/api/contact", format: "json" } }}
+ * />
+ * ```
+ */
+declare function ContactDark({ heading, description, contactHeading, contactDescription, buttonText, buttonIcon, contactOptions, contactOptionsSlot, socialLinks, socialLinksSlot, formEngineSetup, className, headerClassName, headingClassName, descriptionClassName, cardClassName, formPanelClassName, infoPanelClassName, contactOptionsClassName, socialLinksClassName, background, spacing, containerClassName, pattern, patternOpacity, }: ContactDarkProps): React.JSX.Element;
+
+export { type ContactDarkSocialLink as C, ContactDark as a, type ContactDarkProps as b };

package/dist/contact-dark-tweUQnN1.d.ts

@@ -0,0 +1,152 @@
+import * as React from 'react';
+import { FormEngineProps } from '@page-speed/forms/integration';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bi_ClKrO.js';
+
+interface ContactDarkOption {
+    /**
+     * Icon name for the contact option
+     */
+    icon: string;
+    /**
+     * Contact information text
+     */
+    info: string;
+    /**
+     * Optional href for the contact option
+     */
+    href?: string;
+}
+interface ContactDarkSocialLink {
+    /**
+     * Icon name for the social platform
+     */
+    icon: string;
+    /**
+     * Link href
+     */
+    href: string;
+    /**
+     * Accessible label for the link
+     */
+    label: string;
+}
+interface ContactDarkProps {
+    /**
+     * Main heading content
+     */
+    heading?: React.ReactNode;
+    /**
+     * Description text below the heading
+     */
+    description?: React.ReactNode;
+    /**
+     * Contact information heading
+     */
+    contactHeading?: React.ReactNode;
+    /**
+     * Contact information description
+     */
+    contactDescription?: React.ReactNode;
+    /**
+     * Submit button text
+     */
+    buttonText?: string;
+    /**
+     * Submit button icon (displayed before text)
+     */
+    buttonIcon?: React.ReactNode;
+    /**
+     * Contact options to display
+     */
+    contactOptions?: ContactDarkOption[];
+    /**
+     * Custom slot for rendering contact options (overrides contactOptions array)
+     */
+    contactOptionsSlot?: React.ReactNode;
+    /**
+     * Social media links to display
+     */
+    socialLinks?: ContactDarkSocialLink[];
+    /**
+     * Custom slot for rendering social links (overrides socialLinks array)
+     */
+    socialLinksSlot?: React.ReactNode;
+    /**
+     * Full form engine setup and props
+     */
+    formEngineSetup?: FormEngineProps;
+    /**
+     * Additional CSS classes for the section
+     */
+    className?: string;
+    /**
+     * Additional CSS classes for the container
+     */
+    containerClassName?: string;
+    /**
+     * Additional CSS classes for the header wrapper
+     */
+    headerClassName?: string;
+    /**
+     * Additional CSS classes for the heading
+     */
+    headingClassName?: string;
+    /**
+     * Additional CSS classes for the description
+     */
+    descriptionClassName?: string;
+    /**
+     * Additional CSS classes for the card
+     */
+    cardClassName?: string;
+    /**
+     * Additional CSS classes for the form panel
+     */
+    formPanelClassName?: string;
+    /**
+     * Additional CSS classes for the info panel
+     */
+    infoPanelClassName?: string;
+    /**
+     * Additional CSS classes for the contact options container
+     */
+    contactOptionsClassName?: string;
+    /**
+     * Additional CSS classes for the social links container
+     */
+    socialLinksClassName?: string;
+    /**
+     * Background style for the section
+     */
+    background?: SectionBackground;
+    /**
+     * Vertical spacing for the section
+     */
+    spacing?: SectionSpacing;
+    /**
+     * Optional background pattern name or URL
+     */
+    pattern?: PatternName | undefined;
+    /**
+     * Pattern overlay opacity (0-1)
+     */
+    patternOpacity?: number;
+}
+/**
+ * ContactDark - A dark-themed contact form with split layout featuring a form
+ * on one side and contact information with social links on a dark background.
+ * Perfect for modern, high-contrast designs.
+ *
+ * @example
+ * ```tsx
+ * <ContactDark
+ *   heading="Contact Us"
+ *   description="Any questions or remarks? Just write us a message!"
+ *   buttonText="Send Message"
+ *   formEngineSetup={{ formConfig: { endpoint: "/api/contact", format: "json" } }}
+ * />
+ * ```
+ */
+declare function ContactDark({ heading, description, contactHeading, contactDescription, buttonText, buttonIcon, contactOptions, contactOptionsSlot, socialLinks, socialLinksSlot, formEngineSetup, className, headerClassName, headingClassName, descriptionClassName, cardClassName, formPanelClassName, infoPanelClassName, contactOptionsClassName, socialLinksClassName, background, spacing, containerClassName, pattern, patternOpacity, }: ContactDarkProps): React.JSX.Element;
+
+export { type ContactDarkSocialLink as C, ContactDark as a, type ContactDarkProps as b };

package/dist/contact-dark.cjs

@@ -2,7 +2,6 @@
 'use strict';
 
 var React = require('react');
-var forms = require('@page-speed/forms');
 var integration = require('@page-speed/forms/integration');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
@@ -844,6 +843,12 @@ var Section = React__namespace.default.forwardRef(
   }
 );
 Section.displayName = "Section";
+var DEFAULT_STYLE_RULES = {
+  formContainer: "",
+  fieldsContainer: "",
+  fieldClassName: "",
+  formClassName: "space-y-6"
+};
 var DEFAULT_FORM_FIELDS = [
   {
     name: "firstName",
@@ -886,87 +891,42 @@ function ContactDark({
   contactDescription = "Fill up the form and our team will get back to you within 24 hours.",
   buttonText = "Submit",
   buttonIcon,
-  actions,
-  actionsSlot,
   contactOptions,
   contactOptionsSlot,
   socialLinks,
   socialLinksSlot,
-  formFields = DEFAULT_FORM_FIELDS,
-  successMessage = "Thank you! Your message has been sent successfully.",
+  formEngineSetup,
   className,
   headerClassName,
   headingClassName,
   descriptionClassName,
   cardClassName,
   formPanelClassName,
-  formClassName,
-  submitClassName,
   infoPanelClassName,
   contactOptionsClassName,
   socialLinksClassName,
-  successMessageClassName,
-  errorMessageClassName,
   background,
   spacing = "py-8 md:py-32",
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   pattern,
-  patternOpacity,
-  formConfig,
-  onSubmit,
-  onSuccess,
-  onError
+  patternOpacity
 }) {
-  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,
-    resetOnSuccess: formConfig?.resetOnSuccess !== false,
-    uploadTokens
-  });
-  const actionsContent = React__namespace.useMemo(() => {
-    if (actionsSlot) return actionsSlot;
-    if (actions && actions.length > 0) {
-      return actions.map((action, index) => {
-        const {
-          label,
-          icon,
-          iconAfter,
-          children,
-          className: actionClassName,
-          ...pressableProps
-        } = action;
-        return /* @__PURE__ */ jsxRuntime.jsx(
-          Pressable,
-          {
-            asButton: true,
-            className: actionClassName,
-            ...pressableProps,
-            children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-              icon,
-              label,
-              iconAfter
-            ] })
-          },
-          index
-        );
-      });
+  const formStyleRules = React__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 = React__namespace.useMemo(() => {
+    if (formEngineSetup?.fields && formEngineSetup.fields.length > 0) {
+      return formEngineSetup.fields;
     }
-    return null;
-  }, [actionsSlot, actions]);
+    return DEFAULT_FORM_FIELDS;
+  }, [formEngineSetup?.fields]);
   const contactOptionsContent = React__namespace.useMemo(() => {
     if (contactOptionsSlot) return contactOptionsSlot;
     if (contactOptions && contactOptions.length > 0) {
@@ -1021,124 +981,102 @@ function ContactDark({
       patternOpacity,
       className,
       containerClassName,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-10 text-center", headerClassName), children: [
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-            "h2",
-            {
-              className: cn(
-                "mb-3 text-3xl font-bold tracking-tight text-balance",
-                headingClassName
-              ),
-              children: heading
-            }
-          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-            "p",
-            {
-              className: cn(
-                "leading-relaxed text-balance",
-                descriptionClassName
-              ),
-              children: description
-            }
-          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          Card,
-          {
-            className: cn(
-              "grid gap-0 overflow-hidden grid-cols-1 lg:grid-cols-2 pt-0 pb-0",
-              cardClassName
-            ),
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("p-6 lg:p-12", formPanelClassName), children: /* @__PURE__ */ jsxRuntime.jsxs(
-                forms.Form,
-                {
-                  form,
-                  notificationConfig: {
-                    submissionError,
-                    successMessage
-                  },
-                  styleConfig: {
-                    formClassName: cn("space-y-6", formClassName),
-                    successMessageClassName,
-                    errorMessageClassName
-                  },
-                  formConfig: {
-                    endpoint: formConfig?.endpoint,
-                    method: formMethod,
-                    submissionConfig: formConfig?.submissionConfig
-                  },
-                  onNewSubmission: () => {
-                    resetUpload();
-                    resetSubmissionState();
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs(
+        Card,
+        {
+          className: cn(
+            "grid gap-0 overflow-hidden grid-cols-1 lg:grid-cols-2 pt-0 pb-0",
+            cardClassName
+          ),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("p-6 lg:p-12", formPanelClassName), children: formEngineSetup ? /* @__PURE__ */ jsxRuntime.jsx(
+              integration.FormEngine,
+              {
+                ...formEngineSetup,
+                formLayoutSettings: {
+                  ...formEngineSetup.formLayoutSettings,
+                  formLayout: "standard",
+                  submitButtonSetup: {
+                    ...formEngineSetup.formLayoutSettings?.submitButtonSetup,
+                    submitLabel: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                      buttonIcon,
+                      buttonText
+                    ] })
                   },
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-12 gap-6", children: formFields.map((field) => /* @__PURE__ */ jsxRuntime.jsx(
-                      "div",
-                      {
-                        className: integration.getColumnSpanClass(field.columnSpan),
-                        children: /* @__PURE__ */ jsxRuntime.jsx(
-                          integration.DynamicFormField,
+                  styleRules: formStyleRules
+                },
+                fields: formFields
+              }
+            ) : null }),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: cn(
+                  "flex flex-col justify-between bg-primary p-6 text-primary-foreground lg:p-8",
+                  infoPanelClassName
+                ),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs(
+                    "div",
+                    {
+                      className: cn(
+                        "pb-6 md:pb-8 border-b-2 border-border/50 mb-6 md:mb-8 text-left",
+                        headerClassName
+                      ),
+                      children: [
+                        heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                          "h2",
                           {
-                            field,
-                            uploadProgress,
-                            onFileUpload: uploadFiles,
-                            onFileRemove: removeFile,
-                            isUploading
+                            className: cn(
+                              "text-3xl font-bold tracking-tight text-pretty md:text-5xl",
+                              headingClassName
+                            ),
+                            children: heading
                           }
-                        )
-                      },
-                      field.name
-                    )) }),
-                    actionsSlot || actions && actions.length > 0 ? actionsContent : /* @__PURE__ */ jsxRuntime.jsxs(
-                      Pressable,
-                      {
-                        componentType: "button",
-                        type: "submit",
-                        className: cn("w-full", submitClassName),
-                        asButton: true,
-                        disabled: form.isSubmitting,
-                        children: [
-                          buttonIcon,
-                          buttonText
-                        ]
-                      }
-                    )
-                  ]
-                }
-              ) }),
-              /* @__PURE__ */ jsxRuntime.jsxs(
-                "div",
-                {
-                  className: cn(
-                    "flex flex-col justify-between bg-primary p-6 text-primary-foreground lg:p-8",
-                    infoPanelClassName
-                  ),
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                      contactHeading && (typeof contactHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-3 text-xl font-semibold", children: contactHeading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-3", children: contactHeading })),
-                      contactDescription && (typeof contactDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-8 text-sm text-primary-foreground/80", children: contactDescription }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-8", children: contactDescription })),
-                      /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("space-y-4", contactOptionsClassName), children: contactOptionsContent })
-                    ] }),
+                        ) : heading),
+                        description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                          "p",
+                          {
+                            className: cn(
+                              "leading-relaxed text-balance",
+                              descriptionClassName
+                            ),
+                            children: description
+                          }
+                        ) : description)
+                      ]
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-start gap-4", children: [
+                    contactHeading && (typeof contactHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-xl font-semibold", children: contactHeading }) : contactHeading),
+                    contactDescription && (typeof contactDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-primary-foreground/80", children: contactDescription }) : contactDescription),
                     /* @__PURE__ */ jsxRuntime.jsx(
                       "div",
                       {
                         className: cn(
-                          "mt-8 flex items-center gap-4",
-                          socialLinksClassName
+                          "pt-6 md:pt-8 space-y-4",
+                          contactOptionsClassName
                         ),
-                        children: socialLinksContent
+                        children: contactOptionsContent
                       }
                     )
-                  ]
-                }
-              )
-            ]
-          }
-        )
-      ] })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "mt-8 flex items-center gap-4",
+                        socialLinksClassName
+                      ),
+                      children: socialLinksContent
+                    }
+                  )
+                ]
+              }
+            )
+          ]
+        }
+      ) })
     }
   );
 }