Basic password strength with dynamic hint and icons

<!--
  Расхождение с апстримом: `IconPlaceholder` заменена инлайновым `<svg>`
  (lucide-react v0.545.0 "info") — см. docs/PORTING.md §5. `password`
  зафиксирован в начальном состоянии оригинала (`useState("")`), поэтому
  подсказка и иконка соответствуют пустому вводу — значения полей
  задаются фиксированными пропсами, чтобы статика совпадала без
  взаимодействия.
-->
<script setup lang="ts">
import { Field, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"
</script>

<template>
  <Field class="w-full max-w-xs">
    <FieldLabel for="password-strength">Password</FieldLabel>
    <Input id="password-strength" type="password" placeholder="Enter password" />
    <div class="flex items-center gap-2 text-xs transition-colors duration-200 text-muted-foreground">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        class="lucide lucide-info size-3.5 shrink-0"
      >
        <circle cx="12" cy="12" r="10" />
        <path d="M12 16v-4" />
        <path d="M12 8h.01" />
      </svg>
      <p>Use 8+ characters with a number and a special character.</p>
    </div>
  </Field>
</template>