@arolariu/components/dist/hooks/useFocusVisible.js

🎨 70+ beautiful, accessible React components built on Base UI. TypeScript-first, CSS Modules styling, tree-shakeable, SSR-ready. Perfect for modern web apps, design systems & rapid prototyping. Zero config, maximum flexibility! ⚡

"use client";
import * as __rspack_external_react from "react";
function useFocusVisible() {
    const [isFocusVisible, setIsFocusVisible] = __rspack_external_react.useState(false);
    const isKeyboardRef = __rspack_external_react.useRef(false);
    __rspack_external_react.useEffect(()=>{
        const onKeyDown = ()=>{
            isKeyboardRef.current = true;
        };
        const onPointerDown = ()=>{
            isKeyboardRef.current = false;
        };
        globalThis.document.addEventListener("keydown", onKeyDown, true);
        globalThis.document.addEventListener("pointerdown", onPointerDown, true);
        return ()=>{
            globalThis.document.removeEventListener("keydown", onKeyDown, true);
            globalThis.document.removeEventListener("pointerdown", onPointerDown, true);
        };
    }, []);
    const focusProps = __rspack_external_react.useMemo(()=>({
            onFocus: (_event)=>{
                if (isKeyboardRef.current) setIsFocusVisible(true);
            },
            onBlur: ()=>{
                setIsFocusVisible(false);
            }
        }), []);
    return {
        isFocusVisible,
        focusProps
    };
}
export { useFocusVisible };

//# sourceMappingURL=useFocusVisible.js.map