Sonner

---
import {
  Button,
  Sonner
} from '@santi020k/lumen-astro'
---

<Sonner aria-label="Notifications" />
<Button variant="outline" data-ex-toast-trigger>Show toast</Button>

<script>
  document.querySelector('[data-ex-toast-trigger]')?.addEventListener('click', () => {
    document.dispatchEvent(new CustomEvent('ui:toast', {
      detail: { description: 'Your changes are live.', title: 'Saved', variant: 'success' }
    }))
  })
</script>

import { Button, Sonner } from '@santi020k/lumen-react'

export const Example = () => (
  <>
    <Sonner aria-label="Notifications" />
    <Button
      variant="outline"
      onClick={() => {
        document.dispatchEvent(new CustomEvent('ui:toast', {
          detail: { description: 'Your changes are live.', title: 'Saved', variant: 'success' }
        }))
      }}
    >
      Show toast
    </Button>
  </>
)

<script type="module">
  import { defineLumenElements } from '@santi020k/lumen-elements/define'

  defineLumenElements()
</script>

<lumen-sonner aria-label="Notifications"></lumen-sonner>
<lumen-button variant="outline" data-ex-toast-trigger>Show toast</lumen-button>

<script>
  document.querySelector('[data-ex-toast-trigger]')?.addEventListener('click', () => {
    document.dispatchEvent(new CustomEvent('ui:toast', {
      detail: { description: 'Your changes are live.', title: 'Saved', variant: 'success' }
    }))
  })
</script>