import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useRef, useState } from "react";
import { twMerge } from "tailwind-merge";
export function SidebarPanel({ className, children, ...props }) {
    const [hasScroll, setHasScroll] = useState(false);
    function checkContentScroll(target) {
        setHasScroll(target.scrollHeight - target.scrollTop - target.clientHeight > 1);
    }
    const containerRef = useRef(null);
    // listen for resize events to update shadow
    useEffect(() => {
        if (!containerRef.current) {
            return;
        }
        const observer = new ResizeObserver((entries) => {
            const entry = entries.pop();
            if (!entry) {
                return;
            }
            const { target } = entry;
            checkContentScroll(target);
        });
        observer.observe(containerRef.current);
        return () => {
            observer.disconnect();
        };
    }, [containerRef.current]);
    return (_jsxs(_Fragment, { children: [_jsx("div", { className: twMerge("no-scrollbar flex-1 overflow-auto text-gray-900 transition-shadow", className), onScroll: (e) => checkContentScroll(e.currentTarget), ref: containerRef, ...props, children: children }), hasScroll ? (_jsx("div", { className: "pointer-events-none z-10 -mt-12 h-12 w-full", style: {
                    boxShadow: "inset 0px -33px 32px -16px rgba(0,0,0,0.1)",
                } })) : null] }));
}
//# sourceMappingURL=sidebar-panel.js.map