fix: add union type SVGElement in eligible hooks

.changeset/heavy-beans-nail.md

@@ -0,0 +1,5 @@
+---
+"usehooks-ts": patch
+---
+
+add SVGElement union type in hooks that handles with DOMElements

packages/usehooks-ts/src/useHover/useHover.ts

@@ -18,7 +18,7 @@ import { useEventListener } from '../useEventListener'
  * // Access the isHovered variable to determine if the button is being hovered over.
  * ```
  */
-export function useHover<T extends HTMLElement = HTMLElement>(
+export function useHover<T extends HTMLElement | SVGElement = HTMLElement>(
   elementRef: RefObject<T>,
 ): boolean {
   const [value, setValue] = useState<boolean>(false)

packages/usehooks-ts/src/useOnClickOutside/useOnClickOutside.ts

@@ -29,7 +29,9 @@ type EventType =
  * });
  * ```
  */
-export function useOnClickOutside<T extends HTMLElement = HTMLElement>(
+export function useOnClickOutside<
+  T extends HTMLElement | SVGElement = HTMLElement,
+>(
   ref: RefObject<T> | RefObject<T>[],
   handler: (event: MouseEvent | TouchEvent | FocusEvent) => void,
   eventType: EventType = 'mousedown',

packages/usehooks-ts/src/useResizeObserver/useResizeObserver.ts

@@ -13,7 +13,9 @@ type Size = {
 }
 
 /** The options for the ResizeObserver. */
-type UseResizeObserverOptions<T extends HTMLElement = HTMLElement> = {
+type UseResizeObserverOptions<
+  T extends HTMLElement | SVGElement = HTMLElement,
+> = {
   /** The ref of the element to observe. */
   ref: RefObject<T>
   /**
@@ -51,9 +53,9 @@ const initialSize: Size = {
  * <div ref={myRef}>Hello, world!</div>
  * ```
  */
-export function useResizeObserver<T extends HTMLElement = HTMLElement>(
-  options: UseResizeObserverOptions<T>,
-): Size {
+export function useResizeObserver<
+  T extends HTMLElement | SVGElement = HTMLElement,
+>(options: UseResizeObserverOptions<T>): Size {
   const { ref, box = 'content-box' } = options
   const [{ width, height }, setSize] = useState<Size>(initialSize)
   const isMounted = useIsMounted()