@xsolla/xui-stepper 0.206.2 → 0.207.0

package/web/index.js

@@ -1574,6 +1574,8 @@ var import_xui_icons2 = require("@xsolla/xui-icons");
 // src/ProgressStepItem.tsx
 var import_xui_core4 = require("@xsolla/xui-core");
 var import_jsx_runtime8 = require("react/jsx-runtime");
+var DEFAULT_OPACITY = 0.2;
+var HOVER_OPACITY = 0.5;
 var ProgressStepItem = ({
   state = "default",
   size = "md",
@@ -1596,8 +1598,9 @@ var ProgressStepItem = ({
   let opacity = 1;
   if (!isActive) {
     backgroundColor = theme.colors.content.tertiary || "rgba(0, 0, 0, 0.6)";
-    opacity = isHover ? 0.5 : 0.2;
+    opacity = isHover ? HOVER_OPACITY : DEFAULT_OPACITY;
   }
+  const hoverStyle = onPress && !isActive && !isHover ? { opacity: HOVER_OPACITY } : void 0;
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     Box,
     {
@@ -1608,6 +1611,7 @@ var ProgressStepItem = ({
       borderRadius,
       backgroundColor,
       opacity,
+      hoverStyle,
       onPress,
       onMouseEnter,
       onMouseLeave,
@@ -1640,10 +1644,11 @@ var ProgressStep = ({
       onStepPress(activeStep + 1);
     }
   };
-  const arrowSize = size === "md" ? 24 : 18;
+  const controlSize = size === "md" ? 24 : 18;
   const iconSize = size === "md" ? 18 : 14;
-  const isFirst = activeStep <= 0;
-  const isLast = activeStep >= count - 1;
+  const isPrevDisabled = activeStep <= 0 || !onStepPress;
+  const isNextDisabled = activeStep >= count - 1 || !onStepPress;
+  const hoverBackground = theme.colors.overlay?.mono || "rgba(127, 127, 127, 0.16)";
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     Box,
     {
@@ -1653,20 +1658,25 @@ var ProgressStep = ({
       alignItems: "center",
       justifyContent: "center",
       gap: 4,
-      height: size === "md" ? 24 : 18,
+      height: controlSize,
       children: [
         arrows && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           Box,
           {
-            onPress: handlePrev,
-            width: arrowSize,
-            height: arrowSize,
+            onPress: isPrevDisabled ? void 0 : handlePrev,
+            width: controlSize,
+            height: controlSize,
             alignItems: "center",
             justifyContent: "center",
             borderRadius: 4,
-            opacity: isFirst ? 0.2 : 1,
-            cursor: isFirst ? "default" : "pointer",
-            children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_xui_icons2.ArrowLeft, { size: iconSize, color: theme.colors.content.primary })
+            opacity: isPrevDisabled ? 0.6 : 1,
+            cursor: isPrevDisabled ? "not-allowed" : "pointer",
+            hoverStyle: isPrevDisabled ? void 0 : { backgroundColor: hoverBackground },
+            role: "button",
+            "aria-label": "Previous step",
+            "aria-disabled": isPrevDisabled,
+            testID: testID ? `${testID}-prev` : void 0,
+            children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_xui_icons2.ChevronLeft, { size: iconSize, color: theme.colors.content.primary })
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Box, { flexDirection: "row", alignItems: "center", gap: 4, children: Array.from({ length: count }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
@@ -1681,15 +1691,20 @@ var ProgressStep = ({
         arrows && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           Box,
           {
-            onPress: handleNext,
-            width: arrowSize,
-            height: arrowSize,
+            onPress: isNextDisabled ? void 0 : handleNext,
+            width: controlSize,
+            height: controlSize,
             alignItems: "center",
             justifyContent: "center",
             borderRadius: 4,
-            opacity: isLast ? 0.2 : 1,
-            cursor: isLast ? "default" : "pointer",
-            children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_xui_icons2.ArrowRight, { size: iconSize, color: theme.colors.content.primary })
+            opacity: isNextDisabled ? 0.6 : 1,
+            cursor: isNextDisabled ? "not-allowed" : "pointer",
+            hoverStyle: isNextDisabled ? void 0 : { backgroundColor: hoverBackground },
+            role: "button",
+            "aria-label": "Next step",
+            "aria-disabled": isNextDisabled,
+            testID: testID ? `${testID}-next` : void 0,
+            children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_xui_icons2.ChevronRight, { size: iconSize, color: theme.colors.content.primary })
           }
         )
       ]