<!-- source-hash: 8235bd8cb36af348a5caf3e310225751 -->
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 (
    <button
      ref={ref}
      {...handlers}
      className={`
        btn
        ${isHovered ? 'btn-hovered' : ''}
        ${isFocused ? 'btn-focused' : ''}
        ${isPressed ? 'btn-pressed' : ''}
        ${isActive ? 'btn-active' : ''}
      `}
      onClick={() => setActive(!isActive)}
    >
      {children}
    </button>
  );
}
```

The hook provides a clean interface for managing complex interactive states while keeping event handlers optimized with useCallback to prevent unnecessary re-renders.