@hh.ru/magritte-ui-stepper 1.0.1

package/Content.d.ts

@@ -0,0 +1,6 @@
+import { type PropsWithChildren, type FC } from 'react';
+interface ContentProps {
+    onClick?: VoidFunction;
+}
+export declare const StepperContent: FC<PropsWithChildren<ContentProps>>;
+export {};

package/Content.js

@@ -0,0 +1,24 @@
+import './index.css';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, Fragment } from 'react';
+import classnames from 'classnames';
+import { useDisabled } from '@hh.ru/magritte-common-use-disabled';
+import { s as styles } from './stepper-CV0xwEd1.js';
+
+const StepperContent = forwardRef(({ children, onClick }, ref) => {
+    const Wrapper = onClick ? 'button' : Fragment;
+    const isDisabled = useDisabled();
+    const wrapperProps = onClick
+        ? {
+            className: styles.stepButton,
+            onClick,
+            disabled: isDisabled || undefined,
+            'data-qa': 'magritte-stepper-step-content',
+        }
+        : {};
+    return (jsx("div", { className: classnames(styles.contentContainer, { [styles.contentInteractive]: onClick }), ref: ref, ...(onClick ? {} : { 'data-qa': 'magritte-stepper-step-content' }), children: jsx(Wrapper, { ...wrapperProps, children: children }) }));
+});
+StepperContent.displayName = 'StepperContent';
+
+export { StepperContent };
+//# sourceMappingURL=Content.js.map

package/Content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Content.js","sources":["../src/Content.tsx"],"sourcesContent":["import {\n    type PropsWithChildren,\n    type FC,\n    type LegacyRef,\n    type ForwardRefExoticComponent,\n    type RefAttributes,\n    Fragment,\n    forwardRef,\n} from 'react';\nimport classNames from 'classnames';\n\nimport { useDisabled } from '@hh.ru/magritte-common-use-disabled';\n\nimport styles from './stepper.less';\n\ninterface ContentProps {\n    onClick?: VoidFunction;\n}\n\nexport const StepperContent: FC<PropsWithChildren<ContentProps>> = forwardRef<\n    HTMLElement,\n    PropsWithChildren<ContentProps>\n>(({ children, onClick }, ref) => {\n    const Wrapper = onClick ? 'button' : Fragment;\n    const isDisabled = useDisabled();\n    const wrapperProps = onClick\n        ? {\n              className: styles.stepButton,\n              onClick,\n              disabled: isDisabled || undefined,\n              'data-qa': 'magritte-stepper-step-content',\n          }\n        : {};\n\n    return (\n        <div\n            className={classNames(styles.contentContainer, { [styles.contentInteractive]: onClick })}\n            ref={ref as LegacyRef<HTMLDivElement>}\n            {...(onClick ? {} : { 'data-qa': 'magritte-stepper-step-content' })}\n        >\n            <Wrapper {...wrapperProps}>{children}</Wrapper>\n        </div>\n    );\n}) as ForwardRefExoticComponent<PropsWithChildren & RefAttributes<HTMLElement>>;\n\nStepperContent.displayName = 'StepperContent';\n"],"names":["_jsx","classNames"],"mappings":";;;;;;AAmBO,MAAM,cAAc,GAAwC,UAAU,CAG3E,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,GAAG,KAAI;IAC7B,MAAM,OAAO,GAAG,OAAO,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAC9C,IAAA,MAAM,UAAU,GAAG,WAAW,EAAE,CAAC;IACjC,MAAM,YAAY,GAAG,OAAO;AACxB,UAAE;YACI,SAAS,EAAE,MAAM,CAAC,UAAU;YAC5B,OAAO;YACP,QAAQ,EAAE,UAAU,IAAI,SAAS;AACjC,YAAA,SAAS,EAAE,+BAA+B;AAC7C,SAAA;UACD,EAAE,CAAC;IAET,QACIA,aACI,SAAS,EAAEC,UAAU,CAAC,MAAM,CAAC,gBAAgB,EAAE,EAAE,CAAC,MAAM,CAAC,kBAAkB,GAAG,OAAO,EAAE,CAAC,EACxF,GAAG,EAAE,GAAgC,EAAA,IAChC,OAAO,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,+BAA+B,EAAE,GAAC,QAAA,EAEnED,GAAC,CAAA,OAAO,EAAK,EAAA,GAAA,YAAY,YAAG,QAAQ,EAAA,CAAW,EAC7C,CAAA,EACR;AACN,CAAC,EAA+E;AAEhF,cAAc,CAAC,WAAW,GAAG,gBAAgB;;;;"}

package/Marker.d.ts

@@ -0,0 +1,2 @@
+import type { FC, PropsWithChildren } from 'react';
+export declare const StepperMarker: FC<PropsWithChildren>;

package/Marker.js

@@ -0,0 +1,18 @@
+import './index.css';
+import { jsx } from 'react/jsx-runtime';
+import classnames from 'classnames';
+import { useDisabled } from '@hh.ru/magritte-common-use-disabled';
+import { isIconComponent } from '@hh.ru/magritte-ui-icon';
+import { s as styles } from './stepper-CV0xwEd1.js';
+
+const StepperMarker = ({ children }) => {
+    const isDisabled = useDisabled();
+    const isIcon = isIconComponent(children);
+    return (jsx("div", { className: classnames(styles.markerContainer, {
+            [styles.markerContainerDisabled]: isDisabled,
+            [styles.markerContainerWithIcon]: isIcon,
+        }), role: "img", children: jsx("div", { className: styles.markerWrapper, children: children }) }));
+};
+
+export { StepperMarker };
+//# sourceMappingURL=Marker.js.map

package/Marker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Marker.js","sources":["../src/Marker.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from 'react';\nimport classnames from 'classnames';\n\nimport { useDisabled } from '@hh.ru/magritte-common-use-disabled';\nimport { isIconComponent } from '@hh.ru/magritte-ui-icon';\n\nimport styles from './stepper.less';\n\nexport const StepperMarker: FC<PropsWithChildren> = ({ children }) => {\n    const isDisabled = useDisabled();\n    const isIcon = isIconComponent(children);\n\n    return (\n        <div\n            className={classnames(styles.markerContainer, {\n                [styles.markerContainerDisabled]: isDisabled,\n                [styles.markerContainerWithIcon]: isIcon,\n            })}\n            role=\"img\"\n        >\n            <div className={styles.markerWrapper}>{children}</div>\n        </div>\n    );\n};\n"],"names":["_jsx"],"mappings":";;;;;;MAQa,aAAa,GAA0B,CAAC,EAAE,QAAQ,EAAE,KAAI;AACjE,IAAA,MAAM,UAAU,GAAG,WAAW,EAAE,CAAC;AACjC,IAAA,MAAM,MAAM,GAAG,eAAe,CAAC,QAAQ,CAAC,CAAC;IAEzC,QACIA,aACI,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,eAAe,EAAE;AAC1C,YAAA,CAAC,MAAM,CAAC,uBAAuB,GAAG,UAAU;AAC5C,YAAA,CAAC,MAAM,CAAC,uBAAuB,GAAG,MAAM;AAC3C,SAAA,CAAC,EACF,IAAI,EAAC,KAAK,EAAA,QAAA,EAEVA,aAAK,SAAS,EAAE,MAAM,CAAC,aAAa,EAAG,QAAA,EAAA,QAAQ,EAAO,CAAA,EAAA,CACpD,EACR;AACN;;;;"}

package/Step.d.ts

@@ -0,0 +1,15 @@
+import { type ForwardRefExoticComponent, type RefAttributes, type ReactNode } from 'react';
+export interface StepExternalProps {
+    'data-qa'?: string;
+    /** Флаг отключающий шаг */
+    disabled?: boolean;
+    /** Оформление шага (цвет полосы сверху или слева от шага) */
+    style?: 'neutral' | 'positive' | 'warning' | 'negative';
+    /** Обработчик клика */
+    onClick?: (isSelected: boolean) => void | null;
+    children?: ReactNode;
+}
+export type StepProps = {
+    selected?: boolean;
+} & StepExternalProps;
+export declare const StepperStep: ForwardRefExoticComponent<StepExternalProps & RefAttributes<HTMLElement>>;

package/Step.js

@@ -0,0 +1,26 @@
+import './index.css';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, isValidElement, Children, cloneElement } from 'react';
+import classnames from 'classnames';
+import { useDisabled, DisabledContext } from '@hh.ru/magritte-common-use-disabled';
+import { StepperContent } from './Content.js';
+import { s as styles } from './stepper-CV0xwEd1.js';
+
+const StepperStep = forwardRef(({ 'data-qa': dataQa = 'magritte-stepper-step', disabled = false, children, onClick, selected, style = 'neutral', }, ref) => {
+    const isDisabled = !!(useDisabled() || disabled);
+    const hasContent = Array.isArray(children) &&
+        isValidElement(children[1]) &&
+        children[1]?.type === StepperContent;
+    return (jsx(DisabledContext.Provider, { value: isDisabled, children: jsx("li", { className: classnames(styles.step, styles[`step-style-${style}`], {
+                [styles.disabledStep]: isDisabled,
+                [styles.stepNoContent]: !hasContent,
+            }), "aria-current": selected ? 'step' : undefined, "aria-disabled": isDisabled, "data-qa": dataQa, ref: ref, children: Children.map(children, (child) => isValidElement(child) && child?.type === StepperContent
+                ? cloneElement(child, {
+                    onClick: onClick ? () => onClick(!!selected) : undefined,
+                })
+                : child) }) }));
+});
+StepperStep.displayName = 'StepperStep';
+
+export { StepperStep };
+//# sourceMappingURL=Step.js.map

package/Step.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Step.js","sources":["../src/Step.tsx"],"sourcesContent":["import {\n    type LegacyRef,\n    type ForwardRefExoticComponent,\n    type RefAttributes,\n    type ReactNode,\n    isValidElement,\n    cloneElement,\n    forwardRef,\n    Children,\n    ReactElement,\n} from 'react';\nimport classnames from 'classnames';\n\nimport { useDisabled, DisabledContext } from '@hh.ru/magritte-common-use-disabled';\nimport { StepperContent } from '@hh.ru/magritte-ui-stepper/Content';\n\nimport styles from './stepper.less';\n\nexport interface StepExternalProps {\n    'data-qa'?: string;\n    /** Флаг отключающий шаг */\n    disabled?: boolean;\n    /** Оформление шага (цвет полосы сверху или слева от шага) */\n    style?: 'neutral' | 'positive' | 'warning' | 'negative';\n    /** Обработчик клика */\n    onClick?: (isSelected: boolean) => void | null;\n    children?: ReactNode;\n}\n\nexport type StepProps = {\n    selected?: boolean;\n} & StepExternalProps;\n\nexport const StepperStep = forwardRef<HTMLElement, StepProps>(\n    (\n        {\n            'data-qa': dataQa = 'magritte-stepper-step',\n            disabled = false,\n            children,\n            onClick,\n            selected,\n            style = 'neutral',\n        },\n        ref\n    ) => {\n        const isDisabled = !!(useDisabled() || disabled);\n        const hasContent =\n            Array.isArray(children) &&\n            isValidElement(children[1] as null) &&\n            (children[1] as ReactElement)?.type === StepperContent;\n\n        return (\n            <DisabledContext.Provider value={isDisabled}>\n                <li\n                    className={classnames(styles.step, styles[`step-style-${style}`], {\n                        [styles.disabledStep]: isDisabled,\n                        [styles.stepNoContent]: !hasContent,\n                    })}\n                    aria-current={selected ? 'step' : undefined}\n                    aria-disabled={isDisabled}\n                    data-qa={dataQa}\n                    ref={ref as LegacyRef<HTMLLIElement>}\n                >\n                    {Children.map(children, (child) =>\n                        isValidElement(child) && child?.type === StepperContent\n                            ? cloneElement(child as ReactElement, {\n                                  onClick: onClick ? () => onClick(!!selected) : undefined,\n                              })\n                            : child\n                    )}\n                </li>\n            </DisabledContext.Provider>\n        );\n    }\n) as ForwardRefExoticComponent<StepExternalProps & RefAttributes<HTMLElement>>;\n\nStepperStep.displayName = 'StepperStep';\n"],"names":["_jsx"],"mappings":";;;;;;;AAiCO,MAAM,WAAW,GAAG,UAAU,CACjC,CACI,EACI,SAAS,EAAE,MAAM,GAAG,uBAAuB,EAC3C,QAAQ,GAAG,KAAK,EAChB,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,KAAK,GAAG,SAAS,GACpB,EACD,GAAG,KACH;IACA,MAAM,UAAU,GAAG,CAAC,EAAE,WAAW,EAAE,IAAI,QAAQ,CAAC,CAAC;AACjD,IAAA,MAAM,UAAU,GACZ,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC;AACvB,QAAA,cAAc,CAAC,QAAQ,CAAC,CAAC,CAAS,CAAC;AAClC,QAAA,QAAQ,CAAC,CAAC,CAAkB,EAAE,IAAI,KAAK,cAAc,CAAC;IAE3D,QACIA,GAAC,CAAA,eAAe,CAAC,QAAQ,IAAC,KAAK,EAAE,UAAU,EAAA,QAAA,EACvCA,GACI,CAAA,IAAA,EAAA,EAAA,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,CAAc,WAAA,EAAA,KAAK,CAAE,CAAA,CAAC,EAAE;AAC9D,gBAAA,CAAC,MAAM,CAAC,YAAY,GAAG,UAAU;AACjC,gBAAA,CAAC,MAAM,CAAC,aAAa,GAAG,CAAC,UAAU;AACtC,aAAA,CAAC,kBACY,QAAQ,GAAG,MAAM,GAAG,SAAS,mBAC5B,UAAU,EAAA,SAAA,EAChB,MAAM,EACf,GAAG,EAAE,GAA+B,EAAA,QAAA,EAEnC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,KAC1B,cAAc,CAAC,KAAK,CAAC,IAAI,KAAK,EAAE,IAAI,KAAK,cAAc;AACnD,kBAAE,YAAY,CAAC,KAAqB,EAAE;AAChC,oBAAA,OAAO,EAAE,OAAO,GAAG,MAAM,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,GAAG,SAAS;iBAC3D,CAAC;AACJ,kBAAE,KAAK,CACd,EACA,CAAA,EAAA,CACkB,EAC7B;AACN,CAAC,EAC0E;AAE/E,WAAW,CAAC,WAAW,GAAG,aAAa;;;;"}

package/Stepper.d.ts

@@ -0,0 +1,16 @@
+import { type FC, type ReactElement } from 'react';
+import type { StepExternalProps } from '@hh.ru/magritte-ui-stepper/Step';
+export interface StepperProps {
+    /** Выбранный шаг */
+    selectedStep?: null | number;
+    /** Обработчик клика по шагу */
+    onStepClick?: (step: number, isSelected: boolean) => void;
+    /** Ориентация компонента */
+    orientation?: 'vertical' | 'horizontal';
+    'data-qa'?: string;
+    'aria-label'?: string;
+    children: ReactElement<StepExternalProps>[] | ReactElement<StepExternalProps>;
+    /** Флаг отключающий компонент (все шаги) */
+    disabled?: boolean;
+}
+export declare const Stepper: FC<StepperProps>;

package/Stepper.js

@@ -0,0 +1,36 @@
+import './index.css';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, Children, cloneElement, Fragment } from 'react';
+import classnames from 'classnames';
+import { useDisabled, DisabledContext } from '@hh.ru/magritte-common-use-disabled';
+import { s as styles } from './stepper-CV0xwEd1.js';
+
+const Stepper = forwardRef(({ selectedStep = null, onStepClick, orientation = 'vertical', 'data-qa': dataQa = 'magritte-stepper', 'aria-label': ariaLabel, disabled, children, }, ref) => {
+    const isDisabled = !!(useDisabled() || disabled);
+    const classes = {
+        className: classnames(styles.stepper, {
+            [styles.stepperVertical]: orientation === 'vertical',
+            [styles.stepperHorizontal]: orientation !== 'vertical',
+        }),
+    };
+    const Wrapper = onStepClick ? 'nav' : Fragment;
+    const outerWrapperProps = {
+        ref: ref,
+        'data-qa': dataQa,
+        'aria-label': ariaLabel,
+        'aria-disabled': isDisabled || undefined,
+    };
+    return (jsx(DisabledContext.Provider, { value: isDisabled, children: jsx(Wrapper, { ...(onStepClick ? { ...outerWrapperProps, ...classes } : {}), children: jsx("ol", { ...(!onStepClick ? outerWrapperProps : {}), ...classes, children: Children.map(children, (children, index) => cloneElement(children, {
+                    selected: selectedStep === index,
+                    onClick: onStepClick
+                        ? (isSelected) => {
+                            children.props.onClick?.(isSelected);
+                            onStepClick(index, isSelected);
+                        }
+                        : children.props.onClick,
+                })) }) }) }));
+});
+Stepper.displayName = 'Stepper';
+
+export { Stepper };
+//# sourceMappingURL=Stepper.js.map

package/Stepper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stepper.js","sources":["../src/Stepper.tsx"],"sourcesContent":["import { type FC, type ReactElement, Children, cloneElement, forwardRef, Fragment, type LegacyRef } from 'react';\nimport classnames from 'classnames';\n\nimport { useDisabled, DisabledContext } from '@hh.ru/magritte-common-use-disabled';\nimport type { StepExternalProps, StepProps } from '@hh.ru/magritte-ui-stepper/Step';\n\nimport styles from './stepper.less';\n\nexport interface StepperProps {\n    /** Выбранный шаг */\n    selectedStep?: null | number;\n    /** Обработчик клика по шагу */\n    onStepClick?: (step: number, isSelected: boolean) => void;\n    /** Ориентация компонента */\n    orientation?: 'vertical' | 'horizontal';\n    'data-qa'?: string;\n    'aria-label'?: string;\n    children: ReactElement<StepExternalProps>[] | ReactElement<StepExternalProps>;\n    /** Флаг отключающий компонент (все шаги) */\n    disabled?: boolean;\n}\n\nexport const Stepper: FC<StepperProps> = forwardRef<HTMLElement, StepperProps>(\n    (\n        {\n            selectedStep = null,\n            onStepClick,\n            orientation = 'vertical',\n            'data-qa': dataQa = 'magritte-stepper',\n            'aria-label': ariaLabel,\n            disabled,\n            children,\n        },\n        ref\n    ) => {\n        const isDisabled = !!(useDisabled() || disabled);\n        const classes = {\n            className: classnames(styles.stepper, {\n                [styles.stepperVertical]: orientation === 'vertical',\n                [styles.stepperHorizontal]: orientation !== 'vertical',\n            }),\n        };\n        const Wrapper = onStepClick ? 'nav' : Fragment;\n        const outerWrapperProps = {\n            ref: ref as LegacyRef<HTMLOListElement>,\n            'data-qa': dataQa,\n            'aria-label': ariaLabel,\n            'aria-disabled': isDisabled || undefined,\n        };\n        return (\n            <DisabledContext.Provider value={isDisabled}>\n                <Wrapper {...(onStepClick ? { ...outerWrapperProps, ...classes } : {})}>\n                    <ol {...(!onStepClick ? outerWrapperProps : {})} {...classes}>\n                        {Children.map(children, (children, index) =>\n                            cloneElement(children as ReactElement<StepProps>, {\n                                selected: selectedStep === index,\n                                onClick: onStepClick\n                                    ? (isSelected: boolean) => {\n                                          children.props.onClick?.(isSelected);\n                                          onStepClick(index, isSelected);\n                                      }\n                                    : children.props.onClick,\n                            })\n                        )}\n                    </ol>\n                </Wrapper>\n            </DisabledContext.Provider>\n        );\n    }\n);\n\nStepper.displayName = 'Stepper';\n"],"names":["_jsx"],"mappings":";;;;;;AAsBO,MAAM,OAAO,GAAqB,UAAU,CAC/C,CACI,EACI,YAAY,GAAG,IAAI,EACnB,WAAW,EACX,WAAW,GAAG,UAAU,EACxB,SAAS,EAAE,MAAM,GAAG,kBAAkB,EACtC,YAAY,EAAE,SAAS,EACvB,QAAQ,EACR,QAAQ,GACX,EACD,GAAG,KACH;IACA,MAAM,UAAU,GAAG,CAAC,EAAE,WAAW,EAAE,IAAI,QAAQ,CAAC,CAAC;AACjD,IAAA,MAAM,OAAO,GAAG;AACZ,QAAA,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,OAAO,EAAE;AAClC,YAAA,CAAC,MAAM,CAAC,eAAe,GAAG,WAAW,KAAK,UAAU;AACpD,YAAA,CAAC,MAAM,CAAC,iBAAiB,GAAG,WAAW,KAAK,UAAU;SACzD,CAAC;KACL,CAAC;IACF,MAAM,OAAO,GAAG,WAAW,GAAG,KAAK,GAAG,QAAQ,CAAC;AAC/C,IAAA,MAAM,iBAAiB,GAAG;AACtB,QAAA,GAAG,EAAE,GAAkC;AACvC,QAAA,SAAS,EAAE,MAAM;AACjB,QAAA,YAAY,EAAE,SAAS;QACvB,eAAe,EAAE,UAAU,IAAI,SAAS;KAC3C,CAAC;AACF,IAAA,QACIA,GAAA,CAAC,eAAe,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,UAAU,EAAA,QAAA,EACvCA,GAAC,CAAA,OAAO,EAAK,EAAA,IAAC,WAAW,GAAG,EAAE,GAAG,iBAAiB,EAAE,GAAG,OAAO,EAAE,GAAG,EAAE,GAAC,QAAA,EAClEA,GAAQ,CAAA,IAAA,EAAA,EAAA,IAAC,CAAC,WAAW,GAAG,iBAAiB,GAAG,EAAE,GAAC,GAAM,OAAO,EACvD,QAAA,EAAA,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,QAAQ,EAAE,KAAK,KACpC,YAAY,CAAC,QAAmC,EAAE;oBAC9C,QAAQ,EAAE,YAAY,KAAK,KAAK;AAChC,oBAAA,OAAO,EAAE,WAAW;AAChB,0BAAE,CAAC,UAAmB,KAAI;4BACpB,QAAQ,CAAC,KAAK,CAAC,OAAO,GAAG,UAAU,CAAC,CAAC;AACrC,4BAAA,WAAW,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;yBAClC;AACH,0BAAE,QAAQ,CAAC,KAAK,CAAC,OAAO;AAC/B,iBAAA,CAAC,CACL,EAAA,CACA,EACC,CAAA,EAAA,CACa,EAC7B;AACN,CAAC,EACH;AAEF,OAAO,CAAC,WAAW,GAAG,SAAS;;;;"}

package/index.css

@@ -0,0 +1,173 @@
+:root{
+  --magritte-color-background-state-secondary-hovered-v22-1-0:#F1F4F9;
+  --magritte-color-stroke-neutral-v22-1-0:#DCE3EB;
+  --magritte-color-stroke-positive-v22-1-0:#0dc267;
+  --magritte-color-stroke-state-focused-accessible-v22-1-0:#0070ff7a;
+}
+.magritte-night-theme{
+  --magritte-color-background-state-secondary-hovered-v22-1-0:#303030;
+  --magritte-color-stroke-neutral-v22-1-0:#303030;
+  --magritte-color-stroke-positive-v22-1-0:#10b55f;
+  --magritte-color-stroke-state-focused-accessible-v22-1-0:#0070ff7a;
+}
+.magritte-zp-day-theme{
+  --magritte-color-background-state-secondary-hovered-v22-1-0:#F1F4F9;
+  --magritte-color-stroke-neutral-v22-1-0:#DCE3EB;
+  --magritte-color-stroke-positive-v22-1-0:#0dc267;
+  --magritte-color-stroke-state-focused-accessible-v22-1-0:#0070ff7a;
+}
+.magritte-stepper___bf9CG_1-0-1{
+  display:flex;
+  flex:1 1;
+  list-style:none;
+}
+.magritte-stepper-horizontal___54ih5_1-0-1{
+  flex-direction:row;
+}
+.magritte-stepper-horizontal___54ih5_1-0-1 .magritte-step___7YXV2_1-0-1{
+  flex-direction:column;
+}
+.magritte-stepper-horizontal___54ih5_1-0-1 .magritte-marker-container___ZuSOj_1-0-1{
+  flex-direction:row;
+  padding:0 12px 0 0;
+}
+.magritte-stepper-horizontal___54ih5_1-0-1 .magritte-marker-container___ZuSOj_1-0-1.magritte-marker-container-with-icon___rBC1i_1-0-1{
+  padding:0 8px 0 0;
+}
+.magritte-stepper-horizontal___54ih5_1-0-1 .magritte-marker-container___ZuSOj_1-0-1::after{
+  border-width:0;
+  border-top-width:1px;
+}
+.magritte-stepper-horizontal___54ih5_1-0-1 .magritte-marker-wrapper___m-Hsn_1-0-1{
+  padding:0 12px 0 0;
+}
+.magritte-stepper-horizontal___54ih5_1-0-1 .magritte-marker-container-with-icon___rBC1i_1-0-1 .magritte-marker-wrapper___m-Hsn_1-0-1{
+  padding:0 8px 0 0;
+}
+.magritte-stepper-horizontal___54ih5_1-0-1 .magritte-content-container___KPIiS_1-0-1{
+  padding:8px 24px 0 0;
+}
+.magritte-stepper-horizontal___54ih5_1-0-1 .magritte-marker-container-with-icon___rBC1i_1-0-1 + .magritte-content-container___KPIiS_1-0-1{
+  padding:12px 24px 0 0;
+}
+.magritte-stepper-horizontal___54ih5_1-0-1 .magritte-step___7YXV2_1-0-1:last-of-type .magritte-content-container___KPIiS_1-0-1{
+  padding-right:0;
+}
+.magritte-content-container___KPIiS_1-0-1{
+  order:2;
+}
+.magritte-stepper-vertical___032Tm_1-0-1{
+  flex-direction:column;
+}
+.magritte-stepper-vertical___032Tm_1-0-1 .magritte-step___7YXV2_1-0-1{
+  flex-direction:row;
+}
+.magritte-stepper-vertical___032Tm_1-0-1 .magritte-content-container___KPIiS_1-0-1,
+.magritte-stepper-vertical___032Tm_1-0-1 .magritte-step-button___xSXUO_1-0-1{
+  flex:1 1;
+}
+.magritte-stepper-vertical___032Tm_1-0-1 .magritte-marker-container___ZuSOj_1-0-1{
+  flex-direction:column;
+  padding:4px 0 8px;
+}
+.magritte-stepper-vertical___032Tm_1-0-1 .magritte-marker-container___ZuSOj_1-0-1.magritte-marker-container-with-icon___rBC1i_1-0-1{
+  padding-bottom:4px;
+}
+.magritte-stepper-vertical___032Tm_1-0-1.magritte-stepper-no-content___AEmtQ_1-0-1 .magritte-marker-container___ZuSOj_1-0-1{
+  padding-right:0;
+}
+.magritte-stepper-vertical___032Tm_1-0-1 .magritte-marker-container___ZuSOj_1-0-1::after{
+  border-width:0;
+  border-left-width:1px;
+}
+.magritte-stepper-vertical___032Tm_1-0-1 .magritte-marker-wrapper___m-Hsn_1-0-1{
+  padding:0 0 12px;
+}
+.magritte-stepper-vertical___032Tm_1-0-1 .magritte-marker-container-with-icon___rBC1i_1-0-1 .magritte-marker-wrapper___m-Hsn_1-0-1{
+  padding:0 0 8px;
+}
+.magritte-stepper-vertical___032Tm_1-0-1 .magritte-content-container___KPIiS_1-0-1{
+  padding:0 0 24px 12px;
+}
+.magritte-stepper-vertical___032Tm_1-0-1 .magritte-step___7YXV2_1-0-1:last-of-type .magritte-content-container___KPIiS_1-0-1{
+  padding-bottom:0;
+}
+.magritte-step___7YXV2_1-0-1:last-of-type.magritte-step-no-content___mTIaO_1-0-1{
+  flex:0 0;
+}
+.magritte-step___7YXV2_1-0-1:last-of-type.magritte-step-no-content___mTIaO_1-0-1 .magritte-marker-container___ZuSOj_1-0-1,
+.magritte-step___7YXV2_1-0-1:last-of-type.magritte-step-no-content___mTIaO_1-0-1 .magritte-marker-wrapper___m-Hsn_1-0-1{
+  padding:0;
+}
+.magritte-step___7YXV2_1-0-1{
+  display:flex;
+  flex:1 1;
+}
+.magritte-marker-container___ZuSOj_1-0-1{
+  order:1;
+  display:flex;
+  align-items:center;
+}
+.magritte-marker-container-disabled___lJ-PA_1-0-1{
+  opacity:0.5;
+}
+.magritte-step___7YXV2_1-0-1:not(:last-of-type) .magritte-marker-container___ZuSOj_1-0-1::after{
+  flex:1 1;
+  content:'';
+  border-style:solid;
+}
+.magritte-step-style-neutral___061j4_1-0-1 .magritte-marker-container___ZuSOj_1-0-1::after{
+  border-color:var(--magritte-color-stroke-neutral-v22-1-0);
+}
+.magritte-step-style-positive___9jcvm_1-0-1 .magritte-marker-container___ZuSOj_1-0-1::after{
+  border-color:var(--magritte-color-stroke-positive-v22-1-0);
+}
+.magritte-step-style-warning___NboIv_1-0-1 .magritte-marker-container___ZuSOj_1-0-1::after{
+  border-color:var(--magritte-color-stroke-neutral-v22-1-0);
+}
+.magritte-step-style-negative___w1AbF_1-0-1 .magritte-marker-container___ZuSOj_1-0-1::after{
+  border-color:var(--magritte-color-stroke-neutral-v22-1-0);
+}
+.magritte-marker-wrapper___m-Hsn_1-0-1{
+  display:flex;
+  flex:0 0;
+}
+.magritte-marker-divider-wrapper___PGB27_1-0-1{
+  display:inline-block;
+  flex:1 1;
+}
+.magritte-content-container___KPIiS_1-0-1,
+.magritte-step-button___xSXUO_1-0-1{
+  display:flex;
+  flex-direction:column;
+  align-items:flex-start;
+  gap:12px;
+}
+.magritte-content-interactive___Cd9wI_1-0-1{
+  align-items:stretch;
+}
+.magritte-step-button___xSXUO_1-0-1{
+  margin:-4px -8px;
+  padding:4px 8px;
+  border-radius:12px;
+  cursor:default;
+}
+.magritte-step-button___xSXUO_1-0-1:not(:disabled){
+  cursor:pointer;
+}
+@media (min-width: 1020px){
+  body.magritte-old-layout .magritte-step-button___xSXUO_1-0-1:hover:not(:disabled){
+    background-color:var(--magritte-color-background-state-secondary-hovered-v22-1-0);
+  }
+}
+@media (min-width: 1024px){
+  body:not(.magritte-old-layout) .magritte-step-button___xSXUO_1-0-1:hover:not(:disabled){
+    background-color:var(--magritte-color-background-state-secondary-hovered-v22-1-0);
+  }
+}
+.magritte-step-button___xSXUO_1-0-1:active:not(:disabled){
+  background-color:var(--magritte-color-background-state-secondary-hovered-v22-1-0);
+}
+.magritte-step-button___xSXUO_1-0-1.focus-visible{
+  outline:4px solid var(--magritte-color-stroke-state-focused-accessible-v22-1-0);
+}

package/index.d.ts

@@ -0,0 +1,4 @@
+export * from '@hh.ru/magritte-ui-stepper/Stepper';
+export { StepperStep, type StepExternalProps as StepperStepProps } from '@hh.ru/magritte-ui-stepper/Step';
+export { StepperContent } from '@hh.ru/magritte-ui-stepper/Content';
+export { StepperMarker } from '@hh.ru/magritte-ui-stepper/Marker';

package/index.js

@@ -0,0 +1,12 @@
+import './index.css';
+export { Stepper } from './Stepper.js';
+export { StepperStep } from './Step.js';
+export { StepperContent } from './Content.js';
+export { StepperMarker } from './Marker.js';
+import 'react/jsx-runtime';
+import 'react';
+import 'classnames';
+import '@hh.ru/magritte-common-use-disabled';
+import './stepper-CV0xwEd1.js';
+import '@hh.ru/magritte-ui-icon';
+//# sourceMappingURL=index.js.map

package/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}

package/index.mock.d.ts

@@ -0,0 +1,7 @@
+import { ForwardRefExoticComponent } from 'react';
+export { type StepperProps } from '@hh.ru/magritte-ui-stepper/Stepper';
+export { type StepExternalProps as StepperStepProps } from '@hh.ru/magritte-ui-stepper/Step';
+export declare const Step: ForwardRefExoticComponent<Record<string, unknown>>;
+export declare const StepperStep: ForwardRefExoticComponent<Record<string, unknown>>;
+export declare const StepperContent: ForwardRefExoticComponent<Record<string, unknown>>;
+export declare const StepperMarker: ForwardRefExoticComponent<Record<string, unknown>>;

package/index.mock.js

@@ -0,0 +1,48 @@
+import './index.css';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+
+function enhance(mockComponent, staticProps) {
+    // удаляем внутренний свойства реакта, чтобы не перезаписать ими mockComponent
+    delete staticProps.type;
+    delete staticProps.$$typeof;
+    delete staticProps.render;
+    for (const prop in staticProps) {
+        mockComponent[prop] = staticProps[prop];
+    }
+}
+const MockComponent = ({ style, ...props }) => (
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+// eslint-disable-next-line react/jsx-no-undef
+jsx("magritte-component-mock", { "style-data": style, ...props }));
+/**
+ * Возвращает mock React компонента
+ */
+const mockComponent = (componentName, staticProps = {}, { withChildren, innerDependence, WrapperComponent } = {}) => {
+    const mockWrapper = forwardRef(({ children, ...props }, ref) => {
+        const mock = (
+        // eslint-disable-next-line react/jsx-no-undef
+        jsxs(MockComponent, { ...props, _component: componentName, children: [innerDependence ? innerDependence(props, ref) : null, withChildren ? children : null] }));
+        return WrapperComponent ? jsx(WrapperComponent, { ...props, children: mock }) : mock;
+    });
+    staticProps && enhance(mockWrapper, staticProps);
+    mockWrapper.displayName = 'magritte-ref';
+    return mockWrapper;
+};
+
+const Step = mockComponent('Stepper', undefined, {
+    withChildren: true,
+});
+const StepperStep = mockComponent('StepperStep', undefined, {
+    withChildren: true,
+});
+const StepperContent = mockComponent('StepperContent', undefined, {
+    withChildren: true,
+});
+const StepperMarker = mockComponent('StepperMarker', undefined, {
+    withChildren: true,
+});
+
+export { Step, StepperContent, StepperMarker, StepperStep };
+//# sourceMappingURL=index.mock.js.map

package/index.mock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mock.js","sources":["../../mock-component/lib/setupMockComponent.js","../src/index.mock.ts"],"sourcesContent":["import { jsxs, jsx } from 'react/jsx-runtime';\nimport { forwardRef } from 'react';\n\nfunction enhance(mockComponent, staticProps) {\n    // удаляем внутренний свойства реакта, чтобы не перезаписать ими mockComponent\n    delete staticProps.type;\n    delete staticProps.$$typeof;\n    delete staticProps.render;\n    for (const prop in staticProps) {\n        mockComponent[prop] = staticProps[prop];\n    }\n}\nconst MockComponent = ({ style, ...props }) => (\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\n// eslint-disable-next-line react/jsx-no-undef\njsx(\"magritte-component-mock\", { \"style-data\": style, ...props }));\nconst MockComponentRenderProp = ({ style, ...props }) => (\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\n// eslint-disable-next-line react/jsx-no-undef\njsx(\"magritte-component-mock-render-prop\", { \"style-data\": style, ...props }));\n/**\n * Возвращает mock React компонента\n */\nconst mockComponent = (componentName, staticProps = {}, { withChildren, innerDependence, WrapperComponent } = {}) => {\n    const mockWrapper = forwardRef(({ children, ...props }, ref) => {\n        const mock = (\n        // eslint-disable-next-line react/jsx-no-undef\n        jsxs(MockComponent, { ...props, _component: componentName, children: [innerDependence ? innerDependence(props, ref) : null, withChildren ? children : null] }));\n        return WrapperComponent ? jsx(WrapperComponent, { ...props, children: mock }) : mock;\n    });\n    staticProps && enhance(mockWrapper, staticProps);\n    mockWrapper.displayName = 'magritte-ref';\n    return mockWrapper;\n};\n/**\n * Возвращает mock React компонента, который рендерит переданный в него пропс render\n *\n * @param {String}              componentName               наименование компонента\n * @param {Object}              [staticProps]               объект со свойствами, которыми необходимо усилить mock\n * @param {Object}              [options]                   параметры мока\n * @param {boolean}             [options.withChildren]      флаг отвечает за рендеринг children компонента\n * @param {React.Component}     [options.innerDependence]   Реакт компонент, который рендерится внутри мока.\n *                                                          Необходим, когда mock компоненту требуется иметь\n *                                                           дополнительные элементы\n */\nconst mockComponentRenderProp = (componentName, staticProps, { withChildren, innerDependence, renderArguments } = { renderArguments: [] }) => {\n    const mockWrapper = ({ render, children, ...props }) => (jsxs(MockComponentRenderProp, { ...props, _component: componentName, children: [innerDependence ? innerDependence(props) : null, withChildren ? children : null, render?.(...(renderArguments || []))] }));\n    staticProps && enhance(mockWrapper, staticProps);\n    mockWrapper.displayName = 'magritte-component-mock-render-prop';\n    return mockWrapper;\n};\n\nexport { mockComponent, mockComponentRenderProp };\n//# sourceMappingURL=setupMockComponent.js.map\n","import { ForwardRefExoticComponent } from 'react';\n\nimport { mockComponent } from '@hh.ru/magritte-ui-mock-component';\n\nexport { type StepperProps } from '@hh.ru/magritte-ui-stepper/Stepper';\nexport { type StepExternalProps as StepperStepProps } from '@hh.ru/magritte-ui-stepper/Step';\n\nexport const Step: ForwardRefExoticComponent<Record<string, unknown>> = mockComponent('Stepper', undefined, {\n    withChildren: true,\n});\n\nexport const StepperStep: ForwardRefExoticComponent<Record<string, unknown>> = mockComponent('StepperStep', undefined, {\n    withChildren: true,\n});\n\nexport const StepperContent: ForwardRefExoticComponent<Record<string, unknown>> = mockComponent(\n    'StepperContent',\n    undefined,\n    {\n        withChildren: true,\n    }\n);\n\nexport const StepperMarker: ForwardRefExoticComponent<Record<string, unknown>> = mockComponent(\n    'StepperMarker',\n    undefined,\n    {\n        withChildren: true,\n    }\n);\n"],"names":[],"mappings":";;;AAGA,SAAS,OAAO,CAAC,aAAa,EAAE,WAAW,EAAE;AAC7C;AACA,IAAI,OAAO,WAAW,CAAC,IAAI,CAAC;AAC5B,IAAI,OAAO,WAAW,CAAC,QAAQ,CAAC;AAChC,IAAI,OAAO,WAAW,CAAC,MAAM,CAAC;AAC9B,IAAI,KAAK,MAAM,IAAI,IAAI,WAAW,EAAE;AACpC,QAAQ,aAAa,CAAC,IAAI,CAAC,GAAG,WAAW,CAAC,IAAI,CAAC,CAAC;AAChD,KAAK;AACL,CAAC;AACD,MAAM,aAAa,GAAG,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE;AAC1C;AACA;AACA;AACA,GAAG,CAAC,yBAAyB,EAAE,EAAE,YAAY,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,CAAC,CAAC,CAAC;AAMnE;AACA;AACA;AACA,MAAM,aAAa,GAAG,CAAC,aAAa,EAAE,WAAW,GAAG,EAAE,EAAE,EAAE,YAAY,EAAE,eAAe,EAAE,gBAAgB,EAAE,GAAG,EAAE,KAAK;AACrH,IAAI,MAAM,WAAW,GAAG,UAAU,CAAC,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,KAAK;AACpE,QAAQ,MAAM,IAAI;AAClB;AACA,QAAQ,IAAI,CAAC,aAAa,EAAE,EAAE,GAAG,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,QAAQ,EAAE,CAAC,eAAe,GAAG,eAAe,CAAC,KAAK,EAAE,GAAG,CAAC,GAAG,IAAI,EAAE,YAAY,GAAG,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;AACxK,QAAQ,OAAO,gBAAgB,GAAG,GAAG,CAAC,gBAAgB,EAAE,EAAE,GAAG,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,GAAG,IAAI,CAAC;AAC7F,KAAK,CAAC,CAAC;AACP,IAAI,WAAW,IAAI,OAAO,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;AACrD,IAAI,WAAW,CAAC,WAAW,GAAG,cAAc,CAAC;AAC7C,IAAI,OAAO,WAAW,CAAC;AACvB,CAAC;;MC5BY,IAAI,GAAuD,aAAa,CAAC,SAAS,EAAE,SAAS,EAAE;AACxG,IAAA,YAAY,EAAE,IAAI;AACrB,CAAA,EAAE;MAEU,WAAW,GAAuD,aAAa,CAAC,aAAa,EAAE,SAAS,EAAE;AACnH,IAAA,YAAY,EAAE,IAAI;AACrB,CAAA,EAAE;MAEU,cAAc,GAAuD,aAAa,CAC3F,gBAAgB,EAChB,SAAS,EACT;AACI,IAAA,YAAY,EAAE,IAAI;AACrB,CAAA,EACH;MAEW,aAAa,GAAuD,aAAa,CAC1F,eAAe,EACf,SAAS,EACT;AACI,IAAA,YAAY,EAAE,IAAI;AACrB,CAAA;;;;"}

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@hh.ru/magritte-ui-stepper",
+  "version": "1.0.1",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "sideEffects": [
+    "index.css"
+  ],
+  "scripts": {
+    "build": "yarn root:build $(pwd)",
+    "build-test-branch": "yarn root:build-test-branch $(pwd)",
+    "prepack": "yarn root:prepack $(pwd)",
+    "postpublish": "yarn root:postpublish $(pwd)",
+    "stylelint-check": "yarn root:stylelint-check $(pwd)",
+    "eslint-check": "yarn root:eslint-check $(pwd)",
+    "ts-config": "yarn root:ts-config $(pwd)",
+    "ts-check": "yarn root:ts-check $(pwd)",
+    "test": "yarn root:test $(pwd)",
+    "watch": "yarn root:watch $(pwd)"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@hh.ru/magritte-common-use-disabled": "1.0.12",
+    "@hh.ru/magritte-design-tokens": "22.1.0",
+    "@hh.ru/magritte-ui-breakpoint": "6.0.0",
+    "@hh.ru/magritte-ui-icon": "12.0.0"
+  },
+  "peerDependencies": {
+    "classnames": ">=2.3.2",
+    "react": ">=18.2.0"
+  },
+  "gitHead": "b33df89ee2467f582ff290503045fd6382aecd60"
+}

package/stepper-CV0xwEd1.js

@@ -0,0 +1,5 @@
+import './index.css';
+var styles = {"stepper":"magritte-stepper___bf9CG_1-0-1","stepper-horizontal":"magritte-stepper-horizontal___54ih5_1-0-1","stepperHorizontal":"magritte-stepper-horizontal___54ih5_1-0-1","step":"magritte-step___7YXV2_1-0-1","marker-container":"magritte-marker-container___ZuSOj_1-0-1","markerContainer":"magritte-marker-container___ZuSOj_1-0-1","marker-container-with-icon":"magritte-marker-container-with-icon___rBC1i_1-0-1","markerContainerWithIcon":"magritte-marker-container-with-icon___rBC1i_1-0-1","marker-wrapper":"magritte-marker-wrapper___m-Hsn_1-0-1","markerWrapper":"magritte-marker-wrapper___m-Hsn_1-0-1","content-container":"magritte-content-container___KPIiS_1-0-1","contentContainer":"magritte-content-container___KPIiS_1-0-1","stepper-vertical":"magritte-stepper-vertical___032Tm_1-0-1","stepperVertical":"magritte-stepper-vertical___032Tm_1-0-1","step-button":"magritte-step-button___xSXUO_1-0-1","stepButton":"magritte-step-button___xSXUO_1-0-1","stepper-no-content":"magritte-stepper-no-content___AEmtQ_1-0-1","stepperNoContent":"magritte-stepper-no-content___AEmtQ_1-0-1","step-no-content":"magritte-step-no-content___mTIaO_1-0-1","stepNoContent":"magritte-step-no-content___mTIaO_1-0-1","marker-container-disabled":"magritte-marker-container-disabled___lJ-PA_1-0-1","markerContainerDisabled":"magritte-marker-container-disabled___lJ-PA_1-0-1","step-style-neutral":"magritte-step-style-neutral___061j4_1-0-1","stepStyleNeutral":"magritte-step-style-neutral___061j4_1-0-1","step-style-positive":"magritte-step-style-positive___9jcvm_1-0-1","stepStylePositive":"magritte-step-style-positive___9jcvm_1-0-1","step-style-warning":"magritte-step-style-warning___NboIv_1-0-1","stepStyleWarning":"magritte-step-style-warning___NboIv_1-0-1","step-style-negative":"magritte-step-style-negative___w1AbF_1-0-1","stepStyleNegative":"magritte-step-style-negative___w1AbF_1-0-1","marker-divider-wrapper":"magritte-marker-divider-wrapper___PGB27_1-0-1","markerDividerWrapper":"magritte-marker-divider-wrapper___PGB27_1-0-1","content-interactive":"magritte-content-interactive___Cd9wI_1-0-1","contentInteractive":"magritte-content-interactive___Cd9wI_1-0-1"};
+
+export { styles as s };
+//# sourceMappingURL=stepper-CV0xwEd1.js.map

package/stepper-CV0xwEd1.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepper-CV0xwEd1.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}