@cloud-ru/ds-uikit-product-page-layout 1.0.0

package/dist/cjs/components/Actions/ActionView.d.ts

@@ -0,0 +1,17 @@
+import { Size } from '@cloud-ru/ds-button';
+import { ReactNode } from 'react';
+import { Action } from './types';
+type CommonProps = {
+    className?: string;
+    size?: Size;
+    fullWidth?: boolean;
+};
+/**
+ * Рендерит один action. Составные варианты (`dropdown`/`kebab`/`droplist`) монтируют адаптивные
+ * `@ds`-примитивы, которые берут раскладку из `AdaptiveProvider`. Раскладку фиксируют обёртки
+ * `DesktopActions` / `MobileActions` (`withLayoutType`), поэтому отдельный проп `layoutType` не нужен.
+ */
+export declare function ActionView({ variant, tooltip, hidden, commonProps, ...buttonProps }: Action & {
+    commonProps: CommonProps;
+}): string | number | boolean | Iterable<ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+export {};

package/dist/cjs/components/Actions/ActionView.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ActionView = ActionView;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const button_1 = require("@cloud-ru/ds-button");
+const tooltip_1 = require("@cloud-ru/ds-tooltip");
+const uikit_product_button_predefined_1 = require("@cloud-ru/ds-uikit-product-button-predefined");
+const ButtonDroplist_1 = require("./buttons/ButtonDroplist");
+const ButtonKebab_1 = require("./buttons/ButtonKebab");
+const ButtonQuota_1 = require("./buttons/ButtonQuota");
+const constants_1 = require("./constants");
+/**
+ * Рендерит один action. Составные варианты (`dropdown`/`kebab`/`droplist`) монтируют адаптивные
+ * `@ds`-примитивы, которые берут раскладку из `AdaptiveProvider`. Раскладку фиксируют обёртки
+ * `DesktopActions` / `MobileActions` (`withLayoutType`), поэтому отдельный проп `layoutType` не нужен.
+ */
+function ActionView({ variant, tooltip, hidden = false, commonProps, ...buttonProps }) {
+    if (hidden) {
+        return null;
+    }
+    // disableSpanWrapper — кнопка остаётся ПРЯМЫМ flex-потомком контейнера действий: без него Tooltip
+    // добавляет span-обёртку (`flex:0 1 auto`), и `fullWidth`-кнопка (`flex:1 1 0`) не растягивается на
+    // всю ширину (mobile: 2 действия должны делить строку). Как в MobilePageForm ButtonGroup.
+    const addTooltip = (component) => tooltip ? ((0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { ...tooltip, disableSpanWrapper: true, children: component })) : (component);
+    switch (variant) {
+        case constants_1.BUTTON_TYPE.Outline:
+            return addTooltip((0, jsx_runtime_1.jsx)(button_1.Button, { view: button_1.VIEW.Outline, ...buttonProps, ...commonProps }));
+        case constants_1.BUTTON_TYPE.Tonal:
+            return addTooltip((0, jsx_runtime_1.jsx)(button_1.Button, { view: button_1.VIEW.Tonal, ...buttonProps, ...commonProps }));
+        case constants_1.BUTTON_TYPE.Function:
+            return addTooltip((0, jsx_runtime_1.jsx)(button_1.Button, { view: button_1.VIEW.Function, ...buttonProps, ...commonProps }));
+        case constants_1.BUTTON_TYPE.Simple:
+            return addTooltip((0, jsx_runtime_1.jsx)(button_1.Button, { view: button_1.VIEW.Simple, ...buttonProps, ...commonProps }));
+        case constants_1.BUTTON_TYPE.Dropdown: {
+            return addTooltip((0, jsx_runtime_1.jsx)(uikit_product_button_predefined_1.ButtonDropdown, { ...buttonProps, ...commonProps }));
+        }
+        case constants_1.BUTTON_TYPE.Kebab: {
+            const { button, list } = buttonProps;
+            return addTooltip((0, jsx_runtime_1.jsx)(ButtonKebab_1.ButtonKebab, { button: { ...button, ...commonProps }, list: list }));
+        }
+        case constants_1.BUTTON_TYPE.Droplist: {
+            const { button, list } = buttonProps;
+            return addTooltip((0, jsx_runtime_1.jsx)(ButtonDroplist_1.ButtonDroplist, { button: { ...button, ...commonProps }, list: list }));
+        }
+        case constants_1.BUTTON_TYPE.Quota: {
+            const quotaProps = buttonProps;
+            return addTooltip((0, jsx_runtime_1.jsx)(ButtonQuota_1.ButtonQuota, { ...quotaProps, buttonProps: quotaProps.buttonProps ?? commonProps }));
+        }
+        case constants_1.BUTTON_TYPE.Filled:
+        default:
+            return addTooltip((0, jsx_runtime_1.jsx)(button_1.Button, { view: button_1.VIEW.Filled, ...buttonProps, ...commonProps }));
+    }
+}

package/dist/cjs/components/Actions/DesktopActions.d.ts

@@ -0,0 +1,10 @@
+import { ActionsProps } from './types';
+/**
+ * Десктопная панель действий. Форсирует `desktop`-раскладку через `withLayoutType`, чтобы вложенные
+ * адаптивные `@ds`-примитивы (`ButtonDropdown`/`ButtonKebab`/`ButtonDroplist`) рендерили
+ * desktop-popover даже под mobile-провайдером.
+ */
+export declare const DesktopActions: {
+    (props: Pick<ActionsProps, "items">): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/cjs/components/Actions/DesktopActions.js

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DesktopActions = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const adaptive_1 = require("@cloud-ru/ds-adaptive");
+const ActionView_1 = require("./ActionView");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+const utils_1 = require("./utils");
+function DesktopActionsBase({ items }) {
+    if (!(0, utils_1.hasVisibleActions)(items)) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.desktopActionsWrapper, children: items.map((action, index) => ((0, react_1.createElement)(ActionView_1.ActionView, { ...action, key: index, commonProps: {
+                className: styles_module_scss_1.default.button,
+            } }))) }));
+}
+/**
+ * Десктопная панель действий. Форсирует `desktop`-раскладку через `withLayoutType`, чтобы вложенные
+ * адаптивные `@ds`-примитивы (`ButtonDropdown`/`ButtonKebab`/`ButtonDroplist`) рендерили
+ * desktop-popover даже под mobile-провайдером.
+ */
+exports.DesktopActions = (0, adaptive_1.withLayoutType)(DesktopActionsBase, adaptive_1.LAYOUT_TYPE.Desktop);

package/dist/cjs/components/Actions/MobileActions.d.ts

@@ -0,0 +1,10 @@
+import { ActionsProps } from './types';
+/**
+ * Мобильная панель действий. Форсирует `mobile`-раскладку через `withLayoutType`, чтобы вложенные
+ * адаптивные `@ds`-примитивы (`ButtonDropdown`/`ButtonKebab`/`ButtonDroplist`) рендерили
+ * bottom-sheet даже под desktop-провайдером.
+ */
+export declare const MobileActions: {
+    (props: ActionsProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/cjs/components/Actions/MobileActions.js

@@ -0,0 +1,121 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MobileActions = void 0;
+const react_1 = require("react");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const adaptive_1 = require("@cloud-ru/ds-adaptive");
+const button_1 = require("@cloud-ru/ds-button");
+const system_1 = require("@cloud-ru/ds-icons/interface/system");
+const list_1 = require("@cloud-ru/ds-list");
+const tooltip_1 = require("@cloud-ru/ds-tooltip");
+const uikit_product_quota_1 = require("@cloud-ru/ds-uikit-product-quota");
+const utils_1 = require("@cloud-ru/ds-utils");
+const react_2 = require("react");
+const constants_1 = require("../../constants");
+const ActionView_1 = require("./ActionView");
+const constants_2 = require("./constants");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+const utils_2 = require("./utils");
+function MobileActionsBase({ items, maxVisibleItems }) {
+    const containerRef = (0, react_2.useRef)(null);
+    const [isOpen, setIsOpen] = (0, react_2.useState)(false);
+    const { visibleItems, hiddenItems } = (0, utils_1.useDynamicList)({ parentContainerRef: containerRef, items, maxVisibleItems });
+    const { t: tQuota } = uikit_product_quota_1.quotaLocale.useTranslations();
+    if (!(0, utils_2.hasVisibleActions)(items)) {
+        return null;
+    }
+    const hiddenItemsWithKebab = hiddenItems.concat(visibleItems.filter(item => item.variant === constants_2.BUTTON_TYPE.Kebab));
+    const visibleItemsWithoutKebab = visibleItems.filter(item => item.variant !== constants_2.BUTTON_TYPE.Kebab);
+    const droplistItems = hiddenItemsWithKebab.reduce((acc, action) => {
+        switch (action.variant) {
+            case constants_2.BUTTON_TYPE.Tonal:
+            case constants_2.BUTTON_TYPE.Simple:
+            case constants_2.BUTTON_TYPE.Outline:
+            case constants_2.BUTTON_TYPE.Function:
+            case constants_2.BUTTON_TYPE.Filled:
+            case undefined: {
+                const simpleAction = action;
+                acc.push({
+                    content: { label: simpleAction.label ?? '' },
+                    onClick: event => {
+                        setIsOpen(false);
+                        simpleAction.onClick?.(event);
+                    },
+                    beforeContent: simpleAction.icon,
+                    itemWrapRender: item => {
+                        const node = simpleAction.href && !simpleAction.disabled ? ((0, jsx_runtime_1.jsx)("a", { href: simpleAction.href, target: '_blank', rel: 'noreferrer', children: item })) : (item);
+                        return action.tooltip ? (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { ...action.tooltip, children: node }) : node;
+                    },
+                });
+                break;
+            }
+            case constants_2.BUTTON_TYPE.Quota: {
+                // QuotaWidget самодостаточен (свой триггер + dropdown) — рендерим инлайн как inactive-айтем.
+                const quotaWidget = (0, jsx_runtime_1.jsx)(uikit_product_quota_1.QuotaWidget, { ...action, buttonProps: { size: 'm', fullWidth: true } });
+                acc.push({
+                    type: 'group',
+                    label: tQuota('quotas'),
+                    divider: acc.length > 0,
+                    items: [
+                        {
+                            inactive: true,
+                            content: action.tooltip ? (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { ...action.tooltip, children: quotaWidget }) : quotaWidget,
+                        },
+                    ],
+                });
+                break;
+            }
+            case constants_2.BUTTON_TYPE.Droplist:
+            case constants_2.BUTTON_TYPE.Kebab: {
+                const needDivider = Boolean(action.variant === constants_2.BUTTON_TYPE.Droplist && action.button?.label) || acc.length > 0;
+                acc.push({
+                    type: 'group',
+                    label: action.variant === constants_2.BUTTON_TYPE.Droplist ? action.button?.label : undefined,
+                    divider: needDivider,
+                    items: action.list.items.map(item => ({
+                        ...item,
+                        onClick: event => {
+                            setIsOpen(false);
+                            item.onClick?.(event);
+                        },
+                    })),
+                });
+                break;
+            }
+            case constants_2.BUTTON_TYPE.Dropdown: {
+                // Dropdown-вариант — ButtonDropdown (droplist по items): разворачиваем items в группу, как Droplist/Kebab.
+                acc.push({
+                    type: 'group',
+                    label: action.label,
+                    divider: acc.length > 0,
+                    items: action.items.map(item => ({
+                        ...item,
+                        onClick: event => {
+                            setIsOpen(false);
+                            item.onClick?.(event);
+                        },
+                    })),
+                });
+                break;
+            }
+            default: {
+                break;
+            }
+        }
+        return acc;
+    }, []);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.mobileActionsWrapper, ref: containerRef, "data-test-id": constants_1.TEST_IDS.mobileActions.root, children: [droplistItems.length > 0 && ((0, jsx_runtime_1.jsx)(list_1.Droplist, { size: 'm', open: isOpen, onOpenChange: setIsOpen, items: droplistItems, children: (0, jsx_runtime_1.jsx)(button_1.Button, { className: styles_module_scss_1.default.button, view: button_1.VIEW.Outline, appearance: 'neutral', icon: (0, jsx_runtime_1.jsx)(system_1.KebabSVG, {}), size: 'm', "data-test-id": constants_1.TEST_IDS.mobileActions.trigger }) })), visibleItemsWithoutKebab.map((action, index) => ((0, react_1.createElement)(ActionView_1.ActionView, { ...action, key: index, commonProps: {
+                    className: styles_module_scss_1.default.button,
+                    size: 'm',
+                    fullWidth: true,
+                } })))] }));
+}
+/**
+ * Мобильная панель действий. Форсирует `mobile`-раскладку через `withLayoutType`, чтобы вложенные
+ * адаптивные `@ds`-примитивы (`ButtonDropdown`/`ButtonKebab`/`ButtonDroplist`) рендерили
+ * bottom-sheet даже под desktop-провайдером.
+ */
+exports.MobileActions = (0, adaptive_1.withLayoutType)(MobileActionsBase, adaptive_1.LAYOUT_TYPE.Mobile);

package/dist/cjs/components/Actions/buttons/ButtonDroplist.d.ts

@@ -0,0 +1,11 @@
+import { ButtonProps } from '@cloud-ru/ds-button';
+import { DroplistProps } from '@cloud-ru/ds-list';
+export type ButtonDroplistProps = {
+    button: (Omit<ButtonProps, 'appearance' | 'view'> & {
+        buttonType?: 'filled';
+    }) | (Omit<ButtonProps, 'icon' | 'iconPosition' | 'appearance' | 'view'> & {
+        buttonType?: 'function';
+    });
+    list: Pick<DroplistProps, 'items' | 'closeDroplistOnItemClick' | 'className' | 'open' | 'onOpenChange'>;
+};
+export declare function ButtonDroplist({ button, list }: ButtonDroplistProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/Actions/buttons/ButtonDroplist.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonDroplist = ButtonDroplist;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const button_1 = require("@cloud-ru/ds-button");
+const system_1 = require("@cloud-ru/ds-icons/interface/system");
+const list_1 = require("@cloud-ru/ds-list");
+const utils_1 = require("@cloud-ru/ds-utils");
+const react_1 = require("react");
+function ButtonDroplist({ button, list }) {
+    const [open = false, onOpenChange] = (0, utils_1.useValueControl)({ onChange: list.onOpenChange, value: list.open });
+    const Icon = open ? system_1.ChevronUpSVG : system_1.ChevronDownSVG;
+    const buttonType = button.buttonType ?? 'function';
+    const buttonProps = (0, react_1.useMemo)(() => buttonType === 'filled'
+        ? { ...button, view: button_1.VIEW.Filled, appearance: 'primary' }
+        : { ...button, view: button_1.VIEW.Function, appearance: 'neutral', icon: (0, jsx_runtime_1.jsx)(Icon, {}), iconPosition: 'after' }, [buttonType, button, Icon]);
+    return ((0, jsx_runtime_1.jsx)(list_1.Droplist, { ...list, open: open, onOpenChange: onOpenChange, selection: {
+            mode: 'single',
+            value: 'null',
+        }, size: 'm', children: (0, jsx_runtime_1.jsx)(button_1.Button, { ...buttonProps }) }));
+}

package/dist/cjs/components/Actions/buttons/ButtonKebab.d.ts

@@ -0,0 +1,7 @@
+import { ButtonProps } from '@cloud-ru/ds-button';
+import { DroplistProps } from '@cloud-ru/ds-list';
+export type ButtonKebabProps = {
+    button?: Omit<ButtonProps, 'label' | 'icon' | 'view'>;
+    list: Pick<DroplistProps, 'items' | 'closeDroplistOnItemClick' | 'open' | 'onOpenChange' | 'className'>;
+};
+export declare function ButtonKebab({ button, list }: ButtonKebabProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/Actions/buttons/ButtonKebab.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonKebab = ButtonKebab;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const button_1 = require("@cloud-ru/ds-button");
+const system_1 = require("@cloud-ru/ds-icons/interface/system");
+const list_1 = require("@cloud-ru/ds-list");
+const utils_1 = require("@cloud-ru/ds-utils");
+function ButtonKebab({ button, list }) {
+    const [open = false, onOpenChange] = (0, utils_1.useValueControl)({ onChange: list.onOpenChange, value: list.open });
+    return ((0, jsx_runtime_1.jsx)(list_1.Droplist, { ...list, open: open, onOpenChange: onOpenChange, selection: {
+            mode: 'single',
+            value: 'null',
+        }, placement: 'bottom-end', size: 'm', children: (0, jsx_runtime_1.jsx)(button_1.Button, { ...button, view: button_1.VIEW.Outline, icon: (0, jsx_runtime_1.jsx)(system_1.KebabSVG, {}), appearance: 'neutral' }) }));
+}

package/dist/cjs/components/Actions/buttons/ButtonQuota.d.ts

@@ -0,0 +1,12 @@
+import { QuotaWidgetProps } from '@cloud-ru/ds-uikit-product-quota';
+/**
+ * Quota-вариант action'а. В легаси на мобиле рендерился `QuotaWidgetMobile` (bottom-sheet),
+ * которого в `@cloud-ru/ds-uikit-product-quota` нет — есть только `QuotaWidget`, самостоятельно управляющий
+ * собственным dropdown'ом и кнопкой-триггером (`buttonProps`). Поэтому используем `QuotaWidget` на
+ * обеих раскладках; `QuotaWidget` сам не адаптивен.
+ *
+ * TODO Figma-phase: на mobile легаси показывал квоты в bottom-sheet; `@ds` `QuotaWidget` всегда
+ * открывает анкорный dropdown. Визуальный паритет мобильной выкладки квот — отдельная задача.
+ */
+export type ButtonQuotaProps = QuotaWidgetProps;
+export declare function ButtonQuota({ buttonProps, ...props }: ButtonQuotaProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/Actions/buttons/ButtonQuota.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonQuota = ButtonQuota;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const uikit_product_quota_1 = require("@cloud-ru/ds-uikit-product-quota");
+function ButtonQuota({ buttonProps, ...props }) {
+    return (0, jsx_runtime_1.jsx)(uikit_product_quota_1.QuotaWidget, { ...props, buttonProps: { size: 's', ...buttonProps } });
+}

package/dist/cjs/components/Actions/buttons/index.d.ts

@@ -0,0 +1,3 @@
+export * from './ButtonDroplist';
+export * from './ButtonKebab';
+export * from './ButtonQuota';

package/dist/cjs/components/Actions/buttons/index.js

@@ -0,0 +1,19 @@
+"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("./ButtonDroplist"), exports);
+__exportStar(require("./ButtonKebab"), exports);
+__exportStar(require("./ButtonQuota"), exports);

package/dist/cjs/components/Actions/constants.d.ts

@@ -0,0 +1,11 @@
+export declare const BUTTON_TYPE: {
+    readonly Filled: "filled";
+    readonly Outline: "outline";
+    readonly Tonal: "tonal";
+    readonly Function: "function";
+    readonly Simple: "simple";
+    readonly Dropdown: "dropdown";
+    readonly Droplist: "droplist";
+    readonly Quota: "quota";
+    readonly Kebab: "kebab";
+};

package/dist/cjs/components/Actions/constants.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BUTTON_TYPE = void 0;
+exports.BUTTON_TYPE = {
+    Filled: 'filled',
+    Outline: 'outline',
+    Tonal: 'tonal',
+    Function: 'function',
+    Simple: 'simple',
+    Dropdown: 'dropdown',
+    Droplist: 'droplist',
+    Quota: 'quota',
+    Kebab: 'kebab',
+};

package/dist/cjs/components/Actions/index.d.ts

@@ -0,0 +1,7 @@
+export * from './ActionView';
+export * from './buttons';
+export * from './constants';
+export * from './DesktopActions';
+export * from './utils';
+export * from './MobileActions';
+export * from './types';

package/dist/cjs/components/Actions/index.js

@@ -0,0 +1,23 @@
+"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("./ActionView"), exports);
+__exportStar(require("./buttons"), exports);
+__exportStar(require("./constants"), exports);
+__exportStar(require("./DesktopActions"), exports);
+__exportStar(require("./utils"), exports);
+__exportStar(require("./MobileActions"), exports);
+__exportStar(require("./types"), exports);

package/dist/cjs/components/Actions/styles.module.css

@@ -0,0 +1,27 @@
+.desktopActionsWrapper{
+  display:flex;
+  flex-direction:row-reverse;
+  flex-shrink:0;
+  gap:var(--sn-primitive-dimension-8, 8px);
+  align-items:center;
+  height:100%;
+}
+
+.mobileActionsWrapper{
+  display:flex;
+  flex-direction:row-reverse;
+  flex-shrink:0;
+  gap:var(--sn-primitive-dimension-8, 8px);
+  align-items:center;
+  width:100%;
+}
+
+.button{
+  white-space:nowrap;
+}
+.button[data-full-width]:not([data-variant=icon-only]){
+  flex:1 1 0;
+}
+.button[data-variant=icon-only]{
+  flex:0 0 auto;
+}

package/dist/cjs/components/Actions/types.d.ts

@@ -0,0 +1,39 @@
+import { ButtonProps } from '@cloud-ru/ds-button';
+import { TooltipProps } from '@cloud-ru/ds-tooltip';
+import { ButtonDropdownProps } from '@cloud-ru/ds-uikit-product-button-predefined';
+import { ButtonDroplistProps } from './buttons/ButtonDroplist';
+import { ButtonKebabProps } from './buttons/ButtonKebab';
+import { ButtonQuotaProps } from './buttons/ButtonQuota';
+import { BUTTON_TYPE } from './constants';
+/**
+ * Action — один элемент панели действий. Дискриминированный union по `variant` (`BUTTON_TYPE`).
+ * Простые кнопки (`filled`/`outline`/`tonal`/`function`/`simple`) маппятся на единый `Button` из
+ * `@cloud-ru/ds-button` с соответствующим `view`; составные (`dropdown`/`kebab`/`droplist`/`quota`) — на
+ * предопределённые обёртки.
+ */
+export type Action = {
+    tooltip?: TooltipProps;
+    hidden?: boolean;
+} & (({
+    variant?: typeof BUTTON_TYPE.Filled;
+} & ButtonProps) | ({
+    variant: typeof BUTTON_TYPE.Outline;
+} & ButtonProps) | ({
+    variant: typeof BUTTON_TYPE.Tonal;
+} & ButtonProps) | ({
+    variant: typeof BUTTON_TYPE.Function;
+} & ButtonProps) | ({
+    variant: typeof BUTTON_TYPE.Simple;
+} & ButtonProps) | ({
+    variant: typeof BUTTON_TYPE.Dropdown;
+} & ButtonDropdownProps) | ({
+    variant: typeof BUTTON_TYPE.Kebab;
+} & ButtonKebabProps) | ({
+    variant: typeof BUTTON_TYPE.Droplist;
+} & ButtonDroplistProps) | ({
+    variant: typeof BUTTON_TYPE.Quota;
+} & ButtonQuotaProps));
+export type ActionsProps = {
+    items: Action[];
+    maxVisibleItems?: number;
+};

package/dist/cjs/components/Actions/types.js

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

package/dist/cjs/components/Actions/utils.d.ts

@@ -0,0 +1,2 @@
+import { Action } from './types';
+export declare function hasVisibleActions(actions: Action[]): boolean;

package/dist/cjs/components/Actions/utils.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.hasVisibleActions = hasVisibleActions;
+function hasVisibleActions(actions) {
+    return actions.some(action => !action.hidden);
+}

package/dist/cjs/components/DefaultSubtitle/DefaultSubtitle.d.ts

@@ -0,0 +1,12 @@
+import { CopyLineProps } from '@cloud-ru/ds-uikit-product-copy';
+import { WithSupportProps } from '@cloud-ru/ds-utils';
+import { ReactNode } from 'react';
+export type DefaultSubtitleProps = WithSupportProps<{
+    /** Подпись слева */
+    label: string;
+    /** Копируемое значение (пропсы CopyLine) */
+    value: CopyLineProps;
+    /** Тултип-подсказка рядом с подписью */
+    labelTooltip?: ReactNode;
+}>;
+export declare function DefaultSubtitle({ label, labelTooltip, value, ...rest }: DefaultSubtitleProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/DefaultSubtitle/DefaultSubtitle.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DefaultSubtitle = DefaultSubtitle;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const tooltip_1 = require("@cloud-ru/ds-tooltip");
+const uikit_product_copy_1 = require("@cloud-ru/ds-uikit-product-copy");
+const utils_1 = require("@cloud-ru/ds-utils");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function DefaultSubtitle({ label, labelTooltip, value, ...rest }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.subtitle, ...(0, utils_1.extractSupportProps)(rest), children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.label, children: [label, labelTooltip && (0, jsx_runtime_1.jsx)(tooltip_1.QuestionTooltip, { tip: labelTooltip })] }), (0, jsx_runtime_1.jsx)(uikit_product_copy_1.CopyLine, { ...value })] }));
+}

package/dist/cjs/components/DefaultSubtitle/index.d.ts

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

package/dist/cjs/components/DefaultSubtitle/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("./DefaultSubtitle"), exports);

package/dist/cjs/components/DefaultSubtitle/styles.module.css

@@ -0,0 +1,19 @@
+.subtitle{
+  display:flex;
+  flex-direction:row;
+  gap:var(--sn-primitive-dimension-12, 12px);
+  align-items:center;
+}
+
+.label{
+  font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-body-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-m, var(--sn-brand-font-fontWeight-light-regular-body-m, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
+  font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
+  letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
+  display:flex;
+  flex-direction:row;
+  gap:var(--sn-primitive-dimension-4, 4px);
+  align-items:center;
+}

package/dist/cjs/components/Headline/Headline.d.ts

@@ -0,0 +1,2 @@
+import { HeadlineProps } from './types';
+export declare function Headline({ title, actions, moreActions, slotBeforeTitle, slotAfterTitle, subtitle, truncateTitle, ...rest }: HeadlineProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/cjs/components/Headline/Headline.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Headline = Headline;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const truncate_string_1 = require("@cloud-ru/ds-truncate-string");
+const typography_1 = require("@cloud-ru/ds-typography");
+const utils_1 = require("@cloud-ru/ds-utils");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function Headline({ title, actions, moreActions, slotBeforeTitle, slotAfterTitle, subtitle, truncateTitle, ...rest }) {
+    const needsRender = Boolean(title || slotBeforeTitle || slotAfterTitle || subtitle || actions || moreActions);
+    if (!needsRender)
+        return null;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.headline, ...(0, utils_1.extractSupportProps)(rest), children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.headlineLayout, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.titleLayout, children: [slotBeforeTitle && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.prefixButtonWrapper, children: slotBeforeTitle }), (0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: typography_1.VARIANT.headline, size: typography_1.SIZE.s, as: 'h1', className: styles_module_scss_1.default.title, children: truncateTitle ? (0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, { variant: 'end', text: title, maxLines: 1 }) : title }), slotAfterTitle && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.statusWrapper, children: slotAfterTitle }), moreActions && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.moreActions, children: moreActions })] }), Boolean(actions) && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.actions, children: actions })] }), subtitle && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.subtitle, children: subtitle })] }));
+}

package/dist/cjs/components/Headline/index.d.ts

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

package/dist/cjs/components/Headline/index.js

@@ -0,0 +1,18 @@
+"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("./Headline"), exports);
+__exportStar(require("./types"), exports);