@dss-kit/ui-kit 1.0.2 → 1.0.4

package/dist/components/builders/Dialog/hooks/useBackdropClose.d.ts

@@ -0,0 +1,10 @@
+import { MouseEvent } from 'react';
+/**
+ * Обработчики подложки (backdrop). `onClose` вызывается, только если и нажатие,
+ * и отпускание кнопки мыши пришлись на саму подложку: диалог не закроется, если
+ * выделение текста начали внутри окна, а отпустили снаружи.
+ */
+export declare function useBackdropClose(isEnabled: boolean, onClose: () => void): {
+    onMouseDown: (event: MouseEvent) => void;
+    onClick: (event: MouseEvent) => void;
+};

package/dist/components/builders/Dialog/hooks/useBackdropClose.js

@@ -0,0 +1,15 @@
+import { useRef as s, useCallback as e } from "react";
+function f(t, o) {
+  const c = s(!1), n = e((r) => {
+    c.current = r.target === r.currentTarget;
+  }, []), u = e(
+    (r) => {
+      t && r.target === r.currentTarget && c.current && o();
+    },
+    [t, o]
+  );
+  return { onMouseDown: n, onClick: u };
+}
+export {
+  f as useBackdropClose
+};

package/dist/components/builders/Dialog/hooks/useBodyScrollLock.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Блокирует прокрутку `body`, пока `isLocked` истинно. Блокировки всех
+ * диалогов считаются вместе: прокрутка возвращается, когда снята последняя,
+ * в каком бы порядке диалоги ни закрывались.
+ */
+export declare function useBodyScrollLock(isLocked: boolean): void;

package/dist/components/builders/Dialog/hooks/useBodyScrollLock.js

@@ -0,0 +1,13 @@
+import { useEffect as f } from "react";
+let o = 0, t = "";
+function n(e) {
+  f(() => {
+    if (!(!e || typeof document > "u"))
+      return o === 0 && (t = document.body.style.overflow, document.body.style.overflow = "hidden"), o++, () => {
+        o--, o === 0 && (document.body.style.overflow = t);
+      };
+  }, [e]);
+}
+export {
+  n as useBodyScrollLock
+};

package/dist/components/builders/Dialog/hooks/useCloseOnEsc.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Вызывает `onClose` по нажатию Escape, если диалог открыт, `isEnabled`
+ * истинно и диалог верхний среди открытых. Диалог с `isEnabled = false` тоже
+ * занимает место в стеке: Escape над ним не закрывает диалоги ниже.
+ */
+export declare function useCloseOnEsc(isOpen: boolean, isEnabled: boolean, onClose: () => void): void;

package/dist/components/builders/Dialog/hooks/useCloseOnEsc.js

@@ -0,0 +1,21 @@
+import { useEffect as r } from "react";
+import { useLatestRef as i } from "../../../../utils/hooks/useLatestRef.js";
+const e = [];
+function c(n) {
+  if (n.key !== "Escape") return;
+  const t = e[e.length - 1]?.current;
+  t?.isEnabled && t.onClose();
+}
+function a(n, t, f) {
+  const o = i({ isEnabled: t, onClose: f });
+  r(() => {
+    if (!(!n || typeof document > "u"))
+      return e.length === 0 && document.addEventListener("keydown", c), e.push(o), () => {
+        const s = e.indexOf(o);
+        s !== -1 && e.splice(s, 1), e.length === 0 && document.removeEventListener("keydown", c);
+      };
+  }, [n, o]);
+}
+export {
+  a as useCloseOnEsc
+};

package/dist/components/builders/Dialog/index.d.ts

@@ -0,0 +1,10 @@
+export { getDialogPartSelector } from './Dialog.const';
+export { DialogContext } from './Dialog.context';
+export type { DialogParts } from './Dialog.parts';
+export { dialogParts } from './Dialog.parts';
+export type { DialogProps } from './Dialog.types';
+export { DialogCloseButton } from './DialogCloseButton';
+export type { DialogFooterProps } from './DialogFooter';
+export type { DialogHeaderProps } from './DialogHeader';
+export type { DialogMainProps } from './DialogMain';
+export { useBackdropClose, useBodyScrollLock, useCloseOnEsc, } from './hooks';

package/dist/components/builders/Modal/Modal.d.ts

@@ -1,34 +1,14 @@
-import { PropsWithChildren } from 'react';
 import { Size } from '../../../types/tokens.types';
-export interface ModalProps extends PropsWithChildren {
-    /** Показывать ли модальное окно */
-    isOpen: boolean;
-    /** Callback при закрытии модального окна */
-    onClose: () => void;
-    /** Размер модального окна */
-    /** @default "md" */
+import { DialogProps } from '../Dialog';
+export interface ModalProps extends DialogProps {
+    /**
+     * Размер модального окна
+     * @default "md" */
     size?: Extract<Size, "sm" | "md" | "lg">;
-    /** Закрывать ли при клике на backdrop */
-    /** @default true */
-    closeOnBackdropClick?: boolean;
-    /** Закрывать ли при нажатии ESC */
-    /** @default true */
-    closeOnEsc?: boolean;
-    /** Кастомный класс для overlay */
-    /** @default undefined */
-    overlayClassName?: string;
-    /** Кастомный класс для модального окна */
-    /** @default undefined */
+    /**
+     * Кастомный класс для модального окна
+     * @default undefined */
     modalClassName?: string;
-    /** Кастомный класс для абсолютной кнопки закрытия (когда `showAbsoluteCloseButton`). */
-    /** @default undefined */
-    absoluteCloseButtonClassName?: string;
-    /** Отключать прокрутку body при открытии */
-    /** @default true */
-    disableBodyScroll?: boolean;
-    /** Показывать ли кнопку закрытия c абсолютным позиционированием внутри модального окна */
-    /** @default undefined */
-    showAbsoluteCloseButton?: boolean;
 }
 declare const Modal: import('react').ForwardRefExoticComponent<ModalProps & import('react').RefAttributes<HTMLDivElement>>;
 export { Modal };

package/dist/components/builders/Modal/Modal.js

@@ -1,55 +1,38 @@
-import { jsx as t, jsxs as z } from "react/jsx-runtime";
-import { cx as s } from "@emotion/css";
-import { forwardRef as D, useEffect as p, useCallback as d, useRef as N } from "react";
-import B from "../../../assets/svg/modal/close.svg.js";
-import { ModalContext as E } from "./context.js";
-import { styles as i } from "./styles.js";
-import { Portal as I } from "../Portal/Portal.js";
-import { Box as l } from "../Box/Box.js";
-import { IconButton as _ } from "../../controls/IconButton/IconButton.js";
-import { theme as f } from "../../../utils/theme/index.js";
-const j = D(
+import { jsx as r, jsxs as v } from "react/jsx-runtime";
+import { cx as i } from "@emotion/css";
+import { forwardRef as M, useMemo as C } from "react";
+import { styles as t } from "./styles.js";
+import { useBodyScrollLock as D } from "../Dialog/hooks/useBodyScrollLock.js";
+import { useCloseOnEsc as N } from "../Dialog/hooks/useCloseOnEsc.js";
+import { useBackdropClose as _ } from "../Dialog/hooks/useBackdropClose.js";
+import { Portal as w } from "../Portal/Portal.js";
+import { DialogContext as B } from "../Dialog/Dialog.context.js";
+import { DialogCloseButton as j } from "../Dialog/DialogCloseButton/DialogCloseButton.js";
+import { Box as a } from "../Box/Box.js";
+import { theme as c } from "../../../utils/theme/index.js";
+const z = M(
   ({
-    isOpen: o,
-    onClose: r,
-    overlayClassName: y,
-    modalClassName: w,
-    absoluteCloseButtonClassName: g,
-    size: h = "md",
-    closeOnBackdropClick: m = !0,
-    closeOnEsc: u = !0,
-    disableBodyScroll: a = !0,
-    showAbsoluteCloseButton: x,
-    children: v
+    isOpen: e,
+    onClose: o,
+    overlayClassName: s,
+    modalClassName: u,
+    absoluteCloseButtonClassName: f,
+    size: n = "md",
+    backgroundColor: p = c.color.fill.bg_primary,
+    closeOnBackdropClick: d = !0,
+    closeOnEsc: x = !0,
+    disableBodyScroll: y = !0,
+    showAbsoluteCloseButton: b,
+    showBorders: l = !0,
+    children: g
   }, k) => {
-    p(() => {
-      if (a && o && typeof window < "u" && typeof document < "u") {
-        const e = window.getComputedStyle(document.body).overflow;
-        return document.body.style.overflow = "hidden", () => {
-          document.body.style.overflow = e;
-        };
-      }
-    }, [o, a]);
-    const n = d(
-      (e) => {
-        e.key === "Escape" && r();
-      },
-      [r]
-    );
-    p(() => {
-      if (typeof window < "u" && typeof document < "u" && u && o)
-        return document.addEventListener("keydown", n), () => document.removeEventListener("keydown", n);
-    }, [o, u, n]);
-    const c = N(!1), b = d((e) => {
-      c.current = e.target === e.currentTarget;
-    }, []), M = d(
-      (e) => {
-        m && e.target === e.currentTarget && c.current && r();
-      },
-      [m, r]
+    D(e && y), N(e, x, o);
+    const m = _(d, o), h = C(
+      () => ({ onClose: o, showBorders: l }),
+      [o, l]
     );
-    return o ? /* @__PURE__ */ t(I, { children: /* @__PURE__ */ t(E.Provider, { value: { isOpen: o, onClose: r }, children: /* @__PURE__ */ t(
-      l,
+    return e ? /* @__PURE__ */ r(w, { children: /* @__PURE__ */ r(B.Provider, { value: h, children: /* @__PURE__ */ r(
+      a,
       {
         position: "fixed",
         top: 0,
@@ -59,42 +42,31 @@ const j = D(
         row: !0,
         center: !0,
         flex: 1,
-        onMouseDown: b,
-        onClick: M,
-        backgroundColor: f.color.fill.bg_overlay_primary,
-        className: s(i.overlay, y),
+        onMouseDown: m.onMouseDown,
+        onClick: m.onClick,
+        backgroundColor: c.color.fill.bg_overlay_primary,
+        className: i(t.overlay, s),
         zIndex: 1,
-        children: /* @__PURE__ */ z(
-          l,
+        children: /* @__PURE__ */ v(
+          a,
           {
             ref: k,
-            className: s(
-              i.modal,
-              i[`size_${h}`],
-              w
+            backgroundColor: p,
+            className: i(
+              t.modal,
+              t[`size_${n}`],
+              u
             ),
             relative: !0,
             children: [
-              x && /* @__PURE__ */ t(
-                l,
+              b && /* @__PURE__ */ r(
+                j,
                 {
-                  position: "absolute",
-                  top: f.spacing.lg,
-                  right: f.spacing.lg,
-                  zIndex: 1,
-                  children: /* @__PURE__ */ t(
-                    _,
-                    {
-                      className: g,
-                      onClick: r,
-                      color: "neutral",
-                      size: "xs",
-                      children: /* @__PURE__ */ t(B, {})
-                    }
-                  )
+                  absolute: !0,
+                  className: f
                 }
               ),
-              v
+              g
             ]
           }
         )
@@ -102,7 +74,7 @@ const j = D(
     ) }) }) : null;
   }
 );
-j.displayName = "Modal";
+z.displayName = "Modal";
 export {
-  j as Modal
+  z as Modal
 };

package/dist/components/builders/Modal/index.d.ts

@@ -1,8 +1,6 @@
 import { ReactNode, RefAttributes } from 'react';
+import { DialogParts } from '../Dialog';
 import { ModalProps } from './Modal';
-import { ModalFooter } from './ModalFooter';
-import { ModalHeader } from './ModalHeader';
-import { ModalMain } from './ModalMain';
 /**
  * Тип составного компонента `Modal`.
  *
@@ -14,15 +12,12 @@ import { ModalMain } from './ModalMain';
  * NB: члены `Function` (apply/bind/call/…) TypeScript всё равно подмешивает
  * к любому вызываемому значению — полностью убрать их без отказа от `<Modal>`
  * нельзя.
+ *
+ * `Header` / `Main` / `Footer` — общие части диалогов (см. `../Dialog`),
+ * те же самые компоненты доступны как `Sheet.Header` / `Sheet.Main` / `Sheet.Footer`.
  */
-type ModalComponent = ((props: ModalProps & RefAttributes<HTMLDivElement>) => ReactNode) & {
-    Header: typeof ModalHeader;
-    Main: typeof ModalMain;
-    Footer: typeof ModalFooter;
-};
+type ModalComponent = ((props: ModalProps & RefAttributes<HTMLDivElement>) => ReactNode) & DialogParts;
 declare const ModalWithSubComponents: ModalComponent;
 export { ModalWithSubComponents as Modal };
 export type { ModalProps };
-export type { ModalFooterProps } from './ModalFooter';
-export type { ModalHeaderProps } from './ModalHeader';
-export type { ModalMainProps } from './ModalMain';
+export type { DialogFooterProps as ModalFooterProps, DialogHeaderProps as ModalHeaderProps, DialogMainProps as ModalMainProps, } from '../Dialog';

package/dist/components/builders/Modal/index.js

@@ -1,11 +1,9 @@
-import { Modal as r } from "./Modal.js";
-import { ModalHeader as a } from "./ModalHeader/ModalHeader.js";
-import { ModalMain as t } from "./ModalMain/ModalMain.js";
-import { ModalFooter as m } from "./ModalFooter/ModalFooter.js";
-const o = r;
-o.Header = a;
-o.Main = t;
-o.Footer = m;
+import { Modal as o } from "./Modal.js";
+import { dialogParts as t } from "../Dialog/Dialog.parts.js";
+const s = Object.assign(
+  o,
+  t
+);
 export {
-  o as Modal
+  s as Modal
 };

package/dist/components/builders/Modal/styles.js

@@ -1,7 +1,7 @@
 import { css as i, keyframes as a } from "@emotion/css";
-import { bp as r } from "../../../styles/utils/breakpoints.js";
+import { bp as t } from "../../../styles/utils/breakpoints.js";
 import { theme as o } from "../../../utils/theme/index.js";
-const t = a`
+const s = a`
   0% {
     opacity: 0;
     transform: scale(0.95);
@@ -10,20 +10,19 @@ const t = a`
     opacity: 1;
     transform: none;
   }
-`, e = {
+`, r = {
   overlay: i({
     backdropFilter: "blur(5px)"
   }),
   modal: i({
     animationDuration: "0.2s",
     animationTimingFunction: "ease-in-out",
-    animationName: t,
+    animationName: s,
     maxWidth: `calc(100vw - ${o.spacing["3xl"]})`,
     maxHeight: `calc(100vh - ${o.spacing["7xl"]} - ${o.spacing["7xl"]})`,
     borderRadius: o.cornerRadius["2xl"],
-    backgroundColor: o.color.fill.bg_primary,
     boxShadow: `0 4px 20px 0 ${o.color.effect.shadow_s}`,
-    [r.sm()]: {
+    [t.sm()]: {
       flex: 1
     }
   }),
@@ -38,5 +37,5 @@ const t = a`
   })
 };
 export {
-  e as styles
+  r as styles
 };

package/dist/components/builders/Sheet/Sheet.const.d.ts

@@ -0,0 +1,50 @@
+import { SheetPosition, SheetPositionConfig } from './Sheet.types';
+/** Ось и направление закрытия каждой позиции */
+export declare const SHEET_POSITION_CONFIG: Record<SheetPosition, SheetPositionConfig>;
+/** Свойства указателя и размеров вдоль оси и поперёк неё */
+export declare const SHEET_AXIS_KEYS: {
+    readonly x: {
+        readonly client: "clientX";
+        readonly crossClient: "clientY";
+        readonly size: "width";
+    };
+    readonly y: {
+        readonly client: "clientY";
+        readonly crossClient: "clientX";
+        readonly size: "height";
+    };
+};
+/** Порог закрытия по умолчанию: доля размера Sheet */
+export declare const SHEET_DEFAULT_CLOSE_THRESHOLD = 0.4;
+/** Скорость (px/s), с которой жест считается быстрым свайпом */
+export declare const SHEET_FLICK_VELOCITY = 500;
+/** Минимальный путь (px) быстрого свайпа, чтобы дрожание пальца не закрывало Sheet */
+export declare const SHEET_FLICK_MIN_DISTANCE = 10;
+/** Сдвиг указателя (px), после которого нажатие становится перетаскиванием */
+export declare const SHEET_DRAG_START_THRESHOLD = 4;
+/** Окно (мс) последних движений указателя для расчёта скорости */
+export declare const SHEET_VELOCITY_WINDOW = 100;
+/** Предел смещения (px) при перетягивании за границы, «резинка» */
+export declare const SHEET_OVERDRAG_LIMIT = 48;
+/** Высота зоны drag handle, px */
+export declare const SHEET_HANDLE_HEIGHT = 16;
+/** Имя CSS-переменной с активной долей экрана в режиме snap-points */
+export declare const SHEET_SNAP_POINT_VAR = "--sheet-snap-point";
+/**
+ * Пружина с критическим затуханием: без перелёта, ~0.35 с.
+ * Анимируемые значения — доли (0–1), поэтому пороги покоя мелкие.
+ */
+export declare const SHEET_SPRING: {
+    readonly type: "spring";
+    readonly stiffness: 400;
+    readonly damping: 40;
+    readonly restDelta: 0.0005;
+    readonly restSpeed: 0.01;
+};
+/** Зоны, за которые можно тянуть Sheet: drag handle и Sheet.Header */
+export declare const SHEET_DRAG_ZONE_SELECTOR: string;
+/**
+ * Элементы, нажатие на которые не начинает перетаскивание, даже внутри
+ * зоны перетаскивания. `data-sheet-no-drag` позволяет исключить свой элемент.
+ */
+export declare const SHEET_NO_DRAG_SELECTOR: string;

package/dist/components/builders/Sheet/Sheet.const.js

@@ -0,0 +1,38 @@
+import { getDialogPartSelector as t } from "../Dialog/Dialog.const.js";
+const E = {
+  bottom: { axis: "y", direction: 1 }
+}, n = {
+  x: { client: "clientX", crossClient: "clientY", size: "width" },
+  y: { client: "clientY", crossClient: "clientX", size: "height" }
+}, o = 0.4, s = 500, _ = 10, S = 4, T = 100, c = 48, i = 16, H = "--sheet-snap-point", a = {
+  type: "spring",
+  stiffness: 400,
+  damping: 40,
+  restDelta: 5e-4,
+  restSpeed: 0.01
+}, l = `[data-sheet-handle], ${t("header")}`, r = [
+  "button",
+  "a[href]",
+  "input",
+  "select",
+  "textarea",
+  "[contenteditable]:not([contenteditable='false'])",
+  "[role='button']",
+  "[role='link']",
+  "[data-sheet-no-drag]"
+].join(", ");
+export {
+  n as SHEET_AXIS_KEYS,
+  o as SHEET_DEFAULT_CLOSE_THRESHOLD,
+  S as SHEET_DRAG_START_THRESHOLD,
+  l as SHEET_DRAG_ZONE_SELECTOR,
+  _ as SHEET_FLICK_MIN_DISTANCE,
+  s as SHEET_FLICK_VELOCITY,
+  i as SHEET_HANDLE_HEIGHT,
+  r as SHEET_NO_DRAG_SELECTOR,
+  c as SHEET_OVERDRAG_LIMIT,
+  E as SHEET_POSITION_CONFIG,
+  H as SHEET_SNAP_POINT_VAR,
+  a as SHEET_SPRING,
+  T as SHEET_VELOCITY_WINDOW
+};

package/dist/components/builders/Sheet/Sheet.d.ts

@@ -0,0 +1,12 @@
+import { SheetProps } from './Sheet.types';
+/**
+ * Панель, выезжающая от края экрана, как bottom sheet в мобильных приложениях.
+ * Альтернатива `Modal` с теми же пропсами закрытия и теми же частями:
+ * `Sheet.Header`, `Sheet.Main`, `Sheet.Footer` — это `Modal.Header` и т.д.
+ *
+ * Закрывается свайпом за drag handle или Sheet.Header: при смещении больше
+ * `closeThreshold` или быстром свайпе. Размер — по содержимому, на весь экран
+ * (`sizeMode`) или по точкам фиксации (`snapPoints`).
+ */
+declare const Sheet: import('react').ForwardRefExoticComponent<SheetProps & import('react').RefAttributes<HTMLDivElement>>;
+export { Sheet };

package/dist/components/builders/Sheet/Sheet.js

@@ -0,0 +1,55 @@
+import { jsx as o } from "react/jsx-runtime";
+import { forwardRef as g, useState as y, useMemo as R, useCallback as _ } from "react";
+import { SHEET_DEFAULT_CLOSE_THRESHOLD as b } from "./Sheet.const.js";
+import { normalizeSnapPoints as z } from "./Sheet.utils.js";
+import { SheetLayer as D } from "./SheetLayer.js";
+import { useBodyScrollLock as H } from "../Dialog/hooks/useBodyScrollLock.js";
+import { useCloseOnEsc as T } from "../Dialog/hooks/useCloseOnEsc.js";
+import { Portal as k } from "../Portal/Portal.js";
+import { DialogContext as v } from "../Dialog/Dialog.context.js";
+import { theme as j } from "../../../utils/theme/index.js";
+const A = g(
+  ({
+    isOpen: t,
+    onClose: r,
+    position: a = "bottom",
+    backgroundColor: l = j.color.fill.bg_primary,
+    sizeMode: s = "content",
+    snapPoints: f,
+    closeThreshold: c = b,
+    closeOnBackdropClick: u = !0,
+    closeOnEsc: p = !0,
+    closeOnDrag: d = !0,
+    disableBodyScroll: S = !0,
+    showBorders: m = !1,
+    ...E
+  }, h) => {
+    const [e, i] = y(t);
+    t && !e && i(!0), H(e && S), T(t, p, r);
+    const n = z(f), x = n.length ? "snap" : s, L = R(
+      () => ({ onClose: r, showBorders: m }),
+      [r, m]
+    ), P = _(() => i(!1), []);
+    return e ? /* @__PURE__ */ o(k, { children: /* @__PURE__ */ o(v.Provider, { value: L, children: /* @__PURE__ */ o(
+      D,
+      {
+        ...E,
+        ref: h,
+        isOpen: t,
+        onClose: r,
+        onExited: P,
+        position: a,
+        backgroundColor: l,
+        sizing: x,
+        snapPoints: n,
+        closeThreshold: c,
+        closeOnBackdropClick: u,
+        closeOnDrag: d
+      }
+    ) }) }) : null;
+  }
+);
+A.displayName = "Sheet";
+export {
+  A as Sheet
+};

package/dist/components/builders/Sheet/Sheet.types.d.ts

@@ -0,0 +1,82 @@
+import { DialogProps } from '../Dialog';
+/**
+ * Край экрана, к которому прижат Sheet. Drag handle отображается на
+ * противоположном крае.
+ *
+ * Пока реализован только `bottom`. Чтобы добавить позицию (`top`, `left`,
+ * `right`), расширьте этот тип — TypeScript потребует описать её в
+ * `SHEET_POSITION_CONFIG` (ось и направление закрытия) и в `positionStyles`
+ * (прижатие к краю, скругления, размеры).
+ */
+export type SheetPosition = "bottom";
+/**
+ * Режим размера:
+ * - `content` — по содержимому, но не больше плоскости экрана;
+ * - `full` — вся плоскость: для `bottom`/`top` вся высота экрана,
+ *   для `left`/`right` — вся ширина.
+ */
+export type SheetSizeMode = "content" | "full";
+/**
+ * Итоговый режим размера с учётом snap-points: если `snapPoints` заданы,
+ * размер определяют они, а `sizeMode` не учитывается.
+ * @internal
+ */
+export type SheetSizing = SheetSizeMode | "snap";
+/** Ось, вдоль которой Sheet выезжает и перетаскивается. @internal */
+export type SheetAxis = "x" | "y";
+/** Геометрия позиции. @internal */
+export interface SheetPositionConfig {
+    /** Ось выезда и перетаскивания */
+    axis: SheetAxis;
+    /**
+     * Направление закрытия вдоль оси: `1` — к концу оси (вниз, вправо),
+     * `-1` — к началу (вверх, влево). Drag handle стоит на крае, от которого
+     * Sheet уезжает при закрытии: для `1` это начало оси (верхний край у `bottom`).
+     */
+    direction: 1 | -1;
+}
+export interface SheetProps extends DialogProps {
+    /**
+     * Край экрана, к которому прижат Sheet
+     * @default "bottom" */
+    position?: SheetPosition;
+    /**
+     * Режим размера: `content` — по содержимому (не больше экрана),
+     * `full` — на всю плоскость. Не учитывается, если заданы `snapPoints`.
+     * @default "content" */
+    sizeMode?: SheetSizeMode;
+    /**
+     * Точки фиксации размера — доли плоскости экрана в диапазоне (0, 1],
+     * например `[0.3, 0.5, 0.7, 1]`. Если заданы, Sheet имеет размер активной
+     * точки, при перетаскивании меняет его и при отпускании доводится до
+     * ближайшей точки (при быстром свайпе — до соседней по направлению свайпа).
+     * Значения вне (0, 1] отбрасываются.
+     * @default undefined */
+    snapPoints?: number[];
+    /**
+     * Точка фиксации при открытии
+     * @default наименьшая из `snapPoints` */
+    defaultSnapPoint?: number;
+    /** Callback смены точки фиксации после перетаскивания */
+    onSnapPointChange?: (snapPoint: number) => void;
+    /**
+     * Доля размера Sheet (0–1): если при отпускании Sheet сдвинут к закрытию
+     * больше чем на эту долю, он закрывается, иначе возвращается на место.
+     * Быстрый свайп закрывает Sheet независимо от порога.
+     * @default 0.4 */
+    closeThreshold?: number;
+    /**
+     * Закрывать ли свайпом. При `false` Sheet можно потянуть к закрытию только
+     * с сопротивлением, после отпускания он возвращается на место.
+     * Перемещение между `snapPoints` остаётся доступным.
+     * @default true */
+    closeOnDrag?: boolean;
+    /**
+     * Кастомный класс для панели Sheet
+     * @default undefined */
+    sheetClassName?: string;
+    /**
+     * Кастомный класс для зоны drag handle
+     * @default undefined */
+    handleClassName?: string;
+}