`sonner.variants`

Purpose

Defines the sonnerToasterVariants cva slot for the chassis <Sonner> toaster host. Sonner manages its own stacking, animation, and visual treatment via CSS variables (--toaster-*); the chassis exposes a single empty cva slot so brand themes can inject incidental utility classes (safe-area padding, font-stack overrides) without forking the underlying library.

Features

Single registered cva: sonnerToasterVariants keyed "Sonner" so ThemePlugin.variantOverrides.Sonner can layer brand utilities.
Zero default classes — sonner paints itself; the chassis adds nothing by default.
Per Wave 3c finding #3, no z-index is layered on the host. Sonner uses position: fixed with its own --toaster-z-index CSS variable.

Usage: Basic Example

import { sonnerToasterVariants } from "@suaveplan/react-ui/components/sonner/sonner";

const className = sonnerToasterVariants();

Usage: Advanced Example

import { defineVariants } from "@suaveplan/react-ui/variants";
import type { ThemePlugin } from "@suaveplan/react-ui";

const brandTheme: ThemePlugin = {
    name: "brand",
    tokens: { /* ... */ },
    variantOverrides: {
        Sonner: defineVariants("Sonner", "pt-safe-top px-2", {
            variants: {},
            defaultVariants: {},
        }),
    },
};

API Reference

sonnerToasterVariants(): string — resolves to the empty base class by default. Returns a stable identity per call.

Implementation Notes

The empty base intentionally communicates "no chassis-side styling" to consumers reading the source. Any future visual treatment (e.g. role="region"-style backdrops, custom safe-area padding for mobile notch devices, or font-stack overrides for non-Latin glyph coverage) belongs in the brand theme override or in a sibling cva slot, not on this base — sonner's painting must remain authoritative so updates to the upstream library do not silently regress the chassis. The override path is exercised by the chassis e2e suite, which mounts a brand theme and asserts that the <ol data-sonner-toaster> host carries the merged className.

2.1 KiB Raw Blame History

sonner.variants