{% comment %}NexUI Toast v1.0.0

Place this ONCE in your base template (before </body>).
Also include toast.js before Alpine.js initializes.

Trigger a toast from anywhere:
  <button @click="$dispatch('toast', { title: 'Saved!', description: 'Changes saved.', variant: 'default' })">
    Save
  </button>

Variants: default, success, destructive
Duration: default 4000ms — pass duration in ms to override.
{% endcomment %}
<div
  x-data="silkuiToast()"
  x-on:toast.window="show($event.detail)"
  class="fixed bottom-4 right-4 z-[100] flex flex-col gap-2 {{ class }}"
  aria-live="polite"
>
  <template x-for="toast in toasts" :key="toast.id">
    <div
      x-show="toast.visible"
      x-transition:enter="transition ease-out duration-300"
      x-transition:enter-start="opacity-0 translate-y-2"
      x-transition:enter-end="opacity-100 translate-y-0"
      x-transition:leave="transition ease-in duration-200"
      x-transition:leave-start="opacity-100 translate-y-0"
      x-transition:leave-end="opacity-0 translate-y-2"
      class="pointer-events-auto flex w-full max-w-sm items-start gap-3 rounded-lg border bg-background p-4 shadow-lg"
      x-bind:class="{
        'border-destructive/50 text-destructive': toast.variant === 'destructive',
        'border-green-500/50 text-green-700': toast.variant === 'success'
      }"
      role="alert"
    >
      <div class="flex-1 pt-0.5">
        <p class="text-sm font-semibold" x-text="toast.title"></p>
        <p class="mt-1 text-sm text-muted-foreground" x-show="toast.description" x-text="toast.description"></p>
      </div>
      <button
        type="button"
        x-on:click="remove(toast.id)"
        class="shrink-0 rounded-md opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring"
        aria-label="Close notification"
      >
        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
      </button>
    </div>
  </template>
</div>