@dreamcommerce/aurora 3.0.0-32 → 3.0.0-321

package/build/esm/external/@radix-ui/react-scroll-area/dist/index.mjs.js

@@ -0,0 +1,840 @@
+import { forwardRef, useState, useRef, useEffect, useCallback, useReducer } from 'react';
+import { slicedToArray as _slicedToArray, objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2, defineProperty as _defineProperty } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Primitive } from '../external/@radix-ui/react-primitive/dist/index.mjs.js';
+import { useComposedRefs } from '../../react-compose-refs/dist/index.mjs.js';
+import { useLayoutEffect as useLayoutEffect2 } from '../../react-use-layout-effect/dist/index.mjs.js';
+import { Presence } from '../../react-presence/dist/index.mjs.js';
+import { createContextScope } from '../../react-context/dist/index.mjs.js';
+import { useCallbackRef } from '../../react-use-callback-ref/dist/index.mjs.js';
+import { useDirection } from '../../react-direction/dist/index.mjs.js';
+import { clamp } from '../../number/dist/index.mjs.js';
+import { composeEventHandlers } from '../external/@radix-ui/primitive/dist/index.mjs.js';
+
+var _excluded = ["__scopeScrollArea", "type", "dir", "scrollHideDelay"],
+  _excluded2 = ["__scopeScrollArea", "children", "nonce"],
+  _excluded3 = ["forceMount"],
+  _excluded4 = ["forceMount"],
+  _excluded5 = ["forceMount"],
+  _excluded6 = ["forceMount"],
+  _excluded7 = ["orientation"],
+  _excluded8 = ["sizes", "onSizesChange"],
+  _excluded9 = ["sizes", "onSizesChange"],
+  _excluded10 = ["__scopeScrollArea", "sizes", "hasThumb", "onThumbChange", "onThumbPointerUp", "onThumbPointerDown", "onThumbPositionChange", "onDragScroll", "onWheelScroll", "onResize"],
+  _excluded11 = ["forceMount"],
+  _excluded12 = ["__scopeScrollArea", "style"],
+  _excluded13 = ["__scopeScrollArea"];
+function useStateMachine(initialState, machine) {
+  return useReducer(function (state, event) {
+    var nextState = machine[state][event];
+    return nextState !== null && nextState !== void 0 ? nextState : state;
+  }, initialState);
+}
+var SCROLL_AREA_NAME = "ScrollArea";
+var _createContextScope = createContextScope(SCROLL_AREA_NAME),
+  _createContextScope2 = _slicedToArray(_createContextScope, 2),
+  createScrollAreaContext = _createContextScope2[0],
+  createScrollAreaScope = _createContextScope2[1];
+var _createScrollAreaCont = createScrollAreaContext(SCROLL_AREA_NAME),
+  _createScrollAreaCont2 = _slicedToArray(_createScrollAreaCont, 2),
+  ScrollAreaProvider = _createScrollAreaCont2[0],
+  useScrollAreaContext = _createScrollAreaCont2[1];
+var ScrollArea = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
+  var __scopeScrollArea = props.__scopeScrollArea,
+    _props$type = props.type,
+    type = _props$type === void 0 ? "hover" : _props$type,
+    dir = props.dir,
+    _props$scrollHideDela = props.scrollHideDelay,
+    scrollHideDelay = _props$scrollHideDela === void 0 ? 600 : _props$scrollHideDela,
+    scrollAreaProps = _objectWithoutProperties(props, _excluded);
+  var _React2$useState = useState(null),
+    _React2$useState2 = _slicedToArray(_React2$useState, 2),
+    scrollArea = _React2$useState2[0],
+    setScrollArea = _React2$useState2[1];
+  var _React2$useState3 = useState(null),
+    _React2$useState4 = _slicedToArray(_React2$useState3, 2),
+    viewport = _React2$useState4[0],
+    setViewport = _React2$useState4[1];
+  var _React2$useState5 = useState(null),
+    _React2$useState6 = _slicedToArray(_React2$useState5, 2),
+    content = _React2$useState6[0],
+    setContent = _React2$useState6[1];
+  var _React2$useState7 = useState(null),
+    _React2$useState8 = _slicedToArray(_React2$useState7, 2),
+    scrollbarX = _React2$useState8[0],
+    setScrollbarX = _React2$useState8[1];
+  var _React2$useState9 = useState(null),
+    _React2$useState10 = _slicedToArray(_React2$useState9, 2),
+    scrollbarY = _React2$useState10[0],
+    setScrollbarY = _React2$useState10[1];
+  var _React2$useState11 = useState(0),
+    _React2$useState12 = _slicedToArray(_React2$useState11, 2),
+    cornerWidth = _React2$useState12[0],
+    setCornerWidth = _React2$useState12[1];
+  var _React2$useState13 = useState(0),
+    _React2$useState14 = _slicedToArray(_React2$useState13, 2),
+    cornerHeight = _React2$useState14[0],
+    setCornerHeight = _React2$useState14[1];
+  var _React2$useState15 = useState(false),
+    _React2$useState16 = _slicedToArray(_React2$useState15, 2),
+    scrollbarXEnabled = _React2$useState16[0],
+    setScrollbarXEnabled = _React2$useState16[1];
+  var _React2$useState17 = useState(false),
+    _React2$useState18 = _slicedToArray(_React2$useState17, 2),
+    scrollbarYEnabled = _React2$useState18[0],
+    setScrollbarYEnabled = _React2$useState18[1];
+  var composedRefs = useComposedRefs(forwardedRef, function (node) {
+    return setScrollArea(node);
+  });
+  var direction = useDirection(dir);
+  return /* @__PURE__ */jsx(ScrollAreaProvider, {
+    scope: __scopeScrollArea,
+    type: type,
+    dir: direction,
+    scrollHideDelay: scrollHideDelay,
+    scrollArea: scrollArea,
+    viewport: viewport,
+    onViewportChange: setViewport,
+    content: content,
+    onContentChange: setContent,
+    scrollbarX: scrollbarX,
+    onScrollbarXChange: setScrollbarX,
+    scrollbarXEnabled: scrollbarXEnabled,
+    onScrollbarXEnabledChange: setScrollbarXEnabled,
+    scrollbarY: scrollbarY,
+    onScrollbarYChange: setScrollbarY,
+    scrollbarYEnabled: scrollbarYEnabled,
+    onScrollbarYEnabledChange: setScrollbarYEnabled,
+    onCornerWidthChange: setCornerWidth,
+    onCornerHeightChange: setCornerHeight,
+    children: /* @__PURE__ */jsx(Primitive.div, _objectSpread2(_objectSpread2({
+      dir: direction
+    }, scrollAreaProps), {}, {
+      ref: composedRefs,
+      style: _objectSpread2(_defineProperty(_defineProperty({
+        position: "relative"
+      }, "--radix-scroll-area-corner-width", cornerWidth + "px"), "--radix-scroll-area-corner-height", cornerHeight + "px"), props.style)
+    }))
+  });
+});
+ScrollArea.displayName = SCROLL_AREA_NAME;
+var VIEWPORT_NAME = "ScrollAreaViewport";
+var ScrollAreaViewport = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
+  var __scopeScrollArea = props.__scopeScrollArea,
+    children = props.children,
+    nonce = props.nonce,
+    viewportProps = _objectWithoutProperties(props, _excluded2);
+  var context = useScrollAreaContext(VIEWPORT_NAME, __scopeScrollArea);
+  var ref = useRef(null);
+  var composedRefs = useComposedRefs(forwardedRef, ref, context.onViewportChange);
+  return /* @__PURE__ */jsxs(Fragment, {
+    children: [/* @__PURE__ */jsx("style", {
+      dangerouslySetInnerHTML: {
+        __html: "[data-radix-scroll-area-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-radix-scroll-area-viewport]::-webkit-scrollbar{display:none}"
+      },
+      nonce: nonce
+    }), /* @__PURE__ */jsx(Primitive.div, _objectSpread2(_objectSpread2({
+      "data-radix-scroll-area-viewport": ""
+    }, viewportProps), {}, {
+      ref: composedRefs,
+      style: _objectSpread2({
+        /**
+         * 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/overflow#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: context.scrollbarXEnabled ? "scroll" : "hidden",
+        overflowY: context.scrollbarYEnabled ? "scroll" : "hidden"
+      }, props.style),
+      children: /* @__PURE__ */jsx("div", {
+        ref: context.onContentChange,
+        style: {
+          minWidth: "100%",
+          display: "table"
+        },
+        children: children
+      })
+    }))]
+  });
+});
+ScrollAreaViewport.displayName = VIEWPORT_NAME;
+var SCROLLBAR_NAME = "ScrollAreaScrollbar";
+var ScrollAreaScrollbar = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
+  var forceMount = props.forceMount,
+    scrollbarProps = _objectWithoutProperties(props, _excluded3);
+  var context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
+  var onScrollbarXEnabledChange = context.onScrollbarXEnabledChange,
+    onScrollbarYEnabledChange = context.onScrollbarYEnabledChange;
+  var isHorizontal = props.orientation === "horizontal";
+  useEffect(function () {
+    isHorizontal ? onScrollbarXEnabledChange(true) : onScrollbarYEnabledChange(true);
+    return function () {
+      isHorizontal ? onScrollbarXEnabledChange(false) : onScrollbarYEnabledChange(false);
+    };
+  }, [isHorizontal, onScrollbarXEnabledChange, onScrollbarYEnabledChange]);
+  return context.type === "hover" ? /* @__PURE__ */jsx(ScrollAreaScrollbarHover, _objectSpread2(_objectSpread2({}, scrollbarProps), {}, {
+    ref: forwardedRef,
+    forceMount: forceMount
+  })) : context.type === "scroll" ? /* @__PURE__ */jsx(ScrollAreaScrollbarScroll, _objectSpread2(_objectSpread2({}, scrollbarProps), {}, {
+    ref: forwardedRef,
+    forceMount: forceMount
+  })) : context.type === "auto" ? /* @__PURE__ */jsx(ScrollAreaScrollbarAuto, _objectSpread2(_objectSpread2({}, scrollbarProps), {}, {
+    ref: forwardedRef,
+    forceMount: forceMount
+  })) : context.type === "always" ? /* @__PURE__ */jsx(ScrollAreaScrollbarVisible, _objectSpread2(_objectSpread2({}, scrollbarProps), {}, {
+    ref: forwardedRef
+  })) : null;
+});
+ScrollAreaScrollbar.displayName = SCROLLBAR_NAME;
+var ScrollAreaScrollbarHover = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
+  var forceMount = props.forceMount,
+    scrollbarProps = _objectWithoutProperties(props, _excluded4);
+  var context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
+  var _React2$useState19 = useState(false),
+    _React2$useState20 = _slicedToArray(_React2$useState19, 2),
+    visible = _React2$useState20[0],
+    setVisible = _React2$useState20[1];
+  useEffect(function () {
+    var scrollArea = context.scrollArea;
+    var hideTimer = 0;
+    if (scrollArea) {
+      var handlePointerEnter = function handlePointerEnter() {
+        window.clearTimeout(hideTimer);
+        setVisible(true);
+      };
+      var handlePointerLeave = function handlePointerLeave() {
+        hideTimer = window.setTimeout(function () {
+          return setVisible(false);
+        }, context.scrollHideDelay);
+      };
+      scrollArea.addEventListener("pointerenter", handlePointerEnter);
+      scrollArea.addEventListener("pointerleave", handlePointerLeave);
+      return function () {
+        window.clearTimeout(hideTimer);
+        scrollArea.removeEventListener("pointerenter", handlePointerEnter);
+        scrollArea.removeEventListener("pointerleave", handlePointerLeave);
+      };
+    }
+  }, [context.scrollArea, context.scrollHideDelay]);
+  return /* @__PURE__ */jsx(Presence, {
+    present: forceMount || visible,
+    children: /* @__PURE__ */jsx(ScrollAreaScrollbarAuto, _objectSpread2(_objectSpread2({
+      "data-state": visible ? "visible" : "hidden"
+    }, scrollbarProps), {}, {
+      ref: forwardedRef
+    }))
+  });
+});
+var ScrollAreaScrollbarScroll = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
+  var forceMount = props.forceMount,
+    scrollbarProps = _objectWithoutProperties(props, _excluded5);
+  var context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
+  var isHorizontal = props.orientation === "horizontal";
+  var debounceScrollEnd = useDebounceCallback(function () {
+    return send("SCROLL_END");
+  }, 100);
+  var _useStateMachine = 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"
+      }
+    }),
+    _useStateMachine2 = _slicedToArray(_useStateMachine, 2),
+    state = _useStateMachine2[0],
+    send = _useStateMachine2[1];
+  useEffect(function () {
+    if (state === "idle") {
+      var hideTimer = window.setTimeout(function () {
+        return send("HIDE");
+      }, context.scrollHideDelay);
+      return function () {
+        return window.clearTimeout(hideTimer);
+      };
+    }
+  }, [state, context.scrollHideDelay, send]);
+  useEffect(function () {
+    var viewport = context.viewport;
+    var scrollDirection = isHorizontal ? "scrollLeft" : "scrollTop";
+    if (viewport) {
+      var prevScrollPos = viewport[scrollDirection];
+      var handleScroll = function handleScroll() {
+        var scrollPos = viewport[scrollDirection];
+        var hasScrollInDirectionChanged = prevScrollPos !== scrollPos;
+        if (hasScrollInDirectionChanged) {
+          send("SCROLL");
+          debounceScrollEnd();
+        }
+        prevScrollPos = scrollPos;
+      };
+      viewport.addEventListener("scroll", handleScroll);
+      return function () {
+        return viewport.removeEventListener("scroll", handleScroll);
+      };
+    }
+  }, [context.viewport, isHorizontal, send, debounceScrollEnd]);
+  return /* @__PURE__ */jsx(Presence, {
+    present: forceMount || state !== "hidden",
+    children: /* @__PURE__ */jsx(ScrollAreaScrollbarVisible, _objectSpread2(_objectSpread2({
+      "data-state": state === "hidden" ? "hidden" : "visible"
+    }, scrollbarProps), {}, {
+      ref: forwardedRef,
+      onPointerEnter: composeEventHandlers(props.onPointerEnter, function () {
+        return send("POINTER_ENTER");
+      }),
+      onPointerLeave: composeEventHandlers(props.onPointerLeave, function () {
+        return send("POINTER_LEAVE");
+      })
+    }))
+  });
+});
+var ScrollAreaScrollbarAuto = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
+  var context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
+  var forceMount = props.forceMount,
+    scrollbarProps = _objectWithoutProperties(props, _excluded6);
+  var _React2$useState21 = useState(false),
+    _React2$useState22 = _slicedToArray(_React2$useState21, 2),
+    visible = _React2$useState22[0],
+    setVisible = _React2$useState22[1];
+  var isHorizontal = props.orientation === "horizontal";
+  var handleResize = useDebounceCallback(function () {
+    if (context.viewport) {
+      var isOverflowX = context.viewport.offsetWidth < context.viewport.scrollWidth;
+      var isOverflowY = context.viewport.offsetHeight < context.viewport.scrollHeight;
+      setVisible(isHorizontal ? isOverflowX : isOverflowY);
+    }
+  }, 10);
+  useResizeObserver(context.viewport, handleResize);
+  useResizeObserver(context.content, handleResize);
+  return /* @__PURE__ */jsx(Presence, {
+    present: forceMount || visible,
+    children: /* @__PURE__ */jsx(ScrollAreaScrollbarVisible, _objectSpread2(_objectSpread2({
+      "data-state": visible ? "visible" : "hidden"
+    }, scrollbarProps), {}, {
+      ref: forwardedRef
+    }))
+  });
+});
+var ScrollAreaScrollbarVisible = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
+  var _props$orientation = props.orientation,
+    orientation = _props$orientation === void 0 ? "vertical" : _props$orientation,
+    scrollbarProps = _objectWithoutProperties(props, _excluded7);
+  var context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
+  var thumbRef = useRef(null);
+  var pointerOffsetRef = useRef(0);
+  var _React2$useState23 = useState({
+      content: 0,
+      viewport: 0,
+      scrollbar: {
+        size: 0,
+        paddingStart: 0,
+        paddingEnd: 0
+      }
+    }),
+    _React2$useState24 = _slicedToArray(_React2$useState23, 2),
+    sizes = _React2$useState24[0],
+    setSizes = _React2$useState24[1];
+  var thumbRatio = getThumbRatio(sizes.viewport, sizes.content);
+  var commonProps = _objectSpread2(_objectSpread2({}, scrollbarProps), {}, {
+    sizes: sizes,
+    onSizesChange: setSizes,
+    hasThumb: Boolean(thumbRatio > 0 && thumbRatio < 1),
+    onThumbChange: function onThumbChange(thumb) {
+      return thumbRef.current = thumb;
+    },
+    onThumbPointerUp: function onThumbPointerUp() {
+      return pointerOffsetRef.current = 0;
+    },
+    onThumbPointerDown: function onThumbPointerDown(pointerPos) {
+      return pointerOffsetRef.current = pointerPos;
+    }
+  });
+  function getScrollPosition(pointerPos, dir) {
+    return getScrollPositionFromPointer(pointerPos, pointerOffsetRef.current, sizes, dir);
+  }
+  if (orientation === "horizontal") {
+    return /* @__PURE__ */jsx(ScrollAreaScrollbarX, _objectSpread2(_objectSpread2({}, commonProps), {}, {
+      ref: forwardedRef,
+      onThumbPositionChange: function onThumbPositionChange() {
+        if (context.viewport && thumbRef.current) {
+          var scrollPos = context.viewport.scrollLeft;
+          var offset = getThumbOffsetFromScroll(scrollPos, sizes, context.dir);
+          thumbRef.current.style.transform = "translate3d(".concat(offset, "px, 0, 0)");
+        }
+      },
+      onWheelScroll: function onWheelScroll(scrollPos) {
+        if (context.viewport) context.viewport.scrollLeft = scrollPos;
+      },
+      onDragScroll: function onDragScroll(pointerPos) {
+        if (context.viewport) {
+          context.viewport.scrollLeft = getScrollPosition(pointerPos, context.dir);
+        }
+      }
+    }));
+  }
+  if (orientation === "vertical") {
+    return /* @__PURE__ */jsx(ScrollAreaScrollbarY, _objectSpread2(_objectSpread2({}, commonProps), {}, {
+      ref: forwardedRef,
+      onThumbPositionChange: function onThumbPositionChange() {
+        if (context.viewport && thumbRef.current) {
+          var scrollPos = context.viewport.scrollTop;
+          var offset = getThumbOffsetFromScroll(scrollPos, sizes);
+          thumbRef.current.style.transform = "translate3d(0, ".concat(offset, "px, 0)");
+        }
+      },
+      onWheelScroll: function onWheelScroll(scrollPos) {
+        if (context.viewport) context.viewport.scrollTop = scrollPos;
+      },
+      onDragScroll: function onDragScroll(pointerPos) {
+        if (context.viewport) context.viewport.scrollTop = getScrollPosition(pointerPos);
+      }
+    }));
+  }
+  return null;
+});
+var ScrollAreaScrollbarX = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
+  var sizes = props.sizes,
+    onSizesChange = props.onSizesChange,
+    scrollbarProps = _objectWithoutProperties(props, _excluded8);
+  var context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
+  var _React2$useState25 = useState(),
+    _React2$useState26 = _slicedToArray(_React2$useState25, 2),
+    computedStyle = _React2$useState26[0],
+    setComputedStyle = _React2$useState26[1];
+  var ref = useRef(null);
+  var composeRefs = useComposedRefs(forwardedRef, ref, context.onScrollbarXChange);
+  useEffect(function () {
+    if (ref.current) setComputedStyle(getComputedStyle(ref.current));
+  }, [ref]);
+  return /* @__PURE__ */jsx(ScrollAreaScrollbarImpl, _objectSpread2(_objectSpread2({
+    "data-orientation": "horizontal"
+  }, scrollbarProps), {}, {
+    ref: composeRefs,
+    sizes: sizes,
+    style: _objectSpread2(_defineProperty({
+      bottom: 0,
+      left: context.dir === "rtl" ? "var(--radix-scroll-area-corner-width)" : 0,
+      right: context.dir === "ltr" ? "var(--radix-scroll-area-corner-width)" : 0
+    }, "--radix-scroll-area-thumb-width", getThumbSize(sizes) + "px"), props.style),
+    onThumbPointerDown: function onThumbPointerDown(pointerPos) {
+      return props.onThumbPointerDown(pointerPos.x);
+    },
+    onDragScroll: function onDragScroll(pointerPos) {
+      return props.onDragScroll(pointerPos.x);
+    },
+    onWheelScroll: function onWheelScroll(event, maxScrollPos) {
+      if (context.viewport) {
+        var scrollPos = context.viewport.scrollLeft + event.deltaX;
+        props.onWheelScroll(scrollPos);
+        if (isScrollingWithinScrollbarBounds(scrollPos, maxScrollPos)) {
+          event.preventDefault();
+        }
+      }
+    },
+    onResize: function onResize() {
+      if (ref.current && context.viewport && computedStyle) {
+        onSizesChange({
+          content: context.viewport.scrollWidth,
+          viewport: context.viewport.offsetWidth,
+          scrollbar: {
+            size: ref.current.clientWidth,
+            paddingStart: toInt(computedStyle.paddingLeft),
+            paddingEnd: toInt(computedStyle.paddingRight)
+          }
+        });
+      }
+    }
+  }));
+});
+var ScrollAreaScrollbarY = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
+  var sizes = props.sizes,
+    onSizesChange = props.onSizesChange,
+    scrollbarProps = _objectWithoutProperties(props, _excluded9);
+  var context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
+  var _React2$useState27 = useState(),
+    _React2$useState28 = _slicedToArray(_React2$useState27, 2),
+    computedStyle = _React2$useState28[0],
+    setComputedStyle = _React2$useState28[1];
+  var ref = useRef(null);
+  var composeRefs = useComposedRefs(forwardedRef, ref, context.onScrollbarYChange);
+  useEffect(function () {
+    if (ref.current) setComputedStyle(getComputedStyle(ref.current));
+  }, [ref]);
+  return /* @__PURE__ */jsx(ScrollAreaScrollbarImpl, _objectSpread2(_objectSpread2({
+    "data-orientation": "vertical"
+  }, scrollbarProps), {}, {
+    ref: composeRefs,
+    sizes: sizes,
+    style: _objectSpread2(_defineProperty({
+      top: 0,
+      right: context.dir === "ltr" ? 0 : void 0,
+      left: context.dir === "rtl" ? 0 : void 0,
+      bottom: "var(--radix-scroll-area-corner-height)"
+    }, "--radix-scroll-area-thumb-height", getThumbSize(sizes) + "px"), props.style),
+    onThumbPointerDown: function onThumbPointerDown(pointerPos) {
+      return props.onThumbPointerDown(pointerPos.y);
+    },
+    onDragScroll: function onDragScroll(pointerPos) {
+      return props.onDragScroll(pointerPos.y);
+    },
+    onWheelScroll: function onWheelScroll(event, maxScrollPos) {
+      if (context.viewport) {
+        var scrollPos = context.viewport.scrollTop + event.deltaY;
+        props.onWheelScroll(scrollPos);
+        if (isScrollingWithinScrollbarBounds(scrollPos, maxScrollPos)) {
+          event.preventDefault();
+        }
+      }
+    },
+    onResize: function onResize() {
+      if (ref.current && context.viewport && computedStyle) {
+        onSizesChange({
+          content: context.viewport.scrollHeight,
+          viewport: context.viewport.offsetHeight,
+          scrollbar: {
+            size: ref.current.clientHeight,
+            paddingStart: toInt(computedStyle.paddingTop),
+            paddingEnd: toInt(computedStyle.paddingBottom)
+          }
+        });
+      }
+    }
+  }));
+});
+var _createScrollAreaCont3 = createScrollAreaContext(SCROLLBAR_NAME),
+  _createScrollAreaCont4 = _slicedToArray(_createScrollAreaCont3, 2),
+  ScrollbarProvider = _createScrollAreaCont4[0],
+  useScrollbarContext = _createScrollAreaCont4[1];
+var ScrollAreaScrollbarImpl = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
+  var __scopeScrollArea = props.__scopeScrollArea,
+    sizes = props.sizes,
+    hasThumb = props.hasThumb,
+    onThumbChange = props.onThumbChange,
+    onThumbPointerUp = props.onThumbPointerUp,
+    onThumbPointerDown = props.onThumbPointerDown,
+    onThumbPositionChange = props.onThumbPositionChange,
+    onDragScroll = props.onDragScroll,
+    onWheelScroll = props.onWheelScroll,
+    onResize = props.onResize,
+    scrollbarProps = _objectWithoutProperties(props, _excluded10);
+  var context = useScrollAreaContext(SCROLLBAR_NAME, __scopeScrollArea);
+  var _React2$useState29 = useState(null),
+    _React2$useState30 = _slicedToArray(_React2$useState29, 2),
+    scrollbar = _React2$useState30[0],
+    setScrollbar = _React2$useState30[1];
+  var composeRefs = useComposedRefs(forwardedRef, function (node) {
+    return setScrollbar(node);
+  });
+  var rectRef = useRef(null);
+  var prevWebkitUserSelectRef = useRef("");
+  var viewport = context.viewport;
+  var maxScrollPos = sizes.content - sizes.viewport;
+  var handleWheelScroll = useCallbackRef(onWheelScroll);
+  var handleThumbPositionChange = useCallbackRef(onThumbPositionChange);
+  var handleResize = useDebounceCallback(onResize, 10);
+  function handleDragScroll(event) {
+    if (rectRef.current) {
+      var x = event.clientX - rectRef.current.left;
+      var y = event.clientY - rectRef.current.top;
+      onDragScroll({
+        x: x,
+        y: y
+      });
+    }
+  }
+  useEffect(function () {
+    var handleWheel = function handleWheel(event) {
+      var element = event.target;
+      var isScrollbarWheel = scrollbar === null || scrollbar === void 0 ? void 0 : scrollbar.contains(element);
+      if (isScrollbarWheel) handleWheelScroll(event, maxScrollPos);
+    };
+    document.addEventListener("wheel", handleWheel, {
+      passive: false
+    });
+    return function () {
+      return document.removeEventListener("wheel", handleWheel, {
+        passive: false
+      });
+    };
+  }, [viewport, scrollbar, maxScrollPos, handleWheelScroll]);
+  useEffect(handleThumbPositionChange, [sizes, handleThumbPositionChange]);
+  useResizeObserver(scrollbar, handleResize);
+  useResizeObserver(context.content, handleResize);
+  return /* @__PURE__ */jsx(ScrollbarProvider, {
+    scope: __scopeScrollArea,
+    scrollbar: scrollbar,
+    hasThumb: hasThumb,
+    onThumbChange: useCallbackRef(onThumbChange),
+    onThumbPointerUp: useCallbackRef(onThumbPointerUp),
+    onThumbPositionChange: handleThumbPositionChange,
+    onThumbPointerDown: useCallbackRef(onThumbPointerDown),
+    children: /* @__PURE__ */jsx(Primitive.div, _objectSpread2(_objectSpread2({}, scrollbarProps), {}, {
+      ref: composeRefs,
+      style: _objectSpread2({
+        position: "absolute"
+      }, scrollbarProps.style),
+      onPointerDown: composeEventHandlers(props.onPointerDown, function (event) {
+        var mainPointer = 0;
+        if (event.button === mainPointer) {
+          var element = event.target;
+          element.setPointerCapture(event.pointerId);
+          rectRef.current = scrollbar.getBoundingClientRect();
+          prevWebkitUserSelectRef.current = document.body.style.webkitUserSelect;
+          document.body.style.webkitUserSelect = "none";
+          if (context.viewport) context.viewport.style.scrollBehavior = "auto";
+          handleDragScroll(event);
+        }
+      }),
+      onPointerMove: composeEventHandlers(props.onPointerMove, handleDragScroll),
+      onPointerUp: composeEventHandlers(props.onPointerUp, function (event) {
+        var element = event.target;
+        if (element.hasPointerCapture(event.pointerId)) {
+          element.releasePointerCapture(event.pointerId);
+        }
+        document.body.style.webkitUserSelect = prevWebkitUserSelectRef.current;
+        if (context.viewport) context.viewport.style.scrollBehavior = "";
+        rectRef.current = null;
+      })
+    }))
+  });
+});
+var THUMB_NAME = "ScrollAreaThumb";
+var ScrollAreaThumb = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
+  var forceMount = props.forceMount,
+    thumbProps = _objectWithoutProperties(props, _excluded11);
+  var scrollbarContext = useScrollbarContext(THUMB_NAME, props.__scopeScrollArea);
+  return /* @__PURE__ */jsx(Presence, {
+    present: forceMount || scrollbarContext.hasThumb,
+    children: /* @__PURE__ */jsx(ScrollAreaThumbImpl, _objectSpread2({
+      ref: forwardedRef
+    }, thumbProps))
+  });
+});
+var ScrollAreaThumbImpl = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
+  var __scopeScrollArea = props.__scopeScrollArea,
+    style = props.style,
+    thumbProps = _objectWithoutProperties(props, _excluded12);
+  var scrollAreaContext = useScrollAreaContext(THUMB_NAME, __scopeScrollArea);
+  var scrollbarContext = useScrollbarContext(THUMB_NAME, __scopeScrollArea);
+  var onThumbPositionChange = scrollbarContext.onThumbPositionChange;
+  var composedRef = useComposedRefs(forwardedRef, function (node) {
+    return scrollbarContext.onThumbChange(node);
+  });
+  var removeUnlinkedScrollListenerRef = useRef(void 0);
+  var debounceScrollEnd = useDebounceCallback(function () {
+    if (removeUnlinkedScrollListenerRef.current) {
+      removeUnlinkedScrollListenerRef.current();
+      removeUnlinkedScrollListenerRef.current = void 0;
+    }
+  }, 100);
+  useEffect(function () {
+    var viewport = scrollAreaContext.viewport;
+    if (viewport) {
+      var handleScroll = function handleScroll() {
+        debounceScrollEnd();
+        if (!removeUnlinkedScrollListenerRef.current) {
+          var listener = addUnlinkedScrollListener(viewport, onThumbPositionChange);
+          removeUnlinkedScrollListenerRef.current = listener;
+          onThumbPositionChange();
+        }
+      };
+      onThumbPositionChange();
+      viewport.addEventListener("scroll", handleScroll);
+      return function () {
+        return viewport.removeEventListener("scroll", handleScroll);
+      };
+    }
+  }, [scrollAreaContext.viewport, debounceScrollEnd, onThumbPositionChange]);
+  return /* @__PURE__ */jsx(Primitive.div, _objectSpread2(_objectSpread2({
+    "data-state": scrollbarContext.hasThumb ? "visible" : "hidden"
+  }, thumbProps), {}, {
+    ref: composedRef,
+    style: _objectSpread2({
+      width: "var(--radix-scroll-area-thumb-width)",
+      height: "var(--radix-scroll-area-thumb-height)"
+    }, style),
+    onPointerDownCapture: composeEventHandlers(props.onPointerDownCapture, function (event) {
+      var thumb = event.target;
+      var thumbRect = thumb.getBoundingClientRect();
+      var x = event.clientX - thumbRect.left;
+      var y = event.clientY - thumbRect.top;
+      scrollbarContext.onThumbPointerDown({
+        x: x,
+        y: y
+      });
+    }),
+    onPointerUp: composeEventHandlers(props.onPointerUp, scrollbarContext.onThumbPointerUp)
+  }));
+});
+ScrollAreaThumb.displayName = THUMB_NAME;
+var CORNER_NAME = "ScrollAreaCorner";
+var ScrollAreaCorner = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
+  var context = useScrollAreaContext(CORNER_NAME, props.__scopeScrollArea);
+  var hasBothScrollbarsVisible = Boolean(context.scrollbarX && context.scrollbarY);
+  var hasCorner = context.type !== "scroll" && hasBothScrollbarsVisible;
+  return hasCorner ? /* @__PURE__ */jsx(ScrollAreaCornerImpl, _objectSpread2(_objectSpread2({}, props), {}, {
+    ref: forwardedRef
+  })) : null;
+});
+ScrollAreaCorner.displayName = CORNER_NAME;
+var ScrollAreaCornerImpl = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
+  var __scopeScrollArea = props.__scopeScrollArea,
+    cornerProps = _objectWithoutProperties(props, _excluded13);
+  var context = useScrollAreaContext(CORNER_NAME, __scopeScrollArea);
+  var _React2$useState31 = useState(0),
+    _React2$useState32 = _slicedToArray(_React2$useState31, 2),
+    width = _React2$useState32[0],
+    setWidth = _React2$useState32[1];
+  var _React2$useState33 = useState(0),
+    _React2$useState34 = _slicedToArray(_React2$useState33, 2),
+    height = _React2$useState34[0],
+    setHeight = _React2$useState34[1];
+  var hasSize = Boolean(width && height);
+  useResizeObserver(context.scrollbarX, function () {
+    var _context$scrollbarX;
+    var height2 = ((_context$scrollbarX = context.scrollbarX) === null || _context$scrollbarX === void 0 ? void 0 : _context$scrollbarX.offsetHeight) || 0;
+    context.onCornerHeightChange(height2);
+    setHeight(height2);
+  });
+  useResizeObserver(context.scrollbarY, function () {
+    var _context$scrollbarY;
+    var width2 = ((_context$scrollbarY = context.scrollbarY) === null || _context$scrollbarY === void 0 ? void 0 : _context$scrollbarY.offsetWidth) || 0;
+    context.onCornerWidthChange(width2);
+    setWidth(width2);
+  });
+  return hasSize ? /* @__PURE__ */jsx(Primitive.div, _objectSpread2(_objectSpread2({}, cornerProps), {}, {
+    ref: forwardedRef,
+    style: _objectSpread2({
+      width: width,
+      height: height,
+      position: "absolute",
+      right: context.dir === "ltr" ? 0 : void 0,
+      left: context.dir === "rtl" ? 0 : void 0,
+      bottom: 0
+    }, props.style)
+  })) : null;
+});
+function toInt(value) {
+  return value ? parseInt(value, 10) : 0;
+}
+function getThumbRatio(viewportSize, contentSize) {
+  var ratio = viewportSize / contentSize;
+  return isNaN(ratio) ? 0 : ratio;
+}
+function getThumbSize(sizes) {
+  var ratio = getThumbRatio(sizes.viewport, sizes.content);
+  var scrollbarPadding = sizes.scrollbar.paddingStart + sizes.scrollbar.paddingEnd;
+  var thumbSize = (sizes.scrollbar.size - scrollbarPadding) * ratio;
+  return Math.max(thumbSize, 18);
+}
+function getScrollPositionFromPointer(pointerPos, pointerOffset, sizes) {
+  var dir = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : "ltr";
+  var thumbSizePx = getThumbSize(sizes);
+  var thumbCenter = thumbSizePx / 2;
+  var offset = pointerOffset || thumbCenter;
+  var thumbOffsetFromEnd = thumbSizePx - offset;
+  var minPointerPos = sizes.scrollbar.paddingStart + offset;
+  var maxPointerPos = sizes.scrollbar.size - sizes.scrollbar.paddingEnd - thumbOffsetFromEnd;
+  var maxScrollPos = sizes.content - sizes.viewport;
+  var scrollRange = dir === "ltr" ? [0, maxScrollPos] : [maxScrollPos * -1, 0];
+  var interpolate = linearScale([minPointerPos, maxPointerPos], scrollRange);
+  return interpolate(pointerPos);
+}
+function getThumbOffsetFromScroll(scrollPos, sizes) {
+  var dir = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "ltr";
+  var thumbSizePx = getThumbSize(sizes);
+  var scrollbarPadding = sizes.scrollbar.paddingStart + sizes.scrollbar.paddingEnd;
+  var scrollbar = sizes.scrollbar.size - scrollbarPadding;
+  var maxScrollPos = sizes.content - sizes.viewport;
+  var maxThumbPos = scrollbar - thumbSizePx;
+  var scrollClampRange = dir === "ltr" ? [0, maxScrollPos] : [maxScrollPos * -1, 0];
+  var scrollWithoutMomentum = clamp(scrollPos, scrollClampRange);
+  var interpolate = linearScale([0, maxScrollPos], [0, maxThumbPos]);
+  return interpolate(scrollWithoutMomentum);
+}
+function linearScale(input, output) {
+  return function (value) {
+    if (input[0] === input[1] || output[0] === output[1]) return output[0];
+    var ratio = (output[1] - output[0]) / (input[1] - input[0]);
+    return output[0] + ratio * (value - input[0]);
+  };
+}
+function isScrollingWithinScrollbarBounds(scrollPos, maxScrollPos) {
+  return scrollPos > 0 && scrollPos < maxScrollPos;
+}
+var addUnlinkedScrollListener = function addUnlinkedScrollListener(node) {
+  var handler = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {};
+  var prevPosition = {
+    left: node.scrollLeft,
+    top: node.scrollTop
+  };
+  var rAF = 0;
+  (function loop() {
+    var position = {
+      left: node.scrollLeft,
+      top: node.scrollTop
+    };
+    var isHorizontalScroll = prevPosition.left !== position.left;
+    var isVerticalScroll = prevPosition.top !== position.top;
+    if (isHorizontalScroll || isVerticalScroll) handler();
+    prevPosition = position;
+    rAF = window.requestAnimationFrame(loop);
+  })();
+  return function () {
+    return window.cancelAnimationFrame(rAF);
+  };
+};
+function useDebounceCallback(callback, delay) {
+  var handleCallback = useCallbackRef(callback);
+  var debounceTimerRef = useRef(0);
+  useEffect(function () {
+    return function () {
+      return window.clearTimeout(debounceTimerRef.current);
+    };
+  }, []);
+  return useCallback(function () {
+    window.clearTimeout(debounceTimerRef.current);
+    debounceTimerRef.current = window.setTimeout(handleCallback, delay);
+  }, [handleCallback, delay]);
+}
+function useResizeObserver(element, onResize) {
+  var handleResize = useCallbackRef(onResize);
+  useLayoutEffect2(function () {
+    var rAF = 0;
+    if (element) {
+      var resizeObserver = new ResizeObserver(function () {
+        cancelAnimationFrame(rAF);
+        rAF = window.requestAnimationFrame(handleResize);
+      });
+      resizeObserver.observe(element);
+      return function () {
+        window.cancelAnimationFrame(rAF);
+        resizeObserver.unobserve(element);
+      };
+    }
+  }, [element, handleResize]);
+}
+var Root = ScrollArea;
+var Viewport = ScrollAreaViewport;
+var Scrollbar = ScrollAreaScrollbar;
+var Thumb = ScrollAreaThumb;
+
+export { Root, ScrollArea, ScrollAreaCorner, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport, Scrollbar, Thumb, Viewport, createScrollAreaScope };
+//# sourceMappingURL=index.mjs.js.map