import { o as ne } from "./rolldown-runtime.js";
import { i as le, t as se } from "./vendor/react.js";
import { s as Dt, t as xt } from "./useRenderElement.js";
import { n as pt, t as Pt } from "./useIsoLayoutEffect.js";
import { t as Bt } from "./utils.js";
import { n as bt } from "./useTimeout.js";
import { n as Ut, r as Vt } from "./scrollEdges.js";
import { t as ce } from "./useBaseUiId.js";
import { s as ie } from "./detectBrowser.js";
import { n as qt, r as ae } from "./shadowDom.js";
import { t as fe } from "./CSPContext.js";
import { n as Kt } from "./DirectionContext.js";
import { t as wt } from "./clamp.js";
import { t as ue } from "./addEventListener.js";
var e = /* @__PURE__ */ ne(le()), Gt = /* @__PURE__ */ e.createContext(void 0);
function Rt() {
  const t = e.useContext(Gt);
  if (t === void 0) throw new Error(Dt(53));
  return t;
}
var Xt = /* @__PURE__ */ (function(t) {
  return t.scrollAreaCornerHeight = "--scroll-area-corner-height", t.scrollAreaCornerWidth = "--scroll-area-corner-width", t;
})({});
function H(t, r, d) {
  if (!t) return 0;
  const U = getComputedStyle(t), K = d === "x" ? "Inline" : "Block";
  return d === "x" && r === "margin" ? parseFloat(U[`${r}InlineStart`]) * 2 : parseFloat(U[`${r}${K}Start`]) + parseFloat(U[`${r}${K}End`]);
}
var de = /* @__PURE__ */ (function(t) {
  return t.orientation = "data-orientation", t.hovering = "data-hovering", t.scrolling = "data-scrolling", t.hasOverflowX = "data-has-overflow-x", t.hasOverflowY = "data-has-overflow-y", t.overflowXStart = "data-overflow-x-start", t.overflowXEnd = "data-overflow-x-end", t.overflowYStart = "data-overflow-y-start", t.overflowYEnd = "data-overflow-y-end", t;
})({}), ft = /* @__PURE__ */ (function(t) {
  return t.scrolling = "data-scrolling", t.hasOverflowX = "data-has-overflow-x", t.hasOverflowY = "data-has-overflow-y", t.overflowXStart = "data-overflow-x-start", t.overflowXEnd = "data-overflow-x-end", t.overflowYStart = "data-overflow-y-start", t.overflowYEnd = "data-overflow-y-end", t;
})({}), Nt = {
  hasOverflowX: (t) => t ? { [ft.hasOverflowX]: "" } : null,
  hasOverflowY: (t) => t ? { [ft.hasOverflowY]: "" } : null,
  overflowXStart: (t) => t ? { [ft.overflowXStart]: "" } : null,
  overflowXEnd: (t) => t ? { [ft.overflowXEnd]: "" } : null,
  overflowYStart: (t) => t ? { [ft.overflowYStart]: "" } : null,
  overflowYEnd: (t) => t ? { [ft.overflowYEnd]: "" } : null,
  cornerHidden: () => null
}, _ = se(), he = {
  x: 0,
  y: 0
}, jt = {
  width: 0,
  height: 0
}, ve = {
  xStart: !1,
  xEnd: !1,
  yStart: !1,
  yEnd: !1
}, me = {
  x: !0,
  y: !0,
  corner: !0
}, ge = /* @__PURE__ */ e.forwardRef(function(r, d) {
  const { render: U, className: K, overflowEdgeThreshold: i, style: L, ...m } = r, T = we(i), N = ce(), z = bt(), j = bt(), { nonce: M, disableStyleElements: W } = fe(), [S, a] = e.useState(!1), [u, b] = e.useState(!1), [h, A] = e.useState(!1), [nt, G] = e.useState(!1), [Z, I] = e.useState(!1), [C, lt] = e.useState(jt), [J, Q] = e.useState(jt), [X, st] = e.useState(ve), [R, l] = e.useState(me), g = e.useRef(null), c = e.useRef(null), f = e.useRef(null), O = e.useRef(null), x = e.useRef(null), E = e.useRef(null), s = e.useRef(null), w = e.useRef(!1), p = e.useRef(0), v = e.useRef(0), y = e.useRef(0), St = e.useRef(0), Y = e.useRef("vertical"), $ = e.useRef(he), k = pt((o) => {
    const V = o.x - $.current.x, et = o.y - $.current.y;
    $.current = o, et !== 0 && (A(!0), z.start(500, () => {
      A(!1);
    })), V !== 0 && (b(!0), j.start(500, () => {
      b(!1);
    }));
  }), D = pt((o) => {
    o.button === 0 && (w.current = !0, p.current = o.clientY, v.current = o.clientX, Y.current = o.currentTarget.getAttribute(de.orientation), c.current && (y.current = c.current.scrollTop, St.current = c.current.scrollLeft), x.current && Y.current === "vertical" && x.current.setPointerCapture(o.pointerId), E.current && Y.current === "horizontal" && E.current.setPointerCapture(o.pointerId));
  }), ut = pt((o) => {
    if (!w.current) return;
    const V = o.clientY - p.current, et = o.clientX - v.current;
    if (c.current) {
      const it = c.current.scrollHeight, dt = c.current.clientHeight, Ht = c.current.scrollWidth, ht = c.current.clientWidth;
      if (x.current && f.current && Y.current === "vertical") {
        const at = H(f.current, "padding", "y"), vt = H(x.current, "margin", "y"), mt = x.current.offsetHeight, rt = V / (f.current.offsetHeight - mt - at - vt);
        c.current.scrollTop = y.current + rt * (it - dt), o.preventDefault(), A(!0), z.start(500, () => {
          A(!1);
        });
      }
      if (E.current && O.current && Y.current === "horizontal") {
        const at = H(O.current, "padding", "x"), vt = H(E.current, "margin", "x"), mt = E.current.offsetWidth, rt = et / (O.current.offsetWidth - mt - at - vt);
        c.current.scrollLeft = St.current + rt * (Ht - ht), o.preventDefault(), b(!0), j.start(500, () => {
          b(!1);
        });
      }
    }
  }), ct = pt((o) => {
    w.current = !1, x.current && Y.current === "vertical" && x.current.releasePointerCapture(o.pointerId), E.current && Y.current === "horizontal" && E.current.releasePointerCapture(o.pointerId);
  });
  function B(o) {
    G(o.pointerType === "touch");
  }
  function Et(o) {
    B(o), o.pointerType !== "touch" && a(qt(g.current, o.target));
  }
  const tt = e.useMemo(() => ({
    scrolling: u || h,
    hasOverflowX: !R.x,
    hasOverflowY: !R.y,
    overflowXStart: X.xStart,
    overflowXEnd: X.xEnd,
    overflowYStart: X.yStart,
    overflowYEnd: X.yEnd,
    cornerHidden: R.corner
  }), [
    u,
    h,
    R.x,
    R.y,
    R.corner,
    X
  ]), P = {
    role: "presentation",
    onPointerEnter: Et,
    onPointerMove: Et,
    onPointerDown: B,
    onPointerLeave() {
      a(!1);
    },
    style: {
      position: "relative",
      [Xt.scrollAreaCornerHeight]: `${C.height}px`,
      [Xt.scrollAreaCornerWidth]: `${C.width}px`
    }
  }, F = xt("div", r, {
    state: tt,
    ref: [d, g],
    props: [P, m],
    stateAttributesMapping: Nt
  }), Ot = e.useMemo(() => ({
    handlePointerDown: D,
    handlePointerMove: ut,
    handlePointerUp: ct,
    handleScroll: k,
    cornerSize: C,
    setCornerSize: lt,
    thumbSize: J,
    setThumbSize: Q,
    hasMeasuredScrollbar: Z,
    setHasMeasuredScrollbar: I,
    touchModality: nt,
    cornerRef: s,
    scrollingX: u,
    setScrollingX: b,
    scrollingY: h,
    setScrollingY: A,
    hovering: S,
    setHovering: a,
    viewportRef: c,
    rootRef: g,
    scrollbarYRef: f,
    scrollbarXRef: O,
    thumbYRef: x,
    thumbXRef: E,
    rootId: N,
    hiddenState: R,
    setHiddenState: l,
    overflowEdges: X,
    setOverflowEdges: st,
    viewportState: tt,
    overflowEdgeThreshold: T
  }), [
    D,
    ut,
    ct,
    k,
    C,
    J,
    Z,
    nt,
    u,
    b,
    h,
    A,
    S,
    a,
    N,
    R,
    X,
    tt,
    T
  ]);
  return /* @__PURE__ */ (0, _.jsxs)(Gt.Provider, {
    value: Ot,
    children: [!W && Vt.getElement(M), F]
  });
});
function we(t) {
  if (typeof t == "number") {
    const r = Math.max(0, t);
    return {
      xStart: r,
      xEnd: r,
      yStart: r,
      yEnd: r
    };
  }
  return {
    xStart: Math.max(0, t?.xStart || 0),
    xEnd: Math.max(0, t?.xEnd || 0),
    yStart: Math.max(0, t?.yStart || 0),
    yEnd: Math.max(0, t?.yEnd || 0)
  };
}
var pe = /* @__PURE__ */ e.createContext(void 0), q = /* @__PURE__ */ (function(t) {
  return t.scrollAreaOverflowXStart = "--scroll-area-overflow-x-start", t.scrollAreaOverflowXEnd = "--scroll-area-overflow-x-end", t.scrollAreaOverflowYStart = "--scroll-area-overflow-y-start", t.scrollAreaOverflowYEnd = "--scroll-area-overflow-y-end", t;
})({}), kt = !1;
function xe() {
  kt || ie || (typeof CSS < "u" && "registerProperty" in CSS && [
    q.scrollAreaOverflowXStart,
    q.scrollAreaOverflowXEnd,
    q.scrollAreaOverflowYStart,
    q.scrollAreaOverflowYEnd
  ].forEach((t) => {
    try {
      CSS.registerProperty({
        name: t,
        syntax: "<length>",
        inherits: !1,
        initialValue: "0px"
      });
    } catch {
    }
  }), kt = !0);
}
var Se = /* @__PURE__ */ e.forwardRef(function(r, d) {
  const { render: U, className: K, style: i, ...L } = r, { viewportRef: m, scrollbarYRef: T, scrollbarXRef: N, thumbYRef: z, thumbXRef: j, cornerRef: M, cornerSize: W, setCornerSize: S, setThumbSize: a, rootId: u, setHiddenState: b, hiddenState: h, setHasMeasuredScrollbar: A, handleScroll: nt, setHovering: G, setOverflowEdges: Z, overflowEdges: I, overflowEdgeThreshold: C, scrollingX: lt, scrollingY: J } = Rt(), Q = Kt(), X = e.useRef(!0), st = e.useRef([
    NaN,
    NaN,
    NaN,
    NaN
  ]), R = bt(), l = bt(), g = pt(() => {
    const s = m.current, w = T.current, p = N.current, v = z.current, y = j.current, St = M.current;
    if (!s) return;
    const Y = s.scrollHeight, $ = s.scrollWidth, k = s.clientHeight, D = s.clientWidth, ut = s.scrollTop, ct = s.scrollLeft, B = st.current, Et = Number.isNaN(B[0]);
    if (B[0] = k, B[1] = Y, B[2] = D, B[3] = $, Et && A(!0), Y === 0 || $ === 0) return;
    const tt = Ee(s), P = tt.y, F = tt.x, Ot = D / $, o = k / Y, V = Math.max(0, $ - D), et = Math.max(0, Y - k);
    let it = 0, dt = 0;
    if (!F) {
      let n = 0;
      Q === "rtl" ? n = wt(-ct, 0, V) : n = wt(ct, 0, V), it = Ut(n, V), dt = V - it;
    }
    const Ht = P ? 0 : wt(ut, 0, et), ht = P ? 0 : Ut(Ht, et), at = P ? 0 : et - ht, vt = F ? 0 : D, mt = P ? 0 : k;
    let rt = 0, Tt = 0;
    !F && !P && (rt = w?.offsetWidth || 0, Tt = p?.offsetHeight || 0);
    const zt = W.width === 0 && W.height === 0, Qt = zt ? rt : 0, te = zt ? Tt : 0, At = H(p, "padding", "x"), Lt = H(w, "padding", "y"), It = H(y, "margin", "x"), $t = H(v, "margin", "y"), Ft = vt - At - It, _t = mt - Lt - $t, ee = p ? Math.min(p.offsetWidth - Qt, Ft) : Ft, re = w ? Math.min(w.offsetHeight - te, _t) : _t, Mt = Math.max(16, ee * Ot), Wt = Math.max(16, re * o);
    if (a((n) => n.height === Wt && n.width === Mt ? n : {
      width: Mt,
      height: Wt
    }), w && v) {
      const n = w.offsetHeight - Wt - Lt - $t, ot = Y - k, yt = ot === 0 ? 0 : ut / ot, Ct = Math.min(n, Math.max(0, yt * n));
      v.style.transform = `translate3d(0,${Ct}px,0)`;
    }
    if (p && y) {
      const n = p.offsetWidth - Mt - At - It, ot = $ - D, yt = ot === 0 ? 0 : ct / ot, Ct = Q === "rtl" ? wt(yt * n, -n, 0) : wt(yt * n, 0, n);
      y.style.transform = `translate3d(${Ct}px,0,0)`;
    }
    const oe = [
      [q.scrollAreaOverflowXStart, it],
      [q.scrollAreaOverflowXEnd, dt],
      [q.scrollAreaOverflowYStart, ht],
      [q.scrollAreaOverflowYEnd, at]
    ];
    for (const [n, ot] of oe) s.style.setProperty(n, `${ot}px`);
    St && (F || P ? S({
      width: 0,
      height: 0
    }) : !F && !P && S({
      width: rt,
      height: Tt
    })), b((n) => ye(n, tt));
    const gt = {
      xStart: !F && it > C.xStart,
      xEnd: !F && dt > C.xEnd,
      yStart: !P && ht > C.yStart,
      yEnd: !P && at > C.yEnd
    };
    Z((n) => n.xStart === gt.xStart && n.xEnd === gt.xEnd && n.yStart === gt.yStart && n.yEnd === gt.yEnd ? n : gt);
  });
  Pt(() => {
    m.current && xe();
  }, [m]), Pt(() => {
    queueMicrotask(g);
  }, [
    g,
    h,
    Q
  ]), Pt(() => {
    m.current?.matches(":hover") && G(!0);
  }, [m, G]), e.useEffect(() => {
    const s = m.current;
    if (typeof ResizeObserver > "u" || !s) return;
    let w = !1;
    const p = new ResizeObserver(() => {
      if (!w) {
        w = !0;
        const v = st.current;
        if (v[0] === s.clientHeight && v[1] === s.scrollHeight && v[2] === s.clientWidth && v[3] === s.scrollWidth) return;
      }
      g();
    });
    return p.observe(s), l.start(0, () => {
      const v = s.getAnimations({ subtree: !0 });
      v.length !== 0 && Promise.allSettled(v.map((y) => y.finished)).then(g).catch(() => {
      });
    }), () => {
      p.disconnect(), l.clear();
    };
  }, [
    g,
    m,
    l
  ]);
  function c() {
    X.current = !1;
  }
  const f = {
    role: "presentation",
    ...u && { "data-id": `${u}-viewport` },
    tabIndex: h.x && h.y ? -1 : 0,
    className: Vt.className,
    style: { overflow: "scroll" },
    onScroll() {
      m.current && (g(), X.current || nt({
        x: m.current.scrollLeft,
        y: m.current.scrollTop
      }), R.start(100, () => {
        X.current = !0;
      }));
    },
    onWheel: c,
    onTouchMove: c,
    onPointerMove: c,
    onPointerEnter: c,
    onKeyDown: c
  }, O = e.useMemo(() => ({
    scrolling: lt || J,
    hasOverflowX: !h.x,
    hasOverflowY: !h.y,
    overflowXStart: I.xStart,
    overflowXEnd: I.xEnd,
    overflowYStart: I.yStart,
    overflowYEnd: I.yEnd,
    cornerHidden: h.corner
  }), [
    lt,
    J,
    h.x,
    h.y,
    h.corner,
    I
  ]), x = xt("div", r, {
    ref: [d, m],
    state: O,
    props: [f, L],
    stateAttributesMapping: Nt
  }), E = e.useMemo(() => ({ computeThumbPosition: g }), [g]);
  return /* @__PURE__ */ (0, _.jsx)(pe.Provider, {
    value: E,
    children: x
  });
});
function Ee(t) {
  const r = t.clientHeight >= t.scrollHeight, d = t.clientWidth >= t.scrollWidth;
  return {
    y: r,
    x: d,
    corner: r || d
  };
}
function ye(t, r) {
  return t.y === r.y && t.x === r.x && t.corner === r.corner ? t : r;
}
var Zt = /* @__PURE__ */ e.createContext(void 0);
function be() {
  const t = e.useContext(Zt);
  if (t === void 0) throw new Error(Dt(54));
  return t;
}
var Yt = /* @__PURE__ */ (function(t) {
  return t.scrollAreaThumbHeight = "--scroll-area-thumb-height", t.scrollAreaThumbWidth = "--scroll-area-thumb-width", t;
})({}), Xe = /* @__PURE__ */ e.forwardRef(function(r, d) {
  const { render: U, className: K, orientation: i = "vertical", keepMounted: L = !1, style: m, ...T } = r, { hovering: N, scrollingX: z, scrollingY: j, hiddenState: M, overflowEdges: W, scrollbarYRef: S, scrollbarXRef: a, viewportRef: u, thumbYRef: b, thumbXRef: h, handlePointerDown: A, handlePointerUp: nt, rootId: G, thumbSize: Z, hasMeasuredScrollbar: I } = Rt(), C = {
    hovering: N,
    scrolling: {
      horizontal: z,
      vertical: j
    }[i],
    orientation: i,
    hasOverflowX: !M.x,
    hasOverflowY: !M.y,
    overflowXStart: W.xStart,
    overflowXEnd: W.xEnd,
    overflowYStart: W.yStart,
    overflowYEnd: W.yEnd,
    cornerHidden: M.corner
  }, lt = Kt(), J = !I && !L;
  e.useEffect(() => {
    const l = u.current, g = i === "vertical" ? S.current : a.current;
    if (!g) return;
    function c(f) {
      if (!(!l || !g || f.ctrlKey)) {
        if (f.preventDefault(), i === "vertical") {
          if (l.scrollTop === 0 && f.deltaY < 0) return;
        } else if (l.scrollLeft === 0 && f.deltaX < 0) return;
        if (i === "vertical") {
          if (l.scrollTop === l.scrollHeight - l.clientHeight && f.deltaY > 0) return;
        } else if (l.scrollLeft === l.scrollWidth - l.clientWidth && f.deltaX > 0) return;
        i === "vertical" ? l.scrollTop += f.deltaY : l.scrollLeft += f.deltaX;
      }
    }
    return ue(g, "wheel", c, { passive: !1 });
  }, [
    i,
    a,
    S,
    u
  ]);
  const Q = {
    ...G && { "data-id": `${G}-scrollbar` },
    onPointerDown(l) {
      if (l.button !== 0) return;
      const g = ae(l.nativeEvent), c = i === "vertical" ? b.current : h.current;
      if (!(c && qt(c, g)) && u.current) {
        if (b.current && S.current && i === "vertical") {
          const f = H(b.current, "margin", "y"), O = H(S.current, "padding", "y"), x = b.current.offsetHeight, E = S.current.getBoundingClientRect(), s = l.clientY - E.top - x / 2 - O + f / 2, w = u.current.scrollHeight, p = u.current.clientHeight, v = s / (S.current.offsetHeight - x - O - f) * (w - p);
          u.current.scrollTop = v;
        }
        if (h.current && a.current && i === "horizontal") {
          const f = H(h.current, "margin", "x"), O = H(a.current, "padding", "x"), x = h.current.offsetWidth, E = a.current.getBoundingClientRect(), s = l.clientX - E.left - x / 2 - O + f / 2, w = u.current.scrollWidth, p = u.current.clientWidth, v = s / (a.current.offsetWidth - x - O - f);
          let y;
          lt === "rtl" ? (y = (1 - v) * (w - p), u.current.scrollLeft <= 0 && (y = -y)) : y = v * (w - p), u.current.scrollLeft = y;
        }
        A(l);
      }
    },
    onPointerUp: nt,
    style: {
      position: "absolute",
      touchAction: "none",
      WebkitUserSelect: "none",
      userSelect: "none",
      visibility: J ? "hidden" : void 0,
      ...i === "vertical" && {
        top: 0,
        bottom: `var(${Xt.scrollAreaCornerHeight})`,
        insetInlineEnd: 0,
        [Yt.scrollAreaThumbHeight]: `${Z.height}px`
      },
      ...i === "horizontal" && {
        insetInlineStart: 0,
        insetInlineEnd: `var(${Xt.scrollAreaCornerWidth})`,
        bottom: 0,
        [Yt.scrollAreaThumbWidth]: `${Z.width}px`
      }
    }
  }, X = xt("div", r, {
    ref: [d, i === "vertical" ? S : a],
    state: C,
    props: [Q, T],
    stateAttributesMapping: Nt
  }), st = e.useMemo(() => ({ orientation: i }), [i]), R = i === "vertical" ? M.y : M.x;
  return L || !R ? /* @__PURE__ */ (0, _.jsx)(Zt.Provider, {
    value: st,
    children: X
  }) : null;
}), Ye = /* @__PURE__ */ e.forwardRef(function(r, d) {
  const { render: U, className: K, style: i, ...L } = r, { thumbYRef: m, thumbXRef: T, handlePointerDown: N, handlePointerMove: z, handlePointerUp: j, setScrollingX: M, setScrollingY: W, hasMeasuredScrollbar: S } = Rt(), { orientation: a } = be();
  return xt("div", r, {
    ref: [d, a === "vertical" ? m : T],
    state: { orientation: a },
    props: [{
      onPointerDown: N,
      onPointerMove: z,
      onPointerUp(u) {
        a === "vertical" && W(!1), a === "horizontal" && M(!1), j(u);
      },
      style: {
        visibility: S ? void 0 : "hidden",
        ...a === "vertical" && { height: `var(${Yt.scrollAreaThumbHeight})` },
        ...a === "horizontal" && { width: `var(${Yt.scrollAreaThumbWidth})` }
      }
    }, L]
  });
}), Re = /* @__PURE__ */ e.forwardRef(function(r, d) {
  const { render: U, className: K, style: i, ...L } = r, { cornerRef: m, cornerSize: T, hiddenState: N } = Rt(), z = xt("div", r, {
    ref: [d, m],
    props: [{ style: {
      position: "absolute",
      bottom: 0,
      insetInlineEnd: 0,
      width: T.width,
      height: T.height
    } }, L]
  });
  return N.corner ? null : z;
});
function Oe({ className: t, children: r, ...d }) {
  return /* @__PURE__ */ (0, _.jsxs)(ge, {
    "data-slot": "scroll-area",
    className: Bt("group/scroll relative overflow-hidden", t),
    ...d,
    children: [
      /* @__PURE__ */ (0, _.jsx)(Se, {
        "data-slot": "scroll-area-viewport",
        className: "focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] motion-reduce:transition-none outline-none focus-visible:ring-[3px] focus-visible:outline-1",
        children: r
      }),
      /* @__PURE__ */ (0, _.jsx)(Jt, {}),
      /* @__PURE__ */ (0, _.jsx)(Re, {})
    ]
  });
}
function Jt({ className: t, orientation: r = "vertical", ...d }) {
  return /* @__PURE__ */ (0, _.jsx)(Xe, {
    "data-slot": "scroll-area-scrollbar",
    "data-orientation": r,
    orientation: r,
    className: Bt("data-[orientation=horizontal]:h-4 data-[orientation=horizontal]:flex-col data-[orientation=vertical]:h-full data-[orientation=vertical]:w-4 flex touch-none p-1 transition-opacity motion-reduce:transition-none select-none opacity-0 hover:opacity-100 group-hover/scroll:opacity-100", t),
    ...d,
    children: /* @__PURE__ */ (0, _.jsx)(Ye, {
      "data-slot": "scroll-area-thumb",
      className: "rounded-full bg-border hover:bg-muted-foreground relative flex-1 transition-colors motion-reduce:transition-none"
    })
  });
}
Oe.displayName = "ScrollArea";
Jt.displayName = "ScrollBar";
export {
  Oe as t
};

//# sourceMappingURL=scroll-area.js.map