@planetaexo/design-system 0.74.1 → 0.76.0

package/dist/index.js

@@ -12168,9 +12168,9 @@ function FeedLightbox({
       var _a2;
       frame = 0;
       if (!userMoved) {
-        (_a2 = itemRefs.current[initialIndex]) == null ? void 0 : _a2.scrollIntoView({ block: "start" });
+        (_a2 = itemRefs.current[initialIndex]) == null ? void 0 : _a2.scrollIntoView({ block: "center" });
       }
-      const anchorY = root.getBoundingClientRect().top + 64;
+      const anchorY = root.getBoundingClientRect().top + root.clientHeight / 2;
       let current = 0;
       itemRefs.current.forEach((el, i) => {
         if (el && el.getBoundingClientRect().top <= anchorY) current = i;
@@ -12203,24 +12203,81 @@ function FeedLightbox({
       if (frame) cancelAnimationFrame(frame);
     };
   }, []);
-  return /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-50 flex flex-col bg-zinc-950 text-white", children: [
-    /* @__PURE__ */ 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__ */ jsxs("div", { className: "fixed inset-0 z-50 bg-zinc-950 text-white", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: scrollRef,
+        className: "absolute inset-0 overflow-y-auto overscroll-contain",
+        children: /* @__PURE__ */ 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__ */ 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__ */ jsx("div", { className: "overflow-hidden bg-white/5", children: /* @__PURE__ */ 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__ */ 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__ */ jsx("h2", { className: "font-heading text-lg font-bold uppercase tracking-wide text-white drop-shadow-md", children: sectionLabel }) }),
+                (photo.caption || photo.credit) && /* @__PURE__ */ 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__ */ jsx("p", { className: "font-ui text-sm font-medium leading-snug text-white drop-shadow-md", children: photo.caption }),
+                      photo.credit && /* @__PURE__ */ jsxs("p", { className: "font-ui text-xs text-white/80 drop-shadow-md", children: [
+                        "\xA9 ",
+                        photo.credit
+                      ] })
+                    ]
+                  }
+                )
+              ]
+            },
+            index
+          );
+        }) })
+      }
+    ),
+    /* @__PURE__ */ 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__ */ 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__ */ jsx(XIcon, { className: "h-5 w-5" })
         }
       ),
-      activeLabel && /* @__PURE__ */ 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__ */ 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__ */ 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: [
@@ -12230,58 +12287,7 @@ function FeedLightbox({
           ]
         }
       )
-    ] }),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref: scrollRef,
-        className: "flex-1 overflow-y-auto overscroll-contain",
-        children: /* @__PURE__ */ jsx("div", { className: "mx-auto flex w-full max-w-3xl flex-col gap-3 py-4", children: items.map(({ photo, index, sectionLabel, isSectionStart }) => {
-          var _a2;
-          return /* @__PURE__ */ jsxs(React20.Fragment, { children: [
-            sectionLabel && isSectionStart && /* @__PURE__ */ jsx(
-              "h2",
-              {
-                className: cn(
-                  "px-3 font-heading text-lg font-bold uppercase tracking-wide text-white sm:px-4",
-                  index > 0 && "mt-3"
-                ),
-                children: sectionLabel
-              }
-            ),
-            /* @__PURE__ */ jsxs(
-              "figure",
-              {
-                "data-index": index,
-                ref: (el) => {
-                  itemRefs.current[index] = el;
-                },
-                children: [
-                  /* @__PURE__ */ jsx("div", { className: "overflow-hidden bg-white/5", children: /* @__PURE__ */ 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__ */ jsxs("figcaption", { className: "px-3 pt-2 sm:px-4", children: [
-                    photo.caption && /* @__PURE__ */ jsx("p", { className: "font-ui text-sm leading-snug text-white/70", children: photo.caption }),
-                    photo.credit && /* @__PURE__ */ jsxs("p", { className: "font-ui text-xs text-white/50", children: [
-                      "\xA9 ",
-                      photo.credit
-                    ] })
-                  ] })
-                ]
-              }
-            )
-          ] }, index);
-        }) })
-      }
-    )
+    ] })
   ] });
 }
 var PhotoTourContext = React20.createContext(null);