@shtabapp/ui-kit-primitives

Обычно этот пакет не ставят напрямую: он входит в @shtabapp/ui-kit и полностью реэкспортируется оттуда.

Состав

• SIcon — иконка из встроенного набора SVG, с поддержкой биллингового градиента
• SSpinner — индикатор загрузки с поддержкой prefers-reduced-motion
• SProgressBar — горизонтальная полоса прогресса
• SSkeleton — скелетон-заглушка для состояний загрузки

Установка

pnpm add @shtabapp/ui-kit-primitives @shtabapp/ui-kit-tokens

Использование

import '@shtabapp/ui-kit-tokens/styles.css'
import '@shtabapp/ui-kit-primitives/styles.css'

Полный импорт

import { SIcon, SSpinner, SProgressBar, SSkeleton } from '@shtabapp/ui-kit-primitives'

Subpath-импорт (tree-shaking)

import { SIcon } from '@shtabapp/ui-kit-primitives/icon'
import { SSpinner } from '@shtabapp/ui-kit-primitives/spinner'
import { SProgressBar } from '@shtabapp/ui-kit-primitives/progress-bar'
import { SSkeleton } from '@shtabapp/ui-kit-primitives/skeleton'

Пример

<template>
  <div>
    <Suspense>
      <SIcon name="alertCircle" :size="24" />
      <template #fallback>
        <SSpinner :size="20" aria-label="Загрузка" />
      </template>
    </Suspense>
  </div>
</template>

<script setup lang="ts">
import { SIcon, SSpinner } from '@shtabapp/ui-kit-primitives'
</script>

Важно: SIcon — это асинхронный компонент (SVG подгружается лениво по имени). Поэтому он должен находиться внутри границы <Suspense> — родительской или локальной. Это даёт корректный SSR/hydration без визуального «всплытия» иконки и позволяет показать fallback (например SSpinner) во время загрузки.

Peer dependencies

• vue ^3.5.0
• @vueuse/core ^14.0.0
• @shtabapp/ui-kit-tokens (как peer-зависимость)

Экосистема

Лицензия

MIT