@xsolla/xui-button 0.101.0 → 0.102.0

package/native/index.d.mts

@@ -27,8 +27,6 @@ interface ButtonProps {
      * 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 */

package/native/index.d.ts

@@ -27,8 +27,6 @@ interface ButtonProps {
      * 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 */

package/native/index.js

@@ -296,33 +296,9 @@ var Icon = ({ children, color, size }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.View, { style, children: childrenWithProps });
 };
 
-// ../primitives-native/src/Divider.tsx
-var import_react_native5 = require("react-native");
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var Divider = ({
-  color,
-  height,
-  width,
-  vertical,
-  dashStroke
-}) => {
-  const style = {
-    backgroundColor: dashStroke ? "transparent" : color || "rgba(255, 255, 255, 0.15)",
-    width: vertical ? typeof width === "number" ? width : 1 : "100%",
-    height: vertical ? "100%" : typeof height === "number" ? height : 1,
-    ...dashStroke && {
-      borderStyle: "dashed",
-      borderColor: color || "rgba(255, 255, 255, 0.15)",
-      borderWidth: 0,
-      ...vertical ? { borderLeftWidth: typeof width === "number" ? width : 1 } : { borderTopWidth: typeof height === "number" ? height : 1 }
-    }
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native5.View, { style });
-};
-
 // src/Button.tsx
 var import_xui_core = require("@xsolla/xui-core");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var cloneIconWithDefaults = (icon, defaultSize, defaultColor) => {
   if (!import_react2.default.isValidElement(icon)) return icon;
   const iconElement = icon;
@@ -344,7 +320,6 @@ var Button = ({
   onPress,
   iconLeft,
   iconRight,
-  divider,
   sublabel,
   labelAlignment = "center",
   labelIcon,
@@ -373,8 +348,13 @@ var Button = ({
     border: "transparent",
     borderHover: "transparent",
     borderPress: "transparent",
-    borderDisable: "transparent",
-    text: { primary: "#000", secondary: "#000", disable: "#666" }
+    borderDisable: "transparent"
+  };
+  const textStyles = controlTone?.text || theme?.colors?.control?.brand?.text || {
+    primary: "#000",
+    secondary: "#fff",
+    tertiary: "#888",
+    disable: "#666"
   };
   const handlePress = () => {
     if (!isDisabled && onPress) {
@@ -405,14 +385,9 @@ var Button = ({
     backgroundColor = variantStyles.bgPress || variantStyles.bg;
   }
   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 textColor = disabled ? textStyles.disable : textStyles[variant];
   const computedAriaLabel = ariaLabel;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     Box,
     {
       as: "button",
@@ -457,7 +432,7 @@ var Button = ({
         outlineStyle: "solid"
       },
       children: [
-        loading && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        loading && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           Box,
           {
             position: "absolute",
@@ -468,7 +443,7 @@ var Button = ({
             alignItems: "center",
             justifyContent: "center",
             zIndex: 1,
-            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
               Spinner,
               {
                 color: textColor,
@@ -478,33 +453,22 @@ var Button = ({
             )
           }
         ),
-        iconLeft && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+        iconLeft && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           Box,
           {
-            height: "100%",
-            flexDirection: "row",
+            width: sizeStyles.iconContainerSize,
+            height: sizeStyles.iconContainerSize,
             alignItems: "center",
+            justifyContent: "center",
             "aria-hidden": true,
             style: {
               opacity: loading ? 0 : 1,
               pointerEvents: loading ? "none" : "auto"
             },
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-                Box,
-                {
-                  width: sizeStyles.iconContainerSize,
-                  height: sizeStyles.iconContainerSize,
-                  alignItems: "center",
-                  justifyContent: "center",
-                  children: cloneIconWithDefaults(iconLeft, sizeStyles.iconSize, textColor)
-                }
-              ),
-              showDivider && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Divider, { vertical: true, color: dividerLineColor, height: "100%" })
-            ]
+            children: cloneIconWithDefaults(iconLeft, sizeStyles.iconSize, textColor)
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
           Box,
           {
             flex: fullWidth ? 1 : void 0,
@@ -520,13 +484,13 @@ var Button = ({
             },
             "aria-hidden": loading ? true : void 0,
             children: [
-              labelIcon && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Box, { "aria-hidden": true, children: cloneIconWithDefaults(
+              labelIcon && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Box, { "aria-hidden": true, children: cloneIconWithDefaults(
                 labelIcon,
                 sizeStyles.labelIconSize,
                 textColor
               ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text, { color: textColor, fontSize: sizeStyles.fontSize, fontWeight: "500", children }),
-              sublabel && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Text, { color: textColor, fontSize: sizeStyles.fontSize, fontWeight: "500", children }),
+              sublabel && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                 Text,
                 {
                   color: textColor,
@@ -536,34 +500,23 @@ var Button = ({
                   children: sublabel
                 }
               ),
-              customContent && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Box, { "aria-hidden": true, children: customContent })
+              customContent && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Box, { "aria-hidden": true, children: customContent })
             ]
           }
         ),
-        iconRight && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+        iconRight && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           Box,
           {
-            height: "100%",
-            flexDirection: "row",
+            width: sizeStyles.iconContainerSize,
+            height: sizeStyles.iconContainerSize,
             alignItems: "center",
+            justifyContent: "center",
             "aria-hidden": true,
             style: {
               opacity: loading ? 0 : 1,
               pointerEvents: loading ? "none" : "auto"
             },
-            children: [
-              showDivider && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Divider, { vertical: true, color: dividerLineColor, height: "100%" }),
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-                Box,
-                {
-                  width: sizeStyles.iconContainerSize,
-                  height: sizeStyles.iconContainerSize,
-                  alignItems: "center",
-                  justifyContent: "center",
-                  children: cloneIconWithDefaults(iconRight, sizeStyles.iconSize, textColor)
-                }
-              )
-            ]
+            children: cloneIconWithDefaults(iconRight, sizeStyles.iconSize, textColor)
           }
         )
       ]
@@ -575,7 +528,7 @@ Button.displayName = "Button";
 // src/IconButton.tsx
 var import_react3 = __toESM(require("react"));
 var import_xui_core2 = require("@xsolla/xui-core");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var cloneIconWithDefaults2 = (icon, defaultSize, defaultColor) => {
   if (!import_react3.default.isValidElement(icon)) return icon;
   const iconElement = icon;
@@ -651,7 +604,7 @@ var IconButton = ({
   }
   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_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     Box,
     {
       as: "button",
@@ -696,7 +649,7 @@ var IconButton = ({
         outlineStyle: "solid"
       },
       children: [
-        loading && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        loading && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           Box,
           {
             position: "absolute",
@@ -707,7 +660,7 @@ var IconButton = ({
             alignItems: "center",
             justifyContent: "center",
             zIndex: 1,
-            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
               Spinner,
               {
                 color: textColor,
@@ -717,7 +670,7 @@ var IconButton = ({
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           Box,
           {
             "aria-hidden": true,
@@ -737,7 +690,7 @@ IconButton.displayName = "IconButton";
 // src/FlexButton.tsx
 var import_react4 = require("react");
 var import_xui_core3 = require("@xsolla/xui-core");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var ICON_SIZES = {
   xs: 12,
   sm: 14,
@@ -1032,7 +985,7 @@ var FlexButton = ({
     height: lineHeight
   };
   const computedAriaLabel = ariaLabel || (typeof children === "string" ? children : void 0);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "button",
     {
       ...buttonProps,
@@ -1059,10 +1012,10 @@ var FlexButton = ({
       tabIndex,
       style: buttonStyle,
       "data-testid": testID || "flex-button",
-      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: contentStyle, children: loading ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: spinnerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Spinner, { size: spinnerSize, color: spinnerColor }) }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-        iconLeft && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { size: iconSize, color: colors.text, children: iconLeft }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children }),
-        iconRight && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { size: iconSize, color: colors.text, children: iconRight })
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: contentStyle, children: loading ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: spinnerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Spinner, { size: spinnerSize, color: spinnerColor }) }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+        iconLeft && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { size: iconSize, color: colors.text, children: iconLeft }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children }),
+        iconRight && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { size: iconSize, color: colors.text, children: iconRight })
       ] }) })
     }
   );
@@ -1072,7 +1025,7 @@ FlexButton.displayName = "FlexButton";
 // src/ButtonGroup.tsx
 var import_react5 = __toESM(require("react"));
 var import_xui_core4 = require("@xsolla/xui-core");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var ButtonGroup = ({
   orientation = "horizontal",
   size = "md",
@@ -1143,9 +1096,9 @@ var ButtonGroup = ({
     if (useSpaceBetween) {
       const firstChild = processedChildren[0];
       const restChildren = processedChildren.slice(1);
-      return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
         firstChild,
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Box, { flexDirection: "row", gap: computedGap, children: restChildren })
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box, { flexDirection: "row", gap: computedGap, children: restChildren })
       ] });
     }
     if (orientation === "vertical") {
@@ -1153,8 +1106,8 @@ var ButtonGroup = ({
     }
     return children;
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Box, { flexDirection: "column", width: "100%", gap: 8, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Box, { flexDirection: "column", width: "100%", gap: 8, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       Box,
       {
         role: "group",
@@ -1171,7 +1124,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_runtime8.jsx)(Box, { marginTop: 4, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       Text,
       {
         id: errorId,
@@ -1184,7 +1137,7 @@ var ButtonGroup = ({
         children: error
       }
     ) }),
-    description && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Box, { marginTop: 4, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    description && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box, { marginTop: 4, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       Text,
       {
         id: descriptionId,

package/native/index.js.flow

@@ -56,11 +56,6 @@ declare interface ButtonProps {
    */
   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
    */