@marigold/components 5.5.0 → 6.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +301 -319
- package/dist/index.js +2255 -1758
- package/dist/index.mjs +2195 -1716
- package/package.json +61 -57
package/dist/index.d.ts
CHANGED
|
@@ -1,16 +1,25 @@
|
|
|
1
1
|
export { useAsyncList, useListData } from '@react-stately/data';
|
|
2
|
-
import { ThemeExtensionsWithParts, CSSObject, ThemeExtension, ThemeComponentProps, ResponsiveStyleValue, StateAttrProps, BoxOwnProps, Theme as Theme$1, ThemeProviderProps, GlobalProps, SVGProps } from '@marigold/system';
|
|
3
|
-
export { Box, BoxOwnProps, BoxProps, ThemeProvider, useTheme } from '@marigold/system';
|
|
4
2
|
import React, { ReactElement, ReactNode, Key, HTMLAttributes, LabelHTMLAttributes, ForwardRefExoticComponent, RefAttributes } from 'react';
|
|
5
|
-
import {
|
|
3
|
+
import { AriaAccordionProps } from '@react-aria/accordion';
|
|
6
4
|
import * as _react_types_shared from '@react-types/shared';
|
|
7
|
-
import { ItemElement, ItemProps, Node, PressEvents, CollectionElement, StyleProps } from '@react-types/shared';
|
|
5
|
+
import { ItemElement, ItemProps, Node, PressEvents, FocusableDOMProps, CollectionElement, StyleProps, LabelableProps, HelpTextProps } from '@react-types/shared';
|
|
6
|
+
import { TreeState } from '@react-stately/tree';
|
|
7
|
+
import { GapSpaceProp, AspectProp, WidthProp, AlignmentProp, alignment, PaddingSpaceProp, PaddingSpacePropX, PaddingSpacePropY, PaddingRightProp, PaddingLeftProp, PaddingBottomProp, PaddingTopProp, PlaceItemsProp, GridColumn, GridColsAlignProp, StateAttrProps, TextAlignProp, ObjectFitProp, ObjectPositionProp, Theme, ThemeProviderProps, FontSizeProp, FontWeightProp, FontStyleProp, CursorProp, SVGProps } from '@marigold/system';
|
|
8
|
+
export { ThemeProvider, useTheme } from '@marigold/system';
|
|
9
|
+
import { NonZeroPercentage, HtmlProps, PropsOf, PolymorphicComponent } from '@marigold/types';
|
|
8
10
|
import { SearchAutocompleteProps } from '@react-types/autocomplete';
|
|
9
|
-
import {
|
|
11
|
+
import { ComboBoxProps as ComboBoxProps$1 } from '@react-types/combobox';
|
|
10
12
|
import { AriaCheckboxProps, AriaCheckboxGroupProps } from '@react-types/checkbox';
|
|
13
|
+
import { CheckboxGroupState } from '@react-stately/checkbox';
|
|
11
14
|
import { AriaDialogProps } from '@react-types/dialog';
|
|
12
15
|
import { SeparatorProps } from '@react-aria/separator';
|
|
16
|
+
import { AriaDateFieldProps, AriaDatePickerProps } from '@react-aria/datepicker';
|
|
17
|
+
import { DateValue, CalendarDate } from '@internationalized/date';
|
|
18
|
+
import { AriaCalendarProps, DateValue as DateValue$1, AriaCalendarCellProps, AriaCalendarGridProps } from '@react-aria/calendar';
|
|
19
|
+
import { CalendarState } from '@react-stately/calendar';
|
|
13
20
|
import { AriaNumberFieldProps } from '@react-types/numberfield';
|
|
21
|
+
import { OverlayProps as OverlayProps$1, AriaPopoverProps, AriaModalOverlayProps } from '@react-aria/overlays';
|
|
22
|
+
import { OverlayTriggerState } from '@react-stately/overlays';
|
|
14
23
|
import { AriaRadioGroupProps, AriaRadioProps } from '@react-types/radio';
|
|
15
24
|
import { Item, Section } from '@react-stately/collections';
|
|
16
25
|
import { AriaSelectProps } from '@react-types/select';
|
|
@@ -21,20 +30,16 @@ import { TableStateProps, RowProps as RowProps$1, TableBody, Cell, Column, Table
|
|
|
21
30
|
import { AriaTextFieldProps } from '@react-types/textfield';
|
|
22
31
|
import { PositionProps } from '@react-types/overlays';
|
|
23
32
|
import { TooltipTriggerProps as TooltipTriggerProps$1 } from '@react-types/tooltip';
|
|
24
|
-
import {
|
|
25
|
-
import { aspect, size } from '@marigold/tokens';
|
|
26
|
-
import { CheckboxGroupState } from '@react-stately/checkbox';
|
|
27
|
-
import { OverlayProps as OverlayProps$1, AriaPopoverProps, AriaModalOverlayProps } from '@react-aria/overlays';
|
|
28
|
-
import { OverlayTriggerState } from '@react-stately/overlays';
|
|
29
|
-
export { SSRProvider } from '@react-aria/ssr';
|
|
33
|
+
import { AriaTagGroupProps } from '@react-aria/tag';
|
|
30
34
|
export { VisuallyHidden } from '@react-aria/visually-hidden';
|
|
35
|
+
import { AriaTabListProps } from '@react-types/tabs';
|
|
31
36
|
|
|
32
37
|
interface AccordionProps extends Omit<AriaAccordionProps<object>, 'children' | 'expandedKeys' | 'disabledKeys' | 'onExpandedChange'> {
|
|
33
38
|
children: ItemElement<object>[] | ItemElement<object>;
|
|
34
39
|
selectionMode?: string;
|
|
35
40
|
}
|
|
36
41
|
declare const Accordion: {
|
|
37
|
-
({ children, ...props }: AccordionProps): JSX.Element;
|
|
42
|
+
({ children, ...props }: AccordionProps): React.JSX.Element;
|
|
38
43
|
Item: <T>(props: AccordionOwnItemProps<T>) => JSX.Element;
|
|
39
44
|
};
|
|
40
45
|
interface AccordionOwnItemProps<T> extends ItemProps<T> {
|
|
@@ -43,20 +48,34 @@ interface AccordionOwnItemProps<T> extends ItemProps<T> {
|
|
|
43
48
|
title: string | ReactElement;
|
|
44
49
|
}
|
|
45
50
|
|
|
46
|
-
interface AccordionThemeExtension extends ThemeExtensionsWithParts<'Accordion', ['button', 'item']> {
|
|
47
|
-
}
|
|
48
51
|
interface AccordionItemProps {
|
|
49
52
|
item: Node<object>;
|
|
50
53
|
state: TreeState<object>;
|
|
51
|
-
css?: CSSObject;
|
|
52
54
|
title: string | ReactNode;
|
|
53
55
|
variant?: string;
|
|
54
56
|
size?: string;
|
|
55
57
|
}
|
|
56
|
-
declare const AccordionItem: ({ item, state,
|
|
58
|
+
declare const AccordionItem: ({ item, state, title, variant, size, ...props }: AccordionItemProps) => React.JSX.Element;
|
|
57
59
|
|
|
58
|
-
interface
|
|
60
|
+
interface AsideProps extends GapSpaceProp {
|
|
61
|
+
children: [ReactElement, ReactElement];
|
|
62
|
+
side?: 'left' | 'right';
|
|
63
|
+
sideWidth?: string;
|
|
64
|
+
stretch?: boolean;
|
|
65
|
+
wrap?: NonZeroPercentage;
|
|
59
66
|
}
|
|
67
|
+
declare const Aside: ({ children, sideWidth, space, side, stretch, wrap, }: AsideProps) => React.JSX.Element;
|
|
68
|
+
|
|
69
|
+
/**
|
|
70
|
+
* Based on https://theme-ui.com/components/aspect-ratio
|
|
71
|
+
*/
|
|
72
|
+
|
|
73
|
+
interface AspectProps extends HtmlProps<'div'>, AspectProp {
|
|
74
|
+
children?: ReactNode;
|
|
75
|
+
maxWidth?: string;
|
|
76
|
+
}
|
|
77
|
+
declare const Aspect: ({ ratio, maxWidth, children, }: AspectProps) => React.JSX.Element;
|
|
78
|
+
|
|
60
79
|
interface AutocompleteProps extends Omit<SearchAutocompleteProps<object>, 'isDisabled' | 'isRequired' | 'isReadonly' | 'validationState' | 'icon' | 'onInputChange' | 'inputValue' | 'defaultInputValue'> {
|
|
61
80
|
disabled?: boolean;
|
|
62
81
|
required?: boolean;
|
|
@@ -80,32 +99,53 @@ interface AutocompleteProps extends Omit<SearchAutocompleteProps<object>, 'isDis
|
|
|
80
99
|
onSubmit?: (key: Key | null, value: string | null) => void;
|
|
81
100
|
variant?: string;
|
|
82
101
|
size?: string;
|
|
83
|
-
width?:
|
|
102
|
+
width?: WidthProp['width'];
|
|
84
103
|
}
|
|
85
104
|
declare const Autocomplete: {
|
|
86
|
-
({ disabled, required, readOnly, error, onChange, value, defaultValue, variant, size, width, ...rest }: AutocompleteProps): JSX.Element;
|
|
105
|
+
({ disabled, required, readOnly, error, onChange, value, defaultValue, variant, size, width, ...rest }: AutocompleteProps): React.JSX.Element;
|
|
87
106
|
Item: <T>(props: _react_types_shared.ItemProps<T>) => JSX.Element;
|
|
88
107
|
};
|
|
89
108
|
|
|
90
|
-
interface
|
|
109
|
+
interface ComboBoxProps extends Omit<ComboBoxProps$1<object>, 'isDisabled' | 'isRequired' | 'isReadOnly' | 'defaultInputValue' | 'inputValue' | 'onInputChange'> {
|
|
110
|
+
variant?: string;
|
|
111
|
+
size?: string;
|
|
112
|
+
error?: boolean;
|
|
113
|
+
width?: WidthProp['width'];
|
|
114
|
+
disabled?: boolean;
|
|
115
|
+
required?: boolean;
|
|
116
|
+
readOnly?: boolean;
|
|
117
|
+
defaultValue?: ComboBoxProps$1<object>['defaultInputValue'];
|
|
118
|
+
value?: ComboBoxProps$1<object>['inputValue'];
|
|
119
|
+
onChange?: ComboBoxProps$1<object>['onInputChange'];
|
|
91
120
|
}
|
|
121
|
+
declare const ComboBox: {
|
|
122
|
+
({ error, width, disabled, required, readOnly, defaultValue, value, onChange, variant, size, ...rest }: ComboBoxProps): React.JSX.Element;
|
|
123
|
+
Item: <T>(props: _react_types_shared.ItemProps<T>) => JSX.Element;
|
|
124
|
+
};
|
|
125
|
+
|
|
92
126
|
interface BadgeProps extends HtmlProps<'div'> {
|
|
93
127
|
children?: React.ReactNode;
|
|
94
128
|
variant?: string;
|
|
95
129
|
size?: string;
|
|
96
130
|
}
|
|
97
|
-
declare const Badge: ({ variant, size, children, ...props }: BadgeProps) => JSX.Element;
|
|
131
|
+
declare const Badge: ({ variant, size, children, ...props }: BadgeProps) => React.JSX.Element;
|
|
98
132
|
|
|
99
|
-
interface
|
|
100
|
-
}
|
|
101
|
-
interface BodyProps extends ThemeComponentProps, HtmlProps<'section'> {
|
|
133
|
+
interface BreakoutProps extends HtmlProps<'div'>, AlignmentProp {
|
|
102
134
|
children?: ReactNode;
|
|
135
|
+
height?: string;
|
|
136
|
+
alignX?: keyof typeof alignment.horizontal.alignmentX;
|
|
137
|
+
alignY?: keyof typeof alignment.horizontal.alignmentY;
|
|
103
138
|
}
|
|
104
|
-
declare const
|
|
139
|
+
declare const Breakout: ({ height, children, orientation, alignX, alignY, ...props }: BreakoutProps) => React.JSX.Element;
|
|
105
140
|
|
|
106
|
-
interface
|
|
141
|
+
interface BodyProps extends HtmlProps<'section'> {
|
|
142
|
+
children?: ReactNode;
|
|
143
|
+
variant?: string;
|
|
144
|
+
size?: string;
|
|
107
145
|
}
|
|
108
|
-
|
|
146
|
+
declare const Body: ({ children, variant, size, ...props }: BodyProps) => React.JSX.Element;
|
|
147
|
+
|
|
148
|
+
interface ButtonOwnProps extends PressEvents, FocusableDOMProps, HtmlProps<'button'> {
|
|
109
149
|
children?: ReactNode;
|
|
110
150
|
variant?: string;
|
|
111
151
|
size?: string;
|
|
@@ -115,36 +155,33 @@ interface ButtonProps extends PropsOf<typeof Button> {
|
|
|
115
155
|
}
|
|
116
156
|
declare const Button: PolymorphicComponent<"button", ButtonOwnProps>;
|
|
117
157
|
|
|
118
|
-
interface
|
|
158
|
+
interface CardProps extends HtmlProps<'div'>, GapSpaceProp, PaddingSpaceProp, PaddingSpacePropX, PaddingSpacePropY, PaddingRightProp, PaddingLeftProp, PaddingBottomProp, PaddingTopProp {
|
|
159
|
+
children?: ReactNode;
|
|
160
|
+
variant?: string;
|
|
161
|
+
size?: string;
|
|
162
|
+
p?: PaddingSpaceProp['space'];
|
|
163
|
+
px?: PaddingSpacePropX['spaceX'];
|
|
164
|
+
py?: PaddingSpacePropY['spaceY'];
|
|
119
165
|
}
|
|
120
|
-
|
|
166
|
+
declare const Card: ({ children, variant, size, space, p, px, py, pt, pb, pl, pr, ...props }: CardProps) => React.JSX.Element;
|
|
167
|
+
|
|
168
|
+
interface CenterProps extends HtmlProps<'div'>, GapSpaceProp {
|
|
121
169
|
children?: ReactNode;
|
|
122
|
-
|
|
123
|
-
p?: ResponsiveStyleValue<string>;
|
|
124
|
-
px?: ResponsiveStyleValue<string>;
|
|
125
|
-
py?: ResponsiveStyleValue<string>;
|
|
126
|
-
pt?: ResponsiveStyleValue<string>;
|
|
127
|
-
pb?: ResponsiveStyleValue<string>;
|
|
128
|
-
pl?: ResponsiveStyleValue<string>;
|
|
129
|
-
pr?: ResponsiveStyleValue<string>;
|
|
130
|
-
}
|
|
131
|
-
declare const Card: ({ children, variant, size, space, p, px, py, pt, pb, pl, pr, ...props }: CardProps) => JSX.Element;
|
|
132
|
-
|
|
133
|
-
interface CheckboxThemeExtension extends ThemeExtensionsWithParts<'Checkbox', [
|
|
134
|
-
'container',
|
|
135
|
-
'label',
|
|
136
|
-
'checkbox'
|
|
137
|
-
]> {
|
|
170
|
+
maxWidth?: string;
|
|
138
171
|
}
|
|
172
|
+
declare const Center: ({ maxWidth, space, children, ...props }: CenterProps) => React.JSX.Element;
|
|
173
|
+
|
|
139
174
|
/**
|
|
140
175
|
* `react-aria` has a slightly different API for the above events.
|
|
141
176
|
* Thus, we adjust our regular props to match them.
|
|
142
177
|
*/
|
|
143
178
|
type CustomCheckboxProps = 'value' | 'onChange' | 'onFocus' | 'onBlur' | 'onKeyDown' | 'onKeyUp';
|
|
144
|
-
interface CheckboxProps extends
|
|
179
|
+
interface CheckboxProps extends Omit<HtmlProps<'input'>, 'size' | 'type' | 'defaultValue' | CustomCheckboxProps>, Pick<AriaCheckboxProps, CustomCheckboxProps> {
|
|
145
180
|
children?: ReactNode;
|
|
146
181
|
indeterminate?: boolean;
|
|
147
182
|
error?: boolean;
|
|
183
|
+
variant?: string;
|
|
184
|
+
size?: string;
|
|
148
185
|
}
|
|
149
186
|
declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
|
|
150
187
|
|
|
@@ -169,8 +206,36 @@ interface CheckboxGroupProps extends Omit<HtmlProps<'div'>, 'onChange'>, AriaChe
|
|
|
169
206
|
value?: string[];
|
|
170
207
|
defaultValue?: string[];
|
|
171
208
|
onChange?: (value: string[]) => void;
|
|
209
|
+
width?: WidthProp['width'];
|
|
210
|
+
}
|
|
211
|
+
declare const CheckboxGroup: ({ children, required, disabled, readOnly, error, width, ...rest }: CheckboxGroupProps) => React.JSX.Element;
|
|
212
|
+
|
|
213
|
+
interface ColumnsProps extends GapSpaceProp {
|
|
214
|
+
children?: ReactNode;
|
|
215
|
+
columns: Array<number>;
|
|
216
|
+
collapseAt?: string | 0;
|
|
217
|
+
stretch?: boolean;
|
|
218
|
+
}
|
|
219
|
+
declare const Columns: ({ space, columns, collapseAt, stretch, children, ...props }: ColumnsProps) => React.JSX.Element;
|
|
220
|
+
|
|
221
|
+
interface ContainerProps extends HtmlProps<'div'>, PlaceItemsProp, GridColumn, GridColsAlignProp {
|
|
222
|
+
children?: ReactNode;
|
|
223
|
+
contentType?: 'content' | 'header';
|
|
224
|
+
size?: keyof typeof content | keyof typeof header;
|
|
225
|
+
align?: 'left' | 'right' | 'center';
|
|
226
|
+
alignItems?: PlaceItemsProp['align'];
|
|
172
227
|
}
|
|
173
|
-
declare const
|
|
228
|
+
declare const content: {
|
|
229
|
+
small: string;
|
|
230
|
+
medium: string;
|
|
231
|
+
large: string;
|
|
232
|
+
};
|
|
233
|
+
declare const header: {
|
|
234
|
+
small: string;
|
|
235
|
+
medium: string;
|
|
236
|
+
large: string;
|
|
237
|
+
};
|
|
238
|
+
declare const Container: ({ contentType, size, align, alignItems, children, ...props }: ContainerProps) => React.JSX.Element;
|
|
174
239
|
|
|
175
240
|
interface DialogControllerProps {
|
|
176
241
|
children: ReactNode;
|
|
@@ -191,8 +256,6 @@ interface DialogContextProps {
|
|
|
191
256
|
close?: () => void;
|
|
192
257
|
}
|
|
193
258
|
|
|
194
|
-
interface DialogThemeExtension extends ThemeExtensionsWithParts<'Dialog', ['container', 'closeButton']> {
|
|
195
|
-
}
|
|
196
259
|
interface DialogChildProps {
|
|
197
260
|
close: DialogContextProps['close'];
|
|
198
261
|
titleProps: HTMLAttributes<HTMLElement>;
|
|
@@ -204,36 +267,29 @@ interface DialogProps extends AriaDialogProps {
|
|
|
204
267
|
closeButton?: boolean;
|
|
205
268
|
}
|
|
206
269
|
declare const Dialog: {
|
|
207
|
-
({ children, variant, size, closeButton, ...props }: DialogProps): JSX.Element;
|
|
208
|
-
Trigger: ({ children, dismissable, keyboardDismissable, }: DialogTriggerProps) => JSX.Element;
|
|
209
|
-
Controller: ({ children, dismissable, keyboardDismissable, open, onOpenChange, }: DialogControllerProps) => JSX.Element;
|
|
270
|
+
({ children, variant, size, closeButton, ...props }: DialogProps): React.JSX.Element;
|
|
271
|
+
Trigger: ({ children, dismissable, keyboardDismissable, }: DialogTriggerProps) => React.JSX.Element;
|
|
272
|
+
Controller: ({ children, dismissable, keyboardDismissable, open, onOpenChange, }: DialogControllerProps) => React.JSX.Element;
|
|
210
273
|
};
|
|
211
274
|
|
|
212
|
-
interface DividerThemeExtension extends ThemeExtension<'Divider'> {
|
|
213
|
-
}
|
|
214
275
|
interface DividerProps extends SeparatorProps {
|
|
215
276
|
variant?: string;
|
|
216
277
|
}
|
|
217
|
-
declare const Divider: ({ variant, ...props }: DividerProps) => JSX.Element;
|
|
278
|
+
declare const Divider: ({ variant, ...props }: DividerProps) => React.JSX.Element;
|
|
218
279
|
|
|
219
|
-
interface LabelThemeExtension extends ThemeExtension<'Label'> {
|
|
220
|
-
}
|
|
221
280
|
interface LabelProps extends HtmlProps<'label'> {
|
|
222
281
|
as?: 'label' | 'span';
|
|
223
282
|
variant?: string;
|
|
224
283
|
size?: string;
|
|
225
|
-
required?: boolean;
|
|
226
284
|
labelWidth?: string;
|
|
227
285
|
}
|
|
228
|
-
declare const Label: ({ as,
|
|
286
|
+
declare const Label: ({ as, children, variant, size, labelWidth, ...props }: LabelProps) => React.JSX.Element;
|
|
229
287
|
|
|
230
|
-
interface FieldBaseProps {
|
|
288
|
+
interface FieldBaseProps extends WidthProp {
|
|
231
289
|
children?: ReactNode;
|
|
232
290
|
variant?: string;
|
|
233
291
|
size?: string;
|
|
234
|
-
width?: string;
|
|
235
292
|
disabled?: boolean;
|
|
236
|
-
required?: boolean;
|
|
237
293
|
label?: ReactNode;
|
|
238
294
|
labelProps?: LabelHTMLAttributes<HTMLLabelElement> & Pick<LabelProps, 'as'>;
|
|
239
295
|
description?: ReactNode;
|
|
@@ -243,9 +299,7 @@ interface FieldBaseProps {
|
|
|
243
299
|
errorMessageProps?: HTMLAttributes<HTMLElement>;
|
|
244
300
|
stateProps?: StateAttrProps;
|
|
245
301
|
}
|
|
246
|
-
|
|
247
|
-
}
|
|
248
|
-
declare const FieldBase: ({ children, variant, size, width, disabled, required, label, labelProps, description, descriptionProps, error, errorMessage, errorMessageProps, stateProps, ...props }: FieldBaseProps) => JSX.Element;
|
|
302
|
+
declare const FieldBase: ({ children, variant, size, width, disabled, label, labelProps, description, descriptionProps, error, errorMessage, errorMessageProps, stateProps, ...props }: FieldBaseProps) => React.JSX.Element;
|
|
249
303
|
|
|
250
304
|
interface FieldGroupContextProps {
|
|
251
305
|
labelWidth?: string;
|
|
@@ -256,62 +310,125 @@ interface FieldGroupProps {
|
|
|
256
310
|
labelWidth?: string;
|
|
257
311
|
children: ReactNode;
|
|
258
312
|
}
|
|
259
|
-
declare const FieldGroup: ({ labelWidth, children }: FieldGroupProps) => JSX.Element;
|
|
313
|
+
declare const FieldGroup: ({ labelWidth, children }: FieldGroupProps) => React.JSX.Element;
|
|
260
314
|
|
|
261
|
-
interface
|
|
262
|
-
}
|
|
263
|
-
interface FooterProps extends ThemeComponentProps, HtmlProps<'footer'> {
|
|
315
|
+
interface FooterProps extends HtmlProps<'footer'> {
|
|
264
316
|
children?: ReactNode;
|
|
317
|
+
variant?: string;
|
|
318
|
+
size?: string;
|
|
265
319
|
}
|
|
266
|
-
declare const Footer: ({ children, variant, size, ...props }: FooterProps) => JSX.Element;
|
|
320
|
+
declare const Footer: ({ children, variant, size, ...props }: FooterProps) => React.JSX.Element;
|
|
267
321
|
|
|
268
|
-
interface
|
|
269
|
-
}
|
|
270
|
-
interface HeaderProps extends ThemeComponentProps, HtmlProps<'header'> {
|
|
322
|
+
interface HeaderProps extends HtmlProps<'header'> {
|
|
271
323
|
children?: ReactNode;
|
|
324
|
+
variant?: string;
|
|
325
|
+
size?: string;
|
|
272
326
|
}
|
|
273
|
-
declare const Header: ({ children, variant, size, ...props }: HeaderProps) => JSX.Element;
|
|
327
|
+
declare const Header: ({ children, variant, size, className, ...props }: HeaderProps) => React.JSX.Element;
|
|
274
328
|
|
|
275
|
-
interface
|
|
276
|
-
}
|
|
277
|
-
interface HeadlineProps extends ThemeComponentProps, HtmlProps<'h1'> {
|
|
329
|
+
interface HeadlineProps extends HtmlProps<'h1'>, TextAlignProp {
|
|
278
330
|
children?: ReactNode;
|
|
279
331
|
level?: '1' | '2' | '3' | '4' | '5' | '6';
|
|
280
|
-
align?: CSSObject['textAlign'];
|
|
281
332
|
color?: string;
|
|
333
|
+
variant?: string;
|
|
334
|
+
size?: string;
|
|
335
|
+
as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
|
|
282
336
|
}
|
|
283
|
-
declare const Headline: ({ children, variant, size, align, color, level, ...props }: HeadlineProps) => JSX.Element;
|
|
284
|
-
|
|
285
|
-
interface HelpTextThemeExtension extends ThemeExtensionsWithParts<'HelpText', ['container', 'icon']> {
|
|
286
|
-
}
|
|
337
|
+
declare const Headline: ({ children, variant, size, align, color, level, as, ...props }: HeadlineProps) => React.JSX.Element;
|
|
287
338
|
|
|
288
|
-
interface
|
|
289
|
-
}
|
|
290
|
-
interface ImageProps extends HtmlProps<'img'> {
|
|
339
|
+
interface ImageProps extends HtmlProps<'img'>, ObjectFitProp, ObjectPositionProp {
|
|
291
340
|
variant?: string;
|
|
292
341
|
size?: string;
|
|
293
|
-
fit?: CSSObject['objectFit'];
|
|
294
|
-
position?: CSSObject['objectPosition'];
|
|
295
342
|
children?: never;
|
|
296
343
|
alt: string;
|
|
297
344
|
}
|
|
298
|
-
declare const Image: ({ variant, size, fit, position, ...props }: ImageProps) => JSX.Element;
|
|
345
|
+
declare const Image: ({ variant, size, fit, position, ...props }: ImageProps) => React.JSX.Element;
|
|
299
346
|
|
|
300
|
-
interface
|
|
347
|
+
interface InlineProps extends AlignmentProp, GapSpaceProp {
|
|
348
|
+
children?: ReactNode;
|
|
349
|
+
alignX?: keyof typeof alignment.horizontal.alignmentX;
|
|
350
|
+
alignY?: keyof typeof alignment.horizontal.alignmentY;
|
|
301
351
|
}
|
|
302
|
-
|
|
352
|
+
declare const Inline: ({ space, orientation, alignX, alignY, children, ...props }: InlineProps) => React.JSX.Element;
|
|
353
|
+
|
|
354
|
+
interface InputOwnProps extends Omit<HtmlProps<'input'>, 'size' | 'className'> {
|
|
303
355
|
icon?: ReactElement;
|
|
304
356
|
action?: ReactElement;
|
|
305
357
|
variant?: string;
|
|
306
358
|
size?: string;
|
|
359
|
+
className?: {
|
|
360
|
+
container?: string;
|
|
361
|
+
input?: string;
|
|
362
|
+
icon?: string;
|
|
363
|
+
};
|
|
307
364
|
}
|
|
308
|
-
interface InputProps extends Omit<React.ComponentPropsWithRef<'input'>, 'size'>, InputOwnProps {
|
|
365
|
+
interface InputProps extends Omit<React.ComponentPropsWithRef<'input'>, 'size' | 'className'>, InputOwnProps {
|
|
309
366
|
}
|
|
310
367
|
declare const Input: React.ForwardRefExoticComponent<InputOwnProps & React.RefAttributes<HTMLInputElement>>;
|
|
311
368
|
|
|
312
|
-
interface
|
|
369
|
+
interface DateFieldProps extends Omit<AriaDateFieldProps<DateValue>, 'isDisabled' | 'isReadOnly' | 'isRequired'> {
|
|
370
|
+
onChange?: (value: DateValue) => void;
|
|
371
|
+
value?: DateValue | null;
|
|
372
|
+
defaultValue?: DateValue | null;
|
|
373
|
+
ref?: React.RefObject<unknown> | undefined;
|
|
374
|
+
triggerRef?: React.RefObject<HTMLDivElement> | undefined;
|
|
375
|
+
action?: ReactElement;
|
|
376
|
+
isPressed?: boolean;
|
|
377
|
+
error?: boolean;
|
|
378
|
+
errorMessageProps?: HTMLAttributes<HTMLElement>;
|
|
379
|
+
disabled?: boolean;
|
|
380
|
+
readOnly?: boolean;
|
|
381
|
+
required?: boolean;
|
|
382
|
+
variant?: string;
|
|
383
|
+
size?: string;
|
|
384
|
+
width?: WidthProp['width'];
|
|
313
385
|
}
|
|
314
|
-
|
|
386
|
+
declare const DateField: ({ disabled, readOnly, required, error, errorMessage, errorMessageProps, variant, size, action, isPressed, triggerRef, width, ...res }: DateFieldProps) => React.JSX.Element;
|
|
387
|
+
|
|
388
|
+
interface CalendarProps extends Omit<AriaCalendarProps<DateValue$1>, 'isDisabled' | 'isReadOnly'> {
|
|
389
|
+
disabled?: boolean;
|
|
390
|
+
readOnly?: boolean;
|
|
391
|
+
variant?: string;
|
|
392
|
+
size?: string;
|
|
393
|
+
}
|
|
394
|
+
declare const Calendar: ({ disabled, readOnly, size, variant, ...rest }: CalendarProps) => React.JSX.Element;
|
|
395
|
+
|
|
396
|
+
interface CalendarCellProps extends AriaCalendarCellProps {
|
|
397
|
+
state: CalendarState;
|
|
398
|
+
}
|
|
399
|
+
declare const CalendarCell: (props: CalendarCellProps) => React.JSX.Element;
|
|
400
|
+
|
|
401
|
+
interface CalendarGridProps extends AriaCalendarGridProps {
|
|
402
|
+
state: CalendarState;
|
|
403
|
+
}
|
|
404
|
+
declare const CalendarGrid: ({ state, ...props }: CalendarGridProps) => React.JSX.Element;
|
|
405
|
+
|
|
406
|
+
interface DatePickerProps extends Omit<AriaDatePickerProps<CalendarDate>, 'isDisabled' | 'isRequired' | 'isReadOnly' | 'isOpen'> {
|
|
407
|
+
disabled?: boolean;
|
|
408
|
+
required?: boolean;
|
|
409
|
+
readonly?: boolean;
|
|
410
|
+
open?: boolean;
|
|
411
|
+
error?: boolean;
|
|
412
|
+
shouldCloseOnSelect?: boolean;
|
|
413
|
+
variant?: string;
|
|
414
|
+
size?: string;
|
|
415
|
+
}
|
|
416
|
+
declare const DatePicker: ({ disabled, required, readonly, open, error, shouldCloseOnSelect, variant, size, ...rest }: DatePickerProps) => React.JSX.Element;
|
|
417
|
+
|
|
418
|
+
type InsetProps = {
|
|
419
|
+
children: ReactNode;
|
|
420
|
+
space?: never;
|
|
421
|
+
spaceX?: PaddingSpacePropX['spaceX'];
|
|
422
|
+
spaceY?: PaddingSpacePropY['spaceY'];
|
|
423
|
+
} | {
|
|
424
|
+
children: ReactNode;
|
|
425
|
+
space?: PaddingSpaceProp['space'];
|
|
426
|
+
spaceX?: never;
|
|
427
|
+
spaceY?: never;
|
|
428
|
+
};
|
|
429
|
+
declare const Inset: ({ space, spaceX, spaceY, children, }: InsetProps) => React.JSX.Element;
|
|
430
|
+
|
|
431
|
+
interface LinkOwnProps extends PressEvents {
|
|
315
432
|
disabled?: boolean;
|
|
316
433
|
variant?: string;
|
|
317
434
|
size?: string;
|
|
@@ -325,8 +442,6 @@ interface ListItemProps extends HtmlProps<'li'> {
|
|
|
325
442
|
children?: ReactNode;
|
|
326
443
|
}
|
|
327
444
|
|
|
328
|
-
interface ListThemeExtension extends ThemeExtensionsWithParts<'List', ['ul', 'ol', 'item']> {
|
|
329
|
-
}
|
|
330
445
|
interface ListProps extends HtmlProps<'ul'> {
|
|
331
446
|
variant?: string;
|
|
332
447
|
size?: string;
|
|
@@ -334,19 +449,10 @@ interface ListProps extends HtmlProps<'ul'> {
|
|
|
334
449
|
children?: ReactNode;
|
|
335
450
|
}
|
|
336
451
|
declare const List: {
|
|
337
|
-
({ as, children, variant, size, ...props }: ListProps): JSX.Element;
|
|
338
|
-
Item: ({ children, ...props }: ListItemProps) => JSX.Element;
|
|
452
|
+
({ as, children, variant, size, ...props }: ListProps): React.JSX.Element;
|
|
453
|
+
Item: ({ children, ...props }: ListItemProps) => React.JSX.Element;
|
|
339
454
|
};
|
|
340
455
|
|
|
341
|
-
interface ListBoxThemeExtension extends ThemeExtensionsWithParts<'ListBox', [
|
|
342
|
-
'container',
|
|
343
|
-
'list',
|
|
344
|
-
'option',
|
|
345
|
-
'section',
|
|
346
|
-
'sectionTitle'
|
|
347
|
-
]> {
|
|
348
|
-
}
|
|
349
|
-
|
|
350
456
|
interface MenuTriggerProps {
|
|
351
457
|
children: [trigger: ReactNode, menu: ReactNode];
|
|
352
458
|
disabled?: boolean;
|
|
@@ -354,8 +460,6 @@ interface MenuTriggerProps {
|
|
|
354
460
|
onOpenChange?: (isOpen: boolean) => void;
|
|
355
461
|
}
|
|
356
462
|
|
|
357
|
-
interface MenuThemeExtension extends ThemeExtensionsWithParts<'Menu', ['container', 'item', 'section']> {
|
|
358
|
-
}
|
|
359
463
|
interface MenuProps extends Omit<HtmlProps<'ul'>, 'onSelect' | 'size'> {
|
|
360
464
|
children: CollectionElement<object> | CollectionElement<object>[];
|
|
361
465
|
variant?: string;
|
|
@@ -363,32 +467,28 @@ interface MenuProps extends Omit<HtmlProps<'ul'>, 'onSelect' | 'size'> {
|
|
|
363
467
|
onAction?: (key: Key) => void;
|
|
364
468
|
}
|
|
365
469
|
declare const Menu: {
|
|
366
|
-
({ variant, size, ...props }: MenuProps): JSX.Element;
|
|
367
|
-
Trigger: ({ disabled, open, onOpenChange, children, }: MenuTriggerProps) => JSX.Element;
|
|
470
|
+
({ variant, size, ...props }: MenuProps): React.JSX.Element;
|
|
471
|
+
Trigger: ({ disabled, open, onOpenChange, children, }: MenuTriggerProps) => React.JSX.Element;
|
|
368
472
|
Item: <T>(props: _react_types_shared.ItemProps<T>) => JSX.Element;
|
|
369
473
|
Section: <T_1>(props: _react_types_shared.SectionProps<T_1>) => JSX.Element;
|
|
370
474
|
};
|
|
371
475
|
|
|
372
476
|
interface ActionMenuProps extends MenuProps {
|
|
373
477
|
}
|
|
374
|
-
declare const ActionMenu: (props: ActionMenuProps) => JSX.Element;
|
|
478
|
+
declare const ActionMenu: (props: ActionMenuProps) => React.JSX.Element;
|
|
375
479
|
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
]> {
|
|
382
|
-
}
|
|
480
|
+
declare const icons: {
|
|
481
|
+
info: () => React.JSX.Element;
|
|
482
|
+
warning: () => React.JSX.Element;
|
|
483
|
+
error: () => React.JSX.Element;
|
|
484
|
+
};
|
|
383
485
|
interface MessageProps extends HtmlProps<'div'> {
|
|
384
486
|
messageTitle: ReactNode;
|
|
385
|
-
variant?:
|
|
487
|
+
variant?: keyof typeof icons;
|
|
386
488
|
size?: string;
|
|
387
489
|
}
|
|
388
|
-
declare const Message: ({ messageTitle, variant, size, children, ...props }: MessageProps) => JSX.Element;
|
|
490
|
+
declare const Message: ({ messageTitle, variant, size, children, ...props }: MessageProps) => React.JSX.Element;
|
|
389
491
|
|
|
390
|
-
interface NumberFieldThemeExtension extends ThemeExtensionsWithParts<'NumberField', ['group', 'stepper']> {
|
|
391
|
-
}
|
|
392
492
|
/**
|
|
393
493
|
* `react-aria` has a slightly different API for some DOM props.
|
|
394
494
|
* Thus, we adjust our regular props to match them.
|
|
@@ -397,7 +497,7 @@ type CustomProps = 'size' | 'width' | 'type' | 'value' | 'defaultValue' | 'step'
|
|
|
397
497
|
interface NumberFieldProps extends Omit<HtmlProps<'input'>, CustomProps>, Omit<AriaNumberFieldProps, 'isDisabled' | 'isRequired' | 'isReadOnly'>, Pick<FieldBaseProps, 'label' | 'description' | 'error' | 'errorMessage'> {
|
|
398
498
|
variant?: string;
|
|
399
499
|
size?: string;
|
|
400
|
-
width?:
|
|
500
|
+
width?: WidthProp['width'];
|
|
401
501
|
hideStepper?: boolean;
|
|
402
502
|
}
|
|
403
503
|
declare const NumberField: React.ForwardRefExoticComponent<NumberFieldProps & React.RefAttributes<HTMLInputElement>>;
|
|
@@ -416,7 +516,7 @@ interface OverlayProps {
|
|
|
416
516
|
children: OverlayProps$1['children'];
|
|
417
517
|
container?: OverlayProps$1['portalContainer'];
|
|
418
518
|
}
|
|
419
|
-
declare const Overlay: ({ children, container, open }: OverlayProps) => JSX.Element | null;
|
|
519
|
+
declare const Overlay: ({ children, container, open }: OverlayProps) => React.JSX.Element | null;
|
|
420
520
|
|
|
421
521
|
interface PopoverProps extends Pick<AriaPopoverProps, 'triggerRef' | 'scrollRef' | 'isNonModal'> {
|
|
422
522
|
keyboardDismissDisabled?: AriaPopoverProps['isKeyboardDismissDisabled'];
|
|
@@ -434,29 +534,31 @@ interface TrayWrapperProps extends TrayProps {
|
|
|
434
534
|
declare const Tray: React.ForwardRefExoticComponent<TrayProps & React.RefAttributes<HTMLDivElement>>;
|
|
435
535
|
declare const TrayWrapper: React.ForwardRefExoticComponent<TrayWrapperProps & React.RefAttributes<HTMLDivElement>>;
|
|
436
536
|
|
|
437
|
-
interface UnderlayThemeExtension extends ThemeExtension<'Underlay'> {
|
|
438
|
-
}
|
|
439
537
|
interface UnderlayProps extends HTMLAttributes<HTMLElement> {
|
|
440
538
|
variant?: string;
|
|
441
539
|
size?: string;
|
|
442
540
|
}
|
|
443
|
-
declare const Underlay: ({ size, variant, ...props }: UnderlayProps) => JSX.Element;
|
|
541
|
+
declare const Underlay: ({ size, variant, ...props }: UnderlayProps) => React.JSX.Element;
|
|
542
|
+
|
|
543
|
+
interface MarigoldProviderProps<T extends Theme> extends ThemeProviderProps<T> {
|
|
544
|
+
}
|
|
545
|
+
declare function MarigoldProvider<T extends Theme>({ children, theme, }: MarigoldProviderProps<T>): React.JSX.Element;
|
|
444
546
|
|
|
445
547
|
interface RadioGroupProps extends Omit<AriaRadioGroupProps, 'isDisabled' | 'isRquired' | 'isReadOnly ' | 'validationState'> {
|
|
446
548
|
children: ReactNode[];
|
|
447
|
-
width?:
|
|
549
|
+
width?: WidthProp['width'];
|
|
448
550
|
required?: boolean;
|
|
449
551
|
disabled?: boolean;
|
|
450
552
|
readOnly?: boolean;
|
|
451
553
|
error?: boolean;
|
|
452
554
|
}
|
|
453
|
-
declare const RadioGroup: ({ children, orientation, width, required, disabled, readOnly, error, ...rest }: RadioGroupProps) => JSX.Element;
|
|
555
|
+
declare const RadioGroup: ({ children, orientation, width, required, disabled, readOnly, error, ...rest }: RadioGroupProps) => React.JSX.Element;
|
|
454
556
|
|
|
455
|
-
interface RadioThemeExtension extends ThemeExtensionsWithParts<'Radio', ['container', 'label', 'radio']> {
|
|
456
|
-
}
|
|
457
557
|
type CustomRadioProps = 'size' | 'width' | 'type' | 'defaultChecked' | 'value' | 'onFocus' | 'onBlur' | 'onKeyUp' | 'onKeyDown';
|
|
458
|
-
interface RadioProps extends
|
|
558
|
+
interface RadioProps extends Omit<HtmlProps<'input'>, CustomRadioProps>, AriaRadioProps {
|
|
459
559
|
width?: string;
|
|
560
|
+
variant?: string;
|
|
561
|
+
size?: string;
|
|
460
562
|
disabled?: boolean;
|
|
461
563
|
}
|
|
462
564
|
declare const Radio: RadioComponent;
|
|
@@ -468,12 +570,10 @@ interface RadioComponent extends ForwardRefExoticComponent<RadioProps & RefAttri
|
|
|
468
570
|
Group: typeof RadioGroup;
|
|
469
571
|
}
|
|
470
572
|
|
|
471
|
-
interface SelectThemeExtension extends ThemeExtensionsWithParts<'Select', ['container', 'button', 'icon']> {
|
|
472
|
-
}
|
|
473
573
|
interface SelectProps extends Omit<AriaSelectProps<object>, 'autoComplete' | 'isOpen' | 'isLoading' | 'onLoadMore' | 'isDisabled' | 'isRequired' | 'validationState' | 'onSelectionChange'>, Omit<HtmlProps<'select'>, 'onKeyUp' | 'onKeyDown' | 'onFocus' | 'onBlur' | 'children' | 'size' | 'onChange'> {
|
|
474
574
|
variant?: string;
|
|
475
575
|
size?: string;
|
|
476
|
-
width?:
|
|
576
|
+
width?: WidthProp['width'];
|
|
477
577
|
open?: boolean;
|
|
478
578
|
disabled?: boolean;
|
|
479
579
|
required?: boolean;
|
|
@@ -494,13 +594,6 @@ interface SelectComponent extends ForwardRefExoticComponent<SelectProps & RefAtt
|
|
|
494
594
|
* Thanks to react-aria: https://react-spectrum.adobe.com/react-aria/useSlider.html
|
|
495
595
|
*/
|
|
496
596
|
|
|
497
|
-
interface SliderThemeExtension extends ThemeExtensionsWithParts<'Slider', [
|
|
498
|
-
'track',
|
|
499
|
-
'thumb',
|
|
500
|
-
'label',
|
|
501
|
-
'output'
|
|
502
|
-
]> {
|
|
503
|
-
}
|
|
504
597
|
interface SliderProps extends Omit<HtmlProps<'input'>, 'step' | 'value' | 'defaultValue' | 'onChange' | 'onFocus' | 'onBlur' | 'size' | 'width'>,
|
|
505
598
|
/**
|
|
506
599
|
* `react-aria` has a slightly different API for some events e.g `onChange`, `onFocus`
|
|
@@ -520,29 +613,27 @@ Pick<AriaSliderProps, 'maxValue' | 'step' | 'value' | 'defaultValue' | 'onChange
|
|
|
520
613
|
*/
|
|
521
614
|
declare const Slider: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<HTMLDivElement>>;
|
|
522
615
|
|
|
523
|
-
interface
|
|
524
|
-
'container',
|
|
525
|
-
'label',
|
|
526
|
-
'track',
|
|
527
|
-
'thumb'
|
|
528
|
-
]> {
|
|
616
|
+
interface SplitProps extends HtmlProps<'div'> {
|
|
529
617
|
}
|
|
618
|
+
declare const Split: (props: SplitProps) => React.JSX.Element;
|
|
619
|
+
|
|
620
|
+
interface StackProps extends AlignmentProp, GapSpaceProp {
|
|
621
|
+
children?: ReactNode;
|
|
622
|
+
stretch?: boolean;
|
|
623
|
+
alignX?: keyof typeof alignment.vertical.alignmentX;
|
|
624
|
+
alignY?: keyof typeof alignment.vertical.alignmentY;
|
|
625
|
+
}
|
|
626
|
+
declare const Stack: ({ children, space, stretch, orientation, alignX, alignY, ...props }: StackProps) => React.JSX.Element;
|
|
627
|
+
|
|
530
628
|
type CustomSwitchProps = 'size' | 'value' | 'onBlur' | 'onChange' | 'onFocus' | 'onKeyDown' | 'onKeyUp';
|
|
531
629
|
interface SwitchProps extends Omit<AriaSwitchProps, 'isSelected'>, Omit<HtmlProps<'input'>, CustomSwitchProps> {
|
|
532
|
-
|
|
630
|
+
selected?: boolean;
|
|
533
631
|
variant?: string;
|
|
534
632
|
size?: string;
|
|
535
633
|
width?: string;
|
|
536
634
|
}
|
|
537
635
|
declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLInputElement>>;
|
|
538
636
|
|
|
539
|
-
interface TableThemeExtension extends ThemeExtensionsWithParts<'Table', [
|
|
540
|
-
'table',
|
|
541
|
-
'header',
|
|
542
|
-
'row',
|
|
543
|
-
'cell'
|
|
544
|
-
]> {
|
|
545
|
-
}
|
|
546
637
|
interface TableProps extends Pick<AriaTableProps<object>, 'focusMode' | 'onRowAction' | 'onCellAction'>, Omit<TableStateProps<object>, 'showSelectionCheckboxes'> {
|
|
547
638
|
variant?: string;
|
|
548
639
|
size?: string;
|
|
@@ -566,23 +657,14 @@ interface Table {
|
|
|
566
657
|
Row: (props: RowProps) => JSX.Element;
|
|
567
658
|
}
|
|
568
659
|
|
|
569
|
-
interface
|
|
570
|
-
}
|
|
571
|
-
interface TextProps extends ThemeComponentProps, HtmlProps<'p'> {
|
|
572
|
-
display?: CSSObject['display'];
|
|
573
|
-
align?: CSSObject['textAlign'];
|
|
574
|
-
color?: string;
|
|
575
|
-
cursor?: string;
|
|
576
|
-
fontSize?: string;
|
|
577
|
-
fontWeight?: string;
|
|
578
|
-
fontStyle?: string;
|
|
579
|
-
outline?: string;
|
|
660
|
+
interface TextProps extends HtmlProps<'p'>, TextAlignProp, FontSizeProp, FontWeightProp, FontStyleProp, CursorProp {
|
|
580
661
|
children?: React.ReactNode;
|
|
662
|
+
variant?: string;
|
|
663
|
+
color?: string;
|
|
664
|
+
size?: string;
|
|
581
665
|
}
|
|
582
|
-
declare const Text: ({ variant, size,
|
|
666
|
+
declare const Text: ({ variant, size, color, align, cursor, weight, fontSize, fontStyle, children, ...props }: TextProps) => React.JSX.Element;
|
|
583
667
|
|
|
584
|
-
interface TextAreaThemeExtension extends ThemeExtension<'TextArea'> {
|
|
585
|
-
}
|
|
586
668
|
/**
|
|
587
669
|
* `react-aria` has a slightly different API for the above events.
|
|
588
670
|
* Thus, we adjust our regular props to match them.
|
|
@@ -591,155 +673,12 @@ type CustomTextAreaEvents = 'onChange' | 'onFocus' | 'onBlur' | 'onCopy' | 'onSe
|
|
|
591
673
|
interface TextAreaProps extends Omit<HtmlProps<'textarea'>, 'value' | 'defaultValue' | 'size' | CustomTextAreaEvents>, Pick<AriaTextFieldProps, CustomTextAreaEvents>, Pick<FieldBaseProps, 'label' | 'description' | 'error' | 'errorMessage'> {
|
|
592
674
|
variant?: string;
|
|
593
675
|
size?: string;
|
|
594
|
-
width?:
|
|
676
|
+
width?: WidthProp['width'];
|
|
595
677
|
value?: string;
|
|
596
678
|
defaultValue?: string;
|
|
597
679
|
}
|
|
598
680
|
declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;
|
|
599
681
|
|
|
600
|
-
interface TooltipTriggerProps extends Omit<TooltipTriggerProps$1, 'isDisabled' | 'isOpen'>, Omit<PositionProps, 'isOpen'> {
|
|
601
|
-
children: [trigger: ReactElement, menu: ReactElement];
|
|
602
|
-
disabled?: boolean;
|
|
603
|
-
open?: boolean;
|
|
604
|
-
}
|
|
605
|
-
|
|
606
|
-
interface TooltipThemeExtension extends ThemeExtensionsWithParts<'Tooltip', ['container', 'arrow']> {
|
|
607
|
-
}
|
|
608
|
-
interface TooltipProps extends HtmlProps<'div'> {
|
|
609
|
-
children?: ReactNode;
|
|
610
|
-
variant?: string;
|
|
611
|
-
size?: string;
|
|
612
|
-
}
|
|
613
|
-
declare const Tooltip: {
|
|
614
|
-
({ children, variant, size }: TooltipProps): JSX.Element;
|
|
615
|
-
Trigger: ({ disabled, open, delay, placement, children, ...rest }: TooltipTriggerProps) => JSX.Element;
|
|
616
|
-
};
|
|
617
|
-
|
|
618
|
-
interface ComponentStyles extends AccordionThemeExtension, AutocompleteThemeExtension, BadgeThemeExtension, ButtonThemeExtension, CardThemeExtension, CheckboxThemeExtension, BodyThemeExtension, DialogThemeExtension, DividerThemeExtension, FieldThemeExtension, FooterThemeExtension, HeaderThemeExtension, HeadlineThemeExtension, HelpTextThemeExtension, ImageThemeExtension, InputThemeExtension, LabelThemeExtension, LinkThemeExtension, ListThemeExtension, ListBoxThemeExtension, MenuThemeExtension, MessageThemeExtension, NumberFieldThemeExtension, RadioThemeExtension, SelectThemeExtension, SliderThemeExtension, SwitchThemeExtension, TableThemeExtension, TextThemeExtension, TextAreaThemeExtension, TooltipThemeExtension, UnderlayThemeExtension {
|
|
619
|
-
}
|
|
620
|
-
interface Theme extends Theme$1 {
|
|
621
|
-
components: ComponentStyles;
|
|
622
|
-
}
|
|
623
|
-
interface CustomizedTheme extends Theme$1 {
|
|
624
|
-
components?: Partial<ComponentStyles>;
|
|
625
|
-
}
|
|
626
|
-
declare const extendTheme: (baseTheme: Theme, extendTheme: CustomizedTheme) => Theme;
|
|
627
|
-
|
|
628
|
-
interface AsideProps {
|
|
629
|
-
children: [ReactElement, ReactElement];
|
|
630
|
-
side?: 'left' | 'right';
|
|
631
|
-
sideWidth?: ResponsiveStyleValue<string>;
|
|
632
|
-
space?: ResponsiveStyleValue<string>;
|
|
633
|
-
stretch?: boolean;
|
|
634
|
-
wrap?: NonZeroPercentage;
|
|
635
|
-
}
|
|
636
|
-
declare const Aside: ({ children, sideWidth, space, side, stretch, wrap, }: AsideProps) => JSX.Element;
|
|
637
|
-
|
|
638
|
-
/**
|
|
639
|
-
* Based on https://theme-ui.com/components/aspect-ratio
|
|
640
|
-
*/
|
|
641
|
-
|
|
642
|
-
interface AspectProps extends HtmlProps<'div'> {
|
|
643
|
-
children?: ReactNode;
|
|
644
|
-
ratio?: keyof typeof aspect;
|
|
645
|
-
maxWidth?: string;
|
|
646
|
-
}
|
|
647
|
-
declare const Aspect: ({ ratio, maxWidth, children, }: AspectProps) => JSX.Element;
|
|
648
|
-
|
|
649
|
-
interface BreakoutProps extends HtmlProps<'div'> {
|
|
650
|
-
children?: ReactNode;
|
|
651
|
-
alignY?: 'top' | 'bottom' | 'center';
|
|
652
|
-
alignX?: 'left' | 'right' | 'center';
|
|
653
|
-
height?: string;
|
|
654
|
-
}
|
|
655
|
-
declare const Breakout: ({ alignX, alignY, height, children, ...props }: BreakoutProps) => JSX.Element;
|
|
656
|
-
|
|
657
|
-
interface CenterProps extends HtmlProps<'div'> {
|
|
658
|
-
children?: ReactNode;
|
|
659
|
-
maxWidth?: string;
|
|
660
|
-
space?: ResponsiveStyleValue<string>;
|
|
661
|
-
}
|
|
662
|
-
declare const Center: ({ maxWidth, space, children, ...props }: CenterProps) => JSX.Element;
|
|
663
|
-
|
|
664
|
-
interface ColumnsProps {
|
|
665
|
-
children?: ReactNode;
|
|
666
|
-
columns: Array<number>;
|
|
667
|
-
space?: ResponsiveStyleValue<string>;
|
|
668
|
-
columnLimit?: number;
|
|
669
|
-
collapseAt?: string | 0;
|
|
670
|
-
stretch?: boolean;
|
|
671
|
-
}
|
|
672
|
-
declare const Columns: ({ space, columns, collapseAt, stretch, children, ...props }: ColumnsProps) => JSX.Element;
|
|
673
|
-
|
|
674
|
-
interface ContainerProps extends HtmlProps<'div'> {
|
|
675
|
-
children?: ReactNode;
|
|
676
|
-
contentType?: 'content' | 'header';
|
|
677
|
-
size?: keyof typeof size.content | keyof typeof size.header;
|
|
678
|
-
align?: 'left' | 'right' | 'center';
|
|
679
|
-
alignItems?: 'left' | 'right' | 'center' | 'none';
|
|
680
|
-
}
|
|
681
|
-
declare const Container: ({ contentType, size, align, alignItems, children, ...props }: ContainerProps) => JSX.Element;
|
|
682
|
-
|
|
683
|
-
declare const ALIGNMENT_X$1: {
|
|
684
|
-
left: string;
|
|
685
|
-
center: string;
|
|
686
|
-
right: string;
|
|
687
|
-
};
|
|
688
|
-
declare const ALIGNMENT_Y$1: {
|
|
689
|
-
top: string;
|
|
690
|
-
center: string;
|
|
691
|
-
bottom: string;
|
|
692
|
-
};
|
|
693
|
-
interface InlineProps {
|
|
694
|
-
children?: ReactNode;
|
|
695
|
-
space?: ResponsiveStyleValue<string>;
|
|
696
|
-
alignX?: keyof typeof ALIGNMENT_X$1;
|
|
697
|
-
alignY?: keyof typeof ALIGNMENT_Y$1;
|
|
698
|
-
}
|
|
699
|
-
declare const Inline: ({ space, alignX, alignY, children, ...props }: InlineProps) => JSX.Element;
|
|
700
|
-
|
|
701
|
-
type InsetProps = {
|
|
702
|
-
children: ReactNode;
|
|
703
|
-
space?: never;
|
|
704
|
-
spaceX?: ResponsiveStyleValue<string>;
|
|
705
|
-
spaceY?: ResponsiveStyleValue<string>;
|
|
706
|
-
} | {
|
|
707
|
-
children: ReactNode;
|
|
708
|
-
space?: ResponsiveStyleValue<string>;
|
|
709
|
-
spaceX?: never;
|
|
710
|
-
spaceY?: never;
|
|
711
|
-
};
|
|
712
|
-
declare const Inset: ({ space, spaceX, spaceY, children }: InsetProps) => JSX.Element;
|
|
713
|
-
|
|
714
|
-
interface MarigoldProviderProps<T extends Theme$1> extends ThemeProviderProps<T>, GlobalProps {
|
|
715
|
-
}
|
|
716
|
-
declare function MarigoldProvider<T extends Theme$1>({ children, theme, selector, normalizeDocument, }: MarigoldProviderProps<T>): JSX.Element;
|
|
717
|
-
|
|
718
|
-
interface SplitProps extends HtmlProps<'div'> {
|
|
719
|
-
}
|
|
720
|
-
declare const Split: (props: SplitProps) => JSX.Element;
|
|
721
|
-
|
|
722
|
-
declare const ALIGNMENT_X: {
|
|
723
|
-
none: string;
|
|
724
|
-
left: string;
|
|
725
|
-
center: string;
|
|
726
|
-
right: string;
|
|
727
|
-
};
|
|
728
|
-
declare const ALIGNMENT_Y: {
|
|
729
|
-
none: string;
|
|
730
|
-
top: string;
|
|
731
|
-
center: string;
|
|
732
|
-
bottom: string;
|
|
733
|
-
};
|
|
734
|
-
interface StackProps {
|
|
735
|
-
children?: ReactNode;
|
|
736
|
-
space?: ResponsiveStyleValue<string>;
|
|
737
|
-
alignX?: keyof typeof ALIGNMENT_X;
|
|
738
|
-
alignY?: keyof typeof ALIGNMENT_Y;
|
|
739
|
-
stretch?: boolean;
|
|
740
|
-
}
|
|
741
|
-
declare const Stack: ({ children, space, alignX, alignY, stretch, ...props }: StackProps) => JSX.Element;
|
|
742
|
-
|
|
743
682
|
/**
|
|
744
683
|
* `react-aria` has a slightly different API for the above events.
|
|
745
684
|
* Thus, we adjust our regular props to match them.
|
|
@@ -753,21 +692,64 @@ interface TextFieldProps extends Omit<HtmlProps<'input'>, 'value' | 'defaultValu
|
|
|
753
692
|
Pick<AriaTextFieldProps, CustomTextFieldEvents>, Pick<FieldBaseProps, 'label' | 'description' | 'error' | 'errorMessage'> {
|
|
754
693
|
variant?: string;
|
|
755
694
|
size?: string;
|
|
756
|
-
width?:
|
|
695
|
+
width?: WidthProp['width'];
|
|
757
696
|
value?: string;
|
|
758
697
|
defaultValue?: string;
|
|
759
698
|
}
|
|
760
699
|
declare const TextField: React.ForwardRefExoticComponent<TextFieldProps & React.RefAttributes<HTMLInputElement>>;
|
|
761
700
|
|
|
762
|
-
interface TilesProps {
|
|
701
|
+
interface TilesProps extends GapSpaceProp {
|
|
763
702
|
children: ReactNode;
|
|
764
703
|
tilesWidth: string;
|
|
765
|
-
space?: ResponsiveStyleValue<string>;
|
|
766
704
|
stretch?: boolean;
|
|
767
705
|
equalHeight?: boolean;
|
|
768
706
|
}
|
|
769
|
-
declare const Tiles: ({ space, stretch, equalHeight, tilesWidth, children, ...props }: TilesProps) => JSX.Element;
|
|
707
|
+
declare const Tiles: ({ space, stretch, equalHeight, tilesWidth, children, ...props }: TilesProps) => React.JSX.Element;
|
|
708
|
+
|
|
709
|
+
interface TooltipTriggerProps extends Omit<TooltipTriggerProps$1, 'isDisabled' | 'isOpen'>, Omit<PositionProps, 'isOpen'> {
|
|
710
|
+
children: [trigger: ReactElement, menu: ReactElement];
|
|
711
|
+
disabled?: boolean;
|
|
712
|
+
open?: boolean;
|
|
713
|
+
}
|
|
714
|
+
|
|
715
|
+
interface TooltipProps extends HtmlProps<'div'> {
|
|
716
|
+
children?: ReactNode;
|
|
717
|
+
variant?: string;
|
|
718
|
+
size?: string;
|
|
719
|
+
}
|
|
720
|
+
declare const Tooltip: {
|
|
721
|
+
({ children, variant, size }: TooltipProps): React.JSX.Element;
|
|
722
|
+
Trigger: ({ disabled, open, delay, placement, children, ...rest }: TooltipTriggerProps) => React.JSX.Element;
|
|
723
|
+
};
|
|
724
|
+
|
|
725
|
+
interface TagGroupProps extends Omit<AriaTagGroupProps<object>, 'isRequired' | 'validationState'>, LabelableProps, HelpTextProps {
|
|
726
|
+
width?: WidthProp['width'];
|
|
727
|
+
required?: boolean;
|
|
728
|
+
error?: boolean;
|
|
729
|
+
allowsRemoving?: boolean;
|
|
730
|
+
}
|
|
731
|
+
declare const TagGroup: ({ width, required, error, allowsRemoving, ...rest }: TagGroupProps) => React.JSX.Element;
|
|
732
|
+
|
|
733
|
+
declare const Tag: TagComponent;
|
|
734
|
+
/**
|
|
735
|
+
* We need this so that TypeScripts allows us to add
|
|
736
|
+
* additional properties to the component (function).
|
|
737
|
+
*/
|
|
738
|
+
type ItemComponent = typeof Item;
|
|
739
|
+
interface TagComponent extends ItemComponent {
|
|
740
|
+
Group: typeof TagGroup;
|
|
741
|
+
}
|
|
770
742
|
|
|
771
743
|
declare const XLoader: React.ForwardRefExoticComponent<SVGProps & React.RefAttributes<SVGElement>>;
|
|
772
744
|
|
|
773
|
-
|
|
745
|
+
interface TabsProps extends Omit<AriaTabListProps<object>, 'orientation' | 'isDisabled'>, GapSpaceProp {
|
|
746
|
+
size?: 'small' | 'medium' | 'large';
|
|
747
|
+
disabled?: boolean;
|
|
748
|
+
variant?: string;
|
|
749
|
+
}
|
|
750
|
+
declare const Tabs: {
|
|
751
|
+
({ space, size, disabled, variant, ...rest }: TabsProps): React.JSX.Element;
|
|
752
|
+
Item: <T>(props: _react_types_shared.ItemProps<T>) => JSX.Element;
|
|
753
|
+
};
|
|
754
|
+
|
|
755
|
+
export { Accordion, AccordionItem, AccordionItemProps, AccordionOwnItemProps, AccordionProps, ActionMenu, Aside, AsideProps, Aspect, AspectProps, Autocomplete, AutocompleteProps, Badge, BadgeProps, Body, BodyProps, Breakout, BreakoutProps, Button, ButtonOwnProps, ButtonProps, Calendar, CalendarCell, CalendarCellProps, CalendarGrid, CalendarGridProps, CalendarProps, Card, CardProps, Center, CenterProps, Checkbox, CheckboxGroup, CheckboxGroupContext, CheckboxGroupContextProps, CheckboxGroupProps, CheckboxProps, Columns, ColumnsProps, ComboBox, ComboBoxProps, Container, ContainerProps, CustomCheckboxProps, CustomRadioProps, CustomSwitchProps, CustomTextAreaEvents, CustomTextFieldEvents, DateField, DateFieldProps, DatePicker, DatePickerProps, Dialog, DialogChildProps, DialogProps, Divider, DividerProps, FieldBase, FieldBaseProps, FieldGroup, FieldGroupContext, FieldGroupContextProps, FieldGroupProps, Footer, FooterProps, Header, HeaderProps, Headline, HeadlineProps, Image, ImageProps, Inline, InlineProps, Input, InputOwnProps, InputProps, Inset, InsetProps, Label, LabelProps, Link, LinkOwnProps, LinkProps, List, ListProps, MarigoldProvider, MarigoldProviderProps, Menu, MenuProps, Message, MessageProps, Modal, ModalProps, NumberField, NumberFieldProps, Overlay, OverlayProps, Popover, PopoverProps, Radio, RadioComponent, RadioGroupProps, RadioProps, RowProps, Select, SelectComponent, SelectProps, Slider, SliderProps, Split, SplitProps, Stack, StackProps, Switch, SwitchProps, Table, TableProps, Tabs, Tag, TagComponent, Text, TextArea, TextAreaProps, TextField, TextFieldProps, TextProps, Tiles, TilesProps, Tooltip, TooltipProps, Tray, TrayProps, TrayWrapper, Underlay, UnderlayProps, XLoader, useCheckboxGroupContext, useFieldGroupContext };
|