@brumaombra/ui-vintage 0.4.0 → 0.5.0

package/dist/scroll-area.js

@@ -0,0 +1,1080 @@
+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-Bz4m9VPB.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
+};