@astral/ui 4.82.0 → 4.83.0

package/components/Onboarding/types/tour.d.ts

@@ -0,0 +1,168 @@
+import { type ResolvedStep, type Step } from './step';
+/**
+ * Конфигурация тура.
+ */
+export type OnboardingTourConfig<TSteps extends readonly Step[]> = {
+    /**
+     * Имя тура.
+     */
+    name: string;
+    /**
+     * Шаги тура.
+     */
+    steps: TSteps;
+    /**
+     * Можно ли кликать по подсвечиваемым элементам во время тура.
+     * Значение задаётся для всех шагов тура.
+     * @default false
+     */
+    isInteractive?: boolean;
+    /**
+     * Показывать точки прогресса. Если видимых шагов больше 6 — точки не
+     * отображаются никогда, даже при `true`.
+     * @default true
+     */
+    isDotsVisible?: boolean;
+    /**
+     * Показывать счётчик прогресса `n / total`.
+     * @default true
+     */
+    isCounterVisible?: boolean;
+    /**
+     * Тексты диалога подтверждения выхода.
+     */
+    confirmExit?: ConfirmExitConfig;
+    /**
+     * Настройки кнопок навигации внизу шага.
+     */
+    buttons?: OnboardingButtons;
+    /**
+     * Общий тайм-аут ожидания элементов highlight-шагов в DOM (мс).
+     * Переопределяется на уровне шага через `step.waitForTimeout`.
+     *
+     * По умолчанию (`0`) элементы ищутся синхронно, без ожидания.
+     * @default 0
+     */
+    waitForTimeout?: number;
+    /**
+     * Обработчик ошибок тура.
+     */
+    onError?: (error: Error) => void;
+    /**
+     * Обработчик закрытия тура, с причиной.
+     */
+    onClose?: (reason: OnboardingCloseReason) => void;
+};
+/**
+ * Причина, по которой тур ушёл с экрана.
+ * - `completed` — пройден до конца;
+ * - `dismissed` — пользователь прервал с подтверждением;
+ * - `closed` — программное закрытие или авто-закрытие из-за ошибки рендера шага.
+ */
+export type OnboardingCloseReason = 'completed' | 'dismissed' | 'closed';
+/**
+ * Настройка для диалога подтверждения выхода.
+ */
+export type ConfirmExitConfig = {
+    title?: string;
+    description?: string;
+    confirmText?: string;
+    cancelText?: string;
+};
+/**
+ * Вариант кнопки завершения на последнем шаге тура.
+ */
+export type OnboardingFinishButtonVariant = 'contained' | 'text';
+/**
+ * Настройки кнопок навигации внизу шага.
+ */
+export type OnboardingButtons = {
+    /**
+     * Текст кнопки «назад».
+     * @default 'Назад'
+     */
+    prevLabel?: string;
+    /**
+     * Текст кнопки «вперёд».
+     * @default 'Далее'
+     */
+    nextLabel?: string;
+    /**
+     * Текст кнопки завершения на последнем шаге.
+     * @default 'Закрыть'
+     */
+    finishLabel?: string;
+    /**
+     * Вариант кнопки завершения на последнем шаге.
+     * @default 'contained'
+     */
+    finishVariant?: OnboardingFinishButtonVariant;
+};
+/**
+ * Презентационная конфигурация тура — статична на весь тур (не зависит от
+ * активного шага), значения по умолчанию уже применены в `StepResolver`. Вынесена из
+ * пошагового состояния, чтобы не дублировать проброс одних и тех же полей
+ * на каждом шаге.
+ */
+export type TourPresentation = {
+    /**
+     * Показывать точки прогресса (скрываются если шагов > 6, даже при `true`).
+     */
+    isDotsVisible: boolean;
+    /**
+     * Показывать счётчик прогресса `n / total`.
+     */
+    isCounterVisible: boolean;
+    /**
+     * Тексты диалога подтверждения выхода.
+     */
+    confirmExit: ConfirmExitConfig;
+    /**
+     * Настройки кнопок навигации
+     */
+    buttons: Required<OnboardingButtons>;
+};
+/**
+ * Состояние активного шага.
+ */
+export type ActiveStepState = TourPresentation & {
+    tourName: string;
+    step: ResolvedStep;
+    /**
+     * Позиция активного шага среди видимых шагов, с нуля.
+     */
+    position: number;
+    /**
+     * Число видимых шагов = число точек индикатора прогресса.
+     */
+    total: number;
+    hasNext: boolean;
+    hasPrev: boolean;
+    isInteractive: boolean;
+    /**
+     * Идёт ли сейчас запроса подтверждения выхода (показан ConfirmExit).
+     */
+    isConfirming: boolean;
+    onNext: () => void;
+    onPrev: () => void;
+    /**
+     * Переход к шагу по его позиции среди видимых шагов.
+     */
+    onSelectStep: (position: number) => void;
+    /**
+     * Единая точка выхода
+     */
+    requestClose: () => void;
+    /**
+     * Вызывается диалогом ConfirmExit при подтверждении выхода.
+     */
+    onConfirmExit: () => void;
+    /**
+     * Вызывается диалогом ConfirmExit при отмене выхода.
+     */
+    onCancelExit: () => void;
+    /**
+     * Обработчик ошибок тура.
+     */
+    onError: (error: Error) => void;
+};

package/components/Onboarding/types/tour.js

@@ -0,0 +1 @@
+export {};

package/components/Onboarding/ui/ConfirmExit/ConfirmExit.d.ts

@@ -0,0 +1,10 @@
+export type ConfirmExitProps = {
+    open: boolean;
+    onConfirm: () => void;
+    onCancel: () => void;
+    title?: string;
+    description?: string;
+    confirmText?: string;
+    cancelText?: string;
+};
+export declare const ConfirmExit: ({ open, onConfirm, onCancel, title, description, confirmText, cancelText, }: ConfirmExitProps) => import("react/jsx-runtime").JSX.Element;

package/components/Onboarding/ui/ConfirmExit/ConfirmExit.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ConfirmExitDialog } from './styles';
+export const ConfirmExit = ({ open, onConfirm, onCancel, title = 'Выйти из обучения?', description = 'Вы сможете пройти его заново в любой момент', confirmText = 'Выйти', cancelText = 'Продолжить', }) => (_jsx(ConfirmExitDialog, { open: open, title: title, description: description, onClose: onCancel, actions: {
+        confirm: { text: confirmText, variant: 'text', onClick: onConfirm },
+        cancel: { text: cancelText, variant: 'contained' },
+    } }));

package/components/Onboarding/ui/ConfirmExit/index.d.ts

@@ -0,0 +1,2 @@
+export { ConfirmExit } from './ConfirmExit';
+export type { ConfirmExitProps } from './ConfirmExit';

package/components/Onboarding/ui/ConfirmExit/index.js

@@ -0,0 +1 @@
+export { ConfirmExit } from './ConfirmExit';

package/components/Onboarding/ui/ConfirmExit/styles.d.ts

@@ -0,0 +1,30 @@
+/// <reference types="react" />
+export declare const ConfirmExitDialog: import("../../../styled").StyledComponent<{
+    title?: string | undefined;
+    description?: import("react").ReactNode;
+    onClose: () => void;
+    actions: {
+        confirm: Omit<import("../../..").WithoutEmotionSpecific<import("@mui/material").ButtonProps>, "color" | "component" | "size" | "variant" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple"> & {
+            variant?: "light" | "link" | "text" | "contained" | "outlined" | undefined;
+            loading?: boolean | undefined;
+            color?: "primary" | "success" | "warning" | "error" | "grey" | undefined;
+            component?: import("react").ElementType | undefined;
+            selected?: boolean | undefined;
+            size?: "large" | "medium" | undefined;
+        } & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, ""> & {
+            text: string;
+        };
+        cancel?: (Omit<import("../../..").WithoutEmotionSpecific<import("@mui/material").ButtonProps>, "color" | "component" | "size" | "variant" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple"> & {
+            variant?: "light" | "link" | "text" | "contained" | "outlined" | undefined;
+            loading?: boolean | undefined;
+            color?: "primary" | "success" | "warning" | "error" | "grey" | undefined;
+            component?: import("react").ElementType | undefined;
+            selected?: boolean | undefined;
+            size?: "large" | "medium" | undefined;
+        } & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, ""> & {
+            text: string;
+        }) | undefined;
+    };
+} & Pick<import("../../..").DialogProps, "className" | "aria-describedby" | "aria-labelledby" | "open" | "size" | "disablePortal" | "disableScrollLock" | "hideBackdrop" | "keepMounted" | "disableBackdropClick"> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/components/Onboarding/ui/ConfirmExit/styles.js

@@ -0,0 +1,11 @@
+import { ConfirmDialog } from '../../../ConfirmDialog';
+import { confirmDialogClassnames } from '../../../ConfirmDialog/constants';
+import { styled } from '../../../styled';
+import { onboardingModalSurface } from '../styles';
+export const ConfirmExitDialog = styled(ConfirmDialog) `
+  ${({ theme }) => onboardingModalSurface(theme)};
+  
+  .${confirmDialogClassnames.confirmButton} {
+    order: -1;
+  }
+`;

package/components/Onboarding/ui/OnboardingContainer/OnboardingContainer.d.ts

@@ -0,0 +1,12 @@
+import { type Onboarding } from '../../Onboarding';
+export type OnboardingContainerProps = {
+    /**
+     * Экземпляр онбординга, созданный через `createOnboarding`. Контейнер
+     * показывает туры только этого экземпляра.
+     */
+    onboarding: Onboarding;
+};
+/**
+ * Контейнер онбординга.
+ */
+export declare const OnboardingContainer: ({ onboarding, }: OnboardingContainerProps) => import("react/jsx-runtime").JSX.Element | null;

package/components/Onboarding/ui/OnboardingContainer/OnboardingContainer.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ConfirmExit } from '../ConfirmExit';
+import { StepStrategy } from '../StepStrategy';
+import { OnboardingErrorBoundary } from './OnboardingErrorBoundary';
+import { useLogic } from './useLogic';
+/**
+ * Контейнер онбординга.
+ */
+export const OnboardingContainer = ({ onboarding, }) => {
+    const { activeStep, isClosing } = useLogic(onboarding);
+    if (!activeStep) {
+        return null;
+    }
+    return (_jsxs(OnboardingErrorBoundary, { onError: activeStep.onError, children: [_jsx(StepStrategy, { activeStep: activeStep, isClosing: isClosing }), _jsx(ConfirmExit, { open: activeStep.isConfirming && !isClosing, onConfirm: activeStep.onConfirmExit, onCancel: activeStep.onCancelExit, ...activeStep.confirmExit })] }));
+};

package/components/Onboarding/ui/OnboardingContainer/OnboardingErrorBoundary/OnboardingErrorBoundary.d.ts

@@ -0,0 +1,22 @@
+import { Component, type ReactNode } from 'react';
+export type OnboardingErrorBoundaryProps = {
+    /**
+     * Вызывается при перехвате ошибки render активного шага.
+     */
+    onError: (error: Error) => void;
+    children: ReactNode;
+};
+type State = {
+    hasError: boolean;
+};
+/**
+ * ErrorBoundary онбординга: при ошибке закрывает тур и вызывает `onError`
+ * (не использует глобальный UIKit-boundary,т.к у него другой контракт).
+ */
+export declare class OnboardingErrorBoundary extends Component<OnboardingErrorBoundaryProps, State> {
+    state: State;
+    static getDerivedStateFromError(): State;
+    componentDidCatch(error: Error): void;
+    render(): ReactNode;
+}
+export {};

package/components/Onboarding/ui/OnboardingContainer/OnboardingErrorBoundary/OnboardingErrorBoundary.js

@@ -0,0 +1,20 @@
+import { Component } from 'react';
+/**
+ * ErrorBoundary онбординга: при ошибке закрывает тур и вызывает `onError`
+ * (не использует глобальный UIKit-boundary,т.к у него другой контракт).
+ */
+export class OnboardingErrorBoundary extends Component {
+    constructor() {
+        super(...arguments);
+        this.state = { hasError: false };
+    }
+    static getDerivedStateFromError() {
+        return { hasError: true };
+    }
+    componentDidCatch(error) {
+        this.props.onError(error);
+    }
+    render() {
+        return this.state.hasError ? null : this.props.children;
+    }
+}

package/components/Onboarding/ui/OnboardingContainer/OnboardingErrorBoundary/index.d.ts

@@ -0,0 +1,2 @@
+export { OnboardingErrorBoundary } from './OnboardingErrorBoundary';
+export type { OnboardingErrorBoundaryProps } from './OnboardingErrorBoundary';

package/components/Onboarding/ui/OnboardingContainer/OnboardingErrorBoundary/index.js

@@ -0,0 +1 @@
+export { OnboardingErrorBoundary } from './OnboardingErrorBoundary';

package/components/Onboarding/ui/OnboardingContainer/index.d.ts

@@ -0,0 +1 @@
+export { OnboardingContainer, type OnboardingContainerProps, } from './OnboardingContainer';

package/components/Onboarding/ui/OnboardingContainer/index.js

@@ -0,0 +1 @@
+export { OnboardingContainer, } from './OnboardingContainer';

package/components/Onboarding/ui/OnboardingContainer/useLogic/index.d.ts

@@ -0,0 +1 @@
+export { useLogic } from './useLogic';

package/components/Onboarding/ui/OnboardingContainer/useLogic/index.js

@@ -0,0 +1 @@
+export { useLogic } from './useLogic';

package/components/Onboarding/ui/OnboardingContainer/useLogic/useLogic.d.ts

@@ -0,0 +1,10 @@
+import { type Onboarding } from '../../../Onboarding';
+import { type ActiveStepState } from '../../../types';
+export type UseLogicResult = {
+    activeStep: ActiveStepState | null;
+    isClosing: boolean;
+};
+/**
+ * Логика контейнера: читает шаг из store, держит его при закрытии для анимации.
+ */
+export declare const useLogic: (onboarding: Onboarding) => UseLogicResult;

package/components/Onboarding/ui/OnboardingContainer/useLogic/useLogic.js

@@ -0,0 +1,14 @@
+import { useTheme } from '../../../../theme/hooks/useTheme';
+import { useActiveStep } from '../../hooks/useActiveStep';
+import { useDelayedActiveStep } from '../../hooks/useDelayedActiveStep';
+import { useKeyboardNav } from '../../hooks/useKeyboardNav';
+/**
+ * Логика контейнера: читает шаг из store, держит его при закрытии для анимации.
+ */
+export const useLogic = (onboarding) => {
+    const theme = useTheme();
+    const currentStep = useActiveStep(onboarding.activeStepStore);
+    const { active: activeStep, isClosing } = useDelayedActiveStep(currentStep, theme.transitions.duration.enteringScreen);
+    useKeyboardNav(currentStep);
+    return { activeStep, isClosing };
+};

package/components/Onboarding/ui/Overlay/Overlay.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+import { type Rect } from '../../utils/geometry';
+export type OverlayProps = {
+    /**
+     * Hole (null для сплошного затемнения).
+     */
+    hole: Rect | null;
+    /**
+     * Проходят ли клики сквозь overlay
+     */
+    isInteractive?: boolean;
+    /**
+     * Показан ли overlay.
+     * @default true
+     */
+    isVisible?: boolean;
+    /**
+     * Идёт переезд hole на новую цель.
+     */
+    isHoleMoving?: boolean;
+    /**
+     * Клик по overlay.
+     */
+    onClose: () => void;
+};
+/**
+ * SVG-overlay с hole и порталом в document.body.
+ */
+export declare const Overlay: ({ hole, isInteractive, isVisible, isHoleMoving, onClose, }: OverlayProps) => import("react").ReactPortal;

package/components/Onboarding/ui/Overlay/Overlay.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createPortal } from 'react-dom';
+import { cva } from '../../../utils/cva';
+import { DEFAULT_HIGHLIGHT_RADIUS } from '../../constants';
+import { overlayClassnames } from './constants';
+import { Backdrop, HoleBlocker, OverlayRoot } from './styles';
+import { useLogic } from './useLogic';
+const rootCva = cva(overlayClassnames.root, {
+    variants: {
+        isHidden: {
+            true: overlayClassnames.hidden,
+        },
+        isHoleMoving: {
+            true: overlayClassnames.holeMoving,
+        },
+    },
+});
+/**
+ * SVG-overlay с hole и порталом в document.body.
+ */
+export const Overlay = ({ hole, isInteractive, isVisible = true, isHoleMoving = false, onClose, }) => {
+    const { viewport, clampedHole, path } = useLogic(hole);
+    return createPortal(_jsxs(OverlayRoot, { viewBox: `0 0 ${viewport.width} ${viewport.height}`, preserveAspectRatio: "none", className: rootCva({ isHidden: !isVisible, isHoleMoving }), children: [_jsx(Backdrop, { d: path, fillRule: "evenodd", onClick: onClose, className: overlayClassnames.backdrop }), !isInteractive && clampedHole && (_jsx(HoleBlocker, { x: clampedHole.x, y: clampedHole.y, width: clampedHole.width, height: clampedHole.height, rx: DEFAULT_HIGHLIGHT_RADIUS, className: overlayClassnames.holeBlocker }))] }), document.body);
+};

package/components/Onboarding/ui/Overlay/constants.d.ts

@@ -0,0 +1,7 @@
+export declare const overlayClassnames: {
+    root: string;
+    hidden: string;
+    holeMoving: string;
+    backdrop: string;
+    holeBlocker: string;
+};

package/components/Onboarding/ui/Overlay/constants.js

@@ -0,0 +1,8 @@
+import { createUIKitClassname } from '../../../utils/createUIKitClassname';
+export const overlayClassnames = {
+    root: createUIKitClassname('onboarding-overlay'),
+    hidden: createUIKitClassname('onboarding-overlay_hidden'),
+    holeMoving: createUIKitClassname('onboarding-overlay_hole-moving'),
+    backdrop: createUIKitClassname('onboarding-overlay__backdrop'),
+    holeBlocker: createUIKitClassname('onboarding-overlay__hole-blocker'),
+};

package/components/Onboarding/ui/Overlay/index.d.ts

@@ -0,0 +1,2 @@
+export { Overlay } from './Overlay';
+export type { OverlayProps } from './Overlay';

package/components/Onboarding/ui/Overlay/index.js

@@ -0,0 +1 @@
+export { Overlay } from './Overlay';

package/components/Onboarding/ui/Overlay/styles.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+/**
+ * Контейнер overlay с затуханием при открытии/закрытии.
+ */
+export declare const OverlayRoot: import("../../../styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").SVGProps<SVGSVGElement>, {}>;
+/**
+ * Затемненная часть с hole, перехватывает клики.
+ */
+export declare const Backdrop: import("../../../styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").SVGProps<SVGPathElement>, {}>;
+/**
+ * Блокатор кликов для неинтерактивных шагов.
+ */
+export declare const HoleBlocker: import("../../../styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").SVGProps<SVGRectElement>, {}>;

package/components/Onboarding/ui/Overlay/styles.js

@@ -0,0 +1,57 @@
+import { styled } from '../../../styled';
+import { ONBOARDING_Z_INDEX_OFFSET } from '../../constants';
+import { overlayClassnames } from './constants';
+/**
+ * Контейнер overlay с затуханием при открытии/закрытии.
+ */
+export const OverlayRoot = styled.svg `
+  pointer-events: none;
+
+  position: fixed;
+  z-index: ${({ theme }) => theme.zIndex.tooltip + ONBOARDING_Z_INDEX_OFFSET.base};
+  inset: 0;
+
+  width: 100%;
+  height: 100%;
+
+  opacity: 1;
+
+  transition: opacity ${({ theme }) => theme.transitions.duration.enteringScreen}ms
+    ${({ theme }) => theme.transitions.easing.easeInOut};
+
+  &.${overlayClassnames.hidden} {
+    opacity: 0;
+
+    .${overlayClassnames.backdrop}, .${overlayClassnames.holeBlocker} {
+      pointer-events: none;
+    }
+  }
+`;
+/**
+ * Затемненная часть с hole, перехватывает клики.
+ */
+export const Backdrop = styled.path `
+  pointer-events: auto;
+  cursor: pointer;
+
+  fill: ${({ theme }) => theme.palette.background.modalShadow};
+
+  .${overlayClassnames.holeMoving} & {
+    transition: d ${({ theme }) => theme.transitions.duration.standard}ms
+      ${({ theme }) => theme.transitions.easing.easeInOut};
+  }
+`;
+/**
+ * Блокатор кликов для неинтерактивных шагов.
+ */
+export const HoleBlocker = styled.rect `
+  pointer-events: auto;
+
+  fill: transparent;
+
+  .${overlayClassnames.holeMoving} & {
+    transition-timing-function: ${({ theme }) => theme.transitions.easing.easeInOut};
+    transition-duration: ${({ theme }) => theme.transitions.duration.standard}ms;
+    transition-property: x, y, width, height, rx;
+  }
+`;

package/components/Onboarding/ui/Overlay/useLogic/index.d.ts

@@ -0,0 +1 @@
+export { useLogic } from './useLogic';

package/components/Onboarding/ui/Overlay/useLogic/index.js

@@ -0,0 +1 @@
+export { useLogic } from './useLogic';

package/components/Onboarding/ui/Overlay/useLogic/useLogic.d.ts

@@ -0,0 +1,13 @@
+import { type Rect, type Viewport } from '../../../utils/geometry';
+export type UseLogicResult = {
+    viewport: Viewport;
+    /**
+     * Hole, обрезанный по viewport (null для standalone-шага).
+     */
+    clampedHole: Rect | null;
+    /**
+     * SVG-путь overlay.
+     */
+    path: string;
+};
+export declare const useLogic: (hole: Rect | null) => UseLogicResult;

package/components/Onboarding/ui/Overlay/useLogic/useLogic.js

@@ -0,0 +1,10 @@
+import { DEFAULT_HIGHLIGHT_RADIUS } from '../../../constants';
+import { buildOverlayPath, clampToViewport, } from '../../../utils/geometry';
+import { useViewportSize } from '../../hooks/useViewportSize';
+export const useLogic = (hole) => {
+    const viewport = useViewportSize();
+    const clampedHole = hole ? clampToViewport(hole, viewport) : null;
+    // Путь строится по необрезанной hole для скруглённых углов у края.
+    const path = buildOverlayPath(viewport, hole, DEFAULT_HIGHLIGHT_RADIUS);
+    return { viewport, clampedHole, path };
+};

package/components/Onboarding/ui/StepStrategy/StepStrategy.d.ts

@@ -0,0 +1,6 @@
+import { type StepViewProps } from './steps/types';
+export type StepStrategyProps = Omit<StepViewProps, 'geometry'>;
+/**
+ * Стратегия отрисовки по типу шага, единый overlay для всего тура.
+ */
+export declare const StepStrategy: ({ activeStep, isClosing }: StepStrategyProps) => import("react/jsx-runtime").JSX.Element;

package/components/Onboarding/ui/StepStrategy/StepStrategy.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Overlay } from '../Overlay';
+import { HighlightStep } from './steps/HighlightStep';
+import { StandaloneStep } from './steps/StandaloneStep';
+import { useLogic } from './useLogic';
+const STEP_VIEWS = {
+    standalone: StandaloneStep,
+    highlight: HighlightStep,
+};
+/**
+ * Стратегия отрисовки по типу шага, единый overlay для всего тура.
+ */
+export const StepStrategy = ({ activeStep, isClosing }) => {
+    const { geometry, shouldShowOverlay, isVisible, isHoleMoving, onOverlayClose, } = useLogic(activeStep, isClosing);
+    const StepView = STEP_VIEWS[activeStep.step.type];
+    return (_jsxs(_Fragment, { children: [shouldShowOverlay && (_jsx(Overlay, { hole: geometry.hole, isInteractive: activeStep.isInteractive, isVisible: isVisible, isHoleMoving: isHoleMoving, onClose: onOverlayClose })), _jsx(StepView, { activeStep: activeStep, isClosing: isClosing, geometry: geometry })] }));
+};

package/components/Onboarding/ui/StepStrategy/index.d.ts

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

package/components/Onboarding/ui/StepStrategy/index.js

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

package/components/Onboarding/ui/StepStrategy/steps/HighlightStep/HighlightStep.d.ts

@@ -0,0 +1,6 @@
+import { type StepViewProps } from '../types';
+export type HighlightStepProps = StepViewProps;
+/**
+ * Шаг с подсветкой: popover рядом с hole.
+ */
+export declare const HighlightStep: ({ activeStep, isClosing, geometry, }: HighlightStepProps) => import("react/jsx-runtime").JSX.Element | null;

package/components/Onboarding/ui/StepStrategy/steps/HighlightStep/HighlightStep.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { CrossOutlineMd } from '../../../../../../icons/CrossOutlineMd';
+import { Typography } from '../../../../../Typography';
+import { StepFooter } from '../StepFooter';
+import { CloseButton, Content, PopoverBody, StepPopover } from './styles';
+import { useLogic } from './useLogic';
+/**
+ * Шаг с подсветкой: popover рядом с hole.
+ */
+export const HighlightStep = ({ activeStep, isClosing, geometry, }) => {
+    const { step } = activeStep;
+    const { anchorEl } = geometry;
+    const { isOpen, shouldShowPopover, setPopoverNode, handleClose } = useLogic(activeStep, isClosing, geometry);
+    // Без якоря popover не рисуем.
+    if (!anchorEl) {
+        return null;
+    }
+    return (_jsx(_Fragment, { children: shouldShowPopover && (_jsx(StepPopover, { isOpen: isOpen, disableAutoFocus: true, hasArrow: true, anchorEl: anchorEl, placement: step.position, children: _jsxs(PopoverBody, { ref: setPopoverNode, tabIndex: -1, children: [_jsx(CloseButton, { variant: "text", onClick: handleClose, "aria-label": "\u0417\u0430\u043A\u0440\u044B\u0442\u044C", children: _jsx(CrossOutlineMd, {}) }), _jsxs(Content, { children: [step.title && (_jsx(Typography, { component: "div", variant: "h5", children: step.title })), step.content && (_jsx(Typography, { component: "div", variant: "body1", color: "grey", colorIntensity: "900", children: step.content }))] }), _jsx(StepFooter, { activeStep: activeStep })] }) })) }));
+};

package/components/Onboarding/ui/StepStrategy/steps/HighlightStep/index.d.ts

@@ -0,0 +1,2 @@
+export { HighlightStep } from './HighlightStep';
+export type { HighlightStepProps } from './HighlightStep';

package/components/Onboarding/ui/StepStrategy/steps/HighlightStep/index.js

@@ -0,0 +1 @@
+export { HighlightStep } from './HighlightStep';