@harshit-wander/component-lib 1.1.9 → 1.1.11

package/dist/index.d.cts

@@ -80,6 +80,24 @@ 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.
+     * Defaults to true to preserve standalone usage.
+     */
+    isActive?: boolean;
 }
 
 declare const EventVideoBanner: react.ForwardRefExoticComponent<EventVideoBannerProps & react.RefAttributes<HTMLDivElement>>;
@@ -213,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;
@@ -355,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 & {
@@ -486,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;
     /**
@@ -622,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,24 @@ 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.
+     * Defaults to true to preserve standalone usage.
+     */
+    isActive?: boolean;
 }
 
 declare const EventVideoBanner: react.ForwardRefExoticComponent<EventVideoBannerProps & react.RefAttributes<HTMLDivElement>>;
@@ -213,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;
@@ -355,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 & {
@@ -486,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;
     /**
@@ -622,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;