skillgrid 0.0.39 → 0.0.40

package/dist/components/Alert/Alert.type.d.ts

@@ -1,8 +1,10 @@
 import { DialogProps } from '../Dialog';
-import { ReactNode } from 'react';
+import { HTMLProps, ReactNode } from 'react';
 import { AvatarProps } from '../Avatar';
 export type AlertVariant = 'info' | 'success' | 'warning' | 'error' | 'dialog' | 'avatar';
-export interface AlertProps extends Pick<DialogProps, 'placement' | 'open' | 'onOpenChange' | 'children'> {
+/** Поля плейсхолдера для стилизации. */
+type AlertFields = 'title' | 'subTitle' | 'iconSlot' | 'children' | 'textBlock' | 'container' | 'dialog';
+export interface AlertProps extends Omit<DialogProps, 'style' | 'className'> {
     /**
      * Вариант отображения Alert. Определяет иконку и цветовую схему.
      * Вариант `avatar` позволяет отобразить кастомный аватар.
@@ -19,7 +21,10 @@ export interface AlertProps extends Pick<DialogProps, 'placement' | 'open' | 'on
     /** Заголовок Alert. */
     title: ReactNode;
     /** Основной контент/описание Alert. */
-    description: ReactNode;
-    /** ID для тестирования. */
-    'data-testid'?: string;
+    description?: ReactNode;
+    /** Inline-стили для отдельных частей Alert. */
+    styles?: Partial<Record<AlertFields, HTMLProps<HTMLDivElement>['style']>>;
+    /** CSS-классы для отдельных частей Alert. */
+    classNames?: Partial<Record<AlertFields, HTMLProps<HTMLDivElement>['className']>>;
 }
+export {};

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

@@ -1,8 +1,17 @@
 import { DialogProps } from './Dialog.type';
 /**
- * Базовый компонент диалогового окна.
- * Обеспечивает управление состоянием, фокусом и позиционированием.
- * Является основой для более сложных компонентов, таких как Modal.
+ * Компонент `Dialog` представляет собой модальное окно, которое можно использовать для
+ * отображения важной информации, форм или для запроса подтверждения от пользователя.
+ *
+ * Он использует `Floating UI` для позиционирования, управляет фокусом внутри себя,
+ * блокирует прокрутку основного контента и предоставляет анимации открытия/закрытия.
+ *
+ * Это полностью контролируемый компонент: его видимостью нужно управлять через пропсы `open` и `onOpenChange`.
+ * Поддерживает различные варианты размещения на экране, закрытие перетаскиванием и другие возможности кастомизации.
+ *
+ * @param {DialogProps} props - Пропсы компонента.
+ * @param {React.Ref<HTMLDivElement>} outerRef - Внешний ref, который будет перенаправлен на корневой DOM-элемент диалога.
+ * @returns {JSX.Element | null} Рендерит диалог или `null`, если он закрыт (и анимация закрытия завершена).
  */
 declare const Dialog: import('react').ForwardRefExoticComponent<DialogProps & import('react').RefAttributes<HTMLDivElement>>;
 export { Dialog };

package/dist/components/Dialog/Dialog.type.d.ts

@@ -1,29 +1,61 @@
-import { HTMLProps } from 'react';
-/** Тип позиционирования диалогового окна. */
-export type DialogPlacement = 'default' | 'default-stretched' | 'center' | 'center-stretched' | 'mobile' | 'right-drawer' | 'left-drawer';
+import { ComponentProps, HTMLProps } from 'react';
+import { FloatingFocusManagerProps, FloatingOverlay, FloatingPortalProps } from '@floating-ui/react';
+/**
+ * Определяет вариант расположения диалогового окна на экране.
+ * - `default`: Вверху экрана с вертикальными и горизонтальными отступами.
+ * - `default-stretched`: Вверху экрана, растянуто по ширине.
+ * - `center`: Строго по центру экрана.
+ * - `center-stretched`: По центру экрана, растянуто по ширине.
+ * - `bottom-sheet`: Внизу экрана (адаптивный вариант для мобильных устройств).
+ * - `right-drawer`: У правого края экрана (похоже на "шторку" или "сайдбар").
+ * - `left-drawer`: У левого края экрана.
+ */
+export type DialogPlacement = 'default' | 'center' | 'bottom-sheet' | 'bottom-left' | 'bottom-right' | 'right-drawer' | 'left-drawer';
 /** Пропсы для компонента Dialog. */
 export interface DialogProps extends Pick<HTMLProps<HTMLDivElement>, 'className' | 'style' | 'children'> {
-    /** Контролируемое состояние открытия. */
+    /** Определяет, открыт ли диалог. Компонент является полностью контролируемым. */
     open: boolean;
-    /** Callback при изменении состояния. */
+    /** Функция обратного вызова, вызываемая при попытке закрытия диалога (клик на оверлей, Escape). */
     onOpenChange: (open: boolean) => void;
     /**
-     * Позиционирование диалога.
-     * @default 'top'
+     * Определяет, где на экране будет отображаться диалог.
+     * @default 'default'
      */
     placement?: DialogPlacement;
     /**
-     * Отключить закрытие по клику вне диалога.
+     * Если `true`, клик по OVERLAY диалога не будет его закрывать.
      * @default false
      */
     disableOutsideClick?: boolean;
     /**
-     * Отключить закрытие по Escape.
+     * Если `true`, нажатие клавиши Escape не будет закрывать диалог.
      * @default false
      */
     disableEscapeKey?: boolean;
-    /** testId для тестирования. */
+    /**
+     * Если `true`, полупрозрачный фон (оверлей) не будет отображаться.
+     * @default false
+     * */
+    disableOverlay?: boolean;
+    /** Позволяет закрывать диалог перетаскиванием. Принимает объект с настройками. */
+    closeOnDrag?: {
+        /** Минимальное смещение в пикселях, необходимое для закрытия диалога. @default 80 */
+        threshold: number;
+        /** Направление, в котором нужно 'смахнуть' диалог для закрытия. */
+        direction: 'top' | 'left' | 'right' | 'bottom';
+    };
+    /** Идентификатор для использования в автоматизированных тестах. */
     'data-testid'?: string;
-    /** Класс для оверлея. */
-    overlayClassName?: HTMLProps<HTMLDivElement>['className'];
+    /** Дополнительные пропсы для кастомизации оверлея (фона). */
+    overlayProps?: Pick<ComponentProps<typeof FloatingOverlay>, 'lockScroll' | 'className' | 'style'>;
+    /**
+      * Дополнительные пропсы для `FloatingPortal`, который используется для рендеринга диалога.
+      * @extends https://floating-ui.com/docs/FloatingPortal
+      * */
+    portalProps?: Partial<FloatingPortalProps>;
+    /**
+     * Дополнительные пропсы для `FloatingFocusManager`, который используется для рендеринга диалога.
+     * @extends https://floating-ui.com/docs/floatingfocusmanager
+     * */
+    focusManagement?: Partial<FloatingFocusManagerProps>;
 }

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

@@ -1 +1,2 @@
 export { useDialog } from './use-dialog';
+export { useDialogDraggable } from './use-dialog-draggable';

package/dist/components/Dialog/lib/use-dialog-draggable.d.ts

@@ -0,0 +1,42 @@
+import { DialogProps } from '../Dialog.type';
+import { CSSProperties, HTMLProps } from 'react';
+type UseDialogDraggableOptions = Pick<DialogProps, 'placement' | 'open' | 'disableEscapeKey' | 'onOpenChange' | 'closeOnDrag'>;
+/**
+ * Хук для управления диалогом с возможностью закрытия через 'смахивание' (drag-to-close).
+ * Оборачивает `useDialog` и добавляет обработчики событий указателя (`PointerEvents`)
+ * для отслеживания перетаскивания и закрытия диалога при превышении порога.
+ *
+ * @param {UseDialogDraggableOptions} options - Опции для конфигурации хука.
+ * @returns Возвращает объект с данными и пропсами, аналогичный `useDialog`,
+ * но с модифицированными `transitionStyles` и `getFloatingProps` для поддержки перетаскивания.
+ */
+export declare function useDialogDraggable({ open, onOpenChange, placement, disableEscapeKey, closeOnDrag, }: UseDialogDraggableOptions): {
+    isMounted: boolean;
+    context: {
+        x: number;
+        y: number;
+        placement: import('@floating-ui/utils').Placement;
+        strategy: import('@floating-ui/utils').Strategy;
+        middlewareData: import('@floating-ui/core').MiddlewareData;
+        isPositioned: boolean;
+        update: () => void;
+        floatingStyles: React.CSSProperties;
+        open: boolean;
+        onOpenChange: (open: boolean, event?: Event, reason?: import('@floating-ui/react').OpenChangeReason) => void;
+        events: import('@floating-ui/react').FloatingEvents;
+        dataRef: React.MutableRefObject<import('@floating-ui/react').ContextData>;
+        nodeId: string | undefined;
+        floatingId: string | undefined;
+        refs: import('@floating-ui/react').ExtendedRefs<import('@floating-ui/react').ReferenceType>;
+        elements: import('@floating-ui/react').ExtendedElements<import('@floating-ui/react').ReferenceType>;
+    };
+    refs: {
+        reference: import('react').MutableRefObject<import('@floating-ui/react-dom').ReferenceType | null>;
+        floating: React.MutableRefObject<HTMLElement | null>;
+        setReference: (node: import('@floating-ui/react-dom').ReferenceType | null) => void;
+        setFloating: (node: HTMLElement | null) => void;
+    } & import('@floating-ui/react').ExtendedRefs<import('@floating-ui/react').ReferenceType>;
+    transitionStyles: CSSProperties;
+    getFloatingProps: (userProps: HTMLProps<HTMLElement>) => Record<string, unknown>;
+};
+export {};

package/dist/components/Dialog/lib/use-dialog.d.ts

@@ -2,16 +2,24 @@ import { Placement } from '@floating-ui/react';
 import { DialogProps } from '../Dialog.type';
 type UseDialogOptions = Pick<DialogProps, 'placement' | 'open' | 'disableOutsideClick' | 'disableEscapeKey' | 'onOpenChange'>;
 /**
- * Хук для управления состоянием и взаимодействиями диалогового окна.
- * Инкапсулирует логику Floating UI для позиционирования, анимаций и закрытия.
- * @returns {object} Объект со свойствами и хендлерами для управления диалогом.
+ * Базовый хук для управления состоянием и поведением диалога.
+ * Отвечает за логику открытия/закрытия, позиционирование с помощью `Floating UI`,
+ * применение анимаций перехода и обработку событий закрытия (клик снаружи, Escape).
+ * Не включает логику перетаскивания.
+ *
+ * @returns Объект с данными и пропсами для `Floating UI`.
+ *    - `isMounted`: Флаг для условного рендеринга с поддержкой анимации закрытия.
+ *    - `transitionStyles`: CSS-стили для анимации.
+ *    - `context`: Контекст `Floating UI`.
+ *    - `refs`: Ссылки на DOM-элементы для `Floating UI`.
+ *    - `getFloatingProps`: Функция для получения пропсов, которые нужно передать на элемент диалога.
  */
-export declare function useDialog({ open, onOpenChange, placement, disableOutsideClick, disableEscapeKey, }: UseDialogOptions): {
-    /** Состояние для условного рендеринга с поддержкой анимации закрытия. */
+export declare function useDialog({ open, onOpenChange, placement, disableEscapeKey, }: UseDialogOptions): {
+    /** `isMounted`: Флаг для условного рендеринга с поддержкой анимации закрытия. */
     isMounted: boolean;
-    /** Стили для CSS-переходов (анимации). */
+    /** `transitionStyles`: CSS-стили для анимации. */
     transitionStyles: import('react').CSSProperties;
-    /** Контекст Floating UI. */
+    /** `context`: Контекст `Floating UI`. */
     context: {
         x: number;
         y: number;
@@ -30,14 +38,14 @@ export declare function useDialog({ open, onOpenChange, placement, disableOutsid
         refs: import('@floating-ui/react').ExtendedRefs<import('@floating-ui/react').ReferenceType>;
         elements: import('@floating-ui/react').ExtendedElements<import('@floating-ui/react').ReferenceType>;
     };
-    /** Ссылки на элементы для Floating UI. */
+    /** `refs`: Ссылки на DOM-элементы для `Floating UI`. */
     refs: {
         reference: import('react').MutableRefObject<import('@floating-ui/react-dom').ReferenceType | null>;
         floating: React.MutableRefObject<HTMLElement | null>;
         setReference: (node: import('@floating-ui/react-dom').ReferenceType | null) => void;
         setFloating: (node: HTMLElement | null) => void;
     } & import('@floating-ui/react').ExtendedRefs<import('@floating-ui/react').ReferenceType>;
-    /** Пропсы для плавающего элемента. */
+    /** `getFloatingProps`: Функция для получения пропсов, которые нужно передать на элемент диалога. */
     getFloatingProps: (userProps?: React.HTMLProps<HTMLElement>) => Record<string, unknown>;
 };
 export {};

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

@@ -1,7 +1,7 @@
 import { ModalProps } from './Modal.type';
 /**
  * Компонент модального окна.
- * Построен на основе Dialog и добавляет с��андартную разметку (шапка, контент, футер).
+ * Построен на основе Dialog и добавляет стандартную разметку (шапка, контент, футер).
  */
 declare const Modal: import('react').ForwardRefExoticComponent<ModalProps & import('react').RefAttributes<HTMLDivElement>>;
 export { Modal };

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

@@ -2,30 +2,46 @@ import { DialogProps } from '../Dialog';
 import { FC, HTMLProps, PropsWithChildren, ReactNode } from 'react';
 import { ButtonProps } from '../Button';
 /** Поля модального окна для стилизации. */
-type ModalFields = 'container' | 'title' | 'subTitle' | 'content' | 'footer';
+type ModalFields = 'dialog' | 'container' | 'leftActionsStack' | 'rightActionsStack' | 'title' | 'subTitle' | 'content' | 'footer' | 'header' | 'grabber';
+export type ModalActionButtonProps = {
+    /** Пропсы кнопки действия; можно обернуть кнопку через wrapper. */
+    props?: ButtonProps;
+    /** Обёрточный компонент для кнопки действия. */
+    wrapper?: FC<PropsWithChildren>;
+};
 /** Пропсы компонента Modal. @extends DialogProps */
-export interface ModalProps extends DialogProps {
+export interface ModalProps extends Omit<DialogProps, 'style' | 'className'> {
     /** Заголовок модального окна. */
     title?: ReactNode;
-    /** Слот для элементов в правом верхнем углу (рядом с кнопкой закрытия). */
-    actions?: ReactNode;
     /** Подзаголовок под основным заголовком. */
     subTitle?: ReactNode;
     /** Содержимое футера (например, кнопки). */
     footer?: ReactNode;
-    /** Ширина модального окна в px (допустимо: 480, 620, 800). */
+    /** Ширина модального окна в px. */
     size?: 480 | 620 | 800;
     /** Inline-стили для отдельных частей модального окна. */
     styles?: Partial<Record<ModalFields, HTMLProps<HTMLDivElement>['style']>>;
     /** CSS-классы для отдельных частей модального окна. */
     classNames?: Partial<Record<ModalFields, HTMLProps<HTMLDivElement>['className']>>;
-    /** Показывать кнопку закрытия в шапке. @default true */
-    showCloseButton?: boolean;
-    /** Пропсы кнопки закрытия; можно обернуть кнопку через wrapper. */
-    closeButtonProps?: ButtonProps & {
-        /** Обёрточный компонент для кнопки закрытия. */
-        wrapper?: FC<PropsWithChildren>;
-    };
+    /** Слот для элементов в правом верхнем углу (рядом с кнопкой закрытия). */
+    rightActionsSlot?: ReactNode[];
+    /** Слот для элементов в правом верхнем углу (рядом с кнопкой закрытия). */
+    leftActionsSlot?: ReactNode[];
+    /** Пропсы для кнопки закрытия в правом верхнем углу */
+    closeButton?: {
+        /**
+         * Показывать кнопку закрытия.
+         * @default true */
+        show: boolean;
+    } & ModalActionButtonProps;
+    /** Пропсы для кнопки "назад" в левом верхнем углу */
+    backButton?: {
+        /** Показывать кнопку 'назад'.
+         * @default true */
+        show: boolean;
+    } & ModalActionButtonProps;
+    /** Шаблон расположения элементов в шапке модального окна. */
+    headerTemplate?: 'title-actions-actions' | 'actions-title-actions';
     /** Скрыть разделитель в шапке. */
     hideHeaderDivider?: boolean;
     /** Скрыть разделитель в футере. */

package/dist/components/Modal/assets/CrossIcon.d.ts

@@ -0,0 +1,2 @@
+import { FC, SVGProps } from 'react';
+export declare const CrossIcon: FC<SVGProps<SVGSVGElement>>;

package/dist/components/Modal/assets/LeftChevronIcon.d.ts

@@ -0,0 +1,2 @@
+import { FC, SVGProps } from 'react';
+export declare const LeftChevronIcon: FC<SVGProps<SVGSVGElement>>;

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

@@ -0,0 +1,2 @@
+export { CrossIcon } from './CrossIcon';
+export { LeftChevronIcon } from './LeftChevronIcon';

package/dist/components/Placeholder/Placeholder.type.d.ts

@@ -1,8 +1,10 @@
 import { HTMLProps, ReactNode } from 'react';
 /** Размеры плейсхолдера */
 export type PlaceholderSize = 'm' | 'l';
+/** Поля плейсхолдера для стилизации. */
+type PlaceholderFields = 'title' | 'subTitle' | 'iconSlot' | 'children' | 'textBlock' | 'container';
 /** Свойства компонента Placeholder */
-export interface PlaceholderProps extends Pick<HTMLProps<HTMLDivElement>, 'className' | 'style' | 'children'> {
+export interface PlaceholderProps extends Pick<HTMLProps<HTMLDivElement>, 'children'> {
     /** Размер плейсхолдера */
     size?: PlaceholderSize;
     /** Иконка плейсхолдера */
@@ -11,10 +13,11 @@ export interface PlaceholderProps extends Pick<HTMLProps<HTMLDivElement>, 'class
     title?: ReactNode;
     /** Подзаголовок плейсхолдера */
     subTitle?: ReactNode;
-    /** Дополнительные свойства для подзаголовка */
-    subTitleProps?: Pick<HTMLProps<HTMLParagraphElement>, 'className' | 'style'>;
-    /** Дополнительные свойства для заголовка */
-    titleProps?: Pick<HTMLProps<HTMLParagraphElement>, 'className' | 'style'>;
+    /** Inline-стили для отдельных частей плейсхолдера. */
+    styles?: Partial<Record<PlaceholderFields, HTMLProps<HTMLDivElement>['style']>>;
+    /** CSS-классы для отдельных частей плейсхолдера. */
+    classNames?: Partial<Record<PlaceholderFields, HTMLProps<HTMLDivElement>['className']>>;
     /** Идентификатор для тестирования */
     'data-testid'?: string;
 }
+export {};

package/dist/components/Tabs/Tabs.type.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode, HTMLAttributes } from 'react';
-import { Nullable } from '../../../../../../src/types';
+import { Nullable } from '../../types';
 import { BadgeProps } from '../Badge';
 /**
  * Tabs визуальный режим табов