@ozen-ui/kit 0.69.0 → 0.71.0

package/__inner__/cjs/components/DialogNext/components/DialogBottomSheet/DialogBottomSheet.d.ts

@@ -9,4 +9,4 @@ export declare const DialogBottomSheet: React.ForwardRefExoticComponent<{
     hideCloseButton: boolean | undefined;
     className: string | undefined;
     onClose: (() => void) | undefined;
-} & Omit<Omit<import("../../../BottomSheetBase").BottomSheetBaseProps, "snaps">, "className" | "open" | "onClose" | "size" | "variant" | "hideCloseButton" | "closeButton"> & React.RefAttributes<HTMLDivElement>>;
+} & Omit<Omit<import("../../../BottomSheetBase").BottomSheetBaseProps, "snaps">, "className" | "size" | "open" | "variant" | "onClose" | "hideCloseButton" | "closeButton"> & React.RefAttributes<HTMLDivElement>>;

package/__inner__/cjs/components/DialogNext/modules/DialogCloseButton/DialogCloseButton.d.ts

@@ -1,3 +1,3 @@
 import type { DialogCloseButtonBaseProps } from './types';
 export declare const cnDialogCloseButton: import("@bem-react/classname").ClassNameFormatter;
-export declare const DialogCloseButton: import("../../../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<DialogCloseButtonBaseProps, "button">;
+export declare const DialogCloseButton: import("../../../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<DialogCloseButtonBaseProps, "button", "as">;

package/__inner__/cjs/components/DialogNext/modules/DialogFooterButton/DialogFooterButton.d.ts

@@ -1,3 +1,3 @@
 import type { DialogFooterButtonBaseProps } from './types';
 export declare const cnDialogFooterButton: import("@bem-react/classname").ClassNameFormatter;
-export declare const DialogFooterButton: import("../../../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<DialogFooterButtonBaseProps, "div">;
+export declare const DialogFooterButton: import("../../../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<DialogFooterButtonBaseProps, "div", "as">;

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

@@ -1,4 +1,4 @@
 import './Divider.css';
 import type { DividerBaseProps } from './index';
 export declare const cnDivider: import("@bem-react/classname").ClassNameFormatter;
-export declare const Divider: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<DividerBaseProps, "hr">;
+export declare const Divider: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<DividerBaseProps, "hr", "as">;

package/__inner__/cjs/components/DrawerNext/modules/DrawerCloseButton/DrawerCloseButton.d.ts

@@ -1,3 +1,3 @@
 import type { DrawerCloseButtonBaseProps } from './types';
 export declare const cnDrawerCloseButton: import("@bem-react/classname").ClassNameFormatter;
-export declare const DrawerCloseButton: import("../../../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<DrawerCloseButtonBaseProps, "button">;
+export declare const DrawerCloseButton: import("../../../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<DrawerCloseButtonBaseProps, "button", "as">;

package/__inner__/cjs/components/DrawerNext/modules/DrawerFooterButton/DrawerFooterButton.d.ts

@@ -1,3 +1,3 @@
 import type { DrawerFooterButtonProps } from './types';
 export declare const cnDrawerFooterButton: import("@bem-react/classname").ClassNameFormatter;
-export declare const DrawerFooterButton: import("../../../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<DrawerFooterButtonProps, "button">;
+export declare const DrawerFooterButton: import("../../../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<DrawerFooterButtonProps, "button", "as">;

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

@@ -10,4 +10,4 @@ export type FieldControlBaseProps = Omit<FieldControlContextValue, 'label'> & {
 };
 export type FieldControlProps<As extends ElementType = typeof FIELD_CONTROL_DEFAULT_TAG> = PolymorphicComponentPropsWithoutRef<FieldControlBaseProps, As>;
 export declare const cnFieldControl: import("@bem-react/classname").ClassNameFormatter;
-export declare const FieldControl: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<FieldControlBaseProps, "div">;
+export declare const FieldControl: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<FieldControlBaseProps, "div", "as">;

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

@@ -1,3 +1,3 @@
 import type { FieldInputBaseProps } from './types';
 export declare const cnFieldInput: import("@bem-react/classname").ClassNameFormatter;
-export declare const FieldInput: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<FieldInputBaseProps, "div">;
+export declare const FieldInput: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<FieldInputBaseProps, "div", "as">;

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

@@ -19,4 +19,4 @@ export type FileBaseProps = {
     error?: boolean;
 };
 export type FileProps<As extends ElementType = typeof FILE_DEFAULT_TAG> = PolymorphicComponentPropsWithoutRef<FileBaseProps, As>;
-export declare const File: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<FileBaseProps, "div">;
+export declare const File: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<FileBaseProps, "div", "as">;

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

@@ -3,4 +3,4 @@ import './modules/FormControlCarcassIcon/FormControlCarcassIcon.css';
 import './FormControlCarcass.css';
 import type { FormControlLabelBaseProps } from './types';
 export declare const cnFormControlCarcass: import("@bem-react/classname").ClassNameFormatter;
-export declare const FormControlCarcass: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<FormControlLabelBaseProps, "label">;
+export declare const FormControlCarcass: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<FormControlLabelBaseProps, "label", "as">;

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

@@ -1,4 +1,4 @@
 import './FormControlLabel.css';
 import type { FormControlLabelBaseProps } from './index';
 export declare const cnFormControlLabel: import("@bem-react/classname").ClassNameFormatter;
-export declare const FormControlLabel: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<FormControlLabelBaseProps, "label">;
+export declare const FormControlLabel: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<FormControlLabelBaseProps, "label", "as">;

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

@@ -1,4 +1,4 @@
 import './FormGroup.css';
 import type { FormGroupBaseProps } from './types';
 export declare const cnFormGroup: import("@bem-react/classname").ClassNameFormatter;
-export declare const FormGroup: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<FormGroupBaseProps, "div">;
+export declare const FormGroup: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<FormGroupBaseProps, "div", "as">;

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

@@ -9,4 +9,4 @@ export type FormTitleBaseProps = {
 };
 export type FormTitleProps<As extends ElementType = 'div'> = PolymorphicComponentPropsWithoutRef<FormTitleBaseProps, As>;
 export declare const cnFormTitle: import("@bem-react/classname").ClassNameFormatter;
-export declare const FormTitle: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<FormTitleBaseProps, "div">;
+export declare const FormTitle: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<FormTitleBaseProps, "div", "as">;

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

@@ -30,4 +30,4 @@ export type GridBaseProps = {
     className?: string;
 };
 export type GridProps<As extends ElementType = 'div'> = PolymorphicComponentPropsWithRef<GridBaseProps, As>;
-export declare const Grid: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<GridBaseProps, "div">;
+export declare const Grid: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<GridBaseProps, "div", "as">;

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

@@ -22,4 +22,4 @@ export type GridItemBaseProps = {
     className?: string;
 };
 export type GridItemProps<As extends ElementType = 'div'> = PolymorphicComponentPropsWithRef<GridItemBaseProps, As>;
-export declare const GridItem: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<GridItemBaseProps, "div">;
+export declare const GridItem: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<GridItemBaseProps, "div", "as">;

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

@@ -38,5 +38,5 @@ export declare const cnIconButton: import("@bem-react/classname").ClassNameForma
 /**
  * @deprecated Компонент устарел. Для замены используйте компонент IconButtonNext
  */
-export declare const IconButton: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<IconButtonBaseProps, "button">;
+export declare const IconButton: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<IconButtonBaseProps, "button", "as">;
 export {};

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

@@ -1,4 +1,4 @@
 import './IconButton.css';
 import type { IconButtonBaseProps } from './index';
 export declare const cnIconButton: import("@bem-react/classname").ClassNameFormatter;
-export declare const IconButton: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<IconButtonBaseProps, "button">;
+export declare const IconButton: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<IconButtonBaseProps, "button", "as">;

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

@@ -1,4 +1,4 @@
 import './InputOTP.css';
 import type { InputOTPBaseProps } from './types';
 export declare const cnInputOTP: import("@bem-react/classname").ClassNameFormatter;
-export declare const InputOTP: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<InputOTPBaseProps, "div">;
+export declare const InputOTP: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<InputOTPBaseProps, "div", "as">;

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

@@ -5,4 +5,4 @@ import { type TypographyBaseProps } from '../Typography';
 export declare const cnLink: import("@bem-react/classname").ClassNameFormatter;
 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">;
+export declare const Link: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<LinkBaseProps, "a", "as">;

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

@@ -1,4 +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">;
+export declare const List: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<ListBaseProps, "ul", "as">;

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

@@ -14,4 +14,4 @@ export type ListItemBaseProps = {
     align?: ListItemAlignVariant;
 };
 export type ListItemProps<As extends ElementType = typeof LIST_ITEM_DEFAULT_TAG> = PolymorphicComponentPropsWithoutRef<ListItemBaseProps, As>;
-export declare const ListItem: import("../../../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<ListItemBaseProps, "li">;
+export declare const ListItem: import("../../../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<ListItemBaseProps, "li", "as">;

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

@@ -18,4 +18,4 @@ export type ListItemButtonBaseProps = {
     '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">;
+export declare const ListItemButton: import("../../../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<ListItemButtonBaseProps, "div", "as">;

package/__inner__/cjs/components/ListCard/ListCardContext.d.ts

@@ -0,0 +1,11 @@
+import type { ListCardItemBackgroundColorScheme, ListCardItemBorderColorScheme, ListCardItemSizeVariant, ListCardItemVariant } from '../ListCardItem';
+export type ListCardContextValue = {
+    size: ListCardItemSizeVariant;
+    variant: ListCardItemVariant;
+    contentTrailingRatio: number;
+    backgroundColorScheme: ListCardItemBackgroundColorScheme;
+    borderColorScheme: ListCardItemBorderColorScheme | undefined;
+    interactive: boolean;
+};
+export declare const ListCardContext: import("react").Context<ListCardContextValue | undefined>;
+export declare const useListCardContext: () => ListCardContextValue | undefined;

package/__inner__/cjs/components/ListCard/ListCardContext.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useListCardContext = exports.ListCardContext = void 0;
+var react_1 = require("react");
+var environment_1 = require("../../constants/environment");
+exports.ListCardContext = (0, react_1.createContext)(undefined);
+var useListCardContext = function () { return (0, react_1.useContext)(exports.ListCardContext); };
+exports.useListCardContext = useListCardContext;
+// Именованный провайдер
+if (environment_1.isDev) {
+    exports.ListCardContext.displayName = 'ListCardContext';
+}

package/__inner__/cjs/components/ListCard/PageListCard/PageListCard.css

@@ -0,0 +1,6 @@
+.PageListCard {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  gap: var(--spacing-s);
+}

package/__inner__/cjs/components/ListCard/PageListCard/PageListCard.d.ts

@@ -0,0 +1,4 @@
+import './PageListCard.css';
+import type { PageListCardBaseProps } from './types';
+export declare const cnPageListCard: import("@bem-react/classname").ClassNameFormatter;
+export declare const PageListCard: import("../../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<PageListCardBaseProps, "div", "as">;

package/__inner__/cjs/components/ListCard/PageListCard/PageListCard.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageListCard = exports.cnPageListCard = void 0;
+var tslib_1 = require("tslib");
+require("./PageListCard.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 ListCardContext_1 = require("../ListCardContext");
+exports.cnPageListCard = (0, classname_1.cn)('PageListCard');
+exports.PageListCard = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (inProps, ref) {
+    var props = (0, useThemeProps_1.useThemeProps)({
+        props: inProps,
+        name: 'PageListCard',
+    });
+    var _a = props.as, Tag = _a === void 0 ? constants_1.LIST_CARD_DEFAULT_TAG : _a, children = props.children, borderColorScheme = props.borderColorScheme, _b = props.size, size = _b === void 0 ? constants_1.LIST_CARD_DEFAULT_SIZE : _b, _c = props.contentTrailingRatio, contentTrailingRatio = _c === void 0 ? constants_1.LIST_CARD_DEFAULT_CONTENT_TRAILING_RATIO : _c, _d = props.interactive, interactive = _d === void 0 ? constants_1.LIST_CARD_DEFAULT_INTERACTIVE : _d, _e = props.backgroundColorScheme, backgroundColorScheme = _e === void 0 ? constants_1.LIST_CARD_DEFAULT_BACKGROUND_COLOR_SCHEME : _e, className = props.className, other = tslib_1.__rest(props, ["as", "children", "borderColorScheme", "size", "contentTrailingRatio", "interactive", "backgroundColorScheme", "className"]);
+    return (react_1.default.createElement(ListCardContext_1.ListCardContext.Provider, { value: {
+            variant: 'onPage',
+            size: size,
+            borderColorScheme: borderColorScheme,
+            backgroundColorScheme: backgroundColorScheme,
+            interactive: interactive,
+            contentTrailingRatio: contentTrailingRatio,
+        } },
+        react_1.default.createElement(Tag, tslib_1.__assign({}, other, { ref: ref, className: (0, exports.cnPageListCard)({
+                size: size,
+            }, [className]) }), children)));
+});

package/__inner__/cjs/components/ListCard/PageListCard/constants.d.ts

@@ -0,0 +1 @@
+export declare const PAGE_LIST_CARD_DEFAULT_TAG = "div";

package/__inner__/cjs/components/ListCard/PageListCard/constants.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PAGE_LIST_CARD_DEFAULT_TAG = void 0;
+var constants_1 = require("../constants");
+exports.PAGE_LIST_CARD_DEFAULT_TAG = constants_1.LIST_CARD_DEFAULT_TAG;

package/__inner__/cjs/components/ListCard/PageListCard/index.d.ts

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

package/__inner__/cjs/components/ListCard/PageListCard/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./PageListCard"), exports);
+tslib_1.__exportStar(require("./types"), exports);

package/__inner__/cjs/components/ListCard/PageListCard/types.d.ts

@@ -0,0 +1,12 @@
+import type { ComponentRef, ElementType, ReactNode } from 'react';
+import type { PolymorphicComponentPropsWithoutRef } from '../../../utils/polymorphicComponentWithRef';
+import type { ListCardBaseProps } from '../types';
+import type { PAGE_LIST_CARD_DEFAULT_TAG } from './constants';
+export type PageListCardBaseProps = ListCardBaseProps & {
+    /** Контент */
+    children: ReactNode;
+    /** Идентификатор компонента для тестов */
+    'data-testid'?: string;
+};
+export type PageListCardProps<As extends ElementType = typeof PAGE_LIST_CARD_DEFAULT_TAG> = PolymorphicComponentPropsWithoutRef<PageListCardBaseProps, As>;
+export type PageListCardRef = ComponentRef<typeof PAGE_LIST_CARD_DEFAULT_TAG>;

package/__inner__/cjs/components/ListCard/PageListCard/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,9 @@
+export declare const LIST_CARD_DEFAULT_TAG = "div";
+export declare const LIST_CARD_DEFAULT_BACKGROUND_COLOR_SCHEME: {
+    base: "background-main";
+    hover: "background-main-hover";
+    pressed: "background-main-pressed";
+};
+export declare const LIST_CARD_DEFAULT_SIZE = "m";
+export declare const LIST_CARD_DEFAULT_CONTENT_TRAILING_RATIO = 0.85;
+export declare const LIST_CARD_DEFAULT_INTERACTIVE = true;

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

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LIST_CARD_DEFAULT_INTERACTIVE = exports.LIST_CARD_DEFAULT_CONTENT_TRAILING_RATIO = exports.LIST_CARD_DEFAULT_SIZE = exports.LIST_CARD_DEFAULT_BACKGROUND_COLOR_SCHEME = exports.LIST_CARD_DEFAULT_TAG = void 0;
+var constants_1 = require("../ListCardItem/constants");
+exports.LIST_CARD_DEFAULT_TAG = 'div';
+exports.LIST_CARD_DEFAULT_BACKGROUND_COLOR_SCHEME = constants_1.LIST_CARD_ITEM_DEFAULT_BACKGROUND_COLOR_SCHEME;
+exports.LIST_CARD_DEFAULT_SIZE = constants_1.LIST_CARD_ITEM_DEFAULT_SIZE;
+exports.LIST_CARD_DEFAULT_CONTENT_TRAILING_RATIO = constants_1.LIST_CARD_ITEM_DEFAULT_CONTENT_TRAILING_RATIO;
+exports.LIST_CARD_DEFAULT_INTERACTIVE = constants_1.LIST_CARD_ITEM_DEFAULT_INTERACTIVE;

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

@@ -0,0 +1,4 @@
+export * from './PageListCard';
+export * from './constants';
+export * from './ListCardContext';
+export * from './types';

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./PageListCard"), exports);
+tslib_1.__exportStar(require("./constants"), exports);
+tslib_1.__exportStar(require("./ListCardContext"), exports);
+tslib_1.__exportStar(require("./types"), exports);

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

@@ -0,0 +1,13 @@
+import type { ListCardItemBackgroundColorScheme, ListCardItemBorderColorScheme, ListCardItemSizeVariant } from '../ListCardItem';
+export type ListCardBaseProps = {
+    /** Размер */
+    size?: ListCardItemSizeVariant;
+    /** Соотношение контента к блоку "trailing" */
+    contentTrailingRatio?: number;
+    /** Цветовая схема заднего фона */
+    backgroundColorScheme?: ListCardItemBackgroundColorScheme;
+    /** Цветовая схема рамки */
+    borderColorScheme?: ListCardItemBorderColorScheme;
+    /** Если `true`, то компонент интерактивен */
+    interactive?: boolean;
+};

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

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/__inner__/cjs/components/ListCardItem/ListCardItem.css

@@ -0,0 +1,112 @@
+.ListCardItem {
+  --list-card-item-background-color: var(--list-card-item-background-color-base);
+  --list-card-item-border-color: var(--list-card-item-border-color-base);
+  display: flex;
+  gap: var(--list-card-item-gap);
+  background-color: var(--list-card-item-background-color);
+  transition: background-color var(--transition-default), border-color var(--transition-default);
+  padding-inline: var(--list-card-item-inline-padding);
+  padding-block: var(--list-card-item-inline-padding);
+}
+
+  .ListCardItem_interactive:not(.ListCardItem_ignoreHover):hover {
+    --list-card-item-background-color: var(--list-card-item-background-color-hover);
+    --list-card-item-border-color: var(--list-card-item-border-color-hover);
+  }
+
+  .ListCardItem_interactive:not(.ListCardItem_ignoreHover):active {
+    --list-card-item-background-color: var(--list-card-item-background-color-pressed);
+    --list-card-item-border-color: var(--list-card-item-border-color-pressed);
+  }
+
+  .ListCardItem_interactive {
+    cursor: pointer;
+  }
+
+  .ListCardItem_withBorder {
+    border: 1px solid;
+    border-color: var(--list-card-item-border-color);
+  }
+
+  .ListCardItem_variant_onPage.ListCardItem_size_xs {
+      --list-card-item-inline-padding: var(--spacing-xs);
+      --list-card-item-block-padding: var(--spacing-xs);
+    }
+
+  .ListCardItem_variant_onPage.ListCardItem_size_s {
+      --list-card-item-inline-padding: var(--spacing-s);
+      --list-card-item-block-padding: var(--spacing-s);
+    }
+
+  .ListCardItem_variant_onPage.ListCardItem_size_m {
+      --list-card-item-inline-padding: 20px;
+      --list-card-item-block-padding: 20px;
+    }
+
+  .ListCardItem_variant_onPage.ListCardItem_size_l {
+      --list-card-item-inline-padding: var(--spacing-m);
+      --list-card-item-block-padding: var(--spacing-m);
+    }
+
+  .ListCardItem_variant_list.ListCardItem_size_xs {
+      --list-card-item-inline-padding: var(--spacing-2xs);
+      --list-card-item-block-padding: var(--spacing-3xs);
+    }
+
+  .ListCardItem_variant_list.ListCardItem_size_s {
+      --list-card-item-inline-padding: var(--spacing-xs);
+      --list-card-item-block-padding: var(--spacing-2xs);
+    }
+
+  .ListCardItem_variant_list.ListCardItem_size_m {
+      --list-card-item-inline-padding: var(--spacing-xs);
+      --list-card-item-block-padding: var(--spacing-xs);
+    }
+
+  .ListCardItem_variant_list.ListCardItem_size_l {
+      --list-card-item-inline-padding: var(--spacing-s);
+      --list-card-item-block-padding: var(--spacing-s);
+    }
+
+  .ListCardItem_size_xs {
+    --list-card-item-gap: var(--spacing-2xs);
+  }
+
+  .ListCardItem_size_s {
+    --list-card-item-gap: var(--spacing-xs);
+  }
+
+  .ListCardItem_size_m {
+    --list-card-item-gap: var(--spacing-xs);
+  }
+
+  .ListCardItem_size_l {
+    --list-card-item-gap: var(--spacing-s);
+  }
+
+  .ListCardItem-Leading {
+    flex-shrink: 0;
+  }
+
+  .ListCardItem-Main {
+    display: flex;
+    flex: 1;
+    gap: var(--list-card-item-gap);
+    overflow: hidden;
+  }
+
+  .ListCardItem-Center {
+    flex: var(--list-card-item-center-grow) 0 0;
+    overflow: hidden;
+  }
+
+  .ListCardItem-Trailing {
+    display: flex;
+    flex: var(--list-card-item-trailing-grow) 0 0;
+    justify-content: flex-end;
+    overflow: hidden;
+  }
+
+  .ListCardItem-Controls {
+    flex-shrink: 0;
+  }

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

@@ -0,0 +1,11 @@
+import './components/ListCardItemInfoCarcass/ListCardItemInfoCarcass.css';
+import './components/ListCardItemCaption/ListCardItemCaption.css';
+import './components/ListCardItemItemCarcass/ListCardItemItemCarcass.css';
+import './modules/ListCardItemTrailingItem/ListCardItemTrailingItem.css';
+import './modules/ListCardItemTrailingButton/ListCardItemTrailingButton.css';
+import './modules/ListCardItemCenterButton/ListCardItemCenterButton.css';
+import './modules/ListCardItemLeadingIcon/ListCardItemLeadingIcon.css';
+import './modules/ListCardItemLeadingItem/ListCardItemLeadingItem.css';
+import './ListCardItem.css';
+import type { ListCardItemBaseProps } from './types';
+export declare const ListCardItem: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<ListCardItemBaseProps, "div", "as">;

package/__inner__/cjs/components/ListCardItem/ListCardItem.js

@@ -0,0 +1,89 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ListCardItem = void 0;
+var tslib_1 = require("tslib");
+require("./components/ListCardItemInfoCarcass/ListCardItemInfoCarcass.css");
+require("./components/ListCardItemCaption/ListCardItemCaption.css");
+require("./components/ListCardItemItemCarcass/ListCardItemItemCarcass.css");
+require("./modules/ListCardItemTrailingItem/ListCardItemTrailingItem.css");
+require("./modules/ListCardItemTrailingButton/ListCardItemTrailingButton.css");
+require("./modules/ListCardItemCenterButton/ListCardItemCenterButton.css");
+require("./modules/ListCardItemLeadingIcon/ListCardItemLeadingIcon.css");
+require("./modules/ListCardItemLeadingItem/ListCardItemLeadingItem.css");
+require("./ListCardItem.css");
+var react_1 = tslib_1.__importDefault(require("react"));
+var useThemeProps_1 = require("../../hooks/useThemeProps");
+var css_1 = require("../../utils/css");
+var polymorphicComponentWithRef_1 = require("../../utils/polymorphicComponentWithRef");
+var ListCardContext_1 = require("../ListCard/ListCardContext");
+var Paper_1 = require("../Paper");
+var Stack_1 = require("../Stack");
+var classNames_1 = require("./classNames");
+var constants_1 = require("./constants");
+var hooks_1 = require("./hooks");
+var ListCardItemContext_1 = require("./ListCardItemContext");
+exports.ListCardItem = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (inProps, ref) {
+    var _a, _b;
+    var props = (0, useThemeProps_1.useThemeProps)({
+        props: inProps,
+        name: 'ListCardItem',
+    });
+    var _c = props.size, sizeProp = _c === void 0 ? constants_1.LIST_CARD_ITEM_DEFAULT_SIZE : _c, _d = props.variant, variantProp = _d === void 0 ? constants_1.LIST_CARD_ITEM_DEFAULT_VARIANT : _d, _e = props.backgroundColorScheme, backgroundColorSchemeProp = _e === void 0 ? constants_1.LIST_CARD_ITEM_DEFAULT_BACKGROUND_COLOR_SCHEME : _e, borderColorSchemeProp = props.borderColorScheme, _f = props.contentTrailingRatio, contentTrailingRatioProp = _f === void 0 ? constants_1.LIST_CARD_ITEM_DEFAULT_CONTENT_TRAILING_RATIO : _f, children = props.children, _g = props.as, as = _g === void 0 ? constants_1.LIST_CARD_ITEM_DEFAULT_TAG : _g, _h = props.interactive, interactiveProp = _h === void 0 ? constants_1.LIST_CARD_ITEM_DEFAULT_INTERACTIVE : _h, className = props.className, style = props.style, trailing = props.trailing, control = props.control, leading = props.leading, other = tslib_1.__rest(props, ["size", "variant", "backgroundColorScheme", "borderColorScheme", "contentTrailingRatio", "children", "as", "interactive", "className", "style", "trailing", "control", "leading"]);
+    var hoverControl = (0, hooks_1.useListCardItemHover)();
+    var listCardContext = (0, ListCardContext_1.useListCardContext)();
+    var size = sizeProp;
+    var variant = variantProp;
+    var contentTrailingRatio = contentTrailingRatioProp;
+    var backgroundColorScheme = backgroundColorSchemeProp;
+    var borderColorScheme = borderColorSchemeProp;
+    var interactive = interactiveProp;
+    if (listCardContext) {
+        if (inProps.size === undefined && listCardContext.size) {
+            size = listCardContext.size;
+        }
+        if (inProps.variant === undefined && listCardContext.variant) {
+            variant = listCardContext.variant;
+        }
+        if (inProps.contentTrailingRatio === undefined &&
+            listCardContext.contentTrailingRatio) {
+            contentTrailingRatio = listCardContext.contentTrailingRatio;
+        }
+        if (inProps.backgroundColorScheme === undefined &&
+            listCardContext.backgroundColorScheme) {
+            backgroundColorScheme = listCardContext.backgroundColorScheme;
+        }
+        if (inProps.borderColorScheme === undefined &&
+            listCardContext.borderColorScheme) {
+            borderColorScheme = listCardContext.borderColorScheme;
+        }
+        if (inProps.interactive === undefined &&
+            listCardContext.interactive !== undefined) {
+            interactive = listCardContext.interactive;
+        }
+    }
+    var backgroundColorSchemeVariables = (0, hooks_1.useListCardItemColorScheme)(backgroundColorScheme, 'background');
+    var borderColorSchemeVariables = (0, hooks_1.useListCardItemColorScheme)(borderColorScheme, 'border');
+    var hasBorder = !!borderColorSchemeVariables;
+    var ratio = (0, hooks_1.useListCardItemRatio)(contentTrailingRatio);
+    return (react_1.default.createElement(ListCardItemContext_1.ListCardItemContext.Provider, { value: {
+            size: size,
+            variant: variant,
+            hoverControl: hoverControl,
+        } },
+        react_1.default.createElement(Paper_1.Paper, tslib_1.__assign({}, other, { ref: ref, as: as, className: (0, classNames_1.cnListCardItem)({
+                withBorder: hasBorder,
+                size: size,
+                variant: variant,
+                ignoreHover: hoverControl.isHoverChildren,
+                interactive: interactive,
+            }, [className]), radius: constants_1.LIST_CARD_ITEM_SIZE_TO_PAPER_RADIUS[size], style: tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, style), backgroundColorSchemeVariables), borderColorSchemeVariables) }),
+            leading && react_1.default.createElement("div", { className: (0, classNames_1.cnListCardItem)('Leading') }, leading),
+            react_1.default.createElement(Stack_1.Stack, { className: (0, classNames_1.cnListCardItem)('Main') },
+                react_1.default.createElement("div", { className: (0, classNames_1.cnListCardItem)('Center'), style: (0, css_1.generateCSSVariables)((_a = {},
+                        _a[constants_1.LIST_CARD_ITEM_CSS_VARIABLES.CENTER_GROW] = ratio.content,
+                        _a)) }, children),
+                trailing && (react_1.default.createElement("div", { className: (0, classNames_1.cnListCardItem)('Trailing'), style: (0, css_1.generateCSSVariables)((_b = {},
+                        _b[constants_1.LIST_CARD_ITEM_CSS_VARIABLES.TRAILING_GROW] = ratio.trailing,
+                        _b)) }, trailing))),
+            control && react_1.default.createElement("div", { className: (0, classNames_1.cnListCardItem)('Controls') }, control))));
+});

package/__inner__/cjs/components/ListCardItem/ListCardItemContext.d.ts

@@ -0,0 +1,10 @@
+import type { ListCardItemSizeVariant, ListCardItemVariant } from './entities';
+import type { ListCardItemHoverControl } from './hooks/hover/types';
+export type ListCardItemContextValue = {
+    size: ListCardItemSizeVariant;
+    variant: ListCardItemVariant;
+    hoverControl: ListCardItemHoverControl;
+};
+export declare const ListCardItemContextDefaultValue: ListCardItemContextValue;
+export declare const ListCardItemContext: import("react").Context<ListCardItemContextValue>;
+export declare const useListCardItemContext: () => ListCardItemContextValue;

package/__inner__/cjs/components/ListCardItem/ListCardItemContext.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useListCardItemContext = exports.ListCardItemContext = exports.ListCardItemContextDefaultValue = void 0;
+var react_1 = require("react");
+var environment_1 = require("../../constants/environment");
+var constants_1 = require("./constants");
+exports.ListCardItemContextDefaultValue = {
+    size: constants_1.LIST_CARD_ITEM_DEFAULT_SIZE,
+    variant: constants_1.LIST_CARD_ITEM_DEFAULT_VARIANT,
+    hoverControl: { isHoverChildren: false, setIsHoverChildren: function () { } },
+};
+exports.ListCardItemContext = (0, react_1.createContext)(exports.ListCardItemContextDefaultValue);
+var useListCardItemContext = function () { return (0, react_1.useContext)(exports.ListCardItemContext); };
+exports.useListCardItemContext = useListCardItemContext;
+// Именованный провайдер
+if (environment_1.isDev) {
+    exports.ListCardItemContext.displayName = 'ListCardItemContext';
+}

package/__inner__/cjs/components/ListCardItem/__tests__/checkInteractiveElement.d.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react';
+export declare const checkInteractiveElement: ({ component, getComponent, isActive, }: {
+    component: ReactNode;
+    getComponent: () => HTMLElement;
+    isActive?: boolean;
+}) => void;