Item media stack

<!--
  Адаптировано (docs/PORTING.md §5): `IconPlaceholder` заменён инлайновым
  `<svg>` (путь lucide "package"), тем же, что и в React-эталоне.
-->
<script setup lang="ts">
import { IconStack } from "@/components/reui/icon-stack"
import { Item, ItemContent, ItemDescription, ItemMedia, ItemTitle } from "@/components/ui/item"
</script>

<template>
  <div class="mx-auto flex w-full max-w-md items-center justify-center p-4">
    <Item variant="outline" class="max-w-sm">
      <ItemMedia>
        <IconStack aria-hidden="true" class="text-primary h-12 w-11">
          <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="text-primary size-3"
          >
            <path
              d="M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z"
            />
            <path d="M12 22V12" />
            <polyline points="3.29 7 12 12 20.71 7" />
            <path d="m7.5 4.27 9 5.15" />
          </svg>
        </IconStack>
      </ItemMedia>
      <ItemContent>
        <ItemTitle>Registry package ready</ItemTitle>
        <ItemDescription>
          Use IconStack as rich media inside compact shadcn items.
        </ItemDescription>
      </ItemContent>
    </Item>
  </div>
</template>