@ozen-ui/kit 0.0.1

package/__inner__/cjs/components/Accordion/AccordionContext.js

@@ -0,0 +1,17 @@
+"use strict";
+exports.__esModule = true;
+exports.useAccordionContext = exports.AccordionContext = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+var constants_1 = require("./constants");
+exports.AccordionContext = react_1["default"].createContext({
+    expanded: false,
+    toggle: function () { return undefined; },
+    size: constants_1.DEFAULT_ACCORDION_SIZE
+});
+var useAccordionContext = function () { return (0, react_1.useContext)(exports.AccordionContext); };
+exports.useAccordionContext = useAccordionContext;
+// Именованный провайдер
+if (process.env.NODE_ENV !== 'production') {
+    exports.AccordionContext.displayName = 'AccordionContext';
+}

package/__inner__/cjs/components/Accordion/components/AccordionDetails/AccordionDetails.d.ts

@@ -0,0 +1,14 @@
+import React, { type HTMLAttributes } from 'react';
+export type AccordionDetailsProps = {
+    /** Содержимое */
+    children?: React.ReactNode;
+    /** Дополнительные CSS-классы */
+    className?: string;
+} & HTMLAttributes<HTMLDivElement>;
+export declare const cnAccordionDetails: import("@bem-react/classname").ClassNameFormatter;
+export declare const AccordionDetails: React.ForwardRefExoticComponent<{
+    /** Содержимое */
+    children?: React.ReactNode;
+    /** Дополнительные CSS-классы */
+    className?: string | undefined;
+} & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

package/__inner__/cjs/components/Accordion/components/AccordionDetails/AccordionDetails.js

@@ -0,0 +1,12 @@
+"use strict";
+exports.__esModule = true;
+exports.AccordionDetails = exports.cnAccordionDetails = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+var classname_1 = require("../../../../utils/classname");
+exports.cnAccordionDetails = (0, classname_1.cn)('AccordionDetails');
+exports.AccordionDetails = (0, react_1.forwardRef)(function (_a, ref) {
+    var children = _a.children, className = _a.className, other = tslib_1.__rest(_a, ["children", "className"]);
+    return (react_1["default"].createElement("div", tslib_1.__assign({ className: (0, exports.cnAccordionDetails)('', [className]) }, other, { ref: ref }), children));
+});
+exports.AccordionDetails.displayName = 'AccordionDetails';

package/__inner__/cjs/components/Accordion/components/AccordionDetails/index.d.ts

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

package/__inner__/cjs/components/Accordion/components/AccordionDetails/index.js

@@ -0,0 +1,4 @@
+"use strict";
+exports.__esModule = true;
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./AccordionDetails"), exports);

package/__inner__/cjs/components/Accordion/components/AccordionSummary/AccordionSummary.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import type { ReactNode, HTMLAttributes } from 'react';
+import type { AccordionExpandIconPositionVariant } from '../../types';
+export type AccordionSummaryProps = {
+    /** Содержимое */
+    children?: ReactNode;
+    /** Позиция иконки */
+    expandIconPosition?: AccordionExpandIconPositionVariant;
+    /** Дополнительные CSS-классы */
+    className?: string;
+} & HTMLAttributes<HTMLDivElement>;
+export declare const cnAccordionSummary: import("@bem-react/classname").ClassNameFormatter;
+export declare const AccordionSummary: React.ForwardRefExoticComponent<{
+    /** Содержимое */
+    children?: ReactNode;
+    /** Позиция иконки */
+    expandIconPosition?: "left" | "right" | undefined;
+    /** Дополнительные CSS-классы */
+    className?: string | undefined;
+} & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

package/__inner__/cjs/components/Accordion/components/AccordionSummary/AccordionSummary.js

@@ -0,0 +1,43 @@
+"use strict";
+exports.__esModule = true;
+exports.AccordionSummary = exports.cnAccordionSummary = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+var icons_1 = require("@ozen-ui/icons");
+var useThemeProps_1 = require("../../../../hooks/useThemeProps");
+var classname_1 = require("../../../../utils/classname");
+var isKey_1 = require("../../../../utils/isKey");
+var AccordionContext_1 = require("../../AccordionContext");
+var constants_1 = require("../../constants");
+var iconSizeMapper = {
+    s: 's',
+    m: 's',
+    l: 'm',
+    xl: 'm'
+};
+exports.cnAccordionSummary = (0, classname_1.cn)('AccordionSummary');
+exports.AccordionSummary = (0, react_1.forwardRef)(function (inProps, ref) {
+    var props = (0, useThemeProps_1.useThemeProps)({ props: inProps, name: 'AccordionSummary' });
+    var _a = (0, AccordionContext_1.useAccordionContext)(), size = _a.size, toggle = _a.toggle, expanded = _a.expanded;
+    var children = props.children, _b = props.expandIconPosition, expandIconPosition = _b === void 0 ? constants_1.DEFAULT_ACCORDION_EXPAND_ICON_POSITION : _b, className = props.className, onClick = props.onClick, other = tslib_1.__rest(props, ["children", "expandIconPosition", "className", "onClick"]);
+    var Icon = (0, react_1.useMemo)(function () { return (react_1["default"].createElement("div", { className: (0, exports.cnAccordionSummary)('ExpandIconBox', {
+            expandIconPosition: expandIconPosition
+        }) },
+        react_1["default"].createElement(icons_1.ChevronDownIcon, { size: iconSizeMapper[size], className: (0, exports.cnAccordionSummary)('ExpandIcon', {
+                expanded: expanded
+            }) }))); }, [size, expanded]);
+    var handleKeyDown = (0, react_1.useCallback)(function (e) {
+        if ((0, isKey_1.isKey)(e, 'Enter') || (0, isKey_1.isKey)(e, 'Space')) {
+            toggle(e);
+            e.preventDefault();
+        }
+    }, [toggle]);
+    var handleClick = (0, react_1.useCallback)(function (e) {
+        toggle(e);
+        onClick === null || onClick === void 0 ? void 0 : onClick(e);
+    }, [onClick, toggle]);
+    return (react_1["default"].createElement("div", tslib_1.__assign({ className: (0, exports.cnAccordionSummary)({ expandIconPosition: expandIconPosition }, [className]), tabIndex: 0, onClick: handleClick, onKeyDown: handleKeyDown, role: "button", "aria-expanded": expanded, ref: ref }, other),
+        Icon,
+        react_1["default"].createElement("div", { className: (0, exports.cnAccordionSummary)('Content') }, children)));
+});
+exports.AccordionSummary.displayName = 'AccordionSummary';

package/__inner__/cjs/components/Accordion/components/AccordionSummary/index.d.ts

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

package/__inner__/cjs/components/Accordion/components/AccordionSummary/index.js

@@ -0,0 +1,4 @@
+"use strict";
+exports.__esModule = true;
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./AccordionSummary"), exports);

package/__inner__/cjs/components/Accordion/components/index.d.ts

@@ -0,0 +1,2 @@
+export * from './AccordionDetails';
+export * from './AccordionSummary';

package/__inner__/cjs/components/Accordion/components/index.js

@@ -0,0 +1,5 @@
+"use strict";
+exports.__esModule = true;
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./AccordionDetails"), exports);
+tslib_1.__exportStar(require("./AccordionSummary"), exports);

package/__inner__/cjs/components/Accordion/constants.d.ts

@@ -0,0 +1,4 @@
+import type { AccordionSizeVariant, AccordionVariant, AccordionExpandIconPositionVariant } from './types';
+export declare const DEFAULT_ACCORDION_SIZE: AccordionSizeVariant;
+export declare const DEFAULT_ACCORDION_VARIANT: AccordionVariant;
+export declare const DEFAULT_ACCORDION_EXPAND_ICON_POSITION: AccordionExpandIconPositionVariant;

package/__inner__/cjs/components/Accordion/constants.js

@@ -0,0 +1,6 @@
+"use strict";
+exports.__esModule = true;
+exports.DEFAULT_ACCORDION_EXPAND_ICON_POSITION = exports.DEFAULT_ACCORDION_VARIANT = exports.DEFAULT_ACCORDION_SIZE = void 0;
+exports.DEFAULT_ACCORDION_SIZE = 'm';
+exports.DEFAULT_ACCORDION_VARIANT = 'corner-primary';
+exports.DEFAULT_ACCORDION_EXPAND_ICON_POSITION = 'right';

package/__inner__/cjs/components/Accordion/index.d.ts

@@ -0,0 +1,3 @@
+export * from './types';
+export * from './Accordion';
+export * from './components';

package/__inner__/cjs/components/Accordion/index.js

@@ -0,0 +1,6 @@
+"use strict";
+exports.__esModule = true;
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./types"), exports);
+tslib_1.__exportStar(require("./Accordion"), exports);
+tslib_1.__exportStar(require("./components"), exports);

package/__inner__/cjs/components/Accordion/types.d.ts

@@ -0,0 +1,43 @@
+import type { MouseEvent, KeyboardEvent, HTMLAttributes, ReactNode } from 'react';
+import type { CollapseProps } from '../Collapse';
+export declare const accordionExpandIconPositionVariant: readonly ["left", "right"];
+export declare const accordionSizeVariant: readonly ["s", "m", "l", "xl"];
+export declare const accordionVariant: readonly ["corner-primary", "corner-secondary", "round"];
+export type AccordionSizeVariant = (typeof accordionSizeVariant)[number];
+export type AccordionVariant = (typeof accordionVariant)[number];
+export type AccordionExpandIconPositionVariant = (typeof accordionExpandIconPositionVariant)[number];
+export type AccordionContextValue = {
+    /** Если {true} аккордеон раскрыт */
+    expanded: boolean;
+    /**
+     * Размер
+     * влияет на типографику, отступы, иконки
+     */
+    size: AccordionSizeVariant;
+    /** Callback для смены состояния аккордеона открыт/закрыт */
+    toggle: (e: MouseEvent<HTMLDivElement> | KeyboardEvent<HTMLDivElement>) => void;
+};
+export type AccordionProps = {
+    /** Содержимое */
+    children: ReactNode;
+    /** Дополнительные CSS-классы */
+    className?: string;
+    /**
+     * Размер
+     * влияет на типографику, отступы, иконки
+     * @default m
+     * */
+    size?: AccordionSizeVariant;
+    /**
+     * Вариант визуального отображения аккордеона
+     *
+     * @default corner-primary
+     * */
+    variant?: AccordionVariant;
+    /** Если {true} аккордеон по умолчанию раскрыт (неконтролируемое поведение) */
+    defaultExpanded?: boolean;
+    /** Если {true} уменьшает отступы для компактного отображения */
+    compressed?: boolean;
+    /** Обработчик события открытия и закрытия аккордеона */
+    onChange?: (expanded: boolean, e: MouseEvent<HTMLDivElement> | KeyboardEvent<HTMLDivElement>) => void;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> & Pick<CollapseProps, 'expanded' | 'unmountOnClosed'>;

package/__inner__/cjs/components/Accordion/types.js

@@ -0,0 +1,10 @@
+"use strict";
+exports.__esModule = true;
+exports.accordionVariant = exports.accordionSizeVariant = exports.accordionExpandIconPositionVariant = void 0;
+exports.accordionExpandIconPositionVariant = ['left', 'right'];
+exports.accordionSizeVariant = ['s', 'm', 'l', 'xl'];
+exports.accordionVariant = [
+    'corner-primary',
+    'corner-secondary',
+    'round',
+];

package/__inner__/cjs/components/Alert/Alert.css

@@ -0,0 +1,84 @@
+/* stylelint-disable */
+.Alert {
+  position: relative;
+  border-radius: var(--border-radius-xs);
+  display: flex;
+  -moz-column-gap: var(--space-s);
+       column-gap: var(--space-s);
+  align-items: flex-start;
+  inline-size: 100%;
+  overflow: auto;
+  box-sizing: border-box;
+  border-inline-start: 4px solid var(--alert-border-color);
+  padding: 16px;
+  box-shadow: var(--shadow-m);
+  background-color: var(--alert-background-color);
+
+  font: var(--typography-text-xs-font);
+
+  letter-spacing: var(--typography-text-xs-letter_spacing, 0);
+
+  text-transform: var(--typography-text-xs-text_transform, none);
+}
+.Alert_color_light {
+      --alert-background-color: var(--color-background-main);
+      --alert-title-text-color: var(--color-content-primary);
+      --alert-body-text-color: var(--color-content-secondary);
+      --alert-icon-color: var(--color-content-primary);
+      --alert-close-button-color: var(--color-background-main-inverse);
+    }
+.Alert_color_dark {
+      --alert-background-color: var(--color-background-main-inverse);
+      --alert-title-text-color: var(--color-content-primary-inverse);
+      --alert-body-text-color: var(--color-content-tertiary);
+      --alert-icon-color: var(--color-content-primary-inverse);
+      --alert-close-button-color: var(--color-background-main);
+    }
+.Alert_status_info {
+      --alert-icon-color: var(--color-content-info);
+      --alert-border-color: var(--color-background-info);
+    }
+.Alert_status_warning {
+      --alert-icon-color: var(--color-content-warning);
+      --alert-border-color: var(--color-background-warning);
+    }
+.Alert_status_success {
+      --alert-icon-color: var(--color-content-success);
+      --alert-border-color: var(--color-background-success);
+    }
+.Alert_status_error {
+      --alert-icon-color: var(--color-content-error);
+      --alert-border-color: var(--color-background-error);
+    }
+.Alert_hasCloseButton {
+    padding-inline-end: 32px;
+  }
+.Alert-Icon {
+    padding-block-start: 2px;
+    display: flex;
+    color: var(--alert-icon-color);
+  }
+.Alert-Title {
+    display: flex;
+    align-items: center;
+    color: var(--alert-title-text-color);
+
+    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);
+  }
+.Alert-Body {
+    margin-block-start: var(--space-xs);
+    color: var(--alert-body-text-color);
+  }
+.Alert-Action {
+    margin-block-start: var(--space-s);
+  }
+.IconButton.Alert-CloseButton {
+  color: var(--alert-close-button-color);
+  position: absolute;
+  inset-block-start: 16px;
+  inset-inline-end: 16px;
+}

package/__inner__/cjs/components/Alert/Alert.d.ts

@@ -0,0 +1,41 @@
+import './Alert.css';
+import React from 'react';
+import type { HTMLAttributes, ReactElement, ReactNode, MouseEvent } from 'react';
+import type { ButtonProps } from '../Button';
+export declare const cnAlert: import("@bem-react/classname").ClassNameFormatter;
+export declare const alertStatusVariant: readonly ["success", "error", "warning", "info"];
+export declare const alertColorVariant: readonly ["light", "dark"];
+export type AlertStatusVariant = (typeof alertStatusVariant)[number];
+export type AlertColorVariant = (typeof alertColorVariant)[number];
+type AlertBaseProps = {
+    /** Заголовок сообщения */
+    title: ReactNode;
+    /**
+     * Статус сообщения
+     * @default info
+     */
+    status?: AlertStatusVariant;
+    /** Цветовая палитра сообщения */
+    color?: AlertColorVariant;
+    /**
+     * Если {true} отображает иконку со статусом
+     * @default true
+     */
+    showIcon?: boolean;
+    /**
+     * Функция обратного вызова при нажатии на кнопку закрытия
+     */
+    onClose?: (e: MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Основное содержимое элемента
+     * @default null
+     * */
+    children?: ReactNode;
+    /** Действие: кнопка или ссылка. Свойство принимает React-элемент или рендер-функцию */
+    action?: ReactElement<ButtonProps> | (({ size, className, }: Pick<ButtonProps, 'size' | 'className'>) => ReactElement);
+    /** Дополнительные CSS-классы */
+    className?: string;
+};
+export type AlertProps = AlertBaseProps & Omit<HTMLAttributes<HTMLDivElement>, 'title'>;
+export declare const Alert: React.ForwardRefExoticComponent<AlertBaseProps & Omit<React.HTMLAttributes<HTMLDivElement>, "title"> & React.RefAttributes<HTMLDivElement>>;
+export {};

package/__inner__/cjs/components/Alert/Alert.js

@@ -0,0 +1,56 @@
+"use strict";
+exports.__esModule = true;
+exports.Alert = exports.alertColorVariant = exports.alertStatusVariant = exports.cnAlert = void 0;
+var tslib_1 = require("tslib");
+require("./Alert.css");
+var react_1 = tslib_1.__importStar(require("react"));
+var icons_1 = require("@ozen-ui/icons");
+var useThemeProps_1 = require("../../hooks/useThemeProps");
+var classname_1 = require("../../utils/classname");
+var IconButton_1 = require("../IconButton");
+var constants_1 = require("./constants");
+exports.cnAlert = (0, classname_1.cn)('Alert');
+exports.alertStatusVariant = [
+    'success',
+    'error',
+    'warning',
+    'info',
+];
+exports.alertColorVariant = ['light', 'dark'];
+var matchStatusToIcon = {
+    neutral: react_1["default"].createElement(icons_1.InfoCircleFilledIcon, { size: "s" }),
+    info: react_1["default"].createElement(icons_1.InfoCircleFilledIcon, { size: "s" }),
+    warning: react_1["default"].createElement(icons_1.WarningTriangleFilledIcon, { size: "s" }),
+    success: react_1["default"].createElement(icons_1.CheckCircleFilledIcon, { size: "s" }),
+    error: react_1["default"].createElement(icons_1.WarningCircleFilledIcon, { size: "s" })
+};
+exports.Alert = (0, react_1.forwardRef)(function (inProps, ref) {
+    var props = (0, useThemeProps_1.useThemeProps)({
+        props: inProps,
+        name: 'Alert'
+    });
+    var _a = props.status, status = _a === void 0 ? constants_1.ALERT_DEFAULT_STATUS : _a, _b = props.showIcon, showIcon = _b === void 0 ? constants_1.ALERT_DEFAULT_SHOW_ICON : _b, _c = props.color, color = _c === void 0 ? constants_1.ALERT_DEFAULT_COLOR : _c, children = props.children, actionProp = props.action, onClose = props.onClose, title = props.title, className = props.className, otherProps = tslib_1.__rest(props, ["status", "showIcon", "color", "children", "action", "onClose", "title", "className"]);
+    var action = (0, react_1.useMemo)(function () {
+        var actionProps = {
+            size: '2xs',
+            className: (0, exports.cnAlert)('Button')
+        };
+        if (!actionProp) {
+            return null;
+        }
+        if (typeof actionProp === 'function') {
+            return actionProp(actionProps);
+        }
+        return react_1["default"].cloneElement(actionProp, actionProps);
+    }, [actionProp]);
+    return (react_1["default"].createElement("div", tslib_1.__assign({ className: (0, exports.cnAlert)({ status: status, hasCloseButton: !!onClose, color: color }, [
+            className,
+        ]), role: "alert" }, otherProps, { ref: ref }),
+        showIcon && (react_1["default"].createElement("div", { className: (0, exports.cnAlert)('Icon') }, matchStatusToIcon[status])),
+        react_1["default"].createElement("div", { className: (0, exports.cnAlert)('Content') },
+            react_1["default"].createElement("div", { className: (0, exports.cnAlert)('Title') }, title),
+            children && react_1["default"].createElement("div", { className: (0, exports.cnAlert)('Body') }, children),
+            action && react_1["default"].createElement("div", { className: (0, exports.cnAlert)('Action') }, action)),
+        onClose && (react_1["default"].createElement(IconButton_1.IconButton, { size: "s", variant: "function", icon: icons_1.CloseIcon, "aria-label": "\u0417\u0430\u043A\u0440\u044B\u0442\u044C", onClick: onClose, className: (0, exports.cnAlert)('CloseButton') }))));
+});
+exports.Alert.displayName = 'Alert';

package/__inner__/cjs/components/Alert/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const ALERT_DEFAULT_STATUS = "info";
+export declare const ALERT_DEFAULT_SHOW_ICON = true;
+export declare const ALERT_DEFAULT_COLOR = "light";

package/__inner__/cjs/components/Alert/constants.js

@@ -0,0 +1,6 @@
+"use strict";
+exports.__esModule = true;
+exports.ALERT_DEFAULT_COLOR = exports.ALERT_DEFAULT_SHOW_ICON = exports.ALERT_DEFAULT_STATUS = void 0;
+exports.ALERT_DEFAULT_STATUS = 'info';
+exports.ALERT_DEFAULT_SHOW_ICON = true;
+exports.ALERT_DEFAULT_COLOR = 'light';

package/__inner__/cjs/components/Alert/index.d.ts

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

package/__inner__/cjs/components/Alert/index.js

@@ -0,0 +1,4 @@
+"use strict";
+exports.__esModule = true;
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./Alert"), exports);

package/__inner__/cjs/components/Avatar/Avatar.css

@@ -0,0 +1,203 @@
+.Avatar {
+  --avatar-size: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  inline-size: var(--avatar-size);
+  block-size: var(--avatar-size);
+  font-family: 'Roboto', sans-serif;
+  border-radius: 50%;
+  position: relative;
+  overflow: visible;
+  color: var(--color-content-action-on);
+}
+
+  .Avatar_color_a1 {
+      background: var(--color-additional-a1);
+    }
+
+  .Avatar_color_a2 {
+      background: var(--color-additional-a2);
+    }
+
+  .Avatar_color_a3 {
+      background: var(--color-additional-a3);
+    }
+
+  .Avatar_color_b1 {
+      background: var(--color-additional-b1);
+    }
+
+  .Avatar_color_b2 {
+      background: var(--color-additional-b2);
+    }
+
+  .Avatar_color_b3 {
+      background: var(--color-additional-b3);
+    }
+
+  .Avatar_color_c1 {
+      background: var(--color-additional-c1);
+    }
+
+  .Avatar_color_c2 {
+      background: var(--color-additional-c2);
+    }
+
+  .Avatar_color_c3 {
+      background: var(--color-additional-c3);
+    }
+
+  .Avatar_color_d1 {
+      background: var(--color-additional-d1);
+    }
+
+  .Avatar_color_d2 {
+      background: var(--color-additional-d2);
+    }
+
+  .Avatar_color_d3 {
+      background: var(--color-additional-d3);
+    }
+
+  .Avatar_color_e1 {
+      background: var(--color-additional-e1);
+    }
+
+  .Avatar_color_e2 {
+      background: var(--color-additional-e2);
+    }
+
+  .Avatar_color_e3 {
+      background: var(--color-additional-e3);
+    }
+
+  .Avatar_color_f1 {
+      background: var(--color-additional-f1);
+    }
+
+  .Avatar_color_f2 {
+      background: var(--color-additional-f2);
+    }
+
+  .Avatar_color_f3 {
+      background: var(--color-additional-f3);
+    }
+
+  .Avatar_color_g1 {
+      background: var(--color-additional-g1);
+    }
+
+  .Avatar_color_g2 {
+      background: var(--color-additional-g2);
+    }
+
+  .Avatar_color_g3 {
+      background: var(--color-additional-g3);
+    }
+
+  .Avatar_color_h1 {
+      background: var(--color-additional-h1);
+    }
+
+  .Avatar_color_h2 {
+      background: var(--color-additional-h2);
+    }
+
+  .Avatar_color_h3 {
+      background: var(--color-additional-h3);
+    }
+
+  .Avatar-Image {
+    display: block;
+    inline-size: 100%;
+    block-size: 100%;
+    object-fit: cover;
+    object-position: center;
+    border-radius: 50%;
+  }
+
+  .Avatar-Online {
+    position: absolute;
+  }
+
+  .Avatar_size_4xs {
+      --avatar-size: 16px;
+      font-size: 6px;
+    }
+
+  .Avatar_size_4xs .Avatar-Online {
+        inset-block-end: 0;
+        inset-inline-end: 0;
+      }
+
+  .Avatar_size_3xs {
+      --avatar-size: 24px;
+      font-size: 10px;
+    }
+
+  .Avatar_size_3xs .Avatar-Online {
+        inset-block-end: 1px;
+        inset-inline-end: 1px;
+      }
+
+  .Avatar_size_2xs {
+      --avatar-size: 32px;
+      font-size: 14px;
+    }
+
+  .Avatar_size_2xs .Avatar-Online {
+        inset-block-end: 2px;
+        inset-inline-end: 2px;
+      }
+
+  .Avatar_size_xs {
+      --avatar-size: 40px;
+      font-size: 16px;
+    }
+
+  .Avatar_size_xs .Avatar-Online {
+        inset-block-end: 2px;
+        inset-inline-end: 2px;
+      }
+
+  .Avatar_size_s {
+      --avatar-size: 48px;
+      font-size: 20px;
+    }
+
+  .Avatar_size_s .Avatar-Online {
+        inset-block-end: 3px;
+        inset-inline-end: 3px;
+      }
+
+  .Avatar_size_m {
+      --avatar-size: 56px;
+      font-size: 24px;
+    }
+
+  .Avatar_size_m .Avatar-Online {
+        inset-block-end: 4px;
+        inset-inline-end: 4px;
+      }
+
+  .Avatar_size_l {
+      --avatar-size: 64px;
+      font-size: 28px;
+    }
+
+  .Avatar_size_l .Avatar-Online {
+        inset-block-end: 4px;
+        inset-inline-end: 4px;
+      }
+
+  .Avatar_size_xl {
+      --avatar-size: 80px;
+      font-size: 32px;
+    }
+
+  .Avatar_size_xl .Avatar-Online {
+        inset-block-end: 6px;
+        inset-inline-end: 6px;
+      }

package/__inner__/cjs/components/Avatar/Avatar.d.ts

@@ -0,0 +1,30 @@
+import './Avatar.css';
+import React from 'react';
+import type { ComponentPropsWithRef, ComponentRef } from 'react';
+import type { IndicatorProps } from '../Indicator';
+export declare const avatarSizeVariant: readonly ["4xs", "3xs", "2xs", "xs", "s", "m", "l", "xl"];
+export declare const avatarHueVariant: number[];
+export type AvatarSizeVariant = (typeof avatarSizeVariant)[number];
+export type AvatarHueVariant = (typeof avatarHueVariant)[number];
+declare const avatarEl = "div";
+export type AvatarRef = ComponentRef<typeof avatarEl>;
+export type AvatarProps = {
+    /** Размер */
+    size?: AvatarSizeVariant;
+    /** Если {true} отобразит индикатор онлайна */
+    online?: boolean;
+    /** Url изображения */
+    src?: string;
+    /** Имя пользователя */
+    name: string;
+    /** Цветовой оттенок аватарки (при использовании без src) */
+    hue?: AvatarHueVariant;
+    /** Дополнительные СSS-классы */
+    className?: string;
+    /** Свойства компонента Indicator */
+    indicatorProps?: IndicatorProps;
+    children?: never;
+} & ComponentPropsWithRef<typeof avatarEl>;
+export declare const cnAvatar: import("@bem-react/classname").ClassNameFormatter;
+export declare const Avatar: React.ForwardRefExoticComponent<Omit<AvatarProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export {};