Toaster

const toasterFixture = {
  id: "toaster",
  triggerLabel: "Show toast",
  toast: {
    id: "toast-deployed",
    title: "Deployed",
    description: "ledger-api is live in iad.",
    variant: "success",
  },
} satisfies {
  id: string;
  triggerLabel: string;
  toast: {
    id: string;
    title: string;
    description: string;
    variant: "info" | "success" | "warning" | "error";
  };
};
 
import { Button, ToastProvider, Toaster, useToast } from "@grassroot/ui-react";
 
// Toast is a service API (provider/inject), not a controlled-prop component
// — the trigger has to be a real descendant of <ToastProvider> to read
// useToast(), so it's a small inline child here rather than a prop on
// <Toaster> itself. The pushed toast's id is fixture-supplied (not the
// adapter's internal counter), so the render is deterministic across
// frameworks and across repeat mounts on the same page.
function ToasterTrigger() {
  const { toast } = useToast();
  return (
    <Button
      onClick={() =>
        toast({
          id: toasterFixture.toast.id,
          title: toasterFixture.toast.title,
          description: toasterFixture.toast.description,
          variant: toasterFixture.toast.variant,
        })
      }
    >
      {toasterFixture.triggerLabel}
    </Button>
  );
}
 
export default function ToasterDemo() {
  return (
    <div>
      <ToastProvider>
        <ToasterTrigger />
        <Toaster />
      </ToastProvider>
    </div>
  );
}

<script setup lang="ts">
// Hand-authored — see ToasterTrigger.vue for why useToast() lives in a child.
import { ToastProvider, Toaster } from "@grassroot/ui-vue";
import ToasterTrigger from "./ToasterTrigger.vue";
</script>
 
<template>
  <div>
    <ToastProvider>
      <ToasterTrigger />
      <Toaster />
    </ToastProvider>
  </div>
</template>

import { Component, inject } from "@angular/core";
const toasterFixture = {
  id: "toaster",
  triggerLabel: "Show toast",
  toast: {
    id: "toast-deployed",
    title: "Deployed",
    description: "ledger-api is live in iad.",
    variant: "success",
  },
} satisfies {
  id: string;
  triggerLabel: string;
  toast: {
    id: string;
    title: string;
    description: string;
    variant: "info" | "success" | "warning" | "error";
  };
};
 
import {
  GrassrootButton,
  GrassrootToastProvider,
  GrassrootToaster,
  GrassrootToast,
} from "@grassroot/ui-angular";
 
// Hand-authored: Angular's toast API is a plain injectable service
// (providedIn: "root"), so unlike React/Vue/Svelte no child-component split
// is needed — inject(GrassrootToast) works directly in the component that
// also renders the (optional, wrap-for-parity) provider. The pushed toast's
// id is fixture-supplied, not generated, so the render is deterministic.
@Component({
  selector: "app-toaster-demo",
  standalone: true,
  imports: [GrassrootButton, GrassrootToastProvider, GrassrootToaster],
  template: `
    <div>
      <grassroot-toast-provider>
        <grassroot-button (click)="showToast()">{{ fixture.triggerLabel }}</grassroot-button>
        <grassroot-toaster />
      </grassroot-toast-provider>
    </div>
  `,
})
export class ToasterDemoComponent {
  private readonly toasts = inject(GrassrootToast);
  protected readonly fixture = toasterFixture;
 
  showToast(): void {
    this.toasts.toast({
      id: this.fixture.toast.id,
      title: this.fixture.toast.title,
      description: this.fixture.toast.description,
      variant: this.fixture.toast.variant,
    });
  }
}
 
export default ToasterDemoComponent;

<script lang="ts">
  // Hand-authored — see ToasterTrigger.svelte for why the toast call lives in a child.
  import { ToastProvider, Toaster } from "@grassroot/ui-svelte";
  import ToasterTrigger from "./ToasterTrigger.svelte";
</script>
 
<div>
  <ToastProvider>
    <ToasterTrigger />
    <Toaster />
  </ToastProvider>
</div>

/** @jsxImportSource solid-js */
// Hand-authored — see ToasterTrigger.tsx for why the toast call lives in a child.
import { ToastProvider, Toaster } from "@grassroot/ui-solid";
import ToasterTrigger from "./ToasterTrigger";
 
export default function ToasterDemo() {
  return (
    <div>
      <ToastProvider>
        <ToasterTrigger />
        <Toaster />
      </ToastProvider>
    </div>
  );
}