From 8a9687f1906c643c2b09b9c90609081276bdcfbb Mon Sep 17 00:00:00 2001
From: icarus <eurfelux@gmail.com>
Date: Fri, 12 Dec 2025 18:45:48 +0800
Subject: [PATCH] feat(ui): add sonner toaster and next-themes support

- Add sonner package for toast notifications with custom icons and styling
- Add next-themes package for theme support
- Create new Toaster component with theme-aware styling
---
 packages/ui/package.json                      |  2 +
 .../ui/src/components/primitives/sonner.tsx   | 38 +++++++++++++++++++
 yarn.lock                                     | 22 +++++++++++
 3 files changed, 62 insertions(+)
 create mode 100644 packages/ui/src/components/primitives/sonner.tsx

diff --git a/packages/ui/package.json b/packages/ui/package.json
index 31e65d0bd4..32602956f0 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -62,7 +62,9 @@
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "lucide-react": "^0.545.0",
+    "next-themes": "^0.4.6",
     "react-dropzone": "^14.3.8",
+    "sonner": "^2.0.7",
     "tailwind-merge": "^2.5.5"
   },
   "devDependencies": {
diff --git a/packages/ui/src/components/primitives/sonner.tsx b/packages/ui/src/components/primitives/sonner.tsx
new file mode 100644
index 0000000000..9f46e06d5c
--- /dev/null
+++ b/packages/ui/src/components/primitives/sonner.tsx
@@ -0,0 +1,38 @@
+import {
+  CircleCheckIcon,
+  InfoIcon,
+  Loader2Icon,
+  OctagonXIcon,
+  TriangleAlertIcon,
+} from "lucide-react"
+import { useTheme } from "next-themes"
+import { Toaster as Sonner, type ToasterProps } from "sonner"
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      icons={{
+        success: <CircleCheckIcon className="size-4" />,
+        info: <InfoIcon className="size-4" />,
+        warning: <TriangleAlertIcon className="size-4" />,
+        error: <OctagonXIcon className="size-4" />,
+        loading: <Loader2Icon className="size-4 animate-spin" />,
+      }}
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+          "--border-radius": "var(--radius)",
+        } as React.CSSProperties
+      }
+      {...props}
+    />
+  )
+}
+
+export { Toaster }
diff --git a/yarn.lock b/yarn.lock
index e88e1bbe9a..053712671e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2252,9 +2252,11 @@ __metadata:
     framer-motion: "npm:^12.23.12"
     linguist-languages: "npm:^9.0.0"
     lucide-react: "npm:^0.545.0"
+    next-themes: "npm:^0.4.6"
     react: "npm:^19.0.0"
     react-dom: "npm:^19.0.0"
     react-dropzone: "npm:^14.3.8"
+    sonner: "npm:^2.0.7"
     storybook: "npm:^10.0.5"
     styled-components: "npm:^6.1.15"
     tailwind-merge: "npm:^2.5.5"
@@ -23693,6 +23695,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"next-themes@npm:^0.4.6":
+  version: 0.4.6
+  resolution: "next-themes@npm:0.4.6"
+  peerDependencies:
+    react: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
+  checksum: 10c0/83590c11d359ce7e4ced14f6ea9dd7a691d5ce6843fe2dc520fc27e29ae1c535118478d03e7f172609c41b1ef1b8da6b8dd2d2acd6cd79cac1abbdbd5b99f2c4
+  languageName: node
+  linkType: hard
+
 "no-case@npm:^3.0.4":
   version: 3.0.4
   resolution: "no-case@npm:3.0.4"
@@ -27901,6 +27913,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"sonner@npm:^2.0.7":
+  version: 2.0.7
+  resolution: "sonner@npm:2.0.7"
+  peerDependencies:
+    react: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    react-dom: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+  checksum: 10c0/6966ab5e892ed6aab579a175e4a24f3b48747f0fc21cb68c3e33cb41caa7a0eebeb098c210545395e47a18d585eb8734ae7dd12d2bd18c8a3294a1ee73f997d9
+  languageName: node
+  linkType: hard
+
 "source-map-js@npm:^1.0.1, source-map-js@npm:^1.2.0, source-map-js@npm:^1.2.1":
   version: 1.2.1
   resolution: "source-map-js@npm:1.2.1"