@planetaexo/design-system 0.75.0 → 0.77.0

package/dist/index.cjs

@@ -12036,7 +12036,7 @@ function Lightbox({
   return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
@@ -12224,24 +12224,81 @@ function FeedLightbox({
       if (frame) cancelAnimationFrame(frame);
     };
   }, []);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fixed inset-0 z-50 flex flex-col bg-zinc-950 text-white", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sticky top-0 z-10 flex items-center gap-3 border-b border-white/10 bg-zinc-950/80 px-3 py-2.5 backdrop-blur-md", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fixed inset-0 z-[1000] bg-zinc-950 text-white", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: scrollRef,
+        className: "absolute inset-0 overflow-y-auto overscroll-contain",
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto flex w-full max-w-3xl flex-col", children: items.map(({ photo, index, sectionLabel, isSectionStart }) => {
+          var _a2;
+          const isFocused = index === active;
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            "figure",
+            {
+              "data-index": index,
+              ref: (el) => {
+                itemRefs.current[index] = el;
+              },
+              className: cn(
+                "group relative transition-opacity duration-500",
+                // The focused (centred / hovered) photo is at full opacity;
+                // every other photo is dimmed a touch so the eye lands on it.
+                isFocused ? "opacity-100" : "opacity-[0.65] hover:opacity-100"
+              ),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden bg-white/5", children: /* @__PURE__ */ jsxRuntime.jsx(
+                  Picture,
+                  {
+                    src: photo.src,
+                    alt: (_a2 = photo.alt) != null ? _a2 : `Photo ${index + 1}`,
+                    title: photo.caption,
+                    className: "block h-auto w-full",
+                    eager: index < 2,
+                    rootMargin: "800px"
+                  }
+                ) }),
+                sectionLabel && isSectionStart && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-x-0 top-0 bg-gradient-to-b from-black/60 via-black/20 to-transparent px-3 pb-12 pt-3 sm:px-4", children: /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "font-heading text-lg font-bold uppercase tracking-wide text-white drop-shadow-md", children: sectionLabel }) }),
+                (photo.caption || photo.credit) && /* @__PURE__ */ jsxRuntime.jsxs(
+                  "figcaption",
+                  {
+                    className: cn(
+                      "pointer-events-none absolute inset-x-0 bottom-0 flex flex-col items-end gap-0.5 bg-gradient-to-t from-black/60 via-black/20 to-transparent px-3 pb-3 pt-12 text-right transition-opacity duration-500 sm:px-4",
+                      isFocused ? "opacity-100" : "opacity-0 group-hover:opacity-100"
+                    ),
+                    children: [
+                      photo.caption && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-ui text-sm font-medium leading-snug text-white drop-shadow-md", children: photo.caption }),
+                      photo.credit && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "font-ui text-xs text-white/80 drop-shadow-md", children: [
+                        "\xA9 ",
+                        photo.credit
+                      ] })
+                    ]
+                  }
+                )
+              ]
+            },
+            index
+          );
+        }) })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pointer-events-none absolute inset-x-0 top-0 z-10 flex items-center gap-3 bg-gradient-to-b from-black/70 via-black/30 to-transparent px-3 pb-10 pt-2.5", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
           type: "button",
           onClick: onClose,
-          className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-white transition-colors hover:bg-white/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/60",
+          className: "pointer-events-auto flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-black/25 text-white backdrop-blur-sm transition-colors hover:bg-white/15 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/60",
           "aria-label": (_a = labels == null ? void 0 : labels.close) != null ? _a : "Close lightbox",
           children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, { className: "h-5 w-5" })
         }
       ),
-      activeLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate text-center font-heading text-sm font-bold uppercase tracking-wide text-white", children: activeLabel }),
+      activeLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate text-center font-heading text-sm font-bold uppercase tracking-wide text-white drop-shadow-md", children: activeLabel }),
       total > 1 && /* @__PURE__ */ jsxRuntime.jsxs(
         "span",
         {
           className: cn(
-            "shrink-0 font-ui text-sm font-medium tabular-nums text-white/60",
+            "shrink-0 font-ui text-sm font-medium tabular-nums text-white/80 drop-shadow-md",
             !activeLabel && "ml-auto"
           ),
           children: [
@@ -12251,74 +12308,7 @@ function FeedLightbox({
           ]
         }
       )
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        ref: scrollRef,
-        className: "flex-1 overflow-y-auto overscroll-contain",
-        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto flex w-full max-w-3xl flex-col", children: items.map(({ photo, index, sectionLabel, isSectionStart }) => {
-          var _a2;
-          const isFocused = index === active;
-          return /* @__PURE__ */ jsxRuntime.jsxs(React20__namespace.Fragment, { children: [
-            sectionLabel && isSectionStart && /* @__PURE__ */ jsxRuntime.jsx(
-              "h2",
-              {
-                className: cn(
-                  "px-3 pb-3 font-heading text-lg font-bold uppercase tracking-wide text-white sm:px-4",
-                  index > 0 ? "pt-8" : "pt-2"
-                ),
-                children: sectionLabel
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsxs(
-              "figure",
-              {
-                "data-index": index,
-                ref: (el) => {
-                  itemRefs.current[index] = el;
-                },
-                className: cn(
-                  "group relative transition-opacity duration-500",
-                  // The focused (centred / hovered) photo is at full opacity;
-                  // every other photo is dimmed a touch so the eye lands on it.
-                  isFocused ? "opacity-100" : "opacity-[0.65] hover:opacity-100"
-                ),
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden bg-white/5", children: /* @__PURE__ */ jsxRuntime.jsx(
-                    Picture,
-                    {
-                      src: photo.src,
-                      alt: (_a2 = photo.alt) != null ? _a2 : `Photo ${index + 1}`,
-                      title: photo.caption,
-                      className: "block h-auto w-full",
-                      eager: index < 2,
-                      rootMargin: "800px"
-                    }
-                  ) }),
-                  (photo.caption || photo.credit) && /* @__PURE__ */ jsxRuntime.jsxs(
-                    "figcaption",
-                    {
-                      className: cn(
-                        "pointer-events-none absolute inset-x-0 bottom-0 flex flex-col items-end gap-0.5 bg-gradient-to-t from-black/60 via-black/20 to-transparent px-3 pb-3 pt-12 text-right transition-opacity duration-500 sm:px-4",
-                        isFocused ? "opacity-100" : "opacity-0 group-hover:opacity-100"
-                      ),
-                      children: [
-                        photo.caption && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-ui text-sm font-medium leading-snug text-white drop-shadow-md", children: photo.caption }),
-                        photo.credit && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "font-ui text-xs text-white/80 drop-shadow-md", children: [
-                          "\xA9 ",
-                          photo.credit
-                        ] })
-                      ]
-                    }
-                  )
-                ]
-              }
-            )
-          ] }, index);
-        }) })
-      }
-    )
+    ] })
   ] });
 }
 var PhotoTourContext = React20__namespace.createContext(null);
@@ -14882,6 +14872,8 @@ function useHlsVideo(videoRef, src) {
 }
 function TripHeader({
   images,
+  heroImageSrcSet,
+  heroImageSizes,
   videoUrl,
   title,
   breadcrumb,
@@ -14961,6 +14953,8 @@ function TripHeader({
                   Picture,
                   {
                     src: validImages[0],
+                    srcSet: heroImageSrcSet,
+                    sizes: heroImageSizes,
                     alt: "",
                     "aria-hidden": true,
                     fetchPriority: "high",
@@ -14999,6 +14993,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,
@@ -15571,6 +15567,8 @@ function TripPage({
   duration,
   groupSize,
   images,
+  heroImageSrcSet,
+  heroImageSizes,
   videoUrl,
   breadcrumb,
   chips,
@@ -15802,6 +15800,8 @@ function TripPage({
               TripHeader,
               {
                 images,
+                heroImageSrcSet,
+                heroImageSizes,
                 videoUrl,
                 title,
                 breadcrumb,
@@ -16311,6 +16311,7 @@ function CategoryPage2({
   faqInitialCount = 5,
   gallery,
   galleryTitle,
+  galleryLightbox = "classic",
   loadMoreLabel,
   showLessLabel,
   seeMoreLabel,
@@ -16573,7 +16574,15 @@ function CategoryPage2({
     ] }),
     gallery && gallery.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "pt-4", children: [
       galleryTitle && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(PhotoGallery, { photos: gallery, variant: "gridCompact", initialVisible: 8 })
+      /* @__PURE__ */ jsxRuntime.jsx(
+        PhotoGallery,
+        {
+          photos: gallery,
+          variant: "gridCompact",
+          initialVisible: 8,
+          lightbox: galleryLightbox
+        }
+      )
     ] }),
     (aboutTitle || aboutContent || blogPostsTitle || blogPosts && blogPosts.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("section", { className: "w-full bg-gray-100", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto w-full max-w-6xl px-6 sm:px-8 py-14", children: [
       (aboutTitle || blogPostsTitle) && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-2xl sm:text-3xl font-bold text-foreground font-heading mb-5", children: aboutTitle != null ? aboutTitle : blogPostsTitle }),