# Cancel Flow

A three step cancellation: a reason with an optional note, a retention offer, then a final confirm.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/cancel-flow
```

## Usage

```tsx
import { CancelFlow } from '@/components/fetaui/cancel-flow'

export function Example() {
  return <CancelFlow plan="Team plan" summary={summary} renews="Renews Oct 14" reasons={reasons} offer={offer} onCancel={cancel} />
}
```

## API

| Prop | Type | Default |
|---|---|---|
| plan | string | required |
| summary | string | required |
| renews | string | required |
| reasons | CancelReason[] | required |
| offer | object | required |
| confirm | object |  |
| noteHint, notePlaceholder | string |  |
| noteLimit | number | 500 |
| onAccept | (reason) => void |  |
| onCancel | (reason, note) => void or Promise |  |
| defaultStep | 0, 1, 2 | 0 |
| defaultReason | string |  |
| animated | boolean | true |

## When to use

- Before a paid plan ends, when an honest offer may help.

## When not to use

- To make leaving hard: Cancel anyway must stay one press away.

## Accessibility

- Reasons are a labelled radio group of native radios.
- The step bar is an ordered list with the current step marked.
- Focus moves to the new heading on each step.

## Motion

- The panel fades and rises 8 over 400 ms, and rows fade in 40 ms apart.
- Each step fades and rises 8 over 240 ms.
- The step bar fills over 240 ms.
- With reduced motion, the panel fades only and values swap.