Method	Parameters	Description
add	{ severity: string, summary: string, detail?: string, life?: number }	Adds a new toast notification
remove	id: string	Removes a specific toast
toasts	-	Reactive array of active toasts

Styling

Base styling with Tailwind:

.pu-toast {
  @apply flex items-center justify-between p-4 gap-2;
  @apply rounded-lg shadow-md transition-all duration-300;
  @apply ease-in-out border opacity-100 transform scale-100;
}

Severity variants:

.pu-toast--primary {
  @apply bg-primary-light-500 text-primary-light-50 border-transparent;
}

.pu-toast--secondary {
  @apply bg-white text-primary-light-500 border-primary-light-500 border-2;
}

Transition Effects

Smooth enter/leave animations:

.toast-transition-enter-active,
.toast-transition-leave-active {
  @apply transition-all duration-300;
}

.toast-transition-enter-from {
  @apply opacity-0 transform translate-y-4;
}

.toast-transition-leave-to {
  @apply opacity-0 transform translate-y-4;
}

Features

Multiple display positions
Customizable duration
Interactive close button
Smooth transitions
Severity level styling

Dependencies

toastStore for state management
PUIcon component for icons
Tailwind CSS for styling
Vue Transition component