react-media-lightbox 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Sreekanth Ramachandran
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,115 @@
+# react-media-lightbox
+
+A lightweight, dependency-free React lightbox for **images and video** in a single component. Supports YouTube, Vimeo, and self-hosted video files, with keyboard navigation, looping, a loading spinner, image fallbacks, and a clean, responsive UI.
+
+- Zero runtime dependencies (only `react` as a peer dependency)
+- One unified `<MediaLightbox>` for mixed image + video galleries
+- YouTube, Vimeo, and self-hosted (`<video>`) sources
+- Keyboard nav (←/→/Esc), click-outside-to-close, body-scroll lock
+- ESM + CJS builds with TypeScript types
+- Works with React 18 and 19 (incl. Next.js App Router — ships `"use client"`)
+
+## Installation
+
+```bash
+npm install react-media-lightbox
+```
+
+> `react` and `react-dom` are peer dependencies (>= 18).
+
+## Usage
+
+Import the component **and the stylesheet** once:
+
+```tsx
+import { useState } from "react";
+import { MediaLightbox, type MediaItem } from "react-media-lightbox";
+import "react-media-lightbox/styles.css";
+
+const items: MediaItem[] = [
+  { type: "image", src: "https://picsum.photos/id/1015/1200/800", title: "A river" },
+  { type: "video", src: "https://youtu.be/dQw4w9WgXcQ", title: "YouTube clip" },
+  { type: "video", src: "https://vimeo.com/76979871", title: "Vimeo clip" },
+  { type: "video", src: "https://example.com/clip.mp4", provider: "file", title: "Self-hosted", poster: "https://picsum.photos/id/1016/1200/800" },
+];
+
+export default function Gallery() {
+  const [open, setOpen] = useState(false);
+  const [index, setIndex] = useState(0);
+
+  return (
+    <>
+      <button onClick={() => { setIndex(0); setOpen(true); }}>Open gallery</button>
+
+      {open && (
+        <MediaLightbox
+          items={items}
+          initialIndex={index}
+          onClose={() => setOpen(false)}
+          fallbackSrc="/no_image.png"
+        />
+      )}
+    </>
+  );
+}
+```
+
+The lightbox is **controlled by the parent**: render it conditionally and supply an `onClose` handler. It does not manage its own visibility.
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `items` | `MediaItem[]` | — | Media to display (images and videos). |
+| `initialIndex` | `number` | `0` | Index opened first. |
+| `onClose` | `() => void` | — | Called on Esc, close button, or overlay click. |
+| `fallbackSrc` | `string` | — | Image shown when an image fails to load. |
+| `showCounter` | `boolean` | `true` | Show the `N / total` counter. |
+| `loop` | `boolean` | `true` | Wrap navigation at the ends. |
+| `closeOnOverlayClick` | `boolean` | `true` | Close when the dimmed background is clicked. |
+| `lockBodyScroll` | `boolean` | `true` | Lock page scroll while open. |
+| `className` | `string` | — | Extra class on the overlay root. |
+| `onIndexChange` | `(index: number) => void` | — | Fired when the active index changes. |
+
+## Item shapes
+
+```ts
+type ImageItem = {
+  type: "image";
+  src: string;
+  title?: string;
+  alt?: string; // falls back to title
+};
+
+type VideoItem = {
+  type: "video";
+  src: string;                                   // page/embed URL or direct file URL
+  provider?: "youtube" | "vimeo" | "file" | "auto"; // default: "auto" (detected from src)
+  title?: string;
+  poster?: string;  // for "file" videos
+  autoplay?: boolean; // default true
+};
+
+type MediaItem = ImageItem | VideoItem;
+```
+
+When `provider` is omitted or `"auto"`, the provider is detected from the URL:
+- `youtube.com` / `youtu.be` / `youtube-nocookie.com` → YouTube iframe
+- `vimeo.com` → Vimeo iframe
+- anything else → self-hosted `<video>`
+
+## Helpers
+
+The URL utilities are exported if you need them directly:
+
+```ts
+import { detectProvider, getEmbedURL, getYouTubeId, getVimeoId } from "react-media-lightbox";
+```
+
+## Styling
+
+All class names are prefixed with `rml-` to avoid collisions. Override them in your own CSS after importing `react-media-lightbox/styles.css`, or pass `className` for the overlay root.
+
+## License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1,242 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/MediaLightbox.tsx
+
+// src/video.ts
+function detectProvider(url) {
+  if (!url) return "file";
+  if (/(?:youtube\.com|youtu\.be|youtube-nocookie\.com)/i.test(url)) {
+    return "youtube";
+  }
+  if (/vimeo\.com/i.test(url)) {
+    return "vimeo";
+  }
+  return "file";
+}
+function getYouTubeId(url) {
+  if (!url) return null;
+  try {
+    if (url.includes("youtube.com/embed/")) {
+      return url.split("youtube.com/embed/")[1]?.split(/[?&/]/)[0] ?? null;
+    }
+    if (url.includes("youtube-nocookie.com/embed/")) {
+      return url.split("youtube-nocookie.com/embed/")[1]?.split(/[?&/]/)[0] ?? null;
+    }
+    if (url.includes("youtube.com/v/")) {
+      return url.split("youtube.com/v/")[1]?.split(/[?&/]/)[0] ?? null;
+    }
+    if (url.includes("youtu.be/")) {
+      return url.split("youtu.be/")[1]?.split(/[?&/]/)[0] ?? null;
+    }
+    if (url.includes("youtube.com/watch")) {
+      const params = new URLSearchParams(new URL(url).search);
+      return params.get("v");
+    }
+  } catch {
+    return null;
+  }
+  return null;
+}
+function getVimeoId(url) {
+  if (!url) return null;
+  if (url.includes("player.vimeo.com/video/")) {
+    return url.split("player.vimeo.com/video/")[1]?.split(/[?&/]/)[0] ?? null;
+  }
+  const match = url.match(/vimeo\.com\/(?:.*\/)?(\d+)/i);
+  return match ? match[1] : null;
+}
+function getEmbedURL(url, provider, autoplay) {
+  if (provider === "youtube") {
+    const id = getYouTubeId(url);
+    if (id) {
+      const params = autoplay ? "?autoplay=1" : "";
+      return `https://www.youtube-nocookie.com/embed/${id}${params}`;
+    }
+    return url.replace("youtube.com", "youtube-nocookie.com");
+  }
+  if (provider === "vimeo") {
+    const id = getVimeoId(url);
+    if (id) {
+      const params = autoplay ? "?autoplay=1" : "";
+      return `https://player.vimeo.com/video/${id}${params}`;
+    }
+    return url;
+  }
+  return null;
+}
+var CloseIcon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) });
+var PrevIcon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" }) });
+var NextIcon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" }) });
+function ImageSlide({
+  src,
+  alt,
+  fallbackSrc
+}) {
+  const [isLoaded, setIsLoaded] = react.useState(false);
+  const [renderedSrc, setRenderedSrc] = react.useState(src);
+  if (renderedSrc !== src) {
+    setRenderedSrc(src);
+    setIsLoaded(false);
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rml-imageContainer", children: [
+    !isLoaded && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rml-spinner" }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "img",
+      {
+        className: `rml-image${isLoaded ? " rml-imageLoaded" : ""}`,
+        src,
+        alt,
+        draggable: false,
+        onLoad: () => setIsLoaded(true),
+        onError: (e) => {
+          setIsLoaded(true);
+          if (fallbackSrc && e.currentTarget.src !== fallbackSrc) {
+            e.currentTarget.src = fallbackSrc;
+          }
+        }
+      }
+    )
+  ] });
+}
+function VideoSlide({ item }) {
+  const autoplay = item.autoplay ?? true;
+  const provider = !item.provider || item.provider === "auto" ? detectProvider(item.src) : item.provider;
+  if (provider === "file") {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rml-playerContainer rml-fileContainer", children: /* @__PURE__ */ jsxRuntime.jsx(
+      "video",
+      {
+        className: "rml-videoPlayer",
+        src: item.src,
+        poster: item.poster,
+        controls: true,
+        autoPlay: autoplay,
+        playsInline: true
+      }
+    ) });
+  }
+  const embedUrl = getEmbedURL(item.src, provider, autoplay) ?? item.src;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rml-playerContainer", children: /* @__PURE__ */ jsxRuntime.jsx(
+    "iframe",
+    {
+      className: "rml-iframePlayer",
+      src: embedUrl,
+      title: item.title || "Video player",
+      allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share",
+      allowFullScreen: true
+    }
+  ) });
+}
+function MediaLightbox({
+  items,
+  initialIndex = 0,
+  onClose,
+  fallbackSrc,
+  showCounter = true,
+  loop = true,
+  closeOnOverlayClick = true,
+  lockBodyScroll = true,
+  className,
+  onIndexChange
+}) {
+  const count = items?.length ?? 0;
+  const [currentIndex, setCurrentIndex] = react.useState(initialIndex);
+  const handlePrev = react.useCallback(() => {
+    setCurrentIndex((prev) => {
+      const next = prev === 0 ? loop ? count - 1 : 0 : prev - 1;
+      onIndexChange?.(next);
+      return next;
+    });
+  }, [count, loop, onIndexChange]);
+  const handleNext = react.useCallback(() => {
+    setCurrentIndex((prev) => {
+      const next = prev === count - 1 ? loop ? 0 : count - 1 : prev + 1;
+      onIndexChange?.(next);
+      return next;
+    });
+  }, [count, loop, onIndexChange]);
+  react.useEffect(() => {
+    const handleKeyDown = (e) => {
+      if (e.key === "ArrowLeft") handlePrev();
+      else if (e.key === "ArrowRight") handleNext();
+      else if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    let previousOverflow = "";
+    if (lockBodyScroll) {
+      previousOverflow = document.body.style.overflow;
+      document.body.style.overflow = "hidden";
+    }
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+      if (lockBodyScroll) {
+        document.body.style.overflow = previousOverflow;
+      }
+    };
+  }, [handlePrev, handleNext, onClose, lockBodyScroll]);
+  if (!items || count === 0) return null;
+  const safeIndex = Math.min(Math.max(currentIndex, 0), count - 1);
+  const current = items[safeIndex];
+  const handleOverlayClick = (e) => {
+    if (closeOnOverlayClick && e.target === e.currentTarget) {
+      onClose();
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: `rml-overlay${className ? ` ${className}` : ""}`,
+      role: "dialog",
+      "aria-modal": "true",
+      onClick: handleOverlayClick,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("button", { className: "rml-closeBtn", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, {}) }),
+        count > 1 && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            className: "rml-navBtn rml-prevBtn",
+            onClick: handlePrev,
+            "aria-label": "Previous",
+            children: /* @__PURE__ */ jsxRuntime.jsx(PrevIcon, {})
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rml-content", onClick: handleOverlayClick, children: current.type === "video" ? /* @__PURE__ */ jsxRuntime.jsx(VideoSlide, { item: current }) : /* @__PURE__ */ jsxRuntime.jsx(
+          ImageSlide,
+          {
+            src: current.src,
+            alt: current.alt || current.title || `Item ${safeIndex + 1}`,
+            fallbackSrc
+          },
+          safeIndex
+        ) }),
+        count > 1 && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            className: "rml-navBtn rml-nextBtn",
+            onClick: handleNext,
+            "aria-label": "Next",
+            children: /* @__PURE__ */ jsxRuntime.jsx(NextIcon, {})
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rml-footer", children: [
+          showCounter && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rml-counter", children: `${safeIndex + 1} / ${count}` }),
+          current.title && /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "rml-title", children: current.title })
+        ] })
+      ]
+    }
+  );
+}
+var MediaLightbox_default = MediaLightbox;
+
+exports.MediaLightbox = MediaLightbox;
+exports.default = MediaLightbox_default;
+exports.detectProvider = detectProvider;
+exports.getEmbedURL = getEmbedURL;
+exports.getVimeoId = getVimeoId;
+exports.getYouTubeId = getYouTubeId;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/video.ts","../src/MediaLightbox.tsx"],"names":["jsx","useState","jsxs","useCallback","useEffect"],"mappings":"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","file":"index.cjs","sourcesContent":["import type { VideoProvider } from \"./types\";\n\n/** Detect a video provider from its URL. */\nexport function detectProvider(url: string): VideoProvider {\n  if (!url) return \"file\";\n  if (/(?:youtube\\.com|youtu\\.be|youtube-nocookie\\.com)/i.test(url)) {\n    return \"youtube\";\n  }\n  if (/vimeo\\.com/i.test(url)) {\n    return \"vimeo\";\n  }\n  return \"file\";\n}\n\n/** Extract the YouTube video id from any common YouTube URL shape. */\nexport function getYouTubeId(url: string): string | null {\n  if (!url) return null;\n  try {\n    if (url.includes(\"youtube.com/embed/\")) {\n      return url.split(\"youtube.com/embed/\")[1]?.split(/[?&/]/)[0] ?? null;\n    }\n    if (url.includes(\"youtube-nocookie.com/embed/\")) {\n      return url.split(\"youtube-nocookie.com/embed/\")[1]?.split(/[?&/]/)[0] ?? null;\n    }\n    if (url.includes(\"youtube.com/v/\")) {\n      return url.split(\"youtube.com/v/\")[1]?.split(/[?&/]/)[0] ?? null;\n    }\n    if (url.includes(\"youtu.be/\")) {\n      return url.split(\"youtu.be/\")[1]?.split(/[?&/]/)[0] ?? null;\n    }\n    if (url.includes(\"youtube.com/watch\")) {\n      const params = new URLSearchParams(new URL(url).search);\n      return params.get(\"v\");\n    }\n  } catch {\n    return null;\n  }\n  return null;\n}\n\n/** Extract the numeric Vimeo id from any common Vimeo URL shape. */\nexport function getVimeoId(url: string): string | null {\n  if (!url) return null;\n  if (url.includes(\"player.vimeo.com/video/\")) {\n    return url.split(\"player.vimeo.com/video/\")[1]?.split(/[?&/]/)[0] ?? null;\n  }\n  const match = url.match(/vimeo\\.com\\/(?:.*\\/)?(\\d+)/i);\n  return match ? match[1] : null;\n}\n\n/**\n * Resolve a video URL to an embeddable `<iframe>` src.\n * Returns `null` if the URL is not an iframe-embeddable provider (e.g. a file).\n */\nexport function getEmbedURL(\n  url: string,\n  provider: VideoProvider,\n  autoplay: boolean\n): string | null {\n  if (provider === \"youtube\") {\n    const id = getYouTubeId(url);\n    if (id) {\n      const params = autoplay ? \"?autoplay=1\" : \"\";\n      return `https://www.youtube-nocookie.com/embed/${id}${params}`;\n    }\n    return url.replace(\"youtube.com\", \"youtube-nocookie.com\");\n  }\n  if (provider === \"vimeo\") {\n    const id = getVimeoId(url);\n    if (id) {\n      const params = autoplay ? \"?autoplay=1\" : \"\";\n      return `https://player.vimeo.com/video/${id}${params}`;\n    }\n    return url;\n  }\n  return null;\n}\n","\"use client\";\n\nimport React, { useCallback, useEffect, useState } from \"react\";\nimport type { MediaItem, MediaLightboxProps, VideoItem } from \"./types\";\nimport { detectProvider, getEmbedURL } from \"./video\";\n\nconst CloseIcon = () => (\n  <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n    <path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\" />\n  </svg>\n);\n\nconst PrevIcon = () => (\n  <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n    <path d=\"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z\" />\n  </svg>\n);\n\nconst NextIcon = () => (\n  <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n    <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\" />\n  </svg>\n);\n\nfunction ImageSlide({\n  src,\n  alt,\n  fallbackSrc,\n}: {\n  src: string;\n  alt: string;\n  fallbackSrc?: string;\n}) {\n  const [isLoaded, setIsLoaded] = useState(false);\n\n  // Reset the loaded flag when the source changes (React-recommended derived\n  // state via render-time comparison instead of an effect).\n  const [renderedSrc, setRenderedSrc] = useState(src);\n  if (renderedSrc !== src) {\n    setRenderedSrc(src);\n    setIsLoaded(false);\n  }\n\n  return (\n    <div className=\"rml-imageContainer\">\n      {!isLoaded && <div className=\"rml-spinner\" />}\n      {/* eslint-disable-next-line @next/next/no-img-element */}\n      <img\n        className={`rml-image${isLoaded ? \" rml-imageLoaded\" : \"\"}`}\n        src={src}\n        alt={alt}\n        draggable={false}\n        onLoad={() => setIsLoaded(true)}\n        onError={(e) => {\n          setIsLoaded(true);\n          if (fallbackSrc && e.currentTarget.src !== fallbackSrc) {\n            e.currentTarget.src = fallbackSrc;\n          }\n        }}\n      />\n    </div>\n  );\n}\n\nfunction VideoSlide({ item }: { item: VideoItem }) {\n  const autoplay = item.autoplay ?? true;\n  const provider =\n    !item.provider || item.provider === \"auto\"\n      ? detectProvider(item.src)\n      : item.provider;\n\n  if (provider === \"file\") {\n    return (\n      <div className=\"rml-playerContainer rml-fileContainer\">\n        <video\n          className=\"rml-videoPlayer\"\n          src={item.src}\n          poster={item.poster}\n          controls\n          autoPlay={autoplay}\n          playsInline\n        />\n      </div>\n    );\n  }\n\n  const embedUrl = getEmbedURL(item.src, provider, autoplay) ?? item.src;\n\n  return (\n    <div className=\"rml-playerContainer\">\n      <iframe\n        className=\"rml-iframePlayer\"\n        src={embedUrl}\n        title={item.title || \"Video player\"}\n        allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\n        allowFullScreen\n      />\n    </div>\n  );\n}\n\nexport function MediaLightbox({\n  items,\n  initialIndex = 0,\n  onClose,\n  fallbackSrc,\n  showCounter = true,\n  loop = true,\n  closeOnOverlayClick = true,\n  lockBodyScroll = true,\n  className,\n  onIndexChange,\n}: MediaLightboxProps) {\n  const count = items?.length ?? 0;\n  const [currentIndex, setCurrentIndex] = useState(initialIndex);\n\n  const handlePrev = useCallback(() => {\n    setCurrentIndex((prev) => {\n      const next = prev === 0 ? (loop ? count - 1 : 0) : prev - 1;\n      onIndexChange?.(next);\n      return next;\n    });\n  }, [count, loop, onIndexChange]);\n\n  const handleNext = useCallback(() => {\n    setCurrentIndex((prev) => {\n      const next = prev === count - 1 ? (loop ? 0 : count - 1) : prev + 1;\n      onIndexChange?.(next);\n      return next;\n    });\n  }, [count, loop, onIndexChange]);\n\n  useEffect(() => {\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key === \"ArrowLeft\") handlePrev();\n      else if (e.key === \"ArrowRight\") handleNext();\n      else if (e.key === \"Escape\") onClose();\n    };\n\n    window.addEventListener(\"keydown\", handleKeyDown);\n    let previousOverflow = \"\";\n    if (lockBodyScroll) {\n      previousOverflow = document.body.style.overflow;\n      document.body.style.overflow = \"hidden\";\n    }\n\n    return () => {\n      window.removeEventListener(\"keydown\", handleKeyDown);\n      if (lockBodyScroll) {\n        document.body.style.overflow = previousOverflow;\n      }\n    };\n  }, [handlePrev, handleNext, onClose, lockBodyScroll]);\n\n  if (!items || count === 0) return null;\n\n  const safeIndex = Math.min(Math.max(currentIndex, 0), count - 1);\n  const current: MediaItem = items[safeIndex];\n\n  const handleOverlayClick = (e: React.MouseEvent) => {\n    if (closeOnOverlayClick && e.target === e.currentTarget) {\n      onClose();\n    }\n  };\n\n  return (\n    <div\n      className={`rml-overlay${className ? ` ${className}` : \"\"}`}\n      role=\"dialog\"\n      aria-modal=\"true\"\n      onClick={handleOverlayClick}\n    >\n      <button className=\"rml-closeBtn\" onClick={onClose} aria-label=\"Close\">\n        <CloseIcon />\n      </button>\n\n      {count > 1 && (\n        <button\n          className=\"rml-navBtn rml-prevBtn\"\n          onClick={handlePrev}\n          aria-label=\"Previous\"\n        >\n          <PrevIcon />\n        </button>\n      )}\n\n      <div className=\"rml-content\" onClick={handleOverlayClick}>\n        {current.type === \"video\" ? (\n          <VideoSlide item={current} />\n        ) : (\n          <ImageSlide\n            key={safeIndex}\n            src={current.src}\n            alt={current.alt || current.title || `Item ${safeIndex + 1}`}\n            fallbackSrc={fallbackSrc}\n          />\n        )}\n      </div>\n\n      {count > 1 && (\n        <button\n          className=\"rml-navBtn rml-nextBtn\"\n          onClick={handleNext}\n          aria-label=\"Next\"\n        >\n          <NextIcon />\n        </button>\n      )}\n\n      <div className=\"rml-footer\">\n        {showCounter && (\n          <span className=\"rml-counter\">{`${safeIndex + 1} / ${count}`}</span>\n        )}\n        {current.title && <h4 className=\"rml-title\">{current.title}</h4>}\n      </div>\n    </div>\n  );\n}\n\nexport default MediaLightbox;\n"]}

package/dist/index.d.cts

@@ -0,0 +1,70 @@
+import React from 'react';
+
+type VideoProvider = "youtube" | "vimeo" | "file";
+interface ImageItem {
+    type: "image";
+    /** Image source URL. */
+    src: string;
+    /** Optional caption shown in the footer; also used as the `alt` text. */
+    title?: string;
+    /** Explicit alt text. Falls back to `title`. */
+    alt?: string;
+}
+interface VideoItem {
+    type: "video";
+    /**
+     * Video source. For `youtube`/`vimeo` this is the page or embed URL; for
+     * `file` this is a direct media URL (mp4/webm/etc.).
+     */
+    src: string;
+    /**
+     * Video provider. When omitted (or "auto"), the provider is detected from
+     * the `src` URL.
+     */
+    provider?: VideoProvider | "auto";
+    /** Optional caption shown in the footer. */
+    title?: string;
+    /** Poster image for self-hosted (`file`) videos. */
+    poster?: string;
+    /** Autoplay when the slide becomes active. Defaults to `true`. */
+    autoplay?: boolean;
+}
+type MediaItem = ImageItem | VideoItem;
+interface MediaLightboxProps {
+    /** The media items to display. */
+    items: MediaItem[];
+    /** Index of the item to open first. Defaults to `0`. */
+    initialIndex?: number;
+    /** Called when the lightbox requests to close (Esc, close button, overlay click). */
+    onClose: () => void;
+    /** Fallback image URL used when an image fails to load. */
+    fallbackSrc?: string;
+    /** Show the "N / total" counter in the footer. Defaults to `true`. */
+    showCounter?: boolean;
+    /** Wrap around when navigating past the first/last item. Defaults to `true`. */
+    loop?: boolean;
+    /** Close the lightbox when the dimmed overlay (background) is clicked. Defaults to `true`. */
+    closeOnOverlayClick?: boolean;
+    /** Lock body scroll while the lightbox is open. Defaults to `true`. */
+    lockBodyScroll?: boolean;
+    /** Extra class name applied to the overlay root element. */
+    className?: string;
+    /** Fired whenever the active index changes. */
+    onIndexChange?: (index: number) => void;
+}
+
+declare function MediaLightbox({ items, initialIndex, onClose, fallbackSrc, showCounter, loop, closeOnOverlayClick, lockBodyScroll, className, onIndexChange, }: MediaLightboxProps): React.JSX.Element | null;
+
+/** Detect a video provider from its URL. */
+declare function detectProvider(url: string): VideoProvider;
+/** Extract the YouTube video id from any common YouTube URL shape. */
+declare function getYouTubeId(url: string): string | null;
+/** Extract the numeric Vimeo id from any common Vimeo URL shape. */
+declare function getVimeoId(url: string): string | null;
+/**
+ * Resolve a video URL to an embeddable `<iframe>` src.
+ * Returns `null` if the URL is not an iframe-embeddable provider (e.g. a file).
+ */
+declare function getEmbedURL(url: string, provider: VideoProvider, autoplay: boolean): string | null;
+
+export { type ImageItem, type MediaItem, MediaLightbox, type MediaLightboxProps, type VideoItem, type VideoProvider, MediaLightbox as default, detectProvider, getEmbedURL, getVimeoId, getYouTubeId };

package/dist/index.d.ts

@@ -0,0 +1,70 @@
+import React from 'react';
+
+type VideoProvider = "youtube" | "vimeo" | "file";
+interface ImageItem {
+    type: "image";
+    /** Image source URL. */
+    src: string;
+    /** Optional caption shown in the footer; also used as the `alt` text. */
+    title?: string;
+    /** Explicit alt text. Falls back to `title`. */
+    alt?: string;
+}
+interface VideoItem {
+    type: "video";
+    /**
+     * Video source. For `youtube`/`vimeo` this is the page or embed URL; for
+     * `file` this is a direct media URL (mp4/webm/etc.).
+     */
+    src: string;
+    /**
+     * Video provider. When omitted (or "auto"), the provider is detected from
+     * the `src` URL.
+     */
+    provider?: VideoProvider | "auto";
+    /** Optional caption shown in the footer. */
+    title?: string;
+    /** Poster image for self-hosted (`file`) videos. */
+    poster?: string;
+    /** Autoplay when the slide becomes active. Defaults to `true`. */
+    autoplay?: boolean;
+}
+type MediaItem = ImageItem | VideoItem;
+interface MediaLightboxProps {
+    /** The media items to display. */
+    items: MediaItem[];
+    /** Index of the item to open first. Defaults to `0`. */
+    initialIndex?: number;
+    /** Called when the lightbox requests to close (Esc, close button, overlay click). */
+    onClose: () => void;
+    /** Fallback image URL used when an image fails to load. */
+    fallbackSrc?: string;
+    /** Show the "N / total" counter in the footer. Defaults to `true`. */
+    showCounter?: boolean;
+    /** Wrap around when navigating past the first/last item. Defaults to `true`. */
+    loop?: boolean;
+    /** Close the lightbox when the dimmed overlay (background) is clicked. Defaults to `true`. */
+    closeOnOverlayClick?: boolean;
+    /** Lock body scroll while the lightbox is open. Defaults to `true`. */
+    lockBodyScroll?: boolean;
+    /** Extra class name applied to the overlay root element. */
+    className?: string;
+    /** Fired whenever the active index changes. */
+    onIndexChange?: (index: number) => void;
+}
+
+declare function MediaLightbox({ items, initialIndex, onClose, fallbackSrc, showCounter, loop, closeOnOverlayClick, lockBodyScroll, className, onIndexChange, }: MediaLightboxProps): React.JSX.Element | null;
+
+/** Detect a video provider from its URL. */
+declare function detectProvider(url: string): VideoProvider;
+/** Extract the YouTube video id from any common YouTube URL shape. */
+declare function getYouTubeId(url: string): string | null;
+/** Extract the numeric Vimeo id from any common Vimeo URL shape. */
+declare function getVimeoId(url: string): string | null;
+/**
+ * Resolve a video URL to an embeddable `<iframe>` src.
+ * Returns `null` if the URL is not an iframe-embeddable provider (e.g. a file).
+ */
+declare function getEmbedURL(url: string, provider: VideoProvider, autoplay: boolean): string | null;
+
+export { type ImageItem, type MediaItem, MediaLightbox, type MediaLightboxProps, type VideoItem, type VideoProvider, MediaLightbox as default, detectProvider, getEmbedURL, getVimeoId, getYouTubeId };

package/dist/index.js

@@ -0,0 +1,233 @@
+import { useState, useCallback, useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/MediaLightbox.tsx
+
+// src/video.ts
+function detectProvider(url) {
+  if (!url) return "file";
+  if (/(?:youtube\.com|youtu\.be|youtube-nocookie\.com)/i.test(url)) {
+    return "youtube";
+  }
+  if (/vimeo\.com/i.test(url)) {
+    return "vimeo";
+  }
+  return "file";
+}
+function getYouTubeId(url) {
+  if (!url) return null;
+  try {
+    if (url.includes("youtube.com/embed/")) {
+      return url.split("youtube.com/embed/")[1]?.split(/[?&/]/)[0] ?? null;
+    }
+    if (url.includes("youtube-nocookie.com/embed/")) {
+      return url.split("youtube-nocookie.com/embed/")[1]?.split(/[?&/]/)[0] ?? null;
+    }
+    if (url.includes("youtube.com/v/")) {
+      return url.split("youtube.com/v/")[1]?.split(/[?&/]/)[0] ?? null;
+    }
+    if (url.includes("youtu.be/")) {
+      return url.split("youtu.be/")[1]?.split(/[?&/]/)[0] ?? null;
+    }
+    if (url.includes("youtube.com/watch")) {
+      const params = new URLSearchParams(new URL(url).search);
+      return params.get("v");
+    }
+  } catch {
+    return null;
+  }
+  return null;
+}
+function getVimeoId(url) {
+  if (!url) return null;
+  if (url.includes("player.vimeo.com/video/")) {
+    return url.split("player.vimeo.com/video/")[1]?.split(/[?&/]/)[0] ?? null;
+  }
+  const match = url.match(/vimeo\.com\/(?:.*\/)?(\d+)/i);
+  return match ? match[1] : null;
+}
+function getEmbedURL(url, provider, autoplay) {
+  if (provider === "youtube") {
+    const id = getYouTubeId(url);
+    if (id) {
+      const params = autoplay ? "?autoplay=1" : "";
+      return `https://www.youtube-nocookie.com/embed/${id}${params}`;
+    }
+    return url.replace("youtube.com", "youtube-nocookie.com");
+  }
+  if (provider === "vimeo") {
+    const id = getVimeoId(url);
+    if (id) {
+      const params = autoplay ? "?autoplay=1" : "";
+      return `https://player.vimeo.com/video/${id}${params}`;
+    }
+    return url;
+  }
+  return null;
+}
+var CloseIcon = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) });
+var PrevIcon = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" }) });
+var NextIcon = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" }) });
+function ImageSlide({
+  src,
+  alt,
+  fallbackSrc
+}) {
+  const [isLoaded, setIsLoaded] = useState(false);
+  const [renderedSrc, setRenderedSrc] = useState(src);
+  if (renderedSrc !== src) {
+    setRenderedSrc(src);
+    setIsLoaded(false);
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "rml-imageContainer", children: [
+    !isLoaded && /* @__PURE__ */ jsx("div", { className: "rml-spinner" }),
+    /* @__PURE__ */ jsx(
+      "img",
+      {
+        className: `rml-image${isLoaded ? " rml-imageLoaded" : ""}`,
+        src,
+        alt,
+        draggable: false,
+        onLoad: () => setIsLoaded(true),
+        onError: (e) => {
+          setIsLoaded(true);
+          if (fallbackSrc && e.currentTarget.src !== fallbackSrc) {
+            e.currentTarget.src = fallbackSrc;
+          }
+        }
+      }
+    )
+  ] });
+}
+function VideoSlide({ item }) {
+  const autoplay = item.autoplay ?? true;
+  const provider = !item.provider || item.provider === "auto" ? detectProvider(item.src) : item.provider;
+  if (provider === "file") {
+    return /* @__PURE__ */ jsx("div", { className: "rml-playerContainer rml-fileContainer", children: /* @__PURE__ */ jsx(
+      "video",
+      {
+        className: "rml-videoPlayer",
+        src: item.src,
+        poster: item.poster,
+        controls: true,
+        autoPlay: autoplay,
+        playsInline: true
+      }
+    ) });
+  }
+  const embedUrl = getEmbedURL(item.src, provider, autoplay) ?? item.src;
+  return /* @__PURE__ */ jsx("div", { className: "rml-playerContainer", children: /* @__PURE__ */ jsx(
+    "iframe",
+    {
+      className: "rml-iframePlayer",
+      src: embedUrl,
+      title: item.title || "Video player",
+      allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share",
+      allowFullScreen: true
+    }
+  ) });
+}
+function MediaLightbox({
+  items,
+  initialIndex = 0,
+  onClose,
+  fallbackSrc,
+  showCounter = true,
+  loop = true,
+  closeOnOverlayClick = true,
+  lockBodyScroll = true,
+  className,
+  onIndexChange
+}) {
+  const count = items?.length ?? 0;
+  const [currentIndex, setCurrentIndex] = useState(initialIndex);
+  const handlePrev = useCallback(() => {
+    setCurrentIndex((prev) => {
+      const next = prev === 0 ? loop ? count - 1 : 0 : prev - 1;
+      onIndexChange?.(next);
+      return next;
+    });
+  }, [count, loop, onIndexChange]);
+  const handleNext = useCallback(() => {
+    setCurrentIndex((prev) => {
+      const next = prev === count - 1 ? loop ? 0 : count - 1 : prev + 1;
+      onIndexChange?.(next);
+      return next;
+    });
+  }, [count, loop, onIndexChange]);
+  useEffect(() => {
+    const handleKeyDown = (e) => {
+      if (e.key === "ArrowLeft") handlePrev();
+      else if (e.key === "ArrowRight") handleNext();
+      else if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    let previousOverflow = "";
+    if (lockBodyScroll) {
+      previousOverflow = document.body.style.overflow;
+      document.body.style.overflow = "hidden";
+    }
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+      if (lockBodyScroll) {
+        document.body.style.overflow = previousOverflow;
+      }
+    };
+  }, [handlePrev, handleNext, onClose, lockBodyScroll]);
+  if (!items || count === 0) return null;
+  const safeIndex = Math.min(Math.max(currentIndex, 0), count - 1);
+  const current = items[safeIndex];
+  const handleOverlayClick = (e) => {
+    if (closeOnOverlayClick && e.target === e.currentTarget) {
+      onClose();
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `rml-overlay${className ? ` ${className}` : ""}`,
+      role: "dialog",
+      "aria-modal": "true",
+      onClick: handleOverlayClick,
+      children: [
+        /* @__PURE__ */ jsx("button", { className: "rml-closeBtn", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ jsx(CloseIcon, {}) }),
+        count > 1 && /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: "rml-navBtn rml-prevBtn",
+            onClick: handlePrev,
+            "aria-label": "Previous",
+            children: /* @__PURE__ */ jsx(PrevIcon, {})
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "rml-content", onClick: handleOverlayClick, children: current.type === "video" ? /* @__PURE__ */ jsx(VideoSlide, { item: current }) : /* @__PURE__ */ jsx(
+          ImageSlide,
+          {
+            src: current.src,
+            alt: current.alt || current.title || `Item ${safeIndex + 1}`,
+            fallbackSrc
+          },
+          safeIndex
+        ) }),
+        count > 1 && /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: "rml-navBtn rml-nextBtn",
+            onClick: handleNext,
+            "aria-label": "Next",
+            children: /* @__PURE__ */ jsx(NextIcon, {})
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "rml-footer", children: [
+          showCounter && /* @__PURE__ */ jsx("span", { className: "rml-counter", children: `${safeIndex + 1} / ${count}` }),
+          current.title && /* @__PURE__ */ jsx("h4", { className: "rml-title", children: current.title })
+        ] })
+      ]
+    }
+  );
+}
+var MediaLightbox_default = MediaLightbox;
+
+export { MediaLightbox, MediaLightbox_default as default, detectProvider, getEmbedURL, getVimeoId, getYouTubeId };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/video.ts","../src/MediaLightbox.tsx"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["import type { VideoProvider } from \"./types\";\n\n/** Detect a video provider from its URL. */\nexport function detectProvider(url: string): VideoProvider {\n  if (!url) return \"file\";\n  if (/(?:youtube\\.com|youtu\\.be|youtube-nocookie\\.com)/i.test(url)) {\n    return \"youtube\";\n  }\n  if (/vimeo\\.com/i.test(url)) {\n    return \"vimeo\";\n  }\n  return \"file\";\n}\n\n/** Extract the YouTube video id from any common YouTube URL shape. */\nexport function getYouTubeId(url: string): string | null {\n  if (!url) return null;\n  try {\n    if (url.includes(\"youtube.com/embed/\")) {\n      return url.split(\"youtube.com/embed/\")[1]?.split(/[?&/]/)[0] ?? null;\n    }\n    if (url.includes(\"youtube-nocookie.com/embed/\")) {\n      return url.split(\"youtube-nocookie.com/embed/\")[1]?.split(/[?&/]/)[0] ?? null;\n    }\n    if (url.includes(\"youtube.com/v/\")) {\n      return url.split(\"youtube.com/v/\")[1]?.split(/[?&/]/)[0] ?? null;\n    }\n    if (url.includes(\"youtu.be/\")) {\n      return url.split(\"youtu.be/\")[1]?.split(/[?&/]/)[0] ?? null;\n    }\n    if (url.includes(\"youtube.com/watch\")) {\n      const params = new URLSearchParams(new URL(url).search);\n      return params.get(\"v\");\n    }\n  } catch {\n    return null;\n  }\n  return null;\n}\n\n/** Extract the numeric Vimeo id from any common Vimeo URL shape. */\nexport function getVimeoId(url: string): string | null {\n  if (!url) return null;\n  if (url.includes(\"player.vimeo.com/video/\")) {\n    return url.split(\"player.vimeo.com/video/\")[1]?.split(/[?&/]/)[0] ?? null;\n  }\n  const match = url.match(/vimeo\\.com\\/(?:.*\\/)?(\\d+)/i);\n  return match ? match[1] : null;\n}\n\n/**\n * Resolve a video URL to an embeddable `<iframe>` src.\n * Returns `null` if the URL is not an iframe-embeddable provider (e.g. a file).\n */\nexport function getEmbedURL(\n  url: string,\n  provider: VideoProvider,\n  autoplay: boolean\n): string | null {\n  if (provider === \"youtube\") {\n    const id = getYouTubeId(url);\n    if (id) {\n      const params = autoplay ? \"?autoplay=1\" : \"\";\n      return `https://www.youtube-nocookie.com/embed/${id}${params}`;\n    }\n    return url.replace(\"youtube.com\", \"youtube-nocookie.com\");\n  }\n  if (provider === \"vimeo\") {\n    const id = getVimeoId(url);\n    if (id) {\n      const params = autoplay ? \"?autoplay=1\" : \"\";\n      return `https://player.vimeo.com/video/${id}${params}`;\n    }\n    return url;\n  }\n  return null;\n}\n","\"use client\";\n\nimport React, { useCallback, useEffect, useState } from \"react\";\nimport type { MediaItem, MediaLightboxProps, VideoItem } from \"./types\";\nimport { detectProvider, getEmbedURL } from \"./video\";\n\nconst CloseIcon = () => (\n  <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n    <path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\" />\n  </svg>\n);\n\nconst PrevIcon = () => (\n  <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n    <path d=\"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z\" />\n  </svg>\n);\n\nconst NextIcon = () => (\n  <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n    <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\" />\n  </svg>\n);\n\nfunction ImageSlide({\n  src,\n  alt,\n  fallbackSrc,\n}: {\n  src: string;\n  alt: string;\n  fallbackSrc?: string;\n}) {\n  const [isLoaded, setIsLoaded] = useState(false);\n\n  // Reset the loaded flag when the source changes (React-recommended derived\n  // state via render-time comparison instead of an effect).\n  const [renderedSrc, setRenderedSrc] = useState(src);\n  if (renderedSrc !== src) {\n    setRenderedSrc(src);\n    setIsLoaded(false);\n  }\n\n  return (\n    <div className=\"rml-imageContainer\">\n      {!isLoaded && <div className=\"rml-spinner\" />}\n      {/* eslint-disable-next-line @next/next/no-img-element */}\n      <img\n        className={`rml-image${isLoaded ? \" rml-imageLoaded\" : \"\"}`}\n        src={src}\n        alt={alt}\n        draggable={false}\n        onLoad={() => setIsLoaded(true)}\n        onError={(e) => {\n          setIsLoaded(true);\n          if (fallbackSrc && e.currentTarget.src !== fallbackSrc) {\n            e.currentTarget.src = fallbackSrc;\n          }\n        }}\n      />\n    </div>\n  );\n}\n\nfunction VideoSlide({ item }: { item: VideoItem }) {\n  const autoplay = item.autoplay ?? true;\n  const provider =\n    !item.provider || item.provider === \"auto\"\n      ? detectProvider(item.src)\n      : item.provider;\n\n  if (provider === \"file\") {\n    return (\n      <div className=\"rml-playerContainer rml-fileContainer\">\n        <video\n          className=\"rml-videoPlayer\"\n          src={item.src}\n          poster={item.poster}\n          controls\n          autoPlay={autoplay}\n          playsInline\n        />\n      </div>\n    );\n  }\n\n  const embedUrl = getEmbedURL(item.src, provider, autoplay) ?? item.src;\n\n  return (\n    <div className=\"rml-playerContainer\">\n      <iframe\n        className=\"rml-iframePlayer\"\n        src={embedUrl}\n        title={item.title || \"Video player\"}\n        allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\n        allowFullScreen\n      />\n    </div>\n  );\n}\n\nexport function MediaLightbox({\n  items,\n  initialIndex = 0,\n  onClose,\n  fallbackSrc,\n  showCounter = true,\n  loop = true,\n  closeOnOverlayClick = true,\n  lockBodyScroll = true,\n  className,\n  onIndexChange,\n}: MediaLightboxProps) {\n  const count = items?.length ?? 0;\n  const [currentIndex, setCurrentIndex] = useState(initialIndex);\n\n  const handlePrev = useCallback(() => {\n    setCurrentIndex((prev) => {\n      const next = prev === 0 ? (loop ? count - 1 : 0) : prev - 1;\n      onIndexChange?.(next);\n      return next;\n    });\n  }, [count, loop, onIndexChange]);\n\n  const handleNext = useCallback(() => {\n    setCurrentIndex((prev) => {\n      const next = prev === count - 1 ? (loop ? 0 : count - 1) : prev + 1;\n      onIndexChange?.(next);\n      return next;\n    });\n  }, [count, loop, onIndexChange]);\n\n  useEffect(() => {\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key === \"ArrowLeft\") handlePrev();\n      else if (e.key === \"ArrowRight\") handleNext();\n      else if (e.key === \"Escape\") onClose();\n    };\n\n    window.addEventListener(\"keydown\", handleKeyDown);\n    let previousOverflow = \"\";\n    if (lockBodyScroll) {\n      previousOverflow = document.body.style.overflow;\n      document.body.style.overflow = \"hidden\";\n    }\n\n    return () => {\n      window.removeEventListener(\"keydown\", handleKeyDown);\n      if (lockBodyScroll) {\n        document.body.style.overflow = previousOverflow;\n      }\n    };\n  }, [handlePrev, handleNext, onClose, lockBodyScroll]);\n\n  if (!items || count === 0) return null;\n\n  const safeIndex = Math.min(Math.max(currentIndex, 0), count - 1);\n  const current: MediaItem = items[safeIndex];\n\n  const handleOverlayClick = (e: React.MouseEvent) => {\n    if (closeOnOverlayClick && e.target === e.currentTarget) {\n      onClose();\n    }\n  };\n\n  return (\n    <div\n      className={`rml-overlay${className ? ` ${className}` : \"\"}`}\n      role=\"dialog\"\n      aria-modal=\"true\"\n      onClick={handleOverlayClick}\n    >\n      <button className=\"rml-closeBtn\" onClick={onClose} aria-label=\"Close\">\n        <CloseIcon />\n      </button>\n\n      {count > 1 && (\n        <button\n          className=\"rml-navBtn rml-prevBtn\"\n          onClick={handlePrev}\n          aria-label=\"Previous\"\n        >\n          <PrevIcon />\n        </button>\n      )}\n\n      <div className=\"rml-content\" onClick={handleOverlayClick}>\n        {current.type === \"video\" ? (\n          <VideoSlide item={current} />\n        ) : (\n          <ImageSlide\n            key={safeIndex}\n            src={current.src}\n            alt={current.alt || current.title || `Item ${safeIndex + 1}`}\n            fallbackSrc={fallbackSrc}\n          />\n        )}\n      </div>\n\n      {count > 1 && (\n        <button\n          className=\"rml-navBtn rml-nextBtn\"\n          onClick={handleNext}\n          aria-label=\"Next\"\n        >\n          <NextIcon />\n        </button>\n      )}\n\n      <div className=\"rml-footer\">\n        {showCounter && (\n          <span className=\"rml-counter\">{`${safeIndex + 1} / ${count}`}</span>\n        )}\n        {current.title && <h4 className=\"rml-title\">{current.title}</h4>}\n      </div>\n    </div>\n  );\n}\n\nexport default MediaLightbox;\n"]}

package/dist/styles.css

@@ -0,0 +1,252 @@
+.rml-overlay {
+  position: fixed;
+  inset: 0;
+  background-color: rgba(10, 10, 10, 0.9);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 99999;
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  animation: rml-fadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+  user-select: none;
+}
+
+.rml-content {
+  position: relative;
+  width: 90vw;
+  height: 80vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  outline: none;
+}
+
+/* ---------- Image slide ---------- */
+.rml-imageContainer {
+  position: relative;
+  max-width: 100%;
+  max-height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.rml-image {
+  max-width: 100%;
+  max-height: 75vh;
+  object-fit: contain;
+  border-radius: 6px;
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
+  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+  opacity: 0;
+  transform: scale(0.97);
+}
+
+.rml-imageLoaded {
+  opacity: 1;
+  transform: scale(1);
+}
+
+/* ---------- Video slide ---------- */
+.rml-playerContainer {
+  position: relative;
+  width: 90vw;
+  max-width: 1000px;
+  aspect-ratio: 16 / 9;
+  background-color: #000;
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.rml-iframePlayer,
+.rml-videoPlayer {
+  width: 100%;
+  height: 100%;
+  border: 0;
+  display: block;
+}
+
+.rml-videoPlayer {
+  object-fit: contain;
+  background-color: #000;
+}
+
+/* ---------- Controls ---------- */
+.rml-closeBtn {
+  position: absolute;
+  top: 30px;
+  right: 30px;
+  background: rgba(255, 255, 255, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  color: #fff;
+  width: 46px;
+  height: 46px;
+  border-radius: 50%;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
+  z-index: 100002;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+}
+
+.rml-closeBtn:hover {
+  background: rgba(255, 255, 255, 0.2);
+  border-color: rgba(255, 255, 255, 0.3);
+  transform: scale(1.05);
+}
+
+.rml-closeBtn svg {
+  width: 20px;
+  height: 20px;
+  fill: currentColor;
+}
+
+.rml-navBtn {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  background: rgba(255, 255, 255, 0.06);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  color: #fff;
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
+  z-index: 100001;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+}
+
+.rml-navBtn:hover {
+  background: rgba(255, 255, 255, 0.18);
+  border-color: rgba(255, 255, 255, 0.25);
+  transform: translateY(-50%) scale(1.05);
+}
+
+.rml-prevBtn {
+  left: 30px;
+}
+
+.rml-nextBtn {
+  right: 30px;
+}
+
+.rml-navBtn svg {
+  width: 24px;
+  height: 24px;
+  fill: currentColor;
+}
+
+/* ---------- Footer ---------- */
+.rml-footer {
+  position: absolute;
+  bottom: 30px;
+  left: 0;
+  right: 0;
+  text-align: center;
+  color: #fff;
+  padding: 0 40px;
+  pointer-events: none;
+  z-index: 100000;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+}
+
+.rml-counter {
+  font-size: 13px;
+  font-weight: 500;
+  color: rgba(255, 255, 255, 0.5);
+  letter-spacing: 1.5px;
+  text-transform: uppercase;
+}
+
+.rml-title {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  font-size: 18px;
+  font-weight: 500;
+  margin: 0;
+  letter-spacing: 0.5px;
+  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
+  max-width: 600px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* ---------- Spinner ---------- */
+.rml-spinner {
+  position: absolute;
+  width: 40px;
+  height: 40px;
+  border: 3px solid rgba(255, 255, 255, 0.1);
+  border-radius: 50%;
+  border-top-color: #fff;
+  animation: rml-spin 0.8s ease-in-out infinite;
+  z-index: 99999;
+}
+
+@keyframes rml-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes rml-fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* ---------- Responsive ---------- */
+@media (max-width: 768px) {
+  .rml-closeBtn {
+    top: 15px;
+    right: 15px;
+    width: 40px;
+    height: 40px;
+  }
+
+  .rml-navBtn {
+    width: 44px;
+    height: 44px;
+  }
+
+  .rml-prevBtn {
+    left: 15px;
+  }
+
+  .rml-nextBtn {
+    right: 15px;
+  }
+
+  .rml-navBtn svg {
+    width: 18px;
+    height: 18px;
+  }
+
+  .rml-title {
+    font-size: 15px;
+    max-width: 80%;
+  }
+
+  .rml-image {
+    max-height: 65vh;
+  }
+
+  .rml-playerContainer {
+    width: 95vw;
+  }
+}

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "react-media-lightbox",
+  "version": "0.1.0",
+  "description": "A lightweight, dependency-free React lightbox for images and video (YouTube, Vimeo, and self-hosted files).",
+  "keywords": [
+    "react",
+    "lightbox",
+    "gallery",
+    "image",
+    "video",
+    "youtube",
+    "vimeo",
+    "modal",
+    "carousel"
+  ],
+  "license": "MIT",
+  "author": "Sreekanth Ramachandran <tech.sreekanth@gmail.com>",
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.2"
+  }
+}