# ImpactPreview

> What a destructive action will change, row by row, before it is confirmed.

Category: Feedback. Docs page: https://rime.mjsons.net/components/impact-preview

## Installation

```bash
npx shadcn@latest add KezLahd/rime/impact-preview
```

ImpactPreview lists the consequences of an action (projects reassigned, sign-ins revoked) with severities, named affected records, and loading, error and nothing-affected states. TypeToConfirmModal embeds it.

## Usage

```tsx
import { ImpactPreview } from "@/components/ui";

<ImpactPreview items={[{ id: "a", severity: "destructive", title: "Signed out everywhere" }]} />
```

## Props: ImpactPreview

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` | `ReactNode` | `"Impact preview"` | Default "Impact preview". |
| `headingLevel` | `2 \| 3 \| 4` | `3` | Level of the small-caps heading. 3 inside a modal (the dialog title is the h2). |
| `statement` | `ReactNode` |  | A compact danger line under the heading, e.g. "This action cannot be undone". TypeToConfirmModal passes its consequencesTitle here. |
| `items` | `ImpactItem[]` |  | One row per consequence. Omit for a panel of prose only (children); an empty array renders the empty row ("Nothing else is affected"). |
| `children` | `ReactNode` |  | Plain text under the heading and above the rows: context the rows don't carry. |
| `loading` | `boolean` | `false` | The consequences are still being worked out on the server. |
| `loadingRows` | `number` | `3` | How many skeleton rows stand in while loading. Match the usual count. |
| `error` | `ReactNode \| boolean` |  | true for the default message, or the reason. Shown instead of the rows. |
| `onRetry` | `() => void` |  | Shows a Retry button in the error row. |
| `emptyTitle` | `ReactNode` | `"Nothing else is affected"` | Title of the row an empty items array renders. |
| `affectedLimit` | `number` | `5` | Affected lists longer than this collapse behind "Show N more". Default 5. |
| `className` | `string` |  |  |

## Examples

### Default

```tsx
<ImpactPreview statement="This action cannot be undone" items={ITEMS} />
```

## Theme tokens

Per-component tokens. Undeclared by default: the default below is the fallback the CSS uses. Set any of them at :root or on a wrapper to restyle every instance.

| Token | Default |
| --- | --- |
| `--r-circle` | `50%` |

System tokens it reads: `--danger-fill`, `--danger-ink`, `--danger-solid`, `--ease`, `--focus-ring`, `--font-body`, `--ink-body`, `--ink-brand`, `--ink-disabled`, `--ink-heading`, `--ink-muted`, `--ink-secondary`, `--line`, `--line-soft`, `--r-2xs`, `--r-lg`, `--r-sm`, `--r-xs`, `--shadow-input`, `--shadow-specular`, `--success-ink`, `--success-solid`, `--surface-solid`, `--surface-sunken`, `--text-caption`, `--text-small`, `--warning-fill`, `--warning-ink`, `--warning-solid`, `--wash-active`.

## Accessibility

- A list with a heading; severities are written out, not only coloured.

## Do

- State each row as an outcome: "3 projects are reassigned".

## Don't

- Don't hide consequences behind a disclosure.