@opensite/ui 2.2.8 → 2.3.0

package/dist/link-page-minimal-profile.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bi_ClKrO.js';
-import { I as ImageItem, A as ActionConfig, a as SocialLinkItem, O as OptixFlowConfig } from './blocks-k17uluAz.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-hxnFe3w6.js';
+import { I as ImageItem, A as ActionConfig, a as SocialLinkItem, O as OptixFlowConfig } from './blocks-DRE-f6cS.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-8mtEHxev.js';
 import 'class-variance-authority/types';
 
 /**
@@ -177,6 +177,6 @@ interface LinkPageMinimalProfileProps {
  * />
  * ```
  */
-declare function LinkPageMinimalProfile({ name, bio, avatar, avatarUrl, profileSlot, links, linksSlot, socialLinks, socialLinksSlot, footerAction, footerSlot, className, containerClassName, contentClassName, headerClassName, avatarClassName, nameClassName, bioClassName, linksClassName, linkClassName, linkIconClassName, linkLabelClassName, socialLinksClassName, socialLinkClassName, socialIconClassName, footerClassName, background, spacing, pattern, patternOpacity, patternClassName, optixFlowConfig, }: LinkPageMinimalProfileProps): React.JSX.Element;
+declare function LinkPageMinimalProfile({ name, bio, avatar, avatarUrl, profileSlot, links, linksSlot, socialLinks, socialLinksSlot, footerAction, footerSlot, className, contentClassName, headerClassName, avatarClassName, nameClassName, bioClassName, linksClassName, linkClassName, linkIconClassName, linkLabelClassName, socialLinksClassName, socialLinkClassName, socialIconClassName, footerClassName, background, containerClassName, spacing, pattern, patternOpacity, patternClassName, optixFlowConfig, }: LinkPageMinimalProfileProps): React.JSX.Element;
 
 export { LinkPageMinimalProfile, type LinkPageMinimalProfileProps, type MinimalProfileLink, type MinimalProfileSocialLink };

package/dist/link-page-minimal-profile.js

@@ -12,62 +12,6 @@ import { Img } from '@page-speed/img';
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
-function getNestedCardBg(parentBg, variant = "muted", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "muted":
-        return "bg-background";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-background/50";
-    }
-  } else {
-    switch (variant) {
-      case "muted":
-        return "bg-muted";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-muted/50";
-    }
-  }
-}
-function getNestedCardTextColor(parentBg, options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  return isDark ? "text-foreground" : "";
-}
-function getTextColor(parentBg, variant = "default", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "default":
-        return "text-foreground";
-      case "muted":
-        return "text-foreground/80";
-      case "subtle":
-        return "text-foreground/60";
-      case "accent":
-        return "text-accent-foreground";
-    }
-  } else {
-    switch (variant) {
-      case "default":
-        return "text-foreground";
-      case "muted":
-        return "text-muted-foreground";
-      case "subtle":
-        return "text-muted-foreground/70";
-      case "accent":
-        return "text-primary";
-    }
-  }
-}
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -490,10 +434,6 @@ var DEFAULT_ICON_API_KEY = "au382bi7fsh96w9h9xlrnat2jglx";
 function DynamicIcon({ apiKey, ...props }) {
   return /* @__PURE__ */ jsx(Icon, { ...props, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
 }
-
-// lib/blockBrandedIconsAndPlaceholders.ts
-var blockBrandedIconsAndPlaceholders = {
-  avatar2: "https://cdn.ing/assets/i/r/286240/vgf3rrkwn0769pfdtpal60uo5vpw/avatar-2.webp"};
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -873,7 +813,7 @@ function LinkPageMinimalProfile({
   name,
   bio,
   avatar,
-  avatarUrl = blockBrandedIconsAndPlaceholders.avatar2,
+  avatarUrl,
   profileSlot,
   links,
   linksSlot,
@@ -882,7 +822,6 @@ function LinkPageMinimalProfile({
   footerAction,
   footerSlot,
   className,
-  containerClassName,
   contentClassName,
   headerClassName,
   avatarClassName,
@@ -896,20 +835,20 @@ function LinkPageMinimalProfile({
   socialLinkClassName,
   socialIconClassName,
   footerClassName,
-  background = "default",
-  spacing,
+  background,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-12 md:py-32",
   pattern,
   patternOpacity,
   patternClassName,
   optixFlowConfig
 }) {
-  const resolvedBackground = background;
-  const resolvedAvatar = avatar || (avatarUrl ? {
-    src: avatarUrl,
-    alt: typeof name === "string" ? name : "Profile avatar"
-  } : void 0);
   const renderProfile = useMemo(() => {
     if (profileSlot) return profileSlot;
+    const resolvedAvatar = avatar || (avatarUrl ? {
+      src: avatarUrl,
+      alt: typeof name === "string" ? name : "Profile avatar"
+    } : void 0);
     return /* @__PURE__ */ jsxs(
       "div",
       {
@@ -923,7 +862,6 @@ function LinkPageMinimalProfile({
             {
               className: cn(
                 "h-20 w-20 overflow-hidden rounded-full",
-                getNestedCardBg(resolvedBackground),
                 avatarClassName
               ),
               children: /* @__PURE__ */ jsx(
@@ -938,32 +876,24 @@ function LinkPageMinimalProfile({
             }
           ),
           /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-            name && (typeof name === "string" ? /* @__PURE__ */ jsx(
-              "h1",
-              {
-                className: cn(
-                  "text-xl font-semibold",
-                  nameClassName
-                ),
-                children: name
-              }
-            ) : /* @__PURE__ */ jsx("div", { className: nameClassName, children: name })),
-            bio && (typeof bio === "string" ? /* @__PURE__ */ jsx(
-              "p",
-              {
-                className: cn(
-                  "text-sm",
-                  getTextColor(resolvedBackground, "muted"),
-                  bioClassName
-                ),
-                children: bio
-              }
-            ) : /* @__PURE__ */ jsx("div", { className: bioClassName, children: bio }))
+            name && (typeof name === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-xl font-semibold", nameClassName), children: name }) : /* @__PURE__ */ jsx("div", { className: nameClassName, children: name })),
+            bio && (typeof bio === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-sm", bioClassName), children: bio }) : /* @__PURE__ */ jsx("div", { className: bioClassName, children: bio }))
           ] })
         ]
       }
     );
-  }, [profileSlot, resolvedAvatar, avatarClassName, optixFlowConfig, name, resolvedBackground, nameClassName, bio, bioClassName, headerClassName]);
+  }, [
+    avatar,
+    avatarUrl,
+    profileSlot,
+    avatarClassName,
+    optixFlowConfig,
+    name,
+    nameClassName,
+    bio,
+    bioClassName,
+    headerClassName
+  ]);
   const renderLinks = useMemo(() => {
     if (linksSlot) return linksSlot;
     if (!links || links.length === 0) return null;
@@ -990,8 +920,6 @@ function LinkPageMinimalProfile({
           {
             className: cn(
               "flex w-full items-center gap-3 rounded-lg px-4 py-3 transition-colors",
-              getNestedCardBg(resolvedBackground),
-              getNestedCardTextColor(resolvedBackground),
               "hover:opacity-80",
               linkClassName,
               linkItemClassName
@@ -1007,8 +935,6 @@ function LinkPageMinimalProfile({
         {
           className: cn(
             "flex w-full items-center gap-3 rounded-lg px-4 py-3 transition-colors",
-            getNestedCardBg(resolvedBackground),
-            getNestedCardTextColor(resolvedBackground),
             "hover:opacity-80",
             linkClassName,
             linkItemClassName
@@ -1028,7 +954,14 @@ function LinkPageMinimalProfile({
         link.id ?? index
       );
     }) });
-  }, [linksSlot, links, linksClassName, linkIconClassName, resolvedBackground, linkClassName, linkLabelClassName]);
+  }, [
+    linksSlot,
+    links,
+    linksClassName,
+    linkIconClassName,
+    linkClassName,
+    linkLabelClassName
+  ]);
   const renderSocialLinks = useMemo(() => {
     if (socialLinksSlot) return socialLinksSlot;
     if (!socialLinks || socialLinks.length === 0) return null;
@@ -1057,7 +990,6 @@ function LinkPageMinimalProfile({
               "aria-label": ariaLabel,
               className: cn(
                 "rounded-full p-2 transition-colors",
-                getTextColor(resolvedBackground, "muted"),
                 "hover:opacity-80",
                 socialLinkClassName,
                 social.className
@@ -1069,7 +1001,13 @@ function LinkPageMinimalProfile({
         })
       }
     );
-  }, [socialLinksSlot, socialLinks, socialLinksClassName, socialIconClassName, resolvedBackground, socialLinkClassName]);
+  }, [
+    socialLinksSlot,
+    socialLinks,
+    socialLinksClassName,
+    socialIconClassName,
+    socialLinkClassName
+  ]);
   const renderFooter = useMemo(() => {
     if (footerSlot) return footerSlot;
     if (!footerAction) return null;
@@ -1088,7 +1026,6 @@ function LinkPageMinimalProfile({
       {
         className: cn(
           "flex items-center justify-center gap-1.5 text-xs transition-opacity hover:opacity-80",
-          getTextColor(resolvedBackground, "subtle"),
           footerClassName,
           actionClassName
         ),
@@ -1100,11 +1037,11 @@ function LinkPageMinimalProfile({
         ] })
       }
     );
-  }, [footerSlot, footerAction, resolvedBackground, footerClassName]);
+  }, [footerSlot, footerAction, footerClassName]);
   return /* @__PURE__ */ jsx(
     Section,
     {
-      background: resolvedBackground,
+      background,
       spacing,
       className,
       pattern,

package/dist/link-page-newsletter-social.cjs

@@ -2,15 +2,13 @@
 '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');
 var jsxRuntime = require('react/jsx-runtime');
 var icon = require('@page-speed/icon');
-var integration = require('@page-speed/forms/integration');
 var img = require('@page-speed/img');
+var integration = require('@page-speed/forms/integration');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -33,7 +31,6 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 // components/blocks/link-page/link-page-newsletter-social.tsx
-var TextInput = inputs.TextInput;
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
@@ -834,6 +831,22 @@ var Section = React__namespace.default.forwardRef(
   }
 );
 Section.displayName = "Section";
+var DEFAULT_STYLE_RULES = {
+  formContainer: "w-full flex flex-col gap-3",
+  fieldsContainer: "",
+  fieldClassName: "",
+  formClassName: ""
+};
+var DEFAULT_FORM_FIELDS = [
+  {
+    name: "email",
+    type: "email",
+    label: "Email Address",
+    placeholder: "Enter your email",
+    required: true,
+    columnSpan: 12
+  }
+];
 function LinkPageNewsletterSocial({
   name,
   bio,
@@ -842,13 +855,11 @@ function LinkPageNewsletterSocial({
   profileSlot,
   newsletterHeading,
   newsletterDescription,
-  emailPlaceholder,
-  buttonText,
-  submitAction,
+  formEngineSetup,
+  buttonAction,
+  helperText,
   newsletterSlot,
   formSlot,
-  submittingLabel,
-  submittingIcon = /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/loader-2", size: 16, className: "animate-spin" }),
   links,
   linksSlot,
   linkChevronIcon,
@@ -868,9 +879,6 @@ function LinkPageNewsletterSocial({
   newsletterCardClassName,
   newsletterHeadingClassName,
   newsletterDescriptionClassName,
-  formClassName,
-  inputClassName,
-  submitButtonClassName,
   linksClassName,
   linkClassName,
   linkIconClassName,
@@ -883,75 +891,15 @@ function LinkPageNewsletterSocial({
   pattern,
   patternOpacity,
   patternClassName,
-  formConfig,
-  onSubmit,
-  onSuccess,
-  onError,
   optixFlowConfig
 }) {
-  const resolvedBackground = background;
-  const resolvedAvatar = avatar || (avatarUrl ? {
-    src: avatarUrl,
-    alt: typeof name === "string" ? name : "Profile avatar"
-  } : void 0);
-  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();
-          }
-          onSuccess?.(result);
-        }
-      } 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 resolvedSubmitAction = React.useMemo(() => {
-    if (submitAction) {
-      return {
-        ...submitAction,
-        label: buttonText || submitAction?.label || "Submit",
-        variant: submitAction?.variant || "default",
-        size: submitAction?.size || "lg"
-      };
-    }
-    return {
-      label: buttonText || "Submit",
-      variant: "default",
-      size: "lg"
-    };
-  }, [submitAction, buttonText]);
   const resolvedChevronIcon = linkChevronIcon ?? /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-right", size: 16 });
   const renderProfile = React.useMemo(() => {
     if (profileSlot) return profileSlot;
+    const resolvedAvatar = avatar || (avatarUrl ? {
+      src: avatarUrl,
+      alt: typeof name === "string" ? name : "Profile avatar"
+    } : void 0);
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
@@ -987,11 +935,11 @@ function LinkPageNewsletterSocial({
     );
   }, [
     profileSlot,
-    resolvedAvatar,
+    avatar,
+    avatarUrl,
     avatarClassName,
     optixFlowConfig,
     name,
-    resolvedBackground,
     nameClassName,
     bio,
     bioClassName,
@@ -1042,63 +990,43 @@ function LinkPageNewsletterSocial({
     socialLinks,
     socialLinksClassName,
     socialIconClassName,
-    resolvedBackground,
     socialLinkClassName
   ]);
-  const renderFormFields = React.useMemo(() => {
+  const renderForm = React.useMemo(() => {
     if (formSlot) return formSlot;
-    const {
-      label,
-      icon,
-      iconAfter,
-      children,
-      className: actionClassName,
-      ...pressableProps
-    } = resolvedSubmitAction;
+    if (!formEngineSetup) return null;
+    const defaultButtonAction = {
+      label: "Submit",
+      variant: "default"
+    };
+    const action = buttonAction || defaultButtonAction;
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(forms.Field, { name: "email", children: ({ field, meta }) => /* @__PURE__ */ jsxRuntime.jsx(
-        TextInput,
-        {
-          ...field,
-          type: "email",
-          placeholder: emailPlaceholder,
-          error: meta.touched && !!meta.error,
-          className: cn("w-full", inputClassName),
-          "aria-label": emailPlaceholder || "Email address"
-        }
-      ) }),
       /* @__PURE__ */ jsxRuntime.jsx(
-        Pressable,
+        integration.FormEngine,
         {
-          componentType: "button",
-          type: "submit",
-          variant: resolvedSubmitAction.variant ?? "default",
-          size: resolvedSubmitAction.size ?? "lg",
-          className: cn("w-full", submitButtonClassName, actionClassName),
-          asButton: true,
-          disabled: form.isSubmitting,
-          ...pressableProps,
-          children: form.isSubmitting ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            submittingIcon,
-            /* @__PURE__ */ jsxRuntime.jsx("span", { children: submittingLabel })
-          ] }) : children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            icon,
-            label,
-            iconAfter
-          ] })
+          formEngineSetup: {
+            ...formEngineSetup,
+            formLayoutSettings: {
+              ...formEngineSetup.formLayoutSettings,
+              formLayout: "button-group",
+              buttonGroupSetup: {
+                ...formEngineSetup.formLayoutSettings?.buttonGroupSetup,
+                size: "lg",
+                submitLabel: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  action.label,
+                  action.iconAfter
+                ] }),
+                submitVariant: action.variant || "default"
+              }
+            }
+          },
+          defaultFields: DEFAULT_FORM_FIELDS,
+          defaultStyleRules: DEFAULT_STYLE_RULES
         }
-      )
+      ),
+      helperText && (typeof helperText === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm mt-2 text-center"), children: helperText }) : helperText)
     ] });
-  }, [
-    formSlot,
-    resolvedSubmitAction,
-    emailPlaceholder,
-    inputClassName,
-    submitButtonClassName,
-    form.isSubmitting,
-    submittingIcon,
-    submittingLabel
-  ]);
+  }, [formSlot, formEngineSetup, buttonAction, helperText]);
   const renderNewsletter = React.useMemo(() => {
     if (newsletterSlot) return newsletterSlot;
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1123,16 +1051,7 @@ function LinkPageNewsletterSocial({
             ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: newsletterHeadingClassName, children: newsletterHeading })),
             newsletterDescription && (typeof newsletterDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm", newsletterDescriptionClassName), children: newsletterDescription }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: newsletterDescriptionClassName, children: newsletterDescription }))
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            forms.Form,
-            {
-              form,
-              action: formConfig?.endpoint,
-              method: formMethod,
-              className: cn("space-y-3", formClassName),
-              children: renderFormFields
-            }
-          )
+          renderForm
         ]
       }
     );
@@ -1142,13 +1061,8 @@ function LinkPageNewsletterSocial({
     newsletterHeading,
     newsletterHeadingClassName,
     newsletterDescription,
-    resolvedBackground,
     newsletterDescriptionClassName,
-    form,
-    formConfig?.endpoint,
-    formMethod,
-    formClassName,
-    renderFormFields
+    renderForm
   ]);
   const renderLinks = React.useMemo(() => {
     if (linksSlot) return linksSlot;
@@ -1221,7 +1135,6 @@ function LinkPageNewsletterSocial({
     links,
     linksClassName,
     linkIconClassName,
-    resolvedBackground,
     linkClassName,
     linkLabelClassName,
     linkChevronClassName,
@@ -1257,11 +1170,11 @@ function LinkPageNewsletterSocial({
         ] })
       }
     );
-  }, [footerSlot, footerAction, resolvedBackground, footerClassName]);
+  }, [footerSlot, footerAction, footerClassName]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
-      background: resolvedBackground,
+      background,
       spacing,
       className,
       pattern,