ivt 0.3.2 → 0.3.4

package/dist/chunks/scroll-area-DB3eUx8V.mjs

@@ -0,0 +1,791 @@
+import { c as cn } from './utils-BUelq9Ro.mjs';
+import * as React from 'react';
+import React__default from 'react';
+import { P as Primitive } from './index-D0S6rRRE.mjs';
+import { P as Presence } from './index-D2wfJaZh.mjs';
+import { c as createContextScope } from './index-B_FsTtnF.mjs';
+import { u as useComposedRefs } from './index-B4VRyyD1.mjs';
+import { u as useCallbackRef } from './index-CAg47KJ6.mjs';
+import { u as useDirection } from './index-CXuEm8w1.mjs';
+import { u as useLayoutEffect2 } from './index-BZUrHhU8.mjs';
+import { c as composeEventHandlers } from './index-Dm4_czlz.mjs';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// packages/core/number/src/number.ts
+function clamp(value, [min, max]) {
+    return Math.min(max, Math.max(min, value));
+}
+
+function useStateMachine(initialState, machine) {
+    return React.useReducer((state, event)=>{
+        const nextState = machine[state][event];
+        return nextState ?? state;
+    }, initialState);
+}
+var SCROLL_AREA_NAME = "ScrollArea";
+var [createScrollAreaContext, createScrollAreaScope] = createContextScope(SCROLL_AREA_NAME);
+var [ScrollAreaProvider, useScrollAreaContext] = createScrollAreaContext(SCROLL_AREA_NAME);
+var ScrollArea$1 = React.forwardRef((props, forwardedRef)=>{
+    const { __scopeScrollArea, type = "hover", dir, scrollHideDelay = 600, ...scrollAreaProps } = props;
+    const [scrollArea, setScrollArea] = React.useState(null);
+    const [viewport, setViewport] = React.useState(null);
+    const [content, setContent] = React.useState(null);
+    const [scrollbarX, setScrollbarX] = React.useState(null);
+    const [scrollbarY, setScrollbarY] = React.useState(null);
+    const [cornerWidth, setCornerWidth] = React.useState(0);
+    const [cornerHeight, setCornerHeight] = React.useState(0);
+    const [scrollbarXEnabled, setScrollbarXEnabled] = React.useState(false);
+    const [scrollbarYEnabled, setScrollbarYEnabled] = React.useState(false);
+    const composedRefs = useComposedRefs(forwardedRef, (node)=>setScrollArea(node));
+    const direction = useDirection(dir);
+    return /* @__PURE__ */ jsx(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: /* @__PURE__ */ jsx(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
+            }
+        })
+    });
+});
+ScrollArea$1.displayName = SCROLL_AREA_NAME;
+var VIEWPORT_NAME = "ScrollAreaViewport";
+var ScrollAreaViewport = React.forwardRef((props, forwardedRef)=>{
+    const { __scopeScrollArea, children, nonce, ...viewportProps } = props;
+    const context = useScrollAreaContext(VIEWPORT_NAME, __scopeScrollArea);
+    const ref = React.useRef(null);
+    const 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
+            }),
+            /* @__PURE__ */ jsx(Primitive.div, {
+                "data-radix-scroll-area-viewport": "",
+                ...viewportProps,
+                ref: composedRefs,
+                style: {
+                    /**
+             * We don't support `visible` because the intention is to have at least one scrollbar
+             * if this component is used and `visible` will behave like `auto` in that case
+             * https://developer.mozilla.org/en-US/docs/Web/CSS/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
+                })
+            })
+        ]
+    });
+});
+ScrollAreaViewport.displayName = VIEWPORT_NAME;
+var SCROLLBAR_NAME = "ScrollAreaScrollbar";
+var ScrollAreaScrollbar = React.forwardRef((props, forwardedRef)=>{
+    const { forceMount, ...scrollbarProps } = props;
+    const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
+    const { onScrollbarXEnabledChange, onScrollbarYEnabledChange } = context;
+    const isHorizontal = props.orientation === "horizontal";
+    React.useEffect(()=>{
+        isHorizontal ? onScrollbarXEnabledChange(true) : onScrollbarYEnabledChange(true);
+        return ()=>{
+            isHorizontal ? onScrollbarXEnabledChange(false) : onScrollbarYEnabledChange(false);
+        };
+    }, [
+        isHorizontal,
+        onScrollbarXEnabledChange,
+        onScrollbarYEnabledChange
+    ]);
+    return context.type === "hover" ? /* @__PURE__ */ jsx(ScrollAreaScrollbarHover, {
+        ...scrollbarProps,
+        ref: forwardedRef,
+        forceMount
+    }) : context.type === "scroll" ? /* @__PURE__ */ jsx(ScrollAreaScrollbarScroll, {
+        ...scrollbarProps,
+        ref: forwardedRef,
+        forceMount
+    }) : context.type === "auto" ? /* @__PURE__ */ jsx(ScrollAreaScrollbarAuto, {
+        ...scrollbarProps,
+        ref: forwardedRef,
+        forceMount
+    }) : context.type === "always" ? /* @__PURE__ */ jsx(ScrollAreaScrollbarVisible, {
+        ...scrollbarProps,
+        ref: forwardedRef
+    }) : null;
+});
+ScrollAreaScrollbar.displayName = SCROLLBAR_NAME;
+var ScrollAreaScrollbarHover = React.forwardRef((props, forwardedRef)=>{
+    const { forceMount, ...scrollbarProps } = props;
+    const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
+    const [visible, setVisible] = React.useState(false);
+    React.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
+    ]);
+    return /* @__PURE__ */ jsx(Presence, {
+        present: forceMount || visible,
+        children: /* @__PURE__ */ jsx(ScrollAreaScrollbarAuto, {
+            "data-state": visible ? "visible" : "hidden",
+            ...scrollbarProps,
+            ref: forwardedRef
+        })
+    });
+});
+var ScrollAreaScrollbarScroll = React.forwardRef((props, forwardedRef)=>{
+    const { forceMount, ...scrollbarProps } = props;
+    const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
+    const isHorizontal = props.orientation === "horizontal";
+    const debounceScrollEnd = useDebounceCallback(()=>send("SCROLL_END"), 100);
+    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"
+        }
+    });
+    React.useEffect(()=>{
+        if (state === "idle") {
+            const hideTimer = window.setTimeout(()=>send("HIDE"), context.scrollHideDelay);
+            return ()=>window.clearTimeout(hideTimer);
+        }
+    }, [
+        state,
+        context.scrollHideDelay,
+        send
+    ]);
+    React.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
+    ]);
+    return /* @__PURE__ */ jsx(Presence, {
+        present: forceMount || state !== "hidden",
+        children: /* @__PURE__ */ jsx(ScrollAreaScrollbarVisible, {
+            "data-state": state === "hidden" ? "hidden" : "visible",
+            ...scrollbarProps,
+            ref: forwardedRef,
+            onPointerEnter: composeEventHandlers(props.onPointerEnter, ()=>send("POINTER_ENTER")),
+            onPointerLeave: composeEventHandlers(props.onPointerLeave, ()=>send("POINTER_LEAVE"))
+        })
+    });
+});
+var ScrollAreaScrollbarAuto = React.forwardRef((props, forwardedRef)=>{
+    const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
+    const { forceMount, ...scrollbarProps } = props;
+    const [visible, setVisible] = React.useState(false);
+    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);
+    useResizeObserver(context.viewport, handleResize);
+    useResizeObserver(context.content, handleResize);
+    return /* @__PURE__ */ jsx(Presence, {
+        present: forceMount || visible,
+        children: /* @__PURE__ */ jsx(ScrollAreaScrollbarVisible, {
+            "data-state": visible ? "visible" : "hidden",
+            ...scrollbarProps,
+            ref: forwardedRef
+        })
+    });
+});
+var ScrollAreaScrollbarVisible = React.forwardRef((props, forwardedRef)=>{
+    const { orientation = "vertical", ...scrollbarProps } = props;
+    const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
+    const thumbRef = React.useRef(null);
+    const pointerOffsetRef = React.useRef(0);
+    const [sizes, setSizes] = React.useState({
+        content: 0,
+        viewport: 0,
+        scrollbar: {
+            size: 0,
+            paddingStart: 0,
+            paddingEnd: 0
+        }
+    });
+    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 /* @__PURE__ */ jsx(ScrollAreaScrollbarX, {
+            ...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 /* @__PURE__ */ jsx(ScrollAreaScrollbarY, {
+            ...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;
+});
+var ScrollAreaScrollbarX = React.forwardRef((props, forwardedRef)=>{
+    const { sizes, onSizesChange, ...scrollbarProps } = props;
+    const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
+    const [computedStyle, setComputedStyle] = React.useState();
+    const ref = React.useRef(null);
+    const composeRefs = useComposedRefs(forwardedRef, ref, context.onScrollbarXChange);
+    React.useEffect(()=>{
+        if (ref.current) setComputedStyle(getComputedStyle(ref.current));
+    }, [
+        ref
+    ]);
+    return /* @__PURE__ */ jsx(ScrollAreaScrollbarImpl, {
+        "data-orientation": "horizontal",
+        ...scrollbarProps,
+        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)
+                    }
+                });
+            }
+        }
+    });
+});
+var ScrollAreaScrollbarY = React.forwardRef((props, forwardedRef)=>{
+    const { sizes, onSizesChange, ...scrollbarProps } = props;
+    const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
+    const [computedStyle, setComputedStyle] = React.useState();
+    const ref = React.useRef(null);
+    const composeRefs = useComposedRefs(forwardedRef, ref, context.onScrollbarYChange);
+    React.useEffect(()=>{
+        if (ref.current) setComputedStyle(getComputedStyle(ref.current));
+    }, [
+        ref
+    ]);
+    return /* @__PURE__ */ jsx(ScrollAreaScrollbarImpl, {
+        "data-orientation": "vertical",
+        ...scrollbarProps,
+        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)
+                    }
+                });
+            }
+        }
+    });
+});
+var [ScrollbarProvider, useScrollbarContext] = createScrollAreaContext(SCROLLBAR_NAME);
+var ScrollAreaScrollbarImpl = React.forwardRef((props, forwardedRef)=>{
+    const { __scopeScrollArea, sizes, hasThumb, onThumbChange, onThumbPointerUp, onThumbPointerDown, onThumbPositionChange, onDragScroll, onWheelScroll, onResize, ...scrollbarProps } = props;
+    const context = useScrollAreaContext(SCROLLBAR_NAME, __scopeScrollArea);
+    const [scrollbar, setScrollbar] = React.useState(null);
+    const composeRefs = useComposedRefs(forwardedRef, (node)=>setScrollbar(node));
+    const rectRef = React.useRef(null);
+    const prevWebkitUserSelectRef = React.useRef("");
+    const viewport = context.viewport;
+    const maxScrollPos = sizes.content - sizes.viewport;
+    const handleWheelScroll = useCallbackRef(onWheelScroll);
+    const handleThumbPositionChange = useCallbackRef(onThumbPositionChange);
+    const handleResize = useDebounceCallback(onResize, 10);
+    function handleDragScroll(event) {
+        if (rectRef.current) {
+            const x = event.clientX - rectRef.current.left;
+            const y = event.clientY - rectRef.current.top;
+            onDragScroll({
+                x,
+                y
+            });
+        }
+    }
+    React.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
+    ]);
+    React.useEffect(handleThumbPositionChange, [
+        sizes,
+        handleThumbPositionChange
+    ]);
+    useResizeObserver(scrollbar, handleResize);
+    useResizeObserver(context.content, handleResize);
+    return /* @__PURE__ */ jsx(ScrollbarProvider, {
+        scope: __scopeScrollArea,
+        scrollbar,
+        hasThumb,
+        onThumbChange: useCallbackRef(onThumbChange),
+        onThumbPointerUp: useCallbackRef(onThumbPointerUp),
+        onThumbPositionChange: handleThumbPositionChange,
+        onThumbPointerDown: useCallbackRef(onThumbPointerDown),
+        children: /* @__PURE__ */ jsx(Primitive.div, {
+            ...scrollbarProps,
+            ref: composeRefs,
+            style: {
+                position: "absolute",
+                ...scrollbarProps.style
+            },
+            onPointerDown: 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: composeEventHandlers(props.onPointerMove, handleDragScroll),
+            onPointerUp: 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;
+            })
+        })
+    });
+});
+var THUMB_NAME = "ScrollAreaThumb";
+var ScrollAreaThumb = React.forwardRef((props, forwardedRef)=>{
+    const { forceMount, ...thumbProps } = props;
+    const scrollbarContext = useScrollbarContext(THUMB_NAME, props.__scopeScrollArea);
+    return /* @__PURE__ */ jsx(Presence, {
+        present: forceMount || scrollbarContext.hasThumb,
+        children: /* @__PURE__ */ jsx(ScrollAreaThumbImpl, {
+            ref: forwardedRef,
+            ...thumbProps
+        })
+    });
+});
+var ScrollAreaThumbImpl = React.forwardRef((props, forwardedRef)=>{
+    const { __scopeScrollArea, style, ...thumbProps } = props;
+    const scrollAreaContext = useScrollAreaContext(THUMB_NAME, __scopeScrollArea);
+    const scrollbarContext = useScrollbarContext(THUMB_NAME, __scopeScrollArea);
+    const { onThumbPositionChange } = scrollbarContext;
+    const composedRef = useComposedRefs(forwardedRef, (node)=>scrollbarContext.onThumbChange(node));
+    const removeUnlinkedScrollListenerRef = React.useRef(void 0);
+    const debounceScrollEnd = useDebounceCallback(()=>{
+        if (removeUnlinkedScrollListenerRef.current) {
+            removeUnlinkedScrollListenerRef.current();
+            removeUnlinkedScrollListenerRef.current = void 0;
+        }
+    }, 100);
+    React.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
+    ]);
+    return /* @__PURE__ */ jsx(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: 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: composeEventHandlers(props.onPointerUp, scrollbarContext.onThumbPointerUp)
+    });
+});
+ScrollAreaThumb.displayName = THUMB_NAME;
+var CORNER_NAME = "ScrollAreaCorner";
+var ScrollAreaCorner = React.forwardRef((props, forwardedRef)=>{
+    const context = useScrollAreaContext(CORNER_NAME, props.__scopeScrollArea);
+    const hasBothScrollbarsVisible = Boolean(context.scrollbarX && context.scrollbarY);
+    const hasCorner = context.type !== "scroll" && hasBothScrollbarsVisible;
+    return hasCorner ? /* @__PURE__ */ jsx(ScrollAreaCornerImpl, {
+        ...props,
+        ref: forwardedRef
+    }) : null;
+});
+ScrollAreaCorner.displayName = CORNER_NAME;
+var ScrollAreaCornerImpl = React.forwardRef((props, forwardedRef)=>{
+    const { __scopeScrollArea, ...cornerProps } = props;
+    const context = useScrollAreaContext(CORNER_NAME, __scopeScrollArea);
+    const [width, setWidth] = React.useState(0);
+    const [height, setHeight] = React.useState(0);
+    const hasSize = Boolean(width && height);
+    useResizeObserver(context.scrollbarX, ()=>{
+        const height2 = context.scrollbarX?.offsetHeight || 0;
+        context.onCornerHeightChange(height2);
+        setHeight(height2);
+    });
+    useResizeObserver(context.scrollbarY, ()=>{
+        const width2 = context.scrollbarY?.offsetWidth || 0;
+        context.onCornerWidthChange(width2);
+        setWidth(width2);
+    });
+    return hasSize ? /* @__PURE__ */ jsx(Primitive.div, {
+        ...cornerProps,
+        ref: forwardedRef,
+        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 isScrollingWithinScrollbarBounds(scrollPos, maxScrollPos) {
+    return scrollPos > 0 && scrollPos < maxScrollPos;
+}
+var 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) {
+    const handleCallback = useCallbackRef(callback);
+    const debounceTimerRef = React.useRef(0);
+    React.useEffect(()=>()=>window.clearTimeout(debounceTimerRef.current), []);
+    return React.useCallback(()=>{
+        window.clearTimeout(debounceTimerRef.current);
+        debounceTimerRef.current = window.setTimeout(handleCallback, delay);
+    }, [
+        handleCallback,
+        delay
+    ]);
+}
+function useResizeObserver(element, onResize) {
+    const handleResize = useCallbackRef(onResize);
+    useLayoutEffect2(()=>{
+        let rAF = 0;
+        if (element) {
+            const resizeObserver = new ResizeObserver(()=>{
+                cancelAnimationFrame(rAF);
+                rAF = window.requestAnimationFrame(handleResize);
+            });
+            resizeObserver.observe(element);
+            return ()=>{
+                window.cancelAnimationFrame(rAF);
+                resizeObserver.unobserve(element);
+            };
+        }
+    }, [
+        element,
+        handleResize
+    ]);
+}
+var Root = ScrollArea$1;
+var Viewport = ScrollAreaViewport;
+var Corner = ScrollAreaCorner;
+
+function ScrollArea({ className, children, ...props }) {
+    return /*#__PURE__*/ React__default.createElement(Root, {
+        "data-slot": "scroll-area",
+        className: cn("relative", className),
+        ...props
+    }, /*#__PURE__*/ React__default.createElement(Viewport, {
+        "data-slot": "scroll-area-viewport",
+        className: "ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] focus-visible:ring-4 focus-visible:outline-1"
+    }, children), /*#__PURE__*/ React__default.createElement(ScrollBar, null), /*#__PURE__*/ React__default.createElement(Corner, null));
+}
+function ScrollBar({ className, orientation = "vertical", ...props }) {
+    return /*#__PURE__*/ React__default.createElement(ScrollAreaScrollbar, {
+        "data-slot": "scroll-area-scrollbar",
+        orientation: orientation,
+        className: cn("flex touch-none p-px transition-colors select-none", orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent", orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent", className),
+        ...props
+    }, /*#__PURE__*/ React__default.createElement(ScrollAreaThumb, {
+        "data-slot": "scroll-area-thumb",
+        className: "bg-border relative flex-1 rounded-full"
+    }));
+}
+
+export { ScrollArea as S, ScrollBar as a };
+//# sourceMappingURL=scroll-area-DB3eUx8V.mjs.map