@xsolla/xui-button 0.64.0-pr56.1768440195

package/native/index.d.mts

@@ -0,0 +1,249 @@
+import React, { ReactNode } from 'react';
+
+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" | "l" | "m" | "s" | "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 (defaults to children if string) */
+    "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 const Button: React.FC<ButtonProps>;
+
+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" | "l" | "m" | "s" | "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 const IconButton: React.FC<IconButtonProps>;
+
+interface FlexButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type"> {
+    /** Button content */
+    children: ReactNode;
+    /** Visual variant of the button */
+    variant?: "brand" | "primary" | "secondary" | "tertiary" | "brandExtra" | "inverse";
+    /** Size of the button */
+    size?: "xl" | "l" | "m" | "s" | "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?: ReactNode;
+    /** Icon to display on the right side */
+    iconRight?: ReactNode;
+    /** 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;
+}
+/**
+ * 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 const FlexButton: React.FC<FlexButtonProps>;
+
+interface ButtonGroupProps {
+    /**
+     * Layout orientation of the buttons
+     * @default 'horizontal'
+     */
+    orientation?: "horizontal" | "vertical";
+    /**
+     * Size of the button group, determines default gap between buttons
+     * @default 'm'
+     */
+    size?: "xl" | "l" | "m" | "s" | "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 const ButtonGroup: React.FC<ButtonGroupProps>;
+
+export { Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, FlexButton, type FlexButtonProps, IconButton, type IconButtonProps };

package/native/index.d.ts

@@ -0,0 +1,249 @@
+import React, { ReactNode } from 'react';
+
+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" | "l" | "m" | "s" | "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 (defaults to children if string) */
+    "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 const Button: React.FC<ButtonProps>;
+
+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" | "l" | "m" | "s" | "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 const IconButton: React.FC<IconButtonProps>;
+
+interface FlexButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type"> {
+    /** Button content */
+    children: ReactNode;
+    /** Visual variant of the button */
+    variant?: "brand" | "primary" | "secondary" | "tertiary" | "brandExtra" | "inverse";
+    /** Size of the button */
+    size?: "xl" | "l" | "m" | "s" | "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?: ReactNode;
+    /** Icon to display on the right side */
+    iconRight?: ReactNode;
+    /** 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;
+}
+/**
+ * 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 const FlexButton: React.FC<FlexButtonProps>;
+
+interface ButtonGroupProps {
+    /**
+     * Layout orientation of the buttons
+     * @default 'horizontal'
+     */
+    orientation?: "horizontal" | "vertical";
+    /**
+     * Size of the button group, determines default gap between buttons
+     * @default 'm'
+     */
+    size?: "xl" | "l" | "m" | "s" | "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 const ButtonGroup: React.FC<ButtonGroupProps>;
+
+export { Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, FlexButton, type FlexButtonProps, IconButton, type IconButtonProps };