A React hook that manages interactive UI element states including hover, focus, press, and active states with corresponding event handlers. ## Key Components - **`InteractiveState`** - TypeScript interface defining the four core interaction states - **`useInteractiveState`** - Main hook that returns state values, event handlers, and utility functions - **Event handlers** - Memoized callbacks for mouse and focus interactions - **State management** - Internal useState for tracking interaction states - **Utility functions** - Additional methods for styling and state control ## Usage Example ```typescript import { useInteractiveState } from './use-interactive-state'; function InteractiveButton({ children }: { children: React.ReactNode }) { const { isHovered, isFocused, isPressed, isActive, handlers, setActive, ref } = useInteractiveState(); return ( setActive(!isActive)} > {children} ); } ``` The hook provides a clean interface for managing complex interactive states while keeping event handlers optimized with useCallback to prevent unnecessary re-renders.