@harshit-wander/component-lib 1.1.10 → 1.1.11

package/dist/index.d.cts

@@ -80,6 +80,18 @@ interface EventVideoBannerProps extends HTMLAttributes<HTMLElement> {
     videoUrl: string;
     alt: string;
     href?: string | undefined;
+    /**
+     * Optional mobile-specific video source. When the viewport is <= 767px,
+     * EventVideoBanner uses this instead of `videoUrl`. The selection happens
+     * in a client-only effect, so no desktop bytes are requested on mobile.
+     */
+    mobileVideoUrl?: string | undefined;
+    /**
+     * Optional mobile-specific poster image. Used in the inactive (poster-only)
+     * state via a `<picture>` element with a media-query <source>, so the
+     * browser fetches the smallest variant for the active viewport.
+     */
+    mobilePosterUrl?: string | undefined;
     /**
      * When false, renders only the poster image (no <video> element, no HLS load).
      * Used by EventCarousel to avoid loading every video in the carousel at once.
@@ -219,6 +231,12 @@ declare const TestimonialCard: react.ForwardRefExoticComponent<TestimonialCardPr
 
 interface TripCategoryCardProps extends HTMLAttributes<HTMLElement> {
     image: string;
+    /**
+     * Optional mobile-specific image. When provided, the card emits a
+     * `<picture>` with a `(max-width: 767px)` source so narrow viewports
+     * fetch the smaller variant. No JS, no hydration mismatch.
+     */
+    mobileImage?: string | undefined;
     alt: string;
     destination: string;
     startingPrice: string;
@@ -361,6 +379,9 @@ interface EventCarouselVideoItem {
     videoUrl: string;
     alt: string;
     href?: string | undefined;
+    /** Optional viewport-specific overrides used at <= 767px. */
+    mobileVideoUrl?: string | undefined;
+    mobilePosterUrl?: string | undefined;
 }
 type BaseProps = HTMLAttributes<HTMLElement>;
 type EventCarouselProps = (BaseProps & {
@@ -492,6 +513,13 @@ interface HomeHeroProps extends HTMLAttributes<HTMLElement> {
     videoUrl: string;
     /** Poster image URL shown before the video loads and on browsers that block autoplay. */
     posterUrl: string;
+    /**
+     * Optional mobile-specific poster. When provided, the component swaps the
+     * `<video poster>` attribute to this URL on viewports <= 767px in a
+     * client-only effect. Pair with `<link rel="preload" imageSrcSet>` in the
+     * page head to actually save bytes on mobile.
+     */
+    mobilePosterUrl?: string | undefined;
     /** Static heading. White, bold, large. */
     title: string;
     /**
@@ -628,6 +656,8 @@ interface TripsCategorySectionCta {
 }
 interface TripsCategoryItem {
     image: string;
+    /** Optional mobile-specific image for the destination card. */
+    mobileImage?: string | undefined;
     alt: string;
     destination: string;
     startingPrice: string;

package/dist/index.d.ts

@@ -80,6 +80,18 @@ interface EventVideoBannerProps extends HTMLAttributes<HTMLElement> {
     videoUrl: string;
     alt: string;
     href?: string | undefined;
+    /**
+     * Optional mobile-specific video source. When the viewport is <= 767px,
+     * EventVideoBanner uses this instead of `videoUrl`. The selection happens
+     * in a client-only effect, so no desktop bytes are requested on mobile.
+     */
+    mobileVideoUrl?: string | undefined;
+    /**
+     * Optional mobile-specific poster image. Used in the inactive (poster-only)
+     * state via a `<picture>` element with a media-query <source>, so the
+     * browser fetches the smallest variant for the active viewport.
+     */
+    mobilePosterUrl?: string | undefined;
     /**
      * When false, renders only the poster image (no <video> element, no HLS load).
      * Used by EventCarousel to avoid loading every video in the carousel at once.
@@ -219,6 +231,12 @@ declare const TestimonialCard: react.ForwardRefExoticComponent<TestimonialCardPr
 
 interface TripCategoryCardProps extends HTMLAttributes<HTMLElement> {
     image: string;
+    /**
+     * Optional mobile-specific image. When provided, the card emits a
+     * `<picture>` with a `(max-width: 767px)` source so narrow viewports
+     * fetch the smaller variant. No JS, no hydration mismatch.
+     */
+    mobileImage?: string | undefined;
     alt: string;
     destination: string;
     startingPrice: string;
@@ -361,6 +379,9 @@ interface EventCarouselVideoItem {
     videoUrl: string;
     alt: string;
     href?: string | undefined;
+    /** Optional viewport-specific overrides used at <= 767px. */
+    mobileVideoUrl?: string | undefined;
+    mobilePosterUrl?: string | undefined;
 }
 type BaseProps = HTMLAttributes<HTMLElement>;
 type EventCarouselProps = (BaseProps & {
@@ -492,6 +513,13 @@ interface HomeHeroProps extends HTMLAttributes<HTMLElement> {
     videoUrl: string;
     /** Poster image URL shown before the video loads and on browsers that block autoplay. */
     posterUrl: string;
+    /**
+     * Optional mobile-specific poster. When provided, the component swaps the
+     * `<video poster>` attribute to this URL on viewports <= 767px in a
+     * client-only effect. Pair with `<link rel="preload" imageSrcSet>` in the
+     * page head to actually save bytes on mobile.
+     */
+    mobilePosterUrl?: string | undefined;
     /** Static heading. White, bold, large. */
     title: string;
     /**
@@ -628,6 +656,8 @@ interface TripsCategorySectionCta {
 }
 interface TripsCategoryItem {
     image: string;
+    /** Optional mobile-specific image for the destination card. */
+    mobileImage?: string | undefined;
     alt: string;
     destination: string;
     startingPrice: string;

package/dist/index.js

@@ -272,31 +272,65 @@ var DestinationCard = forwardRef(
 DestinationCard.displayName = "DestinationCard";
 var frameClass = "block w-full h-[300px] overflow-hidden rounded-md no-underline text-inherit focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2";
 var EventBanner = forwardRef(
-  ({ imageUrl, alt, href, className, ...rest }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("shrink-0 w-full snap-start", className), ...rest, children: href ? /* @__PURE__ */ jsx("a", { href, className: frameClass, children: /* @__PURE__ */ jsx("img", { src: imageUrl, alt, className: "block w-full h-full object-cover" }) }) : /* @__PURE__ */ jsx("div", { className: frameClass, children: /* @__PURE__ */ jsx("img", { src: imageUrl, alt, className: "block w-full h-full object-cover" }) }) })
+  ({ imageUrl, alt, href, className, ...rest }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("shrink-0 w-full snap-start", className), ...rest, children: href ? /* @__PURE__ */ jsx("a", { href, className: frameClass, children: /* @__PURE__ */ jsx(
+    "img",
+    {
+      src: imageUrl,
+      alt,
+      loading: "lazy",
+      decoding: "async",
+      className: "block w-full h-full object-cover"
+    }
+  ) }) : /* @__PURE__ */ jsx("div", { className: frameClass, children: /* @__PURE__ */ jsx(
+    "img",
+    {
+      src: imageUrl,
+      alt,
+      loading: "lazy",
+      decoding: "async",
+      className: "block w-full h-full object-cover"
+    }
+  ) }) })
 );
 EventBanner.displayName = "EventBanner";
 var frameClass2 = "block w-full h-[300px] overflow-hidden rounded-md no-underline text-inherit focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2";
 var mediaClass = "block w-full h-full object-cover";
 var EventVideoBanner = forwardRef(
-  ({ posterUrl, videoUrl, alt, href, isActive = true, className, ...rest }, ref) => {
+  ({
+    posterUrl,
+    videoUrl,
+    alt,
+    href,
+    mobileVideoUrl,
+    mobilePosterUrl,
+    isActive = true,
+    className,
+    ...rest
+  }, ref) => {
     const videoRef = useRef(null);
     useEffect(() => {
       if (!isActive) return;
       const video = videoRef.current;
       if (!video || !videoUrl) return;
-      if (!videoUrl.includes(".m3u8")) {
-        video.src = videoUrl;
+      const isMobileViewport = typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(max-width: 767px)").matches;
+      const activeUrl = isMobileViewport && mobileVideoUrl ? mobileVideoUrl : videoUrl;
+      const activePoster = isMobileViewport && mobilePosterUrl ? mobilePosterUrl : posterUrl;
+      if (activePoster && video.poster !== activePoster) {
+        video.poster = activePoster;
+      }
+      if (!activeUrl.includes(".m3u8")) {
+        video.src = activeUrl;
         return;
       }
       if (video.canPlayType("application/vnd.apple.mpegurl")) {
-        video.src = videoUrl;
+        video.src = activeUrl;
         return;
       }
       let cancelled = false;
       import('hls.js').then(({ default: Hls }) => {
         if (cancelled || !Hls.isSupported()) return;
         const hls = new Hls({ autoStartLoad: true, startLevel: -1 });
-        hls.loadSource(videoUrl);
+        hls.loadSource(activeUrl);
         hls.attachMedia(video);
         video._hls = hls;
       });
@@ -305,12 +339,11 @@ var EventVideoBanner = forwardRef(
         const stored = video._hls;
         stored?.destroy();
       };
-    }, [videoUrl, isActive]);
+    }, [videoUrl, mobileVideoUrl, posterUrl, mobilePosterUrl, isActive]);
     const mediaEl = isActive ? /* @__PURE__ */ jsx(
       "video",
       {
         ref: videoRef,
-        src: videoUrl?.includes(".m3u8") ? void 0 : videoUrl,
         poster: posterUrl,
         "aria-label": alt,
         muted: true,
@@ -320,7 +353,13 @@ var EventVideoBanner = forwardRef(
         preload: "metadata",
         className: mediaClass
       }
-    ) : /* @__PURE__ */ jsx("img", { src: posterUrl, alt, loading: "lazy", decoding: "async", className: mediaClass });
+    ) : (
+      // <picture> lets the browser pick mobile/desktop poster via CSS, no JS
+      /* @__PURE__ */ jsxs("picture", { children: [
+        mobilePosterUrl ? /* @__PURE__ */ jsx("source", { media: "(max-width: 767px)", srcSet: mobilePosterUrl }) : null,
+        /* @__PURE__ */ jsx("img", { src: posterUrl, alt, loading: "lazy", decoding: "async", className: mediaClass })
+      ] })
+    );
     return /* @__PURE__ */ jsx("div", { ref, className: cn("shrink-0 w-full snap-start", className), ...rest, children: href ? /* @__PURE__ */ jsx("a", { href, className: frameClass2, children: mediaEl }) : /* @__PURE__ */ jsx("div", { className: frameClass2, children: mediaEl }) });
   }
 );
@@ -394,7 +433,16 @@ var cardClass2 = "shrink-0 w-[132px] flex flex-col bg-surface border border-bord
 var ExploreCard = forwardRef(
   ({ image, alt, label, href, className, ...rest }, ref) => {
     const content = /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("img", { src: image, alt, className: "block w-full h-[102px] object-cover" }),
+      /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: image,
+          alt,
+          loading: "lazy",
+          decoding: "async",
+          className: "block w-full h-[102px] object-cover"
+        }
+      ),
       /* @__PURE__ */ jsx("span", { className: "flex items-center justify-center min-h-[56px] py-sm px-md text-md font-medium leading-card text-secondary text-center", children: label })
     ] });
     if (href) {
@@ -517,7 +565,16 @@ var GalleryPhoto = forwardRef(
       ),
       ...rest,
       children: [
-        /* @__PURE__ */ jsx("img", { src: image, alt, className: "block w-full h-full object-cover" }),
+        /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: image,
+            alt,
+            loading: "lazy",
+            decoding: "async",
+            className: "block w-full h-full object-cover"
+          }
+        ),
         /* @__PURE__ */ jsxs("div", { className: "absolute bottom-12 left-sm inline-flex items-center gap-xs py-[2px] px-[6px] bg-black/40 border-[0.5px] border-secondary rounded-full text-on-dark text-xs font-normal leading-4 max-md:bottom-8", children: [
           /* @__PURE__ */ jsx(
             "span",
@@ -773,7 +830,7 @@ var TestimonialCard = forwardRef(
   ({ thumbnail, thumbnailAlt, logo, logoAlt, caption, videoHref, onPlayClick, className, ...rest }, ref) => {
     const playLabel = `Play testimonial: ${caption}`;
     const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("img", { src: thumbnail, alt: thumbnailAlt }),
+      /* @__PURE__ */ jsx("img", { src: thumbnail, alt: thumbnailAlt, loading: "lazy", decoding: "async" }),
       /* @__PURE__ */ jsx("span", { className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 inline-flex items-center justify-center w-[56px] h-[56px] pointer-events-none z-[1] text-white", children: /* @__PURE__ */ jsx(PlaySvg, {}) })
     ] });
     return /* @__PURE__ */ jsxs(
@@ -808,7 +865,16 @@ var TestimonialCard = forwardRef(
             }
           ),
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-sm w-full py-md", children: [
-            /* @__PURE__ */ jsx("img", { src: logo, alt: logoAlt, className: "w-[60px] h-[60px] object-contain shrink-0" }),
+            /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: logo,
+                alt: logoAlt,
+                loading: "lazy",
+                decoding: "async",
+                className: "w-[60px] h-[60px] object-contain shrink-0"
+              }
+            ),
             /* @__PURE__ */ jsx("p", { className: "m-0 text-md font-medium leading-8 text-secondary", children: caption })
           ] })
         ]
@@ -819,17 +885,21 @@ var TestimonialCard = forwardRef(
 TestimonialCard.displayName = "TestimonialCard";
 var cardClass4 = "relative flex flex-col justify-end shrink-0 w-[200px] h-[316px] p-[20px] border-2 border-surface rounded-lg overflow-hidden no-underline text-inherit snap-start focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2";
 var TripCategoryCard = forwardRef(
-  ({ image, alt, destination, startingPrice, href, className, ...rest }, ref) => {
+  ({ image, mobileImage, alt, destination, startingPrice, href, className, ...rest }, ref) => {
     const content = /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(
-        "span",
-        {
-          role: "img",
-          "aria-label": alt,
-          className: "absolute inset-0 bg-cover bg-center pointer-events-none",
-          style: { backgroundImage: `url(${image})` }
-        }
-      ),
+      /* @__PURE__ */ jsxs("picture", { className: "absolute inset-0 pointer-events-none", children: [
+        mobileImage ? /* @__PURE__ */ jsx("source", { media: "(max-width: 767px)", srcSet: mobileImage }) : null,
+        /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: image,
+            alt,
+            loading: "lazy",
+            decoding: "async",
+            className: "absolute inset-0 w-full h-full object-cover"
+          }
+        )
+      ] }),
       /* @__PURE__ */ jsx(
         "span",
         {
@@ -1682,6 +1752,8 @@ var EventCarousel = forwardRef(
                   {
                     posterUrl: event.posterUrl,
                     videoUrl: event.videoUrl,
+                    mobileVideoUrl: event.mobileVideoUrl,
+                    mobilePosterUrl: event.mobilePosterUrl,
                     alt: event.alt,
                     href: event.href,
                     isActive: index === activeIndex
@@ -2226,9 +2298,28 @@ var useTypewriter = (phrases, options) => {
   return text;
 };
 var HomeHero = forwardRef(
-  ({ videoUrl, posterUrl, title, cyclingPhrases, typewriter, reviews, className, ...rest }, ref) => {
+  ({
+    videoUrl,
+    posterUrl,
+    mobilePosterUrl,
+    title,
+    cyclingPhrases,
+    typewriter,
+    reviews,
+    className,
+    ...rest
+  }, ref) => {
     const currentPhrase = useTypewriter(cyclingPhrases, typewriter);
     const hasReviews = reviews !== void 0 && reviews.length > 0;
+    const videoRef = useRef(null);
+    useEffect(() => {
+      const video = videoRef.current;
+      if (!video || !mobilePosterUrl) return;
+      if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
+      if (window.matchMedia("(max-width: 767px)").matches) {
+        video.poster = mobilePosterUrl;
+      }
+    }, [mobilePosterUrl]);
     return /* @__PURE__ */ jsxs(
       "section",
       {
@@ -2239,6 +2330,7 @@ var HomeHero = forwardRef(
           /* @__PURE__ */ jsx(
             "video",
             {
+              ref: videoRef,
               src: videoUrl,
               poster: posterUrl,
               muted: true,
@@ -2862,6 +2954,7 @@ var TripsCategorySection = forwardRef(
                   TripCategoryCard,
                   {
                     image: trip.image,
+                    mobileImage: trip.mobileImage,
                     alt: trip.alt,
                     destination: trip.destination,
                     startingPrice: trip.startingPrice,
@@ -2917,6 +3010,7 @@ var TripsCategorySection = forwardRef(
                     TripCategoryCard,
                     {
                       image: trip.image,
+                      mobileImage: trip.mobileImage,
                       alt: trip.alt,
                       destination: trip.destination,
                       startingPrice: trip.startingPrice,