From d78acff5a60985303729b5edf486afd84fa40a52 Mon Sep 17 00:00:00 2001
From: pheralb <pablohdez4340@gmail.com>
Date: Mon, 25 Aug 2025 19:04:40 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Add=20sonner=20UI=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ui/sonner/index.ts      |  1 +
 src/components/ui/sonner/sonner.svelte | 22 ++++++++++++++++++++++
 2 files changed, 23 insertions(+)
 create mode 100644 src/components/ui/sonner/index.ts
 create mode 100644 src/components/ui/sonner/sonner.svelte

diff --git a/src/components/ui/sonner/index.ts b/src/components/ui/sonner/index.ts
new file mode 100644
index 0000000..1ad9f4a
--- /dev/null
+++ b/src/components/ui/sonner/index.ts
@@ -0,0 +1 @@
+export { default as Toaster } from "./sonner.svelte";
diff --git a/src/components/ui/sonner/sonner.svelte b/src/components/ui/sonner/sonner.svelte
new file mode 100644
index 0000000..3ea4de7
--- /dev/null
+++ b/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}
+/>