@opensite/ui 2.1.6 → 2.1.8

package/dist/contact-callback.d.cts

@@ -1,10 +1,10 @@
 import * as React from 'react';
 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 { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-CnNAZvh6.cjs';
+import { A as ActionConfig } from './blocks-CFlYq-V7.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-OIpPF9yW.cjs';
 import 'class-variance-authority/types';
 
 interface ContactCallbackProps {

package/dist/contact-callback.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
 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 { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-h9CHmGZ9.js';
+import { A as ActionConfig } from './blocks-BmrJXeAA.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-OIpPF9yW.js';
 import 'class-variance-authority/types';
 
 interface ContactCallbackProps {

package/dist/contact-card.cjs

@@ -844,6 +844,70 @@ var Section = React__namespace.default.forwardRef(
   }
 );
 Section.displayName = "Section";
+var MOBILE_CLASSES = {
+  "fit-left": "items-start md:items-center",
+  "fit-center": "items-center",
+  "fit-right": "items-end md:items-center",
+  "full-left": "items-stretch md:items-center",
+  "full-center": "items-stretch md:items-center",
+  "full-right": "items-stretch md:items-center"
+};
+function BlockActions({
+  mobileConfig,
+  actionsClassName,
+  verticalSpacing = "mt-4 md:mt-8",
+  actions,
+  actionsSlot
+}) {
+  const width = mobileConfig?.width ?? "full";
+  const position = mobileConfig?.position ?? "center";
+  const mobileLayoutClass = MOBILE_CLASSES[`${width}-${position}`];
+  if (actionsSlot) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { children: actionsSlot });
+  } else if (actions && actions?.length > 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn(
+          "flex flex-col md:flex-row flex-wrap gap-4",
+          mobileLayoutClass,
+          actionsClassName,
+          verticalSpacing
+        ),
+        children: actions.map((action, index) => /* @__PURE__ */ jsxRuntime.jsx(ActionComponent, { action }, index))
+      }
+    );
+  } else {
+    return null;
+  }
+}
+function ActionComponent({ action }) {
+  const {
+    label,
+    icon,
+    iconAfter,
+    children,
+    href,
+    onClick,
+    className: actionClassName,
+    ...pressableProps
+  } = action;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Pressable,
+    {
+      href,
+      onClick,
+      asButton: action.asButton ?? true,
+      className: actionClassName,
+      ...pressableProps,
+      children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        icon,
+        label,
+        iconAfter
+      ] })
+    }
+  );
+}
 var DEFAULT_FORM_FIELDS = [
   {
     name: "firstName",
@@ -889,11 +953,9 @@ var DEFAULT_FORM_FIELDS = [
 function ContactCard({
   heading,
   description,
-  formHeading,
-  buttonText = "Send Message",
-  buttonIcon,
   actions,
   actionsSlot,
+  actionsClassName,
   contactOptions,
   contactOptionsSlot,
   formFields,
@@ -901,9 +963,7 @@ function ContactCard({
   className,
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   cardClassName,
-  formHeadingClassName,
   formClassName,
-  submitClassName,
   successMessageClassName,
   errorMessageClassName,
   infoPanelClassName,
@@ -911,7 +971,7 @@ function ContactCard({
   descriptionClassName,
   contactOptionsClassName,
   background,
-  spacing = "py-8 md:py-32",
+  spacing = "py-16 md:py-32",
   pattern,
   patternOpacity,
   formConfig,
@@ -927,43 +987,22 @@ function ContactCard({
     onSuccess,
     onError
   });
-  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
-        );
-      });
-    }
-    return null;
-  }, [actionsSlot, actions]);
   const contactOptionsContent = React.useMemo(() => {
     if (contactOptionsSlot) return contactOptionsSlot;
     if (contactOptions && contactOptions.length > 0) {
-      return contactOptions.map((option, key) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: option.icon, size: 20 }),
-        option.href ? /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: option.href, children: option.info }) : /* @__PURE__ */ jsxRuntime.jsx("span", { children: option.info })
-      ] }, key));
+      return contactOptions.map((option, key) => /* @__PURE__ */ jsxRuntime.jsxs(
+        Pressable,
+        {
+          variant: "link",
+          href: option.href,
+          className: "gap-4 font-bold",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: option.icon, size: 20 }),
+            option.info
+          ]
+        },
+        key
+      ));
     }
     return null;
   }, [contactOptionsSlot, contactOptions]);
@@ -976,81 +1015,81 @@ function ContactCard({
       patternOpacity,
       className,
       containerClassName,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid items-start gap-10 lg:grid-cols-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: cn("p-6 lg:p-8", cardClassName), children: [
-          formHeading && (typeof formHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-            "h3",
-            {
-              className: cn(
-                "mb-6 text-2xl font-semibold tracking-tight text-balance",
-                formHeadingClassName
-              ),
-              children: formHeading
-            }
-          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-balance", formHeadingClassName), children: formHeading })),
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            forms.Form,
-            {
-              form,
-              action: formConfig?.endpoint,
-              method: formMethod,
-              submissionError,
-              successMessage,
-              successMessageClassName,
-              errorMessageClassName,
-              submissionConfig: formConfig?.submissionConfig,
-              onNewSubmission: resetSubmissionState,
-              className: cn("space-y-6", formClassName),
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-12 gap-6", children: fields.map((field) => /* @__PURE__ */ jsxRuntime.jsx(
-                  "div",
-                  {
-                    className: integration.getColumnSpanClass(field.columnSpan),
-                    children: /* @__PURE__ */ jsxRuntime.jsx(integration.DynamicFormField, { field })
-                  },
-                  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("lg:pt-8", infoPanelClassName), 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.jsx("div", { className: cn("mt-10 space-y-4", contactOptionsClassName), children: contactOptionsContent })
-        ] })
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid items-start gap-10 md:gap-12 lg:grid-cols-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Card, { className: cn("p-6 lg:p-8 order-2 md:order-1", cardClassName), children: /* @__PURE__ */ jsxRuntime.jsxs(
+          forms.Form,
+          {
+            form,
+            action: formConfig?.endpoint,
+            method: formMethod,
+            submissionError,
+            successMessage,
+            successMessageClassName,
+            errorMessageClassName,
+            submissionConfig: formConfig?.submissionConfig,
+            onNewSubmission: resetSubmissionState,
+            className: cn("space-y-6", formClassName),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-12 gap-6", children: fields.map((field) => /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: integration.getColumnSpanClass(field.columnSpan),
+                  children: /* @__PURE__ */ jsxRuntime.jsx(integration.DynamicFormField, { field })
+                },
+                field.name
+              )) }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                BlockActions,
+                {
+                  actions,
+                  actionsSlot,
+                  actionsClassName
+                }
+              )
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "flex flex-col items-start gap-2 md:gap-4 order-1 md:order-2",
+              infoPanelClassName
+            ),
+            children: [
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "h2",
+                {
+                  className: cn(
+                    "text-4xl lg:text-6xl font-bold tracking-tight text-pretty",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : heading),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "p",
+                {
+                  className: cn(
+                    "leading-relaxed text-pretty text-lg opacity-70",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : description),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn(
+                    "mt-4 space-y-4 w-full md:w-fit px-6 py-6 md:px-12 md:py-8 bg-muted rounded-xl text-sm md:text-normal flex flex-col items-start gap-1",
+                    contactOptionsClassName
+                  ),
+                  children: contactOptionsContent
+                }
+              )
+            ]
+          }
+        )
       ] }) })
     }
   );

package/dist/contact-card.d.cts

@@ -1,10 +1,10 @@
 import * as React from 'react';
 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 { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-CnNAZvh6.cjs';
+import { A as ActionConfig } from './blocks-CFlYq-V7.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-OIpPF9yW.cjs';
 import 'class-variance-authority/types';
 
 interface ContactOption {
@@ -151,6 +151,10 @@ interface ContactCardProps {
      * Optional error callback invoked if submission fails.
      */
     onError?: (error: Error) => void;
+    /**
+     * Additional CSS classes for the actions container
+     */
+    actionsClassName?: string;
 }
 /**
  * ContactCard - A simple contact form with card layout and contact information sidebar.
@@ -167,6 +171,6 @@ interface ContactCardProps {
  * />
  * ```
  */
-declare function ContactCard({ heading, description, formHeading, buttonText, buttonIcon, actions, actionsSlot, contactOptions, contactOptionsSlot, formFields, successMessage, className, containerClassName, cardClassName, formHeadingClassName, formClassName, submitClassName, successMessageClassName, errorMessageClassName, infoPanelClassName, headingClassName, descriptionClassName, contactOptionsClassName, background, spacing, pattern, patternOpacity, formConfig, onSubmit, onSuccess, onError, }: ContactCardProps): React.JSX.Element;
+declare function ContactCard({ heading, description, actions, actionsSlot, actionsClassName, contactOptions, contactOptionsSlot, formFields, successMessage, className, containerClassName, cardClassName, formClassName, successMessageClassName, errorMessageClassName, infoPanelClassName, headingClassName, descriptionClassName, contactOptionsClassName, background, spacing, pattern, patternOpacity, formConfig, onSubmit, onSuccess, onError, }: ContactCardProps): React.JSX.Element;
 
 export { ContactCard, type ContactCardProps };

package/dist/contact-card.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
 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 { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-h9CHmGZ9.js';
+import { A as ActionConfig } from './blocks-BmrJXeAA.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-OIpPF9yW.js';
 import 'class-variance-authority/types';
 
 interface ContactOption {
@@ -151,6 +151,10 @@ interface ContactCardProps {
      * Optional error callback invoked if submission fails.
      */
     onError?: (error: Error) => void;
+    /**
+     * Additional CSS classes for the actions container
+     */
+    actionsClassName?: string;
 }
 /**
  * ContactCard - A simple contact form with card layout and contact information sidebar.
@@ -167,6 +171,6 @@ interface ContactCardProps {
  * />
  * ```
  */
-declare function ContactCard({ heading, description, formHeading, buttonText, buttonIcon, actions, actionsSlot, contactOptions, contactOptionsSlot, formFields, successMessage, className, containerClassName, cardClassName, formHeadingClassName, formClassName, submitClassName, successMessageClassName, errorMessageClassName, infoPanelClassName, headingClassName, descriptionClassName, contactOptionsClassName, background, spacing, pattern, patternOpacity, formConfig, onSubmit, onSuccess, onError, }: ContactCardProps): React.JSX.Element;
+declare function ContactCard({ heading, description, actions, actionsSlot, actionsClassName, contactOptions, contactOptionsSlot, formFields, successMessage, className, containerClassName, cardClassName, formClassName, successMessageClassName, errorMessageClassName, infoPanelClassName, headingClassName, descriptionClassName, contactOptionsClassName, background, spacing, pattern, patternOpacity, formConfig, onSubmit, onSuccess, onError, }: ContactCardProps): React.JSX.Element;
 
 export { ContactCard, type ContactCardProps };