@opensite/ui 3.0.6 → 3.0.8

package/dist/index.js

@@ -8,6 +8,7 @@ import { AnimatePresence, motion } from 'framer-motion';
 import { useOnClickOutside } from '@opensite/hooks/useOnClickOutside';
 import { AnimatePresence as AnimatePresence$1, motion as motion$1 } from 'motion/react';
 import { Img } from '@page-speed/img';
+import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';
 import { Slot } from '@radix-ui/react-slot';
 import { Pressable, buttonVariants } from '@page-speed/pressable';
 export { Pressable } from '@page-speed/pressable';
@@ -957,6 +958,174 @@ var ImageSlider = ({
     }
   );
 };
+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
+            })
+          }
+        )
+      }
+    )
+  ] });
+}
 function Button({
   className,
   variant = "default",
@@ -6653,4 +6822,4 @@ var useResponsiveLayout = ({
   return { responsiveClassName };
 };
 
-export { AboutCultureTabs, AboutExpandableValues, AboutMissionPrinciples, AboutSplitHero, AlternatingBlocks, AnimatedDialog, Badge, BannerAnnouncementDismissible, BannerCountdownSale, BannerDeliveryCountdown, BannerEventPromo, BannerFloatingOffer, BannerGdprRights, BannerPrivacyNotice, BannerPromoCta, BannerSocialFollow, BannerSurveyIncentive, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CarouselPagination, CommunityInitiatives, Container, DynamicIcon, FooterAnimatedSocial, FooterBackgroundCard, FooterBrandDescription, FooterContactCard, FooterCtaBanner, FooterCtaSocial, FooterLinksGrid, FooterNavSocial, FooterNewsletterGrid, FooterNewsletterMinimal, FooterSimpleCentered, FooterSocialApps, FooterSocialNewsletter, ImageSlider, MediaHoverCtas, PageHeroBanner, PaymentPlatformIcon, Popover, PopoverContent, PopoverTrigger, Section, SocialLinkIcon, StarRating, cn, getAccentColor, getBorderColor, getNestedCardBg, getNestedCardTextColor, getTextColor, useResponsiveLayout };
+export { AboutCultureTabs, AboutExpandableValues, AboutMissionPrinciples, AboutSplitHero, AlternatingBlocks, AnimatedDialog, Badge, BannerAnnouncementDismissible, BannerCountdownSale, BannerDeliveryCountdown, BannerEventPromo, BannerFloatingOffer, BannerGdprRights, BannerPrivacyNotice, BannerPromoCta, BannerSocialFollow, BannerSurveyIncentive, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CarouselPagination, CommunityInitiatives, Container, DynamicIcon, FooterAnimatedSocial, FooterBackgroundCard, FooterBrandDescription, FooterContactCard, FooterCtaBanner, FooterCtaSocial, FooterLinksGrid, FooterNavSocial, FooterNewsletterGrid, FooterNewsletterMinimal, FooterSimpleCentered, FooterSocialApps, FooterSocialNewsletter, ImageSlider, MediaAspectRatio, MediaHoverCtas, PageHeroBanner, PaymentPlatformIcon, Popover, PopoverContent, PopoverTrigger, Section, SocialLinkIcon, StarRating, cn, getAccentColor, getBorderColor, getNestedCardBg, getNestedCardTextColor, getTextColor, useResponsiveLayout };

package/dist/media-aspect-ratio.cjs

@@ -0,0 +1,203 @@
+'use strict';
+
+var img = require('@page-speed/img');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var AspectRatioPrimitive = require('@radix-ui/react-aspect-ratio');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var AspectRatioPrimitive__namespace = /*#__PURE__*/_interopNamespace(AspectRatioPrimitive);
+
+// components/ui/media-aspect-ratio.tsx
+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 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
+            })
+          }
+        )
+      }
+    )
+  ] });
+}
+
+exports.MEDIA_ASPECT_RATIOS = MEDIA_ASPECT_RATIOS;
+exports.MediaAspectRatio = MediaAspectRatio;

package/dist/media-aspect-ratio.d.cts

@@ -0,0 +1,75 @@
+import * as React from 'react';
+import { M as MediaItem, O as OptixFlowConfig } from './blocks-DL92rOxr.cjs';
+import 'class-variance-authority';
+import '@page-speed/pressable';
+import '@opensite/hooks/usePlatformFromUrl';
+
+type MediaAspectRatioVariant = "square" | "horizontal" | "vertical" | number;
+type MediaAspectRatioBreakpoint = "sm" | "md" | "lg" | "xl" | "2xl";
+interface ResponsiveMediaAspectRatioProps {
+    desktop?: MediaAspectRatioVariant;
+    mobile?: MediaAspectRatioVariant;
+}
+interface MediaAspectRatioProps {
+    /**
+     * Shared wrapper for the mobile + desktop viewport containers.
+     */
+    containerClassName?: string;
+    /**
+     * Mobile-only viewport wrapper classes.
+     */
+    mobileClassName?: string;
+    /**
+     * Desktop-only viewport wrapper classes.
+     */
+    desktopClassName?: string;
+    /**
+     * Shared frame classes applied to the aspect-ratio container for both viewports.
+     * Useful for radius, shadow, borders, and overflow behavior.
+     */
+    frameClassName?: string;
+    /**
+     * Mobile-only frame classes.
+     */
+    mobileFrameClassName?: string;
+    /**
+     * Desktop-only frame classes.
+     */
+    desktopFrameClassName?: string;
+    /**
+     * Shared image/video element classes.
+     * Defaults are applied first so overrides can be passed here or through `mediaItem`.
+     */
+    mediaClassName?: string;
+    /**
+     * Additional image-only classes.
+     */
+    imageClassName?: string;
+    /**
+     * Additional video-only classes.
+     */
+    videoClassName?: string;
+    /**
+     * Standardized media payload used across blocks.
+     */
+    mediaItem?: MediaItem;
+    /**
+     * Optional OptixFlow image optimization config.
+     */
+    optixFlowConfig?: OptixFlowConfig;
+    /**
+     * Responsive aspect-ratio values.
+     * @default { desktop: "square", mobile: "square" }
+     */
+    deviceAspectRatios?: ResponsiveMediaAspectRatioProps;
+    /**
+     * Breakpoint where the component switches from the mobile viewport wrapper
+     * to the desktop viewport wrapper.
+     * @default "lg"
+     */
+    breakpoint?: MediaAspectRatioBreakpoint;
+}
+declare const MEDIA_ASPECT_RATIOS: Record<Exclude<MediaAspectRatioVariant, number>, number>;
+declare function MediaAspectRatio({ containerClassName, mobileClassName, desktopClassName, frameClassName, mobileFrameClassName, desktopFrameClassName, mediaClassName, imageClassName, videoClassName, mediaItem, optixFlowConfig, deviceAspectRatios, breakpoint, }: MediaAspectRatioProps): React.JSX.Element | null;
+
+export { MEDIA_ASPECT_RATIOS, MediaAspectRatio, type MediaAspectRatioBreakpoint, type MediaAspectRatioProps, type MediaAspectRatioVariant, type ResponsiveMediaAspectRatioProps };

package/dist/media-aspect-ratio.d.ts

@@ -0,0 +1,75 @@
+import * as React from 'react';
+import { M as MediaItem, O as OptixFlowConfig } from './blocks-DL92rOxr.js';
+import 'class-variance-authority';
+import '@page-speed/pressable';
+import '@opensite/hooks/usePlatformFromUrl';
+
+type MediaAspectRatioVariant = "square" | "horizontal" | "vertical" | number;
+type MediaAspectRatioBreakpoint = "sm" | "md" | "lg" | "xl" | "2xl";
+interface ResponsiveMediaAspectRatioProps {
+    desktop?: MediaAspectRatioVariant;
+    mobile?: MediaAspectRatioVariant;
+}
+interface MediaAspectRatioProps {
+    /**
+     * Shared wrapper for the mobile + desktop viewport containers.
+     */
+    containerClassName?: string;
+    /**
+     * Mobile-only viewport wrapper classes.
+     */
+    mobileClassName?: string;
+    /**
+     * Desktop-only viewport wrapper classes.
+     */
+    desktopClassName?: string;
+    /**
+     * Shared frame classes applied to the aspect-ratio container for both viewports.
+     * Useful for radius, shadow, borders, and overflow behavior.
+     */
+    frameClassName?: string;
+    /**
+     * Mobile-only frame classes.
+     */
+    mobileFrameClassName?: string;
+    /**
+     * Desktop-only frame classes.
+     */
+    desktopFrameClassName?: string;
+    /**
+     * Shared image/video element classes.
+     * Defaults are applied first so overrides can be passed here or through `mediaItem`.
+     */
+    mediaClassName?: string;
+    /**
+     * Additional image-only classes.
+     */
+    imageClassName?: string;
+    /**
+     * Additional video-only classes.
+     */
+    videoClassName?: string;
+    /**
+     * Standardized media payload used across blocks.
+     */
+    mediaItem?: MediaItem;
+    /**
+     * Optional OptixFlow image optimization config.
+     */
+    optixFlowConfig?: OptixFlowConfig;
+    /**
+     * Responsive aspect-ratio values.
+     * @default { desktop: "square", mobile: "square" }
+     */
+    deviceAspectRatios?: ResponsiveMediaAspectRatioProps;
+    /**
+     * Breakpoint where the component switches from the mobile viewport wrapper
+     * to the desktop viewport wrapper.
+     * @default "lg"
+     */
+    breakpoint?: MediaAspectRatioBreakpoint;
+}
+declare const MEDIA_ASPECT_RATIOS: Record<Exclude<MediaAspectRatioVariant, number>, number>;
+declare function MediaAspectRatio({ containerClassName, mobileClassName, desktopClassName, frameClassName, mobileFrameClassName, desktopFrameClassName, mediaClassName, imageClassName, videoClassName, mediaItem, optixFlowConfig, deviceAspectRatios, breakpoint, }: MediaAspectRatioProps): React.JSX.Element | null;
+
+export { MEDIA_ASPECT_RATIOS, MediaAspectRatio, type MediaAspectRatioBreakpoint, type MediaAspectRatioProps, type MediaAspectRatioVariant, type ResponsiveMediaAspectRatioProps };