@xsolla/xui-button 0.171.2 → 0.171.3-pr341.1781516667

package/native/index.d.mts

@@ -33,11 +33,17 @@ interface ButtonProps extends ThemeOverrideProps {
     /** Alignment of the label text */
     labelAlignment?: "left" | "center";
     /**
-     * Small icon displayed directly next to the label text.
+     * Small icon displayed directly to the left of the label text.
      * Size and color are automatically set based on button size/state.
      * To override, specify size/color on the icon: `labelIcon={<InfoIcon size={12} />}`
      */
     labelIcon?: React.ReactNode;
+    /**
+     * Small icon displayed directly to the right of the label text.
+     * Size and color are automatically set based on button size/state.
+     * To override, specify size/color on the icon: `labelIconRight={<InfoIcon size={12} />}`
+     */
+    labelIconRight?: React.ReactNode;
     /** Custom content slot for badges, tags, or other elements */
     customContent?: React.ReactNode;
     /** Accessible label for screen readers (use for icon-only buttons) */

package/native/index.d.ts

@@ -33,11 +33,17 @@ interface ButtonProps extends ThemeOverrideProps {
     /** Alignment of the label text */
     labelAlignment?: "left" | "center";
     /**
-     * Small icon displayed directly next to the label text.
+     * Small icon displayed directly to the left of the label text.
      * Size and color are automatically set based on button size/state.
      * To override, specify size/color on the icon: `labelIcon={<InfoIcon size={12} />}`
      */
     labelIcon?: React.ReactNode;
+    /**
+     * Small icon displayed directly to the right of the label text.
+     * Size and color are automatically set based on button size/state.
+     * To override, specify size/color on the icon: `labelIconRight={<InfoIcon size={12} />}`
+     */
+    labelIconRight?: React.ReactNode;
     /** Custom content slot for badges, tags, or other elements */
     customContent?: React.ReactNode;
     /** Accessible label for screen readers (use for icon-only buttons) */

package/native/index.js

@@ -368,6 +368,7 @@ var Button = ({
   sublabel,
   labelAlignment = "center",
   labelIcon,
+  labelIconRight,
   customContent,
   "aria-label": ariaLabel,
   "aria-describedby": ariaDescribedBy,
@@ -404,14 +405,21 @@ var Button = ({
     ghost: "#000",
     disable: "#666"
   };
-  const handlePress = () => {
-    if (!isDisabled && onPress) {
+  const handlePress = (e) => {
+    if (isDisabled) {
+      e?.preventDefault();
+      return;
+    }
+    if (onPress) {
       onPress();
     }
   };
   const handleKeyDown = (e) => {
-    if (isDisabled) return;
     if (e.key === "Enter" || e.key === " ") {
+      if (isDisabled) {
+        e.preventDefault();
+        return;
+      }
       e.preventDefault();
       setIsKeyboardPressed(true);
     }
@@ -426,14 +434,23 @@ var Button = ({
       }
     }
   };
+  const brandControl = theme?.colors?.control?.brand;
+  const disabledBg = brandControl?.primary?.bgDisable ?? variantStyles.bgDisable ?? variantStyles.bg;
+  const disabledBorder = brandControl?.primary?.borderDisable ?? variantStyles.borderDisable ?? variantStyles.border;
+  const disabledText = brandControl?.text?.disable ?? textStyles.disable;
   let backgroundColor = variantStyles.bg;
   if (disabled) {
-    backgroundColor = variantStyles.bgDisable || variantStyles.bg;
+    backgroundColor = disabledBg;
   } else if (isKeyboardPressed) {
     backgroundColor = variantStyles.bgPress || variantStyles.bg;
   }
-  const borderColor = disabled ? variantStyles.borderDisable || variantStyles.border : variantStyles.border;
-  const textColor = disabled ? textStyles.disable : textStyles[variant];
+  let borderColor = variantStyles.border;
+  if (disabled) {
+    borderColor = disabledBorder;
+  } else if (isKeyboardPressed) {
+    borderColor = variantStyles.borderPress || variantStyles.border;
+  }
+  const textColor = disabled ? disabledText : textStyles[variant];
   const computedAriaLabel = ariaLabel;
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     Box,
@@ -444,7 +461,6 @@ var Button = ({
       onPress: handlePress,
       onKeyDown: handleKeyDown,
       onKeyUp: handleKeyUp,
-      disabled: isDisabled,
       "aria-label": computedAriaLabel,
       "aria-disabled": isDisabled || void 0,
       "aria-busy": loading || void 0,
@@ -466,12 +482,17 @@ var Button = ({
       justifyContent: "center",
       position: "relative",
       cursor: disabled ? "not-allowed" : loading ? "wait" : "pointer",
-      style: { transition: "background-color 500ms ease", opacity: 1 },
+      style: {
+        transition: "background-color 500ms ease, border-color 500ms ease",
+        opacity: 1
+      },
       hoverStyle: !isDisabled ? {
-        backgroundColor: variantStyles?.bgHover
+        backgroundColor: variantStyles?.bgHover,
+        borderColor: variantStyles?.borderHover
       } : void 0,
       pressStyle: !isDisabled ? {
-        backgroundColor: variantStyles?.bgPress
+        backgroundColor: variantStyles?.bgPress,
+        borderColor: variantStyles?.borderPress
       } : void 0,
       focusStyle: {
         outlineColor: theme.colors.border.brand,
@@ -537,12 +558,27 @@ var Button = ({
                 sizeStyles.labelIconSize,
                 textColor
               ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Text, { color: textColor, fontSize: sizeStyles.fontSize, fontWeight: "500", children }),
-              sublabel && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                 Text,
                 {
                   color: textColor,
                   fontSize: sizeStyles.fontSize,
+                  lineHeight: sizeStyles.lineHeight,
+                  fontWeight: "500",
+                  children
+                }
+              ),
+              labelIconRight && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Box, { "aria-hidden": true, children: cloneIconWithDefaults(
+                labelIconRight,
+                sizeStyles.labelIconSize,
+                textColor
+              ) }),
+              sublabel && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                Text,
+                {
+                  color: textColor,
+                  fontSize: sizeStyles.sublabelFontSize,
+                  lineHeight: sizeStyles.lineHeight,
                   fontWeight: "500",
                   style: { opacity: 0.4 },
                   children: sublabel
@@ -1404,7 +1440,7 @@ var ButtonGroup = ({
     }
     return processedChildren;
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Box, { flexDirection: "column", width: "100%", gap: 8, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Box, { flexDirection: "column", width: "100%", gap: 12, children: [
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       Box,
       {
@@ -1422,7 +1458,7 @@ var ButtonGroup = ({
         children: renderChildren()
       }
     ),
-    error && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Box, { marginTop: 4, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    error && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       Text,
       {
         id: errorId,
@@ -1430,17 +1466,19 @@ var ButtonGroup = ({
         "aria-live": "assertive",
         color: theme.colors.content.alert.primary,
         fontSize: 14,
+        lineHeight: 18,
         fontWeight: "400",
         style: orientation === "vertical" ? { textAlign: "center" } : void 0,
         children: error
       }
     ) }),
-    description && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Box, { marginTop: 4, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    description && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       Text,
       {
         id: descriptionId,
         color: theme.colors.content.tertiary,
         fontSize: 14,
+        lineHeight: 18,
         fontWeight: "400",
         style: orientation === "vertical" ? { textAlign: "center" } : void 0,
         children: description