import { RefObject } from 'react';
/**
 * Detects clicks outside of a specified element and triggers a callback.
 * Useful for closing dropdowns, modals, and popovers when clicking outside.
 *
 * @template T - The HTML element type (extends HTMLElement)
 * @param callback - Function to call when a click outside is detected
 * @returns A ref to attach to the element
 *
 * @example
 * ```tsx
 * function Dropdown() {
 *   const [isOpen, setIsOpen] = useState(false);
 *   const dropdownRef = useOnClickOutside<HTMLDivElement>(() => setIsOpen(false));
 *
 *   return (
 *     <div ref={dropdownRef}>
 *       <button onClick={() => setIsOpen(!isOpen)}>Toggle</button>
 *       {isOpen && (
 *         <div className="dropdown-menu">
 *           <p>Dropdown content</p>
 *         </div>
 *       )}
 *     </div>
 *   );
 * }
 * ```
 *
 * @example
 * ```tsx
 * function Modal({ onClose }: { onClose: () => void }) {
 *   const modalRef = useOnClickOutside<HTMLDivElement>(onClose);
 *
 *   return (
 *     <div className="modal-overlay">
 *       <div ref={modalRef} className="modal-content">
 *         <h2>Modal Title</h2>
 *         <p>Modal content</p>
 *       </div>
 *     </div>
 *   );
 * }
 * ```
 */
export declare function useOnClickOutside<T extends HTMLElement = HTMLElement>(callback: (event: MouseEvent | TouchEvent) => void): RefObject<T | null>;
/**
 * Alternative version that accepts an existing ref instead of creating one.
 * Useful when you need to attach the ref to multiple elements or use it elsewhere.
 *
 * @template T - The HTML element type (extends HTMLElement)
 * @param ref - The ref object to monitor
 * @param callback - Function to call when a click outside is detected
 *
 * @example
 * ```tsx
 * function Popover() {
 *   const [isOpen, setIsOpen] = useState(false);
 *   const popoverRef = useRef<HTMLDivElement>(null);
 *
 *   useOnClickOutsideWithRef(popoverRef, () => setIsOpen(false));
 *
 *   return (
 *     <div>
 *       <button onClick={() => setIsOpen(true)}>Open</button>
 *       {isOpen && (
 *         <div ref={popoverRef} className="popover">
 *           Content
 *         </div>
 *       )}
 *     </div>
 *   );
 * }
 * ```
 */
export declare function useOnClickOutsideWithRef<T extends HTMLElement = HTMLElement>(ref: RefObject<T>, callback: (event: MouseEvent | TouchEvent) => void): void;
//# sourceMappingURL=useOnClickOutside.d.ts.map