@astral/ui 4.82.0 → 4.84.0

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';

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

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+/**
+ * Popover шага, z-index над overlay, быстрое закрытие.
+ */
+export declare const StepPopover: import("../../../../../styled").StyledComponent<import("../../../../../NewPopover").NewPopoverProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const PopoverBody: 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<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const CloseButton: import("../../../../../styled").StyledComponent<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>, ""> & import("react").RefAttributes<HTMLButtonElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const Content: 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<HTMLDivElement>, HTMLDivElement>, {}>;

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

@@ -0,0 +1,56 @@
+import { IconButton } from '../../../../../IconButton';
+import { NewPopover } from '../../../../../NewPopover';
+import { popoverClassnames } from '../../../../../NewPopover/constants';
+import { styled } from '../../../../../styled';
+import { ONBOARDING_Z_INDEX_OFFSET } from '../../../../constants';
+/**
+ * Popover шага, z-index над overlay, быстрое закрытие.
+ */
+export const StepPopover = styled(NewPopover) `
+  && {
+    z-index: ${({ theme }) => theme.zIndex.tooltip + ONBOARDING_Z_INDEX_OFFSET.popover};
+  }
+  
+  .${popoverClassnames.innerContainer} {
+    border-radius: calc(${({ theme }) => theme.shape.medium} * 2);
+  }
+
+  .${popoverClassnames.animatedWrapper}:not(.${popoverClassnames.animatedWrapperOpen}) {
+    animation-duration: ${({ theme }) => theme.transitions.duration.shortest}ms;
+  }
+`;
+export const PopoverBody = styled.div `
+  position: relative;
+
+  width: 400px;
+  padding: ${({ theme }) => theme.spacing(6)};
+
+  border-radius: calc(${({ theme }) => theme.shape.medium} * 2);
+
+  /* Фокус-трап ставит фокус на контейнер, браузерную рамку убираем. */
+  &:focus {
+    outline: none;
+  }
+`;
+export const CloseButton = styled(IconButton) `
+  position: absolute;
+  top: ${({ theme }) => theme.spacing(6)};
+  right: ${({ theme }) => theme.spacing(6)};
+`;
+export const Content = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(4)};
+
+  margin-bottom: ${({ theme }) => theme.spacing(6)};
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  /* Резерв справа под крестик — только у верхнего элемента (заголовок, а если
+     его нет — текст) */
+  & > *:first-of-type {
+    padding-right: ${({ theme }) => theme.spacing(10)};
+  }
+`;

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

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

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

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

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

@@ -0,0 +1,12 @@
+import { type ActiveStepState } from '../../../../../types';
+import { type OverlayGeometry } from '../../../useLogic';
+export type UseLogicResult = {
+    isOpen: boolean;
+    shouldShowPopover: boolean;
+    setPopoverNode: (node: HTMLElement | null) => void;
+    handleClose: () => void;
+};
+/**
+ * Логика highlight-шага: задержка popover, фокус-трап, закрытие.
+ */
+export declare const useLogic: (activeStep: ActiveStepState, isClosing: boolean, geometry: OverlayGeometry) => UseLogicResult;

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

@@ -0,0 +1,37 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useTheme } from '../../../../../../theme/hooks/useTheme';
+import { useFocusTrap } from '../../../../hooks/useFocusTrap';
+/**
+ * Логика highlight-шага: задержка popover, фокус-трап, закрытие.
+ */
+export const useLogic = (activeStep, isClosing, geometry) => {
+    const { isInteractive, isConfirming } = activeStep;
+    const { anchorEl, element, isTransitioning } = geometry;
+    const theme = useTheme();
+    const isOpen = !isClosing;
+    // Задержка до появления popover после готовности hole.
+    const isHoleReady = anchorEl !== null;
+    const [isEntered, setIsEntered] = useState(false);
+    useEffect(() => {
+        if (isEntered || !isHoleReady) {
+            return;
+        }
+        const timer = setTimeout(() => setIsEntered(true), theme.transitions.duration.shortest);
+        return () => clearTimeout(timer);
+    }, [isEntered, isHoleReady]);
+    const [popoverNode, setPopoverNode] = useState(null);
+    const trapNodes = useMemo(() => [popoverNode, isInteractive ? element : null], [popoverNode, isInteractive, element]);
+    // Трап выключен при закрытии/подтверждении.
+    useFocusTrap(trapNodes, isOpen && !isConfirming);
+    const handleClose = useCallback(() => {
+        activeStep.requestClose();
+    }, [activeStep]);
+    // При переходе popover размонтируется; при закрытии — grow-out.
+    const shouldShowPopover = !isConfirming && !isTransitioning && isEntered;
+    return {
+        isOpen,
+        shouldShowPopover,
+        setPopoverNode,
+        handleClose,
+    };
+};

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

@@ -0,0 +1,6 @@
+import { type StepViewProps } from '../types';
+export type StandaloneStepProps = StepViewProps;
+/**
+ * Standalone шаг-модалка.
+ */
+export declare const StandaloneStep: ({ activeStep, isClosing, }: StandaloneStepProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DialogContent } from '../../../../../DialogContent';
+import { StepFooter } from '../StepFooter';
+import { Footer, StepDialog } from './styles';
+/**
+ * Standalone шаг-модалка.
+ */
+export const StandaloneStep = ({ activeStep, isClosing, }) => {
+    const { step, isConfirming, requestClose } = activeStep;
+    return (_jsxs(StepDialog, { open: !isConfirming && !isClosing, title: step.title, onClose: requestClose, size: step.dialogSize, disableAutoFocus: true, children: [_jsx(DialogContent, { children: step.content }), _jsx(Footer, { children: _jsx(StepFooter, { activeStep: activeStep }) })] }));
+};

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

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

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

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

package/components/Onboarding/ui/StepStrategy/steps/StandaloneStep/styles.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+export declare const StepDialog: import("../../../../../styled").StyledComponent<import("../../../../..").WithoutEmotionSpecific<Omit<import("@mui/material").DialogProps, "title" | "maxWidth">> & {
+    title?: string | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>[] | undefined;
+    disableBackdropClick?: boolean | undefined;
+    size?: import("../../../../../Dialog").DialogSize | undefined;
+    headerContent?: import("react").ReactNode;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const Footer: 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<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/Onboarding/ui/StepStrategy/steps/StandaloneStep/styles.js

@@ -0,0 +1,9 @@
+import { Dialog } from '../../../../../Dialog';
+import { styled } from '../../../../../styled';
+import { onboardingModalSurface } from '../../../styles';
+export const StepDialog = styled(Dialog) `
+  ${({ theme }) => onboardingModalSurface(theme)};
+`;
+export const Footer = styled.div `
+    padding: ${({ theme }) => theme.spacing(0, 6, 6)};
+`;

package/components/Onboarding/ui/StepStrategy/steps/StepFooter/ProgressDots/ProgressDots.d.ts

@@ -0,0 +1,6 @@
+import { type ActiveStepState } from '../../../../../types';
+export type ProgressDotsProps = Pick<ActiveStepState, 'position' | 'total' | 'onSelectStep'>;
+/**
+ * Индикатор прогресса точками
+ */
+export declare const ProgressDots: ({ position, total, onSelectStep, }: ProgressDotsProps) => import("react/jsx-runtime").JSX.Element;

package/components/Onboarding/ui/StepStrategy/steps/StepFooter/ProgressDots/ProgressDots.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from '../../../../../../utils/cva';
+import { progressDotClassnames } from './constants';
+import { Dot, Dots } from './styles';
+const dotCva = cva(progressDotClassnames.root, {
+    variants: {
+        isActive: {
+            true: progressDotClassnames.active,
+        },
+    },
+});
+/**
+ * Индикатор прогресса точками
+ */
+export const ProgressDots = ({ position, total, onSelectStep, }) => (_jsx(Dots, { children: Array.from({ length: total }, (_, index) => (_jsx(Dot, { type: "button", className: dotCva({ isActive: index === position }), "aria-label": `Перейти к шагу ${index + 1}`, "aria-current": index === position, onClick: () => onSelectStep(index) }, index))) }));

package/components/Onboarding/ui/StepStrategy/steps/StepFooter/ProgressDots/constants.d.ts

@@ -0,0 +1,4 @@
+export declare const progressDotClassnames: {
+    root: string;
+    active: string;
+};

package/components/Onboarding/ui/StepStrategy/steps/StepFooter/ProgressDots/constants.js

@@ -0,0 +1,5 @@
+import { createUIKitClassname } from '../../../../../../utils/createUIKitClassname';
+export const progressDotClassnames = {
+    root: createUIKitClassname('onboarding-progress-dot'),
+    active: createUIKitClassname('onboarding-progress-dot_active'),
+};

package/components/Onboarding/ui/StepStrategy/steps/StepFooter/ProgressDots/index.d.ts

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

package/components/Onboarding/ui/StepStrategy/steps/StepFooter/ProgressDots/index.js

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

package/components/Onboarding/ui/StepStrategy/steps/StepFooter/ProgressDots/styles.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare const Dots: 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<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Dot: 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").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;

package/components/Onboarding/ui/StepStrategy/steps/StepFooter/ProgressDots/styles.js

@@ -0,0 +1,34 @@
+import { styled } from '../../../../../../styled';
+import { progressDotClassnames } from './constants';
+export const Dots = styled.div `
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(1)};
+  align-items: center;
+`;
+export const Dot = styled.button `
+  cursor: pointer;
+
+  width: 8px;
+  height: 8px;
+  padding: 0;
+
+  background-color: ${({ theme }) => theme.palette.grey[200]};
+  border: none;
+  border-radius: 50%;
+
+  transition: background-color 0.2s;
+
+  &.${progressDotClassnames.active} {
+    background-color: ${({ theme }) => theme.palette.grey[600]};
+  }
+
+  /* Круглый фокус вместо браузерной рамки. */
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${({ theme }) => theme.palette.components.focused};
+    outline-offset: 2px;
+  }
+`;

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

@@ -0,0 +1,9 @@
+import { type ActiveStepState } from '../../../../types';
+export type StepFooterProps = {
+    activeStep: ActiveStepState;
+};
+/**
+ * Футер шага: индикатор прогресса и кнопки навигации.
+ * Общий для standalone и highlight.
+ */
+export declare const StepFooter: ({ activeStep }: StepFooterProps) => import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../../../../../Button';
+import { Typography } from '../../../../../Typography';
+import { ProgressDots } from './ProgressDots';
+import { CenterSlot, LeftSlot, NavigationRow, RightSlot, Root } from './styles';
+import { useLogic } from './useLogic';
+/**
+ * Футер шага: индикатор прогресса и кнопки навигации.
+ * Общий для standalone и highlight.
+ */
+export const StepFooter = ({ activeStep }) => {
+    const { isPrevVisible, isNextVisible, isDotsVisible, isCounterVisible, position, total, prevButtonText, nextButtonText, nextButtonVariant, onNext, onPrev, onSelectStep, } = useLogic(activeStep);
+    // Нечего показывать — не отрисовываем пустой футер
+    if (!isPrevVisible && !isNextVisible && !isDotsVisible && !isCounterVisible) {
+        return null;
+    }
+    return (_jsx(Root, { children: _jsxs(NavigationRow, { children: [_jsx(LeftSlot, { children: isPrevVisible && (_jsx(Button, { variant: "text", onClick: onPrev, children: prevButtonText })) }), _jsxs(CenterSlot, { children: [isDotsVisible && (_jsx(ProgressDots, { position: position, total: total, onSelectStep: onSelectStep })), isCounterVisible && (_jsxs(Typography, { variant: "caption", color: "grey", colorIntensity: "600", children: [position + 1, " / ", total] }))] }), _jsx(RightSlot, { children: isNextVisible && (_jsx(Button, { "data-focus": "next", variant: nextButtonVariant, onClick: onNext, children: nextButtonText }, nextButtonVariant)) })] }) }));
+};

package/components/Onboarding/ui/StepStrategy/steps/StepFooter/constants.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Максимум точек в индикаторе прогресса
+ */
+export declare const MAX_PROGRESS_DOTS = 6;

package/components/Onboarding/ui/StepStrategy/steps/StepFooter/constants.js

@@ -0,0 +1,4 @@
+/**
+ * Максимум точек в индикаторе прогресса
+ */
+export const MAX_PROGRESS_DOTS = 6;

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

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

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

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

package/components/Onboarding/ui/StepStrategy/steps/StepFooter/styles.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+export declare const Root: 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<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const NavigationRow: 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<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const LeftSlot: 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<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const CenterSlot: 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<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const RightSlot: 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<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/Onboarding/ui/StepStrategy/steps/StepFooter/styles.js

@@ -0,0 +1,28 @@
+import { styled } from '../../../../../styled';
+export const Root = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(2)};
+
+  width: 100%;
+  padding:0;
+`;
+export const NavigationRow = styled.div `
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+`;
+export const LeftSlot = styled.div `
+  display: flex;
+  justify-content: flex-start;
+`;
+export const CenterSlot = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(1)};
+  align-items: center;
+`;
+export const RightSlot = styled.div `
+  display: flex;
+  justify-content: flex-end;
+`;

package/components/Onboarding/ui/StepStrategy/steps/StepFooter/useLogic/index.d.ts

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

package/components/Onboarding/ui/StepStrategy/steps/StepFooter/useLogic/index.js

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

package/components/Onboarding/ui/StepStrategy/steps/StepFooter/useLogic/useLogic.d.ts

@@ -0,0 +1,16 @@
+import { type ActiveStepState } from '../../../../../types';
+export type UseLogicResult = {
+    isPrevVisible: boolean;
+    isNextVisible: boolean;
+    isDotsVisible: boolean;
+    isCounterVisible: boolean;
+    position: number;
+    total: number;
+    prevButtonText: string;
+    nextButtonText: string;
+    nextButtonVariant: 'text' | 'contained';
+    onNext: () => void;
+    onPrev: () => void;
+    onSelectStep: (position: number) => void;
+};
+export declare const useLogic: (activeStep: ActiveStepState) => UseLogicResult;

package/components/Onboarding/ui/StepStrategy/steps/StepFooter/useLogic/useLogic.js

@@ -0,0 +1,22 @@
+import { MAX_PROGRESS_DOTS } from '../constants';
+export const useLogic = (activeStep) => {
+    const { step, position, total, hasNext, hasPrev, isDotsVisible, isCounterVisible, buttons, onNext, onPrev, onSelectStep, } = activeStep;
+    // Прогресс имеет смысл только при total > 1.
+    const hasProgress = total > 1;
+    // Последний шаг: кнопка «вперёд» превращается в завершающую.
+    const isFinishStep = !hasNext;
+    return {
+        isPrevVisible: step.isPrevButtonVisible && hasPrev,
+        isNextVisible: step.isNextButtonVisible,
+        isDotsVisible: isDotsVisible && hasProgress && total <= MAX_PROGRESS_DOTS,
+        isCounterVisible: isCounterVisible && hasProgress,
+        position,
+        total,
+        prevButtonText: buttons.prevLabel,
+        nextButtonText: isFinishStep ? buttons.finishLabel : buttons.nextLabel,
+        nextButtonVariant: isFinishStep ? buttons.finishVariant : 'contained',
+        onNext,
+        onPrev,
+        onSelectStep,
+    };
+};

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

@@ -0,0 +1,16 @@
+import { type ActiveStepState } from '../../../types';
+import { type OverlayGeometry } from '../useLogic';
+/**
+ * Контракт step-view, передаётся стратегией по типу шага.
+ */
+export type StepViewProps = {
+    activeStep: ActiveStepState;
+    /**
+     * Тур в процессе закрытия
+     */
+    isClosing: boolean;
+    /**
+     * Геометрия подсветки (единый источник для overlay и popover).
+     */
+    geometry: OverlayGeometry;
+};

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

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

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

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

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

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