🎨 Add sonner UI component

src/components/ui/sonner/index.ts

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

src/components/ui/sonner/sonner.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import {
+    Toaster as Sonner,
+    type ToasterProps as SonnerProps,
+  } from "svelte-sonner";
+  import { mode } from "mode-watcher";
+
+  let { ...restProps }: SonnerProps = $props();
+</script>
+
+<Sonner
+  theme={mode.current}
+  class="toaster group"
+  toastOptions={{
+    classes: {
+      toast:
+        "group toast dark:group-[.toaster]:bg-neutral-900 group-[.toaster]:font-sans",
+      description: "group-[.toast]:text-xs font-mono",
+    },
+  }}
+  {...restProps}
+/>