@xsolla/xui-stepper 0.69.0 → 0.71.0

package/native/index.d.mts

@@ -9,8 +9,8 @@ type StepClickType = ({ number, step, }: {
     number: number;
     step: StepType;
 }) => void;
-type StepperSize = "s" | "m";
-type ProgressStepSize = "s" | "m";
+type StepperSize = "sm" | "md";
+type ProgressStepSize = "sm" | "md";
 type ProgressStepItemState = "active" | "default" | "hover";
 interface ProgressStepItemProps {
     state?: ProgressStepItemState;

package/native/index.d.ts

@@ -9,8 +9,8 @@ type StepClickType = ({ number, step, }: {
     number: number;
     step: StepType;
 }) => void;
-type StepperSize = "s" | "m";
-type ProgressStepSize = "s" | "m";
+type StepperSize = "sm" | "md";
+type ProgressStepSize = "sm" | "md";
 type ProgressStepItemState = "active" | "default" | "hover";
 interface ProgressStepItemProps {
     state?: ProgressStepItemState;

package/native/index.js

@@ -584,8 +584,8 @@ var StepTail = ({
   if (variantUI !== "current" || isLast) {
     return null;
   }
-  const tailSize = size === "s" ? 3 : 5;
-  const verticalTailWidth = size === "s" ? 2 : 4;
+  const tailSize = size === "sm" ? 3 : 5;
+  const verticalTailWidth = size === "sm" ? 2 : 4;
   const isHorizontal = direction === "horizontal";
   let tailBgColor = "transparent";
   let tailHeight = tailSize;
@@ -989,7 +989,7 @@ var StepState = ({
       }
     }
   }, [state, variantUI, disabled, noClick, theme, paletteColor]);
-  const iconSize = size === "s" ? 18 : 18;
+  const iconSize = 18;
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     Box,
     {
@@ -1003,11 +1003,11 @@ var StepState = ({
       alignItems: "center",
       justifyContent: "center",
       flexShrink: 0,
-      children: state === "loading" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Spinner, { size: size === "s" ? 16 : 20, color: iconStyles.color }) : state === "complete" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_xui_icons.Check, { size: iconSize, color: iconStyles.color }) : state === "alert" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_xui_icons.X, { size: iconSize, color: iconStyles.color }) : state === "warning" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_xui_icons.AlertCircle, { size: iconSize, color: iconStyles.color }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      children: state === "loading" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Spinner, { size: size === "sm" ? 16 : 20, color: iconStyles.color }) : state === "complete" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_xui_icons.Check, { size: iconSize, color: iconStyles.color }) : state === "alert" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_xui_icons.X, { size: iconSize, color: iconStyles.color }) : state === "warning" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_xui_icons.AlertCircle, { size: iconSize, color: iconStyles.color }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
         Text,
         {
           color: iconStyles.color,
-          fontSize: size === "s" ? 12 : 14,
+          fontSize: size === "sm" ? 12 : 14,
           fontWeight: "600",
           children: step
         }
@@ -1109,13 +1109,13 @@ var Step = ({
   const titleStyles = (0, import_react5.useMemo)(() => {
     if (variantUI === "simple") {
       const sizeStylesMap = {
-        s: {
+        sm: {
           fontSize: 14,
           lineHeight: 22,
           paddingTop: 1,
           paddingBottom: 1
         },
-        m: {
+        md: {
           fontSize: 16,
           lineHeight: 24,
           paddingTop: 4,
@@ -1166,12 +1166,12 @@ var Step = ({
   }, [variantUI, direction, size, state, theme, palette]);
   const descriptionStyles = (0, import_react5.useMemo)(() => {
     const sizeStylesMap = {
-      s: {
+      sm: {
         fontSize: 12,
         lineHeight: variantUI === "simple" ? 20 : 18,
         marginTop: variantUI === "simple" ? 0 : 2
       },
-      m: {
+      md: {
         fontSize: 14,
         lineHeight: variantUI === "simple" ? 22 : 20,
         marginTop: variantUI === "simple" ? 0 : 4
@@ -1191,22 +1191,22 @@ var Step = ({
     if (variantUI === "simple") {
       if (direction === "horizontal") {
         return {
-          marginLeft: size === "s" ? 8 : 12,
+          marginLeft: size === "sm" ? 8 : 12,
           flex: 1
         };
       }
       return {
-        marginLeft: size === "s" ? 8 : 12
+        marginLeft: size === "sm" ? 8 : 12
       };
     } else {
       const baseStyles = {
-        marginTop: size === "s" ? 10 : 12
+        marginTop: size === "sm" ? 10 : 12
       };
       if (direction === "horizontal") {
         return {
           ...baseStyles,
-          paddingLeft: size === "s" ? 20 : 24,
-          paddingRight: size === "s" ? 20 : 24,
+          paddingLeft: size === "sm" ? 20 : 24,
+          paddingRight: size === "sm" ? 20 : 24,
           gap: 12
         };
       } else {
@@ -1222,14 +1222,14 @@ var Step = ({
           flex: 1,
           minWidth: 0,
           flexShrink: 0,
-          paddingBottom: size === "s" ? 27 : 37
+          paddingBottom: size === "sm" ? 27 : 37
         };
       } else {
         return {
-          paddingTop: size === "s" ? 20 : 24,
-          paddingBottom: size === "s" ? 20 : 24,
-          paddingLeft: size === "s" ? 24 : 32,
-          paddingRight: size === "s" ? 10 : 10,
+          paddingTop: size === "sm" ? 20 : 24,
+          paddingBottom: size === "sm" ? 20 : 24,
+          paddingLeft: size === "sm" ? 24 : 32,
+          paddingRight: size === "sm" ? 10 : 10,
           minWidth: 184
         };
       }
@@ -1237,7 +1237,7 @@ var Step = ({
       if (direction === "horizontal") {
         return {
           flexShrink: 0,
-          marginRight: isLast ? 0 : size === "s" ? 8 : 12
+          marginRight: isLast ? 0 : size === "sm" ? 8 : 12
         };
       } else {
         return {
@@ -1291,8 +1291,8 @@ var Step = ({
               alignItems: "flex-start",
               justifyContent: "flex-start",
               gap: 12,
-              paddingLeft: size === "s" ? 20 : 24,
-              paddingRight: size === "s" ? 20 : 24,
+              paddingLeft: size === "sm" ? 20 : 24,
+              paddingRight: size === "sm" ? 20 : 24,
               width: "100%",
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Box, { flexDirection: "column", alignItems: "flex-start", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
@@ -1398,8 +1398,8 @@ var Step = ({
                 flexDirection: "row",
                 alignItems: "center",
                 width: "100%",
-                paddingTop: variantUI === "simple" ? size === "s" ? 1 : 4 : void 0,
-                paddingBottom: variantUI === "simple" ? size === "s" ? 1 : 4 : void 0,
+                paddingTop: variantUI === "simple" ? size === "sm" ? 1 : 4 : void 0,
+                paddingBottom: variantUI === "simple" ? size === "sm" ? 1 : 4 : void 0,
                 children: [
                   typeof title === "string" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                     Text,
@@ -1416,7 +1416,7 @@ var Step = ({
                     Box,
                     {
                       flex: 1,
-                      marginLeft: size === "s" ? 8 : 12,
+                      marginLeft: size === "sm" ? 8 : 12,
                       alignItems: "center",
                       justifyContent: "center",
                       children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Divider, { color: theme.colors.border.secondary })
@@ -1484,8 +1484,8 @@ var Step = ({
               alignItems: "flex-start",
               justifyContent: "flex-start",
               gap: 12,
-              paddingTop: size === "s" ? 20 : 24,
-              paddingBottom: size === "s" ? 20 : 24,
+              paddingTop: size === "sm" ? 20 : 24,
+              paddingBottom: size === "sm" ? 20 : 24,
               flex: 1,
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Box, { flexDirection: "column", alignItems: "flex-start", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
@@ -1629,7 +1629,7 @@ var Stepper = (0, import_react6.forwardRef)(
   ({
     direction = "horizontal",
     variantUI = "current",
-    size = "m",
+    size = "md",
     steps,
     tail = false,
     onClick,
@@ -1642,7 +1642,7 @@ var Stepper = (0, import_react6.forwardRef)(
     const { theme } = (0, import_xui_core3.useDesignSystem)();
     const isHorizontal = direction === "horizontal";
     const isCurrentVariant = variantUI === "current";
-    const tailSize = size === "s" ? 3 : 5;
+    const tailSize = size === "sm" ? 3 : 5;
     const tailOffset = tailSize / 2;
     const defaultAriaLabel = `Stepper with ${steps.length} step${steps.length !== 1 ? "s" : ""}`;
     const stepperAriaLabel = ariaLabel || defaultAriaLabel;
@@ -1720,7 +1720,7 @@ var import_xui_core4 = require("@xsolla/xui-core");
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var ProgressStepItem = ({
   state = "default",
-  size = "m",
+  size = "md",
   className,
   onPress,
   onMouseEnter,
@@ -1729,7 +1729,7 @@ var ProgressStepItem = ({
   const { theme } = (0, import_xui_core4.useDesignSystem)();
   const isActive = state === "active";
   const isHover = state === "hover";
-  const isMD = size === "m";
+  const isMD = size === "md";
   const width = isActive ? isMD ? 24 : 18 : isMD ? 8 : 6;
   const height = isMD ? 8 : 6;
   const borderRadius = isMD ? 2 : 1;
@@ -1761,7 +1761,7 @@ var import_jsx_runtime12 = require("react/jsx-runtime");
 var ProgressStep = ({
   count,
   activeStep,
-  size = "m",
+  size = "md",
   arrows = true,
   onStepPress,
   className
@@ -1777,8 +1777,8 @@ var ProgressStep = ({
       onStepPress(activeStep + 1);
     }
   };
-  const arrowSize = size === "m" ? 24 : 18;
-  const iconSize = size === "m" ? 18 : 14;
+  const arrowSize = size === "md" ? 24 : 18;
+  const iconSize = size === "md" ? 18 : 14;
   const isFirst = activeStep <= 0;
   const isLast = activeStep >= count - 1;
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
@@ -1789,7 +1789,7 @@ var ProgressStep = ({
       alignItems: "center",
       justifyContent: "center",
       gap: 4,
-      height: size === "m" ? 24 : 18,
+      height: size === "md" ? 24 : 18,
       children: [
         arrows && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           Box,