@orchidui/dashboard 1.8.1-95 → 1.8.1-96

package/dist/ui/scroll-area/index.js

@@ -0,0 +1,775 @@
+import { defineComponent as C, ref as b, toRefs as M, createBlock as g, openBlock as S, unref as r, normalizeStyle as W, withCtx as m, renderSlot as w, computed as R, watch as I, createCommentVNode as U, mergeProps as _, onMounted as B, onUnmounted as X, createVNode as x, watchEffect as G, createElementBlock as ne, Fragment as ae, createElementVNode as se, createTextVNode as ce } from "vue";
+import { c as Q } from "../../utils-SFgRDk1R.js";
+import { q as H, v as Z, w as ie } from "../../index-BwPb_idr.js";
+import { c as ue } from "../../clamp-BL1Rb24G.js";
+import { u as P } from "../../useForwardExpose-DZT6mL_U.js";
+import { P as z } from "../../Primitive-B3twiLO1.js";
+import { c as F } from "../../createContext-CZEfaSVa.js";
+import { u as de } from "../../useDirection-C3C_TLKm.js";
+import { P as j, u as fe } from "../../Presence-CxfTrw6l.js";
+import { r as ee } from "../../index-OpE2oGce.js";
+import { u as ve } from "../../useNonce-C1ZOgOp5.js";
+const [$, pe] = F("ScrollAreaRoot"), he = /* @__PURE__ */ C({
+  __name: "ScrollAreaRoot",
+  props: {
+    type: { default: "hover" },
+    dir: {},
+    scrollHideDelay: { default: 600 },
+    asChild: { type: Boolean },
+    as: {}
+  },
+  setup(s, { expose: e }) {
+    const l = s, t = b(0), n = b(0), a = b(), c = b(), o = b(), u = b(), f = b(!1), p = b(!1), { type: y, dir: h, scrollHideDelay: E } = M(l), T = de(h);
+    function A() {
+      var d;
+      (d = a.value) == null || d.scrollTo({
+        top: 0
+      });
+    }
+    function L() {
+      var d;
+      (d = a.value) == null || d.scrollTo({
+        top: 0,
+        left: 0
+      });
+    }
+    e({
+      /** Viewport element within ScrollArea */
+      viewport: a,
+      /** Scroll viewport to top */
+      scrollTop: A,
+      /** Scroll viewport to top-left */
+      scrollTopLeft: L
+    });
+    const { forwardRef: i, currentElement: v } = P();
+    return pe({
+      type: y,
+      dir: T,
+      scrollHideDelay: E,
+      scrollArea: v,
+      viewport: a,
+      onViewportChange: (d) => {
+        a.value = d || void 0;
+      },
+      content: c,
+      onContentChange: (d) => {
+        c.value = d;
+      },
+      scrollbarX: o,
+      scrollbarXEnabled: f,
+      scrollbarY: u,
+      scrollbarYEnabled: p,
+      onScrollbarXChange: (d) => {
+        o.value = d || void 0;
+      },
+      onScrollbarYChange: (d) => {
+        u.value = d || void 0;
+      },
+      onScrollbarXEnabledChange: (d) => {
+        f.value = d;
+      },
+      onScrollbarYEnabledChange: (d) => {
+        p.value = d;
+      },
+      onCornerWidthChange: (d) => {
+        t.value = d;
+      },
+      onCornerHeightChange: (d) => {
+        n.value = d;
+      }
+    }), (d, k) => (S(), g(r(z), {
+      ref: r(i),
+      "as-child": l.asChild,
+      as: d.as,
+      dir: r(T),
+      style: W({
+        position: "relative",
+        // Pass corner sizes as CSS vars to reduce re-renders of context consumers
+        "--reka-scroll-area-corner-width": `${t.value}px`,
+        "--reka-scroll-area-corner-height": `${n.value}px`
+      })
+    }, {
+      default: m(() => [
+        w(d.$slots, "default")
+      ]),
+      _: 3
+    }, 8, ["as-child", "as", "dir", "style"]));
+  }
+}), me = /* @__PURE__ */ C({
+  __name: "ScrollAreaCornerImpl",
+  setup(s) {
+    const e = $(), l = b(0), t = b(0), n = R(() => !!l.value && !!t.value);
+    function a() {
+      var u;
+      const o = ((u = e.scrollbarX.value) == null ? void 0 : u.offsetHeight) || 0;
+      e.onCornerHeightChange(o), t.value = o;
+    }
+    function c() {
+      var u;
+      const o = ((u = e.scrollbarY.value) == null ? void 0 : u.offsetWidth) || 0;
+      e.onCornerWidthChange(o), l.value = o;
+    }
+    return H(e.scrollbarX.value, a), H(e.scrollbarY.value, c), I(() => e.scrollbarX.value, a), I(() => e.scrollbarY.value, c), (o, u) => {
+      var f;
+      return n.value ? (S(), g(r(z), _({
+        key: 0,
+        style: {
+          width: `${l.value}px`,
+          height: `${t.value}px`,
+          position: "absolute",
+          right: r(e).dir.value === "ltr" ? 0 : void 0,
+          left: r(e).dir.value === "rtl" ? 0 : void 0,
+          bottom: 0
+        }
+      }, (f = o.$parent) == null ? void 0 : f.$props), {
+        default: m(() => [
+          w(o.$slots, "default")
+        ]),
+        _: 3
+      }, 16, ["style"])) : U("", !0);
+    };
+  }
+}), be = /* @__PURE__ */ C({
+  __name: "ScrollAreaCorner",
+  props: {
+    asChild: { type: Boolean },
+    as: {}
+  },
+  setup(s) {
+    const e = s, { forwardRef: l } = P(), t = $(), n = R(
+      () => !!t.scrollbarX.value && !!t.scrollbarY.value
+    ), a = R(
+      () => t.type.value !== "scroll" && n.value
+    );
+    return (c, o) => a.value ? (S(), g(me, _({ key: 0 }, e, { ref: r(l) }), {
+      default: m(() => [
+        w(c.$slots, "default")
+      ]),
+      _: 3
+    }, 16)) : U("", !0);
+  }
+});
+function te(s, e) {
+  return (l) => {
+    if (s[0] === s[1] || e[0] === e[1])
+      return e[0];
+    const t = (e[1] - e[0]) / (s[1] - s[0]);
+    return e[0] + t * (l - s[0]);
+  };
+}
+function Y(s) {
+  const e = oe(s.viewport, s.content), l = s.scrollbar.paddingStart + s.scrollbar.paddingEnd, t = (s.scrollbar.size - l) * e;
+  return Math.max(t, 18);
+}
+function oe(s, e) {
+  const l = s / e;
+  return Number.isNaN(l) ? 0 : l;
+}
+function Se(s, e = () => {
+}) {
+  let l = { left: s.scrollLeft, top: s.scrollTop }, t = 0;
+  return function n() {
+    const a = { left: s.scrollLeft, top: s.scrollTop }, c = l.left !== a.left, o = l.top !== a.top;
+    (c || o) && e(), l = a, t = window.requestAnimationFrame(n);
+  }(), () => window.cancelAnimationFrame(t);
+}
+function J(s, e, l = "ltr") {
+  const t = Y(e), n = e.scrollbar.paddingStart + e.scrollbar.paddingEnd, a = e.scrollbar.size - n, c = e.content - e.viewport, o = a - t, u = l === "ltr" ? [0, c] : [c * -1, 0], f = ue(
+    s,
+    u[0],
+    u[1]
+  );
+  return te([0, c], [0, o])(f);
+}
+function O(s) {
+  return s ? Number.parseInt(s, 10) : 0;
+}
+function ge(s, e, l, t = "ltr") {
+  const n = Y(l), a = n / 2, c = e || a, o = n - c, u = l.scrollbar.paddingStart + c, f = l.scrollbar.size - l.scrollbar.paddingEnd - o, p = l.content - l.viewport, y = t === "ltr" ? [0, p] : [p * -1, 0];
+  return te(
+    [u, f],
+    y
+  )(s);
+}
+function K(s, e) {
+  return s > 0 && s < e;
+}
+const re = /* @__PURE__ */ C({
+  __name: "ScrollAreaScrollbarImpl",
+  props: {
+    isHorizontal: { type: Boolean }
+  },
+  emits: ["onDragScroll", "onWheelScroll", "onThumbPointerDown"],
+  setup(s, { emit: e }) {
+    const l = s, t = e, n = $(), a = V(), c = N(), { forwardRef: o, currentElement: u } = P(), f = b(""), p = b();
+    function y(i) {
+      var v, d;
+      if (p.value) {
+        const k = i.clientX - ((v = p.value) == null ? void 0 : v.left), D = i.clientY - ((d = p.value) == null ? void 0 : d.top);
+        t("onDragScroll", { x: k, y: D });
+      }
+    }
+    function h(i) {
+      i.button === 0 && (i.target.setPointerCapture(i.pointerId), p.value = u.value.getBoundingClientRect(), f.value = document.body.style.webkitUserSelect, document.body.style.webkitUserSelect = "none", n.viewport && (n.viewport.value.style.scrollBehavior = "auto"), y(i));
+    }
+    function E(i) {
+      y(i);
+    }
+    function T(i) {
+      const v = i.target;
+      v.hasPointerCapture(i.pointerId) && v.releasePointerCapture(i.pointerId), document.body.style.webkitUserSelect = f.value, n.viewport && (n.viewport.value.style.scrollBehavior = ""), p.value = void 0;
+    }
+    function A(i) {
+      var D;
+      const v = i.target, d = (D = u.value) == null ? void 0 : D.contains(v), k = a.sizes.value.content - a.sizes.value.viewport;
+      d && a.handleWheelScroll(i, k);
+    }
+    B(() => {
+      document.addEventListener("wheel", A, { passive: !1 });
+    }), X(() => {
+      document.removeEventListener("wheel", A);
+    });
+    function L() {
+      var i, v, d, k, D;
+      u.value && (l.isHorizontal ? a.handleSizeChange({
+        content: ((i = n.viewport.value) == null ? void 0 : i.scrollWidth) ?? 0,
+        viewport: ((v = n.viewport.value) == null ? void 0 : v.offsetWidth) ?? 0,
+        scrollbar: {
+          size: u.value.clientWidth ?? 0,
+          paddingStart: O(getComputedStyle(u.value).paddingLeft),
+          paddingEnd: O(getComputedStyle(u.value).paddingRight)
+        }
+      }) : a.handleSizeChange({
+        content: ((d = n.viewport.value) == null ? void 0 : d.scrollHeight) ?? 0,
+        viewport: ((k = n.viewport.value) == null ? void 0 : k.offsetHeight) ?? 0,
+        scrollbar: {
+          size: ((D = u.value) == null ? void 0 : D.clientHeight) ?? 0,
+          paddingStart: O(getComputedStyle(u.value).paddingLeft),
+          paddingEnd: O(getComputedStyle(u.value).paddingRight)
+        }
+      }));
+    }
+    return H(u, L), H(n.content, L), (i, v) => (S(), g(r(z), {
+      ref: r(o),
+      style: { position: "absolute" },
+      "data-scrollbarimpl": "",
+      as: r(c).as.value,
+      "as-child": r(c).asChild.value,
+      onPointerdown: h,
+      onPointermove: E,
+      onPointerup: T
+    }, {
+      default: m(() => [
+        w(i.$slots, "default")
+      ]),
+      _: 3
+    }, 8, ["as", "as-child"]));
+  }
+}), we = /* @__PURE__ */ C({
+  __name: "ScrollAreaScrollbarX",
+  setup(s) {
+    const e = $(), l = V(), { forwardRef: t, currentElement: n } = P();
+    B(() => {
+      n.value && e.onScrollbarXChange(n.value);
+    });
+    const a = R(() => l.sizes.value);
+    return (c, o) => (S(), g(re, {
+      ref: r(t),
+      "is-horizontal": !0,
+      "data-orientation": "horizontal",
+      style: W({
+        bottom: 0,
+        left: r(e).dir.value === "rtl" ? "var(--reka-scroll-area-corner-width)" : 0,
+        right: r(e).dir.value === "ltr" ? "var(--reka-scroll-area-corner-width)" : 0,
+        "--reka-scroll-area-thumb-width": a.value ? `${r(Y)(a.value)}px` : void 0
+      }),
+      onOnDragScroll: o[0] || (o[0] = (u) => r(l).onDragScroll(u.x))
+    }, {
+      default: m(() => [
+        w(c.$slots, "default")
+      ]),
+      _: 3
+    }, 8, ["style"]));
+  }
+}), Ce = /* @__PURE__ */ C({
+  __name: "ScrollAreaScrollbarY",
+  setup(s) {
+    const e = $(), l = V(), { forwardRef: t, currentElement: n } = P();
+    B(() => {
+      n.value && e.onScrollbarYChange(n.value);
+    });
+    const a = R(() => l.sizes.value);
+    return (c, o) => (S(), g(re, {
+      ref: r(t),
+      "is-horizontal": !1,
+      "data-orientation": "vertical",
+      style: W({
+        top: 0,
+        right: r(e).dir.value === "ltr" ? 0 : void 0,
+        left: r(e).dir.value === "rtl" ? 0 : void 0,
+        bottom: "var(--reka-scroll-area-corner-height)",
+        "--reka-scroll-area-thumb-height": a.value ? `${r(Y)(a.value)}px` : void 0
+      }),
+      onOnDragScroll: o[0] || (o[0] = (u) => r(l).onDragScroll(u.y))
+    }, {
+      default: m(() => [
+        w(c.$slots, "default")
+      ]),
+      _: 3
+    }, 8, ["style"]));
+  }
+}), [V, _e] = F("ScrollAreaScrollbarVisible"), q = /* @__PURE__ */ C({
+  __name: "ScrollAreaScrollbarVisible",
+  setup(s) {
+    const e = $(), l = N(), { forwardRef: t } = P(), n = b({
+      content: 0,
+      viewport: 0,
+      scrollbar: { size: 0, paddingStart: 0, paddingEnd: 0 }
+    }), a = R(() => {
+      const i = oe(n.value.viewport, n.value.content);
+      return i > 0 && i < 1;
+    }), c = b(), o = b(0);
+    function u(i, v) {
+      if (E.value) {
+        const d = e.viewport.value.scrollLeft + i.deltaY;
+        e.viewport.value.scrollLeft = d, K(d, v) && i.preventDefault();
+      } else {
+        const d = e.viewport.value.scrollTop + i.deltaY;
+        e.viewport.value.scrollTop = d, K(d, v) && i.preventDefault();
+      }
+    }
+    function f(i, v) {
+      E.value ? o.value = v.x : o.value = v.y;
+    }
+    function p(i) {
+      o.value = 0;
+    }
+    function y(i) {
+      n.value = i;
+    }
+    function h(i, v) {
+      return ge(
+        i,
+        o.value,
+        n.value,
+        v
+      );
+    }
+    const E = R(
+      () => l.isHorizontal.value
+    );
+    function T(i) {
+      E.value ? e.viewport.value.scrollLeft = h(
+        i,
+        e.dir.value
+      ) : e.viewport.value.scrollTop = h(i);
+    }
+    function A() {
+      if (E.value) {
+        if (e.viewport.value && c.value) {
+          const i = e.viewport.value.scrollLeft, v = J(
+            i,
+            n.value,
+            e.dir.value
+          );
+          c.value.style.transform = `translate3d(${v}px, 0, 0)`;
+        }
+      } else if (e.viewport.value && c.value) {
+        const i = e.viewport.value.scrollTop, v = J(i, n.value);
+        c.value.style.transform = `translate3d(0, ${v}px, 0)`;
+      }
+    }
+    function L(i) {
+      c.value = i;
+    }
+    return _e({
+      sizes: n,
+      hasThumb: a,
+      handleWheelScroll: u,
+      handleThumbDown: f,
+      handleThumbUp: p,
+      handleSizeChange: y,
+      onThumbPositionChange: A,
+      onThumbChange: L,
+      onDragScroll: T
+    }), (i, v) => E.value ? (S(), g(we, _({ key: 0 }, i.$attrs, { ref: r(t) }), {
+      default: m(() => [
+        w(i.$slots, "default")
+      ]),
+      _: 3
+    }, 16)) : (S(), g(Ce, _({ key: 1 }, i.$attrs, { ref: r(t) }), {
+      default: m(() => [
+        w(i.$slots, "default")
+      ]),
+      _: 3
+    }, 16));
+  }
+}), le = /* @__PURE__ */ C({
+  __name: "ScrollAreaScrollbarAuto",
+  props: {
+    forceMount: { type: Boolean }
+  },
+  setup(s) {
+    const e = $(), l = N(), { forwardRef: t } = P(), n = b(!1), a = Z(() => {
+      if (e.viewport.value) {
+        const c = e.viewport.value.offsetWidth < e.viewport.value.scrollWidth, o = e.viewport.value.offsetHeight < e.viewport.value.scrollHeight;
+        n.value = l.isHorizontal.value ? c : o;
+      }
+    }, 10);
+    return B(() => a()), H(e.viewport, a), H(e.content, a), (c, o) => (S(), g(r(j), {
+      present: c.forceMount || n.value
+    }, {
+      default: m(() => [
+        x(q, _(c.$attrs, {
+          ref: r(t),
+          "data-state": n.value ? "visible" : "hidden"
+        }), {
+          default: m(() => [
+            w(c.$slots, "default")
+          ]),
+          _: 3
+        }, 16, ["data-state"])
+      ]),
+      _: 3
+    }, 8, ["present"]));
+  }
+}), ye = /* @__PURE__ */ C({
+  inheritAttrs: !1,
+  __name: "ScrollAreaScrollbarHover",
+  props: {
+    forceMount: { type: Boolean }
+  },
+  setup(s) {
+    const e = $(), { forwardRef: l } = P();
+    let t;
+    const n = b(!1);
+    function a() {
+      window.clearTimeout(t), n.value = !0;
+    }
+    function c() {
+      t = window.setTimeout(() => {
+        n.value = !1;
+      }, e.scrollHideDelay.value);
+    }
+    return B(() => {
+      const o = e.scrollArea.value;
+      o && (o.addEventListener("pointerenter", a), o.addEventListener("pointerleave", c));
+    }), X(() => {
+      const o = e.scrollArea.value;
+      o && (window.clearTimeout(t), o.removeEventListener("pointerenter", a), o.removeEventListener("pointerleave", c));
+    }), (o, u) => (S(), g(r(j), {
+      present: o.forceMount || n.value
+    }, {
+      default: m(() => [
+        x(le, _(o.$attrs, {
+          ref: r(l),
+          "data-state": n.value ? "visible" : "hidden"
+        }), {
+          default: m(() => [
+            w(o.$slots, "default")
+          ]),
+          _: 3
+        }, 16, ["data-state"])
+      ]),
+      _: 3
+    }, 8, ["present"]));
+  }
+}), Ee = /* @__PURE__ */ C({
+  __name: "ScrollAreaScrollbarScroll",
+  props: {
+    forceMount: { type: Boolean }
+  },
+  setup(s) {
+    const e = $(), l = N(), { forwardRef: t } = P(), { state: n, dispatch: a } = fe("hidden", {
+      hidden: {
+        SCROLL: "scrolling"
+      },
+      scrolling: {
+        SCROLL_END: "idle",
+        POINTER_ENTER: "interacting"
+      },
+      interacting: {
+        SCROLL: "interacting",
+        POINTER_LEAVE: "idle"
+      },
+      idle: {
+        HIDE: "hidden",
+        SCROLL: "scrolling",
+        POINTER_ENTER: "interacting"
+      }
+    });
+    G((o) => {
+      if (n.value === "idle") {
+        const u = window.setTimeout(
+          () => a("HIDE"),
+          e.scrollHideDelay.value
+        );
+        o(() => {
+          window.clearTimeout(u);
+        });
+      }
+    });
+    const c = Z(() => a("SCROLL_END"), 100);
+    return G((o) => {
+      const u = e.viewport.value, f = l.isHorizontal.value ? "scrollLeft" : "scrollTop";
+      if (u) {
+        let p = u[f];
+        const y = () => {
+          const h = u[f];
+          p !== h && (a("SCROLL"), c()), p = h;
+        };
+        u.addEventListener("scroll", y), o(() => {
+          u.removeEventListener("scroll", y);
+        });
+      }
+    }), (o, u) => (S(), g(r(j), {
+      present: o.forceMount || r(n) !== "hidden"
+    }, {
+      default: m(() => [
+        x(q, _(o.$attrs, { ref: r(t) }), {
+          default: m(() => [
+            w(o.$slots, "default")
+          ]),
+          _: 3
+        }, 16)
+      ]),
+      _: 3
+    }, 8, ["present"]));
+  }
+}), [N, Pe] = F("ScrollAreaScrollbar"), $e = /* @__PURE__ */ C({
+  inheritAttrs: !1,
+  __name: "ScrollAreaScrollbar",
+  props: {
+    orientation: { default: "vertical" },
+    forceMount: { type: Boolean },
+    asChild: { type: Boolean },
+    as: { default: "div" }
+  },
+  setup(s) {
+    const e = s, { forwardRef: l } = P(), t = $(), n = R(() => e.orientation === "horizontal");
+    I(
+      n,
+      () => {
+        n.value ? t.onScrollbarXEnabledChange(!0) : t.onScrollbarYEnabledChange(!0);
+      },
+      { immediate: !0 }
+    ), X(() => {
+      t.onScrollbarXEnabledChange(!1), t.onScrollbarYEnabledChange(!1);
+    });
+    const { orientation: a, forceMount: c, asChild: o, as: u } = M(e);
+    return Pe({
+      orientation: a,
+      forceMount: c,
+      isHorizontal: n,
+      as: u,
+      asChild: o
+    }), (f, p) => r(t).type.value === "hover" ? (S(), g(ye, _({ key: 0 }, f.$attrs, {
+      ref: r(l),
+      "force-mount": r(c)
+    }), {
+      default: m(() => [
+        w(f.$slots, "default")
+      ]),
+      _: 3
+    }, 16, ["force-mount"])) : r(t).type.value === "scroll" ? (S(), g(Ee, _({ key: 1 }, f.$attrs, {
+      ref: r(l),
+      "force-mount": r(c)
+    }), {
+      default: m(() => [
+        w(f.$slots, "default")
+      ]),
+      _: 3
+    }, 16, ["force-mount"])) : r(t).type.value === "auto" ? (S(), g(le, _({ key: 2 }, f.$attrs, {
+      ref: r(l),
+      "force-mount": r(c)
+    }), {
+      default: m(() => [
+        w(f.$slots, "default")
+      ]),
+      _: 3
+    }, 16, ["force-mount"])) : r(t).type.value === "always" ? (S(), g(q, _({ key: 3 }, f.$attrs, {
+      ref: r(l),
+      "data-state": "visible"
+    }), {
+      default: m(() => [
+        w(f.$slots, "default")
+      ]),
+      _: 3
+    }, 16)) : U("", !0);
+  }
+}), Re = /* @__PURE__ */ C({
+  __name: "ScrollAreaThumb",
+  props: {
+    asChild: { type: Boolean },
+    as: {}
+  },
+  setup(s) {
+    const e = s, l = $(), t = V();
+    function n(h) {
+      const T = h.target.getBoundingClientRect(), A = h.clientX - T.left, L = h.clientY - T.top;
+      t.handleThumbDown(h, { x: A, y: L });
+    }
+    function a(h) {
+      t.handleThumbUp(h);
+    }
+    const { forwardRef: c, currentElement: o } = P(), u = b(), f = R(() => l.viewport.value);
+    function p() {
+      if (!u.value) {
+        const h = Se(
+          f.value,
+          t.onThumbPositionChange
+        );
+        u.value = h, t.onThumbPositionChange();
+      }
+    }
+    const y = R(() => t.sizes.value);
+    return ie(y, () => {
+      t.onThumbChange(o.value), f.value && (t.onThumbPositionChange(), f.value.addEventListener("scroll", p));
+    }), X(() => {
+      var h;
+      f.value.removeEventListener("scroll", p), (h = l.viewport.value) == null || h.removeEventListener("scroll", p);
+    }), (h, E) => (S(), g(r(z), {
+      ref: r(c),
+      "data-state": r(t).hasThumb ? "visible" : "hidden",
+      style: {
+        width: "var(--reka-scroll-area-thumb-width)",
+        height: "var(--reka-scroll-area-thumb-height)"
+      },
+      "as-child": e.asChild,
+      as: h.as,
+      onPointerdown: n,
+      onPointerup: a
+    }, {
+      default: m(() => [
+        w(h.$slots, "default")
+      ]),
+      _: 3
+    }, 8, ["data-state", "as-child", "as"]));
+  }
+}), Te = /* @__PURE__ */ C({
+  inheritAttrs: !1,
+  __name: "ScrollAreaViewport",
+  props: {
+    nonce: {},
+    asChild: { type: Boolean },
+    as: {}
+  },
+  setup(s, { expose: e }) {
+    const l = s, { nonce: t } = M(l), n = ve(t), a = $(), c = b();
+    B(() => {
+      a.onViewportChange(c.value), a.onContentChange(u.value);
+    }), e({
+      viewportElement: c
+    });
+    const { forwardRef: o, currentElement: u } = P();
+    return (f, p) => (S(), ne(ae, null, [
+      se("div", _({
+        ref_key: "viewportElement",
+        ref: c,
+        "data-reka-scroll-area-viewport": "",
+        style: {
+          /**
+           * We don't support `visible` because the intention is to have at least one scrollbar
+           * if this component is used and `visible` will behave like `auto` in that case
+           * https://developer.mozilla.org/en-US/docs/Web/CSS/overflowed#description
+           *
+           * We don't handle `auto` because the intention is for the native implementation
+           * to be hidden if using this component. We just want to ensure the node is scrollable
+           * so could have used either `scroll` or `auto` here. We picked `scroll` to prevent
+           * the browser from having to work out whether to render native scrollbars or not,
+           * we tell it to with the intention of hiding them in CSS.
+           */
+          overflowX: r(a).scrollbarXEnabled.value ? "scroll" : "hidden",
+          overflowY: r(a).scrollbarYEnabled.value ? "scroll" : "hidden"
+        }
+      }, f.$attrs, { tabindex: 0 }), [
+        x(r(z), {
+          ref: r(o),
+          style: W({
+            /**
+             * When horizontal scrollbar is visible: this element should be at least
+             * as wide as its children for size calculations to work correctly.
+             *
+             * When horizontal scrollbar is NOT visible: this element's width should
+             * be constrained by the parent container to enable `text-overflow: ellipsis`
+             */
+            minWidth: r(a).scrollbarXEnabled.value ? "fit-content" : void 0
+          }),
+          "as-child": l.asChild,
+          as: f.as
+        }, {
+          default: m(() => [
+            w(f.$slots, "default")
+          ]),
+          _: 3
+        }, 8, ["style", "as-child", "as"])
+      ], 16),
+      x(r(z), {
+        as: "style",
+        nonce: r(n)
+      }, {
+        default: m(() => p[0] || (p[0] = [
+          ce(" /* Hide scrollbars cross-browser and enable momentum scroll for touch devices */ [data-reka-scroll-area-viewport] { scrollbar-width:none; -ms-overflow-style:none; -webkit-overflow-scrolling:touch; } [data-reka-scroll-area-viewport]::-webkit-scrollbar { display:none; } ")
+        ])),
+        _: 1
+      }, 8, ["nonce"])
+    ], 64));
+  }
+}), xe = /* @__PURE__ */ C({
+  __name: "ScrollBar",
+  props: {
+    orientation: { default: "vertical" },
+    forceMount: { type: Boolean },
+    asChild: { type: Boolean },
+    as: {},
+    class: {}
+  },
+  setup(s) {
+    const e = s, l = ee(e, "class");
+    return (t, n) => (S(), g(r($e), _(r(l), {
+      class: r(Q)(
+        "flex touch-none select-none transition-colors",
+        t.orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-px",
+        t.orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-px",
+        e.class
+      )
+    }), {
+      default: m(() => [
+        x(r(Re), { class: "relative flex-1 rounded-full bg-border" })
+      ]),
+      _: 1
+    }, 16, ["class"]));
+  }
+}), Ve = /* @__PURE__ */ C({
+  __name: "ScrollArea",
+  props: {
+    type: {},
+    dir: {},
+    scrollHideDelay: {},
+    asChild: { type: Boolean },
+    as: { type: [String, Object, Function] },
+    class: {}
+  },
+  setup(s) {
+    const e = s, l = ee(e, "class");
+    return (t, n) => (S(), g(r(he), _(r(l), {
+      class: r(Q)("relative overflow-hidden", e.class)
+    }), {
+      default: m(() => [
+        x(r(Te), { class: "h-full w-full rounded-[inherit]" }, {
+          default: m(() => [
+            w(t.$slots, "default")
+          ]),
+          _: 3
+        }),
+        x(xe),
+        x(r(be))
+      ]),
+      _: 3
+    }, 16, ["class"]));
+  }
+});
+export {
+  Ve as ScrollArea,
+  xe as ScrollBar
+};