{/* prettier-ignore-start */}

import { Meta, Canvas, ArgTypes } from "@storybook/addon-docs/blocks";
import { Toaster } from "./Toaster";
import { ToastOptionsDoc } from "./ToastOptionsDoc";
import * as ToastStories from "./Toast.stories";

<Meta of={ToastStories} />

# Toast

Toast notifications provide brief, non-blocking feedback messages to users. Built on [Sonner](https://sonner.emilkowal.ski/), toasts automatically dismiss after a configurable duration and support keyboard dismissal.

## Usage

```tsx
import { Toaster, toast } from "@simplybusiness/mobius";

// 1. Add the Toaster component once at your app root
function App() {
  return (
    <>
      <Toaster />
      <YourApp />
    </>
  );
}

// 2. Call toast functions from anywhere in your app
function SaveButton() {
  const handleSave = async () => {
    await saveData();
    toast.success("Your changes have been saved");
  };

  return <Button onClick={handleSave}>Save</Button>;
}
```

## Variants

Toasts come in four variants that match the Alert component styling:

<Canvas of={ToastStories.AllVariants} />

### Info

Use for neutral informational messages.

```tsx
toast.info("Your session will expire in 5 minutes");
```

### Success

Use to confirm successful operations.

```tsx
toast.success("Your changes have been saved");
```

### Warning

Use to alert users to potential issues.

```tsx
toast.warning("Please review your input before continuing");
```

### Error

Use to inform users of errors or failures.

```tsx
toast.error("Something went wrong. Please try again.");
```

## With Title

Add a title for more structured messages:

<Canvas of={ToastStories.WithTitle} />

```tsx
toast.success("Your quote has been saved and sent to your email.", {
  title: "Quote saved",
});
```

## Toaster Props

<ArgTypes of={Toaster} />

## Toast Options

All toast functions accept an optional second parameter with these options:

<ArgTypes of={ToastOptionsDoc} />

## Dismissing Toasts

Toasts can be dismissed in several ways:

1. **Auto-dismiss**: After the configured duration (default 4 seconds)
2. **Close button**: Clicking the X button
3. **Keyboard**: Pressing Escape
4. **Programmatically**: Using `toast.dismiss()`

```tsx
// Dismiss all toasts
toast.dismiss();

// Dismiss a specific toast by ID
const toastId = toast.info("Loading...");
toast.dismiss(toastId);
```

## Accessibility

- Toasts use appropriate ARIA attributes for announcements
- Keyboard dismissal with Escape key
- Respects `prefers-reduced-motion` for animations
- Focus management for action buttons

## Interactive Demo

Press 'R' to show a random toast in the interactive demo below:

<Canvas of={ToastStories.InteractiveDemo} />

{/* prettier-ignore-end */}
