@planetaexo/design-system 0.76.0 → 0.77.1

package/dist/index.d.cts

@@ -3626,6 +3626,17 @@ interface TripHeaderChip {
 interface TripHeaderProps {
     /** Hero image array — shows a carousel when more than one image */
     images: string[];
+    /**
+     * Responsive `srcSet`/`sizes` for the FIRST hero image (the LCP element),
+     * letting phones fetch a smaller width than the full-bleed desktop cover.
+     * Applied to the video poster and to carousel slide 0 only; the off-screen
+     * slides keep their single `images[i]` src. Omit for the legacy single-src
+     * behaviour. (The host app builds these — e.g. one `/_next/image` URL per
+     * width — since the DS doesn't know the optimizer's allowed widths.)
+     */
+    heroImageSrcSet?: string;
+    /** `sizes` paired with {@link heroImageSrcSet} (e.g. `"100vw"`). */
+    heroImageSizes?: string;
     /** Optional video URL — plays as background instead of the image carousel */
     videoUrl?: string;
     /** Main trip title */
@@ -3665,7 +3676,7 @@ interface TripHeaderProps {
     uiVariant?: "v1" | "v2";
     className?: string;
 }
-declare function TripHeader({ images, videoUrl, title, breadcrumb, destination, duration, groupSize, labels, tagline, chips, belowMeta, siteHeader, uiVariant, className, }: TripHeaderProps): react_jsx_runtime.JSX.Element;
+declare function TripHeader({ images, heroImageSrcSet, heroImageSizes, videoUrl, title, breadcrumb, destination, duration, groupSize, labels, tagline, chips, belowMeta, siteHeader, uiVariant, className, }: TripHeaderProps): react_jsx_runtime.JSX.Element;
 
 interface SiteFooterChip {
     label: string;
@@ -3907,6 +3918,14 @@ interface TripPageProps {
     /** Group size shown with a people icon in the hero meta row */
     groupSize?: string;
     images: string[];
+    /**
+     * Responsive `srcSet`/`sizes` for the first hero image (LCP) — forwarded to
+     * {@link TripHeader} so phones fetch a smaller width than the desktop cover.
+     * Omit for legacy single-src behaviour.
+     */
+    heroImageSrcSet?: string;
+    /** `sizes` paired with {@link heroImageSrcSet} (e.g. `"100vw"`). */
+    heroImageSizes?: string;
     /** Optional video URL — plays as background instead of the image carousel */
     videoUrl?: string;
     /** Breadcrumb trail displayed above the title */
@@ -4066,7 +4085,7 @@ interface TripPageProps {
     features?: Record<string, boolean>;
     className?: string;
 }
-declare function TripPage({ title, tagline, destination, duration, groupSize, images, videoUrl, breadcrumb, chips, highlights, howToGetThere, recommendedFor, overview, overviewHighlights, itinerary, itineraryDays, gallery, galleryLightbox, included, notIncluded, whatToBring, weather, optionalExtras, accommodation, accommodationGallery, accommodationGalleryVariant, whenItOperates, food, foodGallery, foodGalleryVariant, termsAndConditions, meetingPoints, meetingPoint, faqs, faqInitialCount, sectionIcons, labels, reviews, trustpilot, trustpilotMini, trustpilotHero, priceFrom, currency, season, departureTimes, benefits, currencyEstimates, priceInfo, onBook, onBookingSubmit, bookingLoading, bookingDefaults, bookingLabels, bookLabel, fromLabel, perPersonLabel, siteHeader, footerBadges, uiVariant, features, className, }: TripPageProps): react_jsx_runtime.JSX.Element;
+declare function TripPage({ title, tagline, destination, duration, groupSize, images, heroImageSrcSet, heroImageSizes, videoUrl, breadcrumb, chips, highlights, howToGetThere, recommendedFor, overview, overviewHighlights, itinerary, itineraryDays, gallery, galleryLightbox, included, notIncluded, whatToBring, weather, optionalExtras, accommodation, accommodationGallery, accommodationGalleryVariant, whenItOperates, food, foodGallery, foodGalleryVariant, termsAndConditions, meetingPoints, meetingPoint, faqs, faqInitialCount, sectionIcons, labels, reviews, trustpilot, trustpilotMini, trustpilotHero, priceFrom, currency, season, departureTimes, benefits, currencyEstimates, priceInfo, onBook, onBookingSubmit, bookingLoading, bookingDefaults, bookingLabels, bookLabel, fromLabel, perPersonLabel, siteHeader, footerBadges, uiVariant, features, className, }: TripPageProps): react_jsx_runtime.JSX.Element;
 
 interface Category2Trip extends TripCardProps {
     /** Marca a trip como featured — sobe para o topo do grid principal. */
@@ -4180,6 +4199,15 @@ interface CategoryPage2Props {
     faqInitialCount?: number;
     gallery?: (string | PhotoGalleryPhoto)[];
     galleryTitle?: string;
+    /**
+     * Lightbox mode for the photo gallery when a photo is tapped.
+     * - `"classic"` — paged single-photo view with prev/next arrows (default).
+     * - `"feed"` — Airbnb "photo tour": one vertical scrollable column of every
+     *   photo, opened scrolled to the tapped one (white captions overlaid, focused
+     *   photo full-opacity, neighbours dimmed). Pass `"feed"` on mobile.
+     * @default "classic"
+     */
+    galleryLightbox?: "classic" | "feed";
     /** Trips-list expand button: "Load more" (count appended). */
     loadMoreLabel?: string;
     /** Expand/collapse collapse button: "Show less". */
@@ -4194,7 +4222,7 @@ interface CategoryPage2Props {
     filterLabels?: FilterPanelLabels;
     className?: string;
 }
-declare function CategoryPage2({ title, intro, heroImage, videoUrl, trustpilotMini, breadcrumb, siteHeader, heroRightSlot, popularTours, popularToursTitle, popularToursEyebrow, trips, tripsTitle, tripsEyebrow, filterGroups, sortOptions, defaultSort, tripsInitialCount, tripListingSlot, trustpilot, reviewsTitle, reviewsSubtitle, blogPosts, aboutTitle, aboutContent, blogIntro, travelGuideHref, travelGuideLabel, blogPostsTitle, blogPostsViewAllHref, faqs, faqsTitle, faqInitialCount, gallery, galleryTitle, loadMoreLabel, showLessLabel, seeMoreLabel, viewAllPostsLabel, cardLabels, filterLabels, footerBadges, className, }: CategoryPage2Props): react_jsx_runtime.JSX.Element;
+declare function CategoryPage2({ title, intro, heroImage, videoUrl, trustpilotMini, breadcrumb, siteHeader, heroRightSlot, popularTours, popularToursTitle, popularToursEyebrow, trips, tripsTitle, tripsEyebrow, filterGroups, sortOptions, defaultSort, tripsInitialCount, tripListingSlot, trustpilot, reviewsTitle, reviewsSubtitle, blogPosts, aboutTitle, aboutContent, blogIntro, travelGuideHref, travelGuideLabel, blogPostsTitle, blogPostsViewAllHref, faqs, faqsTitle, faqInitialCount, gallery, galleryTitle, galleryLightbox, loadMoreLabel, showLessLabel, seeMoreLabel, viewAllPostsLabel, cardLabels, filterLabels, footerBadges, className, }: CategoryPage2Props): react_jsx_runtime.JSX.Element;
 
 type ActivityCardSize = "sm" | "md" | "lg";
 interface ActivityCardProps {

package/dist/index.d.ts

@@ -3626,6 +3626,17 @@ interface TripHeaderChip {
 interface TripHeaderProps {
     /** Hero image array — shows a carousel when more than one image */
     images: string[];
+    /**
+     * Responsive `srcSet`/`sizes` for the FIRST hero image (the LCP element),
+     * letting phones fetch a smaller width than the full-bleed desktop cover.
+     * Applied to the video poster and to carousel slide 0 only; the off-screen
+     * slides keep their single `images[i]` src. Omit for the legacy single-src
+     * behaviour. (The host app builds these — e.g. one `/_next/image` URL per
+     * width — since the DS doesn't know the optimizer's allowed widths.)
+     */
+    heroImageSrcSet?: string;
+    /** `sizes` paired with {@link heroImageSrcSet} (e.g. `"100vw"`). */
+    heroImageSizes?: string;
     /** Optional video URL — plays as background instead of the image carousel */
     videoUrl?: string;
     /** Main trip title */
@@ -3665,7 +3676,7 @@ interface TripHeaderProps {
     uiVariant?: "v1" | "v2";
     className?: string;
 }
-declare function TripHeader({ images, videoUrl, title, breadcrumb, destination, duration, groupSize, labels, tagline, chips, belowMeta, siteHeader, uiVariant, className, }: TripHeaderProps): react_jsx_runtime.JSX.Element;
+declare function TripHeader({ images, heroImageSrcSet, heroImageSizes, videoUrl, title, breadcrumb, destination, duration, groupSize, labels, tagline, chips, belowMeta, siteHeader, uiVariant, className, }: TripHeaderProps): react_jsx_runtime.JSX.Element;
 
 interface SiteFooterChip {
     label: string;
@@ -3907,6 +3918,14 @@ interface TripPageProps {
     /** Group size shown with a people icon in the hero meta row */
     groupSize?: string;
     images: string[];
+    /**
+     * Responsive `srcSet`/`sizes` for the first hero image (LCP) — forwarded to
+     * {@link TripHeader} so phones fetch a smaller width than the desktop cover.
+     * Omit for legacy single-src behaviour.
+     */
+    heroImageSrcSet?: string;
+    /** `sizes` paired with {@link heroImageSrcSet} (e.g. `"100vw"`). */
+    heroImageSizes?: string;
     /** Optional video URL — plays as background instead of the image carousel */
     videoUrl?: string;
     /** Breadcrumb trail displayed above the title */
@@ -4066,7 +4085,7 @@ interface TripPageProps {
     features?: Record<string, boolean>;
     className?: string;
 }
-declare function TripPage({ title, tagline, destination, duration, groupSize, images, videoUrl, breadcrumb, chips, highlights, howToGetThere, recommendedFor, overview, overviewHighlights, itinerary, itineraryDays, gallery, galleryLightbox, included, notIncluded, whatToBring, weather, optionalExtras, accommodation, accommodationGallery, accommodationGalleryVariant, whenItOperates, food, foodGallery, foodGalleryVariant, termsAndConditions, meetingPoints, meetingPoint, faqs, faqInitialCount, sectionIcons, labels, reviews, trustpilot, trustpilotMini, trustpilotHero, priceFrom, currency, season, departureTimes, benefits, currencyEstimates, priceInfo, onBook, onBookingSubmit, bookingLoading, bookingDefaults, bookingLabels, bookLabel, fromLabel, perPersonLabel, siteHeader, footerBadges, uiVariant, features, className, }: TripPageProps): react_jsx_runtime.JSX.Element;
+declare function TripPage({ title, tagline, destination, duration, groupSize, images, heroImageSrcSet, heroImageSizes, videoUrl, breadcrumb, chips, highlights, howToGetThere, recommendedFor, overview, overviewHighlights, itinerary, itineraryDays, gallery, galleryLightbox, included, notIncluded, whatToBring, weather, optionalExtras, accommodation, accommodationGallery, accommodationGalleryVariant, whenItOperates, food, foodGallery, foodGalleryVariant, termsAndConditions, meetingPoints, meetingPoint, faqs, faqInitialCount, sectionIcons, labels, reviews, trustpilot, trustpilotMini, trustpilotHero, priceFrom, currency, season, departureTimes, benefits, currencyEstimates, priceInfo, onBook, onBookingSubmit, bookingLoading, bookingDefaults, bookingLabels, bookLabel, fromLabel, perPersonLabel, siteHeader, footerBadges, uiVariant, features, className, }: TripPageProps): react_jsx_runtime.JSX.Element;
 
 interface Category2Trip extends TripCardProps {
     /** Marca a trip como featured — sobe para o topo do grid principal. */
@@ -4180,6 +4199,15 @@ interface CategoryPage2Props {
     faqInitialCount?: number;
     gallery?: (string | PhotoGalleryPhoto)[];
     galleryTitle?: string;
+    /**
+     * Lightbox mode for the photo gallery when a photo is tapped.
+     * - `"classic"` — paged single-photo view with prev/next arrows (default).
+     * - `"feed"` — Airbnb "photo tour": one vertical scrollable column of every
+     *   photo, opened scrolled to the tapped one (white captions overlaid, focused
+     *   photo full-opacity, neighbours dimmed). Pass `"feed"` on mobile.
+     * @default "classic"
+     */
+    galleryLightbox?: "classic" | "feed";
     /** Trips-list expand button: "Load more" (count appended). */
     loadMoreLabel?: string;
     /** Expand/collapse collapse button: "Show less". */
@@ -4194,7 +4222,7 @@ interface CategoryPage2Props {
     filterLabels?: FilterPanelLabels;
     className?: string;
 }
-declare function CategoryPage2({ title, intro, heroImage, videoUrl, trustpilotMini, breadcrumb, siteHeader, heroRightSlot, popularTours, popularToursTitle, popularToursEyebrow, trips, tripsTitle, tripsEyebrow, filterGroups, sortOptions, defaultSort, tripsInitialCount, tripListingSlot, trustpilot, reviewsTitle, reviewsSubtitle, blogPosts, aboutTitle, aboutContent, blogIntro, travelGuideHref, travelGuideLabel, blogPostsTitle, blogPostsViewAllHref, faqs, faqsTitle, faqInitialCount, gallery, galleryTitle, loadMoreLabel, showLessLabel, seeMoreLabel, viewAllPostsLabel, cardLabels, filterLabels, footerBadges, className, }: CategoryPage2Props): react_jsx_runtime.JSX.Element;
+declare function CategoryPage2({ title, intro, heroImage, videoUrl, trustpilotMini, breadcrumb, siteHeader, heroRightSlot, popularTours, popularToursTitle, popularToursEyebrow, trips, tripsTitle, tripsEyebrow, filterGroups, sortOptions, defaultSort, tripsInitialCount, tripListingSlot, trustpilot, reviewsTitle, reviewsSubtitle, blogPosts, aboutTitle, aboutContent, blogIntro, travelGuideHref, travelGuideLabel, blogPostsTitle, blogPostsViewAllHref, faqs, faqsTitle, faqInitialCount, gallery, galleryTitle, galleryLightbox, loadMoreLabel, showLessLabel, seeMoreLabel, viewAllPostsLabel, cardLabels, filterLabels, footerBadges, className, }: CategoryPage2Props): react_jsx_runtime.JSX.Element;
 
 type ActivityCardSize = "sm" | "md" | "lg";
 interface ActivityCardProps {

package/dist/index.js

@@ -11616,7 +11616,7 @@ function Picture(_a) {
   var _a2, _b2;
   const ref = React20.useRef(null);
   const [visible, setVisible] = React20.useState(eager);
-  const [loaded, setLoaded] = React20.useState(false);
+  const [loaded, setLoaded] = React20.useState(eager);
   React20.useEffect(() => {
     if (eager || visible) return;
     const el = ref.current;
@@ -11636,7 +11636,10 @@ function Picture(_a) {
     io.observe(el);
     return () => io.disconnect();
   }, [eager, visible, rootMargin]);
+  const prevSrcRef = React20.useRef(src);
   React20.useEffect(() => {
+    if (prevSrcRef.current === src) return;
+    prevSrcRef.current = src;
     setLoaded(false);
   }, [src]);
   const webp = webpVariantUrl(src);
@@ -12015,7 +12018,7 @@ function Lightbox({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: "fixed inset-0 z-50 bg-black/92 flex flex-col items-center justify-center",
+      className: "fixed inset-0 z-[1000] bg-black/92 flex flex-col items-center justify-center",
       onClick: onClose,
       children: [
         /* @__PURE__ */ jsx(
@@ -12203,7 +12206,7 @@ function FeedLightbox({
       if (frame) cancelAnimationFrame(frame);
     };
   }, []);
-  return /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-50 bg-zinc-950 text-white", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-[1000] bg-zinc-950 text-white", children: [
     /* @__PURE__ */ jsx(
       "div",
       {
@@ -14851,6 +14854,8 @@ function useHlsVideo(videoRef, src) {
 }
 function TripHeader({
   images,
+  heroImageSrcSet,
+  heroImageSizes,
   videoUrl,
   title,
   breadcrumb,
@@ -14930,6 +14935,8 @@ function TripHeader({
                   Picture,
                   {
                     src: validImages[0],
+                    srcSet: heroImageSrcSet,
+                    sizes: heroImageSizes,
                     alt: "",
                     "aria-hidden": true,
                     fetchPriority: "high",
@@ -14968,6 +14975,8 @@ function TripHeader({
                 Picture,
                 {
                   src: currentSrc,
+                  srcSet: safeIndex === 0 ? heroImageSrcSet : void 0,
+                  sizes: safeIndex === 0 ? heroImageSizes : void 0,
                   alt: title,
                   fetchPriority: safeIndex === 0 ? "high" : "auto",
                   eager: safeIndex === 0,
@@ -15540,6 +15549,8 @@ function TripPage({
   duration,
   groupSize,
   images,
+  heroImageSrcSet,
+  heroImageSizes,
   videoUrl,
   breadcrumb,
   chips,
@@ -15771,6 +15782,8 @@ function TripPage({
               TripHeader,
               {
                 images,
+                heroImageSrcSet,
+                heroImageSizes,
                 videoUrl,
                 title,
                 breadcrumb,
@@ -16280,6 +16293,7 @@ function CategoryPage2({
   faqInitialCount = 5,
   gallery,
   galleryTitle,
+  galleryLightbox = "classic",
   loadMoreLabel,
   showLessLabel,
   seeMoreLabel,
@@ -16542,7 +16556,15 @@ function CategoryPage2({
     ] }),
     gallery && gallery.length > 0 && /* @__PURE__ */ jsxs("section", { className: "pt-4", children: [
       galleryTitle && /* @__PURE__ */ jsx("h2", { className: "mx-auto w-full max-w-6xl px-6 sm:px-8 mb-6 text-2xl sm:text-3xl font-bold text-foreground font-heading", children: galleryTitle }),
-      /* @__PURE__ */ jsx(PhotoGallery, { photos: gallery, variant: "gridCompact", initialVisible: 8 })
+      /* @__PURE__ */ jsx(
+        PhotoGallery,
+        {
+          photos: gallery,
+          variant: "gridCompact",
+          initialVisible: 8,
+          lightbox: galleryLightbox
+        }
+      )
     ] }),
     (aboutTitle || aboutContent || blogPostsTitle || blogPosts && blogPosts.length > 0) && /* @__PURE__ */ jsx("section", { className: "w-full bg-gray-100", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto w-full max-w-6xl px-6 sm:px-8 py-14", children: [
       (aboutTitle || blogPostsTitle) && /* @__PURE__ */ jsx("h2", { className: "text-2xl sm:text-3xl font-bold text-foreground font-heading mb-5", children: aboutTitle != null ? aboutTitle : blogPostsTitle }),