@xsolla/xui-button 0.100.0 → 0.101.0-pr167.1772008285

package/web/index.mjs

@@ -268,34 +268,9 @@ var Icon = ({ children, ...props }) => {
   return /* @__PURE__ */ jsx4(StyledIcon, { ...props, children });
 };
 
-// ../primitives-web/src/Divider.tsx
-import styled5 from "styled-components";
-import { jsx as jsx5 } from "react/jsx-runtime";
-var StyledDivider = styled5.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__ */ jsx5(StyledDivider, { ...props });
-};
-
 // 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;
@@ -317,7 +292,6 @@ var Button = ({
   onPress,
   iconLeft,
   iconRight,
-  divider,
   sublabel,
   labelAlignment = "center",
   labelIcon,
@@ -346,8 +320,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) {
@@ -378,12 +357,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,
@@ -430,7 +404,7 @@ var Button = ({
         outlineStyle: "solid"
       },
       children: [
-        loading && /* @__PURE__ */ jsx6(
+        loading && /* @__PURE__ */ jsx5(
           Box,
           {
             position: "absolute",
@@ -441,7 +415,7 @@ var Button = ({
             alignItems: "center",
             justifyContent: "center",
             zIndex: 1,
-            children: /* @__PURE__ */ jsx6(
+            children: /* @__PURE__ */ jsx5(
               Spinner,
               {
                 color: textColor,
@@ -451,30 +425,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(
@@ -493,13 +456,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,
@@ -509,34 +472,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)
           }
         )
       ]
@@ -548,7 +500,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;
@@ -669,7 +621,7 @@ var IconButton = ({
         outlineStyle: "solid"
       },
       children: [
-        loading && /* @__PURE__ */ jsx7(
+        loading && /* @__PURE__ */ jsx6(
           Box,
           {
             position: "absolute",
@@ -680,7 +632,7 @@ var IconButton = ({
             alignItems: "center",
             justifyContent: "center",
             zIndex: 1,
-            children: /* @__PURE__ */ jsx7(
+            children: /* @__PURE__ */ jsx6(
               Spinner,
               {
                 color: textColor,
@@ -690,7 +642,7 @@ var IconButton = ({
             )
           }
         ),
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx6(
           Box,
           {
             "aria-hidden": true,
@@ -713,7 +665,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,
@@ -1008,7 +960,7 @@ var FlexButton = ({
     height: lineHeight
   };
   const computedAriaLabel = ariaLabel || (typeof children === "string" ? children : void 0);
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx7(
     "button",
     {
       ...buttonProps,
@@ -1035,10 +987,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 })
       ] }) })
     }
   );
@@ -1048,7 +1000,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",
@@ -1121,7 +1073,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") {
@@ -1130,7 +1082,7 @@ var ButtonGroup = ({
     return children;
   };
   return /* @__PURE__ */ jsxs4(Box, { flexDirection: "column", width: "100%", gap: 8, children: [
-    /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsx8(
       Box,
       {
         role: "group",
@@ -1147,7 +1099,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,
@@ -1160,7 +1112,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,