@nexus-cross/design-system 1.0.13 → 1.0.14
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.
- package/dist/chunks/{chunk-X3CTJ7TD.js → chunk-4KBFVIKX.js} +41 -11
- package/dist/chunks/{chunk-V35IEPRL.js → chunk-LAOQRXCE.js} +1 -1
- package/dist/chunks/{chunk-MMCA33FW.mjs → chunk-RSFLNWOM.mjs} +41 -11
- package/dist/chunks/{chunk-6ECGMUT6.mjs → chunk-S6ODYMFP.mjs} +1 -1
- package/dist/components/Stepper.d.ts.map +1 -1
- package/dist/index.js +3 -3
- package/dist/index.mjs +1 -1
- package/dist/stepper.js +3 -3
- package/dist/stepper.mjs +1 -1
- package/dist/styles/.generated/built.d.ts +1 -1
- package/dist/styles/.generated/built.d.ts.map +1 -1
- package/dist/styles/layer.js +2 -2
- package/dist/styles/layer.mjs +1 -1
- package/dist/styles.css +83 -38
- package/dist/styles.js +2 -2
- package/dist/styles.layered.css +83 -38
- package/dist/styles.mjs +1 -1
- package/package.json +2 -2
|
@@ -41,10 +41,38 @@ var stepperVariants = classVarianceAuthority.cva("nexus-stepper", {
|
|
|
41
41
|
size: "md"
|
|
42
42
|
}
|
|
43
43
|
});
|
|
44
|
-
var CheckIcon = ({ className }) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
44
|
+
var CheckIcon = ({ className }) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
45
|
+
"svg",
|
|
46
|
+
{
|
|
47
|
+
className,
|
|
48
|
+
viewBox: "0 0 14 14",
|
|
49
|
+
fill: "none",
|
|
50
|
+
stroke: "currentColor",
|
|
51
|
+
strokeWidth: "2",
|
|
52
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2.5 7.5l3 3 6-6", strokeLinecap: "round", strokeLinejoin: "round" })
|
|
53
|
+
}
|
|
54
|
+
);
|
|
45
55
|
var Stepper = React__namespace.forwardRef(
|
|
46
|
-
({
|
|
56
|
+
({
|
|
57
|
+
className,
|
|
58
|
+
orientation,
|
|
59
|
+
size,
|
|
60
|
+
steps,
|
|
61
|
+
current = 0,
|
|
62
|
+
status = "process",
|
|
63
|
+
...props
|
|
64
|
+
}, ref) => {
|
|
47
65
|
const isHorizontal = orientation !== "vertical";
|
|
66
|
+
const prevCurrentRef = React__namespace.useRef(current);
|
|
67
|
+
const [animatingIdx, setAnimatingIdx] = React__namespace.useState(null);
|
|
68
|
+
React__namespace.useEffect(() => {
|
|
69
|
+
if (prevCurrentRef.current !== current) {
|
|
70
|
+
setAnimatingIdx(current);
|
|
71
|
+
prevCurrentRef.current = current;
|
|
72
|
+
const timer = setTimeout(() => setAnimatingIdx(null), 600);
|
|
73
|
+
return () => clearTimeout(timer);
|
|
74
|
+
}
|
|
75
|
+
}, [current]);
|
|
48
76
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
49
77
|
"div",
|
|
50
78
|
{
|
|
@@ -56,12 +84,15 @@ var Stepper = React__namespace.forwardRef(
|
|
|
56
84
|
const state = i < current ? "completed" : i === current ? status === "error" ? "error" : "active" : "pending";
|
|
57
85
|
const isFirst = i === 0;
|
|
58
86
|
const isLast = i === steps.length - 1;
|
|
59
|
-
const
|
|
60
|
-
const nextCompleted = i < current;
|
|
87
|
+
const isAnimating = animatingIdx === i;
|
|
61
88
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
62
89
|
"div",
|
|
63
90
|
{
|
|
64
|
-
className: chunkCZC76ZD5_js.cn(
|
|
91
|
+
className: chunkCZC76ZD5_js.cn(
|
|
92
|
+
"nexus-stepper__step",
|
|
93
|
+
`nexus-stepper__step--${state}`,
|
|
94
|
+
isAnimating && "nexus-stepper__step--animating"
|
|
95
|
+
),
|
|
65
96
|
children: [
|
|
66
97
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "nexus-stepper__indicator-wrap", children: isHorizontal ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
67
98
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -69,8 +100,7 @@ var Stepper = React__namespace.forwardRef(
|
|
|
69
100
|
{
|
|
70
101
|
className: chunkCZC76ZD5_js.cn(
|
|
71
102
|
"nexus-stepper__connector",
|
|
72
|
-
isFirst && "nexus-stepper__connector--hidden"
|
|
73
|
-
prevCompleted && "nexus-stepper__connector--completed"
|
|
103
|
+
isFirst && "nexus-stepper__connector--hidden"
|
|
74
104
|
)
|
|
75
105
|
}
|
|
76
106
|
),
|
|
@@ -80,14 +110,14 @@ var Stepper = React__namespace.forwardRef(
|
|
|
80
110
|
{
|
|
81
111
|
className: chunkCZC76ZD5_js.cn(
|
|
82
112
|
"nexus-stepper__connector",
|
|
83
|
-
isLast && "nexus-stepper__connector--hidden"
|
|
84
|
-
nextCompleted && "nexus-stepper__connector--completed"
|
|
113
|
+
isLast && "nexus-stepper__connector--hidden"
|
|
85
114
|
)
|
|
86
115
|
}
|
|
87
116
|
)
|
|
88
117
|
] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
89
|
-
!isFirst && /* @__PURE__ */ jsxRuntime.jsx("div", { className:
|
|
90
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "nexus-stepper__indicator", children: state === "completed" ? /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { className: "nexus-stepper__check" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { children: i + 1 }) })
|
|
118
|
+
!isFirst && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "nexus-stepper__connector" }),
|
|
119
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "nexus-stepper__indicator", children: state === "completed" ? /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { className: "nexus-stepper__check" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { children: i + 1 }) }),
|
|
120
|
+
!isLast && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "nexus-stepper__connector" })
|
|
91
121
|
] }) }),
|
|
92
122
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "nexus-stepper__content", children: [
|
|
93
123
|
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "nexus-stepper__label", children: step.label }),
|