Basic OTP input.

<!--
  Примитив (packages/ui/src/ui/input-otp) заменяет npm-пакет `input-otp`
  на reka-ui `PinInput`: длина кода определяется числом `InputOTPSlot`
  (а не пропом `maxLength`, которого у `PinInputRoot` нет), `pattern`/
  `required` (валидация ввода/HTML5) тоже не имеют прямого аналога у
  `PinInputRoot` — не влияют на статичный рендер, поэтому не перенесены
  (см. docs/PORTING.md §5, `ui-input-otp`, известный класс расхождений
  при замене примитива).
-->
<script setup lang="ts">
import { Field, FieldLabel } from "@/components/ui/field"
import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from "@/components/ui/input-otp"
</script>

<template>
  <div class="flex items-center justify-center">
    <Field>
      <FieldLabel for="simple-otp">Simple OTP</FieldLabel>
      <InputOTP id="simple-otp">
        <InputOTPGroup>
          <InputOTPSlot :index="0" />
          <InputOTPSlot :index="1" />
          <InputOTPSlot :index="2" />
        </InputOTPGroup>
        <InputOTPSeparator />
        <InputOTPGroup>
          <InputOTPSlot :index="3" />
          <InputOTPSlot :index="4" />
          <InputOTPSlot :index="5" />
        </InputOTPGroup>
      </InputOTP>
    </Field>
  </div>
</template>