Number field in form

<!--
  Упрощение (не влияет на статичный рендер, тот же приём, что и в
  `c-autocomplete-12.vue`): `react-hook-form`/`zod`/`sonner` из оригинала не
  подтянуты — форма ни разу не отправляется в статичном скриншоте, поэтому
  валидация и toast-уведомление никогда не видны. Значение поля — обычный
  `ref`, `data-invalid` всегда `"false"` (форма не тронута, ошибки нет),
  что даёт тот же закрытый DOM, что и у оригинала до первого submit.
  Голый `data-invalid` во Vue-шаблоне компилируется в пустую строку и не
  матчится темой (docs/PORTING.md §16) — значение передано явно.
-->
<script setup lang="ts">
import { ref } from "vue"
import { NumberField, NumberFieldDecrement, NumberFieldGroup, NumberFieldIncrement, NumberFieldInput } from "@/components/reui/number-field"
import { Button } from "@/components/ui/button"
import { Field, FieldDescription, FieldGroup, FieldLabel, FieldSet } from "@/components/ui/field"

const amount = ref(5)

function reset() {
  amount.value = 5
}
</script>

<template>
  <div class="w-full max-w-68">
    <form @submit.prevent>
      <FieldGroup>
        <FieldSet>
          <FieldGroup>
            <Field data-invalid="false">
              <FieldLabel for="number-field-amount">Amount</FieldLabel>
              <NumberField id="number-field-amount" v-model="amount" :min="0" :max="100">
                <NumberFieldGroup :aria-invalid="false">
                  <NumberFieldDecrement />
                  <NumberFieldInput />
                  <NumberFieldIncrement />
                </NumberFieldGroup>
              </NumberField>
              <FieldDescription>Enter an amount between 10 and 100.</FieldDescription>
            </Field>
          </FieldGroup>
        </FieldSet>
        <Field orientation="horizontal">
          <Button variant="outline" type="button" class="flex-1" @click="reset">Cancel</Button>
          <Button type="submit" class="flex-1">Submit</Button>
        </Field>
      </FieldGroup>
    </form>
  </div>
</template>