Input group with icon button action

<!--
  Расхождение с апстримом: (1) `IconPlaceholder` заменена инлайновым `<svg>`
  (lucide-react v0.545.0 "copy") — см. docs/PORTING.md §5. (2) Оригинал
  вызывает `toast.success(...)` из `sonner` по клику — пакет не входит в
  зависимости воркспейса (тот же класс ограничения, что и у IconPlaceholder),
  и на статичный скриншот не влияет, поэтому `onClick` не перенесён.
-->
<script setup lang="ts">
import { Field } from "@/components/ui/field"
import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "@/components/ui/input-group"
</script>

<template>
  <Field class="w-full max-w-xs">
    <InputGroup>
      <InputGroupInput value="https://reui.com/share" readonly />
      <InputGroupAddon align="inline-end">
        <InputGroupButton variant="ghost" size="icon-xs">
          <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-copy size-4"
          >
            <rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
            <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
          </svg>
        </InputGroupButton>
      </InputGroupAddon>
    </InputGroup>
  </Field>
</template>