{
	"$schema": "https://ui.shadcn.com/schema/registry-item.json",
	"name": "use-click-outside",
	"description": "A hook to detect clicks outside of a specified element",
	"dependencies": [],
	"devDependencies": [],
	"registryDependencies": [],
	"files": [
		{
			"path": "packages/hooks/use-click-outside/index.ts",
			"content": "import { useEffect, type RefObject } from \"react\";\n\nexport function useClickOutside<T extends HTMLElement = HTMLElement>(\n\tref: RefObject<T>,\n\thandler: (event: MouseEvent | TouchEvent) => void,\n): void {\n\tuseEffect(() => {\n\t\tconst listener = (event: MouseEvent | TouchEvent) => {\n\t\t\tconst el = ref?.current;\n\n\t\t\t// Do nothing if clicking ref's element or descendent elements\n\t\t\tif (!el || el.contains(event.target as Node)) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\thandler(event);\n\t\t};\n\n\t\tdocument.addEventListener(\"mousedown\", listener);\n\t\tdocument.addEventListener(\"touchstart\", listener);\n\n\t\treturn () => {\n\t\t\tdocument.removeEventListener(\"mousedown\", listener);\n\t\t\tdocument.removeEventListener(\"touchstart\", listener);\n\t\t};\n\t}, [ref, handler]);\n}\n",
			"type": "registry:hook",
			"target": "hooks/use-clink-outside.tsx"
		}
	],
	"type": "registry:hook"
}