@reelkit/react - npm Package Compare versions

Comparing version 0.3.0 to 0.4.0

dist/index.js

@@ -1,39 +0,39 @@
-import { reaction as X, animate as se, defaultRangeExtractor as ie, first as W, last as Y, createSliderController as ce, createSignal as O, slideTransition as ae, clamp as le, createGestureController as ue, abs as _, createSoundController as de, createBodyLock as fe, fullscreenSignal as F, noop as he, exitFullscreen as j, requestFullscreen as me } from "@reelkit/core";
-import { abs as Fe, captureFrame as Ne, clamp as Ie, createBodyLock as Oe, createComputed as qe, createContentLoadingController as je, createContentPreloader as Ke, createDeferred as He, createDisposableList as Ue, createGestureController as Ge, createSharedVideo as We, createSignal as Ye, createSoundController as _e, cubeTransition as Je, defaultRangeExtractor as Qe, exitFullscreen as Xe, extractRange as Ze, fadeTransition as et, first as tt, flipTransition as nt, fullscreenSignal as rt, generate as ot, getSlideProgress as st, isNegative as it, last as ct, lerp as at, noop as lt, observeDomEvent as ut, observeMediaLoading as dt, reaction as ft, requestFullscreen as ht, slideTransition as mt, syncMutedToVideo as gt, zoomTransition as vt } from "@reelkit/core";
-import { jsx as m, jsxs as ge } from "react/jsx-runtime";
-import { useReducer as Z, useEffect as z, useRef as k, createContext as ee, useContext as K, memo as H, useState as $, useLayoutEffect as ve } from "react";
-import { flushSync as J } from "react-dom";
-const U = ({
+import { reaction as ne, animate as de, defaultRangeExtractor as fe, first as Q, last as X, createSignal as O, createSliderController as he, slideTransition as ge, clamp as me, createGestureController as ve, abs as Z, createSoundController as ye, sharedBodyLock as we, fullscreenSignal as N, noop as be, exitFullscreen as W, requestFullscreen as Se } from "@reelkit/core";
+import { abs as He, captureFrame as Ue, clamp as Ge, createBodyLock as We, createComputed as Ye, createContentLoadingController as _e, createContentPreloader as Je, createDeferred as Qe, createDisposableList as Xe, createGestureController as Ze, createSharedVideo as et, createSignal as tt, createSoundController as nt, cubeTransition as rt, defaultRangeExtractor as ot, exitFullscreen as it, extractRange as at, fadeTransition as st, first as ct, flipTransition as lt, fullscreenSignal as ut, generate as dt, getSlideProgress as ft, isNegative as ht, last as gt, lerp as mt, noop as vt, observeDomEvent as yt, observeMediaLoading as wt, reaction as bt, requestFullscreen as St, slideTransition as Dt, syncMutedToVideo as Ct, zoomTransition as pt } from "@reelkit/core";
+import { jsx as f, jsxs as De } from "react/jsx-runtime";
+import { useReducer as re, useEffect as R, useRef as L, createContext as oe, useContext as Y, memo as _, useState as I, useLayoutEffect as Ce, useCallback as pe } from "react";
+import { flushSync as ee } from "react-dom";
+const H = ({
   signals: e,
   children: t
 }) => {
-  const n = Z(() => ({}), {})[1];
-  return z(() => X(() => e, n), []), t();
-}, ye = ({
+  const n = re(() => ({}), {})[1];
+  return R(() => ne(() => e, n), []), t();
+}, Te = ({
   signal: e,
   children: t
 }) => {
-  const n = k(e.value.value), s = Z(() => ({}), {})[1], r = k(!1), i = k(null), a = k(void 0);
-  return z(() => (r.current = !0, () => {
+  const n = L(e.value.value), l = re(() => ({}), {})[1], r = L(!1), g = L(null), a = L(void 0);
+  return R(() => (r.current = !0, () => {
     r.current = !1;
-  }), []), z(
-    () => X(
+  }), []), R(
+    () => ne(
       () => [e],
       () => {
-        const { value: g, duration: v, done: S } = e.value;
-        if (i.current) {
-          i.current(), i.current = null;
-          const y = a.current;
-          y && (a.current = void 0, setTimeout(() => y(), 0));
+        const { value: u, duration: v, done: S } = e.value;
+        if (g.current) {
+          g.current(), g.current = null;
+          const b = a.current;
+          b && (a.current = void 0, setTimeout(() => b(), 0));
         }
         if (v > 0) {
-          a.current = S, i.current = se({
+          a.current = S, g.current = de({
             from: n.current,
-            to: g,
+            to: u,
             duration: v,
-            onUpdate: (y) => {
-              n.current = y, r.current && J(s);
+            onUpdate: (b) => {
+              n.current = b, r.current && ee(l);
             },
             onComplete: () => {
-              i.current = null, a.current = void 0, setTimeout(() => S?.(), 0);
+              g.current = null, a.current = void 0, setTimeout(() => S?.(), 0);
             }
@@ -43,4 +43,4 @@ });
         }
-        a.current = void 0, n.current = g, requestAnimationFrame(() => {
-          r.current && J(s);
+        a.current = void 0, n.current = u, requestAnimationFrame(() => {
+          r.current && ee(l);
         });
@@ -51,97 +51,107 @@ }
   ), t(n.current);
-}, G = ee(null), pe = () => K(G), Se = (e) => e.toString(), xe = (e, t) => (n, s) => {
+}, J = oe(null), Ae = () => Y(J), Re = (e) => e.toString(), $e = (e, t) => (n, l) => {
   const r = `${t ?? ""}${n}`;
-  return e === 2 && [0, 1].includes(n) && s === 0 ? `${r}_cloned` : r;
-}, be = ({
-  rangeExtractor: e = ie,
+  return e === 2 && [0, 1].includes(n) && l === 0 ? `${r}_cloned` : r;
+}, xe = ({
+  rangeExtractor: e = fe,
   initialIndex: t = 0,
   direction: n = "vertical",
-  swipeDistanceFactor: s = 0.12,
+  swipeDistanceFactor: l = 0.12,
   loop: r = !1,
-  keyExtractor: i = Se,
+  keyExtractor: g = Re,
   enableNavKeys: a = !0,
-  transitionDuration: g = 300,
+  transitionDuration: u = 300,
   enableWheel: v = !1,
   wheelDebounceMs: S = 200,
-  transition: y = ae,
-  enableGestures: E = !0,
-  ...c
+  transition: b = ge,
+  enableGestures: p = !0,
+  ...s
 }) => {
-  const { size: C, apiRef: u } = c, f = C === void 0, [b, P] = $([0, 0]), D = f ? b : C, h = k(null);
-  h.current = {
-    ...c,
-    size: D,
+  const { size: y, apiRef: d, ariaLabel: D } = s, h = y === void 0, [P, M] = I([0, 0]), x = h ? P : y, c = L(null);
+  c.current = {
+    ...s,
+    size: x,
     rangeExtractor: e,
     initialIndex: t,
     direction: n,
-    swipeDistanceFactor: s,
+    swipeDistanceFactor: l,
     loop: r,
-    keyExtractor: i,
+    keyExtractor: g,
     enableNavKeys: a,
-    transitionDuration: g,
+    transitionDuration: u,
     enableWheel: v,
     wheelDebounceMs: S
   };
-  const w = n === "horizontal", T = w ? W(D) : Y(D), R = k(null), [d, q, l] = $(() => {
-    const p = ce(
+  const E = n === "horizontal", C = E ? Q(x) : X(x), T = L(null), [w, U, i, A] = I(() => {
+    let k = !0;
+    const V = O(""), z = he(
       {
-        count: c.count,
+        count: s.count,
         initialIndex: t,
         direction: n,
         loop: r,
-        transitionDuration: g,
-        swipeDistanceFactor: s,
+        transitionDuration: u,
+        swipeDistanceFactor: l,
         rangeExtractor: e,
         enableWheel: v,
         wheelDebounceMs: S,
-        enableGestures: E,
+        enableGestures: p,
         enableNavKeys: a
       },
       {
-        onBeforeChange: (o, x, M) => {
-          h.current.beforeChange?.(o, x, M);
+        onBeforeChange: (o, F, G) => {
+          c.current.beforeChange?.(o, F, G);
         },
-        onAfterChange: (o, x) => {
-          h.current.afterChange?.(o, x);
+        onAfterChange: (o, F) => {
+          k || (V.value = `Slide ${o + 1} of ${c.current.count}`), k = !1, c.current.afterChange?.(o, F);
         },
         onDragStart: (o) => {
-          h.current.onSlideDragStart?.(o);
+          c.current.onSlideDragStart?.(o);
         },
         onDragEnd: (o) => {
-          h.current.onSlideDragEnd?.(o);
+          c.current.onSlideDragEnd?.(o);
         },
         onDragCanceled: (o) => {
-          h.current.onSlideDragCanceled?.(o);
+          c.current.onSlideDragCanceled?.(o);
         },
-        onTap: (o) => h.current.onTap?.(o),
-        onDoubleTap: (o) => h.current.onDoubleTap?.(o),
-        onLongPress: (o) => h.current.onLongPress?.(o),
-        onLongPressEnd: (o) => h.current.onLongPressEnd?.(o),
-        ...c.onNavKeyPress ? {
-          onNavKeyPress: (o) => h.current.onNavKeyPress?.(o)
+        onTap: (o) => c.current.onTap?.(o),
+        onDoubleTap: (o) => c.current.onDoubleTap?.(o),
+        onLongPress: (o) => c.current.onLongPress?.(o),
+        onLongPressEnd: (o) => c.current.onLongPressEnd?.(o),
+        ...s.onNavKeyPress ? {
+          onNavKeyPress: (o) => c.current.onNavKeyPress?.(o)
         } : {}
       }
-    ), A = {
-      index: p.state.index,
-      count: O(c.count),
-      goTo: p.goTo
+    ), B = {
+      index: z.state.index,
+      count: O(s.count),
+      goTo: z.goTo
     };
-    return [p, (o, x) => {
-      const { keyExtractor: M, itemBuilder: re, size: oe } = h.current;
-      return /* @__PURE__ */ m("div", { "data-index": o, children: re(o, x, oe) }, M(o, x));
-    }, A];
-  })[0], N = k(!1);
-  z(() => {
-    if (!N.current) {
-      N.current = !0;
+    return [z, (o, F) => {
+      const { keyExtractor: G, itemBuilder: ce, size: le } = c.current, ue = o === z.state.index.value;
+      return /* @__PURE__ */ f(
+        "div",
+        {
+          "data-index": o,
+          role: "tabpanel",
+          ...ue ? {} : { inert: "" },
+          children: ce(o, F, le)
+        },
+        G(o, F)
+      );
+    }, B, V];
+  })[0], $ = L(!1);
+  R(() => {
+    if (!$.current) {
+      $.current = !0;
       return;
     }
-    l.count.value = c.count, d.updateConfig({
-      count: c.count,
+    i.count.value = s.count, w.updateConfig({
+      count: s.count,
       direction: n,
       loop: r,
-      transitionDuration: g,
-      swipeDistanceFactor: s,
+      transitionDuration: u,
+      swipeDistanceFactor: l,
       rangeExtractor: e,
-      enableGestures: E,
+      enableGestures: p,
       enableNavKeys: a,
@@ -151,37 +161,37 @@ enableWheel: v
   }, [
-    c.count,
+    s.count,
     n,
     r,
-    g,
-    s,
+    u,
+    l,
     e,
-    E,
+    p,
     a,
     v
-  ]), z(() => {
-    d.setPrimarySize(T);
-  }, [T]), z(() => {
-    if (R.current && (d.attach(R.current), d.observe()), u != null) {
-      const p = {
-        next: () => d.next(),
-        prev: () => d.prev(),
-        goTo: (A, B) => d.goTo(A, B),
-        adjust: () => d.adjust(),
-        observe: () => d.observe(),
-        unobserve: () => d.unobserve()
+  ]), R(() => {
+    w.setPrimarySize(C);
+  }, [C]), R(() => {
+    if (T.current && (w.attach(T.current), w.observe()), d != null) {
+      const k = {
+        next: () => w.next(),
+        prev: () => w.prev(),
+        goTo: (V, z) => w.goTo(V, z),
+        adjust: () => w.adjust(),
+        observe: () => w.observe(),
+        unobserve: () => w.unobserve()
       };
-      typeof u == "function" ? u(p) : u.current = p;
+      typeof d == "function" ? d(k) : d.current = k;
     }
-    return d.detach;
-  }, []), ve(() => {
-    if (!f || !R.current) return;
-    const p = R.current, A = () => {
-      const o = p.clientWidth, x = p.clientHeight;
-      o > 0 && x > 0 && P(
-        (M) => M[0] === o && M[1] === x ? M : [o, x]
+    return w.detach;
+  }, []), Ce(() => {
+    if (!h || !T.current) return;
+    const k = T.current, V = () => {
+      const B = k.clientWidth, j = k.clientHeight;
+      B > 0 && j > 0 && M(
+        (o) => o[0] === B && o[1] === j ? o : [B, j]
       );
-    }, B = new ResizeObserver(A);
-    return B.observe(p), () => B.disconnect();
-  }, [f]);
-  const V = {
+    }, z = new ResizeObserver(V);
+    return z.observe(k), () => z.disconnect();
+  }, [h]);
+  const m = {
     userSelect: "none",
@@ -191,28 +201,50 @@ WebkitUserSelect: "none",
     overflow: "hidden",
-    ...f ? {} : { width: W(D), height: Y(D) },
-    ...c.style
-  }, { axisValue: L, indexes: I } = d.state, ne = !f || T > 0;
-  return /* @__PURE__ */ m(G.Provider, { value: l, children: /* @__PURE__ */ ge("div", { ref: R, className: c.className, style: V, children: [
-    ne && /* @__PURE__ */ m(U, { signals: [I], children: () => /* @__PURE__ */ m(
-      Ce,
-      {
-        primarySize: T,
-        isHorizontal: w,
-        axisValue: L,
-        transitionFn: y,
-        currentRangeIndex: d.getRangeIndex(),
-        direction: n,
-        children: I.value.map(q)
-      }
-    ) }),
-    c.children
-  ] }) });
-}, ze = H(
-  be,
+    ...h ? {} : { width: Q(x), height: X(x) },
+    ...s.style
+  }, { axisValue: q, indexes: K } = w.state, ae = !h || C > 0, se = {
+    position: "absolute",
+    width: 1,
+    height: 1,
+    padding: 0,
+    margin: -1,
+    overflow: "hidden",
+    clip: "rect(0, 0, 0, 0)",
+    whiteSpace: "nowrap",
+    border: 0
+  };
+  return /* @__PURE__ */ f(J.Provider, { value: i, children: /* @__PURE__ */ De(
+    "div",
+    {
+      ref: T,
+      role: "region",
+      "aria-roledescription": "carousel",
+      "aria-label": D,
+      className: s.className,
+      style: m,
+      children: [
+        ae && /* @__PURE__ */ f(H, { signals: [K], children: () => /* @__PURE__ */ f(
+          Ee,
+          {
+            primarySize: C,
+            isHorizontal: E,
+            axisValue: q,
+            transitionFn: b,
+            currentRangeIndex: w.getRangeIndex(),
+            direction: n,
+            children: K.value.map(U)
+          }
+        ) }),
+        /* @__PURE__ */ f(H, { signals: [A], children: () => /* @__PURE__ */ f("div", { "aria-live": "polite", "aria-atomic": "true", style: se, children: A.value }) }),
+        s.children
+      ]
+    }
+  ) });
+}, Ke = _(
+  xe,
   (e, t) => (
     // useEffect deps (controller config sync)
     e.count === t.count && e.direction === t.direction && e.loop === t.loop && e.transitionDuration === t.transitionDuration && e.swipeDistanceFactor === t.swipeDistanceFactor && e.rangeExtractor === t.rangeExtractor && e.enableNavKeys === t.enableNavKeys && e.enableWheel === t.enableWheel && e.wheelDebounceMs === t.wheelDebounceMs && e.transition === t.transition && e.enableGestures === t.enableGestures && // JSX/render output
-    e.size?.[0] === t.size?.[0] && e.size?.[1] === t.size?.[1] && e.className === t.className && e.style === t.style && e.children === t.children
+    e.size?.[0] === t.size?.[0] && e.size?.[1] === t.size?.[1] && e.className === t.className && e.style === t.style && e.ariaLabel === t.ariaLabel && e.children === t.children
   )
-), Ce = H(
+), Ee = _(
   ({
@@ -222,9 +254,9 @@ children: e,
     primarySize: n,
-    axisValue: s,
+    axisValue: l,
     transitionFn: r,
-    currentRangeIndex: i,
+    currentRangeIndex: g,
     direction: a
   }) => {
-    const g = Array.isArray(e) ? e : [e];
-    return /* @__PURE__ */ m(ye, { signal: s, children: (v) => /* @__PURE__ */ m(
+    const u = Array.isArray(e) ? e : [e];
+    return /* @__PURE__ */ f(Te, { signal: l, children: (v) => /* @__PURE__ */ f(
       "div",
@@ -239,11 +271,11 @@ {
         },
-        children: g.map((S, y) => {
-          const E = r(
+        children: u.map((S, b) => {
+          const p = r(
             v,
-            y,
-            i,
+            b,
+            g,
             n,
             a
-          ), c = S?.key ?? y;
-          return /* @__PURE__ */ m(
+          ), s = S?.key ?? b;
+          return /* @__PURE__ */ f(
             "div",
@@ -258,7 +290,7 @@ {
                 backfaceVisibility: "hidden",
-                ...E
+                ...p
               },
               children: S
             },
-            c
+            s
           );
@@ -269,18 +301,18 @@ })
   }
-), Q = (e) => {
+), te = (e) => {
   const {
     count: t,
     active: n,
-    direction: s = "vertical",
+    direction: l = "vertical",
     visible: r = 5,
-    radius: i = 3,
+    radius: g = 3,
     gap: a = 4,
-    activeColor: g = "#fff",
+    activeColor: u = "#fff",
     inactiveColor: v = "rgba(255, 255, 255, 0.5)",
     edgeScale: S = 0.5,
-    className: y,
-    style: E,
-    onDotClick: c
-  } = e, C = s === "vertical", u = i * 2, f = u + a, [b, P] = $(() => t <= r ? 0 : le(n - Math.floor(r / 2), 0, t - r));
-  z(() => {
+    className: b,
+    style: p,
+    onDotClick: s
+  } = e, y = l === "vertical", d = g * 2, D = d + a, [h, P] = I(() => t <= r ? 0 : me(n - Math.floor(r / 2), 0, t - r));
+  R(() => {
     if (t <= r) {
@@ -290,26 +322,30 @@ P(0);
     }
-    P((l) => n < l ? Math.max(0, n) : n >= l + r ? Math.min(t - r, n - r + 1) : l);
+    P((i) => n < i ? Math.max(0, n) : n >= i + r ? Math.min(t - r, n - r + 1) : i);
   }, [n, t, r]);
-  const D = Math.min(b + r, t), h = b > 0;
-  let T = Math.min(r, t) * f;
-  t > r && (T += f * 2);
-  const R = [], d = Math.max(0, b - 1), q = Math.min(t, D + 1);
-  for (let l = d; l < q; l++) {
-    const N = l === n;
-    let V = 1;
-    (l < b || l >= D) && (V = S);
-    let L;
-    l < b ? L = 0 : l >= D ? L = r + 1 : L = l - b + 1, !h && L > 0 && (L -= 1);
-    const I = L * f;
-    R.push(
-      /* @__PURE__ */ m(
+  const M = Math.min(h + r, t), x = h > 0;
+  let E = Math.min(r, t) * D;
+  t > r && (E += D * 2);
+  const C = [], T = Math.max(0, h - 1), w = Math.min(t, M + 1);
+  for (let i = T; i < w; i++) {
+    const A = i === n;
+    let $ = 1;
+    (i < h || i >= M) && ($ = S);
+    let m;
+    i < h ? m = 0 : i >= M ? m = r + 1 : m = i - h + 1, !x && m > 0 && (m -= 1);
+    const q = m * D;
+    C.push(
+      /* @__PURE__ */ f(
         "span",
         {
-          "data-reel-indicator": l,
+          "data-reel-indicator": i,
+          role: "tab",
+          "aria-selected": A,
+          "aria-label": `Slide ${i + 1}`,
+          tabIndex: A ? 0 : -1,
           style: {
             position: "absolute",
-            [C ? "top" : "left"]: I,
-            [C ? "left" : "top"]: 0,
-            width: f,
-            height: f,
+            [y ? "top" : "left"]: q,
+            [y ? "left" : "top"]: 0,
+            width: D,
+            height: D,
             display: "flex",
@@ -320,15 +356,18 @@ justifyContent: "center",
           },
-          onClick: c ? () => c(l) : void 0,
-          "data-testid": `indicator-dot-${l}`,
-          children: /* @__PURE__ */ m(
+          onClick: s ? () => s(i) : void 0,
+          onKeyDown: (K) => {
+            (K.key === "Enter" || K.key === " ") && (K.preventDefault(), s?.(i));
+          },
+          "data-testid": `indicator-dot-${i}`,
+          children: /* @__PURE__ */ f(
             "span",
             {
               style: {
-                width: u,
-                height: u,
+                width: d,
+                height: d,
                 borderRadius: "50%",
-                backgroundColor: N ? g : v,
+                backgroundColor: A ? u : v,
                 transition: "transform 0.2s ease, background-color 0.2s ease",
-                transform: `scale(${V})`,
-                cursor: c ? "pointer" : "default"
+                transform: `scale(${$})`,
+                cursor: s ? "pointer" : "default"
               }
@@ -338,22 +377,35 @@ }
         },
-        l
+        i
       )
     );
   }
-  return /* @__PURE__ */ m(
+  const U = pe(
+    (i) => {
+      const A = y ? "ArrowUp" : "ArrowLeft", $ = y ? "ArrowDown" : "ArrowRight";
+      let m = null;
+      i.key === A ? m = Math.max(0, n - 1) : i.key === $ ? m = Math.min(t - 1, n + 1) : i.key === "Home" ? m = 0 : i.key === "End" && (m = t - 1), m !== null && (i.preventDefault(), s?.(m), i.currentTarget?.querySelector(
+        `[data-reel-indicator="${m}"]`
+      )?.focus());
+    },
+    [n, t, y, s]
+  );
+  return /* @__PURE__ */ f(
     "div",
     {
-      className: y,
+      role: "tablist",
+      "aria-label": "Slide navigation",
+      className: b,
       style: {
         position: "relative",
         overflow: "hidden",
-        [C ? "height" : "width"]: T,
-        [C ? "width" : "height"]: f,
-        ...E
+        [y ? "height" : "width"]: E,
+        [y ? "width" : "height"]: D,
+        ...p
       },
-      children: R
+      onKeyDown: U,
+      children: C
     }
   );
-}, De = (e) => {
-  const t = K(G), n = e.active !== void 0, s = e.count !== void 0;
+}, ke = (e) => {
+  const t = Y(J), n = e.active !== void 0, l = e.count !== void 0;
   if (!n && !t)
@@ -363,9 +415,9 @@ throw new Error(
     );
-  if (!s && !t)
+  if (!l && !t)
     throw new Error(
       'ReelIndicator: "count" prop is required when rendered outside a <Reel> component.'
     );
-  if (n && s)
-    return /* @__PURE__ */ m(
-      Q,
+  if (n && l)
+    return /* @__PURE__ */ f(
+      te,
       {
@@ -379,8 +431,8 @@ ...e,
     !n && t.index,
-    !s && t.count
-  ].filter(Boolean), i = e.onDotClick ?? ((a) => {
+    !l && t.count
+  ].filter(Boolean), g = e.onDotClick ?? ((a) => {
     t.goTo(a, !0);
   });
-  return /* @__PURE__ */ m(U, { signals: r, children: () => /* @__PURE__ */ m(
-    Q,
+  return /* @__PURE__ */ f(H, { signals: r, children: () => /* @__PURE__ */ f(
+    te,
     {
@@ -390,22 +442,22 @@ ...e,
       count: e.count ?? t.count.value,
-      onDotClick: i
+      onDotClick: g
     }
   ) });
-}, ke = H(De), Pe = ({
+}, Ve = _(ke), Fe = ({
   direction: e,
   enabled: t = !0,
   onClose: n,
-  children: s,
+  children: l,
   threshold: r = 0.2,
-  className: i
+  className: g
 }) => {
-  const a = k(null), g = k({ onClose: n, threshold: r });
-  g.current = { onClose: n, threshold: r };
-  const v = e === "down", S = v ? 1 : -1, [{ dragOffset: y, opacity: E, isTransitioning: c, controller: C }] = $(
+  const a = L(null), u = L({ onClose: n, threshold: r });
+  u.current = { onClose: n, threshold: r };
+  const v = e === "down", S = v ? 1 : -1, [{ dragOffset: b, opacity: p, isTransitioning: s, controller: y }] = I(
     () => {
-      const u = O(0), f = O(1), b = O(!1), P = { current: !1 }, D = () => {
-        b.value = !0, u.value = 0, f.value = 1, setTimeout(() => {
-          b.value = !1;
+      const d = O(0), D = O(1), h = O(!1), P = { current: !1 }, M = () => {
+        h.value = !0, d.value = 0, D.value = 1, setTimeout(() => {
+          h.value = !1;
         }, 300);
-      }, h = ue(
+      }, x = ve(
         { useTouchEventsOnly: !0 },
@@ -416,19 +468,19 @@ {
           },
-          onVerticalDragUpdate: (w) => {
-            if (v ? w.primaryDistance > 0 : w.primaryDistance < 0) {
-              u.value = w.primaryDistance;
-              const R = window.innerHeight, d = Math.min(
-                _(w.primaryDistance) / (R * 0.3),
+          onVerticalDragUpdate: (c) => {
+            if (v ? c.primaryDistance > 0 : c.primaryDistance < 0) {
+              d.value = c.primaryDistance;
+              const C = window.innerHeight, T = Math.min(
+                Z(c.primaryDistance) / (C * 0.3),
                 1
               );
-              f.value = 1 - d * 0.8;
+              D.value = 1 - T * 0.8;
             }
           },
-          onVerticalDragEnd: (w) => {
+          onVerticalDragEnd: (c) => {
             P.current = !0;
-            const T = window.innerHeight, R = T * g.current.threshold;
-            (v ? w.primaryDistance > 0 : w.primaryDistance < 0) && _(w.primaryDistance) > R ? (b.value = !0, u.value = T * S, f.value = 0, setTimeout(() => g.current.onClose(), 300)) : D();
+            const E = window.innerHeight, C = E * u.current.threshold;
+            (v ? c.primaryDistance > 0 : c.primaryDistance < 0) && Z(c.primaryDistance) > C ? (h.value = !0, d.value = E * S, D.value = 0, setTimeout(() => u.current.onClose(), 300)) : M();
           },
           onDragEnd: () => {
-            !P.current && u.value !== 0 && D();
+            !P.current && d.value !== 0 && M();
           }
@@ -438,117 +490,113 @@ }
       return {
-        dragOffset: u,
-        opacity: f,
-        isTransitioning: b,
-        controller: h
+        dragOffset: d,
+        opacity: D,
+        isTransitioning: h,
+        controller: x
       };
     }
   );
-  return z(() => {
-    const u = a.current;
-    if (!(!t || !u))
-      return C.attach(u), C.observe(), () => {
-        C.unobserve(), C.detach();
+  return R(() => {
+    const d = a.current;
+    if (!(!t || !d))
+      return y.attach(d), y.observe(), () => {
+        y.unobserve(), y.detach();
       };
-  }, [t]), /* @__PURE__ */ m(U, { signals: [y, E, c], children: () => /* @__PURE__ */ m(
+  }, [t]), /* @__PURE__ */ f(H, { signals: [b, p, s], children: () => /* @__PURE__ */ f(
     "div",
     {
       ref: a,
-      className: i,
+      className: g,
       style: {
-        transform: `translateY(${y.value}px)`,
-        opacity: E.value,
-        transition: c.value ? "transform 300ms ease-out, opacity 300ms ease-out" : "none",
+        transform: `translateY(${b.value}px)`,
+        opacity: p.value,
+        transition: s.value ? "transform 300ms ease-out, opacity 300ms ease-out" : "none",
         width: "100%",
         height: "100%"
       },
-      children: s
+      children: l
     }
   ) });
-}, te = ee(null), Le = ({ children: e }) => {
-  const t = $(() => de())[0];
-  return /* @__PURE__ */ m(te.Provider, { value: t, children: e });
-}, Me = () => {
-  const e = K(te);
+}, ie = oe(null), Ie = ({ children: e }) => {
+  const t = I(() => ye())[0];
+  return /* @__PURE__ */ f(ie.Provider, { value: t, children: e });
+}, Be = () => {
+  const e = Y(ie);
   if (!e)
     throw new Error("useSoundState must be used within SoundProvider");
   return e;
-}, $e = (e) => {
-  const [t] = $(fe);
-  z(() => {
+}, Ne = (e) => {
+  R(() => {
     if (e)
-      return t.lock();
+      return we.lock();
   }, [e]);
-}, Ve = (e) => {
-  const [t] = $(() => {
-    const n = () => {
-      e.ref.current !== null && (F.value && j(), me(e.ref.current).catch((i) => {
-        console.log(
-          `Error attempting to enable full-screen mode: ${i.message} (${i.name})`
-        );
-      }));
-    }, s = () => {
-      j().catch((i) => {
-        console.log(
-          `Error attempting to exit full-screen mode: ${i.message} (${i.name})`
-        );
-      });
+}, Oe = (e) => {
+  const [t] = I(() => {
+    const n = (a) => (u) => {
+      console.log(
+        `Error attempting to ${a === "enter" ? "enable" : "exit"} full-screen mode: ${u.message} (${u.name})`
+      );
+    }, l = async () => {
+      const a = e.ref.current;
+      a && (N.value && await W().catch(n("exit")), await Se(a).catch(n("enter")));
+    }, r = async () => {
+      await W().catch(n("exit"));
     };
-    return [n, s, () => {
-      F.value ? s() : n();
+    return [l, r, async () => {
+      N.value ? await r() : await l();
     }];
   });
-  return z(() => {
-    const n = F.observe(he);
+  return R(() => {
+    const n = N.observe(be);
     return () => {
-      n(), F.value && j();
+      n(), N.value && W();
     };
-  }, []), [F, ...t];
+  }, []), [N, ...t];
 };
 export {
-  ye as AnimatedObserve,
-  U as Observe,
-  ze as Reel,
-  G as ReelContext,
-  ke as ReelIndicator,
-  Le as SoundProvider,
-  Pe as SwipeToClose,
-  Fe as abs,
-  Ne as captureFrame,
-  Ie as clamp,
-  Oe as createBodyLock,
-  qe as createComputed,
-  je as createContentLoadingController,
-  Ke as createContentPreloader,
-  xe as createDefaultKeyExtractorForLoop,
-  He as createDeferred,
-  Ue as createDisposableList,
-  Ge as createGestureController,
-  We as createSharedVideo,
-  Ye as createSignal,
-  _e as createSoundController,
-  Je as cubeTransition,
-  Qe as defaultRangeExtractor,
-  Xe as exitFullscreen,
-  Ze as extractRange,
-  et as fadeTransition,
-  tt as first,
-  nt as flipTransition,
-  rt as fullscreenSignal,
-  ot as generate,
-  st as getSlideProgress,
-  it as isNegative,
-  ct as last,
-  at as lerp,
-  lt as noop,
-  ut as observeDomEvent,
-  dt as observeMediaLoading,
-  ft as reaction,
-  ht as requestFullscreen,
-  mt as slideTransition,
-  gt as syncMutedToVideo,
-  $e as useBodyLock,
-  Ve as useFullscreen,
-  pe as useReelContext,
-  Me as useSoundState,
-  vt as zoomTransition
+  Te as AnimatedObserve,
+  H as Observe,
+  Ke as Reel,
+  J as ReelContext,
+  Ve as ReelIndicator,
+  Ie as SoundProvider,
+  Fe as SwipeToClose,
+  He as abs,
+  Ue as captureFrame,
+  Ge as clamp,
+  We as createBodyLock,
+  Ye as createComputed,
+  _e as createContentLoadingController,
+  Je as createContentPreloader,
+  $e as createDefaultKeyExtractorForLoop,
+  Qe as createDeferred,
+  Xe as createDisposableList,
+  Ze as createGestureController,
+  et as createSharedVideo,
+  tt as createSignal,
+  nt as createSoundController,
+  rt as cubeTransition,
+  ot as defaultRangeExtractor,
+  it as exitFullscreen,
+  at as extractRange,
+  st as fadeTransition,
+  ct as first,
+  lt as flipTransition,
+  ut as fullscreenSignal,
+  dt as generate,
+  ft as getSlideProgress,
+  ht as isNegative,
+  gt as last,
+  mt as lerp,
+  vt as noop,
+  yt as observeDomEvent,
+  wt as observeMediaLoading,
+  bt as reaction,
+  St as requestFullscreen,
+  Dt as slideTransition,
+  Ct as syncMutedToVideo,
+  Ne as useBodyLock,
+  Oe as useFullscreen,
+  Ae as useReelContext,
+  Be as useSoundState,
+  pt as zoomTransition
 };

dist/lib/Reel.d.ts

@@ -75,2 +75,4 @@ import { MutableRefObject, CSSProperties, ReactNode } from 'react';
     enableGestures?: boolean;
+    /** Accessible label for the carousel region. */
+    ariaLabel?: string;
     /** Optional children rendered after the slider content (e.g. indicators, overlays). */
@@ -77,0 +79,0 @@ children?: ReactNode;

dist/lib/useBodyLock.d.ts

 /**
  * Locks the document body scroll when `locked` is `true`.
  *
- * Uses the core {@link createBodyLock} utility with reference counting,
- * so multiple concurrent callers can each lock/unlock independently.
- * Restores all original styles and scroll position on cleanup.
+ * Uses the shared `sharedBodyLock` singleton from core, so multiple
+ * concurrent callers across unrelated components share a single
+ * reference counter — nested modals/overlays interleave correctly
+ * and restore original styles only after the last caller releases.
  *
@@ -8,0 +9,0 @@ * @param locked - Whether body scroll should be locked.

dist/lib/useFullscreen.d.ts

@@ -16,3 +16,4 @@ import { MutableRefObject } from 'react';
  * - `[0]` — The fullscreen signal. Read `.value` inside `Observe` for reactive updates.
- * - `[1]` — Function to request fullscreen on the referenced element.
+ * - `[1]` — Function to request fullscreen on the referenced element. If another
+ *   element is already fullscreen, it is exited first (awaited) before requesting.
  * - `[2]` — Function to exit fullscreen.
@@ -23,5 +24,5 @@ * - `[3]` — Toggle function that requests or exits fullscreen based on current state.
     fullscreen: typeof fullscreenSignal,
-    requestFullscreen: () => void,
-    exitFullscreen: () => void,
-    toggleFullscreen: () => void
+    requestFullscreen: () => Promise<void>,
+    exitFullscreen: () => Promise<void>,
+    toggleFullscreen: () => Promise<void>
 ];
@@ -28,0 +29,0 @@ /**

package.json

 {
   "name": "@reelkit/react",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "type": "module",
@@ -55,3 +55,3 @@ "sideEffects": false,
   "dependencies": {
-    "@reelkit/core": "^0.3.0"
+    "@reelkit/core": "^0.4.0"
   },
@@ -58,0 +58,0 @@ "peerDependencies": {

README.md

@@ -5,3 +5,3 @@ # @reelkit/react
   <a href="https://www.npmjs.com/package/@reelkit/react"><img src="https://img.shields.io/npm/v/@reelkit/react?color=6366f1&label=npm" alt="npm" /></a>
-  <img src="https://img.shields.io/badge/gzip-3.9%20kB-6366f1" alt="Bundle size" />
+  <img src="https://img.shields.io/badge/gzip-4.4%20kB-6366f1" alt="Bundle size" />
   <img src="https://img.shields.io/badge/coverage-96%25-brightgreen" alt="Coverage" />
@@ -11,4 +11,6 @@ <a href="https://github.com/KonstantinKai/reelkit"><img src="https://img.shields.io/github/stars/KonstantinKai/reelkit?style=social" alt="Star on GitHub" /></a>
 
-React bindings for `@reelkit/core`. Drop in a `<Reel>` component, give it a slide count and a render function — it handles virtualization, gestures, and keyboard/wheel input. ~3.9 kB gzip.
+React bindings for `@reelkit/core`. Drop in a `<Reel>` component, give it a slide count and a render function — it handles virtualization, gestures, and keyboard/wheel input. ~4.4 kB gzip.
 
+**[Live Demo](https://react-demo.reelkit.dev/?utm_source=npm)** · **[Open in StackBlitz](https://stackblitz.com/github/KonstantinKai/reelkit-react-starter)**
+
 ## Installation
@@ -15,0 +17,0 @@

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

43779

4.9%

Lines of code

1068

5.12%

Number of lines in readme file

97

2.11%

Number of medium supply chain risk alerts

0

-100%

Dependency changes

• + Added

  @reelkit/core@0.4.0
  (transitive)

• - Removed

  @reelkit/core@0.3.0
  (transitive)

• Updated

  @reelkit/core@^0.4.0