# Detail Explorer

> A list of rules beside a stage that shows one specimen two ways, before the rule and after it, with the verdict and the fix in code.

Source: https://ritla.app/ui/detail-explorer

## Installation

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

```bash
npx ritla add detail-explorer
```

With the shadcn CLI instead:

```bash
npx shadcn@latest add @ritla/detail-explorer
```

Dependencies: `@base-ui/react`, `@phosphor-icons/react`

## Usage

```tsx
import { DetailExplorer } from "@/components/ui/detail-explorer";

<DetailExplorer
  chip='dir="rtl" lang="ar"'
  items={[
    {
      value: "phone",
      title: "Phone numbers",
      verdict: { before: "The digit groups swap places", after: "One number, in order" },
      fix: "unicode-bidi: isolate",
      render: (state) => (
        <p dir="rtl" lang="ar">
          اتصل بنا على {state === "before" ? "+966 55 123 4567" : <bdi dir="ltr">+966 55 123 4567</bdi>}
        </p>
      ),
    },
  ]}
/>
```

## Examples

### A tour that plays itself

With `autoPlay` the explorer walks its items by itself while it is on screen: “before”, then “after”, then the next. Picking a tab or a state stops it for good, its button pauses and resumes it, and it never runs when the reader asks for reduced motion.

Live preview: https://ritla.app/_kanz/preview/ltr/detail-explorer-tour

## API reference

### `DetailExplorer`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `items` | `DetailExplorerItem[]` | None | The rules: `value`, `title`, `description`, `caption`, `verdict`, `fix` and `render(state)`. |
| `chip` | `string` | None | A code chip at the stage's start: the setting every specimen shares. |
| `value / defaultValue / onValueChange` | `string` | None | The selected item, controlled or not. |
| `copy` | `{ list, states, before, after, pause, play }` | None | The list's and switch's names, the two states' labels and the tour button's labels; the default follows the page language. |
| `autoPlay` | `boolean` | `false` | A tour through the items, with a pause button. |
| `interval` | `number` | `4600` | One item's time in the tour, in ms. |

## Accessibility

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

- `Tab`: To the selected tab, then the Before / After switch, then the tour button.
- `ArrowDown` + `ArrowUp`: Between tabs when they are a column (from `md`).
- `ArrowLeft` + `ArrowRight`: Between tabs when they are a row on a phone, in reading order: in Arabic, ArrowLeft is next.

ARIA:

- The list is named tabs (“Details”), and the stage is their panel.
- Before and After are a named radio group (“Rendering”).
- The verdict is a polite live region, read when the state changes.
- The tour button says what it will do: “Pause the tour” or “Play the tour”.

## Arabic and RTL notes

Mirrors:

- The list on the right, the stage on the left; the selected tab's arrow points left.
- The tour's bar fills from the right.

Does not mirror:

- The code in the chip and the fix stays left to right.
- The specimens themselves: each carries its own `dir` and `lang`.

Numerals: The explorer writes no numbers itself; the specimens' numbers are as you write them.

Arabic typography: Tab titles `body-16` Medium and descriptions `body-14`; the verdict `body-14` Medium; code `body-12` monospace.

Mixed-direction text: Every “before” in the example is what the browser really draws without the rule: digits after Arabic letters become Arabic numbers in the bidi algorithm, so an un-isolated phone number's groups run right to left.