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

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

@@ -0,0 +1,50 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button, VIEW } from '@cloud-ru/ds-button';
+import { Tooltip } from '@cloud-ru/ds-tooltip';
+import { ButtonDropdown } from '@cloud-ru/ds-uikit-product-button-predefined';
+import { ButtonDroplist } from './buttons/ButtonDroplist.js';
+import { ButtonKebab } from './buttons/ButtonKebab.js';
+import { ButtonQuota } from './buttons/ButtonQuota.js';
+import { BUTTON_TYPE } from './constants.js';
+/**
+ * Рендерит один action. Составные варианты (`dropdown`/`kebab`/`droplist`) монтируют адаптивные
+ * `@ds`-примитивы, которые берут раскладку из `AdaptiveProvider`. Раскладку фиксируют обёртки
+ * `DesktopActions` / `MobileActions` (`withLayoutType`), поэтому отдельный проп `layoutType` не нужен.
+ */
+export 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 ? (_jsx(Tooltip, { ...tooltip, disableSpanWrapper: true, children: component })) : (component);
+    switch (variant) {
+        case BUTTON_TYPE.Outline:
+            return addTooltip(_jsx(Button, { view: VIEW.Outline, ...buttonProps, ...commonProps }));
+        case BUTTON_TYPE.Tonal:
+            return addTooltip(_jsx(Button, { view: VIEW.Tonal, ...buttonProps, ...commonProps }));
+        case BUTTON_TYPE.Function:
+            return addTooltip(_jsx(Button, { view: VIEW.Function, ...buttonProps, ...commonProps }));
+        case BUTTON_TYPE.Simple:
+            return addTooltip(_jsx(Button, { view: VIEW.Simple, ...buttonProps, ...commonProps }));
+        case BUTTON_TYPE.Dropdown: {
+            return addTooltip(_jsx(ButtonDropdown, { ...buttonProps, ...commonProps }));
+        }
+        case BUTTON_TYPE.Kebab: {
+            const { button, list } = buttonProps;
+            return addTooltip(_jsx(ButtonKebab, { button: { ...button, ...commonProps }, list: list }));
+        }
+        case BUTTON_TYPE.Droplist: {
+            const { button, list } = buttonProps;
+            return addTooltip(_jsx(ButtonDroplist, { button: { ...button, ...commonProps }, list: list }));
+        }
+        case BUTTON_TYPE.Quota: {
+            const quotaProps = buttonProps;
+            return addTooltip(_jsx(ButtonQuota, { ...quotaProps, buttonProps: quotaProps.buttonProps ?? commonProps }));
+        }
+        case BUTTON_TYPE.Filled:
+        default:
+            return addTooltip(_jsx(Button, { view: VIEW.Filled, ...buttonProps, ...commonProps }));
+    }
+}

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

@@ -0,0 +1,10 @@
+import { ActionsProps } from './types.js';
+/**
+ * Десктопная панель действий. Форсирует `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/esm/components/Actions/DesktopActions.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import { LAYOUT_TYPE, withLayoutType } from '@cloud-ru/ds-adaptive';
+import { ActionView } from './ActionView.js';
+import styles from './styles.module.css';
+import { hasVisibleActions } from './utils.js';
+function DesktopActionsBase({ items }) {
+    if (!hasVisibleActions(items)) {
+        return null;
+    }
+    return (_jsx("div", { className: styles.desktopActionsWrapper, children: items.map((action, index) => (_createElement(ActionView, { ...action, key: index, commonProps: {
+                className: styles.button,
+            } }))) }));
+}
+/**
+ * Десктопная панель действий. Форсирует `desktop`-раскладку через `withLayoutType`, чтобы вложенные
+ * адаптивные `@ds`-примитивы (`ButtonDropdown`/`ButtonKebab`/`ButtonDroplist`) рендерили
+ * desktop-popover даже под mobile-провайдером.
+ */
+export const DesktopActions = withLayoutType(DesktopActionsBase, LAYOUT_TYPE.Desktop);

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

@@ -0,0 +1,10 @@
+import { ActionsProps } from './types.js';
+/**
+ * Мобильная панель действий. Форсирует `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/esm/components/Actions/MobileActions.js

@@ -0,0 +1,115 @@
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { LAYOUT_TYPE, withLayoutType } from '@cloud-ru/ds-adaptive';
+import { Button, VIEW } from '@cloud-ru/ds-button';
+import { KebabSVG } from '@cloud-ru/ds-icons/interface/system';
+import { Droplist } from '@cloud-ru/ds-list';
+import { Tooltip } from '@cloud-ru/ds-tooltip';
+import { quotaLocale, QuotaWidget } from '@cloud-ru/ds-uikit-product-quota';
+import { useDynamicList } from '@cloud-ru/ds-utils';
+import { useRef, useState } from 'react';
+import { TEST_IDS } from '../../constants.js';
+import { ActionView } from './ActionView.js';
+import { BUTTON_TYPE } from './constants.js';
+import styles from './styles.module.css';
+import { hasVisibleActions } from './utils.js';
+function MobileActionsBase({ items, maxVisibleItems }) {
+    const containerRef = useRef(null);
+    const [isOpen, setIsOpen] = useState(false);
+    const { visibleItems, hiddenItems } = useDynamicList({ parentContainerRef: containerRef, items, maxVisibleItems });
+    const { t: tQuota } = quotaLocale.useTranslations();
+    if (!hasVisibleActions(items)) {
+        return null;
+    }
+    const hiddenItemsWithKebab = hiddenItems.concat(visibleItems.filter(item => item.variant === BUTTON_TYPE.Kebab));
+    const visibleItemsWithoutKebab = visibleItems.filter(item => item.variant !== BUTTON_TYPE.Kebab);
+    const droplistItems = hiddenItemsWithKebab.reduce((acc, action) => {
+        switch (action.variant) {
+            case BUTTON_TYPE.Tonal:
+            case BUTTON_TYPE.Simple:
+            case BUTTON_TYPE.Outline:
+            case BUTTON_TYPE.Function:
+            case 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 ? (_jsx("a", { href: simpleAction.href, target: '_blank', rel: 'noreferrer', children: item })) : (item);
+                        return action.tooltip ? _jsx(Tooltip, { ...action.tooltip, children: node }) : node;
+                    },
+                });
+                break;
+            }
+            case BUTTON_TYPE.Quota: {
+                // QuotaWidget самодостаточен (свой триггер + dropdown) — рендерим инлайн как inactive-айтем.
+                const quotaWidget = _jsx(QuotaWidget, { ...action, buttonProps: { size: 'm', fullWidth: true } });
+                acc.push({
+                    type: 'group',
+                    label: tQuota('quotas'),
+                    divider: acc.length > 0,
+                    items: [
+                        {
+                            inactive: true,
+                            content: action.tooltip ? _jsx(Tooltip, { ...action.tooltip, children: quotaWidget }) : quotaWidget,
+                        },
+                    ],
+                });
+                break;
+            }
+            case BUTTON_TYPE.Droplist:
+            case BUTTON_TYPE.Kebab: {
+                const needDivider = Boolean(action.variant === BUTTON_TYPE.Droplist && action.button?.label) || acc.length > 0;
+                acc.push({
+                    type: 'group',
+                    label: action.variant === 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 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 (_jsxs("div", { className: styles.mobileActionsWrapper, ref: containerRef, "data-test-id": TEST_IDS.mobileActions.root, children: [droplistItems.length > 0 && (_jsx(Droplist, { size: 'm', open: isOpen, onOpenChange: setIsOpen, items: droplistItems, children: _jsx(Button, { className: styles.button, view: VIEW.Outline, appearance: 'neutral', icon: _jsx(KebabSVG, {}), size: 'm', "data-test-id": TEST_IDS.mobileActions.trigger }) })), visibleItemsWithoutKebab.map((action, index) => (_createElement(ActionView, { ...action, key: index, commonProps: {
+                    className: styles.button,
+                    size: 'm',
+                    fullWidth: true,
+                } })))] }));
+}
+/**
+ * Мобильная панель действий. Форсирует `mobile`-раскладку через `withLayoutType`, чтобы вложенные
+ * адаптивные `@ds`-примитивы (`ButtonDropdown`/`ButtonKebab`/`ButtonDroplist`) рендерили
+ * bottom-sheet даже под desktop-провайдером.
+ */
+export const MobileActions = withLayoutType(MobileActionsBase, LAYOUT_TYPE.Mobile);

package/dist/esm/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/esm/components/Actions/buttons/ButtonDroplist.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button, VIEW } from '@cloud-ru/ds-button';
+import { ChevronDownSVG, ChevronUpSVG } from '@cloud-ru/ds-icons/interface/system';
+import { Droplist } from '@cloud-ru/ds-list';
+import { useValueControl } from '@cloud-ru/ds-utils';
+import { useMemo } from 'react';
+export function ButtonDroplist({ button, list }) {
+    const [open = false, onOpenChange] = useValueControl({ onChange: list.onOpenChange, value: list.open });
+    const Icon = open ? ChevronUpSVG : ChevronDownSVG;
+    const buttonType = button.buttonType ?? 'function';
+    const buttonProps = useMemo(() => buttonType === 'filled'
+        ? { ...button, view: VIEW.Filled, appearance: 'primary' }
+        : { ...button, view: VIEW.Function, appearance: 'neutral', icon: _jsx(Icon, {}), iconPosition: 'after' }, [buttonType, button, Icon]);
+    return (_jsx(Droplist, { ...list, open: open, onOpenChange: onOpenChange, selection: {
+            mode: 'single',
+            value: 'null',
+        }, size: 'm', children: _jsx(Button, { ...buttonProps }) }));
+}

package/dist/esm/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/esm/components/Actions/buttons/ButtonKebab.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button, VIEW } from '@cloud-ru/ds-button';
+import { KebabSVG } from '@cloud-ru/ds-icons/interface/system';
+import { Droplist } from '@cloud-ru/ds-list';
+import { useValueControl } from '@cloud-ru/ds-utils';
+export function ButtonKebab({ button, list }) {
+    const [open = false, onOpenChange] = useValueControl({ onChange: list.onOpenChange, value: list.open });
+    return (_jsx(Droplist, { ...list, open: open, onOpenChange: onOpenChange, selection: {
+            mode: 'single',
+            value: 'null',
+        }, placement: 'bottom-end', size: 'm', children: _jsx(Button, { ...button, view: VIEW.Outline, icon: _jsx(KebabSVG, {}), appearance: 'neutral' }) }));
+}

package/dist/esm/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/esm/components/Actions/buttons/ButtonQuota.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { QuotaWidget } from '@cloud-ru/ds-uikit-product-quota';
+export function ButtonQuota({ buttonProps, ...props }) {
+    return _jsx(QuotaWidget, { ...props, buttonProps: { size: 's', ...buttonProps } });
+}

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

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

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

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

package/dist/esm/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/esm/components/Actions/constants.js

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

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

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

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

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

package/dist/esm/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/esm/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.js';
+import { ButtonKebabProps } from './buttons/ButtonKebab.js';
+import { ButtonQuotaProps } from './buttons/ButtonQuota.js';
+import { BUTTON_TYPE } from './constants.js';
+/**
+ * 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/esm/components/Actions/types.js

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

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

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

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

@@ -0,0 +1,3 @@
+export function hasVisibleActions(actions) {
+    return actions.some(action => !action.hidden);
+}

package/dist/esm/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/esm/components/DefaultSubtitle/DefaultSubtitle.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { QuestionTooltip } from '@cloud-ru/ds-tooltip';
+import { CopyLine } from '@cloud-ru/ds-uikit-product-copy';
+import { extractSupportProps } from '@cloud-ru/ds-utils';
+import styles from './styles.module.css';
+export function DefaultSubtitle({ label, labelTooltip, value, ...rest }) {
+    return (_jsxs("div", { className: styles.subtitle, ...extractSupportProps(rest), children: [_jsxs("div", { className: styles.label, children: [label, labelTooltip && _jsx(QuestionTooltip, { tip: labelTooltip })] }), _jsx(CopyLine, { ...value })] }));
+}

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

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

package/dist/esm/components/DefaultSubtitle/index.js

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

package/dist/esm/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/esm/components/Headline/Headline.d.ts

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

package/dist/esm/components/Headline/Headline.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TruncateString } from '@cloud-ru/ds-truncate-string';
+import { SIZE, Typography, VARIANT } from '@cloud-ru/ds-typography';
+import { extractSupportProps } from '@cloud-ru/ds-utils';
+import styles from './styles.module.css';
+export function Headline({ title, actions, moreActions, slotBeforeTitle, slotAfterTitle, subtitle, truncateTitle, ...rest }) {
+    const needsRender = Boolean(title || slotBeforeTitle || slotAfterTitle || subtitle || actions || moreActions);
+    if (!needsRender)
+        return null;
+    return (_jsxs("div", { className: styles.headline, ...extractSupportProps(rest), children: [_jsxs("div", { className: styles.headlineLayout, children: [_jsxs("div", { className: styles.titleLayout, children: [slotBeforeTitle && _jsx("div", { className: styles.prefixButtonWrapper, children: slotBeforeTitle }), _jsx(Typography, { variant: VARIANT.headline, size: SIZE.s, as: 'h1', className: styles.title, children: truncateTitle ? _jsx(TruncateString, { variant: 'end', text: title, maxLines: 1 }) : title }), slotAfterTitle && _jsx("div", { className: styles.statusWrapper, children: slotAfterTitle }), moreActions && _jsx("div", { className: styles.moreActions, children: moreActions })] }), Boolean(actions) && _jsx("div", { className: styles.actions, children: actions })] }), subtitle && _jsx("div", { className: styles.subtitle, children: subtitle })] }));
+}

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

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

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

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

package/dist/esm/components/Headline/styles.module.css

@@ -0,0 +1,54 @@
+.headline{
+  display:flex;
+  flex-direction:column;
+}
+
+.headlineLayout{
+  display:flex;
+  flex-direction:row;
+  gap:var(--sn-primitive-dimension-8, 8px);
+  align-items:flex-start;
+}
+
+.titleLayout{
+  display:flex;
+  flex-direction:row;
+  gap:var(--sn-primitive-dimension-8, 8px);
+  align-items:flex-start;
+  width:100%;
+  min-width:0;
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
+}
+
+.title{
+  min-width:0;
+}
+
+.prefixButtonWrapper,
+.statusWrapper{
+  display:flex;
+  flex-shrink:0;
+  align-items:center;
+  min-height:var(--sn-regular-headline-s-lineHeight, var(--sn-density-typography-roleHeadline-lineHeightS, var(--sn-primitive-font-lineHeight-by24, 32px)));
+}
+
+.moreActions{
+  display:flex;
+  flex-shrink:0;
+  align-items:center;
+  height:var(--sn-regular-headline-s-lineHeight, var(--sn-density-typography-roleHeadline-lineHeightS, var(--sn-primitive-font-lineHeight-by24, 32px)));
+  margin-left:auto;
+}
+
+.actions{
+  display:flex;
+  flex-shrink:0;
+  gap:var(--sn-primitive-dimension-8, 8px);
+  align-items:center;
+  justify-content:flex-end;
+}
+
+.subtitle{
+  margin-top:var(--sn-primitive-dimension-4, 4px);
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
+}

package/dist/esm/components/Headline/types.d.ts

@@ -0,0 +1,18 @@
+import { WithSupportProps } from '@cloud-ru/ds-utils';
+import { ReactNode } from 'react';
+export type HeadlineProps = WithSupportProps<{
+    /** Заголовок страницы */
+    title: string;
+    /** Слот перед заголовком (например, кнопка «назад») */
+    slotBeforeTitle?: ReactNode;
+    /** Слот после заголовка (например, статус) */
+    slotAfterTitle?: ReactNode;
+    /** Действия справа от заголовка */
+    actions?: ReactNode;
+    /** Слот действий внутри строки заголовка (mobile-рендереры кладут сюда kebab/«ещё») */
+    moreActions?: ReactNode;
+    /** Подзаголовок под заголовком */
+    subtitle?: ReactNode;
+    /** Обрезать заголовок в одну строку с многоточием */
+    truncateTitle?: boolean;
+}>;

package/dist/esm/components/Headline/types.js

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

package/dist/esm/components/PageCatalog/DesktopPageCatalog.d.ts

@@ -0,0 +1,11 @@
+import { WithSupportProps } from '@cloud-ru/ds-utils';
+import { PropsWithChildren } from 'react';
+import { HeadlineProps } from '../Headline/index.js';
+export type DesktopPageCatalogProps = WithSupportProps<PropsWithChildren<Pick<HeadlineProps, 'title' | 'actions'> & {
+    /** CSS-класс */
+    className?: string;
+}>>;
+export declare function DesktopPageCatalog({ children, title, actions, className, ...rest }: DesktopPageCatalogProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace DesktopPageCatalog {
+    var displayName: string;
+}

package/dist/esm/components/PageCatalog/DesktopPageCatalog.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { extractSupportProps } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import { Headline } from '../Headline/index.js';
+import styles from './styles.module.css';
+export function DesktopPageCatalog({ children, title, actions, className, ...rest }) {
+    return (_jsxs("div", { className: cn(styles.catalog, className), ...extractSupportProps(rest), children: [_jsx(Headline, { title: title, actions: actions }), _jsx("div", { className: styles.content, children: children })] }));
+}
+DesktopPageCatalog.displayName = 'DesktopPageCatalog';

package/dist/esm/components/PageCatalog/MobilePageCatalog.d.ts

@@ -0,0 +1,10 @@
+import { WithSupportProps } from '@cloud-ru/ds-utils';
+import { PropsWithChildren } from 'react';
+import { ActionsProps } from '../Actions/index.js';
+import { HeadlineProps } from '../Headline/index.js';
+export type MobilePageCatalogProps = WithSupportProps<PropsWithChildren<Pick<HeadlineProps, 'title'> & {
+    className?: string;
+    actions?: ActionsProps['items'];
+    maxVisibleActionsItems?: ActionsProps['maxVisibleItems'];
+}>>;
+export declare function MobilePageCatalog({ children, title, actions, maxVisibleActionsItems, className, ...rest }: MobilePageCatalogProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/PageCatalog/MobilePageCatalog.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { extractSupportProps } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import { MobileActions } from '../Actions/index.js';
+import { Headline } from '../Headline/index.js';
+import styles from './mobileStyles.module.css';
+export function MobilePageCatalog({ children, title, actions = [], maxVisibleActionsItems, className, ...rest }) {
+    return (_jsxs("div", { className: cn(styles.catalog, className), ...extractSupportProps(rest), children: [_jsx(Headline, { title: title }), actions.length > 0 && _jsx(MobileActions, { items: actions, maxVisibleItems: maxVisibleActionsItems }), _jsx("div", { className: styles.content, children: children })] }));
+}