@ozen-ui/kit 0.70.0 → 0.71.0

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

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

package/__inner__/esm/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__/esm/components/ListCard/types.js

@@ -0,0 +1 @@
+export {};

package/__inner__/esm/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__/esm/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__/esm/components/ListCardItem/ListCardItem.js

@@ -0,0 +1,86 @@
+import { __assign, __rest } from "tslib";
+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 React from 'react';
+import { useThemeProps } from '../../hooks/useThemeProps';
+import { generateCSSVariables } from '../../utils/css';
+import { polymorphicComponentWithRef } from '../../utils/polymorphicComponentWithRef';
+import { useListCardContext } from '../ListCard/ListCardContext';
+import { Paper } from '../Paper';
+import { Stack } from '../Stack';
+import { cnListCardItem } from './classNames';
+import { LIST_CARD_ITEM_CSS_VARIABLES, LIST_CARD_ITEM_DEFAULT_BACKGROUND_COLOR_SCHEME, LIST_CARD_ITEM_DEFAULT_CONTENT_TRAILING_RATIO, LIST_CARD_ITEM_DEFAULT_INTERACTIVE, LIST_CARD_ITEM_DEFAULT_SIZE, LIST_CARD_ITEM_DEFAULT_TAG, LIST_CARD_ITEM_DEFAULT_VARIANT, LIST_CARD_ITEM_SIZE_TO_PAPER_RADIUS, } from './constants';
+import { useListCardItemColorScheme, useListCardItemHover, useListCardItemRatio, } from './hooks';
+import { ListCardItemContext } from './ListCardItemContext';
+export var ListCardItem = polymorphicComponentWithRef(function (inProps, ref) {
+    var _a, _b;
+    var props = useThemeProps({
+        props: inProps,
+        name: 'ListCardItem',
+    });
+    var _c = props.size, sizeProp = _c === void 0 ? LIST_CARD_ITEM_DEFAULT_SIZE : _c, _d = props.variant, variantProp = _d === void 0 ? LIST_CARD_ITEM_DEFAULT_VARIANT : _d, _e = props.backgroundColorScheme, backgroundColorSchemeProp = _e === void 0 ? LIST_CARD_ITEM_DEFAULT_BACKGROUND_COLOR_SCHEME : _e, borderColorSchemeProp = props.borderColorScheme, _f = props.contentTrailingRatio, contentTrailingRatioProp = _f === void 0 ? LIST_CARD_ITEM_DEFAULT_CONTENT_TRAILING_RATIO : _f, children = props.children, _g = props.as, as = _g === void 0 ? LIST_CARD_ITEM_DEFAULT_TAG : _g, _h = props.interactive, interactiveProp = _h === void 0 ? LIST_CARD_ITEM_DEFAULT_INTERACTIVE : _h, className = props.className, style = props.style, trailing = props.trailing, control = props.control, leading = props.leading, other = __rest(props, ["size", "variant", "backgroundColorScheme", "borderColorScheme", "contentTrailingRatio", "children", "as", "interactive", "className", "style", "trailing", "control", "leading"]);
+    var hoverControl = useListCardItemHover();
+    var listCardContext = 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 = useListCardItemColorScheme(backgroundColorScheme, 'background');
+    var borderColorSchemeVariables = useListCardItemColorScheme(borderColorScheme, 'border');
+    var hasBorder = !!borderColorSchemeVariables;
+    var ratio = useListCardItemRatio(contentTrailingRatio);
+    return (React.createElement(ListCardItemContext.Provider, { value: {
+            size: size,
+            variant: variant,
+            hoverControl: hoverControl,
+        } },
+        React.createElement(Paper, __assign({}, other, { ref: ref, as: as, className: cnListCardItem({
+                withBorder: hasBorder,
+                size: size,
+                variant: variant,
+                ignoreHover: hoverControl.isHoverChildren,
+                interactive: interactive,
+            }, [className]), radius: LIST_CARD_ITEM_SIZE_TO_PAPER_RADIUS[size], style: __assign(__assign(__assign({}, style), backgroundColorSchemeVariables), borderColorSchemeVariables) }),
+            leading && React.createElement("div", { className: cnListCardItem('Leading') }, leading),
+            React.createElement(Stack, { className: cnListCardItem('Main') },
+                React.createElement("div", { className: cnListCardItem('Center'), style: generateCSSVariables((_a = {},
+                        _a[LIST_CARD_ITEM_CSS_VARIABLES.CENTER_GROW] = ratio.content,
+                        _a)) }, children),
+                trailing && (React.createElement("div", { className: cnListCardItem('Trailing'), style: generateCSSVariables((_b = {},
+                        _b[LIST_CARD_ITEM_CSS_VARIABLES.TRAILING_GROW] = ratio.trailing,
+                        _b)) }, trailing))),
+            control && React.createElement("div", { className: cnListCardItem('Controls') }, control))));
+});

package/__inner__/esm/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__/esm/components/ListCardItem/ListCardItemContext.js

@@ -0,0 +1,14 @@
+import { useContext, createContext } from 'react';
+import { isDev } from '../../constants/environment';
+import { LIST_CARD_ITEM_DEFAULT_SIZE, LIST_CARD_ITEM_DEFAULT_VARIANT, } from './constants';
+export var ListCardItemContextDefaultValue = {
+    size: LIST_CARD_ITEM_DEFAULT_SIZE,
+    variant: LIST_CARD_ITEM_DEFAULT_VARIANT,
+    hoverControl: { isHoverChildren: false, setIsHoverChildren: function () { } },
+};
+export var ListCardItemContext = createContext(ListCardItemContextDefaultValue);
+export var useListCardItemContext = function () { return useContext(ListCardItemContext); };
+// Именованный провайдер
+if (isDev) {
+    ListCardItemContext.displayName = 'ListCardItemContext';
+}

package/__inner__/esm/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;

package/__inner__/esm/components/ListCardItem/__tests__/checkInteractiveElement.js

@@ -0,0 +1,40 @@
+import { __awaiter, __generator } from "tslib";
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+import { expect, it } from 'vitest';
+import { render } from '../../../utils/test-utils';
+import { ListCardItem } from '../ListCardItem';
+import { useListCardItemContext } from '../ListCardItemContext';
+export var checkInteractiveElement = function (_a) {
+    var component = _a.component, getComponent = _a.getComponent, _b = _a.isActive, isActive = _b === void 0 ? true : _b;
+    it('отключает обработку hover для root-компонента', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var hoverControl, Component;
+        var _a, _b, _c;
+        return __generator(this, function (_d) {
+            switch (_d.label) {
+                case 0:
+                    hoverControl = {
+                        current: null,
+                    };
+                    Component = function () {
+                        var context = useListCardItemContext();
+                        hoverControl.current = context.hoverControl;
+                        return null;
+                    };
+                    render(React.createElement(ListCardItem, null,
+                        React.createElement(Component, null),
+                        component));
+                    expect((_a = hoverControl.current) === null || _a === void 0 ? void 0 : _a.isHoverChildren).toBe(false);
+                    return [4 /*yield*/, userEvent.hover(getComponent())];
+                case 1:
+                    _d.sent();
+                    expect((_b = hoverControl.current) === null || _b === void 0 ? void 0 : _b.isHoverChildren).toBe(isActive);
+                    return [4 /*yield*/, userEvent.unhover(getComponent())];
+                case 2:
+                    _d.sent();
+                    expect((_c = hoverControl.current) === null || _c === void 0 ? void 0 : _c.isHoverChildren).toBe(false);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+};

package/__inner__/esm/components/ListCardItem/__tests__/checkItemColors.d.ts

@@ -0,0 +1,6 @@
+import type { ListCardItemColorScheme } from '../entities';
+export declare const checkItemColors: ({ element, type, colorScheme, }: {
+    element: HTMLElement;
+    type: "border" | "background";
+    colorScheme: ListCardItemColorScheme;
+}) => void;

package/__inner__/esm/components/ListCardItem/__tests__/checkItemColors.js

@@ -0,0 +1,11 @@
+import { expect } from 'vitest';
+import { generateCSSVariableName } from '../../../utils/css';
+import { themeColorTokenOzenDark } from '../../OzenProvider';
+export var checkItemColors = function (_a) {
+    var element = _a.element, type = _a.type, colorScheme = _a.colorScheme;
+    var colorToken = themeColorTokenOzenDark;
+    var computedStyles = getComputedStyle(element);
+    expect(computedStyles.getPropertyValue(generateCSSVariableName("list-card-item-".concat(type, "-color-base")))).toBe("var(".concat(colorToken.toCSSProperty(colorScheme.base), ")"));
+    expect(computedStyles.getPropertyValue(generateCSSVariableName("list-card-item-".concat(type, "-color-hover")))).toBe("var(".concat(colorToken.toCSSProperty(colorScheme.hover), ")"));
+    expect(computedStyles.getPropertyValue(generateCSSVariableName("list-card-item-".concat(type, "-color-pressed")))).toBe("var(".concat(colorToken.toCSSProperty(colorScheme.pressed), ")"));
+};

package/__inner__/esm/components/ListCardItem/__tests__/checkItemRatio.d.ts

@@ -0,0 +1,4 @@
+export declare const checkItemRatio: ({ element, ratio, }: {
+    element: HTMLElement;
+    ratio: number;
+}) => void;

package/__inner__/esm/components/ListCardItem/__tests__/checkItemRatio.js

@@ -0,0 +1,15 @@
+import { expect } from 'vitest';
+import { generateCSSVariableName } from '../../../utils/css';
+import { cnListCardItem } from '../classNames';
+import { LIST_CARD_ITEM_CSS_VARIABLES } from '../constants';
+export var checkItemRatio = function (_a) {
+    var element = _a.element, ratio = _a.ratio;
+    var center = element.querySelector(".".concat(cnListCardItem('Center')));
+    var trailing = element.querySelector(".".concat(cnListCardItem('Trailing')));
+    var centerStyles = getComputedStyle(center);
+    var trailingStyles = getComputedStyle(trailing);
+    var centerGrow = centerStyles.getPropertyValue(generateCSSVariableName(LIST_CARD_ITEM_CSS_VARIABLES.CENTER_GROW));
+    var trailingGrow = trailingStyles.getPropertyValue(generateCSSVariableName(LIST_CARD_ITEM_CSS_VARIABLES.TRAILING_GROW));
+    expect(Number(centerGrow)).toBe(ratio * 100);
+    expect(Number(trailingGrow)).toBe(100 - ratio * 100);
+};

package/__inner__/esm/components/ListCardItem/__tests__/index.d.ts

@@ -0,0 +1,3 @@
+export * from './checkInteractiveElement';
+export * from './checkItemColors';
+export * from './checkItemRatio';

package/__inner__/esm/components/ListCardItem/__tests__/index.js

@@ -0,0 +1,3 @@
+export * from './checkInteractiveElement';
+export * from './checkItemColors';
+export * from './checkItemRatio';

package/__inner__/esm/components/ListCardItem/classNames.d.ts

@@ -0,0 +1 @@
+export declare const cnListCardItem: import("@bem-react/classname").ClassNameFormatter;

package/__inner__/esm/components/ListCardItem/classNames.js

@@ -0,0 +1,2 @@
+import { cn } from '../../utils/classname';
+export var cnListCardItem = cn('ListCardItem');

package/__inner__/esm/components/ListCardItem/components/ListCardItemCaption/ListCardItemCaption.css

@@ -0,0 +1,13 @@
+/* stylelint-disable */
+.ListCardItemCaption {
+  font: var(--typography-text-xs-font);
+  letter-spacing: var(--typography-text-xs-letter_spacing, 0);
+  text-transform: var(--typography-text-xs-text_transform, none);
+  color: var(--color-content-tertiary);
+}
+.ListCardItemCaption_size_xs, .ListCardItemCaption_size_s {
+    padding-block: var(--spacing-4xs);
+  }
+.ListCardItemCaption_size_m, .ListCardItemCaption_size_l {
+    padding-block: var(--spacing-3xs);
+  }

package/__inner__/esm/components/ListCardItem/components/ListCardItemCaption/ListCardItemCaption.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { ListCardItemCaptionProps } from './types';
+export declare const cnListCardItemCaption: import("@bem-react/classname").ClassNameFormatter;
+export declare const ListCardItemCaption: React.ForwardRefExoticComponent<Omit<ListCardItemCaptionProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/__inner__/esm/components/ListCardItem/components/ListCardItemCaption/ListCardItemCaption.js

@@ -0,0 +1,13 @@
+import { __assign, __rest } from "tslib";
+import React, { forwardRef } from 'react';
+import { cn } from '../../../../utils/classname';
+import { useListCardItemContext } from '../../ListCardItemContext';
+export var cnListCardItemCaption = cn('ListCardItemCaption');
+export var ListCardItemCaption = forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, other = __rest(_a, ["children", "className"]);
+    var size = useListCardItemContext().size;
+    return (React.createElement("div", __assign({}, other, { ref: ref, className: cnListCardItemCaption({
+            size: size,
+        }, [className]) }), children));
+});
+ListCardItemCaption.displayName = 'ListCardItemCaption';

package/__inner__/esm/components/ListCardItem/components/ListCardItemCaption/index.d.ts

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

package/__inner__/esm/components/ListCardItem/components/ListCardItemCaption/index.js

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

package/__inner__/esm/components/ListCardItem/components/ListCardItemCaption/types.d.ts

@@ -0,0 +1,7 @@
+import type { ComponentRef } from 'react';
+import type { ExtendableComponentPropsWithRef } from '../../../../types/ExtendableComponentPropsWithRef';
+export type ListCardItemCaptionRef = ComponentRef<'div'>;
+export type ListCardItemCaptionProps = ExtendableComponentPropsWithRef<{
+    /** Идентификатор компонента для тестов */
+    'data-testid'?: string;
+}, 'div'>;

package/__inner__/esm/components/ListCardItem/components/ListCardItemCaption/types.js

@@ -0,0 +1 @@
+export {};

package/__inner__/esm/components/ListCardItem/components/ListCardItemInfoCarcass/ListCardItemInfoCarcass.css

@@ -0,0 +1,106 @@
+/* stylelint-disable */
+.ListCardItemInfoCarcass {
+  display: flex;
+  overflow: hidden;
+}
+.ListCardItemInfoCarcass-Label {
+    color: var(--color-content-secondary);
+  }
+.ListCardItemInfoCarcass-Content {
+    color: var(--color-content-primary);
+  }
+.ListCardItemInfoCarcass-Hint {
+    color: var(--color-content-secondary);
+  }
+.ListCardItemInfoCarcass-Bottom {
+    margin-block-start: var(--spacing-2xs);
+  }
+.ListCardItemInfoCarcass-HintBefore {
+    block-size: 16px;
+    margin-inline-end: var(--spacing-3xs);
+  }
+.ListCardItemInfoCarcass_onlyOneElement {
+    padding-block: var(--list-card-item-info-carcass-one-item-padding);
+  }
+.ListCardItemInfoCarcass_textOverflow_ellipsis .ListCardItemInfoCarcass-Label,
+      .ListCardItemInfoCarcass_textOverflow_ellipsis .ListCardItemInfoCarcass-Content,
+      .ListCardItemInfoCarcass_textOverflow_ellipsis .ListCardItemInfoCarcass-Hint,
+      .ListCardItemInfoCarcass_textOverflow_ellipsis .ListCardItemInfoCarcass-Bottom,
+      .ListCardItemInfoCarcass_textOverflow_ellipsis .ListCardItemCaption,
+      .ListCardItemInfoCarcass_textOverflow_ellipsis .ListCardItemInfoCarcass-HintBefore {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+.ListCardItemInfoCarcass_size_xs {
+    --list-card-item-info-carcass-one-item-padding: 10px;
+  }
+.ListCardItemInfoCarcass_size_xs .ListCardItemInfoCarcass-Label,
+    .ListCardItemInfoCarcass_size_xs .ListCardItemInfoCarcass-Hint {
+      font: var(--typography-text-xs-font);
+      letter-spacing: var(--typography-text-xs-letter_spacing, 0);
+      text-transform: var(--typography-text-xs-text_transform, none);
+      margin-block: var(--spacing-4xs);
+    }
+.ListCardItemInfoCarcass_size_xs .ListCardItemInfoCarcass-Content {
+      font: var(--typography-text-xs_1-font);
+      letter-spacing: var(--typography-text-xs_1-letter_spacing, 0);
+      text-transform: var(--typography-text-xs_1-text_transform, none);
+      margin-block: var(--spacing-3xs);
+    }
+.ListCardItemInfoCarcass_size_s {
+    --list-card-item-info-carcass-one-item-padding: 10px;
+  }
+.ListCardItemInfoCarcass_size_s .ListCardItemInfoCarcass-Label,
+    .ListCardItemInfoCarcass_size_s .ListCardItemInfoCarcass-Hint {
+      font: var(--typography-text-xs-font);
+      letter-spacing: var(--typography-text-xs-letter_spacing, 0);
+      text-transform: var(--typography-text-xs-text_transform, none);
+      margin-block: var(--spacing-4xs);
+    }
+.ListCardItemInfoCarcass_size_s .ListCardItemInfoCarcass-Content {
+      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);
+      margin-block: var(--spacing-4xs);
+    }
+.ListCardItemInfoCarcass_size_m {
+    --list-card-item-info-carcass-one-item-padding: var(--spacing-xs);
+  }
+.ListCardItemInfoCarcass_size_m .ListCardItemInfoCarcass-Label {
+      font: var(--typography-text-xs-font);
+      letter-spacing: var(--typography-text-xs-letter_spacing, 0);
+      text-transform: var(--typography-text-xs-text_transform, none);
+      margin-block: var(--spacing-3xs);
+    }
+.ListCardItemInfoCarcass_size_m .ListCardItemInfoCarcass-Hint {
+      font: var(--typography-text-s-font);
+      letter-spacing: var(--typography-text-s-letter_spacing, 0);
+      text-transform: var(--typography-text-s-text_transform, none);
+      margin-block: var(--spacing-4xs);
+    }
+.ListCardItemInfoCarcass_size_m .ListCardItemInfoCarcass-Content {
+      font: var(--typography-text-m_1-font);
+      letter-spacing: var(--typography-text-m_1-letter_spacing, 0);
+      text-transform: var(--typography-text-m_1-text_transform, none);
+    }
+.ListCardItemInfoCarcass_size_l {
+    --list-card-item-info-carcass-one-item-padding: var(--spacing-xs);
+  }
+.ListCardItemInfoCarcass_size_l .ListCardItemInfoCarcass-Label {
+      font: var(--typography-text-xs-font);
+      letter-spacing: var(--typography-text-xs-letter_spacing, 0);
+      text-transform: var(--typography-text-xs-text_transform, none);
+      margin-block: var(--spacing-3xs);
+    }
+.ListCardItemInfoCarcass_size_l .ListCardItemInfoCarcass-Hint {
+      font: var(--typography-text-s-font);
+      letter-spacing: var(--typography-text-s-letter_spacing, 0);
+      text-transform: var(--typography-text-s-text_transform, none);
+      margin-block: var(--spacing-4xs);
+    }
+.ListCardItemInfoCarcass_size_l .ListCardItemInfoCarcass-Content {
+      font: var(--typography-text-l_1-font);
+      letter-spacing: var(--typography-text-l_1-letter_spacing, 0);
+      text-transform: var(--typography-text-l_1-text_transform, none);
+    }

package/__inner__/esm/components/ListCardItem/components/ListCardItemInfoCarcass/ListCardItemInfoCarcass.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export declare const cnListCardItemInfoCarcass: import("@bem-react/classname").ClassNameFormatter;
+export declare const ListCardItemInfoCarcass: React.ForwardRefExoticComponent<{
+    children: React.ReactNode;
+    label?: React.ReactNode;
+    hint?: React.ReactNode;
+    hintBefore?: React.ReactNode;
+    caption?: React.ReactNode;
+    bottom?: React.ReactNode;
+    textOverflow?: import("./entities").ListCardItemInfoCarcassTextOverflow;
+} & Omit<import("../../../Stack").StackProps, "children" | "ref" | "as"> & React.RefAttributes<HTMLDivElement>>;

package/__inner__/esm/components/ListCardItem/components/ListCardItemInfoCarcass/ListCardItemInfoCarcass.js

@@ -0,0 +1,34 @@
+import { __assign, __rest } from "tslib";
+import React, { forwardRef } from 'react';
+import { cn } from '../../../../utils/classname';
+import { Stack } from '../../../Stack';
+import { useListCardItemContext } from '../../ListCardItemContext';
+import { ListCardItemCaption } from '../ListCardItemCaption';
+import { LIST_CARD_ITEM_INFO_CARCASS_DEFAULT_TEXT_OVERFLOW } from './constants';
+export var cnListCardItemInfoCarcass = cn('ListCardItemInfoCarcass');
+export var ListCardItemInfoCarcass = forwardRef(function (_a, ref) {
+    var children = _a.children, label = _a.label, caption = _a.caption, hint = _a.hint, bottom = _a.bottom, className = _a.className, _b = _a.direction, direction = _b === void 0 ? 'column' : _b, hintBefore = _a.hintBefore, _c = _a.textOverflow, textOverflow = _c === void 0 ? LIST_CARD_ITEM_INFO_CARCASS_DEFAULT_TEXT_OVERFLOW : _c, other = __rest(_a, ["children", "label", "caption", "hint", "bottom", "className", "direction", "hintBefore", "textOverflow"]);
+    var size = useListCardItemContext().size;
+    var existElements = [
+        !!children,
+        !!label,
+        !!hint,
+        !!hintBefore,
+        !!caption,
+        !!bottom,
+    ];
+    var isOnlyOneElement = existElements.filter(function (isExist) { return isExist; }).length <= 1;
+    return (React.createElement(Stack, __assign({}, other, { ref: ref, className: cnListCardItemInfoCarcass({
+            size: size,
+            onlyOneElement: isOnlyOneElement,
+            textOverflow: textOverflow,
+        }, [className]), direction: direction }),
+        label && (React.createElement("div", { className: cnListCardItemInfoCarcass('Label') }, label)),
+        children && (React.createElement("div", { className: cnListCardItemInfoCarcass('Content') }, children)),
+        !!(hint || hintBefore) && (React.createElement(Stack, { className: cnListCardItemInfoCarcass('HintBlock'), align: "center", gap: "xs" },
+            hintBefore && (React.createElement("div", { className: cnListCardItemInfoCarcass('HintBefore') }, hintBefore)),
+            hint && (React.createElement("div", { className: cnListCardItemInfoCarcass('Hint') }, hint)))),
+        caption && React.createElement(ListCardItemCaption, null, caption),
+        bottom && (React.createElement("div", { className: cnListCardItemInfoCarcass('Bottom') }, bottom))));
+});
+ListCardItemInfoCarcass.displayName = 'ListCardItemInfoCarcass';

package/__inner__/esm/components/ListCardItem/components/ListCardItemInfoCarcass/constants.d.ts

@@ -0,0 +1 @@
+export declare const LIST_CARD_ITEM_INFO_CARCASS_DEFAULT_TEXT_OVERFLOW = "clip";

package/__inner__/esm/components/ListCardItem/components/ListCardItemInfoCarcass/constants.js

@@ -0,0 +1 @@
+export var LIST_CARD_ITEM_INFO_CARCASS_DEFAULT_TEXT_OVERFLOW = 'clip';

package/__inner__/esm/components/ListCardItem/components/ListCardItemInfoCarcass/entities/index.d.ts

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

package/__inner__/esm/components/ListCardItem/components/ListCardItemInfoCarcass/entities/index.js

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

package/__inner__/esm/components/ListCardItem/components/ListCardItemInfoCarcass/entities/text-overflow.d.ts

@@ -0,0 +1,2 @@
+export declare const listCardItemInfoCarcassTextOverflow: readonly ["ellipsis", "clip"];
+export type ListCardItemInfoCarcassTextOverflow = (typeof listCardItemInfoCarcassTextOverflow)[number];

package/__inner__/esm/components/ListCardItem/components/ListCardItemInfoCarcass/entities/text-overflow.js

@@ -0,0 +1,4 @@
+export var listCardItemInfoCarcassTextOverflow = [
+    'ellipsis',
+    'clip',
+];

package/__inner__/esm/components/ListCardItem/components/ListCardItemInfoCarcass/index.d.ts

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

package/__inner__/esm/components/ListCardItem/components/ListCardItemInfoCarcass/index.js

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

package/__inner__/esm/components/ListCardItem/components/ListCardItemInfoCarcass/types.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+import type { StackProps, StackRef } from '../../../Stack';
+import type { ListCardItemInfoCarcassTextOverflow } from './entities';
+export type ListCardItemInfoCarcassRef = StackRef;
+export type ListCardItemInfoCarcassProps = {
+    children: ReactNode;
+    label?: ReactNode;
+    hint?: ReactNode;
+    hintBefore?: ReactNode;
+    caption?: ReactNode;
+    bottom?: ReactNode;
+    textOverflow?: ListCardItemInfoCarcassTextOverflow;
+} & Omit<StackProps, 'as' | 'ref' | 'children'>;

package/__inner__/esm/components/ListCardItem/components/ListCardItemInfoCarcass/types.js

@@ -0,0 +1 @@
+export {};