@ozen-ui/kit 0.0.1

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

@@ -0,0 +1,19 @@
+import './Grid.css';
+import type { ReactNode } from 'react';
+import type { ResponsiveValue } from '../../types/ResponsiveValue';
+export declare const gridColsVariant: readonly [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
+export type GridColsVariant = (typeof gridColsVariant)[number];
+export declare const gridGapVariant: readonly ["0", "xs", "s", "m", "l", "xl", "2xl", "3xl", "4xl", "5xl", "6xl", "7xl", "8xl"];
+export type GridGapVariant = (typeof gridGapVariant)[number];
+export declare const cnGrid: import("@bem-react/classname").ClassNameFormatter;
+export type GridProps = {
+    /** Количество колонок в сетке */
+    cols?: ResponsiveValue<GridColsVariant>;
+    /** Отступы между элементами */
+    gap?: ResponsiveValue<GridGapVariant>;
+    /** Содержимое компонента */
+    children?: ReactNode;
+    /** Дополнительные СSS-классы */
+    className?: string;
+};
+export declare const Grid: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<GridProps, "div">;

package/__inner__/cjs/components/Grid/Grid.js

@@ -0,0 +1,37 @@
+"use strict";
+exports.__esModule = true;
+exports.Grid = exports.cnGrid = exports.gridGapVariant = exports.gridColsVariant = void 0;
+var tslib_1 = require("tslib");
+require("./Grid.css");
+var react_1 = tslib_1.__importDefault(require("react"));
+var classnames_1 = require("@bem-react/classnames");
+var useThemeProps_1 = require("../../hooks/useThemeProps");
+var classname_1 = require("../../utils/classname");
+var polymorphicComponentWithRef_1 = require("../../utils/polymorphicComponentWithRef");
+var useGrid_1 = require("./useGrid");
+exports.gridColsVariant = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
+exports.gridGapVariant = [
+    '0',
+    'xs',
+    's',
+    'm',
+    'l',
+    'xl',
+    '2xl',
+    '3xl',
+    '4xl',
+    '5xl',
+    '6xl',
+    '7xl',
+    '8xl',
+];
+exports.cnGrid = (0, classname_1.cn)('Grid');
+exports.Grid = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (inProps, ref) {
+    var props = (0, useThemeProps_1.useThemeProps)({
+        props: inProps,
+        name: 'Grid'
+    });
+    var _a = props.cols, cols = _a === void 0 ? 12 : _a, _b = props.gap, gap = _b === void 0 ? '2xl' : _b, _c = props.as, Tag = _c === void 0 ? 'div' : _c, children = props.children, className = props.className, other = tslib_1.__rest(props, ["cols", "gap", "as", "children", "className"]);
+    return (react_1["default"].createElement(Tag, tslib_1.__assign({ className: (0, classnames_1.classnames)((0, exports.cnGrid)({}), (0, useGrid_1.useGenerateGridModsCn)(exports.cnGrid, { cols: cols, gap: gap }), className) }, other, { ref: ref }), children));
+});
+exports.Grid.displayName = 'Grid';

package/__inner__/cjs/components/Grid/GridItem.d.ts

@@ -0,0 +1,23 @@
+import './Grid.css';
+import type { ReactNode } from 'react';
+import type { ResponsiveValue } from '../../types/ResponsiveValue';
+export declare const gridItemColVariant: readonly [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
+export type GridItemColVariant = (typeof gridItemColVariant)[number];
+export declare const gridItemRowVariant: readonly [1, 2, 3, 4, 5, 6];
+export type GridItemRowVariant = (typeof gridItemRowVariant)[number];
+export declare const cnGridItem: import("@bem-react/classname").ClassNameFormatter;
+export type GridItemProps = {
+    /** Количество колонок которое будет занимать элемент в сетке */
+    col?: ResponsiveValue<GridItemColVariant>;
+    /** С какой колонки начинать позиционировать элемент */
+    colStart?: ResponsiveValue<GridItemColVariant>;
+    /** Количество строк которых будет занимать элемент в сетке */
+    row?: ResponsiveValue<GridItemRowVariant>;
+    /** С какой строки начинать позиционировать элемент */
+    rowStart?: ResponsiveValue<GridItemRowVariant>;
+    /** Содержимое компонента */
+    children?: ReactNode;
+    /** Дополнительные СSS-классы */
+    className?: string;
+};
+export declare const GridItem: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<GridItemProps, "div">;

package/__inner__/cjs/components/Grid/GridItem.js

@@ -0,0 +1,30 @@
+"use strict";
+exports.__esModule = true;
+exports.GridItem = exports.cnGridItem = exports.gridItemRowVariant = exports.gridItemColVariant = void 0;
+var tslib_1 = require("tslib");
+require("./Grid.css");
+var react_1 = tslib_1.__importDefault(require("react"));
+var classnames_1 = require("@bem-react/classnames");
+var useThemeProps_1 = require("../../hooks/useThemeProps");
+var classname_1 = require("../../utils/classname");
+var polymorphicComponentWithRef_1 = require("../../utils/polymorphicComponentWithRef");
+var useGrid_1 = require("./useGrid");
+exports.gridItemColVariant = [
+    1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12,
+];
+exports.gridItemRowVariant = [1, 2, 3, 4, 5, 6];
+exports.cnGridItem = (0, classname_1.cn)('GridItem');
+exports.GridItem = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (inProps, ref) {
+    var props = (0, useThemeProps_1.useThemeProps)({
+        props: inProps,
+        name: 'GridItem'
+    });
+    var children = props.children, className = props.className, col = props.col, colStart = props.colStart, row = props.row, rowStart = props.rowStart, _a = props.as, Tag = _a === void 0 ? 'div' : _a, other = tslib_1.__rest(props, ["children", "className", "col", "colStart", "row", "rowStart", "as"]);
+    return (react_1["default"].createElement(Tag, tslib_1.__assign({ className: (0, classnames_1.classnames)((0, exports.cnGridItem)({}), (0, useGrid_1.useGenerateGridModsCn)(exports.cnGridItem, {
+            col: col,
+            colStart: colStart,
+            row: row,
+            rowStart: rowStart
+        }), className) }, other, { ref: ref }), children));
+});
+exports.GridItem.displayName = 'GridItem';

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

@@ -0,0 +1,2 @@
+export * from './Grid';
+export * from './GridItem';

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

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

package/__inner__/cjs/components/Grid/useGrid.d.ts

@@ -0,0 +1,6 @@
+import type { ClassNameFormatter } from '@bem-react/classname';
+import type { ResponsiveValue } from '../../types/ResponsiveValue';
+export type Mod = string | number | ResponsiveValue<string | number> | undefined;
+export declare const useGenerateGridModsCn: (cn: ClassNameFormatter, mods: {
+    [x: string]: Mod;
+}) => string;

package/__inner__/cjs/components/Grid/useGrid.js

@@ -0,0 +1,35 @@
+"use strict";
+exports.__esModule = true;
+exports.useGenerateGridModsCn = void 0;
+var tslib_1 = require("tslib");
+var classnames_1 = require("@bem-react/classnames");
+var isEmpty_1 = require("../../utils/isEmpty");
+var generateGridModCn = function (cn, key, mod) {
+    var _a;
+    var res;
+    if (typeof mod === 'string' || typeof mod === 'number') {
+        res = (_a = {},
+            _a[key] = mod,
+            _a);
+    }
+    if (typeof mod === 'object') {
+        res = Object.keys(mod).reduce(function (acc, current) {
+            var _a;
+            return (tslib_1.__assign(tslib_1.__assign({}, acc), (_a = {}, _a["".concat(key, "_").concat(current)] = mod[current], _a)));
+        }, {});
+    }
+    return cn(res);
+};
+var useGenerateGridModsCn = function (cn, mods) {
+    if (!mods && (0, isEmpty_1.isEmpty)(mods)) {
+        return '';
+    }
+    return Object.keys(mods).reduce(function (acc, current) {
+        var mod = mods[current];
+        if (mod) {
+            return (0, classnames_1.classnames)(acc, generateGridModCn(cn, current, mod));
+        }
+        return acc;
+    }, '');
+};
+exports.useGenerateGridModsCn = useGenerateGridModsCn;

package/__inner__/cjs/components/IconButton/IconButton.css

@@ -0,0 +1,220 @@
+.IconButton {
+  --icon-button-bg-color: var(--color-background-action);
+  --icon-button-hover-bg-color: var(--color-background-action-hover);
+  --icon-button-active-bg-color: var(--color-background-action-pressed);
+  --icon-button-font-color: var(--color-content-action-on);
+  block-size: var(--icon-button-size);
+  inline-size: var(--icon-button-size);
+  padding: 0;
+  box-sizing: border-box;
+  display: inline-flex;
+  flex-shrink: 1;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  border-radius: var(--border-radius-xs);
+  border: none;
+  color: var(--icon-button-font-color);
+  background-color: var(--icon-button-bg-color);
+  opacity: 1;
+  transition: background-color var(--transition-default),
+    box-shadow var(--transition-default), opacity var(--transition-default);
+  -webkit-tap-highlight-color: transparent;
+  position: relative;
+}
+
+  .IconButton_size_2xs {
+    --icon-button-size: 32px;
+  }
+
+  .IconButton_size_2xs.IconButton_compressed:not(.IconButton_variant_function) {
+    --icon-button-size: 24px;
+  }
+
+  .IconButton_size_xs {
+    --icon-button-size: 40px;
+  }
+
+  .IconButton_size_xs.IconButton_compressed:not(.IconButton_variant_function) {
+    --icon-button-size: 28px;
+  }
+
+  .IconButton_size_s {
+    --icon-button-size: 48px;
+  }
+
+  .IconButton_size_s.IconButton_compressed:not(.IconButton_variant_function) {
+    --icon-button-size: 32px;
+  }
+
+  .IconButton_size_m {
+    --icon-button-size: 56px;
+  }
+
+  .IconButton_size_m.IconButton_compressed:not(.IconButton_variant_function) {
+    --icon-button-size: 40px;
+  }
+
+  .IconButton_size_l {
+    --icon-button-size: 64px;
+  }
+
+  .IconButton_size_l.IconButton_compressed:not(.IconButton_variant_function) {
+    --icon-button-size: 48px;
+  }
+
+  .IconButton_variant_contained.IconButton_color_primary {
+    --icon-button-bg-color: var(--color-background-action);
+    --icon-button-hover-bg-color: var(--color-background-action-hover);
+    --icon-button-active-bg-color: var(--color-background-action-pressed);
+    --icon-button-font-color: var(--color-content-action-on);
+  }
+
+  .IconButton_variant_contained.IconButton_color_secondary {
+    --icon-button-bg-color: var(--color-background-tertiary);
+    --icon-button-hover-bg-color: var(--color-background-tertiary-hover);
+    --icon-button-active-bg-color: var(--color-background-tertiary-pressed);
+    --icon-button-font-color: var(--color-content-primary);
+  }
+
+  .IconButton_variant_outlined {
+    --icon-button-border-color: var(--color-border-main);
+    border: 1px solid var(--icon-button-border-color);
+  }
+
+  .IconButton_variant_outlined.IconButton_color_primary {
+    --icon-button-bg-color: transparent;
+    --icon-button-hover-bg-color: var(--color-background-action-light-hover);
+    --icon-button-active-bg-color: var(--color-background-action-light-pressed);
+    --icon-button-font-color: var(--color-content-action);
+    --icon-button-border-color: var(--color-border-action);
+  }
+
+  .IconButton_variant_outlined.IconButton_color_secondary {
+    --icon-button-bg-color: transparent;
+    --icon-button-hover-bg-color: var(--color-background-primary-hover);
+    --icon-button-active-bg-color: var(--color-background-primary-pressed);
+    --icon-button-font-color: var(--color-content-primary);
+    --icon-button-border-color: var(--color-border-main);
+  }
+
+  .IconButton_variant_ghost.IconButton_color_primary {
+    --icon-button-bg-color: transparent;
+    --icon-button-hover-bg-color: var(--color-background-action-light-hover);
+    --icon-button-active-bg-color: var(--color-background-action-light-pressed);
+    --icon-button-font-color: var(--color-content-action);
+  }
+
+  .IconButton_variant_ghost.IconButton_color_secondary {
+    --icon-button-bg-color: transparent;
+    --icon-button-hover-bg-color: var(--color-background-primary-hover);
+    --icon-button-active-bg-color: var(--color-background-primary-pressed);
+    --icon-button-font-color: var(--color-content-primary);
+  }
+
+  .IconButton_variant_function {
+    --icon-button-size: auto;
+  }
+
+  .IconButton_variant_function:hover {
+      opacity: 0.8;
+    }
+
+  .IconButton_variant_function:active {
+      opacity: 0.6;
+    }
+
+  .IconButton_variant_function.IconButton_color_primary,
+  .IconButton_variant_function.IconButton_color_secondary {
+    --icon-button-bg-color: transparent;
+    --icon-button-hover-bg-color: transparent;
+    --icon-button-active-bg-color: transparent;
+  }
+
+  .IconButton_variant_function.IconButton_color_primary {
+    --icon-button-font-color: var(--color-content-action);
+  }
+
+  .IconButton_variant_function.IconButton_color_secondary {
+    --icon-button-font-color: var(--color-content-primary);
+  }
+
+  .IconButton_variant_floating {
+    --icon-button-bg-color: var(--color-background-main);
+    --icon-button-hover-bg-color: var(--color-background-main-hover);
+    --icon-button-active-bg-color: var(--color-background-main-pressed);
+    --icon-button-font-color: var(--color-content-primary);
+  }
+
+  .IconButton_variant_floating::after {
+      content: '';
+      inset: 0;
+      position: absolute;
+      inline-size: 100%;
+      border-radius: inherit;
+      box-shadow: 0 8px 32px rgb(0 0 0 / 8%);
+    }
+
+  .IconButton_variant_contained.IconButton_disabled,
+  .IconButton_variant_contained.IconButton_loading,
+  .IconButton_variant_outlined.IconButton_disabled,
+  .IconButton_variant_outlined.IconButton_loading,
+  .IconButton_variant_ghost.IconButton_disabled,
+  .IconButton_variant_ghost.IconButton_loading,
+  .IconButton_variant_function.IconButton_disabled,
+  .IconButton_variant_function.IconButton_loading,
+  .IconButton_variant_floating.IconButton_disabled,
+  .IconButton_variant_floating.IconButton_loading {
+    --icon-button-font-color: var(--color-content-disabled);
+  }
+
+  .IconButton_variant_contained.IconButton_disabled,
+  .IconButton_variant_contained.IconButton_loading,
+  .IconButton_variant_floating.IconButton_disabled,
+  .IconButton_variant_floating.IconButton_loading {
+    --icon-button-bg-color: var(--color-background-disabled);
+    --icon-button-hover-bg-color: var(--color-background-disabled);
+    --icon-button-active-bg-color: var(--color-background-disabled);
+  }
+
+  .IconButton_variant_outlined.IconButton_disabled,
+  .IconButton_variant_outlined.IconButton_loading {
+    --icon-button-bg-color: transparent;
+    --icon-button-hover-bg-color: transparent;
+    --icon-button-active-bg-color: transparent;
+    --icon-button-border-color: var(--color-border-disabled);
+  }
+
+  .IconButton_variant_ghost.IconButton_disabled,
+  .IconButton_variant_ghost.IconButton_loading,
+  .IconButton_variant_function.IconButton_disabled,
+  .IconButton_variant_function.IconButton_loading {
+    --icon-button-bg-color: transparent;
+    --icon-button-hover-bg-color: transparent;
+    --icon-button-active-bg-color: transparent;
+  }
+
+  .IconButton:focus {
+    outline: 0;
+
+    /* the bug in outline property before chrome version 94 – doesn't repeat radius of an element */
+    box-shadow: var(--shadow-outline-focused);
+  }
+
+  .IconButton:focus:not(:focus-visible) {
+    box-shadow: none;
+  }
+
+  .IconButton:hover {
+    background-color: var(--icon-button-hover-bg-color);
+  }
+
+  .IconButton:active {
+    background-color: var(--icon-button-active-bg-color);
+  }
+
+  .IconButton_disabled,
+  .IconButton_loading {
+    pointer-events: none;
+    cursor: auto;
+  }

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

@@ -0,0 +1,39 @@
+import './IconButton.css';
+import React from 'react';
+import type { ElementType } from 'react';
+import type { IconSize, IconProps } from '@ozen-ui/icons';
+import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
+import type { PolymorphicComponentPropsWithoutRef } from '../../utils/polymorphicComponentWithRef';
+import { ICON_BUTTON_DEFAULT_TAG } from './constants';
+export declare const iconButtonColorVariant: readonly ["primary", "secondary"];
+export declare const iconButtonVariant: readonly ["contained", "outlined", "ghost", "function", "floating"];
+export type IconButtonVariant = (typeof iconButtonVariant)[number];
+export type IconButtonColorVariant = (typeof iconButtonColorVariant)[number];
+export type IconButtonIconProps = {
+    size?: IconSize;
+};
+type IconButtonBaseProps = {
+    /** Иконка */
+    icon: React.FC<IconProps & IconButtonIconProps>;
+    /** Вариант представления компонента */
+    variant?: IconButtonVariant;
+    /** Размер */
+    size?: FormElementSizeVariant;
+    /** Основной цвет компонента */
+    color?: IconButtonColorVariant;
+    /** Цвет иконки кнопки */
+    iconColor?: string;
+    /** Если {true} уменьшает размер компонента */
+    compressed?: boolean;
+    /** Если {true} делает компонент заблокированным */
+    disabled?: boolean;
+    /** Если {true} переводит компонент в состояние загрузки  */
+    loading?: boolean;
+    /** Дополнительные CSS-классы */
+    className?: string;
+    children?: never;
+};
+export type IconButtonProps<As extends ElementType = typeof ICON_BUTTON_DEFAULT_TAG> = PolymorphicComponentPropsWithoutRef<IconButtonBaseProps, As>;
+export declare const cnIconButton: import("@bem-react/classname").ClassNameFormatter;
+export declare const IconButton: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<IconButtonBaseProps, "button">;
+export {};

package/__inner__/cjs/components/IconButton/IconButton.js

@@ -0,0 +1,61 @@
+"use strict";
+exports.__esModule = true;
+exports.IconButton = exports.cnIconButton = exports.iconButtonVariant = exports.iconButtonColorVariant = void 0;
+var tslib_1 = require("tslib");
+require("./IconButton.css");
+var react_1 = tslib_1.__importStar(require("react"));
+var react_is_1 = require("react-is");
+var useThemeProps_1 = require("../../hooks/useThemeProps");
+var classname_1 = require("../../utils/classname");
+var getIconSizeToFormElement_1 = require("../../utils/getIconSizeToFormElement");
+var polymorphicComponentWithRef_1 = require("../../utils/polymorphicComponentWithRef");
+var Loader_1 = require("../Loader");
+var constants_1 = require("./constants");
+exports.iconButtonColorVariant = ['primary', 'secondary'];
+exports.iconButtonVariant = [
+    'contained',
+    'outlined',
+    'ghost',
+    'function',
+    'floating',
+];
+exports.cnIconButton = (0, classname_1.cn)('IconButton');
+var loaderSizeMapper = {
+    '2xs': 's',
+    xs: 's',
+    s: 's',
+    m: 'm',
+    l: 'l'
+};
+exports.IconButton = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (inProps, ref) {
+    var props = (0, useThemeProps_1.useThemeProps)({
+        props: inProps,
+        name: 'IconButton'
+    });
+    var _a = props.size, size = _a === void 0 ? constants_1.ICON_BUTTON_DEFAULT_SIZE : _a, _b = props.variant, variant = _b === void 0 ? constants_1.ICON_BUTTON_DEFAULT_VARIANT : _b, _c = props.color, color = _c === void 0 ? constants_1.ICON_BUTTON_DEFAULT_COLOR : _c, _d = props.as, Tag = _d === void 0 ? constants_1.ICON_BUTTON_DEFAULT_TAG : _d, iconColor = props.iconColor, compressed = props.compressed, loading = props.loading, disabled = props.disabled, className = props.className, Icon = props.icon, onClick = props.onClick, other = tslib_1.__rest(props, ["size", "variant", "color", "as", "iconColor", "compressed", "loading", "disabled", "className", "icon", "onClick"]);
+    var iconSize = (0, getIconSizeToFormElement_1.getIconSizeToFormElement)(size);
+    var isInteractionPrevented = disabled || loading;
+    var handleClick = function (event) {
+        if (onClick && !disabled && !loading) {
+            onClick(event);
+        }
+    };
+    var resolvedChildren = (0, react_1.useMemo)(function () {
+        if (loading) {
+            return (react_1["default"].createElement(Loader_1.Loader, { className: (0, exports.cnIconButton)('Loader'), color: "var(--color-content-disabled)", size: loaderSizeMapper[size] }));
+        }
+        if ((0, react_is_1.isValidElementType)(Icon)) {
+            return react_1["default"].createElement(Icon, { size: iconSize, color: iconColor });
+        }
+        return null;
+    }, [loading, size, iconColor, iconSize, Icon]);
+    return (react_1["default"].createElement(Tag, tslib_1.__assign({ className: (0, exports.cnIconButton)({
+            variant: variant,
+            size: size,
+            color: color,
+            disabled: disabled,
+            loading: loading,
+            compressed: compressed
+        }, [className]), disabled: isInteractionPrevented, onClick: handleClick }, (isInteractionPrevented && { tabIndex: -1 }), other, { ref: ref }), resolvedChildren));
+});
+exports.IconButton.displayName = 'IconButton';

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

@@ -0,0 +1,4 @@
+export declare const ICON_BUTTON_DEFAULT_SIZE = "m";
+export declare const ICON_BUTTON_DEFAULT_VARIANT = "ghost";
+export declare const ICON_BUTTON_DEFAULT_COLOR = "secondary";
+export declare const ICON_BUTTON_DEFAULT_TAG = "button";

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

@@ -0,0 +1,7 @@
+"use strict";
+exports.__esModule = true;
+exports.ICON_BUTTON_DEFAULT_TAG = exports.ICON_BUTTON_DEFAULT_COLOR = exports.ICON_BUTTON_DEFAULT_VARIANT = exports.ICON_BUTTON_DEFAULT_SIZE = void 0;
+exports.ICON_BUTTON_DEFAULT_SIZE = 'm';
+exports.ICON_BUTTON_DEFAULT_VARIANT = 'ghost';
+exports.ICON_BUTTON_DEFAULT_COLOR = 'secondary';
+exports.ICON_BUTTON_DEFAULT_TAG = 'button';

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

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

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

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

package/__inner__/cjs/components/Indicator/Indicator.css

@@ -0,0 +1,42 @@
+.Indicator {
+  --indicator-border-color: var(--color-background-main);
+  inline-size: var(--indicator-size);
+  block-size: var(--indicator-size);
+  border-radius: calc(var(--indicator-size) / 2);
+}
+
+  .Indicator_variant_neutral {
+      background-color: var(--color-content-disabled);
+    }
+
+  .Indicator_variant_error {
+      background-color: var(--color-content-error);
+    }
+
+  .Indicator_variant_warning {
+      background-color: var(--color-content-warning);
+    }
+
+  .Indicator_variant_success {
+      background-color: var(--color-content-success);
+    }
+
+  .Indicator_variant_info {
+      background-color: var(--color-content-info);
+    }
+
+  .Indicator_size_xs {
+      --indicator-size: 6px;
+    }
+
+  .Indicator_size_s {
+      --indicator-size: 8px;
+    }
+
+  .Indicator_size_m {
+      --indicator-size: 12px;
+    }
+
+  .Indicator_border {
+    box-shadow: var(--indicator-border-color) 0 0 0 var(--border-width-m);
+  }

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

@@ -0,0 +1,35 @@
+import './Indicator.css';
+import React, { type HTMLAttributes } from 'react';
+export declare const cnIndicator: import("@bem-react/classname").ClassNameFormatter;
+export declare const indicatorVariant: readonly ["success", "info", "warning", "error", "neutral"];
+export type IndicatorVariant = (typeof indicatorVariant)[number];
+export declare const indicatorSizeVariant: readonly ["xs", "s", "m"];
+export type IndicatorSizeVariant = (typeof indicatorSizeVariant)[number];
+export type IndicatorProps = {
+    /** Цветовой вариант индикатор
+     * @default success
+     * */
+    variant?: IndicatorVariant;
+    /** Размер
+     * @default m
+     * */
+    size?: IndicatorSizeVariant;
+    /** Если {true} устанавливает вокруг индикатора рамку
+     * @default false
+     * */
+    border?: boolean;
+} & HTMLAttributes<HTMLDivElement>;
+export declare const Indicator: React.ForwardRefExoticComponent<{
+    /** Цветовой вариант индикатор
+     * @default success
+     * */
+    variant?: "warning" | "error" | "info" | "success" | "neutral" | undefined;
+    /** Размер
+     * @default m
+     * */
+    size?: "s" | "m" | "xs" | undefined;
+    /** Если {true} устанавливает вокруг индикатора рамку
+     * @default false
+     * */
+    border?: boolean | undefined;
+} & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

package/__inner__/cjs/components/Indicator/Indicator.js

@@ -0,0 +1,23 @@
+"use strict";
+exports.__esModule = true;
+exports.Indicator = exports.indicatorSizeVariant = exports.indicatorVariant = exports.cnIndicator = void 0;
+var tslib_1 = require("tslib");
+require("./Indicator.css");
+var react_1 = tslib_1.__importStar(require("react"));
+var useThemeProps_1 = require("../../hooks/useThemeProps");
+var classname_1 = require("../../utils/classname");
+exports.cnIndicator = (0, classname_1.cn)('Indicator');
+exports.indicatorVariant = [
+    'success',
+    'info',
+    'warning',
+    'error',
+    'neutral',
+];
+exports.indicatorSizeVariant = ['xs', 's', 'm'];
+exports.Indicator = (0, react_1.forwardRef)(function (inProps, ref) {
+    var props = (0, useThemeProps_1.useThemeProps)({ props: inProps, name: 'Indicator' });
+    var _a = props.variant, variant = _a === void 0 ? 'success' : _a, _b = props.border, border = _b === void 0 ? false : _b, _c = props.size, size = _c === void 0 ? 'm' : _c, className = props.className, other = tslib_1.__rest(props, ["variant", "border", "size", "className"]);
+    return (react_1["default"].createElement("div", tslib_1.__assign({ className: (0, exports.cnIndicator)({ variant: variant, border: border, size: size }, [className]) }, other, { ref: ref })));
+});
+exports.Indicator.displayName = 'Indicator';

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

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

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

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