Number field with spinner buttons

<!--
  IconPlaceholder заменена инлайновым `<svg>` (lucide "chevron-up"/
  "chevron-down"), тем же приёмом, что и в других адаптированных блоках.
-->
<script setup lang="ts">
import { NumberField, NumberFieldDecrement, NumberFieldGroup, NumberFieldIncrement, NumberFieldInput, NumberFieldScrubArea } from "@/components/reui/number-field"
</script>

<template>
  <div class="w-full max-w-48">
    <NumberField :default-value="5" :min="0" :max="100">
      <NumberFieldScrubArea label="Amount" />
      <NumberFieldGroup>
        <NumberFieldInput class="text-start" />

        <div class="border-input bg-muted/30 rounded-lg m-px flex shrink-0 flex-col overflow-hidden border">
          <NumberFieldIncrement class="border-input hover:bg-accent focus-visible:bg-accent flex h-3.5 w-full flex-1 shrink-0 items-center rounded-none! border-b px-1.5 leading-none">
            <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"
              aria-hidden="true"
              class="size-3.5"
            ><path d="m18 15-6-6-6 6" /></svg>
          </NumberFieldIncrement>
          <NumberFieldDecrement class="hover:bg-accent focus-visible:bg-accent flex h-3.5 w-full flex-1 shrink-0 items-center rounded-none! px-1.5 leading-none">
            <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"
              aria-hidden="true"
              class="size-3.5"
            ><path d="m6 9 6 6 6-6" /></svg>
          </NumberFieldDecrement>
        </div>
      </NumberFieldGroup>
    </NumberField>
  </div>
</template>