# Toast

> Toast notifications (Sonner), themed and theme-synced.

Import from `@aspyn-io/kit`. Scaffold source: `npx shadcn@latest add https://design.aspyn.io/r/toast.json`

## Install

```tsx
import { Toaster, toast } from "@aspyn-io/kit";
```

### Setup + firing toasts

Mount Toaster once in your root layout (inside ThemeProvider: it syncs to light/dark automatically), then call toast() from anywhere.

```tsx
// app/layout.tsx
<ThemeProvider>
  {children}
  <Toaster />
</ThemeProvider>

// anywhere
toast("Route created");
toast.success("Appointment scheduled");
toast.error("Payment failed", { description: "Card was declined." });
toast("Sync complete", { action: { label: "View", onClick: () => {} } });
```

### Variants

toast.success / toast.info / toast.warning / toast.error each render with their matching icon.

```tsx
toast.success("Appointment scheduled");
toast.info("Sync started");
toast.warning("Low on credits");
toast.error("Payment failed");
```

### Loading + promise

toast.promise swaps a loading toast for a success or error message when the promise settles; toast.loading gives you a spinner you dismiss yourself.

```tsx
// tie a toast to an async task
toast.promise(saveRoute(), {
  loading: "Saving route…",
  success: "Route saved",
  error: "Could not save route",
});

// or drive it manually
const id = toast.loading("Uploading…");
// later: toast.success("Uploaded", { id });
```

## Notes

- Inherited from shadcn/ui (Sonner). Promise toasts (toast.promise), dismissal, stacking, and the success/info/warning/error/loading icons come free.
- shadcn's Toaster reads the theme via next-themes; without a next-themes provider it follows the OS (system). To sync it to a manual light/dark toggle, wrap the app in next-themes' ThemeProvider.