@xsolla/xui-button 0.101.0 → 0.102.0

package/web/index.js

@@ -307,34 +307,9 @@ var Icon = ({ children, ...props }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(StyledIcon, { ...props, children });
 };
 
-// ../primitives-web/src/Divider.tsx
-var import_styled_components5 = __toESM(require("styled-components"));
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var StyledDivider = import_styled_components5.default.div`
-  background-color: ${(props) => props.dashStroke ? "transparent" : props.color || "rgba(255, 255, 255, 0.15)"};
-  width: ${(props) => props.vertical ? typeof props.width === "number" ? `${props.width}px` : props.width || "1px" : "100%"};
-  height: ${(props) => props.vertical ? "100%" : typeof props.height === "number" ? `${props.height}px` : props.height || "1px"};
-
-  ${(props) => props.dashStroke && `
-    border-style: dashed;
-    border-color: ${props.color || "rgba(255, 255, 255, 0.15)"};
-    border-width: 0;
-    ${props.vertical ? `
-      border-left-width: ${typeof props.width === "number" ? `${props.width}px` : props.width || "1px"};
-      height: 100%;
-    ` : `
-      border-top-width: ${typeof props.height === "number" ? `${props.height}px` : props.height || "1px"};
-      width: 100%;
-    `}
-  `}
-`;
-var Divider = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StyledDivider, { ...props });
-};
-
 // 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;
@@ -356,7 +331,6 @@ var Button = ({
   onPress,
   iconLeft,
   iconRight,
-  divider,
   sublabel,
   labelAlignment = "center",
   labelIcon,
@@ -385,8 +359,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) {
@@ -417,14 +396,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",
@@ -469,7 +443,7 @@ var Button = ({
         outlineStyle: "solid"
       },
       children: [
-        loading && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        loading && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           Box,
           {
             position: "absolute",
@@ -480,7 +454,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,
@@ -490,33 +464,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,
@@ -532,13 +495,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,
@@ -548,34 +511,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)
           }
         )
       ]
@@ -587,7 +539,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;
@@ -663,7 +615,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",
@@ -708,7 +660,7 @@ var IconButton = ({
         outlineStyle: "solid"
       },
       children: [
-        loading && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        loading && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           Box,
           {
             position: "absolute",
@@ -719,7 +671,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,
@@ -729,7 +681,7 @@ var IconButton = ({
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           Box,
           {
             "aria-hidden": true,
@@ -749,7 +701,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,
@@ -1044,7 +996,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,
@@ -1071,10 +1023,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 })
       ] }) })
     }
   );
@@ -1084,7 +1036,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",
@@ -1155,9 +1107,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") {
@@ -1165,8 +1117,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",
@@ -1183,7 +1135,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,
@@ -1196,7 +1148,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/web/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
    */