@xsolla/xui-button 0.216.1 → 0.218.0

package/web/index.mjs

@@ -895,7 +895,13 @@ var SPINNER_SIZES = {
   lg: 18,
   xl: 20
 };
-var FLEX_BUTTON_PADDING = 4;
+var BACKGROUND_PADDING = {
+  xs: 2,
+  sm: 2,
+  md: 2,
+  lg: 4,
+  xl: 4
+};
 var hasVisibleLabel = (node) => {
   if (node == null || node === false || node === true) return false;
   if (typeof node === "string") return node.trim().length > 0;
@@ -972,7 +978,6 @@ var FlexButton = forwardRef(
   }, ref) => {
     const { theme } = useResolvedTheme3({ themeMode, themeProductContext });
     const [state, setState] = useState3("default");
-    const [isFocused, setIsFocused] = useState3(false);
     const isMouseOverRef = useRef(false);
     const isDisabled = disabled || loading;
     const getVariantColors = (currentState) => {
@@ -1071,18 +1076,6 @@ var FlexButton = forwardRef(
           };
       }
     };
-    const getFocusRingColor = () => {
-      switch (variant) {
-        case "brand":
-          return theme.colors.overlay.brand;
-        case "brandExtra":
-          return theme.colors.overlay.brandExtra;
-        case "inverse":
-          return "rgba(255, 255, 255, 0.3)";
-        default:
-          return theme.colors.overlay.mono;
-      }
-    };
     const getSpinnerColor = () => {
       switch (variant) {
         case "brand":
@@ -1102,13 +1095,13 @@ var FlexButton = forwardRef(
       }
     };
     const colors = getVariantColors(state);
-    const focusRingColor = getFocusRingColor();
     const spinnerColor = getSpinnerColor();
     const iconSize = ICON_SIZES[size];
     const spinnerSize = SPINNER_SIZES[size];
     const fontSize = FONT_SIZES[size];
     const borderRadius = BORDER_RADIUS[size];
     const lineHeight = LINE_HEIGHTS[size];
+    const framePadding = background ? BACKGROUND_PADDING[size] : 0;
     const showTextLabel = hasVisibleLabel(children);
     const hasIconChildren = !showTextLabel && hasRenderableContent(children);
     const isIconOnly = !loading && !showTextLabel && Boolean(iconLeft || iconRight || hasIconChildren);
@@ -1135,14 +1128,6 @@ var FlexButton = forwardRef(
         setState(isMouseOverRef.current ? "hover" : "default");
       }
     };
-    const handleFocus = () => {
-      if (!isDisabled) {
-        setIsFocused(true);
-      }
-    };
-    const handleBlur = () => {
-      setIsFocused(false);
-    };
     const handleClick = (event) => {
       if (isDisabled) return;
       if (onPress) {
@@ -1170,18 +1155,13 @@ var FlexButton = forwardRef(
       }
     };
     const borderShadow = colors.border ? `inset 0 0 0 1px ${colors.border}` : void 0;
-    const focusShadow = isFocused && !isDisabled ? `0 0 0 2px ${focusRingColor}` : void 0;
-    const boxShadows = [];
-    if (borderShadow) boxShadows.push(borderShadow);
-    if (focusShadow) boxShadows.push(focusShadow);
-    const combinedBoxShadow = boxShadows.length > 0 ? boxShadows.join(", ") : "none";
     const buttonStyle = {
       display: "inline-flex",
       alignItems: "center",
       justifyContent: "center",
       gap: isIconOnly ? 0 : "2px",
       boxSizing: "border-box",
-      padding: noPadding ? "0px" : `${FLEX_BUTTON_PADDING}px`,
+      padding: noPadding ? "0px" : `${framePadding}px`,
       backgroundColor: loading ? "transparent" : colors.bg,
       color: colors.text,
       border: "none",
@@ -1193,8 +1173,7 @@ var FlexButton = forwardRef(
       lineHeight: isIconOnly ? 0 : lineHeight,
       fontFamily: "inherit",
       transition: "background-color 100ms ease-in-out, color 100ms ease-in-out, box-shadow 100ms ease-in-out",
-      outline: "none",
-      boxShadow: combinedBoxShadow,
+      boxShadow: borderShadow ?? "none",
       ...isIconOnly && {
         width: iconOnlyHitArea,
         height: iconOnlyHitArea,
@@ -1237,8 +1216,6 @@ var FlexButton = forwardRef(
         onMouseUp: handleMouseUp,
         onKeyDown: handleKeyDown,
         onKeyUp: handleKeyUp,
-        onFocus: handleFocus,
-        onBlur: handleBlur,
         "aria-label": computedAriaLabel,
         "aria-busy": loading || void 0,
         "aria-disabled": isDisabled || void 0,