// Традиционный подход: специализированные компоненты форм
<Form>
  <FormField>
    <FormLabel>Email</FormLabel>
    <FormInput type="email" />
    <FormError>Invalid email</FormError>
  </FormField>
</Form>

// Подход @ui8kit/core: композиция примитивов
<Block component="form" p="lg" rounded="md" bg="card">
  <Stack gap="md">
    <Box>
      <Text weight="medium" mb="xs">Email</Text>
      <Box component="input" type="email" w="full" border="1px solid border" />
      <Text size="sm" c="destructive">Invalid email</Text>
    </Box>
  </Stack>
</Block>

Система вариантов (src/core/variants/)

Слой 1: Базовые примитивы (src/core/ui/)

Слой 2: UI-компоненты (src/components/ui/)

Слой 3: Шаблоны макетов (src/layouts/)

использует

использует

использует

расширяет

расширяет

использует

применяет

применяет

применяет

проброс props

проброс props

DashLayout.tsx
Дашборд с боковой панелью/хедером

LayoutBlock.tsx
Секции контента

SplitBlock.tsx
Двухколоночные макеты

button.tsx
Кнопки действий

card.tsx
+ Card.Header/Content/Footer

text.tsx
Семантический текст

title.tsx
Заголовки h1-h6

badge.tsx
Метки

icon.tsx
Обертка SVG

image.tsx
Оптимизированные изображения

container.tsx
Контейнер с max-width

group.tsx
Группировка элементов

sheet.tsx
Компонент drawer

accordion.tsx
Раскрывающиеся секции

Block.tsx
Семантический контейнер

Box.tsx
Гибкий примитив

Grid.tsx
CSS Grid макет

Flex.tsx
Flexbox макет

Stack.tsx
Вертикальная/горизонтальная укладка

spacing-variants.ts
p, m, px, py, mx, my, и т.д.

color-variants.ts
bg, c, borderColor

layout-variants.ts
w, h, position

typography-variants.ts
size, weight, align

effect-variants.ts
shadow, rounded, border

Вывод

Артефакт сборки

Движок CVA

Файлы вариантов (src/core/variants/)

API разработчика

генерирует

генерирует

safelist для

JSX компонента
p='lg' rounded='xl'
shadow='md' bg='card'

spacing-variants.ts
spacingVariants

color-variants.ts
colorVariants

layout-variants.ts
layoutVariants

typography-variants.ts
typographyVariants

effect-variants.ts
effectVariants

class-variance-authority
функция cva()

Сгенерированные классы
p-8 rounded-xl shadow-md
bg-card

src/lib/core-classes.json
Белый список из 618 классов

HTML-элемент
с классами Tailwind

Очистка Tailwind CSS

{
  "classes": [
    "p-0", "p-1", "p-2", "p-4", "p-6", "p-8", "p-12", "p-16",
    "m-0", "m-1", "m-2", "m-4", "m-6", "m-8", "m-12", "m-16",
    "bg-primary", "bg-secondary", "bg-card", "bg-background",
    "rounded-none", "rounded-sm", "rounded-md", "rounded-lg", "rounded-xl",
    // ... всего 618 классов
  ]
}

{
  "exports": {
    ".": {
      "import": "./dist/index.js",
      "types": "./dist/index.d.ts"
    }
  }
}

Метод интеграции 5: Программный

Метод интеграции 4: Прямой исходный код

Метод интеграции 3: Git Submodule

Метод интеграции 2: По компонентам

Метод интеграции 1: Полная библиотека

Каналы распространения

Исходный репозиторий

github.com/ui8kit/core

src/registry.json
Метаданные компонентов

NPM Registry
@ui8kit/Unsupported markdown: link

Git Repository
ветка main

npm install @ui8kit/core

import { Button, Card } from '@ui8kit/core'

npx buildy-ui add button card

components/ui/button.tsx
components/ui/card.tsx

git submodule add
Unsupported markdown: link
packages/@ui8kit/core

import { Button } from '@ui8kit/core'

Копирование директории src/

Кастомный процесс сборки

import registry from
'@ui8kit/core/registry.json'

Автоматизация инструментов

npm install @ui8kit/core react react-dom

import { Button, Card, Text, Stack, Grid } from '@ui8kit/core';

npx buildy-ui add button card text

components/
└── ui/
    ├── button.tsx
    ├── card.tsx
    └── text.tsx

import { Button } from '@/components/ui/button';
import { Card } from '@/components/ui/card';

{
  "name": "button",
  "type": "registry:ui",
  "dependencies": ["class-variance-authority"],
  "files": [
    {
      "path": "components/ui/button.tsx",
      "type": "registry:ui"
    }
  ]
}

git submodule add https://github.com/ui8kit/core.git packages/@ui8kit/core

{
  "compilerOptions": {
    "paths": {
      "@ui8kit/core": ["./packages/@ui8kit/core/src"]
    }
  }
}

import registry from '@ui8kit/core/registry.json';

// Итерация по всем компонентам
registry.items.forEach(component => {
  console.log(`${component.name}: ${component.description}`);
  console.log(`Тип: ${component.type}`);
  console.log(`Зависимости:`, component.dependencies);
});

{
  "name": "@ui8kit/core",
  "version": "1.0.0",
  "items": [
    {
      "name": "button",
      "type": "registry:ui",
      "description": "Action button component",
      "dependencies": ["class-variance-authority"],
      "files": [...]
    }
  ]
}