@sanity/ui 4.0.0-static.2 → 4.0.0-static.21

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.
Files changed (74) hide show
  1. package/dist/css/index.css +2 -1
  2. package/dist/css/index.css.map +1 -0
  3. package/dist/css/index.d.ts +29 -1
  4. package/dist/css/index.js +17965 -50
  5. package/dist/css/index.js.map +1 -1
  6. package/dist/index.d.ts +1 -1
  7. package/dist/index.js +14 -16
  8. package/dist/index.js.map +1 -1
  9. package/package.json +38 -48
  10. package/src/core/components/autocomplete/__workshop__/custom.tsx +14 -1
  11. package/src/core/components/autocomplete/__workshop__/example.tsx +12 -1
  12. package/src/core/components/dialog/__workshop__/position.tsx +9 -1
  13. package/src/core/components/dialog/__workshop__/props.tsx +2 -0
  14. package/src/core/components/menu/__workshop__/menuButton.tsx +6 -1
  15. package/src/core/components/menu/__workshop__/tones.tsx +7 -1
  16. package/src/core/components/menu/menu.tsx +1 -1
  17. package/src/core/components/menu/menuButton.tsx +10 -5
  18. package/src/core/components/menu/menuContext.ts +1 -1
  19. package/src/core/components/menu/menuGroup.tsx +7 -4
  20. package/src/core/components/menu/menuItem.tsx +1 -1
  21. package/src/core/components/toast/__workshop__/toast.tsx +2 -0
  22. package/src/core/primitives/avatar/__workshop__/asButton.tsx +8 -1
  23. package/src/core/primitives/avatar/__workshop__/stack.tsx +5 -1
  24. package/src/core/primitives/badge/__workshop__/props.tsx +12 -1
  25. package/src/core/primitives/box/__workshop__/props.tsx +6 -1
  26. package/src/core/primitives/button/__workshop__/props.tsx +22 -0
  27. package/src/core/primitives/button/__workshop__/stacked.tsx +16 -0
  28. package/src/core/primitives/card/__workshop__/props.tsx +10 -0
  29. package/src/core/primitives/card/__workshop__/selected.tsx +1 -1
  30. package/src/core/primitives/card/card.tsx +2 -2
  31. package/src/core/primitives/code/__workshop__/props.tsx +6 -1
  32. package/src/core/primitives/container/__workshop__/example.tsx +6 -1
  33. package/src/core/primitives/flex/__workshop__/example.tsx +7 -1
  34. package/src/core/primitives/heading/__workshop__/plain.tsx +12 -1
  35. package/src/core/primitives/inline/__workshop__/plain.tsx +5 -1
  36. package/src/core/primitives/label/__workshop__/plain.tsx +15 -1
  37. package/src/core/primitives/popover/__workshop__/AlignedStory.tsx +13 -1
  38. package/src/core/primitives/popover/__workshop__/MatchReferenceWidthStory.tsx +2 -0
  39. package/src/core/primitives/popover/__workshop__/PlainStory.tsx +8 -0
  40. package/src/core/primitives/popover/__workshop__/SidePanelStory.tsx +7 -1
  41. package/src/core/primitives/popover/__workshop__/TestStory.tsx +6 -0
  42. package/src/core/primitives/popover/popover.tsx +0 -1
  43. package/src/core/primitives/select/__workshop__/plain.tsx +4 -0
  44. package/src/core/primitives/skeleton/__workshop__/delay.tsx +9 -1
  45. package/src/core/primitives/skeleton/__workshop__/skeleton.tsx +9 -1
  46. package/src/core/primitives/spinner/__workshop__/Props.tsx +6 -1
  47. package/src/core/primitives/stack/__workshop__/plain.tsx +4 -1
  48. package/src/core/primitives/text/__workshop__/colored.tsx +8 -1
  49. package/src/core/primitives/text/__workshop__/example.tsx +15 -1
  50. package/src/core/primitives/textArea/__workshop__/plain.tsx +8 -0
  51. package/src/core/primitives/textInput/__workshop__/plain.tsx +34 -4
  52. package/src/core/primitives/textInput/__workshop__/typed.tsx +7 -1
  53. package/src/core/primitives/textInput/textInput.tsx +1 -1
  54. package/src/core/primitives/tooltip/__workshop__/customPortal.tsx +2 -0
  55. package/src/core/primitives/tooltip/__workshop__/overflowingBoundary.tsx +2 -0
  56. package/src/core/primitives/tooltip/__workshop__/props.tsx +12 -0
  57. package/src/core/primitives/tooltip/__workshop__/resizableBoundary.tsx +5 -0
  58. package/src/css/primitives/avatar/avatar.css.ts +9 -5
  59. package/src/css/primitives/card/__workshop__/color.tsx +9 -1
  60. package/src/css/primitives/card/card.css.ts +10 -0
  61. package/src/css/theme/buildCSSTheme.ts +4 -0
  62. package/src/css/types.ts +4 -0
  63. package/src/css/vars.css.ts +4 -0
  64. package/dist/_chunks-cjs/refractor.cjs +0 -22
  65. package/dist/_chunks-cjs/refractor.cjs.map +0 -1
  66. package/dist/css/index.cjs +0 -966
  67. package/dist/css/index.cjs.map +0 -1
  68. package/dist/css/index.d.cts +0 -1370
  69. package/dist/index.cjs +0 -4515
  70. package/dist/index.cjs.map +0 -1
  71. package/dist/index.d.cts +0 -2521
  72. package/dist/theme.cjs +0 -870
  73. package/dist/theme.cjs.map +0 -1
  74. package/dist/theme.d.cts +0 -499
package/dist/index.d.cts DELETED
@@ -1,2521 +0,0 @@
1
- import type {AlignItems} from '@sanity/ui/css'
2
- import type {AvatarColor} from '@sanity/ui/theme'
3
- import type {AvatarSize} from '@sanity/ui/theme'
4
- import {BadgeStyleProps} from '@sanity/ui/css'
5
- import {BoxStyleProps} from '@sanity/ui/css'
6
- import {Breakpoint} from '@sanity/ui/css'
7
- import type {ButtonStyleProps} from '@sanity/ui/css'
8
- import {CardStyleProps} from '@sanity/ui/css'
9
- import type {CardTone} from '@sanity/ui/theme'
10
- import {CodeStyleProps} from '@sanity/ui/css'
11
- import type {ColorScheme} from '@sanity/ui/theme'
12
- import {Component} from 'react'
13
- import type {ComponentClass} from 'react'
14
- import type {ComponentProps} from 'react'
15
- import type {ComponentType as ComponentType_2} from 'react'
16
- import {ContainerStyleProps} from '@sanity/ui/css'
17
- import type {ContainerWidth} from '@sanity/ui/theme'
18
- import type {Context} from 'react'
19
- import type {DisplayStyleProps} from '@sanity/ui/css'
20
- import type {ElementTone} from '@sanity/ui/theme'
21
- import {ElementType as ElementType_2} from 'react'
22
- import {ErrorInfo} from 'react'
23
- import type {ExoticComponent} from 'react'
24
- import type {FlexDirection} from '@sanity/ui/css'
25
- import {FlexStyleProps} from '@sanity/ui/css'
26
- import type {FlexWrap} from '@sanity/ui/css'
27
- import type {FontCodeSize} from '@sanity/ui/theme'
28
- import type {FontHeadingSize} from '@sanity/ui/theme'
29
- import type {FontLabelSize} from '@sanity/ui/theme'
30
- import type {FontTextSize} from '@sanity/ui/theme'
31
- import type {FontWeight} from '@sanity/ui/theme'
32
- import {ForwardedRef} from 'react'
33
- import type {FunctionComponent} from 'react'
34
- import {GapStyleProps} from '@sanity/ui/css'
35
- import {HeadingStyleProps} from '@sanity/ui/css'
36
- import {HTMLAttributes} from 'react'
37
- import {InputStyleProps} from '@sanity/ui/css'
38
- import type {JSX} from 'react'
39
- import type {JustifyContent} from '@sanity/ui/css'
40
- import {LabelStyleProps} from '@sanity/ui/css'
41
- import {MaxWidth} from '@sanity/ui/css'
42
- import {MouseEventHandler} from 'react'
43
- import {PaddingStyleProps} from '@sanity/ui/css'
44
- import {PropsWithChildren} from 'react'
45
- import type {Radius} from '@sanity/ui/theme'
46
- import {RadiusStyleProps} from '@sanity/ui/css'
47
- import {ReactElement} from 'react'
48
- import {ReactNode} from 'react'
49
- import type {ReactPortal} from 'react'
50
- import {Ref} from 'react'
51
- import {RefAttributes} from 'react'
52
- import {ResponsiveProp} from '@sanity/ui/css'
53
- import {RootStyleProps} from '@sanity/ui/css'
54
- import {SelectableStyleProps} from '@sanity/ui/css'
55
- import {SelectStyleProps} from '@sanity/ui/css'
56
- import {ShadowStyleProps} from '@sanity/ui/css'
57
- import {SkeletonStyleProps} from '@sanity/ui/css'
58
- import type {Space} from '@sanity/ui/theme'
59
- import {TextAreaStyleProps} from '@sanity/ui/css'
60
- import {TextOverflowStyleProps} from '@sanity/ui/css'
61
- import {TextStyleProps} from '@sanity/ui/css'
62
- import type {Width} from '@sanity/ui/css'
63
-
64
- /** @internal */
65
- export declare function Arrow<E extends ArrowElementType = typeof DEFAULT_ARROW_ELEMENT>(
66
- props: ArrowProps<E>,
67
- ): React.JSX.Element
68
-
69
- /** @internal */
70
- export declare type ArrowElementType = 'div' | 'span' | ComponentType
71
-
72
- /** @internal */
73
- export declare type ArrowOwnProps = {
74
- width: number
75
- height: number
76
- radius?: number
77
- }
78
-
79
- /** @internal */
80
- export declare type ArrowProps<E extends ArrowElementType = ArrowElementType> = Props<
81
- ArrowOwnProps,
82
- E
83
- >
84
-
85
- /**
86
- * Assign properties from `U` to `T`, excluding properties that already exist in `T`.
87
- *
88
- * @public
89
- */
90
- export declare type Assign<T extends {}, U extends {}> = Omit<T, keyof U> & U
91
-
92
- /**
93
- * @internal
94
- */
95
- export declare function attemptFocus(element: HTMLElement): boolean
96
-
97
- /**
98
- * The Autocomplete component is typically used for search components.
99
- * It consists of a text input for writing a query, and properties for rendering suggestions.
100
- *
101
- * @public
102
- */
103
- export declare function Autocomplete<
104
- E extends AutocompleteElementType = typeof DEFAULT_AUTOCOMPLETE_ELEMENT,
105
- O extends BaseAutocompleteOption = BaseAutocompleteOption,
106
- >(props: AutocompleteProps<E, O>): React.JSX.Element
107
-
108
- /** @public */
109
- export declare type AutocompleteElementType = 'input' | ComponentType
110
-
111
- /**
112
- * @internal
113
- */
114
- export declare interface AutocompleteInputChangeMsg {
115
- type: 'input/change'
116
- query: string | null
117
- }
118
-
119
- /**
120
- * @internal
121
- */
122
- export declare interface AutocompleteInputFoocusMsg {
123
- type: 'input/focus'
124
- }
125
-
126
- /**
127
- * @internal
128
- */
129
- export declare type AutocompleteMsg =
130
- | AutocompleteRootBlurMsg
131
- | AutocompleteRootClearMsg
132
- | AutocompleteRootEscapeMsg
133
- | AutocompleteRootOpenMsg
134
- | AutocompleteRootSetActiveValueMsg
135
- | AutocompleteRootSetListFocusedMsg
136
- | AutocompleteInputChangeMsg
137
- | AutocompleteInputFoocusMsg
138
- | AutocompleteValueChangeMsg
139
-
140
- /** @public */
141
- export declare type AutocompleteOpenButtonProps = Omit<ButtonProps<'button'>, 'as'>
142
-
143
- /** @public */
144
- export declare type AutocompleteOwnProps<
145
- O extends BaseAutocompleteOption = BaseAutocompleteOption,
146
- > = TextInputOwnProps & {
147
- border?: boolean
148
- customValidity?: string
149
- filterOption?: (query: string, option: O) => boolean
150
- icon?: ElementType_2 | ReactNode
151
- /** @beta */
152
- listBox?: BoxOwnProps
153
- loading?: boolean
154
- onChange?: (value: string) => void
155
- onQueryChange?: (query: string | null) => void
156
- onSelect?: (value: string) => void
157
- /** @beta */
158
- openButton?: boolean | AutocompleteOpenButtonProps
159
- /** @beta */
160
- openOnFocus?: boolean
161
- /** The options to render. */
162
- options?: O[]
163
- padding?: ResponsiveProp<Space>
164
- popover?: Omit<Props<PopoverProps, 'div'>, 'content' | 'onMouseEnter' | 'onMouseLeave' | 'open'>
165
- prefix?: ReactNode
166
- radius?: Radius | Radius[]
167
- /** @beta */
168
- relatedElements?: HTMLElement[]
169
- /** The callback function for rendering each option. */
170
- renderOption?: (option: O) => React.JSX.Element
171
- /** @beta */
172
- renderPopover?: (
173
- props: {
174
- content: React.JSX.Element | null
175
- hidden: boolean
176
- inputElement: HTMLInputElement | null
177
- onMouseEnter: () => void
178
- onMouseLeave: () => void
179
- },
180
- ref: ForwardedRef<HTMLDivElement>,
181
- ) => ReactNode
182
- renderValue?: (value: string, option?: O) => string
183
- suffix?: ReactNode
184
- value?: string
185
- }
186
-
187
- /** @public */
188
- export declare type AutocompleteProps<
189
- E extends AutocompleteElementType = AutocompleteElementType,
190
- O extends BaseAutocompleteOption = BaseAutocompleteOption,
191
- > = Props<AutocompleteOwnProps<O>, E>
192
-
193
- /**
194
- * @internal
195
- */
196
- export declare interface AutocompleteRootBlurMsg {
197
- type: 'root/blur'
198
- }
199
-
200
- /**
201
- * @internal
202
- */
203
- export declare interface AutocompleteRootClearMsg {
204
- type: 'root/clear'
205
- }
206
-
207
- /**
208
- * @internal
209
- */
210
- export declare interface AutocompleteRootEscapeMsg {
211
- type: 'root/escape'
212
- }
213
-
214
- /**
215
- * @internal
216
- */
217
- export declare interface AutocompleteRootOpenMsg {
218
- type: 'root/open'
219
- query: string | null
220
- }
221
-
222
- /**
223
- * @internal
224
- */
225
- export declare interface AutocompleteRootSetActiveValueMsg {
226
- type: 'root/setActiveValue'
227
- value: string
228
- listFocused?: boolean
229
- }
230
-
231
- /**
232
- * @internal
233
- */
234
- export declare interface AutocompleteRootSetListFocusedMsg {
235
- type: 'root/setListFocused'
236
- listFocused: boolean
237
- }
238
-
239
- /**
240
- * @internal
241
- */
242
- export declare interface AutocompleteState {
243
- activeValue: string | null
244
- focused: boolean
245
- listFocused: boolean
246
- query: string | null
247
- value: string | null
248
- }
249
-
250
- /**
251
- * @internal
252
- */
253
- export declare interface AutocompleteValueChangeMsg {
254
- type: 'value/change'
255
- value: string | null
256
- }
257
-
258
- /**
259
- * Avatars are used to represent people and other agents (e.g. bots).
260
- *
261
- * @public
262
- */
263
- export declare function Avatar<E extends AvatarElementType = typeof DEFAULT_AVATAR_ELEMENT>(
264
- props: AvatarProps<E>,
265
- ): React.JSX.Element
266
-
267
- /** @public */
268
- export declare function AvatarCounter<
269
- E extends AvatarCounterElementType = typeof DEFAULT_AVATAR_COUNTER_ELEMENT,
270
- >(props: AvatarCounterProps<E>): React.JSX.Element
271
-
272
- /** @public */
273
- export declare type AvatarCounterElementType = 'button' | 'div' | 'span' | ComponentType
274
-
275
- /** @public */
276
- export declare interface AvatarCounterOwnProps {
277
- count: number
278
- size?: ResponsiveProp<AvatarSize>
279
- }
280
-
281
- /** @public */
282
- export declare type AvatarCounterProps<
283
- E extends AvatarCounterElementType = AvatarCounterElementType,
284
- > = Props<AvatarCounterOwnProps, E>
285
-
286
- /** @public */
287
- export declare type AvatarElementType = 'a' | 'button' | 'div' | 'span' | ComponentType
288
-
289
- /** @public */
290
- export declare interface AvatarOwnProps {
291
- /** @beta */
292
- __unstable_hideInnerStroke?: boolean
293
- animateArrowFrom?: AvatarPosition
294
- arrowPosition?: AvatarPosition
295
- color?: AvatarColor
296
- initials?: string
297
- onImageLoadError?: (event: Error) => void
298
- size?: ResponsiveProp<AvatarSize>
299
- src?: string
300
- title?: string
301
- }
302
-
303
- /** @public */
304
- export declare type AvatarPosition = 'top' | 'bottom' | 'inside'
305
-
306
- /** @public */
307
- export declare type AvatarProps<E extends AvatarElementType = AvatarElementType> = Props<
308
- AvatarOwnProps,
309
- E
310
- >
311
-
312
- /** @public */
313
- export declare function AvatarStack<
314
- E extends AvatarStackElementType = typeof DEFAULT_AVATAR_STACK_ELEMENT,
315
- >(props: AvatarStackProps<E>): React.JSX.Element
316
-
317
- /** @public */
318
- export declare type AvatarStackChild = ReactElement<AvatarProps<'div'>> | null | undefined | false
319
-
320
- /** @public */
321
- export declare type AvatarStackElementType = 'div' | 'span' | ComponentType
322
-
323
- /** @public */
324
- export declare type AvatarStackOwnProps = Omit<
325
- BoxOwnProps,
326
- 'align' | 'alignItems' | 'display' | 'justify' | 'justifyContent'
327
- > & {
328
- children: AvatarStackChild | AvatarStackChild[]
329
- maxLength?: number
330
- size?: ResponsiveProp<AvatarSize>
331
- }
332
-
333
- /** @public */
334
- export declare type AvatarStackProps<E extends AvatarStackElementType = AvatarStackElementType> =
335
- Props<AvatarStackOwnProps, E>
336
-
337
- /**
338
- * Badges are used to tag resources.
339
- *
340
- * @public
341
- */
342
- export declare function Badge<E extends BadgeElementType = typeof DEFAULT_BADGE_ELEMENT>(
343
- props: BadgeProps<E>,
344
- ): React.JSX.Element
345
-
346
- /** @public */
347
- export declare type BadgeElementType = 'div' | 'span' | ComponentType
348
-
349
- /** @public */
350
- export declare type BadgeOwnProps = BadgeStyleProps &
351
- FlexStyleProps &
352
- PaddingStyleProps &
353
- RadiusStyleProps
354
-
355
- /** @public */
356
- export declare type BadgeProps<E extends BadgeElementType = BadgeElementType> = Props<
357
- BadgeOwnProps,
358
- E
359
- >
360
-
361
- /** @public */
362
- export declare interface BaseAutocompleteOption {
363
- value: string
364
- }
365
-
366
- /** @public */
367
- export declare interface BoundaryElementContextValue {
368
- version: 0.0
369
- element: HTMLElement | null
370
- }
371
-
372
- /** @public */
373
- export declare function BoundaryElementProvider(
374
- props: BoundaryElementProviderProps,
375
- ): React.JSX.Element
376
-
377
- /** @public */
378
- export declare interface BoundaryElementProviderProps {
379
- children: ReactNode
380
- element: HTMLElement | null
381
- }
382
-
383
- /**
384
- * The `Box` component is a basic layout wrapper component which provides utility properties
385
- * for flex, margins and padding.
386
- *
387
- * @public
388
- */
389
- export declare function Box<E extends BoxElementType = typeof DEFAULT_BOX_ELEMENT>(
390
- props: BoxProps<E>,
391
- ): React.JSX.Element
392
-
393
- /** @public */
394
- export declare type BoxElementType =
395
- | 'a'
396
- | 'article'
397
- | 'aside'
398
- | 'blockquote'
399
- | 'body'
400
- | 'button'
401
- | 'details'
402
- | 'div'
403
- | 'header'
404
- | 'fieldset'
405
- | 'figure'
406
- | 'figcaption'
407
- | 'footer'
408
- | 'form'
409
- | 'html'
410
- | 'iframe'
411
- | 'kbd'
412
- | 'label'
413
- | 'legend'
414
- | 'li'
415
- | 'main'
416
- | 'nav'
417
- | 'ol'
418
- | 'pre'
419
- | 'section'
420
- | 'span'
421
- | 'summary'
422
- | 'table'
423
- | 'tbody'
424
- | 'td'
425
- | 'tfoot'
426
- | 'th'
427
- | 'thead'
428
- | 'tr'
429
- | 'ul'
430
- | ComponentType
431
-
432
- /** @public */
433
- export declare type BoxOwnProps = BoxStyleProps
434
-
435
- /** @public */
436
- export declare type BoxProps<E extends BoxElementType = BoxElementType> = Props<BoxOwnProps, E>
437
-
438
- /** @beta */
439
- export declare function Breadcrumbs<
440
- E extends BreadcrumbsElementType = typeof DEFAULT_BREADCRUMBS_ELEMENT,
441
- >(props: BreadcrumbsProps<E>): React.JSX.Element
442
-
443
- /** @beta */
444
- export declare type BreadcrumbsElementType = 'div' | 'nav' | ComponentType
445
-
446
- /** @beta */
447
- export declare type BreadcrumbsOwnProps = GapStyleProps & {
448
- expandButton?: Omit<ButtonProps<'button'>, 'as' | 'onClick' | 'selected'>
449
- maxLength?: number
450
- separator?: ReactNode
451
- }
452
-
453
- /** @beta */
454
- export declare type BreadcrumbsProps<E extends BreadcrumbsElementType = BreadcrumbsElementType> =
455
- Props<BreadcrumbsOwnProps, E>
456
-
457
- /** @public */
458
- export declare function Button<E extends ButtonElementType = typeof DEFAULT_BUTTON_ELEMENT>(
459
- props: ButtonProps<E>,
460
- ): React.JSX.Element
461
-
462
- /** @public */
463
- export declare type ButtonElementType = 'a' | 'button' | 'label' | ComponentType
464
-
465
- /** @public */
466
- export declare type ButtonOwnProps = ButtonStyleProps &
467
- DisplayStyleProps &
468
- GapStyleProps &
469
- PaddingStyleProps & {
470
- 'align'?: BoxStyleProps['alignItems']
471
- 'data-ui'?: string
472
- 'disabled'?: boolean
473
- 'fontSize'?: ResponsiveProp<FontTextSize>
474
- 'icon'?: ElementType_2 | ReactNode
475
- 'iconRight'?: ElementType_2 | ReactNode
476
- 'justify'?: BoxStyleProps['justifyContent']
477
- /** @beta Do not use in production, as this might change.*/
478
- 'loading'?: boolean
479
- 'selected'?: boolean
480
- 'textAlign'?: ButtonTextAlign
481
- 'muted'?: boolean
482
- 'target'?: string
483
- 'text'?: ReactNode
484
- 'textOverflow'?: TextOwnProps['textOverflow']
485
- 'textWeight'?: TextOwnProps['weight']
486
- 'width'?: ResponsiveProp<Width>
487
- }
488
-
489
- /** @public */
490
- export declare type ButtonProps<E extends ButtonElementType = ButtonElementType> = Props<
491
- ButtonOwnProps,
492
- E
493
- >
494
-
495
- /** @public */
496
- export declare type ButtonTextAlign = 'left' | 'right' | 'center'
497
-
498
- /**
499
- * The `Card` component acts much like a `Box`, but with a background and foreground color.
500
- * Components within a `Card` inherit its colors.
501
- *
502
- * @public
503
- */
504
- export declare function Card<E extends CardElementType = typeof DEFAULT_CARD_ELEMENT>(
505
- props: CardProps<E>,
506
- ): React.JSX.Element
507
-
508
- /** @internal */
509
- export declare type _CardCompatProviderComponent = ComponentType_2<{
510
- children?: ReactNode
511
- tone: CardTone | 'inherit'
512
- scheme: ColorScheme
513
- }>
514
-
515
- /** @public */
516
- export declare interface CardContextValue {
517
- tone: CardTone
518
- scheme: ColorScheme
519
- /** @internal */
520
- unstable_CompatProvider?: _CardCompatProviderComponent
521
- }
522
-
523
- /** @public */
524
- export declare type CardElementType = BoxElementType
525
-
526
- /** @public */
527
- export declare interface CardOwnProps extends BoxOwnProps, CardStyleProps {
528
- /**
529
- * Do not use in production.
530
- * @beta
531
- */
532
- __unstable_checkered?: boolean
533
- /**
534
- * Do not use in production.
535
- * @beta
536
- */
537
- __unstable_focusRing?: boolean
538
- disabled?: boolean
539
- pressed?: boolean
540
- selected?: boolean
541
- target?: string
542
- }
543
-
544
- /** @public */
545
- export declare type CardProps<E extends CardElementType = CardElementType> = Props<CardOwnProps, E>
546
-
547
- /** @public */
548
- export declare function CardProvider(props: {
549
- children?: ReactNode
550
- tone: CardTone
551
- scheme: ColorScheme
552
- /** @internal */
553
- unstable_CompatProvider?: _CardCompatProviderComponent
554
- }): React.JSX.Element
555
-
556
- /**
557
- * Checkboxes allow the user to select one or more items from a set.
558
- *
559
- * @public
560
- */
561
- export declare function Checkbox<E extends CheckboxElementType = typeof DEFAULT_CHECKBOX_ELEMENT>(
562
- props: CheckboxProps<E>,
563
- ): React.JSX.Element
564
-
565
- /** @public */
566
- export declare type CheckboxElementType = 'input' | ComponentType
567
-
568
- /** @public */
569
- export declare type CheckboxOwnProps = {
570
- indeterminate?: boolean
571
- customValidity?: string
572
- }
573
-
574
- /** @public */
575
- export declare type CheckboxProps<E extends CheckboxElementType = CheckboxElementType> = Props<
576
- CheckboxOwnProps,
577
- E
578
- >
579
-
580
- /** @public */
581
- export declare type ClickOutsideEventElements = (HTMLElement | null | (HTMLElement | null)[])[]
582
-
583
- /** @public */
584
- export declare type ClickOutsideEventListener = (event: MouseEvent) => void
585
-
586
- /** @public */
587
- export declare function Code<E extends CodeElementType = typeof DEFAULT_CODE_ELEMENT>(
588
- props: CodeProps<E>,
589
- ): React.JSX.Element
590
-
591
- /** @public */
592
- export declare type CodeElementType = 'div' | 'pre' | ComponentType
593
-
594
- /** @public */
595
- export declare type CodeOwnProps = CodeStyleProps & {
596
- /** Define the language to use for syntax highlighting. */
597
- language?: string
598
- size?: ResponsiveProp<FontCodeSize>
599
- }
600
-
601
- /** @public */
602
- export declare type CodeProps<E extends CodeElementType = CodeElementType> = Props<CodeOwnProps, E>
603
-
604
- /**
605
- * This API might change. DO NOT USE IN PRODUCTION.
606
- * @beta
607
- */
608
- export declare function CodeSkeleton<
609
- E extends CodeSkeletonElementType = typeof DEFAULT_CODE_SKELETON_ELEMENT,
610
- >(props: CodeSkeletonProps<E>): React.JSX.Element
611
-
612
- /** @beta */
613
- export declare type CodeSkeletonElementType = SkeletonElementType
614
-
615
- /** @beta */
616
- export declare type CodeSkeletonOwnProps = SkeletonOwnProps & {
617
- size?: ResponsiveProp<FontCodeSize>
618
- }
619
-
620
- /**
621
- * This API might change. DO NOT USE IN PRODUCTION.
622
- * @beta
623
- */
624
- export declare type CodeSkeletonProps<E extends CodeSkeletonElementType = CodeSkeletonElementType> =
625
- Props<CodeSkeletonOwnProps, E>
626
-
627
- /** @public */
628
- export declare type ComponentType<P = any> =
629
- | FunctionComponent<P>
630
- | ComponentClass<P>
631
- | ExoticComponent<P>
632
-
633
- /**
634
- * The `Container` component wraps content layout in a defined set of widths.
635
- *
636
- * @public
637
- */
638
- export declare function Container<
639
- E extends ContainerElementType = typeof DEFAULT_CONTAINER_ELEMENT,
640
- >(props: ContainerProps<E>): React.JSX.Element
641
-
642
- /** @public */
643
- export declare type ContainerElementType = BoxElementType
644
-
645
- /** @public */
646
- export declare type ContainerOwnProps = Omit<BoxOwnProps, 'width'> & ContainerStyleProps
647
-
648
- /** @public */
649
- export declare type ContainerProps<E extends ContainerElementType = ContainerElementType> = Props<
650
- ContainerOwnProps,
651
- E
652
- >
653
-
654
- /**
655
- * @internal
656
- */
657
- export declare function containsOrEqualsElement(element: HTMLElement, node: Node): boolean
658
-
659
- /** @internal */
660
- export declare const DEFAULT_ARROW_ELEMENT = 'div'
661
-
662
- /** @public */
663
- export declare const DEFAULT_AUTOCOMPLETE_ELEMENT = 'input'
664
-
665
- /** @public */
666
- export declare const DEFAULT_AVATAR_COUNTER_ELEMENT = 'span'
667
-
668
- /** @public */
669
- export declare const DEFAULT_AVATAR_ELEMENT = 'span'
670
-
671
- /** @public */
672
- export declare const DEFAULT_AVATAR_STACK_ELEMENT = 'span'
673
-
674
- /** @public */
675
- export declare const DEFAULT_BADGE_ELEMENT = 'span'
676
-
677
- /** @public */
678
- export declare const DEFAULT_BOX_ELEMENT = 'div'
679
-
680
- /** @beta */
681
- export declare const DEFAULT_BREADCRUMBS_ELEMENT = 'nav'
682
-
683
- /** @public */
684
- export declare const DEFAULT_BUTTON_ELEMENT = 'button'
685
-
686
- /** @public */
687
- export declare const DEFAULT_CARD_ELEMENT = 'div'
688
-
689
- /** @public */
690
- export declare const DEFAULT_CHECKBOX_ELEMENT = 'input'
691
-
692
- /** @public */
693
- export declare const DEFAULT_CODE_ELEMENT = 'pre'
694
-
695
- /** @beta */
696
- export declare const DEFAULT_CODE_SKELETON_ELEMENT = 'div'
697
-
698
- /** @public */
699
- export declare const DEFAULT_CONTAINER_ELEMENT = 'div'
700
-
701
- /** @public */
702
- export declare const DEFAULT_DIALOG_ELEMENT = 'div'
703
-
704
- /** @beta */
705
- export declare const DEFAULT_ELEMENT_QUERY_ELEMENT = 'div'
706
-
707
- /** @public */
708
- export declare const DEFAULT_FLEX_ELEMENT = 'div'
709
-
710
- /** @public */
711
- export declare const DEFAULT_GRID_ELEMENT = 'div'
712
-
713
- /** @public */
714
- export declare const DEFAULT_HEADING_ELEMENT = 'div'
715
-
716
- /** @beta */
717
- export declare const DEFAULT_HEADING_SKELETON_ELEMENT = 'div'
718
-
719
- /** @public */
720
- export declare const DEFAULT_HOTKEYS_ELEMENT = 'kbd'
721
-
722
- /** @public */
723
- export declare const DEFAULT_INLINE_ELEMENT = 'div'
724
-
725
- /** @public */
726
- export declare const DEFAULT_KBD_ELEMENT = 'kbd'
727
-
728
- /** @public */
729
- export declare const DEFAULT_LABEL_ELEMENT = 'div'
730
-
731
- /** @beta */
732
- export declare const DEFAULT_LABEL_SKELETON_ELEMENT = 'div'
733
-
734
- /** @public */
735
- export declare const DEFAULT_LAYER_ELEMENT = 'div'
736
-
737
- /** @public */
738
- export declare const DEFAULT_MENU_DIVIDER_ELEMENT = 'hr'
739
-
740
- /** @public */
741
- export declare const DEFAULT_MENU_ELEMENT = 'div'
742
-
743
- /** @public */
744
- export declare const DEFAULT_MENU_GROUP_ELEMENT = 'button'
745
-
746
- /** @public */
747
- export declare const DEFAULT_MENU_ITEM_ELEMENT = 'button'
748
-
749
- /** @public */
750
- export declare const DEFAULT_POPOVER_ELEMENT = 'div'
751
-
752
- /** @public */
753
- export declare const DEFAULT_RADIO_ELEMENT = 'input'
754
-
755
- /** @public */
756
- export declare const DEFAULT_ROOT_ELEMENT = 'html'
757
-
758
- /** @public */
759
- export declare const DEFAULT_SELECT_ELEMENT = 'select'
760
-
761
- /** @internal */
762
- export declare const DEFAULT_SELECTABLE_ELEMENT = 'button'
763
-
764
- /** @beta */
765
- export declare const DEFAULT_SKELETON_ELEMENT = 'div'
766
-
767
- /** @public */
768
- export declare const DEFAULT_SPINNER_ELEMENT = 'div'
769
-
770
- /** @public */
771
- export declare const DEFAULT_SR_ONLY_ELEMENT = 'span'
772
-
773
- /** @public */
774
- export declare const DEFAULT_STACK_ELEMENT = 'div'
775
-
776
- /** @public */
777
- export declare const DEFAULT_SWITCH_ELEMENT = 'input'
778
-
779
- /** @public */
780
- export declare const DEFAULT_TAB_ELEMENT = 'button'
781
-
782
- /** @public */
783
- export declare const DEFAULT_TAB_LIST_ELEMENT = 'div'
784
-
785
- /** @public */
786
- export declare const DEFAULT_TAB_PANEL_ELEMENT = 'div'
787
-
788
- /** @public */
789
- export declare const DEFAULT_TEXT_AREA_ELEMENT = 'textarea'
790
-
791
- /** @public */
792
- export declare const DEFAULT_TEXT_ELEMENT = 'div'
793
-
794
- /** @public */
795
- export declare const DEFAULT_TEXT_INPUT_ELEMENT = 'input'
796
-
797
- /** @beta */
798
- export declare const DEFAULT_TEXT_SKELETON_ELEMENT = 'div'
799
-
800
- /** @internal */
801
- export declare const DEFAULT_TOAST_ELEMENT = 'li'
802
-
803
- /** @public */
804
- export declare const DEFAULT_TOOLTIP_ELEMENT = 'div'
805
-
806
- /** @beta */
807
- export declare const DEFAULT_TREE_ELEMENT = 'div'
808
-
809
- /** @beta */
810
- export declare const DEFAULT_TREE_ITEM_ELEMENT = 'a'
811
-
812
- /** @beta */
813
- export declare const DEFAULT_VIRTUAL_LIST_ELEMENT = 'div'
814
-
815
- /** @public */
816
- export declare type Delay =
817
- | number
818
- | Partial<{
819
- open: number
820
- close: number
821
- }>
822
-
823
- /**
824
- * The Dialog component.
825
- *
826
- * @public
827
- */
828
- export declare function Dialog<E extends DialogElementType = typeof DEFAULT_DIALOG_ELEMENT>(
829
- props: DialogProps<E>,
830
- ): React.JSX.Element
831
-
832
- /**
833
- * @internal
834
- */
835
- export declare const DialogContext: Context<DialogContextValue>
836
-
837
- /**
838
- * This API might change. DO NOT USE IN PRODUCTION.
839
- * @beta
840
- */
841
- export declare interface DialogContextValue {
842
- version: 0.0
843
- position?: ResponsiveProp<DialogPosition>
844
- zOffset?: ResponsiveProp<number>
845
- }
846
-
847
- /** @public */
848
- export declare type DialogElementType = 'div' | 'span' | ComponentType
849
-
850
- /** @public */
851
- export declare type DialogOwnProps = ContainerStyleProps &
852
- Omit<LayerOwnProps, 'width'> & {
853
- /**
854
- * @beta
855
- */
856
- __unstable_autoFocus?: boolean
857
- /**
858
- * @beta
859
- */
860
- __unstable_hideCloseButton?: boolean
861
- /**
862
- * Whether the dialog should animate in on mount.
863
- *
864
- * @beta
865
- * @defaultValue false
866
- */
867
- animate?: boolean
868
- cardRadius?: ResponsiveProp<Radius>
869
- contentRef?: ForwardedRef<HTMLDivElement>
870
- footer?: ReactNode
871
- header?: ReactNode
872
- id: string
873
- /** A callback that fires when the dialog becomes the top layer when it was not the top layer before. */
874
- onActivate?: LayerProps['onActivate']
875
- onClickOutside?: () => void
876
- onClose?: () => void
877
- open?: boolean
878
- portal?: string
879
- position?: ResponsiveProp<DialogPosition>
880
- scheme?: ColorScheme
881
- tone?: CardTone | 'inherit'
882
- zOffset?: number | number[]
883
- }
884
-
885
- /** @public */
886
- export declare type DialogPosition = 'absolute' | 'fixed'
887
-
888
- /** @public */
889
- export declare type DialogProps<E extends DialogElementType = DialogElementType> = Props<
890
- DialogOwnProps,
891
- E
892
- >
893
-
894
- /**
895
- * This API might change. DO NOT USE IN PRODUCTION.
896
- * @beta
897
- */
898
- export declare function DialogProvider(props: DialogProviderProps): React.JSX.Element
899
-
900
- /**
901
- * This API might change. DO NOT USE IN PRODUCTION.
902
- * @beta
903
- */
904
- export declare interface DialogProviderProps {
905
- children?: ReactNode
906
- position?: ResponsiveProp<DialogPosition>
907
- zOffset?: ResponsiveProp<number>
908
- }
909
-
910
- /**
911
- * DO NOT USE IN PRODUCTION.
912
- * @beta
913
- */
914
- export declare function ElementQuery<
915
- E extends ElementQueryElementType = typeof DEFAULT_ELEMENT_QUERY_ELEMENT,
916
- >(props: ElementQueryProps<E>): React.JSX.Element
917
-
918
- /** @beta */
919
- export declare type ElementQueryElementType = 'div' | ComponentType
920
-
921
- /**
922
- * DO NOT USE IN PRODUCTION.
923
- * @beta
924
- */
925
- export declare type ElementQueryOwnProps = {
926
- media?: number[]
927
- }
928
-
929
- /**
930
- * DO NOT USE IN PRODUCTION.
931
- * @beta
932
- */
933
- export declare type ElementQueryProps<E extends ElementQueryElementType = ElementQueryElementType> =
934
- Props<ElementQueryOwnProps, E>
935
-
936
- /**
937
- * @beta
938
- */
939
- export declare interface ElementRectValue {
940
- width: number
941
- height: number
942
- }
943
-
944
- /**
945
- * @beta
946
- */
947
- export declare interface ElementSize {
948
- content: ElementRectValue
949
- border: ElementRectValue
950
- /** @deprecated INTERNAL ONLY */
951
- _contentRect: DOMRectReadOnly
952
- }
953
-
954
- /**
955
- * @internal
956
- */
957
- export declare interface _ElementSizeListener {
958
- subscribe: (element: HTMLElement, subscriber: _ElementSizeSubscriber) => () => void
959
- }
960
-
961
- /**
962
- * @internal
963
- */
964
- export declare interface _ElementSizeObserver {
965
- subscribe: (element: HTMLElement, subscriber: _ElementSizeSubscriber) => () => void
966
- }
967
-
968
- /**
969
- * @internal
970
- */
971
- export declare const _elementSizeObserver: _ElementSizeObserver
972
-
973
- /**
974
- * @internal
975
- */
976
- export declare type _ElementSizeSubscriber = (elementRect: ElementSize) => void
977
-
978
- /** @public */
979
- export declare type ElementType<P> = TagType | ComponentType<P>
980
-
981
- /** @public */
982
- export declare type EmptyProps = {}
983
-
984
- /**
985
- * DO NOT USE IN PRODUCTION
986
- * @beta
987
- */
988
- export declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
989
- state: ErrorBoundaryState
990
- static displayName: string
991
- static getDerivedStateFromError(error: Error): ErrorBoundaryState
992
- componentDidCatch(error: Error, info: ErrorInfo): void
993
- render(): ReactNode
994
- }
995
-
996
- /**
997
- * DO NOT USE IN PRODUCTION
998
- * @beta
999
- */
1000
- export declare type ErrorBoundaryProps = PropsWithChildren<{
1001
- onCatch: (params: {error: Error; info: ErrorInfo}) => void
1002
- }>
1003
-
1004
- /**
1005
- * DO NOT USE IN PRODUCTION
1006
- * @beta
1007
- */
1008
- export declare interface ErrorBoundaryState {
1009
- error: Error | null
1010
- }
1011
-
1012
- /**
1013
- * The `Flex` component is a wrapper component for flexible elements (`Box`, `Card` and `Flex`).
1014
- *
1015
- * @public
1016
- */
1017
- export declare function Flex<E extends FlexElementType = typeof DEFAULT_FLEX_ELEMENT>(
1018
- props: FlexProps<E>,
1019
- ): React.JSX.Element
1020
-
1021
- /** @public */
1022
- export declare type FlexElementType = BoxElementType
1023
-
1024
- /** @public */
1025
- export declare type FlexOwnProps = Omit<
1026
- BoxOwnProps,
1027
- 'align' | 'display' | 'flexDirection' | 'flexWrap'
1028
- > & {
1029
- align?: ResponsiveProp<AlignItems>
1030
- direction?: ResponsiveProp<FlexDirection>
1031
- justify?: ResponsiveProp<JustifyContent>
1032
- wrap?: ResponsiveProp<FlexWrap>
1033
- }
1034
-
1035
- /** @public */
1036
- export declare type FlexProps<E extends FlexElementType = FlexElementType> = Props<FlexOwnProps, E>
1037
-
1038
- /**
1039
- * @internal
1040
- */
1041
- export declare function focusFirstDescendant(element: HTMLElement): boolean
1042
-
1043
- /**
1044
- * @internal
1045
- */
1046
- export declare function focusLastDescendant(element: HTMLElement): boolean
1047
-
1048
- /**
1049
- * @internal
1050
- */
1051
- export declare function _getArrayProp<T>(val: T | T[] | undefined, defaultVal?: T[]): T[]
1052
-
1053
- /**
1054
- * @internal
1055
- */
1056
- export declare function _getResponsiveProp<T>(
1057
- val: ResponsiveProp<T> | undefined,
1058
- defaultVal?: Partial<Record<Breakpoint, T>>,
1059
- ): Partial<Record<Breakpoint, T>>
1060
-
1061
- /**
1062
- * The `Grid` component is for building 2-dimensional layers (based on CSS grid).
1063
- *
1064
- * @public
1065
- */
1066
- export declare function Grid<E extends GridElementType = typeof DEFAULT_GRID_ELEMENT>(
1067
- props: GridProps<E>,
1068
- ): React.JSX.Element
1069
-
1070
- /** @public */
1071
- export declare type GridElementType = BoxElementType
1072
-
1073
- /** @public */
1074
- export declare type GridOwnProps = Omit<BoxOwnProps, 'display'>
1075
-
1076
- /** @public */
1077
- export declare type GridProps<E extends GridElementType = GridElementType> = Props<GridOwnProps, E>
1078
-
1079
- /**
1080
- * @internal
1081
- */
1082
- export declare function _hasFocus(element: HTMLElement): boolean
1083
-
1084
- /**
1085
- * Typographic headings.
1086
- *
1087
- * @public
1088
- */
1089
- export declare function Heading<E extends HeadingElementType = typeof DEFAULT_HEADING_ELEMENT>(
1090
- props: HeadingProps<E>,
1091
- ): React.JSX.Element
1092
-
1093
- /** @public */
1094
- export declare type HeadingElementType =
1095
- | 'div'
1096
- | 'h1'
1097
- | 'h2'
1098
- | 'h3'
1099
- | 'h4'
1100
- | 'h5'
1101
- | 'h6'
1102
- | 'label'
1103
- | 'span'
1104
- | ComponentType
1105
-
1106
- /** @public */
1107
- export declare type HeadingOwnProps = HeadingStyleProps & TextOverflowStyleProps
1108
-
1109
- /** @public */
1110
- export declare type HeadingProps<E extends HeadingElementType = HeadingElementType> = Props<
1111
- HeadingOwnProps,
1112
- E
1113
- >
1114
-
1115
- /**
1116
- * This API might change. DO NOT USE IN PRODUCTION.
1117
- * @beta
1118
- */
1119
- export declare function HeadingSkeleton<
1120
- E extends HeadingSkeletonElementType = typeof DEFAULT_HEADING_SKELETON_ELEMENT,
1121
- >(props: HeadingSkeletonProps<E>): React.JSX.Element
1122
-
1123
- /** @beta */
1124
- export declare type HeadingSkeletonElementType = SkeletonElementType
1125
-
1126
- /** @beta */
1127
- export declare type HeadingSkeletonOwnProps = SkeletonOwnProps & {
1128
- size?: ResponsiveProp<FontHeadingSize>
1129
- }
1130
-
1131
- /**
1132
- * This API might change. DO NOT USE IN PRODUCTION.
1133
- * @beta
1134
- */
1135
- export declare type HeadingSkeletonProps<
1136
- E extends HeadingSkeletonElementType = HeadingSkeletonElementType,
1137
- > = Props<HeadingSkeletonOwnProps, E>
1138
-
1139
- /**
1140
- * Represent hotkeys (a keyboard combination) with semantic `<kbd>` elements.
1141
- *
1142
- * @public
1143
- */
1144
- export declare function Hotkeys<E extends HotkeysElementType = typeof DEFAULT_HOTKEYS_ELEMENT>(
1145
- props: HotkeysProps<E>,
1146
- ): React.JSX.Element | undefined
1147
-
1148
- /** @public */
1149
- export declare type HotkeysElementType = 'kbd' | ComponentType
1150
-
1151
- /** @public */
1152
- export declare interface HotkeysOwnProps extends GapStyleProps, RadiusStyleProps {
1153
- fontSize?: ResponsiveProp<FontTextSize>
1154
- padding?: ResponsiveProp<Space>
1155
- keys?: string[]
1156
- }
1157
-
1158
- /** @public */
1159
- export declare type HotkeysProps<E extends HotkeysElementType = HotkeysElementType> = Props<
1160
- HotkeysOwnProps,
1161
- E
1162
- >
1163
-
1164
- /**
1165
- * The `Inline` component is a layout utility for aligning and spacing items horizontally.
1166
- *
1167
- * @public
1168
- */
1169
- export declare function Inline<E extends InlineElementType = typeof DEFAULT_INLINE_ELEMENT>(
1170
- props: InlineProps<E>,
1171
- ): React.JSX.Element
1172
-
1173
- /** @public */
1174
- export declare type InlineElementType = BoxElementType
1175
-
1176
- /** @public */
1177
- export declare type InlineOwnProps = Omit<
1178
- BoxOwnProps,
1179
- | 'alignItems'
1180
- | 'flexDirection'
1181
- | 'flexWrap'
1182
- | 'justifyContent'
1183
- | 'gridAutoColumns'
1184
- | 'gridAutoFlow'
1185
- | 'gridAutoRows'
1186
- | 'gridColumnEnd'
1187
- | 'gridColumnStart'
1188
- | 'gridColumn'
1189
- | 'gridRowEnd'
1190
- | 'gridRowStart'
1191
- | 'gridRow'
1192
- | 'gridTemplateColumns'
1193
- | 'gridTemplateRows'
1194
- >
1195
-
1196
- /** @public */
1197
- export declare type InlineProps<E extends InlineElementType = InlineElementType> = Props<
1198
- InlineOwnProps,
1199
- E
1200
- >
1201
-
1202
- /**
1203
- * @internal
1204
- */
1205
- export declare function _isEnterToClickElement(element: HTMLElement): boolean
1206
-
1207
- /**
1208
- * @internal
1209
- */
1210
- export declare function isFocusable(element: HTMLElement): boolean
1211
-
1212
- /**
1213
- * @internal
1214
- */
1215
- export declare function isHTMLAnchorElement(element: unknown): element is HTMLAnchorElement
1216
-
1217
- /**
1218
- * @internal
1219
- */
1220
- export declare function isHTMLButtonElement(element: unknown): element is HTMLButtonElement
1221
-
1222
- /**
1223
- * @internal
1224
- */
1225
- export declare function isHTMLElement(node: unknown): node is HTMLElement
1226
-
1227
- /**
1228
- * @internal
1229
- */
1230
- export declare function isHTMLInputElement(element: unknown): element is HTMLInputElement
1231
-
1232
- /**
1233
- * @internal
1234
- */
1235
- export declare function isHTMLSelectElement(element: unknown): element is HTMLSelectElement
1236
-
1237
- /**
1238
- * @internal
1239
- */
1240
- export declare function isHTMLTextAreaElement(element: unknown): element is HTMLTextAreaElement
1241
-
1242
- /**
1243
- * @internal
1244
- */
1245
- export declare function _isScrollable(el: Node): boolean
1246
-
1247
- /**
1248
- * Used to define some text as keyboard input.
1249
- *
1250
- * @public
1251
- */
1252
- export declare function KBD<E extends KBDElementType = typeof DEFAULT_KBD_ELEMENT>(
1253
- props: KBDProps<E>,
1254
- ): React.JSX.Element
1255
-
1256
- /** @public */
1257
- export declare type KBDElementType = 'kbd' | ComponentType
1258
-
1259
- /** @public */
1260
- export declare type KBDOwnProps = BoxOwnProps &
1261
- RadiusStyleProps & {
1262
- fontSize?: ResponsiveProp<FontTextSize>
1263
- }
1264
-
1265
- /** @public */
1266
- export declare type KBDProps<E extends KBDElementType = KBDElementType> = Props<KBDOwnProps, E>
1267
-
1268
- /**
1269
- * Typographic labels.
1270
- *
1271
- * @public
1272
- */
1273
- export declare function Label<E extends LabelElementType = typeof DEFAULT_LABEL_ELEMENT>(
1274
- props: LabelProps<E>,
1275
- ): React.JSX.Element
1276
-
1277
- /** @public */
1278
- export declare type LabelElementType =
1279
- | 'div'
1280
- | 'h1'
1281
- | 'h2'
1282
- | 'h3'
1283
- | 'h4'
1284
- | 'h5'
1285
- | 'h6'
1286
- | 'label'
1287
- | 'li'
1288
- | 'p'
1289
- | 'span'
1290
- | ComponentType
1291
-
1292
- /** @public */
1293
- export declare type LabelOwnProps = LabelStyleProps & TextOverflowStyleProps
1294
-
1295
- /** @public */
1296
- export declare type LabelProps<E extends LabelElementType = LabelElementType> = Props<
1297
- LabelOwnProps,
1298
- E
1299
- >
1300
-
1301
- /**
1302
- * This API might change. DO NOT USE IN PRODUCTION.
1303
- * @beta
1304
- */
1305
- export declare function LabelSkeleton<
1306
- E extends LabelSkeletonElementType = typeof DEFAULT_LABEL_SKELETON_ELEMENT,
1307
- >(props: LabelSkeletonProps<E>): React.JSX.Element
1308
-
1309
- /** @beta */
1310
- export declare type LabelSkeletonElementType = SkeletonElementType
1311
-
1312
- /** @beta */
1313
- export declare type LabelSkeletonOwnProps = SkeletonOwnProps & {
1314
- size?: ResponsiveProp<FontLabelSize>
1315
- }
1316
-
1317
- /**
1318
- * This API might change. DO NOT USE IN PRODUCTION.
1319
- * @beta
1320
- */
1321
- export declare type LabelSkeletonProps<
1322
- E extends LabelSkeletonElementType = LabelSkeletonElementType,
1323
- > = Props<LabelSkeletonOwnProps, E>
1324
-
1325
- /** @public */
1326
- export declare function Layer<E extends LayerElementType = typeof DEFAULT_LAYER_ELEMENT>(
1327
- props: LayerProps<E>,
1328
- ): React.JSX.Element
1329
-
1330
- /** @public */
1331
- export declare interface LayerContextValue {
1332
- version: 0.0
1333
- isTopLayer: boolean
1334
- level?: number
1335
- registerChild: (childLevel?: number) => () => void
1336
- size: number
1337
- zIndex: number
1338
- }
1339
-
1340
- /** @public */
1341
- export declare type LayerElementType = CardElementType
1342
-
1343
- /** @public */
1344
- export declare type LayerOwnProps = CardOwnProps & {
1345
- /** A callback that fires when the layer becomes the top layer when it was not the top layer before. */
1346
- onActivate?: (props: {activeElement: HTMLElement | null}) => void
1347
- zOffset?: ResponsiveProp<number>
1348
- }
1349
-
1350
- /** @public */
1351
- export declare type LayerProps<E extends LayerElementType = LayerElementType> = Props<
1352
- LayerOwnProps,
1353
- E
1354
- >
1355
-
1356
- /** @public */
1357
- export declare function LayerProvider(props: LayerProviderProps): React.JSX.Element
1358
-
1359
- /** @public */
1360
- export declare interface LayerProviderProps {
1361
- children?: ReactNode
1362
- zOffset?: ResponsiveProp<number>
1363
- }
1364
-
1365
- /**
1366
- * @internal
1367
- */
1368
- export declare interface _MediaStore {
1369
- subscribe: (onStoreChange: () => void) => () => void
1370
- getSnapshot: () => Breakpoint
1371
- }
1372
-
1373
- /**
1374
- * The `Menu` component is a building block for application menus.
1375
- *
1376
- * @public
1377
- */
1378
- export declare function Menu<E extends MenuElementType = typeof DEFAULT_MENU_ELEMENT>(
1379
- props: MenuProps<E>,
1380
- ): React.JSX.Element
1381
-
1382
- /**
1383
- * The `MenuButton` component follows the WAI-ARIA specification for menu buttons.
1384
- *
1385
- * @public
1386
- */
1387
- export declare function MenuButton(props: MenuButtonProps): React.JSX.Element
1388
-
1389
- /** @public */
1390
- export declare type MenuButtonProps = {
1391
- /**
1392
- * @beta Do not use in production.
1393
- */
1394
- __unstable_disableRestoreFocusOnClose?: boolean
1395
- button: ReactElement<ButtonProps>
1396
- id: string
1397
- menu?: ReactElement
1398
- onClose?: () => void
1399
- onOpen?: () => void
1400
- popover?: Omit<PopoverProps, 'content' | 'open'>
1401
- ref?: ForwardedRef<HTMLButtonElement | null>
1402
- }
1403
-
1404
- /** @public */
1405
- export declare function MenuDivider<
1406
- E extends MenuDividerElementType = typeof DEFAULT_MENU_DIVIDER_ELEMENT,
1407
- >(props: MenuDividerProps<E>): React.JSX.Element
1408
-
1409
- /** @public */
1410
- export declare type MenuDividerElementType = 'div' | 'hr' | 'span' | ComponentType
1411
-
1412
- /** @public */
1413
- export declare type MenuDividerOwnProps = {}
1414
-
1415
- /** @public */
1416
- export declare type MenuDividerProps<E extends MenuDividerElementType = MenuDividerElementType> =
1417
- Props<MenuDividerOwnProps, E>
1418
-
1419
- /** @public */
1420
- export declare type MenuElementType = 'div' | 'span' | ComponentType
1421
-
1422
- /** @public */
1423
- export declare function MenuGroup<
1424
- E extends MenuGroupElementType = typeof DEFAULT_MENU_GROUP_ELEMENT,
1425
- >(props: MenuGroupProps<E>): React.JSX.Element
1426
-
1427
- /** @public */
1428
- export declare type MenuGroupElementType = 'button' | ComponentType
1429
-
1430
- /** @public */
1431
- export declare type MenuGroupOwnProps = RadiusStyleProps & {
1432
- disabled?: boolean
1433
- fontSize?: ResponsiveProp<FontTextSize>
1434
- gap?: ResponsiveProp<Space>
1435
- icon?: ElementType_2 | ReactNode
1436
- menu?: Omit<
1437
- MenuProps<typeof DEFAULT_MENU_ELEMENT>,
1438
- | 'onClickOutside'
1439
- | 'onEscape'
1440
- | 'onItemClick'
1441
- | 'onKeyDown'
1442
- | 'onMouseEnter'
1443
- | 'registerElement'
1444
- | 'shouldFocus'
1445
- | 'onBlurCapture'
1446
- >
1447
- padding?: ResponsiveProp<Space>
1448
- popover?: Omit<PopoverProps, 'content' | 'open'>
1449
- text?: ReactNode
1450
- tone?: ElementTone
1451
- }
1452
-
1453
- /** @public */
1454
- export declare type MenuGroupProps<E extends MenuGroupElementType = MenuGroupElementType> = Props<
1455
- MenuGroupOwnProps,
1456
- E
1457
- >
1458
-
1459
- /** @public */
1460
- export declare function MenuItem<E extends MenuItemElementType = typeof DEFAULT_MENU_ITEM_ELEMENT>(
1461
- props: MenuItemProps<E>,
1462
- ): React.JSX.Element
1463
-
1464
- /** @public */
1465
- export declare type MenuItemElementType = 'button' | 'a' | ComponentType
1466
-
1467
- /** @public */
1468
- export declare type MenuItemOwnProps = GapStyleProps &
1469
- PaddingStyleProps &
1470
- RadiusStyleProps & {
1471
- disabled?: boolean
1472
- fontSize?: ResponsiveProp<FontTextSize>
1473
- hotkeys?: string[]
1474
- icon?: ElementType_2 | ReactNode
1475
- iconRight?: ElementType_2 | ReactNode
1476
- pressed?: boolean
1477
- selected?: boolean
1478
- text?: ReactNode
1479
- tone?: ElementTone
1480
- }
1481
-
1482
- /** @public */
1483
- export declare type MenuItemProps<E extends MenuItemElementType = MenuItemElementType> = Props<
1484
- MenuItemOwnProps,
1485
- E
1486
- >
1487
-
1488
- /** @public */
1489
- export declare type MenuOwnProps = PaddingStyleProps & {
1490
- 'gap'?: ResponsiveProp<Space>
1491
- 'onClickOutside'?: (event: MouseEvent) => void
1492
- 'onEscape'?: () => void
1493
- 'onItemClick'?: () => void
1494
- 'onItemSelect'?: (index: number) => void
1495
- 'originElement'?: HTMLElement | null
1496
- 'registerElement'?: (el: HTMLElement) => () => void
1497
- 'shouldFocus'?: 'first' | 'last' | null
1498
- 'aria-labelledby'?: string
1499
- }
1500
-
1501
- /** @public */
1502
- export declare type MenuProps<E extends MenuElementType = MenuElementType> = Props<MenuOwnProps, E>
1503
-
1504
- /**
1505
- * Placement of floating UI elements.
1506
- *
1507
- * @public
1508
- */
1509
- export declare type Placement =
1510
- | 'top'
1511
- | 'top-start'
1512
- | 'top-end'
1513
- | 'right'
1514
- | 'right-start'
1515
- | 'right-end'
1516
- | 'bottom'
1517
- | 'bottom-start'
1518
- | 'bottom-end'
1519
- | 'left'
1520
- | 'left-start'
1521
- | 'left-end'
1522
-
1523
- /**
1524
- * The `Popover` component is used to display some content on top of another.
1525
- *
1526
- * @public
1527
- */
1528
- export declare function Popover<E extends PopoverElementType = typeof DEFAULT_POPOVER_ELEMENT>(
1529
- props: PopoverProps<E>,
1530
- ): React.JSX.Element
1531
-
1532
- /** @public */
1533
- export declare type PopoverElementType = 'div' | ComponentType
1534
-
1535
- /**
1536
- * @beta
1537
- */
1538
- export declare type PopoverMargins = [number, number, number, number]
1539
-
1540
- /** @public */
1541
- export declare type PopoverOwnProps = Omit<LayerOwnProps, 'maxWidth'> & {
1542
- /** @beta */
1543
- __unstable_margins?: PopoverMargins
1544
- /**
1545
- * Whether the popover should animate in and out.
1546
- *
1547
- * @beta
1548
- * @defaultValue false
1549
- */
1550
- animate?: boolean
1551
- arrow?: boolean
1552
- children?: ReactElement<{
1553
- ref: ForwardedRef<HTMLElement>
1554
- }>
1555
- /**
1556
- * When `true`, prevent overflow within the current boundary:
1557
- * - by flipping on its side axis
1558
- * - by resizing
1559
- *
1560
- * Note that:
1561
- * - setting `preventOverflow` to `true` also prevents overflow on its side axis
1562
- * - setting `matchReferenceWidth` to `true` also causes the popover to resize
1563
- *
1564
- * @defaultValue false
1565
- */
1566
- constrainSize?: boolean
1567
- content?: ReactNode
1568
- disabled?: boolean
1569
- fallbackPlacements?: Placement[]
1570
- floatingBoundary?: HTMLElement | null
1571
- /**
1572
- * When `true`, set the maximum width to match the reference element, and also prevent overflow within
1573
- * the current boundary by resizing.
1574
- *
1575
- * Note that setting `constrainSize` to `true` also causes the popover to resize
1576
- *
1577
- * @defaultValue false
1578
- */
1579
- matchReferenceWidth?: boolean
1580
- /**
1581
- * When true, blocks all pointer interaction with elements beneath the popover until closed.
1582
- *
1583
- * @beta
1584
- * @defaultValue false
1585
- */
1586
- modal?: boolean
1587
- open?: boolean
1588
- placement?: Placement
1589
- /**
1590
- * When 'flip' (default), the placement is determined from the initial placement and the
1591
- * fallback placements in order. Whichever fits in the viewport first.
1592
- *
1593
- * When 'autoPlacement', the initial placement and all fallback placements are evaluated
1594
- * and the placement with the most viewport space available.
1595
- *
1596
- * Option is only relevant if either `constrainSize` or `preventOverflow` is `true`
1597
- */
1598
- placementStrategy?: 'flip' | 'autoPlacement'
1599
- /** Whether or not to render the popover in a portal element. */
1600
- portal?: boolean | string
1601
- preventOverflow?: boolean
1602
- referenceBoundary?: HTMLElement | null
1603
- /**
1604
- * When defined, the popover will be positioned relative to this element.
1605
- * The children of the popover won't be rendered.
1606
- */
1607
- referenceElement?: HTMLElement | null
1608
- /** @beta */
1609
- updateRef?: Ref<PopoverUpdateCallback | undefined>
1610
- width?: ResponsiveProp<MaxWidth>
1611
- }
1612
-
1613
- /** @public */
1614
- export declare type PopoverProps<E extends PopoverElementType = PopoverElementType> = Props<
1615
- PopoverOwnProps,
1616
- E
1617
- >
1618
-
1619
- /** @beta */
1620
- export declare type PopoverUpdateCallback = () => void
1621
-
1622
- /** @public */
1623
- export declare type PopoverWidth = Exclude<ContainerWidth, 'auto'>
1624
-
1625
- /** @public */
1626
- export declare function Portal(props: PortalProps): ReactPortal | null
1627
-
1628
- /** @public */
1629
- export declare interface PortalContextValue {
1630
- version: 0.0
1631
- boundaryElement: HTMLElement | null
1632
- element: HTMLElement | null
1633
- elements?: Record<string, HTMLElement | null | undefined>
1634
- }
1635
-
1636
- /** @public */
1637
- export declare interface PortalProps {
1638
- children: ReactNode
1639
- /**
1640
- * @beta This API might change. DO NOT USE IN PRODUCTION.
1641
- */
1642
- __unstable_name?: string
1643
- }
1644
-
1645
- /** @public */
1646
- export declare function PortalProvider(props: PortalProviderProps): React.JSX.Element
1647
-
1648
- /** @public */
1649
- export declare interface PortalProviderProps {
1650
- children: ReactNode
1651
- element?: HTMLElement | null
1652
- /**
1653
- * @beta
1654
- */
1655
- __unstable_elements?: Record<string, HTMLElement | null | undefined>
1656
- }
1657
-
1658
- /** @public */
1659
- export declare type Props<P extends EmptyProps, E extends ElementType<P>> = Assign<
1660
- E extends TagType ? JSX.IntrinsicElements[E] : ComponentProps<E>,
1661
- P & {
1662
- as?: E
1663
- }
1664
- >
1665
-
1666
- /**
1667
- * The `Radio` component allows the user to select one option from a set.
1668
- *
1669
- * @public
1670
- */
1671
- export declare function Radio<E extends RadioElementType = typeof DEFAULT_RADIO_ELEMENT>(
1672
- props: RadioProps<E>,
1673
- ): React.JSX.Element
1674
-
1675
- /** @public */
1676
- export declare type RadioElementType = 'input' | ComponentType
1677
-
1678
- /** @public */
1679
- export declare type RadioOwnProps = {
1680
- customValidity?: string
1681
- }
1682
-
1683
- /** @public */
1684
- export declare type RadioProps<E extends RadioElementType = RadioElementType> = Props<
1685
- RadioOwnProps,
1686
- E
1687
- >
1688
-
1689
- /**
1690
- * @internal
1691
- */
1692
- export declare function _raf(fn: () => void): () => void
1693
-
1694
- /**
1695
- * @internal
1696
- */
1697
- export declare function _raf2(fn: () => void): () => void
1698
-
1699
- /**
1700
- * @internal
1701
- */
1702
- export declare const _ResizeObserver: typeof ResizeObserver
1703
-
1704
- /**
1705
- * @internal
1706
- */
1707
- export declare interface ResponsiveWidthStyleProps {
1708
- $width: (number | 'auto')[]
1709
- }
1710
-
1711
- /**
1712
- * The `Root` component.
1713
- *
1714
- * @public
1715
- */
1716
- export declare function Root<E extends RootElementType = typeof DEFAULT_ROOT_ELEMENT>(
1717
- props: RootProps<E>,
1718
- ): React.JSX.Element
1719
-
1720
- /** @public */
1721
- export declare type RootElementType = 'html' | 'body' | 'div'
1722
-
1723
- /** @public */
1724
- export declare interface RootOwnProps extends BoxOwnProps, RootStyleProps {}
1725
-
1726
- /** @public */
1727
- export declare type RootProps<E extends RootElementType = RootElementType> = Props<RootOwnProps, E>
1728
-
1729
- /** @public */
1730
- export declare function RootProvider(props: RootProviderProps): React.JSX.Element
1731
-
1732
- /** @public */
1733
- export declare interface RootProviderProps {
1734
- boundaryElement?: HTMLElement | null
1735
- children?: ReactNode
1736
- portalElement?: HTMLElement | null
1737
- scheme?: ColorScheme
1738
- tone?: CardTone
1739
- }
1740
-
1741
- /**
1742
- * The `Select` component provides control of options.
1743
- *
1744
- * @public
1745
- */
1746
- export declare function Select<E extends SelectElementType = typeof DEFAULT_SELECT_ELEMENT>(
1747
- props: SelectProps<E>,
1748
- ): React.JSX.Element
1749
-
1750
- /** @internal */
1751
- export declare function Selectable<
1752
- E extends SelectableElementType = typeof DEFAULT_SELECTABLE_ELEMENT,
1753
- >(props: SelectableProps<E>): React.JSX.Element
1754
-
1755
- /** @internal */
1756
- export declare type SelectableElementType = 'button' | 'a' | ComponentType
1757
-
1758
- /** @internal */
1759
- export declare type SelectableOwnProps = BoxOwnProps &
1760
- SelectableStyleProps & {
1761
- disabled?: boolean
1762
- href?: string
1763
- selected?: boolean
1764
- tone?: ElementTone
1765
- type?: 'button'
1766
- }
1767
-
1768
- /** @internal */
1769
- export declare type SelectableProps<E extends SelectableElementType = SelectableElementType> =
1770
- Props<SelectableOwnProps, E>
1771
-
1772
- /** @public */
1773
- export declare type SelectElementType = 'select' | ComponentType
1774
-
1775
- /** @public */
1776
- export declare type SelectOwnProps = SelectStyleProps & {
1777
- customValidity?: string
1778
- readOnly?: boolean
1779
- }
1780
-
1781
- /** @public */
1782
- export declare type SelectProps<E extends SelectElementType = SelectElementType> = Props<
1783
- SelectOwnProps,
1784
- E
1785
- >
1786
-
1787
- /**
1788
- * This API might change. DO NOT USE IN PRODUCTION.
1789
- * @beta
1790
- */
1791
- export declare function Skeleton<E extends SkeletonElementType = typeof DEFAULT_SKELETON_ELEMENT>(
1792
- props: SkeletonProps<E>,
1793
- ): React.JSX.Element
1794
-
1795
- /** @beta */
1796
- export declare type SkeletonElementType = 'div' | 'span' | ComponentType
1797
-
1798
- /**
1799
- * This API might change. DO NOT USE IN PRODUCTION.
1800
- * @beta
1801
- */
1802
- export declare type SkeletonOwnProps = SkeletonStyleProps & {
1803
- animated?: boolean
1804
- delay?: number
1805
- }
1806
-
1807
- /** @beta */
1808
- export declare type SkeletonProps<E extends SkeletonElementType = SkeletonElementType> = Props<
1809
- SkeletonOwnProps,
1810
- E
1811
- >
1812
-
1813
- /**
1814
- * Indicate that something is loading for an indeterminate amount of time.
1815
- *
1816
- * @public
1817
- */
1818
- export declare function Spinner<E extends SpinnerElementType = typeof DEFAULT_SPINNER_ELEMENT>(
1819
- props: SpinnerProps<E>,
1820
- ): React.JSX.Element
1821
-
1822
- /** @public */
1823
- export declare type SpinnerElementType = 'div' | 'span' | ComponentType
1824
-
1825
- /** @public */
1826
- export declare type SpinnerOwnProps = {
1827
- muted?: boolean
1828
- size?: ResponsiveProp<FontTextSize>
1829
- }
1830
-
1831
- /** @public */
1832
- export declare type SpinnerProps<E extends SpinnerElementType = SpinnerElementType> = Props<
1833
- SpinnerOwnProps,
1834
- E
1835
- >
1836
-
1837
- /** @public */
1838
- export declare function SrOnly<E extends SrOnlyElementType = typeof DEFAULT_SR_ONLY_ELEMENT>(
1839
- props: SrOnlyProps<E>,
1840
- ): React.JSX.Element
1841
-
1842
- /** @public */
1843
- export declare type SrOnlyElementType = 'span' | ComponentType
1844
-
1845
- /** @public */
1846
- export declare type SrOnlyOwnProps = {}
1847
-
1848
- /** @public */
1849
- export declare type SrOnlyProps<E extends SrOnlyElementType = SrOnlyElementType> = Props<
1850
- SrOnlyOwnProps,
1851
- E
1852
- >
1853
-
1854
- /**
1855
- * The `Stack` component is used to place elements on top of each other.
1856
- *
1857
- * @public
1858
- */
1859
- export declare function Stack<E extends StackElementType = typeof DEFAULT_STACK_ELEMENT>(
1860
- props: StackProps<E>,
1861
- ): React.JSX.Element
1862
-
1863
- /** @public */
1864
- export declare type StackElementType = BoxElementType
1865
-
1866
- /** @public */
1867
- export declare type StackOwnProps = Omit<
1868
- BoxOwnProps,
1869
- | 'align'
1870
- | 'alignItems'
1871
- | 'columns'
1872
- | 'gridTemplateColumns'
1873
- | 'direction'
1874
- | 'display'
1875
- | 'flexDirection'
1876
- | 'flexWrap'
1877
- | 'gapX'
1878
- | 'gapY'
1879
- | 'justify'
1880
- | 'justifyContent'
1881
- | 'rows'
1882
- | 'gridTemplateRows'
1883
- >
1884
-
1885
- /** @public */
1886
- export declare type StackProps<E extends StackElementType = StackElementType> = Props<
1887
- StackOwnProps,
1888
- E
1889
- >
1890
-
1891
- /**
1892
- * The `Switch` component allows the user to toggle a setting on and off.
1893
- *
1894
- * Extends all properties of an `<input type="checkbox" />` element, except type.
1895
- *
1896
- * @public
1897
- */
1898
- export declare function Switch<E extends SwitchElementType = typeof DEFAULT_SWITCH_ELEMENT>(
1899
- props: SwitchProps<E>,
1900
- ): React.JSX.Element
1901
-
1902
- /** @public */
1903
- export declare type SwitchElementType = 'input' | ComponentType
1904
-
1905
- /** @public */
1906
- export declare type SwitchOwnProps = {
1907
- indeterminate?: boolean
1908
- }
1909
-
1910
- /** @public */
1911
- export declare type SwitchProps<E extends SwitchElementType = SwitchElementType> = Props<
1912
- SwitchOwnProps,
1913
- E
1914
- >
1915
-
1916
- /** @public */
1917
- export declare function Tab<E extends TabElementType = typeof DEFAULT_TAB_ELEMENT>(
1918
- props: TabProps<E>,
1919
- ): React.JSX.Element
1920
-
1921
- /** @public */
1922
- export declare type TabElementType = 'button' | ComponentType
1923
-
1924
- /** @public */
1925
- export declare function TabList<E extends TabListElementType = typeof DEFAULT_TAB_LIST_ELEMENT>(
1926
- props: TabListProps<E>,
1927
- ): React.JSX.Element
1928
-
1929
- /** @public */
1930
- export declare type TabListChild =
1931
- | ReactElement<Props<TabProps, 'button'>>
1932
- | null
1933
- | undefined
1934
- | false
1935
-
1936
- /** @public */
1937
- export declare type TabListElementType = 'div' | 'span' | ComponentType
1938
-
1939
- /** @public */
1940
- export declare type TabListOwnProps = Omit<FlexOwnProps, 'as' | 'height'> & {
1941
- children: TabListChild[]
1942
- }
1943
-
1944
- /** @public */
1945
- export declare type TabListProps<E extends TabListElementType = TabListElementType> = Props<
1946
- TabListOwnProps,
1947
- E
1948
- >
1949
-
1950
- /** @public */
1951
- export declare type TabOwnProps = {
1952
- /**
1953
- * The `id` of the corresponding `TabPanel` component.
1954
- */
1955
- 'aria-controls': string
1956
- 'id': string
1957
- 'icon'?: ElementType_2 | ReactNode
1958
- 'focused'?: boolean
1959
- 'fontSize'?: ResponsiveProp<FontTextSize>
1960
- 'label'?: ReactNode
1961
- 'padding'?: ResponsiveProp<Space>
1962
- 'selected'?: boolean
1963
- 'tone'?: ElementTone
1964
- }
1965
-
1966
- /** @public */
1967
- export declare function TabPanel<E extends TabPanelElementType = typeof DEFAULT_TAB_PANEL_ELEMENT>(
1968
- props: TabPanelProps<E>,
1969
- ): React.JSX.Element
1970
-
1971
- /** @public */
1972
- export declare type TabPanelElementType = 'div' | 'span' | ComponentType
1973
-
1974
- /** @public */
1975
- export declare type TabPanelOwnProps = BoxOwnProps & {
1976
- /**
1977
- * The `id` of the correlating `Tab` component.
1978
- */
1979
- 'aria-labelledby': string
1980
- 'id': string
1981
- }
1982
-
1983
- /** @public */
1984
- export declare type TabPanelProps<E extends TabPanelElementType = TabPanelElementType> = Props<
1985
- TabPanelOwnProps,
1986
- E
1987
- >
1988
-
1989
- /** @public */
1990
- export declare type TabProps<E extends TabElementType = TabElementType> = Props<TabOwnProps, E>
1991
-
1992
- /** @public */
1993
- export declare type TagType = keyof JSX.IntrinsicElements
1994
-
1995
- /**
1996
- * The `Text` component is an agile, themed typographic element.
1997
- *
1998
- * @public
1999
- */
2000
- declare function Text_2<E extends TextElementType = typeof DEFAULT_TEXT_ELEMENT>(
2001
- props: TextProps<E>,
2002
- ): React.JSX.Element
2003
- export {Text_2 as Text}
2004
-
2005
- /**
2006
- * A multiline text input.
2007
- *
2008
- * @public
2009
- */
2010
- export declare function TextArea<E extends TextAreaElementType = typeof DEFAULT_TEXT_AREA_ELEMENT>(
2011
- props: TextAreaProps<E>,
2012
- ): React.JSX.Element
2013
-
2014
- /** @public */
2015
- export declare type TextAreaElementType = 'textarea' | ComponentType
2016
-
2017
- /** @public */
2018
- export declare type TextAreaOwnProps = TextAreaStyleProps & {
2019
- /**
2020
- * @beta
2021
- */
2022
- __unstable_disableFocusRing?: boolean
2023
- customValidity?: string
2024
- }
2025
-
2026
- /** @public */
2027
- export declare type TextAreaProps<E extends TextAreaElementType = TextAreaElementType> = Props<
2028
- TextAreaOwnProps,
2029
- E
2030
- >
2031
-
2032
- /** @public */
2033
- export declare type TextElementType =
2034
- | 'div'
2035
- | 'h1'
2036
- | 'h2'
2037
- | 'h3'
2038
- | 'h4'
2039
- | 'h5'
2040
- | 'h6'
2041
- | 'label'
2042
- | 'li'
2043
- | 'p'
2044
- | 'span'
2045
- | 'summary'
2046
- | 'time'
2047
- | ComponentType
2048
-
2049
- /**
2050
- * Single line text input.
2051
- *
2052
- * @public
2053
- */
2054
- export declare function TextInput<
2055
- E extends TextInputElementType = typeof DEFAULT_TEXT_INPUT_ELEMENT,
2056
- >(props: TextInputProps<E>): React.JSX.Element
2057
-
2058
- /** @public */
2059
- export declare type TextInputClearButtonProps = Omit<
2060
- ButtonProps<'button'>,
2061
- 'as' | 'onClick' | 'onMouseDown'
2062
- >
2063
-
2064
- /** @public */
2065
- export declare type TextInputElementType = 'input' | ComponentType
2066
-
2067
- /** @public */
2068
- export declare type TextInputOwnProps = InputStyleProps & {
2069
- /**
2070
- * @beta
2071
- */
2072
- __unstable_disableFocusRing?: boolean
2073
- /**
2074
- * @beta
2075
- */
2076
- clearButton?: boolean | TextInputClearButtonProps
2077
- customValidity?: string
2078
- icon?: ElementType_2 | ReactNode
2079
- iconRight?: ElementType_2 | ReactNode
2080
- /**
2081
- * @beta
2082
- */
2083
- onClear?: () => void
2084
- prefix?: ReactNode
2085
- suffix?: ReactNode
2086
- weight?: FontWeight
2087
- }
2088
-
2089
- /** @public */
2090
- export declare type TextInputProps<E extends TextInputElementType = TextInputElementType> = Props<
2091
- TextInputOwnProps,
2092
- E
2093
- >
2094
-
2095
- /** @public */
2096
- export declare type TextOwnProps = TextStyleProps & TextOverflowStyleProps
2097
-
2098
- /** @public */
2099
- export declare type TextProps<E extends TextElementType = TextElementType> = Props<TextOwnProps, E>
2100
-
2101
- /**
2102
- * This API might change. DO NOT USE IN PRODUCTION.
2103
- * @beta
2104
- */
2105
- export declare function TextSkeleton<
2106
- E extends TextSkeletonElementType = typeof DEFAULT_TEXT_SKELETON_ELEMENT,
2107
- >(props: TextSkeletonProps<E>): React.JSX.Element
2108
-
2109
- /** @beta */
2110
- export declare type TextSkeletonElementType = SkeletonElementType
2111
-
2112
- /** @beta */
2113
- export declare type TextSkeletonOwnProps = SkeletonOwnProps & {
2114
- size?: ResponsiveProp<FontTextSize>
2115
- }
2116
-
2117
- /**
2118
- * This API might change. DO NOT USE IN PRODUCTION.
2119
- * @beta
2120
- */
2121
- export declare type TextSkeletonProps<E extends TextSkeletonElementType = TextSkeletonElementType> =
2122
- Props<TextSkeletonOwnProps, E>
2123
-
2124
- /**
2125
- * The `Toast` component gives feedback to users when an action has taken place.
2126
- *
2127
- * Toasts can be closed with a close button, or auto-dismiss when the duration expires.
2128
- *
2129
- * @internal
2130
- */
2131
- export declare function Toast<E extends ToastElementType = typeof DEFAULT_TOAST_ELEMENT>(
2132
- props: ToastProps<E>,
2133
- ): React.JSX.Element
2134
-
2135
- /** @public */
2136
- export declare interface ToastContextValue {
2137
- version: 0.0
2138
- /**
2139
- * Creates or updates a toast notification.
2140
- * If a toast with the same ID already exists, it will be updated.
2141
- * If an ID is not provided, a random one will be generated.
2142
- * The returned ID can be used to programatically update a toast.
2143
- */
2144
- push: (params: ToastParams) => string
2145
- }
2146
-
2147
- /** @internal */
2148
- export declare type ToastElementType = 'li' | ComponentType
2149
-
2150
- /** @internal */
2151
- declare type ToastLayerElementType = 'ul' | ComponentType
2152
-
2153
- /** @internal */
2154
- declare type ToastLayerOwnProps = GapStyleProps & PaddingStyleProps
2155
-
2156
- /** @internal */
2157
- declare type ToastLayerProps<E extends ToastLayerElementType = ToastLayerElementType> = Props<
2158
- ToastLayerOwnProps,
2159
- E
2160
- >
2161
-
2162
- /** @internal */
2163
- export declare type ToastOwnProps = RadiusStyleProps & {
2164
- closable?: boolean
2165
- description?: ReactNode
2166
- onClose?: () => void
2167
- title?: ReactNode
2168
- status?: 'error' | 'warning' | 'success' | 'info'
2169
- duration?: number
2170
- }
2171
-
2172
- /** @public */
2173
- export declare interface ToastParams {
2174
- closable?: boolean
2175
- description?: ReactNode
2176
- duration?: number
2177
- id?: string
2178
- onClose?: () => void
2179
- title?: ReactNode
2180
- status?: 'error' | 'warning' | 'success' | 'info'
2181
- }
2182
-
2183
- /** @internal */
2184
- export declare type ToastProps<E extends ToastElementType = ToastElementType> = Props<
2185
- ToastOwnProps,
2186
- E
2187
- >
2188
-
2189
- /** @public */
2190
- export declare function ToastProvider(props: ToastProviderProps): React.JSX.Element
2191
-
2192
- /** @public */
2193
- export declare interface ToastProviderProps extends Omit<ToastLayerProps, 'children'> {
2194
- children?: React.ReactNode
2195
- zOffset?: ResponsiveProp<number>
2196
- }
2197
-
2198
- /**
2199
- * Tooltips display information when hovering, focusing or tapping.
2200
- *
2201
- * @public
2202
- */
2203
- export declare function Tooltip<E extends TooltipElementType = typeof DEFAULT_TOOLTIP_ELEMENT>(
2204
- props: TooltipProps<E>,
2205
- ): React.JSX.Element
2206
-
2207
- /**
2208
- * @beta
2209
- */
2210
- export declare const TooltipDelayGroupContext: Context<TooltipDelayGroupContextValue | null>
2211
-
2212
- /**
2213
- * @beta
2214
- */
2215
- export declare interface TooltipDelayGroupContextValue {
2216
- setIsGroupActive: (nextState: React.SetStateAction<boolean>, delay?: number | undefined) => void
2217
- setOpenTooltipId: (nextId: string | null, delay?: number | undefined) => void
2218
- openDelay: number
2219
- closeDelay: number
2220
- openTooltipId: string | null
2221
- }
2222
-
2223
- /**
2224
- * @public
2225
- * Provides context for a group of tooltip elements that should share a delay
2226
- * which temporarily becomes 1 ms after the first floating element of the group opens.
2227
- */
2228
- export declare function TooltipDelayGroupProvider(
2229
- props: TooltipDelayGroupProviderProps,
2230
- ): React.JSX.Element
2231
-
2232
- /**
2233
- * @public
2234
- * */
2235
- export declare interface TooltipDelayGroupProviderProps {
2236
- children?: ReactNode
2237
- /**
2238
- * Handles the delays to open or close a tooltip inside a group
2239
- *
2240
- * If only a `number` is passed, it will be used for both opening and closing.
2241
- *
2242
- * If an object `{open: number; close:number}` is passed, it can be used to set different delays for each action.
2243
- *
2244
- * @public
2245
- */
2246
- delay: Delay
2247
- }
2248
-
2249
- /** @public */
2250
- export declare type TooltipElementType = 'div' | 'span' | ComponentType
2251
-
2252
- /** @public */
2253
- export declare type TooltipOwnProps = LayerOwnProps &
2254
- RadiusStyleProps &
2255
- ShadowStyleProps & {
2256
- /**
2257
- * Whether the tooltip should animate in and out.
2258
- *
2259
- * @beta
2260
- * @defaultValue false
2261
- */
2262
- animate?: boolean
2263
- arrow?: boolean
2264
- boundaryElement?: HTMLElement | null
2265
- children?: ReactElement<HTMLAttributes<HTMLElement> & RefAttributes<HTMLElement>>
2266
- content?: ReactNode
2267
- /**
2268
- * Adds a delay to open or close the tooltip.
2269
- *
2270
- * If only a `number` is passed, it will be used for both opening and closing.
2271
- *
2272
- * If an object `{open: number; close:number}` is passed, it can be used to set different delays for each action.
2273
- *
2274
- * @public
2275
- * @defaultValue 0
2276
- */
2277
- delay?: Delay
2278
- disabled?: boolean
2279
- fallbackPlacements?: Placement[]
2280
- placement?: Placement
2281
- /** Whether or not to render the tooltip in a portal element. */
2282
- portal?: boolean | string
2283
- scheme?: ColorScheme
2284
- tone?: CardTone
2285
- }
2286
-
2287
- /** @public */
2288
- export declare type TooltipProps<E extends TooltipElementType = TooltipElementType> = Props<
2289
- TooltipOwnProps,
2290
- E
2291
- >
2292
-
2293
- /**
2294
- * This API might change. DO NOT USE IN PRODUCTION.
2295
- * @beta
2296
- */
2297
- export declare function Tree<E extends TreeElementType = typeof DEFAULT_TREE_ELEMENT>(
2298
- props: TreeProps<E>,
2299
- ): React.JSX.Element
2300
-
2301
- /**
2302
- * @beta
2303
- */
2304
- export declare interface TreeContextValue {
2305
- version: 0.0
2306
- focusedElement: HTMLElement | null
2307
- gap: ResponsiveProp<Space>
2308
- level: number
2309
- path: string[]
2310
- registerItem: (element: HTMLElement, path: string, expanded: boolean, selected: boolean) => void
2311
- setExpanded: (path: string, expanded: boolean) => void
2312
- setFocusedElement: (focusedElement: HTMLElement | null) => void
2313
- state: TreeState
2314
- }
2315
-
2316
- /** @beta */
2317
- export declare type TreeElementType = 'div' | ComponentType
2318
-
2319
- /**
2320
- * This API might change. DO NOT USE IN PRODUCTION.
2321
- * @beta
2322
- */
2323
- export declare function TreeItem<E extends TreeItemElementType = typeof DEFAULT_TREE_ITEM_ELEMENT>(
2324
- props: TreeItemProps<E>,
2325
- ): React.JSX.Element
2326
-
2327
- /** @beta */
2328
- export declare type TreeItemElementType = 'a' | 'li' | ComponentType
2329
-
2330
- /** @beta */
2331
- export declare type TreeItemOwnProps = CardOwnProps & {
2332
- expanded?: boolean
2333
- fontSize?: ResponsiveProp<FontTextSize>
2334
- icon?: ElementType_2
2335
- /**
2336
- * Allows passing a custom element type to the link component
2337
- * @internal
2338
- */
2339
- linkAs?: SelectableElementType
2340
- onClick?: MouseEventHandler<HTMLAnchorElement | HTMLLIElement>
2341
- padding?: ResponsiveProp<Space>
2342
- space?: ResponsiveProp<Space>
2343
- text?: ReactNode
2344
- weight?: FontWeight
2345
- }
2346
-
2347
- /** @beta */
2348
- export declare type TreeItemProps<E extends TreeItemElementType = TreeItemElementType> = Props<
2349
- TreeItemOwnProps,
2350
- E
2351
- >
2352
-
2353
- /**
2354
- * This API might change. DO NOT USE IN PRODUCTION.
2355
- * @beta
2356
- */
2357
- export declare type TreeOwnProps = {
2358
- gap?: ResponsiveProp<Space>
2359
- }
2360
-
2361
- /** @beta */
2362
- export declare type TreeProps<E extends TreeElementType = TreeElementType> = Props<TreeOwnProps, E>
2363
-
2364
- /**
2365
- * @beta
2366
- */
2367
- export declare interface TreeState {
2368
- [key: string]:
2369
- | {
2370
- element: HTMLElement
2371
- expanded: boolean
2372
- }
2373
- | undefined
2374
- }
2375
-
2376
- /** @public */
2377
- export declare function useBoundaryElement(): BoundaryElementContextValue
2378
-
2379
- /** @public */
2380
- export declare function useCard(): CardContextValue
2381
-
2382
- /** @public */
2383
- export declare function useClickOutsideEvent(
2384
- listener: ClickOutsideEventListener | false | undefined,
2385
- elementsArg?: () => ClickOutsideEventElements,
2386
- boundaryElement?: () => HTMLElement | null,
2387
- ): void
2388
-
2389
- /**
2390
- * @beta
2391
- */
2392
- export declare function useCustomValidity(
2393
- ref: {
2394
- current: null | {
2395
- setCustomValidity: (validity: string) => void
2396
- }
2397
- },
2398
- customValidity: string | undefined,
2399
- ): void
2400
-
2401
- /**
2402
- * This API might change. DO NOT USE IN PRODUCTION.
2403
- * @beta
2404
- */
2405
- export declare function useDialog(): DialogContextValue
2406
-
2407
- /**
2408
- * Subscribe to the size of a DOM element.
2409
- * @beta
2410
- */
2411
- export declare function useElementSize(element: HTMLElement | null): ElementSize | null
2412
-
2413
- /**
2414
- * @beta
2415
- */
2416
- export declare function useGlobalKeyDown(onKeyDown: (event: KeyboardEvent) => void): void
2417
-
2418
- /** @public */
2419
- export declare function useLayer(): LayerContextValue
2420
-
2421
- /**
2422
- * Efficiently subscribes to `window.matchMedia` queries
2423
- *
2424
- * @param getServerSnapshot - Only called during server-side rendering, and hydration if using hydrateRoot. Required if the hook is called during SSR (https://dev/reference/react/useSyncExternalStore#adding-support-for-server-rendering)
2425
- *
2426
- * @public
2427
- */
2428
- export declare function useMatchMedia(
2429
- mediaQueryString: `(${string})`,
2430
- getServerSnapshot?: () => boolean,
2431
- ): boolean
2432
-
2433
- /**
2434
- * This API might change. DO NOT USE IN PRODUCTION.
2435
- * @beta
2436
- */
2437
- export declare function useMediaIndex(): Breakpoint
2438
-
2439
- /** @public */
2440
- export declare function usePortal(): PortalContextValue
2441
-
2442
- /**
2443
- * Returns true if a dark color scheme is preferred, false if a light color scheme is preferred or the preference is not known.
2444
- *
2445
- * @param getServerSnapshot - Only called during server-side rendering, and hydration if using hydrateRoot. Since the server environment doesn't have access to the DOM, we can't determine the current value of the media query and we assume `(prefers-color-scheme: light)` since it's the most common scheme (https://dev/reference/react/useSyncExternalStore#adding-support-for-server-rendering)
2446
- *
2447
- * If you persist the detected preference in a cookie or a header then you may implement your own server snapshot to read it.
2448
- * Chrome supports reading the `prefers-color-scheme` media query from a header if the server response: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-Prefers-Color-Scheme
2449
- * @example https://gist.github.com/stipsan/13c0cccf8dfc34f4b44bb1b984baf7df
2450
- *
2451
- * @public
2452
- */
2453
- export declare function usePrefersDark(getServerSnapshot?: () => boolean): boolean
2454
-
2455
- /**
2456
- * Returns true if motion should be reduced
2457
- *
2458
- * @param getServerSnapshot - Only called during server-side rendering, and hydration if using hydrateRoot. Since the server environment doesn't have access to the DOM, we can't determine the current value of the media query and we assume `(prefers-reduced-motion: no-preference)` since it's the most common scheme (https://dev/reference/react/useSyncExternalStore#adding-support-for-server-rendering)
2459
- *
2460
- * If you persist the detected preference in a cookie or a header then you may implement your own server snapshot to read it.
2461
- * Chrome supports reading the `prefers-reduced-motion` media query from a header if the server response: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-Prefers-Reduced-Motion
2462
- * @example https://gist.github.com/stipsan/0c0f839a27842249cada893e9fb7767b
2463
- *
2464
- * @public
2465
- */
2466
- export declare function usePrefersReducedMotion(getServerSnapshot?: () => boolean): boolean
2467
-
2468
- /**
2469
- * This API might change. DO NOT USE IN PRODUCTION.
2470
- * @beta
2471
- */
2472
- export declare function useResponsiveProp<T>(
2473
- val: ResponsiveProp<T> | undefined,
2474
- defaultVal?: Partial<Record<Breakpoint, T>>,
2475
- ): Partial<Record<Breakpoint, T>>
2476
-
2477
- /** @public */
2478
- export declare function useToast(): ToastContextValue
2479
-
2480
- /**
2481
- * @beta
2482
- */
2483
- export declare function useTooltipDelayGroup(): TooltipDelayGroupContextValue | null
2484
-
2485
- /**
2486
- * @beta
2487
- */
2488
- export declare function useTree(): TreeContextValue
2489
-
2490
- /** @beta */
2491
- export declare function VirtualList<
2492
- E extends VirtualListElementType = typeof DEFAULT_VIRTUAL_LIST_ELEMENT,
2493
- >(props: VirtualListProps<E>): React.JSX.Element
2494
-
2495
- /** @beta */
2496
- export declare interface VirtualListChangeOpts {
2497
- fromIndex: number
2498
- gap: number
2499
- itemHeight: number
2500
- scrollHeight: number
2501
- scrollTop: number
2502
- toIndex: number
2503
- }
2504
-
2505
- /** @beta */
2506
- export declare type VirtualListElementType = 'div' | ComponentType
2507
-
2508
- /** @beta */
2509
- export declare type VirtualListOwnProps<Item = any> = {
2510
- gap?: Space
2511
- getItemKey?: (item: Item, itemIndex: number) => string
2512
- items?: Item[]
2513
- onChange?: (opts: VirtualListChangeOpts) => void
2514
- renderItem?: (item: Item) => ReactNode
2515
- }
2516
-
2517
- /** @beta */
2518
- export declare type VirtualListProps<E extends VirtualListElementType = VirtualListElementType> =
2519
- Props<VirtualListOwnProps, E>
2520
-
2521
- export {}