@xsolla/xui-button 0.79.0 → 0.80.0

package/web/index.js

@@ -38,7 +38,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/Button.tsx
-var import_react4 = require("react");
+var import_react4 = __toESM(require("react"));
 
 // ../primitives-web/src/Box.tsx
 var import_react = __toESM(require("react"));
@@ -497,6 +497,17 @@ TextAreaPrimitive.displayName = "TextAreaPrimitive";
 // src/Button.tsx
 var import_xui_core = require("@xsolla/xui-core");
 var import_jsx_runtime8 = require("react/jsx-runtime");
+var cloneIconWithDefaults = (icon, defaultSize, defaultColor) => {
+  if (!import_react4.default.isValidElement(icon)) return icon;
+  const iconElement = icon;
+  const existingProps = iconElement.props || {};
+  return import_react4.default.cloneElement(iconElement, {
+    ...existingProps,
+    // Preserve existing props (including accessibility attributes)
+    size: existingProps.size ?? defaultSize,
+    color: existingProps.color ?? defaultColor
+  });
+};
 var Button = ({
   variant = "primary",
   tone = "brand",
@@ -507,6 +518,11 @@ var Button = ({
   onPress,
   iconLeft,
   iconRight,
+  divider,
+  sublabel,
+  labelAlignment = "center",
+  labelIcon,
+  customContent,
   "aria-label": ariaLabel,
   "aria-describedby": ariaDescribedBy,
   "aria-expanded": ariaExpanded,
@@ -522,9 +538,17 @@ var Button = ({
   const [isKeyboardPressed, setIsKeyboardPressed] = (0, import_react4.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) {
@@ -548,17 +572,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__ */ (0, import_jsx_runtime8.jsxs)(
     Box,
@@ -582,7 +608,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,
@@ -605,72 +631,110 @@ var Button = ({
         outlineStyle: "solid"
       },
       children: [
-        !loading && iconLeft && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+        loading && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          Box,
+          {
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            alignItems: "center",
+            justifyContent: "center",
+            zIndex: 1,
+            children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              Spinner,
+              {
+                color: textColor,
+                size: sizeStyles.spinnerSize,
+                "aria-hidden": true
+              }
+            )
+          }
+        ),
+        iconLeft && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
           Box,
           {
             height: "100%",
             flexDirection: "row",
             alignItems: "center",
-            justifyContent: "center",
             "aria-hidden": true,
+            style: {
+              opacity: loading ? 0 : 1,
+              pointerEvents: loading ? "none" : "auto"
+            },
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                 Box,
                 {
+                  width: sizeStyles.iconContainerSize,
+                  height: sizeStyles.iconContainerSize,
                   alignItems: "center",
                   justifyContent: "center",
-                  paddingHorizontal: sizeStyles.iconPadding,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { size: sizeStyles.iconSize, color: textColor, children: iconLeft })
+                  children: cloneIconWithDefaults(iconLeft, sizeStyles.iconSize, textColor)
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Divider, { vertical: true, color: dividerColor, height: "100%" })
+              showDivider && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Divider, { vertical: true, color: dividerLineColor, height: "100%" })
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime8.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__ */ (0, import_jsx_runtime8.jsx)(
-              Spinner,
-              {
-                color: textColor,
-                size: sizeStyles.spinnerSize,
-                "aria-hidden": true
-              }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-              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__ */ (0, import_jsx_runtime8.jsx)(Box, { "aria-hidden": true, children: cloneIconWithDefaults(
+                labelIcon,
+                sizeStyles.labelIconSize,
+                textColor
+              ) }),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { color: textColor, fontSize: sizeStyles.fontSize, fontWeight: "500", children }),
+              sublabel && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                Text,
+                {
+                  color: textColor,
+                  fontSize: sizeStyles.fontSize,
+                  fontWeight: "500",
+                  style: { opacity: 0.4 },
+                  children: sublabel
+                }
+              ),
+              customContent && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box, { "aria-hidden": true, children: customContent })
+            ]
           }
         ),
-        !loading && iconRight && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+        iconRight && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
           Box,
           {
             height: "100%",
             flexDirection: "row",
             alignItems: "center",
-            justifyContent: "center",
             "aria-hidden": true,
+            style: {
+              opacity: loading ? 0 : 1,
+              pointerEvents: loading ? "none" : "auto"
+            },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Divider, { vertical: true, color: dividerColor, height: "100%" }),
+              showDivider && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Divider, { vertical: true, color: dividerLineColor, height: "100%" }),
               /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                 Box,
                 {
+                  width: sizeStyles.iconContainerSize,
+                  height: sizeStyles.iconContainerSize,
                   alignItems: "center",
                   justifyContent: "center",
-                  paddingHorizontal: sizeStyles.iconPadding,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { size: sizeStyles.iconSize, color: textColor, children: iconRight })
+                  children: cloneIconWithDefaults(iconRight, sizeStyles.iconSize, textColor)
                 }
               )
             ]
@@ -683,9 +747,20 @@ var Button = ({
 Button.displayName = "Button";
 
 // src/IconButton.tsx
-var import_react5 = require("react");
+var import_react5 = __toESM(require("react"));
 var import_xui_core2 = require("@xsolla/xui-core");
 var import_jsx_runtime9 = require("react/jsx-runtime");
+var cloneIconWithDefaults2 = (icon, defaultSize, defaultColor) => {
+  if (!import_react5.default.isValidElement(icon)) return icon;
+  const iconElement = icon;
+  const existingProps = iconElement.props || {};
+  return import_react5.default.cloneElement(iconElement, {
+    ...existingProps,
+    // Preserve existing props (including accessibility attributes)
+    size: existingProps.size ?? defaultSize,
+    color: existingProps.color ?? defaultColor
+  });
+};
 var IconButton = ({
   variant = "primary",
   tone = "brand",
@@ -708,9 +783,17 @@ var IconButton = ({
   const [isKeyboardPressed, setIsKeyboardPressed] = (0, import_react5.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) {
@@ -734,16 +817,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__ */ (0, import_jsx_runtime9.jsx)(
+  const borderColor = disabled ? variantStyles.borderDisable || variantStyles.border : variantStyles.border;
+  const textColor = disabled ? variantStyles.text?.disable || variantStyles.text?.primary : variantStyles.text?.primary;
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     Box,
     {
       as: "button",
@@ -765,7 +847,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,
@@ -776,10 +858,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,
@@ -787,14 +869,40 @@ var IconButton = ({
         outlineOffset: 2,
         outlineStyle: "solid"
       },
-      children: loading ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-        Spinner,
-        {
-          color: textColor,
-          size: sizeStyles.spinnerSize,
-          "aria-hidden": true
-        }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon, { size: sizeStyles.iconSize, color: textColor, "aria-hidden": true, children: icon })
+      children: [
+        loading && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          Box,
+          {
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            alignItems: "center",
+            justifyContent: "center",
+            zIndex: 1,
+            children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              Spinner,
+              {
+                color: textColor,
+                size: sizeStyles.spinnerSize,
+                "aria-hidden": true
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          Box,
+          {
+            "aria-hidden": true,
+            style: {
+              opacity: loading ? 0 : 1,
+              pointerEvents: loading ? "none" : "auto"
+            },
+            children: cloneIconWithDefaults2(icon, sizeStyles.iconSize, textColor)
+          }
+        )
+      ]
     }
   );
 };
@@ -1187,7 +1295,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") {
@@ -1250,7 +1358,7 @@ var ButtonGroup = ({
         children: error
       }
     ) }),
-    description && !error && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { marginTop: 4, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    description && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { marginTop: 4, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       Text,
       {
         id: descriptionId,

package/web/index.js.flow

@@ -10,7 +10,7 @@ declare interface ButtonProps {
   /**
    * Visual variant of the button
    */
-  variant?: "primary" | "secondary";
+  variant?: "primary" | "secondary" | "tertiary";
 
   /**
    * Color tone of the button
@@ -43,15 +43,46 @@ declare interface ButtonProps {
   onPress?: () => void;
 
   /**
-   * Icon to display on the left side
+   * Icon to display on the left side.
+   * Size and color are automatically set based on button size/state.
+   * To override, specify size/color on the icon: `iconLeft={<ArrowLeft size={16} />}`
    */
   iconLeft?: React.ReactNode;
 
   /**
-   * Icon to display on the right side
+   * Icon to display on the right side.
+   * Size and color are automatically set based on button size/state.
+   * To override, specify size/color on the icon: `iconRight={<ArrowRight size={16} />}`
    */
   iconRight?: React.ReactNode;
 
+  /**
+   * Show/hide vertical divider between icon and content (default: true when icon present)
+   */
+  divider?: boolean;
+
+  /**
+   * Secondary text displayed inline with the main label (e.g., price), shown with 40% opacity
+   */
+  sublabel?: string;
+
+  /**
+   * Alignment of the label text
+   */
+  labelAlignment?: "left" | "center";
+
+  /**
+   * Small icon displayed directly next to 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;
+
+  /**
+   * Custom content slot for badges, tags, or other elements
+   */
+  customContent?: React.ReactNode;
+
   /**
    * Accessible label for screen readers (use for icon-only buttons)
    */
@@ -98,7 +129,7 @@ declare interface ButtonProps {
   type?: "button" | "submit" | "reset";
 
   /**
-   * Whether the button should take up the full width of its container
+   * Whether the button should stretch to fill the full width of its container
    */
   fullWidth?: boolean;
 }
@@ -121,7 +152,7 @@ declare interface IconButtonProps {
   /**
    * Visual variant of the button
    */
-  variant?: "primary" | "secondary";
+  variant?: "primary" | "secondary" | "tertiary";
 
   /**
    * Color tone of the button
@@ -144,7 +175,9 @@ declare interface IconButtonProps {
   loading?: boolean;
 
   /**
-   * Icon to display in the button (required)
+   * Icon to display in the button (required).
+   * Size and color are automatically set based on button size/state.
+   * To override, specify size/color on the icon: `icon={<CloseIcon size={16} />}`
    */
   icon: React.ReactNode;