@xsolla/xui-button 0.172.2 → 0.173.0

package/web/index.mjs

@@ -822,7 +822,7 @@ import {
   useRef,
   useState as useState3
 } from "react";
-import { useResolvedTheme as useResolvedTheme3 } from "@xsolla/xui-core";
+import { useDesignSystem } from "@xsolla/xui-core";
 import { Fragment, jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
 var ICON_SIZES = {
   xs: 12,
@@ -864,6 +864,7 @@ var FlexButton = ({
   variant = "brand",
   size = "md",
   background = false,
+  hoverBackground = true,
   disabled = false,
   loading = false,
   iconLeft,
@@ -880,11 +881,9 @@ var FlexButton = ({
   "aria-controls": ariaControls,
   testID,
   tabIndex = 0,
-  themeMode,
-  themeProductContext,
   ...buttonProps
 }) => {
-  const { theme } = useResolvedTheme3({ themeMode, themeProductContext });
+  const { theme } = useDesignSystem();
   const [state, setState] = useState3("default");
   const [isFocused, setIsFocused] = useState3(false);
   const isMouseOverRef = useRef(false);
@@ -908,8 +907,8 @@ var FlexButton = ({
           };
         }
         return {
-          bg: currentState === "press" ? theme.colors.background.brand.primary : currentState === "hover" ? theme.colors.overlay.brand : "transparent",
-          text: currentState === "press" ? theme.colors.content.on.brand : theme.colors.content.brand.primary,
+          bg: !hoverBackground ? "transparent" : currentState === "press" ? theme.colors.background.brand.primary : currentState === "hover" ? theme.colors.overlay.brand : "transparent",
+          text: currentState === "press" && hoverBackground ? theme.colors.content.on.brand : theme.colors.content.brand.primary,
           border: void 0
         };
       case "primary":
@@ -921,7 +920,7 @@ var FlexButton = ({
           };
         }
         return {
-          bg: currentState === "press" || currentState === "hover" ? theme.colors.overlay.mono : "transparent",
+          bg: !hoverBackground ? "transparent" : currentState === "press" || currentState === "hover" ? theme.colors.overlay.mono : "transparent",
           text: theme.colors.content.primary,
           border: currentState === "press" ? theme.colors.border.primary : void 0
         };
@@ -934,7 +933,7 @@ var FlexButton = ({
           };
         }
         return {
-          bg: currentState === "press" || currentState === "hover" ? theme.colors.overlay.mono : "transparent",
+          bg: !hoverBackground ? "transparent" : currentState === "press" || currentState === "hover" ? theme.colors.overlay.mono : "transparent",
           text: currentState === "press" ? theme.colors.content.primary : currentState === "hover" ? theme.colors.content.secondary : theme.colors.content.secondary,
           border: void 0
         };
@@ -947,7 +946,7 @@ var FlexButton = ({
           };
         }
         return {
-          bg: currentState === "press" || currentState === "hover" ? theme.colors.overlay.mono : "transparent",
+          bg: !hoverBackground ? "transparent" : currentState === "press" || currentState === "hover" ? theme.colors.overlay.mono : "transparent",
           text: currentState === "press" ? theme.colors.content.secondary : currentState === "hover" ? theme.colors.content.tertiary : theme.colors.content.tertiary,
           border: void 0
         };
@@ -960,7 +959,7 @@ var FlexButton = ({
           };
         }
         return {
-          bg: currentState === "press" ? theme.colors.background.brandExtra.primary : currentState === "hover" ? theme.colors.overlay.brandExtra : "transparent",
+          bg: !hoverBackground ? "transparent" : currentState === "press" ? theme.colors.background.brandExtra.primary : currentState === "hover" ? theme.colors.overlay.brandExtra : "transparent",
           text: currentState === "press" ? theme.colors.content.on.brandExtra : theme.colors.content.brandExtra.secondary,
           border: void 0
         };
@@ -973,7 +972,7 @@ var FlexButton = ({
           };
         }
         return {
-          bg: currentState === "press" || currentState === "hover" ? theme.colors.overlay.mono : "transparent",
+          bg: !hoverBackground ? "transparent" : currentState === "press" || currentState === "hover" ? theme.colors.overlay.mono : "transparent",
           text: theme.colors.content.inverse,
           border: void 0
         };
@@ -1159,7 +1158,7 @@ FlexButton.displayName = "FlexButton";
 
 // src/AppButton.tsx
 import React6, { useState as useState4 } from "react";
-import { useResolvedTheme as useResolvedTheme4 } from "@xsolla/xui-core";
+import { useResolvedTheme as useResolvedTheme3 } from "@xsolla/xui-core";
 import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
 var cloneIconWithDefaults3 = (icon, defaultSize, defaultColor) => {
   if (!React6.isValidElement(icon)) return icon;
@@ -1196,7 +1195,7 @@ var AppButton = ({
   themeMode,
   themeProductContext
 }) => {
-  const { theme } = useResolvedTheme4({ themeMode, themeProductContext });
+  const { theme } = useResolvedTheme3({ themeMode, themeProductContext });
   const [isKeyboardPressed, setIsKeyboardPressed] = useState4(false);
   const isDisabled = disabled || loading;
   const sizeStyles = theme.sizing.button(size);
@@ -1382,7 +1381,7 @@ AppButton.displayName = "AppButton";
 
 // src/ButtonGroup.tsx
 import React7 from "react";
-import { useResolvedTheme as useResolvedTheme5 } from "@xsolla/xui-core";
+import { useResolvedTheme as useResolvedTheme4 } from "@xsolla/xui-core";
 import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
 var ButtonGroup = ({
   orientation = "horizontal",
@@ -1399,7 +1398,7 @@ var ButtonGroup = ({
   themeMode,
   themeProductContext
 }) => {
-  const { theme } = useResolvedTheme5({ themeMode, themeProductContext });
+  const { theme } = useResolvedTheme4({ themeMode, themeProductContext });
   const flattenChildren = (children2) => {
     const result = [];
     React7.Children.forEach(children2, (child) => {