@astral/ui 4.82.0 → 4.83.0

package/components/ConfirmDialog/ConfirmDialog.js

@@ -4,6 +4,8 @@ import { Dialog } from '../Dialog';
 import { DialogActions } from '../DialogActions';
 import { DialogContent } from '../DialogContent';
 import { DialogContentText } from '../DialogContentText';
+import { classNames } from '../utils/classNames';
+import { confirmDialogClassnames } from './constants';
 import { CancelButton } from './styles';
 import { useLogic } from './useLogic';
 export const ConfirmDialog = (props) => {
@@ -11,5 +13,5 @@ export const ConfirmDialog = (props) => {
     const { open, title, description, actions, onClose, size = 'sm', ...restProps } = props;
     const { text: confirmText, ...confirmButtonProps } = actions.confirm;
     const { text: cancelText, variant, onClick, ...restCancelProps } = actions.cancel || {};
-    return (_jsxs(Dialog, { size: size, title: title, open: open, onClose: onClose, ...restProps, children: [description && (_jsx(DialogContent, { children: typeof description === 'string' ? (_jsx(DialogContentText, { children: description })) : (description) })), _jsxs(DialogActions, { children: [isShowCancelButton && (_jsx(CancelButton, { ...restCancelProps, ...cancelButtonProps, children: cancelText })), _jsx(Button, { ...confirmButtonProps, children: confirmText })] })] }));
+    return (_jsxs(Dialog, { size: size, title: title, open: open, onClose: onClose, ...restProps, children: [description && (_jsx(DialogContent, { children: typeof description === 'string' ? (_jsx(DialogContentText, { children: description })) : (description) })), _jsxs(DialogActions, { children: [isShowCancelButton && (_jsx(CancelButton, { ...restCancelProps, ...cancelButtonProps, className: classNames(actions.cancel?.className, confirmDialogClassnames.cancelButton), children: cancelText })), _jsx(Button, { ...confirmButtonProps, className: classNames(confirmButtonProps.className, confirmDialogClassnames.confirmButton), children: confirmText })] })] }));
 };

package/components/ConfirmDialog/constants.d.ts

@@ -0,0 +1,4 @@
+export declare const confirmDialogClassnames: {
+    confirmButton: string;
+    cancelButton: string;
+};

package/components/ConfirmDialog/constants.js

@@ -0,0 +1,5 @@
+import { createUIKitClassname } from '../utils/createUIKitClassname';
+export const confirmDialogClassnames = {
+    confirmButton: createUIKitClassname('confirm-dialog__confirm-button'),
+    cancelButton: createUIKitClassname('confirm-dialog__cancel-button'),
+};

package/components/ConfirmDialog/index.d.ts

@@ -1,2 +1,3 @@
 export * from './ConfirmDialog';
+export { confirmDialogClassnames } from './constants';
 export type { ConfirmDialogProps } from './types';

package/components/ConfirmDialog/index.js

@@ -1 +1,2 @@
 export * from './ConfirmDialog';
+export { confirmDialogClassnames } from './constants';

package/components/ConfirmDialog/public.d.ts

@@ -1,2 +1,3 @@
 export * from './ConfirmDialog';
+export { confirmDialogClassnames } from './constants';
 export type { ConfirmDialogProps } from './types';

package/components/ConfirmDialog/public.js

@@ -1 +1,2 @@
 export * from './ConfirmDialog';
+export { confirmDialogClassnames } from './constants';

package/components/ConfirmDialog/types.d.ts

@@ -33,4 +33,4 @@ export type ConfirmDialogProps = {
             text: string;
         };
     };
-} & Pick<DialogProps, 'aria-labelledby' | 'aria-describedby' | 'disableBackdropClick' | 'disablePortal' | 'disableScrollLock' | 'hideBackdrop' | 'keepMounted' | 'open' | 'size'>;
+} & Pick<DialogProps, 'aria-labelledby' | 'aria-describedby' | 'disableBackdropClick' | 'disablePortal' | 'disableScrollLock' | 'hideBackdrop' | 'keepMounted' | 'open' | 'size' | 'className'>;

package/components/NewPopover/NewPopover.d.ts

@@ -1,2 +1,2 @@
 import { type NewPopoverProps } from './types';
-export declare const NewPopover: ({ children, onClose, isOpen, title, className, style, placement, anchorEl, disablePortal, disableAutoFocus, }: NewPopoverProps) => import("react/jsx-runtime").JSX.Element;
+export declare const NewPopover: ({ children, onClose, isOpen, title, className, style, placement, anchorEl, disablePortal, disableAutoFocus, hasArrow, }: NewPopoverProps) => import("react/jsx-runtime").JSX.Element;

package/components/NewPopover/NewPopover.js

@@ -1,23 +1,32 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { BottomDrawer } from '../BottomDrawer';
 import { classNames } from '../utils/classNames';
 import { cva } from '../utils/cva';
 import { popoverClassnames } from './constants';
-import { AnimatedWrapper, InnerContainer, StyledMuiPopper } from './styles';
+import { AnimatedWrapper, InnerContainer, PopoverArrow, StyledMuiPopper, } from './styles';
 import { useLogic } from './useLogic';
 const animatedWrapperCva = cva(popoverClassnames.animatedWrapper, {
     variants: {
         isOpen: {
             true: popoverClassnames.animatedWrapperOpen,
         },
+        hasArrow: {
+            true: popoverClassnames.animatedWrapperHasArrow,
+        },
     },
 });
-export const NewPopover = ({ children, onClose, isOpen, title, className, style, placement = 'bottom', anchorEl, disablePortal, disableAutoFocus, }) => {
-    const { isMobile, isOpened, shouldRender, handleAnimationEnd, handleClose, setContainerRef, } = useLogic({ isOpen, anchorEl, onClose, disableAutoFocus });
+export const NewPopover = ({ children, onClose, isOpen, title, className, style, placement = 'bottom', anchorEl, disablePortal, disableAutoFocus, hasArrow, }) => {
+    const { isMobile, isOpened, shouldRender, handleAnimationEnd, handleClose, setContainerRef, setArrowElement, mergedModifiers, } = useLogic({
+        isOpen,
+        anchorEl,
+        onClose,
+        disableAutoFocus,
+        hasArrow,
+    });
     if (isMobile) {
         return (_jsx(BottomDrawer, { title: title, onClose: handleClose, open: isOpened, className: className, style: style, ModalProps: {
                 disableAutoFocus,
             }, children: children }));
     }
-    return (_jsx(StyledMuiPopper, { className: popoverClassnames.root, open: shouldRender, placement: placement, anchorEl: anchorEl, disablePortal: disablePortal, children: _jsx(AnimatedWrapper, { className: classNames(className, animatedWrapperCva({ isOpen: isOpened })), style: style, onAnimationEnd: handleAnimationEnd, children: _jsx(InnerContainer, { ref: setContainerRef, tabIndex: -1, className: popoverClassnames.innerContainer, children: children }) }) }));
+    return (_jsx(StyledMuiPopper, { className: classNames(popoverClassnames.root, className), style: style, open: shouldRender, placement: placement, anchorEl: anchorEl, disablePortal: disablePortal, modifiers: mergedModifiers, children: _jsxs(AnimatedWrapper, { className: animatedWrapperCva({ isOpen: isOpened, hasArrow }), onAnimationEnd: handleAnimationEnd, children: [hasArrow && (_jsx(PopoverArrow, { ref: setArrowElement, className: popoverClassnames.arrow })), _jsx(InnerContainer, { ref: setContainerRef, tabIndex: -1, className: popoverClassnames.innerContainer, children: children })] }) }));
 };

package/components/NewPopover/constants.d.ts

@@ -1,6 +1,13 @@
+import { type NewPopoverModifier } from './types';
 export declare const popoverClassnames: {
     root: string;
     innerContainer: string;
     animatedWrapper: string;
     animatedWrapperOpen: string;
+    animatedWrapperHasArrow: string;
+    arrow: string;
 };
+/**
+ * Базовые модификаторы Popper.js. У MUI Popper (popper.js)
+ */
+export declare const DEFAULT_MODIFIERS: NewPopoverModifier[];

package/components/NewPopover/constants.js

@@ -4,4 +4,15 @@ export const popoverClassnames = {
     innerContainer: createUIKitClassname('popover__inner-container'),
     animatedWrapper: createUIKitClassname('popover__animated-wrapper'),
     animatedWrapperOpen: createUIKitClassname('popover__animated-wrapper_is-open'),
+    animatedWrapperHasArrow: createUIKitClassname('popover__animated-wrapper_has-arrow'),
+    arrow: createUIKitClassname('popover__arrow'),
 };
+/**
+ * Базовые модификаторы Popper.js. У MUI Popper (popper.js)
+ */
+export const DEFAULT_MODIFIERS = [
+    {
+        name: 'preventOverflow',
+        options: { altAxis: true, tether: false, padding: 8 },
+    },
+];

package/components/NewPopover/styles.d.ts

@@ -2,6 +2,10 @@
 export declare const StyledMuiPopper: import("../styled").StyledComponent<import("@mui/material/Popper").PopperProps & import("react").RefAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
+export declare const PopoverArrow: import("../styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const AnimatedWrapper: import("../styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;

package/components/NewPopover/styles.js

@@ -6,6 +6,12 @@ export const StyledMuiPopper = styled(MuiPopper) `
     z-index: ${({ theme }) => theme.zIndex.tooltip};
   }
 
+  /* Anchor ушёл за скролл/вьюпорт — popper вешает reference-hidden.
+     Стрелка иначе тянется к пропавшему anchor и торчит криво — прячем её. */
+  &[data-popper-reference-hidden] .${popoverClassnames.arrow} {
+    visibility: hidden;
+  }
+
   &&[data-popper-placement*='top'] .${popoverClassnames.animatedWrapper} {
     transform-origin: bottom center;
 
@@ -29,16 +35,106 @@ export const StyledMuiPopper = styled(MuiPopper) `
 
     margin-left: ${({ theme }) => theme.spacing(2)};
   }
+
+  /* Со стрелкой отступ больше */
+  &&[data-popper-placement*='top']
+    .${popoverClassnames.animatedWrapperHasArrow} {
+    margin-bottom: ${({ theme }) => theme.spacing(4)};
+  }
+
+  &&[data-popper-placement*='bottom']
+    .${popoverClassnames.animatedWrapperHasArrow} {
+    margin-top: ${({ theme }) => theme.spacing(4)};
+  }
+
+  &&[data-popper-placement*='left']
+    .${popoverClassnames.animatedWrapperHasArrow} {
+    margin-right: ${({ theme }) => theme.spacing(4)};
+  }
+
+  &&[data-popper-placement*='right']
+    .${popoverClassnames.animatedWrapperHasArrow} {
+    margin-left: ${({ theme }) => theme.spacing(4)};
+  }
+
+  &&[data-popper-placement*='bottom'] .${popoverClassnames.arrow} {
+    top: -16px;
+
+    width: 23px;
+    height: 16px;
+
+    &::before {
+      border-color: transparent transparent
+        ${({ theme }) => theme.palette.background.paper};
+      border-width: 0 11.5px 16px;
+    }
+  }
+
+  &&[data-popper-placement*='top'] .${popoverClassnames.arrow} {
+    bottom: -16px;
+
+    width: 23px;
+    height: 16px;
+
+    &::before {
+      border-color: ${({ theme }) => theme.palette.background.paper} transparent
+        transparent;
+      border-width: 16px 11.5px 0;
+    }
+  }
+
+  &&[data-popper-placement*='right'] .${popoverClassnames.arrow} {
+    left: -16px;
+
+    width: 16px;
+    height: 23px;
+
+    &::before {
+      border-color: transparent ${({ theme }) => theme.palette.background.paper}
+        transparent transparent;
+      border-width: 11.5px 16px 11.5px 0;
+    }
+  }
+
+  &&[data-popper-placement*='left'] .${popoverClassnames.arrow} {
+    right: -16px;
+
+    width: 16px;
+    height: 23px;
+
+    &::before {
+      border-color: transparent transparent transparent
+        ${({ theme }) => theme.palette.background.paper};
+      border-width: 11.5px 0 11.5px 16px;
+    }
+  }
+`;
+export const PopoverArrow = styled.span `
+  position: absolute;
+
+  &::before {
+    content: '';
+
+    display: block;
+
+    width: 0;
+    height: 0;
+    margin: auto;
+
+    border-style: solid;
+  }
 `;
 export const AnimatedWrapper = styled.div `
+  position: relative;
+
   animation: popover-grow-out
-    ${({ theme }) => theme.transitions.duration.enteringScreen}ms
-    ${({ theme }) => theme.transitions.easing.easeInOut} forwards;
+    ${({ theme }) => theme.transitions.duration.leavingScreen}ms
+    ${({ theme }) => theme.transitions.easing.easeIn} forwards;
 
   &.${popoverClassnames.animatedWrapperOpen} {
     animation: popover-grow-in
-      ${({ theme }) => theme.transitions.duration.enteringScreen}ms
-      ${({ theme }) => theme.transitions.easing.easeInOut} forwards;
+      ${({ theme }) => theme.transitions.duration.standard}ms
+      ${({ theme }) => theme.transitions.easing.easeOut} forwards;
   }
 
   @keyframes popover-grow-in {

package/components/NewPopover/types.d.ts

@@ -5,6 +5,14 @@ type NewPopoverVirtualElement = {
     getBoundingClientRect: () => DOMRect;
 };
 export type NewPopoverAnchorEl = null | NewPopoverVirtualElement | HTMLElement | (() => HTMLElement) | (() => NewPopoverVirtualElement);
+/**
+ * Модификатор Popper.js.
+ */
+export type NewPopoverModifier = {
+    name: string;
+    enabled?: boolean;
+    options?: Record<string, unknown>;
+};
 export type NewPopoverProps = {
     /**
      * Якорь позиционирования
@@ -49,5 +57,10 @@ export type NewPopoverProps = {
      * @default false
      */
     disableAutoFocus?: boolean;
+    /**
+     * Показывать стрелку, указывающую на anchorEl
+     * @default false
+     */
+    hasArrow?: boolean;
 };
 export {};

package/components/NewPopover/useLogic/useLogic.d.ts

@@ -1,11 +1,15 @@
-import { type NewPopoverProps } from '../types';
-type UseLogicParams = Pick<NewPopoverProps, 'isOpen' | 'anchorEl' | 'onClose' | 'disableAutoFocus'>;
-export declare const useLogic: ({ isOpen, anchorEl, onClose, disableAutoFocus, }: UseLogicParams) => {
+/// <reference types="react" />
+import { type NewPopoverModifier, type NewPopoverProps } from '../types';
+type UseLogicParams = Pick<NewPopoverProps, 'isOpen' | 'anchorEl' | 'onClose' | 'disableAutoFocus' | 'hasArrow'>;
+export declare const useLogic: ({ isOpen, anchorEl, onClose, disableAutoFocus, hasArrow, }: UseLogicParams) => {
     isMobile: boolean;
     isOpened: boolean;
     shouldRender: boolean;
     handleAnimationEnd: () => void;
     handleClose: (event: Event) => void;
     setContainerRef: (node: HTMLDivElement | null) => void;
+    arrowElement: HTMLSpanElement | null;
+    setArrowElement: import("react").Dispatch<import("react").SetStateAction<HTMLSpanElement | null>>;
+    mergedModifiers: NewPopoverModifier[];
 };
 export {};

package/components/NewPopover/useLogic/useLogic.js

@@ -4,10 +4,12 @@ import { useEscapeClickEffect } from '../../useEscapeClickEffect';
 import { useFocusTrapEffect } from '../../useFocusTrapEffect';
 import { usePopoverAnimation } from '../../usePopoverAnimation';
 import { useViewportType } from '../../useViewportType';
+import { DEFAULT_MODIFIERS } from '../constants';
 import { resolveAnchorNode } from '../utils';
-export const useLogic = ({ isOpen, anchorEl, onClose, disableAutoFocus, }) => {
+export const useLogic = ({ isOpen, anchorEl, onClose, disableAutoFocus, hasArrow, }) => {
     const containerRef = useRef(null);
     const [isContainerMounted, setIsContainerMounted] = useState(false);
+    const [arrowElement, setArrowElement] = useState(null);
     const setContainerRef = useCallback((node) => {
         containerRef.current = node;
         setIsContainerMounted(Boolean(node));
@@ -43,6 +45,15 @@ export const useLogic = ({ isOpen, anchorEl, onClose, disableAutoFocus, }) => {
         allowOutsideClick: true,
         fallbackFocus: () => containerRef.current || document.body,
     });
+    const mergedModifiers = useMemo(() => {
+        if (!hasArrow) {
+            return DEFAULT_MODIFIERS;
+        }
+        return [
+            ...DEFAULT_MODIFIERS,
+            { name: 'arrow', enabled: true, options: { element: arrowElement } },
+        ];
+    }, [hasArrow, arrowElement]);
     return {
         isMobile,
         isOpened,
@@ -50,5 +61,8 @@ export const useLogic = ({ isOpen, anchorEl, onClose, disableAutoFocus, }) => {
         handleAnimationEnd,
         handleClose,
         setContainerRef,
+        arrowElement,
+        setArrowElement,
+        mergedModifiers,
     };
 };

package/components/Onboarding/Onboarding.d.ts

@@ -0,0 +1,35 @@
+import { ErrorService } from '../services/ErrorService';
+import { ActiveStepStore } from './core/ActiveStepStore';
+import { OnboardingTour } from './core/OnboardingTour';
+import { type OnboardingConfig, type OnboardingTourConfig, type SaveStrategyFactory, type Step } from './types';
+/**
+ * Фасад Onboarding, который собирает туры.
+ *
+ * Создаётся через createOnboarding.
+ */
+export declare class Onboarding {
+    private readonly saveStrategyFactory;
+    private readonly errorService;
+    readonly activeStepStore: ActiveStepStore;
+    constructor(saveStrategyFactory: SaveStrategyFactory, errorService: ErrorService);
+    /**
+     * Создаёт тур.
+     */
+    createTour: <const TSteps extends readonly Step[]>(tourConfig: OnboardingTourConfig<TSteps>) => OnboardingTour<TSteps>;
+    /**
+     * Закрывает показанный сейчас тур.
+     */
+    closeActiveTour: () => void;
+}
+/**
+ * Создаёт экземпляр онбординга.
+ *
+ * Экземпляр передаётся контейнеру явно: `<OnboardingContainer onboarding={...}/>`.
+ *
+ * @example
+ * const onboarding = createOnboarding({ saveStrategy });
+ * const tour = onboarding.createTour({ name: 'intro', steps: [...] });
+ * <OnboardingContainer onboarding={onboarding} />
+ * tour.start();
+ */
+export declare const createOnboarding: (config?: OnboardingConfig) => Onboarding;

package/components/Onboarding/Onboarding.js

@@ -0,0 +1,46 @@
+import { ErrorService } from '../services/ErrorService';
+import { ActiveStepStore } from './core/ActiveStepStore';
+import { OnboardingTour } from './core/OnboardingTour';
+import { ProgressStorage } from './core/ProgressStorage';
+import { createLocalStorageSaveStrategy } from './services/LocalStorageSaveStrategy';
+import { validateTourConfig } from './validation';
+/**
+ * Фасад Onboarding, который собирает туры.
+ *
+ * Создаётся через createOnboarding.
+ */
+export class Onboarding {
+    constructor(saveStrategyFactory, errorService) {
+        this.saveStrategyFactory = saveStrategyFactory;
+        this.errorService = errorService;
+        this.activeStepStore = new ActiveStepStore();
+        /**
+         * Создаёт тур.
+         */
+        this.createTour = (tourConfig) => {
+            // Fail-fast на некорректной конфигурации до сборки тура.
+            validateTourConfig(tourConfig);
+            // Ключ хранилища уникален на тур, поэтому стратегия строится на createTour.
+            const progressStorage = new ProgressStorage(this.saveStrategyFactory(tourConfig.name));
+            return new OnboardingTour(tourConfig, progressStorage, this.activeStepStore, this.errorService);
+        };
+        /**
+         * Закрывает показанный сейчас тур.
+         */
+        this.closeActiveTour = () => {
+            this.activeStepStore.closeActiveTour();
+        };
+    }
+}
+/**
+ * Создаёт экземпляр онбординга.
+ *
+ * Экземпляр передаётся контейнеру явно: `<OnboardingContainer onboarding={...}/>`.
+ *
+ * @example
+ * const onboarding = createOnboarding({ saveStrategy });
+ * const tour = onboarding.createTour({ name: 'intro', steps: [...] });
+ * <OnboardingContainer onboarding={onboarding} />
+ * tour.start();
+ */
+export const createOnboarding = (config = {}) => new Onboarding(config.saveStrategy ?? createLocalStorageSaveStrategy, ErrorService.getInstance());

package/components/Onboarding/constants.d.ts

@@ -0,0 +1,34 @@
+/**
+ * data-атрибут, по которому highlight-шаг находит свой элемент.
+ */
+export declare const TOUR_ID_ATTR = "data-tour-id";
+/**
+ * Тайм-аут по умолчанию ожидания элемента highlight-шага в DOM (мс).
+ * `0` — элемент ищется синхронно. Ожидание включается только при заданном
+ * `waitForTimeout`.
+ */
+export declare const DEFAULT_WAIT_ELEMENT_TIMEOUT_MS = 0;
+/**
+ * Базовый отступ hole overlay вокруг подсвечиваемого элемента (px).
+ * Применяется, когда у шага не задан `highlightOffset`.
+ */
+export declare const DEFAULT_HIGHLIGHT_PADDING = 8;
+/**
+ * Скругление углов hole overlay (px).
+ */
+export declare const DEFAULT_HIGHLIGHT_RADIUS = 8;
+/**
+ * Поведение автоскролла к элементу highlight-шага.
+ */
+export declare const SCROLL_BEHAVIOR: ScrollBehavior;
+/**
+ * Надбавки к z-index собственных поверхностей онбординга поверх
+ * `theme.zIndex.tooltip`, чтобы они перекрывали
+ * обычные UIKit-модалки/подсказки.
+ */
+export declare const ONBOARDING_Z_INDEX_OFFSET: {
+    /** Overlay-backdrop и диалоги (standalone-шаг, confirm-exit). */
+    readonly base: 10;
+    /** Highlight-popover — всплывает над базовым слоем. */
+    readonly popover: 30;
+};

package/components/Onboarding/constants.js

@@ -0,0 +1,34 @@
+/**
+ * data-атрибут, по которому highlight-шаг находит свой элемент.
+ */
+export const TOUR_ID_ATTR = 'data-tour-id';
+/**
+ * Тайм-аут по умолчанию ожидания элемента highlight-шага в DOM (мс).
+ * `0` — элемент ищется синхронно. Ожидание включается только при заданном
+ * `waitForTimeout`.
+ */
+export const DEFAULT_WAIT_ELEMENT_TIMEOUT_MS = 0;
+/**
+ * Базовый отступ hole overlay вокруг подсвечиваемого элемента (px).
+ * Применяется, когда у шага не задан `highlightOffset`.
+ */
+export const DEFAULT_HIGHLIGHT_PADDING = 8;
+/**
+ * Скругление углов hole overlay (px).
+ */
+export const DEFAULT_HIGHLIGHT_RADIUS = 8;
+/**
+ * Поведение автоскролла к элементу highlight-шага.
+ */
+export const SCROLL_BEHAVIOR = 'smooth';
+/**
+ * Надбавки к z-index собственных поверхностей онбординга поверх
+ * `theme.zIndex.tooltip`, чтобы они перекрывали
+ * обычные UIKit-модалки/подсказки.
+ */
+export const ONBOARDING_Z_INDEX_OFFSET = {
+    /** Overlay-backdrop и диалоги (standalone-шаг, confirm-exit). */
+    base: 10,
+    /** Highlight-popover — всплывает над базовым слоем. */
+    popover: 30,
+};

package/components/Onboarding/core/ActiveStepStore/ActiveStepStore.d.ts

@@ -0,0 +1,50 @@
+import { type ActiveStepState } from '../../types';
+type Listener = VoidFunction;
+/**
+ * Ссылка на тур, которую держит store: по ней он опознаёт владельца слота
+ * (сравнение по идентичности экземпляра, а не по имени) и может закрыть тур.
+ */
+export type TourHandle = {
+    /**
+     * Закрытие тура штатным путём (используется `Onboarding.closeActiveTour`).
+     */
+    close: () => void;
+};
+/**
+ * Store активного шага, связывающий туры с `<OnboardingContainer/>`.
+ */
+export declare class ActiveStepStore {
+    private activeStep;
+    private activeTour;
+    private readonly listeners;
+    subscribe: (listener: Listener) => () => void;
+    /**
+     * Состояние активного шага (null — тур не показан).
+     */
+    getActiveStep: () => ActiveStepState | null;
+    /**
+     * Публикует шаг тура и делает этот тур владельцем слота.
+     */
+    setActiveStep: (step: ActiveStepState, tour: TourHandle) => void;
+    /**
+     * Владеет ли слотом сейчас именно тур (пустой store — `false`).
+     */
+    isActiveTour: (tour: TourHandle) => boolean;
+    /**
+     * Показан ли сейчас шаг тура. Имена шагов могут совпадать
+     * в разных турах, поэтому проверяется и тур, и имя.
+     */
+    isActiveStep: (tour: TourHandle, stepName: string) => boolean;
+    /**
+     * Освобождает слот, если тур сейчас его владелец.
+     */
+    release: (tour: TourHandle) => void;
+    /**
+     * Закрытие активного тура обычным путём.
+     * Внешний триггер: размонтирование онбординга, смена юзера.
+     */
+    closeActiveTour: () => void;
+    private clear;
+    private emit;
+}
+export {};

package/components/Onboarding/core/ActiveStepStore/ActiveStepStore.js

@@ -0,0 +1,63 @@
+/**
+ * Store активного шага, связывающий туры с `<OnboardingContainer/>`.
+ */
+export class ActiveStepStore {
+    constructor() {
+        this.activeStep = null;
+        this.activeTour = null;
+        this.listeners = new Set();
+        this.subscribe = (listener) => {
+            this.listeners.add(listener);
+            return () => {
+                this.listeners.delete(listener);
+            };
+        };
+        /**
+         * Состояние активного шага (null — тур не показан).
+         */
+        this.getActiveStep = () => this.activeStep;
+        /**
+         * Публикует шаг тура и делает этот тур владельцем слота.
+         */
+        this.setActiveStep = (step, tour) => {
+            this.activeStep = step;
+            this.activeTour = tour;
+            this.emit();
+        };
+        /**
+         * Владеет ли слотом сейчас именно тур (пустой store — `false`).
+         */
+        this.isActiveTour = (tour) => this.activeTour === tour;
+        /**
+         * Показан ли сейчас шаг тура. Имена шагов могут совпадать
+         * в разных турах, поэтому проверяется и тур, и имя.
+         */
+        this.isActiveStep = (tour, stepName) => this.isActiveTour(tour) && this.activeStep?.step.name === stepName;
+        /**
+         * Освобождает слот, если тур сейчас его владелец.
+         */
+        this.release = (tour) => {
+            if (this.isActiveTour(tour)) {
+                this.clear();
+            }
+        };
+        /**
+         * Закрытие активного тура обычным путём.
+         * Внешний триггер: размонтирование онбординга, смена юзера.
+         */
+        this.closeActiveTour = () => {
+            this.activeTour?.close();
+        };
+    }
+    clear() {
+        if (this.activeStep === null) {
+            return;
+        }
+        this.activeStep = null;
+        this.activeTour = null;
+        this.emit();
+    }
+    emit() {
+        this.listeners.forEach((listener) => listener());
+    }
+}

package/components/Onboarding/core/ActiveStepStore/index.d.ts

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

package/components/Onboarding/core/ActiveStepStore/index.js

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