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

package/dist/cjs/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/cjs/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/cjs/components/Headline/types.js

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

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

@@ -0,0 +1,11 @@
+import { WithSupportProps } from '@cloud-ru/ds-utils';
+import { PropsWithChildren } from 'react';
+import { HeadlineProps } from '../Headline';
+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/cjs/components/PageCatalog/DesktopPageCatalog.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DesktopPageCatalog = DesktopPageCatalog;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("@cloud-ru/ds-utils");
+const classnames_1 = __importDefault(require("classnames"));
+const Headline_1 = require("../Headline");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function DesktopPageCatalog({ children, title, actions, className, ...rest }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.catalog, className), ...(0, utils_1.extractSupportProps)(rest), children: [(0, jsx_runtime_1.jsx)(Headline_1.Headline, { title: title, actions: actions }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.content, children: children })] }));
+}
+DesktopPageCatalog.displayName = 'DesktopPageCatalog';

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

@@ -0,0 +1,10 @@
+import { WithSupportProps } from '@cloud-ru/ds-utils';
+import { PropsWithChildren } from 'react';
+import { ActionsProps } from '../Actions';
+import { HeadlineProps } from '../Headline';
+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/cjs/components/PageCatalog/MobilePageCatalog.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MobilePageCatalog = MobilePageCatalog;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("@cloud-ru/ds-utils");
+const classnames_1 = __importDefault(require("classnames"));
+const Actions_1 = require("../Actions");
+const Headline_1 = require("../Headline");
+const mobileStyles_module_scss_1 = __importDefault(require('./mobileStyles.module.css'));
+function MobilePageCatalog({ children, title, actions = [], maxVisibleActionsItems, className, ...rest }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(mobileStyles_module_scss_1.default.catalog, className), ...(0, utils_1.extractSupportProps)(rest), children: [(0, jsx_runtime_1.jsx)(Headline_1.Headline, { title: title }), actions.length > 0 && (0, jsx_runtime_1.jsx)(Actions_1.MobileActions, { items: actions, maxVisibleItems: maxVisibleActionsItems }), (0, jsx_runtime_1.jsx)("div", { className: mobileStyles_module_scss_1.default.content, children: children })] }));
+}

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

@@ -0,0 +1,13 @@
+import { DesktopPageCatalogProps } from './DesktopPageCatalog';
+import { MobilePageCatalogProps } from './MobilePageCatalog';
+export type PageCatalogProps = Omit<DesktopPageCatalogProps, 'actions'> & Pick<MobilePageCatalogProps, 'actions' | 'maxVisibleActionsItems'>;
+/**
+ * Адаптивный `PageCatalog`: раскладку берёт из `AdaptiveProvider` (контекст). На `mobile` рендерит
+ * `MobilePageCatalog` со структурированными `actions`; на остальных раскладках оборачивает `actions`
+ * в `DesktopActions` и отдаёт `DesktopPageCatalog`. Форс платформы — `withLayoutType` / вложенный
+ * `<AdaptiveProvider layoutType=…>`; пропа `layoutType` у компонента нет.
+ */
+export declare function PageCatalog({ actions, maxVisibleActionsItems, ...props }: PageCatalogProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace PageCatalog {
+    var displayName: string;
+}

package/dist/cjs/components/PageCatalog/PageCatalog.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageCatalog = PageCatalog;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const adaptive_1 = require("@cloud-ru/ds-adaptive");
+const Actions_1 = require("../Actions");
+const DesktopPageCatalog_1 = require("./DesktopPageCatalog");
+const MobilePageCatalog_1 = require("./MobilePageCatalog");
+/**
+ * Адаптивный `PageCatalog`: раскладку берёт из `AdaptiveProvider` (контекст). На `mobile` рендерит
+ * `MobilePageCatalog` со структурированными `actions`; на остальных раскладках оборачивает `actions`
+ * в `DesktopActions` и отдаёт `DesktopPageCatalog`. Форс платформы — `withLayoutType` / вложенный
+ * `<AdaptiveProvider layoutType=…>`; пропа `layoutType` у компонента нет.
+ */
+function PageCatalog({ actions, maxVisibleActionsItems, ...props }) {
+    const { layoutType } = (0, adaptive_1.useAdaptiveLayout)();
+    if ((0, adaptive_1.isMobileLayout)(layoutType)) {
+        return (0, jsx_runtime_1.jsx)(MobilePageCatalog_1.MobilePageCatalog, { actions: actions, maxVisibleActionsItems: maxVisibleActionsItems, ...props });
+    }
+    const actionsNode = actions ? (0, jsx_runtime_1.jsx)(Actions_1.DesktopActions, { items: actions }) : undefined;
+    return (0, jsx_runtime_1.jsx)(DesktopPageCatalog_1.DesktopPageCatalog, { ...props, actions: actionsNode });
+}
+PageCatalog.displayName = 'PageCatalog';

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

@@ -0,0 +1,3 @@
+export * from './PageCatalog';
+export * from './DesktopPageCatalog';
+export * from './MobilePageCatalog';

package/dist/cjs/components/PageCatalog/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("./PageCatalog"), exports);
+__exportStar(require("./DesktopPageCatalog"), exports);
+__exportStar(require("./MobilePageCatalog"), exports);

package/dist/cjs/components/PageCatalog/mobileStyles.module.css

@@ -0,0 +1,15 @@
+.catalog{
+  display:flex;
+  flex-direction:column;
+  gap:var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px));
+  box-sizing:border-box;
+  width:100%;
+  margin:0 auto;
+  padding:var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px));
+}
+
+.content{
+  display:flex;
+  flex-direction:column;
+  flex-grow:1;
+}

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

@@ -0,0 +1,16 @@
+.catalog{
+  display:flex;
+  flex-direction:column;
+  gap:var(--sn-density-spacing-interval-m, var(--sn-primitive-dimension-16, 16px));
+  box-sizing:border-box;
+  min-width:992px;
+  max-width:min(100%, 1248px);
+  margin:0 auto;
+  padding:var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px));
+}
+
+.content{
+  display:flex;
+  flex-direction:column;
+  flex-grow:1;
+}

package/dist/cjs/components/PageForm/DesktopPageForm.d.ts

@@ -0,0 +1,5 @@
+import { DesktopPageFormProps } from './types';
+export declare function DesktopPageForm({ children, stepper, title, subtitle, className, footer, sideBlock, priceSummary, stickyFooter, ...rest }: DesktopPageFormProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace DesktopPageForm {
+    var displayName: string;
+}

package/dist/cjs/components/PageForm/DesktopPageForm.js

@@ -0,0 +1,32 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DesktopPageForm = DesktopPageForm;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const block_1 = require("@cloud-ru/ds-block");
+const button_1 = require("@cloud-ru/ds-button");
+const utils_1 = require("@cloud-ru/ds-utils");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const Headline_1 = require("../Headline");
+const hooks_1 = require("./hooks");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function DesktopPageForm({ children, stepper, title, subtitle, className, footer, sideBlock, priceSummary, stickyFooter, ...rest }) {
+    const getButtonLabel = (0, hooks_1.useGetButtonLabel)();
+    const { sentinelRef, atBottom } = (0, hooks_1.useStickyFooterShadow)(stickyFooter);
+    const moreItems = (0, react_1.useMemo)(() => [priceSummary?.content].concat(sideBlock?.map(item => item.content)).filter(Boolean), [priceSummary?.content, sideBlock]);
+    const PrimaryButton = (0, hooks_1.useButtonWithTooltip)({ view: button_1.VIEW.Filled, tooltip: footer?.buttonPrimary.tooltip });
+    const SecondaryButton = (0, hooks_1.useButtonWithTooltip)({ view: button_1.VIEW.Outline, tooltip: footer?.buttonSecondary?.tooltip });
+    const AdditionalButton = (0, hooks_1.useButtonWithTooltip)({ view: button_1.VIEW.Simple, tooltip: footer?.buttonAdditional?.tooltip });
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.container, className), ...(0, utils_1.extractSupportProps)(rest), children: [(0, jsx_runtime_1.jsxs)(block_1.Block, { size: block_1.SIZE.L, className: styles_module_scss_1.default.form, contentClassName: styles_module_scss_1.default.formContent, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.headline, children: (0, jsx_runtime_1.jsx)(Headline_1.Headline, { title: title, subtitle: subtitle }) }), stepper, (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.body, children: children }), footer && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.footer, {
+                                    [styles_module_scss_1.default.footerSticky]: stickyFooter,
+                                    [styles_module_scss_1.default.footerStuck]: stickyFooter && !atBottom,
+                                }), children: [footer.buttonSecondary && ((0, jsx_runtime_1.jsx)(SecondaryButton, { ...footer.buttonSecondary, size: button_1.SIZE.M, appearance: button_1.APPEARANCE.Neutral, label: footer.buttonSecondary.variant === 'custom'
+                                            ? footer.buttonSecondary.label
+                                            : getButtonLabel(footer.buttonSecondary.variant) })), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.mainActions, children: [footer.buttonAdditional && ((0, jsx_runtime_1.jsx)(AdditionalButton, { ...footer.buttonAdditional, size: button_1.SIZE.M, appearance: button_1.APPEARANCE.Neutral })), (0, jsx_runtime_1.jsx)(PrimaryButton, { ...footer.buttonPrimary, size: button_1.SIZE.M, appearance: button_1.APPEARANCE.Primary, label: footer.buttonPrimary.variant === 'custom'
+                                                    ? footer.buttonPrimary.label
+                                                    : getButtonLabel(footer.buttonPrimary.variant) })] })] }), stickyFooter && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("div", { ref: sentinelRef, className: styles_module_scss_1.default.footerSentinel, "aria-hidden": true }) }))] }))] }), moreItems.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.sideItems, children: moreItems.map((item, index) => ((0, jsx_runtime_1.jsx)("div", { children: item }, index))) }))] }));
+}
+DesktopPageForm.displayName = 'DesktopPageForm';

package/dist/cjs/components/PageForm/MobilePageForm.d.ts

@@ -0,0 +1,11 @@
+import { DesktopPageFormProps } from './types';
+export type MobilePageFormProps = DesktopPageFormProps;
+/**
+ * Мобильный `PageForm`. Форсирует `mobile`-раскладку через `withLayoutType`, чтобы вложенные
+ * адаптивные `@ds`-примитивы (`Dropdown` price-summary, `ModalCustom` sideBlock) рендерили
+ * bottom-sheet даже под desktop-провайдером.
+ */
+export declare const MobilePageForm: {
+    (props: DesktopPageFormProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/cjs/components/PageForm/MobilePageForm.js

@@ -0,0 +1,88 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MobilePageForm = void 0;
+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 dropdown_1 = require("@cloud-ru/ds-dropdown");
+const system_1 = require("@cloud-ru/ds-icons/interface/system");
+const list_1 = require("@cloud-ru/ds-list");
+const modal_1 = require("@cloud-ru/ds-modal");
+const tooltip_1 = require("@cloud-ru/ds-tooltip");
+const typography_1 = require("@cloud-ru/ds-typography");
+const utils_1 = require("@cloud-ru/ds-utils");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const constants_1 = require("../../constants");
+const Headline_1 = require("../Headline");
+const hooks_1 = require("./hooks");
+const mobileStyles_module_scss_1 = __importDefault(require('./mobileStyles.module.css'));
+/** Убирает PageForm-специфичные поля (`variant`/`tooltip`/`size`), оставляя пропсы `@cloud-ru/ds-button` для `ButtonGroup`. */
+function stripFooterButton(button) {
+    const buttonProps = { ...button };
+    delete buttonProps.variant;
+    delete buttonProps.tooltip;
+    delete buttonProps.size;
+    return buttonProps;
+}
+function MobilePageFormBase({ children, title, subtitle, className, footer, stepper, priceSummary, sideBlock, ...rest }) {
+    const [openPriceSummary, setOpenPriceSummary] = (0, react_1.useState)(false);
+    const [openMore, setOpenMore] = (0, react_1.useState)(false);
+    const [openMoreContentIndex, setOpenMoreContentIndex] = (0, react_1.useState)(undefined);
+    const getButtonLabel = (0, hooks_1.useGetButtonLabel)();
+    const footerTooltips = footer && {
+        [button_1.BUTTON_GROUP_ACTION_SLOT.Primary]: footer.buttonPrimary.tooltip,
+        [button_1.BUTTON_GROUP_ACTION_SLOT.Secondary]: footer.buttonSecondary?.tooltip,
+        [button_1.BUTTON_GROUP_ACTION_SLOT.Tertiary]: footer.buttonAdditional?.tooltip,
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(mobileStyles_module_scss_1.default.container, className), ...(0, utils_1.extractSupportProps)(rest), children: [(0, jsx_runtime_1.jsxs)("div", { className: mobileStyles_module_scss_1.default.header, children: [(0, jsx_runtime_1.jsx)(Headline_1.Headline, { title: title, subtitle: subtitle, moreActions: sideBlock ? ((0, jsx_runtime_1.jsx)(list_1.Droplist, { size: 'm', open: openMore, onOpenChange: setOpenMore, items: sideBlock.map(({ label }, idx) => ({
+                                id: idx,
+                                content: {
+                                    label: label,
+                                },
+                                onClick: () => {
+                                    setOpenMoreContentIndex(idx);
+                                    setOpenMore(false);
+                                },
+                            })), children: (0, jsx_runtime_1.jsx)(button_1.Button, { view: button_1.VIEW.Function, appearance: button_1.APPEARANCE.Neutral, icon: (0, jsx_runtime_1.jsx)(system_1.KebabSVG, {}), size: 'm' }) })) : undefined }), stepper] }), sideBlock && ((0, jsx_runtime_1.jsx)(modal_1.ModalCustom, { open: openMoreContentIndex !== undefined, onClose: () => setOpenMoreContentIndex(undefined), 
+                // Высоту листа задаёт сам sideBlock-элемент (`snapPoints`); напр. `[1]` — на всю высоту.
+                // По умолчанию — по высоте контента.
+                snapPoints: sideBlock[openMoreContentIndex ?? 0].snapPoints, children: (0, jsx_runtime_1.jsx)(modal_1.ModalCustom.Body, { content: sideBlock[openMoreContentIndex ?? 0].content }) })), (0, jsx_runtime_1.jsx)("div", { className: mobileStyles_module_scss_1.default.body, children: children }), (priceSummary || footer) && ((0, jsx_runtime_1.jsxs)("div", { className: mobileStyles_module_scss_1.default.footer, children: [priceSummary && ((0, jsx_runtime_1.jsxs)("div", { className: mobileStyles_module_scss_1.default.priceSummary, children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: typography_1.VARIANT.body, size: typography_1.SIZE.m, className: mobileStyles_module_scss_1.default.priceSummaryText, children: "\u041E\u0446\u0435\u043D\u043A\u0430 \u0431\u044E\u0434\u0436\u0435\u0442\u0430" }), (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { open: openPriceSummary, onOpenChange: setOpenPriceSummary, content: (0, jsx_runtime_1.jsx)("div", { className: mobileStyles_module_scss_1.default.modalContent, children: priceSummary.content }), "data-test-id": constants_1.TEST_IDS.pageForm.priceSummarySheet, children: (0, jsx_runtime_1.jsxs)("div", { className: mobileStyles_module_scss_1.default.priceSummaryRight, "data-test-id": constants_1.TEST_IDS.pageForm.priceSummaryTrigger, children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: typography_1.VARIANT.label, size: typography_1.SIZE.l, className: mobileStyles_module_scss_1.default.priceSummaryTotal, children: priceSummary.total }), priceSummary.content && ((0, jsx_runtime_1.jsx)(button_1.Button, { view: button_1.VIEW.Function, appearance: button_1.APPEARANCE.Neutral, size: 'm', icon: (0, jsx_runtime_1.jsx)(system_1.ChevronRightSVG, {}) }))] }) })] })), footer && ((0, jsx_runtime_1.jsx)(button_1.ButtonGroup, { size: 'm', filled: true, 
+                        // 2 кнопки — в ряд (делят ширину); 3 — в столбик (правило футеров).
+                        vertical: [footer.buttonPrimary, footer.buttonSecondary, footer.buttonAdditional].filter(Boolean).length >= 3, renderAction: (button, slot) => {
+                            const tooltip = footerTooltips?.[slot];
+                            // disableSpanWrapper — чтобы кнопка осталась прямым flex-потомком группы (раскладка `filled`).
+                            return ((0, jsx_runtime_1.jsx)(tooltip_1.WithTooltip, { tooltip: tooltip && { ...tooltip, disableSpanWrapper: true }, children: button }));
+                        }, primaryAction: {
+                            ...stripFooterButton(footer.buttonPrimary),
+                            view: button_1.VIEW.Filled,
+                            appearance: button_1.APPEARANCE.Primary,
+                            label: footer.buttonPrimary.variant === 'custom'
+                                ? footer.buttonPrimary.label
+                                : getButtonLabel(footer.buttonPrimary.variant),
+                        }, secondaryAction: footer.buttonSecondary
+                            ? {
+                                ...stripFooterButton(footer.buttonSecondary),
+                                view: button_1.VIEW.Outline,
+                                appearance: button_1.APPEARANCE.Neutral,
+                                label: footer.buttonSecondary.variant === 'custom'
+                                    ? footer.buttonSecondary.label
+                                    : getButtonLabel(footer.buttonSecondary.variant),
+                            }
+                            : undefined, tertiaryAction: footer.buttonAdditional
+                            ? {
+                                ...stripFooterButton(footer.buttonAdditional),
+                                view: button_1.VIEW.Simple,
+                                appearance: button_1.APPEARANCE.Neutral,
+                            }
+                            : undefined }))] }))] }));
+}
+/**
+ * Мобильный `PageForm`. Форсирует `mobile`-раскладку через `withLayoutType`, чтобы вложенные
+ * адаптивные `@ds`-примитивы (`Dropdown` price-summary, `ModalCustom` sideBlock) рендерили
+ * bottom-sheet даже под desktop-провайдером.
+ */
+exports.MobilePageForm = (0, adaptive_1.withLayoutType)(MobilePageFormBase, adaptive_1.LAYOUT_TYPE.Mobile);

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

@@ -0,0 +1,12 @@
+import { DesktopPageFormProps } from './types';
+export type PageFormProps = DesktopPageFormProps;
+/**
+ * Адаптивный `PageForm`: раскладку берёт из `AdaptiveProvider` (контекст). На `mobile` рендерит
+ * `MobilePageForm` (sticky-футер, bottom-sheet для sideBlock / price-summary), на остальных
+ * раскладках — `DesktopPageForm`. Форс платформы — `withLayoutType` / вложенный
+ * `<AdaptiveProvider layoutType=…>`; пропа `layoutType` у компонента нет.
+ */
+export declare function PageForm(props: PageFormProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace PageForm {
+    var displayName: string;
+}

package/dist/cjs/components/PageForm/PageForm.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageForm = PageForm;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const adaptive_1 = require("@cloud-ru/ds-adaptive");
+const DesktopPageForm_1 = require("./DesktopPageForm");
+const MobilePageForm_1 = require("./MobilePageForm");
+/**
+ * Адаптивный `PageForm`: раскладку берёт из `AdaptiveProvider` (контекст). На `mobile` рендерит
+ * `MobilePageForm` (sticky-футер, bottom-sheet для sideBlock / price-summary), на остальных
+ * раскладках — `DesktopPageForm`. Форс платформы — `withLayoutType` / вложенный
+ * `<AdaptiveProvider layoutType=…>`; пропа `layoutType` у компонента нет.
+ */
+function PageForm(props) {
+    const { layoutType } = (0, adaptive_1.useAdaptiveLayout)();
+    if ((0, adaptive_1.isMobileLayout)(layoutType)) {
+        return (0, jsx_runtime_1.jsx)(MobilePageForm_1.MobilePageForm, { ...props });
+    }
+    return (0, jsx_runtime_1.jsx)(DesktopPageForm_1.DesktopPageForm, { ...props });
+}
+PageForm.displayName = 'PageForm';

package/dist/cjs/components/PageForm/hooks.d.ts

@@ -0,0 +1,22 @@
+import { ButtonProps, View } from '@cloud-ru/ds-button';
+import { TooltipProps } from '@cloud-ru/ds-tooltip';
+import { ButtonPrimaryVariant, ButtonSecondaryVariant } from '../../types';
+/**
+ * Возвращает компонент кнопки с заданным `view`. Если передан `tooltip`,
+ * кнопка оборачивается в `Tooltip`. Соответствует легаси-`useButtonWithTooltip`,
+ * где вместо `view` передавался отдельный компонент кнопки (`ButtonFilled`/`ButtonOutline`/`ButtonSimple`).
+ */
+export declare function useButtonWithTooltip({ view, tooltip }: {
+    view: View;
+    tooltip?: TooltipProps;
+}): (props: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Показывает тень у прилипшего футера, пока под ним есть прокручиваемый контент.
+ * Внизу формы стоит sentinel-элемент: когда он попадает в область видимости
+ * (прокрутка дошла до конца), тень скрывается.
+ */
+export declare function useStickyFooterShadow(enabled?: boolean): {
+    sentinelRef: import("react").RefObject<HTMLDivElement>;
+    atBottom: boolean;
+};
+export declare function useGetButtonLabel(): (variant: ButtonPrimaryVariant | ButtonSecondaryVariant) => string;

package/dist/cjs/components/PageForm/hooks.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useButtonWithTooltip = useButtonWithTooltip;
+exports.useStickyFooterShadow = useStickyFooterShadow;
+exports.useGetButtonLabel = useGetButtonLabel;
+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 react_1 = require("react");
+const locale_1 = require("../../locale");
+/**
+ * Возвращает компонент кнопки с заданным `view`. Если передан `tooltip`,
+ * кнопка оборачивается в `Tooltip`. Соответствует легаси-`useButtonWithTooltip`,
+ * где вместо `view` передавался отдельный компонент кнопки (`ButtonFilled`/`ButtonOutline`/`ButtonSimple`).
+ */
+function useButtonWithTooltip({ view, tooltip }) {
+    if (tooltip) {
+        return function ButtonWithTooltip(props) {
+            return ((0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { ...tooltip, children: (0, jsx_runtime_1.jsx)(button_1.Button, { view: view, ...props }) }));
+        };
+    }
+    return function ButtonWithView(props) {
+        return (0, jsx_runtime_1.jsx)(button_1.Button, { view: view, ...props });
+    };
+}
+/**
+ * Показывает тень у прилипшего футера, пока под ним есть прокручиваемый контент.
+ * Внизу формы стоит sentinel-элемент: когда он попадает в область видимости
+ * (прокрутка дошла до конца), тень скрывается.
+ */
+function useStickyFooterShadow(enabled) {
+    const sentinelRef = (0, react_1.useRef)(null);
+    const [atBottom, setAtBottom] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        const sentinel = sentinelRef.current;
+        if (!enabled || !sentinel || typeof IntersectionObserver === 'undefined') {
+            setAtBottom(false);
+            return undefined;
+        }
+        const observer = new IntersectionObserver(([entry]) => setAtBottom(entry.isIntersecting), { threshold: 1 });
+        observer.observe(sentinel);
+        return () => observer.disconnect();
+    }, [enabled]);
+    return { sentinelRef, atBottom };
+}
+function useGetButtonLabel() {
+    const { t } = locale_1.pageLayoutLocale.useTranslations();
+    return function getButtonLabel(variant) {
+        return t(`PageForm.${variant}`);
+    };
+}

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

@@ -0,0 +1,4 @@
+export * from './PageForm';
+export * from './DesktopPageForm';
+export * from './MobilePageForm';
+export * from './types';

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

@@ -0,0 +1,20 @@
+"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("./PageForm"), exports);
+__exportStar(require("./DesktopPageForm"), exports);
+__exportStar(require("./MobilePageForm"), exports);
+__exportStar(require("./types"), exports);

package/dist/cjs/components/PageForm/mobileStyles.module.css

@@ -0,0 +1,75 @@
+.container{
+  position:relative;
+  z-index:0;
+  display:flex;
+  flex-direction:column;
+  flex-grow:1;
+  gap:var(--sn-primitive-dimension-16, 16px);
+  box-sizing:border-box;
+  width:100%;
+  min-height:100%;
+  padding:var(--sn-primitive-dimension-16, 16px);
+  background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
+}
+
+.body{
+  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));
+  flex:1;
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
+  background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
+}
+
+.footer{
+  position:sticky;
+  z-index:1;
+  bottom:0;
+  display:flex;
+  flex-direction:column;
+  gap:var(--sn-primitive-dimension-8, 8px);
+  box-sizing:border-box;
+  margin:0 calc(0px - var(--sn-primitive-dimension-16, 16px)) calc(0px - var(--sn-primitive-dimension-16, 16px));
+  padding:var(--sn-primitive-dimension-8, 8px) var(--sn-primitive-dimension-16, 16px) var(--sn-primitive-dimension-16, 16px);
+  border-top:var(--sn-primitive-strokeWeight-strokeRegular, 1px) solid var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
+  background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
+}
+
+.priceSummary{
+  display:flex;
+  gap:var(--sn-primitive-dimension-4, 4px);
+  align-items:center;
+  justify-content:space-between;
+  min-height:var(--sn-primitive-dimension-40, 40px);
+}
+
+.priceSummaryText{
+  color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(65, 66, 78, 0.8)));
+}
+
+.priceSummaryRight{
+  cursor:pointer;
+  display:flex;
+  align-items:center;
+}
+
+.header{
+  position:sticky;
+  z-index:1;
+  top:0;
+  display:flex;
+  flex-direction:column;
+  gap:var(--sn-primitive-dimension-16, 16px);
+  box-sizing:border-box;
+  margin:calc(0px - var(--sn-primitive-dimension-16, 16px)) calc(0px - var(--sn-primitive-dimension-16, 16px)) 0;
+  padding:var(--sn-primitive-dimension-16, 16px);
+  border-bottom:var(--sn-primitive-strokeWeight-strokeRegular, 1px) solid var(--sn-theme-color-available-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
+  background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
+}
+
+.modalContent{
+  padding:0 var(--sn-primitive-dimension-16, 16px);
+}