@synerise/ds-stepper 1.0.39 → 1.0.41

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/README.md +8 -4
  3. package/dist/Step/Step.d.ts +2 -2
  4. package/dist/Step/Step.js +37 -61
  5. package/dist/Step/Step.styles.d.ts +8 -8
  6. package/dist/Step/Step.styles.js +35 -38
  7. package/dist/Step/Step.types.d.ts +2 -2
  8. package/dist/Step/Step.types.js +1 -1
  9. package/dist/Stepper.d.ts +3 -3
  10. package/dist/Stepper.js +24 -24
  11. package/dist/Stepper.styles.d.ts +3 -3
  12. package/dist/Stepper.styles.js +11 -21
  13. package/dist/Stepper.types.d.ts +1 -1
  14. package/dist/Stepper.types.js +7 -4
  15. package/dist/index.js +4 -1
  16. package/dist/modules.d.js +1 -1
  17. package/dist/modules.d.ts +0 -0
  18. package/package.json +6 -6
package/CHANGELOG.md CHANGED
@@ -3,6 +3,14 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [1.0.41](https://github.com/Synerise/synerise-design/compare/@synerise/ds-stepper@1.0.40...@synerise/ds-stepper@1.0.41) (2026-03-24)
7
+
8
+ **Note:** Version bump only for package @synerise/ds-stepper
9
+
10
+ ## [1.0.40](https://github.com/Synerise/synerise-design/compare/@synerise/ds-stepper@1.0.39...@synerise/ds-stepper@1.0.40) (2026-03-20)
11
+
12
+ **Note:** Version bump only for package @synerise/ds-stepper
13
+
6
14
  ## [1.0.39](https://github.com/Synerise/synerise-design/compare/@synerise/ds-stepper@1.0.38...@synerise/ds-stepper@1.0.39) (2026-03-09)
7
15
 
8
16
  **Note:** Version bump only for package @synerise/ds-stepper
package/README.md CHANGED
@@ -41,9 +41,12 @@ import Stepper from '@synerise/ds-stepper'
41
41
 
42
42
  ### Stepper
43
43
 
44
- | Property | Description | Type | Default |
45
- | ----------- | ---------------------------------- | ------------------------- | ------------ |
46
- | orientation | Defines direction of Stepper steps | `horizontal` \ `vertical` | `horizontal` |
44
+ | Property | Description | Type | Default |
45
+ | ----------- | ---------------------------------- | --------------------------------- | ------------ |
46
+ | orientation | Defines direction of Stepper steps | `'horizontal'` \| `'vertical'` | `horizontal` |
47
+ | size | Step size variant | `'default'` \| `'small'` | `default` |
48
+ | style | Inline styles on the root wrapper | `React.CSSProperties` | - |
49
+ | children | `Stepper.Step` children | `React.ReactNode` | - |
47
50
 
48
51
  ### Stepper.Step
49
52
 
@@ -53,7 +56,8 @@ import Stepper from '@synerise/ds-stepper'
53
56
  | done | Whether step was completed | `boolean` | `false` |
54
57
  | label | Label of step | `string` \ `React.ReactNode` | - |
55
58
  | onClick | Function called when user clicks on step | `() => void` | - |
56
- | stepNumber | Step number | `number` | - |
59
+ | stepNumber | Step number displayed in the circle | `number` | - |
60
+ | children | Content shown when step is active | `React.ReactNode` | - |
57
61
  | tooltip | Shows icon with tooltip if step is active | `string` \ `React.ReactNode` | - |
58
62
  | validated | Whether step has some errors | `boolean` | `false` |
59
63
  | warning | Whether step has warning status | `boolean` | - |
package/dist/Step/Step.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import React from 'react';
2
- import { type StepProps } from './Step.types';
1
+ import { default as React } from 'react';
2
+ import { StepProps } from './Step.types';
3
3
  declare const Step: ({ stepNumber, label, active, done, warning, validated, tooltip, onClick, children, size, orientation, }: StepProps) => React.JSX.Element;
4
4
  export default Step;
package/dist/Step/Step.js CHANGED
@@ -1,31 +1,29 @@
1
- import React, { useCallback, useEffect, useState } from 'react';
2
- import AnimateHeight from 'react-animate-height';
3
- import { theme } from '@synerise/ds-core';
4
- import Icon, { CheckS, WarningFillS } from '@synerise/ds-icon';
5
- import Tooltip from '@synerise/ds-tooltip';
6
- import { ORIENTATIONS } from '../Stepper.types';
7
- import * as S from './Step.styles';
8
- var Step = function Step(_ref) {
9
- var stepNumber = _ref.stepNumber,
10
- label = _ref.label,
11
- active = _ref.active,
12
- done = _ref.done,
13
- warning = _ref.warning,
14
- validated = _ref.validated,
15
- tooltip = _ref.tooltip,
16
- onClick = _ref.onClick,
17
- children = _ref.children,
18
- _ref$size = _ref.size,
19
- size = _ref$size === void 0 ? 'default' : _ref$size,
20
- _ref$orientation = _ref.orientation,
21
- orientation = _ref$orientation === void 0 ? ORIENTATIONS.HORIZONTAL : _ref$orientation;
22
- var _useState = useState(Boolean(active)),
23
- wasActive = _useState[0],
24
- setWasActive = _useState[1];
25
- var handleClick = useCallback(function () {
1
+ import { jsxs, jsx } from "react/jsx-runtime";
2
+ import { useState, useCallback, useEffect } from "react";
3
+ import AnimateHeight from "react-animate-height";
4
+ import { theme } from "@synerise/ds-core";
5
+ import Icon, { CheckS, WarningFillS } from "@synerise/ds-icon";
6
+ import Tooltip from "@synerise/ds-tooltip";
7
+ import { ORIENTATIONS } from "../Stepper.types.js";
8
+ import { Step as Step$1, StepWrapper, StepPrefix, StepNumber, StepName, StepLabel, StepContent } from "./Step.styles.js";
9
+ const Step = ({
10
+ stepNumber,
11
+ label,
12
+ active,
13
+ done,
14
+ warning,
15
+ validated,
16
+ tooltip,
17
+ onClick,
18
+ children,
19
+ size = "default",
20
+ orientation = ORIENTATIONS.HORIZONTAL
21
+ }) => {
22
+ const [wasActive, setWasActive] = useState(Boolean(active));
23
+ const handleClick = useCallback(() => {
26
24
  onClick && onClick();
27
25
  }, [onClick]);
28
- useEffect(function () {
26
+ useEffect(() => {
29
27
  if (!active && wasActive) {
30
28
  setWasActive(false);
31
29
  }
@@ -33,39 +31,17 @@ var Step = function Step(_ref) {
33
31
  setWasActive(true);
34
32
  }
35
33
  }, [active, wasActive]);
36
- return /*#__PURE__*/React.createElement(S.Step, {
37
- className: "ds-step",
38
- active: Boolean(active),
39
- wasActive: wasActive,
40
- done: Boolean(done),
41
- warning: Boolean(warning),
42
- validated: Boolean(validated),
43
- hasChildren: Boolean(children),
44
- size: size,
45
- orientation: orientation,
46
- clickable: Boolean(onClick)
47
- }, /*#__PURE__*/React.createElement(S.StepWrapper, {
48
- onClick: handleClick
49
- }, /*#__PURE__*/React.createElement(Tooltip, {
50
- trigger: ['hover'],
51
- title: label
52
- }, /*#__PURE__*/React.createElement(S.StepPrefix, {
53
- noMargin: !label
54
- }, done && !validated ? /*#__PURE__*/React.createElement(Icon, {
55
- component: /*#__PURE__*/React.createElement(CheckS, null),
56
- color: warning ? theme.palette['yellow-600'] : theme.palette['green-600']
57
- }) : /*#__PURE__*/React.createElement(S.StepNumber, null, stepNumber))), /*#__PURE__*/React.createElement(S.StepName, {
58
- "data-label": label
59
- }, /*#__PURE__*/React.createElement(S.StepLabel, null, label), tooltip && active && /*#__PURE__*/React.createElement(Tooltip, {
60
- trigger: ['hover'],
61
- title: tooltip
62
- }, /*#__PURE__*/React.createElement(Icon, {
63
- component: /*#__PURE__*/React.createElement(WarningFillS, null),
64
- color: theme.palette['yellow-600']
65
- })))), /*#__PURE__*/React.createElement(S.StepContent, null, /*#__PURE__*/React.createElement(AnimateHeight, {
66
- className: "ds-step-content",
67
- duration: 200,
68
- height: active ? 'auto' : 0
69
- }, children)));
34
+ return /* @__PURE__ */ jsxs(Step$1, { className: "ds-step", active: Boolean(active), wasActive, done: Boolean(done), warning: Boolean(warning), validated: Boolean(validated), hasChildren: Boolean(children), size, orientation, clickable: Boolean(onClick), children: [
35
+ /* @__PURE__ */ jsxs(StepWrapper, { onClick: handleClick, children: [
36
+ /* @__PURE__ */ jsx(Tooltip, { trigger: ["hover"], title: label, children: /* @__PURE__ */ jsx(StepPrefix, { noMargin: !label, children: done && !validated ? /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(CheckS, {}), color: warning ? theme.palette["yellow-600"] : theme.palette["green-600"] }) : /* @__PURE__ */ jsx(StepNumber, { children: stepNumber }) }) }),
37
+ /* @__PURE__ */ jsxs(StepName, { "data-label": label, children: [
38
+ /* @__PURE__ */ jsx(StepLabel, { children: label }),
39
+ tooltip && active && /* @__PURE__ */ jsx(Tooltip, { trigger: ["hover"], title: tooltip, children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(WarningFillS, {}), color: theme.palette["yellow-600"] }) })
40
+ ] })
41
+ ] }),
42
+ /* @__PURE__ */ jsx(StepContent, { children: /* @__PURE__ */ jsx(AnimateHeight, { className: "ds-step-content", duration: 200, height: active ? "auto" : 0, children }) })
43
+ ] });
44
+ };
45
+ export {
46
+ Step as default
70
47
  };
71
- export default Step;
package/dist/Step/Step.styles.d.ts CHANGED
@@ -1,13 +1,13 @@
1
- import { type StepperOrientation, type StepperSize } from '../Stepper.types';
2
- export declare const StepPrefix: import("styled-components").StyledComponent<"div", any, {
1
+ import { StepperOrientation, StepperSize } from '../Stepper.types';
2
+ export declare const StepPrefix: import('styled-components').StyledComponent<"div", any, {
3
3
  noMargin: boolean;
4
4
  }, never>;
5
- export declare const StepNumber: import("styled-components").StyledComponent<"span", any, {}, never>;
6
- export declare const StepName: import("styled-components").StyledComponent<"span", any, {}, never>;
7
- export declare const StepLabel: import("styled-components").StyledComponent<"span", any, {}, never>;
8
- export declare const StepWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
9
- export declare const StepContent: import("styled-components").StyledComponent<"div", any, {}, never>;
10
- export declare const Step: import("styled-components").StyledComponent<"div", any, {
5
+ export declare const StepNumber: import('styled-components').StyledComponent<"span", any, {}, never>;
6
+ export declare const StepName: import('styled-components').StyledComponent<"span", any, {}, never>;
7
+ export declare const StepLabel: import('styled-components').StyledComponent<"span", any, {}, never>;
8
+ export declare const StepWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
9
+ export declare const StepContent: import('styled-components').StyledComponent<"div", any, {}, never>;
10
+ export declare const Step: import('styled-components').StyledComponent<"div", any, {
11
11
  active: boolean;
12
12
  wasActive: boolean;
13
13
  done: boolean;
package/dist/Step/Step.styles.js CHANGED
@@ -1,43 +1,33 @@
1
- import styled, { css } from 'styled-components';
2
- import { ORIENTATIONS } from '../Stepper.types';
3
- export var StepPrefix = styled.div.withConfig({
1
+ import styled, { css } from "styled-components";
2
+ import { ORIENTATIONS } from "../Stepper.types.js";
3
+ const StepPrefix = /* @__PURE__ */ styled.div.withConfig({
4
4
  displayName: "Stepstyles__StepPrefix",
5
5
  componentId: "sc-1sayddf-0"
6
- })(["width:24px;min-width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:50%;border-width:1px;border-style:solid;border-color:", ";margin-right:", ";text-align:center;transition:border-color 0.2s ease-in-out,margin-right 0.2s ease-in-out;"], function (props) {
7
- return props.theme.palette['grey-400'];
8
- }, function (props) {
9
- return props.noMargin ? '0' : '8px';
10
- });
11
- export var StepNumber = styled.span.withConfig({
6
+ })(["width:24px;min-width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:50%;border-width:1px;border-style:solid;border-color:", ";margin-right:", ";text-align:center;transition:border-color 0.2s ease-in-out,margin-right 0.2s ease-in-out;"], (props) => props.theme.palette["grey-400"], (props) => props.noMargin ? "0" : "8px");
7
+ const StepNumber = /* @__PURE__ */ styled.span.withConfig({
12
8
  displayName: "Stepstyles__StepNumber",
13
9
  componentId: "sc-1sayddf-1"
14
- })(["font-size:13px;display:inline-flex;text-align:center;width:10px;position:absolute;line-height:24px;justify-content:center;align-items:center;transition:color 0.2s ease-in-out;color:", ";"], function (props) {
15
- return props.theme.palette['grey-400'];
16
- });
17
- export var StepName = styled.span.withConfig({
10
+ })(["font-size:13px;display:inline-flex;text-align:center;width:10px;position:absolute;line-height:24px;justify-content:center;align-items:center;transition:color 0.2s ease-in-out;color:", ";"], (props) => props.theme.palette["grey-400"]);
11
+ const StepName = /* @__PURE__ */ styled.span.withConfig({
18
12
  displayName: "Stepstyles__StepName",
19
13
  componentId: "sc-1sayddf-2"
20
14
  })(["font-size:13px;line-height:18px;flex-wrap:nowrap;position:relative;display:flex;align-items:center;white-space:nowrap;overflow:hidden;max-width:100%;width:auto;transition:opacity 0.2s ease-in-out;opacity:1;&:before{position:absolute;display:block;font-weight:500;content:attr(data-label);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:calc(100% + 2px);visibility:hidden;}"]);
21
- export var StepLabel = styled.span.withConfig({
15
+ const StepLabel = /* @__PURE__ */ styled.span.withConfig({
22
16
  displayName: "Stepstyles__StepLabel",
23
17
  componentId: "sc-1sayddf-3"
24
- })(["transition:color 0.2s ease-in-out;color:", ";overflow:hidden;display:block;white-space:nowrap;text-overflow:ellipsis;width:100%;"], function (props) {
25
- return props.theme.palette['grey-400'];
26
- });
27
- export var StepWrapper = styled.div.withConfig({
18
+ })(["transition:color 0.2s ease-in-out;color:", ";overflow:hidden;display:block;white-space:nowrap;text-overflow:ellipsis;width:100%;"], (props) => props.theme.palette["grey-400"]);
19
+ const StepWrapper = /* @__PURE__ */ styled.div.withConfig({
28
20
  displayName: "Stepstyles__StepWrapper",
29
21
  componentId: "sc-1sayddf-4"
30
22
  })(["display:flex;flex-direction:row;align-items:center;justify-content:flex-start;"]);
31
- export var StepContent = styled.div.withConfig({
23
+ const StepContent = /* @__PURE__ */ styled.div.withConfig({
32
24
  displayName: "Stepstyles__StepContent",
33
25
  componentId: "sc-1sayddf-5"
34
- })(["display:flex;padding:0 0 0 20px;transition:padding 0.2s ease-in-out;min-height:16px;position:relative;margin-left:12px;outline:0;&&{border-left:1px solid ", ";}"], function (props) {
35
- return props.theme.palette['grey-400'];
36
- });
37
- export var Step = styled.div.withConfig({
26
+ })(["display:flex;padding:0 0 0 20px;transition:padding 0.2s ease-in-out;min-height:16px;position:relative;margin-left:12px;outline:0;&&{border-left:1px solid ", ";}"], (props) => props.theme.palette["grey-400"]);
27
+ const Step = /* @__PURE__ */ styled.div.withConfig({
38
28
  displayName: "Stepstyles__Step",
39
29
  componentId: "sc-1sayddf-6"
40
- })(["display:flex;flex-direction:row;align-items:center;justify-content:flex-start;position:relative;", ";", ";", ";", ";&:last-of-type{", "{border-left:0;}}", "{cursor:", ";}"], function (props) {
30
+ })(["display:flex;flex-direction:row;align-items:center;justify-content:flex-start;position:relative;", ";", ";", ";", ";&:last-of-type{", "{border-left:0;}}", "{cursor:", ";}"], (props) => {
41
31
  if (props.wasActive) {
42
32
  return css(["", "{transition-delay:0s;}"], StepName);
43
33
  }
@@ -45,33 +35,40 @@ export var Step = styled.div.withConfig({
45
35
  return css(["", "{transition-delay:0.3s;}"], StepName);
46
36
  }
47
37
  return false;
48
- }, function (props) {
49
- if (props.size === 'small' && props.orientation === ORIENTATIONS.HORIZONTAL) {
38
+ }, (props) => {
39
+ if (props.size === "small" && props.orientation === ORIENTATIONS.HORIZONTAL) {
50
40
  return css(["", "{margin-right:0;}", "{max-width:0;opacity:0;}"], StepPrefix, StepName);
51
41
  }
52
42
  return false;
53
- }, function (props) {
54
- if (props.active && props.size === 'small' && props.orientation === ORIENTATIONS.HORIZONTAL) {
43
+ }, (props) => {
44
+ if (props.active && props.size === "small" && props.orientation === ORIENTATIONS.HORIZONTAL) {
55
45
  return css(["", "{margin-right:8px;}", "{max-width:100px;opacity:1;}"], StepPrefix, StepName);
56
46
  }
57
47
  if (props.active) {
58
- return css(["", "{padding:", " 0 ", " 20px;}"], StepContent, props.hasChildren ? '16px' : '0', props.hasChildren ? '16px' : '0');
48
+ return css(["", "{padding:", " 0 ", " 20px;}"], StepContent, props.hasChildren ? "16px" : "0", props.hasChildren ? "16px" : "0");
59
49
  }
60
50
  return false;
61
- }, function (props) {
51
+ }, (props) => {
62
52
  if (props.validated) {
63
- return css(["", "{border-color:", ";}", "", ",", "", "{color:", ";font-weight:400;}"], StepPrefix, props.theme.palette['red-600'], StepNumber, StepNumber, StepLabel, StepLabel, props.theme.palette['red-600']);
53
+ return css(["", "{border-color:", ";}", "", ",", "", "{color:", ";font-weight:400;}"], StepPrefix, props.theme.palette["red-600"], StepNumber, StepNumber, StepLabel, StepLabel, props.theme.palette["red-600"]);
64
54
  }
65
55
  if (props.warning) {
66
- return css(["", "{border-color:", ";}", "", ",", "", "{color:", ";font-weight:400;}"], StepPrefix, props.theme.palette['yellow-600'], StepNumber, StepNumber, StepLabel, StepLabel, props.theme.palette['yellow-600']);
56
+ return css(["", "{border-color:", ";}", "", ",", "", "{color:", ";font-weight:400;}"], StepPrefix, props.theme.palette["yellow-600"], StepNumber, StepNumber, StepLabel, StepLabel, props.theme.palette["yellow-600"]);
67
57
  }
68
58
  if (props.done) {
69
- return css(["", "{border-color:", ";}", ",", "{color:", ";font-weight:400;}"], StepPrefix, props.theme.palette['green-600'], StepNumber, StepLabel, props.theme.palette['green-600']);
59
+ return css(["", "{border-color:", ";}", ",", "{color:", ";font-weight:400;}"], StepPrefix, props.theme.palette["green-600"], StepNumber, StepLabel, props.theme.palette["green-600"]);
70
60
  }
71
61
  if (props.active) {
72
- return css(["", "{border-color:", ";}", "{color:", ";font-weight:500;}", "{&::before{border-color:", ";color:", ";visibility:visible;}", "{visibility:hidden;}}"], StepPrefix, props.theme.palette['grey-700'], StepNumber, props.theme.palette['grey-700'], StepName, props.theme.palette['grey-700'], props.theme.palette['grey-700'], StepLabel);
62
+ return css(["", "{border-color:", ";}", "{color:", ";font-weight:500;}", "{&::before{border-color:", ";color:", ";visibility:visible;}", "{visibility:hidden;}}"], StepPrefix, props.theme.palette["grey-700"], StepNumber, props.theme.palette["grey-700"], StepName, props.theme.palette["grey-700"], props.theme.palette["grey-700"], StepLabel);
73
63
  }
74
- return props.clickable && css(["&:hover{", "{border-color:", ";}", ",", "{color:", ";font-weight:400;}}"], StepPrefix, props.theme.palette['grey-700'], StepNumber, StepLabel, props.theme.palette['grey-700']);
75
- }, StepContent, StepWrapper, function (props) {
76
- return props.clickable ? 'pointer' : 'default';
77
- });
64
+ return props.clickable && css(["&:hover{", "{border-color:", ";}", ",", "{color:", ";font-weight:400;}}"], StepPrefix, props.theme.palette["grey-700"], StepNumber, StepLabel, props.theme.palette["grey-700"]);
65
+ }, StepContent, StepWrapper, (props) => props.clickable ? "pointer" : "default");
66
+ export {
67
+ Step,
68
+ StepContent,
69
+ StepLabel,
70
+ StepName,
71
+ StepNumber,
72
+ StepPrefix,
73
+ StepWrapper
74
+ };
package/dist/Step/Step.types.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- import { type ReactNode } from 'react';
2
- import { type StepperOrientation, type StepperSize } from '../Stepper.types';
1
+ import { ReactNode } from 'react';
2
+ import { StepperOrientation, StepperSize } from '../Stepper.types';
3
3
  export type StepProps = {
4
4
  label: string | ReactNode;
5
5
  stepNumber: number;
package/dist/Step/Step.types.js CHANGED
@@ -1 +1 @@
1
- export {};
1
+
package/dist/Stepper.d.ts CHANGED
@@ -1,7 +1,7 @@
1
- import React from 'react';
2
- import { type StepperProps } from './Stepper.types';
1
+ import { default as React } from 'react';
2
+ import { StepperProps } from './Stepper.types';
3
3
  declare const Stepper: {
4
4
  ({ orientation, style, children, size, }: StepperProps): React.JSX.Element;
5
- Step: ({ stepNumber, label, active, done, warning, validated, tooltip, onClick, children, size, orientation, }: import("./Step/Step.types").StepProps) => React.JSX.Element;
5
+ Step: ({ stepNumber, label, active, done, warning, validated, tooltip, onClick, children, size, orientation, }: import('./Step/Step.types').StepProps) => React.JSX.Element;
6
6
  };
7
7
  export default Stepper;
package/dist/Stepper.js CHANGED
@@ -1,26 +1,26 @@
1
- import React, { Children, cloneElement, isValidElement } from 'react';
2
- import Step from './Step/Step';
3
- import * as S from './Stepper.styles';
4
- import { ORIENTATIONS } from './Stepper.types';
5
- var Stepper = function Stepper(_ref) {
6
- var _ref$orientation = _ref.orientation,
7
- orientation = _ref$orientation === void 0 ? ORIENTATIONS.HORIZONTAL : _ref$orientation,
8
- style = _ref.style,
9
- children = _ref.children,
10
- _ref$size = _ref.size,
11
- size = _ref$size === void 0 ? 'default' : _ref$size;
12
- return /*#__PURE__*/React.createElement(S.StepperWrapper, {
13
- className: "ds-stepper",
14
- orientation: orientation,
15
- style: style
16
- }, children && Children.map(children, function (Child, index) {
17
- return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/isValidElement(Child) ? /*#__PURE__*/cloneElement(Child, {
18
- size: size,
19
- orientation: orientation
20
- }) : Child, orientation === ORIENTATIONS.HORIZONTAL &&
21
- // @ts-expect-error Property 'length' does not exist on type 'number'.
22
- index < children.length - 1 && /*#__PURE__*/React.createElement(S.StepDivider, null));
23
- }));
1
+ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
2
+ import { Children, isValidElement, cloneElement } from "react";
3
+ import Step from "./Step/Step.js";
4
+ import { StepperWrapper, StepDivider } from "./Stepper.styles.js";
5
+ import { ORIENTATIONS } from "./Stepper.types.js";
6
+ const Stepper = ({
7
+ orientation = ORIENTATIONS.HORIZONTAL,
8
+ style,
9
+ children,
10
+ size = "default"
11
+ }) => {
12
+ return /* @__PURE__ */ jsx(StepperWrapper, { className: "ds-stepper", orientation, style, children: children && Children.map(children, (Child, index) => {
13
+ return /* @__PURE__ */ jsxs(Fragment, { children: [
14
+ isValidElement(Child) ? cloneElement(Child, {
15
+ size,
16
+ orientation
17
+ }) : Child,
18
+ orientation === ORIENTATIONS.HORIZONTAL && // @ts-expect-error Property 'length' does not exist on type 'number'.
19
+ index < children.length - 1 && /* @__PURE__ */ jsx(StepDivider, {})
20
+ ] });
21
+ }) });
24
22
  };
25
23
  Stepper.Step = Step;
26
- export default Stepper;
24
+ export {
25
+ Stepper as default
26
+ };
package/dist/Stepper.styles.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- import { type StepperOrientation } from './Stepper.types';
2
- export declare const StepperWrapper: import("styled-components").StyledComponent<"div", any, {
1
+ import { StepperOrientation } from './Stepper.types';
2
+ export declare const StepperWrapper: import('styled-components').StyledComponent<"div", any, {
3
3
  orientation: StepperOrientation;
4
4
  }, never>;
5
- export declare const StepDivider: import("styled-components").StyledComponent<"div", any, {}, never>;
5
+ export declare const StepDivider: import('styled-components').StyledComponent<"div", any, {}, never>;
package/dist/Stepper.styles.js CHANGED
@@ -1,25 +1,15 @@
1
- import styled from 'styled-components';
2
- import { Step, StepContent, StepWrapper } from './Step/Step.styles';
3
- import { ORIENTATIONS } from './Stepper.types';
4
- export var StepperWrapper = styled.div.withConfig({
1
+ import styled from "styled-components";
2
+ import { Step, StepWrapper, StepContent } from "./Step/Step.styles.js";
3
+ import { ORIENTATIONS } from "./Stepper.types.js";
4
+ const StepperWrapper = /* @__PURE__ */ styled.div.withConfig({
5
5
  displayName: "Stepperstyles__StepperWrapper",
6
6
  componentId: "sc-2yak4n-0"
7
- })(["display:flex;flex-direction:", ";align-items:", ";justify-content:flex-start;width:auto;", "{align-items:", ";&:first-of-type{margin-top:0;}&:last-of-type{margin-bottom:0;}flex-direction:", ";}", "{margin:", ";}", "{display:", ";}"], function (props) {
8
- return props.orientation === ORIENTATIONS.VERTICAL ? 'column' : 'row';
9
- }, function (props) {
10
- return props.orientation === ORIENTATIONS.VERTICAL ? 'flex-start' : 'center';
11
- }, Step, function (props) {
12
- return props.orientation === ORIENTATIONS.VERTICAL ? 'flex-start' : 'center';
13
- }, function (props) {
14
- return props.orientation === ORIENTATIONS.VERTICAL ? 'column' : 'row';
15
- }, StepWrapper, function (props) {
16
- return props.orientation === ORIENTATIONS.VERTICAL ? '8px 0' : '0';
17
- }, StepContent, function (props) {
18
- return props.orientation === ORIENTATIONS.VERTICAL ? 'flex' : 'none';
19
- });
20
- export var StepDivider = styled.div.withConfig({
7
+ })(["display:flex;flex-direction:", ";align-items:", ";justify-content:flex-start;width:auto;", "{align-items:", ";&:first-of-type{margin-top:0;}&:last-of-type{margin-bottom:0;}flex-direction:", ";}", "{margin:", ";}", "{display:", ";}"], (props) => props.orientation === ORIENTATIONS.VERTICAL ? "column" : "row", (props) => props.orientation === ORIENTATIONS.VERTICAL ? "flex-start" : "center", Step, (props) => props.orientation === ORIENTATIONS.VERTICAL ? "flex-start" : "center", (props) => props.orientation === ORIENTATIONS.VERTICAL ? "column" : "row", StepWrapper, (props) => props.orientation === ORIENTATIONS.VERTICAL ? "8px 0" : "0", StepContent, (props) => props.orientation === ORIENTATIONS.VERTICAL ? "flex" : "none");
8
+ const StepDivider = /* @__PURE__ */ styled.div.withConfig({
21
9
  displayName: "Stepperstyles__StepDivider",
22
10
  componentId: "sc-2yak4n-1"
23
- })(["display:flex;flex:1;margin:0 8px;max-width:48px;min-width:8px;height:24px;position:relative;&:after{position:absolute;top:12px;height:1px;width:100%;content:'';background-color:", ";}"], function (props) {
24
- return props.theme.palette['grey-400'];
25
- });
11
+ })(["display:flex;flex:1;margin:0 8px;max-width:48px;min-width:8px;height:24px;position:relative;&:after{position:absolute;top:12px;height:1px;width:100%;content:'';background-color:", ";}"], (props) => props.theme.palette["grey-400"]);
12
+ export {
13
+ StepDivider,
14
+ StepperWrapper
15
+ };
package/dist/Stepper.types.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import type { CSSProperties, ReactNode } from 'react';
1
+ import { CSSProperties, ReactNode } from 'react';
2
2
  export type StepperOrientation = 'vertical' | 'horizontal' | string;
3
3
  export type StepperSize = 'small' | 'default' | string;
4
4
  export declare const ORIENTATIONS: {
package/dist/Stepper.types.js CHANGED
@@ -1,4 +1,7 @@
1
- export var ORIENTATIONS = {
2
- VERTICAL: 'vertical',
3
- HORIZONTAL: 'horizontal'
4
- };
1
+ const ORIENTATIONS = {
2
+ VERTICAL: "vertical",
3
+ HORIZONTAL: "horizontal"
4
+ };
5
+ export {
6
+ ORIENTATIONS
7
+ };
package/dist/index.js CHANGED
@@ -1 +1,4 @@
1
- export { default } from './Stepper';
1
+ import { default as default2 } from "./Stepper.js";
2
+ export {
3
+ default2 as default
4
+ };
package/dist/modules.d.js CHANGED
@@ -1 +1 @@
1
- import '@testing-library/jest-dom';
1
+ import "@testing-library/jest-dom";
package/dist/modules.d.ts ADDED
File without changes
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-stepper",
3
- "version": "1.0.39",
3
+ "version": "1.0.41",
4
4
  "description": "Stepper UI Component for the Synerise Design System",
5
5
  "license": "ISC",
6
6
  "repository": "Synerise/synerise-design",
@@ -16,10 +16,10 @@
16
16
  "access": "public"
17
17
  },
18
18
  "scripts": {
19
- "build": "pnpm run build:js && pnpm run build:css && pnpm run defs",
19
+ "build": "vite build",
20
20
  "build:css": "node ../../../scripts/style/less.js",
21
21
  "build:js": "babel --delete-dir-on-start --root-mode upward src --out-dir dist --extensions '.js,.ts,.tsx'",
22
- "build:watch": "pnpm run build:js -- --watch",
22
+ "build:watch": "vite build --watch",
23
23
  "defs": "tsc --declaration --outDir dist/ --emitDeclarationOnly",
24
24
  "pack:ci": "pnpm pack --pack-destination ../../storybook/storybook-static/static",
25
25
  "prepublish": "pnpm run build",
@@ -35,8 +35,8 @@
35
35
  ],
36
36
  "types": "dist/index.d.ts",
37
37
  "dependencies": {
38
- "@synerise/ds-icon": "^1.14.1",
39
- "@synerise/ds-tooltip": "^1.4.8",
38
+ "@synerise/ds-icon": "^1.15.1",
39
+ "@synerise/ds-tooltip": "^1.4.10",
40
40
  "react-animate-height": "^2.0.23"
41
41
  },
42
42
  "peerDependencies": {
@@ -44,5 +44,5 @@
44
44
  "react": ">=16.9.0 <= 18.3.1",
45
45
  "styled-components": "^5.3.3"
46
46
  },
47
- "gitHead": "8dfafc5d7278f09d430f1e7499782d05c76b47c0"
47
+ "gitHead": "e4ecca8944fc9b41c1b9d59c8bcad5e5e2013225"
48
48
  }