import { useState, useLayoutEffect } from "react";
function getActiveBreakpoints() {
    return {
        "2xs": window.matchMedia("(min-width: 320px)").matches,
        xs: window.matchMedia("(min-width: 480px)").matches,
        sm: window.matchMedia("(min-width: 640px)").matches,
        md: window.matchMedia("(min-width: 768px)").matches,
        lg: window.matchMedia("(min-width: 1024px)").matches,
        xl: window.matchMedia("(min-width: 1280px)").matches,
        "2xl": window.matchMedia("(min-width: 1536px)").matches,
    };
}
// Returns an object so that you can safely check multiple breakpoints directly (from lowest to highest)
// the same way you would do in Tailwind
export function useResponsiveBreakpoints() {
    const [currentBreakpoints, setCurrentBreakpoints] = useState(getActiveBreakpoints());
    useLayoutEffect(() => {
        const updateSize = () => {
            setCurrentBreakpoints(getActiveBreakpoints());
        };
        window.addEventListener("resize", updateSize);
        return () => window.removeEventListener("resize", updateSize);
    });
    return currentBreakpoints;
}
//# sourceMappingURL=useResponsiveBreakpoints.js.map