# Mirror Stage

> The same screen in English and in Arabic side by side around a centre axis, with notes on what each rule keeps or flips.

Source: https://ritla.app/ui/mirror-stage

## Installation

Installing from the registry is coming soon. Until then, these are the commands you will run.

```bash
npx ritla add mirror-stage
```

With the shadcn CLI instead:

```bash
npx shadcn@latest add @ritla/mirror-stage
```

Dependencies: `@phosphor-icons/react`

## Usage

```tsx
import { MirrorNote, MirrorStage } from "@/components/ui/mirror-stage";

<MirrorStage
  label="The same transfer form in English and in Arabic, mirrored around a centre line."
  caption="Mirror axis"
  start={<TransferScreen lang="en" />}
  end={<TransferScreen lang="ar" />}
  notes={<MirrorNote icon={CheckIcon}>The check stays a check</MirrorNote>}
  motion={{ pauseLabel: "Pause motion", playLabel: "Play motion" }}
/>
```

## API reference

### `MirrorStage`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `start / end` | `ReactNode` | None | The two screens, each in its own `dir` and `lang`, which the page sets. The page's own language goes at the start. |
| `label` | `string` | None | What the stage shows, in words: it is announced as one image. |
| `caption` | `ReactNode` | None | The words over the axis. |
| `notes` | `ReactNode` | None | `MirrorNote`s, top to bottom. |
| `noteRows` | `string` | None | The notes column's rows from md, so each note sits level with the row it explains. |
| `startAside / endAside` | `ReactNode` | None | Extra screens at the outer corners, from xl. |
| `motion` | `{ pauseLabel; playLabel }` | None | The pause control's words. Give it whenever anything inside moves for longer than five seconds. |

### `MirrorNote`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `icon` | `IconComponent` | None | A Phosphor or Ritla UI icon; directional ones mirror by the Ritla UI list. |
| `children` | `ReactNode` | None | The note. |

## Accessibility

Keyboard (keys as in left-to-right; arrows swap in right-to-left):

- `Tab`: To the pause control; the screens inside the stage take no focus.

ARIA:

- The stage is one image (`role="img"`) named by `label`; the screens are `inert`, so nobody tabs into a form that cannot be sent.
- The pause control is a real button outside the image; its words say what a press does, and it starts paused for visitors who ask for reduced motion.
- The screens' entrance from the axis does not run under reduced motion.

## Arabic and RTL notes

Mirrors:

- On an Arabic page the start screen sits on the right, and both screens enter from the axis side.
- Below md the axis folds away: start, the notes as a row, then end.

Does not mirror:

- Each screen keeps its own direction: the English screen is left to right on any page.
- The check in the notes never mirrors; the arrow does.

Numerals: Numbers inside the screens follow each component's numerals setting.

Arabic typography: Notes are `label-12` Medium, in the page's language font.

Mixed-direction text: The phone number in the Arabic screen stays left to right, because it is the real phone field.