@opensite/ui 3.0.7 → 3.0.8

package/dist/hero-premium-split-avatars.cjs

@@ -8,6 +8,7 @@ var pressable = require('@page-speed/pressable');
 var AvatarPrimitive = require('@radix-ui/react-avatar');
 var jsxRuntime = require('react/jsx-runtime');
 var img = require('@page-speed/img');
+var AspectRatioPrimitive = require('@radix-ui/react-aspect-ratio');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -31,6 +32,7 @@ function _interopNamespace(e) {
 
 var React__default = /*#__PURE__*/_interopDefault(React);
 var AvatarPrimitive__namespace = /*#__PURE__*/_interopNamespace(AvatarPrimitive);
+var AspectRatioPrimitive__namespace = /*#__PURE__*/_interopNamespace(AspectRatioPrimitive);
 
 // components/blocks/hero/hero-premium-split-avatars.tsx
 function cn(...inputs) {
@@ -457,6 +459,174 @@ var Section = React__default.default.forwardRef(
   }
 );
 Section.displayName = "Section";
+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
+            })
+          }
+        )
+      }
+    )
+  ] });
+}
 function HeroPremiumSplitAvatars({
   sectionId = "hero-premium-split-avatars",
   brandName,
@@ -472,7 +642,7 @@ function HeroPremiumSplitAvatars({
   image,
   imageSlot,
   className,
-  spacing = "pt-28 pb-8 md:pt-32 md:pb-32",
+  spacing = "hero",
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   background,
   pattern,
@@ -481,8 +651,15 @@ function HeroPremiumSplitAvatars({
   headingClassName,
   descriptionClassName,
   imageClassName,
-  optixFlowConfig
+  optixFlowConfig,
+  mediaAspectRatios = { desktop: "vertical", mobile: "vertical" },
+  directionConfig = { desktop: "mediaRight", mobile: "mediaBottom" }
 }) {
+  const responsiveClassName = React.useMemo(() => {
+    const desktopOrder = directionConfig.desktop === "mediaRight" ? "md:flex-row" : "md:flex-row-reverse";
+    const mobileOrder = directionConfig.mobile === "mediaTop" ? "flex-col-reverse" : "flex-col";
+    return `${mobileOrder} ${desktopOrder}`;
+  }, [directionConfig.desktop, directionConfig.mobile]);
   const renderBrand = React.useMemo(() => {
     if (brandSlot) return brandSlot;
     return /* @__PURE__ */ jsxRuntime.jsxs("h1", { className: "text-4xl ", children: [
@@ -530,19 +707,31 @@ function HeroPremiumSplitAvatars({
     if (imageSlot) return imageSlot;
     if (!image) return null;
     return /* @__PURE__ */ jsxRuntime.jsx(
-      img.Img,
+      MediaAspectRatio,
       {
-        src: image.src,
-        alt: image.alt,
-        className: cn(
-          "h-full w-full md:w-1/2 object-cover block rounded-xl shadow-xl",
-          imageClassName,
-          image.className
-        ),
-        optixFlowConfig
+        breakpoint: "md",
+        containerClassName: "relative flex w-full justify-center md:w-1/2",
+        mobileClassName: "w-full",
+        desktopClassName: "w-full max-h-[70dvh]",
+        frameClassName: "rounded-xl shadow-xl",
+        imageClassName: cn("block", imageClassName),
+        mediaItem: {
+          image: {
+            ...image,
+            loading: "eager"
+          }
+        },
+        optixFlowConfig,
+        deviceAspectRatios: mediaAspectRatios
       }
     );
-  }, [imageSlot, image, imageClassName, optixFlowConfig]);
+  }, [
+    imageSlot,
+    image,
+    imageClassName,
+    optixFlowConfig,
+    mediaAspectRatios
+  ]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -553,27 +742,36 @@ function HeroPremiumSplitAvatars({
       patternOpacity,
       className: cn("relative flex items-center justify-center", className),
       containerClassName,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex w-full flex-col md:flex-row gap-8 md:gap-20", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full items-center justify-center lg:w-1/2", children: /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            className: cn(
-              "my-10 flex w-full flex-col gap-6 md:gap-24",
-              contentClassName
-            ),
-            children: [
-              renderBrand,
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 md:gap-8", children: [
-                heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-4xl lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-4xl lg:text-6xl", headingClassName), children: heading })),
-                description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-2.5 lg:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
-                renderAction
-              ] }),
-              renderAvatars
-            ]
-          }
-        ) }),
-        renderImage
-      ] })
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: cn(
+            "relative flex w-full gap-8 md:gap-20",
+            responsiveClassName
+          ),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full items-center justify-center lg:w-1/2", children: /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: cn(
+                  "my-10 flex w-full flex-col gap-6 md:gap-24",
+                  contentClassName
+                ),
+                children: [
+                  renderBrand,
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 md:gap-8", children: [
+                    heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-4xl lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-4xl lg:text-6xl", headingClassName), children: heading })),
+                    description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-2.5 lg:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+                    renderAction
+                  ] }),
+                  renderAvatars
+                ]
+              }
+            ) }),
+            renderImage
+          ]
+        }
+      )
     }
   );
 }

package/dist/hero-premium-split-avatars.d.cts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-D8cbIf_y.cjs';
-import { A as ActionConfig, I as ImageItem, O as OptixFlowConfig } from './blocks-DL92rOxr.cjs';
+import { ResponsiveMediaAspectRatioProps } from './media-aspect-ratio.cjs';
+import { A as ActionConfig, I as ImageItem, O as OptixFlowConfig, h as DirectionConfig } from './blocks-DL92rOxr.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
 import '@page-speed/pressable';
@@ -64,7 +65,8 @@ interface HeroPremiumSplitAvatarsProps {
     /**
      * Custom slot for image (overrides image prop)
      */
-    imageSlot?: React.ReactNode; /**
+    imageSlot?: React.ReactNode;
+    /**
      * Background style for the section
      */
     background?: SectionBackground;
@@ -110,7 +112,17 @@ interface HeroPremiumSplitAvatarsProps {
     optixFlowConfig?: OptixFlowConfig;
     /** Optional Section ID */
     sectionId?: string;
+    /**
+     * Media aspect ratios for desktop and mobile breakpoints
+     * @default { desktop: "vertical", mobile: "vertical" }
+     */
+    mediaAspectRatios?: ResponsiveMediaAspectRatioProps;
+    /**
+     * Direction configuration for desktop and mobile layouts
+     * @default { desktop: 'mediaRight', mobile: 'mediaBottom' }
+     */
+    directionConfig?: DirectionConfig;
 }
-declare function HeroPremiumSplitAvatars({ sectionId, brandName, brandSuffix, brandSlot, heading, description, action, actionSlot, avatars, avatarsSlot, socialProofText, image, imageSlot, className, spacing, containerClassName, background, pattern, patternOpacity, contentClassName, headingClassName, descriptionClassName, imageClassName, optixFlowConfig, }: HeroPremiumSplitAvatarsProps): React.JSX.Element;
+declare function HeroPremiumSplitAvatars({ sectionId, brandName, brandSuffix, brandSlot, heading, description, action, actionSlot, avatars, avatarsSlot, socialProofText, image, imageSlot, className, spacing, containerClassName, background, pattern, patternOpacity, contentClassName, headingClassName, descriptionClassName, imageClassName, optixFlowConfig, mediaAspectRatios, directionConfig, }: HeroPremiumSplitAvatarsProps): React.JSX.Element;
 
 export { HeroPremiumSplitAvatars, type HeroPremiumSplitAvatarsProps };

package/dist/hero-premium-split-avatars.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-qC2HCInM.js';
-import { A as ActionConfig, I as ImageItem, O as OptixFlowConfig } from './blocks-DL92rOxr.js';
+import { ResponsiveMediaAspectRatioProps } from './media-aspect-ratio.js';
+import { A as ActionConfig, I as ImageItem, O as OptixFlowConfig, h as DirectionConfig } from './blocks-DL92rOxr.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
 import '@page-speed/pressable';
@@ -64,7 +65,8 @@ interface HeroPremiumSplitAvatarsProps {
     /**
      * Custom slot for image (overrides image prop)
      */
-    imageSlot?: React.ReactNode; /**
+    imageSlot?: React.ReactNode;
+    /**
      * Background style for the section
      */
     background?: SectionBackground;
@@ -110,7 +112,17 @@ interface HeroPremiumSplitAvatarsProps {
     optixFlowConfig?: OptixFlowConfig;
     /** Optional Section ID */
     sectionId?: string;
+    /**
+     * Media aspect ratios for desktop and mobile breakpoints
+     * @default { desktop: "vertical", mobile: "vertical" }
+     */
+    mediaAspectRatios?: ResponsiveMediaAspectRatioProps;
+    /**
+     * Direction configuration for desktop and mobile layouts
+     * @default { desktop: 'mediaRight', mobile: 'mediaBottom' }
+     */
+    directionConfig?: DirectionConfig;
 }
-declare function HeroPremiumSplitAvatars({ sectionId, brandName, brandSuffix, brandSlot, heading, description, action, actionSlot, avatars, avatarsSlot, socialProofText, image, imageSlot, className, spacing, containerClassName, background, pattern, patternOpacity, contentClassName, headingClassName, descriptionClassName, imageClassName, optixFlowConfig, }: HeroPremiumSplitAvatarsProps): React.JSX.Element;
+declare function HeroPremiumSplitAvatars({ sectionId, brandName, brandSuffix, brandSlot, heading, description, action, actionSlot, avatars, avatarsSlot, socialProofText, image, imageSlot, className, spacing, containerClassName, background, pattern, patternOpacity, contentClassName, headingClassName, descriptionClassName, imageClassName, optixFlowConfig, mediaAspectRatios, directionConfig, }: HeroPremiumSplitAvatarsProps): React.JSX.Element;
 
 export { HeroPremiumSplitAvatars, type HeroPremiumSplitAvatarsProps };