react-panel-layout 0.5.2 → 0.6.1

package/dist/stack.js

@@ -0,0 +1,721 @@
+import { jsx as P, Fragment as j, jsxs as q } from "react/jsx-runtime";
+import * as r from "react";
+import { S as J, s as Q, t as Z, u as z } from "./styles-NkjuMOVS.js";
+import { u as ee } from "./useIsomorphicLayoutEffect-DhmEnmZ_.js";
+import { u as te } from "./useContentCache-CO3LYNmz.js";
+import { u as ne, a as re, m as se, I as ie } from "./useNativeGestureGuard-CGYo6O0r.js";
+function ce(t) {
+  const { wasActive: e, isActive: n, transitionMode: i } = t;
+  return i !== "css" || e === n ? null : n ? "push" : "pop";
+}
+function oe(t) {
+  const {
+    displayMode: e,
+    depth: n,
+    navigationDepth: i,
+    isActive: o,
+    isAnimatingOut: c,
+    isRevealing: u,
+    revealDepth: s
+  } = t;
+  return e === "overlay" ? o || c || u && n === s ? "visible" : "hidden" : n <= i || c ? "visible" : "hidden";
+}
+function ae(t) {
+  const { depth: e, activeDepth: n, displayMode: i, isRevealing: o, revealDepth: c } = t, u = e === n, s = e < n;
+  if (o && u && c !== null)
+    return `translateX(${0.3 * 100}%)`;
+  if (u)
+    return "translateX(0)";
+  if (s)
+    switch (i) {
+      case "overlay":
+        return "translateX(0)";
+      case "slide":
+        return "translateX(-30%)";
+      case "stack": {
+        const l = (n - e) * -5, f = 1 - (n - e) * 0.05;
+        return `translateX(${l}%) scale(${f})`;
+      }
+    }
+  return "translateX(100%)";
+}
+function ue(t, e, n) {
+  return e === void 0 || e <= 0 || !n ? t : `translateX(${e * 100}%)`;
+}
+function le(t) {
+  if (t === "css")
+    return `transform ${J} ${Q}`;
+}
+function fe(t) {
+  const {
+    depth: e,
+    isActive: n,
+    wasActive: i,
+    currentAnimationType: o,
+    displayMode: c,
+    transitionMode: u,
+    navigationState: s,
+    swipeProgress: l
+  } = t, m = ce({
+    wasActive: i,
+    isActive: n,
+    transitionMode: u
+  }) ?? o, v = m === "pop", a = oe({
+    displayMode: c,
+    depth: e,
+    navigationDepth: s.depth,
+    isActive: n,
+    isAnimatingOut: v,
+    isRevealing: s.isRevealing,
+    revealDepth: s.revealDepth
+  }), g = ae({
+    depth: e,
+    activeDepth: s.depth,
+    displayMode: c,
+    isRevealing: s.isRevealing,
+    revealDepth: s.revealDepth
+  }), R = ue(g, l, n), A = (() => {
+    if (u === "css") {
+      if (m === "push")
+        return Z;
+      if (m === "pop")
+        return z;
+    }
+  })(), d = le(u);
+  return {
+    nextAnimationType: m,
+    visibility: a,
+    transform: R,
+    animation: A,
+    transition: d,
+    zIndex: e,
+    pointerEvents: n ? "auto" : "none"
+  };
+}
+const pe = {
+  position: "absolute",
+  inset: 0,
+  width: "100%",
+  height: "100%"
+}, de = r.memo(
+  ({ id: t, depth: e, isActive: n, displayMode: i, transitionMode: o, navigationState: c, swipeProgress: u, children: s }) => {
+    const l = r.useRef(null), f = r.useRef(n), [m, v] = r.useState(null), a = fe({
+      depth: e,
+      isActive: n,
+      wasActive: f.current,
+      currentAnimationType: m,
+      displayMode: i,
+      transitionMode: o,
+      navigationState: c,
+      swipeProgress: u
+    });
+    ee(() => {
+      const d = f.current;
+      f.current = n, d !== n && v(a.nextAnimationType);
+    }, [n, a.nextAnimationType]);
+    const g = r.useCallback((d) => {
+      d.target === d.currentTarget && v(null);
+    }, []), R = r.useMemo(() => {
+      const d = {
+        ...pe,
+        transform: a.transform,
+        pointerEvents: a.pointerEvents,
+        zIndex: a.zIndex,
+        visibility: a.visibility
+      };
+      return a.animation !== void 0 && (d.animation = a.animation), a.transition !== void 0 && (d.transition = a.transition), d;
+    }, [
+      a.transform,
+      a.pointerEvents,
+      a.zIndex,
+      a.visibility,
+      a.animation,
+      a.transition
+    ]), A = /* @__PURE__ */ P(
+      "div",
+      {
+        ref: l,
+        "data-stack-content": t,
+        "data-depth": e,
+        "data-active": n ? "true" : "false",
+        style: R,
+        onAnimationEnd: g,
+        children: s
+      }
+    );
+    return o === "none" ? /* @__PURE__ */ P(r.Activity, { mode: n ? "visible" : "hidden", children: A }) : A;
+  }
+);
+function me(t, e) {
+  switch (e.type) {
+    case "push":
+      return [...t, e.id];
+    case "go": {
+      if (e.direction >= 0)
+        return t;
+      const i = t.length - 1 + e.direction;
+      return i < 0 ? t : t.slice(0, i + 1);
+    }
+    case "move":
+      return e.targetDepth < 0 || e.targetDepth >= t.length ? t : t.slice(0, e.targetDepth + 1);
+    case "replace":
+      return t.length === 0 ? [e.id] : [...t.slice(0, -1), e.id];
+  }
+}
+const G = r.createContext(null), he = r.memo(() => {
+  const t = r.useContext(G);
+  if (!t)
+    throw new Error("StackOutlet must be used within useStackNavigation");
+  const [, e] = r.useReducer((s) => s + 1, 0);
+  r.useEffect(() => t.subscribe(e), [t]);
+  const { panels: n, navigationState: i, displayMode: o, transitionMode: c } = t.getState(), u = r.useMemo(() => i.stack.map((s, l) => {
+    const f = n.find((m) => m.id === s);
+    return f ? { panel: f, depth: l } : null;
+  }).filter((s) => s !== null), [i.stack, n]);
+  return /* @__PURE__ */ P(j, { children: u.map(({ panel: s, depth: l }) => /* @__PURE__ */ P(
+    de,
+    {
+      id: s.id,
+      depth: l,
+      isActive: l === i.depth,
+      displayMode: o,
+      transitionMode: c,
+      navigationState: i,
+      children: s.cache ? t.getCachedContent(s.id) : s.content
+    },
+    s.id
+  )) });
+});
+function Ve(t) {
+  const {
+    panels: e,
+    initialPanelId: n,
+    displayMode: i,
+    transitionMode: o = "css",
+    onPanelChange: c
+  } = t, u = n ?? e[0]?.id;
+  if (!u)
+    throw new Error("useStackNavigation: No panels provided");
+  const [s, l] = r.useReducer(
+    me,
+    [u]
+  ), f = r.useRef(s);
+  f.current = s;
+  const m = r.useRef(s);
+  r.useEffect(() => {
+    const p = m.current;
+    if (m.current = s, c && s !== p) {
+      const C = s.length - 1, b = s[C];
+      b !== void 0 && c(b, C);
+    }
+  }, [s, c]);
+  const [v, a] = r.useState({ isRevealing: !1, revealDepth: null }), g = s.length - 1, R = r.useMemo(() => ({
+    stack: s,
+    depth: g,
+    isRevealing: v.isRevealing,
+    revealDepth: v.revealDepth
+  }), [s, g, v.isRevealing, v.revealDepth]), A = s[g], d = g > 0 ? s[g - 1] : null, h = r.useCallback((p) => {
+    e.find((b) => b.id === p) && l({ type: "push", id: p });
+  }, [e]), y = r.useCallback((p) => {
+    l({ type: "go", direction: p });
+  }, []), k = r.useCallback((p) => {
+    l({ type: "move", targetDepth: p });
+  }, []), M = r.useCallback((p) => {
+    e.find((b) => b.id === p) && l({ type: "replace", id: p });
+  }, [e]), w = r.useCallback((p) => p >= 0 ? !1 : f.current.length - 1 + p >= 0, []), _ = r.useCallback((p) => {
+    const C = f.current.length - 1, b = p ?? C - 1;
+    b < 0 || b >= C || a({ isRevealing: !0, revealDepth: b });
+  }, []), F = r.useCallback(() => {
+    f.current.length - 1 !== 0 && a({ isRevealing: !0, revealDepth: 0 });
+  }, []), x = r.useCallback(() => {
+    a({ isRevealing: !1, revealDepth: null });
+  }, []), N = r.useCallback((p) => {
+    const C = f.current, b = C.indexOf(p), X = C.length - 1, L = b === X;
+    return {
+      "data-stack-panel": p,
+      "data-depth": b,
+      "data-active": L ? "true" : "false",
+      "aria-hidden": !L
+    };
+  }, []), T = r.useCallback(() => {
+    const p = f.current, C = p.length - 1, b = C > 0, X = C > 0 ? p[C - 1] : null, L = X ? e.find((Y) => Y.id === X) : null, H = L?.title ? `Back to ${L.title}` : "Go back";
+    return {
+      onClick: () => y(-1),
+      disabled: !b,
+      "aria-label": H
+    };
+  }, [e, y]), D = r.useMemo(
+    () => ({
+      position: "relative",
+      width: "100%",
+      height: "100%",
+      overflow: "hidden"
+    }),
+    []
+  ), I = r.useRef({
+    panels: e,
+    navigationState: R,
+    displayMode: i,
+    transitionMode: o
+  });
+  I.current = {
+    panels: e,
+    navigationState: R,
+    displayMode: i,
+    transitionMode: o
+  };
+  const E = r.useRef(/* @__PURE__ */ new Set());
+  r.useEffect(() => {
+    E.current.forEach((p) => p());
+  }, [R, i, o]);
+  const U = r.useCallback(
+    (p) => I.current.panels.find((b) => b.id === p)?.content ?? null,
+    []
+  ), S = r.useMemo(() => e.map((p) => p.id), [e]), { getCachedContent: O } = te({
+    resolveContent: U,
+    validIds: S
+  }), $ = r.useMemo(
+    () => ({
+      getState: () => I.current,
+      subscribe: (p) => (E.current.add(p), () => E.current.delete(p)),
+      getCachedContent: O
+    }),
+    [O]
+  ), W = r.useMemo(() => {
+    const p = () => /* @__PURE__ */ P(G.Provider, { value: $, children: /* @__PURE__ */ P("div", { style: D, "data-stack-container": !0, children: /* @__PURE__ */ P(he, {}) }) });
+    return p.displayName = "StackOutlet", p;
+  }, [$, D]);
+  return {
+    state: R,
+    push: h,
+    go: y,
+    move: k,
+    replace: M,
+    revealParent: _,
+    revealRoot: F,
+    dismissReveal: x,
+    getPanelProps: N,
+    getBackButtonProps: T,
+    canGo: w,
+    currentPanelId: A,
+    previousPanelId: d,
+    Outlet: W
+  };
+}
+function Ke(t) {
+  const {
+    containerRef: e,
+    navigation: n,
+    edge: i = "left",
+    edgeWidth: o = 20,
+    enabled: c = !0
+  } = t, [u, s] = r.useState(null), l = r.useCallback(
+    (d) => {
+      s(null), i === "left" && d.direction === 1 && n.canGo(-1) && n.go(-1);
+    },
+    [i, n]
+  ), { isEdgeGesture: f, state: m, containerProps: v } = ne({
+    containerRef: e,
+    edge: i,
+    edgeWidth: o,
+    enabled: c ? n.canGo(-1) : !1,
+    // Only enable if can go back
+    onSwipeEnd: l
+  });
+  r.useEffect(() => {
+    f && (m.phase === "swiping" || m.phase === "tracking") ? s(m) : m.phase === "idle" && s(null);
+  }, [f, m]);
+  const { containerProps: a } = re({
+    containerRef: e,
+    active: f,
+    preventEdgeBack: !0,
+    preventOverscroll: !0,
+    edgeWidth: o
+  }), g = r.useMemo(() => {
+    if (!u || !e.current)
+      return 0;
+    const d = e.current.clientWidth;
+    if (d === 0)
+      return 0;
+    const h = u.displacement.x;
+    if (i === "left" && h <= 0 || i === "right" && h >= 0)
+      return 0;
+    const y = Math.abs(h);
+    return Math.min(y / d, 1);
+  }, [u, e, i]), R = r.useMemo(
+    () => se(v, a),
+    [v, a]
+  );
+  return {
+    isEdgeSwiping: f,
+    progress: g,
+    inputState: f ? m : ie,
+    containerProps: R
+  };
+}
+const V = {
+  /** Ease out expo (similar to cubic-bezier(0.22, 1, 0.36, 1)) */
+  easeOutExpo: (t) => t === 1 ? 1 : 1 - Math.pow(2, -10 * t)
+}, ve = 300;
+function ge(t) {
+  const {
+    duration: e = ve,
+    easing: n = V.easeOutExpo,
+    onFrame: i,
+    onComplete: o
+  } = t, [c, u] = r.useState(!1), s = r.useRef(null), l = r.useRef(null), f = r.useRef(i), m = r.useRef(o);
+  r.useEffect(() => {
+    f.current = i, m.current = o;
+  }, [i, o]);
+  const v = r.useCallback(() => {
+    s.current !== null && (cancelAnimationFrame(s.current), s.current = null), l.current = null, u(!1);
+  }, []), a = r.useCallback(() => {
+    v(), u(!0), l.current = null;
+    const g = (R) => {
+      l.current === null && (l.current = R);
+      const A = R - l.current, d = Math.min(A / e, 1), h = n(d), y = d >= 1, k = {
+        progress: d,
+        easedProgress: h,
+        elapsed: A,
+        isComplete: y
+      };
+      f.current?.(k), y ? (s.current = null, l.current = null, u(!1), m.current?.()) : s.current = requestAnimationFrame(g);
+    };
+    s.current = requestAnimationFrame(g);
+  }, [e, n, v]);
+  return r.useEffect(() => () => {
+    s.current !== null && cancelAnimationFrame(s.current);
+  }, []), {
+    isAnimating: c,
+    start: a,
+    cancel: v
+  };
+}
+function Re(t, e, n) {
+  return t + (e - t) * n;
+}
+const Ae = 300, B = (t) => t === "horizontal" ? "translateX" : "translateY", ye = (t, e, n, i) => t || e === void 0 || e <= 0 || n === void 0 || n === i ? null : { from: n, to: i }, be = (t, e, n, i, o, c, u) => t === e ? { type: "none" } : i ? { type: "none" } : o ? { type: "none" } : c ? Math.abs(n - t) <= 1 ? { type: "snap", position: t } : u ? n > t ? { type: "snap", position: t } : { type: "animate", animation: { from: n, to: t } } : { type: "animate", animation: { from: n, to: t } } : { type: "snap", position: t }, Ce = (t, e, n) => t === void 0 || t === e || t <= 0 ? null : n;
+function ke(t) {
+  const {
+    elementRef: e,
+    targetPx: n,
+    displacement: i,
+    isOperating: o,
+    axis: c = "horizontal",
+    animationDuration: u = Ae,
+    containerSize: s,
+    animateOnTargetChange: l = !1,
+    initialPx: f,
+    skipTargetChangeAnimation: m = !1
+  } = t, v = f ?? n, a = r.useRef(v), g = r.useRef(null), R = r.useRef(n), A = r.useRef(s), d = r.useRef(null), h = r.useRef(!1), y = ye(
+    h.current,
+    s,
+    f,
+    n
+  );
+  y !== null && (d.current = y, h.current = !0);
+  const k = be(
+    n,
+    R.current,
+    a.current,
+    o,
+    g.current !== null,
+    l,
+    m
+  );
+  k.type === "animate" ? (d.current = k.animation, R.current = n) : k.type === "snap" && (a.current = k.position, R.current = n);
+  const M = Ce(
+    s,
+    A.current,
+    n
+  );
+  M !== null && (a.current = M, A.current = s);
+  const w = r.useCallback(
+    ({ easedProgress: T }) => {
+      const D = e.current, I = g.current;
+      if (!D || !I)
+        return;
+      const E = Re(I.from, I.to, T);
+      a.current = E, D.style.transform = `${B(c)}(${E}px)`;
+    },
+    [c, e]
+  ), _ = r.useCallback(() => {
+    g.current = null, a.current = n, R.current = n;
+  }, [n]), { isAnimating: F, start: x, cancel: N } = ge({
+    duration: u,
+    easing: V.easeOutExpo,
+    onFrame: w,
+    onComplete: _
+  });
+  return r.useLayoutEffect(() => {
+    if (o) {
+      N(), g.current = null, d.current = null;
+      return;
+    }
+    if (d.current) {
+      const I = d.current;
+      g.current = I, d.current = null;
+      const E = e.current;
+      E && (E.style.transform = `${B(c)}(${I.from}px)`), x();
+      return;
+    }
+    const T = a.current;
+    Math.abs(T - n) > 1 ? (g.current = { from: T, to: n }, x()) : (a.current = n, R.current = n);
+  }, [o, n, x, N]), r.useLayoutEffect(() => {
+    const T = e.current;
+    if (!T || F || g.current !== null || d.current !== null)
+      return;
+    const D = n + i;
+    a.current = D, T.style.transform = `${B(c)}(${D}px)`;
+  }, [n, i, c, F, e]), {
+    isAnimating: F,
+    currentPx: a.current,
+    animationDirection: g.current
+  };
+}
+function Te(t, e) {
+  const n = r.useRef(e), i = r.useRef(t), o = r.useRef(!1), u = n.current && !e, s = t !== i.current, l = e && s, v = o.current || l || u && s, a = e ? i.current : t;
+  return r.useLayoutEffect(() => {
+    e ? l && (o.current = !0) : (o.current = !1, i.current = t), n.current = e;
+  }), {
+    value: a,
+    changedDuringOperation: v,
+    operationJustEnded: u
+  };
+}
+const K = -0.3;
+function De(t) {
+  return Math.max(0, t);
+}
+function Ie(t, e, n = K) {
+  if (e <= 0)
+    return 0;
+  const i = Math.max(0, t), o = Math.min(i / e, 1), c = n * e, u = Math.abs(n) * o * e;
+  return c + u;
+}
+function Se(t) {
+  const { depth: e, navigationDepth: n, isActive: i, isOperating: o, isAnimating: c } = t;
+  return !!(i || e === n - 1 && (o || c));
+}
+function Ee(t, e) {
+  return t === e ? "active" : t === e - 1 ? "behind" : "hidden";
+}
+const Me = 300, we = 0.05, xe = 0.1, Oe = {
+  position: "absolute",
+  inset: 0,
+  width: "100%",
+  height: "100%"
+}, Pe = (t, e) => t.phase === "idle" ? 0 : e === "horizontal" ? t.displacement.x : t.displacement.y, Ne = "-5px 0 15px rgba(0, 0, 0, 0.1)", _e = r.memo(
+  ({
+    id: t,
+    depth: e,
+    navigationDepth: n,
+    isActive: i,
+    operationState: o,
+    containerSize: c,
+    axis: u = "horizontal",
+    behindOffset: s = K,
+    animationDuration: l = Me,
+    animateOnMount: f = !1,
+    showShadow: m = !0,
+    displayMode: v = "overlay",
+    showDimming: a = !0,
+    children: g
+  }) => {
+    const R = r.useRef(null), A = Pe(o, u), d = o.phase === "operating", h = Ee(e, n), { value: y, changedDuringOperation: k } = Te(
+      h,
+      A > 0
+    ), M = r.useMemo(() => {
+      switch (y) {
+        case "active":
+          return 0;
+        case "behind":
+          return s * c;
+        case "hidden":
+          return c;
+      }
+    }, [y, s, c]), w = r.useMemo(() => {
+      if (A <= 0)
+        return 0;
+      switch (y) {
+        case "active":
+          return De(A);
+        case "behind": {
+          const S = Ie(A, c, s), O = s * c;
+          return S - O;
+        }
+        case "hidden":
+          return 0;
+      }
+    }, [y, A, c, s]), _ = r.useMemo(() => {
+      if (f && h === "active" && e > 0)
+        return c;
+    }, [f, h, e, c]), { isAnimating: F } = ke({
+      elementRef: R,
+      targetPx: M,
+      displacement: w,
+      isOperating: d,
+      axis: u,
+      animationDuration: l,
+      containerSize: c,
+      // Animate when targetPx changes (button navigation)
+      animateOnTargetChange: !0,
+      // For push animation: start from off-screen
+      initialPx: _,
+      // Skip backward animation if role changed during the operation.
+      // This handles over-swipe where panel moves beyond 100% and needs to snap back.
+      // useSwipeContentTransform allows forward animations (normal swipe-to-complete)
+      // but skips backward animations (over-swipe snap).
+      skipTargetChangeAnimation: k
+    }), x = Se({
+      depth: e,
+      navigationDepth: n,
+      isActive: i,
+      isOperating: d,
+      isAnimating: F
+    }), N = r.useMemo(() => c <= 0 || A <= 0 ? 0 : Math.min(A / c, 1), [A, c]), T = r.useMemo(() => {
+      if (v !== "stack")
+        return 1;
+      const S = n - e;
+      if (h === "active")
+        return 1;
+      if (h === "behind") {
+        const O = 1 - S * we;
+        return O + N * (1 - O);
+      }
+      return 1;
+    }, [v, h, e, n, N]), D = r.useMemo(() => !a || h !== "behind" ? 0 : xe * (1 - N), [a, h, N]);
+    r.useLayoutEffect(() => {
+      const S = R.current;
+      S && (S.style.visibility = x ? "visible" : "hidden");
+    }, [x]), r.useLayoutEffect(() => {
+      const S = R.current;
+      if (!S || v !== "stack")
+        return;
+      const O = S.style.transform;
+      if (O.includes("translateX")) {
+        const $ = O.match(/translateX\([^)]+\)/);
+        $ && (S.style.transform = `${$[0]} scale(${T})`);
+      } else
+        S.style.transform = `scale(${T})`;
+    }, [T, v]);
+    const I = m ? e > 0 && h === "active" : !1, E = r.useMemo(
+      () => ({
+        ...Oe,
+        pointerEvents: i ? "auto" : "none",
+        willChange: "transform",
+        zIndex: e,
+        visibility: x ? "visible" : "hidden",
+        boxShadow: I ? Ne : void 0
+      }),
+      [i, e, x, I]
+    ), U = r.useMemo(() => D <= 0 ? null : {
+      position: "absolute",
+      inset: 0,
+      backgroundColor: `rgba(0, 0, 0, ${D})`,
+      pointerEvents: "none",
+      zIndex: 1
+    }, [D]);
+    return /* @__PURE__ */ q(
+      "div",
+      {
+        ref: R,
+        "data-stack-content": t,
+        "data-depth": e,
+        "data-active": i ? "true" : "false",
+        "data-role": h,
+        style: E,
+        children: [
+          g,
+          U != null ? /* @__PURE__ */ P("div", { style: U, "data-dimming-overlay": !0 }) : null
+        ]
+      }
+    );
+  }
+), Fe = 300;
+function $e(t, e, n) {
+  const { stack: i, depth: o } = e, c = [o];
+  o > 0 && c.push(o - 1);
+  const u = [];
+  for (const s of c) {
+    const l = i[s], f = t.find((m) => m.id === l);
+    f && u.push({ panel: f, depth: s, isExiting: !1 });
+  }
+  if (n != null && !u.some((l) => l.panel.id === n)) {
+    const l = t.find((f) => f.id === n);
+    l && u.push({ panel: l, depth: o + 1, isExiting: !0 });
+  }
+  return u.sort((s, l) => s.depth - l.depth);
+}
+const We = r.memo(
+  ({
+    panels: t,
+    navigationState: e,
+    operationState: n,
+    containerSize: i,
+    getCachedContent: o,
+    behindOffset: c,
+    animateOnMount: u = !1,
+    animationDuration: s = Fe,
+    showShadow: l,
+    displayMode: f,
+    showDimming: m
+  }) => {
+    const [v, a] = r.useState(null), g = r.useRef(e.depth), R = r.useRef(e.stack);
+    r.useLayoutEffect(() => {
+      const h = g.current, y = R.current, { depth: k, stack: M } = e;
+      if (g.current = k, R.current = M, k < h) {
+        const w = y[h];
+        if (w != null) {
+          a(w);
+          const _ = setTimeout(() => {
+            a(null);
+          }, s);
+          return () => clearTimeout(_);
+        }
+      }
+    }, [e.depth, e.stack, s]);
+    const A = r.useMemo(
+      () => $e(t, e, v),
+      [t, e, v]
+    ), d = r.useMemo(
+      () => ({
+        position: "relative",
+        width: "100%",
+        height: "100%",
+        overflow: "hidden"
+      }),
+      []
+    );
+    return /* @__PURE__ */ P("div", { style: d, "data-swipe-stack-container": !0, children: A.map(({ panel: h, depth: y, isExiting: k }) => {
+      const M = y === e.depth && !k, w = o?.(h.id) ?? h.content;
+      return /* @__PURE__ */ P(
+        _e,
+        {
+          id: h.id,
+          depth: y,
+          navigationDepth: e.depth,
+          isActive: M,
+          operationState: n,
+          containerSize: i,
+          behindOffset: c,
+          animateOnMount: u,
+          animationDuration: s,
+          showShadow: l,
+          displayMode: f,
+          showDimming: m,
+          children: w
+        },
+        h.id
+      );
+    }) });
+  }
+);
+export {
+  de as StackContent,
+  _e as SwipeStackContent,
+  We as SwipeStackOutlet,
+  Ve as useStackNavigation,
+  Ke as useStackSwipeInput
+};
+//# sourceMappingURL=stack.js.map