Основа: Система вариантов

Уровень 1: Базовые примитивы

Уровень 2: UI-компоненты (Текущий)

расширяет

расширяет

использует

использует

импортирует и применяет

пробрасывает пропсы

пробрасывает пропсы

импортирует и применяет

пробрасывает пропсы

пробрасывает пропсы

пробрасывает пропсы

пробрасывает пропсы

пробрасывает пропсы

Button
src/components/ui/Button

Card + составные части
src/components/ui/Card

Badge
src/components/ui/Badge

Text
src/components/ui/Text

Title
src/components/ui/Title

Icon
src/components/ui/Icon

Image
src/components/ui/Image

Group
src/components/ui/Group

Container
src/components/ui/Container

Sheet
src/components/ui/Sheet

Accordion
src/components/ui/Accordion

BaseButton
src/core/ui/Button

BaseCard
src/core/ui/Card

Box
src/core/ui/Box

Block
src/core/ui/Block

spacingVariants
src/core/variants/spacing.ts

roundedVariants
src/core/variants/rounded.ts

shadowVariants
src/core/variants/shadow.ts

buttonSizeVariants
buttonStyleVariants

badgeSizeVariants
badgeStyleVariants

Код разработчика
<Badge p='md' rounded='lg'
variant='success' />

Компонент Badge
src/components/ui/Badge/Badge.tsx

Пропсы вариантов
p, m, rounded, shadow, border

Пропсы компонента
variant, size, dot
leftSection, rightSection

BaseBadge
src/core/ui/Badge

Разрешение CVA
spacingVariants()
roundedVariants()
badgeStyleVariants()

Отрисованный DOM
<div class='inline-flex
p-4 rounded-lg...'
data-class='badge' />

Интерфейс BadgeProps

React.HTMLAttributes<HTMLDivElement>
Стандартные HTML-пропсы

Pick<VariantSpacingProps, 'm' | 'mx' | 'my'>
Выбранные пропсы отступов

RoundedProps
rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl'...

ShadowProps
shadow?: 'none' | 'sm' | 'md' | 'lg'...

BorderProps
border, borderTop, borderBottom...

BadgeSizeProps
size?: 'default' | 'sm' | 'lg'

BadgeStyleProps
variant?: 'default' | 'secondary'...

Пользовательские пропсы
leftSection, rightSection, dot

Card
Предоставляет контекст стилизации

Card.Header
data-class='card-header'

Card.Title
data-class='card-title'

Card.Description
data-class='card-description'

Card.Content
data-class='card-content'

Card.Footer
data-class='card-footer'

Accordion
Управляет состоянием открытия/закрытия

AccordionContext
value, onItemClick, type

AccordionItem
Предоставляет значение элемента

AccordionItemContext
строка value

AccordionTrigger
Читает контексты, переключает

AccordionContent
Условная отрисовка

Объект пропсов Badge
{variant, size, rounded,
m, mx, my, shadow,
border, className, ...rest}

Деструктуризация пропсов
Извлечение известных пропсов
Сбор ...rest

Применение вариантов CVA
badgeStyleVariants({variant})
badgeSizeVariants({size})
spacingVariants({m, mx, my})
roundedVariants({rounded})
shadowVariants({shadow})

Слияние с cn()
Базовые классы +
классы вариантов +
пользовательский className

Проброс в BaseBadge
className={merged}
...rest пропсы

Пропсы компонента
(например, Card, Badge, Button)

Базовые варианты стилизации

spacingVariants
p, px, py, m, mx, my

roundedVariants
rounded: 'none' до 'full'

shadowVariants
shadow: 'none' до '2xl'

borderVariants
border, borderTop, и т.д.

Специфичные для компонента варианты

sizeVariants
size: 'sm' | 'md' | 'lg'

styleVariants
variant: 'default' | 'primary'...

Варианты макета

layoutVariants
w: 'full' | 'auto' | 'fit'

// 1. Импорт базового примитива
import { Badge as BaseBadge } from "@ui8kit/core";

// 2. Импорт функций вариантов
import {
  spacingVariants,
  roundedVariants,
  shadowVariants,
  borderVariants,
  badgeSizeVariants,    // Специфичный для компонента
  badgeStyleVariants,   // Специфичный для компонента
} from "@ui8kit/core";

// 3. Импорт типов пропсов вариантов
import type {
  VariantSpacingProps,
  RoundedProps,
  ShadowProps,
  BorderProps,
  BadgeSizeProps,
  BadgeStyleProps,
} from "@ui8kit/core";

// 4. Импорт утилиты cn для слияния классов
import { cn } from "@ui8kit/core";

Интерфейс пропсов компонента

Базовый HTML интерфейс
React.HTMLAttributes<T>
onClick, onMouseEnter, и т.д.

Выборочные пропсы вариантов

Pick<VariantSpacingProps,
'p' | 'px' | 'py' | 'm'>

Pick<VariantLayoutProps,
'w' | 'h'>

Pick<VariantFlexProps,
'gap' | 'direction'>

Полные пропсы вариантов

RoundedProps
Все значения rounded

ShadowProps
Все значения shadow

Специфичные для компонента пропсы

Пользовательский интерфейс
leftSection?: ReactNode
rightSection?: ReactNode
dot?: boolean

Корневой компонент
(Accordion, Sheet)

Провайдер контекста
value={{state, actions}}

Подкомпонент 1
(AccordionItem)

Подкомпонент 2
(AccordionTrigger)

Подкомпонент 3
(AccordionContent)

Хук useContext
Доступ к состоянию

Хук useContext
Доступ к действиям

Хук useContext
Доступ к состоянию

Card (корневой контейнер с вариантами)
├── Card.Header (семантическая секция заголовка)
│   ├── Card.Title (элемент заголовка)
│   └── Card.Description (приглушённый текст)
├── Card.Content (основная область контента)
└── Card.Footer (область действий)

// Badge с вариантами
<Badge 
  variant="success" 
  size="sm" 
  rounded="full"
  m="xs"
  dot
>
  Active
</Badge>

// Button с секциями и вариантами
<Button 
  variant="primary" 
  size="lg"
  rounded="md"
  shadow="sm"
  leftSection={<Icon lucideIcon={Heart} />}
>
  Save
</Button>

// Card со всеми подкомпонентами
<Card p="lg" rounded="xl" shadow="md" bg="card">
  <Card.Header>
    <Card.Title>Dashboard</Card.Title>
    <Card.Description>Overview of your account</Card.Description>
  </Card.Header>
  <Card.Content>
    <Stack gap="md">
      {/* Контент здесь */}
    </Stack>
  </Card.Content>
  <Card.Footer>
    <Group gap="md" justify="end">
      <Button variant="secondary">Cancel</Button>
      <Button variant="primary">Save Changes</Button>
    </Group>
  </Card.Footer>
</Card>

// Accordion с управлением состоянием
<Accordion type="single" collapsible w="full">
  <AccordionItem value="item-1" gap="sm">
    <AccordionTrigger>Section 1</AccordionTrigger>
    <AccordionContent>
      Content for section 1
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2" gap="sm">
    <AccordionTrigger>Section 2</AccordionTrigger>
    <AccordionContent>
      Content for section 2
    </AccordionContent>
  </AccordionItem>
</Accordion>

// Container с размерами
<Container size="lg" px="md" centered>
  <Stack gap="xl" align="stretch">
    {/* Контент страницы */}
  </Stack>
</Container>

// Макет Grid
<Grid cols="1-2-3" gap="lg" p="md">
  <GridCol span={2}>Wide content</GridCol>
  <GridCol>Regular content</GridCol>
</Grid>

// Group для горизонтального макета
<Group gap="md" align="center" justify="between">
  <Title order={2}>Page Title</Title>
  <Button>Action</Button>
</Group>

// ❌ Избегайте
<Badge className="px-4 py-2 rounded-lg shadow-md">Status</Badge>

// ✅ Предпочтительно
<Badge px="md" py="sm" rounded="lg" shadow="md">Status</Badge>

/* ✅ Стабильный селектор */
[data-class="badge"] {
  /* Пользовательские стили */
}

[data-class="card-header"] {
  /* Стили для заголовка */
}

// ✅ Семантично и гибко
<Card>
  <Card.Header>
    <Card.Title>Title</Card.Title>
  </Card.Header>
  <Card.Content>Content</Card.Content>
</Card>

// ❌ Менее семантично
<Card>
  <div className="header">
    <h3>Title</h3>
  </div>
  <div>Content</div>
</Card>

// Интерфейс пропсов компонента обеспечивает типобезопасность
interface MyComponentProps {
  badge: BadgeProps;
  onAction: () => void;
}

export function MyComponent({ badge, onAction }: MyComponentProps) {
  return (
    <Card p="lg">
      <Badge {...badge} />
      <Button onClick={onAction}>Action</Button>
    </Card>
  );
}