useFocus Hook

import { useState, useEffect, RefObject, useCallback } from 'react';

function useFocus<T extends HTMLElement = HTMLElement>(
  ref: RefObject<T>
): [boolean, () => void, () => void] {
  const [isFocused, setIsFocused] = useState(false);

  const handleFocus = useCallback(() => setIsFocused(true), []);
  const handleBlur = useCallback(() => setIsFocused(false), []);

  useEffect(() => {
    const element = ref.current;
    __TOKEN_20__ (!element) return;

    element.addEventListener('focus', handleFocus);
    element.addEventListener('blur', handleBlur);

    __TOKEN_22__ () => {
      element.removeEventListener('focus', handleFocus);
      element.removeEventListener('blur', handleBlur);
    };
  }, [ref, handleFocus, handleBlur]);

  const focus = useCallback(() => {
    ref.current?.focus();
  }, [ref]);

  const blur = useCallback(() => {
    ref.current?.blur();
  }, [ref]);

  return [isFocused, focus, blur];
}

// Usage example
// const inputRef = useRef<HTMLInputElement>(null);
// const [isInputFocused, focusInput, blurInput] = useFocus(inputRef);
// <input ref={inputRef} />
// <button onClick={focusInput}>Focus Input</button>
// <button onClick={blurInput}>Blur Input</button>
// {isInputFocused && <p>Input is focused!</p>}