@xsolla/xui-button 0.206.2 → 0.207.0

package/web/index.d.ts

@@ -318,6 +318,23 @@ interface ButtonGroupProps extends ThemeOverrideProps {
      * @default 'horizontal'
      */
     orientation?: "horizontal" | "vertical";
+    /**
+     * Force or suppress the split ("space-between") layout, in which the first
+     * button is pinned to the left edge and the remaining buttons are grouped
+     * on the right.
+     *
+     * When omitted, the layout is chosen by child count: horizontal groups with
+     * 3 or more buttons split, smaller groups do not. Set `split` to override
+     * that heuristic in either direction:
+     *
+     * - `split` — split a 2-button group (buttons keep their natural width
+     *   instead of stretching to fill the row)
+     * - `split={false}` — opt a 3+ button group out of the split layout
+     *
+     * Has no effect when `orientation="vertical"` or when the group has fewer
+     * than 2 children.
+     */
+    split?: boolean;
     /**
      * Size of the button group, determines default gap between buttons
      * @default 'md'

package/web/index.js

@@ -1522,6 +1522,7 @@ var import_xui_core5 = require("@xsolla/xui-core");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 var ButtonGroup = ({
   orientation = "horizontal",
+  split,
   size = "md",
   children,
   description,
@@ -1549,7 +1550,7 @@ var ButtonGroup = ({
   };
   const flatChildren = flattenChildren(children);
   const childCount = flatChildren.length;
-  const useSpaceBetween = orientation === "horizontal" && childCount > 2;
+  const useSpaceBetween = orientation === "horizontal" && childCount > 1 && (split ?? childCount > 2);
   const verticalGapMap = {
     xl: 16,
     lg: 16,
@@ -1572,7 +1573,7 @@ var ButtonGroup = ({
     error && errorId ? errorId : void 0,
     description && descriptionId ? descriptionId : void 0
   ].filter(Boolean).join(" ") || void 0;
-  const stretchChildren = orientation === "vertical" || orientation === "horizontal" && childCount <= 2;
+  const stretchChildren = orientation === "vertical" || orientation === "horizontal" && childCount <= 2 && !useSpaceBetween;
   const processChildren = (childrenToProcess) => {
     if (stretchChildren) {
       return childrenToProcess.map((child, index2) => {