@xsolla/xui-button 0.79.0 → 0.81.0

package/web/index.mjs

@@ -1,5 +1,5 @@
 // src/Button.tsx
-import { useState } from "react";
+import React3, { useState } from "react";
 
 // ../primitives-web/src/Box.tsx
 import React from "react";
@@ -458,6 +458,17 @@ TextAreaPrimitive.displayName = "TextAreaPrimitive";
 // src/Button.tsx
 import { useDesignSystem } from "@xsolla/xui-core";
 import { jsx as jsx8, jsxs } from "react/jsx-runtime";
+var cloneIconWithDefaults = (icon, defaultSize, defaultColor) => {
+  if (!React3.isValidElement(icon)) return icon;
+  const iconElement = icon;
+  const existingProps = iconElement.props || {};
+  return React3.cloneElement(iconElement, {
+    ...existingProps,
+    // Preserve existing props (including accessibility attributes)
+    size: existingProps.size ?? defaultSize,
+    color: existingProps.color ?? defaultColor
+  });
+};
 var Button = ({
   variant = "primary",
   tone = "brand",
@@ -468,6 +479,11 @@ var Button = ({
   onPress,
   iconLeft,
   iconRight,
+  divider,
+  sublabel,
+  labelAlignment = "center",
+  labelIcon,
+  customContent,
   "aria-label": ariaLabel,
   "aria-describedby": ariaDescribedBy,
   "aria-expanded": ariaExpanded,
@@ -483,9 +499,17 @@ var Button = ({
   const [isKeyboardPressed, setIsKeyboardPressed] = useState(false);
   const isDisabled = disabled || loading;
   const sizeStyles = theme.sizing.button(size);
-  const variantStyles = theme?.colors?.control?.[tone]?.[variant] || theme?.colors?.control?.brand?.primary || {
+  const controlTone = theme?.colors?.control?.[tone];
+  const variantStyles = controlTone?.[variant] || theme?.colors?.control?.brand?.primary || {
     bg: "transparent",
-    text: { primary: "#000" }
+    bgHover: "transparent",
+    bgPress: "transparent",
+    bgDisable: "transparent",
+    border: "transparent",
+    borderHover: "transparent",
+    borderPress: "transparent",
+    borderDisable: "transparent",
+    text: { primary: "#000", secondary: "#000", disable: "#666" }
   };
   const handlePress = () => {
     if (!isDisabled && onPress) {
@@ -509,17 +533,19 @@ var Button = ({
       }
     }
   };
-  const styles = variantStyles;
-  let backgroundColor = styles.bg;
+  let backgroundColor = variantStyles.bg;
   if (disabled) {
-    backgroundColor = styles.bgDisable || styles.bg;
+    backgroundColor = variantStyles.bgDisable || variantStyles.bg;
   } else if (isKeyboardPressed) {
-    backgroundColor = styles.bgPress || styles.bg;
+    backgroundColor = variantStyles.bgPress || variantStyles.bg;
   }
-  const borderColor = disabled ? styles.borderDisable || styles.border : styles.border;
-  const textColor = disabled ? styles.text?.disable || styles.text?.primary : styles.text?.primary;
-  const isDarkText = textColor === "#000000" || textColor === "black" || textColor.startsWith("rgba(0, 0, 0");
-  const dividerColor = isDarkText ? "rgba(0, 0, 0, 0.2)" : "rgba(255, 255, 255, 0.2)";
+  const borderColor = disabled ? variantStyles.borderDisable || variantStyles.border : variantStyles.border;
+  const textColor = disabled ? variantStyles.text?.disable || variantStyles.text?.primary : variantStyles.text?.primary;
+  const textColorStr = typeof textColor === "string" ? textColor : "";
+  const isDarkText = textColorStr === "#000000" || textColorStr === "black" || textColorStr.startsWith("rgba(0, 0, 0");
+  const dividerLineColor = isDarkText ? "rgba(0, 0, 0, 0.2)" : "rgba(255, 255, 255, 0.2)";
+  const hasIcon = Boolean(iconLeft || iconRight);
+  const showDivider = divider !== void 0 ? divider : hasIcon;
   const computedAriaLabel = ariaLabel;
   return /* @__PURE__ */ jsxs(
     Box,
@@ -543,7 +569,7 @@ var Button = ({
       backgroundColor,
       borderColor,
       borderWidth: borderColor !== "transparent" && borderColor !== "rgba(255, 255, 255, 0)" ? 1 : 0,
-      borderRadius: theme.radius.button,
+      borderRadius: sizeStyles.borderRadius,
       height: sizeStyles.height,
       width: fullWidth ? "100%" : void 0,
       padding: 0,
@@ -566,72 +592,110 @@ var Button = ({
         outlineStyle: "solid"
       },
       children: [
-        !loading && iconLeft && /* @__PURE__ */ jsxs(
+        loading && /* @__PURE__ */ jsx8(
+          Box,
+          {
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            alignItems: "center",
+            justifyContent: "center",
+            zIndex: 1,
+            children: /* @__PURE__ */ jsx8(
+              Spinner,
+              {
+                color: textColor,
+                size: sizeStyles.spinnerSize,
+                "aria-hidden": true
+              }
+            )
+          }
+        ),
+        iconLeft && /* @__PURE__ */ jsxs(
           Box,
           {
             height: "100%",
             flexDirection: "row",
             alignItems: "center",
-            justifyContent: "center",
             "aria-hidden": true,
+            style: {
+              opacity: loading ? 0 : 1,
+              pointerEvents: loading ? "none" : "auto"
+            },
             children: [
               /* @__PURE__ */ jsx8(
                 Box,
                 {
+                  width: sizeStyles.iconContainerSize,
+                  height: sizeStyles.iconContainerSize,
                   alignItems: "center",
                   justifyContent: "center",
-                  paddingHorizontal: sizeStyles.iconPadding,
-                  children: /* @__PURE__ */ jsx8(Icon, { size: sizeStyles.iconSize, color: textColor, children: iconLeft })
+                  children: cloneIconWithDefaults(iconLeft, sizeStyles.iconSize, textColor)
                 }
               ),
-              /* @__PURE__ */ jsx8(Divider, { vertical: true, color: dividerColor, height: "100%" })
+              showDivider && /* @__PURE__ */ jsx8(Divider, { vertical: true, color: dividerLineColor, height: "100%" })
             ]
           }
         ),
-        /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsxs(
           Box,
           {
             flex: fullWidth ? 1 : void 0,
             flexDirection: "row",
             alignItems: "center",
-            justifyContent: "center",
-            paddingHorizontal: loading ? sizeStyles.loadingPadding : sizeStyles.padding,
+            justifyContent: labelAlignment === "left" ? "flex-start" : "center",
+            paddingHorizontal: sizeStyles.padding,
             height: "100%",
-            children: loading ? /* @__PURE__ */ jsx8(
-              Spinner,
-              {
-                color: textColor,
-                size: sizeStyles.spinnerSize,
-                "aria-hidden": true
-              }
-            ) : /* @__PURE__ */ jsx8(
-              Text,
-              {
-                color: textColor,
-                fontSize: sizeStyles.fontSize,
-                fontWeight: "500",
-                children
-              }
-            )
+            gap: sizeStyles.labelIconGap,
+            style: {
+              opacity: loading ? 0 : 1,
+              pointerEvents: loading ? "none" : "auto"
+            },
+            "aria-hidden": loading ? true : void 0,
+            children: [
+              labelIcon && /* @__PURE__ */ jsx8(Box, { "aria-hidden": true, children: cloneIconWithDefaults(
+                labelIcon,
+                sizeStyles.labelIconSize,
+                textColor
+              ) }),
+              /* @__PURE__ */ jsx8(Text, { color: textColor, fontSize: sizeStyles.fontSize, fontWeight: "500", children }),
+              sublabel && /* @__PURE__ */ jsx8(
+                Text,
+                {
+                  color: textColor,
+                  fontSize: sizeStyles.fontSize,
+                  fontWeight: "500",
+                  style: { opacity: 0.4 },
+                  children: sublabel
+                }
+              ),
+              customContent && /* @__PURE__ */ jsx8(Box, { "aria-hidden": true, children: customContent })
+            ]
           }
         ),
-        !loading && iconRight && /* @__PURE__ */ jsxs(
+        iconRight && /* @__PURE__ */ jsxs(
           Box,
           {
             height: "100%",
             flexDirection: "row",
             alignItems: "center",
-            justifyContent: "center",
             "aria-hidden": true,
+            style: {
+              opacity: loading ? 0 : 1,
+              pointerEvents: loading ? "none" : "auto"
+            },
             children: [
-              /* @__PURE__ */ jsx8(Divider, { vertical: true, color: dividerColor, height: "100%" }),
+              showDivider && /* @__PURE__ */ jsx8(Divider, { vertical: true, color: dividerLineColor, height: "100%" }),
               /* @__PURE__ */ jsx8(
                 Box,
                 {
+                  width: sizeStyles.iconContainerSize,
+                  height: sizeStyles.iconContainerSize,
                   alignItems: "center",
                   justifyContent: "center",
-                  paddingHorizontal: sizeStyles.iconPadding,
-                  children: /* @__PURE__ */ jsx8(Icon, { size: sizeStyles.iconSize, color: textColor, children: iconRight })
+                  children: cloneIconWithDefaults(iconRight, sizeStyles.iconSize, textColor)
                 }
               )
             ]
@@ -644,9 +708,20 @@ var Button = ({
 Button.displayName = "Button";
 
 // src/IconButton.tsx
-import { useState as useState2 } from "react";
+import React4, { useState as useState2 } from "react";
 import { useDesignSystem as useDesignSystem2 } from "@xsolla/xui-core";
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs2 } from "react/jsx-runtime";
+var cloneIconWithDefaults2 = (icon, defaultSize, defaultColor) => {
+  if (!React4.isValidElement(icon)) return icon;
+  const iconElement = icon;
+  const existingProps = iconElement.props || {};
+  return React4.cloneElement(iconElement, {
+    ...existingProps,
+    // Preserve existing props (including accessibility attributes)
+    size: existingProps.size ?? defaultSize,
+    color: existingProps.color ?? defaultColor
+  });
+};
 var IconButton = ({
   variant = "primary",
   tone = "brand",
@@ -669,9 +744,17 @@ var IconButton = ({
   const [isKeyboardPressed, setIsKeyboardPressed] = useState2(false);
   const isDisabled = disabled || loading;
   const sizeStyles = theme.sizing.button(size);
-  const variantStyles = theme?.colors?.control?.[tone]?.[variant] || theme?.colors?.control?.brand?.primary || {
+  const controlTone = theme?.colors?.control?.[tone];
+  const variantStyles = controlTone?.[variant] || theme?.colors?.control?.brand?.primary || {
     bg: "transparent",
-    text: { primary: "#000" }
+    bgHover: "transparent",
+    bgPress: "transparent",
+    bgDisable: "transparent",
+    border: "transparent",
+    borderHover: "transparent",
+    borderPress: "transparent",
+    borderDisable: "transparent",
+    text: { primary: "#000", secondary: "#000", disable: "#666" }
   };
   const handlePress = () => {
     if (!isDisabled && onPress) {
@@ -695,16 +778,15 @@ var IconButton = ({
       }
     }
   };
-  const styles = variantStyles;
-  let backgroundColor = styles.bg;
+  let backgroundColor = variantStyles.bg;
   if (disabled) {
-    backgroundColor = styles.bgDisable || styles.bg;
+    backgroundColor = variantStyles.bgDisable || variantStyles.bg;
   } else if (isKeyboardPressed) {
-    backgroundColor = styles.bgPress || styles.bg;
+    backgroundColor = variantStyles.bgPress || variantStyles.bg;
   }
-  const borderColor = disabled ? styles.borderDisable || styles.border : styles.border;
-  const textColor = disabled ? styles.text?.disable || styles.text?.primary : styles.text?.primary;
-  return /* @__PURE__ */ jsx9(
+  const borderColor = disabled ? variantStyles.borderDisable || variantStyles.border : variantStyles.border;
+  const textColor = disabled ? variantStyles.text?.disable || variantStyles.text?.primary : variantStyles.text?.primary;
+  return /* @__PURE__ */ jsxs2(
     Box,
     {
       as: "button",
@@ -726,7 +808,7 @@ var IconButton = ({
       backgroundColor,
       borderColor,
       borderWidth: borderColor !== "transparent" && borderColor !== "rgba(255, 255, 255, 0)" ? 1 : 0,
-      borderRadius: theme.radius.button,
+      borderRadius: sizeStyles.borderRadius,
       height: sizeStyles.height,
       width: sizeStyles.height,
       padding: 0,
@@ -737,10 +819,10 @@ var IconButton = ({
       cursor: disabled ? "not-allowed" : loading ? "wait" : "pointer",
       opacity: disabled ? 0.6 : 1,
       hoverStyle: !isDisabled ? {
-        backgroundColor: styles.bgHover
+        backgroundColor: variantStyles.bgHover
       } : void 0,
       pressStyle: !isDisabled ? {
-        backgroundColor: styles.bgPress
+        backgroundColor: variantStyles.bgPress
       } : void 0,
       focusStyle: {
         outlineColor: theme.colors.border.brand,
@@ -748,14 +830,40 @@ var IconButton = ({
         outlineOffset: 2,
         outlineStyle: "solid"
       },
-      children: loading ? /* @__PURE__ */ jsx9(
-        Spinner,
-        {
-          color: textColor,
-          size: sizeStyles.spinnerSize,
-          "aria-hidden": true
-        }
-      ) : /* @__PURE__ */ jsx9(Icon, { size: sizeStyles.iconSize, color: textColor, "aria-hidden": true, children: icon })
+      children: [
+        loading && /* @__PURE__ */ jsx9(
+          Box,
+          {
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            alignItems: "center",
+            justifyContent: "center",
+            zIndex: 1,
+            children: /* @__PURE__ */ jsx9(
+              Spinner,
+              {
+                color: textColor,
+                size: sizeStyles.spinnerSize,
+                "aria-hidden": true
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx9(
+          Box,
+          {
+            "aria-hidden": true,
+            style: {
+              opacity: loading ? 0 : 1,
+              pointerEvents: loading ? "none" : "auto"
+            },
+            children: cloneIconWithDefaults2(icon, sizeStyles.iconSize, textColor)
+          }
+        )
+      ]
     }
   );
 };
@@ -764,7 +872,7 @@ IconButton.displayName = "IconButton";
 // src/FlexButton.tsx
 import { useRef, useState as useState3 } from "react";
 import { useDesignSystem as useDesignSystem3 } from "@xsolla/xui-core";
-import { Fragment, jsx as jsx10, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx10, jsxs as jsxs3 } from "react/jsx-runtime";
 var ICON_SIZES = {
   xs: 12,
   sm: 14,
@@ -1086,7 +1194,7 @@ var FlexButton = ({
       tabIndex,
       style: buttonStyle,
       "data-testid": testID || "flex-button",
-      children: /* @__PURE__ */ jsx10("span", { style: contentStyle, children: loading ? /* @__PURE__ */ jsx10("span", { style: spinnerStyle, children: /* @__PURE__ */ jsx10(Spinner, { size: spinnerSize, color: spinnerColor }) }) : /* @__PURE__ */ jsxs2(Fragment, { children: [
+      children: /* @__PURE__ */ jsx10("span", { style: contentStyle, children: loading ? /* @__PURE__ */ jsx10("span", { style: spinnerStyle, children: /* @__PURE__ */ jsx10(Spinner, { size: spinnerSize, color: spinnerColor }) }) : /* @__PURE__ */ jsxs3(Fragment, { children: [
         iconLeft && /* @__PURE__ */ jsx10(Icon, { size: iconSize, color: colors.text, children: iconLeft }),
         /* @__PURE__ */ jsx10("span", { children }),
         iconRight && /* @__PURE__ */ jsx10(Icon, { size: iconSize, color: colors.text, children: iconRight })
@@ -1099,7 +1207,7 @@ FlexButton.displayName = "FlexButton";
 // src/ButtonGroup.tsx
 import React5 from "react";
 import { useDesignSystem as useDesignSystem4 } from "@xsolla/xui-core";
-import { Fragment as Fragment2, jsx as jsx11, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx11, jsxs as jsxs4 } from "react/jsx-runtime";
 var ButtonGroup = ({
   orientation = "horizontal",
   size = "md",
@@ -1148,7 +1256,7 @@ var ButtonGroup = ({
   const computedAriaDescribedBy = [
     ariaDescribedBy,
     error && errorId ? errorId : void 0,
-    description && !error && descriptionId ? descriptionId : void 0
+    description && descriptionId ? descriptionId : void 0
   ].filter(Boolean).join(" ") || void 0;
   const processChildren = (childrenToProcess) => {
     if (orientation === "vertical") {
@@ -1170,7 +1278,7 @@ var ButtonGroup = ({
     if (useSpaceBetween) {
       const firstChild = processedChildren[0];
       const restChildren = processedChildren.slice(1);
-      return /* @__PURE__ */ jsxs3(Fragment2, { children: [
+      return /* @__PURE__ */ jsxs4(Fragment2, { children: [
         firstChild,
         /* @__PURE__ */ jsx11(Box, { flexDirection: "row", gap: computedGap, children: restChildren })
       ] });
@@ -1180,7 +1288,7 @@ var ButtonGroup = ({
     }
     return children;
   };
-  return /* @__PURE__ */ jsxs3(Box, { flexDirection: "column", width: "100%", gap: 8, children: [
+  return /* @__PURE__ */ jsxs4(Box, { flexDirection: "column", width: "100%", gap: 8, children: [
     /* @__PURE__ */ jsx11(
       Box,
       {
@@ -1211,7 +1319,7 @@ var ButtonGroup = ({
         children: error
       }
     ) }),
-    description && !error && /* @__PURE__ */ jsx11(Box, { marginTop: 4, children: /* @__PURE__ */ jsx11(
+    description && /* @__PURE__ */ jsx11(Box, { marginTop: 4, children: /* @__PURE__ */ jsx11(
       Text,
       {
         id: descriptionId,