@shmidko61/lc-ui-kit 0.0.1

package/dist/types/spacing.types.d.ts

@@ -0,0 +1,123 @@
+import { AtLeastOne } from './shared.types';
+/**
+ * Значение внутреннего/внешнего отступа из рекомендованной шкалы.
+ *
+ * Пример: `16` сериализуется в `16px`. Тип также допускает любое число,
+ * поэтому шкала является рекомендованной, а не строгой.
+ */
+export type UiKitIndentations = 0 | 2 | 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 80 | 96 | number;
+/**
+ * Значение внешнего отступа. `auto` полезен для центрирования через `mx`.
+ */
+export type UiKitMarginIndentation = UiKitIndentations | 'auto';
+/**
+ * CSS shorthand для padding: `[top, right, bottom, left]`.
+ *
+ * Пример: `p={[8, 16, 24, 16]}`.
+ */
+export type UiKitArrayIndentation = [
+    UiKitIndentations,
+    UiKitIndentations,
+    UiKitIndentations,
+    UiKitIndentations
+];
+/**
+ * CSS shorthand для margin: `[top, right, bottom, left]`.
+ *
+ * Пример: `m={[8, 'auto', 24, 'auto']}`.
+ */
+export type UiKitMarginArrayIndentation = [
+    UiKitMarginIndentation,
+    UiKitMarginIndentation,
+    UiKitMarginIndentation,
+    UiKitMarginIndentation
+];
+/**
+ * Padding по осям.
+ *
+ * Пример: `p={{ px: 24, py: 16 }}`.
+ */
+export type UiKitAxisIndentationPadding = AtLeastOne<{
+    px?: UiKitIndentations;
+    py?: UiKitIndentations;
+}>;
+/**
+ * Горизонтальный padding с точечным переопределением top/bottom.
+ *
+ * Пример: `p={{ px: 24, pt: 12, pb: 40 }}`.
+ */
+export type UiKitMixedXAxisIndentationPadding = {
+    px: UiKitMarginIndentation;
+    pt?: UiKitMarginIndentation;
+    pb?: UiKitMarginIndentation;
+};
+/**
+ * Вертикальный padding с точечным переопределением left/right.
+ *
+ * Пример: `p={{ py: 16, pl: 24 }}`.
+ */
+export type UiKitMixedYAxisIndentationPadding = {
+    py: UiKitMarginIndentation;
+    pl?: UiKitMarginIndentation;
+    pr?: UiKitMarginIndentation;
+};
+/**
+ * Горизонтальный margin с точечным переопределением top/bottom.
+ *
+ * Пример: `m={{ mx: 'auto', mt: 24 }}`.
+ */
+export type UiKitMixedXAxisIndentationMargin = {
+    mx: UiKitMarginIndentation;
+    mt?: UiKitMarginIndentation;
+    mb?: UiKitMarginIndentation;
+};
+/**
+ * Вертикальный margin с точечным переопределением left/right.
+ *
+ * Пример: `m={{ my: 16, ml: 24 }}`.
+ */
+export type UiKitMixedYAxisIndentationMargin = {
+    my: UiKitMarginIndentation;
+    ml?: UiKitMarginIndentation;
+    mr?: UiKitMarginIndentation;
+};
+/**
+ * Margin по осям.
+ *
+ * Пример: `m={{ mx: 'auto', my: 24 }}`.
+ */
+export type UiKitAxisIndentationMargin = AtLeastOne<{
+    mx?: UiKitMarginIndentation;
+    my?: UiKitMarginIndentation;
+}>;
+/**
+ * Padding по отдельным сторонам.
+ *
+ * Пример: `p={{ pt: 8, pr: 16, pb: 24, pl: 16 }}`.
+ */
+export type UiKitAnyIndentationPadding = AtLeastOne<{
+    pt?: UiKitIndentations;
+    pb?: UiKitIndentations;
+    pr?: UiKitIndentations;
+    pl?: UiKitIndentations;
+}>;
+/**
+ * Margin по отдельным сторонам.
+ *
+ * Пример: `m={{ mt: 8, mb: 24 }}`.
+ */
+export type UiKitAnyIndentationMargin = AtLeastOne<{
+    mt?: UiKitMarginIndentation;
+    mb?: UiKitMarginIndentation;
+    mr?: UiKitMarginIndentation;
+    ml?: UiKitMarginIndentation;
+}>;
+/**
+ * Интерфейс описывает внешние и внутренние отступы.
+ *
+ * Пример: `<Box p={{ px: 24, py: 16 }} m={{ mx: 'auto' }} />`.
+ */
+export type UiKitIndentationsProps = {
+    p?: UiKitIndentations | UiKitArrayIndentation | UiKitAxisIndentationPadding | UiKitAnyIndentationPadding | UiKitMixedXAxisIndentationPadding | UiKitMixedYAxisIndentationPadding;
+    m?: UiKitMarginIndentation | UiKitMarginArrayIndentation | UiKitAxisIndentationMargin | UiKitAnyIndentationMargin | UiKitMixedXAxisIndentationMargin | UiKitMixedYAxisIndentationMargin;
+};

package/dist/types/typography.types.d.ts

@@ -0,0 +1,75 @@
+import { TypographyFontSizeToken, TypographyFontWeightToken, TypographyLineHeightToken } from '../typography/typography.helpers';
+import { UiKitDimensionProps } from './layout.types';
+import { UiKitIndentationsProps } from './spacing.types';
+import { UiKitColorToken } from './visual.types';
+/**
+ * Значение размера шрифта для props `fontSize`.
+ *
+ * Пример: `fontSize="--typo-fs-b2-md"` или `fontSize={16}`.
+ */
+export type TypographyFontSizeValue = TypographyFontSizeToken | (string & {}) | number;
+/**
+ * Значение насыщенности шрифта для props `fontWeight`.
+ *
+ * Пример: `fontWeight="--typo-fw-b2-md"` или `fontWeight={600}`.
+ */
+export type TypographyFontWeightValue = TypographyFontWeightToken | (string & {}) | number;
+/**
+ * Значение высоты строки для props `lineHeight`.
+ *
+ * Пример: `lineHeight="--typo-lh-b2-md"` или `lineHeight="140%"`.
+ */
+export type TypographyLineHeightValue = TypographyLineHeightToken | (string & {}) | number;
+/**
+ * Значение цвета для props `color`.
+ *
+ * Пример: `color="--color-text-primary"` или `color="#152237"`.
+ */
+export type TypographyColorValue = UiKitColorToken | (string & {});
+export type FontSizeKeys = TypographyFontSizeToken;
+export type FontWeightKeys = TypographyFontWeightToken;
+export type LineHeightKeys = TypographyLineHeightToken;
+export type FontFamilyToken = '--font-family-primary' | '--font-family-secondary';
+export type FontFamilyKeys = FontFamilyToken | (string & {});
+export type TypographyVerticalAlignValue = 'top' | 'middle' | 'bottom';
+export type TypographyHorizontalAlignValue = 'left' | 'center' | 'right';
+export type TypographyTextTransformValue = 'uppercase' | 'lowercase' | 'capitalize' | 'normal-case';
+export type TypographyTextDecorationValue = 'underline' | 'line-through' | 'overline' | 'no-underline';
+export type TypographyTextOverflowValue = 'ellipsis' | 'clip';
+export type TypographyWhiteSpaceValue = 'nowrap' | 'pre' | 'pre-line' | 'pre-wrap' | 'break-spaces';
+export type TypographyWordBreakValue = 'all' | 'word' | 'keep' | 'normal';
+export type TypographyFontFamilyValue = FontFamilyKeys;
+/**
+ * Типографические props, которые настраивают Typography без ручной работы
+ * с внутренними CSS-переменными.
+ *
+ * Пример: `<Typography fontSize={16} fontWeight={600} color="--color-text-primary" />`.
+ */
+export type UiKitTypographyProps = UiKitDimensionProps & UiKitIndentationsProps & {
+    /** Color: токен `--color-*` или конкретное CSS-значение. */
+    color?: TypographyColorValue;
+    /** Font-size: токен `--typo-fs-*` или конкретное CSS-значение. */
+    fontSize?: TypographyFontSizeValue;
+    /** Font-weight: токен `--typo-fw-*` или конкретное CSS-значение. */
+    fontWeight?: TypographyFontWeightValue;
+    /** Line-height: токен `--typo-lh-*` или конкретное CSS-значение. */
+    lineHeight?: TypographyLineHeightValue;
+    /** Вертикальное выравнивание inline/inline-block текста. */
+    verticalAlign?: TypographyVerticalAlignValue;
+    /** Горизонтальное выравнивание текста. */
+    horizontalAlign?: TypographyHorizontalAlignValue;
+    /** Трансформация регистра текста. */
+    textTransform?: TypographyTextTransformValue;
+    /** Декоративная линия текста. */
+    textDecoration?: TypographyTextDecorationValue;
+    /** Поведение переполнения текста. */
+    textOverflow?: TypographyTextOverflowValue;
+    /** Управление пробелами и переносами. */
+    whiteSpace?: TypographyWhiteSpaceValue;
+    /** Правила разрыва слов. */
+    wordBreak?: TypographyWordBreakValue;
+    /** Курсивное начертание. */
+    italic?: boolean;
+    /** Font-family: CSS-значение или токен/переменная проекта. */
+    fontFamily?: TypographyFontFamilyValue;
+};

package/dist/types/visual.types.d.ts

@@ -0,0 +1,82 @@
+import { uiKitColorTokens } from '../design-tokens/color.tokens';
+/**
+ * Цветовой токен дизайн-системы.
+ *
+ * Пример: `--color-primary-accent`.
+ */
+export type UiKitColorToken = (typeof uiKitColorTokens)[number];
+/**
+ * Карта переопределений цветовых токенов.
+ *
+ * Пример: `{ '--color-primary-accent': '#0070f3' }`.
+ */
+export type UiKitColors = Partial<Record<UiKitColorToken, string>>;
+export type ColorKeys = UiKitColorToken;
+/**
+ * CSS background/color value: токен `--color-*` или конкретное CSS-значение.
+ *
+ * Пример: `--color-background-subtle`, `#fff`, `linear-gradient(...)`.
+ */
+export type UiKitBackgroundValue = ColorKeys | (string & {});
+export type UiKitBackgroundSizeValue = 'cover' | 'contain' | 'auto' | number | string;
+export type UiKitBackgroundRepeatValue = 'no-repeat' | 'repeat' | 'repeat-x' | 'repeat-y' | 'repeat-round' | 'repeat-space';
+export type UiKitBackgroundPositionValue = 'bottom' | 'center' | 'left' | 'right' | 'top' | 'left-bottom' | 'left-top' | 'right-bottom' | 'right-top';
+/**
+ * Управляет background-свойствами элемента.
+ *
+ * Пример: `<Box bg="--color-background-subtle" bgSize="cover" />`.
+ */
+export type UiKitBackgroundProps = {
+    /** Background shorthand или цвет: токен `--color-*` или конкретное CSS-значение. */
+    bg?: UiKitBackgroundValue;
+    /** Background-size. Число приводится к пикселям. */
+    bgSize?: UiKitBackgroundSizeValue;
+    /** Background-repeat. */
+    bgRepeat?: UiKitBackgroundRepeatValue;
+    /** Background при hover ближайшего `groupParent`. */
+    bgGroup?: UiKitBackgroundValue;
+    /** Background-position. */
+    bgPosition?: UiKitBackgroundPositionValue;
+    /** Делает элемент parent-группой для `bgGroup` дочерних Box. */
+    groupParent?: boolean;
+};
+export type BorderWidthItem = string;
+export type BorderRadiusKeys = `--radius-${string}` | `--border-radius-${string}`;
+export type BorderRadiusItem = string | BorderRadiusKeys;
+export type BorderRadiusSides = {
+    topLeft?: BorderRadiusItem;
+    topRight?: BorderRadiusItem;
+    bottomLeft?: BorderRadiusItem;
+    bottomRight?: BorderRadiusItem;
+};
+export type BorderWidthSides = {
+    top?: BorderWidthItem;
+    bottom?: BorderWidthItem;
+    left?: BorderWidthItem;
+    right?: BorderWidthItem;
+};
+export type UiKitBorderRadius = BorderRadiusItem | BorderRadiusSides;
+export type UiKitBorderColor = ColorKeys | (string & {});
+export type UiKitBorderWidth = BorderWidthItem | BorderWidthSides;
+/**
+ * Управляет border элемента.
+ *
+ * Пример: `<Box border={{ width: '1px', style: 'solid', color: '--color-primary-accent' }} />`.
+ */
+export type UiKitBorderProps = {
+    radius?: UiKitBorderRadius;
+    color?: UiKitBorderColor;
+    width?: UiKitBorderWidth;
+    style?: 'solid' | 'dashed' | 'dotted' | 'double' | 'hidden' | 'none';
+};
+/**
+ * Управляет outline элемента.
+ *
+ * Пример: `<Box outlineStyle="solid" outlineWidth="2px" outlineColor="--color-primary-accent" />`.
+ */
+export type UiKitOutlineProps = {
+    outlineColor?: ColorKeys | string;
+    outlineWidth?: string;
+    outlineOffset?: string;
+    outlineStyle?: 'none' | 'solid' | 'dashed' | 'dotted' | 'double';
+};

package/dist/types.cjs

@@ -0,0 +1 @@
+"use strict";

package/dist/types.js

@@ -0,0 +1 @@
+

package/dist/typography/typography.d.ts

@@ -0,0 +1,39 @@
+import { ComponentPropsWithoutRef, ElementType, JSX, ReactNode } from 'react';
+import { typographyVariants, ResponsiveTypographyStyleProps, TypographyVariant } from './typography.helpers';
+/**
+ * Собственные props Typography поверх props выбранного HTML-элемента.
+
+ * Помимо обычного `className` и `style`, компонент принимает короткие типографические props
+ * (`color`, `fontSize`, `fontWeight`, `lineHeight` и другие)
+ * и их responsive overrides (`md`, `lg`, `xl`).
+ *
+ * Важно для разработчика и ИИ: Typography не принимает карты токенов `colors`,
+ * `typography`, `vars`. Для переопределения токенов дизайн-системы используйте
+ * UiKitProvider, а здесь передавайте только значение конкретного текстового свойства
+ * или ссылку на токен.
+ */
+type TypographyOwnProps<TElement extends ElementType> = {
+    /** HTML-тег или React-компонент, которым будет отрендерен текст. */
+    as?: TElement;
+    /** Содержимое текстового элемента. */
+    children?: ReactNode;
+    /** Дополнительные классы поверх классов варианта. */
+    className?: string;
+    /** Типографический вариант, который задает font-size, font-weight и line-height токенами. */
+    variant?: TypographyVariant;
+} & ResponsiveTypographyStyleProps;
+/**
+ * Полный тип props Typography.
+ * Тип сохраняет props конкретного элемента из `as`, но исключает поля, которыми
+ * Typography управляет самостоятельно.
+ */
+export type TypographyProps<TElement extends ElementType = 'p'> = TypographyOwnProps<TElement> & Omit<ComponentPropsWithoutRef<TElement>, keyof TypographyOwnProps<TElement>>;
+/**
+ * Типографический компонент ui-kit.
+ *
+ * Компонент выбирает набор токенов по `variant`, сливает его с пользовательскими
+ * responsive props и формирует Tailwind-классы с inline CSS variables. Такой подход
+ * сохраняет типизацию props и позволяет переопределять токены на SSR/runtime-данных.
+ */
+export declare function Typography<TElement extends ElementType = 'p'>({ as, children, className, color, fontSize, fontWeight, lineHeight, verticalAlign, horizontalAlign, textTransform, textDecoration, textOverflow, whiteSpace, wordBreak, italic, fontFamily, width, minWidth, maxWidth, height, minHeight, maxHeight, p, m, md, lg, xl, style, variant, ...props }: TypographyProps<TElement>): JSX.Element;
+export { typographyVariants };

package/dist/typography/typography.helpers.d.ts

@@ -0,0 +1,237 @@
+import { CSSProperties } from 'react';
+import { UiKitTypographyToken } from '../design-tokens/typography.tokens';
+import { UiKitTypographyProps } from '../types';
+import { CssVariableMap, ResponsiveStyleBreakpoint, ResponsiveUiKitStyleProps } from '../shared/responsive-style/responsive-style.types';
+/**
+ * Токены размера шрифта, которые Typography может подключить к внутренним CSS-переменным.
+ */
+export type TypographyFontSizeToken = Extract<UiKitTypographyToken, `--typo-fs-${string}`>;
+/**
+ * Токены насыщенности шрифта, которые Typography может подключить к внутренним CSS-переменным.
+ */
+export type TypographyFontWeightToken = Extract<UiKitTypographyToken, `--typo-fw-${string}`>;
+/**
+ * Токены высоты строки, которые Typography может подключить к внутренним CSS-переменным.
+ */
+export type TypographyLineHeightToken = Extract<UiKitTypographyToken, `--typo-lh-${string}`>;
+/**
+ * Responsive-набор props для Typography на конкретном брейкпоинте.
+ *
+ * Важно для разработчика и ИИ: намеренно не расширяем этот тип через UiKitStyleProps.
+ * Typography отвечает только за настройки конкретного текстового элемента.
+ * Переопределением карт токенов (`colors`, `typography`, `vars`) должен заниматься
+ * отдельный UiKitProvider, чтобы ответственность не расползалась по UI-компонентам.
+ */
+export type TypographyBreakpointStyleProps = UiKitTypographyProps;
+/**
+ * Responsive style API Typography.
+ *
+ * На верхнем уровне задаётся base/sm состояние, в `md`, `lg`, `xl` передаются
+ * overrides только для конкретного текстового элемента.
+ *
+ * Важно для разработчика и ИИ: не добавлять сюда `colors`, `typography`, `vars`.
+ * Если нужно переопределить токены дизайн-системы для группы компонентов, используйте
+ * UiKitProvider. Typography может только сослаться на токен или raw CSS-значение
+ * через `color`, `fontSize`, `fontWeight`, `lineHeight` и остальные typography props.
+ */
+export type ResponsiveTypographyStyleProps = UiKitTypographyProps & Partial<Record<ResponsiveStyleBreakpoint, TypographyBreakpointStyleProps>>;
+/**
+ * Набор типографических токенов для одного брейкпоинта.
+ *
+ * Компонент не хранит конкретные px/% значения внутри варианта, а ссылается на токены
+ * дизайн-системы. Благодаря этому значения можно переопределять через UiKitProvider,
+ * SSR-пропсы или локальные responsive props.
+ */
+interface TypographyTokenSet {
+    fontSize: TypographyFontSizeToken;
+    fontWeight: TypographyFontWeightToken;
+    lineHeight: TypographyLineHeightToken;
+}
+/**
+ * Описание варианта Typography.
+ *
+ * `base` применяется с мобильного/дефолтного разрешения, `md` и `lg` добавляют
+ * responsive-переопределения через CSS-переменные. `className` нужен для поведения,
+ * которое нельзя выразить токенами, например uppercase у caption-caps.
+ */
+export interface TypographyVariantDefinition {
+    base: TypographyTokenSet;
+    className?: string;
+    lg?: TypographyTokenSet;
+    md?: TypographyTokenSet;
+}
+/**
+ * Базовый набор классов Typography.
+ *
+ * Здесь описана только механика рендера текста: значения берутся из внутренних
+ * переменных `--typography-*`, а сами переменные подставляются из выбранного
+ * варианта и пользовательских responsive props.
+ */
+export declare const TYPOGRAPHY_BASE_CLASS_NAME = "text-[length:var(--typography-font-size)] font-[var(--typography-font-weight)] leading-[var(--typography-line-height)] text-[var(--typography-color,var(--color-text-primary))] tracking-[var(--typography-letter-spacing)] [font-family:var(--typography-font-family,var(--font-family))] [font-style:var(--typography-font-style)] [height:var(--typography-height)] [margin-bottom:var(--typography-margin-bottom,0)] [margin-left:var(--typography-margin-left,0)] [margin-right:var(--typography-margin-right,0)] [margin-top:var(--typography-margin-top,0)] [max-height:var(--typography-max-height)] [max-width:var(--typography-max-width)] [min-height:var(--typography-min-height)] [min-width:var(--typography-min-width)] [padding-bottom:var(--typography-padding-bottom,0)] [padding-left:var(--typography-padding-left,0)] [padding-right:var(--typography-padding-right,0)] [padding-top:var(--typography-padding-top,0)] [text-align:var(--typography-text-align)] [text-decoration:var(--typography-text-decoration)] [text-overflow:var(--typography-text-overflow)] [text-transform:var(--typography-text-transform)] [vertical-align:var(--typography-vertical-align)] [white-space:var(--typography-white-space)] [width:var(--typography-width)] [word-break:var(--typography-word-break)]";
+export type TypographyTailwindClassNamePlan = {
+    className: string;
+    style: CSSProperties | undefined;
+};
+/** Формирует responsive Tailwind utilities и inline-переменные без runtime CSS. */
+export declare function buildTypographyTailwindClassNamePlan(props: ResponsiveUiKitStyleProps): TypographyTailwindClassNamePlan;
+/**
+ * Карта вариантов Typography и их связка с токенами дизайн-системы.
+ *
+ * Алиасы `sh` и `caption-caps` сохранены для обратной совместимости с текущими
+ * компонентами и stories. Новые места лучше привязывать к семантическим вариантам
+ * `h1`, `h2`, `h3`, `h4`, `b1`, `b2`, `b3`, `caption`.
+ */
+export declare const typographyVariantTokens: {
+    readonly h1: {
+        readonly base: {
+            readonly fontSize: "--typo-fs-h1-sm";
+            readonly fontWeight: "--typo-fw-h1-sm";
+            readonly lineHeight: "--typo-lh-h1-sm";
+        };
+        readonly md: {
+            readonly fontSize: "--typo-fs-h1-md";
+            readonly fontWeight: "--typo-fw-h1-md";
+            readonly lineHeight: "--typo-lh-h1-md";
+        };
+        readonly lg: {
+            readonly fontSize: "--typo-fs-h1-lg";
+            readonly fontWeight: "--typo-fw-h1-lg";
+            readonly lineHeight: "--typo-lh-h1-lg";
+        };
+    };
+    readonly h2: {
+        readonly base: {
+            readonly fontSize: "--typo-fs-h2-md";
+            readonly fontWeight: "--typo-fw-h2-md";
+            readonly lineHeight: "--typo-lh-h2-md";
+        };
+        readonly lg: {
+            readonly fontSize: "--typo-fs-h2-lg";
+            readonly fontWeight: "--typo-fw-h2-lg";
+            readonly lineHeight: "--typo-lh-h2-lg";
+        };
+    };
+    readonly h3: {
+        readonly base: {
+            readonly fontSize: "--typo-fs-h3-md";
+            readonly fontWeight: "--typo-fw-h3-md";
+            readonly lineHeight: "--typo-lh-h3-md";
+        };
+        readonly md: {
+            readonly fontSize: "--typo-fs-h3-lg";
+            readonly fontWeight: "--typo-fw-h3-lg";
+            readonly lineHeight: "--typo-lh-h3-lg";
+        };
+    };
+    readonly h4: {
+        readonly base: {
+            readonly fontSize: "--typo-fs-h4-md";
+            readonly fontWeight: "--typo-fw-h4-md";
+            readonly lineHeight: "--typo-lh-h4-md";
+        };
+        readonly lg: {
+            readonly fontSize: "--typo-fs-h4-lg";
+            readonly fontWeight: "--typo-fw-h4-lg";
+            readonly lineHeight: "--typo-lh-h4-lg";
+        };
+    };
+    readonly sh: {
+        readonly base: {
+            readonly fontSize: "--typo-fs-h4-lg";
+            readonly fontWeight: "--typo-fw-h4-lg";
+            readonly lineHeight: "--typo-lh-h4-lg";
+        };
+    };
+    readonly b1: {
+        readonly base: {
+            readonly fontSize: "--typo-fs-b1-md";
+            readonly fontWeight: "--typo-fw-b1-md";
+            readonly lineHeight: "--typo-lh-b1-md";
+        };
+        readonly lg: {
+            readonly fontSize: "--typo-fs-b1-lg";
+            readonly fontWeight: "--typo-fw-b1-lg";
+            readonly lineHeight: "--typo-lh-b1-lg";
+        };
+    };
+    readonly b2: {
+        readonly base: {
+            readonly fontSize: "--typo-fs-b2-md";
+            readonly fontWeight: "--typo-fw-b2-md";
+            readonly lineHeight: "--typo-lh-b2-md";
+        };
+        readonly lg: {
+            readonly fontSize: "--typo-fs-b2-lg";
+            readonly fontWeight: "--typo-fw-b2-lg";
+            readonly lineHeight: "--typo-lh-b2-lg";
+        };
+    };
+    readonly b3: {
+        readonly base: {
+            readonly fontSize: "--typo-fs-b3-md";
+            readonly fontWeight: "--typo-fw-b3-md";
+            readonly lineHeight: "--typo-lh-b3-md";
+        };
+        readonly lg: {
+            readonly fontSize: "--typo-fs-b3-lg";
+            readonly fontWeight: "--typo-fw-b3-lg";
+            readonly lineHeight: "--typo-lh-b3-lg";
+        };
+    };
+    readonly caption: {
+        readonly base: {
+            readonly fontSize: "--typo-fs-caption-lg";
+            readonly fontWeight: "--typo-fw-caption-lg";
+            readonly lineHeight: "--typo-lh-caption-lg";
+        };
+    };
+    readonly 'caption-caps': {
+        readonly base: {
+            readonly fontSize: "--typo-fs-caption-lg";
+            readonly fontWeight: "--typo-fw-caption-lg";
+            readonly lineHeight: "--typo-lh-caption-lg";
+        };
+        readonly className: "uppercase";
+    };
+};
+/**
+ * Публичный список доступных вариантов Typography, полученный из карты токенов.
+ */
+export type TypographyVariant = keyof typeof typographyVariantTokens;
+/**
+ * Собирает классы Typography без рендера компонента.
+ *
+ * Удобно для случаев, когда нужен тот же визуальный стиль на составном или внешнем
+ * элементе, но сам компонент Typography использовать нельзя.
+ */
+export declare function typographyVariants({ className, variant, }?: {
+    className?: string;
+    variant?: TypographyVariant;
+}): string;
+/**
+ * Преобразует описание варианта в responsive style props.
+ *
+ * На выходе получается тот же формат, который принимают UiKitProvider и UI-компоненты:
+ * base-значения попадают в `vars`, а брейкпоинты в `md`/`lg`. Затем эти props можно
+ * слить с пользовательскими overrides через `mergeResponsiveStyleProps`.
+ */
+export declare function getTypographyVariantStyleProps(definition: TypographyVariantDefinition): ResponsiveUiKitStyleProps;
+/**
+ * Преобразует typography props в responsive style props.
+ *
+ * Этот helper нужен, чтобы публичный API Typography оставался типизированным и
+ * удобным, но внутри продолжал работать через тот же механизм CSS-переменных,
+ * что и UiKitProvider.
+ */
+export declare function getTypographyStyleOverrideProps({ color, fontSize, fontWeight, lineHeight, verticalAlign, horizontalAlign, textTransform, textDecoration, textOverflow, whiteSpace, wordBreak, italic, fontFamily, width, minWidth, maxWidth, height, minHeight, maxHeight, p, m, md, lg, xl, }: ResponsiveTypographyStyleProps): ResponsiveUiKitStyleProps;
+/**
+ * Удаляет из responsive-слоёв варианта переменные, которые уже были заданы
+ * пользовательскими props. Иначе дефолтный `variant="b2"` может вернуть свои
+ * значения на `lg` и перебить ручной `fontSize`/`md.fontSize`.
+ */
+export declare function omitVariantStylePropsOverriddenByUserProps(variantProps: ResponsiveUiKitStyleProps, userProps: ResponsiveUiKitStyleProps): ResponsiveUiKitStyleProps;
+/**
+ * Мапит короткие props одного состояния в CSS-переменные Typography.
+ */
+export declare function getTypographyStyleOverrideVars({ color, fontSize, fontWeight, lineHeight, verticalAlign, horizontalAlign, textTransform, textDecoration, textOverflow, whiteSpace, wordBreak, italic, fontFamily, width, minWidth, maxWidth, height, minHeight, maxHeight, p, m, }: UiKitTypographyProps): CssVariableMap | undefined;
+export {};

package/dist/typography.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const M=require("react/jsx-runtime"),O=require("./responsive-style.config-B2m9jVlX.cjs"),H=require("./responsive-style.utils-BdyoDkKg.cjs"),C="text-[length:var(--typography-font-size)] font-[var(--typography-font-weight)] leading-[var(--typography-line-height)] text-[var(--typography-color,var(--color-text-primary))] tracking-[var(--typography-letter-spacing)] [font-family:var(--typography-font-family,var(--font-family))] [font-style:var(--typography-font-style)] [height:var(--typography-height)] [margin-bottom:var(--typography-margin-bottom,0)] [margin-left:var(--typography-margin-left,0)] [margin-right:var(--typography-margin-right,0)] [margin-top:var(--typography-margin-top,0)] [max-height:var(--typography-max-height)] [max-width:var(--typography-max-width)] [min-height:var(--typography-min-height)] [min-width:var(--typography-min-width)] [padding-bottom:var(--typography-padding-bottom,0)] [padding-left:var(--typography-padding-left,0)] [padding-right:var(--typography-padding-right,0)] [padding-top:var(--typography-padding-top,0)] [text-align:var(--typography-text-align)] [text-decoration:var(--typography-text-decoration)] [text-overflow:var(--typography-text-overflow)] [text-transform:var(--typography-text-transform)] [vertical-align:var(--typography-vertical-align)] [white-space:var(--typography-white-space)] [width:var(--typography-width)] [word-break:var(--typography-word-break)]",o={color:"--typography-color",fontSize:"--typography-font-size",fontFamily:"--typography-font-family",fontStyle:"--typography-font-style",fontWeight:"--typography-font-weight",height:"--typography-height",letterSpacing:"--typography-letter-spacing",lineHeight:"--typography-line-height",marginBottom:"--typography-margin-bottom",marginLeft:"--typography-margin-left",marginRight:"--typography-margin-right",marginTop:"--typography-margin-top",maxHeight:"--typography-max-height",maxWidth:"--typography-max-width",minHeight:"--typography-min-height",minWidth:"--typography-min-width",paddingBottom:"--typography-padding-bottom",paddingLeft:"--typography-padding-left",paddingRight:"--typography-padding-right",paddingTop:"--typography-padding-top",textAlign:"--typography-text-align",textDecoration:"--typography-text-decoration",textOverflow:"--typography-text-overflow",textTransform:"--typography-text-transform",verticalAlign:"--typography-vertical-align",whiteSpace:"--typography-white-space",width:"--typography-width",wordBreak:"--typography-word-break"},U={[o.color]:"color",[o.fontSize]:"font-size",[o.fontFamily]:"font-family",[o.fontStyle]:"font-style",[o.fontWeight]:"font-weight",[o.height]:"height",[o.letterSpacing]:"letter-spacing",[o.lineHeight]:"line-height",[o.marginBottom]:"margin-bottom",[o.marginLeft]:"margin-left",[o.marginRight]:"margin-right",[o.marginTop]:"margin-top",[o.maxHeight]:"max-height",[o.maxWidth]:"max-width",[o.minHeight]:"min-height",[o.minWidth]:"min-width",[o.paddingBottom]:"padding-bottom",[o.paddingLeft]:"padding-left",[o.paddingRight]:"padding-right",[o.paddingTop]:"padding-top",[o.textAlign]:"text-align",[o.textDecoration]:"text-decoration",[o.textOverflow]:"text-overflow",[o.textTransform]:"text-transform",[o.verticalAlign]:"vertical-align",[o.whiteSpace]:"white-space",[o.width]:"width",[o.wordBreak]:"word-break"};function J(t){const e=[],i={...t.vars??{}};for(const a of O.responsiveBreakpoints)for(const[n,p]of Object.entries(t[a]?.vars??{})){const h=U[n];if(!h||p===void 0||p===null)continue;const g=`--${a}-${n.slice(2)}`;i[g]=p,e.push(`${a}:[${h}:var(${g})]`)}return{className:e.join(" "),style:Object.keys(i).length>0?i:void 0}}const _={h1:{base:{fontSize:"--typo-fs-h1-sm",fontWeight:"--typo-fw-h1-sm",lineHeight:"--typo-lh-h1-sm"},md:{fontSize:"--typo-fs-h1-md",fontWeight:"--typo-fw-h1-md",lineHeight:"--typo-lh-h1-md"},lg:{fontSize:"--typo-fs-h1-lg",fontWeight:"--typo-fw-h1-lg",lineHeight:"--typo-lh-h1-lg"}},h2:{base:{fontSize:"--typo-fs-h2-md",fontWeight:"--typo-fw-h2-md",lineHeight:"--typo-lh-h2-md"},lg:{fontSize:"--typo-fs-h2-lg",fontWeight:"--typo-fw-h2-lg",lineHeight:"--typo-lh-h2-lg"}},h3:{base:{fontSize:"--typo-fs-h3-md",fontWeight:"--typo-fw-h3-md",lineHeight:"--typo-lh-h3-md"},md:{fontSize:"--typo-fs-h3-lg",fontWeight:"--typo-fw-h3-lg",lineHeight:"--typo-lh-h3-lg"}},h4:{base:{fontSize:"--typo-fs-h4-md",fontWeight:"--typo-fw-h4-md",lineHeight:"--typo-lh-h4-md"},lg:{fontSize:"--typo-fs-h4-lg",fontWeight:"--typo-fw-h4-lg",lineHeight:"--typo-lh-h4-lg"}},sh:{base:{fontSize:"--typo-fs-h4-lg",fontWeight:"--typo-fw-h4-lg",lineHeight:"--typo-lh-h4-lg"}},b1:{base:{fontSize:"--typo-fs-b1-md",fontWeight:"--typo-fw-b1-md",lineHeight:"--typo-lh-b1-md"},lg:{fontSize:"--typo-fs-b1-lg",fontWeight:"--typo-fw-b1-lg",lineHeight:"--typo-lh-b1-lg"}},b2:{base:{fontSize:"--typo-fs-b2-md",fontWeight:"--typo-fw-b2-md",lineHeight:"--typo-lh-b2-md"},lg:{fontSize:"--typo-fs-b2-lg",fontWeight:"--typo-fw-b2-lg",lineHeight:"--typo-lh-b2-lg"}},b3:{base:{fontSize:"--typo-fs-b3-md",fontWeight:"--typo-fw-b3-md",lineHeight:"--typo-lh-b3-md"},lg:{fontSize:"--typo-fs-b3-lg",fontWeight:"--typo-fw-b3-lg",lineHeight:"--typo-lh-b3-lg"}},caption:{base:{fontSize:"--typo-fs-caption-lg",fontWeight:"--typo-fw-caption-lg",lineHeight:"--typo-lh-caption-lg"}},"caption-caps":{base:{fontSize:"--typo-fs-caption-lg",fontWeight:"--typo-fw-caption-lg",lineHeight:"--typo-lh-caption-lg"},className:"uppercase"}};function K({className:t,variant:e="b2"}={}){const i=_[e];return O.cn(C,i.className,t)}function Q(t){return{vars:A(t.base),md:t.md?{vars:A(t.md)}:void 0,lg:t.lg?{vars:A(t.lg)}:void 0}}function X({color:t,fontSize:e,fontWeight:i,lineHeight:a,verticalAlign:n,horizontalAlign:p,textTransform:h,textDecoration:g,textOverflow:y,whiteSpace:d,wordBreak:m,italic:c,fontFamily:v,width:b,minWidth:u,maxWidth:w,height:S,minHeight:x,maxHeight:z,p:W,m:k,md:r,lg:s,xl:f}){return{vars:P({color:t,fontSize:e,fontWeight:i,lineHeight:a,verticalAlign:n,horizontalAlign:p,textTransform:h,textDecoration:g,textOverflow:y,whiteSpace:d,wordBreak:m,italic:c,fontFamily:v,width:b,minWidth:u,maxWidth:w,height:S,minHeight:x,maxHeight:z,p:W,m:k}),md:r?{vars:P(r)}:void 0,lg:s?{vars:P(s)}:void 0,xl:f?{vars:P(f)}:void 0}}function Z(t,e){const i=new Set(Object.keys(e.vars??{})),a={colors:t.colors,typography:t.typography,vars:t.vars};for(const n of O.responsiveBreakpoints){for(const y of Object.keys(e[n]?.vars??{}))i.add(y);const p=t[n];if(!p)continue;const h=Object.fromEntries(Object.entries(p.vars??{}).filter(([y])=>!i.has(y))),g={colors:p.colors,typography:p.typography,vars:Object.keys(h).length>0?h:void 0};(g.colors||g.typography||g.vars)&&(a[n]=g)}return a}function A(t){return{[o.fontSize]:`var(${t.fontSize})`,[o.fontWeight]:`var(${t.fontWeight})`,[o.letterSpacing]:0,[o.lineHeight]:`var(${t.lineHeight})`}}function P({color:t,fontSize:e,fontWeight:i,lineHeight:a,verticalAlign:n,horizontalAlign:p,textTransform:h,textDecoration:g,textOverflow:y,whiteSpace:d,wordBreak:m,italic:c,fontFamily:v,width:b,minWidth:u,maxWidth:w,height:S,minHeight:x,maxHeight:z,p:W,m:k}){const r={},s=e,f=i,V=a;return t!==void 0&&(r[o.color]=H.normalizeCssTokenValue(t)),s!==void 0&&(r[o.fontSize]=H.normalizeCssTokenValue(s)),f!==void 0&&(r[o.fontWeight]=H.normalizeCssTokenValue(f)),V!==void 0&&(r[o.lineHeight]=H.normalizeCssTokenValue(V)),n!==void 0&&(r[o.verticalAlign]=n),p!==void 0&&(r[o.textAlign]=p),h!==void 0&&(r[o.textTransform]=it(h)),g!==void 0&&(r[o.textDecoration]=rt(g)),y!==void 0&&(r[o.textOverflow]=y),d!==void 0&&(r[o.whiteSpace]=d),m!==void 0&&(r[o.wordBreak]=nt(m)),c!==void 0&&(r[o.fontStyle]=c?"italic":"normal"),v!==void 0&&(r[o.fontFamily]=H.normalizeCssTokenValue(v)),b!==void 0&&(r[o.width]=T(b)),u!==void 0&&(r[o.minWidth]=T(u)),w!==void 0&&(r[o.maxWidth]=T(w)),S!==void 0&&(r[o.height]=T(S)),x!==void 0&&(r[o.minHeight]=T(x)),z!==void 0&&(r[o.maxHeight]=T(z)),Object.assign(r,tt({p:W,m:k})),Object.keys(r).length>0?r:void 0}function T(t){return typeof t=="number"?`${t}px`:t}function tt({p:t,m:e}){const i={},a=ot(t),n=et(e);return a.top!==void 0&&(i[o.paddingTop]=l(a.top)),a.right!==void 0&&(i[o.paddingRight]=l(a.right)),a.bottom!==void 0&&(i[o.paddingBottom]=l(a.bottom)),a.left!==void 0&&(i[o.paddingLeft]=l(a.left)),n.top!==void 0&&(i[o.marginTop]=l(n.top)),n.right!==void 0&&(i[o.marginRight]=l(n.right)),n.bottom!==void 0&&(i[o.marginBottom]=l(n.bottom)),n.left!==void 0&&(i[o.marginLeft]=l(n.left)),i}function ot(t){if(t===void 0)return{};if(Array.isArray(t)){const[i,a,n,p]=t;return{top:i,right:a,bottom:n,left:p}}if(typeof t!="object")return{top:t,right:t,bottom:t,left:t};const e=t;return{top:e.py??e.pt,right:e.px??e.pr,bottom:e.py??e.pb,left:e.px??e.pl}}function et(t){if(t===void 0)return{};if(Array.isArray(t)){const[i,a,n,p]=t;return{top:i,right:a,bottom:n,left:p}}if(typeof t!="object")return{top:t,right:t,bottom:t,left:t};const e=t;return{top:e.my??e.mt,right:e.mx??e.mr,bottom:e.my??e.mb,left:e.mx??e.ml}}function l(t){return typeof t=="number"?`${t}px`:t}function it(t){return t==="normal-case"?"none":t}function rt(t){return t==="no-underline"?"none":t}function nt(t){return{all:"break-all",keep:"keep-all",normal:"normal",word:"break-word"}[t]}function at({as:t,children:e,className:i,color:a,fontSize:n,fontWeight:p,lineHeight:h,verticalAlign:g,horizontalAlign:y,textTransform:d,textDecoration:m,textOverflow:c,whiteSpace:v,wordBreak:b,italic:u,fontFamily:w,width:S,minWidth:x,maxWidth:z,height:W,minHeight:k,maxHeight:r,p:s,m:f,md:V,lg:$,xl:L,style:B,variant:Y="b2",...D}){const E=t??"p",j=_[Y],F=Q(j),N=X({color:a,fontSize:n,fontWeight:p,lineHeight:h,verticalAlign:g,horizontalAlign:y,textTransform:d,textDecoration:m,textOverflow:c,whiteSpace:v,wordBreak:b,italic:u,fontFamily:w,width:S,minWidth:x,maxWidth:z,height:W,minHeight:k,maxHeight:r,p:s,m:f,md:V,lg:$,xl:L}),q=Z(F,N),G=H.mergeResponsiveStyleProps(q,N),R=J(G),I=R.style||B?{...R.style,...B}:void 0;return M.jsx(E,{className:O.cn(C,j.className,R.className,i),style:I,...D,children:e})}exports.Typography=at;exports.typographyVariants=K;