plainframe-ui 0.1.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 +1591 -0
- package/dist/index.js +12360 -0
- package/dist/index.js.map +1 -0
- package/package.json +64 -0
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,1591 @@
|
|
|
1
|
+
import React, { ReactNode } from 'react';
|
|
2
|
+
import { Interpolation, Theme, CSSObject } from '@emotion/react';
|
|
3
|
+
import { Placement } from '@floating-ui/react';
|
|
4
|
+
import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
|
|
5
|
+
|
|
6
|
+
/** @jsxImportSource @emotion/react */
|
|
7
|
+
|
|
8
|
+
type AccordionVariant = "subtle" | "outlined" | "ghost";
|
|
9
|
+
type WithCss$9 = {
|
|
10
|
+
css?: Interpolation<Theme>;
|
|
11
|
+
};
|
|
12
|
+
type AccordionProps = WithCss$9 & {
|
|
13
|
+
expanded?: boolean;
|
|
14
|
+
defaultExpanded?: boolean;
|
|
15
|
+
onChange?: (expanded: boolean) => void;
|
|
16
|
+
className?: string;
|
|
17
|
+
variant?: AccordionVariant;
|
|
18
|
+
disabled?: boolean;
|
|
19
|
+
width?: number | string;
|
|
20
|
+
children: React.ReactNode;
|
|
21
|
+
};
|
|
22
|
+
declare const Accordion: React.FC<AccordionProps>;
|
|
23
|
+
|
|
24
|
+
/** @jsxImportSource @emotion/react */
|
|
25
|
+
|
|
26
|
+
type WithCss$8 = {
|
|
27
|
+
css?: Interpolation<Theme>;
|
|
28
|
+
};
|
|
29
|
+
type AccordionSummaryProps = WithCss$8 & {
|
|
30
|
+
children?: React.ReactNode;
|
|
31
|
+
expandIcon?: React.ReactNode;
|
|
32
|
+
onClick?: (e: React.MouseEvent) => void;
|
|
33
|
+
expanded?: boolean;
|
|
34
|
+
disabled?: boolean;
|
|
35
|
+
className?: string;
|
|
36
|
+
noExpandIcon?: boolean;
|
|
37
|
+
expandIconPosition?: "left" | "right";
|
|
38
|
+
};
|
|
39
|
+
declare const AccordionSummary: React.ForwardRefExoticComponent<AccordionSummaryProps & React.RefAttributes<HTMLDivElement>>;
|
|
40
|
+
|
|
41
|
+
/** @jsxImportSource @emotion/react */
|
|
42
|
+
|
|
43
|
+
type WithCss$7 = {
|
|
44
|
+
css?: Interpolation<Theme>;
|
|
45
|
+
};
|
|
46
|
+
type AccordionDetailsProps = {
|
|
47
|
+
children?: React.ReactNode;
|
|
48
|
+
className?: string;
|
|
49
|
+
} & WithCss$7;
|
|
50
|
+
declare const AccordionDetails: React.FC<AccordionDetailsProps>;
|
|
51
|
+
|
|
52
|
+
/** @jsxImportSource @emotion/react */
|
|
53
|
+
|
|
54
|
+
type Variant$a = "subtle" | "outlined" | "ghost";
|
|
55
|
+
type WithCssProp$6 = {
|
|
56
|
+
css?: Interpolation<Theme>;
|
|
57
|
+
};
|
|
58
|
+
type AccordionGroupProps = WithCssProp$6 & {
|
|
59
|
+
children: React.ReactNode;
|
|
60
|
+
attached?: boolean;
|
|
61
|
+
variant?: Variant$a;
|
|
62
|
+
exclusive?: boolean;
|
|
63
|
+
expandedIndex?: number | null;
|
|
64
|
+
defaultExpandedIndex?: number | null;
|
|
65
|
+
onExpandedIndexChange?: (index: number | null) => void;
|
|
66
|
+
disabled?: boolean;
|
|
67
|
+
width?: number | string;
|
|
68
|
+
className?: string;
|
|
69
|
+
role?: React.AriaRole;
|
|
70
|
+
};
|
|
71
|
+
declare const AccordionGroup: React.FC<AccordionGroupProps>;
|
|
72
|
+
|
|
73
|
+
/** @jsxImportSource @emotion/react */
|
|
74
|
+
|
|
75
|
+
type WithCss$6 = {
|
|
76
|
+
css?: Interpolation<Theme>;
|
|
77
|
+
};
|
|
78
|
+
type SpaceToken$1 = "xs" | "sm" | "md" | "lg" | "xl";
|
|
79
|
+
type RadiusToken$3 = "xs" | "sm" | "md" | "lg" | "xl" | "full";
|
|
80
|
+
type ActionBarAnchorOrigin = {
|
|
81
|
+
vertical?: "top" | "bottom" | "center";
|
|
82
|
+
horizontal?: "left" | "right" | "center";
|
|
83
|
+
};
|
|
84
|
+
type ActionBarProps = WithCss$6 & {
|
|
85
|
+
children: React.ReactNode;
|
|
86
|
+
anchorOrigin?: ActionBarAnchorOrigin;
|
|
87
|
+
padding?: number | string | SpaceToken$1;
|
|
88
|
+
radius?: number | string | RadiusToken$3;
|
|
89
|
+
gap?: number | string;
|
|
90
|
+
offset?: number | string;
|
|
91
|
+
offsetX?: number | string;
|
|
92
|
+
offsetY?: number | string;
|
|
93
|
+
shadow?: boolean;
|
|
94
|
+
width?: number | string;
|
|
95
|
+
height?: number | string;
|
|
96
|
+
open?: boolean;
|
|
97
|
+
unstyled?: boolean;
|
|
98
|
+
containerCss?: Interpolation<Theme>;
|
|
99
|
+
containerClassName?: string;
|
|
100
|
+
className?: string;
|
|
101
|
+
};
|
|
102
|
+
declare const ActionBar: React.FC<ActionBarProps>;
|
|
103
|
+
|
|
104
|
+
/** @jsxImportSource @emotion/react */
|
|
105
|
+
|
|
106
|
+
type AlertVariant = "filled" | "outlined" | "soft" | "ghost";
|
|
107
|
+
type AlertIntent = "danger" | "warning" | "info" | "success" | "neutral";
|
|
108
|
+
type AlertProps = Omit<React.HTMLAttributes<HTMLDivElement>, "style"> & {
|
|
109
|
+
intent?: AlertIntent;
|
|
110
|
+
variant?: AlertVariant;
|
|
111
|
+
icon?: React.ReactNode;
|
|
112
|
+
actionButton?: React.ReactNode;
|
|
113
|
+
onClose?: () => void;
|
|
114
|
+
width?: string | number;
|
|
115
|
+
size?: "sm" | "md" | "lg";
|
|
116
|
+
css?: Interpolation<Theme>;
|
|
117
|
+
className?: string;
|
|
118
|
+
};
|
|
119
|
+
type SubProps = Omit<React.HTMLAttributes<HTMLElement>, "style"> & {
|
|
120
|
+
css?: Interpolation<Theme>;
|
|
121
|
+
className?: string;
|
|
122
|
+
children?: React.ReactNode;
|
|
123
|
+
};
|
|
124
|
+
declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<HTMLDivElement>>;
|
|
125
|
+
declare const AlertTitle: React.ForwardRefExoticComponent<SubProps & React.RefAttributes<HTMLSpanElement>>;
|
|
126
|
+
declare const AlertDescription: React.ForwardRefExoticComponent<SubProps & React.RefAttributes<HTMLSpanElement>>;
|
|
127
|
+
|
|
128
|
+
/** @jsxImportSource @emotion/react */
|
|
129
|
+
|
|
130
|
+
type AutocompleteItem = {
|
|
131
|
+
value: string;
|
|
132
|
+
title?: string;
|
|
133
|
+
description?: string;
|
|
134
|
+
disabled?: boolean;
|
|
135
|
+
group?: string;
|
|
136
|
+
startIcon?: React.ReactNode;
|
|
137
|
+
endIcon?: React.ReactNode;
|
|
138
|
+
css?: Interpolation<Theme>;
|
|
139
|
+
[key: string]: unknown;
|
|
140
|
+
};
|
|
141
|
+
type WithCss$5 = {
|
|
142
|
+
css?: Interpolation<Theme>;
|
|
143
|
+
};
|
|
144
|
+
type AutocompleteProps = WithCss$5 & {
|
|
145
|
+
items?: AutocompleteItem[];
|
|
146
|
+
onSelect?: (item: AutocompleteItem) => void;
|
|
147
|
+
width?: number | string;
|
|
148
|
+
fullWidth?: boolean;
|
|
149
|
+
placeholder?: string;
|
|
150
|
+
renderItem?: (item: AutocompleteItem, selected?: boolean, hovered?: boolean) => React.ReactNode;
|
|
151
|
+
inputCss?: Interpolation<Theme>;
|
|
152
|
+
containerCss?: Interpolation<Theme>;
|
|
153
|
+
className?: string;
|
|
154
|
+
label?: string;
|
|
155
|
+
helperText?: string;
|
|
156
|
+
variant?: "subtle" | "outlined" | "ghost";
|
|
157
|
+
startIcon?: React.ReactNode;
|
|
158
|
+
endIcon?: React.ReactNode;
|
|
159
|
+
size?: "sm" | "md" | "lg";
|
|
160
|
+
focusRingMode?: "always" | "none";
|
|
161
|
+
itemsOpen?: boolean;
|
|
162
|
+
onItemsOpenChange?: (open: boolean) => void;
|
|
163
|
+
openOnFocus?: boolean;
|
|
164
|
+
openOnType?: boolean;
|
|
165
|
+
openOnClick?: boolean;
|
|
166
|
+
freeItem?: boolean | {
|
|
167
|
+
prefix?: string;
|
|
168
|
+
suffix?: string;
|
|
169
|
+
};
|
|
170
|
+
maxHeight?: number | string;
|
|
171
|
+
maxItems?: number;
|
|
172
|
+
noResultsText?: string;
|
|
173
|
+
highlightTypedValue?: boolean;
|
|
174
|
+
typedValueHighlightCss?: Interpolation<Theme>;
|
|
175
|
+
showNoResults?: boolean;
|
|
176
|
+
loadItems?: (query: string) => Promise<AutocompleteItem[]>;
|
|
177
|
+
loading?: boolean;
|
|
178
|
+
loadingText?: string;
|
|
179
|
+
debounceMs?: number;
|
|
180
|
+
multiple?: boolean;
|
|
181
|
+
selectedValues?: string[];
|
|
182
|
+
defaultSelectedValues?: string[];
|
|
183
|
+
onChangeSelected?: (items: AutocompleteItem[]) => void;
|
|
184
|
+
};
|
|
185
|
+
declare const Autocomplete: React.FC<AutocompleteProps>;
|
|
186
|
+
|
|
187
|
+
/** @jsxImportSource @emotion/react */
|
|
188
|
+
|
|
189
|
+
type AvatarProps = Omit<React.HTMLAttributes<HTMLDivElement>, "style"> & {
|
|
190
|
+
src?: string;
|
|
191
|
+
alt?: string;
|
|
192
|
+
size?: "sm" | "md" | "lg" | number;
|
|
193
|
+
color?: string;
|
|
194
|
+
rounded?: boolean;
|
|
195
|
+
css?: Interpolation<Theme>;
|
|
196
|
+
className?: string;
|
|
197
|
+
children?: React.ReactNode;
|
|
198
|
+
};
|
|
199
|
+
declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLDivElement>>;
|
|
200
|
+
|
|
201
|
+
/** @jsxImportSource @emotion/react */
|
|
202
|
+
|
|
203
|
+
type AvatarGroupProps = {
|
|
204
|
+
children: React.ReactNode;
|
|
205
|
+
max?: number;
|
|
206
|
+
size?: "sm" | "md" | "lg" | string | number;
|
|
207
|
+
overlap?: number;
|
|
208
|
+
css?: Interpolation<Theme>;
|
|
209
|
+
rounded?: boolean;
|
|
210
|
+
bgColor?: string | "subtle" | "panel";
|
|
211
|
+
extraLabelCss?: Interpolation<Theme>;
|
|
212
|
+
outlineThickness?: number | string;
|
|
213
|
+
className?: string;
|
|
214
|
+
};
|
|
215
|
+
declare const AvatarGroup: React.FC<AvatarGroupProps>;
|
|
216
|
+
|
|
217
|
+
/** @jsxImportSource @emotion/react */
|
|
218
|
+
|
|
219
|
+
type BadgeAnchorOrigin = {
|
|
220
|
+
vertical?: "top" | "bottom" | "center";
|
|
221
|
+
horizontal?: "left" | "right" | "center";
|
|
222
|
+
};
|
|
223
|
+
type BadgeProps = {
|
|
224
|
+
content?: number | string | React.ReactNode;
|
|
225
|
+
color?: "primary" | "secondary" | "neutral" | "danger" | "success" | "warning" | "info" | string;
|
|
226
|
+
fontColor?: string;
|
|
227
|
+
fontWeight?: number | string;
|
|
228
|
+
fontSize?: number | string;
|
|
229
|
+
variant?: "standard" | "dot";
|
|
230
|
+
max?: number;
|
|
231
|
+
showZero?: boolean;
|
|
232
|
+
visible?: boolean;
|
|
233
|
+
anchorOrigin?: BadgeAnchorOrigin;
|
|
234
|
+
overlap?: "circular" | "rectangular";
|
|
235
|
+
children: React.ReactNode;
|
|
236
|
+
animate?: boolean;
|
|
237
|
+
size?: number;
|
|
238
|
+
outline?: boolean;
|
|
239
|
+
outlineColor?: string;
|
|
240
|
+
className?: string;
|
|
241
|
+
badgeClassName?: string;
|
|
242
|
+
css?: Interpolation<any>;
|
|
243
|
+
badgeCss?: Interpolation<any>;
|
|
244
|
+
offsetX?: number | string;
|
|
245
|
+
offsetY?: number | string;
|
|
246
|
+
};
|
|
247
|
+
declare const Badge: React.FC<BadgeProps>;
|
|
248
|
+
|
|
249
|
+
/** @jsxImportSource @emotion/react */
|
|
250
|
+
|
|
251
|
+
type BackdropProps = Omit<React.HTMLAttributes<HTMLDivElement>, "style"> & {
|
|
252
|
+
on: boolean;
|
|
253
|
+
onClickAway?: () => void;
|
|
254
|
+
blur?: boolean;
|
|
255
|
+
blurDepth?: number | string;
|
|
256
|
+
color?: string;
|
|
257
|
+
zIndex?: number;
|
|
258
|
+
css?: Interpolation<Theme>;
|
|
259
|
+
contentCss?: Interpolation<Theme>;
|
|
260
|
+
overlayCss?: Interpolation<Theme>;
|
|
261
|
+
children?: React.ReactNode;
|
|
262
|
+
transitionDuration?: number;
|
|
263
|
+
keepMounted?: boolean;
|
|
264
|
+
className?: string;
|
|
265
|
+
contentClassName?: string;
|
|
266
|
+
lockScroll?: boolean;
|
|
267
|
+
};
|
|
268
|
+
declare const Backdrop: React.FC<BackdropProps>;
|
|
269
|
+
|
|
270
|
+
/** @jsxImportSource @emotion/react */
|
|
271
|
+
|
|
272
|
+
type WithCss$4 = {
|
|
273
|
+
css?: Interpolation<Theme>;
|
|
274
|
+
};
|
|
275
|
+
type BreadCrumbItemProps = Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "style" | "href"> & WithCss$4 & {
|
|
276
|
+
href?: string;
|
|
277
|
+
disabled?: boolean;
|
|
278
|
+
className?: string;
|
|
279
|
+
children?: React.ReactNode;
|
|
280
|
+
startIcon?: React.ReactNode;
|
|
281
|
+
endIcon?: React.ReactNode;
|
|
282
|
+
};
|
|
283
|
+
declare const BreadCrumbItem: React.FC<BreadCrumbItemProps>;
|
|
284
|
+
type BreadCrumbsProps = Omit<React.HTMLAttributes<HTMLElement>, "style"> & {
|
|
285
|
+
children?: React.ReactNode;
|
|
286
|
+
separator?: React.ReactNode;
|
|
287
|
+
css?: Interpolation<Theme>;
|
|
288
|
+
crumbCss?: Interpolation<Theme>;
|
|
289
|
+
activeCrumbCss?: Interpolation<Theme>;
|
|
290
|
+
inactiveCrumbCss?: Interpolation<Theme>;
|
|
291
|
+
linkCrumbCss?: Interpolation<Theme>;
|
|
292
|
+
separatorCss?: Interpolation<Theme>;
|
|
293
|
+
hover?: boolean;
|
|
294
|
+
className?: string;
|
|
295
|
+
};
|
|
296
|
+
declare const BreadCrumbs: React.FC<BreadCrumbsProps>;
|
|
297
|
+
|
|
298
|
+
/** @jsxImportSource @emotion/react */
|
|
299
|
+
|
|
300
|
+
type ButtonVariant = "primary" | "destructive" | "subtle" | "outlined" | "ghost" | "quiet" | "ghost-destructive";
|
|
301
|
+
type ButtonSize = "sm" | "md" | "lg" | number | string;
|
|
302
|
+
type LoadingPosition = "start" | "end" | "center";
|
|
303
|
+
type WithCssProp$5 = {
|
|
304
|
+
css?: Interpolation<Theme>;
|
|
305
|
+
};
|
|
306
|
+
type ButtonBase = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "color" | "style"> & WithCssProp$5 & {
|
|
307
|
+
size?: ButtonSize;
|
|
308
|
+
startIcon?: ReactNode;
|
|
309
|
+
endIcon?: ReactNode;
|
|
310
|
+
rounded?: boolean;
|
|
311
|
+
fullWidth?: boolean;
|
|
312
|
+
loading?: boolean;
|
|
313
|
+
loadingIndicator?: ReactNode;
|
|
314
|
+
loadingPosition?: LoadingPosition;
|
|
315
|
+
className?: string;
|
|
316
|
+
hoverEffect?: boolean;
|
|
317
|
+
children?: ReactNode;
|
|
318
|
+
};
|
|
319
|
+
type ButtonProps = ButtonBase & {
|
|
320
|
+
variant?: ButtonVariant;
|
|
321
|
+
};
|
|
322
|
+
declare const Button: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "style" | "color"> & WithCssProp$5 & {
|
|
323
|
+
size?: ButtonSize;
|
|
324
|
+
startIcon?: ReactNode;
|
|
325
|
+
endIcon?: ReactNode;
|
|
326
|
+
rounded?: boolean;
|
|
327
|
+
fullWidth?: boolean;
|
|
328
|
+
loading?: boolean;
|
|
329
|
+
loadingIndicator?: ReactNode;
|
|
330
|
+
loadingPosition?: LoadingPosition;
|
|
331
|
+
className?: string;
|
|
332
|
+
hoverEffect?: boolean;
|
|
333
|
+
children?: ReactNode;
|
|
334
|
+
} & {
|
|
335
|
+
variant?: ButtonVariant;
|
|
336
|
+
} & React.RefAttributes<HTMLButtonElement>>>;
|
|
337
|
+
|
|
338
|
+
/** @jsxImportSource @emotion/react */
|
|
339
|
+
|
|
340
|
+
type Direction$5 = "horizontal" | "vertical";
|
|
341
|
+
type Size$2 = "sm" | "md" | "lg";
|
|
342
|
+
type WithCssProp$4 = {
|
|
343
|
+
css?: Interpolation<Theme>;
|
|
344
|
+
};
|
|
345
|
+
type ButtonGroupProps = WithCssProp$4 & Omit<React.HTMLAttributes<HTMLDivElement>, "style"> & {
|
|
346
|
+
children: React.ReactNode;
|
|
347
|
+
attached?: boolean;
|
|
348
|
+
direction?: Direction$5;
|
|
349
|
+
fullWidth?: boolean;
|
|
350
|
+
disabled?: boolean;
|
|
351
|
+
size?: Size$2;
|
|
352
|
+
rounded?: boolean;
|
|
353
|
+
gap?: string | number;
|
|
354
|
+
width?: string | number;
|
|
355
|
+
className?: string;
|
|
356
|
+
role?: React.AriaRole;
|
|
357
|
+
};
|
|
358
|
+
type PrivateEdgeFlags = {
|
|
359
|
+
__clipLeft?: boolean;
|
|
360
|
+
__clipRight?: boolean;
|
|
361
|
+
};
|
|
362
|
+
declare const ButtonGroup: React.MemoExoticComponent<React.ForwardRefExoticComponent<(ButtonGroupProps & PrivateEdgeFlags & React.RefAttributes<HTMLDivElement>)>>;
|
|
363
|
+
|
|
364
|
+
/** @jsxImportSource @emotion/react */
|
|
365
|
+
|
|
366
|
+
type SpaceToken = "xs" | "sm" | "md" | "lg" | "xl";
|
|
367
|
+
type RadiusToken$2 = "xs" | "sm" | "md" | "lg" | "xl" | "full";
|
|
368
|
+
type ContainerVariant = "panel" | "subtle" | "outlined" | "ghost";
|
|
369
|
+
type ContainerProps = Omit<React.HTMLAttributes<HTMLDivElement>, "style" | "color"> & {
|
|
370
|
+
children?: React.ReactNode;
|
|
371
|
+
css?: Interpolation<Theme>;
|
|
372
|
+
variant?: ContainerVariant;
|
|
373
|
+
padding?: number | string | SpaceToken;
|
|
374
|
+
radius?: number | string | RadiusToken$2;
|
|
375
|
+
hoverable?: boolean;
|
|
376
|
+
selectable?: boolean;
|
|
377
|
+
selected?: boolean;
|
|
378
|
+
defaultSelected?: boolean;
|
|
379
|
+
onSelectedChange?: (selected: boolean) => void;
|
|
380
|
+
width?: number | string;
|
|
381
|
+
height?: number | string;
|
|
382
|
+
className?: string;
|
|
383
|
+
};
|
|
384
|
+
declare const Container: React.ForwardRefExoticComponent<ContainerProps & React.RefAttributes<HTMLDivElement>>;
|
|
385
|
+
|
|
386
|
+
/** @jsxImportSource @emotion/react */
|
|
387
|
+
|
|
388
|
+
type WithCssProp$3 = {
|
|
389
|
+
css?: Interpolation<Theme>;
|
|
390
|
+
};
|
|
391
|
+
type CardDirection = "horizontal" | "vertical";
|
|
392
|
+
type CardProps = WithCssProp$3 & Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "className"> & {
|
|
393
|
+
variant?: ContainerProps["variant"];
|
|
394
|
+
padding?: ContainerProps["padding"];
|
|
395
|
+
radius?: ContainerProps["radius"];
|
|
396
|
+
hoverable?: ContainerProps["hoverable"];
|
|
397
|
+
selectable?: ContainerProps["selectable"];
|
|
398
|
+
selected?: ContainerProps["selected"];
|
|
399
|
+
defaultSelected?: ContainerProps["defaultSelected"];
|
|
400
|
+
onSelectedChange?: (selected: boolean) => void;
|
|
401
|
+
width?: ContainerProps["width"];
|
|
402
|
+
height?: ContainerProps["height"];
|
|
403
|
+
gap?: string | number | ContainerProps["padding"];
|
|
404
|
+
direction?: CardDirection;
|
|
405
|
+
className?: string;
|
|
406
|
+
};
|
|
407
|
+
declare const Card: React.ForwardRefExoticComponent<React.PropsWithoutRef<CardProps> & React.RefAttributes<HTMLDivElement>>;
|
|
408
|
+
|
|
409
|
+
/** @jsxImportSource @emotion/react */
|
|
410
|
+
|
|
411
|
+
type Variant$9 = "subtle" | "outlined" | "ghost";
|
|
412
|
+
type CardGroupProps = {
|
|
413
|
+
children: React.ReactNode;
|
|
414
|
+
attached?: boolean;
|
|
415
|
+
gap?: string | number;
|
|
416
|
+
width?: string | number;
|
|
417
|
+
direction?: "vertical" | "horizontal";
|
|
418
|
+
variant?: Variant$9;
|
|
419
|
+
className?: string;
|
|
420
|
+
role?: React.AriaRole;
|
|
421
|
+
css?: Interpolation<Theme>;
|
|
422
|
+
};
|
|
423
|
+
declare const CardGroup: React.FC<CardGroupProps>;
|
|
424
|
+
|
|
425
|
+
/** @jsxImportSource @emotion/react */
|
|
426
|
+
|
|
427
|
+
type WithCssProp$2 = {
|
|
428
|
+
css?: Interpolation<Theme>;
|
|
429
|
+
};
|
|
430
|
+
type CheckboxSize = "sm" | "md" | "lg";
|
|
431
|
+
declare const Checkbox: React.ForwardRefExoticComponent<WithCssProp$2 & {
|
|
432
|
+
checked?: boolean;
|
|
433
|
+
defaultChecked?: boolean;
|
|
434
|
+
onChange?: (checked: boolean) => void;
|
|
435
|
+
disabled?: boolean;
|
|
436
|
+
size?: CheckboxSize;
|
|
437
|
+
label?: React.ReactNode;
|
|
438
|
+
description?: React.ReactNode;
|
|
439
|
+
rounded?: boolean;
|
|
440
|
+
checkedIcon?: React.ReactNode;
|
|
441
|
+
color?: "primary" | "secondary" | "neutral" | "danger" | "success" | "warning" | "info" | string;
|
|
442
|
+
boxCss?: Interpolation<Theme>;
|
|
443
|
+
checkCss?: Interpolation<Theme>;
|
|
444
|
+
labelCss?: Interpolation<Theme>;
|
|
445
|
+
descriptionCss?: Interpolation<Theme>;
|
|
446
|
+
className?: string;
|
|
447
|
+
} & React.RefAttributes<HTMLLabelElement>>;
|
|
448
|
+
|
|
449
|
+
/** @jsxImportSource @emotion/react */
|
|
450
|
+
|
|
451
|
+
type ChipVariant$1 = "soft" | "outlined" | "filled" | "ghost";
|
|
452
|
+
type ChipSize = "sm" | "md" | "lg";
|
|
453
|
+
type WithCssProp$1 = {
|
|
454
|
+
css?: Interpolation<Theme>;
|
|
455
|
+
};
|
|
456
|
+
type ChipProps = WithCssProp$1 & {
|
|
457
|
+
children?: React.ReactNode;
|
|
458
|
+
labelCss?: Interpolation<Theme>;
|
|
459
|
+
variant?: ChipVariant$1;
|
|
460
|
+
color?: string;
|
|
461
|
+
rounded?: boolean;
|
|
462
|
+
startIcon?: React.ReactNode;
|
|
463
|
+
endIcon?: React.ReactNode;
|
|
464
|
+
size?: ChipSize;
|
|
465
|
+
onClick?: () => void;
|
|
466
|
+
onDelete?: () => void;
|
|
467
|
+
deleteIcon?: React.ReactNode;
|
|
468
|
+
disabled?: boolean;
|
|
469
|
+
cursor?: React.CSSProperties["cursor"];
|
|
470
|
+
className?: string;
|
|
471
|
+
};
|
|
472
|
+
declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLDivElement>>;
|
|
473
|
+
|
|
474
|
+
/** @jsxImportSource @emotion/react */
|
|
475
|
+
|
|
476
|
+
type SizeKey$2 = "sm" | "md" | "lg";
|
|
477
|
+
type Variant$8 = "outlined" | "subtle" | "ghost";
|
|
478
|
+
type WithCss$3 = {
|
|
479
|
+
css?: Interpolation<Theme>;
|
|
480
|
+
};
|
|
481
|
+
type CodeFieldProps = WithCss$3 & {
|
|
482
|
+
label?: React.ReactNode;
|
|
483
|
+
value?: string;
|
|
484
|
+
defaultValue?: string;
|
|
485
|
+
onChange?: (value: string) => void;
|
|
486
|
+
placeholder?: string;
|
|
487
|
+
separator?: React.ReactNode;
|
|
488
|
+
error?: boolean;
|
|
489
|
+
helperText?: React.ReactNode;
|
|
490
|
+
disabled?: boolean;
|
|
491
|
+
gap?: number | string;
|
|
492
|
+
size?: SizeKey$2;
|
|
493
|
+
variant?: Variant$8;
|
|
494
|
+
length?: number;
|
|
495
|
+
focusRingMode?: "always" | "none";
|
|
496
|
+
wrapperCss?: Interpolation<Theme>;
|
|
497
|
+
labelCss?: Interpolation<Theme>;
|
|
498
|
+
helperRowCss?: Interpolation<Theme>;
|
|
499
|
+
helperTextCss?: Interpolation<Theme>;
|
|
500
|
+
className?: string;
|
|
501
|
+
};
|
|
502
|
+
declare const CodeField: React.FC<CodeFieldProps>;
|
|
503
|
+
|
|
504
|
+
/** @jsxImportSource @emotion/react */
|
|
505
|
+
|
|
506
|
+
type ColorPatchItem = {
|
|
507
|
+
color: string;
|
|
508
|
+
label?: string;
|
|
509
|
+
title?: string;
|
|
510
|
+
disabled?: boolean;
|
|
511
|
+
onClick?: () => void;
|
|
512
|
+
css?: Interpolation<Theme>;
|
|
513
|
+
};
|
|
514
|
+
type ColorPatchesProps = {
|
|
515
|
+
items: ColorPatchItem[];
|
|
516
|
+
size?: number | string;
|
|
517
|
+
gap?: number | string;
|
|
518
|
+
rounded?: boolean;
|
|
519
|
+
radius?: number | string;
|
|
520
|
+
wrap?: boolean;
|
|
521
|
+
width?: number | string;
|
|
522
|
+
focusOutline?: boolean;
|
|
523
|
+
wrapperCss?: Interpolation<Theme>;
|
|
524
|
+
patchCss?: Interpolation<Theme>;
|
|
525
|
+
};
|
|
526
|
+
declare const ColorPatches: React.FC<ColorPatchesProps>;
|
|
527
|
+
|
|
528
|
+
/** @jsxImportSource @emotion/react */
|
|
529
|
+
|
|
530
|
+
type TriggerMode$1 = "contextmenu" | "dblclick" | "click" | "hover";
|
|
531
|
+
type ContextZoneProps = {
|
|
532
|
+
children: React.ReactNode;
|
|
533
|
+
content?: React.ReactNode | ((api: {
|
|
534
|
+
close: () => void;
|
|
535
|
+
}) => React.ReactNode);
|
|
536
|
+
trigger?: TriggerMode$1;
|
|
537
|
+
onOpenChange?: (open: boolean) => void;
|
|
538
|
+
hoverOpenDelay?: number;
|
|
539
|
+
hoverCloseDelay?: number;
|
|
540
|
+
hoverPosition?: "cursor" | "center";
|
|
541
|
+
hoverOffset?: number;
|
|
542
|
+
};
|
|
543
|
+
declare const ContextZone: React.FC<ContextZoneProps>;
|
|
544
|
+
|
|
545
|
+
/** @jsxImportSource @emotion/react */
|
|
546
|
+
|
|
547
|
+
type DividerVariant = "full" | "inset" | "middle";
|
|
548
|
+
type LabelPos = "left" | "right" | "center" | "top" | "bottom";
|
|
549
|
+
type ChipVariant = "subtle" | "outlined";
|
|
550
|
+
type DividerProps = Omit<React.HTMLAttributes<HTMLDivElement>, "style"> & {
|
|
551
|
+
label?: React.ReactNode;
|
|
552
|
+
variant?: DividerVariant;
|
|
553
|
+
direction?: "vertical" | "horizontal";
|
|
554
|
+
labelPosition?: LabelPos;
|
|
555
|
+
thickness?: number | string;
|
|
556
|
+
width?: number | string;
|
|
557
|
+
middleMargin?: number | string;
|
|
558
|
+
insetMargin?: number | string;
|
|
559
|
+
chip?: boolean;
|
|
560
|
+
chipVariant?: ChipVariant;
|
|
561
|
+
rounded?: boolean;
|
|
562
|
+
margin?: number | string;
|
|
563
|
+
css?: Interpolation<Theme>;
|
|
564
|
+
labelCss?: Interpolation<Theme>;
|
|
565
|
+
strokeCss?: Interpolation<Theme>;
|
|
566
|
+
className?: string;
|
|
567
|
+
};
|
|
568
|
+
declare const Divider: React.ForwardRefExoticComponent<DividerProps & React.RefAttributes<HTMLDivElement>>;
|
|
569
|
+
|
|
570
|
+
/** @jsxImportSource @emotion/react */
|
|
571
|
+
|
|
572
|
+
type DrawerSide = "left" | "right" | "top" | "bottom";
|
|
573
|
+
type DrawerVariant = "inset" | "full";
|
|
574
|
+
type DomDragKeys = "onDrag" | "onDragStart" | "onDragEnd" | "onDragOver" | "onDragEnter" | "onDragLeave" | "onDrop";
|
|
575
|
+
type DomAnimKeys = "onAnimationStart" | "onAnimationEnd";
|
|
576
|
+
type DrawerProps = Omit<React.HTMLAttributes<HTMLDivElement>, DomDragKeys | DomAnimKeys | "style"> & {
|
|
577
|
+
on?: boolean;
|
|
578
|
+
defaultOn?: boolean;
|
|
579
|
+
onOpenChange?: (open: boolean) => void;
|
|
580
|
+
onClose?: () => void;
|
|
581
|
+
children: React.ReactNode;
|
|
582
|
+
width?: number | string;
|
|
583
|
+
height?: number | string;
|
|
584
|
+
position?: DrawerSide;
|
|
585
|
+
variant?: DrawerVariant;
|
|
586
|
+
margin?: number | string;
|
|
587
|
+
radius?: number | string;
|
|
588
|
+
backdropBlur?: boolean;
|
|
589
|
+
backdropBlurDepth?: number | string;
|
|
590
|
+
closeOnClickAway?: boolean;
|
|
591
|
+
lockScroll?: boolean;
|
|
592
|
+
transitionMs?: number;
|
|
593
|
+
snapClosePct?: number;
|
|
594
|
+
velocityClosePxS?: number;
|
|
595
|
+
dragElasticOut?: number;
|
|
596
|
+
css?: Interpolation<Theme>;
|
|
597
|
+
className?: string;
|
|
598
|
+
};
|
|
599
|
+
declare const Drawer: React.ForwardRefExoticComponent<DrawerProps & React.RefAttributes<HTMLDivElement>>;
|
|
600
|
+
|
|
601
|
+
/** @jsxImportSource @emotion/react */
|
|
602
|
+
|
|
603
|
+
type Side$1 = "top" | "bottom" | "left" | "right";
|
|
604
|
+
type Align$2 = "start" | "center" | "end";
|
|
605
|
+
type TriggerMode = "click" | "hover";
|
|
606
|
+
type VirtualRefLike = {
|
|
607
|
+
getBoundingClientRect: () => DOMRect | ClientRect;
|
|
608
|
+
contextElement?: Element;
|
|
609
|
+
};
|
|
610
|
+
type PointAnchor = {
|
|
611
|
+
x: number;
|
|
612
|
+
y: number;
|
|
613
|
+
};
|
|
614
|
+
type Anchor = HTMLElement | VirtualRefLike | PointAnchor;
|
|
615
|
+
type DropdownMenuRootProps = {
|
|
616
|
+
open?: boolean;
|
|
617
|
+
defaultOpen?: boolean;
|
|
618
|
+
onOpenChange?: (open: boolean) => void;
|
|
619
|
+
trigger?: TriggerMode;
|
|
620
|
+
lockScroll?: boolean;
|
|
621
|
+
size?: "sm" | "md";
|
|
622
|
+
children: React.ReactNode;
|
|
623
|
+
};
|
|
624
|
+
type DropdownMenuTriggerProps = Omit<React.HTMLAttributes<HTMLElement>, "style"> & {
|
|
625
|
+
asChild?: boolean;
|
|
626
|
+
children: React.ReactElement | React.ReactNode;
|
|
627
|
+
width?: string | number;
|
|
628
|
+
css?: Interpolation<Theme>;
|
|
629
|
+
};
|
|
630
|
+
type DropdownMenuContentProps = Omit<React.HTMLAttributes<HTMLDivElement>, "style"> & {
|
|
631
|
+
anchor?: Anchor;
|
|
632
|
+
side?: Side$1;
|
|
633
|
+
align?: Align$2;
|
|
634
|
+
sideOffset?: number | string;
|
|
635
|
+
alignOffset?: number | string;
|
|
636
|
+
collisionPadding?: number | string;
|
|
637
|
+
sameWidth?: boolean;
|
|
638
|
+
width?: number | string;
|
|
639
|
+
height?: number | string;
|
|
640
|
+
maxHeight?: number | string;
|
|
641
|
+
unstyled?: boolean;
|
|
642
|
+
closeOnBlur?: boolean;
|
|
643
|
+
allItemsTabbable?: boolean;
|
|
644
|
+
exitPlacement?: Side$1;
|
|
645
|
+
animateOnBusClose?: boolean;
|
|
646
|
+
gap?: "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | string | number;
|
|
647
|
+
css?: Interpolation<Theme>;
|
|
648
|
+
};
|
|
649
|
+
declare const useDropdownMenuActiveIndex: () => number | null;
|
|
650
|
+
declare const DropdownMenu: React.FC<DropdownMenuRootProps>;
|
|
651
|
+
declare const DropdownMenuTrigger: React.ForwardRefExoticComponent<React.PropsWithoutRef<DropdownMenuTriggerProps> & React.RefAttributes<HTMLElement>>;
|
|
652
|
+
declare const DropdownMenuContent: React.ForwardRefExoticComponent<React.PropsWithoutRef<DropdownMenuContentProps> & React.RefAttributes<HTMLDivElement>>;
|
|
653
|
+
declare const DropdownMenuSub: React.FC<{
|
|
654
|
+
open?: boolean;
|
|
655
|
+
defaultOpen?: boolean;
|
|
656
|
+
onOpenChange?: (o: boolean) => void;
|
|
657
|
+
trigger?: TriggerMode;
|
|
658
|
+
dense?: boolean;
|
|
659
|
+
children: React.ReactNode;
|
|
660
|
+
}>;
|
|
661
|
+
declare const DropdownMenuSubTrigger: React.ForwardRefExoticComponent<React.PropsWithoutRef<DropdownMenuTriggerProps> & React.RefAttributes<HTMLElement>>;
|
|
662
|
+
declare const DropdownMenuSubContent: React.ForwardRefExoticComponent<React.PropsWithoutRef<Omit<DropdownMenuContentProps, "anchor">> & React.RefAttributes<HTMLDivElement>>;
|
|
663
|
+
|
|
664
|
+
/** @jsxImportSource @emotion/react */
|
|
665
|
+
|
|
666
|
+
type FadeProps = {
|
|
667
|
+
children: ReactNode;
|
|
668
|
+
duration?: number;
|
|
669
|
+
delay?: number;
|
|
670
|
+
on: boolean;
|
|
671
|
+
onAnimationEnd?: () => void;
|
|
672
|
+
asChild?: boolean;
|
|
673
|
+
className?: string;
|
|
674
|
+
blur?: boolean;
|
|
675
|
+
};
|
|
676
|
+
declare const Fade: React.FC<FadeProps>;
|
|
677
|
+
|
|
678
|
+
/** @jsxImportSource @emotion/react */
|
|
679
|
+
|
|
680
|
+
type Dir = "vertical" | "horizontal" | "column" | "row";
|
|
681
|
+
type GapKey = "xxs" | "xs" | "sm" | "md" | "lg" | "xl";
|
|
682
|
+
type FlexProps = Omit<React.HTMLAttributes<HTMLDivElement>, "style"> & {
|
|
683
|
+
direction?: Dir;
|
|
684
|
+
gap?: GapKey | number | string;
|
|
685
|
+
justify?: React.CSSProperties["justifyContent"];
|
|
686
|
+
align?: React.CSSProperties["alignItems"];
|
|
687
|
+
css?: Interpolation<Theme>;
|
|
688
|
+
width?: string | number;
|
|
689
|
+
height?: string | number;
|
|
690
|
+
};
|
|
691
|
+
declare const Flex: React.ForwardRefExoticComponent<FlexProps & React.RefAttributes<HTMLDivElement>>;
|
|
692
|
+
|
|
693
|
+
/** @jsxImportSource @emotion/react */
|
|
694
|
+
|
|
695
|
+
type GrowProps = {
|
|
696
|
+
children: ReactNode;
|
|
697
|
+
duration?: number;
|
|
698
|
+
delay?: number;
|
|
699
|
+
on: boolean;
|
|
700
|
+
initialScale?: number;
|
|
701
|
+
finalScale?: number;
|
|
702
|
+
onAnimationEnd?: () => void;
|
|
703
|
+
asChild?: boolean;
|
|
704
|
+
className?: string;
|
|
705
|
+
};
|
|
706
|
+
declare const Grow: React.FC<GrowProps>;
|
|
707
|
+
|
|
708
|
+
/** @jsxImportSource @emotion/react */
|
|
709
|
+
|
|
710
|
+
type HoverEffect$1 = "scale" | "rotate" | "scale-rotate" | "none";
|
|
711
|
+
type RadiusToken$1 = "xs" | "sm" | "md" | "lg" | "xl" | "full";
|
|
712
|
+
type ImageProps = Omit<React.ImgHTMLAttributes<HTMLImageElement>, "style"> & {
|
|
713
|
+
radius?: number | string | RadiusToken$1;
|
|
714
|
+
shadow?: boolean;
|
|
715
|
+
hoverEffect?: HoverEffect$1;
|
|
716
|
+
label?: React.ReactNode;
|
|
717
|
+
labelAlign?: "left" | "center" | "right";
|
|
718
|
+
aspectRatio?: number | string;
|
|
719
|
+
placeholder?: "blur" | "color";
|
|
720
|
+
blurDataURL?: string;
|
|
721
|
+
placeholderColor?: string;
|
|
722
|
+
fallbackSrc?: string;
|
|
723
|
+
css?: Interpolation<Theme>;
|
|
724
|
+
className?: string;
|
|
725
|
+
};
|
|
726
|
+
declare const Image: React.ForwardRefExoticComponent<ImageProps & React.RefAttributes<HTMLImageElement>>;
|
|
727
|
+
|
|
728
|
+
/** @jsxImportSource @emotion/react */
|
|
729
|
+
|
|
730
|
+
type Variant$7 = "fan" | "slide" | "domino" | "ladder";
|
|
731
|
+
type HoverEffect = "reveal" | "expand" | "none";
|
|
732
|
+
type Size$1 = "sm" | "md" | "lg" | "xl";
|
|
733
|
+
type RadiusToken = "xs" | "sm" | "md" | "lg" | "xl" | "full";
|
|
734
|
+
type ImageStackProps = Omit<React.HTMLAttributes<HTMLDivElement>, "style"> & {
|
|
735
|
+
children: React.ReactNode;
|
|
736
|
+
variant?: Variant$7;
|
|
737
|
+
width?: number | string;
|
|
738
|
+
aspectRatio?: number | string;
|
|
739
|
+
size?: Size$1;
|
|
740
|
+
hoverEffect?: HoverEffect;
|
|
741
|
+
hovering?: boolean;
|
|
742
|
+
maxItems?: number;
|
|
743
|
+
shadow?: boolean;
|
|
744
|
+
cursor?: React.CSSProperties["cursor"];
|
|
745
|
+
outline?: boolean;
|
|
746
|
+
outlineColor?: string;
|
|
747
|
+
outlineWidth?: number;
|
|
748
|
+
outlineOffset?: number;
|
|
749
|
+
radius?: number | string | RadiusToken;
|
|
750
|
+
label?: React.ReactNode;
|
|
751
|
+
labelAlign?: "left" | "center" | "right";
|
|
752
|
+
css?: Interpolation<Theme>;
|
|
753
|
+
className?: string;
|
|
754
|
+
};
|
|
755
|
+
declare const ImageStack: React.FC<ImageStackProps>;
|
|
756
|
+
|
|
757
|
+
/** @jsxImportSource @emotion/react */
|
|
758
|
+
|
|
759
|
+
type KbdProps = Omit<React.HTMLAttributes<HTMLElement>, "style"> & {
|
|
760
|
+
variant?: "subtle" | "outlined" | "ghost";
|
|
761
|
+
size?: "sm" | "md" | "lg";
|
|
762
|
+
radius?: number | string;
|
|
763
|
+
mono?: boolean;
|
|
764
|
+
uppercase?: boolean;
|
|
765
|
+
css?: Interpolation<Theme>;
|
|
766
|
+
className?: string;
|
|
767
|
+
};
|
|
768
|
+
declare const Kbd: React.ForwardRefExoticComponent<React.PropsWithoutRef<KbdProps> & React.RefAttributes<HTMLElement>>;
|
|
769
|
+
|
|
770
|
+
/** @jsxImportSource @emotion/react */
|
|
771
|
+
|
|
772
|
+
type MenuVariant = "ghost" | "subtle" | "outlined";
|
|
773
|
+
declare const MenuVariantCtx: React.Context<MenuVariant>;
|
|
774
|
+
type MenuProps = Omit<React.HTMLAttributes<HTMLDivElement>, "style"> & {
|
|
775
|
+
variant?: MenuVariant;
|
|
776
|
+
size?: "sm" | "md";
|
|
777
|
+
width?: number | string;
|
|
778
|
+
maxHeight?: number | string;
|
|
779
|
+
unstyled?: boolean;
|
|
780
|
+
css?: Interpolation<Theme>;
|
|
781
|
+
gap?: "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | string | number;
|
|
782
|
+
label?: string;
|
|
783
|
+
};
|
|
784
|
+
declare const Menu: React.ForwardRefExoticComponent<React.PropsWithoutRef<MenuProps> & React.RefAttributes<HTMLDivElement>>;
|
|
785
|
+
declare const SubMenu: React.FC<{
|
|
786
|
+
open?: boolean;
|
|
787
|
+
defaultOpen?: boolean;
|
|
788
|
+
onOpenChange?: (v: boolean) => void;
|
|
789
|
+
children: ReactNode;
|
|
790
|
+
}>;
|
|
791
|
+
declare const SubMenuTrigger: React.FC<{
|
|
792
|
+
children: React.ReactElement;
|
|
793
|
+
chevron?: ReactNode;
|
|
794
|
+
asChild?: boolean;
|
|
795
|
+
}>;
|
|
796
|
+
declare const SubMenuContent: React.FC<{
|
|
797
|
+
children: React.ReactNode;
|
|
798
|
+
css?: Interpolation<Theme>;
|
|
799
|
+
}>;
|
|
800
|
+
|
|
801
|
+
/** @jsxImportSource @emotion/react */
|
|
802
|
+
|
|
803
|
+
type MenuItemProps = Omit<React.HTMLAttributes<HTMLDivElement>, "style"> & {
|
|
804
|
+
disabled?: boolean;
|
|
805
|
+
destructive?: boolean;
|
|
806
|
+
inset?: boolean | number;
|
|
807
|
+
closeOnSelect?: boolean;
|
|
808
|
+
onSelect?: () => void;
|
|
809
|
+
css?: Interpolation<Theme>;
|
|
810
|
+
startIcon?: React.ReactNode;
|
|
811
|
+
endIcon?: React.ReactNode;
|
|
812
|
+
selected?: boolean;
|
|
813
|
+
meta?: React.ReactNode;
|
|
814
|
+
};
|
|
815
|
+
type MenuCheckboxItemProps = Omit<MenuItemProps, "onSelect" | "startIcon" | "endIcon"> & {
|
|
816
|
+
checked?: boolean;
|
|
817
|
+
defaultChecked?: boolean;
|
|
818
|
+
onCheckedChange?: (next: boolean) => void;
|
|
819
|
+
value?: string | number;
|
|
820
|
+
};
|
|
821
|
+
type MenuRadioGroupProps = {
|
|
822
|
+
value?: string | number;
|
|
823
|
+
defaultValue?: string | number;
|
|
824
|
+
onValueChange?: (val: string | number) => void;
|
|
825
|
+
children?: React.ReactNode;
|
|
826
|
+
};
|
|
827
|
+
type MenuRadioItemProps = Omit<MenuItemProps, "onSelect" | "startIcon" | "endIcon"> & {
|
|
828
|
+
value: string | number;
|
|
829
|
+
};
|
|
830
|
+
type MenuLabelProps = Omit<React.HTMLAttributes<HTMLDivElement>, "style"> & {
|
|
831
|
+
inset?: boolean;
|
|
832
|
+
css?: Interpolation<Theme>;
|
|
833
|
+
startIcon?: React.ReactNode;
|
|
834
|
+
endIcon?: React.ReactNode;
|
|
835
|
+
wrap?: boolean;
|
|
836
|
+
};
|
|
837
|
+
type MenuSeparatorProps = Omit<React.HTMLAttributes<HTMLDivElement>, "style"> & {
|
|
838
|
+
css?: Interpolation<Theme>;
|
|
839
|
+
variant?: "full" | "middle" | "inset";
|
|
840
|
+
};
|
|
841
|
+
type ItemPrivate = {
|
|
842
|
+
__index?: number;
|
|
843
|
+
};
|
|
844
|
+
declare const MenuItem: React.ForwardRefExoticComponent<React.PropsWithoutRef<MenuItemProps & ItemPrivate> & React.RefAttributes<HTMLDivElement>>;
|
|
845
|
+
declare const MenuCheckboxGroup: React.FC<{
|
|
846
|
+
values?: Array<string | number>;
|
|
847
|
+
defaultValues?: Array<string | number>;
|
|
848
|
+
onValuesChange?: (v: Array<string | number>) => void;
|
|
849
|
+
children: React.ReactNode;
|
|
850
|
+
}>;
|
|
851
|
+
declare const MenuCheckboxItem: React.ForwardRefExoticComponent<React.PropsWithoutRef<MenuCheckboxItemProps & ItemPrivate> & React.RefAttributes<HTMLDivElement>>;
|
|
852
|
+
type MenuSwitchItemProps = Omit<MenuItemProps, "onSelect" | "startIcon" | "endIcon"> & {
|
|
853
|
+
checked?: boolean;
|
|
854
|
+
defaultChecked?: boolean;
|
|
855
|
+
onCheckedChange?: (next: boolean) => void;
|
|
856
|
+
switchSize?: "sm" | "md" | "lg";
|
|
857
|
+
switchCss?: Interpolation<Theme>;
|
|
858
|
+
startIcon?: React.ReactNode;
|
|
859
|
+
};
|
|
860
|
+
declare const MenuSwitchItem: React.ForwardRefExoticComponent<React.PropsWithoutRef<MenuSwitchItemProps & ItemPrivate> & React.RefAttributes<HTMLDivElement>>;
|
|
861
|
+
declare const MenuRadioGroup: React.FC<MenuRadioGroupProps>;
|
|
862
|
+
declare const MenuRadioItem: React.ForwardRefExoticComponent<React.PropsWithoutRef<MenuRadioItemProps & ItemPrivate> & React.RefAttributes<HTMLDivElement>>;
|
|
863
|
+
declare const MenuLabel: React.ForwardRefExoticComponent<React.PropsWithoutRef<MenuLabelProps> & React.RefAttributes<HTMLDivElement>>;
|
|
864
|
+
declare const MenuSeparator: React.FC<MenuSeparatorProps>;
|
|
865
|
+
|
|
866
|
+
/** @jsxImportSource @emotion/react */
|
|
867
|
+
|
|
868
|
+
type ModalProps = {
|
|
869
|
+
children: React.ReactNode;
|
|
870
|
+
open?: boolean;
|
|
871
|
+
defaultOpen?: boolean;
|
|
872
|
+
onOpenChange?: (open: boolean) => void;
|
|
873
|
+
lockScroll?: boolean;
|
|
874
|
+
closeOnEsc?: boolean;
|
|
875
|
+
};
|
|
876
|
+
declare const Modal: React.FC<ModalProps>;
|
|
877
|
+
type ModalTriggerProps = Omit<React.HTMLAttributes<HTMLElement>, "style"> & {
|
|
878
|
+
asChild?: boolean;
|
|
879
|
+
css?: Interpolation<Theme>;
|
|
880
|
+
};
|
|
881
|
+
declare const ModalTrigger: React.ForwardRefExoticComponent<ModalTriggerProps & React.RefAttributes<HTMLElement>>;
|
|
882
|
+
type ModalContentProps = Omit<React.HTMLAttributes<HTMLDivElement>, "style"> & {
|
|
883
|
+
variant?: "inset" | "full";
|
|
884
|
+
width?: number | string;
|
|
885
|
+
height?: number | string;
|
|
886
|
+
radius?: number | string;
|
|
887
|
+
padding?: number | string;
|
|
888
|
+
backdrop?: boolean;
|
|
889
|
+
backdropBlur?: boolean;
|
|
890
|
+
backdropBlurDepth?: number;
|
|
891
|
+
closeOnBackdropClick?: boolean;
|
|
892
|
+
transitionVariant?: "fade" | "slide" | "grow" | "none";
|
|
893
|
+
direction?: "up" | "down" | "left" | "right";
|
|
894
|
+
transitionDuration?: number;
|
|
895
|
+
containerCss?: Interpolation<Theme>;
|
|
896
|
+
backdropCss?: Interpolation<Theme>;
|
|
897
|
+
className?: string;
|
|
898
|
+
};
|
|
899
|
+
declare const ModalContent: React.ForwardRefExoticComponent<ModalContentProps & React.RefAttributes<HTMLDivElement>>;
|
|
900
|
+
|
|
901
|
+
/** @jsxImportSource @emotion/react */
|
|
902
|
+
|
|
903
|
+
type Size = "xs" | "sm" | "md";
|
|
904
|
+
type Variant$6 = "subtle" | "outlined" | "ghost";
|
|
905
|
+
type PaginationProps = {
|
|
906
|
+
count: number;
|
|
907
|
+
page?: number;
|
|
908
|
+
defaultPage?: number;
|
|
909
|
+
onChange?: (page: number) => void;
|
|
910
|
+
siblingCount?: number;
|
|
911
|
+
boundaryCount?: number;
|
|
912
|
+
disabled?: boolean;
|
|
913
|
+
showFirstLast?: boolean;
|
|
914
|
+
loop?: boolean;
|
|
915
|
+
size?: Size;
|
|
916
|
+
variant?: Variant$6;
|
|
917
|
+
gap?: number;
|
|
918
|
+
className?: string;
|
|
919
|
+
css?: Interpolation<Theme>;
|
|
920
|
+
};
|
|
921
|
+
declare const Pagination: React.FC<PaginationProps>;
|
|
922
|
+
|
|
923
|
+
/** @jsxImportSource @emotion/react */
|
|
924
|
+
|
|
925
|
+
type WithCss$2 = {
|
|
926
|
+
css?: Interpolation<Theme>;
|
|
927
|
+
};
|
|
928
|
+
type Side = "top" | "bottom" | "left" | "right";
|
|
929
|
+
type AnchorOrigin = {
|
|
930
|
+
vertical: "top" | "bottom" | "center";
|
|
931
|
+
horizontal: "left" | "right" | "center";
|
|
932
|
+
};
|
|
933
|
+
type PopoverRootProps = {
|
|
934
|
+
open?: boolean;
|
|
935
|
+
defaultOpen?: boolean;
|
|
936
|
+
onOpenChange?: (open: boolean) => void;
|
|
937
|
+
triggerOn?: "click" | "hover";
|
|
938
|
+
lockScroll?: boolean;
|
|
939
|
+
children: React.ReactNode;
|
|
940
|
+
};
|
|
941
|
+
type PopoverTriggerProps = WithCss$2 & {
|
|
942
|
+
asChild?: boolean;
|
|
943
|
+
children: React.ReactElement;
|
|
944
|
+
};
|
|
945
|
+
type PopoverAnchorProps = WithCss$2 & {
|
|
946
|
+
asChild?: boolean;
|
|
947
|
+
width?: number | string;
|
|
948
|
+
children: React.ReactElement;
|
|
949
|
+
};
|
|
950
|
+
type PopoverContentProps = WithCss$2 & Omit<React.HTMLAttributes<HTMLDivElement>, "style"> & {
|
|
951
|
+
anchorOrigin?: AnchorOrigin;
|
|
952
|
+
sideOffset?: number;
|
|
953
|
+
alignOffset?: number;
|
|
954
|
+
collisionPadding?: number | Partial<Record<Side, number>>;
|
|
955
|
+
unstyled?: boolean;
|
|
956
|
+
width?: string | number;
|
|
957
|
+
height?: string | number;
|
|
958
|
+
padding?: string | number;
|
|
959
|
+
paddingX?: string | number;
|
|
960
|
+
paddingY?: string | number;
|
|
961
|
+
radius?: string | number;
|
|
962
|
+
};
|
|
963
|
+
declare const Popover: React.FC<PopoverRootProps>;
|
|
964
|
+
declare const PopoverTrigger: React.FC<PopoverTriggerProps & React.RefAttributes<HTMLElement>>;
|
|
965
|
+
declare const PopoverAnchor: React.FC<PopoverAnchorProps & React.RefAttributes<HTMLElement>>;
|
|
966
|
+
declare const PopoverContent: React.FC<PopoverContentProps & React.RefAttributes<HTMLDivElement>>;
|
|
967
|
+
declare const usePopoverContext: () => {
|
|
968
|
+
open: boolean;
|
|
969
|
+
close: () => void;
|
|
970
|
+
setOpen: (v: boolean) => void;
|
|
971
|
+
};
|
|
972
|
+
|
|
973
|
+
/** @jsxImportSource @emotion/react */
|
|
974
|
+
|
|
975
|
+
type ProgressProps = {
|
|
976
|
+
variant?: "linear" | "circular";
|
|
977
|
+
value?: number;
|
|
978
|
+
min?: number;
|
|
979
|
+
max?: number;
|
|
980
|
+
color?: string;
|
|
981
|
+
size?: number | string;
|
|
982
|
+
thickness?: number;
|
|
983
|
+
spinDuration?: number;
|
|
984
|
+
wrapperCss?: Interpolation<Theme>;
|
|
985
|
+
trackCss?: Interpolation<Theme>;
|
|
986
|
+
barCss?: Interpolation<Theme>;
|
|
987
|
+
circleCss?: Interpolation<Theme>;
|
|
988
|
+
"aria-label"?: string;
|
|
989
|
+
};
|
|
990
|
+
declare const Progress: React.FC<ProgressProps>;
|
|
991
|
+
|
|
992
|
+
/** @jsxImportSource @emotion/react */
|
|
993
|
+
|
|
994
|
+
type QuoteVariant = "solid" | "dashed";
|
|
995
|
+
type Direction$4 = "left" | "right";
|
|
996
|
+
type QuoteProps = {
|
|
997
|
+
children?: React.ReactNode;
|
|
998
|
+
direction?: Direction$4;
|
|
999
|
+
width?: string | number;
|
|
1000
|
+
variant?: QuoteVariant;
|
|
1001
|
+
className?: string;
|
|
1002
|
+
css?: Interpolation<Theme>;
|
|
1003
|
+
as?: keyof JSX.IntrinsicElements;
|
|
1004
|
+
};
|
|
1005
|
+
declare const Quote: React.FC<QuoteProps>;
|
|
1006
|
+
|
|
1007
|
+
/** @jsxImportSource @emotion/react */
|
|
1008
|
+
|
|
1009
|
+
type Direction$3 = "horizontal" | "vertical";
|
|
1010
|
+
type Variant$5 = "filled" | "outlined" | "soft";
|
|
1011
|
+
type HV = "left" | "center" | "right" | "top" | "bottom";
|
|
1012
|
+
type RadioGroupProps = {
|
|
1013
|
+
value?: string | number;
|
|
1014
|
+
defaultValue?: string | number;
|
|
1015
|
+
onChange?: (value: string | number) => void;
|
|
1016
|
+
disabled?: boolean;
|
|
1017
|
+
size?: "sm" | "md" | "lg";
|
|
1018
|
+
direction?: Direction$3;
|
|
1019
|
+
variant?: Variant$5;
|
|
1020
|
+
className?: string;
|
|
1021
|
+
children: React.ReactNode;
|
|
1022
|
+
anchorOrigin?: {
|
|
1023
|
+
horizontal?: Extract<HV, "left" | "center" | "right">;
|
|
1024
|
+
vertical?: Extract<HV, "top" | "center" | "bottom">;
|
|
1025
|
+
};
|
|
1026
|
+
css?: Interpolation<Theme>;
|
|
1027
|
+
};
|
|
1028
|
+
type RadioItemProps = {
|
|
1029
|
+
value: string | number;
|
|
1030
|
+
disabled?: boolean;
|
|
1031
|
+
className?: string;
|
|
1032
|
+
children?: React.ReactNode;
|
|
1033
|
+
css?: Interpolation<Theme>;
|
|
1034
|
+
};
|
|
1035
|
+
declare const RadioGroup: React.FC<RadioGroupProps>;
|
|
1036
|
+
declare const RadioItem: React.FC<RadioItemProps>;
|
|
1037
|
+
|
|
1038
|
+
/** @jsxImportSource @emotion/react */
|
|
1039
|
+
|
|
1040
|
+
type RotateProps = {
|
|
1041
|
+
children: ReactNode;
|
|
1042
|
+
duration?: number;
|
|
1043
|
+
delay?: number;
|
|
1044
|
+
on: boolean;
|
|
1045
|
+
initialAngle?: number;
|
|
1046
|
+
finalAngle?: number;
|
|
1047
|
+
onAnimationEnd?: () => void;
|
|
1048
|
+
asChild?: boolean;
|
|
1049
|
+
className?: string;
|
|
1050
|
+
};
|
|
1051
|
+
declare const Rotate: React.FC<RotateProps>;
|
|
1052
|
+
|
|
1053
|
+
/** @jsxImportSource @emotion/react */
|
|
1054
|
+
|
|
1055
|
+
type Align$1 = "left" | "center" | "right";
|
|
1056
|
+
type Variant$4 = "subtle" | "outlined" | "ghost";
|
|
1057
|
+
type SelectProps<T = unknown> = {
|
|
1058
|
+
/** optional controlled value(s); if omitted, trigger text is derived from child selection props */
|
|
1059
|
+
value?: T | T[];
|
|
1060
|
+
defaultValue?: T | T[];
|
|
1061
|
+
onChange?: (value: T | T[]) => void;
|
|
1062
|
+
label?: string;
|
|
1063
|
+
placeholder?: string | React.ReactNode;
|
|
1064
|
+
startIcon?: React.ReactNode;
|
|
1065
|
+
endIcon?: React.ReactNode;
|
|
1066
|
+
disabled?: boolean;
|
|
1067
|
+
size?: "sm" | "md";
|
|
1068
|
+
variant?: Variant$4;
|
|
1069
|
+
fullWidth?: boolean;
|
|
1070
|
+
width?: number | string;
|
|
1071
|
+
menuAlign?: Align$1;
|
|
1072
|
+
menuWidth?: number | string;
|
|
1073
|
+
menuMaxHeight?: number | string;
|
|
1074
|
+
wrapperCss?: Interpolation<Theme>;
|
|
1075
|
+
labelCss?: Interpolation<Theme>;
|
|
1076
|
+
triggerCss?: Interpolation<Theme>;
|
|
1077
|
+
menuCss?: Interpolation<Theme>;
|
|
1078
|
+
/** you pass real MenuItem / MenuRadioItem / MenuCheckboxItem (and optional MenuRadioGroup) here */
|
|
1079
|
+
children: React.ReactNode;
|
|
1080
|
+
className?: string;
|
|
1081
|
+
menuSize?: "sm" | "md";
|
|
1082
|
+
/** custom trigger renderer (receives the resolved label text or array of labels) */
|
|
1083
|
+
triggerRender?: (selected: string | string[] | undefined) => React.ReactNode;
|
|
1084
|
+
};
|
|
1085
|
+
declare function Select<T = unknown>({ value, defaultValue, onChange, // not wired here; your Menu components should manage selection & call you
|
|
1086
|
+
label, placeholder, startIcon, endIcon, disabled, size, variant, fullWidth, width, menuAlign, menuWidth, menuMaxHeight, wrapperCss, labelCss, triggerCss, menuCss, children, className, menuSize, triggerRender, }: SelectProps<T>): JSX.Element;
|
|
1087
|
+
|
|
1088
|
+
/** @jsxImportSource @emotion/react */
|
|
1089
|
+
|
|
1090
|
+
type SkeletonProps = {
|
|
1091
|
+
isLoading?: boolean;
|
|
1092
|
+
radius?: number | string;
|
|
1093
|
+
animation?: "wave" | "pulse" | "none";
|
|
1094
|
+
as?: keyof JSX.IntrinsicElements;
|
|
1095
|
+
children?: React.ReactNode;
|
|
1096
|
+
width?: string | number;
|
|
1097
|
+
height?: string | number;
|
|
1098
|
+
style?: React.CSSProperties;
|
|
1099
|
+
className?: string;
|
|
1100
|
+
css?: Interpolation<Theme>;
|
|
1101
|
+
};
|
|
1102
|
+
declare const Skeleton: React.FC<SkeletonProps>;
|
|
1103
|
+
|
|
1104
|
+
/** @jsxImportSource @emotion/react */
|
|
1105
|
+
|
|
1106
|
+
type Direction$2 = "left" | "right" | "up" | "down";
|
|
1107
|
+
type SlideProps = {
|
|
1108
|
+
children: ReactNode;
|
|
1109
|
+
direction?: Direction$2;
|
|
1110
|
+
duration?: number;
|
|
1111
|
+
delay?: number;
|
|
1112
|
+
on: boolean;
|
|
1113
|
+
onAnimationEnd?: () => void;
|
|
1114
|
+
asChild?: boolean;
|
|
1115
|
+
className?: string;
|
|
1116
|
+
distance?: number | string;
|
|
1117
|
+
};
|
|
1118
|
+
declare const Slide: React.FC<SlideProps>;
|
|
1119
|
+
|
|
1120
|
+
/** @jsxImportSource @emotion/react */
|
|
1121
|
+
|
|
1122
|
+
type Direction$1 = "horizontal" | "vertical";
|
|
1123
|
+
type SliderProps = Omit<React.HTMLAttributes<HTMLDivElement>, "style"> & {
|
|
1124
|
+
value?: number;
|
|
1125
|
+
defaultValue?: number;
|
|
1126
|
+
onChange?: (value: number) => void;
|
|
1127
|
+
showStepper?: boolean;
|
|
1128
|
+
min?: number;
|
|
1129
|
+
max?: number;
|
|
1130
|
+
step?: number;
|
|
1131
|
+
disabled?: boolean;
|
|
1132
|
+
rounded?: boolean;
|
|
1133
|
+
showValue?: boolean;
|
|
1134
|
+
label?: string;
|
|
1135
|
+
fullWidth?: boolean;
|
|
1136
|
+
css?: Interpolation<Theme>;
|
|
1137
|
+
trackCss?: Interpolation<Theme>;
|
|
1138
|
+
thumbCss?: Interpolation<Theme>;
|
|
1139
|
+
direction?: Direction$1;
|
|
1140
|
+
className?: string;
|
|
1141
|
+
};
|
|
1142
|
+
declare const Slider: React.FC<SliderProps>;
|
|
1143
|
+
|
|
1144
|
+
/** @jsxImportSource @emotion/react */
|
|
1145
|
+
|
|
1146
|
+
type StepProps = {
|
|
1147
|
+
value: string | number | boolean;
|
|
1148
|
+
index?: number;
|
|
1149
|
+
label?: number | React.ReactNode;
|
|
1150
|
+
disabled?: boolean;
|
|
1151
|
+
complete?: boolean;
|
|
1152
|
+
icon?: React.ReactNode;
|
|
1153
|
+
completedIcon?: React.ReactNode;
|
|
1154
|
+
};
|
|
1155
|
+
type TitlePos = "top" | "right" | "bottom" | "left";
|
|
1156
|
+
type StepperProps = Omit<React.HTMLAttributes<HTMLDivElement>, "style"> & {
|
|
1157
|
+
variant?: "subtle" | "outlined" | "filled";
|
|
1158
|
+
value?: StepProps["value"];
|
|
1159
|
+
defaultValue?: StepProps["value"];
|
|
1160
|
+
onChange?: (value: StepProps["value"]) => void;
|
|
1161
|
+
disabled?: boolean;
|
|
1162
|
+
allowForward?: boolean | ((fromIndex: number, toIndex: number) => boolean);
|
|
1163
|
+
allComplete?: boolean;
|
|
1164
|
+
color?: string;
|
|
1165
|
+
activeBgColor?: string;
|
|
1166
|
+
activeColor?: string;
|
|
1167
|
+
completeBgColor?: string;
|
|
1168
|
+
completeColor?: string;
|
|
1169
|
+
separator?: React.ReactNode;
|
|
1170
|
+
titlePosition?: TitlePos;
|
|
1171
|
+
width?: number | string;
|
|
1172
|
+
css?: Interpolation<Theme>;
|
|
1173
|
+
className?: string;
|
|
1174
|
+
children?: React.ReactNode;
|
|
1175
|
+
};
|
|
1176
|
+
declare const Step: React.FC<StepProps>;
|
|
1177
|
+
declare const Stepper: React.FC<StepperProps>;
|
|
1178
|
+
|
|
1179
|
+
/** @jsxImportSource @emotion/react */
|
|
1180
|
+
|
|
1181
|
+
type WithCssProp = {
|
|
1182
|
+
css?: Interpolation<Theme>;
|
|
1183
|
+
};
|
|
1184
|
+
type SwitchProps = {
|
|
1185
|
+
checked?: boolean;
|
|
1186
|
+
defaultChecked?: boolean;
|
|
1187
|
+
onChange?: (checked: boolean) => void;
|
|
1188
|
+
disabled?: boolean;
|
|
1189
|
+
size?: "sm" | "md" | "lg";
|
|
1190
|
+
label?: React.ReactNode;
|
|
1191
|
+
className?: string;
|
|
1192
|
+
trackCss?: Interpolation<Theme>;
|
|
1193
|
+
thumbCss?: Interpolation<Theme>;
|
|
1194
|
+
labelCss?: Interpolation<Theme>;
|
|
1195
|
+
} & WithCssProp & Omit<React.HTMLAttributes<HTMLLabelElement>, "onChange" | "className">;
|
|
1196
|
+
declare const Switch: React.ForwardRefExoticComponent<React.PropsWithoutRef<SwitchProps> & React.RefAttributes<HTMLLabelElement>>;
|
|
1197
|
+
|
|
1198
|
+
/** @jsxImportSource @emotion/react */
|
|
1199
|
+
|
|
1200
|
+
type Variant$3 = "subtle" | "underlined" | "text" | "ghost";
|
|
1201
|
+
type Direction = "horizontal" | "vertical";
|
|
1202
|
+
type TabsProps = {
|
|
1203
|
+
children?: React.ReactNode;
|
|
1204
|
+
defaultValue?: string | number | boolean;
|
|
1205
|
+
value?: string | number | boolean;
|
|
1206
|
+
onChange?: (value: string | number | boolean) => void;
|
|
1207
|
+
variant?: Variant$3;
|
|
1208
|
+
direction?: Direction;
|
|
1209
|
+
className?: string;
|
|
1210
|
+
shadow?: boolean;
|
|
1211
|
+
width?: number | string;
|
|
1212
|
+
fullWidth?: boolean;
|
|
1213
|
+
rounded?: boolean;
|
|
1214
|
+
titlePosition?: "top" | "right" | "bottom" | "left";
|
|
1215
|
+
align?: "left" | "center" | "right";
|
|
1216
|
+
css?: Interpolation<Theme>;
|
|
1217
|
+
trackCss?: Interpolation<Theme>;
|
|
1218
|
+
thumbCss?: Interpolation<Theme>;
|
|
1219
|
+
activeTabCss?: Interpolation<Theme>;
|
|
1220
|
+
activeIndicatorCss?: Interpolation<Theme>;
|
|
1221
|
+
};
|
|
1222
|
+
type TabProps = {
|
|
1223
|
+
value: string | number | boolean;
|
|
1224
|
+
disabled?: boolean;
|
|
1225
|
+
className?: string;
|
|
1226
|
+
children?: React.ReactNode;
|
|
1227
|
+
activeCss?: Interpolation<Theme>;
|
|
1228
|
+
css?: Interpolation<Theme>;
|
|
1229
|
+
};
|
|
1230
|
+
type TabContentProps = {
|
|
1231
|
+
value: string | number | boolean;
|
|
1232
|
+
className?: string;
|
|
1233
|
+
children?: React.ReactNode;
|
|
1234
|
+
css?: Interpolation<Theme>;
|
|
1235
|
+
};
|
|
1236
|
+
declare const Tab: React.FC<TabProps>;
|
|
1237
|
+
declare const TabContent: React.FC<TabContentProps>;
|
|
1238
|
+
declare const Tabs: React.FC<TabsProps>;
|
|
1239
|
+
|
|
1240
|
+
/** @jsxImportSource @emotion/react */
|
|
1241
|
+
|
|
1242
|
+
type SizeKey$1 = "sm" | "md" | "lg";
|
|
1243
|
+
type Variant$2 = "outlined" | "subtle" | "ghost";
|
|
1244
|
+
type WithCss$1 = {
|
|
1245
|
+
css?: Interpolation<Theme>;
|
|
1246
|
+
};
|
|
1247
|
+
type TextAreaProps = WithCss$1 & {
|
|
1248
|
+
label?: React.ReactNode;
|
|
1249
|
+
value?: string;
|
|
1250
|
+
defaultValue?: string;
|
|
1251
|
+
onChange?: (value: string) => void;
|
|
1252
|
+
placeholder?: string;
|
|
1253
|
+
error?: boolean;
|
|
1254
|
+
helperText?: React.ReactNode;
|
|
1255
|
+
disabled?: boolean;
|
|
1256
|
+
fullWidth?: boolean;
|
|
1257
|
+
width?: number | string;
|
|
1258
|
+
size?: SizeKey$1;
|
|
1259
|
+
variant?: Variant$2;
|
|
1260
|
+
rounded?: boolean;
|
|
1261
|
+
rows?: number;
|
|
1262
|
+
maxRows?: number;
|
|
1263
|
+
maxLength?: number;
|
|
1264
|
+
showCharCount?: boolean;
|
|
1265
|
+
focusRingMode?: "always" | "none";
|
|
1266
|
+
resizable?: boolean;
|
|
1267
|
+
wrapperCss?: Interpolation<Theme>;
|
|
1268
|
+
inputCss?: Interpolation<Theme>;
|
|
1269
|
+
labelCss?: Interpolation<Theme>;
|
|
1270
|
+
helperRowCss?: Interpolation<Theme>;
|
|
1271
|
+
helperTextCss?: Interpolation<Theme>;
|
|
1272
|
+
charCountCss?: Interpolation<Theme>;
|
|
1273
|
+
className?: string;
|
|
1274
|
+
onBlur?: React.FocusEventHandler<HTMLTextAreaElement>;
|
|
1275
|
+
onFocus?: React.FocusEventHandler<HTMLTextAreaElement>;
|
|
1276
|
+
onKeyDown?: React.KeyboardEventHandler<HTMLTextAreaElement>;
|
|
1277
|
+
autoFocus?: boolean;
|
|
1278
|
+
name?: string;
|
|
1279
|
+
id?: string;
|
|
1280
|
+
tabIndex?: number;
|
|
1281
|
+
autoComplete?: string;
|
|
1282
|
+
readOnly?: boolean;
|
|
1283
|
+
required?: boolean;
|
|
1284
|
+
};
|
|
1285
|
+
declare const TextArea: React.FC<TextAreaProps>;
|
|
1286
|
+
|
|
1287
|
+
/** @jsxImportSource @emotion/react */
|
|
1288
|
+
|
|
1289
|
+
type SizeKey = "sm" | "md" | "lg";
|
|
1290
|
+
type Variant$1 = "outlined" | "subtle" | "ghost";
|
|
1291
|
+
type WithCss = {
|
|
1292
|
+
css?: Interpolation<Theme>;
|
|
1293
|
+
};
|
|
1294
|
+
type TextFieldProps = WithCss & {
|
|
1295
|
+
label?: React.ReactNode;
|
|
1296
|
+
value?: string;
|
|
1297
|
+
defaultValue?: string;
|
|
1298
|
+
onChange?: (value: string) => void;
|
|
1299
|
+
placeholder?: string;
|
|
1300
|
+
error?: boolean;
|
|
1301
|
+
helperText?: React.ReactNode;
|
|
1302
|
+
disabled?: boolean;
|
|
1303
|
+
fullWidth?: boolean;
|
|
1304
|
+
width?: number | string;
|
|
1305
|
+
size?: SizeKey;
|
|
1306
|
+
variant?: Variant$1;
|
|
1307
|
+
rounded?: boolean;
|
|
1308
|
+
startIcon?: React.ReactNode;
|
|
1309
|
+
endIcon?: React.ReactNode;
|
|
1310
|
+
togglePasswordVisible?: boolean;
|
|
1311
|
+
showClear?: boolean;
|
|
1312
|
+
type?: "text" | "password" | "number" | (string & {});
|
|
1313
|
+
step?: number;
|
|
1314
|
+
focusRingMode?: "always" | "none";
|
|
1315
|
+
wrapperCss?: Interpolation<Theme>;
|
|
1316
|
+
inputCss?: Interpolation<Theme>;
|
|
1317
|
+
labelCss?: Interpolation<Theme>;
|
|
1318
|
+
helperRowCss?: Interpolation<Theme>;
|
|
1319
|
+
helperTextCss?: Interpolation<Theme>;
|
|
1320
|
+
startIconCss?: Interpolation<Theme>;
|
|
1321
|
+
endIconCss?: Interpolation<Theme>;
|
|
1322
|
+
className?: string;
|
|
1323
|
+
onBlur?: React.FocusEventHandler<HTMLInputElement>;
|
|
1324
|
+
onFocus?: React.FocusEventHandler<HTMLInputElement>;
|
|
1325
|
+
onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
|
|
1326
|
+
autoFocus?: boolean;
|
|
1327
|
+
name?: string;
|
|
1328
|
+
id?: string;
|
|
1329
|
+
tabIndex?: number;
|
|
1330
|
+
autoComplete?: string;
|
|
1331
|
+
readOnly?: boolean;
|
|
1332
|
+
required?: boolean;
|
|
1333
|
+
maxLength?: number;
|
|
1334
|
+
};
|
|
1335
|
+
declare const TextField: React.ForwardRefExoticComponent<TextFieldProps & React.RefAttributes<HTMLInputElement>>;
|
|
1336
|
+
|
|
1337
|
+
/** @jsxImportSource @emotion/react */
|
|
1338
|
+
|
|
1339
|
+
type CoreStatus = "default" | "success" | "error" | "warning" | "info";
|
|
1340
|
+
type Status = CoreStatus | "danger";
|
|
1341
|
+
type Position = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
|
|
1342
|
+
type ShowDismissMode = "hover" | "always" | "never";
|
|
1343
|
+
type ToastRendererCtx = {
|
|
1344
|
+
toast: ToastItem;
|
|
1345
|
+
close: (id?: string) => void;
|
|
1346
|
+
pause: (id: string) => void;
|
|
1347
|
+
resume: (id: string) => void;
|
|
1348
|
+
};
|
|
1349
|
+
type ToastRenderer = (ctx: ToastRendererCtx) => React.ReactNode;
|
|
1350
|
+
type ToastItem = {
|
|
1351
|
+
id: string;
|
|
1352
|
+
status: Status;
|
|
1353
|
+
content?: React.ReactNode;
|
|
1354
|
+
title?: React.ReactNode;
|
|
1355
|
+
description?: React.ReactNode;
|
|
1356
|
+
render?: React.ReactNode | ToastRenderer;
|
|
1357
|
+
bare?: boolean;
|
|
1358
|
+
startIcon?: React.ReactNode;
|
|
1359
|
+
endIcon?: React.ReactNode;
|
|
1360
|
+
action?: React.ReactNode;
|
|
1361
|
+
duration: number | null;
|
|
1362
|
+
createdAt: number;
|
|
1363
|
+
onClose?: () => void;
|
|
1364
|
+
pauseOnHover?: boolean;
|
|
1365
|
+
showDismiss?: boolean | ShowDismissMode;
|
|
1366
|
+
onClick?: (id: string, e: React.MouseEvent | MouseEvent) => void;
|
|
1367
|
+
width?: number | string;
|
|
1368
|
+
};
|
|
1369
|
+
type Options = Partial<Pick<ToastItem, "status" | "content" | "title" | "description" | "render" | "bare" | "startIcon" | "endIcon" | "action" | "onClose" | "pauseOnHover" | "showDismiss" | "onClick" | "width" | "duration" | "createdAt" | "id">> & {
|
|
1370
|
+
id?: string;
|
|
1371
|
+
duration?: number | null;
|
|
1372
|
+
};
|
|
1373
|
+
type Styles = {
|
|
1374
|
+
stack?: CSSObject;
|
|
1375
|
+
item?: CSSObject;
|
|
1376
|
+
surface?: CSSObject | ((t: ToastItem) => CSSObject);
|
|
1377
|
+
close?: CSSObject;
|
|
1378
|
+
};
|
|
1379
|
+
declare const toast: {
|
|
1380
|
+
(contentOrOptions: React.ReactNode | Options, opts?: Options): string;
|
|
1381
|
+
success: (msg: React.ReactNode, o?: Options) => string;
|
|
1382
|
+
error: (msg: React.ReactNode, o?: Options) => string;
|
|
1383
|
+
warning: (msg: React.ReactNode, o?: Options) => string;
|
|
1384
|
+
info: (msg: React.ReactNode, o?: Options) => string;
|
|
1385
|
+
custom: (node: React.ReactNode, o?: Options) => string;
|
|
1386
|
+
update: (id: string, o: Options) => string;
|
|
1387
|
+
dismiss: (id?: string) => void;
|
|
1388
|
+
clear: () => void;
|
|
1389
|
+
pause: (id: string) => void;
|
|
1390
|
+
resume: (id: string) => void;
|
|
1391
|
+
pauseLatest: () => void;
|
|
1392
|
+
resumeLatest: () => void;
|
|
1393
|
+
promise: <T>(p: Promise<T>, msgs: {
|
|
1394
|
+
loading: React.ReactNode;
|
|
1395
|
+
success: (val: T) => React.ReactNode;
|
|
1396
|
+
error: (err: any) => React.ReactNode;
|
|
1397
|
+
}, o?: Options) => Promise<T>;
|
|
1398
|
+
config: (opts: Partial<{
|
|
1399
|
+
max: number;
|
|
1400
|
+
position: Position;
|
|
1401
|
+
gutter: number;
|
|
1402
|
+
zIndex: number;
|
|
1403
|
+
duration: number | null;
|
|
1404
|
+
showDismiss: ShowDismissMode;
|
|
1405
|
+
styles: Styles;
|
|
1406
|
+
renderer: React.ReactNode | ToastRenderer;
|
|
1407
|
+
bareRenderer: boolean;
|
|
1408
|
+
}>) => void;
|
|
1409
|
+
};
|
|
1410
|
+
|
|
1411
|
+
/** @jsxImportSource @emotion/react */
|
|
1412
|
+
|
|
1413
|
+
type TooltipProps = {
|
|
1414
|
+
children: React.ReactNode;
|
|
1415
|
+
placement?: Placement;
|
|
1416
|
+
open?: boolean;
|
|
1417
|
+
defaultOpen?: boolean;
|
|
1418
|
+
onOpenChange?: (o: boolean) => void;
|
|
1419
|
+
delay?: number;
|
|
1420
|
+
arrow?: boolean;
|
|
1421
|
+
autoWidth?: boolean;
|
|
1422
|
+
disableHoverListener?: boolean;
|
|
1423
|
+
};
|
|
1424
|
+
declare const Tooltip: React.FC<TooltipProps>;
|
|
1425
|
+
type TooltipTriggerProps = {
|
|
1426
|
+
asChild?: boolean;
|
|
1427
|
+
children: React.ReactNode;
|
|
1428
|
+
className?: string;
|
|
1429
|
+
css?: Interpolation<Theme>;
|
|
1430
|
+
};
|
|
1431
|
+
declare const TooltipTrigger: React.FC<TooltipTriggerProps>;
|
|
1432
|
+
type TooltipContentProps = {
|
|
1433
|
+
children: React.ReactNode;
|
|
1434
|
+
className?: string;
|
|
1435
|
+
css?: Interpolation<Theme>;
|
|
1436
|
+
arrowCss?: Interpolation<Theme>;
|
|
1437
|
+
};
|
|
1438
|
+
declare const TooltipContent: React.FC<TooltipContentProps>;
|
|
1439
|
+
|
|
1440
|
+
/** @jsxImportSource @emotion/react */
|
|
1441
|
+
|
|
1442
|
+
declare const MAP: {
|
|
1443
|
+
readonly h1: {
|
|
1444
|
+
readonly size: "2.25rem";
|
|
1445
|
+
readonly weight: 700;
|
|
1446
|
+
readonly lh: 1.1;
|
|
1447
|
+
readonly ls: "-0.02em";
|
|
1448
|
+
};
|
|
1449
|
+
readonly h2: {
|
|
1450
|
+
readonly size: "1.875rem";
|
|
1451
|
+
readonly weight: 700;
|
|
1452
|
+
readonly lh: 1.15;
|
|
1453
|
+
readonly ls: "-0.01em";
|
|
1454
|
+
};
|
|
1455
|
+
readonly h3: {
|
|
1456
|
+
readonly size: "1.5rem";
|
|
1457
|
+
readonly weight: 600;
|
|
1458
|
+
readonly lh: 1.2;
|
|
1459
|
+
readonly ls: "-0.005em";
|
|
1460
|
+
};
|
|
1461
|
+
readonly h4: {
|
|
1462
|
+
readonly size: "1.25rem";
|
|
1463
|
+
readonly weight: 600;
|
|
1464
|
+
readonly lh: 1.2;
|
|
1465
|
+
readonly ls: "0";
|
|
1466
|
+
};
|
|
1467
|
+
readonly body: {
|
|
1468
|
+
readonly size: "0.95rem";
|
|
1469
|
+
readonly weight: 500;
|
|
1470
|
+
readonly lh: 1.2;
|
|
1471
|
+
readonly ls: "0";
|
|
1472
|
+
};
|
|
1473
|
+
readonly caption: {
|
|
1474
|
+
readonly size: "0.8rem";
|
|
1475
|
+
readonly weight: 500;
|
|
1476
|
+
readonly lh: 1.2;
|
|
1477
|
+
readonly ls: "0.01em";
|
|
1478
|
+
};
|
|
1479
|
+
};
|
|
1480
|
+
type Variant = keyof typeof MAP;
|
|
1481
|
+
type Align = "left" | "center" | "right";
|
|
1482
|
+
type Decoration = "none" | "underline" | "overline" | "line-through";
|
|
1483
|
+
type DecorationStyle = "solid" | "dashed" | "dotted";
|
|
1484
|
+
type TypographyProps = {
|
|
1485
|
+
variant?: Variant;
|
|
1486
|
+
children: React.ReactNode;
|
|
1487
|
+
color?: string | "primary" | "secondary";
|
|
1488
|
+
size?: number | string;
|
|
1489
|
+
weight?: number | string;
|
|
1490
|
+
lineHeight?: number | string;
|
|
1491
|
+
letterSpacing?: number | string;
|
|
1492
|
+
align?: Align;
|
|
1493
|
+
textTransform?: "none" | "capitalize" | "uppercase" | "lowercase";
|
|
1494
|
+
whiteSpace?: "normal" | "nowrap" | "pre" | "pre-wrap";
|
|
1495
|
+
decoration?: Decoration;
|
|
1496
|
+
decorationStyle?: DecorationStyle;
|
|
1497
|
+
decorationThickness?: number | string;
|
|
1498
|
+
decorationColor?: string;
|
|
1499
|
+
italic?: boolean;
|
|
1500
|
+
className?: string;
|
|
1501
|
+
style?: React.CSSProperties;
|
|
1502
|
+
as?: keyof JSX.IntrinsicElements;
|
|
1503
|
+
};
|
|
1504
|
+
declare const Typography: React.FC<TypographyProps>;
|
|
1505
|
+
|
|
1506
|
+
/** @jsxImportSource @emotion/react */
|
|
1507
|
+
type Scale = {
|
|
1508
|
+
0: string;
|
|
1509
|
+
50: string;
|
|
1510
|
+
100: string;
|
|
1511
|
+
200: string;
|
|
1512
|
+
300: string;
|
|
1513
|
+
400: string;
|
|
1514
|
+
500: string;
|
|
1515
|
+
600: string;
|
|
1516
|
+
700: string;
|
|
1517
|
+
800: string;
|
|
1518
|
+
900: string;
|
|
1519
|
+
};
|
|
1520
|
+
type PlainframeUITheme = {
|
|
1521
|
+
spacing: Record<"xxs" | "xs" | "sm" | "md" | "lg" | "xl", string | number> & Record<string, string | number>;
|
|
1522
|
+
radius: Record<"xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "full", string | number> & Record<string, string | number>;
|
|
1523
|
+
fontSizes: Record<"xs" | "sm" | "md" | "lg" | "xl" | "xxl", string | number> & Record<string, string | number>;
|
|
1524
|
+
componentHeights: Record<"sm" | "md" | "lg" | "border", string | number> & Record<string, string | number>;
|
|
1525
|
+
fonts: {
|
|
1526
|
+
sans: string;
|
|
1527
|
+
mono: string;
|
|
1528
|
+
};
|
|
1529
|
+
palette: Record<string, Scale>;
|
|
1530
|
+
neutral: Scale;
|
|
1531
|
+
surface: {
|
|
1532
|
+
appBg: string;
|
|
1533
|
+
panelBg: string;
|
|
1534
|
+
subtleBg: string;
|
|
1535
|
+
panelHover: string;
|
|
1536
|
+
subtleHover: string;
|
|
1537
|
+
overlayBg: string;
|
|
1538
|
+
border: string;
|
|
1539
|
+
};
|
|
1540
|
+
text: {
|
|
1541
|
+
primary: string;
|
|
1542
|
+
secondary: string;
|
|
1543
|
+
muted: string;
|
|
1544
|
+
onColors: Record<string, string>;
|
|
1545
|
+
};
|
|
1546
|
+
};
|
|
1547
|
+
type Mode = "light" | "dark";
|
|
1548
|
+
declare const surfaceFromNeutral: (mode: Mode, n: Scale) => PlainframeUITheme["surface"];
|
|
1549
|
+
declare const textLight: (n: Scale) => PlainframeUITheme["text"];
|
|
1550
|
+
declare const textDark: (n: Scale) => PlainframeUITheme["text"];
|
|
1551
|
+
declare const defaultLightTheme: PlainframeUITheme;
|
|
1552
|
+
declare const defaultDarkTheme: PlainframeUITheme;
|
|
1553
|
+
declare module "@emotion/react" {
|
|
1554
|
+
interface Theme extends PlainframeUITheme {
|
|
1555
|
+
}
|
|
1556
|
+
}
|
|
1557
|
+
|
|
1558
|
+
/** @jsxImportSource @emotion/react */
|
|
1559
|
+
|
|
1560
|
+
type ThemeProp = Partial<PlainframeUITheme> & {
|
|
1561
|
+
primaryKey?: string;
|
|
1562
|
+
light?: Partial<PlainframeUITheme> & {
|
|
1563
|
+
primaryKey?: string;
|
|
1564
|
+
};
|
|
1565
|
+
dark?: Partial<PlainframeUITheme> & {
|
|
1566
|
+
primaryKey?: string;
|
|
1567
|
+
};
|
|
1568
|
+
};
|
|
1569
|
+
type ThemeProviderProps = {
|
|
1570
|
+
theme?: ThemeProp;
|
|
1571
|
+
initialMode?: Mode | "system";
|
|
1572
|
+
storageKey?: string;
|
|
1573
|
+
scope?: string;
|
|
1574
|
+
children: React.ReactNode;
|
|
1575
|
+
};
|
|
1576
|
+
declare function usePlainframeUITheme(): PlainframeUITheme;
|
|
1577
|
+
declare function useColorModeValue(): Mode;
|
|
1578
|
+
declare function useColorMode(): {
|
|
1579
|
+
setMode: (m: Mode) => void;
|
|
1580
|
+
toggleMode: () => void;
|
|
1581
|
+
};
|
|
1582
|
+
declare function usePrimary(): {
|
|
1583
|
+
primary: string;
|
|
1584
|
+
setPrimary: (k: string) => void;
|
|
1585
|
+
};
|
|
1586
|
+
declare function usePrimitives<T = PlainframeUITheme>(selector?: (t: PlainframeUITheme) => T): T;
|
|
1587
|
+
declare const ThemeProvider: React.FC<ThemeProviderProps>;
|
|
1588
|
+
|
|
1589
|
+
declare function CssBaseline(): _emotion_react_jsx_runtime.JSX.Element;
|
|
1590
|
+
|
|
1591
|
+
export { Accordion, AccordionDetails, AccordionGroup, AccordionSummary, ActionBar, Alert, AlertDescription, AlertTitle, Autocomplete, Avatar, AvatarGroup, Backdrop, Badge, BreadCrumbItem, BreadCrumbs, Button, ButtonGroup, type ButtonProps, Card, CardGroup, Checkbox, Chip, CodeField, ColorPatches, Container, ContextZone, CssBaseline, Divider, Drawer, DropdownMenu, DropdownMenuContent, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Fade, Flex, Grow, Image, type ImageProps, ImageStack, Kbd, Menu, MenuCheckboxGroup, MenuCheckboxItem, MenuItem, MenuLabel, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSwitchItem, MenuVariantCtx, Modal, ModalContent, type ModalProps, ModalTrigger, type Mode, Pagination, type PlainframeUITheme, Popover, PopoverAnchor, type PopoverAnchorProps, PopoverContent, type PopoverContentProps, type PopoverRootProps, PopoverTrigger, type PopoverTriggerProps, Progress, Quote, RadioGroup, type RadioGroupProps, RadioItem, type RadioItemProps, Rotate, type Scale, Select, Skeleton, Slide, Slider, Step, Stepper, SubMenu, SubMenuContent, SubMenuTrigger, Switch, Tab, TabContent, Tabs, TextArea, TextField, type TextFieldProps, type ThemeProp, ThemeProvider, type ThemeProviderProps, Tooltip, TooltipContent, TooltipTrigger, Typography, defaultDarkTheme, defaultLightTheme, surfaceFromNeutral, textDark, textLight, toast, useColorMode, useColorModeValue, useDropdownMenuActiveIndex, usePlainframeUITheme, usePopoverContext, usePrimary, usePrimitives };
|