@cloud-ru/ds-popup-private 1.0.0

package/dist/cjs/context/overlaySurface.d.ts

@@ -0,0 +1,35 @@
+import { ValueOf } from '@cloud-ru/ds-utils';
+import { ReactNode } from 'react';
+/** Поверхность overlay'я, в которой рендерятся общие слоты (`Header` / `Body` / `Footer` / `Media`). */
+export declare const OVERLAY_SURFACE: {
+    readonly Modal: "modal";
+    readonly Drawer: "drawer";
+    readonly Sheet: "sheet";
+};
+export type OverlaySurface = ValueOf<typeof OVERLAY_SURFACE>;
+/**
+ * Сегмент коллекции `popupPrivate.anatomy.*`, из которого слоты берут токены раскладки.
+ * Modal и Drawer(desktop) рисуются мастером `window`; Sheet — `bottomSheet`.
+ */
+export declare const SURFACE_TOKEN_SEGMENT: {
+    readonly modal: "window";
+    readonly drawer: "window";
+    readonly sheet: "bottomSheet";
+};
+export type SurfaceTokenSegment = ValueOf<typeof SURFACE_TOKEN_SEGMENT>;
+type OverlaySurfaceProviderProps = {
+    /** Поверхность, в которой рендерятся дочерние слоты. */
+    surface: OverlaySurface;
+    /** Только drawer: высота панели по контенту → `Body` (drawer-ветка) добавляет соответствующий класс. */
+    bodyHeightAuto?: boolean;
+    children: ReactNode;
+};
+/** Провайдер поверхности overlay'я. Frame (sheet / modal / drawer) оборачивает в него свои слоты. */
+export declare function OverlaySurfaceProvider({ surface, bodyHeightAuto, children }: OverlaySurfaceProviderProps): import("react/jsx-runtime").JSX.Element;
+/** Текущая поверхность overlay'я. Без провайдера возвращает `'sheet'`. */
+export declare function useOverlaySurface(): OverlaySurface;
+/** Только drawer-ветка `Body`: высота панели по контенту (из `DrawerFrame`). */
+export declare function useOverlayBodyHeightAuto(): boolean;
+/** Токен-сегмент текущей поверхности (`window` / `bottomSheet`). Без провайдера — `bottomSheet`. */
+export declare function useSurfaceTokenSegment(): SurfaceTokenSegment;
+export {};

package/dist/cjs/context/overlaySurface.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SURFACE_TOKEN_SEGMENT = exports.OVERLAY_SURFACE = void 0;
+exports.OverlaySurfaceProvider = OverlaySurfaceProvider;
+exports.useOverlaySurface = useOverlaySurface;
+exports.useOverlayBodyHeightAuto = useOverlayBodyHeightAuto;
+exports.useSurfaceTokenSegment = useSurfaceTokenSegment;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+/** Поверхность overlay'я, в которой рендерятся общие слоты (`Header` / `Body` / `Footer` / `Media`). */
+exports.OVERLAY_SURFACE = {
+    Modal: 'modal',
+    Drawer: 'drawer',
+    Sheet: 'sheet',
+};
+/**
+ * Сегмент коллекции `popupPrivate.anatomy.*`, из которого слоты берут токены раскладки.
+ * Modal и Drawer(desktop) рисуются мастером `window`; Sheet — `bottomSheet`.
+ */
+exports.SURFACE_TOKEN_SEGMENT = {
+    [exports.OVERLAY_SURFACE.Modal]: 'window',
+    [exports.OVERLAY_SURFACE.Drawer]: 'window',
+    [exports.OVERLAY_SURFACE.Sheet]: 'bottomSheet',
+};
+// Дефолт `'sheet'`: слоты без провайдера ведут себя как bottom-sheet.
+const OverlaySurfaceContext = (0, react_1.createContext)({
+    surface: exports.OVERLAY_SURFACE.Sheet,
+    bodyHeightAuto: false,
+});
+/** Провайдер поверхности overlay'я. Frame (sheet / modal / drawer) оборачивает в него свои слоты. */
+function OverlaySurfaceProvider({ surface, bodyHeightAuto = false, children }) {
+    return ((0, jsx_runtime_1.jsx)(OverlaySurfaceContext.Provider, { value: { surface, bodyHeightAuto }, children: children }));
+}
+/** Текущая поверхность overlay'я. Без провайдера возвращает `'sheet'`. */
+function useOverlaySurface() {
+    return (0, react_1.useContext)(OverlaySurfaceContext).surface;
+}
+/** Только drawer-ветка `Body`: высота панели по контенту (из `DrawerFrame`). */
+function useOverlayBodyHeightAuto() {
+    return (0, react_1.useContext)(OverlaySurfaceContext).bodyHeightAuto;
+}
+/** Токен-сегмент текущей поверхности (`window` / `bottomSheet`). Без провайдера — `bottomSheet`. */
+function useSurfaceTokenSegment() {
+    return exports.SURFACE_TOKEN_SEGMENT[useOverlaySurface()];
+}

package/dist/cjs/index.d.ts

@@ -0,0 +1,4 @@
+export * from './components';
+export * from './constants';
+export * from './context/overlaySurface';
+export * from './types';

package/dist/cjs/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("./components"), exports);
+__exportStar(require("./constants"), exports);
+__exportStar(require("./context/overlaySurface"), exports);
+__exportStar(require("./types"), exports);

package/dist/cjs/package.json

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

package/dist/cjs/style.css

@@ -0,0 +1,332 @@
+.actions{
+  width:100%;
+}
+.actions > *{
+  max-width:100%;
+}
+
+.single{
+  justify-content:flex-end;
+}
+
+.compact{
+  align-self:flex-end;
+  justify-content:flex-end;
+  width:auto;
+}
+
+.actions.stackInverted{
+  flex-direction:column;
+}
+.root{
+  touch-action:pan-y;
+  overflow-y:auto;
+  overscroll-behavior:contain;
+  flex:1 1 auto;
+  box-sizing:border-box;
+  min-height:0;
+  padding:var(--sn-bottomSheet-anatomy-container-content-bodyWrapper-paddingTop, var(--sn-density-spacing-interval-m, var(--sn-primitive-dimension-16, 16px))) var(--sn-bottomSheet-anatomy-container-content-bodyWrapper-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px))) var(--sn-bottomSheet-anatomy-container-content-bodyWrapper-paddingBottom, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px))) var(--sn-bottomSheet-anatomy-container-content-bodyWrapper-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
+  color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-45, var(--sn-primitive-color-gray-45, #81869c)));
+}
+
+.root[data-no-padding]{
+  padding-top:0;
+  padding-right:0;
+  padding-left:0;
+}
+@charset "UTF-8";
+.stateLayer{
+  visibility:initial;
+}
+
+.root{
+  cursor:pointer;
+  position:relative;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  box-sizing:border-box;
+  margin:var(--sn-popupPrivate-anatomy-window-badgeButtonClosed-paddingTop, var(--sn-brand-anatomy-spacing-window-badgeButtonClosed-paddingTop, var(--sn-primitive-dimension-48, 48px))) var(--sn-popupPrivate-anatomy-window-badgeButtonClosed-paddingRight, var(--sn-brand-anatomy-spacing-window-badgeButtonClosed-paddingRight, var(--sn-primitive-dimension-48, 48px))) var(--sn-popupPrivate-anatomy-window-badgeButtonClosed-paddingBottom, var(--sn-brand-anatomy-spacing-window-badgeButtonClosed-paddingBottom, var(--sn-primitive-dimension-0, 0px))) var(--sn-popupPrivate-anatomy-window-badgeButtonClosed-paddingLeft, var(--sn-brand-anatomy-spacing-window-badgeButtonClosed-paddingLeft, var(--sn-primitive-dimension-0, 0px)));
+  padding:0;
+  border:0 solid transparent;
+  color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-45, var(--sn-primitive-color-gray-45, #81869c)));
+  background:transparent;
+  outline:0;
+  min-width:var(--sn-popupPrivate-anatomy-window-badgeButtonClosed-buttonClosed-minWidth, var(--sn-primitive-dimension-32, 32px));
+  min-height:var(--sn-popupPrivate-anatomy-window-badgeButtonClosed-buttonClosed-minHeight, var(--sn-primitive-dimension-32, 32px));
+  border-radius:var(--sn-popupPrivate-anatomy-window-badgeButtonClosed-buttonClosed-borderRadius, var(--sn-brand-anatomy-radius-window-buttonClosed-m, var(--sn-primitive-dimension-full, 10000px)));
+}
+.root .stateLayer{
+  position:absolute;
+  inset:0;
+  border-radius:inherit;
+}
+.root .stateLayer[data-state=borderOnBackground]{
+  border-color:var(--sn-theme-color-material-stateLayer-neutral-border-default-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
+  border-style:solid;
+  border-width:var(--sn-primitive-strokeWeight-strokeRegular, 1px);
+}
+.root .stateLayer[data-state=emptyNeutralOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-defaultEmpty-filled, var(--sn-brand-color-state-neutral-forLightMode-default-background, rgba(120, 123, 138, 0)));
+}
+.root .stateLayer[data-state=activatedOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, var(--sn-brandRole-color-brandA-backgroundActivatedDefault, rgba(56, 159, 116, 0.1490196078))));
+}
+.root .stateLayer[data-state=versionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
+}
+.root .stateLayer[data-state=emptyVersionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-defaultEmpty-filled, rgba(0, 0, 0, 0));
+}
+.root .stateLayer[data-state=inversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-default-filled, rgba(255, 255, 255, 0.1019607843));
+}
+.root .stateLayer[data-state=emptyInversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-defaultEmpty-filled, rgba(255, 255, 255, 0));
+}
+.root .stateLayer[data-state=emptyDarkOnAccent]{
+  background:var(--sn-theme-color-material-stateLayer-darkOnAccent-defaultEmpty-filled, rgba(0, 0, 0, 0));
+}
+@media (hover: hover){
+  .root:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground]{
+    border-color:var(--sn-theme-color-material-stateLayer-neutral-border-hovered-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-hovered-borderColor, rgba(159, 166, 198, 0.6509803922)));
+  }
+  .root:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground]{
+    background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(188, 195, 220, 0.1490196078)));
+  }
+  .root:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
+    background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, var(--sn-brandRole-color-brandA-backgroundActivatedHovered, rgba(56, 159, 116, 0.3490196078))));
+  }
+  .root:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
+  }
+  .root:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyVersionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
+  }
+  .root:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=inversionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-inversionOnColor-hovered-filled, rgba(255, 255, 255, 0.1490196078));
+  }
+  .root:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyInversionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-inversionOnColor-hovered-filled, rgba(255, 255, 255, 0.1490196078));
+  }
+  .root:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyDarkOnAccent]{
+    background:var(--sn-theme-color-material-stateLayer-darkOnAccent-hovered-filled, rgba(0, 0, 0, 0.0588235294));
+  }
+}
+.root{
+}
+.root[data-loading] .stateLayer[data-state=borderOnBackground], .root:active:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground], .root[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground]{
+  border-color:var(--sn-theme-color-material-stateLayer-neutral-border-pressed-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-pressed-borderColor, rgba(159, 166, 198, 0.8)));
+}
+.root[data-loading] .stateLayer[data-state=emptyNeutralOnBackground], .root:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground], .root[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled, var(--sn-brand-color-state-neutral-forLightMode-pressed-background, rgba(188, 195, 220, 0.3019607843)));
+}
+.root[data-loading] .stateLayer[data-state=activatedOnBackground], .root:active:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground], .root[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, var(--sn-brandRole-color-brandA-backgroundActivatedPressed, rgba(56, 159, 116, 0.4509803922))));
+}
+.root[data-loading] .stateLayer[data-state=versionOnColor], .root:active:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor], .root[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
+}
+.root[data-loading] .stateLayer[data-state=emptyVersionOnColor], .root:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyVersionOnColor], .root[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyVersionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
+}
+.root[data-loading] .stateLayer[data-state=inversionOnColor], .root:active:not([data-disabled], [data-loading]) .stateLayer[data-state=inversionOnColor], .root[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=inversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-pressed-filled, rgba(255, 255, 255, 0.0509803922));
+}
+.root[data-loading] .stateLayer[data-state=emptyInversionOnColor], .root:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyInversionOnColor], .root[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyInversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-pressed-filled, rgba(255, 255, 255, 0.0509803922));
+}
+.root[data-loading] .stateLayer[data-state=emptyDarkOnAccent], .root:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyDarkOnAccent], .root[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyDarkOnAccent]{
+  background:var(--sn-theme-color-material-stateLayer-darkOnAccent-pressed-filled, rgba(0, 0, 0, 0.1215686275));
+}
+.root:focus-visible{
+  outline:var(--sn-theme-color-available-complementary, #000000) solid var(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
+  outline-offset:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
+}
+.root{
+  display:flex;
+  flex-shrink:0;
+  box-sizing:border-box;
+}
+.root[data-surface=bottomSheet]{
+  touch-action:none;
+  flex-direction:column;
+  align-items:stretch;
+  justify-content:center;
+  padding:var(--sn-popupPrivate-anatomy-bottomSheet-footer-paddingTop, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px))) var(--sn-popupPrivate-anatomy-bottomSheet-footer-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px))) var(--sn-popupPrivate-anatomy-bottomSheet-footer-paddingBottom, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px))) var(--sn-popupPrivate-anatomy-bottomSheet-footer-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
+}
+.root[data-surface=window]{
+  align-items:center;
+  align-self:stretch;
+  padding-left:var(--sn-popupPrivate-anatomy-window-footer-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
+  padding-right:var(--sn-popupPrivate-anatomy-window-footer-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
+  padding-bottom:var(--sn-popupPrivate-anatomy-window-footer-paddingBottom, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
+}
+
+.contentWrapper{
+  display:flex;
+  flex-direction:column;
+}
+[data-surface=bottomSheet] .contentWrapper{
+  gap:var(--sn-density-spacing-interval-m, var(--sn-primitive-dimension-16, 16px));
+}
+[data-surface=window] .contentWrapper{
+  flex:1 0 0;
+  align-items:flex-start;
+  justify-content:center;
+}
+.root{
+  display:flex;
+  flex-direction:column;
+  flex-shrink:0;
+  box-sizing:border-box;
+}
+.root[data-surface=bottomSheet]{
+  gap:var(--sn-popupPrivate-anatomy-bottomSheet-header-gap, var(--sn-density-spacing-interval-xs, var(--sn-primitive-dimension-4, 4px)));
+  padding-top:var(--sn-popupPrivate-anatomy-bottomSheet-header-paddingTop, var(--sn-density-spacing-interval-m, var(--sn-primitive-dimension-16, 16px)));
+  padding-bottom:var(--sn-popupPrivate-anatomy-bottomSheet-header-paddingBottom, var(--sn-density-spacing-interval-m, var(--sn-primitive-dimension-16, 16px)));
+}
+.root[data-surface=window]{
+  align-items:flex-start;
+  align-self:stretch;
+  justify-content:center;
+  gap:var(--sn-popupPrivate-anatomy-window-header-gap, var(--sn-density-spacing-interval-xs, var(--sn-primitive-dimension-4, 4px)));
+  padding-bottom:var(--sn-popupPrivate-anatomy-window-header-paddingBottom, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
+}
+.root[data-surface=window]:not([data-with-before]){
+  gap:0;
+}
+
+.headlineWrapper{
+  display:flex;
+  align-items:center;
+}
+[data-surface=bottomSheet] .headlineWrapper{
+  touch-action:none;
+  gap:0;
+}
+[data-surface=bottomSheet] .headlineWrapper[data-with-before], [data-surface=bottomSheet] .headlineWrapper[data-with-after]{
+  gap:var(--sn-popupPrivate-anatomy-bottomSheet-header-headline-gap, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px)));
+}
+[data-surface=bottomSheet] .headlineWrapper[data-with-before]{
+  padding-left:var(--sn-popupPrivate-anatomy-bottomSheet-header-headline-paddingLeft, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px)));
+}
+[data-surface=bottomSheet] .headlineWrapper[data-with-after]{
+  padding-right:var(--sn-popupPrivate-anatomy-bottomSheet-header-headline-paddingRight, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px)));
+}
+[data-surface=window] .headlineWrapper{
+  align-self:stretch;
+  gap:var(--sn-popupPrivate-anatomy-window-header-headline-gap, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px)));
+  height:var(--sn-popupPrivate-anatomy-window-header-headline-height, var(--sn-density-size-m, var(--sn-primitive-dimension-56, 56px)));
+  padding-left:var(--sn-popupPrivate-anatomy-window-header-headline-paddingHorizontal, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px)));
+  padding-right:var(--sn-popupPrivate-anatomy-window-header-headline-paddingHorizontal, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px)));
+  padding-right:0;
+}
+[data-surface=window] .headlineWrapper:not([data-with-before]){
+  padding-left:0;
+}
+
+.headline{
+  display:flex;
+  align-items:center;
+  box-sizing:border-box;
+  min-width:0;
+}
+[data-surface=bottomSheet] .headline{
+  flex:1 1 auto;
+  gap:var(--sn-popupPrivate-anatomy-bottomSheet-header-headline-headlineWrapper-gap, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px)));
+  padding-top:var(--sn-popupPrivate-anatomy-bottomSheet-header-headline-headlineWrapper-paddingVertical, var(--sn-primitive-dimension-10, 10px));
+  padding-bottom:var(--sn-popupPrivate-anatomy-bottomSheet-header-headline-headlineWrapper-paddingVertical, var(--sn-primitive-dimension-10, 10px));
+}
+[data-surface=window] .headline{
+  flex:1 0 0;
+  gap:var(--sn-popupPrivate-anatomy-window-header-headline-headlineWrapper-gap, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px)));
+  padding-left:var(--sn-popupPrivate-anatomy-window-header-headline-headlineWrapper-paddingLeft, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
+  padding-right:var(--sn-popupPrivate-anatomy-window-header-headline-headlineWrapper-paddingRight, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
+}
+
+[data-surface=bottomSheet] .headlineWrapper:not([data-with-before]) .headline{
+  padding-left:var(--sn-popupPrivate-anatomy-bottomSheet-header-headline-headlineWrapper-paddingLeft, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
+}
+
+[data-surface=bottomSheet] .headlineWrapper:not([data-with-after]) .headline{
+  padding-right:var(--sn-popupPrivate-anatomy-bottomSheet-header-headline-headlineWrapper-paddingRight, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
+}
+
+[data-surface=window] .headlineWrapper[data-with-before] .headline{
+  padding-left:0;
+}
+
+.title{
+  flex:0 1 auto;
+  min-width:0;
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
+}
+
+.slotAfterTitle{
+  display:inline-flex;
+  flex:1 1 auto;
+  align-items:center;
+  min-width:0;
+}
+
+.actionButton{
+  display:inline-flex;
+  flex-shrink:0;
+  align-items:center;
+}
+
+.subtitleWrapper{
+  display:flex;
+  flex-direction:column;
+  align-items:flex-start;
+  box-sizing:border-box;
+}
+[data-surface=bottomSheet] .subtitleWrapper{
+  padding-right:var(--sn-popupPrivate-anatomy-bottomSheet-header-subHeadlineWrapper-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
+  padding-left:var(--sn-popupPrivate-anatomy-bottomSheet-header-subHeadlineWrapper-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
+}
+[data-surface=window] .subtitleWrapper{
+  align-self:stretch;
+  padding-left:var(--sn-popupPrivate-anatomy-window-header-subHeadlineWrapper-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
+  padding-right:var(--sn-popupPrivate-anatomy-window-header-subHeadlineWrapper-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
+}
+
+.subtitle{
+  color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(65, 66, 78, 0.8)));
+}
+
+.secondWrapper{
+  box-sizing:border-box;
+}
+[data-surface=bottomSheet] .secondWrapper{
+  padding-left:var(--sn-popupPrivate-anatomy-bottomSheet-header-secondWrapper-paddingHorizontal, var(--sn-popupPrivate-anatomy-bottomSheet-header-headline-headlineWrapper-gap, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px))));
+  padding-right:var(--sn-popupPrivate-anatomy-bottomSheet-header-secondWrapper-paddingHorizontal, var(--sn-popupPrivate-anatomy-bottomSheet-header-headline-headlineWrapper-gap, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px))));
+}
+.wrapper{
+  touch-action:none;
+  overflow:hidden;
+  display:flex;
+  flex-shrink:0;
+  align-items:center;
+  justify-content:center;
+  box-sizing:border-box;
+  width:100%;
+}
+.wrapper[data-media-kind=icon]{
+  padding-top:var(--sn-popupPrivate-anatomy-window-media-icon-paddingTop, var(--sn-primitive-dimension-32, 32px));
+}
+
+.image{
+  display:block;
+  width:100%;
+  min-height:184px;
+  -o-object-fit:cover;
+     object-fit:cover;
+}
+
+.icon{
+  display:block;
+  max-width:100%;
+  height:auto;
+}

package/dist/cjs/types.d.ts

@@ -0,0 +1,95 @@
+import { ButtonProps } from '@cloud-ru/ds-button';
+import { ValueOf, WithSupportProps } from '@cloud-ru/ds-utils';
+import { PropsWithChildren, ReactNode } from 'react';
+import { FOOTER_ACTIONS_ORIENTATION, MEDIA_KIND } from './constants';
+/**
+ * Пропсы action-кнопки футера — объект пропсов `Button` из `@cloud-ru/ds-button`. `view` / `appearance` имеют
+ * дефолты по слоту (переопределяемы); `size` (m) и full-width задаёт `ButtonGroup`, поэтому исключены.
+ * `data-test-id` слота фиксирует `TEST_IDS` (через `WithSupportProps` у `ButtonGroup`).
+ *
+ * По умолчанию рендерится как `<button>`. Для CTA-ссылки передайте `as='a'` + `href` (`Button`
+ * полиморфен и отрендерит `<a>` — доступен middle-click / контекстное меню). Union `button | anchor`
+ * ниже раскрывает анкорные атрибуты. Для нестандартного футера остаётся `footer: ReactNode`.
+ */
+export type BottomSheetActionButton = Omit<ButtonProps<'button'>, 'fullWidth' | 'size'> | Omit<ButtonProps<'a'>, 'fullWidth' | 'size'>;
+export type MediaKind = ValueOf<typeof MEDIA_KIND>;
+export type FooterActionsOrientation = ValueOf<typeof FOOTER_ACTIONS_ORIENTATION>;
+export type PopupMediaProps = {
+    /** URL изображения / иконки. */
+    src: string;
+    /** Альтернативный текст (a11y). */
+    alt: string;
+    /**
+     * Режим:
+     * - `'image'` — изображение во всю ширину (высота `184px`), прижато к шапке (убирается
+     *   верхний отступ контент-блока). Горизонтальные паддинги body не затрагивает — для edge-to-edge body
+     *   используйте `bodyPadding={false}` отдельно.
+     * - `'icon'` — иконка с `padding-top: 24px`.
+     * @default 'image'
+     */
+    kind?: MediaKind;
+};
+export type PopupHeaderProps = WithSupportProps<{
+    /** Заголовок. Типографика зависит от поверхности: `title-l` на sheet, `headline-s` на window (modal/drawer). */
+    title?: ReactNode;
+    /** `id` заголовка — для связи с `aria-labelledby` dialog'а (accessible name). */
+    titleId?: string;
+    /** Slot справа от title (например, `QuestionTooltip` из `@cloud-ru/ds-tooltip`). */
+    slotAfterTitle?: ReactNode;
+    /** Текстовая строка-подзаголовок под title (Figma `subtitleWrapper`). Рендерится на всех поверхностях. */
+    subtitle?: ReactNode;
+    /**
+     * Slot под подзаголовком (Figma `secondWrapper`) — типично `SearchBar`, `SegmentControl` или `Filter`.
+     * Есть только в мастере `bottomSheet`, поэтому рендерится **только** на sheet-поверхности.
+     */
+    slotSecondTitle?: ReactNode;
+    /**
+     * Callback клика на back-кнопку (слева в шапке).
+     * Наличие callback'а авто-рендерит `Button view='function' icon={<ArrowLeftSVG />}`.
+     */
+    onBackButtonClick?(): void;
+    /** Slot справа от headline-строки (любой `ReactNode`, обычно `Button` с иконкой). */
+    actionButton?: ReactNode;
+    /**
+     * Усечение строковых `title`/`subtitle` через `TruncateString` (число строк). Применяется только
+     * когда задано — по умолчанию текст не усекается. Актуально для window-поверхности (modal/drawer),
+     * где длинный заголовок иначе переносится на несколько строк.
+     */
+    truncate?: {
+        title?: number;
+        subtitle?: number;
+    };
+    /**
+     * Переопределение `data-test-id` слотов шапки. Каждый пропущенный ключ берётся из `TEST_IDS`.
+     * Потребитель-обёртка (drawer/modal) прокидывает сюда свои id, чтобы сохранить публичный контракт.
+     */
+    testIds?: PopupHeaderTestIds;
+    /** CSS-класс контейнера header'а. */
+    className?: string;
+}>;
+/** `data-test-id` слотов `PopupHeader` — для переопределения потребителем. */
+export type PopupHeaderTestIds = {
+    header?: string;
+    title?: string;
+    slotAfterTitle?: string;
+    subtitle?: string;
+    slotSecondTitle?: string;
+    backButton?: string;
+    actionButton?: string;
+};
+export type PopupBodyProps = WithSupportProps<PropsWithChildren<{
+    /** Содержимое body (альтернатива `children`). */
+    content?: ReactNode;
+    /**
+     * Горизонтальные паддинги body. При `false` контент идёт во всю ширину sheet'а (edge-to-edge) —
+     * для карт, изображений, списков без отступов. Соответствует Figma-оси `padding=false`.
+     * @default true
+     */
+    bodyPadding?: boolean;
+    /** CSS-класс контейнера body. */
+    className?: string;
+}>>;
+export type PopupFooterProps = WithSupportProps<PropsWithChildren<{
+    /** CSS-класс контейнера footer'а. */
+    className?: string;
+}>>;

package/dist/cjs/types.js

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

package/dist/esm/components/FooterActions/FooterActions.d.ts

@@ -0,0 +1,44 @@
+import { Size } from '@cloud-ru/ds-button';
+import { ReactNode } from 'react';
+import { SurfaceTokenSegment } from '../../context/overlaySurface.js';
+import { BottomSheetActionButton, FooterActionsOrientation } from '../../types.js';
+/** Идентификаторы слотов кнопок футера. */
+export type FooterActionsTestIds = {
+    approve: string;
+    cancel: string;
+    additional: string;
+};
+export type FooterActionsProps = {
+    /** Основная кнопка (по умолчанию `view='filled'`, `appearance='primary'`). */
+    approveButton?: BottomSheetActionButton;
+    /** Кнопка отмены (по умолчанию `view='outline'`, `appearance='neutral'`). */
+    cancelButton?: BottomSheetActionButton;
+    /** Дополнительная (третья) кнопка (по умолчанию `view='simple'`, `appearance='neutral'`). */
+    additionalButton?: BottomSheetActionButton;
+    /**
+     * Размер кнопок футера. Задаётся на уровне группы (как в `ButtonGroup`), не по кнопке —
+     * в макетах все действия футера одного размера. Нужен потребителям с собственной осью
+     * размера (календарные дропдауны: 24 / 32 / 40 при s / m / l). У modal, drawer и
+     * bottom-sheet своей оси нет, но кит рисует их футеры на `l` — эти поверхности
+     * передают `size='l'` явно.
+     */
+    size?: Size;
+    /** Ориентация кнопок при ровно двух действиях. */
+    footerActionsOrientation?: FooterActionsOrientation;
+    /** Идентификаторы слотов конкретного компонента (`bottom-sheet` / `modal` / `drawer`). */
+    testIds: FooterActionsTestIds;
+    /** Доп. CSS-класс на `ButtonGroup` (поверх встроенной раскладки по числу действий). */
+    actionsClassName?: string;
+    /**
+     * Поверхность overlay'я — определяет раскладку кнопок:
+     * - `window` (desktop, дефолт): 1–2 кнопки компактно вправо, 3 — стопка (primary сверху).
+     * - `bottomSheet` (mobile): 1 → вправо, 2 → space-between, 3 → стопка с инверсией (primary внизу).
+     */
+    surface?: SurfaceTokenSegment;
+};
+/**
+ * Группа кнопок футера (approve / cancel / additional) с раскладкой по поверхности и числу действий.
+ * Единый источник правды для `BottomSheet`, `Modal` и `Drawer` (adaptive-маппинг 1:1).
+ * Возвращает `null`, если ни одной кнопки не передано.
+ */
+export declare function FooterActions({ approveButton, cancelButton, additionalButton, size, footerActionsOrientation, testIds, actionsClassName, surface, }: FooterActionsProps): ReactNode;

package/dist/esm/components/FooterActions/FooterActions.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { APPEARANCE, ButtonGroup, VIEW } from '@cloud-ru/ds-button';
+import cn from 'classnames';
+import { FOOTER_ACTIONS_ORIENTATION } from '../../constants.js';
+import styles from './styles.module.css';
+/**
+ * Группа кнопок футера (approve / cancel / additional) с раскладкой по поверхности и числу действий.
+ * Единый источник правды для `BottomSheet`, `Modal` и `Drawer` (adaptive-маппинг 1:1).
+ * Возвращает `null`, если ни одной кнопки не передано.
+ */
+export function FooterActions({ approveButton, cancelButton, additionalButton, size, footerActionsOrientation = FOOTER_ACTIONS_ORIENTATION.Horizontal, testIds, actionsClassName, surface = 'window', }) {
+    const actionCount = [approveButton, cancelButton, additionalButton].filter(Boolean).length;
+    if (actionCount === 0) {
+        return null;
+    }
+    const isMobile = surface === 'bottomSheet';
+    const isVerticalActions = footerActionsOrientation === FOOTER_ACTIONS_ORIENTATION.Vertical || actionCount === 3;
+    const hasTertiary = Boolean(additionalButton);
+    // Раскладка кнопок футера зависит от поверхности:
+    // - desktop (window): пара `cancel + approve` → компактно вправо (`compact`); пара с tertiary
+    //   (`additional + approve`) → space-between, tertiary слева / primary справа (Figma
+    //   `popupDropdownFooter` — календарные дропдауны); 3 → стопка, primary сверху (ButtonGroup default).
+    // - mobile (bottomSheet): 1 → вправо (`single`); 2 → space-between (`break`); 3 → стопка, инверсия (`stackInverted`).
+    const useBreak = !isVerticalActions && actionCount === 2 && (isMobile || (!isMobile && hasTertiary));
+    const isSingle = isMobile && actionCount === 1;
+    const isCompact = !isMobile && !isVerticalActions && !useBreak;
+    const isStackInverted = isMobile && isVerticalActions;
+    return (_jsx(ButtonGroup, { className: cn(styles.actions, isSingle && styles.single, isCompact && styles.compact, isStackInverted && styles.stackInverted, actionsClassName), size: size, vertical: isVerticalActions, break: useBreak, primaryAction: approveButton ? { ...approveButton, 'data-test-id': testIds.approve } : undefined, secondaryAction: cancelButton
+            ? { view: VIEW.Outline, appearance: APPEARANCE.Neutral, ...cancelButton, 'data-test-id': testIds.cancel }
+            : undefined, tertiaryAction: additionalButton
+            ? {
+                view: VIEW.Simple,
+                appearance: APPEARANCE.Neutral,
+                ...additionalButton,
+                'data-test-id': testIds.additional,
+            }
+            : undefined }));
+}

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

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

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

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