{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "use-click-outside",
  "title": "useClickOutside",
  "description": "A hook to handle click outside events",
  "files": [
    {
      "path": "registry/hooks/use-click-outside.ts",
      "content": "'use client'\n\nimport * as React from 'react'\n\nexport function useClickOutside<T extends Element = Element>(\n  ref: React.RefObject<T> | React.RefObject<T>[],\n  handler: (event: MouseEvent | TouchEvent) => void,\n  options?: { enabled?: boolean },\n): void {\n  const { enabled = true } = options ?? {}\n\n  const handlerEvent = React.useEffectEvent(handler)\n\n  React.useEffect(() => {\n    if (!enabled)\n      return\n\n    const abortController = new AbortController()\n\n    const handleClickAway = (event: MouseEvent | TouchEvent) => {\n      const target = event.target as T\n      const refs = Array.isArray(ref) ? ref : [ref]\n\n      const isClickAway = refs.every(r => r.current && !r.current.contains(target))\n\n      if (isClickAway) {\n        handlerEvent(event)\n      }\n    }\n\n    document.addEventListener('mousedown', handleClickAway, { signal: abortController.signal })\n    document.addEventListener('touchstart', handleClickAway, { signal: abortController.signal })\n\n    return () => {\n      abortController.abort()\n    }\n  }, [ref, enabled])\n}\n",
      "type": "registry:hook",
      "target": "hookas/use-click-outside.ts"
    }
  ],
  "type": "registry:hook"
}