@astral/ui 4.49.0 → 4.51.0

package/node/components/NewStepper/constants.d.ts

@@ -0,0 +1,13 @@
+export declare const stepperClassnames: {
+    root: string;
+    lineConnector: string;
+    arrowConnector: string;
+    orientationHorizontal: string;
+    orientationVertical: string;
+    alternativeLabel: string;
+};
+export declare const STEPPER_ORDER_COUNTER_NAME = "astral-ui-stepper-order";
+/**
+ * Задержка перед scrollIntoView после смены activeStep, что бы анимация появления текста завершилась
+ */
+export declare const MOBILE_ACTIVE_STEP_SCROLL_DEFER_MS = 300;

package/node/components/NewStepper/constants.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MOBILE_ACTIVE_STEP_SCROLL_DEFER_MS = exports.STEPPER_ORDER_COUNTER_NAME = exports.stepperClassnames = void 0;
+const createUIKitClassname_1 = require("../utils/createUIKitClassname");
+exports.stepperClassnames = {
+    root: (0, createUIKitClassname_1.createUIKitClassname)('stepper'),
+    lineConnector: (0, createUIKitClassname_1.createUIKitClassname)('stepper_connector-line'),
+    arrowConnector: (0, createUIKitClassname_1.createUIKitClassname)('stepper_connector-arrow'),
+    orientationHorizontal: (0, createUIKitClassname_1.createUIKitClassname)('stepper_orientation-horizontal'),
+    orientationVertical: (0, createUIKitClassname_1.createUIKitClassname)('stepper_orientation-vertical'),
+    alternativeLabel: (0, createUIKitClassname_1.createUIKitClassname)('stepper_alternative-label'),
+};
+exports.STEPPER_ORDER_COUNTER_NAME = 'astral-ui-stepper-order';
+/**
+ * Задержка перед scrollIntoView после смены activeStep, что бы анимация появления текста завершилась
+ */
+exports.MOBILE_ACTIVE_STEP_SCROLL_DEFER_MS = 300;

package/node/components/NewStepper/index.d.ts

@@ -0,0 +1,4 @@
+export { NewStepper } from './NewStepper';
+export { Step, type StepProps, stepClassnames } from './Step';
+export type { StepperProps } from './types';
+export { stepIconClassnames } from './StepIcon';

package/node/components/NewStepper/index.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.stepIconClassnames = exports.stepClassnames = exports.Step = exports.NewStepper = void 0;
+var NewStepper_1 = require("./NewStepper");
+Object.defineProperty(exports, "NewStepper", { enumerable: true, get: function () { return NewStepper_1.NewStepper; } });
+var Step_1 = require("./Step");
+Object.defineProperty(exports, "Step", { enumerable: true, get: function () { return Step_1.Step; } });
+Object.defineProperty(exports, "stepClassnames", { enumerable: true, get: function () { return Step_1.stepClassnames; } });
+var StepIcon_1 = require("./StepIcon");
+Object.defineProperty(exports, "stepIconClassnames", { enumerable: true, get: function () { return StepIcon_1.stepIconClassnames; } });

package/node/components/NewStepper/public.d.ts

@@ -0,0 +1,4 @@
+export { NewStepper } from './NewStepper';
+export { Step, type StepProps, stepClassnames } from './Step';
+export { stepIconClassnames } from './StepIcon';
+export type { StepperProps } from './types';

package/node/components/NewStepper/public.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.stepIconClassnames = exports.stepClassnames = exports.Step = exports.NewStepper = void 0;
+var NewStepper_1 = require("./NewStepper");
+Object.defineProperty(exports, "NewStepper", { enumerable: true, get: function () { return NewStepper_1.NewStepper; } });
+var Step_1 = require("./Step");
+Object.defineProperty(exports, "Step", { enumerable: true, get: function () { return Step_1.Step; } });
+Object.defineProperty(exports, "stepClassnames", { enumerable: true, get: function () { return Step_1.stepClassnames; } });
+var StepIcon_1 = require("./StepIcon");
+Object.defineProperty(exports, "stepIconClassnames", { enumerable: true, get: function () { return StepIcon_1.stepIconClassnames; } });

package/node/components/NewStepper/styles.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const Wrapper: import("@emotion/styled/dist/declarations/src/types").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/node/components/NewStepper/styles.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Wrapper = void 0;
+const styled_1 = require("../styled");
+const constants_1 = require("./constants");
+exports.Wrapper = styled_1.styled.div `
+  counter-reset: ${constants_1.STEPPER_ORDER_COUNTER_NAME} 0;
+
+  display: flex;
+  align-items: flex-start;
+
+  &.${constants_1.stepperClassnames.orientationHorizontal} {
+    flex-direction: row;
+
+    &.${constants_1.stepperClassnames.arrowConnector} {
+      align-items: center;
+    }
+
+    &.${constants_1.stepperClassnames.lineConnector} {
+      &:not(.${constants_1.stepperClassnames.alternativeLabel}) {
+        align-items: center;
+      }
+    }
+  }
+
+  &.${constants_1.stepperClassnames.orientationVertical} {
+    flex-direction: column;
+
+    &.${constants_1.stepperClassnames.lineConnector} {
+      gap: ${({ theme }) => theme.microSpacing(1)};
+    }
+  }
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    /* Убираем видимую полосу прокрутки в firefox */
+    scrollbar-width: none;
+
+    overflow-x: auto;
+
+    width: 100%;
+
+    /* Убираем видимую полосу прокрутки в chrome */
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+`;

package/node/components/NewStepper/types.d.ts

@@ -0,0 +1,33 @@
+import type { ReactNode } from 'react';
+export type StepperProps = {
+    activeStep?: number;
+    className?: string;
+    /**
+     * Тип соединителя между шагами
+     */
+    connector?: 'arrow' | 'line';
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * Отображение названия шага под иконкой
+     *
+     * Работает только с `orientation="horizontal"` и типом `connector: "line"`.
+     */
+    alternativeLabel?: boolean;
+    /**
+     * Функция вызываемая при клике на предыдущий шаг. Делает кликабельными только предыдущие шаги.
+     */
+    onClickPrevStep?: (index: number) => void;
+    /**
+     * Функция вызываемая при клике на шаг. Делает все шаги кликабельными.
+     */
+    onClickStep?: (index: number) => void;
+    /**
+     * @example
+     * <NewStepper>
+     *   <Step label="Step 1" stepId={1} />
+     *   <Step label="Step 2" stepId={2} />
+     *   <Step label="Step 3" stepId={3} />
+     * </NewStepper>
+     */
+    children: ReactNode;
+};

package/node/components/NewStepper/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/node/components/NewStepper/useLogic/index.d.ts

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

package/node/components/NewStepper/useLogic/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./useLogic"), exports);

package/node/components/NewStepper/useLogic/useLogic.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import type { StepperProps } from '../types';
+type UseLogicParams = StepperProps;
+export declare const useLogic: ({ orientation, connector, alternativeLabel, activeStep, onClickPrevStep, onClickStep, className, children, }: UseLogicParams) => {
+    containerRef: import("react").RefObject<HTMLDivElement | null>;
+    stepperConnector: "line" | "arrow";
+    stepperAlternativeLabel: boolean;
+    activeStep: number;
+    onClickPrevStep: ((index: number) => void) | undefined;
+    orientation: "horizontal" | "vertical";
+    onClickStep: ((index: number) => void) | undefined;
+    className: string | undefined;
+    children: import("react").ReactNode;
+};
+export {};

package/node/components/NewStepper/useLogic/useLogic.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLogic = void 0;
+const react_1 = require("react");
+const useViewportType_1 = require("../../useViewportType");
+const constants_1 = require("../constants");
+const utils_1 = require("./utils");
+const useLogic = ({ orientation = 'horizontal', connector = 'line', alternativeLabel = false, activeStep = 0, onClickPrevStep, onClickStep, className, children, }) => {
+    (0, react_1.useEffect)(() => {
+        (0, utils_1.validateStepperProps)({ orientation, connector, alternativeLabel });
+    }, []);
+    const { isMobile } = (0, useViewportType_1.useViewportType)();
+    // На разрешении sm и ниже connector line + alternativeLabel выглядит как connector arrow без alternativeLabel
+    const isMobileDisplayStepper = isMobile && orientation === 'horizontal' && connector === 'line';
+    const stepperConnector = isMobileDisplayStepper ? 'arrow' : connector;
+    const stepperAlternativeLabel = isMobileDisplayStepper
+        ? false
+        : alternativeLabel;
+    const containerRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        if (!isMobile || !containerRef.current) {
+            return;
+        }
+        const container = containerRef.current;
+        const runScroll = () => {
+            const activeStepElement = container.querySelector('[data-active-step="true"]');
+            if (activeStepElement) {
+                activeStepElement.scrollIntoView({
+                    behavior: 'smooth',
+                    block: 'nearest',
+                    inline: 'center',
+                });
+            }
+        };
+        setTimeout(() => {
+            runScroll();
+        }, constants_1.MOBILE_ACTIVE_STEP_SCROLL_DEFER_MS);
+    }, [activeStep, isMobile, orientation]);
+    return {
+        containerRef,
+        stepperConnector,
+        stepperAlternativeLabel,
+        activeStep,
+        onClickPrevStep,
+        orientation,
+        onClickStep,
+        className,
+        children,
+    };
+};
+exports.useLogic = useLogic;

package/node/components/NewStepper/useLogic/utils/index.d.ts

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

package/node/components/NewStepper/useLogic/utils/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./validateStepperProps"), exports);

package/node/components/NewStepper/useLogic/utils/validateStepperProps/index.d.ts

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

package/node/components/NewStepper/useLogic/utils/validateStepperProps/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./validateStepperProps"), exports);

package/node/components/NewStepper/useLogic/utils/validateStepperProps/validateStepperProps.d.ts

@@ -0,0 +1,5 @@
+/** biome-ignore-all lint/suspicious/noConsole: Сообщение для интеграторов */
+import type { StepperProps } from '../../../types';
+type ValidateStepperPropsParams = Pick<StepperProps, 'orientation' | 'connector' | 'alternativeLabel'>;
+export declare const validateStepperProps: ({ orientation, connector, alternativeLabel, }: ValidateStepperPropsParams) => void;
+export {};

package/node/components/NewStepper/useLogic/utils/validateStepperProps/validateStepperProps.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.validateStepperProps = void 0;
+const VALID_COMBINATIONS = [
+    { orientation: 'horizontal', connector: 'line', alternativeLabel: true },
+    { orientation: 'vertical', connector: 'line', alternativeLabel: false },
+    { orientation: 'horizontal', connector: 'arrow', alternativeLabel: false },
+];
+const validateStepperProps = ({ orientation, connector, alternativeLabel, }) => {
+    const isValid = VALID_COMBINATIONS.some((combo) => combo.orientation === orientation &&
+        combo.connector === connector &&
+        combo.alternativeLabel === alternativeLabel);
+    if (!isValid) {
+        console.error('Stepper: Неподдерживаемая комбинация параметров. Допустимые варианты:\n' +
+            '1) orientation="horizontal", connector="line", alternativeLabel=true\n' +
+            '2) orientation="vertical", connector="line", alternativeLabel=false\n' +
+            '3) orientation="horizontal", connector="arrow", alternativeLabel=false');
+    }
+};
+exports.validateStepperProps = validateStepperProps;

package/node/components/Stepper/Stepper.d.ts

@@ -8,5 +8,8 @@ type ConnectorProp = `${ConnectorTypes}` | ReactElement<StepConnectorProps> | nu
 export type StepperProps = Omit<StepperPropsWithoutEmotionSpecific, 'connector'> & {
     connector?: ConnectorProp;
 };
+/**
+ * @deprecated Причина отказа от поддержки: Отказ от MUI. Используйте компонент `NewStepper`.
+ */
 export declare const Stepper: (props: StepperProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/node/components/Stepper/Stepper.js

@@ -5,6 +5,9 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const ArrowConnector_1 = require("./ArrowConnector");
 const styles_1 = require("./styles");
+/**
+ * @deprecated Причина отказа от поддержки: Отказ от MUI. Используйте компонент `NewStepper`.
+ */
 const Stepper = (props) => {
     const { connector, ...restProps } = props;
     const connectorMemo = (0, react_1.useMemo)(() => {

package/node/components/StepperWizard/StepperWizard.d.ts

@@ -1,2 +1,5 @@
 import { type StepperWizardProps } from './types';
+/**
+ * @deprecated Причина отказа от поддержки: Отказ от MUI. Используйте компонент `NewStepper`.
+ */
 export declare const StepperWizard: (props: StepperWizardProps) => import("react/jsx-runtime").JSX.Element;

package/node/components/StepperWizard/StepperWizard.js

@@ -4,6 +4,9 @@ exports.StepperWizard = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const Stepper_1 = require("../Stepper");
 const useLogic_1 = require("./useLogic");
+/**
+ * @deprecated Причина отказа от поддержки: Отказ от MUI. Используйте компонент `NewStepper`.
+ */
 const StepperWizard = (props) => {
     const { clickableSteps, normalSteps, getStepButtonProps, getStepLabelProps } = (0, useLogic_1.useLogic)(props);
     const { steps, onClickPrevStep, ...stepperProps } = props;

package/node/components/Typography/Typography.js

@@ -9,7 +9,7 @@ const hooks_1 = require("./hooks");
 const styles_1 = require("./styles");
 exports.Typography = (0, react_1.forwardRef)(({ children, color, colorIntensity = '800', component, withoutCalt, className, ...props }, ref) => {
     const typographyColor = (0, hooks_1.useTypographyColor)({ color, colorIntensity });
-    return ((0, jsx_runtime_1.jsx)(styles_1.TypographyWrapper, { ref: ref, ...props, component: component, color: typographyColor, className: (0, classNames_1.classNames)(className, {
+    return ((0, jsx_runtime_1.jsx)(styles_1.TypographyWrapper, { ref: ref, ...props, component: component, color: typographyColor, className: (0, classNames_1.classNames)(constants_1.typographyClassnames.root, className, {
             [constants_1.typographyClassnames.withoutCalt]: withoutCalt,
         }), children: children }));
 });

package/node/components/Typography/constants.d.ts

@@ -1,3 +1,4 @@
 export declare const typographyClassnames: {
+    root: string;
     withoutCalt: string;
 };

package/node/components/Typography/constants.js

@@ -1,6 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.typographyClassnames = void 0;
+const createUIKitClassname_1 = require("../utils/createUIKitClassname");
 exports.typographyClassnames = {
+    root: (0, createUIKitClassname_1.createUIKitClassname)('typography'),
     withoutCalt: 'typography_without-calt',
 };

package/node/hook-form/FormWizard/FormWizard.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FormWizard = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ContentState_1 = require("../../components/ContentState");
+const NewStepper_1 = require("../../components/NewStepper");
 const Form_1 = require("../Form");
 const Footer_1 = require("./Footer");
 const styles_1 = require("./styles");
@@ -11,7 +12,7 @@ const useLogic_1 = require("./useLogic");
  * FormWizard предназначен для построения форм со степпером.
  */
 const FormWizard = (props) => {
-    const { Component, footerProps, stepWizardProps } = (0, useLogic_1.useLogic)(props);
+    const { Component, footerProps, activeStep, steps } = (0, useLogic_1.useLogic)(props);
     const { className, isFirstStep, isLastStep, isDisabled, isLoading, isError, form, customFooter, errorMsg, onRetry, onClickStep, onPrevStep, onSubmit, onSubmitError, beforeContent, } = props;
     const renderFooter = () => {
         if (customFooter) {
@@ -25,7 +26,7 @@ const FormWizard = (props) => {
         }
         return ((0, jsx_runtime_1.jsx)(Footer_1.Footer, { isDisabled: isDisabled, isFirstStep: isFirstStep, isLastStep: isLastStep, onPrevStep: onPrevStep, ...footerProps }));
     };
-    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { className: className, children: [beforeContent && ((0, jsx_runtime_1.jsx)(styles_1.BeforeContentWrapper, { children: beforeContent })), (0, jsx_runtime_1.jsx)(styles_1.StyledStepperWizard, { connector: "arrow", onClickPrevStep: onClickStep, ...stepWizardProps }), (0, jsx_runtime_1.jsx)(ContentState_1.ContentState, { isLoading: isLoading, isError: isError, 
+    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { className: className, children: [beforeContent && ((0, jsx_runtime_1.jsx)(styles_1.BeforeContentWrapper, { children: beforeContent })), (0, jsx_runtime_1.jsx)(styles_1.StyledNewStepper, { connector: "arrow", onClickPrevStep: onClickStep, activeStep: activeStep, children: steps.map((step) => ((0, jsx_runtime_1.jsx)(NewStepper_1.Step, { ...step }, step.stepId))) }), (0, jsx_runtime_1.jsx)(ContentState_1.ContentState, { isLoading: isLoading, isError: isError, 
                 // biome-ignore lint/suspicious/noTsIgnore: onRetry не требуется, если форма не инициализируется данными, получаемыми с backend
                 // @ts-ignore
                 errorState: { errorList: [errorMsg || ''], onRetry }, children: (0, jsx_runtime_1.jsxs)(Form_1.Form, { form: form, isDisabled: isDisabled, onSubmit: form.handleSubmit(onSubmit, onSubmitError), children: [(0, jsx_runtime_1.jsx)(styles_1.FormContent, { children: (0, jsx_runtime_1.jsx)(Component, {}) }), renderFooter()] }) })] }));

package/node/hook-form/FormWizard/styles.d.ts

@@ -7,10 +7,7 @@ export declare const BeforeContentWrapper: import("@emotion/styled/dist/declarat
     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 StyledStepperWizard: import("@emotion/styled/dist/declarations/src/types").StyledComponent<Omit<import("../..").StepperProps, "children"> & {
-    steps: import("../../components/StepperWizard").StepWizard[];
-    onClickPrevStep?: ((index: number) => void) | undefined;
-} & {
+export declare const StyledNewStepper: import("@emotion/styled/dist/declarations/src/types").StyledComponent<import("../../components/NewStepper").StepperProps & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
 export declare const FormContent: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{

package/node/hook-form/FormWizard/styles.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FormContent = exports.StyledStepperWizard = exports.BeforeContentWrapper = exports.Wrapper = void 0;
-const StepperWizard_1 = require("../../components/StepperWizard");
+exports.FormContent = exports.StyledNewStepper = exports.BeforeContentWrapper = exports.Wrapper = void 0;
+const NewStepper_1 = require("../../components/NewStepper");
 const styled_1 = require("../../components/styled");
 exports.Wrapper = styled_1.styled.section `
   display: flex;
@@ -16,14 +16,12 @@ exports.BeforeContentWrapper = styled_1.styled.div `
     padding: ${({ theme }) => theme.spacing(0, 4)};
   }
 `;
-exports.StyledStepperWizard = (0, styled_1.styled)(StepperWizard_1.StepperWizard) `
-  margin-bottom: ${({ theme }) => theme.spacing(4)};
+exports.StyledNewStepper = (0, styled_1.styled)(NewStepper_1.NewStepper) `
+  margin-bottom: ${({ theme }) => theme.spacing(5)};
   padding: ${({ theme }) => theme.spacing(0, 6)};
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
-    overflow-x: auto;
-
-    margin-bottom: ${({ theme }) => theme.spacing(6)};
+    margin-bottom: ${({ theme }) => theme.spacing(4)};
     padding: ${({ theme }) => theme.spacing(0, 4)};
   }
 `;

package/node/hook-form/FormWizard/useLogic/useLogic.d.ts

@@ -3,12 +3,11 @@ import { type FormWizardProps } from '../FormWizard';
 type UseLogicParams<TFormValues extends Record<string, unknown>> = FormWizardProps<TFormValues>;
 export declare const useLogic: <TFormValues extends Record<string, unknown>>({ currentStepId, steps, submitButtonText, isLastStep, }: UseLogicParams<TFormValues>) => {
     Component: import("react").FunctionComponent<{}>;
-    stepWizardProps: {
-        activeStep: number;
-        steps: {
-            label: string;
-        }[];
-    };
+    steps: {
+        label: string;
+        stepId: number;
+    }[];
+    activeStep: number;
     footerProps: {
         prevButtonText: string;
         submitButtonText: string;

package/node/hook-form/FormWizard/useLogic/useLogic.js

@@ -8,17 +8,16 @@ const useLogic = ({ currentStepId, steps, submitButtonText, isLastStep, }) => {
         ? steps?.findIndex(({ id }) => Object.is(id, currentStepId))
         : 0, [currentStepId, steps]);
     const currentStep = steps[indexStep];
-    const stepsByLabel = steps.map(({ label }) => ({
+    const stepsByLabel = steps.map(({ label }, index) => ({
         label,
+        stepId: index,
     }));
     const prevButtonText = currentStep.prevButtonText || constants_1.DEFAULT_PREV_BUTTON_TEXT;
     const nextButtonText = currentStep.nextButtonText || constants_1.DEFAULT_NEXT_BUTTON_TEXT;
     return {
         Component: currentStep.component,
-        stepWizardProps: {
-            activeStep: indexStep,
-            steps: stepsByLabel,
-        },
+        steps: stepsByLabel,
+        activeStep: indexStep,
         footerProps: {
             prevButtonText,
             submitButtonText: isLastStep ? submitButtonText : nextButtonText,

package/node/hook-form/useFormWizard/useFormWizard.js

@@ -68,8 +68,10 @@ const useFormWizard = ({ initialStepId, defaultValues, isDisabled, steps, autoSa
         return;
     };
     const handleClickStep = (index) => {
-        const stepId = steps[index].id;
-        setCurrentStepId(stepId);
+        if (index < 0 || index >= visibleSteps.length) {
+            return;
+        }
+        setCurrentStepId(visibleSteps[index].id);
     };
     const handlePrevStep = () => {
         if (isFirstStep) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astral/ui",
-  "version": "4.49.0",
+  "version": "4.51.0",
   "browser": "./index.js",
   "main": "./node/index.js",
   "dependencies": {