@zag-js/tabs 0.69.0 → 0.71.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.
package/src/tabs.types.ts DELETED
@@ -1,210 +0,0 @@
1
- import type { Machine, StateMachine as S } from "@zag-js/core"
2
- import type { CommonProperties, DirectionProperty, PropTypes, RequiredBy } from "@zag-js/types"
3
-
4
- /* -----------------------------------------------------------------------------
5
- * Callback details
6
- * -----------------------------------------------------------------------------*/
7
-
8
- export interface ValueChangeDetails {
9
- value: string
10
- }
11
-
12
- export interface FocusChangeDetails {
13
- focusedValue: string
14
- }
15
-
16
- /* -----------------------------------------------------------------------------
17
- * Machine context
18
- * -----------------------------------------------------------------------------*/
19
-
20
- export interface IntlTranslations {
21
- listLabel?: string
22
- }
23
-
24
- export type ElementIds = Partial<{
25
- root: string
26
- trigger: string
27
- list: string
28
- content: string
29
- indicator: string
30
- }>
31
-
32
- interface PublicContext extends DirectionProperty, CommonProperties {
33
- /**
34
- * The ids of the elements in the tabs. Useful for composition.
35
- */
36
- ids?: ElementIds
37
- /**
38
- * Specifies the localized strings that identifies the accessibility elements and their states
39
- */
40
- translations?: IntlTranslations
41
- /**
42
- * Whether the keyboard navigation will loop from last tab to first, and vice versa.
43
- * @default true
44
- */
45
- loopFocus: boolean
46
- /**
47
- * The selected tab id
48
- */
49
- value: string | null
50
- /**
51
- * The orientation of the tabs. Can be `horizontal` or `vertical`
52
- * - `horizontal`: only left and right arrow key navigation will work.
53
- * - `vertical`: only up and down arrow key navigation will work.
54
- *
55
- * @default "horizontal"
56
- */
57
- orientation?: "horizontal" | "vertical"
58
- /**
59
- * The activation mode of the tabs. Can be `manual` or `automatic`
60
- * - `manual`: Tabs are activated when clicked or press `enter` key.
61
- * - `automatic`: Tabs are activated when receiving focus
62
- *
63
- * @default "automatic"
64
- */
65
- activationMode?: "manual" | "automatic"
66
- /**
67
- * Callback to be called when the selected/active tab changes
68
- */
69
- onValueChange?: (details: ValueChangeDetails) => void
70
- /**
71
- * Callback to be called when the focused tab changes
72
- */
73
- onFocusChange?: (details: FocusChangeDetails) => void
74
- /**
75
- * Whether the tab is composite
76
- */
77
- composite: boolean
78
- }
79
-
80
- export type UserDefinedContext = RequiredBy<PublicContext, "id">
81
-
82
- type ComputedContext = Readonly<{}>
83
-
84
- interface IndicatorState {
85
- rendered: boolean
86
- rect: Partial<{ left: string; top: string; width: string; height: string }>
87
- transition: boolean
88
- }
89
-
90
- interface PrivateContext {
91
- /**
92
- * @internal
93
- * The focused tab id
94
- */
95
- focusedValue: string | null
96
- /**
97
- * @internal
98
- * The active tab indicator details
99
- */
100
- indicatorState: IndicatorState
101
- /**
102
- * @internal
103
- * Function to clean up the observer for the active tab's rect
104
- */
105
- indicatorCleanup?: VoidFunction | null
106
- /**
107
- * @internal
108
- * Whether the radio group is in server-side rendering
109
- */
110
- ssr: boolean
111
- }
112
-
113
- export interface MachineContext extends PublicContext, ComputedContext, PrivateContext {}
114
-
115
- export interface MachineState {
116
- value: "idle" | "focused"
117
- }
118
-
119
- export type State = S.State<MachineContext, MachineState>
120
-
121
- export type Send = S.Send<S.AnyEventObject>
122
-
123
- export type Service = Machine<MachineContext, MachineState, S.AnyEventObject>
124
-
125
- /* -----------------------------------------------------------------------------
126
- * Component API
127
- * -----------------------------------------------------------------------------*/
128
-
129
- export interface TriggerProps {
130
- /**
131
- * The value of the tab
132
- */
133
- value: string
134
- /**
135
- * Whether the tab is disabled
136
- */
137
- disabled?: boolean
138
- }
139
-
140
- export interface TriggerState {
141
- /**
142
- * Whether the tab is selected
143
- */
144
- selected: boolean
145
- /**
146
- * Whether the tab is focused
147
- */
148
- focused: boolean
149
- /**
150
- * Whether the tab is disabled
151
- */
152
- disabled: boolean
153
- }
154
-
155
- export interface ContentProps {
156
- /**
157
- * The value of the tab
158
- */
159
- value: string
160
- }
161
-
162
- export interface MachineApi<T extends PropTypes = PropTypes> {
163
- /**
164
- * The current value of the tabs.
165
- */
166
- value: string | null
167
- /**
168
- * The value of the tab that is currently focused.
169
- */
170
- focusedValue: string | null
171
- /**
172
- * Sets the value of the tabs.
173
- */
174
- setValue(value: string): void
175
- /**
176
- * Clears the value of the tabs.
177
- */
178
- clearValue(): void
179
- /**
180
- * Sets the indicator rect to the tab with the given value
181
- */
182
- setIndicatorRect(value: string): void
183
- /**
184
- * Synchronizes the tab index of the content element.
185
- * Useful when rendering tabs within a select or combobox
186
- */
187
- syncTabIndex(): void
188
- /**
189
- * Set focus on the selected tab trigger
190
- */
191
- focus(): void
192
- /**
193
- * Selects the next tab
194
- */
195
- selectNext(fromValue?: string): void
196
- /**
197
- * Selects the previous tab
198
- */
199
- selectPrev(fromValue?: string): void
200
- /**
201
- * Returns the state of the trigger with the given props
202
- */
203
- getTriggerState(props: TriggerProps): TriggerState
204
-
205
- getRootProps(): T["element"]
206
- getListProps(): T["element"]
207
- getTriggerProps(props: TriggerProps): T["button"]
208
- getContentProps(props: ContentProps): T["element"]
209
- getIndicatorProps(): T["element"]
210
- }