@harshit-wander/component-lib 1.1.10 → 1.1.12

package/dist/index.cjs

@@ -274,31 +274,65 @@ var DestinationCard = react.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 = react.forwardRef(
-  ({ imageUrl, alt, href, className, ...rest }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("shrink-0 w-full snap-start", className), ...rest, children: href ? /* @__PURE__ */ jsxRuntime.jsx("a", { href, className: frameClass, children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: imageUrl, alt, className: "block w-full h-full object-cover" }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: frameClass, children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: imageUrl, alt, className: "block w-full h-full object-cover" }) }) })
+  ({ imageUrl, alt, href, className, ...rest }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("shrink-0 w-full snap-start", className), ...rest, children: href ? /* @__PURE__ */ jsxRuntime.jsx("a", { href, className: frameClass, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "img",
+    {
+      src: imageUrl,
+      alt,
+      loading: "lazy",
+      decoding: "async",
+      className: "block w-full h-full object-cover"
+    }
+  ) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: frameClass, children: /* @__PURE__ */ jsxRuntime.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 = react.forwardRef(
-  ({ posterUrl, videoUrl, alt, href, isActive = true, className, ...rest }, ref) => {
+  ({
+    posterUrl,
+    videoUrl,
+    alt,
+    href,
+    mobileVideoUrl,
+    mobilePosterUrl,
+    isActive = true,
+    className,
+    ...rest
+  }, ref) => {
     const videoRef = react.useRef(null);
     react.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;
       });
@@ -307,12 +341,11 @@ var EventVideoBanner = react.forwardRef(
         const stored = video._hls;
         stored?.destroy();
       };
-    }, [videoUrl, isActive]);
+    }, [videoUrl, mobileVideoUrl, posterUrl, mobilePosterUrl, isActive]);
     const mediaEl = isActive ? /* @__PURE__ */ jsxRuntime.jsx(
       "video",
       {
         ref: videoRef,
-        src: videoUrl?.includes(".m3u8") ? void 0 : videoUrl,
         poster: posterUrl,
         "aria-label": alt,
         muted: true,
@@ -322,7 +355,13 @@ var EventVideoBanner = react.forwardRef(
         preload: "metadata",
         className: mediaClass
       }
-    ) : /* @__PURE__ */ jsxRuntime.jsx("img", { src: posterUrl, alt, loading: "lazy", decoding: "async", className: mediaClass });
+    ) : (
+      // <picture> lets the browser pick mobile/desktop poster via CSS, no JS
+      /* @__PURE__ */ jsxRuntime.jsxs("picture", { children: [
+        mobilePosterUrl ? /* @__PURE__ */ jsxRuntime.jsx("source", { media: "(max-width: 767px)", srcSet: mobilePosterUrl }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx("img", { src: posterUrl, alt, loading: "lazy", decoding: "async", className: mediaClass })
+      ] })
+    );
     return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("shrink-0 w-full snap-start", className), ...rest, children: href ? /* @__PURE__ */ jsxRuntime.jsx("a", { href, className: frameClass2, children: mediaEl }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: frameClass2, children: mediaEl }) });
   }
 );
@@ -396,7 +435,16 @@ var cardClass2 = "shrink-0 w-[132px] flex flex-col bg-surface border border-bord
 var ExploreCard = react.forwardRef(
   ({ image, alt, label, href, className, ...rest }, ref) => {
     const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("img", { src: image, alt, className: "block w-full h-[102px] object-cover" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "img",
+        {
+          src: image,
+          alt,
+          loading: "lazy",
+          decoding: "async",
+          className: "block w-full h-[102px] object-cover"
+        }
+      ),
       /* @__PURE__ */ jsxRuntime.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) {
@@ -519,7 +567,16 @@ var GalleryPhoto = react.forwardRef(
       ),
       ...rest,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("img", { src: image, alt, className: "block w-full h-full object-cover" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            src: image,
+            alt,
+            loading: "lazy",
+            decoding: "async",
+            className: "block w-full h-full object-cover"
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
             "span",
@@ -775,7 +832,7 @@ var TestimonialCard = react.forwardRef(
   ({ thumbnail, thumbnailAlt, logo, logoAlt, caption, videoHref, onPlayClick, className, ...rest }, ref) => {
     const playLabel = `Play testimonial: ${caption}`;
     const inner = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("img", { src: thumbnail, alt: thumbnailAlt }),
+      /* @__PURE__ */ jsxRuntime.jsx("img", { src: thumbnail, alt: thumbnailAlt, loading: "lazy", decoding: "async" }),
       /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(PlaySvg, {}) })
     ] });
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -810,7 +867,16 @@ var TestimonialCard = react.forwardRef(
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-sm w-full py-md", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("img", { src: logo, alt: logoAlt, className: "w-[60px] h-[60px] object-contain shrink-0" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "img",
+              {
+                src: logo,
+                alt: logoAlt,
+                loading: "lazy",
+                decoding: "async",
+                className: "w-[60px] h-[60px] object-contain shrink-0"
+              }
+            ),
             /* @__PURE__ */ jsxRuntime.jsx("p", { className: "m-0 text-md font-medium leading-8 text-secondary", children: caption })
           ] })
         ]
@@ -821,17 +887,21 @@ var TestimonialCard = react.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 = react.forwardRef(
-  ({ image, alt, destination, startingPrice, href, className, ...rest }, ref) => {
+  ({ image, mobileImage, alt, destination, startingPrice, href, className, ...rest }, ref) => {
     const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "span",
-        {
-          role: "img",
-          "aria-label": alt,
-          className: "absolute inset-0 bg-cover bg-center pointer-events-none",
-          style: { backgroundImage: `url(${image})` }
-        }
-      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("picture", { className: "absolute inset-0 pointer-events-none", children: [
+        mobileImage ? /* @__PURE__ */ jsxRuntime.jsx("source", { media: "(max-width: 767px)", srcSet: mobileImage }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            src: image,
+            alt,
+            loading: "lazy",
+            decoding: "async",
+            className: "absolute inset-0 w-full h-full object-cover"
+          }
+        )
+      ] }),
       /* @__PURE__ */ jsxRuntime.jsx(
         "span",
         {
@@ -1684,6 +1754,8 @@ var EventCarousel = react.forwardRef(
                   {
                     posterUrl: event.posterUrl,
                     videoUrl: event.videoUrl,
+                    mobileVideoUrl: event.mobileVideoUrl,
+                    mobilePosterUrl: event.mobilePosterUrl,
                     alt: event.alt,
                     href: event.href,
                     isActive: index === activeIndex
@@ -2228,9 +2300,28 @@ var useTypewriter = (phrases, options) => {
   return text;
 };
 var HomeHero = react.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 = react.useRef(null);
+    react.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__ */ jsxRuntime.jsxs(
       "section",
       {
@@ -2241,6 +2332,7 @@ var HomeHero = react.forwardRef(
           /* @__PURE__ */ jsxRuntime.jsx(
             "video",
             {
+              ref: videoRef,
               src: videoUrl,
               poster: posterUrl,
               muted: true,
@@ -2864,6 +2956,7 @@ var TripsCategorySection = react.forwardRef(
                   TripCategoryCard,
                   {
                     image: trip.image,
+                    mobileImage: trip.mobileImage,
                     alt: trip.alt,
                     destination: trip.destination,
                     startingPrice: trip.startingPrice,
@@ -2919,6 +3012,7 @@ var TripsCategorySection = react.forwardRef(
                     TripCategoryCard,
                     {
                       image: trip.image,
+                      mobileImage: trip.mobileImage,
                       alt: trip.alt,
                       destination: trip.destination,
                       startingPrice: trip.startingPrice,