@opensite/ui 2.5.0 → 2.5.2

package/dist/components.js

@@ -14,8 +14,7 @@ import * as PopoverPrimitive from '@radix-ui/react-popover';
 import { Icon } from '@page-speed/icon';
 import { usePlatformFromUrl } from '@opensite/hooks/usePlatformFromUrl';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
-import { Form } from '@page-speed/forms';
-import { useFileUpload, useContactForm, DynamicFormField, FormEngine } from '@page-speed/forms/integration';
+import { FormEngine } from '@page-speed/forms/integration';
 
 // components/ui/container.tsx
 function cn(...inputs) {
@@ -4579,12 +4578,18 @@ function FooterLinksGrid({
     }
   );
 }
+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",
+    placeholder: "Email Address",
     required: true,
     columnSpan: 12
   }
@@ -4597,7 +4602,6 @@ function FooterSocialNewsletter({
   className,
   contentClassName,
   logoWrapperClassName,
-  logoClassName,
   gridClassName,
   navSectionClassName,
   navTitleClassName,
@@ -4606,16 +4610,7 @@ function FooterSocialNewsletter({
   socialColumnClassName,
   socialLinksClassName,
   socialLinkClassName,
-  formFields = DEFAULT_FORM_FIELDS,
-  formConfig,
-  onSubmit,
-  onSuccess,
-  onError,
-  successMessage,
-  buttonAction,
-  helperText,
-  formSlot,
-  privacyClassName,
+  formEngineSetup,
   bottomClassName,
   copyrightClassName,
   background,
@@ -4625,104 +4620,36 @@ function FooterSocialNewsletter({
   patternOpacity,
   optixFlowConfig
 }) {
-  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 = React4.useMemo(() => {
-    if (formSlot) return formSlot;
-    const defaultButtonAction = {
-      label: "Subscribe",
+    if (!formEngineSetup) return null;
+    const action = {
       variant: "default",
-      className: "h-12"
+      icon: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-right", size: 16 })
     };
-    const action = buttonAction || defaultButtonAction;
-    return /* @__PURE__ */ jsxs(
-      Form,
+    return /* @__PURE__ */ jsx(
+      FormEngine,
       {
-        form,
-        fields: formFields,
-        notificationConfig: {
-          submissionError,
-          successMessage
-        },
-        formConfig: {
-          endpoint: formConfig?.endpoint,
-          method: formMethod,
-          submissionConfig: formConfig?.submissionConfig,
-          formLayout: "button-group",
-          buttonGroupSize: "sm",
-          submitLabel: action.label,
-          submitVariant: action.variant || "default",
-          submitIconComponent: action.icon || /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/send" })
-        },
-        onNewSubmission: () => {
-          resetUpload();
-          resetSubmissionState();
+        formEngineSetup: {
+          ...formEngineSetup,
+          formLayoutSettings: {
+            ...formEngineSetup.formLayoutSettings,
+            formLayout: "button-group",
+            buttonGroupSetup: {
+              ...formEngineSetup.formLayoutSettings?.buttonGroupSetup,
+              size: "default",
+              submitLabel: action.icon || action.label,
+              submitVariant: action.variant
+            }
+          }
         },
-        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)
-        ]
+        defaultFields: DEFAULT_FORM_FIELDS,
+        defaultStyleRules: {
+          ...DEFAULT_STYLE_RULES,
+          formContainer: cn(DEFAULT_STYLE_RULES.formContainer)
+        }
       }
     );
-  }, [
-    formSlot,
-    formFields,
-    form,
-    formConfig,
-    formMethod,
-    buttonAction,
-    uploadProgress,
-    uploadFiles,
-    removeFile,
-    isUploading,
-    submissionError,
-    successMessage,
-    helperText,
-    resetUpload,
-    resetSubmissionState
-  ]);
+  }, [formEngineSetup]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -4730,20 +4657,26 @@ function FooterSocialNewsletter({
       spacing,
       pattern,
       patternOpacity,
-      className: cn(className),
+      className,
       containerClassName,
       children: /* @__PURE__ */ jsx("div", { className: cn(contentClassName), children: /* @__PURE__ */ jsxs("footer", { children: [
         /* @__PURE__ */ jsxs("div", { className: "mb-20", children: [
           logo && /* @__PURE__ */ jsx(
-            FooterLogo,
+            Pressable,
             {
-              logo,
-              logoClassName: cn(
-                "flex items-center gap-2",
-                logoWrapperClassName
-              ),
-              logoImageClassName: cn("h-10", logoClassName),
-              optixFlowConfig
+              href: logo.url || "/",
+              className: cn("block mb-8 md:mb-12", logoWrapperClassName),
+              children: /* @__PURE__ */ jsx(
+                Img,
+                {
+                  src: logo.src,
+                  className: cn(
+                    "h-16 object-contain w-auto max-w-full",
+                    logo.className
+                  ),
+                  optixFlowConfig
+                }
+              )
             }
           ),
           socialLinks && socialLinks.length > 0 && /* @__PURE__ */ jsx("div", { className: cn("mt-6", socialColumnClassName), children: /* @__PURE__ */ jsx(
@@ -4756,10 +4689,9 @@ function FooterSocialNewsletter({
               children: socialLinks.map((social, idx) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
                 SocialLinkIcon,
                 {
-                  href: social.href,
-                  label: social.label,
-                  iconNameOverride: social.iconNameOverride,
-                  iconSize: 20,
+                  size: "icon-lg",
+                  variant: "ghost",
+                  ...social,
                   className: cn(
                     "opacity-80 transition-colors hover:opacity-100",
                     socialLinkClassName
@@ -6269,7 +6201,7 @@ function FooterAnimatedSocial({
     }
   );
 }
-var DEFAULT_STYLE_RULES = {
+var DEFAULT_STYLE_RULES2 = {
   formContainer: "flex w-full items-end border-b border-b-foreground/10",
   fieldsContainer: "",
   fieldClassName: "",
@@ -6307,6 +6239,7 @@ function FooterNewsletterMinimal({
   socialLinksClassName,
   socialLinkClassName,
   newsletterSectionClassName,
+  newsletterLabelClassName,
   newsletterFormClassName,
   bottomGridClassName,
   locationClassName,
@@ -6392,9 +6325,9 @@ function FooterNewsletterMinimal({
         },
         defaultFields: DEFAULT_FORM_FIELDS2,
         defaultStyleRules: {
-          ...DEFAULT_STYLE_RULES,
+          ...DEFAULT_STYLE_RULES2,
           formContainer: cn(
-            DEFAULT_STYLE_RULES.formContainer,
+            DEFAULT_STYLE_RULES2.formContainer,
             newsletterFormClassName
           )
         }
@@ -6420,29 +6353,41 @@ function FooterNewsletterMinimal({
             ),
             children: [
               /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-10", children: [
-                heading && /* @__PURE__ */ jsx(
-                  "p",
-                  {
-                    className: cn(
-                      "relative text-4xl font-medium tracking-tight lg:text-5xl",
-                      headingClassName
-                    ),
-                    children: heading
-                  }
-                ),
-                (supportLabel || supportEmail) && /* @__PURE__ */ jsxs(
+                /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+                  heading && /* @__PURE__ */ jsx(
+                    "h2",
+                    {
+                      className: cn(
+                        "relative text-4xl font-semibold tracking-tight lg:text-5xl text-balance",
+                        headingClassName
+                      ),
+                      children: heading
+                    }
+                  ),
+                  location && /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "font-semibold text-lg opacity-75",
+                        locationClassName
+                      ),
+                      children: location
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4", children: (supportLabel || supportEmail) && /* @__PURE__ */ jsxs(
                   "div",
                   {
                     className: cn(
-                      "space-y-1 text-sm font-light tracking-tight lg:text-base",
+                      "space-y-1 text-sm tracking-tight lg:text-base",
                       supportClassName
                     ),
                     children: [
-                      supportLabel && /* @__PURE__ */ jsx("p", { children: supportLabel }),
-                      supportEmail && /* @__PURE__ */ jsx(Pressable, { href: `mailto:${supportEmail}`, children: supportEmail })
+                      supportLabel && /* @__PURE__ */ jsx("p", { className: "font-light opacity-75", children: supportLabel }),
+                      supportEmail && /* @__PURE__ */ jsx(Pressable, { className: "font-semibold", href: supportEmail, children: supportEmail })
                     ]
                   }
-                )
+                ) })
               ] }),
               /* @__PURE__ */ jsxs(
                 "div",
@@ -6460,41 +6405,35 @@ function FooterNewsletterMinimal({
             ]
           }
         ),
-        /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx(
           "div",
           {
             className: cn(
               "mt-20 flex flex-col justify-between gap-15 lg:flex-row",
               newsletterSectionClassName
             ),
-            children: [
-              formEngineSetup && /* @__PURE__ */ jsx("div", { className: "flex w-full max-w-md flex-col gap-10", children: /* @__PURE__ */ jsxs("div", { className: "space-y-1 text-sm font-light tracking-tight lg:text-base", children: [
-                newsletterLabel && /* @__PURE__ */ jsx("p", { children: newsletterLabel }),
-                renderForm
-              ] }) }),
-              /* @__PURE__ */ jsxs(
-                "div",
+            children: formEngineSetup && /* @__PURE__ */ jsx("div", { className: "flex w-full max-w-md flex-col gap-10", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+              newsletterLabel && /* @__PURE__ */ jsx(
+                "p",
                 {
                   className: cn(
-                    "grid w-full max-w-xs grid-cols-2 gap-10 text-sm font-light lg:text-base",
-                    bottomGridClassName
+                    "text-xl font-light tracking-tight",
+                    newsletterLabelClassName
                   ),
-                  children: [
-                    location && /* @__PURE__ */ jsx("div", { className: cn("w-32", locationClassName), children: location }),
-                    /* @__PURE__ */ jsx("ul", { className: cn("space-y-1", footerLinksClassName), children: footerLinksContent })
-                  ]
+                  children: newsletterLabel
                 }
-              )
-            ]
+              ),
+              renderForm
+            ] }) })
           }
         ),
         brandText && /* @__PURE__ */ jsx("div", { className: cn("mt-20 w-full lg:mt-32", brandSectionClassName), children: /* @__PURE__ */ jsx(
           motion.div,
           {
-            initial: { opacity: 0, y: 20 },
+            initial: { opacity: 0, y: 80 },
             whileInView: { opacity: 1, y: 0 },
-            viewport: { once: true },
-            transition: { duration: 0.6 },
+            viewport: { once: true, amount: 0.5 },
+            transition: { duration: 0.9, ease: [0.16, 1, 0.3, 1] },
             className: "text-center",
             children: /* @__PURE__ */ jsx(
               "span",
@@ -6512,19 +6451,51 @@ function FooterNewsletterMinimal({
           "div",
           {
             className: cn(
-              "mt-8 text-center text-sm opacity-80",
+              "flex flex-col items-center space-y-6",
+              brandText ? "mb-24" : "mt-8",
               copyrightClassName
             ),
             children: [
-              /* @__PURE__ */ jsx(FooterCopyright, { copyright }),
               /* @__PURE__ */ jsx(
-                BrandAttribution,
+                "div",
+                {
+                  className: cn(
+                    "flex items-center justify-center",
+                    bottomGridClassName
+                  ),
+                  children: /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "flex gap-4 md:gap-6 text-sm font-light lg:text-base",
+                        "text-center items-center justify-center flex-wrap",
+                        footerLinksClassName
+                      ),
+                      children: footerLinksContent
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "div",
                 {
-                  internalBrandSlug: "open_site_ai",
-                  optionIndex: 4,
-                  variant: "div",
-                  containerClassName: "mt-2",
-                  linkClassName: "underline underline-offset-4 transition-colors hover:opacity-100"
+                  className: cn(
+                    "mt-8 text-center text-sm opacity-50",
+                    copyrightClassName
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx(FooterCopyright, { copyright }),
+                    /* @__PURE__ */ jsx(
+                      BrandAttribution,
+                      {
+                        internalBrandSlug: "open_site_ai",
+                        optionIndex: 4,
+                        variant: "div",
+                        containerClassName: "mt-2",
+                        linkClassName: "underline underline-offset-4 transition-colors hover:opacity-100"
+                      }
+                    )
+                  ]
                 }
               )
             ]

package/dist/footer-accordion-social.cjs

@@ -6,10 +6,10 @@ var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var classVarianceAuthority = require('class-variance-authority');
 var jsxRuntime = require('react/jsx-runtime');
-var img = require('@page-speed/img');
 var icon = require('@page-speed/icon');
 var usePlatformFromUrl = require('@opensite/hooks/usePlatformFromUrl');
 var integration = require('@page-speed/forms/integration');
+var img = require('@page-speed/img');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -453,77 +453,6 @@ var Pressable = React__namespace.forwardRef(
   }
 );
 Pressable.displayName = "Pressable";
-function isThemedLogo(logo) {
-  return "light" in logo || "dark" in logo;
-}
-var FooterLogo = ({
-  logo,
-  logoSlot,
-  logoClassName,
-  logoImageClassName,
-  logoTitleClassName,
-  optixFlowConfig
-}) => {
-  if (logoSlot) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: logoSlot });
-  if (!logo) return null;
-  const hasThemedSources = isThemedLogo(logo) && (logo.light || logo.dark);
-  const hasStandardSource = !isThemedLogo(logo) && logo.src;
-  const logoContent = hasThemedSources ? (
-    // Themed logo with light/dark mode sources
-    /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      logo.light && /* @__PURE__ */ jsxRuntime.jsx(
-        img.Img,
-        {
-          src: logo.light,
-          alt: logo.alt || "Logo",
-          className: cn(
-            "h-8 w-auto object-contain dark:hidden md:h-10",
-            logoImageClassName
-          ),
-          optixFlowConfig
-        }
-      ),
-      logo.dark && /* @__PURE__ */ jsxRuntime.jsx(
-        img.Img,
-        {
-          src: logo.dark,
-          alt: logo.alt || "Logo",
-          className: cn(
-            "hidden h-8 w-auto object-contain dark:block md:h-10",
-            logoImageClassName
-          ),
-          optixFlowConfig
-        }
-      )
-    ] })
-  ) : hasStandardSource ? (
-    // Standard single logo image
-    /* @__PURE__ */ jsxRuntime.jsx(
-      img.Img,
-      {
-        src: logo.src,
-        alt: logo.alt || "Logo",
-        className: cn("h-8 w-auto object-contain md:h-10", logoImageClassName),
-        optixFlowConfig
-      }
-    )
-  ) : logo.title ? (
-    // Text-based logo fallback
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-lg font-semibold md:text-xl", logoTitleClassName), children: logo.title })
-  ) : null;
-  if (!logoContent) return null;
-  if (logo.url) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      Pressable,
-      {
-        href: logo.url,
-        className: cn("inline-flex items-center", logoClassName),
-        children: logoContent
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("inline-flex items-center", logoClassName), children: logoContent });
-};
 function FooterCopyright({
   copyright,
   className
@@ -1551,20 +1480,15 @@ function FooterAccordionSocial({
   pattern,
   patternOpacity,
   patternClassName,
-  formEngineSetup,
-  buttonAction,
-  formSlot,
-  newsletterFormClassName
+  formEngineSetup
 }) {
   const renderForm = React__namespace.useMemo(() => {
-    if (formSlot) return formSlot;
     if (!formEngineSetup) return null;
-    const defaultButtonAction = {
+    const action = {
       label: "",
       variant: "default",
       icon: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-right", size: 16 })
     };
-    const action = buttonAction || defaultButtonAction;
     return /* @__PURE__ */ jsxRuntime.jsx(
       integration.FormEngine,
       {
@@ -1577,21 +1501,18 @@ function FooterAccordionSocial({
               ...formEngineSetup.formLayoutSettings?.buttonGroupSetup,
               size: "default",
               submitLabel: action.icon || action.label,
-              submitVariant: action.variant || "default"
+              submitVariant: action.variant
             }
           }
         },
         defaultFields: DEFAULT_FORM_FIELDS,
         defaultStyleRules: {
           ...DEFAULT_STYLE_RULES,
-          formContainer: cn(
-            DEFAULT_STYLE_RULES.formContainer,
-            newsletterFormClassName
-          )
+          formContainer: cn(DEFAULT_STYLE_RULES.formContainer)
         }
       }
     );
-  }, [formSlot, formEngineSetup, buttonAction, newsletterFormClassName]);
+  }, [formEngineSetup]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -1605,19 +1526,19 @@ function FooterAccordionSocial({
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-10", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-10 lg:grid-cols-2 lg:gap-20", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
-            logo && /* @__PURE__ */ jsxRuntime.jsx(
-              FooterLogo,
+            logo && /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: logo.url || "/", className: "block mb-8 md:mb-12", children: /* @__PURE__ */ jsxRuntime.jsx(
+              img.Img,
               {
-                logo,
-                logoClassName: "inline-block max-w-48",
+                src: logo.src,
+                className: "h-16 object-contain w-auto max-w-full",
                 optixFlowConfig
               }
-            ),
-            formEngineSetup && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-2xl font-semibold", children: newsletterTitle }),
-                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "opacity-80", children: newsletterDescription })
-              ] }),
+            ) }),
+            formEngineSetup && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+              newsletterTitle || newsletterDescription ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+                newsletterTitle ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-xl font-semibold", children: newsletterTitle }) : null,
+                newsletterDescription ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "opacity-70", children: newsletterDescription }) : null
+              ] }) : null,
               renderForm
             ] })
           ] }),
@@ -1635,27 +1556,24 @@ function FooterAccordionSocial({
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center justify-between gap-6 border-t pt-8", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 text-sm opacity-80 md:flex-row md:items-center md:gap-4", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(FooterCopyright, { copyright }),
+            /* @__PURE__ */ jsxRuntime.jsx(FooterCopyright, { copyright, className: "opacity-50" }),
             /* @__PURE__ */ jsxRuntime.jsx(
               BrandAttribution,
               {
                 internalBrandSlug: "open_site_ai",
                 optionIndex: 1,
                 variant: "span",
-                linkClassName: "hover:opacity-100"
+                linkClassName: "opacity-50 hover:opacity-100"
               }
             )
           ] }),
           socialLinks && socialLinks.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex flex-wrap gap-4", children: socialLinks.map((social, idx) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
             SocialLinkIcon,
             {
-              href: social.href,
-              label: social.label,
-              iconNameOverride: social.iconNameOverride,
-              variant: "outline",
-              size: "icon",
-              asButton: true,
-              className: "rounded-full"
+              ...social,
+              variant: "ghost",
+              size: "icon-lg",
+              asButton: true
             }
           ) }, idx)) })
         ] })