Icon stack colors

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

const stacks = [
  { label: "Neutral", class: "text-foreground", iconClass: "text-muted-foreground" },
  { label: "Primary", class: "text-primary", iconClass: "text-primary" },
  { label: "Success", class: "text-success", iconClass: "text-success" },
  { label: "Warning", class: "text-warning", iconClass: "text-warning" },
]
</script>

<template>
  <div class="flex flex-wrap items-end justify-center gap-7">
    <div v-for="item in stacks" :key="item.label" class="flex flex-col items-center gap-2">
      <IconStack aria-hidden="true" :class="item.class">
        <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-4 ${item.iconClass}`"
        >
          <path
            d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"
          />
          <path d="M20 2v4" />
          <path d="M22 4h-4" />
          <circle cx="4" cy="20" r="2" />
        </svg>
      </IconStack>
      <span class="text-muted-foreground text-sm">{{ item.label }}</span>
    </div>
  </div>
</template>