@opensite/ui 2.1.8 → 2.2.1

package/dist/hero-image-slider.cjs

@@ -8,6 +8,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var react = require('motion/react');
 var img = require('@page-speed/img');
 var classVarianceAuthority = require('class-variance-authority');
+var integration = require('@page-speed/forms/integration');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -544,31 +545,38 @@ var ImageSlider = ({
         perspective: "1000px"
       },
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { mode: "wait", initial: false, children: activeImage ? /* @__PURE__ */ jsxRuntime.jsx(
-          react.motion.div,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          react.AnimatePresence,
           {
-            initial: "initial",
-            animate: "visible",
-            exit: transition === "fade" ? "fadeExit" : direction === "up" ? "upExit" : "downExit",
-            variants: transition === "fade" ? fadeVariants : slideVariants,
-            className: "absolute inset-0",
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              img.Img,
+            mode: transition === "fade" ? "sync" : "wait",
+            initial: false,
+            children: activeImage ? /* @__PURE__ */ jsxRuntime.jsx(
+              react.motion.div,
               {
-                src: activeImage.src,
-                alt: activeImage.alt,
-                className: cn(
-                  "h-full w-full object-cover object-center",
-                  imageClassName,
-                  activeImage.className
-                ),
-                optixFlowConfig: activeImage.optixFlowConfig ?? optixFlowConfig,
-                eager: true
-              }
-            )
-          },
-          `${currentIndex}-${activeImage.src ?? "image"}`
-        ) : null }),
+                initial: "initial",
+                animate: "visible",
+                exit: transition === "fade" ? "fadeExit" : direction === "up" ? "upExit" : "downExit",
+                variants: transition === "fade" ? fadeVariants : slideVariants,
+                className: "absolute inset-0",
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  img.Img,
+                  {
+                    src: activeImage.src,
+                    alt: activeImage.alt,
+                    className: cn(
+                      "h-full w-full object-cover object-center",
+                      imageClassName,
+                      activeImage.className
+                    ),
+                    optixFlowConfig: activeImage.optixFlowConfig ?? optixFlowConfig,
+                    eager: true
+                  }
+                )
+              },
+              `${currentIndex}-${activeImage.src ?? "image"}`
+            ) : null
+          }
+        ),
         overlayContent,
         children ? /* @__PURE__ */ jsxRuntime.jsx(
           "div",
@@ -1002,6 +1010,61 @@ var Pressable = React3__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
+    }
+  );
+}
+var DEFAULT_STYLE_RULES = {
+  formContainer: "",
+  fieldsContainer: "",
+  fieldClassName: "",
+  formClassName: "space-y-4"
+};
+var DEFAULT_FORM_FIELDS = [
+  {
+    name: "firstName",
+    type: "text",
+    label: "First name",
+    placeholder: "John",
+    required: true,
+    columnSpan: 12
+  },
+  {
+    name: "lastName",
+    type: "text",
+    label: "Last name",
+    placeholder: "Doe",
+    required: true,
+    columnSpan: 12
+  },
+  {
+    name: "email",
+    type: "email",
+    label: "E-mail",
+    placeholder: "john@example.com",
+    required: true,
+    columnSpan: 12
+  }
+];
 function HeroImageSlider({
   eyebrow,
   heading,
@@ -1016,8 +1079,8 @@ function HeroImageSlider({
   overlay = true,
   overlaySlot,
   background,
-  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
-  spacing = "pt-32 pb-8 md:pt-32 md:pb-32",
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-12",
+  spacing = "py-16 md:py-24",
   pattern,
   patternOpacity,
   className,
@@ -1029,8 +1092,35 @@ function HeroImageSlider({
   actionsClassName,
   imageClassName,
   overlayClassName,
-  optixFlowConfig
+  optixFlowConfig,
+  formHeading = "Sign up for updates",
+  buttonText = "Subscribe",
+  buttonIcon,
+  formEngineSetup,
+  cardClassName,
+  cardContentClassName,
+  formHeadingClassName,
+  privacyNotice = "We respect your privacy. Unsubscribe at any time.",
+  privacyNoticeClassName,
+  gridClassName
 }) {
+  const formStyleRules = React3__namespace.useMemo(() => {
+    return {
+      formContainer: formEngineSetup?.formLayoutSettings?.styleRules?.formContainer ?? DEFAULT_STYLE_RULES.formContainer,
+      fieldsContainer: formEngineSetup?.formLayoutSettings?.styleRules?.fieldsContainer ?? DEFAULT_STYLE_RULES.fieldsContainer,
+      fieldClassName: formEngineSetup?.formLayoutSettings?.styleRules?.fieldClassName ?? DEFAULT_STYLE_RULES.fieldClassName,
+      formClassName: formEngineSetup?.formLayoutSettings?.styleRules?.formClassName ?? DEFAULT_STYLE_RULES.formClassName,
+      successMessageClassName: formEngineSetup?.formLayoutSettings?.styleRules?.successMessageClassName ?? DEFAULT_STYLE_RULES.successMessageClassName,
+      errorMessageClassName: formEngineSetup?.formLayoutSettings?.styleRules?.errorMessageClassName ?? DEFAULT_STYLE_RULES.errorMessageClassName
+    };
+  }, [formEngineSetup?.formLayoutSettings?.styleRules]);
+  const formFields = React3__namespace.useMemo(() => {
+    if (formEngineSetup && formEngineSetup?.fields && formEngineSetup?.fields?.length > 0) {
+      return formEngineSetup.fields;
+    } else {
+      return DEFAULT_FORM_FIELDS;
+    }
+  }, [formEngineSetup?.fields]);
   const renderActions = React3.useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
@@ -1047,8 +1137,9 @@ function HeroImageSlider({
       return /* @__PURE__ */ jsxRuntime.jsx(
         Pressable,
         {
-          asButton: asButton ?? true,
-          className: actionClassName,
+          asButton: asButton ?? false,
+          variant: "link",
+          className: cn("text-primary p-0 h-auto", actionClassName),
           ...pressableProps,
           children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             icon,
@@ -1066,7 +1157,7 @@ function HeroImageSlider({
       "div",
       {
         className: cn(
-          "mx-auto flex max-w-3xl flex-col items-center",
+          "flex flex-col items-start justify-center",
           contentClassName
         ),
         children: [
@@ -1074,7 +1165,7 @@ function HeroImageSlider({
             "p",
             {
               className: cn(
-                "text-xs font-semibold uppercase tracking-[0.3em] text-white",
+                "text-xs font-semibold uppercase tracking-[0.3em] text-white/80",
                 eyebrowClassName
               ),
               children: eyebrow
@@ -1084,27 +1175,27 @@ function HeroImageSlider({
             "h1",
             {
               className: cn(
-                "mt-5 text-4xl font-semibold tracking-tight text-balance md:text-6xl text-white text-shadow-xl",
+                "mt-3 text-3xl font-bold tracking-tight text-balance md:text-4xl lg:text-5xl text-white text-shadow-xl",
                 headingClassName
               ),
               children: heading
             }
-          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading }) : null,
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-3", headingClassName), children: heading }) : null,
           description ? typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
             "p",
             {
               className: cn(
-                "mt-6 text-base text-white text-balance md:text-lg text-shadow-xl",
+                "mt-4 text-sm text-white/90 text-balance md:text-base max-w-md text-shadow-lg",
                 descriptionClassName
               ),
               children: description
             }
-          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }) : null,
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-4", descriptionClassName), children: description }) : null,
           actionsSlot || actions && actions.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
               className: cn(
-                "mt-8 flex w-full flex-col items-center justify-center gap-3 sm:flex-row",
+                "mt-6 flex flex-col items-start gap-3 sm:flex-row",
                 actionsClassName
               ),
               children: renderActions
@@ -1127,35 +1218,100 @@ function HeroImageSlider({
     actionsClassName,
     renderActions
   ]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  const hasForm = formEngineSetup !== void 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
       background,
       spacing,
       pattern,
       patternOpacity,
-      className: cn("overflow-hidden", className),
+      className: cn("relative overflow-hidden", className),
       containerClassName,
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        ImageSlider,
-        {
-          images: images && images.length ? images : [],
-          autoplay,
-          autoplayIntervalMs,
-          direction,
-          transition: "fade",
-          overlay,
-          overlaySlot,
-          overlayClassName,
-          className: cn(
-            "min-h-[520px] md:min-h-[680px] bg-black!",
-            sliderClassName
-          ),
-          imageClassName: cn("scale-[1.02]", imageClassName),
-          optixFlowConfig,
-          children: renderContent
-        }
-      )
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("absolute inset-0", sliderClassName), children: /* @__PURE__ */ jsxRuntime.jsx(
+          ImageSlider,
+          {
+            images: images && images.length ? images : [],
+            autoplay,
+            autoplayIntervalMs,
+            direction,
+            transition: "fade",
+            overlay,
+            overlaySlot,
+            overlayClassName: cn(
+              "bg-linear-to-r from-black/70 via-black/50 to-black/30",
+              overlayClassName
+            ),
+            className: "min-h-full w-full rounded-none border-none shadow-none",
+            imageClassName: cn("scale-[1.02]", imageClassName),
+            optixFlowConfig
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "relative z-20 grid min-h-[500px] md:min-h-[600px] gap-8 lg:gap-12 grid-cols-1",
+              hasForm ? "lg:grid-cols-2" : "lg:grid-cols-1",
+              gridClassName
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center", children: renderContent }),
+              hasForm && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center lg:justify-end", children: /* @__PURE__ */ jsxRuntime.jsx(
+                Card,
+                {
+                  className: cn(
+                    "w-full max-w-sm bg-card/95 backdrop-blur-sm shadow-2xl",
+                    cardClassName
+                  ),
+                  children: /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: cn("p-6 lg:p-8", cardContentClassName), children: [
+                    formHeading && (typeof formHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                      "h3",
+                      {
+                        className: cn(
+                          "mb-6 text-xl font-semibold",
+                          formHeadingClassName
+                        ),
+                        children: formHeading
+                      }
+                    ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-6", formHeadingClassName), children: formHeading })),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      integration.FormEngine,
+                      {
+                        ...formEngineSetup,
+                        formLayoutSettings: {
+                          ...formEngineSetup?.formLayoutSettings,
+                          formLayout: "standard",
+                          submitButtonSetup: {
+                            ...formEngineSetup?.formLayoutSettings?.submitButtonSetup,
+                            submitLabel: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                              buttonIcon,
+                              buttonText
+                            ] })
+                          },
+                          styleRules: formStyleRules
+                        },
+                        fields: formFields
+                      }
+                    ),
+                    privacyNotice && /* @__PURE__ */ jsxRuntime.jsx(
+                      "p",
+                      {
+                        className: cn(
+                          "mt-4 text-xs text-muted-foreground text-center",
+                          privacyNoticeClassName
+                        ),
+                        children: privacyNotice
+                      }
+                    )
+                  ] })
+                }
+              ) })
+            ]
+          }
+        )
+      ]
     }
   );
 }

package/dist/hero-image-slider.d.cts

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import { ImageSliderImage } from './image-slider.cjs';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-CnNAZvh6.cjs';
-import { A as ActionConfig, O as OptixFlowConfig } from './blocks-CFlYq-V7.cjs';
+import { FormEngineProps } 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, O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-OIpPF9yW.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 
 interface HeroImageSliderProps {
@@ -116,11 +117,51 @@ interface HeroImageSliderProps {
      * OptixFlow image optimization configuration
      */
     optixFlowConfig?: OptixFlowConfig;
+    /**
+     * Form heading text
+     */
+    formHeading?: React.ReactNode;
+    /**
+     * Submit button text
+     */
+    buttonText?: string;
+    /**
+     * Icon to display in submit button
+     */
+    buttonIcon?: React.ReactNode;
+    /**
+     * Full form engine setup and props
+     */
+    formEngineSetup?: FormEngineProps;
+    /**
+     * Additional CSS classes for the form card
+     */
+    cardClassName?: string;
+    /**
+     * Additional CSS classes for the card content
+     */
+    cardContentClassName?: string;
+    /**
+     * Additional CSS classes for the form heading
+     */
+    formHeadingClassName?: string;
+    /**
+     * Privacy notice text below the form
+     */
+    privacyNotice?: React.ReactNode;
+    /**
+     * Additional CSS classes for the privacy notice
+     */
+    privacyNoticeClassName?: string;
+    /**
+     * Additional CSS classes for the grid layout
+     */
+    gridClassName?: string;
 }
 /**
- * HeroImageSlider - A hero layout that layers headline content over
- * a rotating image slider, ideal for immersive visual storytelling.
+ * HeroImageSlider - A full-width hero with background image slider,
+ * split layout with content on the left and a form card on the right.
  */
-declare function HeroImageSlider({ eyebrow, heading, description, actions, actionsSlot, contentSlot, images, autoplay, autoplayIntervalMs, direction, overlay, overlaySlot, background, containerClassName, spacing, pattern, patternOpacity, className, sliderClassName, contentClassName, eyebrowClassName, headingClassName, descriptionClassName, actionsClassName, imageClassName, overlayClassName, optixFlowConfig, }: HeroImageSliderProps): React.JSX.Element;
+declare function HeroImageSlider({ eyebrow, heading, description, actions, actionsSlot, contentSlot, images, autoplay, autoplayIntervalMs, direction, overlay, overlaySlot, background, containerClassName, spacing, pattern, patternOpacity, className, sliderClassName, contentClassName, eyebrowClassName, headingClassName, descriptionClassName, actionsClassName, imageClassName, overlayClassName, optixFlowConfig, formHeading, buttonText, buttonIcon, formEngineSetup, cardClassName, cardContentClassName, formHeadingClassName, privacyNotice, privacyNoticeClassName, gridClassName, }: HeroImageSliderProps): React.JSX.Element;
 
 export { HeroImageSlider, type HeroImageSliderProps };

package/dist/hero-image-slider.d.ts

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import { ImageSliderImage } from './image-slider.js';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-h9CHmGZ9.js';
-import { A as ActionConfig, O as OptixFlowConfig } from './blocks-BmrJXeAA.js';
+import { FormEngineProps } 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, O as OptixFlowConfig } from './blocks-k17uluAz.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-OIpPF9yW.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
 interface HeroImageSliderProps {
@@ -116,11 +117,51 @@ interface HeroImageSliderProps {
      * OptixFlow image optimization configuration
      */
     optixFlowConfig?: OptixFlowConfig;
+    /**
+     * Form heading text
+     */
+    formHeading?: React.ReactNode;
+    /**
+     * Submit button text
+     */
+    buttonText?: string;
+    /**
+     * Icon to display in submit button
+     */
+    buttonIcon?: React.ReactNode;
+    /**
+     * Full form engine setup and props
+     */
+    formEngineSetup?: FormEngineProps;
+    /**
+     * Additional CSS classes for the form card
+     */
+    cardClassName?: string;
+    /**
+     * Additional CSS classes for the card content
+     */
+    cardContentClassName?: string;
+    /**
+     * Additional CSS classes for the form heading
+     */
+    formHeadingClassName?: string;
+    /**
+     * Privacy notice text below the form
+     */
+    privacyNotice?: React.ReactNode;
+    /**
+     * Additional CSS classes for the privacy notice
+     */
+    privacyNoticeClassName?: string;
+    /**
+     * Additional CSS classes for the grid layout
+     */
+    gridClassName?: string;
 }
 /**
- * HeroImageSlider - A hero layout that layers headline content over
- * a rotating image slider, ideal for immersive visual storytelling.
+ * HeroImageSlider - A full-width hero with background image slider,
+ * split layout with content on the left and a form card on the right.
  */
-declare function HeroImageSlider({ eyebrow, heading, description, actions, actionsSlot, contentSlot, images, autoplay, autoplayIntervalMs, direction, overlay, overlaySlot, background, containerClassName, spacing, pattern, patternOpacity, className, sliderClassName, contentClassName, eyebrowClassName, headingClassName, descriptionClassName, actionsClassName, imageClassName, overlayClassName, optixFlowConfig, }: HeroImageSliderProps): React.JSX.Element;
+declare function HeroImageSlider({ eyebrow, heading, description, actions, actionsSlot, contentSlot, images, autoplay, autoplayIntervalMs, direction, overlay, overlaySlot, background, containerClassName, spacing, pattern, patternOpacity, className, sliderClassName, contentClassName, eyebrowClassName, headingClassName, descriptionClassName, actionsClassName, imageClassName, overlayClassName, optixFlowConfig, formHeading, buttonText, buttonIcon, formEngineSetup, cardClassName, cardContentClassName, formHeadingClassName, privacyNotice, privacyNoticeClassName, gridClassName, }: HeroImageSliderProps): React.JSX.Element;
 
 export { HeroImageSlider, type HeroImageSliderProps };