@opensite/ui 1.7.3 → 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');
 
@@ -36,6 +37,36 @@ var LabelPrimitive__namespace = /*#__PURE__*/_interopNamespace(LabelPrimitive);
 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:")) {
@@ -454,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
@@ -608,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 = {
@@ -902,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,
@@ -991,18 +890,19 @@ function ContactPhotography({
   actions,
   actionsSlot,
   className,
-  headerClassName,
   headingClassName,
   descriptionClassName,
-  cardClassName,
-  cardContentClassName,
+  contentClassName,
   formClassName,
   submitClassName,
-  background,
-  spacing = "py-8 md:py-32",
-  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  background = "dark",
   pattern,
   patternOpacity,
+  imageSrc,
+  imageAlt,
+  imageClassName,
+  optixFlowConfig,
+  directionConfig = { desktop: "mediaRight", mobile: "mediaTop" },
   formConfig,
   onSubmit,
   onSuccess,
@@ -1057,7 +957,7 @@ 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) => {
@@ -1087,22 +987,36 @@ function ContactPhotography({
     }
     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,
-      containerClassName,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-10 text-center", headerClassName), children: [
+      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(
-                "mb-3 text-3xl font-bold tracking-tight text-balance",
+                "text-3xl font-bold leading-tight tracking-tight sm:text-4xl lg:text-5xl",
                 headingClassName
               ),
               children: heading
@@ -1112,112 +1026,125 @@ function ContactPhotography({
             "p",
             {
               className: cn(
-                "leading-relaxed text-balance",
+                "text-base leading-relaxed opacity-90 sm:text-lg",
                 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" }),
+          ) : /* @__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(
                     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(
                     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(
-                  inputs.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(
-                  inputs.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(
-                  inputs.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;

package/dist/contact-photography.d.cts

@@ -1,12 +1,16 @@
 import * as React from 'react';
 import { P as PageSpeedFormConfig } from './forms-BCcwNFhk.cjs';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-CPyEa7IX.cjs';
-import { A as ActionConfig } from './blocks-tmd_MRJv.cjs';
+import { f as SectionBackground, t as PatternName } from './community-initiatives-r_NhxVet.cjs';
+import { A as ActionConfig, O as OptixFlowConfig } from './blocks-DP3Vofl4.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-8mtEHxev.cjs';
+import './button-variants-CdNtNOuP.cjs';
 import 'class-variance-authority/types';
 
+interface DirectionConfig {
+    desktop: "mediaRight" | "mediaLeft";
+    mobile: "mediaTop" | "mediaBottom";
+}
 interface ContactPhotographyFormValues {
     first_name: string;
     last_name: string;
@@ -29,37 +33,35 @@ interface ContactPhotographyProps {
     actionsSlot?: React.ReactNode;
     /** Additional CSS classes for the section */
     className?: string;
-    /** Additional CSS classes for the container */
-    containerClassName?: string;
-    /** Additional CSS classes for the header */
-    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 card content */
-    cardContentClassName?: string;
+    /** Additional CSS classes for the content area */
+    contentClassName?: string;
     /** Additional CSS classes for the form */
     formClassName?: string;
     /** Additional CSS classes for the submit button */
-    submitClassName?: string; /**
-     * Background style for the section
-     */
+    submitClassName?: string;
+    /** Section background variant */
     background?: SectionBackground;
-    /**
-     * Vertical spacing for the section
-     */
-    spacing?: SectionSpacing;
-    /**
-     * Optional background pattern name or URL
-     */
+    /** Pattern background key or URL */
     pattern?: PatternName | undefined;
+    /** Pattern opacity (0-1) */
+    patternOpacity?: number;
+    /** Image source URL */
+    imageSrc?: string;
+    /** Image alt text */
+    imageAlt?: string;
+    /** Additional CSS classes for the image */
+    imageClassName?: string;
+    /** Optional Optix Flow configuration for image optimization */
+    optixFlowConfig?: OptixFlowConfig;
     /**
-     * Pattern overlay opacity (0-1)
+     * Direction configuration for desktop and mobile layouts
+     * @default { desktop: 'mediaRight', mobile: 'mediaTop' }
      */
-    patternOpacity?: number;
+    directionConfig?: DirectionConfig;
     /** Form configuration for PageSpeed forms */
     formConfig?: PageSpeedFormConfig;
     /** Custom submit handler */
@@ -70,16 +72,27 @@ interface ContactPhotographyProps {
     onError?: (error: Error) => void;
 }
 /**
- * ContactPhotography - Contact form with image background layout.
+ * ContactPhotography - A full-width split-screen contact form section with edge-to-edge design,
+ * featuring text content and a form on one side and a large full-height image on the other.
+ *
+ * Layout: 50/50 split layout with content/form and image sections. Fully responsive with
+ * configurable media placement for desktop and mobile.
+ * Key features: Pattern background support, edge-to-edge design, no card wrapping.
+ * Best for: Photography studios, creative services, visual-first contact pages.
  *
  * @example
  * ```tsx
  * <ContactPhotography
  *   heading="Photography Services"
+ *   description="Book a photography session with us"
+ *   buttonText="Send Message"
+ *   imageSrc="/studio.jpg"
+ *   background="dark"
+ *   pattern="grid"
  *   formConfig={{ endpoint: "/api/contact", format: "json" }}
  * />
  * ```
  */
-declare function ContactPhotography({ heading, description, buttonText, buttonIcon, actions, actionsSlot, className, headerClassName, headingClassName, descriptionClassName, cardClassName, cardContentClassName, formClassName, submitClassName, background, spacing, containerClassName, pattern, patternOpacity, formConfig, onSubmit, onSuccess, onError, }: ContactPhotographyProps): React.JSX.Element;
+declare function ContactPhotography({ heading, description, buttonText, buttonIcon, actions, actionsSlot, className, headingClassName, descriptionClassName, contentClassName, formClassName, submitClassName, background, pattern, patternOpacity, imageSrc, imageAlt, imageClassName, optixFlowConfig, directionConfig, formConfig, onSubmit, onSuccess, onError, }: ContactPhotographyProps): React.JSX.Element;
 
-export { ContactPhotography, type ContactPhotographyProps };
+export { ContactPhotography, type ContactPhotographyProps, type DirectionConfig };