@proyecto-viviana/solidaria 0.0.3 → 0.0.4
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/button/createButton.d.ts +29 -0
- package/dist/button/createButton.d.ts.map +1 -0
- package/dist/button/createToggleButton.d.ts +41 -0
- package/dist/button/createToggleButton.d.ts.map +1 -0
- package/dist/button/index.d.ts +5 -0
- package/dist/button/index.d.ts.map +1 -0
- package/dist/button/types.d.ts +66 -0
- package/dist/button/types.d.ts.map +1 -0
- package/dist/checkbox/createCheckbox.d.ts +56 -0
- package/dist/checkbox/createCheckbox.d.ts.map +1 -0
- package/dist/checkbox/createCheckboxGroup.d.ts +53 -0
- package/dist/checkbox/createCheckboxGroup.d.ts.map +1 -0
- package/dist/checkbox/createCheckboxGroupItem.d.ts +25 -0
- package/dist/checkbox/createCheckboxGroupItem.d.ts.map +1 -0
- package/dist/checkbox/createCheckboxGroupState.d.ts +71 -0
- package/dist/checkbox/createCheckboxGroupState.d.ts.map +1 -0
- package/dist/checkbox/index.d.ts +9 -0
- package/dist/checkbox/index.d.ts.map +1 -0
- package/dist/index.d.ts +15 -1214
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +324 -151
- package/dist/index.js.map +1 -0
- package/dist/interactions/FocusableProvider.d.ts +26 -0
- package/dist/interactions/FocusableProvider.d.ts.map +1 -0
- package/dist/interactions/PressEvent.d.ts +63 -0
- package/dist/interactions/PressEvent.d.ts.map +1 -0
- package/dist/interactions/createFocus.d.ts +31 -0
- package/dist/interactions/createFocus.d.ts.map +1 -0
- package/dist/interactions/createFocusRing.d.ts +37 -0
- package/dist/interactions/createFocusRing.d.ts.map +1 -0
- package/dist/interactions/createFocusWithin.d.ts +27 -0
- package/dist/interactions/createFocusWithin.d.ts.map +1 -0
- package/dist/interactions/createFocusable.d.ts +65 -0
- package/dist/interactions/createFocusable.d.ts.map +1 -0
- package/dist/interactions/createHover.d.ts +41 -0
- package/dist/interactions/createHover.d.ts.map +1 -0
- package/dist/interactions/createKeyboard.d.ts +35 -0
- package/dist/interactions/createKeyboard.d.ts.map +1 -0
- package/dist/interactions/createPress.d.ts +49 -0
- package/dist/interactions/createPress.d.ts.map +1 -0
- package/dist/interactions/index.d.ts +10 -0
- package/dist/interactions/index.d.ts.map +1 -0
- package/dist/label/createField.d.ts +51 -0
- package/dist/label/createField.d.ts.map +1 -0
- package/dist/label/createLabel.d.ts +49 -0
- package/dist/label/createLabel.d.ts.map +1 -0
- package/dist/label/createLabels.d.ts +16 -0
- package/dist/label/createLabels.d.ts.map +1 -0
- package/dist/label/index.d.ts +6 -0
- package/dist/label/index.d.ts.map +1 -0
- package/dist/link/createLink.d.ts +65 -0
- package/dist/link/createLink.d.ts.map +1 -0
- package/dist/link/index.d.ts +2 -0
- package/dist/link/index.d.ts.map +1 -0
- package/dist/progress/createProgressBar.d.ts +47 -0
- package/dist/progress/createProgressBar.d.ts.map +1 -0
- package/dist/progress/index.d.ts +2 -0
- package/dist/progress/index.d.ts.map +1 -0
- package/dist/radio/createRadio.d.ts +68 -0
- package/dist/radio/createRadio.d.ts.map +1 -0
- package/dist/radio/createRadioGroup.d.ts +85 -0
- package/dist/radio/createRadioGroup.d.ts.map +1 -0
- package/dist/radio/createRadioGroupState.d.ts +77 -0
- package/dist/radio/createRadioGroupState.d.ts.map +1 -0
- package/dist/radio/index.d.ts +4 -0
- package/dist/radio/index.d.ts.map +1 -0
- package/dist/separator/createSeparator.d.ts +38 -0
- package/dist/separator/createSeparator.d.ts.map +1 -0
- package/dist/separator/index.d.ts +2 -0
- package/dist/separator/index.d.ts.map +1 -0
- package/dist/ssr/index.d.ts +24 -0
- package/dist/ssr/index.d.ts.map +1 -0
- package/dist/switch/createSwitch.d.ts +34 -0
- package/dist/switch/createSwitch.d.ts.map +1 -0
- package/dist/switch/index.d.ts +2 -0
- package/dist/switch/index.d.ts.map +1 -0
- package/dist/textfield/createTextField.d.ts +73 -0
- package/dist/textfield/createTextField.d.ts.map +1 -0
- package/dist/textfield/index.d.ts +2 -0
- package/dist/textfield/index.d.ts.map +1 -0
- package/dist/toggle/createToggle.d.ts +94 -0
- package/dist/toggle/createToggle.d.ts.map +1 -0
- package/dist/toggle/createToggleState.d.ts +34 -0
- package/dist/toggle/createToggleState.d.ts.map +1 -0
- package/dist/toggle/index.d.ts +5 -0
- package/dist/toggle/index.d.ts.map +1 -0
- package/dist/utils/dom.d.ts +51 -0
- package/dist/utils/dom.d.ts.map +1 -0
- package/dist/utils/events.d.ts +29 -0
- package/dist/utils/events.d.ts.map +1 -0
- package/dist/utils/filterDOMProps.d.ts +29 -0
- package/dist/utils/filterDOMProps.d.ts.map +1 -0
- package/dist/utils/focus.d.ts +20 -0
- package/dist/utils/focus.d.ts.map +1 -0
- package/dist/utils/geometry.d.ts +40 -0
- package/dist/utils/geometry.d.ts.map +1 -0
- package/dist/utils/globalListeners.d.ts +36 -0
- package/dist/utils/globalListeners.d.ts.map +1 -0
- package/dist/utils/index.d.ts +11 -0
- package/dist/utils/index.d.ts.map +1 -0
- package/dist/utils/mergeProps.d.ts +8 -0
- package/dist/utils/mergeProps.d.ts.map +1 -0
- package/dist/utils/platform.d.ts +14 -0
- package/dist/utils/platform.d.ts.map +1 -0
- package/dist/utils/reactivity.d.ts +28 -0
- package/dist/utils/reactivity.d.ts.map +1 -0
- package/dist/utils/textSelection.d.ts +19 -0
- package/dist/utils/textSelection.d.ts.map +1 -0
- package/package.json +52 -53
- package/dist/index.jsx +0 -2717
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* FocusableProvider - Provides DOM props to the nearest focusable child.
|
|
3
|
+
*
|
|
4
|
+
* This is a 1-1 port of React-Aria's FocusableProvider adapted for SolidJS.
|
|
5
|
+
*/
|
|
6
|
+
import { JSX, ParentComponent } from 'solid-js';
|
|
7
|
+
import { FocusableProviderProps } from './createFocusable';
|
|
8
|
+
/**
|
|
9
|
+
* Provides DOM props to the nearest focusable child.
|
|
10
|
+
* Used to pass focus-related props through component boundaries.
|
|
11
|
+
*
|
|
12
|
+
* @example
|
|
13
|
+
* ```tsx
|
|
14
|
+
* import { FocusableProvider } from 'solidaria';
|
|
15
|
+
*
|
|
16
|
+
* function MyComponent() {
|
|
17
|
+
* return (
|
|
18
|
+
* <FocusableProvider onFocus={() => console.log('focused!')}>
|
|
19
|
+
* <NestedFocusableComponent />
|
|
20
|
+
* </FocusableProvider>
|
|
21
|
+
* );
|
|
22
|
+
* }
|
|
23
|
+
* ```
|
|
24
|
+
*/
|
|
25
|
+
export declare const FocusableProvider: ParentComponent<FocusableProviderProps & JSX.HTMLAttributes<HTMLElement>>;
|
|
26
|
+
//# sourceMappingURL=FocusableProvider.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FocusableProvider.d.ts","sourceRoot":"","sources":["../../src/interactions/FocusableProvider.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,GAAG,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAChD,OAAO,EAA2C,sBAAsB,EAAE,MAAM,mBAAmB,CAAC;AAEpG;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,iBAAiB,EAAE,eAAe,CAC7C,sBAAsB,GAAG,GAAG,CAAC,cAAc,CAAC,WAAW,CAAC,CAgBzD,CAAC"}
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* PressEvent class that matches React-Aria's PressEvent interface.
|
|
3
|
+
* Wraps native events with press-specific data.
|
|
4
|
+
*/
|
|
5
|
+
export type PointerType = 'mouse' | 'pen' | 'touch' | 'keyboard' | 'virtual';
|
|
6
|
+
export type PressEventType = 'pressstart' | 'pressend' | 'pressup' | 'press';
|
|
7
|
+
export interface IPressEvent {
|
|
8
|
+
/** The type of press event being fired. */
|
|
9
|
+
type: PressEventType;
|
|
10
|
+
/** The pointer type that triggered the press event. */
|
|
11
|
+
pointerType: PointerType;
|
|
12
|
+
/** The target element of the press event. */
|
|
13
|
+
target: Element;
|
|
14
|
+
/** Whether the shift keyboard modifier was held during the press event. */
|
|
15
|
+
shiftKey: boolean;
|
|
16
|
+
/** Whether the ctrl keyboard modifier was held during the press event. */
|
|
17
|
+
ctrlKey: boolean;
|
|
18
|
+
/** Whether the meta keyboard modifier was held during the press event. */
|
|
19
|
+
metaKey: boolean;
|
|
20
|
+
/** Whether the alt keyboard modifier was held during the press event. */
|
|
21
|
+
altKey: boolean;
|
|
22
|
+
/** X position of the press relative to the target element. */
|
|
23
|
+
x: number;
|
|
24
|
+
/** Y position of the press relative to the target element. */
|
|
25
|
+
y: number;
|
|
26
|
+
/**
|
|
27
|
+
* By default, press events stop propagation to parent elements.
|
|
28
|
+
* Call continuePropagation() to allow the event to bubble up.
|
|
29
|
+
*/
|
|
30
|
+
continuePropagation(): void;
|
|
31
|
+
}
|
|
32
|
+
/**
|
|
33
|
+
* PressEvent class that provides all press event data.
|
|
34
|
+
* Based on React-Aria's PressEvent implementation.
|
|
35
|
+
*/
|
|
36
|
+
export declare class PressEvent implements IPressEvent {
|
|
37
|
+
#private;
|
|
38
|
+
type: PressEventType;
|
|
39
|
+
pointerType: PointerType;
|
|
40
|
+
target: Element;
|
|
41
|
+
shiftKey: boolean;
|
|
42
|
+
ctrlKey: boolean;
|
|
43
|
+
metaKey: boolean;
|
|
44
|
+
altKey: boolean;
|
|
45
|
+
x: number;
|
|
46
|
+
y: number;
|
|
47
|
+
constructor(type: PressEventType, pointerType: PointerType, originalEvent: Event | null, target: Element);
|
|
48
|
+
/**
|
|
49
|
+
* Call this to allow the press event to propagate to parent elements.
|
|
50
|
+
* By default, press events stop propagation.
|
|
51
|
+
*/
|
|
52
|
+
continuePropagation(): void;
|
|
53
|
+
/**
|
|
54
|
+
* Whether the event should stop propagation.
|
|
55
|
+
* Used internally by the press handler.
|
|
56
|
+
*/
|
|
57
|
+
get shouldStopPropagation(): boolean;
|
|
58
|
+
}
|
|
59
|
+
/**
|
|
60
|
+
* Creates a PressEvent from a native event.
|
|
61
|
+
*/
|
|
62
|
+
export declare function createPressEvent(type: PressEventType, pointerType: PointerType, originalEvent: Event | null, target: Element): PressEvent;
|
|
63
|
+
//# sourceMappingURL=PressEvent.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PressEvent.d.ts","sourceRoot":"","sources":["../../src/interactions/PressEvent.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,KAAK,GAAG,OAAO,GAAG,UAAU,GAAG,SAAS,CAAC;AAC7E,MAAM,MAAM,cAAc,GAAG,YAAY,GAAG,UAAU,GAAG,SAAS,GAAG,OAAO,CAAC;AAE7E,MAAM,WAAW,WAAW;IAC1B,2CAA2C;IAC3C,IAAI,EAAE,cAAc,CAAC;IACrB,uDAAuD;IACvD,WAAW,EAAE,WAAW,CAAC;IACzB,6CAA6C;IAC7C,MAAM,EAAE,OAAO,CAAC;IAChB,2EAA2E;IAC3E,QAAQ,EAAE,OAAO,CAAC;IAClB,0EAA0E;IAC1E,OAAO,EAAE,OAAO,CAAC;IACjB,0EAA0E;IAC1E,OAAO,EAAE,OAAO,CAAC;IACjB,yEAAyE;IACzE,MAAM,EAAE,OAAO,CAAC;IAChB,8DAA8D;IAC9D,CAAC,EAAE,MAAM,CAAC;IACV,8DAA8D;IAC9D,CAAC,EAAE,MAAM,CAAC;IACV;;;OAGG;IACH,mBAAmB,IAAI,IAAI,CAAC;CAC7B;AAED;;;GAGG;AACH,qBAAa,UAAW,YAAW,WAAW;;IAC5C,IAAI,EAAE,cAAc,CAAC;IACrB,WAAW,EAAE,WAAW,CAAC;IACzB,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,OAAO,CAAC;IAChB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;gBAKR,IAAI,EAAE,cAAc,EACpB,WAAW,EAAE,WAAW,EACxB,aAAa,EAAE,KAAK,GAAG,IAAI,EAC3B,MAAM,EAAE,OAAO;IA6BjB;;;OAGG;IACH,mBAAmB,IAAI,IAAI;IAI3B;;;OAGG;IACH,IAAI,qBAAqB,IAAI,OAAO,CAEnC;CACF;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAC9B,IAAI,EAAE,cAAc,EACpB,WAAW,EAAE,WAAW,EACxB,aAAa,EAAE,KAAK,GAAG,IAAI,EAC3B,MAAM,EAAE,OAAO,GACd,UAAU,CAEZ"}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* createFocus - Handles focus events for the immediate target.
|
|
3
|
+
*
|
|
4
|
+
* This is a 1-1 port of React-Aria's useFocus hook adapted for SolidJS.
|
|
5
|
+
* Focus events on child elements will be ignored.
|
|
6
|
+
*/
|
|
7
|
+
import { JSX } from 'solid-js';
|
|
8
|
+
export interface FocusEvents {
|
|
9
|
+
/** Handler that is called when the element receives focus. */
|
|
10
|
+
onFocus?: (e: FocusEvent) => void;
|
|
11
|
+
/** Handler that is called when the element loses focus. */
|
|
12
|
+
onBlur?: (e: FocusEvent) => void;
|
|
13
|
+
/** Handler that is called when the element's focus status changes. */
|
|
14
|
+
onFocusChange?: (isFocused: boolean) => void;
|
|
15
|
+
}
|
|
16
|
+
export interface CreateFocusProps extends FocusEvents {
|
|
17
|
+
/** Whether the focus events should be disabled. */
|
|
18
|
+
isDisabled?: boolean;
|
|
19
|
+
}
|
|
20
|
+
export interface FocusResult {
|
|
21
|
+
/** Props to spread onto the target element. */
|
|
22
|
+
focusProps: JSX.HTMLAttributes<HTMLElement>;
|
|
23
|
+
}
|
|
24
|
+
/**
|
|
25
|
+
* Handles focus events for the immediate target.
|
|
26
|
+
* Focus events on child elements will be ignored.
|
|
27
|
+
*
|
|
28
|
+
* Based on react-aria's useFocus but adapted for SolidJS.
|
|
29
|
+
*/
|
|
30
|
+
export declare function createFocus(props?: CreateFocusProps): FocusResult;
|
|
31
|
+
//# sourceMappingURL=createFocus.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"createFocus.d.ts","sourceRoot":"","sources":["../../src/interactions/createFocus.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAa,MAAM,UAAU,CAAC;AAG1C,MAAM,WAAW,WAAW;IAC1B,8DAA8D;IAC9D,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,2DAA2D;IAC3D,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACjC,sEAAsE;IACtE,aAAa,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CAC9C;AAED,MAAM,WAAW,gBAAiB,SAAQ,WAAW;IACnD,mDAAmD;IACnD,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,WAAW;IAC1B,+CAA+C;IAC/C,UAAU,EAAE,GAAG,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC;CAC7C;AA8DD;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,KAAK,GAAE,gBAAqB,GAAG,WAAW,CA6DrE"}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* createFocusRing hook for Solidaria
|
|
3
|
+
*
|
|
4
|
+
* Determines whether a focus ring should be visible for a given element.
|
|
5
|
+
* Focus rings are visible when the user navigates with keyboard, but hidden
|
|
6
|
+
* when using mouse/touch.
|
|
7
|
+
*
|
|
8
|
+
* Port of @react-aria/focus useFocusRing.
|
|
9
|
+
*/
|
|
10
|
+
import { type JSX, type Accessor } from 'solid-js';
|
|
11
|
+
export interface FocusRingProps {
|
|
12
|
+
/** Whether the element is a text input. */
|
|
13
|
+
isTextInput?: boolean;
|
|
14
|
+
/** Whether the element will be auto focused. */
|
|
15
|
+
autoFocus?: boolean;
|
|
16
|
+
/** Whether focus should be tracked within the element. */
|
|
17
|
+
within?: boolean;
|
|
18
|
+
}
|
|
19
|
+
export interface FocusRingResult {
|
|
20
|
+
/** Whether the element is currently focused. */
|
|
21
|
+
isFocused: Accessor<boolean>;
|
|
22
|
+
/** Whether the focus ring should be visible. */
|
|
23
|
+
isFocusVisible: Accessor<boolean>;
|
|
24
|
+
/** Props to spread on the element to track focus. */
|
|
25
|
+
focusProps: JSX.HTMLAttributes<HTMLElement>;
|
|
26
|
+
}
|
|
27
|
+
/**
|
|
28
|
+
* Determines whether a focus ring should be visible for a given element.
|
|
29
|
+
*
|
|
30
|
+
* Focus rings are visible when:
|
|
31
|
+
* - The element is focused AND
|
|
32
|
+
* - The user is navigating with keyboard (not mouse/touch)
|
|
33
|
+
*
|
|
34
|
+
* For text inputs, focus rings are always visible when focused.
|
|
35
|
+
*/
|
|
36
|
+
export declare function createFocusRing(props?: FocusRingProps): FocusRingResult;
|
|
37
|
+
//# sourceMappingURL=createFocusRing.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"createFocusRing.d.ts","sourceRoot":"","sources":["../../src/interactions/createFocusRing.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,EAAE,KAAK,GAAG,EAAE,KAAK,QAAQ,EAAyC,MAAM,UAAU,CAAC;AAO1F,MAAM,WAAW,cAAc;IAC7B,2CAA2C;IAC3C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gDAAgD;IAChD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,0DAA0D;IAC1D,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,eAAe;IAC9B,gDAAgD;IAChD,SAAS,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;IAC7B,gDAAgD;IAChD,cAAc,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;IAClC,qDAAqD;IACrD,UAAU,EAAE,GAAG,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC;CAC7C;AAqDD;;;;;;;;GAQG;AACH,wBAAgB,eAAe,CAAC,KAAK,GAAE,cAAmB,GAAG,eAAe,CA8C3E"}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* createFocusWithin - Handles focus events for the target and its descendants.
|
|
3
|
+
*
|
|
4
|
+
* This is a 1-1 port of React-Aria's useFocusWithin hook adapted for SolidJS.
|
|
5
|
+
*/
|
|
6
|
+
import { JSX } from 'solid-js';
|
|
7
|
+
export interface FocusWithinProps {
|
|
8
|
+
/** Whether the focus within events should be disabled. */
|
|
9
|
+
isDisabled?: boolean;
|
|
10
|
+
/** Handler that is called when the target element or a descendant receives focus. */
|
|
11
|
+
onFocusWithin?: (e: FocusEvent) => void;
|
|
12
|
+
/** Handler that is called when the target element and all descendants lose focus. */
|
|
13
|
+
onBlurWithin?: (e: FocusEvent) => void;
|
|
14
|
+
/** Handler that is called when the focus within state changes. */
|
|
15
|
+
onFocusWithinChange?: (isFocusWithin: boolean) => void;
|
|
16
|
+
}
|
|
17
|
+
export interface FocusWithinResult {
|
|
18
|
+
/** Props to spread onto the target element. */
|
|
19
|
+
focusWithinProps: JSX.HTMLAttributes<HTMLElement>;
|
|
20
|
+
}
|
|
21
|
+
/**
|
|
22
|
+
* Handles focus events for the target and its descendants.
|
|
23
|
+
*
|
|
24
|
+
* Based on react-aria's useFocusWithin but adapted for SolidJS.
|
|
25
|
+
*/
|
|
26
|
+
export declare function createFocusWithin(props?: FocusWithinProps): FocusWithinResult;
|
|
27
|
+
//# sourceMappingURL=createFocusWithin.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"createFocusWithin.d.ts","sourceRoot":"","sources":["../../src/interactions/createFocusWithin.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,GAAG,EAAa,MAAM,UAAU,CAAC;AAI1C,MAAM,WAAW,gBAAgB;IAC/B,0DAA0D;IAC1D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qFAAqF;IACrF,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACxC,qFAAqF;IACrF,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACvC,kEAAkE;IAClE,mBAAmB,CAAC,EAAE,CAAC,aAAa,EAAE,OAAO,KAAK,IAAI,CAAC;CACxD;AAED,MAAM,WAAW,iBAAiB;IAChC,+CAA+C;IAC/C,gBAAgB,EAAE,GAAG,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC;CACnD;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,GAAE,gBAAqB,GAAG,iBAAiB,CA6GjF"}
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* createFocusable - Makes an element focusable and capable of auto focus.
|
|
3
|
+
*
|
|
4
|
+
* This is a 1-1 port of React-Aria's useFocusable hook adapted for SolidJS.
|
|
5
|
+
*/
|
|
6
|
+
import { JSX, Accessor } from 'solid-js';
|
|
7
|
+
import { type FocusEvents } from './createFocus';
|
|
8
|
+
import { type KeyboardEvents } from './createKeyboard';
|
|
9
|
+
export interface FocusableDOMProps {
|
|
10
|
+
/** Whether to exclude the element from the sequential tab order. */
|
|
11
|
+
excludeFromTabOrder?: boolean;
|
|
12
|
+
}
|
|
13
|
+
export interface FocusableProps extends FocusEvents, KeyboardEvents {
|
|
14
|
+
/** Whether the element should receive focus on mount. */
|
|
15
|
+
autoFocus?: boolean;
|
|
16
|
+
}
|
|
17
|
+
export interface CreateFocusableProps extends FocusableProps, FocusableDOMProps {
|
|
18
|
+
/** Whether focus should be disabled. */
|
|
19
|
+
isDisabled?: Accessor<boolean> | boolean;
|
|
20
|
+
}
|
|
21
|
+
export interface FocusableResult {
|
|
22
|
+
/** Props to spread on the focusable element. */
|
|
23
|
+
focusableProps: JSX.HTMLAttributes<HTMLElement>;
|
|
24
|
+
}
|
|
25
|
+
export interface FocusableContextValue {
|
|
26
|
+
ref?: (el: HTMLElement) => void;
|
|
27
|
+
[key: string]: unknown;
|
|
28
|
+
}
|
|
29
|
+
/**
|
|
30
|
+
* Context for passing focusable props to nested focusable children.
|
|
31
|
+
* Used by FocusableProvider to pass DOM props to the nearest focusable child.
|
|
32
|
+
*/
|
|
33
|
+
export declare const FocusableContext: import("solid-js").Context<FocusableContextValue | null>;
|
|
34
|
+
export interface FocusableProviderProps {
|
|
35
|
+
/** The child element to provide DOM props to. */
|
|
36
|
+
children?: JSX.Element;
|
|
37
|
+
}
|
|
38
|
+
/**
|
|
39
|
+
* Makes an element focusable, handling disabled state and tab order.
|
|
40
|
+
* Provides focus state tracking and autoFocus support.
|
|
41
|
+
*
|
|
42
|
+
* Based on react-aria's useFocusable but adapted for SolidJS.
|
|
43
|
+
*
|
|
44
|
+
* @example
|
|
45
|
+
* ```tsx
|
|
46
|
+
* import { createFocusable } from 'solidaria';
|
|
47
|
+
*
|
|
48
|
+
* function FocusableInput(props) {
|
|
49
|
+
* let ref;
|
|
50
|
+
* const { focusableProps } = createFocusable({
|
|
51
|
+
* autoFocus: props.autoFocus,
|
|
52
|
+
* onFocusChange: (focused) => console.log('Focus:', focused),
|
|
53
|
+
* });
|
|
54
|
+
*
|
|
55
|
+
* return (
|
|
56
|
+
* <input
|
|
57
|
+
* {...focusableProps}
|
|
58
|
+
* ref={(el) => { ref = el; focusableProps.ref?.(el); }}
|
|
59
|
+
* />
|
|
60
|
+
* );
|
|
61
|
+
* }
|
|
62
|
+
* ```
|
|
63
|
+
*/
|
|
64
|
+
export declare function createFocusable(props?: CreateFocusableProps, ref?: (el: HTMLElement) => void): FocusableResult;
|
|
65
|
+
//# sourceMappingURL=createFocusable.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"createFocusable.d.ts","sourceRoot":"","sources":["../../src/interactions/createFocusable.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAsC,MAAM,UAAU,CAAC;AAC7E,OAAO,EAAe,KAAK,WAAW,EAAE,MAAM,eAAe,CAAC;AAC9D,OAAO,EAAkB,KAAK,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAGvE,MAAM,WAAW,iBAAiB;IAChC,oEAAoE;IACpE,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED,MAAM,WAAW,cAAe,SAAQ,WAAW,EAAE,cAAc;IACjE,yDAAyD;IACzD,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,oBAAqB,SAAQ,cAAc,EAAE,iBAAiB;IAC7E,wCAAwC;IACxC,UAAU,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,GAAG,OAAO,CAAC;CAC1C;AAED,MAAM,WAAW,eAAe;IAC9B,gDAAgD;IAChD,cAAc,EAAE,GAAG,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC;CACjD;AAID,MAAM,WAAW,qBAAqB;IACpC,GAAG,CAAC,EAAE,CAAC,EAAE,EAAE,WAAW,KAAK,IAAI,CAAC;IAChC,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED;;;GAGG;AACH,eAAO,MAAM,gBAAgB,0DAAoD,CAAC;AA0BlF,MAAM,WAAW,sBAAsB;IACrC,iDAAiD;IACjD,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CACxB;AASD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,eAAe,CAC7B,KAAK,GAAE,oBAAyB,EAChC,GAAG,CAAC,EAAE,CAAC,EAAE,EAAE,WAAW,KAAK,IAAI,GAC9B,eAAe,CA0DjB"}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* createHover hook for Solidaria
|
|
3
|
+
*
|
|
4
|
+
* Handles pointer hover interactions for an element. Normalizes behavior
|
|
5
|
+
* across browsers and platforms, and ignores emulated mouse events on touch devices.
|
|
6
|
+
*
|
|
7
|
+
* Port of @react-aria/interactions useHover.
|
|
8
|
+
*/
|
|
9
|
+
import { type JSX, type Accessor } from 'solid-js';
|
|
10
|
+
import { type MaybeAccessor } from '../utils/reactivity';
|
|
11
|
+
export interface HoverEvent {
|
|
12
|
+
/** The type of hover event being fired. */
|
|
13
|
+
type: 'hoverstart' | 'hoverend';
|
|
14
|
+
/** The pointer type that triggered the hover event. */
|
|
15
|
+
pointerType: 'mouse' | 'pen';
|
|
16
|
+
/** The target element of the hover event. */
|
|
17
|
+
target: Element;
|
|
18
|
+
}
|
|
19
|
+
export interface HoverEvents {
|
|
20
|
+
/** Handler called when the hover starts. */
|
|
21
|
+
onHoverStart?: (e: HoverEvent) => void;
|
|
22
|
+
/** Handler called when the hover ends. */
|
|
23
|
+
onHoverEnd?: (e: HoverEvent) => void;
|
|
24
|
+
/** Handler called when the hover state changes. */
|
|
25
|
+
onHoverChange?: (isHovering: boolean) => void;
|
|
26
|
+
}
|
|
27
|
+
export interface CreateHoverProps extends HoverEvents {
|
|
28
|
+
/** Whether the hover events should be disabled. */
|
|
29
|
+
isDisabled?: boolean;
|
|
30
|
+
}
|
|
31
|
+
export interface HoverResult {
|
|
32
|
+
/** Props to spread on the target element. */
|
|
33
|
+
hoverProps: JSX.HTMLAttributes<HTMLElement>;
|
|
34
|
+
/** Whether the element is currently hovered. */
|
|
35
|
+
isHovered: Accessor<boolean>;
|
|
36
|
+
}
|
|
37
|
+
/**
|
|
38
|
+
* Handles pointer hover interactions for an element.
|
|
39
|
+
*/
|
|
40
|
+
export declare function createHover(props?: MaybeAccessor<CreateHoverProps>): HoverResult;
|
|
41
|
+
//# sourceMappingURL=createHover.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"createHover.d.ts","sourceRoot":"","sources":["../../src/interactions/createHover.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,KAAK,GAAG,EAAE,KAAK,QAAQ,EAAqD,MAAM,UAAU,CAAC;AACtG,OAAO,EAAE,KAAK,aAAa,EAAU,MAAM,qBAAqB,CAAC;AAMjE,MAAM,WAAW,UAAU;IACzB,2CAA2C;IAC3C,IAAI,EAAE,YAAY,GAAG,UAAU,CAAC;IAChC,uDAAuD;IACvD,WAAW,EAAE,OAAO,GAAG,KAAK,CAAC;IAC7B,6CAA6C;IAC7C,MAAM,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,WAAW,WAAW;IAC1B,4CAA4C;IAC5C,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACvC,0CAA0C;IAC1C,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACrC,mDAAmD;IACnD,aAAa,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;CAC/C;AAED,MAAM,WAAW,gBAAiB,SAAQ,WAAW;IACnD,mDAAmD;IACnD,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,WAAW;IAC1B,6CAA6C;IAC7C,UAAU,EAAE,GAAG,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC;IAC5C,gDAAgD;IAChD,SAAS,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;CAC9B;AAwDD;;GAEG;AACH,wBAAgB,WAAW,CAAC,KAAK,GAAE,aAAa,CAAC,gBAAgB,CAAM,GAAG,WAAW,CA8GpF"}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* createKeyboard - Handles keyboard interactions for a focusable element.
|
|
3
|
+
*
|
|
4
|
+
* This is a 1-1 port of React-Aria's useKeyboard hook adapted for SolidJS.
|
|
5
|
+
*/
|
|
6
|
+
import { JSX } from 'solid-js';
|
|
7
|
+
/**
|
|
8
|
+
* Keyboard event with continuePropagation support.
|
|
9
|
+
* By default, keyboard events stop propagation.
|
|
10
|
+
*/
|
|
11
|
+
export interface KeyboardEvent extends globalThis.KeyboardEvent {
|
|
12
|
+
/** Call this to allow the event to propagate to parent elements. */
|
|
13
|
+
continuePropagation(): void;
|
|
14
|
+
}
|
|
15
|
+
export interface KeyboardEvents {
|
|
16
|
+
/** Handler that is called when a key is pressed. */
|
|
17
|
+
onKeyDown?: (e: KeyboardEvent) => void;
|
|
18
|
+
/** Handler that is called when a key is released. */
|
|
19
|
+
onKeyUp?: (e: KeyboardEvent) => void;
|
|
20
|
+
}
|
|
21
|
+
export interface CreateKeyboardProps extends KeyboardEvents {
|
|
22
|
+
/** Whether the keyboard events should be disabled. */
|
|
23
|
+
isDisabled?: boolean;
|
|
24
|
+
}
|
|
25
|
+
export interface KeyboardResult {
|
|
26
|
+
/** Props to spread onto the target element. */
|
|
27
|
+
keyboardProps: JSX.HTMLAttributes<HTMLElement>;
|
|
28
|
+
}
|
|
29
|
+
/**
|
|
30
|
+
* Handles keyboard interactions for a focusable element.
|
|
31
|
+
*
|
|
32
|
+
* Based on react-aria's useKeyboard but adapted for SolidJS.
|
|
33
|
+
*/
|
|
34
|
+
export declare function createKeyboard(props?: CreateKeyboardProps): KeyboardResult;
|
|
35
|
+
//# sourceMappingURL=createKeyboard.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"createKeyboard.d.ts","sourceRoot":"","sources":["../../src/interactions/createKeyboard.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAE/B;;;GAGG;AACH,MAAM,WAAW,aAAc,SAAQ,UAAU,CAAC,aAAa;IAC7D,oEAAoE;IACpE,mBAAmB,IAAI,IAAI,CAAC;CAC7B;AAED,MAAM,WAAW,cAAc;IAC7B,oDAAoD;IACpD,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IACvC,qDAAqD;IACrD,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;CACtC;AAED,MAAM,WAAW,mBAAoB,SAAQ,cAAc;IACzD,sDAAsD;IACtD,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,cAAc;IAC7B,+CAA+C;IAC/C,aAAa,EAAE,GAAG,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC;CAChD;AA+BD;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,KAAK,GAAE,mBAAwB,GAAG,cAAc,CAa9E"}
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* createPress - Handles press interactions across mouse, touch, keyboard, and virtual clicks.
|
|
3
|
+
*
|
|
4
|
+
* This is a 1-1 port of React-Aria's usePress hook adapted for SolidJS.
|
|
5
|
+
* All behaviors, edge cases, and platform-specific handling are preserved.
|
|
6
|
+
*/
|
|
7
|
+
import { JSX, Accessor } from 'solid-js';
|
|
8
|
+
import { PressEvent } from './PressEvent';
|
|
9
|
+
export { PressEvent, type PointerType } from './PressEvent';
|
|
10
|
+
export type { IPressEvent, PressEventType } from './PressEvent';
|
|
11
|
+
export interface CreatePressProps {
|
|
12
|
+
/** Whether the target is currently disabled. */
|
|
13
|
+
isDisabled?: Accessor<boolean> | boolean;
|
|
14
|
+
/** Handler called when the press is released over the target. */
|
|
15
|
+
onPress?: (e: PressEvent) => void;
|
|
16
|
+
/** Handler called when a press interaction starts. */
|
|
17
|
+
onPressStart?: (e: PressEvent) => void;
|
|
18
|
+
/**
|
|
19
|
+
* Handler called when a press interaction ends, either
|
|
20
|
+
* over the target or when the pointer leaves the target.
|
|
21
|
+
*/
|
|
22
|
+
onPressEnd?: (e: PressEvent) => void;
|
|
23
|
+
/** Handler called when a press is released over the target, regardless of whether it started on the target. */
|
|
24
|
+
onPressUp?: (e: PressEvent) => void;
|
|
25
|
+
/** Handler called when the press state changes. */
|
|
26
|
+
onPressChange?: (isPressed: boolean) => void;
|
|
27
|
+
/** Whether the press should be visual only, not triggering onPress. */
|
|
28
|
+
isPressed?: Accessor<boolean> | boolean;
|
|
29
|
+
/** Whether to prevent focus when pressing. */
|
|
30
|
+
preventFocusOnPress?: boolean;
|
|
31
|
+
/** Whether long press should cancel when pointer moves out of target. */
|
|
32
|
+
shouldCancelOnPointerExit?: boolean;
|
|
33
|
+
/** Whether text selection should be allowed during press. */
|
|
34
|
+
allowTextSelectionOnPress?: boolean;
|
|
35
|
+
}
|
|
36
|
+
export interface PressResult {
|
|
37
|
+
/** Whether the target is currently pressed. */
|
|
38
|
+
isPressed: Accessor<boolean>;
|
|
39
|
+
/** Props to spread on the target element. */
|
|
40
|
+
pressProps: JSX.HTMLAttributes<HTMLElement>;
|
|
41
|
+
}
|
|
42
|
+
/**
|
|
43
|
+
* Handles press interactions across mouse, touch, keyboard, and screen readers.
|
|
44
|
+
* Provides consistent press behavior regardless of input method.
|
|
45
|
+
*
|
|
46
|
+
* Based on react-aria's usePress but adapted for SolidJS.
|
|
47
|
+
*/
|
|
48
|
+
export declare function createPress(props?: CreatePressProps): PressResult;
|
|
49
|
+
//# sourceMappingURL=createPress.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"createPress.d.ts","sourceRoot":"","sources":["../../src/interactions/createPress.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAgB,GAAG,EAAE,QAAQ,EAAa,MAAM,UAAU,CAAC;AAClE,OAAO,EAAE,UAAU,EAAiC,MAAM,cAAc,CAAC;AAqBzE,OAAO,EAAE,UAAU,EAAE,KAAK,WAAW,EAAE,MAAM,cAAc,CAAC;AAC5D,YAAY,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAEhE,MAAM,WAAW,gBAAgB;IAC/B,gDAAgD;IAChD,UAAU,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,GAAG,OAAO,CAAC;IACzC,iEAAiE;IACjE,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,sDAAsD;IACtD,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACvC;;;OAGG;IACH,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACrC,+GAA+G;IAC/G,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACpC,mDAAmD;IACnD,aAAa,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,uEAAuE;IACvE,SAAS,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,GAAG,OAAO,CAAC;IACxC,8CAA8C;IAC9C,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,yEAAyE;IACzE,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,6DAA6D;IAC7D,yBAAyB,CAAC,EAAE,OAAO,CAAC;CACrC;AAED,MAAM,WAAW,WAAW;IAC1B,+CAA+C;IAC/C,SAAS,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;IAC7B,6CAA6C;IAC7C,UAAU,EAAE,GAAG,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC;CAC7C;AAmCD;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,KAAK,GAAE,gBAAqB,GAAG,WAAW,CA6oBrE"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
export { createPress, type CreatePressProps, type PressResult } from './createPress';
|
|
2
|
+
export { PressEvent, type IPressEvent, type PointerType, type PressEventType } from './PressEvent';
|
|
3
|
+
export { createFocus, type CreateFocusProps, type FocusResult, type FocusEvents } from './createFocus';
|
|
4
|
+
export { createFocusWithin, type FocusWithinProps, type FocusWithinResult, } from './createFocusWithin';
|
|
5
|
+
export { createFocusable, FocusableContext, type CreateFocusableProps, type FocusableResult, type FocusableContextValue, type FocusableProviderProps, type FocusableProps, type FocusableDOMProps, } from './createFocusable';
|
|
6
|
+
export { FocusableProvider } from './FocusableProvider';
|
|
7
|
+
export { createFocusRing, type FocusRingProps, type FocusRingResult, } from './createFocusRing';
|
|
8
|
+
export { createHover, type CreateHoverProps, type HoverResult, type HoverEvent, type HoverEvents, } from './createHover';
|
|
9
|
+
export { createKeyboard, type CreateKeyboardProps, type KeyboardResult, type KeyboardEvents, type KeyboardEvent, } from './createKeyboard';
|
|
10
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/interactions/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,KAAK,WAAW,EAAE,MAAM,eAAe,CAAC;AACrF,OAAO,EAAE,UAAU,EAAE,KAAK,WAAW,EAAE,KAAK,WAAW,EAAE,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAGnG,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,KAAK,WAAW,EAAE,KAAK,WAAW,EAAE,MAAM,eAAe,CAAC;AACvG,OAAO,EACL,iBAAiB,EACjB,KAAK,gBAAgB,EACrB,KAAK,iBAAiB,GACvB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EACL,eAAe,EACf,gBAAgB,EAChB,KAAK,oBAAoB,EACzB,KAAK,eAAe,EACpB,KAAK,qBAAqB,EAC1B,KAAK,sBAAsB,EAC3B,KAAK,cAAc,EACnB,KAAK,iBAAiB,GACvB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EACL,eAAe,EACf,KAAK,cAAc,EACnB,KAAK,eAAe,GACrB,MAAM,mBAAmB,CAAC;AAG3B,OAAO,EACL,WAAW,EACX,KAAK,gBAAgB,EACrB,KAAK,WAAW,EAChB,KAAK,UAAU,EACf,KAAK,WAAW,GACjB,MAAM,eAAe,CAAC;AAGvB,OAAO,EACL,cAAc,EACd,KAAK,mBAAmB,EACxB,KAAK,cAAc,EACnB,KAAK,cAAc,EACnB,KAAK,aAAa,GACnB,MAAM,kBAAkB,CAAC"}
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Field hook for Solidaria
|
|
3
|
+
*
|
|
4
|
+
* Provides the accessibility implementation for input fields.
|
|
5
|
+
* Fields accept user input, gain context from their label, and may display
|
|
6
|
+
* a description or error message.
|
|
7
|
+
*
|
|
8
|
+
* This is a 1:1 port of @react-aria/label's useField hook.
|
|
9
|
+
*/
|
|
10
|
+
import { JSX } from 'solid-js';
|
|
11
|
+
import { type LabelAriaProps, type LabelAria } from './createLabel';
|
|
12
|
+
import { type MaybeAccessor } from '../utils/reactivity';
|
|
13
|
+
export interface HelpTextProps {
|
|
14
|
+
/** A description for the field. Provides a hint such as specific requirements for what to choose. */
|
|
15
|
+
description?: JSX.Element;
|
|
16
|
+
/** An error message for the field. */
|
|
17
|
+
errorMessage?: JSX.Element | ((validation: ValidationResult) => JSX.Element);
|
|
18
|
+
}
|
|
19
|
+
export interface ValidationResult {
|
|
20
|
+
/** Whether the input value is invalid. */
|
|
21
|
+
isInvalid: boolean;
|
|
22
|
+
/** The current error messages for the input if it is invalid, otherwise an empty array. */
|
|
23
|
+
validationErrors: string[];
|
|
24
|
+
/** The native validity state for the input. */
|
|
25
|
+
validationDetails: ValidityState;
|
|
26
|
+
}
|
|
27
|
+
export interface Validation<T> {
|
|
28
|
+
/** Whether the input value is invalid. */
|
|
29
|
+
isInvalid?: boolean;
|
|
30
|
+
/** Whether the input is required before form submission. */
|
|
31
|
+
isRequired?: boolean;
|
|
32
|
+
/** A function that returns an error message if a given value is invalid. */
|
|
33
|
+
validate?: (value: T) => string | string[] | true | null | undefined;
|
|
34
|
+
}
|
|
35
|
+
export interface AriaFieldProps extends LabelAriaProps, HelpTextProps, Omit<Validation<any>, 'isRequired'> {
|
|
36
|
+
}
|
|
37
|
+
export interface FieldAria extends LabelAria {
|
|
38
|
+
/** Props for the description element, if any. */
|
|
39
|
+
descriptionProps: JSX.HTMLAttributes<HTMLElement>;
|
|
40
|
+
/** Props for the error message element, if any. */
|
|
41
|
+
errorMessageProps: JSX.HTMLAttributes<HTMLElement>;
|
|
42
|
+
}
|
|
43
|
+
/**
|
|
44
|
+
* Provides the accessibility implementation for input fields.
|
|
45
|
+
* Fields accept user input, gain context from their label, and may display
|
|
46
|
+
* a description or error message.
|
|
47
|
+
*
|
|
48
|
+
* @param props - Props for the Field.
|
|
49
|
+
*/
|
|
50
|
+
export declare function createField(props: MaybeAccessor<AriaFieldProps>): FieldAria;
|
|
51
|
+
//# sourceMappingURL=createField.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"createField.d.ts","sourceRoot":"","sources":["../../src/label/createField.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAE/B,OAAO,EAAe,KAAK,cAAc,EAAE,KAAK,SAAS,EAAyC,MAAM,eAAe,CAAC;AAExH,OAAO,EAAE,KAAK,aAAa,EAAU,MAAM,qBAAqB,CAAC;AAMjE,MAAM,WAAW,aAAa;IAC5B,qGAAqG;IACrG,WAAW,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC1B,sCAAsC;IACtC,YAAY,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,CAAC,CAAC,UAAU,EAAE,gBAAgB,KAAK,GAAG,CAAC,OAAO,CAAC,CAAC;CAC9E;AAED,MAAM,WAAW,gBAAgB;IAC/B,0CAA0C;IAC1C,SAAS,EAAE,OAAO,CAAC;IACnB,2FAA2F;IAC3F,gBAAgB,EAAE,MAAM,EAAE,CAAC;IAC3B,+CAA+C;IAC/C,iBAAiB,EAAE,aAAa,CAAC;CAClC;AAED,MAAM,WAAW,UAAU,CAAC,CAAC;IAC3B,0CAA0C;IAC1C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,4DAA4D;IAC5D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,CAAC;CACtE;AAED,MAAM,WAAW,cAAe,SAAQ,cAAc,EAAE,aAAa,EAAE,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE,YAAY,CAAC;CAAG;AAE7G,MAAM,WAAW,SAAU,SAAQ,SAAS;IAC1C,iDAAiD;IACjD,gBAAgB,EAAE,GAAG,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC;IAClD,mDAAmD;IACnD,iBAAiB,EAAE,GAAG,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC;CACpD;AAMD;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,aAAa,CAAC,cAAc,CAAC,GAAG,SAAS,CA+E3E"}
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Label hook for Solidaria
|
|
3
|
+
*
|
|
4
|
+
* Provides the accessibility implementation for labels and their associated elements.
|
|
5
|
+
* Labels provide context for user inputs.
|
|
6
|
+
*
|
|
7
|
+
* This is a 1:1 port of @react-aria/label's useLabel hook.
|
|
8
|
+
*/
|
|
9
|
+
import { JSX } from 'solid-js';
|
|
10
|
+
import { type MaybeAccessor } from '../utils/reactivity';
|
|
11
|
+
export interface AriaLabelingProps {
|
|
12
|
+
/** Defines a string value that labels the current element. */
|
|
13
|
+
'aria-label'?: string;
|
|
14
|
+
/** Identifies the element (or elements) that labels the current element. */
|
|
15
|
+
'aria-labelledby'?: string;
|
|
16
|
+
/** Identifies the element (or elements) that describes the object. */
|
|
17
|
+
'aria-describedby'?: string;
|
|
18
|
+
/** Identifies the element (or elements) that provide a detailed, extended description for the object. */
|
|
19
|
+
'aria-details'?: string;
|
|
20
|
+
}
|
|
21
|
+
export interface LabelableProps {
|
|
22
|
+
/** The content to display as the label. */
|
|
23
|
+
label?: JSX.Element;
|
|
24
|
+
}
|
|
25
|
+
export interface DOMProps {
|
|
26
|
+
/** The element's unique identifier. */
|
|
27
|
+
id?: string;
|
|
28
|
+
}
|
|
29
|
+
export interface LabelAriaProps extends LabelableProps, DOMProps, AriaLabelingProps {
|
|
30
|
+
/**
|
|
31
|
+
* The HTML element used to render the label, e.g. 'label', or 'span'.
|
|
32
|
+
* @default 'label'
|
|
33
|
+
*/
|
|
34
|
+
labelElementType?: 'label' | 'span' | 'div';
|
|
35
|
+
}
|
|
36
|
+
export interface LabelAria {
|
|
37
|
+
/** Props to apply to the label container element. */
|
|
38
|
+
labelProps: JSX.LabelHTMLAttributes<HTMLLabelElement> | JSX.HTMLAttributes<HTMLSpanElement>;
|
|
39
|
+
/** Props to apply to the field container element being labeled. */
|
|
40
|
+
fieldProps: AriaLabelingProps & DOMProps;
|
|
41
|
+
}
|
|
42
|
+
/**
|
|
43
|
+
* Provides the accessibility implementation for labels and their associated elements.
|
|
44
|
+
* Labels provide context for user inputs.
|
|
45
|
+
*
|
|
46
|
+
* @param props - The props for labels and fields.
|
|
47
|
+
*/
|
|
48
|
+
export declare function createLabel(props: MaybeAccessor<LabelAriaProps>): LabelAria;
|
|
49
|
+
//# sourceMappingURL=createLabel.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"createLabel.d.ts","sourceRoot":"","sources":["../../src/label/createLabel.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAG/B,OAAO,EAAE,KAAK,aAAa,EAAU,MAAM,qBAAqB,CAAC;AAMjE,MAAM,WAAW,iBAAiB;IAChC,8DAA8D;IAC9D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,4EAA4E;IAC5E,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,sEAAsE;IACtE,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,yGAAyG;IACzG,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,cAAc;IAC7B,2CAA2C;IAC3C,KAAK,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,QAAQ;IACvB,uCAAuC;IACvC,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,cAAe,SAAQ,cAAc,EAAE,QAAQ,EAAE,iBAAiB;IACjF;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,KAAK,CAAC;CAC7C;AAED,MAAM,WAAW,SAAS;IACxB,qDAAqD;IACrD,UAAU,EAAE,GAAG,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,GAAG,GAAG,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC;IAC5F,mEAAmE;IACnE,UAAU,EAAE,iBAAiB,GAAG,QAAQ,CAAC;CAC1C;AAMD;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,aAAa,CAAC,cAAc,CAAC,GAAG,SAAS,CAmD3E"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Labels utility for Solidaria
|
|
3
|
+
*
|
|
4
|
+
* Merges aria-label and aria-labelledby into aria-labelledby when both exist.
|
|
5
|
+
*
|
|
6
|
+
* This is a 1:1 port of @react-aria/utils's useLabels hook.
|
|
7
|
+
*/
|
|
8
|
+
import type { AriaLabelingProps, DOMProps } from './createLabel';
|
|
9
|
+
/**
|
|
10
|
+
* Merges aria-label and aria-labelledby into aria-labelledby when both exist.
|
|
11
|
+
*
|
|
12
|
+
* @param props - Aria label props.
|
|
13
|
+
* @param defaultLabel - Default value for aria-label when not present.
|
|
14
|
+
*/
|
|
15
|
+
export declare function createLabels(props: DOMProps & AriaLabelingProps, defaultLabel?: string): DOMProps & AriaLabelingProps;
|
|
16
|
+
//# sourceMappingURL=createLabels.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"createLabels.d.ts","sourceRoot":"","sources":["../../src/label/createLabels.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,KAAK,EAAE,iBAAiB,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEjE;;;;;GAKG;AACH,wBAAgB,YAAY,CAC1B,KAAK,EAAE,QAAQ,GAAG,iBAAiB,EACnC,YAAY,CAAC,EAAE,MAAM,GACpB,QAAQ,GAAG,iBAAiB,CA6B9B"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
export { createLabel } from './createLabel';
|
|
2
|
+
export type { LabelAriaProps, LabelAria, AriaLabelingProps, LabelableProps, DOMProps, } from './createLabel';
|
|
3
|
+
export { createField } from './createField';
|
|
4
|
+
export type { AriaFieldProps, FieldAria, HelpTextProps, ValidationResult, Validation, } from './createField';
|
|
5
|
+
export { createLabels } from './createLabels';
|
|
6
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/label/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EACV,cAAc,EACd,SAAS,EACT,iBAAiB,EACjB,cAAc,EACd,QAAQ,GACT,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EACV,cAAc,EACd,SAAS,EACT,aAAa,EACb,gBAAgB,EAChB,UAAU,GACX,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC"}
|