feat: replace sonner with base-ui toast component

apps/app/src/features/auth/components/forgot-password-form.tsx

@@ -1,6 +1,6 @@
 import { FieldGroup } from "@init/ui/components/field"
 import { useForm } from "@init/ui/components/form"
-import { toast } from "@init/ui/components/sonner"
+import { toast } from "@init/ui/components/toast"
 import { useServerFn } from "@tanstack/react-start"
 import { forgotPassword } from "#features/auth/server/functions.ts"
 import { ForgotPasswordFormSchema as schema } from "#features/auth/validation.ts"
@@ -14,8 +14,9 @@ export default function ForgotPasswordForm() {
         data: { email: value.email },
       })
 
-      toast.success("Password reset link sent to your email", {
-        position: "bottom-center",
+      toast.add({
+        title: "Password reset link sent to your email",
+        type: "success",
       })
 
       form.reset()

apps/app/src/features/auth/components/reset-password-form.tsx

@@ -1,6 +1,6 @@
 import { FieldGroup } from "@init/ui/components/field"
 import { useForm } from "@init/ui/components/form"
-import { toast } from "@init/ui/components/sonner"
+import { toast } from "@init/ui/components/toast"
 import { useNavigate } from "@tanstack/react-router"
 import { ResetPasswordFormSchema as schema } from "#features/auth/validation.ts"
 import { authClient } from "#shared/auth.ts"
@@ -17,10 +17,10 @@ export default function ResetPasswordForm({ token }: { token: string }) {
         },
         {
           onError: ({ error }) => {
-            toast.error(error.message, { position: "bottom-center" })
+            toast.add({ title: error.message, type: "error" })
           },
           onSuccess: () => {
-            toast.success("Your password has been reset", { position: "bottom-center" })
+            toast.add({ title: "Your password has been reset", type: "success" })
             void navigate({ to: "/sign-in" })
           },
         }

apps/app/src/features/auth/components/sign-in-with-password-form.tsx

@@ -1,7 +1,7 @@
 import { Button } from "@init/ui/components/button"
 import { FieldGroup } from "@init/ui/components/field"
 import { useForm } from "@init/ui/components/form"
-import { toast } from "@init/ui/components/sonner"
+import { toast } from "@init/ui/components/toast"
 import { Link, useNavigate } from "@tanstack/react-router"
 import { AUTHENTICATED_PATHNAME } from "#features/auth/constants.ts"
 import { SignInWithPasswordFormSchema as schema } from "#features/auth/validation.ts"
@@ -16,7 +16,7 @@ export default function SignInWithPasswordForm() {
         { email: value.email, password: value.password },
         {
           onError: (error) => {
-            toast.error(error.error.message, { position: "bottom-center" })
+            toast.add({ title: error.error.message, type: "error" })
           },
           onSuccess: () => {
             void navigate({ to: AUTHENTICATED_PATHNAME })

apps/app/src/features/auth/components/sign-in-with-social-buttons.tsx

@@ -1,6 +1,6 @@
 import { Button } from "@init/ui/components/button"
 import { Icon } from "@init/ui/components/icon"
-import { toast } from "@init/ui/components/sonner"
+import { toast } from "@init/ui/components/toast"
 import { cn } from "@init/utils/ui"
 import { useState } from "react"
 import { AUTHENTICATED_PATHNAME } from "#features/auth/constants.ts"
@@ -21,7 +21,7 @@ export function SignInWithGoogleButton({ className }: { className?: string }) {
           fetchOptions: {
             onError() {
               setLoading(false)
-              toast.error("Failed to sign in with Google")
+              toast.add({ title: "Failed to sign in with Google", type: "error" })
             },
           },
           provider: "google",
@@ -59,7 +59,7 @@ export function SignInWithGitHubButton({ className }: { className?: string }) {
           fetchOptions: {
             onError() {
               setLoading(false)
-              toast.error("Failed to sign in with GitHub")
+              toast.add({ title: "Failed to sign in with GitHub", type: "error" })
             },
           },
           provider: "github",

apps/app/src/shared/components/providers.tsx

@@ -1,7 +1,7 @@
 import type { Theme } from "@init/ui/constants"
 import type { ReactNode } from "react"
-import { Toaster } from "@init/ui/components/sonner"
 import { ThemeProvider } from "@init/ui/components/theme"
+import { Toaster } from "@init/ui/components/toast"
 import { TooltipProvider } from "@init/ui/components/tooltip"
 
 export default function Providers({

packages/ui/package.json

@@ -22,7 +22,9 @@
   "dependencies": {
     "@base-ui/react": "1.6.0",
     "@init/utils": "workspace:*",
+    "@shadcn/react": "0.3.0",
     "@tanstack/react-form": "1.27.7",
+    "@tanstack/react-table": "9.0.0",
     "class-variance-authority": "0.7.1",
     "cmdk": "1.1.1",
     "date-fns": "4.1.0",
@@ -31,14 +33,13 @@
     "react-day-picker": "^10.0.1",
     "react-icons": "5.5.0",
     "react-resizable-panels": "4.12.2",
-    "recharts": "3.10.1",
-    "sonner": "2.0.7"
+    "recharts": "3.10.1"
   },
   "devDependencies": {
     "@tooling/tsconfig": "workspace:*",
     "@types/react": "19.2.4",
     "@types/react-dom": "19.1.9",
-    "shadcn": "4.15.0",
+    "shadcn": "4.16.2",
     "tailwindcss": "4.3.3",
     "tw-animate-css": "1.4.0",
     "typescript": "7.0.2"