@ozen-ui/kit 0.0.1

package/__inner__/esm/components/Tooltip/Tooltip.js

@@ -0,0 +1,119 @@
+import { __assign, __read, __rest } from "tslib";
+import './Tooltip.css';
+import React, { forwardRef, useRef, useMemo, useState, useEffect } from 'react';
+import { useControlled } from '../../hooks/useControlled';
+import { useDebounceCallback } from '../../hooks/useDebounceCallback';
+import { useMultiRef } from '../../hooks/useMultiRef';
+import { useThemeProps } from '../../hooks/useThemeProps';
+import { cn } from '../../utils/classname';
+import { Popover } from '../Popover';
+import { TOOLTIP_DEFAULT_ARROW, TOOLTIP_DEFAULT_DELAY_ENTER, TOOLTIP_DEFAULT_DELAY_LEAVE, TOOLTIP_DEFAULT_DISABLED, TOOLTIP_DEFAULT_OFFSET, TOOLTIP_DEFAULT_SHOULD_WRAP_CHILDREN, TOOLTIP_DEFAULT_SIZE, TOOLTIP_DEFAULT_TRIGGER, TOOLTIP_DEFAULT_VARIANT, } from './constants';
+export var cnTooltip = cn('Tooltip');
+export var Tooltip = forwardRef(function (inProps, ref) {
+    var props = useThemeProps({ props: inProps, name: 'Tooltip' });
+    var _a = props.trigger, trigger = _a === void 0 ? TOOLTIP_DEFAULT_TRIGGER : _a, _b = props.size, size = _b === void 0 ? TOOLTIP_DEFAULT_SIZE : _b, _c = props.variant, variant = _c === void 0 ? TOOLTIP_DEFAULT_VARIANT : _c, _d = props.offset, offset = _d === void 0 ? TOOLTIP_DEFAULT_OFFSET : _d, _e = props.delayEnter, delayEnter = _e === void 0 ? TOOLTIP_DEFAULT_DELAY_ENTER : _e, _f = props.delayLeave, delayLeave = _f === void 0 ? TOOLTIP_DEFAULT_DELAY_LEAVE : _f, _g = props.arrow, arrow = _g === void 0 ? TOOLTIP_DEFAULT_ARROW : _g, _h = props.shouldWrapChildren, shouldWrapChildren = _h === void 0 ? TOOLTIP_DEFAULT_SHOULD_WRAP_CHILDREN : _h, _j = props.disabled, disabled = _j === void 0 ? TOOLTIP_DEFAULT_DISABLED : _j, children = props.children, label = props.label, openProp = props.open, placement = props.placement, disableInteractive = props.disableInteractive, className = props.className, onOpen = props.onOpen, onClose = props.onClose, other = __rest(props, ["trigger", "size", "variant", "offset", "delayEnter", "delayLeave", "arrow", "shouldWrapChildren", "disabled", "children", "label", "open", "placement", "disableInteractive", "className", "onOpen", "onClose"]);
+    var _k = __read(useState(), 2), delay = _k[0], setDelay = _k[1];
+    var _l = __read(useState(), 2), hasFocus = _l[0], setHasFocus = _l[1];
+    var _m = __read(useState(), 2), hasHover = _m[0], setHasHover = _m[1];
+    var anchorRef = useRef(null);
+    var _o = __read(useControlled({
+        value: openProp,
+        defaultValue: false,
+        name: 'Tooltip',
+        state: 'open'
+    }), 2), openState = _o[0], setOpenState = _o[1];
+    useEffect(function () {
+        setDelay(openState ? delayLeave : delayEnter);
+    }, [openState, delayEnter, delayLeave]);
+    var handleOpen = function (open) {
+        if (disabled) {
+            return;
+        }
+        if (open) {
+            onOpen === null || onOpen === void 0 ? void 0 : onOpen();
+        }
+        else {
+            onClose === null || onClose === void 0 ? void 0 : onClose();
+        }
+        setOpenState(open);
+    };
+    var _p = __read(useDebounceCallback(handleOpen, delay), 1), debounceSetOpen = _p[0];
+    var resolveChildren = useMemo(function () {
+        return typeof children !== 'object' || shouldWrapChildren ? (React.createElement("span", null, children)) : (children);
+    }, [children, shouldWrapChildren]);
+    var childrenProps = resolveChildren.props, childrenRef = resolveChildren.ref;
+    var childrenMultiRef = useMultiRef([anchorRef, childrenRef]);
+    var handleMouseEnter = function () {
+        if (trigger === 'hover' || trigger === 'hover&focus') {
+            setHasHover(true);
+            debounceSetOpen(true);
+        }
+    };
+    var handleMouseLeave = function () {
+        if (trigger === 'hover' || trigger === 'hover&focus') {
+            setHasHover(false);
+            if (!hasFocus)
+                debounceSetOpen(false);
+        }
+    };
+    var handleClick = function () {
+        if (trigger === 'click') {
+            debounceSetOpen(!openState);
+        }
+    };
+    var handleFocus = function () {
+        if (trigger === 'focus' || trigger === 'hover&focus') {
+            setHasFocus(true);
+            debounceSetOpen(true);
+        }
+    };
+    var handleBlur = function () {
+        if (trigger === 'focus' || trigger === 'hover&focus') {
+            setHasFocus(false);
+            if (!hasHover)
+                debounceSetOpen(false);
+        }
+    };
+    var handleClose = function () { return debounceSetOpen(false); };
+    var composeChildrenProps = useMemo(function () {
+        var onClick = childrenProps.onClick, onFocus = childrenProps.onFocus, onBlur = childrenProps.onBlur, onMouseEnter = childrenProps.onMouseEnter, onMouseLeave = childrenProps.onMouseLeave;
+        return {
+            ref: childrenMultiRef,
+            onClick: function (e) {
+                handleClick();
+                onClick === null || onClick === void 0 ? void 0 : onClick(e);
+            },
+            onFocus: function (e) {
+                handleFocus();
+                onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
+            },
+            onBlur: function (e) {
+                handleBlur();
+                onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
+            },
+            onMouseEnter: function (e) {
+                handleMouseEnter();
+                onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(e);
+            },
+            onMouseLeave: function (e) {
+                handleMouseLeave();
+                onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(e);
+            }
+        };
+    }, [
+        childrenProps,
+        childrenMultiRef,
+        handleMouseEnter,
+        handleMouseLeave,
+        handleClick,
+        handleFocus,
+        handleBlur,
+    ]);
+    return (React.createElement(React.Fragment, null,
+        React.cloneElement(resolveChildren, composeChildrenProps),
+        React.createElement(Popover, __assign({ anchorRef: anchorRef }, other, { ref: ref, offset: offset, placement: placement, open: openState && !disabled, onClose: handleClose, className: cnTooltip({ size: size, variant: variant }, [className]), disableInteractive: disableInteractive, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, arrow: arrow, arrowProps: {
+                variant: variant,
+                size: size
+            }, disableEnforceFocus: true, disableReturnFocus: true }), label)));
+});
+Tooltip.displayName = 'Tooltip';

package/__inner__/esm/components/Tooltip/constants.d.ts

@@ -0,0 +1,9 @@
+export declare const TOOLTIP_DEFAULT_TRIGGER = "hover";
+export declare const TOOLTIP_DEFAULT_SIZE = "s";
+export declare const TOOLTIP_DEFAULT_VARIANT = "dark";
+export declare const TOOLTIP_DEFAULT_OFFSET: number[];
+export declare const TOOLTIP_DEFAULT_DELAY_ENTER = 100;
+export declare const TOOLTIP_DEFAULT_DELAY_LEAVE = 100;
+export declare const TOOLTIP_DEFAULT_ARROW = true;
+export declare const TOOLTIP_DEFAULT_SHOULD_WRAP_CHILDREN = false;
+export declare const TOOLTIP_DEFAULT_DISABLED = false;

package/__inner__/esm/components/Tooltip/constants.js

@@ -0,0 +1,9 @@
+export var TOOLTIP_DEFAULT_TRIGGER = 'hover';
+export var TOOLTIP_DEFAULT_SIZE = 's';
+export var TOOLTIP_DEFAULT_VARIANT = 'dark';
+export var TOOLTIP_DEFAULT_OFFSET = [0, 8];
+export var TOOLTIP_DEFAULT_DELAY_ENTER = 100;
+export var TOOLTIP_DEFAULT_DELAY_LEAVE = 100;
+export var TOOLTIP_DEFAULT_ARROW = true;
+export var TOOLTIP_DEFAULT_SHOULD_WRAP_CHILDREN = false;
+export var TOOLTIP_DEFAULT_DISABLED = false;

package/__inner__/esm/components/Tooltip/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Tooltip';
+export * from './types';

package/__inner__/esm/components/Tooltip/index.js

@@ -0,0 +1,2 @@
+export * from './Tooltip';
+export * from './types';

package/__inner__/esm/components/Tooltip/types.d.ts

@@ -0,0 +1,42 @@
+import type { Ref, ReactNode, ReactElement, ComponentPropsWithRef } from 'react';
+import type { PopoverProps } from '../Popover';
+export declare const tooltipSizeVariant: readonly ["xs", "s"];
+export type TooltipSizeVariant = (typeof tooltipSizeVariant)[number];
+export declare const tooltipVariant: readonly ["light", "dark"];
+export type TooltipVariant = (typeof tooltipVariant)[number];
+export declare const tooltipTriggerVariant: readonly ["hover", "focus", "click", "hover&focus"];
+export type TooltipTriggerVariant = (typeof tooltipTriggerVariant)[number];
+export type TooltipProps = {
+    /** Признак по которому тултип будет представлен */
+    open?: boolean;
+    /** Элемент представляющий тултип, здесь может быть иконка, ссылка, кнопка и т.д. */
+    children: (ReactElement<unknown> & {
+        ref?: Ref<HTMLElement>;
+    }) | string | number;
+    /** Контент тултипа */
+    label?: ReactNode;
+    /** Размер тултипа */
+    size?: TooltipSizeVariant;
+    /** Вариант представления */
+    variant?: TooltipVariant;
+    /** Если {true} отключает отображение тултипа */
+    disabled?: boolean;
+    /** События вызова тултипа */
+    trigger?: TooltipTriggerVariant;
+    /** Время задержки до появления */
+    delayEnter?: number;
+    /** Время задержки до исчезновения */
+    delayLeave?: number;
+    /** Включить дополнительную обертку над children'ом */
+    shouldWrapChildren?: boolean;
+    /** Функция обратного вызова которая будет вызвана когда компонент запрашивает открытие.
+     * Используйте функцию в случае контролируемого поведения тултипа. */
+    onOpen?: () => void;
+    /** Функция обратного вызова которая будет вызвана когда компонент запрашивает закрытие.
+     * Используйте функцию в случае контролируемого поведения тултипа. */
+    onClose?: () => void;
+    /** Идентификатор компонента для тестов */
+    'data-testid'?: string;
+    /** Дополнительные CSS-классы */
+    className?: string;
+} & Pick<PopoverProps, 'offset' | 'placement' | 'arrow' | 'anchorRef' | 'ignoreClickOutsideRefs' | 'disableInteractive' | 'onEnter' | 'onEntered' | 'onExit' | 'onExited' | 'setUpdate'> & ComponentPropsWithRef<'div'>;

package/__inner__/esm/components/Tooltip/types.js

@@ -0,0 +1,8 @@
+export var tooltipSizeVariant = ['xs', 's'];
+export var tooltipVariant = ['light', 'dark'];
+export var tooltipTriggerVariant = [
+    'hover',
+    'focus',
+    'click',
+    'hover&focus',
+];

package/__inner__/esm/components/Typography/Typography.css

@@ -0,0 +1,302 @@
+/* stylelint-disable */
+.Typography {
+  margin: 0;
+  color: var(--color-content-primary);
+}
+.Typography_noWrap {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+.Typography_display_block {
+      display: block;
+    }
+.Typography_display_inline {
+      display: inline;
+    }
+.Typography_display_inlineBlock {
+      display: inline-block;
+    }
+.Typography_align_left {
+      text-align: start;
+    }
+.Typography_align_right {
+      text-align: end;
+    }
+.Typography_align_center {
+      text-align: center;
+    }
+.Typography_align_initial {
+      text-align: initial;
+    }
+.Typography_color_primary {
+      color: var(--color-content-primary);
+    }
+.Typography_color_primaryInverse {
+      color: var(--color-content-primary-inverse);
+    }
+.Typography_color_secondary {
+      color: var(--color-content-secondary);
+    }
+.Typography_color_tertiary {
+      color: var(--color-content-tertiary);
+    }
+.Typography_color_disabled {
+      color: var(--color-content-disabled);
+    }
+.Typography_color_ghostDisabled {
+      color: var(--color-content-ghost-disabled);
+    }
+.Typography_color_action {
+      color: var(--color-content-action);
+    }
+.Typography_color_actionHover {
+      color: var(--color-content-action-hover);
+    }
+.Typography_color_actionDark {
+      color: var(--color-content-action-dark);
+    }
+.Typography_color_actionOn {
+      color: var(--color-content-action-on);
+    }
+.Typography_color_error {
+      color: var(--color-content-error);
+    }
+.Typography_color_errorDark {
+      color: var(--color-content-error-dark);
+    }
+.Typography_color_warning {
+      color: var(--color-content-warning);
+    }
+.Typography_color_warningDark {
+      color: var(--color-content-warning-dark);
+    }
+.Typography_color_success {
+      color: var(--color-content-success);
+    }
+.Typography_color_successDark {
+      color: var(--color-content-success-dark);
+    }
+.Typography_color_info {
+      color: var(--color-content-info);
+    }
+.Typography_color_infoDark {
+      color: var(--color-content-info-dark);
+    }
+.Typography_variant_heading-4xl {
+      font: var(--typography-heading-4xl-font);
+      letter-spacing: var(--typography-heading-4xl-letter_spacing, 0);
+      text-transform: var(--typography-heading-4xl-text_transform, none);
+    }
+.Typography_variant_heading-4xl.Typography_defaultMargin {
+        margin-block-end: var(--space-4xl);
+      }
+.Typography_variant_heading-3xl {
+      font: var(--typography-heading-3xl-font);
+      letter-spacing: var(--typography-heading-3xl-letter_spacing, 0);
+      text-transform: var(--typography-heading-3xl-text_transform, none);
+    }
+.Typography_variant_heading-3xl.Typography_defaultMargin {
+        margin-block-end: var(--space-4xl);
+      }
+.Typography_variant_heading-2xl {
+      font: var(--typography-heading-2xl-font);
+      letter-spacing: var(--typography-heading-2xl-letter_spacing, 0);
+      text-transform: var(--typography-heading-2xl-text_transform, none);
+    }
+.Typography_variant_heading-2xl.Typography_defaultMargin {
+        margin-block-end: var(--space-3xl);
+      }
+.Typography_variant_heading-xl {
+      font: var(--typography-heading-xl-font);
+      letter-spacing: var(--typography-heading-xl-letter_spacing, 0);
+      text-transform: var(--typography-heading-xl-text_transform, none);
+    }
+.Typography_variant_heading-xl.Typography_defaultMargin {
+        margin-block-end: var(--space-2xl);
+      }
+.Typography_variant_text-4xl {
+      font: var(--typography-text-4xl-font);
+      letter-spacing: var(--typography-text-4xl-letter_spacing, 0);
+      text-transform: var(--typography-text-4xl-text_transform, none);
+    }
+.Typography_variant_text-4xl.Typography_defaultMargin {
+        margin-block-end: var(--space-4xl);
+      }
+.Typography_variant_text-4xl_1 {
+      font: var(--typography-text-4xl_1-font);
+      letter-spacing: var(--typography-text-4xl_1-letter_spacing, 0);
+      text-transform: var(--typography-text-4xl_1-text_transform, none);
+    }
+.Typography_variant_text-4xl_1.Typography_defaultMargin {
+        margin-block-end: var(--space-4xl);
+      }
+.Typography_variant_text-3xl {
+      font: var(--typography-text-3xl-font);
+      letter-spacing: var(--typography-text-3xl-letter_spacing, 0);
+      text-transform: var(--typography-text-3xl-text_transform, none);
+    }
+.Typography_variant_text-3xl.Typography_defaultMargin {
+        margin-block-end: var(--space-4xl);
+      }
+.Typography_variant_text-3xl_1 {
+      font: var(--typography-text-3xl_1-font);
+      letter-spacing: var(--typography-text-3xl_1-letter_spacing, 0);
+      text-transform: var(--typography-text-3xl_1-text_transform, none);
+    }
+.Typography_variant_text-3xl_1.Typography_defaultMargin {
+        margin-block-end: var(--space-4xl);
+      }
+.Typography_variant_text-2xl {
+      font: var(--typography-text-2xl-font);
+      letter-spacing: var(--typography-text-2xl-letter_spacing, 0);
+      text-transform: var(--typography-text-2xl-text_transform, none);
+    }
+.Typography_variant_text-2xl.Typography_defaultMargin {
+        margin-block-end: var(--space-3xl);
+      }
+.Typography_variant_text-2xl_1 {
+      font: var(--typography-text-2xl_1-font);
+      letter-spacing: var(--typography-text-2xl_1-letter_spacing, 0);
+      text-transform: var(--typography-text-2xl_1-text_transform, none);
+    }
+.Typography_variant_text-2xl_1.Typography_defaultMargin {
+        margin-block-end: var(--space-3xl);
+      }
+.Typography_variant_text-xl {
+      font: var(--typography-text-xl-font);
+      letter-spacing: var(--typography-text-xl-letter_spacing, 0);
+      text-transform: var(--typography-text-xl-text_transform, none);
+    }
+.Typography_variant_text-xl.Typography_defaultMargin {
+        margin-block-end: var(--space-2xl);
+      }
+.Typography_variant_text-xl_1 {
+      font: var(--typography-text-xl_1-font);
+      letter-spacing: var(--typography-text-xl_1-letter_spacing, 0);
+      text-transform: var(--typography-text-xl_1-text_transform, none);
+    }
+.Typography_variant_text-xl_1.Typography_defaultMargin {
+        margin-block-end: var(--space-2xl);
+      }
+.Typography_variant_text-l {
+      font: var(--typography-text-l-font);
+      letter-spacing: var(--typography-text-l-letter_spacing, 0);
+      text-transform: var(--typography-text-l-text_transform, none);
+    }
+.Typography_variant_text-l.Typography_defaultMargin {
+        margin-block-end: var(--space-xl);
+      }
+.Typography_variant_text-l_1 {
+      font: var(--typography-text-l_1-font);
+      letter-spacing: var(--typography-text-l_1-letter_spacing, 0);
+      text-transform: var(--typography-text-l_1-text_transform, none);
+    }
+.Typography_variant_text-l_1.Typography_defaultMargin {
+        margin-block-end: var(--space-xl);
+      }
+.Typography_variant_text-m {
+      font: var(--typography-text-m-font);
+      letter-spacing: var(--typography-text-m-letter_spacing, 0);
+      text-transform: var(--typography-text-m-text_transform, none);
+    }
+.Typography_variant_text-m.Typography_defaultMargin {
+        margin-block-end: var(--space-xl);
+      }
+.Typography_variant_text-m_1 {
+      font: var(--typography-text-m_1-font);
+      letter-spacing: var(--typography-text-m_1-letter_spacing, 0);
+      text-transform: var(--typography-text-m_1-text_transform, none);
+    }
+.Typography_variant_text-m_1.Typography_defaultMargin {
+        margin-block-end: var(--space-xl);
+      }
+.Typography_variant_text-s {
+      font: var(--typography-text-s-font);
+      letter-spacing: var(--typography-text-s-letter_spacing, 0);
+      text-transform: var(--typography-text-s-text_transform, none);
+    }
+.Typography_variant_text-s.Typography_defaultMargin {
+        margin-block-end: var(--space-m);
+      }
+.Typography_variant_text-s_1 {
+      font: var(--typography-text-s_1-font);
+      letter-spacing: var(--typography-text-s_1-letter_spacing, 0);
+      text-transform: var(--typography-text-s_1-text_transform, none);
+    }
+.Typography_variant_text-s_1.Typography_defaultMargin {
+        margin-block-end: var(--space-m);
+      }
+.Typography_variant_text-xs {
+      font: var(--typography-text-xs-font);
+      letter-spacing: var(--typography-text-xs-letter_spacing, 0);
+      text-transform: var(--typography-text-xs-text_transform, none);
+    }
+.Typography_variant_text-xs.Typography_defaultMargin {
+        margin-block-end: var(--space-s);
+      }
+.Typography_variant_text-xs_1 {
+      font: var(--typography-text-xs_1-font);
+      letter-spacing: var(--typography-text-xs_1-letter_spacing, 0);
+      text-transform: var(--typography-text-xs_1-text_transform, none);
+    }
+.Typography_variant_text-xs_1.Typography_defaultMargin {
+        margin-block-end: var(--space-s);
+      }
+.Typography_variant_text-2xs {
+      font: var(--typography-text-2xs-font);
+      letter-spacing: var(--typography-text-2xs-letter_spacing, 0);
+      text-transform: var(--typography-text-2xs-text_transform, none);
+    }
+.Typography_variant_text-2xs.Typography_defaultMargin {
+        margin-block-end: var(--space-xs);
+      }
+.Typography_variant_text-2xs_1 {
+      font: var(--typography-text-2xs_1-font);
+      letter-spacing: var(--typography-text-2xs_1-letter_spacing, 0);
+      text-transform: var(--typography-text-2xs_1-text_transform, none);
+    }
+.Typography_variant_text-2xs_1.Typography_defaultMargin {
+        margin-block-end: var(--space-xs);
+      }
+.Typography_variant_text-3xs {
+      font: var(--typography-text-3xs-font);
+      letter-spacing: var(--typography-text-3xs-letter_spacing, 0);
+      text-transform: var(--typography-text-3xs-text_transform, none);
+    }
+.Typography_variant_text-3xs.Typography_defaultMargin {
+        margin-block-end: var(--space-xs);
+      }
+.Typography_variant_text-3xs_1 {
+      font: var(--typography-text-3xs_1-font);
+      letter-spacing: var(--typography-text-3xs_1-letter_spacing, 0);
+      text-transform: var(--typography-text-3xs_1-text_transform, none);
+    }
+.Typography_variant_text-3xs_1.Typography_defaultMargin {
+        margin-block-end: var(--space-xs);
+      }
+.Typography_variant_caption-3xs {
+      font: var(--typography-caption-3xs-font);
+      letter-spacing: var(--typography-caption-3xs-letter_spacing, 0);
+      text-transform: var(--typography-caption-3xs-text_transform, none);
+    }
+.Typography_variant_caption-3xs.Typography_defaultMargin {
+        margin-block-end: var(--space-xs);
+      }
+.Typography_variant_caption-3xs_1 {
+      font: var(--typography-caption-3xs_1-font);
+      letter-spacing: var(--typography-caption-3xs_1-letter_spacing, 0);
+      text-transform: var(--typography-caption-3xs_1-text_transform, none);
+    }
+.Typography_variant_caption-3xs_1.Typography_defaultMargin {
+        margin-block-end: var(--space-xs);
+      }
+.Typography_link {
+    color: var(--color-content-action);
+  }
+.Typography_link:hover {
+      color: var(--color-content-action-hover);
+    }
+.Typography_link:active {
+      color: var(--color-content-action-dark);
+    }

package/__inner__/esm/components/Typography/Typography.d.ts

@@ -0,0 +1,34 @@
+import './Typography.css';
+import type { ElementType, ReactNode } from 'react';
+import type { PolymorphicComponentPropsWithoutRef } from '../../utils/polymorphicComponentWithRef';
+export declare const typographyVariant: readonly ["heading-4xl", "heading-3xl", "heading-2xl", "heading-xl", "text-4xl", "text-4xl_1", "text-3xl", "text-3xl_1", "text-2xl", "text-2xl_1", "text-xl", "text-xl_1", "text-l", "text-l_1", "text-m", "text-m_1", "text-s", "text-s_1", "text-xs", "text-xs_1", "text-2xs", "text-2xs_1", "text-3xs", "text-3xs_1", "caption-3xs", "caption-3xs_1"];
+export type TypographyVariant = (typeof typographyVariant)[number];
+export declare const typographyDisplayVariant: readonly ["block", "inline", "inlineBlock"];
+export type TypographyDisplayVariant = (typeof typographyDisplayVariant)[number];
+export declare const typographyAlignVariant: readonly ["left", "center", "right"];
+export type TypographyAlignVariant = (typeof typographyAlignVariant)[number];
+export declare const typographyColorVariant: readonly ["primary", "secondary", "tertiary", "disabled", "ghostDisabled", "action", "actionHover", "actionDark", "actionOn", "error", "errorDark", "warning", "warningDark", "success", "successDark", "info", "infoDark", "primaryInverse"];
+export type TypographyColorVariant = (typeof typographyColorVariant)[number];
+export type TypographyBaseProps = {
+    /** Вариант типографики */
+    variant?: TypographyVariant;
+    /** Цвет текста */
+    color?: TypographyColorVariant;
+    /** Если {true} добавляет отступы */
+    defaultMargin?: boolean;
+    /** Выравнивание */
+    align?: TypographyAlignVariant;
+    /** Если {true} сокращает длинный текст */
+    noWrap?: boolean;
+    /** Задает поведение контейнера с типографикой в документе */
+    display?: TypographyDisplayVariant;
+    /** Содержимое компонента */
+    children?: ReactNode;
+    /** Дополнительные СSS-классы */
+    className?: string;
+    /** Идентификатор компонента для тестов */
+    'data-testid'?: string;
+};
+export type TypographyProps<As extends ElementType = 'p'> = PolymorphicComponentPropsWithoutRef<TypographyBaseProps, As>;
+export declare const cnTypography: import("@bem-react/classname").ClassNameFormatter;
+export declare const Typography: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<TypographyBaseProps, "div">;

package/__inner__/esm/components/Typography/Typography.js

@@ -0,0 +1,81 @@
+import { __assign, __rest } from "tslib";
+import './Typography.css';
+import React, { useMemo } from 'react';
+import { useThemeProps } from '../../hooks/useThemeProps';
+import { cn } from '../../utils/classname';
+import { polymorphicComponentWithRef } from '../../utils/polymorphicComponentWithRef';
+import { TYPOGRAPHY_DEFAULT_COLOR, TYPOGRAPHY_DEFAULT_DEFAULT_MARGIN, TYPOGRAPHY_DEFAULT_NO_WRAP, TYPOGRAPHY_DEFAULT_VARIANT, } from './constants';
+import { matchVariantToTag } from './utils';
+export var typographyVariant = [
+    'heading-4xl',
+    'heading-3xl',
+    'heading-2xl',
+    'heading-xl',
+    'text-4xl',
+    'text-4xl_1',
+    'text-3xl',
+    'text-3xl_1',
+    'text-2xl',
+    'text-2xl_1',
+    'text-xl',
+    'text-xl_1',
+    'text-l',
+    'text-l_1',
+    'text-m',
+    'text-m_1',
+    'text-s',
+    'text-s_1',
+    'text-xs',
+    'text-xs_1',
+    'text-2xs',
+    'text-2xs_1',
+    'text-3xs',
+    'text-3xs_1',
+    'caption-3xs',
+    'caption-3xs_1',
+];
+export var typographyDisplayVariant = [
+    'block',
+    'inline',
+    'inlineBlock',
+];
+export var typographyAlignVariant = ['left', 'center', 'right'];
+export var typographyColorVariant = [
+    'primary',
+    'secondary',
+    'tertiary',
+    'disabled',
+    'ghostDisabled',
+    'action',
+    'actionHover',
+    'actionDark',
+    'actionOn',
+    'error',
+    'errorDark',
+    'warning',
+    'warningDark',
+    'success',
+    'successDark',
+    'info',
+    'infoDark',
+    'primaryInverse',
+];
+export var cnTypography = cn('Typography');
+export var Typography = polymorphicComponentWithRef(function (inProps, ref) {
+    var props = useThemeProps({
+        props: inProps,
+        name: 'Typography'
+    });
+    var _a = props.variant, variant = _a === void 0 ? TYPOGRAPHY_DEFAULT_VARIANT : _a, _b = props.color, color = _b === void 0 ? TYPOGRAPHY_DEFAULT_COLOR : _b, _c = props.noWrap, noWrap = _c === void 0 ? TYPOGRAPHY_DEFAULT_NO_WRAP : _c, _d = props.defaultMargin, defaultMargin = _d === void 0 ? TYPOGRAPHY_DEFAULT_DEFAULT_MARGIN : _d, as = props.as, children = props.children, align = props.align, display = props.display, className = props.className, other = __rest(props, ["variant", "color", "noWrap", "defaultMargin", "as", "children", "align", "display", "className"]);
+    // Устанавливает варианту соответсвующий тэг по умолчанию
+    var Tag = useMemo(function () { return as || (variant && matchVariantToTag[variant]) || 'p'; }, [as, variant]);
+    return (React.createElement(Tag, __assign({ className: cnTypography({
+            variant: variant,
+            defaultMargin: defaultMargin,
+            color: color,
+            align: align,
+            noWrap: noWrap,
+            display: display
+        }, [className]), ref: ref }, other), children));
+});
+Typography.displayName = 'Typography';

package/__inner__/esm/components/Typography/constants.d.ts

@@ -0,0 +1,4 @@
+export declare const TYPOGRAPHY_DEFAULT_VARIANT = "text-m";
+export declare const TYPOGRAPHY_DEFAULT_COLOR = "primary";
+export declare const TYPOGRAPHY_DEFAULT_NO_WRAP = false;
+export declare const TYPOGRAPHY_DEFAULT_DEFAULT_MARGIN = false;

package/__inner__/esm/components/Typography/constants.js

@@ -0,0 +1,4 @@
+export var TYPOGRAPHY_DEFAULT_VARIANT = 'text-m';
+export var TYPOGRAPHY_DEFAULT_COLOR = 'primary';
+export var TYPOGRAPHY_DEFAULT_NO_WRAP = false;
+export var TYPOGRAPHY_DEFAULT_DEFAULT_MARGIN = false;

package/__inner__/esm/components/Typography/index.d.ts

@@ -0,0 +1 @@
+export * from './Typography';

package/__inner__/esm/components/Typography/index.js

@@ -0,0 +1 @@
+export * from './Typography';

package/__inner__/esm/components/Typography/utils.d.ts

@@ -0,0 +1,5 @@
+import type { ElementType } from 'react';
+import type { TypographyVariant } from './Typography';
+export declare const matchVariantToTag: {
+    [key in TypographyVariant]: ElementType;
+};