Toast Variants
Relevant source files
The following files were used as context for generating this wiki page:
The @pcstyle/toast library provides a robust notification system designed for React applications, featuring a variety of functional and aesthetic "variants." Functional variants define the semantic meaning of a notification (e.g., success, error, loading), while aesthetic variants, controlled via the ToastProvider, determine the visual theme (Cyberpunk vs. Minimal).
Sources: package.json:1-5, src/provider.tsx:8-11, src/store.ts:5-16
Functional Toast Types
The system categorizes toasts into several types that dictate their behavior and default metadata. These types are managed by the ToastStore and exposed through a convenient toast API.
| Type | Purpose | Behavior Notes |
|---|---|---|
success | Indicates a successful operation. | Automatically dismissed after duration. |
error | Indicates an operation failure. | Automatically dismissed after duration. |
info | Provides neutral information to the user. | Automatically dismissed after duration. |
warning | Warns the user about potential issues. | Automatically dismissed after duration. |
loading | Indicates an ongoing background process. | Does not automatically dismiss. |
default | Standard notification without specific semantic weight. | Automatically dismissed after duration. |
Sources: src/store.ts:5, src/store.ts:44-46, src/index.ts:13-33
Promise-Based Toasts
The library supports a promise variant that transitions through multiple states. It starts with a loading state and automatically updates to either success or error based on the resolution of the provided Promise.
The logic for updating these states ensures that the same notification ID is maintained throughout the lifecycle of the asynchronous operation.
Sources: src/index.ts:41-61
Visual Themes
The system supports two distinct visual variants defined at the provider level: cyber and minimal. These themes alter the CSS classes and animations applied to every toast in the stack.
Cyber Theme
The cyber theme is the default aesthetic, following a high-contrast, "cyberpunk" design language.
- Background: Semi-transparent black (
bg-black/90). - Border: Magenta/Neon glow (
border-[#ff00ff]/30). - Typography: Monospaced font (
font-mono) with uppercase labels. - Decorative Elements: Includes an animated top-border pulse effect using a gradient.
Minimal Theme
The minimal theme provides a clean, standard UI appearance.
- Background: Solid white.
- Border: Light zinc/gray (
border-zinc-100). - Typography: Sans-serif (default) with black text.
- Shadow: Large standard elevation shadow (
shadow-xl).
Sources: src/provider.tsx:31-60
Architecture and Data Flow
The relationship between the functional types (defined in the store) and the visual variants (defined in the provider) is managed via a subscription model.
The ToastProvider maintains a local state of toasts by subscribing to the ToastStore. Whenever a variant is triggered (e.g., toast.error()), the store updates its internal array and notifies the provider to re-render.
Sources: src/store.ts:18-30, src/provider.tsx:14-16
Summary
Toast variants in this system are bifurcated into Functional Types (Success, Error, Info, Warning, Loading, Default) which handle logic and lifecycle, and Thematic Variants (Cyber, Minimal) which handle presentation. This separation allows developers to trigger semantically correct notifications that automatically adapt to the application's configured visual style.
Sources: src/index.ts:1-61, src/provider.tsx:31-40