Toast

// main.tsx or _app.tsx
import { ToastProvider, Toaster } from "@araf-ds/core"

function App() {
  return (
    <ToastProvider>
      <YourApp />
      <Toaster position="bottom-right" />
    </ToastProvider>
  )
}

import { toast } from "@araf-ds/core"

function SaveButton() {
  return (
    <Button onClick={() => toast({ title: "Changes saved" })}>
      Save
    </Button>
  )
}

toast({ title: "Settings saved" });

toast({
  title: "Profile updated",
  description: "Your changes have been saved.",
});

toast({
  variant: "success",
  title: "Payment successful",
  description: "Receipt sent to your email.",
});

toast({
  variant: "warning",
  title: "Storage almost full",
  description: "Free up space to continue syncing.",
});

toast({
  variant: "error",
  title: "Upload failed",
  description: "The file size exceeds the 10 MB limit.",
});

toast({
  title: "Message deleted",
  action: (
    <ToastAction altText="Undo" onClick={handleUndo}>
      Undo
    </ToastAction>
  ),
});