@xsolla/xui-tabs-web 0.64.0-pr56.1768348754

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 (7) hide show
  1. package/index.d.mts +76 -0
  2. package/index.d.ts +76 -0
  3. package/index.js +715 -0
  4. package/index.js.map +1 -0
  5. package/index.mjs +677 -0
  6. package/index.mjs.map +1 -0
  7. package/package.json +25 -0
package/index.d.mts ADDED
@@ -0,0 +1,76 @@
1
+ import React from 'react';
2
+
3
+ interface TabItemType {
4
+ /** Unique identifier for the tab */
5
+ id: string;
6
+ /** Display label for the tab */
7
+ label: string;
8
+ /** Optional icon to display before the label */
9
+ icon?: React.ReactNode;
10
+ /** Optional counter to display after the label */
11
+ counter?: string | number;
12
+ /** Optional badge to display */
13
+ badge?: boolean | string | number;
14
+ /** Whether the tab is disabled */
15
+ disabled?: boolean;
16
+ /** Accessible label for screen readers (defaults to label) */
17
+ "aria-label"?: string;
18
+ }
19
+ interface TabsProps {
20
+ /** Array of tab items */
21
+ tabs: TabItemType[];
22
+ /** ID of the currently active tab */
23
+ activeTabId?: string;
24
+ /** Callback when a tab is selected */
25
+ onChange?: (id: string) => void;
26
+ /** Size variant of the tabs */
27
+ size?: "xl" | "l" | "m" | "s";
28
+ /** Whether to align tabs to the left */
29
+ alignLeft?: boolean;
30
+ /** Accessible label for the tab list */
31
+ "aria-label"?: string;
32
+ /** ID of element that labels this tab list */
33
+ "aria-labelledby"?: string;
34
+ /** Whether keyboard navigation should automatically activate tabs */
35
+ activateOnFocus?: boolean;
36
+ /** HTML id attribute */
37
+ id?: string;
38
+ /** Test ID for testing frameworks */
39
+ testID?: string;
40
+ }
41
+ /**
42
+ * Tabs - An accessible tabbed interface component
43
+ *
44
+ * Implements WAI-ARIA Tabs pattern with proper keyboard navigation:
45
+ * - Arrow Left/Right: Navigate between tabs
46
+ * - Home: Jump to first tab
47
+ * - End: Jump to last tab
48
+ * - Enter/Space: Activate focused tab (when activateOnFocus is false)
49
+ *
50
+ */
51
+ declare const Tabs: React.FC<TabsProps>;
52
+ /**
53
+ * TabPanel - Container for tab content with proper accessibility attributes
54
+ *
55
+ * @example
56
+ * <TabPanel id="tab1" tabsId="my-tabs" hidden={activeTab !== 'tab1'}>
57
+ * <p>Content for tab 1</p>
58
+ * </TabPanel>
59
+ */
60
+ interface TabPanelProps {
61
+ /** ID matching the tab's id */
62
+ id: string;
63
+ /** ID of the parent Tabs component */
64
+ tabsId: string;
65
+ /** Whether the panel is hidden */
66
+ hidden?: boolean;
67
+ /** Panel content */
68
+ children: React.ReactNode;
69
+ /** Accessible label for the panel */
70
+ "aria-label"?: string;
71
+ /** Test ID for testing frameworks */
72
+ testID?: string;
73
+ }
74
+ declare const TabPanel: React.FC<TabPanelProps>;
75
+
76
+ export { type TabItemType, TabPanel, type TabPanelProps, Tabs, type TabsProps };
package/index.d.ts ADDED
@@ -0,0 +1,76 @@
1
+ import React from 'react';
2
+
3
+ interface TabItemType {
4
+ /** Unique identifier for the tab */
5
+ id: string;
6
+ /** Display label for the tab */
7
+ label: string;
8
+ /** Optional icon to display before the label */
9
+ icon?: React.ReactNode;
10
+ /** Optional counter to display after the label */
11
+ counter?: string | number;
12
+ /** Optional badge to display */
13
+ badge?: boolean | string | number;
14
+ /** Whether the tab is disabled */
15
+ disabled?: boolean;
16
+ /** Accessible label for screen readers (defaults to label) */
17
+ "aria-label"?: string;
18
+ }
19
+ interface TabsProps {
20
+ /** Array of tab items */
21
+ tabs: TabItemType[];
22
+ /** ID of the currently active tab */
23
+ activeTabId?: string;
24
+ /** Callback when a tab is selected */
25
+ onChange?: (id: string) => void;
26
+ /** Size variant of the tabs */
27
+ size?: "xl" | "l" | "m" | "s";
28
+ /** Whether to align tabs to the left */
29
+ alignLeft?: boolean;
30
+ /** Accessible label for the tab list */
31
+ "aria-label"?: string;
32
+ /** ID of element that labels this tab list */
33
+ "aria-labelledby"?: string;
34
+ /** Whether keyboard navigation should automatically activate tabs */
35
+ activateOnFocus?: boolean;
36
+ /** HTML id attribute */
37
+ id?: string;
38
+ /** Test ID for testing frameworks */
39
+ testID?: string;
40
+ }
41
+ /**
42
+ * Tabs - An accessible tabbed interface component
43
+ *
44
+ * Implements WAI-ARIA Tabs pattern with proper keyboard navigation:
45
+ * - Arrow Left/Right: Navigate between tabs
46
+ * - Home: Jump to first tab
47
+ * - End: Jump to last tab
48
+ * - Enter/Space: Activate focused tab (when activateOnFocus is false)
49
+ *
50
+ */
51
+ declare const Tabs: React.FC<TabsProps>;
52
+ /**
53
+ * TabPanel - Container for tab content with proper accessibility attributes
54
+ *
55
+ * @example
56
+ * <TabPanel id="tab1" tabsId="my-tabs" hidden={activeTab !== 'tab1'}>
57
+ * <p>Content for tab 1</p>
58
+ * </TabPanel>
59
+ */
60
+ interface TabPanelProps {
61
+ /** ID matching the tab's id */
62
+ id: string;
63
+ /** ID of the parent Tabs component */
64
+ tabsId: string;
65
+ /** Whether the panel is hidden */
66
+ hidden?: boolean;
67
+ /** Panel content */
68
+ children: React.ReactNode;
69
+ /** Accessible label for the panel */
70
+ "aria-label"?: string;
71
+ /** Test ID for testing frameworks */
72
+ testID?: string;
73
+ }
74
+ declare const TabPanel: React.FC<TabPanelProps>;
75
+
76
+ export { type TabItemType, TabPanel, type TabPanelProps, Tabs, type TabsProps };