@planetaexo/design-system 0.74.0 → 0.75.0

package/dist/index.cjs

@@ -12189,9 +12189,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;
@@ -12257,15 +12257,16 @@ function FeedLightbox({
       {
         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 gap-3 py-4", children: items.map(({ photo, index, sectionLabel, isSectionStart }) => {
+        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 font-heading text-lg font-bold uppercase tracking-wide text-white sm:px-4",
-                  index > 0 && "mt-3"
+                  "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
               }
@@ -12277,6 +12278,12 @@ function FeedLightbox({
                 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,
@@ -12289,13 +12296,22 @@ function FeedLightbox({
                       rootMargin: "800px"
                     }
                   ) }),
-                  (photo.caption || photo.credit) && /* @__PURE__ */ jsxRuntime.jsxs("figcaption", { className: "px-3 pt-2 sm:px-4", children: [
-                    photo.caption && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-ui text-sm leading-snug text-white/70", children: photo.caption }),
-                    photo.credit && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "font-ui text-xs text-white/50", children: [
-                      "\xA9 ",
-                      photo.credit
-                    ] })
-                  ] })
+                  (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
+                        ] })
+                      ]
+                    }
+                  )
                 ]
               }
             )