Input with character counter

<!--
  Расхождение с апстримом: оригинал управляет `value` через `useState("")`
  и обновляет счётчик по `onChange`. Порт фиксирует значение статически
  (пустая строка, как и начальное состояние апстрима) — см. инструкцию
  порта: значения полей задаются фиксированными пропсами, чтобы статика
  совпадала без взаимодействия.
-->
<script setup lang="ts">
import { Field, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"

const value = ""
const maxLength = 50
</script>

<template>
  <Field class="max-w-xs">
    <div class="flex items-center justify-between">
      <FieldLabel for="bio">Description</FieldLabel>
      <span class="text-muted-foreground text-xs">{{ `${value.length}/${maxLength}` }}</span>
    </div>
    <Input id="bio" :maxlength="maxLength" :value="value" placeholder="Description of your project" />
  </Field>
</template>