# PinField: API

## Пропсы корня

| Проп | Тип | По умолчанию | Обязательный | Описание |
| --- | --- | --- | --- | --- |
| `value` | `string` | — | Нет | Контролируемый код. |
| `defaultValue` | `string` | `''` | Нет | Начальный код для неконтролируемого использования. По умолчанию `''`. |
| `onChangeValue` | `(value: string) => void` | — | Нет | Вызывается с кодом при его изменении. |
| `disabled` | `boolean` | — | Нет | Отключает поле ввода, делая его неинтерактивным. Также применяет визуальный стиль отключённого состояния. |
| `placeholder` | `string` | — | Нет | Символ-заполнитель, который показывается, когда поле пустое. |
| `size` | `PinFieldSize` | `'md'` | Нет | Визуальный размер поля PIN-кода. Влияет на габариты и размер шрифта. |
| `error` | `boolean` | — | Нет | Показывает поле в состоянии ошибки. |
| `ref` | `Ref<HTMLDivElement>` | — | Нет | Ref на корневой элемент. |
| `mask` | `Array<RegExp \| string> \| RegExp` | — | Нет | Символы, которые принимает поле: RegExp для всего значения или массив с RegExp или фиксированным символом для каждой позиции. По умолчанию — цифры. |
| `maxLength` | `number` | `4` | Нет | Количество символов в коде. По умолчанию `4`. |

Также принимает все атрибуты `<div>`.

## Дочерние части

- `PinFieldInput`: инпут, который хранит настоящее значение и обрабатывает фокус.
- `PinFieldSlot`: видимый слот для одного индекса.
- `PinFieldSeparator`: визуальный разделитель между группами.

### `PinFieldSlot`

| Проп | Тип | По умолчанию | Обязательный | Описание |
| --- | --- | --- | --- | --- |
| `index` | `number` | — | Да | Индекс слота в последовательности PinField (с нуля). |

Также принимает все атрибуты `<div>`.

### `PinFieldSeparator`

| Проп | Тип | По умолчанию | Обязательный | Описание |
| --- | --- | --- | --- | --- |
| `size` | `PinFieldSize` | — | Нет | Управляет визуальным размером разделителя. Соответствует размеру окружающих элементов `PinField`. |

Также принимает все атрибуты `<div>`.

### `PinFieldInput`

| Проп | Тип | По умолчанию | Обязательный | Описание |
| --- | --- | --- | --- | --- |
| `ref` | `Ref<HTMLInputElement>` | — | Нет | Позволяет получить ref на экземпляр компонента. После размонтирования компонента React установит `ref.current` в `null` (или вызовет ref с `null`, если передан колбэк-ref). |

Также принимает все атрибуты `<input>`.

## Типы

- `PinFieldProps`
- `PinFieldInputProps`
- `PinFieldSlotProps`
- `PinFieldSeparatorProps`
- `PinFieldSize`

## Модель состояния

- Корень отслеживает `value`, индекс активного слота и состояние «выделено всё».
- `PinFieldInput` — настоящий редактируемый элемент управления.
- Слоты получают из контекста содержимое, активное состояние, состояние плейсхолдера и стили отключённости и ошибки.
- Корень принимает `value`, `defaultValue` и `onChangeValue`; `PinFieldInput` читает значение из корня и по-прежнему вызывает собственные `onChange` и `onInput`. Сброс формы восстанавливает `defaultValue`, если поле не контролируемое.
- `disabled` и `maxLength` задаются только на `PinField`, поэтому инпут и слоты всегда согласованы.
- `placeholder` корня одновременно служит плейсхолдером инпута.