@xsolla/xui-toggle-button-group 0.148.0 → 0.148.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xsolla/xui-toggle-button-group",
-  "version": "0.148.0",
+  "version": "0.148.1",
   "main": "./web/index.js",
   "module": "./web/index.mjs",
   "types": "./web/index.d.ts",
@@ -10,8 +10,8 @@
     "build:native": "PLATFORM=native tsup"
   },
   "dependencies": {
-    "@xsolla/xui-core": "0.148.0",
-    "@xsolla/xui-primitives-core": "0.148.0"
+    "@xsolla/xui-core": "0.148.1",
+    "@xsolla/xui-primitives-core": "0.148.1"
   },
   "peerDependencies": {
     "react": ">=16.8.0",

package/web/index.d.mts

@@ -0,0 +1,61 @@
+import React from 'react';
+import { ThemeOverrideProps } from '@xsolla/xui-core';
+
+type ToggleButtonGroupSize = "xl" | "lg" | "md" | "sm" | "xs";
+type ToggleButtonGroupAppearance = "separated" | "united";
+interface ToggleButtonGroupItem {
+    /** Unique identifier for the item */
+    id: string;
+    /** Display label for the item */
+    label: string;
+    /** Optional icon to display on the left */
+    iconLeft?: React.ReactNode;
+    /** Optional icon to display on the right */
+    iconRight?: React.ReactNode;
+    /** Whether the item is disabled */
+    disabled?: boolean;
+    /** Accessible label for screen readers */
+    "aria-label"?: string;
+}
+interface ToggleButtonGroupProps extends ThemeOverrideProps {
+    /** Array of items */
+    items: ToggleButtonGroupItem[];
+    /** ID(s) of the currently active item(s). For single selection, pass a string. For multiple selection, pass an array. */
+    value?: string | string[];
+    /** Default value(s) for uncontrolled mode */
+    defaultValue?: string | string[];
+    /** Callback when selection changes. Returns string for single selection, string[] for multiple. */
+    onChange?: (value: string | string[]) => void;
+    /** Size variant */
+    size?: ToggleButtonGroupSize;
+    /** Visual appearance - separated has gaps, united has connected items */
+    appearance?: ToggleButtonGroupAppearance;
+    /** Whether multiple items can be selected */
+    multiple?: boolean;
+    /** HTML id attribute */
+    id?: string;
+    /** Test ID for testing frameworks */
+    testID?: string;
+    /** Accessible label for the group */
+    "aria-label"?: string;
+    /** ID of element that labels this group */
+    "aria-labelledby"?: string;
+    /** Full width of the container */
+    fullWidth?: boolean;
+}
+
+/**
+ * ToggleButtonGroup - A control for picking one or several options from a set
+ *
+ * Used to pick one or several options from a linear set of closely related options.
+ * Can be used to filter or to sort elements.
+ *
+ * ## Accessibility Features
+ *
+ * - **Role**: Uses `role="radiogroup"` for single selection, `role="group"` for multiple
+ * - **Keyboard Navigation**: Arrow keys to navigate, Enter/Space to select
+ * - **ARIA**: Proper aria-checked and aria-disabled states
+ */
+declare const ToggleButtonGroup: React.FC<ToggleButtonGroupProps>;
+
+export { ToggleButtonGroup, type ToggleButtonGroupAppearance, type ToggleButtonGroupItem, type ToggleButtonGroupProps, type ToggleButtonGroupSize };

package/web/index.d.ts

@@ -0,0 +1,61 @@
+import React from 'react';
+import { ThemeOverrideProps } from '@xsolla/xui-core';
+
+type ToggleButtonGroupSize = "xl" | "lg" | "md" | "sm" | "xs";
+type ToggleButtonGroupAppearance = "separated" | "united";
+interface ToggleButtonGroupItem {
+    /** Unique identifier for the item */
+    id: string;
+    /** Display label for the item */
+    label: string;
+    /** Optional icon to display on the left */
+    iconLeft?: React.ReactNode;
+    /** Optional icon to display on the right */
+    iconRight?: React.ReactNode;
+    /** Whether the item is disabled */
+    disabled?: boolean;
+    /** Accessible label for screen readers */
+    "aria-label"?: string;
+}
+interface ToggleButtonGroupProps extends ThemeOverrideProps {
+    /** Array of items */
+    items: ToggleButtonGroupItem[];
+    /** ID(s) of the currently active item(s). For single selection, pass a string. For multiple selection, pass an array. */
+    value?: string | string[];
+    /** Default value(s) for uncontrolled mode */
+    defaultValue?: string | string[];
+    /** Callback when selection changes. Returns string for single selection, string[] for multiple. */
+    onChange?: (value: string | string[]) => void;
+    /** Size variant */
+    size?: ToggleButtonGroupSize;
+    /** Visual appearance - separated has gaps, united has connected items */
+    appearance?: ToggleButtonGroupAppearance;
+    /** Whether multiple items can be selected */
+    multiple?: boolean;
+    /** HTML id attribute */
+    id?: string;
+    /** Test ID for testing frameworks */
+    testID?: string;
+    /** Accessible label for the group */
+    "aria-label"?: string;
+    /** ID of element that labels this group */
+    "aria-labelledby"?: string;
+    /** Full width of the container */
+    fullWidth?: boolean;
+}
+
+/**
+ * ToggleButtonGroup - A control for picking one or several options from a set
+ *
+ * Used to pick one or several options from a linear set of closely related options.
+ * Can be used to filter or to sort elements.
+ *
+ * ## Accessibility Features
+ *
+ * - **Role**: Uses `role="radiogroup"` for single selection, `role="group"` for multiple
+ * - **Keyboard Navigation**: Arrow keys to navigate, Enter/Space to select
+ * - **ARIA**: Proper aria-checked and aria-disabled states
+ */
+declare const ToggleButtonGroup: React.FC<ToggleButtonGroupProps>;
+
+export { ToggleButtonGroup, type ToggleButtonGroupAppearance, type ToggleButtonGroupItem, type ToggleButtonGroupProps, type ToggleButtonGroupSize };