@cloud-ru/ds-list 1.0.0

package/dist/cjs/helperComponents/MobileDroplist/utils.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.nextListOption = nextListOption;
+exports.buildLevelItems = buildLevelItems;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const system_1 = require("@cloud-ru/ds-icons/interface/system");
+const constants_1 = require("../../constants");
+/** Текст `label` next-list-айтема — заголовок шапки sheet'а при заходе во вложенный список. */
+function nextListOption(item) {
+    const { content } = item;
+    if (content && typeof content === 'object' && 'label' in content) {
+        return String(content.label);
+    }
+    return undefined;
+}
+/**
+ * Готовит айтемы текущего уровня sheet'а:
+ * - `next-list` превращается в базовый айтем с шевроном `>`, клик по которому уводит на уровень вложенного
+ *   списка (drill-down), а не открывает второй BottomSheet (десктопный nested-popover на mobile неприменим);
+ * - `group` / `group-select` / `collapse` рекурсивно обрабатываются (внутри них тоже может быть `next-list`);
+ * - базовые айтемы (action-меню без `selection`) при `closeOnClick` закрывают sheet по клику.
+ */
+function buildLevelItems(items, onDrill, onClose, closeOnClick) {
+    return items.map(item => {
+        if (item && typeof item === 'object' && 'type' in item) {
+            if (item.type === constants_1.ITEM_TYPE.NextList) {
+                const next = item;
+                // next-list-only поля (вложенный список, его загрузка/ошибка/placement) на mobile не нужны —
+                // оставляем визуальную часть айтема (id / content / beforeContent / data-test-id / …).
+                const base = { ...next };
+                delete base.items;
+                delete base.type;
+                delete base.onSublistOpenChanged;
+                delete base.loading;
+                delete base.dataError;
+                delete base.dataFiltered;
+                delete base.placement;
+                delete base.scroll;
+                delete base.scrollRef;
+                return {
+                    ...base,
+                    afterContent: (0, jsx_runtime_1.jsx)(system_1.ChevronRightSVG, {}),
+                    onClick: (event) => {
+                        next.onClick?.(event);
+                        onDrill(next);
+                    },
+                };
+            }
+            if (item.type === constants_1.ITEM_TYPE.Group || item.type === constants_1.ITEM_TYPE.GroupSelect || item.type === constants_1.ITEM_TYPE.Collapse) {
+                return { ...item, items: buildLevelItems(item.items, onDrill, onClose, closeOnClick) };
+            }
+        }
+        if (closeOnClick && item && typeof item === 'object' && 'onClick' in item) {
+            const baseItem = item;
+            return {
+                ...baseItem,
+                onClick: (event) => {
+                    baseItem.onClick?.(event);
+                    onClose();
+                },
+            };
+        }
+        return item;
+    });
+}

package/dist/cjs/helperComponents/Separator/Separator.d.ts

@@ -0,0 +1,20 @@
+import { TruncateStringProps } from '@cloud-ru/ds-truncate-string';
+import { ForwardedRef, MouseEvent, ReactNode } from 'react';
+export type SeparatorProps = {
+    label?: string;
+    /** Слот иконки слева от label. */
+    beforeContent?: ReactNode;
+    truncate?: {
+        variant?: TruncateStringProps['variant'];
+    };
+    groupVariant?: 'subtitle' | 'subtitleTertiary';
+    divider?: boolean;
+    selectButton?: {
+        onClick?(e: MouseEvent<HTMLElement>): void;
+        indeterminate?: boolean;
+        checked?: boolean;
+        itemRef?: ForwardedRef<HTMLElement>;
+        label?: string;
+    };
+};
+export declare function Separator({ label, beforeContent, truncate, divider, groupVariant, selectButton, }: SeparatorProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/cjs/helperComponents/Separator/Separator.js

@@ -0,0 +1,40 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Separator = Separator;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const button_1 = require("@cloud-ru/ds-button");
+const divider_1 = require("@cloud-ru/ds-divider");
+const truncate_string_1 = require("@cloud-ru/ds-truncate-string");
+const react_1 = require("react");
+const contexts_1 = require("../../components/Lists/contexts");
+const constants_1 = require("../../constants");
+const locale_1 = require("../../locale");
+const utils_1 = require("../../utils");
+const constants_2 = require("./constants");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function Separator({ label, beforeContent, truncate, divider, groupVariant = 'subtitleTertiary', selectButton, }) {
+    const { size = 'm' } = (0, contexts_1.useNewListContext)();
+    const { level = 0 } = (0, contexts_1.useCollapseLevelContext)();
+    const { t } = locale_1.listLocale.useTranslations();
+    const selectButtonJSX = (0, react_1.useMemo)(() => {
+        if (!selectButton) {
+            return null;
+        }
+        const { onClick, checked, itemRef, label } = selectButton;
+        return ((0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.selectButton, "data-size": size, "data-weight": (divider && groupVariant) || undefined, children: (0, jsx_runtime_1.jsx)(button_1.Button, { view: 'function', appearance: 'neutral', size: constants_2.SELECT_BUTTON_SIZE_MAP[size], tabIndex: 0, "data-test-id": constants_1.TEST_IDS.bulkSelectButton, onClick: (e) => {
+                    onClick?.(e);
+                    e.preventDefault();
+                    e.stopPropagation();
+                }, onFocus: utils_1.stopPropagation, innerRef: itemRef, label: label ?? (checked ? t('groupSelectButton.reset') : t('groupSelectButton.select')) }) }));
+    }, [divider, groupVariant, selectButton, size, t]);
+    if (label) {
+        return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.separatorWithLabel, "data-size": size, "data-level-one": level === 1 || undefined, "data-level-more-one": level > 1 || undefined, style: { '--level': level }, children: [beforeContent && ((0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.beforeContent, "aria-hidden": true, children: beforeContent })), (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.label, "data-group-variant": groupVariant, children: (0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, { variant: truncate?.variant, text: label, maxLines: 1 }) }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.labelEnd, children: [selectButtonJSX, divider && ((0, jsx_runtime_1.jsx)(divider_1.Divider, { className: styles_module_scss_1.default.divider, variant: groupVariant === 'subtitle' ? divider_1.VARIANT.Regular : divider_1.VARIANT.Thin }))] })] }));
+    }
+    if (divider) {
+        return ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.separatorWithoutLabel, "data-size": size, children: (0, jsx_runtime_1.jsx)(divider_1.Divider, { variant: divider_1.VARIANT.Regular }) }));
+    }
+    return null;
+}

package/dist/cjs/helperComponents/Separator/constants.d.ts

@@ -0,0 +1,3 @@
+import { ButtonProps } from '@cloud-ru/ds-button';
+import { Size } from '../../types';
+export declare const SELECT_BUTTON_SIZE_MAP: Record<Size, ButtonProps['size']>;

package/dist/cjs/helperComponents/Separator/constants.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SELECT_BUTTON_SIZE_MAP = void 0;
+// @cloud-ru/ds-button пока без выделенного ButtonFunction и размера `xs` (Phase 5 cross-package blocker):
+// маппим размеры списка на ближайшие доступные `Button` size.
+exports.SELECT_BUTTON_SIZE_MAP = {
+    s: 's',
+    m: 's',
+    l: 'm',
+};

package/dist/cjs/helperComponents/Separator/index.d.ts

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

package/dist/cjs/helperComponents/Separator/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Separator"), exports);

package/dist/cjs/helperComponents/Separator/styles.module.css

@@ -0,0 +1,168 @@
+.beforeContent{
+  display:inline-flex;
+  flex-grow:0;
+  flex-shrink:0;
+  align-items:center;
+  justify-content:center;
+  box-sizing:content-box;
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
+}
+.beforeContent svg{
+  width:100%;
+  height:100%;
+}
+
+.separatorWithLabel{
+  position:relative;
+  display:flex;
+  align-items:center;
+  box-sizing:border-box;
+  width:100%;
+  min-width:100%;
+}
+.separatorWithLabel:focus-visible{
+  outline:var(--sn-theme-color-available-complementary, #000000) solid var(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
+  outline-offset:calc(0px - var(--sn-primitive-strokeWeight-strokeSemiBold, 2px));
+}
+.separatorWithLabel[data-size=s]{
+  gap:var(--sn-list-anatomy-size-s-listItem-gap, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-primitive-dimension-8, 8px)));
+  padding:var(--sn-list-anatomy-size-s-subtitle-paddingTop, var(--sn-primitive-dimension-8, 8px)) var(--sn-list-anatomy-size-s-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px))) var(--sn-list-anatomy-size-s-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-primitive-dimension-6, 6px))) var(--sn-list-anatomy-size-s-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px)));
+}
+.separatorWithLabel[data-size=s][data-level-one], .separatorWithLabel[data-size=s][data-level-more-one]{
+  padding-left:calc(var(--sn-list-anatomy-size-s-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px))) + var(--level, 0) * (var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px)) + var(--sn-list-anatomy-size-s-listItem-gap, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-primitive-dimension-8, 8px)))));
+}
+.separatorWithLabel[data-size=s] .beforeContent{
+  width:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
+  height:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
+  padding-top:var(--sn-list-anatomy-size-s-listItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-primitive-dimension-6, 6px)));
+  padding-bottom:var(--sn-list-anatomy-size-s-listItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-primitive-dimension-6, 6px)));
+}
+.separatorWithLabel[data-size=s] .label{
+  padding:var(--sn-list-anatomy-size-s-listItem-contentWrapper-textWrapper-paddingVertical, var(--sn-density-spacing-control-wrapper-vertical-s, var(--sn-primitive-dimension-8, 8px))) var(--sn-list-anatomy-size-s-listItem-contentWrapper-textWrapper-textContent-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-primitive-dimension-8, 8px))) var(--sn-list-anatomy-size-s-listItem-contentWrapper-textWrapper-paddingVertical, var(--sn-density-spacing-control-wrapper-vertical-s, var(--sn-primitive-dimension-8, 8px))) var(--sn-list-anatomy-size-s-listItem-contentWrapper-textWrapper-textContent-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-primitive-dimension-8, 8px)));
+}
+.separatorWithLabel[data-size=s] .label[data-group-variant=subtitle]{
+  font-family:var(--sn-regular-label-m-fontFamily, var(--sn-brand-font-fontFamily-regular-label, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-label-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-label-m, var(--sn-brand-font-fontWeight-light-regular-label-m, var(--sn-primitive-font-fontWeightValue-550, 550))));
+  line-height:var(--sn-regular-label-m-lineHeight, var(--sn-density-typography-roleLabel-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
+  font-size:var(--sn-regular-label-m-fontSize, var(--sn-density-typography-roleLabel-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
+  letter-spacing:var(--sn-regular-label-m-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
+  paragraph-spacing:var(--sn-regular-label-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
+}
+.separatorWithLabel[data-size=s] .label[data-group-variant=subtitleTertiary]{
+  font-family:var(--sn-regular-label-m-fontFamily, var(--sn-brand-font-fontFamily-regular-label, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-label-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-label-m, var(--sn-brand-font-fontWeight-light-regular-label-m, var(--sn-primitive-font-fontWeightValue-550, 550))));
+  line-height:var(--sn-regular-label-m-lineHeight, var(--sn-density-typography-roleLabel-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
+  font-size:var(--sn-regular-label-m-fontSize, var(--sn-density-typography-roleLabel-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
+  letter-spacing:var(--sn-regular-label-m-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
+  paragraph-spacing:var(--sn-regular-label-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
+}
+.separatorWithLabel[data-size=m]{
+  gap:var(--sn-list-anatomy-size-m-listItem-gap, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px)));
+  padding:var(--sn-list-anatomy-size-m-subtitle-paddingTop, var(--sn-primitive-dimension-10, 10px)) var(--sn-list-anatomy-size-m-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px))) var(--sn-list-anatomy-size-m-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px))) var(--sn-list-anatomy-size-m-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px)));
+}
+.separatorWithLabel[data-size=m][data-level-one], .separatorWithLabel[data-size=m][data-level-more-one]{
+  padding-left:calc(var(--sn-list-anatomy-size-m-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px))) + var(--level, 0) * (var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px)) + var(--sn-list-anatomy-size-m-listItem-gap, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px)))));
+}
+.separatorWithLabel[data-size=m] .beforeContent{
+  width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
+  height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
+  padding-top:var(--sn-list-anatomy-size-m-listItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px)));
+  padding-bottom:var(--sn-list-anatomy-size-m-listItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px)));
+}
+.separatorWithLabel[data-size=m] .label{
+  padding:var(--sn-list-anatomy-size-m-listItem-contentWrapper-textWrapper-paddingVertical, var(--sn-density-spacing-control-wrapper-vertical-m, var(--sn-primitive-dimension-8, 8px))) var(--sn-list-anatomy-size-m-listItem-contentWrapper-textWrapper-textContent-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px))) var(--sn-list-anatomy-size-m-listItem-contentWrapper-textWrapper-paddingVertical, var(--sn-density-spacing-control-wrapper-vertical-m, var(--sn-primitive-dimension-8, 8px))) var(--sn-list-anatomy-size-m-listItem-contentWrapper-textWrapper-textContent-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px)));
+}
+.separatorWithLabel[data-size=m] .label[data-group-variant=subtitle]{
+  font-family:var(--sn-regular-label-l-fontFamily, var(--sn-brand-font-fontFamily-regular-label, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-label-l-fontWeight, var(--sn-theme-typography-fontWeight-regular-label-l, var(--sn-brand-font-fontWeight-light-regular-label-l, var(--sn-primitive-font-fontWeightValue-550, 550))));
+  line-height:var(--sn-regular-label-l-lineHeight, var(--sn-density-typography-roleLabel-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
+  font-size:var(--sn-regular-label-l-fontSize, var(--sn-density-typography-roleLabel-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px)));
+  letter-spacing:var(--sn-regular-label-l-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
+  paragraph-spacing:var(--sn-regular-label-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
+}
+.separatorWithLabel[data-size=m] .label[data-group-variant=subtitleTertiary]{
+  font-family:var(--sn-regular-label-l-fontFamily, var(--sn-brand-font-fontFamily-regular-label, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-label-l-fontWeight, var(--sn-theme-typography-fontWeight-regular-label-l, var(--sn-brand-font-fontWeight-light-regular-label-l, var(--sn-primitive-font-fontWeightValue-550, 550))));
+  line-height:var(--sn-regular-label-l-lineHeight, var(--sn-density-typography-roleLabel-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
+  font-size:var(--sn-regular-label-l-fontSize, var(--sn-density-typography-roleLabel-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px)));
+  letter-spacing:var(--sn-regular-label-l-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
+  paragraph-spacing:var(--sn-regular-label-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
+}
+.separatorWithLabel[data-size=l]{
+  gap:var(--sn-list-anatomy-size-l-listItem-gap, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-primitive-dimension-12, 12px)));
+  padding:var(--sn-list-anatomy-size-l-subtitle-paddingTop, var(--sn-primitive-dimension-12, 12px)) var(--sn-list-anatomy-size-l-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px))) var(--sn-list-anatomy-size-l-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-primitive-dimension-10, 10px))) var(--sn-list-anatomy-size-l-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px)));
+}
+.separatorWithLabel[data-size=l][data-level-one], .separatorWithLabel[data-size=l][data-level-more-one]{
+  padding-left:calc(var(--sn-list-anatomy-size-l-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px))) + var(--level, 0) * (var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px)) + var(--sn-list-anatomy-size-l-listItem-gap, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-primitive-dimension-12, 12px)))));
+}
+.separatorWithLabel[data-size=l] .beforeContent{
+  width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
+  height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
+  padding-top:var(--sn-list-anatomy-size-l-listItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-primitive-dimension-10, 10px)));
+  padding-bottom:var(--sn-list-anatomy-size-l-listItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-primitive-dimension-10, 10px)));
+}
+.separatorWithLabel[data-size=l] .label{
+  padding:var(--sn-list-anatomy-size-l-listItem-contentWrapper-textWrapper-paddingVertical, var(--sn-density-spacing-control-wrapper-vertical-l, var(--sn-primitive-dimension-8, 8px))) var(--sn-list-anatomy-size-l-listItem-contentWrapper-textWrapper-textContent-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-primitive-dimension-12, 12px))) var(--sn-list-anatomy-size-l-listItem-contentWrapper-textWrapper-paddingVertical, var(--sn-density-spacing-control-wrapper-vertical-l, var(--sn-primitive-dimension-8, 8px))) var(--sn-list-anatomy-size-l-listItem-contentWrapper-textWrapper-textContent-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-primitive-dimension-12, 12px)));
+}
+.separatorWithLabel[data-size=l] .label[data-group-variant=subtitle]{
+  font-family:var(--sn-regular-title-m-fontFamily, var(--sn-brand-font-fontFamily-regular-title, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-title-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-title-m, var(--sn-brand-font-fontWeight-light-regular-title-m, var(--sn-primitive-font-fontWeightValue-600, 600))));
+  line-height:var(--sn-regular-title-m-lineHeight, var(--sn-density-typography-roleTitle-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
+  font-size:var(--sn-regular-title-m-fontSize, var(--sn-density-typography-roleTitle-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
+  letter-spacing:var(--sn-regular-title-m-letterSpacing, var(--sn-primitive-font-letterSpacing-l, 0.15px));
+  paragraph-spacing:var(--sn-regular-title-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize16, 8px));
+}
+.separatorWithLabel[data-size=l] .label[data-group-variant=subtitleTertiary]{
+  font-family:var(--sn-regular-title-m-fontFamily, var(--sn-brand-font-fontFamily-regular-title, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-title-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-title-m, var(--sn-brand-font-fontWeight-light-regular-title-m, var(--sn-primitive-font-fontWeightValue-600, 600))));
+  line-height:var(--sn-regular-title-m-lineHeight, var(--sn-density-typography-roleTitle-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
+  font-size:var(--sn-regular-title-m-fontSize, var(--sn-density-typography-roleTitle-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
+  letter-spacing:var(--sn-regular-title-m-letterSpacing, var(--sn-primitive-font-letterSpacing-l, 0.15px));
+  paragraph-spacing:var(--sn-regular-title-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize16, 8px));
+}
+
+.separatorWithoutLabel{
+  display:flex;
+  align-items:flex-end;
+  box-sizing:border-box;
+}
+.separatorWithoutLabel[data-size=s]{
+  padding:var(--sn-list-anatomy-size-s-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-primitive-dimension-6, 6px))) var(--sn-list-anatomy-size-s-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px))) var(--sn-list-anatomy-size-s-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-primitive-dimension-6, 6px))) var(--sn-list-anatomy-size-s-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px)));
+}
+.separatorWithoutLabel[data-size=m]{
+  padding:var(--sn-list-anatomy-size-m-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px))) var(--sn-list-anatomy-size-m-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px))) var(--sn-list-anatomy-size-m-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px))) var(--sn-list-anatomy-size-m-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px)));
+}
+.separatorWithoutLabel[data-size=l]{
+  padding:var(--sn-list-anatomy-size-l-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-primitive-dimension-10, 10px))) var(--sn-list-anatomy-size-l-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px))) var(--sn-list-anatomy-size-l-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-primitive-dimension-10, 10px))) var(--sn-list-anatomy-size-l-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px)));
+}
+
+.label{
+  overflow:hidden;
+  flex-shrink:1;
+}
+.label[data-group-variant=subtitle]{
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
+}
+.label[data-group-variant=subtitleTertiary]{
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
+}
+
+.divider{
+  flex:1;
+  width:auto;
+  min-width:0;
+}
+
+.labelEnd{
+  display:flex;
+  flex:1 0 0;
+  flex-direction:column;
+  align-items:flex-end;
+  justify-content:center;
+  min-width:0;
+}
+
+.selectButton{
+  display:flex;
+  justify-content:flex-end;
+}

package/dist/cjs/helperComponents/index.d.ts

@@ -0,0 +1,5 @@
+export * from './CollapseBlockPrivate';
+export * from './Separator';
+export * from './HiddenTabButton';
+export * from './ListEmptyState';
+export * from './ItemContent';

package/dist/cjs/helperComponents/index.js

@@ -0,0 +1,21 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./CollapseBlockPrivate"), exports);
+__exportStar(require("./Separator"), exports);
+__exportStar(require("./HiddenTabButton"), exports);
+__exportStar(require("./ListEmptyState"), exports);
+__exportStar(require("./ItemContent"), exports);

package/dist/cjs/index.d.ts

@@ -0,0 +1,9 @@
+export * from './components';
+export * from './types';
+export { kindFlattenItems } from './components/Items';
+export * from './helperComponents';
+export { NewListContextProvider } from './components/Lists/contexts';
+export { getDefaultItemId, getFooterItemId, getItemAutoId } from './utils';
+export * from './constants';
+export { setNonce } from '@cloud-ru/ds-scroll';
+export * from './locale';

package/dist/cjs/index.js

@@ -0,0 +1,37 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setNonce = exports.getItemAutoId = exports.getFooterItemId = exports.getDefaultItemId = exports.NewListContextProvider = exports.kindFlattenItems = void 0;
+__exportStar(require("./components"), exports);
+__exportStar(require("./types"), exports);
+var Items_1 = require("./components/Items");
+Object.defineProperty(exports, "kindFlattenItems", { enumerable: true, get: function () { return Items_1.kindFlattenItems; } });
+// helperComponents — публичные вспомогательные компоненты для построения
+// собственных раскладок без полного List (Figma-reference в stories,
+// custom layouts в потребительских пакетах).
+__exportStar(require("./helperComponents"), exports);
+// Context-провайдер размера: нужен, чтобы Separator/ListEmptyState и др.
+// подхватывали size при рендере вне List (читают useNewListContext()).
+var contexts_1 = require("./components/Lists/contexts");
+Object.defineProperty(exports, "NewListContextProvider", { enumerable: true, get: function () { return contexts_1.NewListContextProvider; } });
+var utils_1 = require("./utils");
+Object.defineProperty(exports, "getDefaultItemId", { enumerable: true, get: function () { return utils_1.getDefaultItemId; } });
+Object.defineProperty(exports, "getFooterItemId", { enumerable: true, get: function () { return utils_1.getFooterItemId; } });
+Object.defineProperty(exports, "getItemAutoId", { enumerable: true, get: function () { return utils_1.getItemAutoId; } });
+__exportStar(require("./constants"), exports);
+var scroll_1 = require("@cloud-ru/ds-scroll");
+Object.defineProperty(exports, "setNonce", { enumerable: true, get: function () { return scroll_1.setNonce; } });
+__exportStar(require("./locale"), exports);

package/dist/cjs/locale/index.d.ts

@@ -0,0 +1,79 @@
+declare const LIST_MESSAGES: {
+    readonly 'en-GB': {
+        readonly noData: {
+            readonly description: "No data";
+        };
+        readonly noResults: {
+            readonly description: "Nothing found";
+        };
+        readonly errorData: {
+            readonly description: "Error loading data";
+        };
+        readonly groupSelectButton: {
+            readonly reset: "Reset all";
+            readonly select: "Select all";
+        };
+        readonly list: {
+            readonly dragHandle: "Drag to reorder";
+        };
+    };
+    readonly 'ru-RU': {
+        readonly noData: {
+            readonly description: "Нет данных";
+        };
+        readonly noResults: {
+            readonly description: "Не найдено";
+        };
+        readonly errorData: {
+            readonly description: "Ошибка загрузки данных";
+        };
+        readonly groupSelectButton: {
+            readonly reset: "Сбросить все";
+            readonly select: "Выбрать все";
+        };
+        readonly list: {
+            readonly dragHandle: "Перетащить для изменения порядка";
+        };
+    };
+};
+export type ListMessages = (typeof LIST_MESSAGES)['en-GB'];
+/** locale компонента List: `listLocale.useTranslations()` в коде, `listLocale.extend(...)` в сервисе. */
+export declare const listLocale: import("@cloud-ru/ds-locale").DefinedLocale<{
+    readonly 'en-GB': {
+        readonly noData: {
+            readonly description: "No data";
+        };
+        readonly noResults: {
+            readonly description: "Nothing found";
+        };
+        readonly errorData: {
+            readonly description: "Error loading data";
+        };
+        readonly groupSelectButton: {
+            readonly reset: "Reset all";
+            readonly select: "Select all";
+        };
+        readonly list: {
+            readonly dragHandle: "Drag to reorder";
+        };
+    };
+    readonly 'ru-RU': {
+        readonly noData: {
+            readonly description: "Нет данных";
+        };
+        readonly noResults: {
+            readonly description: "Не найдено";
+        };
+        readonly errorData: {
+            readonly description: "Ошибка загрузки данных";
+        };
+        readonly groupSelectButton: {
+            readonly reset: "Сбросить все";
+            readonly select: "Выбрать все";
+        };
+        readonly list: {
+            readonly dragHandle: "Перетащить для изменения порядка";
+        };
+    };
+}, "@cloud-ru/ds-list">;
+export {};

package/dist/cjs/locale/index.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.listLocale = void 0;
+const locale_1 = require("@cloud-ru/ds-locale");
+const LIST_MESSAGES = (0, locale_1.defineMessages)({
+    'en-GB': {
+        noData: {
+            description: 'No data',
+        },
+        noResults: {
+            description: 'Nothing found',
+        },
+        errorData: {
+            description: 'Error loading data',
+        },
+        groupSelectButton: {
+            reset: 'Reset all',
+            select: 'Select all',
+        },
+        list: {
+            dragHandle: 'Drag to reorder',
+        },
+    },
+    'ru-RU': {
+        noData: {
+            description: 'Нет данных',
+        },
+        noResults: {
+            description: 'Не найдено',
+        },
+        errorData: {
+            description: 'Ошибка загрузки данных',
+        },
+        groupSelectButton: {
+            reset: 'Сбросить все',
+            select: 'Выбрать все',
+        },
+        list: {
+            dragHandle: 'Перетащить для изменения порядка',
+        },
+    },
+});
+/** locale компонента List: `listLocale.useTranslations()` в коде, `listLocale.extend(...)` в сервисе. */
+exports.listLocale = (0, locale_1.defineLocale)('@cloud-ru/ds-list', LIST_MESSAGES);

package/dist/cjs/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "commonjs"
+}