@reelkit/react-lightbox - npm Package Compare versions

Comparing version 0.4.1 to 0.5.0

dist/index.d.ts

@@ -45,5 +45,6 @@ /**
 export { LightboxOverlay } from './lib/LightboxOverlay';
+export { slideTransition, flipTransition } from '@reelkit/react';
 export { lightboxFadeTransition } from './lib/lightboxFadeTransition';
 export { lightboxZoomTransition } from './lib/lightboxZoomTransition';
-export type { LightboxOverlayProps, LightboxItem, TransitionType, ReelProxyProps, } from './lib/LightboxOverlay';
+export type { LightboxOverlayProps, LightboxItem, ReelProxyProps, } from './lib/LightboxOverlay';
 export type { ControlsRenderProps, SlideRenderProps, NavigationRenderProps, InfoRenderProps, } from './lib/types';
@@ -50,0 +51,0 @@ export { CloseButton, Counter, FullscreenButton, SoundButton, } from './lib/LightboxControls';

dist/index.js

@@ -1,35 +0,8 @@
-import { jsx as e, jsxs as v, Fragment as x } from "react/jsx-runtime";
-import { useRef as V, useState as Y, useEffect as _, useLayoutEffect as de, useMemo as ge, useCallback as J } from "react";
+import { jsx as e, jsxs as f, Fragment as x } from "react/jsx-runtime";
+import { useRef as M, useState as Y, useEffect as j, useLayoutEffect as de, useMemo as ge, useCallback as J } from "react";
 import { createPortal as he } from "react-dom";
-import { getSlideProgress as K, abs as ee, clamp as me, createSignal as M, createContentLoadingController as fe, useFullscreen as ve, useBodyLock as be, createDisposableList as ne, captureFocusForReturn as pe, createFocusTrap as xe, observeDomEvent as X, reaction as ke, Observe as k, SwipeToClose as Ce, Reel as we, flipTransition as ye, slideTransition as Ne, createContentPreloader as Se, useSoundState as te, observeMediaLoading as Ie, syncMutedToVideo as Fe, captureFrame as Re, createSharedVideo as Ee, SoundProvider as Le } from "@reelkit/react";
-import { X as Pe, Minimize as Te, Maximize as ze, VolumeX as Me, Volume2 as Ve, ImageOff as $e, ChevronLeft as We, ChevronRight as Be } from "lucide-react";
-const De = (n, s, t, o) => {
-  if (o === 0) return { opacity: 0 };
-  const r = K(
-    n,
-    s,
-    t,
-    o
-  ), h = ee(r);
-  return {
-    transform: `translateX(${r * o * 0.08}px)`,
-    opacity: me(1 - h, 0, 1),
-    zIndex: s === t ? 2 : 1
-  };
-}, Oe = (n, s, t, o) => {
-  if (o === 0) return { opacity: 0 };
-  const r = K(
-    n,
-    s,
-    t,
-    o
-  ), h = ee(r);
-  if (h >= 1) return { opacity: 0, zIndex: 0 };
-  const m = 0.7 + (1 - h) * 0.3;
-  return {
-    transform: `translateX(${r * o * 0.08}px) scale(${m})`,
-    opacity: 1 - h,
-    zIndex: h < 0.5 ? 2 : 1
-  };
-}, re = ({
+import { createSignal as V, createContentLoadingController as me, useFullscreen as ve, useBodyLock as fe, createDisposableList as K, captureFocusForReturn as be, createFocusTrap as pe, observeDomEvent as X, reaction as xe, Observe as k, SwipeToClose as ke, Reel as Ce, slideTransition as we, createContentPreloader as ye, getSlideProgress as ee, abs as ne, clamp as Ne, useSoundState as te, observeMediaLoading as Se, syncMutedToVideo as Ie, captureFrame as Fe, createSharedVideo as Re, SoundProvider as Ee } from "@reelkit/react";
+import { flipTransition as tn, slideTransition as rn } from "@reelkit/react";
+import { X as Le, Minimize as Te, Maximize as Pe, VolumeX as ze, Volume2 as Ve, ImageOff as Me, ChevronLeft as $e, ChevronRight as We } from "lucide-react";
+const re = ({
   onClick: n,
@@ -45,3 +18,3 @@ className: s = "rk-lightbox-close",
     style: t,
-    children: /* @__PURE__ */ e(Pe, { size: 24 })
+    children: /* @__PURE__ */ e(Le, { size: 24 })
   }
@@ -53,3 +26,3 @@ ), oe = ({
   style: o
-}) => /* @__PURE__ */ v("span", { className: t, style: o, children: [
+}) => /* @__PURE__ */ f("span", { className: t, style: o, children: [
   n + 1,
@@ -70,5 +43,5 @@ " / ",
     style: o,
-    children: n ? /* @__PURE__ */ e(Te, { size: 20 }) : /* @__PURE__ */ e(ze, { size: 20 })
+    children: n ? /* @__PURE__ */ e(Te, { size: 20 }) : /* @__PURE__ */ e(Pe, { size: 20 })
   }
-), Xe = ({
+), Be = ({
   isMuted: n,
@@ -85,5 +58,5 @@ onToggle: s,
     style: o,
-    children: n ? /* @__PURE__ */ e(Me, { size: 20 }) : /* @__PURE__ */ e(Ve, { size: 20 })
+    children: n ? /* @__PURE__ */ e(ze, { size: 20 }) : /* @__PURE__ */ e(Ve, { size: 20 })
   }
-), _e = ({
+), De = ({
   onClose: n,
@@ -94,4 +67,4 @@ currentIndex: s,
   onToggleFullscreen: r
-}) => /* @__PURE__ */ v(x, { children: [
-  /* @__PURE__ */ v("div", { className: "rk-lightbox-controls-left", children: [
+}) => /* @__PURE__ */ f(x, { children: [
+  /* @__PURE__ */ f("div", { className: "rk-lightbox-controls-left", children: [
     /* @__PURE__ */ e(oe, { currentIndex: s, count: t }),
@@ -107,8 +80,3 @@ /* @__PURE__ */ e(
   /* @__PURE__ */ e(re, { onClick: n })
-] }), je = {
-  slide: Ne,
-  fade: De,
-  flip: ye,
-  "zoom-in": Oe
-}, Q = 2, S = Se({ maxCacheSize: 1e3 }), Ae = (n) => {
+] }), Q = 2, S = ye({ maxCacheSize: 1e3 }), Oe = (n) => {
   const {
@@ -118,30 +86,30 @@ images: s,
     onClose: o,
-    transition: r = "slide",
-    transitionFn: h,
-    apiRef: m,
-    loop: C = !1,
-    enableNavKeys: w = !0,
-    enableWheel: I = !0,
-    wheelDebounceMs: b,
-    transitionDuration: y,
-    swipeDistanceFactor: c
-  } = n, d = V(n);
+    transitionFn: r,
+    apiRef: h,
+    loop: m = !1,
+    enableNavKeys: C = !0,
+    enableWheel: w = !0,
+    wheelDebounceMs: I,
+    transitionDuration: b,
+    swipeDistanceFactor: y,
+    swipeToCloseDirection: c = "up"
+  } = n, d = M(n);
   d.current = n;
-  const p = V(null), B = V(null), F = m ?? B, [
+  const p = M(null), B = M(null), F = h ?? B, [
     {
       sizeSignal: D,
       loadingCtrl: E,
-      indexSignal: f,
+      indexSignal: v,
       isMobileSignal: N,
       handleAfterChange: le,
-      handlePrev: j,
-      handleNext: A,
+      handlePrev: A,
+      handleNext: _,
       itemBuilder: se
     }
   ] = Y(() => {
-    const i = M(
+    const i = V(
       typeof window < "u" ? [window.innerWidth, window.innerHeight] : [0, 0]
-    ), a = fe(!0, t), u = M(t), l = M(
+    ), a = me(!0, t), u = V(t), l = V(
       typeof window < "u" ? "ontouchstart" in window || navigator.maxTouchPoints > 0 : !1
-    ), R = /* @__PURE__ */ new Set(), ce = M(0);
+    ), R = /* @__PURE__ */ new Set(), ce = V(0);
     return {
@@ -165,11 +133,11 @@ sizeSignal: i,
       },
-      itemBuilder: (g, L, P) => {
-        const { images: O, renderSlide: U } = d.current, T = O[g], Z = g === u.value, q = () => a.onReady(g), ue = () => a.onWaiting(g), G = () => {
-          S.markErrored(T.src), a.onError(g);
+      itemBuilder: (g, L, T) => {
+        const { images: O, renderSlide: U } = d.current, P = O[g], Z = g === u.value, q = () => a.onReady(g), ue = () => a.onWaiting(g), G = () => {
+          S.markErrored(P.src), a.onError(g);
         };
         if (U) {
           const W = U({
-            item: T,
+            item: P,
             index: g,
-            size: P,
+            size: T,
             isActive: Z,
@@ -188,3 +156,3 @@ onReady: q,
                 "aria-label": `Image ${g + 1} of ${O.length}`,
-                style: { width: P[0], height: P[1] },
+                style: { width: T[0], height: T[1] },
                 children: W
@@ -201,8 +169,8 @@ }
             "aria-label": `Image ${g + 1} of ${O.length}`,
-            style: { width: P[0], height: P[1] },
+            style: { width: T[0], height: T[1] },
             children: /* @__PURE__ */ e(
               "img",
               {
-                src: T.src,
-                alt: T.title || `Image ${g + 1}`,
+                src: P.src,
+                alt: P.title || `Image ${g + 1}`,
                 className: "rk-lightbox-img",
@@ -212,3 +180,3 @@ draggable: !1,
                 onLoad: () => {
-                  S.markLoaded(T.src), q();
+                  S.markLoaded(P.src), q();
                 },
@@ -224,10 +192,10 @@ onError: (W) => {
     };
-  }), [$, qe, ae, H] = ve({
+  }), [$, _e, ae, H] = ve({
     ref: p
   });
-  return be(!0), _(() => {
-    const i = ne();
-    i.push(pe());
+  return fe(!0), j(() => {
+    const i = K();
+    i.push(be());
     const a = p.current;
-    a && (a.focus({ preventScroll: !0 }), i.push(xe(a))), i.push(
+    a && (a.focus({ preventScroll: !0 }), i.push(pe(a))), i.push(
       X(window, "resize", () => {
@@ -239,8 +207,8 @@ D.value = [window.innerWidth, window.innerHeight], N.value = "ontouchstart" in window || navigator.maxTouchPoints > 0;
       }),
-      ke(
-        () => [f],
+      xe(
+        () => [v],
         () => {
           S.preloadRange(
             d.current.images,
-            f.value,
+            v.value,
             Q
@@ -252,6 +220,6 @@ );
       d.current.images,
-      f.value,
+      v.value,
       Q
     );
-    const u = f.value, l = d.current.images[u]?.src;
+    const u = v.value, l = d.current.images[u]?.src;
     return l && i.push(
@@ -261,3 +229,3 @@ S.onLoaded(l, () => E.onReady(u))
   }, []), he(
-    /* @__PURE__ */ v(
+    /* @__PURE__ */ f(
       "div",
@@ -272,4 +240,4 @@ {
         children: [
-          /* @__PURE__ */ e(k, { signals: [$, f], children: () => {
-            const i = f.value, {
+          /* @__PURE__ */ e(k, { signals: [$, v], children: () => {
+            const i = v.value, {
               renderControls: a,
@@ -287,3 +255,3 @@ onClose: u,
             }) : /* @__PURE__ */ e(
-              _e,
+              De,
               {
@@ -301,6 +269,6 @@ onClose: u,
             {
-              signals: [E.isLoading, E.isError, f],
+              signals: [E.isLoading, E.isError, v],
               children: () => {
-                const i = f.value, { renderLoading: a, renderError: u, images: l } = d.current, R = l[i];
-                return E.isError.value ? u ? /* @__PURE__ */ e(x, { children: u({ item: R, activeIndex: i }) }) : /* @__PURE__ */ v(
+                const i = v.value, { renderLoading: a, renderError: u, images: l } = d.current, R = l[i];
+                return E.isError.value ? u ? /* @__PURE__ */ e(x, { children: u({ item: R, activeIndex: i }) }) : /* @__PURE__ */ f(
                   "div",
@@ -312,3 +280,3 @@ {
                     children: [
-                      /* @__PURE__ */ e($e, { size: 48, strokeWidth: 1.5, "aria-hidden": "true" }),
+                      /* @__PURE__ */ e(Me, { size: 48, strokeWidth: 1.5, "aria-hidden": "true" }),
                       /* @__PURE__ */ e("span", { className: "rk-lightbox-img-error-text", children: "Content unavailable" })
@@ -322,9 +290,9 @@ ]
           /* @__PURE__ */ e(k, { signals: [D, N], children: () => /* @__PURE__ */ e(
-            Ce,
+            ke,
             {
-              direction: "up",
+              direction: c,
               enabled: N.value,
               onClose: o,
               children: /* @__PURE__ */ e(
-                we,
+                Ce,
                 {
@@ -337,9 +305,9 @@ count: s.length,
                   afterChange: le,
-                  transition: h ?? je[r],
-                  transitionDuration: y,
-                  swipeDistanceFactor: c,
-                  loop: C,
-                  enableNavKeys: w,
-                  enableWheel: I,
-                  wheelDebounceMs: b,
+                  transition: r ?? we,
+                  transitionDuration: b,
+                  swipeDistanceFactor: y,
+                  loop: m,
+                  enableNavKeys: C,
+                  enableWheel: w,
+                  wheelDebounceMs: I,
                   itemBuilder: se
@@ -350,11 +318,11 @@ }
           ) }),
-          /* @__PURE__ */ e(k, { signals: [f, N], children: () => {
-            const i = f.value, a = N.value, { renderNavigation: u, images: l } = d.current;
+          /* @__PURE__ */ e(k, { signals: [v, N], children: () => {
+            const i = v.value, a = N.value, { renderNavigation: u, images: l } = d.current;
             return u ? /* @__PURE__ */ e(x, { children: u({
               item: l[i],
-              onPrev: j,
-              onNext: A,
+              onPrev: A,
+              onNext: _,
               activeIndex: i,
               count: l.length
-            }) }) : a || l.length <= 1 ? null : /* @__PURE__ */ v(x, { children: [
+            }) }) : a || l.length <= 1 ? null : /* @__PURE__ */ f(x, { children: [
               i > 0 && /* @__PURE__ */ e(
@@ -364,5 +332,5 @@ "button",
                   className: "rk-lightbox-nav rk-lightbox-nav-prev",
-                  onClick: j,
+                  onClick: A,
                   title: "Previous",
-                  children: /* @__PURE__ */ e(We, { size: 32 })
+                  children: /* @__PURE__ */ e($e, { size: 32 })
                 }
@@ -374,5 +342,5 @@ ),
                   className: "rk-lightbox-nav rk-lightbox-nav-next",
-                  onClick: A,
+                  onClick: _,
                   title: "Next",
-                  children: /* @__PURE__ */ e(Be, { size: 32 })
+                  children: /* @__PURE__ */ e(We, { size: 32 })
                 }
@@ -382,5 +350,5 @@ )
           } }),
-          /* @__PURE__ */ e(k, { signals: [f], children: () => {
-            const i = f.value, { renderInfo: a, images: u } = d.current, l = u[i];
-            return a ? /* @__PURE__ */ e(x, { children: a({ item: l, index: i }) }) : !l?.title && !l?.description ? null : /* @__PURE__ */ v("div", { className: "rk-lightbox-info", children: [
+          /* @__PURE__ */ e(k, { signals: [v], children: () => {
+            const i = v.value, { renderInfo: a, images: u } = d.current, l = u[i];
+            return a ? /* @__PURE__ */ e(x, { children: a({ item: l, index: i }) }) : !l?.title && !l?.description ? null : /* @__PURE__ */ f("div", { className: "rk-lightbox-info", children: [
               l.title && /* @__PURE__ */ e("h3", { className: "rk-lightbox-title", children: l.title }),
@@ -396,5 +364,33 @@ l.description && /* @__PURE__ */ e("p", { className: "rk-lightbox-description", children: l.description })
   );
-}, en = (n) => n.isOpen ? /* @__PURE__ */ e(Ae, { ...n }) : null, z = Ee({
+}, Je = (n) => n.isOpen ? /* @__PURE__ */ e(Oe, { ...n }) : null, Qe = (n, s, t, o) => {
+  if (o === 0) return { opacity: 0 };
+  const r = ee(
+    n,
+    s,
+    t,
+    o
+  ), h = ne(r);
+  return {
+    transform: `translateX(${r * o * 0.08}px)`,
+    opacity: Ne(1 - h, 0, 1),
+    zIndex: s === t ? 2 : 1
+  };
+}, Ye = (n, s, t, o) => {
+  if (o === 0) return { opacity: 0 };
+  const r = ee(
+    n,
+    s,
+    t,
+    o
+  ), h = ne(r);
+  if (h >= 1) return { opacity: 0, zIndex: 0 };
+  const m = 0.7 + (1 - h) * 0.3;
+  return {
+    transform: `translateX(${r * o * 0.08}px) scale(${m})`,
+    opacity: 1 - h,
+    zIndex: h < 0.5 ? 2 : 1
+  };
+}, z = Re({
   className: "rk-lightbox-video-element"
-}), He = typeof window < "u" ? de : _, Ue = ({
+}), Xe = typeof window < "u" ? de : j, je = ({
   src: n,
@@ -409,8 +405,8 @@ poster: s,
 }) => {
-  const w = V(null), I = te(), [b] = Y(() => M(!0)), y = V({ onPlaying: h, onWaiting: m, onError: C });
-  return y.current = { onPlaying: h, onWaiting: m, onError: C }, He(() => {
+  const w = M(null), I = te(), [b] = Y(() => V(!0)), y = M({ onPlaying: h, onWaiting: m, onError: C });
+  return y.current = { onPlaying: h, onWaiting: m, onError: C }, Xe(() => {
     if (!t || !w.current) return;
-    const c = z.getVideo(), d = w.current, p = ne();
+    const c = z.getVideo(), d = w.current, p = K();
     b.value = !0, p.push(
-      Ie(c, {
+      Se(c, {
         onReady: () => {
@@ -429,3 +425,3 @@ y.current.onPlaying?.();
       })
-    ), c.src = n, c.muted = I.muted.value, p.push(Fe(I, c)), c.style.objectFit = "contain";
+    ), c.src = n, c.muted = I.muted.value, p.push(Ie(I, c)), c.style.objectFit = "contain";
     const B = z.playbackPositions.get(r);
@@ -436,3 +432,3 @@ return c.currentTime = B ?? 0, d.appendChild(c), c.play().catch(() => {
       z.playbackPositions.set(r, c.currentTime);
-      const F = Re(c);
+      const F = Fe(c);
       F && z.capturedFrames.set(r, F), c.parentNode === d && d.removeChild(c);
@@ -462,3 +458,3 @@ }), p.dispose;
   );
-}, Ze = ({
+}, Ae = ({
   onClose: n,
@@ -472,6 +468,6 @@ activeIndex: s,
   const m = te();
-  return _(() => () => {
+  return j(() => () => {
     m.muted.value = !0;
-  }, []), /* @__PURE__ */ v(x, { children: [
-    /* @__PURE__ */ v("div", { className: "rk-lightbox-controls-left", children: [
+  }, []), /* @__PURE__ */ f(x, { children: [
+    /* @__PURE__ */ f("div", { className: "rk-lightbox-controls-left", children: [
       /* @__PURE__ */ e(oe, { currentIndex: s, count: t }),
@@ -486,3 +482,3 @@ /* @__PURE__ */ e(
       h && /* @__PURE__ */ e(k, { signals: [m.muted], children: () => /* @__PURE__ */ e(
-        Xe,
+        Be,
         {
@@ -497,3 +493,3 @@ isMuted: m.muted.value,
 };
-function nn(n) {
+function Ke(n) {
   const s = ge(
@@ -512,3 +508,3 @@ () => n.some((r) => r.type === "video"),
     }) => (r.type ?? "image") !== "video" ? null : /* @__PURE__ */ e(
-      Ue,
+      je,
       {
@@ -528,3 +524,3 @@ src: r.src,
     (r) => /* @__PURE__ */ e(
-      Ze,
+      Ae,
       {
@@ -537,3 +533,3 @@ ...r,
   );
-  return { renderSlide: t, SoundProvider: Le, hasVideo: s, renderControls: o };
+  return { renderSlide: t, SoundProvider: Ee, hasVideo: s, renderControls: o };
 }
@@ -544,8 +540,10 @@ export {
   ie as FullscreenButton,
-  en as LightboxOverlay,
-  Ue as LightboxVideoSlide,
-  Xe as SoundButton,
-  De as lightboxFadeTransition,
-  Oe as lightboxZoomTransition,
-  nn as useVideoSlideRenderer
+  Je as LightboxOverlay,
+  je as LightboxVideoSlide,
+  Be as SoundButton,
+  tn as flipTransition,
+  Qe as lightboxFadeTransition,
+  Ye as lightboxZoomTransition,
+  rn as slideTransition,
+  Ke as useVideoSlideRenderer
 };

dist/lib/LightboxOverlay.d.ts

 import { MutableRefObject, ReactNode, FC } from 'react';
-import { ReelApi, ReelProps, TransitionTransformFn } from '@reelkit/react';
+import { ReelApi, ReelProps, SwipeToCloseDirection, TransitionTransformFn } from '@reelkit/react';
 import { ControlsRenderProps, SlideRenderProps, NavigationRenderProps, InfoRenderProps } from './types';
 /**
- * Built-in transition aliases for the lightbox.
- * Use `transitionFn` for custom {@link TransitionTransformFn} instead.
- */
-export type TransitionType = 'slide' | 'fade' | 'flip' | 'zoom-in';
-/**
  * Data for a single lightbox item (image or video).
@@ -97,10 +92,14 @@ *
     /**
-     * Built-in transition alias.
-     * @default 'slide'
+     * Slide transition function. Defaults to `slideTransition` from
+     * `@reelkit/react`. Import additional built-ins from
+     * `@reelkit/react-lightbox` (`lightboxFadeTransition`,
+     * `lightboxZoomTransition`) or `@reelkit/react` (`flipTransition`).
      */
-    transition?: TransitionType;
+    transitionFn?: TransitionTransformFn;
     /**
-     * Custom transition function. Takes priority over `transition` alias.
+     * Direction of the swipe-to-close gesture on mobile.
+     *
+     * @default 'up'
      */
-    transitionFn?: TransitionTransformFn;
+    swipeToCloseDirection?: SwipeToCloseDirection;
     /** Callback to close the lightbox. Triggered by close button or Escape key. */
@@ -107,0 +106,0 @@ onClose: () => void;

package.json

 {
   "name": "@reelkit/react-lightbox",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "type": "module",
@@ -56,3 +56,3 @@ "sideEffects": [
   "peerDependencies": {
-    "@reelkit/react": "^0.6.0",
+    "@reelkit/react": "^0.6.1",
     "react": ">=18.0.0",
@@ -59,0 +59,0 @@ "react-dom": ">=18.0.0",

README.md

@@ -5,3 +5,3 @@ # @reelkit/react-lightbox
   <a href="https://www.npmjs.com/package/@reelkit/react-lightbox"><img src="https://img.shields.io/npm/v/@reelkit/react-lightbox?color=6366f1&label=npm" alt="npm" /></a>
-  <img src="https://img.shields.io/badge/gzip-3.3%20kB-6366f1" alt="Bundle size" />
+  <img src="https://img.shields.io/badge/gzip-3.2%20kB-6366f1" alt="Bundle size" />
   <img src="https://img.shields.io/badge/coverage-95%25-brightgreen" alt="Coverage" />
@@ -11,3 +11,3 @@ <a href="https://github.com/KonstantinKai/reelkit"><img src="https://img.shields.io/github/stars/KonstantinKai/reelkit?style=social" alt="Star on GitHub" /></a>
 
-Image gallery lightbox for React — opens full-screen with swipe navigation, keyboard controls, and transition effects. Everything is replaceable via render props if the defaults don't fit. ~3.3 kB gzip.
+Image gallery lightbox for React — opens full-screen with swipe navigation, keyboard controls, and transition effects. Everything is replaceable via render props if the defaults don't fit. ~3.2 kB gzip.
 
@@ -65,3 +65,3 @@ **[Live Demo](https://react-demo.reelkit.dev/image-preview?utm_source=npm)**
 - Fullscreen — cross-browser Fullscreen API
-- Transitions — slide, fade, and zoom-in effects
+- Transitions — tree-shakable `slideTransition`, `flipTransition`, `lightboxFadeTransition`, `lightboxZoomTransition` (import only what you use)
 - Image preloading — adjacent images prefetched
@@ -78,13 +78,13 @@ - Video slides (opt-in) — tree-shakeable video support via `useVideoSlideRenderer`
 
-| Prop               | Type                                                 | Default   | Description                  |
-| ------------------ | ---------------------------------------------------- | --------- | ---------------------------- |
-| `isOpen`           | `boolean`                                            | required  | Controls lightbox visibility |
-| `images`           | `LightboxItem[]`                                     | required  | Array of images to display   |
-| `initialIndex`     | `number`                                             | `0`       | Starting image index         |
-| `transition`       | `TransitionType`                                     | `'slide'` | Transition animation type    |
-| `apiRef`           | `MutableRefObject<ReelApi>`                          | -         | Ref to access Reel API       |
-| `renderControls`   | `(props) => ReactNode`                               | -         | Custom controls              |
-| `renderNavigation` | `(props) => ReactNode`                               | -         | Custom navigation arrows     |
-| `renderInfo`       | `(props) => ReactNode`                               | -         | Custom info overlay          |
-| `renderSlide`      | `(item, index, size, isActive) => ReactNode \| null` | -         | Custom slide rendering       |
+| Prop               | Type                                                 | Default           | Description                              |
+| ------------------ | ---------------------------------------------------- | ----------------- | ---------------------------------------- |
+| `isOpen`           | `boolean`                                            | required          | Controls lightbox visibility             |
+| `images`           | `LightboxItem[]`                                     | required          | Array of images to display               |
+| `initialIndex`     | `number`                                             | `0`               | Starting image index                     |
+| `transitionFn`     | `TransitionTransformFn`                              | `slideTransition` | Slide transition fn (built-in or custom) |
+| `apiRef`           | `MutableRefObject<ReelApi>`                          | -                 | Ref to access Reel API                   |
+| `renderControls`   | `(props) => ReactNode`                               | -                 | Custom controls                          |
+| `renderNavigation` | `(props) => ReactNode`                               | -                 | Custom navigation arrows                 |
+| `renderInfo`       | `(props) => ReactNode`                               | -                 | Custom info overlay                      |
+| `renderSlide`      | `(item, index, size, isActive) => ReactNode \| null` | -                 | Custom slide rendering                   |
 
@@ -121,4 +121,2 @@ ### Callbacks
 }
-
-type TransitionType = 'slide' | 'fade' | 'zoom-in';
 ```
@@ -125,0 +123,0 @@

No alert changes

Improved metrics

Total package byte prevSize

52695

0.79%

Worsened metrics

Lines of code

1005

-0.2%

Number of lines in readme file

251

-0.79%

No dependency changes