@opensite/ui 3.0.6 → 3.0.8

package/dist/hero-ad-campaign-expert.cjs

@@ -4,9 +4,9 @@
 var React4 = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
 var img = require('@page-speed/img');
 var AspectRatioPrimitive = require('@radix-ui/react-aspect-ratio');
-var jsxRuntime = require('react/jsx-runtime');
 var pressable = require('@page-speed/pressable');
 
 function _interopNamespace(e) {
@@ -34,11 +34,6 @@ var AspectRatioPrimitive__namespace = /*#__PURE__*/_interopNamespace(AspectRatio
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
-function AspectRatio({
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(AspectRatioPrimitive__namespace.Root, { "data-slot": "aspect-ratio", ...props });
-}
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -447,6 +442,174 @@ var ContentGroup = React4__namespace.forwardRef(
   }
 );
 ContentGroup.displayName = "ContentGroup";
+function AspectRatio({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(AspectRatioPrimitive__namespace.Root, { "data-slot": "aspect-ratio", ...props });
+}
+var DEFAULT_DEVICE_ASPECT_RATIOS = {
+  desktop: "square",
+  mobile: "square"
+};
+var DEFAULT_MEDIA_CLASS_NAME = "size-full object-cover";
+var DEFAULT_FRAME_CLASS_NAME = "overflow-hidden";
+var DEFAULT_BREAKPOINT = "lg";
+var BREAKPOINT_VISIBILITY_CLASSES = {
+  sm: {
+    desktop: "hidden sm:block",
+    mobile: "sm:hidden"
+  },
+  md: {
+    desktop: "hidden md:block",
+    mobile: "md:hidden"
+  },
+  lg: {
+    desktop: "hidden lg:block",
+    mobile: "lg:hidden"
+  },
+  xl: {
+    desktop: "hidden xl:block",
+    mobile: "xl:hidden"
+  },
+  "2xl": {
+    desktop: "hidden 2xl:block",
+    mobile: "2xl:hidden"
+  }
+};
+var MEDIA_ASPECT_RATIOS = {
+  square: 1,
+  horizontal: 16 / 9,
+  vertical: 355 / 520
+};
+function resolveAspectRatio(ratio, fallback) {
+  const resolvedRatio = ratio ?? fallback;
+  if (typeof resolvedRatio === "number" && Number.isFinite(resolvedRatio) && resolvedRatio > 0) {
+    return resolvedRatio;
+  }
+  return MEDIA_ASPECT_RATIOS[resolvedRatio];
+}
+function hasRenderableMedia(mediaItem) {
+  return Boolean(mediaItem?.image?.src || mediaItem?.video?.src);
+}
+function renderMediaElement({
+  mediaItem,
+  optixFlowConfig,
+  mediaClassName,
+  imageClassName,
+  videoClassName
+}) {
+  if (!hasRenderableMedia(mediaItem)) {
+    return null;
+  }
+  if (mediaItem.video?.src) {
+    const { className: inlineVideoClassName, poster, ...videoProps } = mediaItem.video;
+    const posterFallback = poster ?? (typeof mediaItem.image?.src === "string" ? mediaItem.image.src : void 0);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "video",
+      {
+        ...videoProps,
+        poster: posterFallback,
+        className: cn(
+          DEFAULT_MEDIA_CLASS_NAME,
+          mediaClassName,
+          videoClassName,
+          inlineVideoClassName
+        )
+      }
+    );
+  }
+  if (mediaItem.image?.src) {
+    const { className: inlineImageClassName, alt, src, ...imageProps } = mediaItem.image;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      img.Img,
+      {
+        ...imageProps,
+        src,
+        alt: alt ?? "",
+        className: cn(
+          DEFAULT_MEDIA_CLASS_NAME,
+          mediaClassName,
+          imageClassName,
+          inlineImageClassName
+        ),
+        optixFlowConfig
+      }
+    );
+  }
+  return null;
+}
+function MediaAspectRatio({
+  containerClassName,
+  mobileClassName,
+  desktopClassName,
+  frameClassName,
+  mobileFrameClassName,
+  desktopFrameClassName,
+  mediaClassName,
+  imageClassName,
+  videoClassName,
+  mediaItem,
+  optixFlowConfig,
+  deviceAspectRatios = DEFAULT_DEVICE_ASPECT_RATIOS,
+  breakpoint = DEFAULT_BREAKPOINT
+}) {
+  if (!hasRenderableMedia(mediaItem)) {
+    return null;
+  }
+  const ratios = {
+    desktop: resolveAspectRatio(
+      deviceAspectRatios.desktop,
+      DEFAULT_DEVICE_ASPECT_RATIOS.desktop
+    ),
+    mobile: resolveAspectRatio(
+      deviceAspectRatios.mobile,
+      DEFAULT_DEVICE_ASPECT_RATIOS.mobile
+    )
+  };
+  const sharedFrameClassName = cn(
+    DEFAULT_FRAME_CLASS_NAME,
+    frameClassName,
+    mediaItem.containerClassName
+  );
+  const visibilityClasses = BREAKPOINT_VISIBILITY_CLASSES[breakpoint];
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: containerClassName, "data-slot": "media-aspect-ratio", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative", visibilityClasses.mobile, mobileClassName), children: /* @__PURE__ */ jsxRuntime.jsx(
+      AspectRatio,
+      {
+        ratio: ratios.mobile,
+        className: cn(sharedFrameClassName, mobileFrameClassName),
+        children: renderMediaElement({
+          mediaItem,
+          optixFlowConfig,
+          mediaClassName,
+          imageClassName,
+          videoClassName
+        })
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn(visibilityClasses.desktop, desktopClassName),
+        style: { aspectRatio: String(ratios.desktop) },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn("size-full", sharedFrameClassName, desktopFrameClassName),
+            "data-slot": "media-aspect-ratio-frame",
+            children: renderMediaElement({
+              mediaItem,
+              optixFlowConfig,
+              mediaClassName,
+              imageClassName,
+              videoClassName
+            })
+          }
+        )
+      }
+    )
+  ] });
+}
 var useResponsiveLayout = ({
   directionConfig = { desktop: "mediaRight", mobile: "mediaTop" }
 }) => {
@@ -521,11 +684,6 @@ function ActionComponent({ action }) {
     }
   );
 }
-var ASPECT_RATIOS = {
-  square: 1,
-  horizontal: 16 / 9,
-  vertical: 355 / 520
-};
 function HeroAdCampaignExpert({
   sectionId = "hero-ad-campaign-expert",
   heading,
@@ -604,36 +762,6 @@ function HeroAdCampaignExpert({
     descriptionClassName,
     renderActions
   ]);
-  const hasMedia = mediaItem?.image || mediaItem?.video;
-  const renderMedia = React4.useMemo(() => {
-    if (!mediaItem) return null;
-    const { image, video } = mediaItem;
-    if (video) {
-      const { src, className: videoClassName, ...videoRest } = video;
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        "video",
-        {
-          src,
-          className: cn("size-full object-cover", videoClassName),
-          ...videoRest
-        }
-      );
-    }
-    if (image) {
-      const { src, alt, className: imgClassName, ...imgRest } = image;
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        img.Img,
-        {
-          src,
-          alt,
-          className: cn("size-full object-cover", imgClassName),
-          optixFlowConfig,
-          ...imgRest
-        }
-      );
-    }
-    return null;
-  }, [mediaItem, optixFlowConfig]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -662,38 +790,18 @@ function HeroAdCampaignExpert({
                 )
               }
             ),
-            hasMedia && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative flex w-full justify-center lg:w-1/2"), children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative h-auto w-[80%] max-w-[355px] lg:hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
-                AspectRatio,
-                {
-                  ratio: ASPECT_RATIOS[mediaAspectRatios.mobile],
-                  className: cn(
-                    "rounded-xl shadow-2xl overflow-hidden",
-                    mediaItem?.containerClassName
-                  ),
-                  children: renderMedia
-                }
-              ) }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
-                {
-                  className: "hidden lg:block max-h-[70dvh] w-auto",
-                  style: {
-                    aspectRatio: ASPECT_RATIOS[mediaAspectRatios.desktop]
-                  },
-                  children: /* @__PURE__ */ jsxRuntime.jsx(
-                    "div",
-                    {
-                      className: cn(
-                        "size-full rounded-xl shadow-2xl overflow-hidden",
-                        mediaItem?.containerClassName
-                      ),
-                      children: renderMedia
-                    }
-                  )
-                }
-              )
-            ] })
+            /* @__PURE__ */ jsxRuntime.jsx(
+              MediaAspectRatio,
+              {
+                containerClassName: "relative flex w-full justify-center lg:w-1/2",
+                desktopClassName: "max-h-[70dvh] w-auto",
+                mobileClassName: "h-auto w-[80%] max-w-[355px]",
+                frameClassName: "rounded-xl shadow-2xl",
+                mediaItem,
+                optixFlowConfig,
+                deviceAspectRatios: mediaAspectRatios
+              }
+            )
           ]
         }
       ) })

package/dist/hero-ad-campaign-expert.d.cts

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-D8cbIf_y.cjs';
+import { ResponsiveMediaAspectRatioProps } from './media-aspect-ratio.cjs';
 import { A as ActionConfig, M as MediaItem, O as OptixFlowConfig, h as DirectionConfig } from './blocks-DL92rOxr.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
 import '@page-speed/pressable';
 import '@opensite/hooks/usePlatformFromUrl';
 
-type MediaAspectRatio = "square" | "horizontal" | "vertical";
 interface HeroAdCampaignExpertProps {
     /**
      * Main heading content
@@ -77,10 +77,7 @@ interface HeroAdCampaignExpertProps {
      * Media aspect ratios for desktop and mobile breakpoints
      * @default { desktop: "vertical", mobile: "vertical" }
      */
-    mediaAspectRatios?: {
-        desktop: MediaAspectRatio;
-        mobile: MediaAspectRatio;
-    };
+    mediaAspectRatios?: ResponsiveMediaAspectRatioProps;
     /**
      * Direction configuration for desktop and mobile layouts
      * @default { desktop: 'mediaRight', mobile: 'mediaTop' }

package/dist/hero-ad-campaign-expert.d.ts

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-qC2HCInM.js';
+import { ResponsiveMediaAspectRatioProps } from './media-aspect-ratio.js';
 import { A as ActionConfig, M as MediaItem, O as OptixFlowConfig, h as DirectionConfig } from './blocks-DL92rOxr.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
 import '@page-speed/pressable';
 import '@opensite/hooks/usePlatformFromUrl';
 
-type MediaAspectRatio = "square" | "horizontal" | "vertical";
 interface HeroAdCampaignExpertProps {
     /**
      * Main heading content
@@ -77,10 +77,7 @@ interface HeroAdCampaignExpertProps {
      * Media aspect ratios for desktop and mobile breakpoints
      * @default { desktop: "vertical", mobile: "vertical" }
      */
-    mediaAspectRatios?: {
-        desktop: MediaAspectRatio;
-        mobile: MediaAspectRatio;
-    };
+    mediaAspectRatios?: ResponsiveMediaAspectRatioProps;
     /**
      * Direction configuration for desktop and mobile layouts
      * @default { desktop: 'mediaRight', mobile: 'mediaTop' }

package/dist/hero-ad-campaign-expert.js

@@ -3,20 +3,15 @@ import * as React4 from 'react';
 import React4__default, { useMemo } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Img } from '@page-speed/img';
 import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Pressable } from '@page-speed/pressable';
 
 // components/blocks/hero/hero-ad-campaign-expert.tsx
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
-function AspectRatio({
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(AspectRatioPrimitive.Root, { "data-slot": "aspect-ratio", ...props });
-}
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -425,6 +420,174 @@ var ContentGroup = React4.forwardRef(
   }
 );
 ContentGroup.displayName = "ContentGroup";
+function AspectRatio({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(AspectRatioPrimitive.Root, { "data-slot": "aspect-ratio", ...props });
+}
+var DEFAULT_DEVICE_ASPECT_RATIOS = {
+  desktop: "square",
+  mobile: "square"
+};
+var DEFAULT_MEDIA_CLASS_NAME = "size-full object-cover";
+var DEFAULT_FRAME_CLASS_NAME = "overflow-hidden";
+var DEFAULT_BREAKPOINT = "lg";
+var BREAKPOINT_VISIBILITY_CLASSES = {
+  sm: {
+    desktop: "hidden sm:block",
+    mobile: "sm:hidden"
+  },
+  md: {
+    desktop: "hidden md:block",
+    mobile: "md:hidden"
+  },
+  lg: {
+    desktop: "hidden lg:block",
+    mobile: "lg:hidden"
+  },
+  xl: {
+    desktop: "hidden xl:block",
+    mobile: "xl:hidden"
+  },
+  "2xl": {
+    desktop: "hidden 2xl:block",
+    mobile: "2xl:hidden"
+  }
+};
+var MEDIA_ASPECT_RATIOS = {
+  square: 1,
+  horizontal: 16 / 9,
+  vertical: 355 / 520
+};
+function resolveAspectRatio(ratio, fallback) {
+  const resolvedRatio = ratio ?? fallback;
+  if (typeof resolvedRatio === "number" && Number.isFinite(resolvedRatio) && resolvedRatio > 0) {
+    return resolvedRatio;
+  }
+  return MEDIA_ASPECT_RATIOS[resolvedRatio];
+}
+function hasRenderableMedia(mediaItem) {
+  return Boolean(mediaItem?.image?.src || mediaItem?.video?.src);
+}
+function renderMediaElement({
+  mediaItem,
+  optixFlowConfig,
+  mediaClassName,
+  imageClassName,
+  videoClassName
+}) {
+  if (!hasRenderableMedia(mediaItem)) {
+    return null;
+  }
+  if (mediaItem.video?.src) {
+    const { className: inlineVideoClassName, poster, ...videoProps } = mediaItem.video;
+    const posterFallback = poster ?? (typeof mediaItem.image?.src === "string" ? mediaItem.image.src : void 0);
+    return /* @__PURE__ */ jsx(
+      "video",
+      {
+        ...videoProps,
+        poster: posterFallback,
+        className: cn(
+          DEFAULT_MEDIA_CLASS_NAME,
+          mediaClassName,
+          videoClassName,
+          inlineVideoClassName
+        )
+      }
+    );
+  }
+  if (mediaItem.image?.src) {
+    const { className: inlineImageClassName, alt, src, ...imageProps } = mediaItem.image;
+    return /* @__PURE__ */ jsx(
+      Img,
+      {
+        ...imageProps,
+        src,
+        alt: alt ?? "",
+        className: cn(
+          DEFAULT_MEDIA_CLASS_NAME,
+          mediaClassName,
+          imageClassName,
+          inlineImageClassName
+        ),
+        optixFlowConfig
+      }
+    );
+  }
+  return null;
+}
+function MediaAspectRatio({
+  containerClassName,
+  mobileClassName,
+  desktopClassName,
+  frameClassName,
+  mobileFrameClassName,
+  desktopFrameClassName,
+  mediaClassName,
+  imageClassName,
+  videoClassName,
+  mediaItem,
+  optixFlowConfig,
+  deviceAspectRatios = DEFAULT_DEVICE_ASPECT_RATIOS,
+  breakpoint = DEFAULT_BREAKPOINT
+}) {
+  if (!hasRenderableMedia(mediaItem)) {
+    return null;
+  }
+  const ratios = {
+    desktop: resolveAspectRatio(
+      deviceAspectRatios.desktop,
+      DEFAULT_DEVICE_ASPECT_RATIOS.desktop
+    ),
+    mobile: resolveAspectRatio(
+      deviceAspectRatios.mobile,
+      DEFAULT_DEVICE_ASPECT_RATIOS.mobile
+    )
+  };
+  const sharedFrameClassName = cn(
+    DEFAULT_FRAME_CLASS_NAME,
+    frameClassName,
+    mediaItem.containerClassName
+  );
+  const visibilityClasses = BREAKPOINT_VISIBILITY_CLASSES[breakpoint];
+  return /* @__PURE__ */ jsxs("div", { className: containerClassName, "data-slot": "media-aspect-ratio", children: [
+    /* @__PURE__ */ jsx("div", { className: cn("relative", visibilityClasses.mobile, mobileClassName), children: /* @__PURE__ */ jsx(
+      AspectRatio,
+      {
+        ratio: ratios.mobile,
+        className: cn(sharedFrameClassName, mobileFrameClassName),
+        children: renderMediaElement({
+          mediaItem,
+          optixFlowConfig,
+          mediaClassName,
+          imageClassName,
+          videoClassName
+        })
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(visibilityClasses.desktop, desktopClassName),
+        style: { aspectRatio: String(ratios.desktop) },
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn("size-full", sharedFrameClassName, desktopFrameClassName),
+            "data-slot": "media-aspect-ratio-frame",
+            children: renderMediaElement({
+              mediaItem,
+              optixFlowConfig,
+              mediaClassName,
+              imageClassName,
+              videoClassName
+            })
+          }
+        )
+      }
+    )
+  ] });
+}
 var useResponsiveLayout = ({
   directionConfig = { desktop: "mediaRight", mobile: "mediaTop" }
 }) => {
@@ -499,11 +662,6 @@ function ActionComponent({ action }) {
     }
   );
 }
-var ASPECT_RATIOS = {
-  square: 1,
-  horizontal: 16 / 9,
-  vertical: 355 / 520
-};
 function HeroAdCampaignExpert({
   sectionId = "hero-ad-campaign-expert",
   heading,
@@ -582,36 +740,6 @@ function HeroAdCampaignExpert({
     descriptionClassName,
     renderActions
   ]);
-  const hasMedia = mediaItem?.image || mediaItem?.video;
-  const renderMedia = useMemo(() => {
-    if (!mediaItem) return null;
-    const { image, video } = mediaItem;
-    if (video) {
-      const { src, className: videoClassName, ...videoRest } = video;
-      return /* @__PURE__ */ jsx(
-        "video",
-        {
-          src,
-          className: cn("size-full object-cover", videoClassName),
-          ...videoRest
-        }
-      );
-    }
-    if (image) {
-      const { src, alt, className: imgClassName, ...imgRest } = image;
-      return /* @__PURE__ */ jsx(
-        Img,
-        {
-          src,
-          alt,
-          className: cn("size-full object-cover", imgClassName),
-          optixFlowConfig,
-          ...imgRest
-        }
-      );
-    }
-    return null;
-  }, [mediaItem, optixFlowConfig]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -640,38 +768,18 @@ function HeroAdCampaignExpert({
                 )
               }
             ),
-            hasMedia && /* @__PURE__ */ jsxs("div", { className: cn("relative flex w-full justify-center lg:w-1/2"), children: [
-              /* @__PURE__ */ jsx("div", { className: "relative h-auto w-[80%] max-w-[355px] lg:hidden", children: /* @__PURE__ */ jsx(
-                AspectRatio,
-                {
-                  ratio: ASPECT_RATIOS[mediaAspectRatios.mobile],
-                  className: cn(
-                    "rounded-xl shadow-2xl overflow-hidden",
-                    mediaItem?.containerClassName
-                  ),
-                  children: renderMedia
-                }
-              ) }),
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: "hidden lg:block max-h-[70dvh] w-auto",
-                  style: {
-                    aspectRatio: ASPECT_RATIOS[mediaAspectRatios.desktop]
-                  },
-                  children: /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      className: cn(
-                        "size-full rounded-xl shadow-2xl overflow-hidden",
-                        mediaItem?.containerClassName
-                      ),
-                      children: renderMedia
-                    }
-                  )
-                }
-              )
-            ] })
+            /* @__PURE__ */ jsx(
+              MediaAspectRatio,
+              {
+                containerClassName: "relative flex w-full justify-center lg:w-1/2",
+                desktopClassName: "max-h-[70dvh] w-auto",
+                mobileClassName: "h-auto w-[80%] max-w-[355px]",
+                frameClassName: "rounded-xl shadow-2xl",
+                mediaItem,
+                optixFlowConfig,
+                deviceAspectRatios: mediaAspectRatios
+              }
+            )
           ]
         }
       ) })