A pre-configured wrapper around the [Sonner](https://sonner.emilkowal.ski/) toast library, styled with OpenFrame Design System (`ods-*`) tokens and fixed to dark theme, bottom-right position. ## Key Components - **`Toaster`** — Drop-in toast container component. Accepts all native `Sonner` props via spread, with ODS-themed defaults pre-applied. ## ODS Token Mapping | Toast Part | Tokens Applied | |---|---| | Base toast | `ods-card`, `ods-text-primary`, `ods-border` | | Description | `ods-text-secondary` | | Action button | `ods-accent`, `ods-text-on-accent` | | Cancel button | `ods-bg-surface`, `ods-text-secondary` | | Error variant | `ods-error-secondary`, `ods-error` border | | Success variant | `ods-success-secondary`, `ods-success` border | ## Usage Example Mount once at the app root (e.g. layout), then trigger toasts anywhere: ```typescript // app/layout.tsx import { Toaster } from "@/components/ui/sonner" export default function RootLayout({ children }) { return ( {children} ) } ``` ```typescript // anywhere in the app import { toast } from "sonner" toast.success("Device synced successfully.") toast.error("Failed to connect to endpoint.") toast("Ticket #1042 updated.", { description: "Priority changed to High." }) ``` Override defaults by passing props directly to ``: ```typescript ``` ## Source [`sonner.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/sonner.tsx)