Вспомогательные хуки

Система тем

Экспорт вариантов

Компоненты макетов

UI-компоненты

Базовые примитивы

Точка входа пакета

src/index.ts
Основной бочонок экспорта

Block
BlockProps

Box
BoxProps

Grid
GridProps

Flex
FlexProps

Stack
StackProps

Button
BaseButtonProps

Card + Card.Header/Content/Footer
CardProps, CardHeaderProps

Text
TextProps

Title
TitleProps

Badge
BadgeProps

Container
ContainerProps

Icon
IconProps

Image
ImageProps

Group
GroupProps

Sheet
SheetProps

Accordion
AccordionProps

DashLayout
DashLayoutProps

LayoutBlock
LayoutBlockProps

SplitBlock
SplitBlockProps

spacingVariants
marginVariants, paddingVariants

backgroundColorVariants
textColorVariants, borderColorVariants

widthVariants, heightVariants
positionVariants

fontSizeVariants, fontWeightVariants
textAlignVariants, lineHeightVariants

roundedVariants, shadowVariants
borderVariants

ThemeProvider
ThemeProviderProps

useTheme()
ThemeContextValue

modernUITheme
ThemeConfig

useMediaQuery(query)
boolean

useMobile()
boolean

useViewport()
ViewportSize

Исходные файлы

Варианты эффектов

Варианты типографики

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

Варианты цветов

Варианты отступов

определено в

определено в

определено в

определено в

определено в

определено в

определено в

определено в

определено в

определено в

определено в

определено в

определено в

определено в

определено в

определено в

p, px, py, pt, pb, pl, pr
Тип: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'

m, mx, my, mt, mb, ml, mr
Тип: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'auto'

bg
Тип: 'background' | 'card' | 'primary' | 'secondary' | и др.

c
Тип: 'foreground' | 'primary' | 'secondary' | 'muted' | и др.

borderColor
Тип: 'border' | 'input' | 'primary' | и др.

w
Тип: 'auto' | 'full' | 'screen' | 'fit' | 'min' | 'max'

h, minH
Тип: 'auto' | 'full' | 'screen' | 'fit' | 'min'

maxW
Тип: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | и др.

position
Тип: 'relative' | 'absolute' | 'fixed' | 'sticky'

size
Тип: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | и др.

weight
Тип: 'normal' | 'medium' | 'semibold' | 'bold'

align
Тип: 'left' | 'center' | 'right' | 'justify'

leading
Тип: 'none' | 'tight' | 'snug' | 'normal' | 'relaxed' | 'loose'

rounded
Тип: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'

shadow
Тип: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'

border
Тип: '1px solid border' | '2px solid border' | и др.

src/core/variants/spacing.ts
paddingVariants, marginVariants

src/core/variants/colors.ts
backgroundColorVariants, textColorVariants

src/core/variants/layout.ts
widthVariants, heightVariants, positionVariants

src/core/variants/typography.ts
fontSizeVariants, fontWeightVariants

src/core/variants/effects.ts
roundedVariants, shadowVariants, borderVariants

Вывод

Разрешение вариантов

Слой примитива

Слой компонента

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

пробрасывает отступы и эффекты

применяет варианты кнопки

применяет базовые варианты

  p='md'
  rounded='lg'
  variant='primary'
  size='md'
/>

Button
src/components/ui/Button.tsx

BaseButtonProps расширяет
- ButtonHTMLAttributes
- Варианты отступов
- Варианты эффектов
- Пользовательские: variant, size

Box
src/core/ui/Box.tsx

BoxProps расширяет
- HTMLAttributes
- Все свойства вариантов
- свойство component

Движок CVA
class-variance-authority

Сгенерированные классы:
'p-4 rounded-lg'
+ специфичные классы кнопки

  class='...'
  data-class='button'
/>

// Button получает варианты отступов и эффектов от Box
<Button 
  p="md"           // пробрасывается в Box → paddingVariants
  rounded="lg"     // пробрасывается в Box → roundedVariants
  variant="primary" // специфичное для Button свойство
  size="md"        // специфичное для Button свойство
/>

// Card получает все варианты Block
<Card 
  p="xl"           // пробрасывается в Block → paddingVariants
  shadow="md"      // пробрасывается в Block → shadowVariants
  rounded="2xl"    // пробрасывается в Block → roundedVariants
  bg="card"        // пробрасывается в Block → backgroundColorVariants
/>

// Text получает варианты Box плюс варианты типографики
<Text 
  size="lg"        // специфичный для Text вариант типографики
  weight="bold"    // специфичный для Text вариант типографики
  c="primary"      // пробрасывается в Box → textColorVariants
  mb="md"          // пробрасывается в Box → marginVariants
/>

Свойства компонентов макетов

Свойства UI-компонентов

Свойства базовых компонентов

Типы вариантов

Базовые типы

React.HTMLAttributes

React.ComponentPropsWithRef

React.ForwardRefExoticComponent

SpacingProps
из paddingVariants, marginVariants
VariantProps

ColorProps
из backgroundColorVariants, textColorVariants
VariantProps

LayoutProps
из widthVariants, heightVariants
VariantProps

TypographyProps
из fontSizeVariants, fontWeightVariants
VariantProps

EffectsProps
из roundedVariants, shadowVariants
VariantProps

BoxProps расширяет
HTMLAttributes & SpacingProps
& ColorProps & LayoutProps
& EffectsProps & TypographyProps

BlockProps расширяет
BoxProps & { component?: 'section' | 'article' | ... }

GridProps расширяет
BlockProps & { cols?: number, gap?: string }

FlexProps расширяет
BoxProps & { direction?: 'row' | 'column' }

StackProps расширяет
BoxProps & { gap?: string, direction?: 'vertical' | 'horizontal' }

BaseButtonProps расширяет
ButtonHTMLAttributes & SpacingProps
& EffectsProps & { variant, size, ... }

CardProps расширяет
BlockProps & { variant?: string }

TextProps расширяет
BoxProps & TypographyProps
& { as?: 'p' | 'span' | ... }

TitleProps расширяет
BoxProps & TypographyProps
& { order: 1 | 2 | 3 | 4 | 5 | 6 }

DashLayoutProps расширяет
{ sidebar, header, children, ... }

LayoutBlockProps расширяет
BlockProps & { layout?: 'default' | 'grid' | 'flex' }

SplitBlockProps расширяет
{ left, right, ratio?, ... }

// Экспорт: ThemeProvider
// Интерфейс: ThemeProviderProps
interface ThemeProviderProps {
  theme: ThemeConfig;
  children: ReactNode;
  defaultMode?: 'light' | 'dark' | 'system';
  storageKey?: string;
}

// Экспорт: useTheme
// Возвращает: ThemeContextValue
interface ThemeContextValue {
  isDarkMode: boolean;
  toggleDarkMode: () => void;
  setDarkMode: (enabled: boolean) => void;
  mode: 'light' | 'dark' | 'system';
  setMode: (mode: 'light' | 'dark' | 'system') => void;
  preferences: ThemePreferences;
  updatePreferences: (preferences: Partial<ThemePreferences>) => void;
}

// Экспорт: modernUITheme
// Тип: ThemeConfig
interface ThemeConfig {
  name: string;
  displayName: string;
  description: string;
  author: string;
  version: string;
  colors: ColorScheme;
  typography: TypographyConfig;
  spacing: SpacingConfig;
  effects: EffectsConfig;
}

import { useMediaQuery, useMobile, useViewport } from '@ui8kit/core';

function ResponsiveComponent() {
  const isMobile = useMobile();
  const isSmall = useMediaQuery('(max-width: 640px)');
  const { width, height } = useViewport();
  
  return <Box>{isMobile ? 'Мобильная' : 'Десктопная'}</Box>;
}

// Определено в: src/components/ui/Button.tsx
export const buttonStyleVariants = cva('', {
  variants: {
    variant: {
      default: 'bg-primary text-primary-foreground hover:bg-primary/90',
      destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
      outline: 'border border-input bg-background hover:bg-accent',
      secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
      ghost: 'hover:bg-accent hover:text-accent-foreground',
      link: 'text-primary underline-offset-4 hover:underline'
    }
  }
});

export const buttonSizeVariants = cva('', {
  variants: {
    size: {
      sm: 'h-8 px-3 text-sm',
      md: 'h-10 px-4 text-base',
      lg: 'h-12 px-6 text-lg',
      icon: 'h-10 w-10'
    }
  }
});

// Определено в: src/components/ui/Card.tsx
export const cardVariants = cva('', {
  variants: {
    variant: {
      default: 'bg-card text-card-foreground',
      outlined: 'border border-border bg-card text-card-foreground'
    }
  }
});

// Таргетирование в тестах или таблицах стилей
const button = document.querySelector('[data-class="button"]');

// CSS таргетирование
[data-class="card"] {
  /* Пользовательские стили */
}