@shmidko61/lc-ui-kit

Переиспользуемый React UI kit для LC-приложений.

Установка

pnpm add @shmidko61/lc-ui-kit

Подключение стилей

import '@shmidko61/lc-ui-kit/styles.css';

Импорты

В React Server Components импортируйте компоненты через subpath exports:

import { Picture } from '@shmidko61/lc-ui-kit/picture';
import { Typography } from '@shmidko61/lc-ui-kit/typography';

Root import удобен в client-only модулях, Storybook, тестах или приложениях без RSC:

'use client';

import { Button, Select } from '@shmidko61/lc-ui-kit';

В Next.js App Router не используйте import { Component } from '@shmidko61/lc-ui-kit' в server component: root export содержит и server-safe, и client-only компоненты, поэтому может потянуть createContext, useState или event handlers в RSC-граф.

Примеры по компонентам: docs/component-usage.md.

Наведение и адаптивность

Общие визуальные свойства доступны в hover у Box и компонентов на его основе:

<Box
  bg="#10183B"
  hover={{ bg: '#273B7D', color: '#F4C542', transform: 'translateY(-4px)' }}
  md={{ hover: { bg: '#294D4B' } }}
  lg={{ hover: null }}
  xl={{ hover: { color: '#89A4D9' } }}
/>

Hover наследуется base → md (768px) → lg (1024px) → xl (1440px). Частичные overrides сохраняют остальные hover-свойства, включая поля рамки. null сбрасывает всё состояние к обычным стилям текущего диапазона; следующие breakpoints могут включить hover заново. Для сброса отдельного эффекта подходят обычные CSS-значения: transform: 'none', boxShadow: 'none', opacity: 1.

Поддерживаются bg, background, backgroundColor, color, border, boxShadow, opacity, transform. Эффекты работают при (hover: hover) and (pointer: fine) и исключают :disabled, aria-disabled="true" и data-disabled="true". Явный inline style приоритетнее hover. Плавность настраивается через style.transition или className.

Button.hoverBg помечен @deprecated, но продолжает работать. Новый hover.bg имеет приоритет. Переход: hoverBg={color} → hover={{ bg: color }}. При использовании нового background в base-hover он наследуется на последующие breakpoints поверх старого hoverBg. Примеры доступны в Storybook: UI Kit/Box/Hover.