@moul-dev/ui 2026.9.10 → 2026.9.13
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/assets/stylex.css +40 -0
- package/dist/moul-ui.js +1933 -1552
- package/dist/src/components/Autocomplete/Autocomplete.d.ts +92 -0
- package/dist/src/components/Autocomplete/Autocomplete.styles.d.ts +200 -0
- package/dist/src/components/Autocomplete/index.d.ts +2 -0
- package/dist/src/components/ComboBox/ComboBox.d.ts +15 -4
- package/dist/src/components/ComboBox/ComboBox.styles.d.ts +3 -3
- package/dist/src/components/NumberField/NumberField.styles.d.ts +3 -3
- package/dist/src/components/SearchField/SearchField.styles.d.ts +4 -3
- package/dist/src/index.d.ts +3 -1
- package/package.json +1 -1
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
import { StyleXStyles } from '@stylexjs/stylex';
|
|
2
|
+
import { AutocompleteProps as AriaAutocompleteProps, ListBoxItemProps as AriaListBoxItemProps, ListBoxProps as AriaListBoxProps, ListBoxSectionProps as AriaListBoxSectionProps, PopoverProps as AriaPopoverProps } from 'react-aria-components';
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
export type AutocompleteSize = 'sm' | 'md' | 'lg';
|
|
5
|
+
export type AutocompleteMode = 'client' | 'async';
|
|
6
|
+
interface AutocompleteContextValue {
|
|
7
|
+
size: AutocompleteSize;
|
|
8
|
+
containerRef: React.RefObject<Element | null>;
|
|
9
|
+
}
|
|
10
|
+
export declare const useAutocompleteInnerContext: () => AutocompleteContextValue;
|
|
11
|
+
export type { Filter } from 'react-aria-components';
|
|
12
|
+
export { AutocompleteContext, AutocompleteStateContext, useFilter, } from 'react-aria-components';
|
|
13
|
+
export interface AutocompleteEmptyStateProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'style'> {
|
|
14
|
+
style?: StyleXStyles;
|
|
15
|
+
className?: string;
|
|
16
|
+
children?: React.ReactNode;
|
|
17
|
+
}
|
|
18
|
+
export declare const AutocompleteEmptyState: React.ForwardRefExoticComponent<AutocompleteEmptyStateProps & React.RefAttributes<HTMLDivElement>>;
|
|
19
|
+
export interface AutocompleteItemProps extends Omit<AriaListBoxItemProps, 'style' | 'children'> {
|
|
20
|
+
style?: StyleXStyles;
|
|
21
|
+
className?: string;
|
|
22
|
+
description?: string;
|
|
23
|
+
icon?: React.ReactNode;
|
|
24
|
+
shortcut?: string | React.ReactNode;
|
|
25
|
+
showCheckmark?: boolean;
|
|
26
|
+
children?: React.ReactNode | ((values: {
|
|
27
|
+
isHovered: boolean;
|
|
28
|
+
isFocused: boolean;
|
|
29
|
+
isSelected: boolean;
|
|
30
|
+
isDisabled: boolean;
|
|
31
|
+
}) => React.ReactNode);
|
|
32
|
+
}
|
|
33
|
+
export declare const AutocompleteItem: React.ForwardRefExoticComponent<AutocompleteItemProps & React.RefAttributes<HTMLDivElement>>;
|
|
34
|
+
export interface AutocompleteSectionProps<T = object> extends Omit<AriaListBoxSectionProps<T>, 'style'> {
|
|
35
|
+
title?: string;
|
|
36
|
+
style?: StyleXStyles;
|
|
37
|
+
className?: string;
|
|
38
|
+
}
|
|
39
|
+
export declare const AutocompleteSection: <T extends object>(props: AutocompleteSectionProps<T> & {
|
|
40
|
+
ref?: React.ForwardedRef<HTMLElement>;
|
|
41
|
+
}) => React.ReactElement;
|
|
42
|
+
export interface AutocompleteListProps<T> extends Omit<AriaListBoxProps<T>, 'style'> {
|
|
43
|
+
size?: AutocompleteSize;
|
|
44
|
+
variant?: 'bordered' | 'borderless';
|
|
45
|
+
style?: StyleXStyles;
|
|
46
|
+
className?: string;
|
|
47
|
+
}
|
|
48
|
+
export declare const AutocompleteList: <T extends object>(props: AutocompleteListProps<T> & {
|
|
49
|
+
ref?: React.ForwardedRef<HTMLDivElement>;
|
|
50
|
+
}) => React.ReactElement;
|
|
51
|
+
export interface AutocompletePopoverProps extends Omit<AriaPopoverProps, 'style' | 'className'> {
|
|
52
|
+
size?: AutocompleteSize;
|
|
53
|
+
style?: StyleXStyles;
|
|
54
|
+
className?: string;
|
|
55
|
+
triggerRef?: React.RefObject<Element | null>;
|
|
56
|
+
}
|
|
57
|
+
export declare const AutocompletePopover: React.ForwardRefExoticComponent<AutocompletePopoverProps & React.RefAttributes<HTMLElement>>;
|
|
58
|
+
export interface AutocompleteProps<T = object> extends Omit<AriaAutocompleteProps<T>, 'filter' | 'children'> {
|
|
59
|
+
/**
|
|
60
|
+
* Filter function used to match items against the input.
|
|
61
|
+
* If not provided, a case-insensitive 'contains' filter is applied by default.
|
|
62
|
+
* Pass `null` or set `mode="async"` to disable client-side filtering for remote/async lists.
|
|
63
|
+
*/
|
|
64
|
+
filter?: ((textValue: string, inputValue: string, node?: any) => boolean) | null;
|
|
65
|
+
/**
|
|
66
|
+
* Operating mode:
|
|
67
|
+
* - `'client'`: uses client-side filtering (default)
|
|
68
|
+
* - `'async'`: bypasses local filtering to allow server/API search
|
|
69
|
+
* @default 'client'
|
|
70
|
+
*/
|
|
71
|
+
mode?: AutocompleteMode;
|
|
72
|
+
/**
|
|
73
|
+
* Component size inherited by children (list, items, popover).
|
|
74
|
+
* @default 'md'
|
|
75
|
+
*/
|
|
76
|
+
size?: AutocompleteSize;
|
|
77
|
+
/**
|
|
78
|
+
* If true, `<Autocomplete>` will not render a container `<div>` DOM element,
|
|
79
|
+
* behaving as a pure transparent context coordinator.
|
|
80
|
+
* @default false
|
|
81
|
+
*/
|
|
82
|
+
headless?: boolean;
|
|
83
|
+
/** StyleX override styles for the container */
|
|
84
|
+
style?: StyleXStyles;
|
|
85
|
+
/** Custom CSS class names for the container */
|
|
86
|
+
className?: string;
|
|
87
|
+
/** Children elements (input + collection) */
|
|
88
|
+
children?: React.ReactNode;
|
|
89
|
+
}
|
|
90
|
+
export declare const Autocomplete: <T extends object>(props: AutocompleteProps<T> & {
|
|
91
|
+
ref?: React.ForwardedRef<HTMLDivElement>;
|
|
92
|
+
}) => React.ReactElement;
|
|
@@ -0,0 +1,200 @@
|
|
|
1
|
+
import * as stylex from '@stylexjs/stylex';
|
|
2
|
+
export declare const styles: Readonly<{
|
|
3
|
+
readonly container: Readonly<{
|
|
4
|
+
readonly display: stylex.StyleXClassNameFor<"display", "flex">;
|
|
5
|
+
readonly flexDirection: stylex.StyleXClassNameFor<"flexDirection", "column">;
|
|
6
|
+
readonly gap: stylex.StyleXClassNameFor<"gap", string>;
|
|
7
|
+
readonly width: stylex.StyleXClassNameFor<"width", "100%">;
|
|
8
|
+
readonly position: stylex.StyleXClassNameFor<"position", "relative">;
|
|
9
|
+
readonly boxSizing: stylex.StyleXClassNameFor<"boxSizing", "border-box">;
|
|
10
|
+
}>;
|
|
11
|
+
readonly list: Readonly<{
|
|
12
|
+
readonly display: stylex.StyleXClassNameFor<"display", "flex">;
|
|
13
|
+
readonly flexDirection: stylex.StyleXClassNameFor<"flexDirection", "column">;
|
|
14
|
+
readonly gap: stylex.StyleXClassNameFor<"gap", "2px">;
|
|
15
|
+
readonly padding: stylex.StyleXClassNameFor<"padding", string>;
|
|
16
|
+
readonly outline: stylex.StyleXClassNameFor<"outline", "none">;
|
|
17
|
+
readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
|
|
18
|
+
readonly borderWidth: stylex.StyleXClassNameFor<"borderWidth", "1px">;
|
|
19
|
+
readonly borderStyle: stylex.StyleXClassNameFor<"borderStyle", "solid">;
|
|
20
|
+
readonly borderColor: stylex.StyleXClassNameFor<"borderColor", string>;
|
|
21
|
+
readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
|
|
22
|
+
readonly boxShadow: stylex.StyleXClassNameFor<"boxShadow", string>;
|
|
23
|
+
readonly boxSizing: stylex.StyleXClassNameFor<"boxSizing", "border-box">;
|
|
24
|
+
readonly overflowY: stylex.StyleXClassNameFor<"overflowY", "auto">;
|
|
25
|
+
readonly maxHeight: stylex.StyleXClassNameFor<"maxHeight", "300px">;
|
|
26
|
+
}>;
|
|
27
|
+
readonly listSm: Readonly<{
|
|
28
|
+
readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
|
|
29
|
+
readonly padding: stylex.StyleXClassNameFor<"padding", string>;
|
|
30
|
+
}>;
|
|
31
|
+
readonly listMd: Readonly<{
|
|
32
|
+
readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
|
|
33
|
+
readonly padding: stylex.StyleXClassNameFor<"padding", string>;
|
|
34
|
+
}>;
|
|
35
|
+
readonly listLg: Readonly<{
|
|
36
|
+
readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
|
|
37
|
+
readonly padding: stylex.StyleXClassNameFor<"padding", string>;
|
|
38
|
+
}>;
|
|
39
|
+
readonly listBorderless: Readonly<{
|
|
40
|
+
readonly borderWidth: stylex.StyleXClassNameFor<"borderWidth", 0>;
|
|
41
|
+
readonly boxShadow: stylex.StyleXClassNameFor<"boxShadow", "none">;
|
|
42
|
+
readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "transparent">;
|
|
43
|
+
readonly padding: stylex.StyleXClassNameFor<"padding", 0>;
|
|
44
|
+
readonly maxHeight: stylex.StyleXClassNameFor<"maxHeight", "none">;
|
|
45
|
+
}>;
|
|
46
|
+
readonly item: Readonly<{
|
|
47
|
+
readonly display: stylex.StyleXClassNameFor<"display", "flex">;
|
|
48
|
+
readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
|
|
49
|
+
readonly gap: stylex.StyleXClassNameFor<"gap", string>;
|
|
50
|
+
readonly cursor: stylex.StyleXClassNameFor<"cursor", "pointer">;
|
|
51
|
+
readonly outline: stylex.StyleXClassNameFor<"outline", "none">;
|
|
52
|
+
readonly userSelect: stylex.StyleXClassNameFor<"userSelect", "none">;
|
|
53
|
+
readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "transparent">;
|
|
54
|
+
readonly color: stylex.StyleXClassNameFor<"color", string>;
|
|
55
|
+
readonly fontFamily: stylex.StyleXClassNameFor<"fontFamily", string>;
|
|
56
|
+
readonly transitionProperty: stylex.StyleXClassNameFor<"transitionProperty", "background-color, color">;
|
|
57
|
+
readonly transitionDuration: stylex.StyleXClassNameFor<"transitionDuration", "0.12s">;
|
|
58
|
+
readonly transitionTimingFunction: stylex.StyleXClassNameFor<"transitionTimingFunction", "ease-in-out">;
|
|
59
|
+
readonly boxSizing: stylex.StyleXClassNameFor<"boxSizing", "border-box">;
|
|
60
|
+
readonly width: stylex.StyleXClassNameFor<"width", "100%">;
|
|
61
|
+
}>;
|
|
62
|
+
readonly itemSm: Readonly<{
|
|
63
|
+
readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", string>;
|
|
64
|
+
readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
|
|
65
|
+
readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
|
|
66
|
+
readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
|
|
67
|
+
readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", string>;
|
|
68
|
+
readonly minHeight: stylex.StyleXClassNameFor<"minHeight", "28px">;
|
|
69
|
+
}>;
|
|
70
|
+
readonly itemMd: Readonly<{
|
|
71
|
+
readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", string>;
|
|
72
|
+
readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
|
|
73
|
+
readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
|
|
74
|
+
readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
|
|
75
|
+
readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", string>;
|
|
76
|
+
readonly minHeight: stylex.StyleXClassNameFor<"minHeight", "36px">;
|
|
77
|
+
}>;
|
|
78
|
+
readonly itemLg: Readonly<{
|
|
79
|
+
readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", string>;
|
|
80
|
+
readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
|
|
81
|
+
readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
|
|
82
|
+
readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
|
|
83
|
+
readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", string>;
|
|
84
|
+
readonly minHeight: stylex.StyleXClassNameFor<"minHeight", "44px">;
|
|
85
|
+
}>;
|
|
86
|
+
readonly itemHovered: Readonly<{
|
|
87
|
+
readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
|
|
88
|
+
}>;
|
|
89
|
+
readonly itemFocused: Readonly<{
|
|
90
|
+
readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
|
|
91
|
+
}>;
|
|
92
|
+
readonly itemSelected: Readonly<{
|
|
93
|
+
readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
|
|
94
|
+
readonly color: stylex.StyleXClassNameFor<"color", string>;
|
|
95
|
+
readonly fontWeight: stylex.StyleXClassNameFor<"fontWeight", string>;
|
|
96
|
+
}>;
|
|
97
|
+
readonly itemDisabled: Readonly<{
|
|
98
|
+
readonly opacity: stylex.StyleXClassNameFor<"opacity", 0.4>;
|
|
99
|
+
readonly cursor: stylex.StyleXClassNameFor<"cursor", "not-allowed">;
|
|
100
|
+
}>;
|
|
101
|
+
readonly itemIcon: Readonly<{
|
|
102
|
+
readonly display: stylex.StyleXClassNameFor<"display", "inline-flex">;
|
|
103
|
+
readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
|
|
104
|
+
readonly justifyContent: stylex.StyleXClassNameFor<"justifyContent", "center">;
|
|
105
|
+
readonly flexShrink: stylex.StyleXClassNameFor<"flexShrink", 0>;
|
|
106
|
+
readonly color: stylex.StyleXClassNameFor<"color", string>;
|
|
107
|
+
}>;
|
|
108
|
+
readonly itemIconSm: Readonly<{
|
|
109
|
+
readonly width: stylex.StyleXClassNameFor<"width", "14px">;
|
|
110
|
+
readonly height: stylex.StyleXClassNameFor<"height", "14px">;
|
|
111
|
+
}>;
|
|
112
|
+
readonly itemIconMd: Readonly<{
|
|
113
|
+
readonly width: stylex.StyleXClassNameFor<"width", "16px">;
|
|
114
|
+
readonly height: stylex.StyleXClassNameFor<"height", "16px">;
|
|
115
|
+
}>;
|
|
116
|
+
readonly itemIconLg: Readonly<{
|
|
117
|
+
readonly width: stylex.StyleXClassNameFor<"width", "20px">;
|
|
118
|
+
readonly height: stylex.StyleXClassNameFor<"height", "20px">;
|
|
119
|
+
}>;
|
|
120
|
+
readonly itemContent: Readonly<{
|
|
121
|
+
readonly display: stylex.StyleXClassNameFor<"display", "flex">;
|
|
122
|
+
readonly flexDirection: stylex.StyleXClassNameFor<"flexDirection", "column">;
|
|
123
|
+
readonly flexGrow: stylex.StyleXClassNameFor<"flexGrow", 1>;
|
|
124
|
+
readonly minWidth: stylex.StyleXClassNameFor<"minWidth", 0>;
|
|
125
|
+
readonly textAlign: stylex.StyleXClassNameFor<"textAlign", "start">;
|
|
126
|
+
}>;
|
|
127
|
+
readonly itemLabel: Readonly<{
|
|
128
|
+
readonly overflow: stylex.StyleXClassNameFor<"overflow", "hidden">;
|
|
129
|
+
readonly textOverflow: stylex.StyleXClassNameFor<"textOverflow", "ellipsis">;
|
|
130
|
+
readonly whiteSpace: stylex.StyleXClassNameFor<"whiteSpace", "nowrap">;
|
|
131
|
+
}>;
|
|
132
|
+
readonly itemDescription: Readonly<{
|
|
133
|
+
readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
|
|
134
|
+
readonly color: stylex.StyleXClassNameFor<"color", string>;
|
|
135
|
+
readonly overflow: stylex.StyleXClassNameFor<"overflow", "hidden">;
|
|
136
|
+
readonly textOverflow: stylex.StyleXClassNameFor<"textOverflow", "ellipsis">;
|
|
137
|
+
readonly whiteSpace: stylex.StyleXClassNameFor<"whiteSpace", "nowrap">;
|
|
138
|
+
}>;
|
|
139
|
+
readonly itemEnd: Readonly<{
|
|
140
|
+
readonly display: stylex.StyleXClassNameFor<"display", "inline-flex">;
|
|
141
|
+
readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
|
|
142
|
+
readonly gap: stylex.StyleXClassNameFor<"gap", string>;
|
|
143
|
+
readonly flexShrink: stylex.StyleXClassNameFor<"flexShrink", 0>;
|
|
144
|
+
readonly marginInlineStart: stylex.StyleXClassNameFor<"marginInlineStart", "auto">;
|
|
145
|
+
}>;
|
|
146
|
+
readonly checkIcon: Readonly<{
|
|
147
|
+
readonly width: stylex.StyleXClassNameFor<"width", "14px">;
|
|
148
|
+
readonly height: stylex.StyleXClassNameFor<"height", "14px">;
|
|
149
|
+
readonly color: stylex.StyleXClassNameFor<"color", string>;
|
|
150
|
+
}>;
|
|
151
|
+
readonly section: Readonly<{
|
|
152
|
+
readonly display: stylex.StyleXClassNameFor<"display", "flex">;
|
|
153
|
+
readonly flexDirection: stylex.StyleXClassNameFor<"flexDirection", "column">;
|
|
154
|
+
readonly gap: stylex.StyleXClassNameFor<"gap", "2px">;
|
|
155
|
+
readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", string>;
|
|
156
|
+
}>;
|
|
157
|
+
readonly sectionHeader: Readonly<{
|
|
158
|
+
readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
|
|
159
|
+
readonly fontWeight: stylex.StyleXClassNameFor<"fontWeight", string>;
|
|
160
|
+
readonly color: stylex.StyleXClassNameFor<"color", string>;
|
|
161
|
+
readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", string>;
|
|
162
|
+
readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
|
|
163
|
+
readonly textTransform: stylex.StyleXClassNameFor<"textTransform", "uppercase">;
|
|
164
|
+
readonly letterSpacing: stylex.StyleXClassNameFor<"letterSpacing", "0.05em">;
|
|
165
|
+
readonly userSelect: stylex.StyleXClassNameFor<"userSelect", "none">;
|
|
166
|
+
}>;
|
|
167
|
+
readonly empty: Readonly<{
|
|
168
|
+
readonly display: stylex.StyleXClassNameFor<"display", "flex">;
|
|
169
|
+
readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
|
|
170
|
+
readonly justifyContent: stylex.StyleXClassNameFor<"justifyContent", "center">;
|
|
171
|
+
readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", string>;
|
|
172
|
+
readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
|
|
173
|
+
readonly color: stylex.StyleXClassNameFor<"color", string>;
|
|
174
|
+
readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
|
|
175
|
+
readonly textAlign: stylex.StyleXClassNameFor<"textAlign", "center">;
|
|
176
|
+
}>;
|
|
177
|
+
readonly popover: Readonly<{
|
|
178
|
+
readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
|
|
179
|
+
readonly boxShadow: stylex.StyleXClassNameFor<"boxShadow", string>;
|
|
180
|
+
readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
|
|
181
|
+
readonly borderWidth: stylex.StyleXClassNameFor<"borderWidth", "1px">;
|
|
182
|
+
readonly borderStyle: stylex.StyleXClassNameFor<"borderStyle", "solid">;
|
|
183
|
+
readonly borderColor: stylex.StyleXClassNameFor<"borderColor", string>;
|
|
184
|
+
readonly zIndex: stylex.StyleXClassNameFor<"zIndex", string>;
|
|
185
|
+
readonly outline: stylex.StyleXClassNameFor<"outline", "none">;
|
|
186
|
+
readonly minWidth: stylex.StyleXClassNameFor<"minWidth", "var(--trigger-width)">;
|
|
187
|
+
readonly maxHeight: stylex.StyleXClassNameFor<"maxHeight", "320px">;
|
|
188
|
+
readonly overflowY: stylex.StyleXClassNameFor<"overflowY", "auto">;
|
|
189
|
+
readonly boxSizing: stylex.StyleXClassNameFor<"boxSizing", "border-box">;
|
|
190
|
+
}>;
|
|
191
|
+
readonly popoverSm: Readonly<{
|
|
192
|
+
readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
|
|
193
|
+
}>;
|
|
194
|
+
readonly popoverMd: Readonly<{
|
|
195
|
+
readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
|
|
196
|
+
}>;
|
|
197
|
+
readonly popoverLg: Readonly<{
|
|
198
|
+
readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
|
|
199
|
+
}>;
|
|
200
|
+
}>;
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
export type { AutocompleteEmptyStateProps, AutocompleteItemProps, AutocompleteListProps, AutocompleteMode, AutocompletePopoverProps, AutocompleteProps, AutocompleteSectionProps, AutocompleteSize, Filter, } from './Autocomplete';
|
|
2
|
+
export { Autocomplete, AutocompleteContext, AutocompleteEmptyState, AutocompleteItem, AutocompleteList, AutocompletePopover, AutocompleteSection, AutocompleteStateContext, useAutocompleteInnerContext, useFilter, } from './Autocomplete';
|
|
@@ -1,18 +1,20 @@
|
|
|
1
1
|
import { StyleXStyles } from '@stylexjs/stylex';
|
|
2
|
-
import { ComboBoxProps as AriaComboBoxProps, ListBoxItemProps as AriaListBoxItemProps,
|
|
2
|
+
import { ComboBoxProps as AriaComboBoxProps, ListBoxItemProps as AriaListBoxItemProps, ListBoxSectionProps as AriaListBoxSectionProps, Key, ListBoxRenderProps, ValidationResult } from 'react-aria-components';
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
export interface ComboBoxItemProps extends Omit<AriaListBoxItemProps, 'style'> {
|
|
5
5
|
style?: StyleXStyles;
|
|
6
6
|
className?: string;
|
|
7
|
+
/** Handler that is called when the item is activated. When set, the item acts as an action item and bypasses selection. */
|
|
8
|
+
onAction?: () => void;
|
|
7
9
|
}
|
|
8
10
|
export declare const ComboBoxItem: React.ForwardRefExoticComponent<ComboBoxItemProps & React.RefAttributes<HTMLDivElement>>;
|
|
9
|
-
export interface ComboBoxSectionProps extends Omit<
|
|
11
|
+
export interface ComboBoxSectionProps extends Omit<AriaListBoxSectionProps<any>, 'style'> {
|
|
10
12
|
title?: string;
|
|
11
13
|
style?: StyleXStyles;
|
|
12
14
|
className?: string;
|
|
13
15
|
}
|
|
14
16
|
export declare const ComboBoxSection: React.ForwardRefExoticComponent<ComboBoxSectionProps & React.RefAttributes<HTMLDivElement>>;
|
|
15
|
-
export interface ComboBoxProps extends Omit<AriaComboBoxProps<
|
|
17
|
+
export interface ComboBoxProps<T extends object = object> extends Omit<AriaComboBoxProps<T>, 'style' | 'children'> {
|
|
16
18
|
style?: StyleXStyles;
|
|
17
19
|
className?: string;
|
|
18
20
|
label?: string;
|
|
@@ -21,5 +23,14 @@ export interface ComboBoxProps extends Omit<AriaComboBoxProps<any>, 'style'> {
|
|
|
21
23
|
placeholder?: string;
|
|
22
24
|
variant?: 'primary' | 'secondary';
|
|
23
25
|
size?: 'sm' | 'md' | 'lg';
|
|
26
|
+
/** Handler that is called when any item in the ComboBox is activated. Selection and input text are preserved. */
|
|
27
|
+
onAction?: (key: Key) => void;
|
|
28
|
+
/** Provides content to display when there are no items in the list. */
|
|
29
|
+
renderEmptyState?: (props: ListBoxRenderProps) => React.ReactNode;
|
|
30
|
+
/** Whether the combo box allows the menu to be open when the collection is empty. */
|
|
31
|
+
allowsEmptyCollection?: boolean;
|
|
32
|
+
children?: React.ReactNode | ((item: T) => React.ReactNode);
|
|
24
33
|
}
|
|
25
|
-
export declare const ComboBox:
|
|
34
|
+
export declare const ComboBox: <T extends object = object>(props: ComboBoxProps<T> & {
|
|
35
|
+
ref?: React.ForwardedRef<HTMLInputElement>;
|
|
36
|
+
}) => React.ReactElement | null;
|
|
@@ -15,12 +15,10 @@ export declare const styles: Readonly<{
|
|
|
15
15
|
readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
|
|
16
16
|
readonly boxShadow: stylex.StyleXClassNameFor<"boxShadow", string>;
|
|
17
17
|
readonly overflow: stylex.StyleXClassNameFor<"overflow", "hidden">;
|
|
18
|
+
readonly outline: stylex.StyleXClassNameFor<"outline", "none">;
|
|
18
19
|
readonly transitionProperty: stylex.StyleXClassNameFor<"transitionProperty", "border-color, box-shadow">;
|
|
19
20
|
readonly transitionDuration: stylex.StyleXClassNameFor<"transitionDuration", "0.15s">;
|
|
20
21
|
readonly transitionTimingFunction: stylex.StyleXClassNameFor<"transitionTimingFunction", "ease-in-out">;
|
|
21
|
-
readonly ':hover': stylex.StyleXClassNameFor<":hover", {
|
|
22
|
-
readonly borderColor: stylex.StyleXVar<string>;
|
|
23
|
-
}>;
|
|
24
22
|
readonly '@media (prefers-reduced-motion: reduce)': stylex.StyleXClassNameFor<"@media (prefers-reduced-motion: reduce)", {
|
|
25
23
|
readonly transitionProperty: "none";
|
|
26
24
|
}>;
|
|
@@ -51,6 +49,7 @@ export declare const styles: Readonly<{
|
|
|
51
49
|
readonly groupFocused: Readonly<{
|
|
52
50
|
readonly borderColor: stylex.StyleXClassNameFor<"borderColor", string>;
|
|
53
51
|
readonly boxShadow: stylex.StyleXClassNameFor<"boxShadow", `0 0 0 1px ${stylex.StyleXVar<string>}`>;
|
|
52
|
+
readonly outline: stylex.StyleXClassNameFor<"outline", "none">;
|
|
54
53
|
}>;
|
|
55
54
|
readonly groupInvalid: Readonly<{
|
|
56
55
|
readonly borderColor: stylex.StyleXClassNameFor<"borderColor", string>;
|
|
@@ -58,6 +57,7 @@ export declare const styles: Readonly<{
|
|
|
58
57
|
readonly groupFocusedInvalid: Readonly<{
|
|
59
58
|
readonly borderColor: stylex.StyleXClassNameFor<"borderColor", string>;
|
|
60
59
|
readonly boxShadow: stylex.StyleXClassNameFor<"boxShadow", `0 0 0 1px ${stylex.StyleXVar<string>}`>;
|
|
60
|
+
readonly outline: stylex.StyleXClassNameFor<"outline", "none">;
|
|
61
61
|
}>;
|
|
62
62
|
readonly groupDisabled: Readonly<{
|
|
63
63
|
readonly opacity: stylex.StyleXClassNameFor<"opacity", 0.4>;
|
|
@@ -16,12 +16,10 @@ export declare const styles: Readonly<{
|
|
|
16
16
|
readonly boxShadow: stylex.StyleXClassNameFor<"boxShadow", string>;
|
|
17
17
|
readonly overflow: stylex.StyleXClassNameFor<"overflow", "hidden">;
|
|
18
18
|
readonly boxSizing: stylex.StyleXClassNameFor<"boxSizing", "border-box">;
|
|
19
|
+
readonly outline: stylex.StyleXClassNameFor<"outline", "none">;
|
|
19
20
|
readonly transitionProperty: stylex.StyleXClassNameFor<"transitionProperty", "border-color, box-shadow">;
|
|
20
21
|
readonly transitionDuration: stylex.StyleXClassNameFor<"transitionDuration", "0.15s">;
|
|
21
22
|
readonly transitionTimingFunction: stylex.StyleXClassNameFor<"transitionTimingFunction", "ease-in-out">;
|
|
22
|
-
readonly ':hover': stylex.StyleXClassNameFor<":hover", {
|
|
23
|
-
readonly borderColor: stylex.StyleXVar<string>;
|
|
24
|
-
}>;
|
|
25
23
|
readonly '@media (prefers-reduced-motion: reduce)': stylex.StyleXClassNameFor<"@media (prefers-reduced-motion: reduce)", {
|
|
26
24
|
readonly transitionProperty: "none";
|
|
27
25
|
}>;
|
|
@@ -52,6 +50,7 @@ export declare const styles: Readonly<{
|
|
|
52
50
|
readonly groupFocused: Readonly<{
|
|
53
51
|
readonly borderColor: stylex.StyleXClassNameFor<"borderColor", string>;
|
|
54
52
|
readonly boxShadow: stylex.StyleXClassNameFor<"boxShadow", `0 0 0 1px ${stylex.StyleXVar<string>}`>;
|
|
53
|
+
readonly outline: stylex.StyleXClassNameFor<"outline", "none">;
|
|
55
54
|
}>;
|
|
56
55
|
readonly groupInvalid: Readonly<{
|
|
57
56
|
readonly borderColor: stylex.StyleXClassNameFor<"borderColor", string>;
|
|
@@ -59,6 +58,7 @@ export declare const styles: Readonly<{
|
|
|
59
58
|
readonly groupFocusedInvalid: Readonly<{
|
|
60
59
|
readonly borderColor: stylex.StyleXClassNameFor<"borderColor", string>;
|
|
61
60
|
readonly boxShadow: stylex.StyleXClassNameFor<"boxShadow", `0 0 0 1px ${stylex.StyleXVar<string>}`>;
|
|
61
|
+
readonly outline: stylex.StyleXClassNameFor<"outline", "none">;
|
|
62
62
|
}>;
|
|
63
63
|
readonly groupDisabled: Readonly<{
|
|
64
64
|
readonly opacity: stylex.StyleXClassNameFor<"opacity", 0.4>;
|
|
@@ -15,12 +15,10 @@ export declare const styles: Readonly<{
|
|
|
15
15
|
readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
|
|
16
16
|
readonly boxShadow: stylex.StyleXClassNameFor<"boxShadow", string>;
|
|
17
17
|
readonly boxSizing: stylex.StyleXClassNameFor<"boxSizing", "border-box">;
|
|
18
|
+
readonly outline: stylex.StyleXClassNameFor<"outline", "none">;
|
|
18
19
|
readonly transitionProperty: stylex.StyleXClassNameFor<"transitionProperty", "border-color, box-shadow">;
|
|
19
20
|
readonly transitionDuration: stylex.StyleXClassNameFor<"transitionDuration", "0.15s">;
|
|
20
21
|
readonly transitionTimingFunction: stylex.StyleXClassNameFor<"transitionTimingFunction", "ease-in-out">;
|
|
21
|
-
readonly ':hover': stylex.StyleXClassNameFor<":hover", {
|
|
22
|
-
readonly borderColor: stylex.StyleXVar<string>;
|
|
23
|
-
}>;
|
|
24
22
|
readonly '@media (prefers-reduced-motion: reduce)': stylex.StyleXClassNameFor<"@media (prefers-reduced-motion: reduce)", {
|
|
25
23
|
readonly transitionProperty: "none";
|
|
26
24
|
}>;
|
|
@@ -54,6 +52,7 @@ export declare const styles: Readonly<{
|
|
|
54
52
|
readonly groupFocused: Readonly<{
|
|
55
53
|
readonly borderColor: stylex.StyleXClassNameFor<"borderColor", string>;
|
|
56
54
|
readonly boxShadow: stylex.StyleXClassNameFor<"boxShadow", `0 0 0 1px ${stylex.StyleXVar<string>}`>;
|
|
55
|
+
readonly outline: stylex.StyleXClassNameFor<"outline", "none">;
|
|
57
56
|
}>;
|
|
58
57
|
readonly groupInvalid: Readonly<{
|
|
59
58
|
readonly borderColor: stylex.StyleXClassNameFor<"borderColor", string>;
|
|
@@ -61,6 +60,7 @@ export declare const styles: Readonly<{
|
|
|
61
60
|
readonly groupFocusedInvalid: Readonly<{
|
|
62
61
|
readonly borderColor: stylex.StyleXClassNameFor<"borderColor", string>;
|
|
63
62
|
readonly boxShadow: stylex.StyleXClassNameFor<"boxShadow", `0 0 0 1px ${stylex.StyleXVar<string>}`>;
|
|
63
|
+
readonly outline: stylex.StyleXClassNameFor<"outline", "none">;
|
|
64
64
|
}>;
|
|
65
65
|
readonly groupDisabled: Readonly<{
|
|
66
66
|
readonly opacity: stylex.StyleXClassNameFor<"opacity", 0.4>;
|
|
@@ -90,6 +90,7 @@ export declare const styles: Readonly<{
|
|
|
90
90
|
readonly flexGrow: stylex.StyleXClassNameFor<"flexGrow", 1>;
|
|
91
91
|
readonly width: stylex.StyleXClassNameFor<"width", "100%">;
|
|
92
92
|
readonly height: stylex.StyleXClassNameFor<"height", "100%">;
|
|
93
|
+
readonly borderWidth: stylex.StyleXClassNameFor<"borderWidth", 0>;
|
|
93
94
|
readonly borderStyle: stylex.StyleXClassNameFor<"borderStyle", "none">;
|
|
94
95
|
readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "transparent">;
|
|
95
96
|
readonly color: stylex.StyleXClassNameFor<"color", string>;
|
package/dist/src/index.d.ts
CHANGED
|
@@ -1,10 +1,12 @@
|
|
|
1
|
-
export declare const version = "2026.09.
|
|
1
|
+
export declare const version = "2026.09.12";
|
|
2
2
|
export { Alert } from './components/Alert';
|
|
3
3
|
export type { AlertProps, AlertVariant } from './components/Alert/Alert';
|
|
4
4
|
export { AlertDialog, AlertDialogBody, AlertDialogFooter, AlertDialogHeader, } from './components/AlertDialog';
|
|
5
5
|
export type { AlertDialogBodyProps, AlertDialogFooterProps, AlertDialogHeaderProps, AlertDialogProps, } from './components/AlertDialog/AlertDialog';
|
|
6
6
|
export type { AreaChartProps } from './components/AreaChart';
|
|
7
7
|
export { AreaChart } from './components/AreaChart';
|
|
8
|
+
export type { AutocompleteEmptyStateProps, AutocompleteItemProps, AutocompleteListProps, AutocompleteMode, AutocompletePopoverProps, AutocompleteProps, AutocompleteSectionProps, AutocompleteSize, Filter, } from './components/Autocomplete';
|
|
9
|
+
export { Autocomplete, AutocompleteContext, AutocompleteEmptyState, AutocompleteItem, AutocompleteList, AutocompletePopover, AutocompleteSection, AutocompleteStateContext, useAutocompleteInnerContext, useFilter, } from './components/Autocomplete';
|
|
8
10
|
export type { AvatarGroupContextValue, AvatarGroupProps, AvatarProps, AvatarShape, AvatarSize, AvatarStatus, AvatarStatusPosition, } from './components/Avatar';
|
|
9
11
|
export { Avatar, AvatarGroup, AvatarGroupContext } from './components/Avatar';
|
|
10
12
|
export { Badge } from './components/Badge';
|