@octanejs/radix 0.1.31 → 0.1.33

package/dist/cjs/ScrollArea.cjs

@@ -0,0 +1,828 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var ScrollArea_exports = {};
+__export(ScrollArea_exports, {
+  Corner: () => Corner,
+  Root: () => Root,
+  ScrollArea: () => Root,
+  ScrollAreaCorner: () => Corner,
+  ScrollAreaScrollbar: () => Scrollbar,
+  ScrollAreaThumb: () => Thumb,
+  ScrollAreaViewport: () => Viewport,
+  Scrollbar: () => Scrollbar,
+  Thumb: () => Thumb,
+  Viewport: () => Viewport,
+  createScrollAreaScope: () => createScrollAreaScope
+});
+module.exports = __toCommonJS(ScrollArea_exports);
+var import_octane = require("octane");
+var import_compose_event_handlers = require("./compose-event-handlers.cjs");
+var import_compose_refs = require("./compose-refs.cjs");
+var import_context = require("./context.cjs");
+var import_direction = require("./direction.cjs");
+var import_internal = require("./internal.cjs");
+var import_Presence = require("./Presence.cjs");
+var import_Primitive = require("./Primitive.cjs");
+var import_use_callback_ref = require("./use-callback-ref.cjs");
+const SCROLL_AREA_NAME = "ScrollArea";
+const [createScrollAreaContext, createScrollAreaScope] = (0, import_context.createContextScope)(SCROLL_AREA_NAME);
+const [ScrollAreaProvider, useScrollAreaContext] = createScrollAreaContext(SCROLL_AREA_NAME);
+function Root(props) {
+  const slot = (0, import_internal.S)("ScrollArea.Root");
+  const {
+    __scopeScrollArea,
+    type = "hover",
+    dir,
+    scrollHideDelay = 600,
+    ref: forwardedRef,
+    ...scrollAreaProps
+  } = props ?? {};
+  const [scrollArea, setScrollArea] = (0, import_octane.useState)(null, (0, import_internal.subSlot)(slot, "area"));
+  const [viewport, setViewport] = (0, import_octane.useState)(null, (0, import_internal.subSlot)(slot, "viewport"));
+  const [content, setContent] = (0, import_octane.useState)(null, (0, import_internal.subSlot)(slot, "content"));
+  const [scrollbarX, setScrollbarX] = (0, import_octane.useState)(null, (0, import_internal.subSlot)(slot, "sbx"));
+  const [scrollbarY, setScrollbarY] = (0, import_octane.useState)(null, (0, import_internal.subSlot)(slot, "sby"));
+  const [cornerWidth, setCornerWidth] = (0, import_octane.useState)(0, (0, import_internal.subSlot)(slot, "cw"));
+  const [cornerHeight, setCornerHeight] = (0, import_octane.useState)(0, (0, import_internal.subSlot)(slot, "ch"));
+  const [scrollbarXEnabled, setScrollbarXEnabled] = (0, import_octane.useState)(false, (0, import_internal.subSlot)(slot, "sbxOn"));
+  const [scrollbarYEnabled, setScrollbarYEnabled] = (0, import_octane.useState)(false, (0, import_internal.subSlot)(slot, "sbyOn"));
+  const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, setScrollArea, (0, import_internal.subSlot)(slot, "refs"));
+  const direction = (0, import_direction.useDirection)(dir);
+  return (0, import_octane.createElement)(ScrollAreaProvider, {
+    scope: __scopeScrollArea,
+    type,
+    dir: direction,
+    scrollHideDelay,
+    scrollArea,
+    viewport,
+    onViewportChange: setViewport,
+    content,
+    onContentChange: setContent,
+    scrollbarX,
+    onScrollbarXChange: setScrollbarX,
+    scrollbarXEnabled,
+    onScrollbarXEnabledChange: setScrollbarXEnabled,
+    scrollbarY,
+    onScrollbarYChange: setScrollbarY,
+    scrollbarYEnabled,
+    onScrollbarYEnabledChange: setScrollbarYEnabled,
+    onCornerWidthChange: setCornerWidth,
+    onCornerHeightChange: setCornerHeight,
+    children: (0, import_octane.createElement)(import_Primitive.Primitive.div, {
+      dir: direction,
+      ...scrollAreaProps,
+      ref: composedRefs,
+      style: {
+        position: "relative",
+        // Pass corner sizes as CSS vars to reduce re-renders of context consumers
+        "--radix-scroll-area-corner-width": cornerWidth + "px",
+        "--radix-scroll-area-corner-height": cornerHeight + "px",
+        ...props?.style
+      }
+    })
+  });
+}
+function ViewportStyle(props) {
+  return (0, import_octane.createElement)("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: props.nonce
+  });
+}
+function Viewport(props) {
+  const slot = (0, import_internal.S)("ScrollArea.Viewport");
+  const { __scopeScrollArea, children, nonce, ref: forwardedRef, ...viewportProps } = props ?? {};
+  const context = useScrollAreaContext("ScrollAreaViewport", __scopeScrollArea);
+  const ref = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "ref"));
+  const composedRefs = (0, import_compose_refs.useComposedRefs)(
+    forwardedRef,
+    ref,
+    context.onViewportChange,
+    (0, import_internal.subSlot)(slot, "refs")
+  );
+  return [
+    (0, import_octane.createElement)(ViewportStyle, { key: "style", nonce }),
+    (0, import_octane.createElement)(import_Primitive.Primitive.div, {
+      key: "viewport",
+      "data-radix-scroll-area-viewport": "",
+      ...viewportProps,
+      ref: composedRefs,
+      style: {
+        // `visible` is unsupported and `auto` would show native bars — force `scroll`
+        // and hide the native scrollbars with the injected style (see the source's
+        // rationale comment).
+        overflowX: context.scrollbarXEnabled ? "scroll" : "hidden",
+        overflowY: context.scrollbarYEnabled ? "scroll" : "hidden",
+        ...props?.style
+      },
+      // `display: table` ensures the content div matches the size of its children in
+      // both axes so scroll width/height changes are measurable for thumb sizing.
+      children: (0, import_octane.createElement)("div", {
+        ref: context.onContentChange,
+        style: { minWidth: "100%", display: "table" },
+        children
+      })
+    })
+  ];
+}
+const SCROLLBAR_NAME = "ScrollAreaScrollbar";
+function Scrollbar(props) {
+  const slot = (0, import_internal.S)("ScrollArea.Scrollbar");
+  const { forceMount, ...scrollbarProps } = props ?? {};
+  const context = useScrollAreaContext(SCROLLBAR_NAME, props?.__scopeScrollArea);
+  const { onScrollbarXEnabledChange, onScrollbarYEnabledChange } = context;
+  const isHorizontal = props?.orientation === "horizontal";
+  (0, import_octane.useEffect)(
+    () => {
+      isHorizontal ? onScrollbarXEnabledChange(true) : onScrollbarYEnabledChange(true);
+      return () => {
+        isHorizontal ? onScrollbarXEnabledChange(false) : onScrollbarYEnabledChange(false);
+      };
+    },
+    [isHorizontal, onScrollbarXEnabledChange, onScrollbarYEnabledChange],
+    (0, import_internal.subSlot)(slot, "e:enabled")
+  );
+  return context.type === "hover" ? (0, import_octane.createElement)(ScrollbarHover, { ...scrollbarProps, forceMount }) : context.type === "scroll" ? (0, import_octane.createElement)(ScrollbarScroll, { ...scrollbarProps, forceMount }) : context.type === "auto" ? (0, import_octane.createElement)(ScrollbarAuto, { ...scrollbarProps, forceMount }) : context.type === "always" ? (0, import_octane.createElement)(ScrollbarVisible, { ...scrollbarProps, "data-state": "visible" }) : null;
+}
+function ScrollbarHover(props) {
+  const slot = (0, import_internal.S)("ScrollArea.ScrollbarHover");
+  const { forceMount, ...scrollbarProps } = props;
+  const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
+  const [visible, setVisible] = (0, import_octane.useState)(false, (0, import_internal.subSlot)(slot, "visible"));
+  (0, import_octane.useEffect)(
+    () => {
+      const scrollArea = context.scrollArea;
+      let hideTimer = 0;
+      if (scrollArea) {
+        const handlePointerEnter = () => {
+          window.clearTimeout(hideTimer);
+          setVisible(true);
+        };
+        const handlePointerLeave = () => {
+          hideTimer = window.setTimeout(() => setVisible(false), context.scrollHideDelay);
+        };
+        scrollArea.addEventListener("pointerenter", handlePointerEnter);
+        scrollArea.addEventListener("pointerleave", handlePointerLeave);
+        return () => {
+          window.clearTimeout(hideTimer);
+          scrollArea.removeEventListener("pointerenter", handlePointerEnter);
+          scrollArea.removeEventListener("pointerleave", handlePointerLeave);
+        };
+      }
+    },
+    [context.scrollArea, context.scrollHideDelay],
+    (0, import_internal.subSlot)(slot, "e:hover")
+  );
+  return (0, import_octane.createElement)(import_Presence.Presence, {
+    present: forceMount || visible,
+    children: (0, import_octane.createElement)(ScrollbarAuto, {
+      "data-state": visible ? "visible" : "hidden",
+      ...scrollbarProps
+    })
+  });
+}
+function useStateMachine(initialState, machine, slot) {
+  const [state, dispatch] = (0, import_octane.useReducer)(
+    (state2, event) => {
+      const nextState = machine[state2][event];
+      return nextState ?? state2;
+    },
+    initialState,
+    slot
+  );
+  return [state, dispatch];
+}
+function ScrollbarScroll(props) {
+  const slot = (0, import_internal.S)("ScrollArea.ScrollbarScroll");
+  const { forceMount, ...scrollbarProps } = props;
+  const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
+  const isHorizontal = props.orientation === "horizontal";
+  const debounceScrollEnd = useDebounceCallback(
+    () => send("SCROLL_END"),
+    100,
+    (0, import_internal.subSlot)(slot, "debounce")
+  );
+  const [state, send] = 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"
+      }
+    },
+    (0, import_internal.subSlot)(slot, "machine")
+  );
+  (0, import_octane.useEffect)(
+    () => {
+      if (state === "idle") {
+        const hideTimer = window.setTimeout(() => send("HIDE"), context.scrollHideDelay);
+        return () => window.clearTimeout(hideTimer);
+      }
+    },
+    [state, context.scrollHideDelay, send],
+    (0, import_internal.subSlot)(slot, "e:hide")
+  );
+  (0, import_octane.useEffect)(
+    () => {
+      const viewport = context.viewport;
+      const scrollDirection = isHorizontal ? "scrollLeft" : "scrollTop";
+      if (viewport) {
+        let prevScrollPos = viewport[scrollDirection];
+        const handleScroll = () => {
+          const scrollPos = viewport[scrollDirection];
+          const hasScrollInDirectionChanged = prevScrollPos !== scrollPos;
+          if (hasScrollInDirectionChanged) {
+            send("SCROLL");
+            debounceScrollEnd();
+          }
+          prevScrollPos = scrollPos;
+        };
+        viewport.addEventListener("scroll", handleScroll);
+        return () => viewport.removeEventListener("scroll", handleScroll);
+      }
+    },
+    [context.viewport, isHorizontal, send, debounceScrollEnd],
+    (0, import_internal.subSlot)(slot, "e:scroll")
+  );
+  return (0, import_octane.createElement)(import_Presence.Presence, {
+    present: forceMount || state !== "hidden",
+    children: (0, import_octane.createElement)(ScrollbarVisible, {
+      "data-state": state === "hidden" ? "hidden" : "visible",
+      ...scrollbarProps,
+      onPointerEnter: (0, import_compose_event_handlers.composeEventHandlers)(props.onPointerEnter, () => send("POINTER_ENTER")),
+      onPointerLeave: (0, import_compose_event_handlers.composeEventHandlers)(props.onPointerLeave, () => send("POINTER_LEAVE"))
+    })
+  });
+}
+function ScrollbarAuto(props) {
+  const slot = (0, import_internal.S)("ScrollArea.ScrollbarAuto");
+  const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
+  const { forceMount, ...scrollbarProps } = props;
+  const [visible, setVisible] = (0, import_octane.useState)(false, (0, import_internal.subSlot)(slot, "visible"));
+  const isHorizontal = props.orientation === "horizontal";
+  const handleResize = useDebounceCallback(
+    () => {
+      if (context.viewport) {
+        const isOverflowX = context.viewport.offsetWidth < context.viewport.scrollWidth;
+        const isOverflowY = context.viewport.offsetHeight < context.viewport.scrollHeight;
+        setVisible(isHorizontal ? isOverflowX : isOverflowY);
+      }
+    },
+    10,
+    (0, import_internal.subSlot)(slot, "debounce")
+  );
+  useResizeObserver(context.viewport, handleResize, (0, import_internal.subSlot)(slot, "ro:viewport"));
+  useResizeObserver(context.content, handleResize, (0, import_internal.subSlot)(slot, "ro:content"));
+  return (0, import_octane.createElement)(import_Presence.Presence, {
+    present: forceMount || visible,
+    children: (0, import_octane.createElement)(ScrollbarVisible, {
+      "data-state": visible ? "visible" : "hidden",
+      ...scrollbarProps
+    })
+  });
+}
+function ScrollbarVisible(props) {
+  const slot = (0, import_internal.S)("ScrollArea.ScrollbarVisible");
+  const { orientation = "vertical", ref: forwardedRef, ...scrollbarProps } = props;
+  const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
+  const thumbRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "thumb"));
+  const pointerOffsetRef = (0, import_octane.useRef)(0, (0, import_internal.subSlot)(slot, "offset"));
+  const [sizes, setSizes] = (0, import_octane.useState)(
+    {
+      content: 0,
+      viewport: 0,
+      scrollbar: { size: 0, paddingStart: 0, paddingEnd: 0 }
+    },
+    (0, import_internal.subSlot)(slot, "sizes")
+  );
+  const thumbRatio = getThumbRatio(sizes.viewport, sizes.content);
+  const commonProps = {
+    ...scrollbarProps,
+    sizes,
+    onSizesChange: setSizes,
+    hasThumb: Boolean(thumbRatio > 0 && thumbRatio < 1),
+    onThumbChange: (thumb) => thumbRef.current = thumb,
+    onThumbPointerUp: () => pointerOffsetRef.current = 0,
+    onThumbPointerDown: (pointerPos) => pointerOffsetRef.current = pointerPos
+  };
+  function getScrollPosition(pointerPos, dir) {
+    return getScrollPositionFromPointer(pointerPos, pointerOffsetRef.current, sizes, dir);
+  }
+  if (orientation === "horizontal") {
+    return (0, import_octane.createElement)(ScrollbarX, {
+      ...commonProps,
+      ref: forwardedRef,
+      onThumbPositionChange: () => {
+        if (context.viewport && thumbRef.current) {
+          const scrollPos = context.viewport.scrollLeft;
+          const offset = getThumbOffsetFromScroll(scrollPos, sizes, context.dir);
+          thumbRef.current.style.transform = `translate3d(${offset}px, 0, 0)`;
+        }
+      },
+      onWheelScroll: (scrollPos) => {
+        if (context.viewport) context.viewport.scrollLeft = scrollPos;
+      },
+      onDragScroll: (pointerPos) => {
+        if (context.viewport) {
+          context.viewport.scrollLeft = getScrollPosition(pointerPos, context.dir);
+        }
+      }
+    });
+  }
+  if (orientation === "vertical") {
+    return (0, import_octane.createElement)(ScrollbarY, {
+      ...commonProps,
+      ref: forwardedRef,
+      onThumbPositionChange: () => {
+        if (context.viewport && thumbRef.current) {
+          const scrollPos = context.viewport.scrollTop;
+          const offset = getThumbOffsetFromScroll(scrollPos, sizes);
+          thumbRef.current.style.transform = `translate3d(0, ${offset}px, 0)`;
+        }
+      },
+      onWheelScroll: (scrollPos) => {
+        if (context.viewport) context.viewport.scrollTop = scrollPos;
+      },
+      onDragScroll: (pointerPos) => {
+        if (context.viewport) context.viewport.scrollTop = getScrollPosition(pointerPos);
+      }
+    });
+  }
+  return null;
+}
+function ScrollbarX(props) {
+  const slot = (0, import_internal.S)("ScrollArea.ScrollbarX");
+  const { sizes, onSizesChange, ref: forwardedRef, ...scrollbarProps } = props;
+  const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
+  const [computedStyle, setComputedStyle] = (0, import_octane.useState)(
+    void 0,
+    (0, import_internal.subSlot)(slot, "style")
+  );
+  const ref = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "ref"));
+  const composeRefs = (0, import_compose_refs.useComposedRefs)(
+    forwardedRef,
+    ref,
+    context.onScrollbarXChange,
+    (0, import_internal.subSlot)(slot, "refs")
+  );
+  (0, import_octane.useEffect)(
+    () => {
+      if (ref.current) setComputedStyle(getComputedStyle(ref.current));
+    },
+    [ref],
+    (0, import_internal.subSlot)(slot, "e:style")
+  );
+  return (0, import_octane.createElement)(ScrollbarImpl, {
+    "data-orientation": "horizontal",
+    ...scrollbarProps,
+    __scopeScrollArea: props.__scopeScrollArea,
+    ref: composeRefs,
+    sizes,
+    style: {
+      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: (pointerPos) => props.onThumbPointerDown(pointerPos.x),
+    onDragScroll: (pointerPos) => props.onDragScroll(pointerPos.x),
+    onWheelScroll: (event, maxScrollPos) => {
+      if (context.viewport) {
+        const scrollPos = context.viewport.scrollLeft + event.deltaX;
+        props.onWheelScroll(scrollPos);
+        if (isScrollingWithinScrollbarBounds(scrollPos, maxScrollPos)) {
+          event.preventDefault();
+        }
+      }
+    },
+    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)
+          }
+        });
+      }
+    }
+  });
+}
+function ScrollbarY(props) {
+  const slot = (0, import_internal.S)("ScrollArea.ScrollbarY");
+  const { sizes, onSizesChange, ref: forwardedRef, ...scrollbarProps } = props;
+  const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
+  const [computedStyle, setComputedStyle] = (0, import_octane.useState)(
+    void 0,
+    (0, import_internal.subSlot)(slot, "style")
+  );
+  const ref = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "ref"));
+  const composeRefs = (0, import_compose_refs.useComposedRefs)(
+    forwardedRef,
+    ref,
+    context.onScrollbarYChange,
+    (0, import_internal.subSlot)(slot, "refs")
+  );
+  (0, import_octane.useEffect)(
+    () => {
+      if (ref.current) setComputedStyle(getComputedStyle(ref.current));
+    },
+    [ref],
+    (0, import_internal.subSlot)(slot, "e:style")
+  );
+  return (0, import_octane.createElement)(ScrollbarImpl, {
+    "data-orientation": "vertical",
+    ...scrollbarProps,
+    __scopeScrollArea: props.__scopeScrollArea,
+    ref: composeRefs,
+    sizes,
+    style: {
+      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: (pointerPos) => props.onThumbPointerDown(pointerPos.y),
+    onDragScroll: (pointerPos) => props.onDragScroll(pointerPos.y),
+    onWheelScroll: (event, maxScrollPos) => {
+      if (context.viewport) {
+        const scrollPos = context.viewport.scrollTop + event.deltaY;
+        props.onWheelScroll(scrollPos);
+        if (isScrollingWithinScrollbarBounds(scrollPos, maxScrollPos)) {
+          event.preventDefault();
+        }
+      }
+    },
+    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)
+          }
+        });
+      }
+    }
+  });
+}
+const [ScrollbarProvider, useScrollbarContext] = createScrollAreaContext(SCROLLBAR_NAME);
+function ScrollbarImpl(props) {
+  const slot = (0, import_internal.S)("ScrollArea.ScrollbarImpl");
+  const {
+    __scopeScrollArea,
+    sizes,
+    hasThumb,
+    onThumbChange,
+    onThumbPointerUp,
+    onThumbPointerDown,
+    onThumbPositionChange,
+    onDragScroll,
+    onWheelScroll,
+    onResize,
+    ref: forwardedRef,
+    ...scrollbarProps
+  } = props;
+  const context = useScrollAreaContext(SCROLLBAR_NAME, __scopeScrollArea);
+  const [scrollbar, setScrollbar] = (0, import_octane.useState)(null, (0, import_internal.subSlot)(slot, "node"));
+  const composeRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, setScrollbar, (0, import_internal.subSlot)(slot, "refs"));
+  const rectRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "rect"));
+  const prevWebkitUserSelectRef = (0, import_octane.useRef)("", (0, import_internal.subSlot)(slot, "select"));
+  const viewport = context.viewport;
+  const maxScrollPos = sizes.content - sizes.viewport;
+  const handleWheelScroll = (0, import_use_callback_ref.useCallbackRef)(onWheelScroll, (0, import_internal.subSlot)(slot, "wheel"));
+  const handleThumbPositionChange = (0, import_use_callback_ref.useCallbackRef)(onThumbPositionChange, (0, import_internal.subSlot)(slot, "thumb"));
+  const handleResize = useDebounceCallback(onResize, 10, (0, import_internal.subSlot)(slot, "resize"));
+  function handleDragScroll(event) {
+    if (rectRef.current) {
+      const x = event.clientX - rectRef.current.left;
+      const y = event.clientY - rectRef.current.top;
+      onDragScroll({ x, y });
+    }
+  }
+  (0, import_octane.useEffect)(
+    () => {
+      const handleWheel = (event) => {
+        const element = event.target;
+        const isScrollbarWheel = scrollbar?.contains(element);
+        if (isScrollbarWheel) handleWheelScroll(event, maxScrollPos);
+      };
+      document.addEventListener("wheel", handleWheel, { passive: false });
+      return () => document.removeEventListener("wheel", handleWheel, { passive: false });
+    },
+    [viewport, scrollbar, maxScrollPos, handleWheelScroll],
+    (0, import_internal.subSlot)(slot, "e:wheel")
+  );
+  (0, import_octane.useEffect)(handleThumbPositionChange, [sizes, handleThumbPositionChange], (0, import_internal.subSlot)(slot, "e:pos"));
+  useResizeObserver(scrollbar, handleResize, (0, import_internal.subSlot)(slot, "ro:scrollbar"));
+  useResizeObserver(context.content, handleResize, (0, import_internal.subSlot)(slot, "ro:content"));
+  return (0, import_octane.createElement)(ScrollbarProvider, {
+    scope: __scopeScrollArea,
+    scrollbar,
+    hasThumb,
+    onThumbChange: (0, import_use_callback_ref.useCallbackRef)(onThumbChange, (0, import_internal.subSlot)(slot, "cb:thumb")),
+    onThumbPointerUp: (0, import_use_callback_ref.useCallbackRef)(onThumbPointerUp, (0, import_internal.subSlot)(slot, "cb:up")),
+    onThumbPositionChange: handleThumbPositionChange,
+    onThumbPointerDown: (0, import_use_callback_ref.useCallbackRef)(onThumbPointerDown, (0, import_internal.subSlot)(slot, "cb:down")),
+    children: (0, import_octane.createElement)(import_Primitive.Primitive.div, {
+      ...scrollbarProps,
+      ref: composeRefs,
+      style: { position: "absolute", ...scrollbarProps.style },
+      onPointerDown: (0, import_compose_event_handlers.composeEventHandlers)(props.onPointerDown, (event) => {
+        const mainPointer = 0;
+        if (event.button === mainPointer) {
+          const 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: (0, import_compose_event_handlers.composeEventHandlers)(props.onPointerMove, handleDragScroll),
+      onPointerUp: (0, import_compose_event_handlers.composeEventHandlers)(props.onPointerUp, (event) => {
+        const 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;
+      })
+    })
+  });
+}
+const THUMB_NAME = "ScrollAreaThumb";
+function Thumb(props) {
+  const { forceMount, ...thumbProps } = props ?? {};
+  const scrollbarContext = useScrollbarContext(THUMB_NAME, props?.__scopeScrollArea);
+  return (0, import_octane.createElement)(import_Presence.Presence, {
+    present: forceMount || scrollbarContext.hasThumb,
+    children: (0, import_octane.createElement)(ThumbImpl, thumbProps)
+  });
+}
+function ThumbImpl(props) {
+  const slot = (0, import_internal.S)("ScrollArea.ThumbImpl");
+  const { __scopeScrollArea, style, ref: forwardedRef, ...thumbProps } = props;
+  const scrollAreaContext = useScrollAreaContext(THUMB_NAME, __scopeScrollArea);
+  const scrollbarContext = useScrollbarContext(THUMB_NAME, __scopeScrollArea);
+  const { onThumbPositionChange } = scrollbarContext;
+  const composedRef = (0, import_compose_refs.useComposedRefs)(
+    forwardedRef,
+    scrollbarContext.onThumbChange,
+    (0, import_internal.subSlot)(slot, "refs")
+  );
+  const removeUnlinkedScrollListenerRef = (0, import_octane.useRef)(
+    void 0,
+    (0, import_internal.subSlot)(slot, "unlinked")
+  );
+  const debounceScrollEnd = useDebounceCallback(
+    () => {
+      if (removeUnlinkedScrollListenerRef.current) {
+        removeUnlinkedScrollListenerRef.current();
+        removeUnlinkedScrollListenerRef.current = void 0;
+      }
+    },
+    100,
+    (0, import_internal.subSlot)(slot, "debounce")
+  );
+  (0, import_octane.useEffect)(
+    () => {
+      const viewport = scrollAreaContext.viewport;
+      if (viewport) {
+        const handleScroll = () => {
+          debounceScrollEnd();
+          if (!removeUnlinkedScrollListenerRef.current) {
+            const listener = addUnlinkedScrollListener(viewport, onThumbPositionChange);
+            removeUnlinkedScrollListenerRef.current = listener;
+            onThumbPositionChange();
+          }
+        };
+        onThumbPositionChange();
+        viewport.addEventListener("scroll", handleScroll);
+        return () => viewport.removeEventListener("scroll", handleScroll);
+      }
+    },
+    [scrollAreaContext.viewport, debounceScrollEnd, onThumbPositionChange],
+    (0, import_internal.subSlot)(slot, "e:scroll")
+  );
+  return (0, import_octane.createElement)(import_Primitive.Primitive.div, {
+    "data-state": scrollbarContext.hasThumb ? "visible" : "hidden",
+    ...thumbProps,
+    ref: composedRef,
+    style: {
+      width: "var(--radix-scroll-area-thumb-width)",
+      height: "var(--radix-scroll-area-thumb-height)",
+      ...style
+    },
+    onPointerDownCapture: (0, import_compose_event_handlers.composeEventHandlers)(
+      props.onPointerDownCapture,
+      (event) => {
+        const thumb = event.target;
+        const thumbRect = thumb.getBoundingClientRect();
+        const x = event.clientX - thumbRect.left;
+        const y = event.clientY - thumbRect.top;
+        scrollbarContext.onThumbPointerDown({ x, y });
+      }
+    ),
+    onPointerUp: (0, import_compose_event_handlers.composeEventHandlers)(props.onPointerUp, scrollbarContext.onThumbPointerUp)
+  });
+}
+const CORNER_NAME = "ScrollAreaCorner";
+function Corner(props) {
+  const context = useScrollAreaContext(CORNER_NAME, props?.__scopeScrollArea);
+  const hasBothScrollbarsVisible = Boolean(context.scrollbarX && context.scrollbarY);
+  const hasCorner = context.type !== "scroll" && hasBothScrollbarsVisible;
+  return hasCorner ? (0, import_octane.createElement)(CornerImpl, props) : null;
+}
+function CornerImpl(props) {
+  const slot = (0, import_internal.S)("ScrollArea.CornerImpl");
+  const { __scopeScrollArea, ...cornerProps } = props;
+  const context = useScrollAreaContext(CORNER_NAME, __scopeScrollArea);
+  const [width, setWidth] = (0, import_octane.useState)(0, (0, import_internal.subSlot)(slot, "w"));
+  const [height, setHeight] = (0, import_octane.useState)(0, (0, import_internal.subSlot)(slot, "h"));
+  const hasSize = Boolean(width && height);
+  useResizeObserver(
+    context.scrollbarX,
+    () => {
+      const height2 = context.scrollbarX?.offsetHeight || 0;
+      context.onCornerHeightChange(height2);
+      setHeight(height2);
+    },
+    (0, import_internal.subSlot)(slot, "ro:x")
+  );
+  useResizeObserver(
+    context.scrollbarY,
+    () => {
+      const width2 = context.scrollbarY?.offsetWidth || 0;
+      context.onCornerWidthChange(width2);
+      setWidth(width2);
+    },
+    (0, import_internal.subSlot)(slot, "ro:y")
+  );
+  return hasSize ? (0, import_octane.createElement)(import_Primitive.Primitive.div, {
+    ...cornerProps,
+    style: {
+      width,
+      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) {
+  const ratio = viewportSize / contentSize;
+  return isNaN(ratio) ? 0 : ratio;
+}
+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 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 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);
+  const interpolate = linearScale([0, maxScrollPos], [0, maxThumbPos]);
+  return interpolate(scrollWithoutMomentum);
+}
+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 clamp(value, [min, max]) {
+  return Math.min(max, Math.max(min, value));
+}
+function isScrollingWithinScrollbarBounds(scrollPos, maxScrollPos) {
+  return scrollPos > 0 && scrollPos < maxScrollPos;
+}
+const 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 useDebounceCallback(callback, delay, slot) {
+  const handleCallback = (0, import_use_callback_ref.useCallbackRef)(callback, (0, import_internal.subSlot)(slot, "cb"));
+  const debounceTimerRef = (0, import_octane.useRef)(0, (0, import_internal.subSlot)(slot, "timer"));
+  (0, import_octane.useEffect)(
+    () => () => window.clearTimeout(debounceTimerRef.current),
+    [],
+    (0, import_internal.subSlot)(slot, "e:clear")
+  );
+  return (0, import_octane.useCallback)(
+    () => {
+      window.clearTimeout(debounceTimerRef.current);
+      debounceTimerRef.current = window.setTimeout(handleCallback, delay);
+    },
+    [handleCallback, delay],
+    (0, import_internal.subSlot)(slot, "memo")
+  );
+}
+function useResizeObserver(element, onResize, slot) {
+  const handleResize = (0, import_use_callback_ref.useCallbackRef)(onResize, (0, import_internal.subSlot)(slot, "cb"));
+  (0, import_octane.useLayoutEffect)(
+    () => {
+      let rAF = 0;
+      if (element) {
+        if (typeof ResizeObserver === "undefined") return;
+        const resizeObserver = new ResizeObserver(() => {
+          cancelAnimationFrame(rAF);
+          rAF = window.requestAnimationFrame(handleResize);
+        });
+        resizeObserver.observe(element);
+        return () => {
+          window.cancelAnimationFrame(rAF);
+          resizeObserver.unobserve(element);
+        };
+      }
+    },
+    [element, handleResize],
+    (0, import_internal.subSlot)(slot, "e")
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Corner,
+  Root,
+  ScrollArea,
+  ScrollAreaCorner,
+  ScrollAreaScrollbar,
+  ScrollAreaThumb,
+  ScrollAreaViewport,
+  Scrollbar,
+  Thumb,
+  Viewport,
+  createScrollAreaScope
+});