Dev branch

resources/js/Components/ui/sonner/Sonner.vue

@@ -0,0 +1,45 @@
+<script setup>
+import { Toaster as Sonner } from "vue-sonner";
+
+const props = defineProps({
+  id: { type: String, required: false },
+  invert: { type: Boolean, required: false },
+  theme: { type: String, required: false },
+  position: { type: String, required: false },
+  closeButtonPosition: { type: String, required: false },
+  hotkey: { type: Array, required: false },
+  richColors: { type: Boolean, required: false },
+  expand: { type: Boolean, required: false },
+  duration: { type: Number, required: false },
+  gap: { type: Number, required: false },
+  visibleToasts: { type: Number, required: false },
+  closeButton: { type: Boolean, required: false },
+  toastOptions: { type: Object, required: false },
+  class: { type: String, required: false },
+  style: { type: Object, required: false },
+  offset: { type: [Object, String, Number], required: false },
+  mobileOffset: { type: [Object, String, Number], required: false },
+  dir: { type: String, required: false },
+  swipeDirections: { type: Array, required: false },
+  icons: { type: Object, required: false },
+  containerAriaLabel: { type: String, required: false },
+});
+</script>
+
+<template>
+  <Sonner
+    class="toaster group"
+    v-bind="props"
+    :toast-options="{
+      classes: {
+        toast:
+          'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
+        description: 'group-[.toast]:text-muted-foreground',
+        actionButton:
+          'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
+        cancelButton:
+          'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',
+      },
+    }"
+  />
+</template>

resources/js/Components/ui/sonner/index.js

@@ -0,0 +1 @@
+export { default as Toaster } from "./Sonner.vue";