@proyecto-viviana/solidaria 0.0.2 → 0.0.3
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/dist/index.d.ts +1214 -15
- package/dist/index.js +178 -382
- package/dist/index.jsx +2717 -0
- package/package.json +7 -5
- package/dist/button/createButton.d.ts +0 -29
- package/dist/button/createButton.d.ts.map +0 -1
- package/dist/button/createToggleButton.d.ts +0 -41
- package/dist/button/createToggleButton.d.ts.map +0 -1
- package/dist/button/index.d.ts +0 -5
- package/dist/button/index.d.ts.map +0 -1
- package/dist/button/types.d.ts +0 -66
- package/dist/button/types.d.ts.map +0 -1
- package/dist/checkbox/createCheckbox.d.ts +0 -56
- package/dist/checkbox/createCheckbox.d.ts.map +0 -1
- package/dist/checkbox/createCheckboxGroup.d.ts +0 -53
- package/dist/checkbox/createCheckboxGroup.d.ts.map +0 -1
- package/dist/checkbox/createCheckboxGroupItem.d.ts +0 -25
- package/dist/checkbox/createCheckboxGroupItem.d.ts.map +0 -1
- package/dist/checkbox/createCheckboxGroupState.d.ts +0 -71
- package/dist/checkbox/createCheckboxGroupState.d.ts.map +0 -1
- package/dist/checkbox/index.d.ts +0 -9
- package/dist/checkbox/index.d.ts.map +0 -1
- package/dist/index.d.ts.map +0 -1
- package/dist/index.js.map +0 -1
- package/dist/interactions/FocusableProvider.d.ts +0 -26
- package/dist/interactions/FocusableProvider.d.ts.map +0 -1
- package/dist/interactions/PressEvent.d.ts +0 -63
- package/dist/interactions/PressEvent.d.ts.map +0 -1
- package/dist/interactions/createFocus.d.ts +0 -31
- package/dist/interactions/createFocus.d.ts.map +0 -1
- package/dist/interactions/createFocusRing.d.ts +0 -37
- package/dist/interactions/createFocusRing.d.ts.map +0 -1
- package/dist/interactions/createFocusWithin.d.ts +0 -27
- package/dist/interactions/createFocusWithin.d.ts.map +0 -1
- package/dist/interactions/createFocusable.d.ts +0 -65
- package/dist/interactions/createFocusable.d.ts.map +0 -1
- package/dist/interactions/createHover.d.ts +0 -41
- package/dist/interactions/createHover.d.ts.map +0 -1
- package/dist/interactions/createKeyboard.d.ts +0 -35
- package/dist/interactions/createKeyboard.d.ts.map +0 -1
- package/dist/interactions/createPress.d.ts +0 -49
- package/dist/interactions/createPress.d.ts.map +0 -1
- package/dist/interactions/index.d.ts +0 -10
- package/dist/interactions/index.d.ts.map +0 -1
- package/dist/label/createField.d.ts +0 -51
- package/dist/label/createField.d.ts.map +0 -1
- package/dist/label/createLabel.d.ts +0 -49
- package/dist/label/createLabel.d.ts.map +0 -1
- package/dist/label/createLabels.d.ts +0 -16
- package/dist/label/createLabels.d.ts.map +0 -1
- package/dist/label/index.d.ts +0 -6
- package/dist/label/index.d.ts.map +0 -1
- package/dist/link/createLink.d.ts +0 -65
- package/dist/link/createLink.d.ts.map +0 -1
- package/dist/link/index.d.ts +0 -2
- package/dist/link/index.d.ts.map +0 -1
- package/dist/progress/createProgressBar.d.ts +0 -47
- package/dist/progress/createProgressBar.d.ts.map +0 -1
- package/dist/progress/index.d.ts +0 -2
- package/dist/progress/index.d.ts.map +0 -1
- package/dist/radio/createRadio.d.ts +0 -68
- package/dist/radio/createRadio.d.ts.map +0 -1
- package/dist/radio/createRadioGroup.d.ts +0 -85
- package/dist/radio/createRadioGroup.d.ts.map +0 -1
- package/dist/radio/createRadioGroupState.d.ts +0 -77
- package/dist/radio/createRadioGroupState.d.ts.map +0 -1
- package/dist/radio/index.d.ts +0 -4
- package/dist/radio/index.d.ts.map +0 -1
- package/dist/separator/createSeparator.d.ts +0 -38
- package/dist/separator/createSeparator.d.ts.map +0 -1
- package/dist/separator/index.d.ts +0 -2
- package/dist/separator/index.d.ts.map +0 -1
- package/dist/ssr/index.d.ts +0 -24
- package/dist/ssr/index.d.ts.map +0 -1
- package/dist/switch/createSwitch.d.ts +0 -34
- package/dist/switch/createSwitch.d.ts.map +0 -1
- package/dist/switch/index.d.ts +0 -2
- package/dist/switch/index.d.ts.map +0 -1
- package/dist/textfield/createTextField.d.ts +0 -73
- package/dist/textfield/createTextField.d.ts.map +0 -1
- package/dist/textfield/index.d.ts +0 -2
- package/dist/textfield/index.d.ts.map +0 -1
- package/dist/toggle/createToggle.d.ts +0 -94
- package/dist/toggle/createToggle.d.ts.map +0 -1
- package/dist/toggle/createToggleState.d.ts +0 -34
- package/dist/toggle/createToggleState.d.ts.map +0 -1
- package/dist/toggle/index.d.ts +0 -5
- package/dist/toggle/index.d.ts.map +0 -1
- package/dist/utils/dom.d.ts +0 -51
- package/dist/utils/dom.d.ts.map +0 -1
- package/dist/utils/events.d.ts +0 -29
- package/dist/utils/events.d.ts.map +0 -1
- package/dist/utils/filterDOMProps.d.ts +0 -29
- package/dist/utils/filterDOMProps.d.ts.map +0 -1
- package/dist/utils/focus.d.ts +0 -20
- package/dist/utils/focus.d.ts.map +0 -1
- package/dist/utils/geometry.d.ts +0 -40
- package/dist/utils/geometry.d.ts.map +0 -1
- package/dist/utils/globalListeners.d.ts +0 -36
- package/dist/utils/globalListeners.d.ts.map +0 -1
- package/dist/utils/index.d.ts +0 -11
- package/dist/utils/index.d.ts.map +0 -1
- package/dist/utils/mergeProps.d.ts +0 -8
- package/dist/utils/mergeProps.d.ts.map +0 -1
- package/dist/utils/platform.d.ts +0 -14
- package/dist/utils/platform.d.ts.map +0 -1
- package/dist/utils/reactivity.d.ts +0 -28
- package/dist/utils/reactivity.d.ts.map +0 -1
- package/dist/utils/textSelection.d.ts +0 -19
- package/dist/utils/textSelection.d.ts.map +0 -1
package/dist/index.d.ts
CHANGED
|
@@ -1,15 +1,1214 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
export {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
1
|
+
import { Accessor, JSX } from 'solid-js';
|
|
2
|
+
import { ToggleState, CheckboxGroupProps, CheckboxGroupState, RadioGroupState } from '@proyecto-viviana/solid-stately';
|
|
3
|
+
export { CheckboxGroupProps, CheckboxGroupState, RadioGroupProps, RadioGroupState, ToggleState, ToggleStateOptions, createCheckboxGroupState, createRadioGroupState, createToggleState } from '@proyecto-viviana/solid-stately';
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* PressEvent class that matches React-Aria's PressEvent interface.
|
|
7
|
+
* Wraps native events with press-specific data.
|
|
8
|
+
*/
|
|
9
|
+
type PointerType = 'mouse' | 'pen' | 'touch' | 'keyboard' | 'virtual';
|
|
10
|
+
type PressEventType = 'pressstart' | 'pressend' | 'pressup' | 'press';
|
|
11
|
+
interface IPressEvent {
|
|
12
|
+
/** The type of press event being fired. */
|
|
13
|
+
type: PressEventType;
|
|
14
|
+
/** The pointer type that triggered the press event. */
|
|
15
|
+
pointerType: PointerType;
|
|
16
|
+
/** The target element of the press event. */
|
|
17
|
+
target: Element;
|
|
18
|
+
/** Whether the shift keyboard modifier was held during the press event. */
|
|
19
|
+
shiftKey: boolean;
|
|
20
|
+
/** Whether the ctrl keyboard modifier was held during the press event. */
|
|
21
|
+
ctrlKey: boolean;
|
|
22
|
+
/** Whether the meta keyboard modifier was held during the press event. */
|
|
23
|
+
metaKey: boolean;
|
|
24
|
+
/** Whether the alt keyboard modifier was held during the press event. */
|
|
25
|
+
altKey: boolean;
|
|
26
|
+
/** X position of the press relative to the target element. */
|
|
27
|
+
x: number;
|
|
28
|
+
/** Y position of the press relative to the target element. */
|
|
29
|
+
y: number;
|
|
30
|
+
/**
|
|
31
|
+
* By default, press events stop propagation to parent elements.
|
|
32
|
+
* Call continuePropagation() to allow the event to bubble up.
|
|
33
|
+
*/
|
|
34
|
+
continuePropagation(): void;
|
|
35
|
+
}
|
|
36
|
+
/**
|
|
37
|
+
* PressEvent class that provides all press event data.
|
|
38
|
+
* Based on React-Aria's PressEvent implementation.
|
|
39
|
+
*/
|
|
40
|
+
declare class PressEvent implements IPressEvent {
|
|
41
|
+
#private;
|
|
42
|
+
type: PressEventType;
|
|
43
|
+
pointerType: PointerType;
|
|
44
|
+
target: Element;
|
|
45
|
+
shiftKey: boolean;
|
|
46
|
+
ctrlKey: boolean;
|
|
47
|
+
metaKey: boolean;
|
|
48
|
+
altKey: boolean;
|
|
49
|
+
x: number;
|
|
50
|
+
y: number;
|
|
51
|
+
constructor(type: PressEventType, pointerType: PointerType, originalEvent: Event | null, target: Element);
|
|
52
|
+
/**
|
|
53
|
+
* Call this to allow the press event to propagate to parent elements.
|
|
54
|
+
* By default, press events stop propagation.
|
|
55
|
+
*/
|
|
56
|
+
continuePropagation(): void;
|
|
57
|
+
/**
|
|
58
|
+
* Whether the event should stop propagation.
|
|
59
|
+
* Used internally by the press handler.
|
|
60
|
+
*/
|
|
61
|
+
get shouldStopPropagation(): boolean;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
/**
|
|
65
|
+
* createPress - Handles press interactions across mouse, touch, keyboard, and virtual clicks.
|
|
66
|
+
*
|
|
67
|
+
* This is a 1-1 port of React-Aria's usePress hook adapted for SolidJS.
|
|
68
|
+
* All behaviors, edge cases, and platform-specific handling are preserved.
|
|
69
|
+
*/
|
|
70
|
+
|
|
71
|
+
interface CreatePressProps {
|
|
72
|
+
/** Whether the target is currently disabled. */
|
|
73
|
+
isDisabled?: Accessor<boolean> | boolean;
|
|
74
|
+
/** Handler called when the press is released over the target. */
|
|
75
|
+
onPress?: (e: PressEvent) => void;
|
|
76
|
+
/** Handler called when a press interaction starts. */
|
|
77
|
+
onPressStart?: (e: PressEvent) => void;
|
|
78
|
+
/**
|
|
79
|
+
* Handler called when a press interaction ends, either
|
|
80
|
+
* over the target or when the pointer leaves the target.
|
|
81
|
+
*/
|
|
82
|
+
onPressEnd?: (e: PressEvent) => void;
|
|
83
|
+
/** Handler called when a press is released over the target, regardless of whether it started on the target. */
|
|
84
|
+
onPressUp?: (e: PressEvent) => void;
|
|
85
|
+
/** Handler called when the press state changes. */
|
|
86
|
+
onPressChange?: (isPressed: boolean) => void;
|
|
87
|
+
/** Whether the press should be visual only, not triggering onPress. */
|
|
88
|
+
isPressed?: Accessor<boolean> | boolean;
|
|
89
|
+
/** Whether to prevent focus when pressing. */
|
|
90
|
+
preventFocusOnPress?: boolean;
|
|
91
|
+
/** Whether long press should cancel when pointer moves out of target. */
|
|
92
|
+
shouldCancelOnPointerExit?: boolean;
|
|
93
|
+
/** Whether text selection should be allowed during press. */
|
|
94
|
+
allowTextSelectionOnPress?: boolean;
|
|
95
|
+
}
|
|
96
|
+
interface PressResult {
|
|
97
|
+
/** Whether the target is currently pressed. */
|
|
98
|
+
isPressed: Accessor<boolean>;
|
|
99
|
+
/** Props to spread on the target element. */
|
|
100
|
+
pressProps: JSX.HTMLAttributes<HTMLElement>;
|
|
101
|
+
}
|
|
102
|
+
/**
|
|
103
|
+
* Handles press interactions across mouse, touch, keyboard, and screen readers.
|
|
104
|
+
* Provides consistent press behavior regardless of input method.
|
|
105
|
+
*
|
|
106
|
+
* Based on react-aria's usePress but adapted for SolidJS.
|
|
107
|
+
*/
|
|
108
|
+
declare function createPress(props?: CreatePressProps): PressResult;
|
|
109
|
+
|
|
110
|
+
/**
|
|
111
|
+
* createFocus - Handles focus events for the immediate target.
|
|
112
|
+
*
|
|
113
|
+
* This is a 1-1 port of React-Aria's useFocus hook adapted for SolidJS.
|
|
114
|
+
* Focus events on child elements will be ignored.
|
|
115
|
+
*/
|
|
116
|
+
|
|
117
|
+
interface FocusEvents {
|
|
118
|
+
/** Handler that is called when the element receives focus. */
|
|
119
|
+
onFocus?: (e: FocusEvent) => void;
|
|
120
|
+
/** Handler that is called when the element loses focus. */
|
|
121
|
+
onBlur?: (e: FocusEvent) => void;
|
|
122
|
+
/** Handler that is called when the element's focus status changes. */
|
|
123
|
+
onFocusChange?: (isFocused: boolean) => void;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
/**
|
|
127
|
+
* createKeyboard - Handles keyboard interactions for a focusable element.
|
|
128
|
+
*
|
|
129
|
+
* This is a 1-1 port of React-Aria's useKeyboard hook adapted for SolidJS.
|
|
130
|
+
*/
|
|
131
|
+
|
|
132
|
+
/**
|
|
133
|
+
* Keyboard event with continuePropagation support.
|
|
134
|
+
* By default, keyboard events stop propagation.
|
|
135
|
+
*/
|
|
136
|
+
interface KeyboardEvent$1 extends globalThis.KeyboardEvent {
|
|
137
|
+
/** Call this to allow the event to propagate to parent elements. */
|
|
138
|
+
continuePropagation(): void;
|
|
139
|
+
}
|
|
140
|
+
interface KeyboardEvents {
|
|
141
|
+
/** Handler that is called when a key is pressed. */
|
|
142
|
+
onKeyDown?: (e: KeyboardEvent$1) => void;
|
|
143
|
+
/** Handler that is called when a key is released. */
|
|
144
|
+
onKeyUp?: (e: KeyboardEvent$1) => void;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
interface FocusableDOMProps {
|
|
148
|
+
/** Whether to exclude the element from the sequential tab order. */
|
|
149
|
+
excludeFromTabOrder?: boolean;
|
|
150
|
+
}
|
|
151
|
+
interface FocusableProps extends FocusEvents, KeyboardEvents {
|
|
152
|
+
/** Whether the element should receive focus on mount. */
|
|
153
|
+
autoFocus?: boolean;
|
|
154
|
+
}
|
|
155
|
+
interface CreateFocusableProps extends FocusableProps, FocusableDOMProps {
|
|
156
|
+
/** Whether focus should be disabled. */
|
|
157
|
+
isDisabled?: Accessor<boolean> | boolean;
|
|
158
|
+
}
|
|
159
|
+
interface FocusableResult {
|
|
160
|
+
/** Props to spread on the focusable element. */
|
|
161
|
+
focusableProps: JSX.HTMLAttributes<HTMLElement>;
|
|
162
|
+
}
|
|
163
|
+
/**
|
|
164
|
+
* Makes an element focusable, handling disabled state and tab order.
|
|
165
|
+
* Provides focus state tracking and autoFocus support.
|
|
166
|
+
*
|
|
167
|
+
* Based on react-aria's useFocusable but adapted for SolidJS.
|
|
168
|
+
*
|
|
169
|
+
* @example
|
|
170
|
+
* ```tsx
|
|
171
|
+
* import { createFocusable } from 'solidaria';
|
|
172
|
+
*
|
|
173
|
+
* function FocusableInput(props) {
|
|
174
|
+
* let ref;
|
|
175
|
+
* const { focusableProps } = createFocusable({
|
|
176
|
+
* autoFocus: props.autoFocus,
|
|
177
|
+
* onFocusChange: (focused) => console.log('Focus:', focused),
|
|
178
|
+
* });
|
|
179
|
+
*
|
|
180
|
+
* return (
|
|
181
|
+
* <input
|
|
182
|
+
* {...focusableProps}
|
|
183
|
+
* ref={(el) => { ref = el; focusableProps.ref?.(el); }}
|
|
184
|
+
* />
|
|
185
|
+
* );
|
|
186
|
+
* }
|
|
187
|
+
* ```
|
|
188
|
+
*/
|
|
189
|
+
declare function createFocusable(props?: CreateFocusableProps, ref?: (el: HTMLElement) => void): FocusableResult;
|
|
190
|
+
|
|
191
|
+
/**
|
|
192
|
+
* createFocusRing hook for Solidaria
|
|
193
|
+
*
|
|
194
|
+
* Determines whether a focus ring should be visible for a given element.
|
|
195
|
+
* Focus rings are visible when the user navigates with keyboard, but hidden
|
|
196
|
+
* when using mouse/touch.
|
|
197
|
+
*
|
|
198
|
+
* Port of @react-aria/focus useFocusRing.
|
|
199
|
+
*/
|
|
200
|
+
|
|
201
|
+
interface FocusRingProps {
|
|
202
|
+
/** Whether the element is a text input. */
|
|
203
|
+
isTextInput?: boolean;
|
|
204
|
+
/** Whether the element will be auto focused. */
|
|
205
|
+
autoFocus?: boolean;
|
|
206
|
+
/** Whether focus should be tracked within the element. */
|
|
207
|
+
within?: boolean;
|
|
208
|
+
}
|
|
209
|
+
interface FocusRingResult {
|
|
210
|
+
/** Whether the element is currently focused. */
|
|
211
|
+
isFocused: Accessor<boolean>;
|
|
212
|
+
/** Whether the focus ring should be visible. */
|
|
213
|
+
isFocusVisible: Accessor<boolean>;
|
|
214
|
+
/** Props to spread on the element to track focus. */
|
|
215
|
+
focusProps: JSX.HTMLAttributes<HTMLElement>;
|
|
216
|
+
}
|
|
217
|
+
/**
|
|
218
|
+
* Determines whether a focus ring should be visible for a given element.
|
|
219
|
+
*
|
|
220
|
+
* Focus rings are visible when:
|
|
221
|
+
* - The element is focused AND
|
|
222
|
+
* - The user is navigating with keyboard (not mouse/touch)
|
|
223
|
+
*
|
|
224
|
+
* For text inputs, focus rings are always visible when focused.
|
|
225
|
+
*/
|
|
226
|
+
declare function createFocusRing(props?: FocusRingProps): FocusRingResult;
|
|
227
|
+
|
|
228
|
+
/**
|
|
229
|
+
* Reactivity utilities for Solidaria
|
|
230
|
+
*
|
|
231
|
+
* Provides type-safe utilities for working with SolidJS reactivity patterns.
|
|
232
|
+
*/
|
|
233
|
+
|
|
234
|
+
/**
|
|
235
|
+
* A value that may be either a raw value or an accessor function.
|
|
236
|
+
* This is a common pattern in SolidJS for props that may be reactive.
|
|
237
|
+
*/
|
|
238
|
+
type MaybeAccessor<T> = T | Accessor<T>;
|
|
239
|
+
/**
|
|
240
|
+
* Unwraps a MaybeAccessor to get the underlying value.
|
|
241
|
+
* If the input is a function, it calls it to get the value.
|
|
242
|
+
* Otherwise, it returns the value directly.
|
|
243
|
+
*
|
|
244
|
+
* @param value - The value or accessor to unwrap.
|
|
245
|
+
*/
|
|
246
|
+
declare function access<T>(value: MaybeAccessor<T>): T;
|
|
247
|
+
/**
|
|
248
|
+
* A value that may be undefined or an accessor that returns the value or undefined.
|
|
249
|
+
*/
|
|
250
|
+
type MaybeAccessorValue<T> = T | undefined | Accessor<T | undefined>;
|
|
251
|
+
/**
|
|
252
|
+
* Checks if a value is an accessor function.
|
|
253
|
+
*/
|
|
254
|
+
declare function isAccessor<T>(value: MaybeAccessor<T>): value is Accessor<T>;
|
|
255
|
+
|
|
256
|
+
/**
|
|
257
|
+
* createHover hook for Solidaria
|
|
258
|
+
*
|
|
259
|
+
* Handles pointer hover interactions for an element. Normalizes behavior
|
|
260
|
+
* across browsers and platforms, and ignores emulated mouse events on touch devices.
|
|
261
|
+
*
|
|
262
|
+
* Port of @react-aria/interactions useHover.
|
|
263
|
+
*/
|
|
264
|
+
|
|
265
|
+
interface HoverEvent {
|
|
266
|
+
/** The type of hover event being fired. */
|
|
267
|
+
type: 'hoverstart' | 'hoverend';
|
|
268
|
+
/** The pointer type that triggered the hover event. */
|
|
269
|
+
pointerType: 'mouse' | 'pen';
|
|
270
|
+
/** The target element of the hover event. */
|
|
271
|
+
target: Element;
|
|
272
|
+
}
|
|
273
|
+
interface HoverEvents {
|
|
274
|
+
/** Handler called when the hover starts. */
|
|
275
|
+
onHoverStart?: (e: HoverEvent) => void;
|
|
276
|
+
/** Handler called when the hover ends. */
|
|
277
|
+
onHoverEnd?: (e: HoverEvent) => void;
|
|
278
|
+
/** Handler called when the hover state changes. */
|
|
279
|
+
onHoverChange?: (isHovering: boolean) => void;
|
|
280
|
+
}
|
|
281
|
+
interface CreateHoverProps extends HoverEvents {
|
|
282
|
+
/** Whether the hover events should be disabled. */
|
|
283
|
+
isDisabled?: boolean;
|
|
284
|
+
}
|
|
285
|
+
interface HoverResult {
|
|
286
|
+
/** Props to spread on the target element. */
|
|
287
|
+
hoverProps: JSX.HTMLAttributes<HTMLElement>;
|
|
288
|
+
/** Whether the element is currently hovered. */
|
|
289
|
+
isHovered: Accessor<boolean>;
|
|
290
|
+
}
|
|
291
|
+
/**
|
|
292
|
+
* Handles pointer hover interactions for an element.
|
|
293
|
+
*/
|
|
294
|
+
declare function createHover(props?: MaybeAccessor<CreateHoverProps>): HoverResult;
|
|
295
|
+
|
|
296
|
+
interface AriaButtonProps {
|
|
297
|
+
/** Whether the button is disabled. */
|
|
298
|
+
isDisabled?: Accessor<boolean> | boolean;
|
|
299
|
+
/** Handler called when the press is released over the target. */
|
|
300
|
+
onPress?: (e: PressEvent) => void;
|
|
301
|
+
/** Handler called when a press interaction starts. */
|
|
302
|
+
onPressStart?: (e: PressEvent) => void;
|
|
303
|
+
/** Handler called when a press interaction ends. */
|
|
304
|
+
onPressEnd?: (e: PressEvent) => void;
|
|
305
|
+
/** Handler called when a press is released over the target. */
|
|
306
|
+
onPressUp?: (e: PressEvent) => void;
|
|
307
|
+
/** Handler called when the press state changes. */
|
|
308
|
+
onPressChange?: (isPressed: boolean) => void;
|
|
309
|
+
/** Whether the button should not receive focus on press. */
|
|
310
|
+
preventFocusOnPress?: boolean;
|
|
311
|
+
/** Whether the element should receive focus on render. */
|
|
312
|
+
autoFocus?: boolean;
|
|
313
|
+
/** The HTML element type to use for the button. */
|
|
314
|
+
elementType?: 'button' | 'a' | 'div' | 'input' | 'span';
|
|
315
|
+
/** The URL to link to (for anchor elements). */
|
|
316
|
+
href?: string;
|
|
317
|
+
/** The target for the link (for anchor elements). */
|
|
318
|
+
target?: string;
|
|
319
|
+
/** The rel attribute for the link (for anchor elements). */
|
|
320
|
+
rel?: string;
|
|
321
|
+
/** The type attribute for button elements. */
|
|
322
|
+
type?: 'button' | 'submit' | 'reset';
|
|
323
|
+
/** Whether the button is in a pressed state (controlled). */
|
|
324
|
+
'aria-pressed'?: boolean | 'true' | 'false' | 'mixed';
|
|
325
|
+
/** Whether the button has a popup. */
|
|
326
|
+
'aria-haspopup'?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | 'true' | 'false';
|
|
327
|
+
/** Whether the popup is expanded. */
|
|
328
|
+
'aria-expanded'?: boolean | 'true' | 'false';
|
|
329
|
+
/** The accessible label for the button. */
|
|
330
|
+
'aria-label'?: string;
|
|
331
|
+
/** The id of the element that labels the button. */
|
|
332
|
+
'aria-labelledby'?: string;
|
|
333
|
+
/** The id of the element that describes the button. */
|
|
334
|
+
'aria-describedby'?: string;
|
|
335
|
+
/** Identifies the element (or elements) whose contents or presence are controlled by the button. */
|
|
336
|
+
'aria-controls'?: string;
|
|
337
|
+
/** Indicates the current "pressed" state of toggle buttons. */
|
|
338
|
+
'aria-current'?: boolean | 'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false';
|
|
339
|
+
/** Additional attributes for form buttons. */
|
|
340
|
+
form?: string;
|
|
341
|
+
formAction?: string;
|
|
342
|
+
formEncType?: string;
|
|
343
|
+
formMethod?: string;
|
|
344
|
+
formNoValidate?: boolean;
|
|
345
|
+
formTarget?: string;
|
|
346
|
+
/** The name attribute for form buttons. */
|
|
347
|
+
name?: string;
|
|
348
|
+
/** The value attribute for form buttons. */
|
|
349
|
+
value?: string;
|
|
350
|
+
/** Whether to exclude the button from the tab order. */
|
|
351
|
+
excludeFromTabOrder?: boolean;
|
|
352
|
+
}
|
|
353
|
+
interface ButtonAria {
|
|
354
|
+
/** Props to spread on the button element. */
|
|
355
|
+
buttonProps: Record<string, unknown>;
|
|
356
|
+
/** Whether the button is currently pressed. */
|
|
357
|
+
isPressed: Accessor<boolean>;
|
|
358
|
+
}
|
|
359
|
+
|
|
360
|
+
/**
|
|
361
|
+
* Provides the behavior and accessibility implementation for a button component.
|
|
362
|
+
* Handles press interactions across mouse, touch, keyboard and screen readers.
|
|
363
|
+
*
|
|
364
|
+
* Based on react-aria's useButton but adapted for SolidJS.
|
|
365
|
+
*
|
|
366
|
+
* @example
|
|
367
|
+
* ```tsx
|
|
368
|
+
* import { createButton } from 'solidaria';
|
|
369
|
+
*
|
|
370
|
+
* function Button(props) {
|
|
371
|
+
* let ref;
|
|
372
|
+
* const { buttonProps, isPressed } = createButton(props);
|
|
373
|
+
*
|
|
374
|
+
* return (
|
|
375
|
+
* <button
|
|
376
|
+
* {...buttonProps}
|
|
377
|
+
* ref={ref}
|
|
378
|
+
* class={isPressed() ? 'pressed' : ''}
|
|
379
|
+
* >
|
|
380
|
+
* {props.children}
|
|
381
|
+
* </button>
|
|
382
|
+
* );
|
|
383
|
+
* }
|
|
384
|
+
* ```
|
|
385
|
+
*/
|
|
386
|
+
declare function createButton(props?: AriaButtonProps): ButtonAria;
|
|
387
|
+
|
|
388
|
+
interface AriaToggleButtonProps extends Omit<AriaButtonProps, 'aria-pressed'> {
|
|
389
|
+
/** Whether the button is selected (controlled). */
|
|
390
|
+
isSelected?: Accessor<boolean> | boolean;
|
|
391
|
+
/** Handler called when the button's selection state changes. */
|
|
392
|
+
onChange?: (isSelected: boolean) => void;
|
|
393
|
+
/** The default selected state (uncontrolled). */
|
|
394
|
+
defaultSelected?: boolean;
|
|
395
|
+
}
|
|
396
|
+
interface ToggleButtonAria extends ButtonAria {
|
|
397
|
+
/** Whether the button is currently selected. */
|
|
398
|
+
isSelected: Accessor<boolean>;
|
|
399
|
+
}
|
|
400
|
+
/**
|
|
401
|
+
* Provides the behavior and accessibility implementation for a toggle button component.
|
|
402
|
+
* Toggle buttons allow users to toggle a selection on or off.
|
|
403
|
+
*
|
|
404
|
+
* Based on react-aria's useToggleButton but adapted for SolidJS.
|
|
405
|
+
*
|
|
406
|
+
* @example
|
|
407
|
+
* ```tsx
|
|
408
|
+
* import { createToggleButton } from 'solidaria';
|
|
409
|
+
*
|
|
410
|
+
* function ToggleButton(props) {
|
|
411
|
+
* const { buttonProps, isPressed, isSelected } = createToggleButton(props);
|
|
412
|
+
*
|
|
413
|
+
* return (
|
|
414
|
+
* <button
|
|
415
|
+
* {...buttonProps}
|
|
416
|
+
* class={isSelected() ? 'selected' : ''}
|
|
417
|
+
* style={{ opacity: isPressed() ? 0.8 : 1 }}
|
|
418
|
+
* >
|
|
419
|
+
* {props.children}
|
|
420
|
+
* </button>
|
|
421
|
+
* );
|
|
422
|
+
* }
|
|
423
|
+
* ```
|
|
424
|
+
*/
|
|
425
|
+
declare function createToggleButton(props?: AriaToggleButtonProps): ToggleButtonAria;
|
|
426
|
+
|
|
427
|
+
/**
|
|
428
|
+
* Toggle hook for Solidaria
|
|
429
|
+
*
|
|
430
|
+
* Handles interactions for toggle elements, e.g. Checkboxes and Switches.
|
|
431
|
+
*
|
|
432
|
+
* This is a 1:1 port of @react-aria/toggle's useToggle hook.
|
|
433
|
+
*/
|
|
434
|
+
|
|
435
|
+
interface AriaToggleProps {
|
|
436
|
+
/** Whether the element should be selected (controlled). */
|
|
437
|
+
isSelected?: boolean;
|
|
438
|
+
/** Whether the element should be selected by default (uncontrolled). */
|
|
439
|
+
defaultSelected?: boolean;
|
|
440
|
+
/** Handler that is called when the element's selection state changes. */
|
|
441
|
+
onChange?: (isSelected: boolean) => void;
|
|
442
|
+
/** The value of the input element, used when submitting an HTML form. */
|
|
443
|
+
value?: string;
|
|
444
|
+
/** The name of the input element, used when submitting an HTML form. */
|
|
445
|
+
name?: string;
|
|
446
|
+
/** The form to associate the input with. */
|
|
447
|
+
form?: string;
|
|
448
|
+
/** Whether the element is disabled. */
|
|
449
|
+
isDisabled?: boolean;
|
|
450
|
+
/** Whether the element is read only. */
|
|
451
|
+
isReadOnly?: boolean;
|
|
452
|
+
/** Whether the element is required. */
|
|
453
|
+
isRequired?: boolean;
|
|
454
|
+
/** Whether the element is invalid. */
|
|
455
|
+
isInvalid?: boolean;
|
|
456
|
+
/** The element's children. */
|
|
457
|
+
children?: JSX.Element;
|
|
458
|
+
/** Defines a string value that labels the current element. */
|
|
459
|
+
'aria-label'?: string;
|
|
460
|
+
/** Identifies the element (or elements) that labels the current element. */
|
|
461
|
+
'aria-labelledby'?: string;
|
|
462
|
+
/** Identifies the element (or elements) that describes the object. */
|
|
463
|
+
'aria-describedby'?: string;
|
|
464
|
+
/** Identifies the element (or elements) that provide an error message for the object. */
|
|
465
|
+
'aria-errormessage'?: string;
|
|
466
|
+
/** Identifies the element (or elements) whose contents or presence are controlled by the current element. */
|
|
467
|
+
'aria-controls'?: string;
|
|
468
|
+
/** The element's unique identifier. */
|
|
469
|
+
id?: string;
|
|
470
|
+
/** Handler that is called when the press is released over the target. */
|
|
471
|
+
onPress?: (e: PressEvent) => void;
|
|
472
|
+
/** Handler that is called when a press interaction starts. */
|
|
473
|
+
onPressStart?: (e: PressEvent) => void;
|
|
474
|
+
/** Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target. */
|
|
475
|
+
onPressEnd?: (e: PressEvent) => void;
|
|
476
|
+
/** Handler that is called when the press state changes. */
|
|
477
|
+
onPressChange?: (isPressed: boolean) => void;
|
|
478
|
+
/** Handler that is called when a press is released over the target, regardless of whether it started on the target or not. */
|
|
479
|
+
onPressUp?: (e: PressEvent) => void;
|
|
480
|
+
/** Handler that is called when the element is clicked. */
|
|
481
|
+
onClick?: (e: MouseEvent) => void;
|
|
482
|
+
/** Handler that is called when the element receives focus. */
|
|
483
|
+
onFocus?: (e: FocusEvent) => void;
|
|
484
|
+
/** Handler that is called when the element loses focus. */
|
|
485
|
+
onBlur?: (e: FocusEvent) => void;
|
|
486
|
+
/** Handler that is called when the element's focus status changes. */
|
|
487
|
+
onFocusChange?: (isFocused: boolean) => void;
|
|
488
|
+
/** Handler that is called when a key is pressed. */
|
|
489
|
+
onKeyDown?: (e: KeyboardEvent) => void;
|
|
490
|
+
/** Handler that is called when a key is released. */
|
|
491
|
+
onKeyUp?: (e: KeyboardEvent) => void;
|
|
492
|
+
/** Whether to exclude the element from the tab order. */
|
|
493
|
+
excludeFromTabOrder?: boolean;
|
|
494
|
+
/** Whether to autofocus the element. */
|
|
495
|
+
autoFocus?: boolean;
|
|
496
|
+
}
|
|
497
|
+
interface ToggleAria {
|
|
498
|
+
/** Props to be spread on the label element. */
|
|
499
|
+
labelProps: JSX.LabelHTMLAttributes<HTMLLabelElement>;
|
|
500
|
+
/** Props to be spread on the input element. */
|
|
501
|
+
inputProps: JSX.InputHTMLAttributes<HTMLInputElement>;
|
|
502
|
+
/** Whether the toggle is selected. */
|
|
503
|
+
isSelected: Accessor<boolean>;
|
|
504
|
+
/** Whether the toggle is in a pressed state. */
|
|
505
|
+
isPressed: Accessor<boolean>;
|
|
506
|
+
/** Whether the toggle is disabled. */
|
|
507
|
+
isDisabled: boolean;
|
|
508
|
+
/** Whether the toggle is read only. */
|
|
509
|
+
isReadOnly: boolean;
|
|
510
|
+
/** Whether the toggle is invalid. */
|
|
511
|
+
isInvalid: boolean;
|
|
512
|
+
}
|
|
513
|
+
/**
|
|
514
|
+
* Handles interactions for toggle elements, e.g. Checkboxes and Switches.
|
|
515
|
+
*/
|
|
516
|
+
declare function createToggle(props: MaybeAccessor<AriaToggleProps>, state: ToggleState, ref: () => HTMLInputElement | null): ToggleAria;
|
|
517
|
+
|
|
518
|
+
/**
|
|
519
|
+
* Checkbox hook for Solidaria
|
|
520
|
+
*
|
|
521
|
+
* Provides the behavior and accessibility implementation for a checkbox component.
|
|
522
|
+
* Checkboxes allow users to select multiple items from a list of individual items,
|
|
523
|
+
* or to mark one individual item as selected.
|
|
524
|
+
*
|
|
525
|
+
* This is a 1:1 port of @react-aria/checkbox's useCheckbox hook.
|
|
526
|
+
*/
|
|
527
|
+
|
|
528
|
+
interface AriaCheckboxProps extends AriaToggleProps {
|
|
529
|
+
/**
|
|
530
|
+
* Indeterminism is presentational only.
|
|
531
|
+
* The indeterminate visual representation remains regardless of user interaction.
|
|
532
|
+
*/
|
|
533
|
+
isIndeterminate?: boolean;
|
|
534
|
+
/**
|
|
535
|
+
* Whether the checkbox is required.
|
|
536
|
+
*/
|
|
537
|
+
isRequired?: boolean;
|
|
538
|
+
/**
|
|
539
|
+
* The validation behavior for the checkbox.
|
|
540
|
+
* @default 'aria'
|
|
541
|
+
*/
|
|
542
|
+
validationBehavior?: 'aria' | 'native';
|
|
543
|
+
}
|
|
544
|
+
interface CheckboxAria {
|
|
545
|
+
/** Props for the label wrapper element. */
|
|
546
|
+
labelProps: JSX.LabelHTMLAttributes<HTMLLabelElement>;
|
|
547
|
+
/** Props for the input element. */
|
|
548
|
+
inputProps: JSX.InputHTMLAttributes<HTMLInputElement>;
|
|
549
|
+
/** Whether the checkbox is selected. */
|
|
550
|
+
isSelected: Accessor<boolean>;
|
|
551
|
+
/** Whether the checkbox is in a pressed state. */
|
|
552
|
+
isPressed: Accessor<boolean>;
|
|
553
|
+
/** Whether the checkbox is disabled. */
|
|
554
|
+
isDisabled: boolean;
|
|
555
|
+
/** Whether the checkbox is read only. */
|
|
556
|
+
isReadOnly: boolean;
|
|
557
|
+
/** Whether the checkbox is invalid. */
|
|
558
|
+
isInvalid: boolean;
|
|
559
|
+
}
|
|
560
|
+
/**
|
|
561
|
+
* Provides the behavior and accessibility implementation for a checkbox component.
|
|
562
|
+
* Checkboxes allow users to select multiple items from a list of individual items,
|
|
563
|
+
* or to mark one individual item as selected.
|
|
564
|
+
*
|
|
565
|
+
* @param props - Props for the checkbox.
|
|
566
|
+
* @param state - State for the checkbox, as returned by `createToggleState`.
|
|
567
|
+
* @param inputRef - A ref accessor for the HTML input element.
|
|
568
|
+
*/
|
|
569
|
+
declare function createCheckbox(props: MaybeAccessor<AriaCheckboxProps>, state: ToggleState, inputRef: () => HTMLInputElement | null): CheckboxAria;
|
|
570
|
+
|
|
571
|
+
/**
|
|
572
|
+
* Checkbox group hook for Solidaria
|
|
573
|
+
*
|
|
574
|
+
* Provides the behavior and accessibility implementation for a checkbox group component.
|
|
575
|
+
* Checkbox groups allow users to select multiple items from a list of options.
|
|
576
|
+
*
|
|
577
|
+
* This is a 1:1 port of @react-aria/checkbox's useCheckboxGroup hook.
|
|
578
|
+
*/
|
|
579
|
+
|
|
580
|
+
interface AriaCheckboxGroupProps extends CheckboxGroupProps {
|
|
581
|
+
/** Defines a string value that labels the current element. */
|
|
582
|
+
'aria-label'?: string;
|
|
583
|
+
/** Identifies the element (or elements) that labels the current element. */
|
|
584
|
+
'aria-labelledby'?: string;
|
|
585
|
+
/** Identifies the element (or elements) that describes the object. */
|
|
586
|
+
'aria-describedby'?: string;
|
|
587
|
+
/** Identifies the element (or elements) that provide a detailed, extended description for the object. */
|
|
588
|
+
'aria-details'?: string;
|
|
589
|
+
/** A description for the field. Provides a hint such as specific requirements for what to choose. */
|
|
590
|
+
description?: JSX.Element;
|
|
591
|
+
/** An error message for the field. */
|
|
592
|
+
errorMessage?: JSX.Element;
|
|
593
|
+
}
|
|
594
|
+
interface CheckboxGroupAria {
|
|
595
|
+
/** Props for the checkbox group wrapper element. */
|
|
596
|
+
groupProps: JSX.HTMLAttributes<HTMLElement>;
|
|
597
|
+
/** Props for the checkbox group's visible label (if any). */
|
|
598
|
+
labelProps: JSX.HTMLAttributes<HTMLElement>;
|
|
599
|
+
/** Props for the checkbox group description element, if any. */
|
|
600
|
+
descriptionProps: JSX.HTMLAttributes<HTMLElement>;
|
|
601
|
+
/** Props for the checkbox group error message element, if any. */
|
|
602
|
+
errorMessageProps: JSX.HTMLAttributes<HTMLElement>;
|
|
603
|
+
/** Whether the checkbox group is invalid. */
|
|
604
|
+
isInvalid: boolean;
|
|
605
|
+
}
|
|
606
|
+
declare const checkboxGroupData: WeakMap<CheckboxGroupState, {
|
|
607
|
+
name?: string;
|
|
608
|
+
form?: string;
|
|
609
|
+
descriptionId?: string;
|
|
610
|
+
errorMessageId?: string;
|
|
611
|
+
validationBehavior: "aria" | "native";
|
|
612
|
+
}>;
|
|
613
|
+
/**
|
|
614
|
+
* Provides the behavior and accessibility implementation for a checkbox group component.
|
|
615
|
+
* Checkbox groups allow users to select multiple items from a list of options.
|
|
616
|
+
*
|
|
617
|
+
* @param props - Props for the checkbox group.
|
|
618
|
+
* @param state - State for the checkbox group, as returned by `createCheckboxGroupState`.
|
|
619
|
+
*/
|
|
620
|
+
declare function createCheckboxGroup(props: MaybeAccessor<AriaCheckboxGroupProps>, state: CheckboxGroupState): CheckboxGroupAria;
|
|
621
|
+
|
|
622
|
+
/**
|
|
623
|
+
* Checkbox group item hook for Solidaria
|
|
624
|
+
*
|
|
625
|
+
* Provides the behavior and accessibility implementation for a checkbox component
|
|
626
|
+
* contained within a checkbox group.
|
|
627
|
+
*
|
|
628
|
+
* This is a 1:1 port of @react-aria/checkbox's useCheckboxGroupItem hook.
|
|
629
|
+
*/
|
|
630
|
+
|
|
631
|
+
interface AriaCheckboxGroupItemProps extends Omit<AriaCheckboxProps, 'isSelected' | 'defaultSelected'> {
|
|
632
|
+
/** The value of the checkbox. */
|
|
633
|
+
value: string;
|
|
634
|
+
}
|
|
635
|
+
/**
|
|
636
|
+
* Provides the behavior and accessibility implementation for a checkbox component
|
|
637
|
+
* contained within a checkbox group.
|
|
638
|
+
*
|
|
639
|
+
* @param props - Props for the checkbox.
|
|
640
|
+
* @param state - State for the checkbox group, as returned by `createCheckboxGroupState`.
|
|
641
|
+
* @param inputRef - A ref accessor for the HTML input element.
|
|
642
|
+
*/
|
|
643
|
+
declare function createCheckboxGroupItem(props: MaybeAccessor<AriaCheckboxGroupItemProps>, state: CheckboxGroupState, inputRef: () => HTMLInputElement | null): CheckboxAria;
|
|
644
|
+
|
|
645
|
+
/**
|
|
646
|
+
* Radio group hook for Solidaria
|
|
647
|
+
*
|
|
648
|
+
* Provides the behavior and accessibility implementation for a radio group component.
|
|
649
|
+
* Radio groups allow users to select a single item from a list of mutually exclusive options.
|
|
650
|
+
*
|
|
651
|
+
* This is a 1:1 port of @react-aria/radio's useRadioGroup hook.
|
|
652
|
+
*/
|
|
653
|
+
|
|
654
|
+
interface AriaRadioGroupProps {
|
|
655
|
+
/** The content to display as the label. */
|
|
656
|
+
label?: JSX.Element;
|
|
657
|
+
/** A description for the radio group. Provides additional context. */
|
|
658
|
+
description?: JSX.Element;
|
|
659
|
+
/** An error message for the radio group. */
|
|
660
|
+
errorMessage?: JSX.Element | ((validation: {
|
|
661
|
+
isInvalid: boolean;
|
|
662
|
+
validationErrors: string[];
|
|
663
|
+
}) => JSX.Element);
|
|
664
|
+
/** Whether the radio group is disabled. */
|
|
665
|
+
isDisabled?: boolean;
|
|
666
|
+
/** Whether the radio group is read only. */
|
|
667
|
+
isReadOnly?: boolean;
|
|
668
|
+
/** Whether the radio group is required. */
|
|
669
|
+
isRequired?: boolean;
|
|
670
|
+
/** Whether the radio group is invalid. */
|
|
671
|
+
isInvalid?: boolean;
|
|
672
|
+
/** The axis the Radio Button(s) should align with. Defaults to 'vertical'. */
|
|
673
|
+
orientation?: 'horizontal' | 'vertical';
|
|
674
|
+
/** The name of the radio group, used when submitting an HTML form. */
|
|
675
|
+
name?: string;
|
|
676
|
+
/** The form to associate the radio group with. */
|
|
677
|
+
form?: string;
|
|
678
|
+
/** Validation behavior for the radio group. */
|
|
679
|
+
validationBehavior?: 'aria' | 'native';
|
|
680
|
+
/** Handler that is called when the radio group receives focus. */
|
|
681
|
+
onFocus?: (e: FocusEvent) => void;
|
|
682
|
+
/** Handler that is called when the radio group loses focus. */
|
|
683
|
+
onBlur?: (e: FocusEvent) => void;
|
|
684
|
+
/** Handler that is called when the radio group's focus status changes. */
|
|
685
|
+
onFocusChange?: (isFocused: boolean) => void;
|
|
686
|
+
/** Defines a string value that labels the current element. */
|
|
687
|
+
'aria-label'?: string;
|
|
688
|
+
/** Identifies the element (or elements) that labels the current element. */
|
|
689
|
+
'aria-labelledby'?: string;
|
|
690
|
+
/** Identifies the element (or elements) that describes the object. */
|
|
691
|
+
'aria-describedby'?: string;
|
|
692
|
+
/** Identifies the element (or elements) that provide an error message for the object. */
|
|
693
|
+
'aria-errormessage'?: string;
|
|
694
|
+
/** The element's unique identifier. */
|
|
695
|
+
id?: string;
|
|
696
|
+
}
|
|
697
|
+
interface RadioGroupAria {
|
|
698
|
+
/** Props for the radio group wrapper element. */
|
|
699
|
+
radioGroupProps: JSX.HTMLAttributes<HTMLDivElement>;
|
|
700
|
+
/** Props for the radio group's visible label (if any). */
|
|
701
|
+
labelProps: JSX.HTMLAttributes<HTMLElement>;
|
|
702
|
+
/** Props for the radio group description element, if any. */
|
|
703
|
+
descriptionProps: JSX.HTMLAttributes<HTMLElement>;
|
|
704
|
+
/** Props for the radio group error message element, if any. */
|
|
705
|
+
errorMessageProps: JSX.HTMLAttributes<HTMLElement>;
|
|
706
|
+
/** Whether the radio group is invalid. */
|
|
707
|
+
isInvalid: boolean;
|
|
708
|
+
/** Validation errors, if any. */
|
|
709
|
+
validationErrors: string[];
|
|
710
|
+
/** Validation details, if any. */
|
|
711
|
+
validationDetails: Record<string, boolean>;
|
|
712
|
+
}
|
|
713
|
+
interface RadioGroupData {
|
|
714
|
+
name: string;
|
|
715
|
+
form: string | undefined;
|
|
716
|
+
descriptionId: string | undefined;
|
|
717
|
+
errorMessageId: string | undefined;
|
|
718
|
+
validationBehavior: 'aria' | 'native';
|
|
719
|
+
}
|
|
720
|
+
declare const radioGroupData: WeakMap<RadioGroupState, RadioGroupData>;
|
|
721
|
+
/**
|
|
722
|
+
* Provides the behavior and accessibility implementation for a radio group component.
|
|
723
|
+
* Radio groups allow users to select a single item from a list of mutually exclusive options.
|
|
724
|
+
*/
|
|
725
|
+
declare function createRadioGroup(props: MaybeAccessor<AriaRadioGroupProps>, state: RadioGroupState): RadioGroupAria;
|
|
726
|
+
|
|
727
|
+
/**
|
|
728
|
+
* Radio hook for Solidaria
|
|
729
|
+
*
|
|
730
|
+
* Provides the behavior and accessibility implementation for an individual
|
|
731
|
+
* radio button in a radio group.
|
|
732
|
+
*
|
|
733
|
+
* This is a 1:1 port of @react-aria/radio's useRadio hook.
|
|
734
|
+
*/
|
|
735
|
+
|
|
736
|
+
interface AriaRadioProps {
|
|
737
|
+
/** The value of the radio button, used when submitting an HTML form. */
|
|
738
|
+
value: string;
|
|
739
|
+
/** Whether the radio button is disabled. */
|
|
740
|
+
isDisabled?: boolean;
|
|
741
|
+
/** The label for the radio button. */
|
|
742
|
+
children?: JSX.Element;
|
|
743
|
+
/** Defines a string value that labels the current element. */
|
|
744
|
+
'aria-label'?: string;
|
|
745
|
+
/** Identifies the element (or elements) that labels the current element. */
|
|
746
|
+
'aria-labelledby'?: string;
|
|
747
|
+
/** Identifies the element (or elements) that describes the object. */
|
|
748
|
+
'aria-describedby'?: string;
|
|
749
|
+
/** Handler that is called when the press is released over the target. */
|
|
750
|
+
onPress?: (e: PressEvent) => void;
|
|
751
|
+
/** Handler that is called when a press interaction starts. */
|
|
752
|
+
onPressStart?: (e: PressEvent) => void;
|
|
753
|
+
/** Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target. */
|
|
754
|
+
onPressEnd?: (e: PressEvent) => void;
|
|
755
|
+
/** Handler that is called when the press state changes. */
|
|
756
|
+
onPressChange?: (isPressed: boolean) => void;
|
|
757
|
+
/** Handler that is called when a press is released over the target, regardless of whether it started on the target or not. */
|
|
758
|
+
onPressUp?: (e: PressEvent) => void;
|
|
759
|
+
/** Handler that is called when the element is clicked. */
|
|
760
|
+
onClick?: (e: MouseEvent) => void;
|
|
761
|
+
/** Handler that is called when the element receives focus. */
|
|
762
|
+
onFocus?: (e: FocusEvent) => void;
|
|
763
|
+
/** Handler that is called when the element loses focus. */
|
|
764
|
+
onBlur?: (e: FocusEvent) => void;
|
|
765
|
+
/** Handler that is called when the element's focus status changes. */
|
|
766
|
+
onFocusChange?: (isFocused: boolean) => void;
|
|
767
|
+
/** Handler that is called when a key is pressed. */
|
|
768
|
+
onKeyDown?: (e: KeyboardEvent) => void;
|
|
769
|
+
/** Handler that is called when a key is released. */
|
|
770
|
+
onKeyUp?: (e: KeyboardEvent) => void;
|
|
771
|
+
/** Whether to autofocus the element. */
|
|
772
|
+
autoFocus?: boolean;
|
|
773
|
+
}
|
|
774
|
+
interface RadioAria {
|
|
775
|
+
/** Props for the label wrapper element. */
|
|
776
|
+
labelProps: JSX.LabelHTMLAttributes<HTMLLabelElement>;
|
|
777
|
+
/** Props for the input element. */
|
|
778
|
+
inputProps: JSX.InputHTMLAttributes<HTMLInputElement>;
|
|
779
|
+
/** Whether the radio is disabled. */
|
|
780
|
+
isDisabled: boolean;
|
|
781
|
+
/** Whether the radio is currently selected. */
|
|
782
|
+
isSelected: Accessor<boolean>;
|
|
783
|
+
/** Whether the radio is in a pressed state. */
|
|
784
|
+
isPressed: Accessor<boolean>;
|
|
785
|
+
}
|
|
786
|
+
/**
|
|
787
|
+
* Provides the behavior and accessibility implementation for an individual
|
|
788
|
+
* radio button in a radio group.
|
|
789
|
+
*/
|
|
790
|
+
declare function createRadio(props: MaybeAccessor<AriaRadioProps>, state: RadioGroupState, ref: () => HTMLInputElement | null): RadioAria;
|
|
791
|
+
|
|
792
|
+
/**
|
|
793
|
+
* Label hook for Solidaria
|
|
794
|
+
*
|
|
795
|
+
* Provides the accessibility implementation for labels and their associated elements.
|
|
796
|
+
* Labels provide context for user inputs.
|
|
797
|
+
*
|
|
798
|
+
* This is a 1:1 port of @react-aria/label's useLabel hook.
|
|
799
|
+
*/
|
|
800
|
+
|
|
801
|
+
interface AriaLabelingProps {
|
|
802
|
+
/** Defines a string value that labels the current element. */
|
|
803
|
+
'aria-label'?: string;
|
|
804
|
+
/** Identifies the element (or elements) that labels the current element. */
|
|
805
|
+
'aria-labelledby'?: string;
|
|
806
|
+
/** Identifies the element (or elements) that describes the object. */
|
|
807
|
+
'aria-describedby'?: string;
|
|
808
|
+
/** Identifies the element (or elements) that provide a detailed, extended description for the object. */
|
|
809
|
+
'aria-details'?: string;
|
|
810
|
+
}
|
|
811
|
+
interface LabelableProps {
|
|
812
|
+
/** The content to display as the label. */
|
|
813
|
+
label?: JSX.Element;
|
|
814
|
+
}
|
|
815
|
+
interface DOMProps {
|
|
816
|
+
/** The element's unique identifier. */
|
|
817
|
+
id?: string;
|
|
818
|
+
}
|
|
819
|
+
interface LabelAriaProps extends LabelableProps, DOMProps, AriaLabelingProps {
|
|
820
|
+
/**
|
|
821
|
+
* The HTML element used to render the label, e.g. 'label', or 'span'.
|
|
822
|
+
* @default 'label'
|
|
823
|
+
*/
|
|
824
|
+
labelElementType?: 'label' | 'span' | 'div';
|
|
825
|
+
}
|
|
826
|
+
interface LabelAria {
|
|
827
|
+
/** Props to apply to the label container element. */
|
|
828
|
+
labelProps: JSX.LabelHTMLAttributes<HTMLLabelElement> | JSX.HTMLAttributes<HTMLSpanElement>;
|
|
829
|
+
/** Props to apply to the field container element being labeled. */
|
|
830
|
+
fieldProps: AriaLabelingProps & DOMProps;
|
|
831
|
+
}
|
|
832
|
+
/**
|
|
833
|
+
* Provides the accessibility implementation for labels and their associated elements.
|
|
834
|
+
* Labels provide context for user inputs.
|
|
835
|
+
*
|
|
836
|
+
* @param props - The props for labels and fields.
|
|
837
|
+
*/
|
|
838
|
+
declare function createLabel(props: MaybeAccessor<LabelAriaProps>): LabelAria;
|
|
839
|
+
|
|
840
|
+
/**
|
|
841
|
+
* Field hook for Solidaria
|
|
842
|
+
*
|
|
843
|
+
* Provides the accessibility implementation for input fields.
|
|
844
|
+
* Fields accept user input, gain context from their label, and may display
|
|
845
|
+
* a description or error message.
|
|
846
|
+
*
|
|
847
|
+
* This is a 1:1 port of @react-aria/label's useField hook.
|
|
848
|
+
*/
|
|
849
|
+
|
|
850
|
+
interface HelpTextProps {
|
|
851
|
+
/** A description for the field. Provides a hint such as specific requirements for what to choose. */
|
|
852
|
+
description?: JSX.Element;
|
|
853
|
+
/** An error message for the field. */
|
|
854
|
+
errorMessage?: JSX.Element | ((validation: ValidationResult) => JSX.Element);
|
|
855
|
+
}
|
|
856
|
+
interface ValidationResult {
|
|
857
|
+
/** Whether the input value is invalid. */
|
|
858
|
+
isInvalid: boolean;
|
|
859
|
+
/** The current error messages for the input if it is invalid, otherwise an empty array. */
|
|
860
|
+
validationErrors: string[];
|
|
861
|
+
/** The native validity state for the input. */
|
|
862
|
+
validationDetails: ValidityState;
|
|
863
|
+
}
|
|
864
|
+
interface Validation<T> {
|
|
865
|
+
/** Whether the input value is invalid. */
|
|
866
|
+
isInvalid?: boolean;
|
|
867
|
+
/** Whether the input is required before form submission. */
|
|
868
|
+
isRequired?: boolean;
|
|
869
|
+
/** A function that returns an error message if a given value is invalid. */
|
|
870
|
+
validate?: (value: T) => string | string[] | true | null | undefined;
|
|
871
|
+
}
|
|
872
|
+
interface AriaFieldProps extends LabelAriaProps, HelpTextProps, Omit<Validation<any>, 'isRequired'> {
|
|
873
|
+
}
|
|
874
|
+
interface FieldAria extends LabelAria {
|
|
875
|
+
/** Props for the description element, if any. */
|
|
876
|
+
descriptionProps: JSX.HTMLAttributes<HTMLElement>;
|
|
877
|
+
/** Props for the error message element, if any. */
|
|
878
|
+
errorMessageProps: JSX.HTMLAttributes<HTMLElement>;
|
|
879
|
+
}
|
|
880
|
+
/**
|
|
881
|
+
* Provides the accessibility implementation for input fields.
|
|
882
|
+
* Fields accept user input, gain context from their label, and may display
|
|
883
|
+
* a description or error message.
|
|
884
|
+
*
|
|
885
|
+
* @param props - Props for the Field.
|
|
886
|
+
*/
|
|
887
|
+
declare function createField(props: MaybeAccessor<AriaFieldProps>): FieldAria;
|
|
888
|
+
|
|
889
|
+
/**
|
|
890
|
+
* Labels utility for Solidaria
|
|
891
|
+
*
|
|
892
|
+
* Merges aria-label and aria-labelledby into aria-labelledby when both exist.
|
|
893
|
+
*
|
|
894
|
+
* This is a 1:1 port of @react-aria/utils's useLabels hook.
|
|
895
|
+
*/
|
|
896
|
+
|
|
897
|
+
/**
|
|
898
|
+
* Merges aria-label and aria-labelledby into aria-labelledby when both exist.
|
|
899
|
+
*
|
|
900
|
+
* @param props - Aria label props.
|
|
901
|
+
* @param defaultLabel - Default value for aria-label when not present.
|
|
902
|
+
*/
|
|
903
|
+
declare function createLabels(props: DOMProps & AriaLabelingProps, defaultLabel?: string): DOMProps & AriaLabelingProps;
|
|
904
|
+
|
|
905
|
+
/**
|
|
906
|
+
* SSR utilities for Solidaria
|
|
907
|
+
*
|
|
908
|
+
* SolidJS has built-in SSR support with `isServer` and `createUniqueId()`.
|
|
909
|
+
* These utilities provide a consistent API matching React-Aria's patterns.
|
|
910
|
+
*/
|
|
911
|
+
/**
|
|
912
|
+
* Returns whether the component is currently being server side rendered.
|
|
913
|
+
* Can be used to delay browser-specific rendering until after hydration.
|
|
914
|
+
*/
|
|
915
|
+
declare function createIsSSR(): boolean;
|
|
916
|
+
/**
|
|
917
|
+
* Generate a unique ID that is stable across server and client.
|
|
918
|
+
* Uses SolidJS's built-in createUniqueId which handles SSR correctly.
|
|
919
|
+
*
|
|
920
|
+
* @param defaultId - Optional default ID to use instead of generating one.
|
|
921
|
+
*/
|
|
922
|
+
declare function createId(defaultId?: string): string;
|
|
923
|
+
/**
|
|
924
|
+
* Check if we can use DOM APIs.
|
|
925
|
+
* This is useful for code that needs to run only in the browser.
|
|
926
|
+
*/
|
|
927
|
+
declare const canUseDOM: boolean;
|
|
928
|
+
|
|
929
|
+
/**
|
|
930
|
+
* Switch hook for Solidaria
|
|
931
|
+
*
|
|
932
|
+
* Provides the behavior and accessibility implementation for a switch component.
|
|
933
|
+
* A switch is similar to a checkbox, but represents on/off values as opposed to selection.
|
|
934
|
+
*
|
|
935
|
+
* This is a 1:1 port of @react-aria/switch's useSwitch hook.
|
|
936
|
+
*/
|
|
937
|
+
|
|
938
|
+
interface AriaSwitchProps extends AriaToggleProps {
|
|
939
|
+
}
|
|
940
|
+
interface SwitchAria {
|
|
941
|
+
/** Props for the label wrapper element. */
|
|
942
|
+
labelProps: JSX.LabelHTMLAttributes<HTMLLabelElement>;
|
|
943
|
+
/** Props for the input element. */
|
|
944
|
+
inputProps: JSX.InputHTMLAttributes<HTMLInputElement>;
|
|
945
|
+
/** Whether the switch is selected. */
|
|
946
|
+
isSelected: Accessor<boolean>;
|
|
947
|
+
/** Whether the switch is in a pressed state. */
|
|
948
|
+
isPressed: Accessor<boolean>;
|
|
949
|
+
/** Whether the switch is disabled. */
|
|
950
|
+
isDisabled: boolean;
|
|
951
|
+
/** Whether the switch is read only. */
|
|
952
|
+
isReadOnly: boolean;
|
|
953
|
+
}
|
|
954
|
+
/**
|
|
955
|
+
* Provides the behavior and accessibility implementation for a switch component.
|
|
956
|
+
* A switch is similar to a checkbox, but represents on/off values as opposed to selection.
|
|
957
|
+
*/
|
|
958
|
+
declare function createSwitch(props: MaybeAccessor<AriaSwitchProps>, state: ToggleState, ref: () => HTMLInputElement | null): SwitchAria;
|
|
959
|
+
|
|
960
|
+
/**
|
|
961
|
+
* Link hook for Solidaria
|
|
962
|
+
*
|
|
963
|
+
* Provides the behavior and accessibility implementation for a link component.
|
|
964
|
+
* A link allows a user to navigate to another page or resource within a web page
|
|
965
|
+
* or application.
|
|
966
|
+
*
|
|
967
|
+
* This is a 1:1 port of @react-aria/link's useLink hook.
|
|
968
|
+
*/
|
|
969
|
+
|
|
970
|
+
interface AriaLinkProps {
|
|
971
|
+
/** Whether the link is disabled. */
|
|
972
|
+
isDisabled?: boolean;
|
|
973
|
+
/** The HTML element used to render the link, e.g. 'a', or 'span'. @default 'a' */
|
|
974
|
+
elementType?: string;
|
|
975
|
+
/** The URL to link to. */
|
|
976
|
+
href?: string;
|
|
977
|
+
/** The target window for the link. */
|
|
978
|
+
target?: string;
|
|
979
|
+
/** The relationship between the linked resource and the current page. */
|
|
980
|
+
rel?: string;
|
|
981
|
+
/** Handler that is called when the press is released over the target. */
|
|
982
|
+
onPress?: (e: PressEvent) => void;
|
|
983
|
+
/** Handler that is called when a press interaction starts. */
|
|
984
|
+
onPressStart?: (e: PressEvent) => void;
|
|
985
|
+
/** Handler that is called when a press interaction ends. */
|
|
986
|
+
onPressEnd?: (e: PressEvent) => void;
|
|
987
|
+
/** Handler that is called when the element is clicked. */
|
|
988
|
+
onClick?: (e: MouseEvent) => void;
|
|
989
|
+
/** Handler that is called when the element receives focus. */
|
|
990
|
+
onFocus?: (e: FocusEvent) => void;
|
|
991
|
+
/** Handler that is called when the element loses focus. */
|
|
992
|
+
onBlur?: (e: FocusEvent) => void;
|
|
993
|
+
/** Handler that is called when the element's focus status changes. */
|
|
994
|
+
onFocusChange?: (isFocused: boolean) => void;
|
|
995
|
+
/** Handler that is called when a key is pressed. */
|
|
996
|
+
onKeyDown?: (e: KeyboardEvent) => void;
|
|
997
|
+
/** Handler that is called when a key is released. */
|
|
998
|
+
onKeyUp?: (e: KeyboardEvent) => void;
|
|
999
|
+
/** Whether to autofocus the element. */
|
|
1000
|
+
autoFocus?: boolean;
|
|
1001
|
+
/** Indicates the current "page" or state within a set of related elements. */
|
|
1002
|
+
'aria-current'?: 'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false' | boolean;
|
|
1003
|
+
/** Defines a string value that labels the current element. */
|
|
1004
|
+
'aria-label'?: string;
|
|
1005
|
+
/** Identifies the element (or elements) that labels the current element. */
|
|
1006
|
+
'aria-labelledby'?: string;
|
|
1007
|
+
/** Identifies the element (or elements) that describes the object. */
|
|
1008
|
+
'aria-describedby'?: string;
|
|
1009
|
+
}
|
|
1010
|
+
interface LinkAria {
|
|
1011
|
+
/** Props for the link element. */
|
|
1012
|
+
linkProps: Record<string, unknown>;
|
|
1013
|
+
/** Whether the link is currently pressed. */
|
|
1014
|
+
isPressed: Accessor<boolean>;
|
|
1015
|
+
}
|
|
1016
|
+
/**
|
|
1017
|
+
* Provides the behavior and accessibility implementation for a link component.
|
|
1018
|
+
* A link allows a user to navigate to another page or resource within a web page
|
|
1019
|
+
* or application.
|
|
1020
|
+
*/
|
|
1021
|
+
declare function createLink(props?: MaybeAccessor<AriaLinkProps>): LinkAria;
|
|
1022
|
+
|
|
1023
|
+
/**
|
|
1024
|
+
* TextField hook for Solidaria
|
|
1025
|
+
*
|
|
1026
|
+
* Provides the behavior and accessibility implementation for a text field.
|
|
1027
|
+
*
|
|
1028
|
+
* This is a 1:1 port of @react-aria/textfield's useTextField hook.
|
|
1029
|
+
*/
|
|
1030
|
+
|
|
1031
|
+
interface AriaTextFieldProps extends AriaFieldProps, FocusableProps {
|
|
1032
|
+
/** The current value (controlled). */
|
|
1033
|
+
value?: string;
|
|
1034
|
+
/** The default value (uncontrolled). */
|
|
1035
|
+
defaultValue?: string;
|
|
1036
|
+
/** Handler that is called when the value changes. */
|
|
1037
|
+
onChange?: (value: string) => void;
|
|
1038
|
+
/** Whether the input is disabled. */
|
|
1039
|
+
isDisabled?: boolean;
|
|
1040
|
+
/** Whether the input is read only. */
|
|
1041
|
+
isReadOnly?: boolean;
|
|
1042
|
+
/** Whether the input is required. */
|
|
1043
|
+
isRequired?: boolean;
|
|
1044
|
+
/** The type of input to render. */
|
|
1045
|
+
type?: 'text' | 'search' | 'url' | 'tel' | 'email' | 'password' | string;
|
|
1046
|
+
/** The input mode hint for virtual keyboards. */
|
|
1047
|
+
inputMode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
|
|
1048
|
+
/** The name of the input element, used when submitting an HTML form. */
|
|
1049
|
+
name?: string;
|
|
1050
|
+
/** Regex pattern to validate the input value. */
|
|
1051
|
+
pattern?: string;
|
|
1052
|
+
/** The maximum number of characters supported by the input. */
|
|
1053
|
+
maxLength?: number;
|
|
1054
|
+
/** The minimum number of characters required by the input. */
|
|
1055
|
+
minLength?: number;
|
|
1056
|
+
/** Placeholder text for the input. */
|
|
1057
|
+
placeholder?: string;
|
|
1058
|
+
/** Whether to enable auto complete. */
|
|
1059
|
+
autoComplete?: string;
|
|
1060
|
+
/** Whether to enable auto correct. */
|
|
1061
|
+
autoCorrect?: string;
|
|
1062
|
+
/** Whether to enable spell check. */
|
|
1063
|
+
spellCheck?: 'true' | 'false';
|
|
1064
|
+
/** Controls whether and how text input is automatically capitalized. */
|
|
1065
|
+
autoCapitalize?: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters';
|
|
1066
|
+
/** The element type to use for the input. Defaults to 'input'. */
|
|
1067
|
+
inputElementType?: 'input' | 'textarea';
|
|
1068
|
+
onCopy?: JSX.EventHandler<HTMLInputElement | HTMLTextAreaElement, ClipboardEvent>;
|
|
1069
|
+
onCut?: JSX.EventHandler<HTMLInputElement | HTMLTextAreaElement, ClipboardEvent>;
|
|
1070
|
+
onPaste?: JSX.EventHandler<HTMLInputElement | HTMLTextAreaElement, ClipboardEvent>;
|
|
1071
|
+
onCompositionStart?: JSX.EventHandler<HTMLInputElement | HTMLTextAreaElement, CompositionEvent>;
|
|
1072
|
+
onCompositionEnd?: JSX.EventHandler<HTMLInputElement | HTMLTextAreaElement, CompositionEvent>;
|
|
1073
|
+
onCompositionUpdate?: JSX.EventHandler<HTMLInputElement | HTMLTextAreaElement, CompositionEvent>;
|
|
1074
|
+
onSelect?: JSX.EventHandler<HTMLInputElement | HTMLTextAreaElement, Event>;
|
|
1075
|
+
onBeforeInput?: JSX.EventHandler<HTMLInputElement | HTMLTextAreaElement, InputEvent>;
|
|
1076
|
+
onInput?: JSX.EventHandler<HTMLInputElement | HTMLTextAreaElement, InputEvent>;
|
|
1077
|
+
}
|
|
1078
|
+
interface TextFieldAria<T extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement> extends Omit<FieldAria, 'fieldProps'> {
|
|
1079
|
+
/** Props for the input element. */
|
|
1080
|
+
inputProps: JSX.InputHTMLAttributes<T>;
|
|
1081
|
+
/** Whether the text field is invalid. */
|
|
1082
|
+
isInvalid: boolean;
|
|
1083
|
+
}
|
|
1084
|
+
/**
|
|
1085
|
+
* Provides the behavior and accessibility implementation for a text field.
|
|
1086
|
+
* Text fields allow users to input text with a keyboard.
|
|
1087
|
+
*
|
|
1088
|
+
* @param props - Props for the text field.
|
|
1089
|
+
* @param ref - Optional ref callback for the input element.
|
|
1090
|
+
*/
|
|
1091
|
+
declare function createTextField<T extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement>(props: MaybeAccessor<AriaTextFieldProps>, ref?: (el: T) => void): TextFieldAria<T>;
|
|
1092
|
+
|
|
1093
|
+
/**
|
|
1094
|
+
* ProgressBar hook for Solidaria
|
|
1095
|
+
*
|
|
1096
|
+
* Provides the accessibility implementation for a progress bar component.
|
|
1097
|
+
* Progress bars show either determinate or indeterminate progress of an operation
|
|
1098
|
+
* over time.
|
|
1099
|
+
*
|
|
1100
|
+
* This is a 1:1 port of @react-aria/progress's useProgressBar hook.
|
|
1101
|
+
*/
|
|
1102
|
+
|
|
1103
|
+
interface AriaProgressBarProps {
|
|
1104
|
+
/** The current value (controlled). */
|
|
1105
|
+
value?: number;
|
|
1106
|
+
/** The smallest value allowed for the input. @default 0 */
|
|
1107
|
+
minValue?: number;
|
|
1108
|
+
/** The largest value allowed for the input. @default 100 */
|
|
1109
|
+
maxValue?: number;
|
|
1110
|
+
/** The content to display as the value's label (e.g. 1 of 4). */
|
|
1111
|
+
valueLabel?: string;
|
|
1112
|
+
/** Whether presentation is indeterminate when progress isn't known. */
|
|
1113
|
+
isIndeterminate?: boolean;
|
|
1114
|
+
/** The display format of the value label. */
|
|
1115
|
+
formatOptions?: Intl.NumberFormatOptions;
|
|
1116
|
+
/** The content to display as the label. */
|
|
1117
|
+
label?: string;
|
|
1118
|
+
/** An accessibility label for this item. */
|
|
1119
|
+
'aria-label'?: string;
|
|
1120
|
+
/** Identifies the element (or elements) that labels the current element. */
|
|
1121
|
+
'aria-labelledby'?: string;
|
|
1122
|
+
/** Identifies the element (or elements) that describes the object. */
|
|
1123
|
+
'aria-describedby'?: string;
|
|
1124
|
+
/** Identifies the element (or elements) that provide a detailed, extended description for the object. */
|
|
1125
|
+
'aria-details'?: string;
|
|
1126
|
+
}
|
|
1127
|
+
interface ProgressBarAria {
|
|
1128
|
+
/** Props for the progress bar container element. */
|
|
1129
|
+
progressBarProps: Record<string, unknown>;
|
|
1130
|
+
/** Props for the progress bar's visual label element (if any). */
|
|
1131
|
+
labelProps: Record<string, unknown>;
|
|
1132
|
+
}
|
|
1133
|
+
/**
|
|
1134
|
+
* Provides the accessibility implementation for a progress bar component.
|
|
1135
|
+
* Progress bars show either determinate or indeterminate progress of an operation
|
|
1136
|
+
* over time.
|
|
1137
|
+
*/
|
|
1138
|
+
declare function createProgressBar(props?: MaybeAccessor<AriaProgressBarProps>): ProgressBarAria;
|
|
1139
|
+
|
|
1140
|
+
/**
|
|
1141
|
+
* Merges multiple props objects together, handling event handlers specially
|
|
1142
|
+
* by chaining them rather than replacing.
|
|
1143
|
+
*
|
|
1144
|
+
* Based on react-aria's mergeProps but adapted for SolidJS.
|
|
1145
|
+
*/
|
|
1146
|
+
declare function mergeProps<T extends object>(...args: T[]): Record<string, unknown>;
|
|
1147
|
+
|
|
1148
|
+
/**
|
|
1149
|
+
* filterDOMProps for Solidaria
|
|
1150
|
+
*
|
|
1151
|
+
* Filters out all props that aren't valid DOM props.
|
|
1152
|
+
* This is a 1:1 port of @react-aria/utils filterDOMProps.
|
|
1153
|
+
*/
|
|
1154
|
+
interface FilterDOMPropsOptions {
|
|
1155
|
+
/**
|
|
1156
|
+
* If labelling associated aria properties should be included in the filter.
|
|
1157
|
+
*/
|
|
1158
|
+
labelable?: boolean;
|
|
1159
|
+
/** Whether the element is a link and should include DOM props for <a> elements. */
|
|
1160
|
+
isLink?: boolean;
|
|
1161
|
+
/** Whether to include global DOM attributes. */
|
|
1162
|
+
global?: boolean;
|
|
1163
|
+
/** Whether to include DOM events. */
|
|
1164
|
+
events?: boolean;
|
|
1165
|
+
/**
|
|
1166
|
+
* A Set of other property names that should be included in the filter.
|
|
1167
|
+
*/
|
|
1168
|
+
propNames?: Set<string>;
|
|
1169
|
+
}
|
|
1170
|
+
/**
|
|
1171
|
+
* Filters out all props that aren't valid DOM props or defined via override prop obj.
|
|
1172
|
+
* @param props - The component props to be filtered.
|
|
1173
|
+
* @param opts - Props to override.
|
|
1174
|
+
*/
|
|
1175
|
+
declare function filterDOMProps(props: Record<string, unknown>, opts?: FilterDOMPropsOptions): Record<string, unknown>;
|
|
1176
|
+
|
|
1177
|
+
/**
|
|
1178
|
+
* createSeparator - SolidJS implementation of React Aria's useSeparator
|
|
1179
|
+
*
|
|
1180
|
+
* A separator is a visual divider between two groups of content,
|
|
1181
|
+
* e.g. groups of menu items or sections of a page.
|
|
1182
|
+
*/
|
|
1183
|
+
|
|
1184
|
+
type Orientation = 'horizontal' | 'vertical';
|
|
1185
|
+
interface AriaSeparatorProps {
|
|
1186
|
+
/**
|
|
1187
|
+
* The orientation of the separator.
|
|
1188
|
+
* @default 'horizontal'
|
|
1189
|
+
*/
|
|
1190
|
+
orientation?: Orientation;
|
|
1191
|
+
/**
|
|
1192
|
+
* The HTML element type that will be used to render the separator.
|
|
1193
|
+
* @default 'hr'
|
|
1194
|
+
*/
|
|
1195
|
+
elementType?: string;
|
|
1196
|
+
/** An accessibility label for the separator. */
|
|
1197
|
+
'aria-label'?: string;
|
|
1198
|
+
/** Identifies the element(s) that labels the separator. */
|
|
1199
|
+
'aria-labelledby'?: string;
|
|
1200
|
+
/** The element's unique identifier. */
|
|
1201
|
+
id?: string;
|
|
1202
|
+
}
|
|
1203
|
+
interface SeparatorAria {
|
|
1204
|
+
/** Props for the separator element. */
|
|
1205
|
+
separatorProps: JSX.HTMLAttributes<HTMLElement>;
|
|
1206
|
+
}
|
|
1207
|
+
/**
|
|
1208
|
+
* Provides the accessibility implementation for a separator.
|
|
1209
|
+
* A separator is a visual divider between two groups of content,
|
|
1210
|
+
* e.g. groups of menu items or sections of a page.
|
|
1211
|
+
*/
|
|
1212
|
+
declare function createSeparator(props?: MaybeAccessor<AriaSeparatorProps>): SeparatorAria;
|
|
1213
|
+
|
|
1214
|
+
export { type AriaButtonProps, type AriaCheckboxGroupItemProps, type AriaCheckboxGroupProps, type AriaCheckboxProps, type AriaFieldProps, type AriaLabelingProps, type AriaLinkProps, type AriaProgressBarProps, type AriaRadioGroupProps, type AriaRadioProps, type AriaSeparatorProps, type AriaSwitchProps, type AriaTextFieldProps, type AriaToggleButtonProps, type AriaToggleProps, type ButtonAria, type CheckboxAria, type CheckboxGroupAria, type CreateFocusableProps, type CreateHoverProps, type CreatePressProps, type DOMProps, type FieldAria, type FilterDOMPropsOptions, type FocusRingProps, type FocusRingResult, type FocusableResult, type HelpTextProps, type HoverEvent, type HoverEvents, type HoverResult, type LabelAria, type LabelAriaProps, type LabelableProps, type LinkAria, type MaybeAccessor, type MaybeAccessorValue, type Orientation, PressEvent, type PressResult, type ProgressBarAria, type RadioAria, type RadioGroupAria, type SeparatorAria, type SwitchAria, type TextFieldAria, type ToggleAria, type ToggleButtonAria, type Validation, type ValidationResult, access, canUseDOM, checkboxGroupData, createButton, createCheckbox, createCheckboxGroup, createCheckboxGroupItem, createField, createFocusRing, createFocusable, createHover, createId, createIsSSR, createLabel, createLabels, createLink, createPress, createProgressBar, createRadio, createRadioGroup, createSeparator, createSwitch, createTextField, createToggle, createToggleButton, filterDOMProps, isAccessor, mergeProps, radioGroupData };
|