import { jsx as _jsx } from "react/jsx-runtime";
import { cn } from "../../libs/utils";
import { useEffect, useRef, useState } from "react";
export const AnimateChangeInHeight = ({ children, className, }) => {
    const containerRef = useRef(null);
    const [height, setHeight] = useState("auto");
    useEffect(() => {
        if (containerRef.current) {
            const resizeObserver = new ResizeObserver((entries) => {
                // We only have one entry, so we can use entries[0].
                const observedHeight = entries[0].contentRect.height;
                setHeight(observedHeight);
            });
            resizeObserver.observe(containerRef.current);
            return () => {
                // Cleanup the observer when the component is unmounted
                resizeObserver.disconnect();
            };
        }
    }, []);
    return (_jsx("div", { className: cn(className, "overflow-hidden transition-all duration-100 ease-in"), style: { height }, children: _jsx("div", { ref: containerRef, children: children }) }));
};
//# sourceMappingURL=animateChangeInHeight.js.map