@xsolla/xui-button 0.74.0 → 0.76.0

package/native/index.js.flow

@@ -0,0 +1,419 @@
+/**
+ * Flowtype definitions for index
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+
+import React, { Node } from "react";
+declare interface ButtonProps {
+  /**
+   * Visual variant of the button
+   */
+  variant?: "primary" | "secondary";
+
+  /**
+   * Color tone of the button
+   */
+  tone?: "brand" | "brandExtra" | "alert" | "mono";
+
+  /**
+   * Size of the button
+   */
+  size?: "xl" | "lg" | "md" | "sm" | "xs";
+
+  /**
+   * Whether the button is disabled
+   */
+  disabled?: boolean;
+
+  /**
+   * Whether the button is in a loading state
+   */
+  loading?: boolean;
+
+  /**
+   * Button content
+   */
+  children: React.ReactNode;
+
+  /**
+   * Click handler
+   */
+  onPress?: () => void;
+
+  /**
+   * Icon to display on the left side
+   */
+  iconLeft?: React.ReactNode;
+
+  /**
+   * Icon to display on the right side
+   */
+  iconRight?: React.ReactNode;
+
+  /**
+   * Accessible label for screen readers (use for icon-only buttons)
+   */
+  "aria-label"?: string;
+
+  /**
+   * ID of element that describes this button
+   */
+  "aria-describedby"?: string;
+
+  /**
+   * Indicates the button controls an expandable element
+   */
+  "aria-expanded"?: boolean;
+
+  /**
+   * Indicates the type of popup triggered by the button
+   */
+  "aria-haspopup"?: boolean | "menu" | "listbox" | "tree" | "grid" | "dialog";
+
+  /**
+   * Indicates the button is pressed (for toggle buttons)
+   */
+  "aria-pressed"?: boolean | "mixed";
+
+  /**
+   * ID of the element this button controls
+   */
+  "aria-controls"?: string;
+
+  /**
+   * Test ID for testing frameworks
+   */
+  testID?: string;
+
+  /**
+   * HTML id attribute
+   */
+  id?: string;
+
+  /**
+   * HTML type attribute for the button
+   */
+  type?: "button" | "submit" | "reset";
+
+  /**
+   * Whether the button should take up the full width of its container
+   */
+  fullWidth?: boolean;
+}
+/**
+ * Button - An accessible button component
+ *
+ * Renders as a semantic `<button>` element with full ARIA support.
+ * Supports various visual variants, sizes, and states including loading.
+ *
+ * ## Accessibility Features
+ *
+ * - **Semantic HTML**: Renders as a native `<button>` element
+ * - **Keyboard Navigation**: Focusable via Tab, activated with Enter or Space
+ * - **ARIA States**: Properly announces disabled and loading states
+ * - **Focus Indicator**: Visible focus ring for keyboard navigation
+ * - **Screen Reader Support**: Announces button label, state, and any associated descriptions
+ */
+declare var Button: React.FC<ButtonProps>;
+declare interface IconButtonProps {
+  /**
+   * Visual variant of the button
+   */
+  variant?: "primary" | "secondary";
+
+  /**
+   * Color tone of the button
+   */
+  tone?: "brand" | "brandExtra" | "alert" | "mono";
+
+  /**
+   * Size of the button
+   */
+  size?: "xl" | "lg" | "md" | "sm" | "xs";
+
+  /**
+   * Whether the button is disabled
+   */
+  disabled?: boolean;
+
+  /**
+   * Whether the button is in a loading state
+   */
+  loading?: boolean;
+
+  /**
+   * Icon to display in the button (required)
+   */
+  icon: React.ReactNode;
+
+  /**
+   * Click handler
+   */
+  onPress?: () => void;
+
+  /**
+   * Accessible label for screen readers (REQUIRED for icon-only buttons)
+   * Since icon buttons have no visible text, this label is essential for accessibility.
+   * @example aria-label="Close dialog"
+   * @example aria-label="Open settings menu"
+   */
+  "aria-label": string;
+
+  /**
+   * ID of element that describes this button
+   */
+  "aria-describedby"?: string;
+
+  /**
+   * Indicates the button controls an expandable element
+   */
+  "aria-expanded"?: boolean;
+
+  /**
+   * Indicates the type of popup triggered by the button
+   */
+  "aria-haspopup"?: boolean | "menu" | "listbox" | "tree" | "grid" | "dialog";
+
+  /**
+   * Indicates the button is pressed (for toggle buttons)
+   */
+  "aria-pressed"?: boolean | "mixed";
+
+  /**
+   * ID of the element this button controls
+   */
+  "aria-controls"?: string;
+
+  /**
+   * Test ID for testing frameworks
+   */
+  testID?: string;
+
+  /**
+   * HTML id attribute
+   */
+  id?: string;
+
+  /**
+   * HTML type attribute for the button
+   */
+  type?: "button" | "submit" | "reset";
+}
+/**
+ * IconButton - An accessible icon-only button component
+ *
+ * Renders as a semantic `<button>` element with full ARIA support.
+ * Supports various visual variants, sizes, and states including loading.
+ *
+ * ## Accessibility Features
+ *
+ * - **Semantic HTML**: Renders as a native `<button>` element
+ * - **Required aria-label**: Ensures screen readers can announce the button's purpose
+ * - **Keyboard Navigation**: Focusable via Tab, activated with Enter or Space
+ * - **ARIA States**: Properly announces disabled and loading states
+ * - **Focus Indicator**: Visible focus ring for keyboard navigation
+ * - **Screen Reader Support**: Announces button label, state, and any associated descriptions
+ *
+ * ## Usage
+ *
+ * ```tsx
+ * // Basic usage - aria-label is required
+ * <IconButton icon={<CloseIcon />} aria-label="Close dialog" onPress={handleClose} />
+ *
+ * // Toggle button
+ * <IconButton
+ *   icon={<MenuIcon />}
+ *   aria-label="Toggle menu"
+ *   aria-expanded={isOpen}
+ *   aria-controls="menu-id"
+ *   onPress={toggleMenu}
+ * />
+ *
+ * // Loading state
+ * <IconButton icon={<SaveIcon />} aria-label="Save changes" loading />
+ * ```
+ */
+declare var IconButton: React.FC<IconButtonProps>;
+declare type FlexButtonProps = {
+  /**
+   * Button content
+   */
+  children: Node,
+
+  /**
+   * Visual variant of the button
+   */
+  variant?:
+    | "brand"
+    | "primary"
+    | "secondary"
+    | "tertiary"
+    | "brandExtra"
+    | "inverse",
+
+  /**
+   * Size of the button
+   */
+  size?: "xl" | "lg" | "md" | "sm" | "xs",
+
+  /**
+   * Whether to show background fill
+   */
+  background?: boolean,
+
+  /**
+   * Whether the button is disabled
+   */
+  disabled?: boolean,
+
+  /**
+   * Whether the button is in a loading state
+   */
+  loading?: boolean,
+
+  /**
+   * Icon to display on the left side
+   */
+  iconLeft?: Node,
+
+  /**
+   * Icon to display on the right side
+   */
+  iconRight?: Node,
+
+  /**
+   * Click handler
+   */
+  onPress?: () => void,
+
+  /**
+   * HTML type attribute for the button
+   */
+  type?: "button" | "submit" | "reset",
+
+  /**
+   * Accessible label for screen readers
+   */
+  "aria-label"?: string,
+
+  /**
+   * ID of element that describes this button
+   */
+  "aria-describedby"?: string,
+
+  /**
+   * Indicates the button controls an expandable element
+   */
+  "aria-expanded"?: boolean,
+
+  /**
+   * Indicates the type of popup triggered by the button
+   */
+  "aria-haspopup"?: boolean | "menu" | "listbox" | "tree" | "grid" | "dialog",
+
+  /**
+   * Indicates the button is pressed (for toggle buttons)
+   */
+  "aria-pressed"?: boolean | "mixed",
+
+  /**
+   * ID of the element this button controls
+   */
+  "aria-controls"?: string,
+
+  /**
+   * Test ID for testing frameworks
+   */
+  testID?: string,
+  ...
+} & $Diff<React.ButtonHTMLAttributes<HTMLButtonElement>, { type: any }>;
+
+/**
+ * FlexButton - A compact button component designed for use in modals and popups.
+ *
+ * Renders as a semantic `<button>` element with full ARIA support.
+ *
+ * ## Accessibility Features
+ *
+ * - **Semantic HTML**: Renders as a native `<button>` element
+ * - **Keyboard Navigation**: Focusable via Tab, activated with Enter or Space
+ * - **ARIA States**: Properly announces disabled and loading states
+ * - **Focus Indicator**: Visible focus ring for keyboard navigation
+ * - **Screen Reader Support**: Announces button label, state, and any associated descriptions
+ */
+declare var FlexButton: React.FC<FlexButtonProps>;
+declare interface ButtonGroupProps {
+  /**
+   * Layout orientation of the buttons
+   * @default 'horizontal'
+   */
+  orientation?: "horizontal" | "vertical";
+
+  /**
+   * Size of the button group, determines default gap between buttons
+   * @default 'md'
+   */
+  size?: "xl" | "lg" | "md" | "sm" | "xs";
+
+  /**
+   * Buttons to be grouped
+   */
+  children: React.ReactNode;
+
+  /**
+   * Optional description text below the buttons
+   */
+  description?: string;
+
+  /**
+   * Optional error message text below the buttons
+   */
+  error?: string;
+
+  /**
+   * Custom gap between buttons (in pixels). If not provided, uses size and orientation based default.
+   */
+  gap?: number;
+
+  /**
+   * Accessible label for the button group
+   */
+  "aria-label"?: string;
+
+  /**
+   * ID of element that labels this button group
+   */
+  "aria-labelledby"?: string;
+
+  /**
+   * ID of element that describes this button group
+   */
+  "aria-describedby"?: string;
+
+  /**
+   * HTML id attribute
+   */
+  id?: string;
+
+  /**
+   * Test ID for testing frameworks
+   */
+  testID?: string;
+}
+/**
+ * ButtonGroup - A container for grouping related buttons
+ *
+ * Provides semantic grouping for related actions with proper accessibility support.
+ *
+ * ## Accessibility Features
+ *
+ * - **Semantic Grouping**: Uses `role="group"` to indicate related buttons
+ * - **Accessible Name**: Supports `aria-label` or `aria-labelledby` to describe the group's purpose
+ * - **Error Announcements**: Errors are announced to screen readers via `aria-live`
+ * - **Description Support**: Optional description text for additional context
+ */
+declare var ButtonGroup: React.FC<ButtonGroupProps>;
+export type { ButtonGroupProps, ButtonProps, FlexButtonProps, IconButtonProps };
+declare export { Button, ButtonGroup, FlexButton, IconButton };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xsolla/xui-button",
-  "version": "0.74.0",
+  "version": "0.76.0",
   "main": "./web/index.js",
   "module": "./web/index.mjs",
   "types": "./web/index.d.ts",
@@ -13,9 +13,9 @@
     "test:coverage": "vitest run --coverage"
   },
   "dependencies": {
-    "@xsolla/xui-core": "0.74.0",
-    "@xsolla/xui-icons": "0.74.0",
-    "@xsolla/xui-primitives-core": "0.74.0"
+    "@xsolla/xui-core": "0.76.0",
+    "@xsolla/xui-icons": "0.76.0",
+    "@xsolla/xui-primitives-core": "0.76.0"
   },
   "peerDependencies": {
     "react": ">=16.8.0",

package/web/index.js.flow

@@ -0,0 +1,419 @@
+/**
+ * Flowtype definitions for index
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+
+import React, { Node } from "react";
+declare interface ButtonProps {
+  /**
+   * Visual variant of the button
+   */
+  variant?: "primary" | "secondary";
+
+  /**
+   * Color tone of the button
+   */
+  tone?: "brand" | "brandExtra" | "alert" | "mono";
+
+  /**
+   * Size of the button
+   */
+  size?: "xl" | "lg" | "md" | "sm" | "xs";
+
+  /**
+   * Whether the button is disabled
+   */
+  disabled?: boolean;
+
+  /**
+   * Whether the button is in a loading state
+   */
+  loading?: boolean;
+
+  /**
+   * Button content
+   */
+  children: React.ReactNode;
+
+  /**
+   * Click handler
+   */
+  onPress?: () => void;
+
+  /**
+   * Icon to display on the left side
+   */
+  iconLeft?: React.ReactNode;
+
+  /**
+   * Icon to display on the right side
+   */
+  iconRight?: React.ReactNode;
+
+  /**
+   * Accessible label for screen readers (use for icon-only buttons)
+   */
+  "aria-label"?: string;
+
+  /**
+   * ID of element that describes this button
+   */
+  "aria-describedby"?: string;
+
+  /**
+   * Indicates the button controls an expandable element
+   */
+  "aria-expanded"?: boolean;
+
+  /**
+   * Indicates the type of popup triggered by the button
+   */
+  "aria-haspopup"?: boolean | "menu" | "listbox" | "tree" | "grid" | "dialog";
+
+  /**
+   * Indicates the button is pressed (for toggle buttons)
+   */
+  "aria-pressed"?: boolean | "mixed";
+
+  /**
+   * ID of the element this button controls
+   */
+  "aria-controls"?: string;
+
+  /**
+   * Test ID for testing frameworks
+   */
+  testID?: string;
+
+  /**
+   * HTML id attribute
+   */
+  id?: string;
+
+  /**
+   * HTML type attribute for the button
+   */
+  type?: "button" | "submit" | "reset";
+
+  /**
+   * Whether the button should take up the full width of its container
+   */
+  fullWidth?: boolean;
+}
+/**
+ * Button - An accessible button component
+ *
+ * Renders as a semantic `<button>` element with full ARIA support.
+ * Supports various visual variants, sizes, and states including loading.
+ *
+ * ## Accessibility Features
+ *
+ * - **Semantic HTML**: Renders as a native `<button>` element
+ * - **Keyboard Navigation**: Focusable via Tab, activated with Enter or Space
+ * - **ARIA States**: Properly announces disabled and loading states
+ * - **Focus Indicator**: Visible focus ring for keyboard navigation
+ * - **Screen Reader Support**: Announces button label, state, and any associated descriptions
+ */
+declare var Button: React.FC<ButtonProps>;
+declare interface IconButtonProps {
+  /**
+   * Visual variant of the button
+   */
+  variant?: "primary" | "secondary";
+
+  /**
+   * Color tone of the button
+   */
+  tone?: "brand" | "brandExtra" | "alert" | "mono";
+
+  /**
+   * Size of the button
+   */
+  size?: "xl" | "lg" | "md" | "sm" | "xs";
+
+  /**
+   * Whether the button is disabled
+   */
+  disabled?: boolean;
+
+  /**
+   * Whether the button is in a loading state
+   */
+  loading?: boolean;
+
+  /**
+   * Icon to display in the button (required)
+   */
+  icon: React.ReactNode;
+
+  /**
+   * Click handler
+   */
+  onPress?: () => void;
+
+  /**
+   * Accessible label for screen readers (REQUIRED for icon-only buttons)
+   * Since icon buttons have no visible text, this label is essential for accessibility.
+   * @example aria-label="Close dialog"
+   * @example aria-label="Open settings menu"
+   */
+  "aria-label": string;
+
+  /**
+   * ID of element that describes this button
+   */
+  "aria-describedby"?: string;
+
+  /**
+   * Indicates the button controls an expandable element
+   */
+  "aria-expanded"?: boolean;
+
+  /**
+   * Indicates the type of popup triggered by the button
+   */
+  "aria-haspopup"?: boolean | "menu" | "listbox" | "tree" | "grid" | "dialog";
+
+  /**
+   * Indicates the button is pressed (for toggle buttons)
+   */
+  "aria-pressed"?: boolean | "mixed";
+
+  /**
+   * ID of the element this button controls
+   */
+  "aria-controls"?: string;
+
+  /**
+   * Test ID for testing frameworks
+   */
+  testID?: string;
+
+  /**
+   * HTML id attribute
+   */
+  id?: string;
+
+  /**
+   * HTML type attribute for the button
+   */
+  type?: "button" | "submit" | "reset";
+}
+/**
+ * IconButton - An accessible icon-only button component
+ *
+ * Renders as a semantic `<button>` element with full ARIA support.
+ * Supports various visual variants, sizes, and states including loading.
+ *
+ * ## Accessibility Features
+ *
+ * - **Semantic HTML**: Renders as a native `<button>` element
+ * - **Required aria-label**: Ensures screen readers can announce the button's purpose
+ * - **Keyboard Navigation**: Focusable via Tab, activated with Enter or Space
+ * - **ARIA States**: Properly announces disabled and loading states
+ * - **Focus Indicator**: Visible focus ring for keyboard navigation
+ * - **Screen Reader Support**: Announces button label, state, and any associated descriptions
+ *
+ * ## Usage
+ *
+ * ```tsx
+ * // Basic usage - aria-label is required
+ * <IconButton icon={<CloseIcon />} aria-label="Close dialog" onPress={handleClose} />
+ *
+ * // Toggle button
+ * <IconButton
+ *   icon={<MenuIcon />}
+ *   aria-label="Toggle menu"
+ *   aria-expanded={isOpen}
+ *   aria-controls="menu-id"
+ *   onPress={toggleMenu}
+ * />
+ *
+ * // Loading state
+ * <IconButton icon={<SaveIcon />} aria-label="Save changes" loading />
+ * ```
+ */
+declare var IconButton: React.FC<IconButtonProps>;
+declare type FlexButtonProps = {
+  /**
+   * Button content
+   */
+  children: Node,
+
+  /**
+   * Visual variant of the button
+   */
+  variant?:
+    | "brand"
+    | "primary"
+    | "secondary"
+    | "tertiary"
+    | "brandExtra"
+    | "inverse",
+
+  /**
+   * Size of the button
+   */
+  size?: "xl" | "lg" | "md" | "sm" | "xs",
+
+  /**
+   * Whether to show background fill
+   */
+  background?: boolean,
+
+  /**
+   * Whether the button is disabled
+   */
+  disabled?: boolean,
+
+  /**
+   * Whether the button is in a loading state
+   */
+  loading?: boolean,
+
+  /**
+   * Icon to display on the left side
+   */
+  iconLeft?: Node,
+
+  /**
+   * Icon to display on the right side
+   */
+  iconRight?: Node,
+
+  /**
+   * Click handler
+   */
+  onPress?: () => void,
+
+  /**
+   * HTML type attribute for the button
+   */
+  type?: "button" | "submit" | "reset",
+
+  /**
+   * Accessible label for screen readers
+   */
+  "aria-label"?: string,
+
+  /**
+   * ID of element that describes this button
+   */
+  "aria-describedby"?: string,
+
+  /**
+   * Indicates the button controls an expandable element
+   */
+  "aria-expanded"?: boolean,
+
+  /**
+   * Indicates the type of popup triggered by the button
+   */
+  "aria-haspopup"?: boolean | "menu" | "listbox" | "tree" | "grid" | "dialog",
+
+  /**
+   * Indicates the button is pressed (for toggle buttons)
+   */
+  "aria-pressed"?: boolean | "mixed",
+
+  /**
+   * ID of the element this button controls
+   */
+  "aria-controls"?: string,
+
+  /**
+   * Test ID for testing frameworks
+   */
+  testID?: string,
+  ...
+} & $Diff<React.ButtonHTMLAttributes<HTMLButtonElement>, { type: any }>;
+
+/**
+ * FlexButton - A compact button component designed for use in modals and popups.
+ *
+ * Renders as a semantic `<button>` element with full ARIA support.
+ *
+ * ## Accessibility Features
+ *
+ * - **Semantic HTML**: Renders as a native `<button>` element
+ * - **Keyboard Navigation**: Focusable via Tab, activated with Enter or Space
+ * - **ARIA States**: Properly announces disabled and loading states
+ * - **Focus Indicator**: Visible focus ring for keyboard navigation
+ * - **Screen Reader Support**: Announces button label, state, and any associated descriptions
+ */
+declare var FlexButton: React.FC<FlexButtonProps>;
+declare interface ButtonGroupProps {
+  /**
+   * Layout orientation of the buttons
+   * @default 'horizontal'
+   */
+  orientation?: "horizontal" | "vertical";
+
+  /**
+   * Size of the button group, determines default gap between buttons
+   * @default 'md'
+   */
+  size?: "xl" | "lg" | "md" | "sm" | "xs";
+
+  /**
+   * Buttons to be grouped
+   */
+  children: React.ReactNode;
+
+  /**
+   * Optional description text below the buttons
+   */
+  description?: string;
+
+  /**
+   * Optional error message text below the buttons
+   */
+  error?: string;
+
+  /**
+   * Custom gap between buttons (in pixels). If not provided, uses size and orientation based default.
+   */
+  gap?: number;
+
+  /**
+   * Accessible label for the button group
+   */
+  "aria-label"?: string;
+
+  /**
+   * ID of element that labels this button group
+   */
+  "aria-labelledby"?: string;
+
+  /**
+   * ID of element that describes this button group
+   */
+  "aria-describedby"?: string;
+
+  /**
+   * HTML id attribute
+   */
+  id?: string;
+
+  /**
+   * Test ID for testing frameworks
+   */
+  testID?: string;
+}
+/**
+ * ButtonGroup - A container for grouping related buttons
+ *
+ * Provides semantic grouping for related actions with proper accessibility support.
+ *
+ * ## Accessibility Features
+ *
+ * - **Semantic Grouping**: Uses `role="group"` to indicate related buttons
+ * - **Accessible Name**: Supports `aria-label` or `aria-labelledby` to describe the group's purpose
+ * - **Error Announcements**: Errors are announced to screen readers via `aria-live`
+ * - **Description Support**: Optional description text for additional context
+ */
+declare var ButtonGroup: React.FC<ButtonGroupProps>;
+export type { ButtonGroupProps, ButtonProps, FlexButtonProps, IconButtonProps };
+declare export { Button, ButtonGroup, FlexButton, IconButton };