@ozen-ui/kit 0.0.1

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

@@ -0,0 +1,13 @@
+"use strict";
+exports.__esModule = true;
+exports.INPUT_NUMBER_DEFAULT_FULL_WIDTH = exports.INPUT_NUMBER_DEFAULT_DISABLED = exports.INPUT_NUMBER_DEFAULT_REQUIRED = exports.INPUT_NUMBER_DEFAULT_ERROR = exports.INPUT_NUMBER_DEFAULT_AUTO_FOCUS = exports.INPUT_NUMBER_DEFAULT_MIN = exports.INPUT_NUMBER_DEFAULT_MAX = exports.INPUT_NUMBER_DEFAULT_VALUE = exports.INPUT_NUMBER_DEFAULT_STEP = exports.INPUT_NUMBER_DEFAULT_SIZE = void 0;
+exports.INPUT_NUMBER_DEFAULT_SIZE = 'm';
+exports.INPUT_NUMBER_DEFAULT_STEP = 1;
+exports.INPUT_NUMBER_DEFAULT_VALUE = '';
+exports.INPUT_NUMBER_DEFAULT_MAX = Number.MAX_SAFE_INTEGER;
+exports.INPUT_NUMBER_DEFAULT_MIN = 0;
+exports.INPUT_NUMBER_DEFAULT_AUTO_FOCUS = false;
+exports.INPUT_NUMBER_DEFAULT_ERROR = false;
+exports.INPUT_NUMBER_DEFAULT_REQUIRED = false;
+exports.INPUT_NUMBER_DEFAULT_DISABLED = false;
+exports.INPUT_NUMBER_DEFAULT_FULL_WIDTH = false;

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

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

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

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

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

@@ -0,0 +1,64 @@
+import type { HTMLAttributes, Ref, ComponentPropsWithRef, ChangeEvent, MouseEvent } from 'react';
+import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
+import type { FieldIconProps } from '../FieldIcon';
+import type { FieldLabelProps } from '../FieldLabel';
+export type InputNumberSizeVariant = FormElementSizeVariant;
+export type InputElement = ComponentPropsWithRef<'input'>;
+export type InputNumberEmptyValue = '';
+export type InputNumberValue = number | InputNumberEmptyValue;
+export type InputNumberCountDirection = 'increment' | 'decrement';
+export type InputNumberProps = {
+    /** Атрибут id для элемента input */
+    id?: string;
+    /** Атрибут name для элемента input */
+    name?: string;
+    /** Лейбл */
+    label?: string;
+    /** Размер компонента */
+    size?: InputNumberSizeVariant;
+    /** Подсказка. Отображается, когда вариант не выбран */
+    placeholder?: string;
+    /** Если {true} устанавливает автофокус */
+    autoFocus?: boolean;
+    /** Если {true} переводит поле в состояние ошибки */
+    error?: boolean;
+    /** Если {true} растягивает поле на всю ширину */
+    fullWidth?: boolean;
+    /** Дополнительное описание к полю */
+    hint?: string | null | undefined;
+    /** Если {true} делает элемент неактивным */
+    disabled?: boolean;
+    /** Если {true} делает элемент обязательным к заполнению */
+    required?: boolean;
+    /** Текст или иконка слева */
+    renderLeft?: FieldIconProps['icon'];
+    /** Текст или иконка справа */
+    renderRight?: FieldIconProps['icon'];
+    /** Выбранное значение */
+    value?: InputNumberValue;
+    /** Значение по умолчанию */
+    defaultValue?: InputNumberValue;
+    /** Обработчик события на изменение значения поля */
+    onChange?: (e: ChangeEvent<HTMLInputElement> | MouseEvent<HTMLButtonElement> | null, payload: {
+        name?: string;
+        id?: string;
+        value: InputNumberValue;
+    }) => void;
+    /** Свойства элемента input */
+    inputProps?: InputElement & {
+        'data-testid'?: string;
+    };
+    /** Ссылка на FieldLabel */
+    labelRef?: FieldLabelProps['ref'];
+    /** Свойства FieldLabel */
+    labelProps?: FieldLabelProps;
+    /** Шаг инкремента/декремента */
+    step?: number;
+    /** Минимально допустимое значение */
+    min?: number;
+    /** Максимально допустимое значение */
+    max?: number;
+    /** Ссылка на корневой DOM-элемент компонента */
+    ref?: Ref<HTMLDivElement>;
+    'data-testid'?: string;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'value' | 'defaultValue' | 'onChange'>;

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

@@ -0,0 +1,2 @@
+"use strict";
+exports.__esModule = true;

package/__inner__/cjs/components/InputNumber/utils.d.ts

@@ -0,0 +1,11 @@
+import { KeyboardEvent } from 'react';
+import { InputNumberValue, InputNumberCountDirection } from './types';
+export declare const isValidValue: (value?: InputNumberValue) => boolean;
+export declare const isInputInvalid: (event: KeyboardEvent<HTMLInputElement>) => boolean;
+export declare const getValue: ({ value, step, min, max, countDirection, }: {
+    value?: InputNumberValue | undefined;
+    countDirection: InputNumberCountDirection;
+    min: number;
+    max: number;
+    step: number;
+}) => InputNumberValue;

package/__inner__/cjs/components/InputNumber/utils.js

@@ -0,0 +1,29 @@
+"use strict";
+exports.__esModule = true;
+exports.getValue = exports.isInputInvalid = exports.isValidValue = void 0;
+var decimal_js_1 = require("decimal.js");
+var isNumber_1 = require("../../utils/isNumber");
+var isValidValue = function (value) {
+    return value !== '' && !Number.isNaN(value) && (0, isNumber_1.isNumber)(value);
+};
+exports.isValidValue = isValidValue;
+var isInputInvalid = function (event) {
+    var ctrlKey = event.ctrlKey, metaKey = event.metaKey, key = event.key;
+    // проверка на длину кода нужна для того, чтобы не проверять
+    // нажатия по служебным клавишам (ArrowUp, ArrowDown, etc.)
+    return !(ctrlKey || metaKey) && key.length === 1 && !!key.match(/[A-Za-z]/g);
+};
+exports.isInputInvalid = isInputInvalid;
+var getValue = function (_a) {
+    var value = _a.value, step = _a.step, min = _a.min, max = _a.max, countDirection = _a.countDirection;
+    if (typeof value === 'undefined') {
+        return '';
+    }
+    var isIncrement = countDirection === 'increment';
+    var currentValue = (0, exports.isValidValue)(value) ? value : min;
+    var nextValue = isIncrement
+        ? decimal_js_1.Decimal.add(currentValue, step).toNumber()
+        : decimal_js_1.Decimal.sub(currentValue, step).toNumber();
+    return isIncrement ? Math.min(nextValue, max) : Math.max(nextValue, min);
+};
+exports.getValue = getValue;

package/__inner__/cjs/components/Link/Link.css

@@ -0,0 +1,19 @@
+.Link {
+  border: none;
+  background-color: transparent;
+  outline: 0;
+  padding: 0;
+  cursor: pointer;
+  text-decoration: underline;
+  border-radius: var(--border-radius-xs);
+  transition: color var(--transition-default);
+}
+
+  .Link:focus {
+    outline: 0;
+    box-shadow: var(--shadow-outline-focused);
+  }
+
+  .Link:focus:not(:focus-visible) {
+    box-shadow: none;
+  }

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

@@ -0,0 +1,7 @@
+import './Link.css';
+import { ElementType } from 'react';
+import { type PolymorphicComponentPropsWithoutRef } from '../../utils/polymorphicComponentWithRef';
+import { type TypographyBaseProps } from '../Typography';
+export type LinkBaseProps = Pick<TypographyBaseProps, 'variant' | 'display' | 'defaultMargin' | 'children' | 'noWrap' | 'align'>;
+export type LinkProps<As extends ElementType = 'a'> = PolymorphicComponentPropsWithoutRef<LinkBaseProps, As>;
+export declare const Link: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<LinkBaseProps, "a">;

package/__inner__/cjs/components/Link/Link.js

@@ -0,0 +1,28 @@
+"use strict";
+exports.__esModule = true;
+exports.Link = void 0;
+var tslib_1 = require("tslib");
+require("./Link.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 Typography_1 = require("../Typography");
+var cnLink = (0, classname_1.cn)('Link');
+exports.Link = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (inProps, ref) {
+    var props = (0, useThemeProps_1.useThemeProps)({
+        props: inProps,
+        name: 'Link'
+    });
+    var _a = props.variant, variant = _a === void 0 ? 'text-m' : _a, _b = props.as, Tag = _b === void 0 ? 'a' : _b, display = props.display, noWrap = props.noWrap, align = props.align, defaultMargin = props.defaultMargin, children = props.children, className = props.className, other = tslib_1.__rest(props, ["variant", "as", "display", "noWrap", "align", "defaultMargin", "children", "className"]);
+    return (react_1["default"].createElement(Tag, tslib_1.__assign({ className: (0, classnames_1.classnames)(cnLink(), (0, Typography_1.cnTypography)({
+            variant: variant,
+            display: display,
+            defaultMargin: defaultMargin,
+            align: align,
+            noWrap: noWrap,
+            link: true
+        }), className) }, other, { ref: ref }), children));
+});
+exports.Link.displayName = 'Link';

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

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

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

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

package/__inner__/cjs/components/List/List.css

@@ -0,0 +1,78 @@
+.List {
+  --list-item-border-radius: var(--border-radius-xs);
+  --list-pipka-background-color: var(--color-content-action);
+  --list-pipka-border-radius: 0 var(--border-radius-xs) var(--border-radius-xs)
+    0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--list-gap);
+  padding: var(--list-gutter) 0;
+  margin: 0;
+  outline: none;
+}
+
+  .List_size_2xs,
+    .List_size_xs,
+    .List_size_s {
+      --list-gap: 2px;
+    }
+
+  .List_size_m,
+    .List_size_l {
+      --list-gap: 4px;
+    }
+
+  .List_size_2xs {
+      --list-gutter: var(--space-xs);
+      --list-item-min-height: 32px;
+      --list-item-icon-min-width: 16px;
+      --list-item-avatar-min-width: 16px;
+      --list-item-padding: 0 8px;
+      --list-item-children-margin-right: 8px;
+      --list-pipka-height: 32px;
+      --list-pipka-width: 4px;
+    }
+
+  .List_size_xs {
+      --list-gutter: var(--space-xs);
+      --list-item-min-height: 40px;
+      --list-item-icon-min-width: 16px;
+      --list-item-avatar-min-width: 24px;
+      --list-item-padding: 4px 8px;
+      --list-item-children-margin-right: 8px;
+      --list-pipka-height: 40px;
+      --list-pipka-width: 4px;
+    }
+
+  .List_size_s {
+      --list-gutter: var(--space-xs);
+      --list-item-min-height: 48px;
+      --list-item-icon-min-width: 16px;
+      --list-item-avatar-min-width: 32px;
+      --list-item-padding: 6px 12px;
+      --list-item-children-margin-right: 12px;
+      --list-pipka-height: 40px;
+      --list-pipka-width: 4px;
+    }
+
+  .List_size_m {
+      --list-gutter: var(--space-s);
+      --list-item-min-height: 56px;
+      --list-item-icon-min-width: 24px;
+      --list-item-avatar-min-width: 40px;
+      --list-item-padding: 8px 12px;
+      --list-item-children-margin-right: 12px;
+      --list-pipka-height: 48px;
+      --list-pipka-width: 4px;
+    }
+
+  .List_size_l {
+      --list-gutter: var(--space-s);
+      --list-item-min-height: 64px;
+      --list-item-icon-min-width: 24px;
+      --list-item-avatar-min-width: 48px;
+      --list-item-padding: 8px 16px;
+      --list-item-children-margin-right: 16px;
+      --list-pipka-height: 48px;
+      --list-pipka-width: 4px;
+    }

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

@@ -0,0 +1,4 @@
+import './List.css';
+import type { ListBaseProps } from './types';
+export declare const cnList: import("@bem-react/classname").ClassNameFormatter;
+export declare const List: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<ListBaseProps, "ul">;

package/__inner__/cjs/components/List/List.js

@@ -0,0 +1,19 @@
+"use strict";
+exports.__esModule = true;
+exports.List = exports.cnList = void 0;
+var tslib_1 = require("tslib");
+require("./List.css");
+var react_1 = tslib_1.__importDefault(require("react"));
+var useThemeProps_1 = require("../../hooks/useThemeProps");
+var classname_1 = require("../../utils/classname");
+var polymorphicComponentWithRef_1 = require("../../utils/polymorphicComponentWithRef");
+var constants_1 = require("./constants");
+var ListContext_1 = require("./ListContext");
+exports.cnList = (0, classname_1.cn)('List');
+exports.List = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (inProps, ref) {
+    var props = (0, useThemeProps_1.useThemeProps)({ props: inProps, name: 'List' });
+    var _a = props.as, Tag = _a === void 0 ? constants_1.LIST_DEFAULT_TAG : _a, _b = props.size, size = _b === void 0 ? constants_1.LIST_DEFAULT_SIZE : _b, children = props.children, className = props.className, other = tslib_1.__rest(props, ["as", "size", "children", "className"]);
+    return (react_1["default"].createElement(ListContext_1.ListContext.Provider, { value: { size: size } },
+        react_1["default"].createElement(Tag, tslib_1.__assign({ className: (0, exports.cnList)({ size: size }, [className]) }, other, { ref: ref }), children)));
+});
+exports.List.displayName = 'List';

package/__inner__/cjs/components/List/ListContext.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { ListContextValue } from './types';
+export declare const ListContext: React.Context<ListContextValue>;
+export declare const useListContext: () => ListContextValue;

package/__inner__/cjs/components/List/ListContext.js

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

package/__inner__/cjs/components/List/components/ListItem/ListItem.css

@@ -0,0 +1,20 @@
+.ListItem {
+  display: flex;
+  align-items: center;
+  min-block-size: var(--list-item-min-height);
+  padding: var(--list-item-padding);
+  border-radius: var(--list-item-border-radius);
+  color: var(--color-content-primary);
+  box-sizing: border-box;
+  flex-shrink: 0;
+  margin: 0 var(--list-gutter);
+}
+
+  .ListItem_disableGutters {
+    padding: 0;
+  }
+
+.ListItem > .ListItemButton {
+  inline-size: 100%;
+  margin: 0;
+}

package/__inner__/cjs/components/List/components/ListItem/ListItem.d.ts

@@ -0,0 +1,14 @@
+import './ListItem.css';
+import { ElementType } from 'react';
+import type { ReactNode } from 'react';
+import { type PolymorphicComponentPropsWithoutRef } from '../../../../utils/polymorphicComponentWithRef';
+import { LIST_ITEM_DEFAULT_TAG } from '../../constants';
+export declare const cnListItem: import("@bem-react/classname").ClassNameFormatter;
+export type ListItemBaseProps = {
+    /** Содержимое компонента */
+    children: ReactNode;
+    /** Если {true} убирает отступы вокруг корневого элемента */
+    disableGutters?: boolean;
+};
+export type ListItemProps<As extends ElementType = typeof LIST_ITEM_DEFAULT_TAG> = PolymorphicComponentPropsWithoutRef<ListItemBaseProps, As>;
+export declare const ListItem: import("../../../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<ListItemBaseProps, "li">;

package/__inner__/cjs/components/List/components/ListItem/ListItem.js

@@ -0,0 +1,17 @@
+"use strict";
+exports.__esModule = true;
+exports.ListItem = exports.cnListItem = void 0;
+var tslib_1 = require("tslib");
+require("./ListItem.css");
+var react_1 = tslib_1.__importDefault(require("react"));
+var useThemeProps_1 = require("../../../../hooks/useThemeProps");
+var classname_1 = require("../../../../utils/classname");
+var polymorphicComponentWithRef_1 = require("../../../../utils/polymorphicComponentWithRef");
+var constants_1 = require("../../constants");
+exports.cnListItem = (0, classname_1.cn)('ListItem');
+exports.ListItem = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (inProps, ref) {
+    var props = (0, useThemeProps_1.useThemeProps)({ props: inProps, name: 'ListItem' });
+    var _a = props.as, Tag = _a === void 0 ? constants_1.LIST_ITEM_DEFAULT_TAG : _a, children = props.children, className = props.className, disableGutters = props.disableGutters, other = tslib_1.__rest(props, ["as", "children", "className", "disableGutters"]);
+    return (react_1["default"].createElement(Tag, tslib_1.__assign({ className: (0, exports.cnListItem)({ disableGutters: disableGutters }, [className]) }, other, { ref: ref }), children));
+});
+exports.ListItem.displayName = 'ListItem';

package/__inner__/cjs/components/List/components/ListItem/index.d.ts

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

package/__inner__/cjs/components/List/components/ListItem/index.js

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

package/__inner__/cjs/components/List/components/ListItemButton/ListItemButton.css

@@ -0,0 +1,57 @@
+.ListItemButton {
+  inline-size: calc(100% - 2 * var(--list-gutter));
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  box-sizing: border-box;
+  min-block-size: var(--list-item-min-height);
+  padding: var(--list-item-padding);
+  color: var(--color-content-primary);
+  outline: none;
+  text-decoration: none;
+  border-radius: var(--list-item-border-radius);
+  transition: background-color var(--transition-default);
+  text-align: start;
+  background-color: transparent;
+  cursor: pointer;
+  overflow: hidden;
+  -webkit-tap-highlight-color: transparent;
+  margin: 0 var(--list-gutter);
+  border: none;
+}
+
+  .ListItemButton:hover {
+    background-color: var(--color-background-main-hover);
+  }
+
+  .ListItemButton:active {
+    background-color: var(--color-background-main-pressed);
+  }
+
+  .ListItemButton:focus {
+    box-shadow: inset var(--shadow-outline-focused);
+  }
+
+  .ListItemButton:focus:not(:focus-visible) {
+    box-shadow: none;
+  }
+
+  .ListItemButton_disabled {
+    pointer-events: none;
+    color: var(--color-content-tertiary);
+  }
+
+  .ListItemButton_disabled .ListItemText-TextPrimary,
+    .ListItemButton_disabled .ListItemText-TextSecondary {
+      color: var(--color-content-tertiary);
+    }
+
+  .ListItemButton_selected::after {
+    content: '';
+    inline-size: var(--list-pipka-width);
+    block-size: var(--list-pipka-height);
+    background-color: var(--list-pipka-background-color);
+    border-radius: var(--list-pipka-border-radius);
+    position: absolute;
+    inset-inline-start: 0;
+  }

package/__inner__/cjs/components/List/components/ListItemButton/ListItemButton.d.ts

@@ -0,0 +1,15 @@
+import './ListItemButton.css';
+import { ElementType } from 'react';
+import type { ReactNode } from 'react';
+import { type PolymorphicComponentPropsWithoutRef } from '../../../../utils/polymorphicComponentWithRef';
+import { LIST_ITEM_BUTTON_DEFAULT_TAG } from '../../constants';
+export declare const cnListItemButton: import("@bem-react/classname").ClassNameFormatter;
+export type ListItemButtonBaseProps = {
+    /** Содержимое компонента */
+    children?: ReactNode;
+    /** Если {true} делает элемент неактивным */
+    disabled?: boolean;
+    'data-testid'?: string;
+};
+export type ListItemButtonProps<As extends ElementType = typeof LIST_ITEM_BUTTON_DEFAULT_TAG> = PolymorphicComponentPropsWithoutRef<ListItemButtonBaseProps, As>;
+export declare const ListItemButton: import("../../../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<ListItemButtonBaseProps, "div">;

package/__inner__/cjs/components/List/components/ListItemButton/ListItemButton.js

@@ -0,0 +1,47 @@
+"use strict";
+exports.__esModule = true;
+exports.ListItemButton = exports.cnListItemButton = void 0;
+var tslib_1 = require("tslib");
+require("./ListItemButton.css");
+var react_1 = tslib_1.__importStar(require("react"));
+var useThemeProps_1 = require("../../../../hooks/useThemeProps");
+var classname_1 = require("../../../../utils/classname");
+var isKey_1 = require("../../../../utils/isKey");
+var polymorphicComponentWithRef_1 = require("../../../../utils/polymorphicComponentWithRef");
+var constants_1 = require("../../constants");
+exports.cnListItemButton = (0, classname_1.cn)('ListItemButton');
+exports.ListItemButton = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (inProps, ref) {
+    var props = (0, useThemeProps_1.useThemeProps)({ props: inProps, name: 'ListItemButton' });
+    var _a = props.as, Tag = _a === void 0 ? constants_1.LIST_ITEM_BUTTON_DEFAULT_TAG : _a, children = props.children, disabled = props.disabled, className = props.className, onClick = props.onClick, tabIndexProp = props.tabIndex, onKeyDownProp = props.onKeyDown, other = tslib_1.__rest(props, ["as", "children", "disabled", "className", "onClick", "tabIndex", "onKeyDown"]);
+    var tabIndex = (0, react_1.useMemo)(function () { return (!disabled ? 0 : -1); }, [disabled]);
+    var handleClick = function (event) {
+        if (!disabled)
+            onClick === null || onClick === void 0 ? void 0 : onClick(event);
+    };
+    var handleKeyDown = function (event) {
+        if ((0, isKey_1.isKey)(event, 'Enter') || (0, isKey_1.isKey)(event, 'Space')) {
+            event.preventDefault();
+            handleClick === null || handleClick === void 0 ? void 0 : handleClick(event);
+        }
+        onKeyDownProp === null || onKeyDownProp === void 0 ? void 0 : onKeyDownProp(event);
+    };
+    // TODO: Вынести логику в ButtonBase
+    var additionalTagProps = (0, react_1.useMemo)(function () {
+        if (Tag === 'button')
+            return {
+                onKeyDown: onKeyDownProp
+            };
+        var commonAdditionalProps = {
+            role: 'button',
+            onKeyDown: onKeyDownProp
+        };
+        if (Tag === 'div') {
+            return tslib_1.__assign(tslib_1.__assign({}, commonAdditionalProps), { onKeyDown: handleKeyDown });
+        }
+        return commonAdditionalProps;
+    }, [Tag, handleKeyDown]);
+    return (react_1["default"].createElement(Tag, tslib_1.__assign({ className: (0, exports.cnListItemButton)({
+            disabled: disabled
+        }, [className]), onClick: handleClick, tabIndex: tabIndexProp || tabIndex }, additionalTagProps, other, { ref: ref }), children));
+});
+exports.ListItemButton.displayName = 'ListItemButton';

package/__inner__/cjs/components/List/components/ListItemButton/index.d.ts

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

package/__inner__/cjs/components/List/components/ListItemButton/index.js

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

package/__inner__/cjs/components/List/components/ListItemIcon/ListItemIcon.css

@@ -0,0 +1,16 @@
+.ListItemIcon {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  justify-content: center;
+  margin-inline-end: var(--list-item-children-margin-right);
+  min-inline-size: var(--list-item-icon-min-width);
+}
+
+  .ListItemIcon_disableMargin {
+    margin: 0;
+  }
+
+  .ListItemIcon:last-child {
+    margin-inline-end: 0;
+  }

package/__inner__/cjs/components/List/components/ListItemIcon/ListItemIcon.d.ts

@@ -0,0 +1,16 @@
+import './ListItemIcon.css';
+import React from 'react';
+import type { HTMLAttributes } from 'react';
+export declare const cnListItemIcon: import("@bem-react/classname").ClassNameFormatter;
+export type ListItemIconProps = {
+    /** Содержимое компонента */
+    children?: React.ReactNode;
+    /** Если {true} убирает внешние отступы вокруг корневого элемента */
+    disableMargin?: boolean;
+} & HTMLAttributes<HTMLDivElement>;
+export declare const ListItemIcon: React.ForwardRefExoticComponent<{
+    /** Содержимое компонента */
+    children?: React.ReactNode;
+    /** Если {true} убирает внешние отступы вокруг корневого элемента */
+    disableMargin?: boolean | undefined;
+} & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

package/__inner__/cjs/components/List/components/ListItemIcon/ListItemIcon.js

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

package/__inner__/cjs/components/List/components/ListItemIcon/index.d.ts

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

package/__inner__/cjs/components/List/components/ListItemIcon/index.js

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

package/__inner__/cjs/components/List/components/ListItemText/ListItemText.css

@@ -0,0 +1,10 @@
+.ListItemText {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  margin-inline-end: var(--list-item-children-margin-right);
+}
+
+  .ListItemText:last-child {
+    margin-inline-end: 0;
+  }

package/__inner__/cjs/components/List/components/ListItemText/ListItemText.d.ts

@@ -0,0 +1,26 @@
+import './ListItemText.css';
+import React from 'react';
+import type { HTMLAttributes } from 'react';
+import type { TypographyProps } from '../../../Typography';
+export type ListItemTextProps = {
+    children?: never;
+    /** Основной текст */
+    primary: string;
+    /** Свойства компонента Typography для текста primary */
+    primaryTypographyProps?: TypographyProps<'span'>;
+    /** Второстепенный текст */
+    secondary?: string;
+    /** Свойства компонента Typography для текста secondary */
+    secondaryTypographyProps?: TypographyProps<'span'>;
+} & HTMLAttributes<HTMLDivElement>;
+export declare const ListItemText: React.ForwardRefExoticComponent<{
+    children?: undefined;
+    /** Основной текст */
+    primary: string;
+    /** Свойства компонента Typography для текста primary */
+    primaryTypographyProps?: TypographyProps<"span"> | undefined;
+    /** Второстепенный текст */
+    secondary?: string | undefined;
+    /** Свойства компонента Typography для текста secondary */
+    secondaryTypographyProps?: TypographyProps<"span"> | undefined;
+} & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;