Modal

Smooth transitions with proper focus management

Uses AnimatePresence to coordinate enter/exit animations for both the backdrop and modal content.
Modal scales in from 95% (0.95) with a fade-in effect, creating a subtle “pop” entrance.
Backdrop fades in separately to provide visual layering and depth.
Click outside the modal (on the backdrop) to dismiss, with stopPropagation preventing clicks inside the modal from closing it.
Proper z-index layering ensures the backdrop (z-40) sits behind the modal content (z-50).
Exit animations reverse the entrance: modal scales down and fades out simultaneously with the backdrop.
Integrates with toast notifications to confirm actions when the user clicks “Confirm”.