@xsolla/xui-button 0.172.2 → 0.173.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/README.md +41 -14
  2. package/native/index.d.mts +8 -1
  3. package/native/index.d.ts +8 -1
  4. package/native/index.js +9 -10
  5. package/native/index.js.map +1 -1
  6. package/native/index.mjs +14 -15
  7. package/native/index.mjs.map +1 -1
  8. package/package.json +4 -4
  9. package/web/index.d.mts +8 -1
  10. package/web/index.d.ts +8 -1
  11. package/web/index.js +9 -10
  12. package/web/index.js.map +1 -1
  13. package/web/index.mjs +14 -15
  14. package/web/index.mjs.map +1 -1
package/README.md CHANGED
@@ -241,7 +241,7 @@ export default function VerticalButtonGroup() {
241
241
 
242
242
  ### Flex Button
243
243
 
244
- `FlexButton` provides more flexible styling options with different background modes.
244
+ `FlexButton` provides more flexible styling options with different background modes and optional hover fills.
245
245
 
246
246
  ```tsx
247
247
  import * as React from "react";
@@ -255,6 +255,9 @@ export default function FlexButtonExample() {
255
255
  With Background
256
256
  </FlexButton>
257
257
  <FlexButton variant="brand">Text Only</FlexButton>
258
+ <FlexButton variant="brand" hoverBackground={false}>
259
+ No Hover Fill
260
+ </FlexButton>
258
261
  <FlexButton variant="tertiary" iconLeft={<Link />}>
259
262
  Link Style
260
263
  </FlexButton>
@@ -263,6 +266,29 @@ export default function FlexButtonExample() {
263
266
  }
264
267
  ```
265
268
 
269
+ ### Flex Button Without Hover Background
270
+
271
+ Set `hoverBackground={false}` for text-only actions that should keep a transparent background in hover and press states.
272
+
273
+ ```tsx
274
+ import * as React from "react";
275
+ import { FlexButton } from "@xsolla/xui-button";
276
+
277
+ export default function FlexButtonWithoutHoverBackground() {
278
+ return (
279
+ <div style={{ display: "flex", gap: 16 }}>
280
+ <FlexButton variant="brand">Default Hover</FlexButton>
281
+ <FlexButton variant="brand" hoverBackground={false}>
282
+ No Hover Fill
283
+ </FlexButton>
284
+ <FlexButton variant="tertiary" hoverBackground={false}>
285
+ Minimal Tertiary
286
+ </FlexButton>
287
+ </div>
288
+ );
289
+ }
290
+ ```
291
+
266
292
  ### Form Submit Button
267
293
 
268
294
  ```tsx
@@ -413,22 +439,23 @@ A button variant that displays only an icon. Requires `aria-label` for accessibi
413
439
 
414
440
  ### FlexButton
415
441
 
416
- A flexible button with more granular control over background and styling.
442
+ A flexible button with more granular control over background, hover fills, and styling.
417
443
 
418
444
  **FlexButton Props:**
419
445
 
420
- | Prop | Type | Default | Description |
421
- | :--------- | :------------------------------------------------------------------------------- | :--------- | :------------------------------------- |
422
- | children | `ReactNode` | - | The button label content. |
423
- | variant | `"brand" \| "primary" \| "secondary" \| "tertiary" \| "brandExtra" \| "inverse"` | `"brand"` | The visual style variant. |
424
- | size | `"xl" \| "lg" \| "md" \| "sm" \| "xs"` | `"md"` | The size of the button. |
425
- | background | `boolean` | `false` | Whether to show background fill. |
426
- | disabled | `boolean` | `false` | Whether the button is disabled. |
427
- | loading | `boolean` | `false` | Whether to show loading spinner. |
428
- | iconLeft | `ReactNode` | - | Icon to display on the left side. |
429
- | iconRight | `ReactNode` | - | Icon to display on the right side. |
430
- | onPress | `() => void` | - | Callback fired when button is pressed. |
431
- | type | `"button" \| "submit" \| "reset"` | `"button"` | The HTML button type attribute. |
446
+ | Prop | Type | Default | Description |
447
+ | :-------------- | :------------------------------------------------------------------------------- | :--------- | :------------------------------------------------------------- |
448
+ | children | `ReactNode` | - | The button label content. |
449
+ | variant | `"brand" \| "primary" \| "secondary" \| "tertiary" \| "brandExtra" \| "inverse"` | `"brand"` | The visual style variant. |
450
+ | size | `"xl" \| "lg" \| "md" \| "sm" \| "xs"` | `"md"` | The size of the button. |
451
+ | background | `boolean` | `false` | Whether to show background fill. |
452
+ | hoverBackground | `boolean` | `true` | Whether hover and press states should show a background color. |
453
+ | disabled | `boolean` | `false` | Whether the button is disabled. |
454
+ | loading | `boolean` | `false` | Whether to show loading spinner. |
455
+ | iconLeft | `ReactNode` | - | Icon to display on the left side. |
456
+ | iconRight | `ReactNode` | - | Icon to display on the right side. |
457
+ | onPress | `() => void` | - | Callback fired when button is pressed. |
458
+ | type | `"button" \| "submit" \| "reset"` | `"button"` | The HTML button type attribute. |
432
459
 
433
460
  ---
434
461
 
package/native/index.d.mts CHANGED
@@ -170,7 +170,7 @@ interface IconButtonProps extends ThemeOverrideProps {
170
170
  */
171
171
  declare const IconButton: React.FC<IconButtonProps>;
172
172
 
173
- interface FlexButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type">, ThemeOverrideProps {
173
+ interface FlexButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type"> {
174
174
  /** Button content */
175
175
  children: ReactNode;
176
176
  /** Visual variant of the button */
@@ -179,6 +179,13 @@ interface FlexButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElem
179
179
  size?: "xl" | "lg" | "md" | "sm" | "xs";
180
180
  /** Whether to show background fill */
181
181
  background?: boolean;
182
+ /**
183
+ * Whether to show the hover/press background color.
184
+ * When `false`, the button background stays transparent in all interactive
185
+ * states, producing a text-only appearance with no hover fill.
186
+ * @default true
187
+ */
188
+ hoverBackground?: boolean;
182
189
  /** Whether the button is disabled */
183
190
  disabled?: boolean;
184
191
  /** Whether the button is in a loading state */
package/native/index.d.ts CHANGED
@@ -170,7 +170,7 @@ interface IconButtonProps extends ThemeOverrideProps {
170
170
  */
171
171
  declare const IconButton: React.FC<IconButtonProps>;
172
172
 
173
- interface FlexButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type">, ThemeOverrideProps {
173
+ interface FlexButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type"> {
174
174
  /** Button content */
175
175
  children: ReactNode;
176
176
  /** Visual variant of the button */
@@ -179,6 +179,13 @@ interface FlexButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElem
179
179
  size?: "xl" | "lg" | "md" | "sm" | "xs";
180
180
  /** Whether to show background fill */
181
181
  background?: boolean;
182
+ /**
183
+ * Whether to show the hover/press background color.
184
+ * When `false`, the button background stays transparent in all interactive
185
+ * states, producing a text-only appearance with no hover fill.
186
+ * @default true
187
+ */
188
+ hoverBackground?: boolean;
182
189
  /** Whether the button is disabled */
183
190
  disabled?: boolean;
184
191
  /** Whether the button is in a loading state */
package/native/index.js CHANGED
@@ -840,6 +840,7 @@ var FlexButton = ({
840
840
  variant = "brand",
841
841
  size = "md",
842
842
  background = false,
843
+ hoverBackground = true,
843
844
  disabled = false,
844
845
  loading = false,
845
846
  iconLeft,
@@ -856,11 +857,9 @@ var FlexButton = ({
856
857
  "aria-controls": ariaControls,
857
858
  testID,
858
859
  tabIndex = 0,
859
- themeMode,
860
- themeProductContext,
861
860
  ...buttonProps
862
861
  }) => {
863
- const { theme } = (0, import_xui_core3.useResolvedTheme)({ themeMode, themeProductContext });
862
+ const { theme } = (0, import_xui_core3.useDesignSystem)();
864
863
  const [state, setState] = (0, import_react4.useState)("default");
865
864
  const [isFocused, setIsFocused] = (0, import_react4.useState)(false);
866
865
  const isMouseOverRef = (0, import_react4.useRef)(false);
@@ -884,8 +883,8 @@ var FlexButton = ({
884
883
  };
885
884
  }
886
885
  return {
887
- bg: currentState === "press" ? theme.colors.background.brand.primary : currentState === "hover" ? theme.colors.overlay.brand : "transparent",
888
- text: currentState === "press" ? theme.colors.content.on.brand : theme.colors.content.brand.primary,
886
+ bg: !hoverBackground ? "transparent" : currentState === "press" ? theme.colors.background.brand.primary : currentState === "hover" ? theme.colors.overlay.brand : "transparent",
887
+ text: currentState === "press" && hoverBackground ? theme.colors.content.on.brand : theme.colors.content.brand.primary,
889
888
  border: void 0
890
889
  };
891
890
  case "primary":
@@ -897,7 +896,7 @@ var FlexButton = ({
897
896
  };
898
897
  }
899
898
  return {
900
- bg: currentState === "press" || currentState === "hover" ? theme.colors.overlay.mono : "transparent",
899
+ bg: !hoverBackground ? "transparent" : currentState === "press" || currentState === "hover" ? theme.colors.overlay.mono : "transparent",
901
900
  text: theme.colors.content.primary,
902
901
  border: currentState === "press" ? theme.colors.border.primary : void 0
903
902
  };
@@ -910,7 +909,7 @@ var FlexButton = ({
910
909
  };
911
910
  }
912
911
  return {
913
- bg: currentState === "press" || currentState === "hover" ? theme.colors.overlay.mono : "transparent",
912
+ bg: !hoverBackground ? "transparent" : currentState === "press" || currentState === "hover" ? theme.colors.overlay.mono : "transparent",
914
913
  text: currentState === "press" ? theme.colors.content.primary : currentState === "hover" ? theme.colors.content.secondary : theme.colors.content.secondary,
915
914
  border: void 0
916
915
  };
@@ -923,7 +922,7 @@ var FlexButton = ({
923
922
  };
924
923
  }
925
924
  return {
926
- bg: currentState === "press" || currentState === "hover" ? theme.colors.overlay.mono : "transparent",
925
+ bg: !hoverBackground ? "transparent" : currentState === "press" || currentState === "hover" ? theme.colors.overlay.mono : "transparent",
927
926
  text: currentState === "press" ? theme.colors.content.secondary : currentState === "hover" ? theme.colors.content.tertiary : theme.colors.content.tertiary,
928
927
  border: void 0
929
928
  };
@@ -936,7 +935,7 @@ var FlexButton = ({
936
935
  };
937
936
  }
938
937
  return {
939
- bg: currentState === "press" ? theme.colors.background.brandExtra.primary : currentState === "hover" ? theme.colors.overlay.brandExtra : "transparent",
938
+ bg: !hoverBackground ? "transparent" : currentState === "press" ? theme.colors.background.brandExtra.primary : currentState === "hover" ? theme.colors.overlay.brandExtra : "transparent",
940
939
  text: currentState === "press" ? theme.colors.content.on.brandExtra : theme.colors.content.brandExtra.secondary,
941
940
  border: void 0
942
941
  };
@@ -949,7 +948,7 @@ var FlexButton = ({
949
948
  };
950
949
  }
951
950
  return {
952
- bg: currentState === "press" || currentState === "hover" ? theme.colors.overlay.mono : "transparent",
951
+ bg: !hoverBackground ? "transparent" : currentState === "press" || currentState === "hover" ? theme.colors.overlay.mono : "transparent",
953
952
  text: theme.colors.content.inverse,
954
953
  border: void 0
955
954
  };