@brumaombra/ui-vintage 0.6.8 → 0.7.3

package/dist/scroll-area.js

@@ -1,1080 +0,0 @@
-import { defineComponent, ref, toRefs, openBlock, createBlock, unref, normalizeStyle, withCtx, renderSlot, computed, watch, mergeProps, createCommentVNode, onMounted, createVNode, watchEffect, onUnmounted, createElementBlock, Fragment, createElementVNode, createTextVNode } from "vue";
-import { c as createContext } from "./createContext-BabAT1K8.js";
-import { u as useDirection } from "./useDirection-B2bMgzzV.js";
-import { u as useForwardExpose } from "./useForwardExpose-BcX3VRdS.js";
-import { P as Primitive } from "./Primitive-D3IcFg81.js";
-import { e as useResizeObserver } from "./index-Dw56kNV0.js";
-import { u as useNonce } from "./useNonce-CWj1JlPB.js";
-import { c as cn } from "./utils-DbYZ4xaD.js";
-import { c as clamp } from "./clamp-D5Ye0kJT.js";
-import { P as Presence_default, u as useStateMachine } from "./Presence-CTmUEdMR.js";
-import { q as useDebounceFn, s as watchOnce, r as reactiveOmit } from "./index-DDJjWaIl.js";
-const [injectScrollAreaRootContext, provideScrollAreaRootContext] = createContext("ScrollAreaRoot");
-var ScrollAreaRoot_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
-  __name: "ScrollAreaRoot",
-  props: {
-    type: {
-      type: String,
-      required: false,
-      default: "hover"
-    },
-    dir: {
-      type: String,
-      required: false
-    },
-    scrollHideDelay: {
-      type: Number,
-      required: false,
-      default: 600
-    },
-    asChild: {
-      type: Boolean,
-      required: false
-    },
-    as: {
-      type: null,
-      required: false
-    }
-  },
-  setup(__props, { expose: __expose }) {
-    const props = __props;
-    const cornerWidth = ref(0);
-    const cornerHeight = ref(0);
-    const viewport = ref();
-    const content = ref();
-    const scrollbarX = ref();
-    const scrollbarY = ref();
-    const scrollbarXEnabled = ref(false);
-    const scrollbarYEnabled = ref(false);
-    const { type, dir: propDir, scrollHideDelay } = toRefs(props);
-    const dir = useDirection(propDir);
-    function scrollTop() {
-      var _a;
-      (_a = viewport.value) == null ? void 0 : _a.scrollTo({ top: 0 });
-    }
-    function scrollTopLeft() {
-      var _a;
-      (_a = viewport.value) == null ? void 0 : _a.scrollTo({
-        top: 0,
-        left: 0
-      });
-    }
-    __expose({
-      viewport,
-      scrollTop,
-      scrollTopLeft
-    });
-    const { forwardRef, currentElement: scrollArea } = useForwardExpose();
-    provideScrollAreaRootContext({
-      type,
-      dir,
-      scrollHideDelay,
-      scrollArea,
-      viewport,
-      onViewportChange: (el) => {
-        viewport.value = el || void 0;
-      },
-      content,
-      onContentChange: (el) => {
-        content.value = el;
-      },
-      scrollbarX,
-      scrollbarXEnabled,
-      scrollbarY,
-      scrollbarYEnabled,
-      onScrollbarXChange: (scrollbar) => {
-        scrollbarX.value = scrollbar || void 0;
-      },
-      onScrollbarYChange: (scrollbar) => {
-        scrollbarY.value = scrollbar || void 0;
-      },
-      onScrollbarXEnabledChange: (rendered) => {
-        scrollbarXEnabled.value = rendered;
-      },
-      onScrollbarYEnabledChange: (rendered) => {
-        scrollbarYEnabled.value = rendered;
-      },
-      onCornerWidthChange: (width) => {
-        cornerWidth.value = width;
-      },
-      onCornerHeightChange: (height) => {
-        cornerHeight.value = height;
-      }
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(Primitive), {
-        ref: unref(forwardRef),
-        "as-child": props.asChild,
-        as: _ctx.as,
-        dir: unref(dir),
-        style: normalizeStyle({
-          position: "relative",
-          ["--reka-scroll-area-corner-width"]: `${cornerWidth.value}px`,
-          ["--reka-scroll-area-corner-height"]: `${cornerHeight.value}px`
-        })
-      }, {
-        default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
-        _: 3
-      }, 8, [
-        "as-child",
-        "as",
-        "dir",
-        "style"
-      ]);
-    };
-  }
-});
-var ScrollAreaRoot_default = ScrollAreaRoot_vue_vue_type_script_setup_true_lang_default;
-var ScrollAreaCornerImpl_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
-  __name: "ScrollAreaCornerImpl",
-  setup(__props) {
-    const rootContext = injectScrollAreaRootContext();
-    const width = ref(0);
-    const height = ref(0);
-    const hasSize = computed(() => !!width.value && !!height.value);
-    function setCornerHeight() {
-      var _a;
-      const offsetHeight = ((_a = rootContext.scrollbarX.value) == null ? void 0 : _a.offsetHeight) || 0;
-      rootContext.onCornerHeightChange(offsetHeight);
-      height.value = offsetHeight;
-    }
-    function setCornerWidth() {
-      var _a;
-      const offsetWidth = ((_a = rootContext.scrollbarY.value) == null ? void 0 : _a.offsetWidth) || 0;
-      rootContext.onCornerWidthChange(offsetWidth);
-      width.value = offsetWidth;
-    }
-    useResizeObserver(rootContext.scrollbarX.value, setCornerHeight);
-    useResizeObserver(rootContext.scrollbarY.value, setCornerWidth);
-    watch(() => rootContext.scrollbarX.value, setCornerHeight);
-    watch(() => rootContext.scrollbarY.value, setCornerWidth);
-    return (_ctx, _cache) => {
-      var _a;
-      return hasSize.value ? (openBlock(), createBlock(unref(Primitive), mergeProps({
-        key: 0,
-        style: {
-          width: `${width.value}px`,
-          height: `${height.value}px`,
-          position: "absolute",
-          right: unref(rootContext).dir.value === "ltr" ? 0 : void 0,
-          left: unref(rootContext).dir.value === "rtl" ? 0 : void 0,
-          bottom: 0
-        }
-      }, (_a = _ctx.$parent) == null ? void 0 : _a.$props), {
-        default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
-        _: 3
-      }, 16, ["style"])) : createCommentVNode("v-if", true);
-    };
-  }
-});
-var ScrollAreaCornerImpl_default = ScrollAreaCornerImpl_vue_vue_type_script_setup_true_lang_default;
-var ScrollAreaCorner_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
-  __name: "ScrollAreaCorner",
-  props: {
-    asChild: {
-      type: Boolean,
-      required: false
-    },
-    as: {
-      type: null,
-      required: false
-    }
-  },
-  setup(__props) {
-    const props = __props;
-    const { forwardRef } = useForwardExpose();
-    const rootContext = injectScrollAreaRootContext();
-    const hasBothScrollbarsVisible = computed(() => !!rootContext.scrollbarX.value && !!rootContext.scrollbarY.value);
-    const hasCorner = computed(() => rootContext.type.value !== "scroll" && hasBothScrollbarsVisible.value);
-    return (_ctx, _cache) => {
-      return hasCorner.value ? (openBlock(), createBlock(ScrollAreaCornerImpl_default, mergeProps({ key: 0 }, props, { ref: unref(forwardRef) }), {
-        default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
-        _: 3
-      }, 16)) : createCommentVNode("v-if", true);
-    };
-  }
-});
-var ScrollAreaCorner_default = ScrollAreaCorner_vue_vue_type_script_setup_true_lang_default;
-function linearScale(input, output) {
-  return (value) => {
-    if (input[0] === input[1] || output[0] === output[1]) return output[0];
-    const ratio = (output[1] - output[0]) / (input[1] - input[0]);
-    return output[0] + ratio * (value - input[0]);
-  };
-}
-function getThumbSize(sizes) {
-  const ratio = getThumbRatio(sizes.viewport, sizes.content);
-  const scrollbarPadding = sizes.scrollbar.paddingStart + sizes.scrollbar.paddingEnd;
-  const thumbSize = (sizes.scrollbar.size - scrollbarPadding) * ratio;
-  return Math.max(thumbSize, 18);
-}
-function getThumbRatio(viewportSize, contentSize) {
-  const ratio = viewportSize / contentSize;
-  return Number.isNaN(ratio) ? 0 : ratio;
-}
-function addUnlinkedScrollListener(node, handler = () => {
-}) {
-  let prevPosition = {
-    left: node.scrollLeft,
-    top: node.scrollTop
-  };
-  let rAF = 0;
-  (function loop() {
-    const position = {
-      left: node.scrollLeft,
-      top: node.scrollTop
-    };
-    const isHorizontalScroll = prevPosition.left !== position.left;
-    const isVerticalScroll = prevPosition.top !== position.top;
-    if (isHorizontalScroll || isVerticalScroll) handler();
-    prevPosition = position;
-    rAF = window.requestAnimationFrame(loop);
-  })();
-  return () => window.cancelAnimationFrame(rAF);
-}
-function getThumbOffsetFromScroll(scrollPos, sizes, dir = "ltr") {
-  const thumbSizePx = getThumbSize(sizes);
-  const scrollbarPadding = sizes.scrollbar.paddingStart + sizes.scrollbar.paddingEnd;
-  const scrollbar = sizes.scrollbar.size - scrollbarPadding;
-  const maxScrollPos = sizes.content - sizes.viewport;
-  const maxThumbPos = scrollbar - thumbSizePx;
-  const scrollClampRange = dir === "ltr" ? [0, maxScrollPos] : [maxScrollPos * -1, 0];
-  const scrollWithoutMomentum = clamp(scrollPos, scrollClampRange[0], scrollClampRange[1]);
-  const interpolate = linearScale([0, maxScrollPos], [0, maxThumbPos]);
-  return interpolate(scrollWithoutMomentum);
-}
-function toInt(value) {
-  return value ? Number.parseInt(value, 10) : 0;
-}
-function getScrollPositionFromPointer(pointerPos, pointerOffset, sizes, dir = "ltr") {
-  const thumbSizePx = getThumbSize(sizes);
-  const thumbCenter = thumbSizePx / 2;
-  const offset = pointerOffset || thumbCenter;
-  const thumbOffsetFromEnd = thumbSizePx - offset;
-  const minPointerPos = sizes.scrollbar.paddingStart + offset;
-  const maxPointerPos = sizes.scrollbar.size - sizes.scrollbar.paddingEnd - thumbOffsetFromEnd;
-  const maxScrollPos = sizes.content - sizes.viewport;
-  const scrollRange = dir === "ltr" ? [0, maxScrollPos] : [maxScrollPos * -1, 0];
-  const interpolate = linearScale([minPointerPos, maxPointerPos], scrollRange);
-  return interpolate(pointerPos);
-}
-function isScrollingWithinScrollbarBounds(scrollPos, maxScrollPos) {
-  return scrollPos > 0 && scrollPos < maxScrollPos;
-}
-var ScrollAreaScrollbarX_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
-  __name: "ScrollAreaScrollbarX",
-  setup(__props) {
-    const rootContext = injectScrollAreaRootContext();
-    const scrollbarVisibleContext = injectScrollAreaScrollbarVisibleContext();
-    const { forwardRef, currentElement: scrollbarElement } = useForwardExpose();
-    onMounted(() => {
-      if (scrollbarElement.value) rootContext.onScrollbarXChange(scrollbarElement.value);
-    });
-    const sizes = computed(() => scrollbarVisibleContext.sizes.value);
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(ScrollAreaScrollbarImpl_default, {
-        ref: unref(forwardRef),
-        "is-horizontal": true,
-        "data-orientation": "horizontal",
-        style: normalizeStyle({
-          bottom: 0,
-          left: unref(rootContext).dir.value === "rtl" ? "var(--reka-scroll-area-corner-width)" : 0,
-          right: unref(rootContext).dir.value === "ltr" ? "var(--reka-scroll-area-corner-width)" : 0,
-          ["--reka-scroll-area-thumb-width"]: sizes.value ? `${unref(getThumbSize)(sizes.value)}px` : void 0
-        }),
-        onOnDragScroll: _cache[0] || (_cache[0] = ($event) => unref(scrollbarVisibleContext).onDragScroll($event.x))
-      }, {
-        default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
-        _: 3
-      }, 8, ["style"]);
-    };
-  }
-});
-var ScrollAreaScrollbarX_default = ScrollAreaScrollbarX_vue_vue_type_script_setup_true_lang_default;
-var ScrollAreaScrollbarY_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
-  __name: "ScrollAreaScrollbarY",
-  setup(__props) {
-    const rootContext = injectScrollAreaRootContext();
-    const scrollbarVisibleContext = injectScrollAreaScrollbarVisibleContext();
-    const { forwardRef, currentElement: scrollbarElement } = useForwardExpose();
-    onMounted(() => {
-      if (scrollbarElement.value) rootContext.onScrollbarYChange(scrollbarElement.value);
-    });
-    const sizes = computed(() => scrollbarVisibleContext.sizes.value);
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(ScrollAreaScrollbarImpl_default, {
-        ref: unref(forwardRef),
-        "is-horizontal": false,
-        "data-orientation": "vertical",
-        style: normalizeStyle({
-          top: 0,
-          right: unref(rootContext).dir.value === "ltr" ? 0 : void 0,
-          left: unref(rootContext).dir.value === "rtl" ? 0 : void 0,
-          bottom: "var(--reka-scroll-area-corner-height)",
-          ["--reka-scroll-area-thumb-height"]: sizes.value ? `${unref(getThumbSize)(sizes.value)}px` : void 0
-        }),
-        onOnDragScroll: _cache[0] || (_cache[0] = ($event) => unref(scrollbarVisibleContext).onDragScroll($event.y))
-      }, {
-        default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
-        _: 3
-      }, 8, ["style"]);
-    };
-  }
-});
-var ScrollAreaScrollbarY_default = ScrollAreaScrollbarY_vue_vue_type_script_setup_true_lang_default;
-var ScrollAreaScrollbarAuto_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
-  __name: "ScrollAreaScrollbarAuto",
-  props: { forceMount: {
-    type: Boolean,
-    required: false
-  } },
-  setup(__props) {
-    const rootContext = injectScrollAreaRootContext();
-    const scrollbarContext = injectScrollAreaScrollbarContext();
-    const { forwardRef } = useForwardExpose();
-    const visible = ref(false);
-    const handleResize = useDebounceFn(() => {
-      if (rootContext.viewport.value) {
-        const isOverflowX = rootContext.viewport.value.offsetWidth < rootContext.viewport.value.scrollWidth;
-        const isOverflowY = rootContext.viewport.value.offsetHeight < rootContext.viewport.value.scrollHeight;
-        visible.value = scrollbarContext.isHorizontal.value ? isOverflowX : isOverflowY;
-      }
-    }, 10);
-    onMounted(() => handleResize());
-    useResizeObserver(rootContext.viewport, handleResize);
-    useResizeObserver(rootContext.content, handleResize);
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(Presence_default), { present: _ctx.forceMount || visible.value }, {
-        default: withCtx(() => [createVNode(ScrollAreaScrollbarVisible_default, mergeProps(_ctx.$attrs, {
-          ref: unref(forwardRef),
-          "data-state": visible.value ? "visible" : "hidden"
-        }), {
-          default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
-          _: 3
-        }, 16, ["data-state"])]),
-        _: 3
-      }, 8, ["present"]);
-    };
-  }
-});
-var ScrollAreaScrollbarAuto_default = ScrollAreaScrollbarAuto_vue_vue_type_script_setup_true_lang_default;
-var ScrollAreaScrollbarGlimpse_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
-  inheritAttrs: false,
-  __name: "ScrollAreaScrollbarGlimpse",
-  props: { forceMount: {
-    type: Boolean,
-    required: false
-  } },
-  setup(__props) {
-    const rootContext = injectScrollAreaRootContext();
-    const scrollbarContext = injectScrollAreaScrollbarContext();
-    const { forwardRef } = useForwardExpose();
-    const { state, dispatch } = useStateMachine("hidden", {
-      hidden: {
-        POINTER_ENTER: "glimpse",
-        SCROLL: "scrolling"
-      },
-      glimpse: {
-        HIDE: "hidden",
-        POINTER_LEAVE: "hidden",
-        SCROLL: "scrolling",
-        POINTER_ENTER: "glimpse"
-      },
-      scrolling: {
-        SCROLL_END: "idle",
-        POINTER_ENTER: "interacting"
-      },
-      interacting: {
-        SCROLL: "interacting",
-        POINTER_LEAVE: "idle"
-      },
-      idle: {
-        HIDE: "hidden",
-        SCROLL: "scrolling",
-        POINTER_ENTER: "interacting"
-      }
-    });
-    const visible = computed(() => state.value !== "hidden");
-    function handlePointerEnter() {
-      dispatch("POINTER_ENTER");
-    }
-    function handlePointerLeave() {
-      dispatch("POINTER_LEAVE");
-    }
-    const debounceScrollEnd = useDebounceFn(() => dispatch("SCROLL_END"), 100);
-    watchEffect((onCleanup) => {
-      if (state.value === "glimpse") {
-        const timeId = window.setTimeout(() => dispatch("HIDE"), rootContext.scrollHideDelay.value);
-        onCleanup(() => {
-          window.clearTimeout(timeId);
-        });
-      }
-    });
-    watchEffect((onCleanup) => {
-      if (state.value === "idle") {
-        const timeId = window.setTimeout(() => dispatch("HIDE"), rootContext.scrollHideDelay.value);
-        onCleanup(() => {
-          window.clearTimeout(timeId);
-        });
-      }
-    });
-    watchEffect((onCleanup) => {
-      const viewport = rootContext.viewport.value;
-      const scrollDirection = scrollbarContext.isHorizontal.value ? "scrollLeft" : "scrollTop";
-      if (viewport) {
-        let prevScrollPos = viewport[scrollDirection];
-        const handleScroll = () => {
-          const scrollPos = viewport[scrollDirection];
-          const hasScrollInDirectionChanged = prevScrollPos !== scrollPos;
-          if (hasScrollInDirectionChanged) {
-            dispatch("SCROLL");
-            debounceScrollEnd();
-          }
-          prevScrollPos = scrollPos;
-        };
-        viewport.addEventListener("scroll", handleScroll);
-        onCleanup(() => {
-          viewport.removeEventListener("scroll", handleScroll);
-        });
-      }
-    });
-    onMounted(() => {
-      const scrollArea = rootContext.scrollArea.value;
-      if (scrollArea) {
-        scrollArea.addEventListener("pointerenter", handlePointerEnter);
-        scrollArea.addEventListener("pointerleave", handlePointerLeave);
-      }
-    });
-    onUnmounted(() => {
-      const scrollArea = rootContext.scrollArea.value;
-      if (scrollArea) {
-        scrollArea.removeEventListener("pointerenter", handlePointerEnter);
-        scrollArea.removeEventListener("pointerleave", handlePointerLeave);
-      }
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(Presence_default), { present: _ctx.forceMount || visible.value }, {
-        default: withCtx(() => [createVNode(ScrollAreaScrollbarAuto_default, mergeProps(_ctx.$attrs, {
-          ref: unref(forwardRef),
-          "data-state": visible.value ? "visible" : "hidden"
-        }), {
-          default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
-          _: 3
-        }, 16, ["data-state"])]),
-        _: 3
-      }, 8, ["present"]);
-    };
-  }
-});
-var ScrollAreaScrollbarGlimpse_default = ScrollAreaScrollbarGlimpse_vue_vue_type_script_setup_true_lang_default;
-var ScrollAreaScrollbarHover_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
-  inheritAttrs: false,
-  __name: "ScrollAreaScrollbarHover",
-  props: { forceMount: {
-    type: Boolean,
-    required: false
-  } },
-  setup(__props) {
-    const rootContext = injectScrollAreaRootContext();
-    const { forwardRef } = useForwardExpose();
-    let timeout;
-    const visible = ref(false);
-    function handlePointerEnter() {
-      window.clearTimeout(timeout);
-      visible.value = true;
-    }
-    function handlePointerLeave() {
-      timeout = window.setTimeout(() => {
-        visible.value = false;
-      }, rootContext.scrollHideDelay.value);
-    }
-    onMounted(() => {
-      const scrollArea = rootContext.scrollArea.value;
-      if (scrollArea) {
-        scrollArea.addEventListener("pointerenter", handlePointerEnter);
-        scrollArea.addEventListener("pointerleave", handlePointerLeave);
-      }
-    });
-    onUnmounted(() => {
-      const scrollArea = rootContext.scrollArea.value;
-      if (scrollArea) {
-        window.clearTimeout(timeout);
-        scrollArea.removeEventListener("pointerenter", handlePointerEnter);
-        scrollArea.removeEventListener("pointerleave", handlePointerLeave);
-      }
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(Presence_default), { present: _ctx.forceMount || visible.value }, {
-        default: withCtx(() => [createVNode(ScrollAreaScrollbarAuto_default, mergeProps(_ctx.$attrs, {
-          ref: unref(forwardRef),
-          "data-state": visible.value ? "visible" : "hidden"
-        }), {
-          default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
-          _: 3
-        }, 16, ["data-state"])]),
-        _: 3
-      }, 8, ["present"]);
-    };
-  }
-});
-var ScrollAreaScrollbarHover_default = ScrollAreaScrollbarHover_vue_vue_type_script_setup_true_lang_default;
-var ScrollAreaScrollbarScroll_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
-  __name: "ScrollAreaScrollbarScroll",
-  props: { forceMount: {
-    type: Boolean,
-    required: false
-  } },
-  setup(__props) {
-    const rootContext = injectScrollAreaRootContext();
-    const scrollbarContext = injectScrollAreaScrollbarContext();
-    const { forwardRef } = useForwardExpose();
-    const { state, dispatch } = useStateMachine("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"
-      }
-    });
-    const visible = computed(() => state.value !== "hidden");
-    watchEffect((onCleanup) => {
-      if (state.value === "idle") {
-        const timeId = window.setTimeout(() => dispatch("HIDE"), rootContext.scrollHideDelay.value);
-        onCleanup(() => {
-          window.clearTimeout(timeId);
-        });
-      }
-    });
-    const debounceScrollEnd = useDebounceFn(() => dispatch("SCROLL_END"), 100);
-    watchEffect((onCleanup) => {
-      const viewport = rootContext.viewport.value;
-      const scrollDirection = scrollbarContext.isHorizontal.value ? "scrollLeft" : "scrollTop";
-      if (viewport) {
-        let prevScrollPos = viewport[scrollDirection];
-        const handleScroll = () => {
-          const scrollPos = viewport[scrollDirection];
-          const hasScrollInDirectionChanged = prevScrollPos !== scrollPos;
-          if (hasScrollInDirectionChanged) {
-            dispatch("SCROLL");
-            debounceScrollEnd();
-          }
-          prevScrollPos = scrollPos;
-        };
-        viewport.addEventListener("scroll", handleScroll);
-        onCleanup(() => {
-          viewport.removeEventListener("scroll", handleScroll);
-        });
-      }
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(Presence_default), { present: _ctx.forceMount || visible.value }, {
-        default: withCtx(() => [createVNode(ScrollAreaScrollbarVisible_default, mergeProps(_ctx.$attrs, {
-          ref: unref(forwardRef),
-          "data-state": visible.value ? "visible" : "hidden"
-        }), {
-          default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
-          _: 3
-        }, 16, ["data-state"])]),
-        _: 3
-      }, 8, ["present"]);
-    };
-  }
-});
-var ScrollAreaScrollbarScroll_default = ScrollAreaScrollbarScroll_vue_vue_type_script_setup_true_lang_default;
-const [injectScrollAreaScrollbarContext, provideScrollAreaScrollbarContext] = createContext("ScrollAreaScrollbar");
-var ScrollAreaScrollbar_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
-  inheritAttrs: false,
-  __name: "ScrollAreaScrollbar",
-  props: {
-    orientation: {
-      type: String,
-      required: false,
-      default: "vertical"
-    },
-    forceMount: {
-      type: Boolean,
-      required: false
-    },
-    asChild: {
-      type: Boolean,
-      required: false
-    },
-    as: {
-      type: null,
-      required: false,
-      default: "div"
-    }
-  },
-  setup(__props) {
-    const props = __props;
-    const { forwardRef } = useForwardExpose();
-    const rootContext = injectScrollAreaRootContext();
-    const isHorizontal = computed(() => props.orientation === "horizontal");
-    watch(isHorizontal, () => {
-      if (isHorizontal.value) rootContext.onScrollbarXEnabledChange(true);
-      else rootContext.onScrollbarYEnabledChange(true);
-    }, { immediate: true });
-    onUnmounted(() => {
-      rootContext.onScrollbarXEnabledChange(false);
-      rootContext.onScrollbarYEnabledChange(false);
-    });
-    const { orientation, forceMount, asChild, as } = toRefs(props);
-    provideScrollAreaScrollbarContext({
-      orientation,
-      forceMount,
-      isHorizontal,
-      as,
-      asChild
-    });
-    return (_ctx, _cache) => {
-      return unref(rootContext).type.value === "hover" ? (openBlock(), createBlock(ScrollAreaScrollbarHover_default, mergeProps({ key: 0 }, _ctx.$attrs, {
-        ref: unref(forwardRef),
-        "force-mount": unref(forceMount)
-      }), {
-        default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
-        _: 3
-      }, 16, ["force-mount"])) : unref(rootContext).type.value === "scroll" ? (openBlock(), createBlock(ScrollAreaScrollbarScroll_default, mergeProps({ key: 1 }, _ctx.$attrs, {
-        ref: unref(forwardRef),
-        "force-mount": unref(forceMount)
-      }), {
-        default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
-        _: 3
-      }, 16, ["force-mount"])) : unref(rootContext).type.value === "glimpse" ? (openBlock(), createBlock(ScrollAreaScrollbarGlimpse_default, mergeProps({ key: 2 }, _ctx.$attrs, {
-        ref: unref(forwardRef),
-        "force-mount": unref(forceMount)
-      }), {
-        default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
-        _: 3
-      }, 16, ["force-mount"])) : unref(rootContext).type.value === "auto" ? (openBlock(), createBlock(ScrollAreaScrollbarAuto_default, mergeProps({ key: 3 }, _ctx.$attrs, {
-        ref: unref(forwardRef),
-        "force-mount": unref(forceMount)
-      }), {
-        default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
-        _: 3
-      }, 16, ["force-mount"])) : unref(rootContext).type.value === "always" ? (openBlock(), createBlock(ScrollAreaScrollbarVisible_default, mergeProps({ key: 4 }, _ctx.$attrs, {
-        ref: unref(forwardRef),
-        "data-state": "visible"
-      }), {
-        default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
-        _: 3
-      }, 16)) : createCommentVNode("v-if", true);
-    };
-  }
-});
-var ScrollAreaScrollbar_default = ScrollAreaScrollbar_vue_vue_type_script_setup_true_lang_default;
-const [injectScrollAreaScrollbarVisibleContext, provideScrollAreaScrollbarVisibleContext] = createContext("ScrollAreaScrollbarVisible");
-var ScrollAreaScrollbarVisible_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
-  __name: "ScrollAreaScrollbarVisible",
-  setup(__props) {
-    const rootContext = injectScrollAreaRootContext();
-    const scrollbarContext = injectScrollAreaScrollbarContext();
-    const { forwardRef } = useForwardExpose();
-    const sizes = ref({
-      content: 0,
-      viewport: 0,
-      scrollbar: {
-        size: 0,
-        paddingStart: 0,
-        paddingEnd: 0
-      }
-    });
-    const hasThumb = computed(() => {
-      const thumbRatio = getThumbRatio(sizes.value.viewport, sizes.value.content);
-      return Boolean(thumbRatio > 0 && thumbRatio < 1);
-    });
-    const thumbRef = ref();
-    const pointerOffset = ref(0);
-    function handleWheelScroll(event, payload) {
-      if (isShowingScrollbarX.value) {
-        const scrollPos = rootContext.viewport.value.scrollLeft + event.deltaY;
-        rootContext.viewport.value.scrollLeft = scrollPos;
-        if (isScrollingWithinScrollbarBounds(scrollPos, payload)) event.preventDefault();
-      } else {
-        const scrollPos = rootContext.viewport.value.scrollTop + event.deltaY;
-        rootContext.viewport.value.scrollTop = scrollPos;
-        if (isScrollingWithinScrollbarBounds(scrollPos, payload)) event.preventDefault();
-      }
-    }
-    function handleThumbDown(event, payload) {
-      if (isShowingScrollbarX.value) pointerOffset.value = payload.x;
-      else pointerOffset.value = payload.y;
-    }
-    function handleThumbUp(event) {
-      pointerOffset.value = 0;
-    }
-    function handleSizeChange(payload) {
-      sizes.value = payload;
-    }
-    function getScrollPosition(pointerPos, dir) {
-      return getScrollPositionFromPointer(pointerPos, pointerOffset.value, sizes.value, dir);
-    }
-    const isShowingScrollbarX = computed(() => scrollbarContext.isHorizontal.value);
-    function onDragScroll(payload) {
-      if (isShowingScrollbarX.value) rootContext.viewport.value.scrollLeft = getScrollPosition(payload, rootContext.dir.value);
-      else rootContext.viewport.value.scrollTop = getScrollPosition(payload);
-    }
-    function onThumbPositionChange() {
-      if (isShowingScrollbarX.value) {
-        if (rootContext.viewport.value && thumbRef.value) {
-          const scrollPos = rootContext.viewport.value.scrollLeft;
-          const offset = getThumbOffsetFromScroll(scrollPos, sizes.value, rootContext.dir.value);
-          thumbRef.value.style.transform = `translate3d(${offset}px, 0, 0)`;
-        }
-      } else if (rootContext.viewport.value && thumbRef.value) {
-        const scrollPos = rootContext.viewport.value.scrollTop;
-        const offset = getThumbOffsetFromScroll(scrollPos, sizes.value);
-        thumbRef.value.style.transform = `translate3d(0, ${offset}px, 0)`;
-      }
-    }
-    function onThumbChange(element) {
-      thumbRef.value = element;
-    }
-    provideScrollAreaScrollbarVisibleContext({
-      sizes,
-      hasThumb,
-      handleWheelScroll,
-      handleThumbDown,
-      handleThumbUp,
-      handleSizeChange,
-      onThumbPositionChange,
-      onThumbChange,
-      onDragScroll
-    });
-    return (_ctx, _cache) => {
-      return isShowingScrollbarX.value ? (openBlock(), createBlock(ScrollAreaScrollbarX_default, mergeProps({ key: 0 }, _ctx.$attrs, { ref: unref(forwardRef) }), {
-        default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
-        _: 3
-      }, 16)) : (openBlock(), createBlock(ScrollAreaScrollbarY_default, mergeProps({ key: 1 }, _ctx.$attrs, { ref: unref(forwardRef) }), {
-        default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
-        _: 3
-      }, 16));
-    };
-  }
-});
-var ScrollAreaScrollbarVisible_default = ScrollAreaScrollbarVisible_vue_vue_type_script_setup_true_lang_default;
-var ScrollAreaScrollbarImpl_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
-  __name: "ScrollAreaScrollbarImpl",
-  props: { isHorizontal: {
-    type: Boolean,
-    required: true
-  } },
-  emits: [
-    "onDragScroll",
-    "onWheelScroll",
-    "onThumbPointerDown"
-  ],
-  setup(__props, { emit: __emit }) {
-    const props = __props;
-    const emit = __emit;
-    const rootContext = injectScrollAreaRootContext();
-    const scrollbarVisibleContext = injectScrollAreaScrollbarVisibleContext();
-    const scrollbarContext = injectScrollAreaScrollbarContext();
-    const { forwardRef, currentElement: scrollbar } = useForwardExpose();
-    const prevWebkitUserSelectRef = ref("");
-    const rectRef = ref();
-    function handleDragScroll(event) {
-      var _a, _b;
-      if (rectRef.value) {
-        const x = event.clientX - ((_a = rectRef.value) == null ? void 0 : _a.left);
-        const y = event.clientY - ((_b = rectRef.value) == null ? void 0 : _b.top);
-        emit("onDragScroll", {
-          x,
-          y
-        });
-      }
-    }
-    function handlePointerDown(event) {
-      const mainPointer = 0;
-      if (event.button === mainPointer) {
-        const element = event.target;
-        element.setPointerCapture(event.pointerId);
-        rectRef.value = scrollbar.value.getBoundingClientRect();
-        prevWebkitUserSelectRef.value = document.body.style.webkitUserSelect;
-        document.body.style.webkitUserSelect = "none";
-        if (rootContext.viewport) rootContext.viewport.value.style.scrollBehavior = "auto";
-        handleDragScroll(event);
-      }
-    }
-    function handlePointerMove(event) {
-      handleDragScroll(event);
-    }
-    function handlePointerUp(event) {
-      const element = event.target;
-      if (element.hasPointerCapture(event.pointerId)) element.releasePointerCapture(event.pointerId);
-      document.body.style.webkitUserSelect = prevWebkitUserSelectRef.value;
-      if (rootContext.viewport) rootContext.viewport.value.style.scrollBehavior = "";
-      rectRef.value = void 0;
-    }
-    function handleWheel(event) {
-      var _a;
-      const element = event.target;
-      const isScrollbarWheel = (_a = scrollbar.value) == null ? void 0 : _a.contains(element);
-      const maxScrollPos = scrollbarVisibleContext.sizes.value.content - scrollbarVisibleContext.sizes.value.viewport;
-      if (isScrollbarWheel) scrollbarVisibleContext.handleWheelScroll(event, maxScrollPos);
-    }
-    onMounted(() => {
-      document.addEventListener("wheel", handleWheel, { passive: false });
-    });
-    onUnmounted(() => {
-      document.removeEventListener("wheel", handleWheel);
-    });
-    function handleSizeChange() {
-      var _a, _b, _c, _d, _e;
-      if (!scrollbar.value) return;
-      if (props.isHorizontal) scrollbarVisibleContext.handleSizeChange({
-        content: ((_a = rootContext.viewport.value) == null ? void 0 : _a.scrollWidth) ?? 0,
-        viewport: ((_b = rootContext.viewport.value) == null ? void 0 : _b.offsetWidth) ?? 0,
-        scrollbar: {
-          size: scrollbar.value.clientWidth ?? 0,
-          paddingStart: toInt(getComputedStyle(scrollbar.value).paddingLeft),
-          paddingEnd: toInt(getComputedStyle(scrollbar.value).paddingRight)
-        }
-      });
-      else scrollbarVisibleContext.handleSizeChange({
-        content: ((_c = rootContext.viewport.value) == null ? void 0 : _c.scrollHeight) ?? 0,
-        viewport: ((_d = rootContext.viewport.value) == null ? void 0 : _d.offsetHeight) ?? 0,
-        scrollbar: {
-          size: ((_e = scrollbar.value) == null ? void 0 : _e.clientHeight) ?? 0,
-          paddingStart: toInt(getComputedStyle(scrollbar.value).paddingTop),
-          paddingEnd: toInt(getComputedStyle(scrollbar.value).paddingBottom)
-        }
-      });
-      scrollbarVisibleContext.onThumbPositionChange();
-    }
-    useResizeObserver(scrollbar, handleSizeChange);
-    useResizeObserver(rootContext.content, handleSizeChange);
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(Primitive), {
-        ref: unref(forwardRef),
-        style: { "position": "absolute" },
-        "data-scrollbarimpl": "",
-        as: unref(scrollbarContext).as.value,
-        "as-child": unref(scrollbarContext).asChild.value,
-        onPointerdown: handlePointerDown,
-        onPointermove: handlePointerMove,
-        onPointerup: handlePointerUp
-      }, {
-        default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
-        _: 3
-      }, 8, ["as", "as-child"]);
-    };
-  }
-});
-var ScrollAreaScrollbarImpl_default = ScrollAreaScrollbarImpl_vue_vue_type_script_setup_true_lang_default;
-var ScrollAreaThumb_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
-  __name: "ScrollAreaThumb",
-  props: {
-    asChild: {
-      type: Boolean,
-      required: false
-    },
-    as: {
-      type: null,
-      required: false
-    }
-  },
-  setup(__props) {
-    const props = __props;
-    const rootContext = injectScrollAreaRootContext();
-    const scrollbarContextVisible = injectScrollAreaScrollbarVisibleContext();
-    function handlePointerDown(event) {
-      const thumb = event.target;
-      const thumbRect = thumb.getBoundingClientRect();
-      const x = event.clientX - thumbRect.left;
-      const y = event.clientY - thumbRect.top;
-      scrollbarContextVisible.handleThumbDown(event, {
-        x,
-        y
-      });
-    }
-    function handlePointerUp(event) {
-      scrollbarContextVisible.handleThumbUp(event);
-    }
-    const { forwardRef, currentElement: thumbElement } = useForwardExpose();
-    const removeUnlinkedScrollListenerRef = ref();
-    const viewport = computed(() => rootContext.viewport.value);
-    function handleScroll() {
-      if (!removeUnlinkedScrollListenerRef.value) {
-        const listener = addUnlinkedScrollListener(viewport.value, scrollbarContextVisible.onThumbPositionChange);
-        removeUnlinkedScrollListenerRef.value = listener;
-        scrollbarContextVisible.onThumbPositionChange();
-      }
-    }
-    const sizes = computed(() => scrollbarContextVisible.sizes.value);
-    watchOnce(sizes, () => {
-      scrollbarContextVisible.onThumbChange(thumbElement.value);
-      if (viewport.value) {
-        scrollbarContextVisible.onThumbPositionChange();
-        viewport.value.addEventListener("scroll", handleScroll);
-      }
-    });
-    onUnmounted(() => {
-      var _a;
-      viewport.value.removeEventListener("scroll", handleScroll);
-      (_a = rootContext.viewport.value) == null ? void 0 : _a.removeEventListener("scroll", handleScroll);
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(Primitive), {
-        ref: unref(forwardRef),
-        "data-state": unref(scrollbarContextVisible).hasThumb ? "visible" : "hidden",
-        style: {
-          width: "var(--reka-scroll-area-thumb-width)",
-          height: "var(--reka-scroll-area-thumb-height)"
-        },
-        "as-child": props.asChild,
-        as: _ctx.as,
-        onPointerdown: handlePointerDown,
-        onPointerup: handlePointerUp
-      }, {
-        default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
-        _: 3
-      }, 8, [
-        "data-state",
-        "as-child",
-        "as"
-      ]);
-    };
-  }
-});
-var ScrollAreaThumb_default = ScrollAreaThumb_vue_vue_type_script_setup_true_lang_default;
-var ScrollAreaViewport_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
-  inheritAttrs: false,
-  __name: "ScrollAreaViewport",
-  props: {
-    nonce: {
-      type: String,
-      required: false
-    },
-    asChild: {
-      type: Boolean,
-      required: false
-    },
-    as: {
-      type: null,
-      required: false
-    }
-  },
-  setup(__props, { expose: __expose }) {
-    const props = __props;
-    const { nonce: propNonce } = toRefs(props);
-    const nonce = useNonce(propNonce);
-    const rootContext = injectScrollAreaRootContext();
-    const viewportElement = ref();
-    onMounted(() => {
-      rootContext.onViewportChange(viewportElement.value);
-      rootContext.onContentChange(contentElement.value);
-    });
-    __expose({ viewportElement });
-    const { forwardRef, currentElement: contentElement } = useForwardExpose();
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(Fragment, null, [createElementVNode("div", mergeProps({
-        ref_key: "viewportElement",
-        ref: viewportElement,
-        "data-reka-scroll-area-viewport": "",
-        style: {
-          overflowX: unref(rootContext).scrollbarXEnabled.value ? "scroll" : "hidden",
-          overflowY: unref(rootContext).scrollbarYEnabled.value ? "scroll" : "hidden"
-        }
-      }, _ctx.$attrs, { tabindex: 0 }), [createVNode(unref(Primitive), {
-        ref: unref(forwardRef),
-        style: normalizeStyle({ minWidth: unref(rootContext).scrollbarXEnabled.value ? "fit-content" : void 0 }),
-        "as-child": props.asChild,
-        as: _ctx.as
-      }, {
-        default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
-        _: 3
-      }, 8, [
-        "style",
-        "as-child",
-        "as"
-      ])], 16), createVNode(unref(Primitive), {
-        as: "style",
-        nonce: unref(nonce)
-      }, {
-        default: withCtx(() => _cache[0] || (_cache[0] = [createTextVNode(" /* 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,
-        __: [0]
-      }, 8, ["nonce"])], 64);
-    };
-  }
-});
-var ScrollAreaViewport_default = ScrollAreaViewport_vue_vue_type_script_setup_true_lang_default;
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
-  __name: "ScrollBar",
-  props: {
-    orientation: { default: "vertical" },
-    forceMount: { type: Boolean },
-    asChild: { type: Boolean },
-    as: {},
-    class: {}
-  },
-  setup(__props) {
-    const props = __props;
-    const delegatedProps = reactiveOmit(props, "class");
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(ScrollAreaScrollbar_default), mergeProps({ "data-slot": "scroll-area-scrollbar" }, unref(delegatedProps), {
-        class: unref(cn)(
-          "flex touch-none p-px transition-colors select-none",
-          _ctx.orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent",
-          _ctx.orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent",
-          props.class
-        )
-      }), {
-        default: withCtx(() => [
-          createVNode(unref(ScrollAreaThumb_default), {
-            "data-slot": "scroll-area-thumb",
-            class: "bg-border relative flex-1 rounded-full"
-          })
-        ]),
-        _: 1
-      }, 16, ["class"]);
-    };
-  }
-});
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "ScrollArea",
-  props: {
-    type: {},
-    dir: {},
-    scrollHideDelay: {},
-    asChild: { type: Boolean },
-    as: {},
-    class: {}
-  },
-  setup(__props) {
-    const props = __props;
-    const delegatedProps = reactiveOmit(props, "class");
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(ScrollAreaRoot_default), mergeProps({ "data-slot": "scroll-area" }, unref(delegatedProps), {
-        class: unref(cn)("relative", props.class)
-      }), {
-        default: withCtx(() => [
-          createVNode(unref(ScrollAreaViewport_default), {
-            "data-slot": "scroll-area-viewport",
-            class: "focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
-          }, {
-            default: withCtx(() => [
-              renderSlot(_ctx.$slots, "default")
-            ]),
-            _: 3
-          }),
-          createVNode(_sfc_main$1),
-          createVNode(unref(ScrollAreaCorner_default))
-        ]),
-        _: 3
-      }, 16, ["class"]);
-    };
-  }
-});
-export {
-  _sfc_main as ScrollArea,
-  _sfc_main$1 as ScrollBar
-};