@xsolla/xui-button 0.101.0 → 0.102.0

package/native/index.mjs

@@ -261,33 +261,9 @@ var Icon = ({ children, color, size }) => {
   return /* @__PURE__ */ jsx4(View3, { style, children: childrenWithProps });
 };
 
-// ../primitives-native/src/Divider.tsx
-import { View as View4 } from "react-native";
-import { jsx as jsx5 } from "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__ */ jsx5(View4, { style });
-};
-
 // src/Button.tsx
 import { useDesignSystem } from "@xsolla/xui-core";
-import { jsx as jsx6, jsxs } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs } from "react/jsx-runtime";
 var cloneIconWithDefaults = (icon, defaultSize, defaultColor) => {
   if (!React2.isValidElement(icon)) return icon;
   const iconElement = icon;
@@ -309,7 +285,6 @@ var Button = ({
   onPress,
   iconLeft,
   iconRight,
-  divider,
   sublabel,
   labelAlignment = "center",
   labelIcon,
@@ -338,8 +313,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) {
@@ -370,12 +350,7 @@ 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__ */ jsxs(
     Box,
@@ -422,7 +397,7 @@ var Button = ({
         outlineStyle: "solid"
       },
       children: [
-        loading && /* @__PURE__ */ jsx6(
+        loading && /* @__PURE__ */ jsx5(
           Box,
           {
             position: "absolute",
@@ -433,7 +408,7 @@ var Button = ({
             alignItems: "center",
             justifyContent: "center",
             zIndex: 1,
-            children: /* @__PURE__ */ jsx6(
+            children: /* @__PURE__ */ jsx5(
               Spinner,
               {
                 color: textColor,
@@ -443,30 +418,19 @@ var Button = ({
             )
           }
         ),
-        iconLeft && /* @__PURE__ */ jsxs(
+        iconLeft && /* @__PURE__ */ jsx5(
           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__ */ jsx6(
-                Box,
-                {
-                  width: sizeStyles.iconContainerSize,
-                  height: sizeStyles.iconContainerSize,
-                  alignItems: "center",
-                  justifyContent: "center",
-                  children: cloneIconWithDefaults(iconLeft, sizeStyles.iconSize, textColor)
-                }
-              ),
-              showDivider && /* @__PURE__ */ jsx6(Divider, { vertical: true, color: dividerLineColor, height: "100%" })
-            ]
+            children: cloneIconWithDefaults(iconLeft, sizeStyles.iconSize, textColor)
           }
         ),
         /* @__PURE__ */ jsxs(
@@ -485,13 +449,13 @@ var Button = ({
             },
             "aria-hidden": loading ? true : void 0,
             children: [
-              labelIcon && /* @__PURE__ */ jsx6(Box, { "aria-hidden": true, children: cloneIconWithDefaults(
+              labelIcon && /* @__PURE__ */ jsx5(Box, { "aria-hidden": true, children: cloneIconWithDefaults(
                 labelIcon,
                 sizeStyles.labelIconSize,
                 textColor
               ) }),
-              /* @__PURE__ */ jsx6(Text, { color: textColor, fontSize: sizeStyles.fontSize, fontWeight: "500", children }),
-              sublabel && /* @__PURE__ */ jsx6(
+              /* @__PURE__ */ jsx5(Text, { color: textColor, fontSize: sizeStyles.fontSize, fontWeight: "500", children }),
+              sublabel && /* @__PURE__ */ jsx5(
                 Text,
                 {
                   color: textColor,
@@ -501,34 +465,23 @@ var Button = ({
                   children: sublabel
                 }
               ),
-              customContent && /* @__PURE__ */ jsx6(Box, { "aria-hidden": true, children: customContent })
+              customContent && /* @__PURE__ */ jsx5(Box, { "aria-hidden": true, children: customContent })
             ]
           }
         ),
-        iconRight && /* @__PURE__ */ jsxs(
+        iconRight && /* @__PURE__ */ jsx5(
           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__ */ jsx6(Divider, { vertical: true, color: dividerLineColor, height: "100%" }),
-              /* @__PURE__ */ jsx6(
-                Box,
-                {
-                  width: sizeStyles.iconContainerSize,
-                  height: sizeStyles.iconContainerSize,
-                  alignItems: "center",
-                  justifyContent: "center",
-                  children: cloneIconWithDefaults(iconRight, sizeStyles.iconSize, textColor)
-                }
-              )
-            ]
+            children: cloneIconWithDefaults(iconRight, sizeStyles.iconSize, textColor)
           }
         )
       ]
@@ -540,7 +493,7 @@ Button.displayName = "Button";
 // src/IconButton.tsx
 import React3, { useState as useState2 } from "react";
 import { useDesignSystem as useDesignSystem2 } from "@xsolla/xui-core";
-import { jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
 var cloneIconWithDefaults2 = (icon, defaultSize, defaultColor) => {
   if (!React3.isValidElement(icon)) return icon;
   const iconElement = icon;
@@ -661,7 +614,7 @@ var IconButton = ({
         outlineStyle: "solid"
       },
       children: [
-        loading && /* @__PURE__ */ jsx7(
+        loading && /* @__PURE__ */ jsx6(
           Box,
           {
             position: "absolute",
@@ -672,7 +625,7 @@ var IconButton = ({
             alignItems: "center",
             justifyContent: "center",
             zIndex: 1,
-            children: /* @__PURE__ */ jsx7(
+            children: /* @__PURE__ */ jsx6(
               Spinner,
               {
                 color: textColor,
@@ -682,7 +635,7 @@ var IconButton = ({
             )
           }
         ),
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx6(
           Box,
           {
             "aria-hidden": true,
@@ -705,7 +658,7 @@ import {
   useState as useState3
 } from "react";
 import { useDesignSystem as useDesignSystem3 } from "@xsolla/xui-core";
-import { Fragment, jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
 var ICON_SIZES = {
   xs: 12,
   sm: 14,
@@ -1000,7 +953,7 @@ var FlexButton = ({
     height: lineHeight
   };
   const computedAriaLabel = ariaLabel || (typeof children === "string" ? children : void 0);
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx7(
     "button",
     {
       ...buttonProps,
@@ -1027,10 +980,10 @@ var FlexButton = ({
       tabIndex,
       style: buttonStyle,
       "data-testid": testID || "flex-button",
-      children: /* @__PURE__ */ jsx8("span", { style: contentStyle, children: loading ? /* @__PURE__ */ jsx8("span", { style: spinnerStyle, children: /* @__PURE__ */ jsx8(Spinner, { size: spinnerSize, color: spinnerColor }) }) : /* @__PURE__ */ jsxs3(Fragment, { children: [
-        iconLeft && /* @__PURE__ */ jsx8(Icon, { size: iconSize, color: colors.text, children: iconLeft }),
-        /* @__PURE__ */ jsx8("span", { children }),
-        iconRight && /* @__PURE__ */ jsx8(Icon, { size: iconSize, color: colors.text, children: iconRight })
+      children: /* @__PURE__ */ jsx7("span", { style: contentStyle, children: loading ? /* @__PURE__ */ jsx7("span", { style: spinnerStyle, children: /* @__PURE__ */ jsx7(Spinner, { size: spinnerSize, color: spinnerColor }) }) : /* @__PURE__ */ jsxs3(Fragment, { children: [
+        iconLeft && /* @__PURE__ */ jsx7(Icon, { size: iconSize, color: colors.text, children: iconLeft }),
+        /* @__PURE__ */ jsx7("span", { children }),
+        iconRight && /* @__PURE__ */ jsx7(Icon, { size: iconSize, color: colors.text, children: iconRight })
       ] }) })
     }
   );
@@ -1040,7 +993,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 jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
 var ButtonGroup = ({
   orientation = "horizontal",
   size = "md",
@@ -1113,7 +1066,7 @@ var ButtonGroup = ({
       const restChildren = processedChildren.slice(1);
       return /* @__PURE__ */ jsxs4(Fragment2, { children: [
         firstChild,
-        /* @__PURE__ */ jsx9(Box, { flexDirection: "row", gap: computedGap, children: restChildren })
+        /* @__PURE__ */ jsx8(Box, { flexDirection: "row", gap: computedGap, children: restChildren })
       ] });
     }
     if (orientation === "vertical") {
@@ -1122,7 +1075,7 @@ var ButtonGroup = ({
     return children;
   };
   return /* @__PURE__ */ jsxs4(Box, { flexDirection: "column", width: "100%", gap: 8, children: [
-    /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsx8(
       Box,
       {
         role: "group",
@@ -1139,7 +1092,7 @@ var ButtonGroup = ({
         children: renderChildren()
       }
     ),
-    error && /* @__PURE__ */ jsx9(Box, { marginTop: 4, children: /* @__PURE__ */ jsx9(
+    error && /* @__PURE__ */ jsx8(Box, { marginTop: 4, children: /* @__PURE__ */ jsx8(
       Text,
       {
         id: errorId,
@@ -1152,7 +1105,7 @@ var ButtonGroup = ({
         children: error
       }
     ) }),
-    description && /* @__PURE__ */ jsx9(Box, { marginTop: 4, children: /* @__PURE__ */ jsx9(
+    description && /* @__PURE__ */ jsx8(Box, { marginTop: 4, children: /* @__PURE__ */ jsx8(
       Text,
       {
         id: descriptionId,