@xsolla/xui-stepper 0.206.2 → 0.208.0

package/web/index.mjs

@@ -1530,11 +1530,13 @@ Stepper.displayName = "Stepper";
 
 // src/ProgressStep.tsx
 import { useResolvedTheme as useResolvedTheme5 } from "@xsolla/xui-core";
-import { ArrowLeft, ArrowRight } from "@xsolla/xui-icons";
+import { ChevronLeft, ChevronRight } from "@xsolla/xui-icons";
 
 // src/ProgressStepItem.tsx
 import { useResolvedTheme as useResolvedTheme4 } from "@xsolla/xui-core";
 import { jsx as jsx8 } from "react/jsx-runtime";
+var DEFAULT_OPACITY = 0.2;
+var HOVER_OPACITY = 0.5;
 var ProgressStepItem = ({
   state = "default",
   size = "md",
@@ -1557,8 +1559,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__ */ jsx8(
     Box,
     {
@@ -1569,6 +1572,7 @@ var ProgressStepItem = ({
       borderRadius,
       backgroundColor,
       opacity,
+      hoverStyle,
       onPress,
       onMouseEnter,
       onMouseLeave,
@@ -1601,10 +1605,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__ */ jsxs2(
     Box,
     {
@@ -1614,20 +1619,25 @@ var ProgressStep = ({
       alignItems: "center",
       justifyContent: "center",
       gap: 4,
-      height: size === "md" ? 24 : 18,
+      height: controlSize,
       children: [
         arrows && /* @__PURE__ */ jsx9(
           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__ */ jsx9(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__ */ jsx9(ChevronLeft, { size: iconSize, color: theme.colors.content.primary })
           }
         ),
         /* @__PURE__ */ jsx9(Box, { flexDirection: "row", alignItems: "center", gap: 4, children: Array.from({ length: count }).map((_, i) => /* @__PURE__ */ jsx9(
@@ -1642,15 +1652,20 @@ var ProgressStep = ({
         arrows && /* @__PURE__ */ jsx9(
           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__ */ jsx9(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__ */ jsx9(ChevronRight, { size: iconSize, color: theme.colors.content.primary })
           }
         )
       ]