<!-- source-hash: 80234bb8b8d25e71eddb45795df0561f -->
A React wrapper component that adds interactive states and visual feedback to any HTML element, including hover effects, ripple animations, and accessibility enhancements.

## Key Components

- **InteractiveWrapper** - Main wrapper component that can render as any HTML element with interactive behaviors
- **InteractiveOptions** - Configuration interface for enabling different interactive features
- **RippleEffect** - Internal component that renders click ripple animations
- **InteractivePresets** - Pre-configured components (Card, Button, NavItem, Input, Toggle) with common interactive patterns

## Usage Example

```typescript
import { InteractiveWrapper, InteractivePresets } from './interactive-wrapper';

// Basic interactive wrapper
<InteractiveWrapper
  as="div"
  interactive={{
    enableHover: true,
    enablePress: true,
    enableRipple: true,
    enableAnimations: true
  }}
  onStateChange={(state) => console.log('State changed:', state)}
  className="p-4 bg-gray-100 rounded"
  onClick={() => alert('Clicked!')}
>
  Interactive content here
</InteractiveWrapper>

// Using preset components
<InteractivePresets.Card onClick={() => {}}>
  Card with hover effects
</InteractivePresets.Card>

<InteractivePresets.Button onClick={() => {}}>
  Interactive Button
</InteractivePresets.Button>

<InteractivePresets.Toggle 
  checked={isEnabled}
  onClick={() => setIsEnabled(!isEnabled)}
/>
```

The component integrates with a custom `useInteractiveState` hook to manage interactive behaviors and provides both low-level control through the main wrapper and high-level convenience through preset components.