@opensite/ui 1.7.2 → 1.7.4

package/dist/contact-photography.cjs

@@ -8,6 +8,7 @@ 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 LabelPrimitive = require('@radix-ui/react-label');
 var integration = require('@page-speed/forms/integration');
 
@@ -33,11 +34,39 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var LabelPrimitive__namespace = /*#__PURE__*/_interopNamespace(LabelPrimitive);
 
 // components/blocks/contact/contact-photography.tsx
-var TextInput = inputs.TextInput;
-var TextArea = inputs.TextArea;
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.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 normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -456,29 +485,6 @@ var Pressable = React__namespace.forwardRef(
   }
 );
 Pressable.displayName = "Pressable";
-function Card({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      "data-slot": "card",
-      className: cn(
-        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function CardContent({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      "data-slot": "card-content",
-      className: cn("px-6", className),
-      ...props
-    }
-  );
-}
 function Label({
   className,
   ...props
@@ -610,34 +616,6 @@ async function submitPageSpeedForm(values, config) {
   }
   return data;
 }
-var maxWidthStyles = {
-  sm: "max-w-screen-sm",
-  md: "max-w-screen-md",
-  lg: "max-w-screen-lg",
-  xl: "max-w-7xl",
-  "2xl": "max-w-screen-2xl",
-  "4xl": "max-w-[1536px]",
-  full: "max-w-full"
-};
-var Container = React__namespace.default.forwardRef(
-  ({ children, maxWidth = "xl", className, as = "div", ...props }, ref) => {
-    const Component = as;
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      Component,
-      {
-        ref,
-        className: cn(
-          "mx-auto w-full px-2 sm:px-4 lg:px-8",
-          maxWidthStyles[maxWidth],
-          className
-        ),
-        ...props,
-        children
-      }
-    );
-  }
-);
-Container.displayName = "Container";
 
 // lib/patternSvgs.ts
 var patternSvgs = {
@@ -904,87 +882,6 @@ function PatternBackground({
     }
   );
 }
-var backgroundStyles = {
-  default: "bg-background text-foreground",
-  white: "bg-white text-dark",
-  gray: "bg-muted/30 text-foreground",
-  dark: "bg-foreground text-background",
-  transparent: "bg-transparent text-foreground",
-  gradient: "bg-linear-to-br from-primary via-primary/90 to-foreground text-primary-foreground",
-  primary: "bg-primary text-primary-foreground",
-  secondary: "bg-secondary text-secondary-foreground",
-  muted: "bg-muted text-muted-foreground"
-};
-var spacingStyles = {
-  none: "py-0 md:py-0",
-  sm: "py-12 md:py-16",
-  md: "py-16 md:py-24",
-  lg: "py-20 md:py-32",
-  xl: "py-24 md:py-40"
-};
-var predefinedSpacings = ["none", "sm", "md", "lg", "xl"];
-var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
-var Section = React__namespace.default.forwardRef(
-  ({
-    id,
-    title,
-    subtitle,
-    children,
-    className,
-    style,
-    background = "default",
-    spacing = "lg",
-    pattern,
-    patternOpacity,
-    patternClassName,
-    containerClassName,
-    containerMaxWidth = "xl",
-    ...props
-  }, ref) => {
-    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "section",
-      {
-        ref,
-        id,
-        className: cn(
-          "relative",
-          pattern ? "overflow-hidden" : null,
-          backgroundStyles[background],
-          isPredefinedSpacing(spacing) ? spacingStyles[spacing] : spacing,
-          className
-        ),
-        style,
-        ...props,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            PatternBackground,
-            {
-              pattern,
-              opacity: effectivePatternOpacity,
-              className: patternClassName
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            Container,
-            {
-              maxWidth: containerMaxWidth,
-              className: cn("relative z-10", containerClassName),
-              children: [
-                (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6 text-center md:mb-16", children: [
-                  subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider", children: subtitle }),
-                  title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
-                ] }),
-                children
-              ]
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-Section.displayName = "Section";
 function ContactPhotography({
   heading,
   description,
@@ -993,18 +890,19 @@ function ContactPhotography({
   actions,
   actionsSlot,
   className,
-  containerClassName,
-  headerClassName,
   headingClassName,
   descriptionClassName,
-  cardClassName,
-  cardContentClassName,
+  contentClassName,
   formClassName,
   submitClassName,
-  background = "white",
-  spacing = "xl",
+  background = "dark",
   pattern,
-  patternOpacity = 0.1,
+  patternOpacity,
+  imageSrc,
+  imageAlt,
+  imageClassName,
+  optixFlowConfig,
+  directionConfig = { desktop: "mediaRight", mobile: "mediaTop" },
   formConfig,
   onSubmit,
   onSuccess,
@@ -1059,132 +957,194 @@ function ContactPhotography({
     }
   });
   const formMethod = formConfig?.method?.toLowerCase() === "get" ? "get" : "post";
-  const actionsContent = React__namespace.useMemo(() => {
+  const actionsContent = React.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,
+        const {
           label,
-          iconAfter
-        ] }) }, index);
+          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]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Section,
+  const bgColorClass = React.useMemo(() => {
+    switch (background) {
+      case "dark":
+        return "bg-foreground text-background";
+      case "gray":
+        return cn(getNestedCardBg(background), getNestedCardTextColor(background));
+      case "white":
+        return "bg-background";
+      default:
+        return "bg-background";
+    }
+  }, [background]);
+  const desktopOrder = directionConfig.desktop === "mediaRight" ? "lg:flex-row" : "lg:flex-row-reverse";
+  const mobileOrder = directionConfig.mobile === "mediaTop" ? "flex-col" : "flex-col-reverse";
+  const contentArea = /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
     {
-      background,
-      spacing,
-      pattern,
-      patternOpacity,
-      className: cn("py-12", className),
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto max-w-4xl px-4", containerClassName), 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", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("leading-relaxed text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(Card, { className: cn("mx-auto max-w-xl", cardClassName), children: /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: cn("p-6 lg:p-8", cardContentClassName), children: /* @__PURE__ */ jsxRuntime.jsxs(
-          forms.Form,
-          {
-            form,
-            action: formConfig?.endpoint,
-            method: formMethod,
-            className: cn("space-y-4", formClassName),
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-4 sm:grid-cols-2", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(forms.Field, { name: "first_name", children: ({ field, meta }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "first-name", children: "First Name" }),
+      className: cn(
+        "relative flex w-full items-center lg:w-1/2",
+        bgColorClass,
+        contentClassName
+      ),
+      children: [
+        pattern && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(PatternBackground, { pattern, opacity: patternOpacity }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-10 w-full px-8 py-16 sm:px-12 sm:py-20 lg:px-16 lg:py-24 xl:px-24", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto max-w-xl space-y-8", children: [
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h2",
+            {
+              className: cn(
+                "text-3xl font-bold leading-tight tracking-tight sm:text-4xl lg:text-5xl",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: cn(
+                "text-base leading-relaxed opacity-90 sm:text-lg",
+                descriptionClassName
+              ),
+              children: description
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            forms.Form,
+            {
+              form,
+              action: formConfig?.endpoint,
+              method: formMethod,
+              className: cn("space-y-4", formClassName),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-4 sm:grid-cols-2", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(forms.Field, { name: "first_name", children: ({ field, meta }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "first-name", children: "First Name" }),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      inputs.TextInput,
+                      {
+                        ...field,
+                        id: "first-name",
+                        placeholder: "John",
+                        error: meta.touched && !!meta.error,
+                        "aria-label": "First Name"
+                      }
+                    )
+                  ] }) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(forms.Field, { name: "last_name", children: ({ field, meta }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "last-name", children: "Last Name" }),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      inputs.TextInput,
+                      {
+                        ...field,
+                        id: "last-name",
+                        placeholder: "Doe",
+                        error: meta.touched && !!meta.error,
+                        "aria-label": "Last Name"
+                      }
+                    )
+                  ] }) })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx(forms.Field, { name: "email", children: ({ field, meta }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "email", children: "Email" }),
                   /* @__PURE__ */ jsxRuntime.jsx(
-                    TextInput,
+                    inputs.TextInput,
                     {
                       ...field,
-                      id: "first-name",
-                      placeholder: "John",
+                      id: "email",
+                      type: "email",
+                      placeholder: "john@example.com",
                       error: meta.touched && !!meta.error,
-                      "aria-label": "First Name"
+                      "aria-label": "Email"
                     }
                   )
                 ] }) }),
-                /* @__PURE__ */ jsxRuntime.jsx(forms.Field, { name: "last_name", children: ({ field, meta }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "last-name", children: "Last Name" }),
+                /* @__PURE__ */ jsxRuntime.jsx(forms.Field, { name: "phone", children: ({ field, meta }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "phone", children: "Phone" }),
                   /* @__PURE__ */ jsxRuntime.jsx(
-                    TextInput,
+                    inputs.TextInput,
                     {
                       ...field,
-                      id: "last-name",
-                      placeholder: "Doe",
+                      id: "phone",
+                      type: "tel",
+                      placeholder: "+1 (555) 000-0000",
                       error: meta.touched && !!meta.error,
-                      "aria-label": "Last Name"
+                      "aria-label": "Phone"
                     }
                   )
-                ] }) })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx(forms.Field, { name: "email", children: ({ field, meta }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "email", children: "Email" }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  TextInput,
-                  {
-                    ...field,
-                    id: "email",
-                    type: "email",
-                    placeholder: "john@example.com",
-                    error: meta.touched && !!meta.error,
-                    "aria-label": "Email"
-                  }
-                )
-              ] }) }),
-              /* @__PURE__ */ jsxRuntime.jsx(forms.Field, { name: "phone", children: ({ field, meta }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "phone", children: "Phone" }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  TextInput,
-                  {
-                    ...field,
-                    id: "phone",
-                    type: "tel",
-                    placeholder: "+1 (555) 000-0000",
-                    error: meta.touched && !!meta.error,
-                    "aria-label": "Phone"
-                  }
-                )
-              ] }) }),
-              /* @__PURE__ */ jsxRuntime.jsx(forms.Field, { name: "message", children: ({ field, meta }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "message", children: "Message" }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  TextArea,
+                ] }) }),
+                /* @__PURE__ */ jsxRuntime.jsx(forms.Field, { name: "message", children: ({ field, meta }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "message", children: "Message" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    inputs.TextArea,
+                    {
+                      ...field,
+                      id: "message",
+                      placeholder: "Your message...",
+                      rows: 4,
+                      error: meta.touched && !!meta.error,
+                      "aria-label": "Message"
+                    }
+                  )
+                ] }) }),
+                actionsSlot || actions && actions.length > 0 ? actionsContent : /* @__PURE__ */ jsxRuntime.jsxs(
+                  Pressable,
                   {
-                    ...field,
-                    id: "message",
-                    placeholder: "Your message...",
-                    rows: 4,
-                    error: meta.touched && !!meta.error,
-                    "aria-label": "Message"
+                    componentType: "button",
+                    type: "submit",
+                    className: cn("w-full", submitClassName),
+                    size: "lg",
+                    asButton: true,
+                    disabled: form.isSubmitting,
+                    children: [
+                      buttonIcon,
+                      buttonText
+                    ]
                   }
                 )
-              ] }) }),
-              actionsSlot || actions && actions.length > 0 ? actionsContent : /* @__PURE__ */ jsxRuntime.jsxs(
-                Pressable,
-                {
-                  componentType: "button",
-                  type: "submit",
-                  className: cn("w-full", submitClassName),
-                  size: "lg",
-                  asButton: true,
-                  disabled: form.isSubmitting,
-                  children: [
-                    buttonIcon,
-                    buttonText
-                  ]
-                }
-              )
-            ]
-          }
-        ) }) })
-      ] })
+              ]
+            }
+          )
+        ] }) })
+      ]
     }
   );
+  const imageArea = imageSrc ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative h-64 w-full sm:h-96 lg:h-auto lg:w-1/2", children: /* @__PURE__ */ jsxRuntime.jsx(
+    img.Img,
+    {
+      src: imageSrc,
+      alt: imageAlt || "",
+      className: cn("h-full w-full object-cover", imageClassName),
+      optixFlowConfig
+    }
+  ) }) : null;
+  return /* @__PURE__ */ jsxRuntime.jsx("section", { className: cn("relative w-full overflow-hidden", className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex min-h-screen", mobileOrder, desktopOrder), children: [
+    contentArea,
+    imageArea
+  ] }) });
 }
 
 exports.ContactPhotography = ContactPhotography;