@spfx-fast/sharepoint-ui 0.0.0-stage → 0.4.1

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 (156) hide show
  1. package/AGENTS.md +211 -0
  2. package/LICENSE +21 -0
  3. package/README.md +897 -2
  4. package/components.json +5811 -0
  5. package/dist/appearance.d.ts +6 -0
  6. package/dist/appearance.js +217 -0
  7. package/dist/elements/accordion.d.ts +9 -0
  8. package/dist/elements/accordion.js +338 -0
  9. package/dist/elements/alert.d.ts +2 -0
  10. package/dist/elements/alert.js +62 -0
  11. package/dist/elements/avatar-group-primitives.d.ts +3 -0
  12. package/dist/elements/avatar-group-primitives.js +189 -0
  13. package/dist/elements/avatar-group.d.ts +2 -0
  14. package/dist/elements/avatar-group.js +110 -0
  15. package/dist/elements/avatar.d.ts +4 -0
  16. package/dist/elements/avatar.js +251 -0
  17. package/dist/elements/badge.d.ts +8 -0
  18. package/dist/elements/badge.js +182 -0
  19. package/dist/elements/breadcrumb.d.ts +4 -0
  20. package/dist/elements/breadcrumb.js +233 -0
  21. package/dist/elements/button-group.d.ts +1 -0
  22. package/dist/elements/button-group.js +20 -0
  23. package/dist/elements/button-variants.d.ts +6 -0
  24. package/dist/elements/button-variants.js +339 -0
  25. package/dist/elements/button.d.ts +5 -0
  26. package/dist/elements/button.js +233 -0
  27. package/dist/elements/card-primitives.d.ts +3 -0
  28. package/dist/elements/card-primitives.js +83 -0
  29. package/dist/elements/card.d.ts +5 -0
  30. package/dist/elements/card.js +213 -0
  31. package/dist/elements/carousel.d.ts +92 -0
  32. package/dist/elements/carousel.js +1112 -0
  33. package/dist/elements/color-picker.d.ts +24 -0
  34. package/dist/elements/color-picker.js +1004 -0
  35. package/dist/elements/combobox.d.ts +1 -0
  36. package/dist/elements/combobox.js +1012 -0
  37. package/dist/elements/data-grid-model.d.ts +117 -0
  38. package/dist/elements/data-grid-model.js +294 -0
  39. package/dist/elements/data-grid.d.ts +29 -0
  40. package/dist/elements/data-grid.js +1567 -0
  41. package/dist/elements/date-picker.d.ts +1 -0
  42. package/dist/elements/date-picker.js +486 -0
  43. package/dist/elements/dialog.d.ts +23 -0
  44. package/dist/elements/dialog.js +409 -0
  45. package/dist/elements/divider.d.ts +2 -0
  46. package/dist/elements/divider.js +66 -0
  47. package/dist/elements/drawer.d.ts +3 -0
  48. package/dist/elements/drawer.js +308 -0
  49. package/dist/elements/field-composition.d.ts +26 -0
  50. package/dist/elements/field-composition.js +133 -0
  51. package/dist/elements/field.d.ts +1 -0
  52. package/dist/elements/field.js +67 -0
  53. package/dist/elements/file-upload.d.ts +6 -0
  54. package/dist/elements/file-upload.js +211 -0
  55. package/dist/elements/floating-position.d.ts +26 -0
  56. package/dist/elements/floating-position.js +39 -0
  57. package/dist/elements/image.d.ts +28 -0
  58. package/dist/elements/image.js +38 -0
  59. package/dist/elements/info.d.ts +9 -0
  60. package/dist/elements/info.js +102 -0
  61. package/dist/elements/input.d.ts +5 -0
  62. package/dist/elements/input.js +255 -0
  63. package/dist/elements/label.d.ts +15 -0
  64. package/dist/elements/label.js +56 -0
  65. package/dist/elements/link.d.ts +1 -0
  66. package/dist/elements/link.js +92 -0
  67. package/dist/elements/list.d.ts +19 -0
  68. package/dist/elements/list.js +297 -0
  69. package/dist/elements/menu.d.ts +33 -0
  70. package/dist/elements/menu.js +1103 -0
  71. package/dist/elements/message-bar.d.ts +10 -0
  72. package/dist/elements/message-bar.js +299 -0
  73. package/dist/elements/nav.d.ts +32 -0
  74. package/dist/elements/nav.js +791 -0
  75. package/dist/elements/overflow.d.ts +9 -0
  76. package/dist/elements/overflow.js +218 -0
  77. package/dist/elements/persona.d.ts +3 -0
  78. package/dist/elements/persona.js +125 -0
  79. package/dist/elements/popover.d.ts +77 -0
  80. package/dist/elements/popover.js +840 -0
  81. package/dist/elements/progress-bar.d.ts +4 -0
  82. package/dist/elements/progress-bar.js +82 -0
  83. package/dist/elements/radio-group.d.ts +1 -0
  84. package/dist/elements/radio-group.js +303 -0
  85. package/dist/elements/rating-display.d.ts +2 -0
  86. package/dist/elements/rating-display.js +125 -0
  87. package/dist/elements/rating.d.ts +2 -0
  88. package/dist/elements/rating.js +206 -0
  89. package/dist/elements/rich-text-editor.d.ts +18 -0
  90. package/dist/elements/rich-text-editor.js +508 -0
  91. package/dist/elements/search.d.ts +3 -0
  92. package/dist/elements/search.js +207 -0
  93. package/dist/elements/select.d.ts +6 -0
  94. package/dist/elements/select.js +291 -0
  95. package/dist/elements/shared.d.ts +19 -0
  96. package/dist/elements/shared.js +396 -0
  97. package/dist/elements/skeleton.d.ts +6 -0
  98. package/dist/elements/skeleton.js +91 -0
  99. package/dist/elements/slider.d.ts +1 -0
  100. package/dist/elements/slider.js +248 -0
  101. package/dist/elements/spin-button.d.ts +7 -0
  102. package/dist/elements/spin-button.js +499 -0
  103. package/dist/elements/spinner.d.ts +4 -0
  104. package/dist/elements/spinner.js +124 -0
  105. package/dist/elements/swatch-picker.d.ts +5 -0
  106. package/dist/elements/swatch-picker.js +363 -0
  107. package/dist/elements/table.d.ts +21 -0
  108. package/dist/elements/table.js +261 -0
  109. package/dist/elements/tabs.d.ts +1 -0
  110. package/dist/elements/tabs.js +276 -0
  111. package/dist/elements/tag-picker.d.ts +29 -0
  112. package/dist/elements/tag-picker.js +697 -0
  113. package/dist/elements/tags.d.ts +21 -0
  114. package/dist/elements/tags.js +421 -0
  115. package/dist/elements/teaching-popover.d.ts +32 -0
  116. package/dist/elements/teaching-popover.js +412 -0
  117. package/dist/elements/text.d.ts +9 -0
  118. package/dist/elements/text.js +75 -0
  119. package/dist/elements/textarea.d.ts +1 -0
  120. package/dist/elements/textarea.js +182 -0
  121. package/dist/elements/toast.d.ts +25 -0
  122. package/dist/elements/toast.js +337 -0
  123. package/dist/elements/toaster.d.ts +6 -0
  124. package/dist/elements/toaster.js +356 -0
  125. package/dist/elements/toggle.d.ts +2 -0
  126. package/dist/elements/toggle.js +246 -0
  127. package/dist/elements/toolbar.d.ts +12 -0
  128. package/dist/elements/toolbar.js +381 -0
  129. package/dist/elements/tooltip.d.ts +76 -0
  130. package/dist/elements/tooltip.js +510 -0
  131. package/dist/elements/tree-model.d.ts +19 -0
  132. package/dist/elements/tree-model.js +34 -0
  133. package/dist/elements/tree.d.ts +5 -0
  134. package/dist/elements/tree.js +273 -0
  135. package/dist/elements/view-card.d.ts +2 -0
  136. package/dist/elements/view-card.js +78 -0
  137. package/dist/elements/virtual-list.d.ts +41 -0
  138. package/dist/elements/virtual-list.js +369 -0
  139. package/dist/elements.d.ts +72 -0
  140. package/dist/elements.js +207 -0
  141. package/dist/index.d.ts +76 -0
  142. package/dist/index.js +66 -0
  143. package/dist/react.d.ts +4546 -0
  144. package/dist/react.js +6837 -0
  145. package/dist/theme.d.ts +169 -0
  146. package/dist/theme.js +167 -0
  147. package/dist/virtualizer-hooks.d.ts +80 -0
  148. package/dist/virtualizer-hooks.js +253 -0
  149. package/package.json +87 -4
  150. package/scripts/generate-token-index.mjs +43 -0
  151. package/scripts/sync-component-catalog-signatures.mjs +55 -0
  152. package/scripts/validate-component-catalog.mjs +44 -0
  153. package/skills/sharepoint-ui/SKILL.md +12 -0
  154. package/skills/sharepoint-ui/references/choosing-components.md +20 -0
  155. package/skills/sharepoint-ui/references/sharepoint-patterns.md +17 -0
  156. package/tokens.json +3777 -0
@@ -0,0 +1,4546 @@
1
+ import * as React from "react";
2
+ import { type ButtonAppearance, type ButtonShape, type ButtonSize } from "./elements/button-variants.js";
3
+ import { type InputAppearance, type InputSize, type InputType } from "./elements/input.js";
4
+ import { type FileUploadError } from "./elements/file-upload.js";
5
+ import { type ImageFit, type ImageShape } from "./elements/image.js";
6
+ import { type FieldOrientation, type FieldValidationState } from "./elements/field-composition.js";
7
+ import { type CardAppearance, type CardFocusMode, type CardOrientation, type CardSize } from "./elements/card.js";
8
+ import { type BadgeAppearance, type BadgeColor, type BadgeShape, type BadgeSize, type PresenceBadgeStatus } from "./elements/badge.js";
9
+ import { type SpinnerAppearance, type SpinnerLabelPosition, type SpinnerSize } from "./elements/spinner.js";
10
+ export type { SpinnerAppearance, SpinnerLabelPosition, SpinnerSize } from "./elements/spinner.js";
11
+ import { type MessageBarGroupAnimation, type MessageBarIntent, type MessageBarLayout, type MessageBarPoliteness, type MessageBarShape } from "./elements/message-bar.js";
12
+ export type { DialogOpenChangeData } from "./elements/dialog.js";
13
+ export type DialogOpenChangeEvent = React.KeyboardEvent<HTMLElement> | React.MouseEvent<HTMLElement>;
14
+ export type DialogOnOpenChangeData = {
15
+ type: "escapeKeyDown";
16
+ open: boolean;
17
+ event: React.KeyboardEvent<HTMLElement>;
18
+ } | {
19
+ type: "backdropClick" | "triggerClick";
20
+ open: boolean;
21
+ event: React.MouseEvent<HTMLElement>;
22
+ };
23
+ import { type ProgressBarColor, type ProgressBarShape, type ProgressBarThickness } from "./elements/progress-bar.js";
24
+ export type { ProgressBarColor, ProgressBarShape, ProgressBarThickness } from "./elements/progress-bar.js";
25
+ export type { SpinButtonAppearance, SpinButtonSize, SpinButtonChangeData } from "./elements/spin-button.js";
26
+ import { type SkeletonAnimation, type SkeletonAppearance, type SkeletonItemSize, type SkeletonShape } from "./elements/skeleton.js";
27
+ import { type DividerAppearance } from "./elements/divider.js";
28
+ export type { DividerAppearance } from "./elements/divider.js";
29
+ import { type AccordionItemValue, type AccordionNavigation } from "./elements/accordion.js";
30
+ import { type AvatarColor } from "./elements/avatar.js";
31
+ import { type PersonaPresence, type PersonaSize } from "./elements/persona.js";
32
+ import { type VirtualListDataSource } from "./elements/virtual-list.js";
33
+ import { type DataGridCellEdit, type DataGridColumn, type DataGridDataSource, type DataGridDataSourceRow, type DataGridColumnSizingOptions, type DataGridColumnWidths, type DataGridEditValue, type DataGridFocusMode, type DataGridSelectionAppearance, type DataGridSelectionModel, type DataGridSort } from "./elements/data-grid-model.js";
34
+ import { type TreeNode } from "./elements/tree-model.js";
35
+ import { type InteractionTagSelectData, type TagAppearance, type TagGroupSelectData, type TagSize } from "./elements/tags.js";
36
+ import { type TagPickerOpenChangeType } from "./elements/tag-picker.js";
37
+ export type { TagPickerOpenChangeType, TagPickerOnOpenChangeData, TagPickerOnOptionSelectData } from "./elements/tag-picker.js";
38
+ import { type ListItemValue, type ListNavigationMode, type ListSelectionMode } from "./elements/list.js";
39
+ export type { ListItemActionData, ListItemActionEvent, ListSelectionChangeData } from "./elements/list.js";
40
+ import { type TooltipAppearance, type TooltipPositioning, type TooltipRelationship, type TooltipVisibleChangeData } from "./elements/tooltip.js";
41
+ export type { TooltipPositioning, TooltipPositioningBoundary, TooltipPositioningEndData, TooltipPositioningImperativeRef, TooltipPositioningOffset, TooltipPositioningOffsetParams, TooltipPositioningOptions, TooltipPositioningPlacement, TooltipPositioningRect, TooltipPositioningRef, TooltipPositioningShorthand, TooltipPositioningTarget, TooltipPositioningTargetRect } from "./elements/tooltip.js";
42
+ import { type PopoverOpenChangeData, type PopoverPositioning } from "./elements/popover.js";
43
+ export type { PopoverAlignment, PopoverAutoSize, PopoverBoundary, PopoverBoundaryPadding, PopoverBoundaryRect, PopoverOffset, PopoverOffsetParams, PopoverOpenChangeData, PopoverPosition, PopoverPositioning, PopoverPositioningEndData, PopoverPositioningImperativeRef, PopoverPositioningOptions, PopoverPositioningPlacement, PopoverPositioningRef, PopoverPositioningTargetRect, PopoverTarget } from "./elements/popover.js";
44
+ import { type TeachingPopoverCarouselValueChangeType } from "./elements/teaching-popover.js";
45
+ export type { TeachingPopoverCarouselValueChangeType, TeachingPopoverCarouselValueChangeDetail, TeachingPopoverFinishDetail } from "./elements/teaching-popover.js";
46
+ import { type MenuOpenChangeData } from "./elements/menu.js";
47
+ export type { MenuOpenChangeData, MenuOpenChangeType } from "./elements/menu.js";
48
+ import { type TextFont, type TextSize, type TextTag, type TextWeight } from "./elements/text.js";
49
+ import { type ToastIntent, type ToastPoliteness } from "./elements/toast.js";
50
+ import { type ToastAnnounce, type ToastPosition } from "./elements/toaster.js";
51
+ export type { ToastAnnounce, ToastAnnounceOptions } from "./elements/toaster.js";
52
+ export type { ToastAppearance } from "./elements/toast.js";
53
+ import { type SearchAppearance, type SearchSize } from "./elements/search.js";
54
+ import { type ColorPickerFormat, type ColorPickerHsvColor, type ColorPickerShape, type ColorPickerSize, type ColorSliderChannel } from "./elements/color-picker.js";
55
+ export type { ColorPickerHsvColor } from "./elements/color-picker.js";
56
+ import { type ToolbarCheckedValues } from "./elements/toolbar.js";
57
+ import { type NavItemSelectData, type NavCategoryToggleData } from "./elements/nav.js";
58
+ export type { NavItemSelectData, NavCategoryToggleData } from "./elements/nav.js";
59
+ export type NavReactItemSelectData = Omit<NavItemSelectData, "event" | "type"> & ({
60
+ type: undefined;
61
+ event: SharePointUIEvent;
62
+ } | {
63
+ type: "click";
64
+ event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>;
65
+ });
66
+ export type NavReactCategoryToggleData = Omit<NavCategoryToggleData, "event" | "type"> & ({
67
+ type: undefined;
68
+ event: SharePointUIEvent;
69
+ } | {
70
+ type: "click";
71
+ event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>;
72
+ });
73
+ import { type LabelSize, type LabelWeight } from "./elements/label.js";
74
+ import { type InfoPlacement } from "./elements/info.js";
75
+ import { type CarouselAlign, type CarouselAppearance, type CarouselMotion } from "./elements/carousel.js";
76
+ export type { CarouselIndexChangeData } from "./elements/carousel.js";
77
+ export type { CarouselAlign, CarouselAppearance, CarouselMotion } from "./elements/carousel.js";
78
+ import { type OverflowAxis, type OverflowState } from "./elements/overflow.js";
79
+ export type { OverflowAxis, OverflowState } from "./elements/overflow.js";
80
+ import { type SharePointUIAppearance, type SharePointUIBaseAppearance, type SharePointUIDensity, type SharePointUIStyleTokens } from "./appearance.js";
81
+ import { type FluentThemeTokens, type SharePointUIDesignTheme } from "./theme.js";
82
+ export { createResizeObserverFromDocument, getRTLRootMargin, scrollToItemDynamic, scrollToItemStatic, useDynamicVirtualizerMeasure, useIntersectionObserver, useMeasureList, useResizeObserverRef_unstable, useStaticVirtualizerMeasure } from "./virtualizer-hooks.js";
83
+ export type { IndexedResizeCallbackElement, ResizeCallbackWithRef, ScrollToItemDynamicParams, ScrollToItemStaticParams, VirtualizerContextMeasureProps, VirtualizerMeasureDynamicProps, VirtualizerMeasureProps } from "./virtualizer-hooks.js";
84
+ export { composeSharePointUIDesignThemes } from "./theme.js";
85
+ export type { FluentThemeTokens, SharePointUIDesignTheme } from "./theme.js";
86
+ export type { AvatarColor, AvatarNamedColor } from "./elements/avatar.js";
87
+ export type { SharePointUIDensity } from "./appearance.js";
88
+ export type SharePointUIEvent = Event | React.SyntheticEvent;
89
+ type MenuEventData<T> = T extends {
90
+ type: infer Type;
91
+ event: infer E;
92
+ } ? Type extends "clickOutside" | "scrollOutside" | "menuMouseEnter" ? Omit<T, "event"> & {
93
+ event: E;
94
+ } : Type extends "menuSafeZoneMouseEnter" ? Omit<T, "event"> & {
95
+ event: React.MouseEvent<Element>;
96
+ } : Omit<T, "event"> & {
97
+ event: E extends MouseEvent ? React.MouseEvent<HTMLElement> : E extends KeyboardEvent ? React.KeyboardEvent<HTMLElement> : E;
98
+ } : never;
99
+ type MenuReactOpenChangeData = MenuOpenChangeData extends infer T ? T extends MenuOpenChangeData ? MenuEventData<T> : never : never;
100
+ type MenuReactOpenChangeEvent = MenuReactOpenChangeData["event"];
101
+ type ElementProps = React.HTMLAttributes<HTMLElement> & {
102
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
103
+ };
104
+ export type FieldControlProps = Pick<React.HTMLAttributes<HTMLElement>, "id" | "aria-label" | "aria-labelledby" | "aria-describedby" | "aria-description" | "aria-invalid" | "aria-required">;
105
+ export type FieldControlOptions = {
106
+ supportsLabelFor?: boolean;
107
+ supportsRequired?: boolean;
108
+ supportsSize?: boolean;
109
+ };
110
+ export type FieldContextValue = Readonly<{
111
+ generatedControlId: string;
112
+ labelText?: string;
113
+ descriptionText?: string;
114
+ orientation: FieldOrientation;
115
+ required: boolean;
116
+ size: LabelSize;
117
+ validationState: FieldValidationState;
118
+ labelFor?: string;
119
+ labelId?: string;
120
+ validationMessageId?: string;
121
+ hintId?: string;
122
+ disabled?: boolean;
123
+ }>;
124
+ /** Merge Field context into a form control or custom control's prop set. */
125
+ export declare function useFieldControlProps_unstable<T extends object>(props: T, options?: FieldControlOptions): T & FieldControlProps;
126
+ export type ToastDispatchOptions = {
127
+ id?: string;
128
+ toastId?: string;
129
+ title?: React.ReactNode;
130
+ priority?: number;
131
+ intent?: ToastIntent;
132
+ appearance?: "brand" | "inverted";
133
+ politeness?: ToastPoliteness;
134
+ timeout?: number;
135
+ dismissLabel?: string;
136
+ pauseOnHover?: boolean;
137
+ pauseOnWindowBlur?: boolean;
138
+ action?: React.ReactNode;
139
+ onAction?: (id: string) => void;
140
+ };
141
+ export type SharePointUIStrings = {
142
+ loading: string;
143
+ close: string;
144
+ dialogLabel?: string;
145
+ richTextEditorLabel?: string;
146
+ dismiss: string;
147
+ notifications?: string;
148
+ clear: string;
149
+ spinButtonIncrement?: string;
150
+ spinButtonDecrement?: string;
151
+ remove: string;
152
+ noResults: string;
153
+ selectedOptionsLabel?: string;
154
+ required: string;
155
+ invalidValue: string;
156
+ moreInformation: string;
157
+ people?: string;
158
+ showMorePeople?: string;
159
+ showFewerPeople?: string;
160
+ navigationMenu?: string;
161
+ navigationClose?: string;
162
+ navigationExpand?: string;
163
+ navigationCollapse?: string;
164
+ treeLabel?: string;
165
+ treeToggleLabel?: string;
166
+ treeEmptyMessage?: string;
167
+ splitButtonMenuLabel?: string;
168
+ navigationToggle?: string;
169
+ splitNavItemActionLabel?: string;
170
+ virtualizerLabel?: string;
171
+ dataGridLabel?: string;
172
+ dataGridFilterLabel?: string;
173
+ dataGridSelectRow?: string;
174
+ dataGridSelectAll?: string;
175
+ dataGridRowLabel?: string;
176
+ dataGridLoadingLabel?: string;
177
+ dataGridEmptyLabel?: string;
178
+ dataGridSortPriority?: string;
179
+ dataGridResizeLabel?: string;
180
+ dataGridReorderLabel?: string;
181
+ dataGridEmptyGroupLabel?: string;
182
+ dataGridExpandGroupLabel?: string;
183
+ dataGridCollapseGroupLabel?: string;
184
+ dataGridGroupCountLabel?: string;
185
+ dataGridEditHint?: string;
186
+ dataGridSelectionCopied?: string;
187
+ dataGridCopyFailed?: string;
188
+ dataGridPasteOne?: string;
189
+ dataGridPasteMany?: string;
190
+ dataGridPasteFailed?: string;
191
+ dataGridColumnReordered?: string;
192
+ tableResizeHandle?: string;
193
+ toolbarLabel?: string;
194
+ breadcrumbLabel?: string;
195
+ menuBarLabel?: string;
196
+ drawerExpand?: string;
197
+ drawerRestore?: string;
198
+ drawerLabel?: string;
199
+ drawerNavigation?: string;
200
+ tableResizeColumn?: string;
201
+ ratingValue: string;
202
+ colorChoose: string;
203
+ colorHex: string;
204
+ colorHue?: string;
205
+ colorArea?: string;
206
+ colorAreaValue?: string;
207
+ colorSaturation?: string;
208
+ colorValue?: string;
209
+ colorFormat?: string;
210
+ colorRgb?: string;
211
+ colorRed?: string;
212
+ colorGreen?: string;
213
+ colorBlue?: string;
214
+ colorOpacity: string;
215
+ colorSwatches: string;
216
+ colorAdd?: string;
217
+ colorSwatch: string;
218
+ colorInvalid: string;
219
+ richTextBold: string;
220
+ richTextItalic: string;
221
+ richTextUnderline: string;
222
+ richTextBulletList: string;
223
+ richTextNumberList: string;
224
+ richTextLink: string;
225
+ richTextToolbar: string;
226
+ richTextLinkPrompt: string;
227
+ richTextRequired?: string;
228
+ richTextChooseImage?: string;
229
+ richTextUndo?: string;
230
+ richTextRedo?: string;
231
+ richTextInsertTable?: string;
232
+ richTextInsertImage?: string;
233
+ richTextInsertRowAbove?: string;
234
+ richTextInsertRowBelow?: string;
235
+ richTextInsertColumnBefore?: string;
236
+ richTextInsertColumnAfter?: string;
237
+ richTextDeleteRow?: string;
238
+ richTextDeleteColumn?: string;
239
+ richTextDeleteTable?: string;
240
+ fileUploadBrowse?: string;
241
+ fileUploadDrop?: string;
242
+ fileUploadRemove?: string;
243
+ fileUploadSelected?: string;
244
+ fileUploadRequired?: string;
245
+ fileUploadTypeError?: string;
246
+ fileUploadSizeError?: string;
247
+ fileUploadLimitError?: string;
248
+ datePickerCalendar?: string;
249
+ datePickerPreviousMonth?: string;
250
+ datePickerNextMonth?: string;
251
+ datePickerInvalid?: string;
252
+ datePickerRequired?: string;
253
+ carouselDescription?: string;
254
+ carouselPrevious?: string;
255
+ carouselNext?: string;
256
+ carouselSlide?: string;
257
+ carouselRoleDescription?: string;
258
+ carouselSlides?: string;
259
+ carouselNavigation?: string;
260
+ carouselPlay?: string;
261
+ carouselPause?: string;
262
+ teachingPopoverLabel?: string;
263
+ teachingPopoverDismiss?: string;
264
+ teachingPopoverPrevious?: string;
265
+ teachingPopoverNext?: string;
266
+ teachingPopoverFinish?: string;
267
+ teachingPopoverSteps?: string;
268
+ teachingPopoverPageCount?: string;
269
+ teachingPopoverPageLabel?: string;
270
+ overflowDescription?: string;
271
+ overflowMenuLabel?: string;
272
+ };
273
+ export type AvatarGroupContextValue = {
274
+ size: number;
275
+ layout: "stack" | "spread" | "pie";
276
+ isOverflow?: boolean;
277
+ };
278
+ type BreadcrumbSize = "small" | "medium" | "large";
279
+ export type MenuCheckedValues = Record<string, string[]>;
280
+ export type MenuCheckedValueChangeEvent = React.MouseEvent | React.KeyboardEvent;
281
+ export type MenuCheckedValueChangeData = {
282
+ name: string;
283
+ checkedItems: string[];
284
+ };
285
+ export type ToastControllerUpdateOptions = Omit<ToastDispatchOptions, "id" | "toastId"> & {
286
+ toastId: string;
287
+ content?: React.ReactNode;
288
+ };
289
+ type ToastControllerUpdate = {
290
+ (id: string, update: {
291
+ content?: React.ReactNode;
292
+ options?: ToastDispatchOptions;
293
+ }): void;
294
+ (options: ToastControllerUpdateOptions): void;
295
+ };
296
+ type ToastControllerValue = {
297
+ dispatchToast: (content: React.ReactNode, options?: ToastDispatchOptions) => string;
298
+ updateToast: ToastControllerUpdate;
299
+ dismissToast: (id: string) => void;
300
+ dismissAllToasts: () => void;
301
+ pauseToast: (id: string) => boolean;
302
+ playToast: (id: string) => boolean;
303
+ focusNewest: () => boolean;
304
+ };
305
+ export type CarouselContextValue = {
306
+ activeIndex: number;
307
+ appearance?: CarouselAppearance;
308
+ circular: boolean;
309
+ selectPageByElement: (event: React.FocusEvent, element: HTMLElement, jump?: boolean) => number;
310
+ selectPageByDirection: (event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>, direction: "next" | "prev") => number;
311
+ selectPageByIndex: (event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>, value: number, jump?: boolean) => void;
312
+ subscribeForValues: (listener: (data: {
313
+ activeIndex: number;
314
+ navItemsCount: number;
315
+ groupIndexList: number[][];
316
+ slideNodes: HTMLElement[];
317
+ canLoop?: boolean;
318
+ }) => void) => () => void;
319
+ enableAutoplay: (autoplay: boolean, temporary?: boolean) => void;
320
+ resetAutoplay: () => void;
321
+ containerRef?: React.RefObject<HTMLDivElement | null>;
322
+ viewportRef?: React.RefObject<HTMLDivElement | null>;
323
+ };
324
+ export type CarouselAnnouncerFunction = (index: number, totalSlides: number, slideGroupList: number[][]) => string;
325
+ type DividerWrapper = React.ReactElement | React.HTMLAttributes<HTMLDivElement>;
326
+ type NativeMousePointerEventProps<T extends Element> = Pick<React.DOMAttributes<T>, "onAuxClick" | "onAuxClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerMove" | "onPointerMoveCapture" | "onPointerOut" | "onPointerOutCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerUp" | "onPointerUpCapture">;
327
+ type NativeAdditionalEventProps<T extends Element> = Pick<React.DOMAttributes<T>, "onInvalid" | "onInvalidCapture" | "onChange" | "onChangeCapture" | "onScroll" | "onScrollCapture" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture">;
328
+ type NativeRootEventProps<T extends Element> = Pick<React.DOMAttributes<T>, "onKeyDown" | "onKeyDownCapture" | "onKeyUp" | "onKeyUpCapture" | "onKeyPress" | "onKeyPressCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture"> & NativeMousePointerEventProps<T> & NativeAdditionalEventProps<T>;
329
+ export declare function SharePointUIProvider({ children, lang, dir, appearance, baseAppearance, density, theme, tokens, fluentTokens, strings }: React.PropsWithChildren<{
330
+ lang?: string;
331
+ dir?: "ltr" | "rtl" | "auto";
332
+ appearance?: SharePointUIAppearance;
333
+ baseAppearance?: SharePointUIBaseAppearance;
334
+ density?: SharePointUIDensity;
335
+ theme?: SharePointUIDesignTheme;
336
+ tokens?: Partial<SharePointUIStyleTokens>;
337
+ fluentTokens?: FluentThemeTokens;
338
+ strings?: Partial<SharePointUIStrings>;
339
+ }>): React.ReactElement;
340
+ export type TextProps = ElementProps & {
341
+ as?: TextTag;
342
+ size?: TextSize;
343
+ weight?: TextWeight;
344
+ font?: TextFont;
345
+ align?: "start" | "center" | "end" | "justify";
346
+ italic?: boolean;
347
+ underline?: boolean;
348
+ strikethrough?: boolean;
349
+ truncate?: boolean;
350
+ wrap?: boolean;
351
+ block?: boolean;
352
+ children?: React.ReactNode;
353
+ };
354
+ export declare const Text: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
355
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
356
+ } & {
357
+ as?: TextTag;
358
+ size?: TextSize;
359
+ weight?: TextWeight;
360
+ font?: TextFont;
361
+ align?: "start" | "center" | "end" | "justify";
362
+ italic?: boolean;
363
+ underline?: boolean;
364
+ strikethrough?: boolean;
365
+ truncate?: boolean;
366
+ wrap?: boolean;
367
+ block?: boolean;
368
+ children?: React.ReactNode;
369
+ } & React.RefAttributes<HTMLElement>>;
370
+ export type TextPresetProps = Omit<Parameters<typeof Text>[0], "size" | "weight" | "font">;
371
+ export declare function Body1(props: TextPresetProps): React.ReactElement;
372
+ export declare function Body1Strong(props: TextPresetProps): React.ReactElement;
373
+ export declare function Body1Stronger(props: TextPresetProps): React.ReactElement;
374
+ export declare function Body2(props: TextPresetProps): React.ReactElement;
375
+ export declare function Caption1(props: TextPresetProps): React.ReactElement;
376
+ export declare function Caption1Strong(props: TextPresetProps): React.ReactElement;
377
+ export declare function Caption1Stronger(props: TextPresetProps): React.ReactElement;
378
+ export declare function Caption2(props: TextPresetProps): React.ReactElement;
379
+ export declare function Caption2Strong(props: TextPresetProps): React.ReactElement;
380
+ export declare function Display(props: TextPresetProps): React.ReactElement;
381
+ export declare function LargeTitle(props: TextPresetProps): React.ReactElement;
382
+ export declare function Subtitle1(props: TextPresetProps): React.ReactElement;
383
+ export declare function Subtitle2(props: TextPresetProps): React.ReactElement;
384
+ export declare function Subtitle2Stronger(props: TextPresetProps): React.ReactElement;
385
+ export declare function Title1(props: TextPresetProps): React.ReactElement;
386
+ export declare function Title2(props: TextPresetProps): React.ReactElement;
387
+ export declare function Title3(props: TextPresetProps): React.ReactElement;
388
+ export type LabelRequiredSlotProps = React.HTMLAttributes<HTMLSpanElement> & {
389
+ children?: React.ReactNode;
390
+ };
391
+ export type LabelRequired = boolean | React.ReactNode | LabelRequiredSlotProps;
392
+ export type LabelProps = React.LabelHTMLAttributes<HTMLLabelElement> & {
393
+ size?: LabelSize;
394
+ weight?: LabelWeight;
395
+ required?: LabelRequired;
396
+ disabled?: boolean;
397
+ };
398
+ export declare const Label: React.ForwardRefExoticComponent<React.LabelHTMLAttributes<HTMLLabelElement> & {
399
+ size?: LabelSize;
400
+ weight?: LabelWeight;
401
+ required?: LabelRequired;
402
+ disabled?: boolean;
403
+ } & React.RefAttributes<HTMLLabelElement>>;
404
+ export type InfoButtonPopoverProps = {
405
+ label?: string;
406
+ placement?: InfoPlacement;
407
+ arrow?: boolean;
408
+ trapFocus?: boolean;
409
+ };
410
+ export declare const InfoButton: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
411
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
412
+ } & {
413
+ info?: React.ReactNode;
414
+ children?: React.ReactNode;
415
+ label?: string;
416
+ placement?: InfoPlacement;
417
+ size?: "small" | "medium" | "large";
418
+ inline?: boolean;
419
+ popover?: InfoButtonPopoverProps;
420
+ open?: boolean;
421
+ onOpenChange?: (open: boolean) => void;
422
+ } & React.RefAttributes<HTMLElement>>;
423
+ export type InfoLabelLabelSlot = React.ReactElement<any> | Omit<Parameters<typeof Label>[0], "children">;
424
+ export type InfoLabelButtonSlot = React.ReactElement<any> | Omit<Parameters<typeof InfoButton>[0], "children" | "info">;
425
+ export type InfoLabelProps = React.HTMLAttributes<HTMLSpanElement> & {
426
+ children?: React.ReactNode;
427
+ info: React.ReactNode;
428
+ htmlFor?: string;
429
+ size?: LabelSize;
430
+ weight?: LabelWeight;
431
+ required?: LabelRequired;
432
+ disabled?: boolean;
433
+ infoButtonLabel?: string;
434
+ placement?: InfoPlacement;
435
+ label?: InfoLabelLabelSlot;
436
+ infoButton?: InfoLabelButtonSlot | null;
437
+ };
438
+ export declare const InfoLabel: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & {
439
+ children?: React.ReactNode;
440
+ info: React.ReactNode;
441
+ htmlFor?: string;
442
+ size?: LabelSize;
443
+ weight?: LabelWeight;
444
+ required?: LabelRequired;
445
+ disabled?: boolean;
446
+ infoButtonLabel?: string;
447
+ placement?: InfoPlacement;
448
+ label?: InfoLabelLabelSlot;
449
+ infoButton?: InfoLabelButtonSlot | null;
450
+ } & React.RefAttributes<HTMLSpanElement>>;
451
+ export type ButtonContextValue = {
452
+ size?: ButtonSize;
453
+ };
454
+ export declare const ButtonContextProvider: React.Provider<ButtonContextValue | undefined>;
455
+ export declare function useButtonContext(): ButtonContextValue;
456
+ type NativeClickHostProps<T extends Element> = Omit<ElementProps, keyof NativeRootEventProps<T> | "onClick" | "onClickCapture"> & NativeRootEventProps<T> & {
457
+ onClick?: React.MouseEventHandler<T>;
458
+ onClickCapture?: React.MouseEventHandler<T>;
459
+ };
460
+ type NativeButtonHostProps = NativeClickHostProps<HTMLButtonElement>;
461
+ export type ButtonProps = NativeClickHostProps<HTMLButtonElement | HTMLAnchorElement> & {
462
+ as?: "button" | "a";
463
+ href?: string;
464
+ target?: string;
465
+ rel?: string;
466
+ download?: string | boolean;
467
+ hrefLang?: string;
468
+ referrerPolicy?: string;
469
+ form?: string;
470
+ formAction?: string;
471
+ formEncType?: string;
472
+ formMethod?: string;
473
+ formNoValidate?: boolean;
474
+ formTarget?: string;
475
+ name?: string;
476
+ value?: string | number | readonly string[];
477
+ type?: "button" | "submit" | "reset";
478
+ variant?: "primary" | "default";
479
+ appearance?: ButtonAppearance;
480
+ size?: ButtonSize;
481
+ shape?: ButtonShape;
482
+ iconOnly?: boolean;
483
+ disabled?: boolean;
484
+ disabledFocusable?: boolean;
485
+ vertical?: boolean;
486
+ icon?: React.ReactNode;
487
+ iconPosition?: "before" | "after";
488
+ };
489
+ export declare const Button: React.ForwardRefExoticComponent<Omit<ElementProps, "onClick" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & Pick<React.DOMAttributes<HTMLAnchorElement | HTMLButtonElement>, "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture"> & NativeMousePointerEventProps<HTMLAnchorElement | HTMLButtonElement> & NativeAdditionalEventProps<HTMLAnchorElement | HTMLButtonElement> & {
490
+ onClick?: React.MouseEventHandler<HTMLAnchorElement | HTMLButtonElement> | undefined;
491
+ onClickCapture?: React.MouseEventHandler<HTMLAnchorElement | HTMLButtonElement> | undefined;
492
+ } & {
493
+ as?: "button" | "a";
494
+ href?: string;
495
+ target?: string;
496
+ rel?: string;
497
+ download?: string | boolean;
498
+ hrefLang?: string;
499
+ referrerPolicy?: string;
500
+ form?: string;
501
+ formAction?: string;
502
+ formEncType?: string;
503
+ formMethod?: string;
504
+ formNoValidate?: boolean;
505
+ formTarget?: string;
506
+ name?: string;
507
+ value?: string | number | readonly string[];
508
+ type?: "button" | "submit" | "reset";
509
+ variant?: "primary" | "default";
510
+ appearance?: ButtonAppearance;
511
+ size?: ButtonSize;
512
+ shape?: ButtonShape;
513
+ iconOnly?: boolean;
514
+ disabled?: boolean;
515
+ disabledFocusable?: boolean;
516
+ vertical?: boolean;
517
+ icon?: React.ReactNode;
518
+ iconPosition?: "before" | "after";
519
+ } & React.RefAttributes<HTMLElement>>;
520
+ /** A themed menu trigger. Compose it as Menu's trigger; Menu owns open state, focus, and dismissal. */
521
+ export declare const MenuButton: React.ForwardRefExoticComponent<Omit<ElementProps, "onClick" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & Pick<React.DOMAttributes<HTMLButtonElement>, "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture"> & NativeMousePointerEventProps<HTMLButtonElement> & NativeAdditionalEventProps<HTMLButtonElement> & {
522
+ onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
523
+ onClickCapture?: React.MouseEventHandler<HTMLButtonElement> | undefined;
524
+ } & {
525
+ children?: React.ReactNode;
526
+ icon?: React.ReactNode;
527
+ menuIcon?: React.ReactNode;
528
+ appearance?: ButtonAppearance;
529
+ size?: ButtonSize;
530
+ shape?: ButtonShape;
531
+ disabled?: boolean;
532
+ disabledFocusable?: boolean;
533
+ type?: "button" | "submit" | "reset";
534
+ } & React.RefAttributes<HTMLElement>>;
535
+ export declare const ButtonGroup: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
536
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
537
+ } & {
538
+ children?: React.ReactNode;
539
+ orientation?: "horizontal" | "vertical";
540
+ label?: string;
541
+ } & React.RefAttributes<HTMLElement>>;
542
+ export declare const CompoundButton: React.ForwardRefExoticComponent<Omit<ElementProps, "onClick" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & Pick<React.DOMAttributes<HTMLButtonElement>, "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture"> & NativeMousePointerEventProps<HTMLButtonElement> & NativeAdditionalEventProps<HTMLButtonElement> & {
543
+ onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
544
+ onClickCapture?: React.MouseEventHandler<HTMLButtonElement> | undefined;
545
+ } & {
546
+ children?: React.ReactNode;
547
+ secondaryContent?: React.ReactNode;
548
+ contentContainer?: React.ReactElement;
549
+ icon?: React.ReactNode;
550
+ iconPosition?: "before" | "after";
551
+ appearance?: ButtonAppearance;
552
+ size?: ButtonSize;
553
+ shape?: ButtonShape;
554
+ disabled?: boolean;
555
+ disabledFocusable?: boolean;
556
+ } & React.RefAttributes<HTMLElement>>;
557
+ export declare const ToggleButton: React.ForwardRefExoticComponent<Omit<ElementProps, "onClick" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & Pick<React.DOMAttributes<HTMLButtonElement>, "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture"> & NativeMousePointerEventProps<HTMLButtonElement> & NativeAdditionalEventProps<HTMLButtonElement> & {
558
+ onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
559
+ onClickCapture?: React.MouseEventHandler<HTMLButtonElement> | undefined;
560
+ } & {
561
+ children?: React.ReactNode;
562
+ pressed?: boolean;
563
+ defaultPressed?: boolean;
564
+ checked?: boolean;
565
+ defaultChecked?: boolean;
566
+ isAccessible?: boolean;
567
+ onPressedChange?: (pressed: boolean) => void;
568
+ onCheckedChange?: (checked: boolean) => void;
569
+ appearance?: ButtonAppearance;
570
+ size?: ButtonSize;
571
+ shape?: ButtonShape;
572
+ disabled?: boolean;
573
+ disabledFocusable?: boolean;
574
+ icon?: React.ReactNode;
575
+ iconPosition?: "before" | "after";
576
+ name?: string;
577
+ value?: string;
578
+ } & React.RefAttributes<HTMLElement>>;
579
+ export declare const SplitButton: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
580
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
581
+ } & {
582
+ children: React.ReactNode;
583
+ menuItems: React.ReactNode;
584
+ menuLabel?: string;
585
+ appearance?: ButtonAppearance;
586
+ size?: ButtonSize;
587
+ shape?: ButtonShape;
588
+ disabled?: boolean;
589
+ disabledFocusable?: boolean;
590
+ icon?: React.ReactNode;
591
+ iconPosition?: "before" | "after";
592
+ menuIcon?: React.ReactNode;
593
+ onClick?: React.MouseEventHandler<HTMLElement>;
594
+ primaryActionButton?: React.ReactElement | Partial<React.ComponentProps<typeof Button>>;
595
+ menuButton?: React.ReactElement | Partial<React.ComponentProps<typeof MenuButton>>;
596
+ } & React.RefAttributes<HTMLElement>>;
597
+ export type ToolbarCheckedValueChangeEvent = React.MouseEvent | React.KeyboardEvent;
598
+ export type ToolbarCheckedValueChangeData = {
599
+ name: string;
600
+ checkedItems: string[];
601
+ };
602
+ export type ToolbarProps = NativeClickHostProps<HTMLDivElement> & {
603
+ children?: React.ReactNode;
604
+ label?: string;
605
+ orientation?: "horizontal" | "vertical";
606
+ vertical?: boolean;
607
+ loop?: boolean;
608
+ size?: "small" | "medium" | "large";
609
+ checkedValues?: ToolbarCheckedValues;
610
+ defaultCheckedValues?: ToolbarCheckedValues;
611
+ onCheckedValueChange?: (event: ToolbarCheckedValueChangeEvent, data: ToolbarCheckedValueChangeData) => void;
612
+ };
613
+ export declare const Toolbar: React.ForwardRefExoticComponent<Omit<ElementProps, "onClick" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & Pick<React.DOMAttributes<HTMLDivElement>, "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture"> & NativeMousePointerEventProps<HTMLDivElement> & NativeAdditionalEventProps<HTMLDivElement> & {
614
+ onClick?: React.MouseEventHandler<HTMLDivElement> | undefined;
615
+ onClickCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
616
+ } & {
617
+ children?: React.ReactNode;
618
+ label?: string;
619
+ orientation?: "horizontal" | "vertical";
620
+ vertical?: boolean;
621
+ loop?: boolean;
622
+ size?: "small" | "medium" | "large";
623
+ checkedValues?: ToolbarCheckedValues;
624
+ defaultCheckedValues?: ToolbarCheckedValues;
625
+ onCheckedValueChange?: (event: ToolbarCheckedValueChangeEvent, data: ToolbarCheckedValueChangeData) => void;
626
+ } & React.RefAttributes<HTMLElement>>;
627
+ export declare const ToolbarGroup: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
628
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
629
+ } & {
630
+ children?: React.ReactNode;
631
+ label?: string;
632
+ } & React.RefAttributes<HTMLElement>>;
633
+ export declare const ToolbarSeparator: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
634
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
635
+ } & React.RefAttributes<HTMLElement>>;
636
+ export declare function ToolbarButton({ children, icon, appearance, size, shape, vertical, ...props }: ElementProps & {
637
+ children?: React.ReactNode;
638
+ icon?: React.ReactNode;
639
+ appearance?: "primary" | "secondary" | "outline" | "subtle" | "transparent";
640
+ size?: "small" | "medium" | "large";
641
+ shape?: "rounded" | "circular" | "square";
642
+ vertical?: boolean;
643
+ }): React.ReactElement;
644
+ export declare function ToolbarToggleButton({ children, icon, name, value, appearance, size, shape, ...props }: ElementProps & {
645
+ children?: React.ReactNode;
646
+ icon?: React.ReactNode;
647
+ name: string;
648
+ value: string;
649
+ appearance?: "primary" | "secondary" | "outline" | "subtle" | "transparent";
650
+ size?: "small" | "medium" | "large";
651
+ shape?: "rounded" | "circular" | "square";
652
+ pressed?: boolean;
653
+ defaultPressed?: boolean;
654
+ onPressedChange?: (pressed: boolean) => void;
655
+ }): React.ReactElement;
656
+ export declare const ToolbarRadioGroup: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
657
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
658
+ } & {
659
+ children?: React.ReactNode;
660
+ label?: string;
661
+ } & React.RefAttributes<HTMLElement>>;
662
+ export declare const ToolbarRadioButton: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
663
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
664
+ } & {
665
+ children?: React.ReactNode;
666
+ icon?: React.ReactNode;
667
+ name: string;
668
+ value: string;
669
+ appearance?: "primary" | "subtle" | "transparent";
670
+ size?: "small" | "medium" | "large";
671
+ disabled?: boolean;
672
+ } & React.RefAttributes<HTMLElement>>;
673
+ export declare const ToolbarDivider: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
674
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
675
+ } & {
676
+ vertical?: boolean;
677
+ wrapper?: DividerWrapper;
678
+ } & React.RefAttributes<HTMLElement>>;
679
+ type OverflowItemBaseProps = ElementProps & {
680
+ id: string;
681
+ groupId?: string;
682
+ overflowLabel?: string;
683
+ overflowContent?: React.ReactNode;
684
+ children?: React.ReactNode;
685
+ };
686
+ export type OverflowItemProps = OverflowItemBaseProps & ({
687
+ pinned: true;
688
+ priority?: never;
689
+ } | {
690
+ pinned?: false;
691
+ priority?: number;
692
+ });
693
+ export declare const OverflowItem: React.ForwardRefExoticComponent<OverflowItemProps & React.RefAttributes<HTMLElement>>;
694
+ export declare const OverflowDivider: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
695
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
696
+ } & {
697
+ groupId: string;
698
+ children?: React.ReactNode;
699
+ } & React.RefAttributes<HTMLElement>>;
700
+ /** The native Overflow engine already observes child-list changes; this renderless marker is only needed by other implementations. */
701
+ export declare function OverflowReorderObserver(_props?: Record<string, never>): null;
702
+ export type OverflowGroupState = OverflowState["groupVisibility"][string];
703
+ export type OverflowItemEntry = {
704
+ element: HTMLElement;
705
+ id: string;
706
+ priority: number;
707
+ groupId?: string;
708
+ pinned?: boolean;
709
+ };
710
+ export type OverflowDividerEntry = {
711
+ element: HTMLElement;
712
+ groupId: string;
713
+ };
714
+ export type OverflowSnapshot = {
715
+ itemVisibility: Record<string, boolean>;
716
+ groupVisibility: Record<string, OverflowGroupState>;
717
+ invisibleItemCount: number;
718
+ };
719
+ export type OverflowContextValue = OverflowState & {
720
+ registerItem: (item: OverflowItemEntry) => () => void;
721
+ registerOverflowMenu: (element: HTMLElement) => () => void;
722
+ updateOverflow: (padding?: number) => void;
723
+ forceUpdateOverflow: () => void;
724
+ registerDivider: (divider: OverflowDividerEntry) => () => void;
725
+ containerRef?: React.RefObject<HTMLElement | null>;
726
+ getSnapshot: () => OverflowSnapshot;
727
+ subscribe: (listener: () => void) => () => void;
728
+ };
729
+ export declare function OverflowProvider({ value, children }: {
730
+ value: OverflowContextValue;
731
+ children?: React.ReactNode;
732
+ }): React.ReactElement;
733
+ export declare function useIsOverflowItemVisible(id: string): boolean;
734
+ export declare function useIsOverflowGroupVisible(id: string): OverflowGroupState;
735
+ export declare function useOverflowCount(): number;
736
+ export declare function useOverflowVisibility(): Pick<OverflowState, "itemVisibility" | "groupVisibility">;
737
+ /** Subscribe to a selected value from the latest overflow snapshot. */
738
+ export declare function useOverflowSnapshot<TSelected>(selector: (snapshot: OverflowSnapshot) => TSelected): TSelected;
739
+ export declare function useOverflowItem<TElement extends HTMLElement = HTMLElement>(id: string, priority?: number, groupId?: string, pinned?: boolean): React.RefObject<TElement | null>;
740
+ export declare function useOverflowDivider<TElement extends HTMLElement = HTMLElement>(groupId?: string): React.RefObject<TElement | null>;
741
+ export declare function useOverflowMenu<TElement extends HTMLElement = HTMLElement>(id?: string): {
742
+ ref: React.MutableRefObject<TElement | null>;
743
+ overflowCount: number;
744
+ isOverflowing: boolean;
745
+ };
746
+ export declare function Overflow({ children, label, minimumVisible, overflowDirection, overflowAxis, hasHiddenItems, overflowContent, padding, onOverflowChange, onOverflowItemSelect, ...props }: ElementProps & {
747
+ children?: React.ReactNode;
748
+ label?: string;
749
+ minimumVisible?: number;
750
+ overflowDirection?: "start" | "end";
751
+ overflowAxis?: OverflowAxis;
752
+ hasHiddenItems?: boolean;
753
+ overflowContent?: React.ReactNode;
754
+ padding?: number;
755
+ onOverflowChange?: (event: null, data: OverflowState) => void;
756
+ onOverflowItemSelect?: (id: string) => void;
757
+ }): React.ReactElement;
758
+ export type CardOnSelectionChangeEvent = React.MouseEvent | React.KeyboardEvent | React.ChangeEvent;
759
+ export type CardProps = NativeClickHostProps<HTMLDivElement> & {
760
+ appearance?: CardAppearance;
761
+ orientation?: CardOrientation;
762
+ size?: CardSize;
763
+ focusMode?: CardFocusMode;
764
+ selected?: boolean;
765
+ defaultSelected?: boolean;
766
+ disabled?: boolean;
767
+ selectionLabel?: string;
768
+ checkbox?: React.ReactElement<HTMLInputElement>;
769
+ floatingAction?: React.ReactNode;
770
+ onSelectionChange?: (event: CardOnSelectionChangeEvent, data: {
771
+ selected: boolean;
772
+ }) => void;
773
+ };
774
+ export declare const Card: React.ForwardRefExoticComponent<Omit<ElementProps, "onClick" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & Pick<React.DOMAttributes<HTMLDivElement>, "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture"> & NativeMousePointerEventProps<HTMLDivElement> & NativeAdditionalEventProps<HTMLDivElement> & {
775
+ onClick?: React.MouseEventHandler<HTMLDivElement> | undefined;
776
+ onClickCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
777
+ } & {
778
+ appearance?: CardAppearance;
779
+ orientation?: CardOrientation;
780
+ size?: CardSize;
781
+ focusMode?: CardFocusMode;
782
+ selected?: boolean;
783
+ defaultSelected?: boolean;
784
+ disabled?: boolean;
785
+ selectionLabel?: string;
786
+ checkbox?: React.ReactElement<HTMLInputElement>;
787
+ floatingAction?: React.ReactNode;
788
+ onSelectionChange?: (event: CardOnSelectionChangeEvent, data: {
789
+ selected: boolean;
790
+ }) => void;
791
+ } & React.RefAttributes<HTMLElement>>;
792
+ export declare const SharePointCard: React.ForwardRefExoticComponent<Omit<ElementProps, "onClick" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & Pick<React.DOMAttributes<HTMLDivElement>, "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture"> & NativeMousePointerEventProps<HTMLDivElement> & NativeAdditionalEventProps<HTMLDivElement> & {
793
+ onClick?: React.MouseEventHandler<HTMLDivElement> | undefined;
794
+ onClickCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
795
+ } & {
796
+ appearance?: CardAppearance;
797
+ orientation?: CardOrientation;
798
+ size?: CardSize;
799
+ focusMode?: CardFocusMode;
800
+ selected?: boolean;
801
+ defaultSelected?: boolean;
802
+ disabled?: boolean;
803
+ selectionLabel?: string;
804
+ checkbox?: React.ReactElement<HTMLInputElement>;
805
+ floatingAction?: React.ReactNode;
806
+ onSelectionChange?: (event: CardOnSelectionChangeEvent, data: {
807
+ selected: boolean;
808
+ }) => void;
809
+ } & React.RefAttributes<HTMLElement>>;
810
+ export type { CardAppearance, CardFocusMode, CardOrientation, CardSize };
811
+ export declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
812
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
813
+ } & {
814
+ image?: React.ReactNode;
815
+ header?: React.ReactNode;
816
+ description?: React.ReactNode;
817
+ action?: React.ReactNode;
818
+ } & React.RefAttributes<HTMLElement>>;
819
+ export declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
820
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
821
+ } & {
822
+ action?: React.ReactNode;
823
+ } & React.RefAttributes<HTMLElement>>;
824
+ export declare const CardPreview: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
825
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
826
+ } & {
827
+ logo?: React.ReactNode;
828
+ } & React.RefAttributes<HTMLElement>>;
829
+ export declare const ViewCard: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
830
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
831
+ } & {
832
+ kind: "document" | "person" | "task" | "approval" | "list-item";
833
+ title: string;
834
+ subtitle?: string;
835
+ description?: string;
836
+ } & React.RefAttributes<HTMLElement>>;
837
+ export type PresenceMotionSlotProps = {
838
+ visible: boolean;
839
+ appear?: boolean;
840
+ unmountOnExit?: boolean;
841
+ slot?: string;
842
+ children?: React.ReactNode;
843
+ };
844
+ export type DrawerSurfaceMotionSlotProps = PresenceMotionSlotProps & {
845
+ position: "start" | "end" | "top" | "bottom";
846
+ size: "small" | "medium" | "large" | "full";
847
+ dir: "ltr" | "rtl";
848
+ };
849
+ export type DrawerBackdropMotionSlotProps = PresenceMotionSlotProps & {
850
+ size: "small" | "medium" | "large" | "full";
851
+ };
852
+ export type PortalMountNode = HTMLElement | null | {
853
+ element?: HTMLElement | null;
854
+ className?: string;
855
+ };
856
+ export declare const Dialog: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
857
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
858
+ } & {
859
+ open?: boolean;
860
+ defaultOpen?: boolean;
861
+ title?: string;
862
+ dialogLabel?: string;
863
+ modal?: boolean;
864
+ modalType?: "modal" | "non-modal" | "alert";
865
+ inertTrapFocus?: boolean;
866
+ dismissible?: boolean;
867
+ closeLabel?: string;
868
+ unmountOnClose?: boolean;
869
+ surfaceMotion?: React.ComponentType<PresenceMotionSlotProps>;
870
+ actions?: React.ReactNode;
871
+ onOpenChange?: (event: DialogOpenChangeEvent, data: DialogOnOpenChangeData) => void;
872
+ children?: React.ReactNode;
873
+ } & React.RefAttributes<HTMLElement>>;
874
+ export type DialogBackdropSlotProps = React.ReactElement | (React.HTMLAttributes<HTMLDivElement> & {
875
+ appearance?: "dimmed" | "transparent";
876
+ });
877
+ export type DialogSurfaceProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
878
+ children?: React.ReactNode;
879
+ backdrop?: DialogBackdropSlotProps;
880
+ backdropMotion?: React.ComponentType<PresenceMotionSlotProps>;
881
+ mountNode?: PortalMountNode;
882
+ };
883
+ export declare const DialogSurface: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
884
+ children?: React.ReactNode;
885
+ backdrop?: DialogBackdropSlotProps;
886
+ backdropMotion?: React.ComponentType<PresenceMotionSlotProps>;
887
+ mountNode?: PortalMountNode;
888
+ } & React.RefAttributes<HTMLDivElement>>;
889
+ export type DialogTitleProps = Omit<React.HTMLAttributes<HTMLHeadingElement>, "children"> & {
890
+ children?: React.ReactNode;
891
+ action?: React.ReactNode;
892
+ };
893
+ export declare const DialogTitle: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLHeadingElement>, "children"> & {
894
+ children?: React.ReactNode;
895
+ action?: React.ReactNode;
896
+ } & React.RefAttributes<HTMLHeadingElement>>;
897
+ export type DialogContentProps = React.HTMLAttributes<HTMLDivElement> & {
898
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
899
+ as?: React.ElementType;
900
+ children?: React.ReactNode;
901
+ };
902
+ export declare const DialogContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
903
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
904
+ as?: React.ElementType;
905
+ children?: React.ReactNode;
906
+ } & React.RefAttributes<HTMLElement>>;
907
+ export type DialogBodyProps = React.HTMLAttributes<HTMLDivElement> & {
908
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
909
+ as?: React.ElementType;
910
+ children?: React.ReactNode;
911
+ };
912
+ export declare const DialogBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
913
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
914
+ as?: React.ElementType;
915
+ children?: React.ReactNode;
916
+ } & React.RefAttributes<HTMLElement>>;
917
+ export type DialogActionsProps = React.HTMLAttributes<HTMLDivElement> & {
918
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
919
+ children?: React.ReactNode;
920
+ fluid?: boolean;
921
+ position?: "start" | "end";
922
+ };
923
+ export declare const DialogActions: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
924
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
925
+ children?: React.ReactNode;
926
+ fluid?: boolean;
927
+ position?: "start" | "end";
928
+ } & React.RefAttributes<HTMLDivElement>>;
929
+ export type DialogTriggerChildProps = React.HTMLAttributes<HTMLElement> & {
930
+ slot?: string;
931
+ "aria-haspopup"?: React.AriaAttributes["aria-haspopup"];
932
+ };
933
+ export type DialogTriggerProps = Omit<ElementProps, "children"> & {
934
+ children?: React.ReactElement | ((props: DialogTriggerChildProps) => React.ReactElement | null) | null;
935
+ action?: "open" | "close";
936
+ disableButtonEnhancement?: boolean;
937
+ };
938
+ export declare const DialogTrigger: React.ForwardRefExoticComponent<Omit<ElementProps, "children"> & {
939
+ children?: React.ReactElement | ((props: DialogTriggerChildProps) => React.ReactElement | null) | null;
940
+ action?: "open" | "close";
941
+ disableButtonEnhancement?: boolean;
942
+ } & React.RefAttributes<HTMLElement>>;
943
+ export type DrawerProps = ElementProps & {
944
+ type?: "overlay" | "inline";
945
+ open?: boolean;
946
+ defaultOpen?: boolean;
947
+ unmountOnClose?: boolean;
948
+ separator?: boolean;
949
+ title?: string;
950
+ modal?: boolean;
951
+ modalType?: "modal" | "non-modal" | "alert";
952
+ inertTrapFocus?: boolean;
953
+ dismissible?: boolean;
954
+ position?: "start" | "end" | "top" | "bottom";
955
+ size?: "small" | "medium" | "large" | "full";
956
+ expandable?: boolean;
957
+ expanded?: boolean;
958
+ surfaceMotion?: React.ComponentType<DrawerSurfaceMotionSlotProps>;
959
+ backdropMotion?: React.ComponentType<DrawerBackdropMotionSlotProps>;
960
+ closeLabel?: string;
961
+ expandLabel?: string;
962
+ restoreLabel?: string;
963
+ actions?: React.ReactNode;
964
+ onOpenChange?: (open: boolean) => void;
965
+ onExpandedChange?: (expanded: boolean) => void;
966
+ onDismiss?: () => void;
967
+ children?: React.ReactNode;
968
+ };
969
+ export declare const Drawer: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
970
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
971
+ } & {
972
+ type?: "overlay" | "inline";
973
+ open?: boolean;
974
+ defaultOpen?: boolean;
975
+ unmountOnClose?: boolean;
976
+ separator?: boolean;
977
+ title?: string;
978
+ modal?: boolean;
979
+ modalType?: "modal" | "non-modal" | "alert";
980
+ inertTrapFocus?: boolean;
981
+ dismissible?: boolean;
982
+ position?: "start" | "end" | "top" | "bottom";
983
+ size?: "small" | "medium" | "large" | "full";
984
+ expandable?: boolean;
985
+ expanded?: boolean;
986
+ surfaceMotion?: React.ComponentType<DrawerSurfaceMotionSlotProps>;
987
+ backdropMotion?: React.ComponentType<DrawerBackdropMotionSlotProps>;
988
+ closeLabel?: string;
989
+ expandLabel?: string;
990
+ restoreLabel?: string;
991
+ actions?: React.ReactNode;
992
+ onOpenChange?: (open: boolean) => void;
993
+ onExpandedChange?: (expanded: boolean) => void;
994
+ onDismiss?: () => void;
995
+ children?: React.ReactNode;
996
+ } & React.RefAttributes<HTMLElement>>;
997
+ export declare function DrawerHeader({ children }: {
998
+ children?: React.ReactNode;
999
+ }): React.ReactElement;
1000
+ export declare function DrawerHeaderNavigation({ children, label, ...props }: ElementProps & {
1001
+ children?: React.ReactNode;
1002
+ label?: string;
1003
+ }): React.ReactElement;
1004
+ export type DrawerHeaderTitleHeadingSlot = React.ReactElement<any> | Omit<React.HTMLAttributes<HTMLElement>, "children">;
1005
+ export declare function DrawerHeaderTitle({ children, action, heading, ...props }: ElementProps & {
1006
+ children?: React.ReactNode;
1007
+ action?: React.ReactNode;
1008
+ heading?: DrawerHeaderTitleHeadingSlot;
1009
+ }): React.ReactElement;
1010
+ export declare function DrawerBody({ children, ...props }: ElementProps & {
1011
+ children?: React.ReactNode;
1012
+ }): React.ReactElement;
1013
+ export declare function DrawerFooter({ children, ...props }: ElementProps & {
1014
+ children?: React.ReactNode;
1015
+ }): React.ReactElement;
1016
+ export type InlineDrawerProps = ElementProps & {
1017
+ open?: boolean;
1018
+ title?: string;
1019
+ position?: "start" | "end" | "top" | "bottom";
1020
+ size?: "small" | "medium" | "large" | "full";
1021
+ separator?: boolean;
1022
+ unmountOnClose?: boolean;
1023
+ surfaceMotion?: React.ComponentType<DrawerSurfaceMotionSlotProps>;
1024
+ actions?: React.ReactNode;
1025
+ children?: React.ReactNode;
1026
+ };
1027
+ export declare const InlineDrawer: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
1028
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
1029
+ } & {
1030
+ open?: boolean;
1031
+ title?: string;
1032
+ position?: "start" | "end" | "top" | "bottom";
1033
+ size?: "small" | "medium" | "large" | "full";
1034
+ separator?: boolean;
1035
+ unmountOnClose?: boolean;
1036
+ surfaceMotion?: React.ComponentType<DrawerSurfaceMotionSlotProps>;
1037
+ actions?: React.ReactNode;
1038
+ children?: React.ReactNode;
1039
+ } & React.RefAttributes<HTMLElement>>;
1040
+ export type OverlayDrawerProps = Omit<Parameters<typeof Drawer>[0], "type" | "open" | "modal" | "modalType" | "inertTrapFocus" | "position" | "size" | "onOpenChange"> & {
1041
+ open?: boolean;
1042
+ defaultOpen?: boolean;
1043
+ modalType?: "modal" | "non-modal" | "alert";
1044
+ inertTrapFocus?: boolean;
1045
+ position?: "start" | "end" | "bottom";
1046
+ size?: "small" | "medium" | "large" | "full";
1047
+ onOpenChange?: (event: DialogOpenChangeEvent, data: DialogOnOpenChangeData) => void;
1048
+ };
1049
+ export declare function OverlayDrawer({ open, defaultOpen, modalType, inertTrapFocus, position, size, onOpenChange, ...props }: OverlayDrawerProps): React.ReactElement;
1050
+ export declare const ProgressBar: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
1051
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
1052
+ } & {
1053
+ value?: number;
1054
+ max?: number;
1055
+ label?: string;
1056
+ color?: ProgressBarColor;
1057
+ shape?: ProgressBarShape;
1058
+ thickness?: ProgressBarThickness;
1059
+ bar?: React.ReactNode;
1060
+ indeterminateMotion?: React.ReactNode;
1061
+ } & React.RefAttributes<HTMLElement>>;
1062
+ export type SelectChangeEvent = React.ChangeEvent<HTMLSelectElement>;
1063
+ export type { SelectAppearance, SelectSize, SelectChangeData } from "./elements/select.js";
1064
+ export type SelectProps = Omit<NativeClickHostProps<HTMLSelectElement>, "onChange"> & {
1065
+ label?: string;
1066
+ value?: string | number | readonly string[];
1067
+ defaultValue?: string | number | readonly string[];
1068
+ autoComplete?: string;
1069
+ required?: boolean;
1070
+ disabled?: boolean;
1071
+ name?: string;
1072
+ form?: string;
1073
+ multiple?: boolean;
1074
+ size?: "small" | "medium" | "large";
1075
+ appearance?: "outline" | "underline" | "filled-darker" | "filled-lighter";
1076
+ icon?: React.ReactNode;
1077
+ select?: React.ReactElement<React.SelectHTMLAttributes<HTMLSelectElement>> | React.SelectHTMLAttributes<HTMLSelectElement>;
1078
+ onValueChange?: (value: string) => void;
1079
+ onChange?: (event: SelectChangeEvent, data: {
1080
+ value: string;
1081
+ }) => void;
1082
+ children?: React.ReactNode;
1083
+ };
1084
+ export declare const Select: React.ForwardRefExoticComponent<Omit<NativeClickHostProps<HTMLSelectElement>, "onChange"> & {
1085
+ label?: string;
1086
+ value?: string | number | readonly string[];
1087
+ defaultValue?: string | number | readonly string[];
1088
+ autoComplete?: string;
1089
+ required?: boolean;
1090
+ disabled?: boolean;
1091
+ name?: string;
1092
+ form?: string;
1093
+ multiple?: boolean;
1094
+ size?: "small" | "medium" | "large";
1095
+ appearance?: "outline" | "underline" | "filled-darker" | "filled-lighter";
1096
+ icon?: React.ReactNode;
1097
+ select?: React.ReactElement<React.SelectHTMLAttributes<HTMLSelectElement>> | React.SelectHTMLAttributes<HTMLSelectElement>;
1098
+ onValueChange?: (value: string) => void;
1099
+ onChange?: (event: SelectChangeEvent, data: {
1100
+ value: string;
1101
+ }) => void;
1102
+ children?: React.ReactNode;
1103
+ } & React.RefAttributes<HTMLElement>>;
1104
+ export type RadioGroupProps = Omit<NativeClickHostProps<HTMLDivElement>, "onChange"> & {
1105
+ label?: string;
1106
+ value?: string;
1107
+ defaultValue?: string;
1108
+ name?: string;
1109
+ form?: string;
1110
+ required?: boolean;
1111
+ disabled?: boolean;
1112
+ layout?: "vertical" | "horizontal" | "horizontal-stacked";
1113
+ orientation?: "vertical" | "horizontal";
1114
+ onValueChange?: (value: string) => void;
1115
+ onChange?: (event: React.FormEvent<HTMLDivElement>, data: {
1116
+ value: string;
1117
+ }) => void;
1118
+ };
1119
+ export declare const RadioGroup: React.ForwardRefExoticComponent<Omit<NativeClickHostProps<HTMLDivElement>, "onChange"> & {
1120
+ label?: string;
1121
+ value?: string;
1122
+ defaultValue?: string;
1123
+ name?: string;
1124
+ form?: string;
1125
+ required?: boolean;
1126
+ disabled?: boolean;
1127
+ layout?: "vertical" | "horizontal" | "horizontal-stacked";
1128
+ orientation?: "vertical" | "horizontal";
1129
+ onValueChange?: (value: string) => void;
1130
+ onChange?: (event: React.FormEvent<HTMLDivElement>, data: {
1131
+ value: string;
1132
+ }) => void;
1133
+ } & React.RefAttributes<HTMLElement>>;
1134
+ export type RadioInputSlot = React.ReactElement<React.InputHTMLAttributes<HTMLInputElement>> | React.InputHTMLAttributes<HTMLInputElement>;
1135
+ export type RadioIndicatorSlot = React.ReactElement<React.HTMLAttributes<HTMLSpanElement>> | React.HTMLAttributes<HTMLSpanElement>;
1136
+ export type RadioProps = Omit<ElementProps, "onChange"> & {
1137
+ value?: string;
1138
+ label?: React.ReactNode;
1139
+ labelPosition?: "after" | "below";
1140
+ disabled?: boolean;
1141
+ input?: RadioInputSlot;
1142
+ indicator?: RadioIndicatorSlot;
1143
+ onChange?: (event: React.ChangeEvent<HTMLInputElement>, data: {
1144
+ value: string;
1145
+ }) => void;
1146
+ children?: React.ReactNode;
1147
+ };
1148
+ export declare const Radio: React.ForwardRefExoticComponent<Omit<ElementProps, "onChange"> & {
1149
+ value?: string;
1150
+ label?: React.ReactNode;
1151
+ labelPosition?: "after" | "below";
1152
+ disabled?: boolean;
1153
+ input?: RadioInputSlot;
1154
+ indicator?: RadioIndicatorSlot;
1155
+ onChange?: (event: React.ChangeEvent<HTMLInputElement>, data: {
1156
+ value: string;
1157
+ }) => void;
1158
+ children?: React.ReactNode;
1159
+ } & React.RefAttributes<HTMLElement>>;
1160
+ export type SpinButtonChangeEvent = React.MouseEvent<HTMLButtonElement> | React.ChangeEvent<HTMLElement> | React.FocusEvent<HTMLInputElement> | React.KeyboardEvent<HTMLInputElement>;
1161
+ export type SpinButtonOnChangeData = {
1162
+ value?: number | null;
1163
+ displayValue?: string;
1164
+ };
1165
+ export type SpinButtonProps = Omit<NativeClickHostProps<HTMLInputElement>, "onChange"> & {
1166
+ label?: string;
1167
+ value?: number | null;
1168
+ defaultValue?: number | null;
1169
+ displayValue?: string;
1170
+ input?: React.ReactElement<React.InputHTMLAttributes<HTMLInputElement>> | React.InputHTMLAttributes<HTMLInputElement>;
1171
+ incrementButton?: React.ReactElement<React.ButtonHTMLAttributes<HTMLButtonElement>> | React.ButtonHTMLAttributes<HTMLButtonElement>;
1172
+ decrementButton?: React.ReactElement<React.ButtonHTMLAttributes<HTMLButtonElement>> | React.ButtonHTMLAttributes<HTMLButtonElement>;
1173
+ min?: number;
1174
+ max?: number;
1175
+ step?: number;
1176
+ stepPage?: number;
1177
+ precision?: number;
1178
+ appearance?: "outline" | "underline" | "filled-darker" | "filled-lighter";
1179
+ size?: "small" | "medium";
1180
+ incrementLabel?: string;
1181
+ decrementLabel?: string;
1182
+ name?: string;
1183
+ form?: string;
1184
+ required?: boolean;
1185
+ disabled?: boolean;
1186
+ readOnly?: boolean;
1187
+ onValueChange?: (value: number | undefined) => void;
1188
+ onChange?: (event: SpinButtonChangeEvent, data: SpinButtonOnChangeData) => void;
1189
+ };
1190
+ export declare const SpinButton: React.ForwardRefExoticComponent<Omit<NativeClickHostProps<HTMLInputElement>, "onChange"> & {
1191
+ label?: string;
1192
+ value?: number | null;
1193
+ defaultValue?: number | null;
1194
+ displayValue?: string;
1195
+ input?: React.ReactElement<React.InputHTMLAttributes<HTMLInputElement>> | React.InputHTMLAttributes<HTMLInputElement>;
1196
+ incrementButton?: React.ReactElement<React.ButtonHTMLAttributes<HTMLButtonElement>> | React.ButtonHTMLAttributes<HTMLButtonElement>;
1197
+ decrementButton?: React.ReactElement<React.ButtonHTMLAttributes<HTMLButtonElement>> | React.ButtonHTMLAttributes<HTMLButtonElement>;
1198
+ min?: number;
1199
+ max?: number;
1200
+ step?: number;
1201
+ stepPage?: number;
1202
+ precision?: number;
1203
+ appearance?: "outline" | "underline" | "filled-darker" | "filled-lighter";
1204
+ size?: "small" | "medium";
1205
+ incrementLabel?: string;
1206
+ decrementLabel?: string;
1207
+ name?: string;
1208
+ form?: string;
1209
+ required?: boolean;
1210
+ disabled?: boolean;
1211
+ readOnly?: boolean;
1212
+ onValueChange?: (value: number | undefined) => void;
1213
+ onChange?: (event: SpinButtonChangeEvent, data: SpinButtonOnChangeData) => void;
1214
+ } & React.RefAttributes<HTMLElement>>;
1215
+ export type SliderOnChangeData = {
1216
+ value: number;
1217
+ };
1218
+ export type SliderProps = Omit<NativeClickHostProps<HTMLInputElement>, "onChange"> & {
1219
+ label?: string;
1220
+ value?: number;
1221
+ defaultValue?: number;
1222
+ input?: React.ReactElement<React.InputHTMLAttributes<HTMLInputElement>> | React.InputHTMLAttributes<HTMLInputElement>;
1223
+ rail?: React.ReactNode;
1224
+ thumb?: React.ReactNode;
1225
+ min?: number;
1226
+ max?: number;
1227
+ step?: number;
1228
+ size?: "small" | "medium";
1229
+ vertical?: boolean;
1230
+ name?: string;
1231
+ form?: string;
1232
+ disabled?: boolean;
1233
+ valueText?: string;
1234
+ onValueChange?: (value: number) => void;
1235
+ onChange?: (event: React.ChangeEvent<HTMLInputElement>, data: SliderOnChangeData) => void;
1236
+ };
1237
+ export declare const Slider: React.ForwardRefExoticComponent<Omit<NativeClickHostProps<HTMLInputElement>, "onChange"> & {
1238
+ label?: string;
1239
+ value?: number;
1240
+ defaultValue?: number;
1241
+ input?: React.ReactElement<React.InputHTMLAttributes<HTMLInputElement>> | React.InputHTMLAttributes<HTMLInputElement>;
1242
+ rail?: React.ReactNode;
1243
+ thumb?: React.ReactNode;
1244
+ min?: number;
1245
+ max?: number;
1246
+ step?: number;
1247
+ size?: "small" | "medium";
1248
+ vertical?: boolean;
1249
+ name?: string;
1250
+ form?: string;
1251
+ disabled?: boolean;
1252
+ valueText?: string;
1253
+ onValueChange?: (value: number) => void;
1254
+ onChange?: (event: React.ChangeEvent<HTMLInputElement>, data: SliderOnChangeData) => void;
1255
+ } & React.RefAttributes<HTMLElement>>;
1256
+ export type DatePickerProps = NativeClickHostProps<HTMLDivElement> & {
1257
+ label?: string;
1258
+ value?: string;
1259
+ defaultValue?: string;
1260
+ min?: string;
1261
+ max?: string;
1262
+ name?: string;
1263
+ form?: string;
1264
+ placeholder?: string;
1265
+ required?: boolean;
1266
+ disabled?: boolean;
1267
+ readOnly?: boolean;
1268
+ calendarLabel?: string;
1269
+ previousMonthLabel?: string;
1270
+ nextMonthLabel?: string;
1271
+ invalidDateMessage?: string;
1272
+ requiredMessage?: string;
1273
+ onValueChange?: (value: string) => void;
1274
+ };
1275
+ export declare const DatePicker: React.ForwardRefExoticComponent<Omit<ElementProps, "onClick" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & Pick<React.DOMAttributes<HTMLDivElement>, "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture"> & NativeMousePointerEventProps<HTMLDivElement> & NativeAdditionalEventProps<HTMLDivElement> & {
1276
+ onClick?: React.MouseEventHandler<HTMLDivElement> | undefined;
1277
+ onClickCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
1278
+ } & {
1279
+ label?: string;
1280
+ value?: string;
1281
+ defaultValue?: string;
1282
+ min?: string;
1283
+ max?: string;
1284
+ name?: string;
1285
+ form?: string;
1286
+ placeholder?: string;
1287
+ required?: boolean;
1288
+ disabled?: boolean;
1289
+ readOnly?: boolean;
1290
+ calendarLabel?: string;
1291
+ previousMonthLabel?: string;
1292
+ nextMonthLabel?: string;
1293
+ invalidDateMessage?: string;
1294
+ requiredMessage?: string;
1295
+ onValueChange?: (value: string) => void;
1296
+ } & React.RefAttributes<HTMLElement>>;
1297
+ export type ComboboxPositioning = "above" | "below" | "above-start" | "above-end" | "below-start" | "below-end" | {
1298
+ position?: "above" | "below";
1299
+ align?: "start" | "center" | "end";
1300
+ };
1301
+ export type ComboboxSelectionEvent = React.ChangeEvent<HTMLElement> | React.KeyboardEvent<HTMLElement> | React.MouseEvent<HTMLElement>;
1302
+ export type ComboboxOpenChangeEvent = React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement> | React.FocusEvent<HTMLElement>;
1303
+ export type ComboboxActiveOptionChangeData = {
1304
+ event: React.SyntheticEvent | Event;
1305
+ type: undefined;
1306
+ previousOption: ComboboxOptionValue | null | undefined;
1307
+ nextOption: ComboboxOptionValue | null | undefined;
1308
+ } | {
1309
+ event: CustomEvent<{
1310
+ id: string;
1311
+ previousId: string | null;
1312
+ }>;
1313
+ type: "change";
1314
+ previousOption: ComboboxOptionValue | null | undefined;
1315
+ nextOption: ComboboxOptionValue | null | undefined;
1316
+ };
1317
+ export type ComboBoxProps = NativeClickHostProps<HTMLInputElement> & {
1318
+ label?: string;
1319
+ selectedLabel?: string;
1320
+ value?: string;
1321
+ defaultValue?: string;
1322
+ selectedValue?: string;
1323
+ selectedOptions?: readonly string[];
1324
+ defaultSelectedOptions?: readonly string[];
1325
+ multiselect?: boolean;
1326
+ name?: string;
1327
+ form?: string;
1328
+ input?: React.ReactElement<React.InputHTMLAttributes<HTMLInputElement>> | React.InputHTMLAttributes<HTMLInputElement>;
1329
+ listbox?: React.ReactElement;
1330
+ mountNode?: PortalMountNode;
1331
+ placeholder?: string;
1332
+ required?: boolean;
1333
+ disabled?: boolean;
1334
+ freeform?: boolean;
1335
+ allowFreeform?: boolean;
1336
+ noResults?: string;
1337
+ clearable?: boolean;
1338
+ clearIcon?: React.ReactNode;
1339
+ expandIcon?: React.ReactNode;
1340
+ defaultOpen?: boolean;
1341
+ disableAutoFocus?: boolean;
1342
+ inlinePopup?: boolean;
1343
+ open?: boolean;
1344
+ appearance?: "filled-darker" | "filled-lighter" | "outline" | "underline";
1345
+ size?: "small" | "medium" | "large";
1346
+ positioning?: ComboboxPositioning;
1347
+ children?: React.ReactNode;
1348
+ onValueChange?: (value: string) => void;
1349
+ onOptionSelect?: (event: ComboboxSelectionEvent, data: ComboboxOptionSelectData) => void;
1350
+ onSelectedOptionsChange?: (selectedOptions: string[]) => void;
1351
+ onOpenChange?: (event: ComboboxOpenChangeEvent, data: {
1352
+ open: boolean;
1353
+ }) => void;
1354
+ onActiveOptionChange?: (event: React.SyntheticEvent | Event, data: ComboboxActiveOptionChangeData) => void;
1355
+ };
1356
+ export declare const ComboBox: React.ForwardRefExoticComponent<Omit<ElementProps, "onClick" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & Pick<React.DOMAttributes<HTMLInputElement>, "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture"> & NativeMousePointerEventProps<HTMLInputElement> & NativeAdditionalEventProps<HTMLInputElement> & {
1357
+ onClick?: React.MouseEventHandler<HTMLInputElement> | undefined;
1358
+ onClickCapture?: React.MouseEventHandler<HTMLInputElement> | undefined;
1359
+ } & {
1360
+ label?: string;
1361
+ selectedLabel?: string;
1362
+ value?: string;
1363
+ defaultValue?: string;
1364
+ selectedValue?: string;
1365
+ selectedOptions?: readonly string[];
1366
+ defaultSelectedOptions?: readonly string[];
1367
+ multiselect?: boolean;
1368
+ name?: string;
1369
+ form?: string;
1370
+ input?: React.ReactElement<React.InputHTMLAttributes<HTMLInputElement>> | React.InputHTMLAttributes<HTMLInputElement>;
1371
+ listbox?: React.ReactElement;
1372
+ mountNode?: PortalMountNode;
1373
+ placeholder?: string;
1374
+ required?: boolean;
1375
+ disabled?: boolean;
1376
+ freeform?: boolean;
1377
+ allowFreeform?: boolean;
1378
+ noResults?: string;
1379
+ clearable?: boolean;
1380
+ clearIcon?: React.ReactNode;
1381
+ expandIcon?: React.ReactNode;
1382
+ defaultOpen?: boolean;
1383
+ disableAutoFocus?: boolean;
1384
+ inlinePopup?: boolean;
1385
+ open?: boolean;
1386
+ appearance?: "filled-darker" | "filled-lighter" | "outline" | "underline";
1387
+ size?: "small" | "medium" | "large";
1388
+ positioning?: ComboboxPositioning;
1389
+ children?: React.ReactNode;
1390
+ onValueChange?: (value: string) => void;
1391
+ onOptionSelect?: (event: ComboboxSelectionEvent, data: ComboboxOptionSelectData) => void;
1392
+ onSelectedOptionsChange?: (selectedOptions: string[]) => void;
1393
+ onOpenChange?: (event: ComboboxOpenChangeEvent, data: {
1394
+ open: boolean;
1395
+ }) => void;
1396
+ onActiveOptionChange?: (event: React.SyntheticEvent | Event, data: ComboboxActiveOptionChangeData) => void;
1397
+ } & React.RefAttributes<HTMLElement>>;
1398
+ export declare const ComboOption: React.ForwardRefExoticComponent<{
1399
+ value: string;
1400
+ label?: string;
1401
+ disabled?: boolean;
1402
+ children?: React.ReactNode;
1403
+ } & React.RefAttributes<HTMLElement>>;
1404
+ export type ComboboxOptionSelectData = {
1405
+ optionValue: string | undefined;
1406
+ optionText: string | undefined;
1407
+ selectedOptions: string[];
1408
+ };
1409
+ export type ComboboxOptionValue = {
1410
+ disabled?: boolean;
1411
+ id: string;
1412
+ text: string;
1413
+ value: string;
1414
+ };
1415
+ export type ComboboxContextValue = {
1416
+ activeOption?: ComboboxOptionValue;
1417
+ appearance: NonNullable<DropdownProps["appearance"]>;
1418
+ focusVisible: boolean;
1419
+ open: boolean;
1420
+ registerOption: (option: ComboboxOptionValue, element: HTMLElement) => () => void;
1421
+ selectedOptions: string[];
1422
+ selectOption: (event: ComboboxSelectionEvent, option: ComboboxOptionValue) => void;
1423
+ setActiveOption: React.Dispatch<React.SetStateAction<ComboboxOptionValue | undefined>>;
1424
+ setOpen: (event: ComboboxOpenChangeEvent, open: boolean) => void;
1425
+ size: NonNullable<DropdownProps["size"]>;
1426
+ };
1427
+ export type ComboboxProviderValue = Partial<Omit<ComboboxContextValue, "selectedOptions">> & {
1428
+ value?: string;
1429
+ selectedOptions?: readonly string[];
1430
+ setValue?: (value: string | undefined) => void;
1431
+ onValueChange?: (value: string) => void;
1432
+ onOpenChange?: (open: boolean) => void;
1433
+ onOptionSelect?: (event: ComboboxSelectionEvent, data: ComboboxOptionSelectData) => void;
1434
+ };
1435
+ /** Supply shared value and selection callbacks to composed options. */
1436
+ export declare function ComboboxProvider({ value, children }: {
1437
+ value: ComboboxProviderValue;
1438
+ children?: React.ReactNode;
1439
+ }): React.ReactElement;
1440
+ export type DropdownProps = NativeClickHostProps<HTMLInputElement> & {
1441
+ label?: string;
1442
+ button?: React.ReactNode;
1443
+ appearance?: "filled-darker" | "filled-lighter" | "outline" | "underline";
1444
+ clearable?: boolean;
1445
+ clearButton?: React.ReactNode;
1446
+ defaultOpen?: boolean;
1447
+ defaultValue?: string;
1448
+ disableAutoFocus?: boolean;
1449
+ defaultSelectedOptions?: string[];
1450
+ inlinePopup?: boolean;
1451
+ listbox?: React.ReactElement;
1452
+ mountNode?: PortalMountNode;
1453
+ multiselect?: boolean;
1454
+ form?: string;
1455
+ onOpenChange?: (event: ComboboxOpenChangeEvent, data: {
1456
+ open: boolean;
1457
+ }) => void;
1458
+ onOptionSelect?: (event: ComboboxSelectionEvent, data: ComboboxOptionSelectData) => void;
1459
+ onActiveOptionChange?: (event: React.SyntheticEvent | Event, data: ComboboxActiveOptionChangeData) => void;
1460
+ expandIcon?: React.ReactNode;
1461
+ open?: boolean;
1462
+ placeholder?: string;
1463
+ positioning?: ComboboxPositioning;
1464
+ selectedOptions?: string[];
1465
+ size?: "small" | "medium" | "large";
1466
+ value?: string;
1467
+ disabled?: boolean;
1468
+ children?: React.ReactNode;
1469
+ };
1470
+ /** Selection-only combobox that shares the theme, form, and keyboard engine with ComboBox. */
1471
+ export declare const Dropdown: React.ForwardRefExoticComponent<Omit<ElementProps, "onClick" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & Pick<React.DOMAttributes<HTMLInputElement>, "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture"> & NativeMousePointerEventProps<HTMLInputElement> & NativeAdditionalEventProps<HTMLInputElement> & {
1472
+ onClick?: React.MouseEventHandler<HTMLInputElement> | undefined;
1473
+ onClickCapture?: React.MouseEventHandler<HTMLInputElement> | undefined;
1474
+ } & {
1475
+ label?: string;
1476
+ button?: React.ReactNode;
1477
+ appearance?: "filled-darker" | "filled-lighter" | "outline" | "underline";
1478
+ clearable?: boolean;
1479
+ clearButton?: React.ReactNode;
1480
+ defaultOpen?: boolean;
1481
+ defaultValue?: string;
1482
+ disableAutoFocus?: boolean;
1483
+ defaultSelectedOptions?: string[];
1484
+ inlinePopup?: boolean;
1485
+ listbox?: React.ReactElement;
1486
+ mountNode?: PortalMountNode;
1487
+ multiselect?: boolean;
1488
+ form?: string;
1489
+ onOpenChange?: (event: ComboboxOpenChangeEvent, data: {
1490
+ open: boolean;
1491
+ }) => void;
1492
+ onOptionSelect?: (event: ComboboxSelectionEvent, data: ComboboxOptionSelectData) => void;
1493
+ onActiveOptionChange?: (event: React.SyntheticEvent | Event, data: ComboboxActiveOptionChangeData) => void;
1494
+ expandIcon?: React.ReactNode;
1495
+ open?: boolean;
1496
+ placeholder?: string;
1497
+ positioning?: ComboboxPositioning;
1498
+ selectedOptions?: string[];
1499
+ size?: "small" | "medium" | "large";
1500
+ value?: string;
1501
+ disabled?: boolean;
1502
+ children?: React.ReactNode;
1503
+ } & React.RefAttributes<HTMLElement>>;
1504
+ export type ListboxProps = ElementProps & {
1505
+ children?: React.ReactNode;
1506
+ selectedOptions?: string[];
1507
+ defaultSelectedOptions?: string[];
1508
+ multiselect?: boolean;
1509
+ disableAutoFocus?: boolean;
1510
+ onOptionSelect?: (event: ComboboxSelectionEvent, data: ComboboxOptionSelectData) => void;
1511
+ };
1512
+ /** Standalone keyboard-operable listbox for composing selectable Option elements. */
1513
+ export declare const Listbox: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
1514
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
1515
+ } & {
1516
+ children?: React.ReactNode;
1517
+ selectedOptions?: string[];
1518
+ defaultSelectedOptions?: string[];
1519
+ multiselect?: boolean;
1520
+ disableAutoFocus?: boolean;
1521
+ onOptionSelect?: (event: ComboboxSelectionEvent, data: ComboboxOptionSelectData) => void;
1522
+ } & React.RefAttributes<HTMLDivElement>>;
1523
+ export type OptionProps = ElementProps & {
1524
+ value?: string;
1525
+ text?: string;
1526
+ disabled?: boolean;
1527
+ checkIcon?: React.ReactNode;
1528
+ children?: React.ReactNode;
1529
+ };
1530
+ /** Option for Dropdown/ComboBox or a standalone Listbox. */
1531
+ export declare const Option: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
1532
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
1533
+ } & {
1534
+ value?: string;
1535
+ text?: string;
1536
+ disabled?: boolean;
1537
+ checkIcon?: React.ReactNode;
1538
+ children?: React.ReactNode;
1539
+ } & React.RefAttributes<HTMLElement>>;
1540
+ export type OptionGroupProps = ElementProps & {
1541
+ label?: string;
1542
+ children?: React.ReactNode;
1543
+ };
1544
+ /** Group related options under an accessible label. */
1545
+ export declare const OptionGroup: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
1546
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
1547
+ } & {
1548
+ label?: string;
1549
+ children?: React.ReactNode;
1550
+ } & React.RefAttributes<HTMLElement>>;
1551
+ export type RichTextEditorProps = NativeClickHostProps<HTMLDivElement> & {
1552
+ label?: string;
1553
+ editorLabel?: string;
1554
+ value?: string;
1555
+ defaultValue?: string;
1556
+ placeholder?: string;
1557
+ disabled?: boolean;
1558
+ readOnly?: boolean;
1559
+ required?: boolean;
1560
+ name?: string;
1561
+ form?: string;
1562
+ onValueChange?: (html: string) => void;
1563
+ onImageUpload?: (file: File) => Promise<string>;
1564
+ };
1565
+ export declare const RichTextEditor: React.ForwardRefExoticComponent<Omit<ElementProps, "onClick" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & Pick<React.DOMAttributes<HTMLDivElement>, "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture"> & NativeMousePointerEventProps<HTMLDivElement> & NativeAdditionalEventProps<HTMLDivElement> & {
1566
+ onClick?: React.MouseEventHandler<HTMLDivElement> | undefined;
1567
+ onClickCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
1568
+ } & {
1569
+ label?: string;
1570
+ editorLabel?: string;
1571
+ value?: string;
1572
+ defaultValue?: string;
1573
+ placeholder?: string;
1574
+ disabled?: boolean;
1575
+ readOnly?: boolean;
1576
+ required?: boolean;
1577
+ name?: string;
1578
+ form?: string;
1579
+ onValueChange?: (html: string) => void;
1580
+ onImageUpload?: (file: File) => Promise<string>;
1581
+ } & React.RefAttributes<HTMLElement>>;
1582
+ export type BadgeProps = ElementProps & {
1583
+ children?: React.ReactNode;
1584
+ icon?: React.ReactNode;
1585
+ appearance?: BadgeAppearance;
1586
+ color?: BadgeColor;
1587
+ iconPosition?: "before" | "after";
1588
+ shape?: BadgeShape;
1589
+ size?: BadgeSize;
1590
+ };
1591
+ export declare const Badge: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
1592
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
1593
+ } & {
1594
+ children?: React.ReactNode;
1595
+ icon?: React.ReactNode;
1596
+ appearance?: BadgeAppearance;
1597
+ color?: BadgeColor;
1598
+ iconPosition?: "before" | "after";
1599
+ shape?: BadgeShape;
1600
+ size?: BadgeSize;
1601
+ } & React.RefAttributes<HTMLElement>>;
1602
+ export declare const CounterBadge: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
1603
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
1604
+ } & {
1605
+ count?: number;
1606
+ dot?: boolean;
1607
+ overflowCount?: number;
1608
+ showZero?: boolean;
1609
+ appearance?: "filled" | "ghost";
1610
+ color?: Extract<BadgeColor, "brand" | "danger" | "important" | "informative">;
1611
+ shape?: "circular" | "rounded";
1612
+ size?: BadgeSize;
1613
+ icon?: React.ReactNode;
1614
+ iconPosition?: "before" | "after";
1615
+ } & React.RefAttributes<HTMLElement>>;
1616
+ export declare const PresenceBadge: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
1617
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
1618
+ } & {
1619
+ status?: PresenceBadgeStatus;
1620
+ outOfOffice?: boolean;
1621
+ size?: BadgeSize;
1622
+ icon?: React.ReactNode;
1623
+ } & React.RefAttributes<HTMLElement>>;
1624
+ export type TagProps = ElementProps & {
1625
+ children?: React.ReactNode;
1626
+ appearance?: "filled" | "outline" | "brand";
1627
+ size?: "extra-small" | "small" | "medium" | "large";
1628
+ shape?: "rounded" | "circular";
1629
+ color?: "neutral" | "success" | "warning" | "danger" | "informative";
1630
+ value?: string;
1631
+ label?: string;
1632
+ disabled?: boolean;
1633
+ selected?: boolean;
1634
+ dismissible?: boolean;
1635
+ dismissLabel?: string;
1636
+ onDismiss?: (value: string, label: string) => void;
1637
+ media?: React.ReactNode;
1638
+ icon?: React.ReactNode;
1639
+ primaryText?: React.ReactNode;
1640
+ secondaryText?: React.ReactNode;
1641
+ dismissIcon?: React.ReactNode;
1642
+ };
1643
+ export declare const Tag: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
1644
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
1645
+ } & {
1646
+ children?: React.ReactNode;
1647
+ appearance?: "filled" | "outline" | "brand";
1648
+ size?: "extra-small" | "small" | "medium" | "large";
1649
+ shape?: "rounded" | "circular";
1650
+ color?: "neutral" | "success" | "warning" | "danger" | "informative";
1651
+ value?: string;
1652
+ label?: string;
1653
+ disabled?: boolean;
1654
+ selected?: boolean;
1655
+ dismissible?: boolean;
1656
+ dismissLabel?: string;
1657
+ onDismiss?: (value: string, label: string) => void;
1658
+ media?: React.ReactNode;
1659
+ icon?: React.ReactNode;
1660
+ primaryText?: React.ReactNode;
1661
+ secondaryText?: React.ReactNode;
1662
+ dismissIcon?: React.ReactNode;
1663
+ } & React.RefAttributes<HTMLElement>>;
1664
+ export declare const InteractionTag: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
1665
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
1666
+ } & {
1667
+ children?: React.ReactNode;
1668
+ appearance?: "filled" | "outline" | "brand";
1669
+ size?: "extra-small" | "small" | "medium";
1670
+ shape?: "rounded" | "circular";
1671
+ value?: string;
1672
+ label?: string;
1673
+ disabled?: boolean;
1674
+ selected?: boolean;
1675
+ onTagSelect?: (event: Event, data: InteractionTagSelectData) => void;
1676
+ onDismiss?: (event: TagDismissEvent, data: {
1677
+ value: string;
1678
+ }) => void;
1679
+ } & React.RefAttributes<HTMLElement>>;
1680
+ export declare const InteractionTagPrimary: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
1681
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
1682
+ } & {
1683
+ children?: React.ReactNode;
1684
+ media?: React.ReactNode;
1685
+ icon?: React.ReactNode;
1686
+ primaryText?: React.ReactNode;
1687
+ secondaryText?: React.ReactNode;
1688
+ hasSecondaryAction?: boolean;
1689
+ } & React.RefAttributes<HTMLElement>>;
1690
+ export declare const InteractionTagSecondary: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
1691
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
1692
+ } & {
1693
+ children?: React.ReactNode;
1694
+ label?: string;
1695
+ } & React.RefAttributes<HTMLElement>>;
1696
+ export type TagDismissEvent = React.MouseEvent | React.KeyboardEvent;
1697
+ export type TagGroupReactSelectData = Omit<TagGroupSelectData, "event" | "type"> & ({
1698
+ event: SharePointUIEvent;
1699
+ type: undefined;
1700
+ } | {
1701
+ event: React.MouseEvent<HTMLButtonElement>;
1702
+ type: "click";
1703
+ });
1704
+ export declare const TagGroup: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
1705
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
1706
+ } & {
1707
+ children?: React.ReactNode;
1708
+ orientation?: "horizontal" | "vertical";
1709
+ label?: string;
1710
+ appearance?: TagAppearance;
1711
+ size?: TagSize;
1712
+ disabled?: boolean;
1713
+ dismissible?: boolean;
1714
+ selectedValues?: string[];
1715
+ defaultSelectedValues?: string[];
1716
+ onTagSelect?: (event: SharePointUIEvent, data: TagGroupReactSelectData) => void;
1717
+ onDismiss?: (event: TagDismissEvent, data: {
1718
+ value: string;
1719
+ }) => void;
1720
+ } & React.RefAttributes<HTMLElement>>;
1721
+ type TagPickerReactOpenChangeData = {
1722
+ open: boolean;
1723
+ reason: string;
1724
+ } & ({
1725
+ type: undefined;
1726
+ event: SharePointUIEvent;
1727
+ } | {
1728
+ type: "click";
1729
+ event: React.MouseEvent<HTMLDivElement>;
1730
+ } | {
1731
+ type: "keydown";
1732
+ event: React.KeyboardEvent<HTMLDivElement>;
1733
+ } | {
1734
+ type: Exclude<TagPickerOpenChangeType, "click" | "keydown" | "programmatic">;
1735
+ event: SharePointUIEvent;
1736
+ } | {
1737
+ type: "programmatic";
1738
+ event: Event;
1739
+ });
1740
+ type TagPickerReactOptionSelectData = {
1741
+ value: string;
1742
+ selectedOptions: string[];
1743
+ } & ({
1744
+ type: undefined;
1745
+ event: SharePointUIEvent;
1746
+ } | {
1747
+ type: "click";
1748
+ event: React.MouseEvent<HTMLDivElement>;
1749
+ } | {
1750
+ type: "keydown";
1751
+ event: React.KeyboardEvent<HTMLDivElement>;
1752
+ });
1753
+ export type TagPickerProps = Omit<ElementProps, "onChange"> & {
1754
+ children?: React.ReactNode;
1755
+ label?: string;
1756
+ selectedLabel?: string;
1757
+ form?: string;
1758
+ disabled?: boolean;
1759
+ selectedOptions?: readonly string[];
1760
+ defaultSelectedOptions?: readonly string[];
1761
+ selectedValues?: readonly string[];
1762
+ defaultSelectedValues?: readonly string[];
1763
+ inputValue?: string;
1764
+ open?: boolean;
1765
+ defaultOpen?: boolean;
1766
+ positioning?: TooltipPositioning;
1767
+ disableAutoFocus?: boolean;
1768
+ inline?: boolean;
1769
+ noPopover?: boolean;
1770
+ onOpenChange?: (event: SharePointUIEvent, data: TagPickerReactOpenChangeData) => void;
1771
+ onOptionSelect?: (event: SharePointUIEvent, data: TagPickerReactOptionSelectData) => void;
1772
+ onInputValueChange?: (value: string) => void;
1773
+ onChange?: (values: string[]) => void;
1774
+ };
1775
+ export declare const TagPicker: React.ForwardRefExoticComponent<Omit<ElementProps, "onChange"> & {
1776
+ children?: React.ReactNode;
1777
+ label?: string;
1778
+ selectedLabel?: string;
1779
+ form?: string;
1780
+ disabled?: boolean;
1781
+ selectedOptions?: readonly string[];
1782
+ defaultSelectedOptions?: readonly string[];
1783
+ selectedValues?: readonly string[];
1784
+ defaultSelectedValues?: readonly string[];
1785
+ inputValue?: string;
1786
+ open?: boolean;
1787
+ defaultOpen?: boolean;
1788
+ positioning?: TooltipPositioning;
1789
+ disableAutoFocus?: boolean;
1790
+ inline?: boolean;
1791
+ noPopover?: boolean;
1792
+ onOpenChange?: (event: SharePointUIEvent, data: TagPickerReactOpenChangeData) => void;
1793
+ onOptionSelect?: (event: SharePointUIEvent, data: TagPickerReactOptionSelectData) => void;
1794
+ onInputValueChange?: (value: string) => void;
1795
+ onChange?: (values: string[]) => void;
1796
+ } & React.RefAttributes<HTMLElement>>;
1797
+ export declare function TagPickerControl({ children, secondaryAction, expandIcon }: ElementProps & {
1798
+ children?: React.ReactNode;
1799
+ secondaryAction?: React.ReactNode;
1800
+ expandIcon?: React.ReactNode;
1801
+ }): React.ReactElement;
1802
+ export declare const TagPickerGroup: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
1803
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
1804
+ } & {
1805
+ children?: React.ReactNode;
1806
+ label?: string;
1807
+ } & React.RefAttributes<HTMLElement>>;
1808
+ export declare const TagPickerInput: React.ForwardRefExoticComponent<Omit<ElementProps, "children"> & {
1809
+ value?: string;
1810
+ placeholder?: string;
1811
+ disabled?: boolean;
1812
+ clearable?: boolean;
1813
+ appearance?: "filled-darker" | "filled-lighter" | "outline" | "underline";
1814
+ onValueChange?: (value: string) => void;
1815
+ } & React.RefAttributes<HTMLElement>>;
1816
+ export declare function TagPickerList({ children }: ElementProps & {
1817
+ children?: React.ReactNode;
1818
+ disableAutoFocus?: boolean;
1819
+ }): React.ReactElement;
1820
+ export declare function TagPickerButton({ children, appearance, size, disabled, ...props }: ElementProps & {
1821
+ children?: React.ReactNode;
1822
+ appearance?: "filled-darker" | "filled-lighter" | "outline" | "underline";
1823
+ size?: "small" | "medium" | "large";
1824
+ disabled?: boolean;
1825
+ }): React.ReactElement;
1826
+ export declare const TagPickerOption: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
1827
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
1828
+ } & {
1829
+ value: string;
1830
+ text?: string;
1831
+ label?: string;
1832
+ group?: string;
1833
+ media?: React.ReactNode;
1834
+ secondaryContent?: React.ReactNode;
1835
+ disabled?: boolean;
1836
+ children?: React.ReactNode;
1837
+ } & React.RefAttributes<HTMLElement>>;
1838
+ export declare const TagPickerOptionGroup: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
1839
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
1840
+ } & {
1841
+ children?: React.ReactNode;
1842
+ label: string;
1843
+ disabled?: boolean;
1844
+ } & React.RefAttributes<HTMLElement>>;
1845
+ export type RatingOnChangeData = {
1846
+ value: number;
1847
+ } & ({
1848
+ event: SharePointUIEvent;
1849
+ type: undefined;
1850
+ } | {
1851
+ event: React.FormEvent<HTMLDivElement>;
1852
+ type: "change";
1853
+ });
1854
+ export type RatingInputSlot = React.ReactElement<any> | Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "name" | "value" | "checked" | "disabled" | "required">;
1855
+ export type RatingProps = Omit<ElementProps, "onChange"> & {
1856
+ value?: number;
1857
+ defaultValue?: number;
1858
+ max?: number;
1859
+ step?: 0.5 | 1;
1860
+ size?: "small" | "medium" | "large" | "extra-large";
1861
+ color?: "brand" | "marigold" | "neutral";
1862
+ label?: string;
1863
+ itemLabel?: (rating: number) => string;
1864
+ iconFilled?: React.ElementType;
1865
+ iconOutline?: React.ElementType;
1866
+ fullValueInput?: RatingInputSlot;
1867
+ halfValueInput?: RatingInputSlot;
1868
+ name?: string;
1869
+ form?: string;
1870
+ disabled?: boolean;
1871
+ readOnly?: boolean;
1872
+ required?: boolean;
1873
+ onChange?: (event: SharePointUIEvent, data: RatingOnChangeData) => void;
1874
+ };
1875
+ export declare const Rating: React.ForwardRefExoticComponent<Omit<ElementProps, "onChange"> & {
1876
+ value?: number;
1877
+ defaultValue?: number;
1878
+ max?: number;
1879
+ step?: 0.5 | 1;
1880
+ size?: "small" | "medium" | "large" | "extra-large";
1881
+ color?: "brand" | "marigold" | "neutral";
1882
+ label?: string;
1883
+ itemLabel?: (rating: number) => string;
1884
+ iconFilled?: React.ElementType;
1885
+ iconOutline?: React.ElementType;
1886
+ fullValueInput?: RatingInputSlot;
1887
+ halfValueInput?: RatingInputSlot;
1888
+ name?: string;
1889
+ form?: string;
1890
+ disabled?: boolean;
1891
+ readOnly?: boolean;
1892
+ required?: boolean;
1893
+ onChange?: (event: SharePointUIEvent, data: RatingOnChangeData) => void;
1894
+ } & React.RefAttributes<HTMLElement>>;
1895
+ export declare const RatingItem: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
1896
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
1897
+ } & {
1898
+ value?: number;
1899
+ selectedIcon?: React.ReactNode;
1900
+ unselectedIcon?: React.ReactNode;
1901
+ } & React.RefAttributes<HTMLElement>>;
1902
+ export declare const RatingDisplay: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
1903
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
1904
+ } & {
1905
+ value?: number;
1906
+ max?: number;
1907
+ count?: number;
1908
+ compact?: boolean;
1909
+ color?: "brand" | "marigold" | "neutral";
1910
+ size?: "small" | "medium" | "large" | "extra-large";
1911
+ icon?: React.ElementType;
1912
+ label?: string;
1913
+ valueText?: React.ReactNode;
1914
+ countText?: React.ReactNode;
1915
+ children?: React.ReactNode;
1916
+ } & React.RefAttributes<HTMLElement>>;
1917
+ export type ListOnSelectionChangeData = {
1918
+ event: SharePointUIEvent;
1919
+ type: undefined;
1920
+ selectedItems: ListItemValue[];
1921
+ } | {
1922
+ event: React.SyntheticEvent;
1923
+ type: "change";
1924
+ selectedItems: ListItemValue[];
1925
+ };
1926
+ export declare const List: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
1927
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
1928
+ } & {
1929
+ navigationMode?: ListNavigationMode;
1930
+ selectionMode?: ListSelectionMode;
1931
+ selectedItems?: ListItemValue[];
1932
+ defaultSelectedItems?: ListItemValue[];
1933
+ onSelectionChange?: (event: SharePointUIEvent, data: ListOnSelectionChangeData) => void;
1934
+ children?: React.ReactNode;
1935
+ } & React.RefAttributes<HTMLElement>>;
1936
+ export type ListItemReactActionEvent = CustomEvent<{
1937
+ originalEvent: React.MouseEvent | React.KeyboardEvent;
1938
+ }>;
1939
+ export type ListItemReactActionData = {
1940
+ event: SharePointUIEvent;
1941
+ type: undefined;
1942
+ value: ListItemValue;
1943
+ } | {
1944
+ event: ListItemReactActionEvent;
1945
+ type: "ListItemAction";
1946
+ value: ListItemValue;
1947
+ };
1948
+ export declare const ListItem: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
1949
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
1950
+ } & {
1951
+ value?: ListItemValue;
1952
+ disabledSelection?: boolean;
1953
+ checkmark?: React.ReactNode;
1954
+ onAction?: (event: SharePointUIEvent, data: ListItemReactActionData) => void;
1955
+ children?: React.ReactNode;
1956
+ } & React.RefAttributes<HTMLElement>>;
1957
+ export declare const CarouselCard: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
1958
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
1959
+ } & {
1960
+ children?: React.ReactNode;
1961
+ autoSize?: boolean;
1962
+ } & React.RefAttributes<HTMLElement>>;
1963
+ export declare const CarouselNav: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
1964
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
1965
+ } & {
1966
+ children?: React.ReactNode;
1967
+ label?: string;
1968
+ appearance?: "brand";
1969
+ slot?: string;
1970
+ } & React.RefAttributes<HTMLElement>>;
1971
+ export declare const CarouselNavButton: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
1972
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
1973
+ } & {
1974
+ children?: React.ReactNode;
1975
+ index: number;
1976
+ label?: string;
1977
+ selected?: boolean;
1978
+ disabled?: boolean;
1979
+ } & React.RefAttributes<HTMLElement>>;
1980
+ export declare const CarouselNavImageButton: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
1981
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
1982
+ } & {
1983
+ index: number;
1984
+ src: string;
1985
+ alt: string;
1986
+ label?: string;
1987
+ image?: React.ReactElement;
1988
+ selected?: boolean;
1989
+ disabled?: boolean;
1990
+ } & React.RefAttributes<HTMLElement>>;
1991
+ export declare const CarouselButton: React.ForwardRefExoticComponent<Omit<ElementProps, "slot"> & {
1992
+ children?: React.ReactNode;
1993
+ icon?: React.ReactNode;
1994
+ navType?: "prev" | "next";
1995
+ label?: string;
1996
+ slot?: string | null;
1997
+ } & React.RefAttributes<HTMLElement>>;
1998
+ export type CarouselAutoplayChangeData = {
1999
+ checked: boolean;
2000
+ } & ({
2001
+ event: SharePointUIEvent;
2002
+ type: undefined;
2003
+ } | {
2004
+ event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>;
2005
+ type: "click";
2006
+ });
2007
+ export type CarouselAutoplayButtonProps = Omit<ElementProps, "slot"> & {
2008
+ icon?: React.ReactNode;
2009
+ appearance?: ButtonAppearance;
2010
+ checked?: boolean;
2011
+ defaultChecked?: boolean;
2012
+ disabled?: boolean;
2013
+ disabledFocusable?: boolean;
2014
+ iconPosition?: "before" | "after";
2015
+ isAccessible?: boolean;
2016
+ shape?: ButtonShape;
2017
+ size?: ButtonSize;
2018
+ playLabel?: string;
2019
+ pauseLabel?: string;
2020
+ onCheckedChange?: (event: SharePointUIEvent, data: CarouselAutoplayChangeData) => void;
2021
+ slot?: string | null;
2022
+ };
2023
+ export declare const CarouselAutoplayButton: React.ForwardRefExoticComponent<Omit<ElementProps, "slot"> & {
2024
+ icon?: React.ReactNode;
2025
+ appearance?: ButtonAppearance;
2026
+ checked?: boolean;
2027
+ defaultChecked?: boolean;
2028
+ disabled?: boolean;
2029
+ disabledFocusable?: boolean;
2030
+ iconPosition?: "before" | "after";
2031
+ isAccessible?: boolean;
2032
+ shape?: ButtonShape;
2033
+ size?: ButtonSize;
2034
+ playLabel?: string;
2035
+ pauseLabel?: string;
2036
+ onCheckedChange?: (event: SharePointUIEvent, data: CarouselAutoplayChangeData) => void;
2037
+ slot?: string | null;
2038
+ } & React.RefAttributes<HTMLElement>>;
2039
+ export type CarouselNavButtonSlotProps = React.ReactElement | Omit<Parameters<typeof CarouselButton>[0], "navType" | "slot">;
2040
+ export type CarouselAutoplaySlotProps = React.ReactElement | Omit<Parameters<typeof CarouselAutoplayButton>[0], "slot"> | boolean;
2041
+ export type CarouselTooltipSlotProps = React.ReactElement | Omit<Parameters<typeof Tooltip>[0], "children" | "slot">;
2042
+ export type CarouselReactIndexChangeData = {
2043
+ index: number;
2044
+ } & ({
2045
+ event: SharePointUIEvent;
2046
+ type: undefined;
2047
+ } | {
2048
+ event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>;
2049
+ type: "click";
2050
+ } | {
2051
+ event: React.FocusEvent<Element>;
2052
+ type: "focus";
2053
+ } | {
2054
+ event: PointerEvent | MouseEvent;
2055
+ type: "drag";
2056
+ } | {
2057
+ event: Event;
2058
+ type: "autoplay" | "scroll" | "programmatic";
2059
+ } | {
2060
+ event: React.KeyboardEvent<HTMLElement>;
2061
+ type: "keydown";
2062
+ });
2063
+ export declare const CarouselNavContainer: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
2064
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
2065
+ } & {
2066
+ children?: React.ReactNode;
2067
+ prev?: CarouselNavButtonSlotProps | null;
2068
+ next?: CarouselNavButtonSlotProps | null;
2069
+ autoplay?: CarouselAutoplaySlotProps | null;
2070
+ prevTooltip?: CarouselTooltipSlotProps | null;
2071
+ nextTooltip?: CarouselTooltipSlotProps | null;
2072
+ autoplayTooltip?: CarouselTooltipSlotProps | null;
2073
+ layout?: "inline" | "inline-wide" | "overlay" | "overlay-wide" | "overlay-expanded";
2074
+ } & React.RefAttributes<HTMLElement>>;
2075
+ export declare function CarouselProvider({ value, children }: {
2076
+ value: CarouselContextValue | undefined;
2077
+ children?: React.ReactNode;
2078
+ }): React.ReactElement;
2079
+ export declare function useCarouselContext(): CarouselContextValue | undefined;
2080
+ export declare const CarouselSlider: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
2081
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
2082
+ } & {
2083
+ children?: React.ReactNode;
2084
+ cardFocus?: boolean;
2085
+ } & React.RefAttributes<HTMLElement>>;
2086
+ export declare const CarouselViewport: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
2087
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
2088
+ } & {
2089
+ children?: React.ReactNode;
2090
+ } & React.RefAttributes<HTMLElement>>;
2091
+ export declare const Carousel: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
2092
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
2093
+ } & {
2094
+ children?: React.ReactNode;
2095
+ label?: string;
2096
+ roleDescription?: string;
2097
+ previousLabel?: string;
2098
+ nextLabel?: string;
2099
+ slideLabel?: string;
2100
+ slideGroupLabel?: string;
2101
+ navigationLabel?: string;
2102
+ playLabel?: string;
2103
+ pauseLabel?: string;
2104
+ slideWidth?: string;
2105
+ align?: CarouselAlign;
2106
+ appearance?: CarouselAppearance;
2107
+ motion?: CarouselMotion;
2108
+ motionDuration?: number;
2109
+ autoplay?: boolean;
2110
+ autoplayInterval?: number;
2111
+ selectedIndex?: number;
2112
+ activeIndex?: number;
2113
+ defaultSelectedIndex?: number;
2114
+ defaultActiveIndex?: number;
2115
+ wrap?: boolean;
2116
+ circular?: boolean;
2117
+ groupSize?: number | "auto";
2118
+ draggable?: boolean;
2119
+ whitespace?: boolean;
2120
+ announcement?: CarouselAnnouncerFunction;
2121
+ onIndexChange?: (index: number) => void;
2122
+ onActiveIndexChange?: (event: SharePointUIEvent, data: CarouselReactIndexChangeData) => void;
2123
+ } & React.RefAttributes<HTMLElement>>;
2124
+ export declare const Breadcrumb: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
2125
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
2126
+ } & {
2127
+ children?: React.ReactNode;
2128
+ label?: string;
2129
+ focusMode?: "tab" | "arrow";
2130
+ size?: "small" | "medium" | "large";
2131
+ separator?: string;
2132
+ list?: React.ReactElement;
2133
+ } & React.RefAttributes<HTMLElement>>;
2134
+ export declare const BreadcrumbItem: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
2135
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
2136
+ } & {
2137
+ children?: React.ReactNode;
2138
+ current?: boolean;
2139
+ size?: BreadcrumbSize;
2140
+ } & React.RefAttributes<HTMLElement>>;
2141
+ export declare const BreadcrumbButton: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
2142
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
2143
+ } & {
2144
+ children?: React.ReactNode;
2145
+ icon?: React.ReactNode;
2146
+ href?: string;
2147
+ target?: string;
2148
+ rel?: string;
2149
+ type?: "button" | "submit" | "reset";
2150
+ current?: boolean;
2151
+ disabled?: boolean;
2152
+ disabledFocusable?: boolean;
2153
+ size?: BreadcrumbSize;
2154
+ } & React.RefAttributes<HTMLElement>>;
2155
+ export declare const BreadcrumbDivider: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
2156
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
2157
+ } & {
2158
+ children?: React.ReactNode;
2159
+ } & React.RefAttributes<HTMLElement>>;
2160
+ export declare const Nav: React.ForwardRefExoticComponent<Omit<ElementProps, "onClick" | "onClickCapture" | "onSelect"> & {
2161
+ onClick?: React.MouseEventHandler<HTMLElement>;
2162
+ onClickCapture?: React.MouseEventHandler<HTMLElement>;
2163
+ children?: React.ReactNode;
2164
+ label?: string;
2165
+ selectedValue?: string | null;
2166
+ defaultSelectedValue?: string | null;
2167
+ selectedCategoryValue?: string | null;
2168
+ defaultSelectedCategoryValue?: string | null;
2169
+ openCategories?: readonly string[];
2170
+ defaultOpenCategories?: readonly string[];
2171
+ open?: boolean;
2172
+ defaultOpen?: boolean;
2173
+ collapsed?: boolean;
2174
+ defaultCollapsed?: boolean;
2175
+ collapsible?: boolean;
2176
+ multiple?: boolean;
2177
+ density?: "small" | "medium" | "large";
2178
+ tabbable?: boolean | "true" | "false";
2179
+ openLabel?: string;
2180
+ closeLabel?: string;
2181
+ onItemSelect?: (value: string, href: string | null, label: string) => void;
2182
+ onCategoryToggle?: (value: string, open: boolean, openCategories: string[]) => void;
2183
+ onNavItemSelect?: (event: SharePointUIEvent, data: NavReactItemSelectData) => void;
2184
+ onNavCategoryItemToggle?: (event: SharePointUIEvent, data: NavReactCategoryToggleData) => void;
2185
+ onOpenChange?: (open: boolean) => void;
2186
+ onCollapsedChange?: (collapsed: boolean) => void;
2187
+ } & React.RefAttributes<HTMLElement>>;
2188
+ export declare const NavItem: React.ForwardRefExoticComponent<Omit<ElementProps, "onClick" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & Pick<React.DOMAttributes<HTMLAnchorElement | HTMLButtonElement>, "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture"> & NativeMousePointerEventProps<HTMLAnchorElement | HTMLButtonElement> & NativeAdditionalEventProps<HTMLAnchorElement | HTMLButtonElement> & {
2189
+ onClick?: React.MouseEventHandler<HTMLAnchorElement | HTMLButtonElement> | undefined;
2190
+ onClickCapture?: React.MouseEventHandler<HTMLAnchorElement | HTMLButtonElement> | undefined;
2191
+ } & {
2192
+ children?: React.ReactNode;
2193
+ value: string;
2194
+ href?: string;
2195
+ disabled?: boolean;
2196
+ icon?: React.ReactNode;
2197
+ avatar?: React.ReactElement;
2198
+ } & React.RefAttributes<HTMLElement>>;
2199
+ export declare const NavCategory: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
2200
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
2201
+ } & {
2202
+ children?: React.ReactNode;
2203
+ value: string;
2204
+ disabled?: boolean;
2205
+ } & React.RefAttributes<HTMLElement>>;
2206
+ export declare const NavCategoryItem: React.ForwardRefExoticComponent<Omit<ElementProps, "onClick" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & Pick<React.DOMAttributes<HTMLButtonElement>, "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture"> & NativeMousePointerEventProps<HTMLButtonElement> & NativeAdditionalEventProps<HTMLButtonElement> & {
2207
+ onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
2208
+ onClickCapture?: React.MouseEventHandler<HTMLButtonElement> | undefined;
2209
+ } & {
2210
+ children?: React.ReactNode;
2211
+ icon?: React.ReactNode;
2212
+ avatar?: React.ReactElement;
2213
+ expandIcon?: React.ReactNode;
2214
+ expandIconMotion?: React.ComponentType<PresenceMotionSlotProps>;
2215
+ } & React.RefAttributes<HTMLElement>>;
2216
+ export declare const NavSubItemGroup: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
2217
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
2218
+ } & {
2219
+ children?: React.ReactNode;
2220
+ collapseMotion?: React.ComponentType<PresenceMotionSlotProps>;
2221
+ } & React.RefAttributes<HTMLElement>>;
2222
+ export declare const NavSubItem: React.ForwardRefExoticComponent<Omit<ElementProps, "onClick" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & Pick<React.DOMAttributes<HTMLAnchorElement | HTMLButtonElement>, "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture"> & NativeMousePointerEventProps<HTMLAnchorElement | HTMLButtonElement> & NativeAdditionalEventProps<HTMLAnchorElement | HTMLButtonElement> & {
2223
+ onClick?: React.MouseEventHandler<HTMLAnchorElement | HTMLButtonElement> | undefined;
2224
+ onClickCapture?: React.MouseEventHandler<HTMLAnchorElement | HTMLButtonElement> | undefined;
2225
+ } & {
2226
+ children?: React.ReactNode;
2227
+ value: string;
2228
+ href?: string;
2229
+ disabled?: boolean;
2230
+ icon?: React.ReactNode;
2231
+ avatar?: React.ReactElement;
2232
+ } & React.RefAttributes<HTMLElement>>;
2233
+ export type NavDividerProps = ElementProps & {
2234
+ wrapper?: DividerWrapper;
2235
+ alignContent?: "start" | "center" | "end";
2236
+ appearance?: DividerAppearance;
2237
+ inset?: boolean;
2238
+ vertical?: boolean;
2239
+ };
2240
+ export declare const NavDivider: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
2241
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
2242
+ } & {
2243
+ wrapper?: DividerWrapper;
2244
+ alignContent?: "start" | "center" | "end";
2245
+ appearance?: DividerAppearance;
2246
+ inset?: boolean;
2247
+ vertical?: boolean;
2248
+ } & React.RefAttributes<HTMLElement>>;
2249
+ export declare const NavSectionHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
2250
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
2251
+ } & {
2252
+ children?: React.ReactNode;
2253
+ } & React.RefAttributes<HTMLElement>>;
2254
+ export declare const AppItem: React.ForwardRefExoticComponent<Omit<ElementProps, "onClick" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & Pick<React.DOMAttributes<HTMLAnchorElement | HTMLButtonElement>, "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture"> & NativeMousePointerEventProps<HTMLAnchorElement | HTMLButtonElement> & NativeAdditionalEventProps<HTMLAnchorElement | HTMLButtonElement> & {
2255
+ onClick?: React.MouseEventHandler<HTMLAnchorElement | HTMLButtonElement> | undefined;
2256
+ onClickCapture?: React.MouseEventHandler<HTMLAnchorElement | HTMLButtonElement> | undefined;
2257
+ } & {
2258
+ children?: React.ReactNode;
2259
+ value: string;
2260
+ href?: string;
2261
+ disabled?: boolean;
2262
+ icon?: React.ReactNode;
2263
+ avatar?: React.ReactElement;
2264
+ } & React.RefAttributes<HTMLElement>>;
2265
+ export declare const AppItemStatic: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
2266
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
2267
+ } & {
2268
+ children?: React.ReactNode;
2269
+ icon?: React.ReactNode;
2270
+ } & React.RefAttributes<HTMLElement>>;
2271
+ export type HamburgerProps = NativeButtonHostProps & {
2272
+ children?: React.ReactNode;
2273
+ icon?: React.ReactNode;
2274
+ open?: boolean;
2275
+ label?: string;
2276
+ disabled?: boolean;
2277
+ disabledFocusable?: boolean;
2278
+ appearance?: ButtonAppearance;
2279
+ iconPosition?: "before" | "after";
2280
+ shape?: ButtonShape;
2281
+ size?: ButtonSize;
2282
+ };
2283
+ export declare const Hamburger: React.ForwardRefExoticComponent<Omit<ElementProps, "onClick" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & Pick<React.DOMAttributes<HTMLButtonElement>, "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture"> & NativeMousePointerEventProps<HTMLButtonElement> & NativeAdditionalEventProps<HTMLButtonElement> & {
2284
+ onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
2285
+ onClickCapture?: React.MouseEventHandler<HTMLButtonElement> | undefined;
2286
+ } & {
2287
+ children?: React.ReactNode;
2288
+ icon?: React.ReactNode;
2289
+ open?: boolean;
2290
+ label?: string;
2291
+ disabled?: boolean;
2292
+ disabledFocusable?: boolean;
2293
+ appearance?: ButtonAppearance;
2294
+ iconPosition?: "before" | "after";
2295
+ shape?: ButtonShape;
2296
+ size?: ButtonSize;
2297
+ } & React.RefAttributes<HTMLElement>>;
2298
+ export type NavDrawerProps = Omit<React.ComponentProps<typeof Nav>, "children" | "open" | "defaultOpen" | "onOpenChange"> & {
2299
+ children?: React.ReactNode;
2300
+ type?: "overlay" | "inline";
2301
+ open?: boolean;
2302
+ defaultOpen?: boolean;
2303
+ modal?: boolean;
2304
+ dismissible?: boolean;
2305
+ position?: "start" | "end" | "top" | "bottom";
2306
+ size?: "small" | "medium" | "large" | "full";
2307
+ expandable?: boolean;
2308
+ expanded?: boolean;
2309
+ unmountOnClose?: boolean;
2310
+ separator?: boolean;
2311
+ closeLabel?: string;
2312
+ onOpenChange?: (open: boolean) => void;
2313
+ onDismiss?: () => void;
2314
+ onExpandedChange?: (expanded: boolean) => void;
2315
+ tabbable?: boolean;
2316
+ };
2317
+ export declare const NavDrawer: React.ForwardRefExoticComponent<Omit<NavDrawerProps, "ref"> & React.RefAttributes<HTMLElement>>;
2318
+ export declare const NavDrawerHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
2319
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
2320
+ } & {
2321
+ children?: React.ReactNode;
2322
+ } & React.RefAttributes<HTMLElement>>;
2323
+ export declare const NavDrawerBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
2324
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
2325
+ } & {
2326
+ children?: React.ReactNode;
2327
+ } & React.RefAttributes<HTMLElement>>;
2328
+ export declare const NavDrawerFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
2329
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
2330
+ } & {
2331
+ children?: React.ReactNode;
2332
+ } & React.RefAttributes<HTMLElement>>;
2333
+ export declare const SplitNavItem: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
2334
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
2335
+ } & {
2336
+ children?: React.ReactNode;
2337
+ value: string;
2338
+ href?: string;
2339
+ disabled?: boolean;
2340
+ icon?: React.ReactNode;
2341
+ action?: React.ReactNode;
2342
+ actionLabel?: string;
2343
+ onAction?: React.MouseEventHandler<HTMLButtonElement>;
2344
+ navItem?: React.ReactElement;
2345
+ actionButton?: React.ReactElement;
2346
+ actionButtonTooltip?: React.ReactElement;
2347
+ menuButton?: React.ReactElement;
2348
+ menuButtonTooltip?: React.ReactElement;
2349
+ toggleButton?: React.ReactElement;
2350
+ toggleButtonTooltip?: React.ReactElement;
2351
+ } & React.RefAttributes<HTMLElement>>;
2352
+ export type TabValue = unknown;
2353
+ export declare const Tabs: <T = string>(props: ElementProps & {
2354
+ children?: React.ReactNode;
2355
+ selectedValue?: T;
2356
+ defaultSelectedValue?: T;
2357
+ disabled?: boolean;
2358
+ onTabSelect?: (value: T) => void;
2359
+ } & React.RefAttributes<HTMLElement>) => React.ReactElement;
2360
+ export type TabSelectData = {
2361
+ value: TabValue;
2362
+ };
2363
+ export type TabSelectEvent = React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement> | React.FocusEvent<HTMLElement>;
2364
+ export type TabRegisterData = {
2365
+ value: TabValue;
2366
+ ref: React.RefObject<HTMLElement | null>;
2367
+ };
2368
+ export type TabListProviderValue = {
2369
+ onTabSelect?: (event: TabSelectEvent, data: TabSelectData) => void;
2370
+ selectTabOnFocus?: boolean;
2371
+ selectedValue?: TabValue;
2372
+ reserveSelectedTabSpace?: boolean;
2373
+ appearance: "transparent" | "subtle" | "subtle-circular" | "filled-circular";
2374
+ disabled: boolean;
2375
+ size: "small" | "medium" | "large";
2376
+ vertical: boolean;
2377
+ onRegister: (data: TabRegisterData) => void;
2378
+ onUnregister: (data: TabRegisterData) => void;
2379
+ onSelect: (event: TabSelectEvent, data: TabSelectData) => void;
2380
+ getRegisteredTabs: () => {
2381
+ selectedValue?: TabValue;
2382
+ previousSelectedValue?: TabValue;
2383
+ registeredTabs: Record<string, TabRegisterData>;
2384
+ };
2385
+ };
2386
+ export declare function TabListProvider({ value, children }: {
2387
+ value: TabListProviderValue;
2388
+ children?: React.ReactNode;
2389
+ }): React.ReactElement;
2390
+ export type TabListProps = ElementProps & {
2391
+ children?: React.ReactNode;
2392
+ selectedValue?: TabValue;
2393
+ defaultSelectedValue?: TabValue;
2394
+ selectTabOnFocus?: boolean;
2395
+ reserveSelectedTabSpace?: boolean;
2396
+ vertical?: boolean;
2397
+ disabled?: boolean;
2398
+ appearance?: "transparent" | "subtle" | "subtle-circular" | "filled-circular";
2399
+ size?: "small" | "medium" | "large";
2400
+ onTabSelect?: (event: TabSelectEvent, data: TabSelectData) => void;
2401
+ };
2402
+ export declare const TabList: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
2403
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
2404
+ } & {
2405
+ children?: React.ReactNode;
2406
+ selectedValue?: TabValue;
2407
+ defaultSelectedValue?: TabValue;
2408
+ selectTabOnFocus?: boolean;
2409
+ reserveSelectedTabSpace?: boolean;
2410
+ vertical?: boolean;
2411
+ disabled?: boolean;
2412
+ appearance?: "transparent" | "subtle" | "subtle-circular" | "filled-circular";
2413
+ size?: "small" | "medium" | "large";
2414
+ onTabSelect?: (event: TabSelectEvent, data: TabSelectData) => void;
2415
+ } & React.RefAttributes<HTMLElement>>;
2416
+ export declare const Tab: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
2417
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
2418
+ } & {
2419
+ value: TabValue;
2420
+ disabled?: boolean;
2421
+ icon?: React.ReactNode;
2422
+ content?: React.ReactNode;
2423
+ children?: React.ReactNode;
2424
+ } & React.RefAttributes<HTMLElement>>;
2425
+ export declare const TabPanel: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
2426
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
2427
+ } & {
2428
+ value: TabValue;
2429
+ children?: React.ReactNode;
2430
+ } & React.RefAttributes<HTMLElement>>;
2431
+ export type TooltipVisibleChangeEvent = React.PointerEvent<HTMLElement> | React.FocusEvent<HTMLElement> | undefined;
2432
+ export type TooltipProps = ElementProps & {
2433
+ children?: React.ReactNode;
2434
+ content?: React.ReactNode;
2435
+ mountNode?: PortalMountNode;
2436
+ placement?: "top" | "bottom" | "start" | "end" | "left" | "right";
2437
+ positioning?: TooltipPositioning;
2438
+ align?: "start" | "center" | "end";
2439
+ offset?: number;
2440
+ appearance?: TooltipAppearance;
2441
+ relationship?: TooltipRelationship;
2442
+ disabled?: boolean;
2443
+ open?: boolean;
2444
+ visible?: boolean;
2445
+ delay?: number;
2446
+ showDelay?: number;
2447
+ hideDelay?: number;
2448
+ withArrow?: boolean;
2449
+ onOpenChange?: (open: boolean) => void;
2450
+ onVisibleChange?: (event: TooltipVisibleChangeEvent, data: TooltipVisibleChangeData) => void;
2451
+ };
2452
+ export declare const Tooltip: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
2453
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
2454
+ } & {
2455
+ children?: React.ReactNode;
2456
+ content?: React.ReactNode;
2457
+ mountNode?: PortalMountNode;
2458
+ placement?: "top" | "bottom" | "start" | "end" | "left" | "right";
2459
+ positioning?: TooltipPositioning;
2460
+ align?: "start" | "center" | "end";
2461
+ offset?: number;
2462
+ appearance?: TooltipAppearance;
2463
+ relationship?: TooltipRelationship;
2464
+ disabled?: boolean;
2465
+ open?: boolean;
2466
+ visible?: boolean;
2467
+ delay?: number;
2468
+ showDelay?: number;
2469
+ hideDelay?: number;
2470
+ withArrow?: boolean;
2471
+ onOpenChange?: (open: boolean) => void;
2472
+ onVisibleChange?: (event: TooltipVisibleChangeEvent, data: TooltipVisibleChangeData) => void;
2473
+ } & React.RefAttributes<HTMLElement>>;
2474
+ export type PopoverContextValue = {
2475
+ open: boolean;
2476
+ toggleOpen: (event: Event) => void;
2477
+ setOpen: (event: Event, open: boolean) => void;
2478
+ triggerRef: React.MutableRefObject<HTMLElement | null>;
2479
+ contentRef: React.MutableRefObject<HTMLElement | null>;
2480
+ openOnHover: boolean;
2481
+ openOnContext: boolean;
2482
+ mountNode?: PortalMountNode;
2483
+ withArrow: boolean;
2484
+ arrowRef: React.MutableRefObject<HTMLDivElement | null>;
2485
+ size: "small" | "medium" | "large";
2486
+ appearance?: "brand" | "inverted";
2487
+ trapFocus: boolean;
2488
+ inertTrapFocus?: boolean;
2489
+ inline: boolean;
2490
+ };
2491
+ export declare function PopoverProvider({ value, children }: {
2492
+ value: PopoverContextValue;
2493
+ children?: React.ReactNode;
2494
+ }): React.ReactElement;
2495
+ export type PopoverOpenChangeEvent = MouseEvent | TouchEvent | FocusEvent | React.FocusEvent<HTMLElement> | React.KeyboardEvent<HTMLElement> | React.MouseEvent<HTMLElement>;
2496
+ export declare const Popover: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
2497
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
2498
+ } & {
2499
+ children?: React.ReactNode;
2500
+ trigger?: React.ReactElement;
2501
+ label?: string;
2502
+ placement?: "top" | "bottom" | "start" | "end";
2503
+ positioning?: PopoverPositioning;
2504
+ open?: boolean;
2505
+ defaultOpen?: boolean;
2506
+ openOnContext?: boolean;
2507
+ openOnHover?: boolean;
2508
+ mouseLeaveDelay?: number;
2509
+ closeOnIframeFocus?: boolean;
2510
+ onOpenChange?: (event: PopoverOpenChangeEvent, data: PopoverOpenChangeData) => void;
2511
+ inline?: boolean;
2512
+ trapFocus?: boolean;
2513
+ inertTrapFocus?: boolean;
2514
+ legacyTrapFocus?: boolean;
2515
+ unstable_disableAutoFocus?: boolean;
2516
+ arrow?: boolean;
2517
+ withArrow?: boolean;
2518
+ appearance?: "brand" | "inverted";
2519
+ size?: "small" | "medium" | "large";
2520
+ closeOnScroll?: boolean;
2521
+ surfaceMotion?: React.ComponentType<PresenceMotionSlotProps>;
2522
+ mountNode?: PortalMountNode;
2523
+ } & React.RefAttributes<HTMLElement>>;
2524
+ export declare const PopoverTrigger: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
2525
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
2526
+ } & {
2527
+ children?: React.ReactNode;
2528
+ disableButtonEnhancement?: boolean;
2529
+ } & React.RefAttributes<HTMLElement>>;
2530
+ export declare const PopoverSurface: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
2531
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
2532
+ } & {
2533
+ children?: React.ReactNode;
2534
+ } & React.RefAttributes<HTMLElement>>;
2535
+ type TeachingPopoverCarouselEventData<TType extends string> = {
2536
+ type: undefined;
2537
+ event: Event | React.SyntheticEvent;
2538
+ } | (TType extends "click" ? {
2539
+ type: TType;
2540
+ event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>;
2541
+ } : TType extends "keydown" ? {
2542
+ type: TType;
2543
+ event: React.KeyboardEvent<HTMLElement>;
2544
+ } : {
2545
+ type: TType;
2546
+ event: Event;
2547
+ });
2548
+ export type TeachingPopoverCarouselValueChangeData = TeachingPopoverCarouselEventData<TeachingPopoverCarouselValueChangeType> & {
2549
+ value?: string;
2550
+ };
2551
+ export type TeachingPopoverCarouselFinishData = TeachingPopoverCarouselEventData<"click"> & {
2552
+ value?: string;
2553
+ };
2554
+ export type TeachingPopoverCarouselChangeEvent = Event | React.SyntheticEvent;
2555
+ export type TeachingPopoverProps = React.ComponentProps<typeof Popover>;
2556
+ /** Guided, keyboard-contained help surface. Its parts use native React composition and add no runtime dependency. */
2557
+ export declare function TeachingPopover({ children, trigger, trapFocus, withArrow, ...props }: TeachingPopoverProps): React.ReactElement;
2558
+ export declare const TeachingPopoverTrigger: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
2559
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
2560
+ } & {
2561
+ children?: React.ReactNode;
2562
+ disableButtonEnhancement?: boolean;
2563
+ } & React.RefAttributes<HTMLElement>>;
2564
+ export declare function TeachingPopoverSurface({ children, ...props }: ElementProps & {
2565
+ children?: React.ReactNode;
2566
+ }): React.ReactElement;
2567
+ export type TeachingPopoverButtonSlot = React.ReactNode | Parameters<typeof Button>[0];
2568
+ export declare function TeachingPopoverHeader({ children, icon, dismissButton, onDismiss, dismissLabel, style, ...props }: ElementProps & {
2569
+ children?: React.ReactNode;
2570
+ icon?: React.ReactNode;
2571
+ dismissButton?: TeachingPopoverButtonSlot;
2572
+ onDismiss?: () => void;
2573
+ dismissLabel?: string;
2574
+ }): React.ReactElement;
2575
+ export declare function TeachingPopoverTitle({ children, dismissButton, ...props }: ElementProps & {
2576
+ children?: React.ReactNode;
2577
+ dismissButton?: TeachingPopoverButtonSlot;
2578
+ }): React.ReactElement;
2579
+ export declare function TeachingPopoverBody({ children, media, mediaLength, ...props }: ElementProps & {
2580
+ children?: React.ReactNode;
2581
+ media?: React.ReactNode;
2582
+ mediaLength?: "short" | "medium" | "tall";
2583
+ }): React.ReactElement;
2584
+ export declare const TeachingPopoverFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
2585
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
2586
+ } & {
2587
+ children?: React.ReactNode;
2588
+ primary: React.ReactNode | Parameters<typeof Button>[0];
2589
+ secondary?: React.ReactNode | Parameters<typeof Button>[0];
2590
+ footerLayout?: "horizontal" | "vertical";
2591
+ } & React.RefAttributes<HTMLElement>>;
2592
+ export declare function TeachingPopoverCarousel({ children, defaultValue, value, onValueChange, onAnnouncement, announcement, onFinish, ...props }: ElementProps & {
2593
+ children?: React.ReactNode;
2594
+ value?: string;
2595
+ defaultValue?: string;
2596
+ onValueChange?: (event: TeachingPopoverCarouselChangeEvent, data: TeachingPopoverCarouselValueChangeData) => void;
2597
+ onAnnouncement?: (message: string) => void;
2598
+ announcement?: (newValue: string) => string;
2599
+ onFinish?: (event: TeachingPopoverCarouselChangeEvent, data: TeachingPopoverCarouselFinishData) => void;
2600
+ }): React.ReactElement;
2601
+ export declare function TeachingPopoverCarouselCard({ value: _value, children, ...props }: ElementProps & {
2602
+ value: string;
2603
+ children?: React.ReactNode;
2604
+ }): React.ReactElement;
2605
+ export declare function TeachingPopoverCarouselFooter({ children, previous, next, layout, initialStepText, finalStepText, ...props }: ElementProps & {
2606
+ children?: React.ReactNode;
2607
+ previous?: React.ReactNode;
2608
+ next?: React.ReactNode;
2609
+ layout?: "centered" | "offset";
2610
+ initialStepText?: string;
2611
+ finalStepText?: string;
2612
+ }): React.ReactElement;
2613
+ export type TeachingPopoverCarouselFooterButtonProps = Omit<ButtonProps, "children"> & {
2614
+ navType: "next" | "prev" | "previous" | "dismiss";
2615
+ altText?: React.ReactNode;
2616
+ children?: React.ReactNode;
2617
+ };
2618
+ export declare function TeachingPopoverCarouselFooterButton({ navType, altText, children, onClick, appearance, size, shape, icon, iconPosition, ...props }: TeachingPopoverCarouselFooterButtonProps): React.ReactElement;
2619
+ export declare function TeachingPopoverCarouselNav({ children, onKeyDown, ...props }: ElementProps & {
2620
+ children?: React.ReactNode;
2621
+ }): React.ReactElement;
2622
+ export declare function TeachingPopoverCarouselNavButton({ value, children, onClick, ...props }: ElementProps & {
2623
+ value: string;
2624
+ children?: React.ReactNode;
2625
+ }): React.ReactElement;
2626
+ export declare function TeachingPopoverCarouselPageCount({ children, ...props }: ElementProps & {
2627
+ children?: React.ReactNode | ((currentPage: number, totalPages: number) => React.ReactNode);
2628
+ }): React.ReactElement;
2629
+ export type MenuPositioning = "top" | "bottom" | "start" | "end" | "above" | "below" | "before" | "after" | "above-start" | "above-end" | "below-start" | "below-end";
2630
+ export type MenuPositioningOptions = {
2631
+ placement?: MenuPositioning;
2632
+ align?: "start" | "end";
2633
+ offset?: number;
2634
+ };
2635
+ export type MenuProps = Omit<ElementProps, "onSelect" | "contextMenu"> & {
2636
+ children?: React.ReactNode;
2637
+ trigger?: React.ReactElement;
2638
+ label?: string;
2639
+ placement?: MenuPositioning;
2640
+ positioning?: MenuPositioning | MenuPositioningOptions;
2641
+ open?: boolean;
2642
+ defaultOpen?: boolean;
2643
+ contextMenu?: boolean;
2644
+ openOnContext?: boolean;
2645
+ openOnHover?: boolean;
2646
+ hoverDelay?: number;
2647
+ closeOnScroll?: boolean;
2648
+ inline?: boolean;
2649
+ persistOnItemClick?: boolean;
2650
+ checkedValues?: MenuCheckedValues;
2651
+ defaultCheckedValues?: MenuCheckedValues;
2652
+ hasCheckmarks?: boolean;
2653
+ hasIcons?: boolean;
2654
+ surfaceMotion?: React.ComponentType<PresenceMotionSlotProps>;
2655
+ mountNode?: PortalMountNode;
2656
+ onCheckedValueChange?: (event: MenuCheckedValueChangeEvent, data: MenuCheckedValueChangeData) => void;
2657
+ onOpenChange?: (event: MenuReactOpenChangeEvent, data: MenuReactOpenChangeData) => void;
2658
+ onSelect?: (value: string, label: string, checked: boolean) => void;
2659
+ };
2660
+ export declare function Menu({ children, trigger, label, placement, positioning, open, defaultOpen, contextMenu, openOnContext, openOnHover, hoverDelay, closeOnScroll, inline, persistOnItemClick, checkedValues, defaultCheckedValues, hasCheckmarks, hasIcons, surfaceMotion, mountNode, onCheckedValueChange, onOpenChange, onSelect, ...props }: MenuProps): React.ReactElement;
2661
+ /** Open a command menu from a right-click, the Context Menu key, or Shift+F10. */
2662
+ export declare function ContextMenu(props: MenuProps): React.ReactElement;
2663
+ export declare const MenuBar: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
2664
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
2665
+ } & {
2666
+ children?: React.ReactNode;
2667
+ label?: string;
2668
+ } & React.RefAttributes<HTMLElement>>;
2669
+ export declare const MenuBarItem: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
2670
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
2671
+ } & {
2672
+ children?: React.ReactNode;
2673
+ } & React.RefAttributes<HTMLElement>>;
2674
+ export declare const MenuItem: React.ForwardRefExoticComponent<Omit<ElementProps, "onSelect"> & {
2675
+ children?: React.ReactNode;
2676
+ content?: React.ReactNode;
2677
+ checkmark?: React.ReactNode;
2678
+ submenuIndicator?: React.ReactNode;
2679
+ icon?: React.ReactNode;
2680
+ secondaryContent?: React.ReactNode;
2681
+ subText?: React.ReactNode;
2682
+ switchIndicator?: React.ReactNode;
2683
+ kind?: "default" | "checkbox" | "radio" | "switch";
2684
+ value?: string;
2685
+ name?: string;
2686
+ checked?: boolean;
2687
+ disabled?: boolean;
2688
+ disabledFocusable?: boolean;
2689
+ persistOnClick?: boolean;
2690
+ hasSubmenu?: boolean;
2691
+ onSelect?: (value: string, label: string, checked: boolean) => void;
2692
+ onCheckedChange?: (checked: boolean, event?: MenuCheckedValueChangeEvent) => void;
2693
+ } & React.RefAttributes<HTMLElement>>;
2694
+ export type MenuItemSelectableProps = Omit<ElementProps, "onSelect"> & {
2695
+ name: string;
2696
+ value: string;
2697
+ children?: React.ReactNode;
2698
+ content?: React.ReactNode;
2699
+ checkmark?: React.ReactNode;
2700
+ submenuIndicator?: React.ReactNode;
2701
+ icon?: React.ReactNode;
2702
+ secondaryContent?: React.ReactNode;
2703
+ subText?: React.ReactNode;
2704
+ checked?: boolean;
2705
+ defaultChecked?: boolean;
2706
+ disabled?: boolean;
2707
+ disabledFocusable?: boolean;
2708
+ hasSubmenu?: boolean;
2709
+ persistOnClick?: boolean;
2710
+ onCheckedChange?: (checked: boolean) => void;
2711
+ };
2712
+ export type MenuItemSwitchProps = MenuItemSelectableProps & {
2713
+ switchIndicator?: React.ReactNode;
2714
+ };
2715
+ export declare function MenuItemCheckbox(props: MenuItemSelectableProps): React.ReactElement;
2716
+ export declare function MenuItemRadio(props: MenuItemSelectableProps): React.ReactElement;
2717
+ export declare function MenuItemSwitch(props: MenuItemSwitchProps): React.ReactElement;
2718
+ export type MenuItemLinkProps = ElementProps & {
2719
+ href: string;
2720
+ target?: string;
2721
+ rel?: string;
2722
+ download?: string | boolean;
2723
+ disabled?: boolean;
2724
+ icon?: SpanSlotProps;
2725
+ checkmark?: SpanSlotProps;
2726
+ content?: SpanSlotProps;
2727
+ secondaryContent?: SpanSlotProps;
2728
+ children?: React.ReactNode;
2729
+ };
2730
+ export declare const MenuItemLink: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
2731
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
2732
+ } & {
2733
+ href: string;
2734
+ target?: string;
2735
+ rel?: string;
2736
+ download?: string | boolean;
2737
+ disabled?: boolean;
2738
+ icon?: SpanSlotProps;
2739
+ checkmark?: SpanSlotProps;
2740
+ content?: SpanSlotProps;
2741
+ secondaryContent?: SpanSlotProps;
2742
+ children?: React.ReactNode;
2743
+ } & React.RefAttributes<HTMLElement>>;
2744
+ export declare function MenuTrigger({ children, disableButtonEnhancement, ...props }: ElementProps & {
2745
+ children: React.ReactElement;
2746
+ disableButtonEnhancement?: boolean;
2747
+ }): React.ReactElement;
2748
+ export declare const MenuPopover: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
2749
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
2750
+ } & {
2751
+ children?: React.ReactNode;
2752
+ } & React.RefAttributes<HTMLElement>>;
2753
+ export type MenuListProps = ElementProps & {
2754
+ children?: React.ReactNode;
2755
+ checkedValues?: MenuCheckedValues;
2756
+ defaultCheckedValues?: MenuCheckedValues;
2757
+ hasCheckmarks?: boolean;
2758
+ hasIcons?: boolean;
2759
+ onCheckedValueChange?: MenuProps["onCheckedValueChange"];
2760
+ };
2761
+ export declare function MenuList({ children, checkedValues, defaultCheckedValues, hasCheckmarks, hasIcons, onCheckedValueChange, ...props }: MenuListProps): React.ReactElement;
2762
+ export declare const MenuSplitGroup: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
2763
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
2764
+ } & {
2765
+ children?: React.ReactNode;
2766
+ orientation?: "horizontal" | "vertical";
2767
+ } & React.RefAttributes<HTMLElement>>;
2768
+ export declare const MenuDivider: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
2769
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
2770
+ } & React.RefAttributes<HTMLElement>>;
2771
+ export declare const MenuGroup: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
2772
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
2773
+ } & {
2774
+ children?: React.ReactNode;
2775
+ label: string;
2776
+ } & React.RefAttributes<HTMLElement>>;
2777
+ export declare const MenuGroupHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
2778
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
2779
+ } & {
2780
+ children?: React.ReactNode;
2781
+ } & React.RefAttributes<HTMLElement>>;
2782
+ export type AvatarProps = ElementProps & {
2783
+ name?: string;
2784
+ image?: string;
2785
+ initials?: string;
2786
+ size?: number | string;
2787
+ shape?: "circular" | "square";
2788
+ color?: AvatarColor;
2789
+ active?: "active" | "inactive" | "unset";
2790
+ activeAppearance?: "ring" | "shadow" | "ring-shadow";
2791
+ idForColor?: string;
2792
+ decorative?: boolean;
2793
+ icon?: React.ReactNode;
2794
+ badge?: React.ReactNode;
2795
+ children?: React.ReactNode;
2796
+ };
2797
+ export declare const Avatar: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
2798
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
2799
+ } & {
2800
+ name?: string;
2801
+ image?: string;
2802
+ initials?: string;
2803
+ size?: number | string;
2804
+ shape?: "circular" | "square";
2805
+ color?: AvatarColor;
2806
+ active?: "active" | "inactive" | "unset";
2807
+ activeAppearance?: "ring" | "shadow" | "ring-shadow";
2808
+ idForColor?: string;
2809
+ decorative?: boolean;
2810
+ icon?: React.ReactNode;
2811
+ badge?: React.ReactNode;
2812
+ children?: React.ReactNode;
2813
+ } & React.RefAttributes<HTMLElement>>;
2814
+ export declare function AvatarGroupProvider({ value, children }: {
2815
+ value: AvatarGroupContextValue;
2816
+ children?: React.ReactNode;
2817
+ }): React.ReactElement;
2818
+ export declare const AvatarGroup: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
2819
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
2820
+ } & {
2821
+ children?: React.ReactNode;
2822
+ label?: string;
2823
+ maxVisible?: number;
2824
+ layout?: "stack" | "spread" | "pie";
2825
+ size?: number;
2826
+ expanded?: boolean;
2827
+ showMoreLabel?: string;
2828
+ showLessLabel?: string;
2829
+ onExpandedChange?: (expanded: boolean) => void;
2830
+ } & React.RefAttributes<HTMLElement>>;
2831
+ export type AvatarGroupItemAvatarSlot = React.ReactElement | Parameters<typeof Avatar>[0];
2832
+ export type AvatarGroupItemProps = ElementProps & {
2833
+ name: string;
2834
+ avatar?: AvatarGroupItemAvatarSlot;
2835
+ overflowLabel?: SpanSlotProps;
2836
+ image?: string;
2837
+ initials?: string;
2838
+ size?: number;
2839
+ shape?: "circular" | "square";
2840
+ color?: AvatarColor;
2841
+ active?: "active" | "inactive" | "unset";
2842
+ activeAppearance?: "ring" | "shadow" | "ring-shadow";
2843
+ idForColor?: string;
2844
+ icon?: React.ReactNode;
2845
+ badge?: React.ReactNode;
2846
+ };
2847
+ /** One identity in an AvatarGroup; inside AvatarGroupPopover it renders as a named list row. */
2848
+ export declare const AvatarGroupItem: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
2849
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
2850
+ } & {
2851
+ name: string;
2852
+ avatar?: AvatarGroupItemAvatarSlot;
2853
+ overflowLabel?: SpanSlotProps;
2854
+ image?: string;
2855
+ initials?: string;
2856
+ size?: number;
2857
+ shape?: "circular" | "square";
2858
+ color?: AvatarColor;
2859
+ active?: "active" | "inactive" | "unset";
2860
+ activeAppearance?: "ring" | "shadow" | "ring-shadow";
2861
+ idForColor?: string;
2862
+ icon?: React.ReactNode;
2863
+ badge?: React.ReactNode;
2864
+ } & React.RefAttributes<HTMLElement>>;
2865
+ export type AvatarGroupPopoverProps = ElementProps & {
2866
+ children: React.ReactNode;
2867
+ count?: number;
2868
+ indicator?: "count" | "icon";
2869
+ label?: string;
2870
+ triggerLabel?: string;
2871
+ open?: boolean;
2872
+ placement?: "top" | "bottom" | "start" | "end";
2873
+ onOpenChange?: (open: boolean) => void;
2874
+ content?: React.ReactElement<React.HTMLAttributes<HTMLUListElement>> | React.HTMLAttributes<HTMLUListElement>;
2875
+ popoverSurface?: React.ReactElement<any> | Parameters<typeof PopoverSurface>[0];
2876
+ tooltip?: React.ReactElement<any> | Parameters<typeof Tooltip>[0];
2877
+ triggerButton?: React.ReactElement<React.ButtonHTMLAttributes<HTMLButtonElement>> | React.ButtonHTMLAttributes<HTMLButtonElement>;
2878
+ };
2879
+ /** A labelled overflow trigger with a theme-aware people list in the library Popover. */
2880
+ export declare function AvatarGroupPopover({ children, count, indicator, label, triggerLabel, open, placement, onOpenChange, content, popoverSurface, tooltip, triggerButton, ...props }: AvatarGroupPopoverProps): React.ReactElement;
2881
+ export declare const Persona: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
2882
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
2883
+ } & {
2884
+ name: string;
2885
+ image?: string;
2886
+ initials?: string;
2887
+ primaryText?: React.ReactNode;
2888
+ secondaryText?: React.ReactNode;
2889
+ tertiaryText?: React.ReactNode;
2890
+ quaternaryText?: React.ReactNode;
2891
+ presence?: PersonaPresence;
2892
+ presenceLabel?: string;
2893
+ size?: PersonaSize;
2894
+ color?: AvatarColor;
2895
+ textPosition?: "after" | "before" | "below";
2896
+ textAlignment?: "start" | "center";
2897
+ presenceOnly?: boolean;
2898
+ avatar?: React.ReactNode;
2899
+ children?: React.ReactNode;
2900
+ } & React.RefAttributes<HTMLElement>>;
2901
+ export type VirtualListScrollToHandle = {
2902
+ scrollTo: (index: number, align?: "start" | "center" | "end", behavior?: ScrollBehavior) => void;
2903
+ };
2904
+ export type VirtualizerSlotProps = React.ReactElement<any> | React.HTMLAttributes<HTMLDivElement>;
2905
+ export type VirtualizerBookendSlots = {
2906
+ before?: VirtualizerSlotProps;
2907
+ after?: VirtualizerSlotProps;
2908
+ beforeContainer?: VirtualizerSlotProps;
2909
+ afterContainer?: VirtualizerSlotProps;
2910
+ };
2911
+ type VirtualizerScrollViewContainer = VirtualizerSlotProps;
2912
+ export type VirtualListProps<T> = ElementProps & VirtualizerBookendSlots & {
2913
+ items?: T[];
2914
+ itemCount?: number;
2915
+ dataSource?: VirtualListDataSource<T>;
2916
+ onDataLoadError?: (error: unknown, range: {
2917
+ start: number;
2918
+ end: number;
2919
+ }) => void;
2920
+ renderItem: (item: T | undefined, index: number) => React.ReactNode;
2921
+ itemKey?: (item: T | undefined, index: number) => string | number;
2922
+ onRenderedRange?: (range: {
2923
+ start: number;
2924
+ end: number;
2925
+ total: number;
2926
+ }) => void;
2927
+ onScrollStateChange?: (scrolling: boolean) => void;
2928
+ viewportRef?: React.Ref<HTMLDivElement>;
2929
+ scrollToIndexRef?: React.RefObject<VirtualListScrollToHandle | null>;
2930
+ virtualizerLength?: number;
2931
+ label?: string;
2932
+ rowHeight?: number;
2933
+ measureItems?: boolean;
2934
+ overscan?: number;
2935
+ axis?: "vertical" | "horizontal";
2936
+ scrollMode?: "element" | "window";
2937
+ };
2938
+ export declare function VirtualList<T>({ items, itemCount, dataSource, onDataLoadError, renderItem, itemKey, onRenderedRange, onScrollStateChange, viewportRef, scrollToIndexRef, virtualizerLength, label, rowHeight, measureItems, overscan, axis, ...props }: ElementProps & {
2939
+ items?: T[];
2940
+ itemCount?: number;
2941
+ dataSource?: VirtualListDataSource<T>;
2942
+ onDataLoadError?: (error: unknown, range: {
2943
+ start: number;
2944
+ end: number;
2945
+ }) => void;
2946
+ renderItem: (item: T | undefined, index: number) => React.ReactNode;
2947
+ itemKey?: (item: T | undefined, index: number) => string | number;
2948
+ onRenderedRange?: (range: {
2949
+ start: number;
2950
+ end: number;
2951
+ total: number;
2952
+ }) => void;
2953
+ onScrollStateChange?: (scrolling: boolean) => void;
2954
+ viewportRef?: React.Ref<HTMLDivElement>;
2955
+ scrollToIndexRef?: React.RefObject<VirtualListScrollToHandle | null>;
2956
+ virtualizerLength?: number;
2957
+ label?: string;
2958
+ rowHeight?: number;
2959
+ measureItems?: boolean;
2960
+ overscan?: number;
2961
+ axis?: "vertical" | "horizontal";
2962
+ scrollMode?: "element" | "window";
2963
+ }): React.ReactElement;
2964
+ export type VirtualizerChildRenderFunction = (index: number, isScrolling: boolean) => React.ReactNode;
2965
+ export type VirtualizerScrollToHandle = {
2966
+ scrollTo: (index: number, behavior?: ScrollBehavior, callback?: (index: number) => void) => void;
2967
+ virtualizerLength: React.RefObject<number>;
2968
+ currentIndex: React.RefObject<number | undefined>;
2969
+ };
2970
+ export type VirtualizerDataRef = {
2971
+ progressiveSizes: React.RefObject<number[]>;
2972
+ nodeSizes: React.RefObject<number[]>;
2973
+ setFlaggedIndex: (index: number | null) => void;
2974
+ currentIndex: React.RefObject<number>;
2975
+ };
2976
+ export type ScrollToInterface = VirtualizerScrollToHandle;
2977
+ export type VirtualizerContextProps = {
2978
+ contextIndex: number;
2979
+ setContextIndex: (index: number) => void;
2980
+ childProgressiveSizes?: React.MutableRefObject<number[]>;
2981
+ };
2982
+ export type DynamicVirtualizerContextProps = Required<VirtualizerContextProps>;
2983
+ export declare function useVirtualizerContext(): VirtualizerContextProps;
2984
+ export declare const useVirtualizerContext_unstable: typeof useVirtualizerContext;
2985
+ export declare const VirtualizerContextProvider: React.Provider<VirtualizerContextProps>;
2986
+ /** Fixed or measured one-dimensional virtualization over the bounded VirtualList renderer. */
2987
+ export declare function Virtualizer({ children, numItems, itemSize, virtualizerLength, bufferItems, bufferSize, containerSizeRef, getItemSize, gap, reversed, updateScrollPosition, virtualizerContext, axis, measureItems, enableScrollLoad, enablePagination, flaggedIndex, onRenderedFlaggedIndex, onRenderedRange: onRenderedRangeChange, imperativeVirtualizerRef, imperativeRef, scrollViewRef, label, scrollMode, before, after, beforeContainer, afterContainer, ...props }: Omit<ElementProps, "children"> & {
2988
+ children: VirtualizerChildRenderFunction;
2989
+ numItems: number;
2990
+ itemSize: number;
2991
+ virtualizerLength?: number;
2992
+ bufferItems?: number;
2993
+ bufferSize?: number;
2994
+ containerSizeRef?: React.RefObject<number>;
2995
+ getItemSize?: (index: number) => number;
2996
+ gap?: number;
2997
+ reversed?: boolean;
2998
+ updateScrollPosition?: (position: number) => void;
2999
+ virtualizerContext?: VirtualizerContextProps;
3000
+ axis?: "vertical" | "horizontal";
3001
+ scrollMode?: "element" | "window";
3002
+ measureItems?: boolean;
3003
+ enableScrollLoad?: boolean;
3004
+ enablePagination?: boolean;
3005
+ flaggedIndex?: React.MutableRefObject<number | null>;
3006
+ onRenderedFlaggedIndex?: (index: number) => void;
3007
+ onRenderedRange?: (range: {
3008
+ start: number;
3009
+ end: number;
3010
+ total: number;
3011
+ }) => void;
3012
+ imperativeVirtualizerRef?: React.RefObject<VirtualizerDataRef | null>;
3013
+ imperativeRef?: React.RefObject<VirtualizerScrollToHandle | null>;
3014
+ scrollViewRef?: React.MutableRefObject<HTMLElement | null>;
3015
+ label?: string;
3016
+ } & VirtualizerBookendSlots): React.ReactElement;
3017
+ type ScrollViewBaseProps = Omit<ElementProps, "children"> & {
3018
+ children: VirtualizerChildRenderFunction;
3019
+ itemSize: number;
3020
+ numItems: number;
3021
+ virtualizerLength?: number;
3022
+ bufferItems?: number;
3023
+ bufferSize?: number;
3024
+ scrollViewRef?: React.MutableRefObject<HTMLElement | null>;
3025
+ axis?: "vertical" | "horizontal";
3026
+ reversed?: boolean;
3027
+ enableScrollLoad?: boolean;
3028
+ getItemSize?: (index: number) => number;
3029
+ virtualizerContext?: VirtualizerContextProps;
3030
+ onRenderedFlaggedIndex?: (index: number) => void;
3031
+ flaggedIndex?: React.MutableRefObject<number | null>;
3032
+ imperativeVirtualizerRef?: React.RefObject<VirtualizerDataRef | null>;
3033
+ imperativeRef?: React.RefObject<VirtualizerScrollToHandle | null>;
3034
+ containerSizeRef?: React.RefObject<number>;
3035
+ updateScrollPosition?: (position: number) => void;
3036
+ gap?: number;
3037
+ enablePagination?: boolean;
3038
+ container?: VirtualizerScrollViewContainer;
3039
+ label?: string;
3040
+ } & VirtualizerBookendSlots;
3041
+ /** Responsive compatibility view for Fluent's legacy fixed-size VirtualizerScrollView API. */
3042
+ export declare function VirtualizerScrollView({ children, itemSize, numItems, virtualizerLength, bufferItems, bufferSize, scrollViewRef: providedScrollViewRef, axis, reversed, enableScrollLoad, onRenderedFlaggedIndex, flaggedIndex, imperativeVirtualizerRef, imperativeRef, containerSizeRef, updateScrollPosition, gap, enablePagination, container, label, ...props }: ScrollViewBaseProps): React.ReactElement;
3043
+ /** Responsive measured compatibility view for Fluent's legacy dynamic VirtualizerScrollView API. */
3044
+ export declare function VirtualizerScrollViewDynamic({ children, itemSize, numItems, virtualizerLength, bufferItems, bufferSize, scrollViewRef: providedScrollViewRef, axis, reversed, enableScrollLoad, getItemSize, virtualizerContext, onRenderedFlaggedIndex, flaggedIndex, imperativeVirtualizerRef, imperativeRef, containerSizeRef, updateScrollPosition, gap, enablePagination, container, label, ...props }: ScrollViewBaseProps): React.ReactElement;
3045
+ export type DataGridColumnResizeData = {
3046
+ columnId: string;
3047
+ width: number;
3048
+ };
3049
+ export type DataGridColumnResizeEvent = MouseEvent | KeyboardEvent | TouchEvent | undefined;
3050
+ export type DataGridSelectionChangeEvent = React.MouseEvent | React.KeyboardEvent;
3051
+ declare function VirtualDataGrid<T>({ items, dataSource, onDataLoadError, onDataSourceGroupToggle, columns, getRowId, label: labelProp, height, rowHeight, getRowHeight, overscan, virtualize, virtualizeColumns, focusMode, subtleSelection, selectionAppearance, selectionMode, selectedKeys, defaultSelectedKeys, selectionModel, defaultSelectionModel, onDataSourceSelectionChange, onSelectionChange, sort, defaultSort, onSortChange, multiSort, defaultMultiSort, onMultiSortChange, sortPriorityLabel: sortPriorityLabelProp, filterable, filterValue, defaultFilterValue, onFilterValueChange, filterLabel: filterLabelProp, renderCell, onCellEdit, onCellsEdit, validateCellEdit, rowLabel: rowLabelProp, editHint: editHintProp, emptyMessage: emptyMessageProp, loadingLabel: loadingLabelProp, selectLabel: selectLabelProp, selectAllLabel: selectAllLabelProp, resizableColumns, columnWidths, defaultColumnWidths, columnSizingOptions, resizableColumnsOptions, containerWidthOffset, onColumnResize, resizeLabel: resizeLabelProp, reorderableColumns, columnOrder, defaultColumnOrder, onColumnOrderChange, reorderLabel: reorderLabelProp, groupBy, collapsedGroupKeys, defaultCollapsedGroupKeys, onCollapsedGroupKeysChange, emptyGroupLabel: emptyGroupLabelProp, expandGroupLabel: expandGroupLabelProp, collapseGroupLabel: collapseGroupLabelProp, onRenderedRange, ...props }: ElementProps & {
3052
+ items?: T[];
3053
+ dataSource?: DataGridDataSource<T>;
3054
+ onDataLoadError?: (error: unknown, range: {
3055
+ start: number;
3056
+ end: number;
3057
+ }) => void;
3058
+ onDataSourceGroupToggle?: (groupKey: string, expanded: boolean) => void;
3059
+ columns: DataGridColumn<T>[];
3060
+ getRowId: (item: T) => string | number;
3061
+ label?: string;
3062
+ height?: number | string;
3063
+ rowHeight?: number;
3064
+ getRowHeight?: (item: T, index: number) => number;
3065
+ overscan?: number;
3066
+ virtualize?: boolean;
3067
+ virtualizeColumns?: boolean;
3068
+ focusMode?: DataGridFocusMode;
3069
+ subtleSelection?: boolean;
3070
+ selectionAppearance?: DataGridSelectionAppearance;
3071
+ selectionMode?: "none" | "single" | "multiple" | "multiselect";
3072
+ selectedKeys?: readonly (string | number)[];
3073
+ defaultSelectedKeys?: readonly (string | number)[];
3074
+ selectionModel?: DataGridSelectionModel;
3075
+ defaultSelectionModel?: DataGridSelectionModel;
3076
+ onDataSourceSelectionChange?: (selection: DataGridSelectionModel, selectedItems: T[]) => void;
3077
+ onSelectionChange?: (keys: string[], selectedItems: T[]) => void;
3078
+ sort?: DataGridSort | null;
3079
+ defaultSort?: DataGridSort;
3080
+ onSortChange?: (sort: DataGridSort | undefined) => void;
3081
+ multiSort?: readonly DataGridSort[];
3082
+ defaultMultiSort?: readonly DataGridSort[];
3083
+ onMultiSortChange?: (sorts: DataGridSort[]) => void;
3084
+ sortPriorityLabel?: string;
3085
+ filterable?: boolean;
3086
+ filterValue?: string;
3087
+ defaultFilterValue?: string;
3088
+ onFilterValueChange?: (value: string) => void;
3089
+ filterLabel?: string;
3090
+ renderCell?: (item: T, column: DataGridColumn<T>, rowIndex: number) => React.ReactNode;
3091
+ onCellEdit?: (edit: DataGridCellEdit<T>) => void | Promise<void>;
3092
+ onCellsEdit?: (edits: readonly DataGridCellEdit<T>[]) => void | Promise<void>;
3093
+ validateCellEdit?: (edit: DataGridCellEdit<T>) => string | undefined;
3094
+ rowLabel?: string;
3095
+ editHint?: string;
3096
+ emptyMessage?: React.ReactNode;
3097
+ loadingLabel?: string;
3098
+ selectLabel?: string;
3099
+ selectAllLabel?: string;
3100
+ resizableColumns?: boolean;
3101
+ columnWidths?: DataGridColumnWidths;
3102
+ defaultColumnWidths?: DataGridColumnWidths;
3103
+ columnSizingOptions?: DataGridColumnSizingOptions;
3104
+ resizableColumnsOptions?: {
3105
+ autoFitColumns?: boolean;
3106
+ };
3107
+ containerWidthOffset?: number;
3108
+ onColumnResize?: (event: DataGridColumnResizeEvent, data: DataGridColumnResizeData) => void;
3109
+ resizeLabel?: string;
3110
+ reorderableColumns?: boolean;
3111
+ columnOrder?: readonly string[];
3112
+ defaultColumnOrder?: readonly string[];
3113
+ onColumnOrderChange?: (columnIds: string[]) => void;
3114
+ reorderLabel?: string;
3115
+ groupBy?: string;
3116
+ collapsedGroupKeys?: readonly string[];
3117
+ defaultCollapsedGroupKeys?: readonly string[];
3118
+ onCollapsedGroupKeysChange?: (groupKeys: string[]) => void;
3119
+ emptyGroupLabel?: string;
3120
+ expandGroupLabel?: string;
3121
+ collapseGroupLabel?: string;
3122
+ onRenderedRange?: (range: {
3123
+ start: number;
3124
+ end: number;
3125
+ total: number;
3126
+ }) => void;
3127
+ }): React.ReactElement;
3128
+ type VirtualDataGridProps<T> = Parameters<typeof VirtualDataGrid<T>>[0];
3129
+ export type DataGridCompositionSortState = {
3130
+ sortColumn: TableColumnId | undefined;
3131
+ sortDirection: TableSortDirection;
3132
+ };
3133
+ export type DataGridSelectionChangeData<T> = {
3134
+ selectedItems: Set<T>;
3135
+ };
3136
+ export type DataGridCompositionContextValue<T> = {
3137
+ items: readonly T[];
3138
+ dataSource?: DataGridDataSource<T>;
3139
+ totalRows: number;
3140
+ firstRow: number;
3141
+ lastRow: number;
3142
+ rowHeight: number;
3143
+ sourceBusy: boolean;
3144
+ sourceError: string;
3145
+ expandGroupLabel: string;
3146
+ collapseGroupLabel: string;
3147
+ groupCountLabel: string;
3148
+ toggleGroup: (group: Extract<DataGridDataSourceRow<T>, {
3149
+ kind: "group";
3150
+ }>) => void;
3151
+ columns: readonly TableColumnDefinition<T>[];
3152
+ getRowId: (item: T) => string | number;
3153
+ selectionMode: "none" | "single" | "multiselect";
3154
+ selectionAppearance: "brand" | "neutral";
3155
+ subtleSelection: boolean;
3156
+ focusMode: DataGridFocusMode;
3157
+ selectedItems: Set<T>;
3158
+ selectionModel: DataGridSelectionModel;
3159
+ setSelectionModel: (selection: DataGridSelectionModel, event: React.SyntheticEvent) => void;
3160
+ isItemSelected: (item: T) => boolean;
3161
+ isRowSelected: (rowId: string | number, item: T) => boolean;
3162
+ setSelectedItems: (items: Set<T>, event: React.SyntheticEvent) => void;
3163
+ sortState: DataGridCompositionSortState;
3164
+ setSortState: (state: DataGridCompositionSortState, event: React.MouseEvent) => void;
3165
+ activeCell: {
3166
+ row: number;
3167
+ column: number;
3168
+ };
3169
+ setActiveCell: (row: number, column: number) => void;
3170
+ columnWidths: DataGridColumnWidths;
3171
+ resizeColumn: (id: string, width: number, event: DataGridColumnResizeEvent) => void;
3172
+ columnSizingOptions: DataGridColumnSizingOptions;
3173
+ resizableColumns: boolean;
3174
+ autoFitColumns: boolean;
3175
+ resizeLabel: string;
3176
+ orderedColumns?: readonly TableColumnDefinition<T>[];
3177
+ reorderColumn?: (fromId: string, toId: string, after?: boolean) => void;
3178
+ reorderableColumns?: boolean;
3179
+ reorderLabel?: string;
3180
+ draggedColumn?: React.MutableRefObject<string | undefined>;
3181
+ editHint: string;
3182
+ rowLabel: string;
3183
+ editedCells: Record<string, DataGridEditValue>;
3184
+ onCellEdit?: (edit: DataGridCellEdit<T>) => void | Promise<void>;
3185
+ validateCellEdit?: (edit: DataGridCellEdit<T>) => string | undefined;
3186
+ setEditedCell: (key: string, value: DataGridEditValue) => void;
3187
+ };
3188
+ export type DataGridContextValue<T> = Omit<DataGridCompositionContextValue<T>, "items" | "columns"> & {
3189
+ /** Fluent table feature state uses mutable snapshots; these arrays are local projections. */
3190
+ items: T[];
3191
+ columns: TableColumnDefinition<T>[];
3192
+ /** Fluent table feature state projected from the active DataGrid composition. */
3193
+ getRows: TableFeaturesState<T>["getRows"];
3194
+ selection: TableSelectionState;
3195
+ sort: TableSortState<T>;
3196
+ tableRef: React.RefObject<HTMLDivElement | null>;
3197
+ columnSizing_unstable: TableColumnSizingState;
3198
+ selectableRows: boolean;
3199
+ compositeRowTabsterAttribute: TableCompositeNavigationAttribute;
3200
+ };
3201
+ export type DataGridCompositionRow<T> = {
3202
+ item: T;
3203
+ rowId: string | number;
3204
+ index: number;
3205
+ };
3206
+ export type DataGridCompositionGroupRow<T> = {
3207
+ group: Extract<DataGridDataSourceRow<T>, {
3208
+ kind: "group";
3209
+ }>;
3210
+ index: number;
3211
+ };
3212
+ export type DataGridRowRenderHelpers<T> = {
3213
+ item?: T;
3214
+ rowId?: string | number;
3215
+ renderCell: (column: TableColumnDefinition<T>) => React.ReactNode;
3216
+ renderHeaderCell: (column: TableColumnDefinition<T>) => React.ReactNode;
3217
+ columns: readonly TableColumnDefinition<T>[];
3218
+ dataGridContextValue: DataGridContextValue<T>;
3219
+ };
3220
+ export type DataGridCompositionProps<T> = Omit<ElementProps, "children"> & {
3221
+ items?: readonly T[];
3222
+ dataSource?: DataGridDataSource<T>;
3223
+ onDataLoadError?: (error: unknown, range: {
3224
+ start: number;
3225
+ end: number;
3226
+ }) => void;
3227
+ onDataSourceGroupToggle?: (groupKey: string, expanded: boolean) => void;
3228
+ onRenderedRange?: (range: {
3229
+ start: number;
3230
+ end: number;
3231
+ total: number;
3232
+ }) => void;
3233
+ rowHeight?: number;
3234
+ overscan?: number;
3235
+ virtualize?: boolean;
3236
+ loadingLabel?: string;
3237
+ expandGroupLabel?: string;
3238
+ collapseGroupLabel?: string;
3239
+ groupCountLabel?: string;
3240
+ columns: readonly TableColumnDefinition<T>[];
3241
+ getRowId: (item: T) => string | number;
3242
+ selectionMode?: "none" | "single" | "multiselect";
3243
+ selectionAppearance?: "brand" | "neutral";
3244
+ subtleSelection?: boolean;
3245
+ focusMode?: DataGridFocusMode;
3246
+ selectedItems?: Set<T>;
3247
+ defaultSelectedItems?: Set<T>;
3248
+ selectionModel?: DataGridSelectionModel;
3249
+ defaultSelectionModel?: DataGridSelectionModel;
3250
+ onDataSourceSelectionChange?: (selection: DataGridSelectionModel, selectedItems: T[]) => void;
3251
+ onSelectionChange?: (event: DataGridSelectionChangeEvent, data: DataGridSelectionChangeData<T>) => void;
3252
+ sortState?: DataGridCompositionSortState;
3253
+ defaultSortState?: DataGridCompositionSortState;
3254
+ onSortChange?: (event: React.MouseEvent, state: DataGridCompositionSortState) => void;
3255
+ label?: string;
3256
+ resizableColumns?: boolean;
3257
+ columnWidths?: DataGridColumnWidths;
3258
+ defaultColumnWidths?: DataGridColumnWidths;
3259
+ columnSizingOptions?: DataGridColumnSizingOptions;
3260
+ resizableColumnsOptions?: {
3261
+ autoFitColumns?: boolean;
3262
+ };
3263
+ containerWidthOffset?: number;
3264
+ onColumnResize?: (event: DataGridColumnResizeEvent, data: DataGridColumnResizeData) => void;
3265
+ resizeLabel?: string;
3266
+ reorderableColumns?: boolean;
3267
+ columnOrder?: readonly string[];
3268
+ defaultColumnOrder?: readonly string[];
3269
+ onColumnOrderChange?: (columnIds: string[]) => void;
3270
+ reorderLabel?: string;
3271
+ onCellEdit?: (edit: DataGridCellEdit<T>) => void | Promise<void>;
3272
+ validateCellEdit?: (edit: DataGridCellEdit<T>) => string | undefined;
3273
+ rowLabel?: string;
3274
+ editHint?: string;
3275
+ children?: React.ReactNode;
3276
+ };
3277
+ export type DataGridProps<T> = VirtualDataGridProps<T> | DataGridCompositionProps<T>;
3278
+ export declare function DataGridContextProvider<T>({ value, children }: {
3279
+ value: DataGridContextValue<T> | undefined;
3280
+ children?: React.ReactNode;
3281
+ }): React.ReactElement;
3282
+ export declare function ColumnIdContextProvider({ value, children }: {
3283
+ value: TableColumnId | undefined;
3284
+ children?: React.ReactNode;
3285
+ }): React.ReactElement;
3286
+ /** Select from the nearest DataGrid context, using Fluent-compatible defaults outside a provider. */
3287
+ export declare function useDataGridContext_unstable<TValue>(selector: (context: DataGridContextValue<unknown>) => TValue): TValue;
3288
+ export declare function DataGrid<T>(props: DataGridCompositionProps<T>): React.ReactElement;
3289
+ export declare function DataGrid<T>(props: VirtualDataGridProps<T>): React.ReactElement;
3290
+ export type DataGridHeaderProps = Omit<ElementProps, "children"> & {
3291
+ children?: React.ReactNode;
3292
+ };
3293
+ export declare function DataGridHeader({ children, ...props }: DataGridHeaderProps): React.ReactElement;
3294
+ export type DataGridBodyProps<T> = Omit<ElementProps, "children"> & {
3295
+ children: (row: DataGridCompositionRow<T>) => React.ReactNode;
3296
+ renderGroupRow?: (row: DataGridCompositionGroupRow<T>) => React.ReactNode;
3297
+ };
3298
+ export declare function DataGridBody<T>({ children, renderGroupRow, ...props }: DataGridBodyProps<T>): React.ReactElement;
3299
+ export type DataGridFluentCellRenderFunction<T> = (column: TableColumnDefinition<T>, dataGridContextValue: DataGridContextValue<T>) => React.ReactNode;
3300
+ type DataGridRowBaseProps<T> = Omit<ElementProps, "children"> & {
3301
+ item?: T;
3302
+ rowId?: string | number;
3303
+ rowIndex?: number;
3304
+ appearance?: "brand" | "neutral" | "none";
3305
+ selectionCell?: React.ReactNode;
3306
+ };
3307
+ export type DataGridRowProps<T> = DataGridRowBaseProps<T> & {
3308
+ children: React.ReactNode | ((helpers: DataGridRowRenderHelpers<T>) => React.ReactNode) | DataGridFluentCellRenderFunction<T>;
3309
+ };
3310
+ export declare function DataGridRow<T>(props: DataGridRowBaseProps<T> & {
3311
+ children: (helpers: DataGridRowRenderHelpers<T>) => React.ReactNode;
3312
+ }): React.ReactElement;
3313
+ export declare function DataGridRow<T>(props: DataGridRowBaseProps<T> & {
3314
+ children: DataGridFluentCellRenderFunction<T>;
3315
+ }): React.ReactElement;
3316
+ export declare function DataGridRow<T>(props: DataGridRowBaseProps<T> & {
3317
+ children: React.ReactNode;
3318
+ }): React.ReactElement;
3319
+ export type DataGridCellProps = Omit<ElementProps, "children"> & {
3320
+ children?: React.ReactNode;
3321
+ columnId?: TableColumnId;
3322
+ rowIndex?: number;
3323
+ columnIndex?: number;
3324
+ focusMode?: "group" | "none" | "cell";
3325
+ editable?: boolean;
3326
+ value?: unknown;
3327
+ editType?: DataGridColumn["editType"];
3328
+ editLabel?: string;
3329
+ };
3330
+ export declare function DataGridCell({ children, columnId, rowIndex, columnIndex, focusMode: requestedFocusMode, editable, value, editType, editLabel, ...props }: DataGridCellProps): React.ReactElement;
3331
+ export type DataGridHeaderCellProps = Omit<ElementProps, "children"> & {
3332
+ children?: React.ReactNode;
3333
+ columnId?: TableColumnId;
3334
+ rowIndex?: number;
3335
+ columnIndex?: number;
3336
+ sortable?: boolean;
3337
+ sortDirection?: "ascending" | "descending";
3338
+ focusMode?: "group" | "none" | "cell";
3339
+ aside?: SpanSlotProps;
3340
+ sortIcon?: SpanSlotProps;
3341
+ button?: React.ReactElement<any> | Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children">;
3342
+ };
3343
+ export declare function DataGridHeaderCell({ children, columnId, rowIndex, columnIndex, sortable, sortDirection: explicitSortDirection, focusMode, aside, sortIcon, button, ...props }: DataGridHeaderCellProps): React.ReactElement;
3344
+ export type SelectionIndicatorSlot = React.ReactElement | React.HTMLAttributes<HTMLElement>;
3345
+ export type DataGridSelectionCellProps = Omit<ElementProps, "children"> & {
3346
+ item?: unknown;
3347
+ rowIndex?: number;
3348
+ columnIndex?: number;
3349
+ label?: string;
3350
+ type?: "checkbox" | "radio";
3351
+ checked?: boolean | "mixed";
3352
+ subtle?: boolean;
3353
+ hidden?: boolean;
3354
+ invisible?: boolean;
3355
+ checkboxIndicator?: SelectionIndicatorSlot;
3356
+ radioIndicator?: SelectionIndicatorSlot;
3357
+ };
3358
+ export declare function DataGridSelectionCell({ item, rowIndex, columnIndex, label, type, checked: checkedProp, subtle: subtleProp, hidden, invisible, checkboxIndicator, radioIndicator, ...props }: DataGridSelectionCellProps): React.ReactElement;
3359
+ export type TreeItemLayoutProps = ElementProps & {
3360
+ children?: React.ReactNode;
3361
+ main?: React.ReactNode;
3362
+ iconBefore?: React.ReactNode;
3363
+ iconAfter?: React.ReactNode;
3364
+ expandIcon?: React.ReactNode;
3365
+ aside?: React.ReactNode;
3366
+ actions?: React.ReactNode;
3367
+ selector?: React.ReactNode;
3368
+ };
3369
+ export declare function TreeItemLayout({ children, main, iconBefore, iconAfter, expandIcon, aside, actions, selector, className, ...props }: TreeItemLayoutProps): React.ReactElement;
3370
+ export type TreeItemPersonaLayoutProps = ElementProps & {
3371
+ children?: React.ReactNode;
3372
+ media?: React.ReactNode;
3373
+ main?: React.ReactNode;
3374
+ description?: React.ReactNode;
3375
+ actions?: React.ReactNode;
3376
+ aside?: React.ReactNode;
3377
+ expandIcon?: React.ReactNode;
3378
+ selector?: React.ReactNode;
3379
+ };
3380
+ export declare function TreeItemPersonaLayout({ children, media, main, description, actions, aside, expandIcon, selector, className, ...props }: TreeItemPersonaLayoutProps): React.ReactElement;
3381
+ export type TreeInteractionEvent = React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>;
3382
+ export type TreeCheckedChangeEvent = React.ChangeEvent<HTMLElement>;
3383
+ type TreeOpenChangeEventMap = {
3384
+ ExpandIconClick: React.MouseEvent<HTMLElement>;
3385
+ Click: React.MouseEvent<HTMLElement>;
3386
+ ArrowLeft: React.KeyboardEvent<HTMLElement>;
3387
+ ArrowRight: React.KeyboardEvent<HTMLElement>;
3388
+ Enter: React.KeyboardEvent<HTMLElement>;
3389
+ };
3390
+ type TreeNavigationEventMap = {
3391
+ Click: React.MouseEvent<HTMLElement>;
3392
+ TypeAhead: React.KeyboardEvent<HTMLElement>;
3393
+ ArrowRight: React.KeyboardEvent<HTMLElement>;
3394
+ ArrowLeft: React.KeyboardEvent<HTMLElement>;
3395
+ ArrowUp: React.KeyboardEvent<HTMLElement>;
3396
+ ArrowDown: React.KeyboardEvent<HTMLElement>;
3397
+ Home: React.KeyboardEvent<HTMLElement>;
3398
+ End: React.KeyboardEvent<HTMLElement>;
3399
+ };
3400
+ export type TreeOpenChangeData = {
3401
+ [Type in keyof TreeOpenChangeEventMap]: {
3402
+ event: TreeOpenChangeEventMap[Type];
3403
+ open: boolean;
3404
+ openItems: Set<string>;
3405
+ value: string;
3406
+ target: HTMLElement;
3407
+ type: Type;
3408
+ };
3409
+ }[keyof TreeOpenChangeEventMap];
3410
+ export type TreeItemOpenChangeData = {
3411
+ [Type in keyof TreeOpenChangeEventMap]: {
3412
+ event: TreeOpenChangeEventMap[Type];
3413
+ open: boolean;
3414
+ value: string | number;
3415
+ target: HTMLElement;
3416
+ type: Type;
3417
+ };
3418
+ }[keyof TreeOpenChangeEventMap];
3419
+ export type TreeNavigationData = {
3420
+ [Type in keyof TreeNavigationEventMap]: {
3421
+ event: TreeNavigationEventMap[Type];
3422
+ target: HTMLElement;
3423
+ value: string;
3424
+ parentValue?: string;
3425
+ type: Type;
3426
+ isScrollPrevented: boolean;
3427
+ preventScroll: () => void;
3428
+ };
3429
+ }[keyof TreeNavigationEventMap];
3430
+ export type TreeItemProps = ElementProps & {
3431
+ itemType: "leaf" | "branch";
3432
+ value?: string | number;
3433
+ open?: boolean;
3434
+ parentValue?: string | number;
3435
+ onOpenChange?: (event: TreeInteractionEvent, data: TreeItemOpenChangeData) => void;
3436
+ disabled?: boolean;
3437
+ children?: React.ReactNode;
3438
+ };
3439
+ export declare function TreeItem(_props: TreeItemProps): null;
3440
+ export type FlatTreeItemProps = ElementProps & {
3441
+ itemType: "leaf" | "branch";
3442
+ value: string | number;
3443
+ open?: boolean;
3444
+ parentValue?: string | number;
3445
+ onOpenChange?: TreeItemProps["onOpenChange"];
3446
+ disabled?: boolean;
3447
+ children?: React.ReactNode;
3448
+ "aria-level": number;
3449
+ "aria-setsize": number;
3450
+ "aria-posinset": number;
3451
+ };
3452
+ export declare function FlatTreeItem(_props: FlatTreeItemProps): null;
3453
+ export type TreeProps<T = unknown> = ElementProps & {
3454
+ items?: readonly TreeNode<T>[];
3455
+ children?: React.ReactNode;
3456
+ label?: string;
3457
+ selectionMode?: "none" | "single" | "multiple" | "multiselect";
3458
+ selectedKeys?: readonly (string | number)[];
3459
+ defaultSelectedKeys?: readonly (string | number)[];
3460
+ checkedItems?: Iterable<string | number | readonly [string | number, boolean | "mixed"]>;
3461
+ defaultCheckedItems?: Iterable<string | number | readonly [string | number, boolean | "mixed"]>;
3462
+ openItems?: Iterable<string | number>;
3463
+ defaultOpenItems?: Iterable<string | number>;
3464
+ expandedKeys?: readonly (string | number)[];
3465
+ defaultExpandedKeys?: readonly (string | number)[];
3466
+ onSelectionChange?: (keys: string[], selectedItems: TreeNode<T>[]) => void;
3467
+ onCheckedChange?: (event: TreeCheckedChangeEvent, data: {
3468
+ value: string;
3469
+ checkedItems: Map<string, boolean | "mixed">;
3470
+ target: HTMLElement;
3471
+ event: TreeCheckedChangeEvent;
3472
+ type: "Change";
3473
+ selectionMode: "single" | "multiselect";
3474
+ checked: boolean | "mixed";
3475
+ }) => void;
3476
+ onExpandedChange?: (keys: string[]) => void;
3477
+ onOpenChange?: (event: TreeInteractionEvent, data: TreeOpenChangeData) => void;
3478
+ onNavigation?: (event: TreeInteractionEvent, data: TreeNavigationData) => void;
3479
+ navigationMode?: "tree" | "treegrid";
3480
+ appearance?: "subtle" | "subtle-alpha" | "transparent";
3481
+ size?: "small" | "medium";
3482
+ renderItem?: (node: TreeNode<T>, level: number) => React.ReactNode;
3483
+ collapseMotion?: React.ComponentType<PresenceMotionSlotProps>;
3484
+ toggleLabel?: string;
3485
+ emptyMessage?: React.ReactNode;
3486
+ };
3487
+ export declare function Tree<T>({ items, children, label, selectionMode, selectedKeys, defaultSelectedKeys, checkedItems, defaultCheckedItems, openItems, defaultOpenItems, expandedKeys, defaultExpandedKeys, onSelectionChange, onCheckedChange, onExpandedChange, onOpenChange, onNavigation, navigationMode, appearance, size, renderItem, collapseMotion, toggleLabel, emptyMessage, ...props }: TreeProps<T>): React.ReactElement;
3488
+ export type FlatTreeProps = ElementProps & {
3489
+ children?: React.ReactNode;
3490
+ label?: string;
3491
+ selectionMode?: "none" | "single" | "multiple" | "multiselect";
3492
+ selectedKeys?: readonly (string | number)[];
3493
+ defaultSelectedKeys?: readonly (string | number)[];
3494
+ checkedItems?: Iterable<string | number | readonly [string | number, boolean | "mixed"]>;
3495
+ defaultCheckedItems?: Iterable<string | number | readonly [string | number, boolean | "mixed"]>;
3496
+ openItems?: Iterable<string | number>;
3497
+ defaultOpenItems?: Iterable<string | number>;
3498
+ expandedKeys?: readonly (string | number)[];
3499
+ defaultExpandedKeys?: readonly (string | number)[];
3500
+ onSelectionChange?: TreeProps["onSelectionChange"];
3501
+ onCheckedChange?: TreeProps["onCheckedChange"];
3502
+ onExpandedChange?: TreeProps["onExpandedChange"];
3503
+ onOpenChange?: TreeProps["onOpenChange"];
3504
+ onNavigation?: TreeProps["onNavigation"];
3505
+ navigationMode?: "tree" | "treegrid";
3506
+ appearance?: "subtle" | "subtle-alpha" | "transparent";
3507
+ size?: "small" | "medium";
3508
+ renderItem?: (node: TreeNode<React.ReactNode>, level: number) => React.ReactNode;
3509
+ collapseMotion?: React.ComponentType<PresenceMotionSlotProps>;
3510
+ toggleLabel?: string;
3511
+ emptyMessage?: React.ReactNode;
3512
+ };
3513
+ export declare function FlatTree({ children, ...props }: FlatTreeProps): React.ReactElement;
3514
+ export type TextFieldProps = ElementProps & {
3515
+ label?: string;
3516
+ value?: string;
3517
+ onValueChange?: (value: string) => void;
3518
+ name?: string;
3519
+ required?: boolean;
3520
+ disabled?: boolean;
3521
+ readOnly?: boolean;
3522
+ placeholder?: string;
3523
+ type?: string;
3524
+ };
3525
+ export declare const TextField: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
3526
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
3527
+ } & {
3528
+ label?: string;
3529
+ value?: string;
3530
+ onValueChange?: (value: string) => void;
3531
+ name?: string;
3532
+ required?: boolean;
3533
+ disabled?: boolean;
3534
+ readOnly?: boolean;
3535
+ placeholder?: string;
3536
+ type?: string;
3537
+ } & React.RefAttributes<HTMLElement>>;
3538
+ export type FieldProps = ElementProps & {
3539
+ children?: React.ReactNode | ((props: FieldControlProps) => React.ReactNode);
3540
+ label?: React.ReactNode;
3541
+ hint?: React.ReactNode;
3542
+ validationMessage?: React.ReactNode;
3543
+ validationMessageIcon?: React.ReactNode;
3544
+ validationState?: FieldValidationState;
3545
+ required?: boolean;
3546
+ disabled?: boolean;
3547
+ orientation?: FieldOrientation;
3548
+ size?: LabelSize;
3549
+ };
3550
+ /** Pair one form control with a theme-aware label, hint, and validation message. */
3551
+ export declare function Field({ children, label, hint, validationMessage, validationMessageIcon, validationState, required, disabled, orientation, size, className, style, ...props }: FieldProps): React.ReactElement;
3552
+ export type InputProps = Omit<NativeClickHostProps<HTMLInputElement>, "children" | "onChange" | "defaultValue" | "defaultChecked"> & {
3553
+ children?: never;
3554
+ type?: InputType;
3555
+ value?: string | number | readonly string[];
3556
+ defaultValue?: string | number | readonly string[];
3557
+ checked?: boolean;
3558
+ defaultChecked?: boolean;
3559
+ accept?: string;
3560
+ alt?: string;
3561
+ autoComplete?: string;
3562
+ capture?: boolean | string;
3563
+ form?: string;
3564
+ formAction?: string;
3565
+ formEncType?: string;
3566
+ formMethod?: string;
3567
+ formNoValidate?: boolean;
3568
+ formTarget?: string;
3569
+ height?: number | string;
3570
+ list?: string;
3571
+ max?: number | string;
3572
+ maxLength?: number;
3573
+ min?: number | string;
3574
+ minLength?: number;
3575
+ multiple?: boolean;
3576
+ pattern?: string;
3577
+ src?: string;
3578
+ step?: number | string;
3579
+ width?: number | string;
3580
+ input?: React.ReactElement<React.InputHTMLAttributes<HTMLInputElement>> | React.InputHTMLAttributes<HTMLInputElement>;
3581
+ onValueChange?: (value: string) => void;
3582
+ onChange?: (event: React.ChangeEvent<HTMLInputElement>, data: {
3583
+ value: string;
3584
+ }) => void;
3585
+ contentBefore?: React.ReactNode;
3586
+ contentAfter?: React.ReactNode;
3587
+ size?: InputSize;
3588
+ appearance?: InputAppearance;
3589
+ disabled?: boolean;
3590
+ required?: boolean;
3591
+ readOnly?: boolean;
3592
+ placeholder?: string;
3593
+ name?: string;
3594
+ };
3595
+ /** Bare input primitive. Supply aria-label or aria-labelledby; use TextField when a shadow-safe visible label is needed. */
3596
+ export declare const Input: React.ForwardRefExoticComponent<Omit<NativeClickHostProps<HTMLInputElement>, "defaultValue" | "defaultChecked" | "children" | "onChange"> & {
3597
+ children?: never;
3598
+ type?: InputType;
3599
+ value?: string | number | readonly string[];
3600
+ defaultValue?: string | number | readonly string[];
3601
+ checked?: boolean;
3602
+ defaultChecked?: boolean;
3603
+ accept?: string;
3604
+ alt?: string;
3605
+ autoComplete?: string;
3606
+ capture?: boolean | string;
3607
+ form?: string;
3608
+ formAction?: string;
3609
+ formEncType?: string;
3610
+ formMethod?: string;
3611
+ formNoValidate?: boolean;
3612
+ formTarget?: string;
3613
+ height?: number | string;
3614
+ list?: string;
3615
+ max?: number | string;
3616
+ maxLength?: number;
3617
+ min?: number | string;
3618
+ minLength?: number;
3619
+ multiple?: boolean;
3620
+ pattern?: string;
3621
+ src?: string;
3622
+ step?: number | string;
3623
+ width?: number | string;
3624
+ input?: React.ReactElement<React.InputHTMLAttributes<HTMLInputElement>> | React.InputHTMLAttributes<HTMLInputElement>;
3625
+ onValueChange?: (value: string) => void;
3626
+ onChange?: (event: React.ChangeEvent<HTMLInputElement>, data: {
3627
+ value: string;
3628
+ }) => void;
3629
+ contentBefore?: React.ReactNode;
3630
+ contentAfter?: React.ReactNode;
3631
+ size?: InputSize;
3632
+ appearance?: InputAppearance;
3633
+ disabled?: boolean;
3634
+ required?: boolean;
3635
+ readOnly?: boolean;
3636
+ placeholder?: string;
3637
+ name?: string;
3638
+ } & React.RefAttributes<HTMLElement>>;
3639
+ export type FileUploadProps = NativeClickHostProps<HTMLDivElement> & {
3640
+ label?: string;
3641
+ name?: string;
3642
+ form?: string;
3643
+ accept?: string;
3644
+ multiple?: boolean;
3645
+ disabled?: boolean;
3646
+ required?: boolean;
3647
+ maxFiles?: number;
3648
+ maxFileSize?: number;
3649
+ browseLabel?: string;
3650
+ dropLabel?: string;
3651
+ removeLabel?: string;
3652
+ selectedLabel?: string;
3653
+ onFilesChange?: (files: File[]) => void;
3654
+ onFilesError?: (errors: FileUploadError[]) => void;
3655
+ };
3656
+ export declare const FileUpload: React.ForwardRefExoticComponent<Omit<ElementProps, "onClick" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & Pick<React.DOMAttributes<HTMLDivElement>, "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture"> & NativeMousePointerEventProps<HTMLDivElement> & NativeAdditionalEventProps<HTMLDivElement> & {
3657
+ onClick?: React.MouseEventHandler<HTMLDivElement> | undefined;
3658
+ onClickCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
3659
+ } & {
3660
+ label?: string;
3661
+ name?: string;
3662
+ form?: string;
3663
+ accept?: string;
3664
+ multiple?: boolean;
3665
+ disabled?: boolean;
3666
+ required?: boolean;
3667
+ maxFiles?: number;
3668
+ maxFileSize?: number;
3669
+ browseLabel?: string;
3670
+ dropLabel?: string;
3671
+ removeLabel?: string;
3672
+ selectedLabel?: string;
3673
+ onFilesChange?: (files: File[]) => void;
3674
+ onFilesError?: (errors: FileUploadError[]) => void;
3675
+ } & React.RefAttributes<HTMLElement>>;
3676
+ export type ImageProps = Omit<React.ImgHTMLAttributes<HTMLImageElement>, "loading" | "decoding"> & {
3677
+ fit?: ImageFit;
3678
+ shape?: ImageShape;
3679
+ block?: boolean;
3680
+ bordered?: boolean;
3681
+ shadow?: boolean;
3682
+ loading?: "eager" | "lazy";
3683
+ decoding?: "async" | "sync" | "auto";
3684
+ };
3685
+ /** Theme-aware image styling on a native img; keeps srcset, dimensions, and browser loading native. */
3686
+ export declare const Image: React.ForwardRefExoticComponent<Omit<React.ImgHTMLAttributes<HTMLImageElement>, "loading" | "decoding"> & {
3687
+ fit?: ImageFit;
3688
+ shape?: ImageShape;
3689
+ block?: boolean;
3690
+ bordered?: boolean;
3691
+ shadow?: boolean;
3692
+ loading?: "eager" | "lazy";
3693
+ decoding?: "async" | "sync" | "auto";
3694
+ } & React.RefAttributes<HTMLImageElement>>;
3695
+ export type SearchBoxChangeEvent = React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLSpanElement>;
3696
+ export type SearchBoxProps = Omit<InputProps, "appearance" | "children" | "defaultValue" | "input" | "onChange" | "size" | "type" | "value"> & {
3697
+ children?: React.ReactNode;
3698
+ label?: string;
3699
+ type?: React.HTMLInputTypeAttribute;
3700
+ value?: string;
3701
+ defaultValue?: string;
3702
+ onValueChange?: (value: string) => void;
3703
+ onSearch?: (value: string) => void;
3704
+ onChange?: (event: SearchBoxChangeEvent, data: {
3705
+ value: string;
3706
+ }) => void;
3707
+ size?: SearchSize;
3708
+ appearance?: SearchAppearance;
3709
+ clearLabel?: string;
3710
+ contentBefore?: React.ReactNode;
3711
+ contentAfter?: React.ReactNode;
3712
+ dismiss?: React.ReactNode;
3713
+ };
3714
+ export declare const SearchBox: React.ForwardRefExoticComponent<Omit<InputProps, "value" | "defaultValue" | "input" | "appearance" | "size" | "type" | "children" | "onChange"> & {
3715
+ children?: React.ReactNode;
3716
+ label?: string;
3717
+ type?: React.HTMLInputTypeAttribute;
3718
+ value?: string;
3719
+ defaultValue?: string;
3720
+ onValueChange?: (value: string) => void;
3721
+ onSearch?: (value: string) => void;
3722
+ onChange?: (event: SearchBoxChangeEvent, data: {
3723
+ value: string;
3724
+ }) => void;
3725
+ size?: SearchSize;
3726
+ appearance?: SearchAppearance;
3727
+ clearLabel?: string;
3728
+ contentBefore?: React.ReactNode;
3729
+ contentAfter?: React.ReactNode;
3730
+ dismiss?: React.ReactNode;
3731
+ } & React.RefAttributes<HTMLElement>>;
3732
+ type FluentEventData<TChangeEvent extends Event | React.SyntheticEvent> = {
3733
+ color: ColorPickerHsvColor;
3734
+ event: SharePointUIEvent;
3735
+ type: undefined;
3736
+ } | {
3737
+ color: ColorPickerHsvColor;
3738
+ event: TChangeEvent;
3739
+ type: "change";
3740
+ };
3741
+ export type ColorPickerOnColorChangeData = FluentEventData<React.ChangeEvent<HTMLInputElement>>;
3742
+ export type ColorPickerProps = Omit<NativeClickHostProps<HTMLDivElement>, "color"> & {
3743
+ label?: string;
3744
+ name?: string;
3745
+ form?: string;
3746
+ color?: ColorPickerHsvColor;
3747
+ defaultColor?: ColorPickerHsvColor;
3748
+ value?: string;
3749
+ defaultValue?: string;
3750
+ alpha?: number;
3751
+ defaultAlpha?: number;
3752
+ colors?: readonly string[];
3753
+ format?: ColorPickerFormat;
3754
+ onColorChange?: (event: SharePointUIEvent, data: ColorPickerOnColorChangeData) => void;
3755
+ onValueChange?: (value: string, alpha: number) => void;
3756
+ onFormatChange?: (format: ColorPickerFormat) => void;
3757
+ size?: ColorPickerSize;
3758
+ shape?: ColorPickerShape;
3759
+ readOnly?: boolean;
3760
+ required?: boolean;
3761
+ children?: React.ReactNode;
3762
+ };
3763
+ export declare const ColorPicker: React.ForwardRefExoticComponent<Omit<NativeClickHostProps<HTMLDivElement>, "color"> & {
3764
+ label?: string;
3765
+ name?: string;
3766
+ form?: string;
3767
+ color?: ColorPickerHsvColor;
3768
+ defaultColor?: ColorPickerHsvColor;
3769
+ value?: string;
3770
+ defaultValue?: string;
3771
+ alpha?: number;
3772
+ defaultAlpha?: number;
3773
+ colors?: readonly string[];
3774
+ format?: ColorPickerFormat;
3775
+ onColorChange?: (event: SharePointUIEvent, data: ColorPickerOnColorChangeData) => void;
3776
+ onValueChange?: (value: string, alpha: number) => void;
3777
+ onFormatChange?: (format: ColorPickerFormat) => void;
3778
+ size?: ColorPickerSize;
3779
+ shape?: ColorPickerShape;
3780
+ readOnly?: boolean;
3781
+ required?: boolean;
3782
+ children?: React.ReactNode;
3783
+ } & React.RefAttributes<HTMLElement>>;
3784
+ export type ColorAreaChangeData = {
3785
+ color: ColorPickerHsvColor;
3786
+ event: SharePointUIEvent;
3787
+ type: undefined;
3788
+ } | {
3789
+ color: ColorPickerHsvColor;
3790
+ event: React.SyntheticEvent | PointerEvent;
3791
+ type: "change";
3792
+ };
3793
+ export type ColorControlChangeData = FluentEventData<React.ChangeEvent<HTMLInputElement>>;
3794
+ export type ColorControlChangeHandler = (event: SharePointUIEvent, data: ColorControlChangeData) => void;
3795
+ export type ColorAreaProps = Omit<NativeClickHostProps<HTMLDivElement>, "color" | "onChange"> & {
3796
+ color?: ColorPickerHsvColor;
3797
+ defaultColor?: ColorPickerHsvColor;
3798
+ inputX?: React.ReactElement<React.InputHTMLAttributes<HTMLInputElement>> | React.InputHTMLAttributes<HTMLInputElement>;
3799
+ inputY?: React.ReactElement<React.InputHTMLAttributes<HTMLInputElement>> | React.InputHTMLAttributes<HTMLInputElement>;
3800
+ thumb?: React.ReactNode;
3801
+ shape?: ColorPickerShape;
3802
+ onChange?: (event: SharePointUIEvent, data: ColorAreaChangeData) => void;
3803
+ children?: React.ReactNode;
3804
+ };
3805
+ export type ColorSliderProps = Omit<NativeClickHostProps<HTMLDivElement>, "color" | "onChange"> & {
3806
+ color?: ColorPickerHsvColor;
3807
+ defaultColor?: ColorPickerHsvColor;
3808
+ input?: React.ReactElement<React.InputHTMLAttributes<HTMLInputElement>> | React.InputHTMLAttributes<HTMLInputElement>;
3809
+ rail?: React.ReactNode;
3810
+ thumb?: React.ReactNode;
3811
+ channel?: ColorSliderChannel;
3812
+ vertical?: boolean;
3813
+ shape?: ColorPickerShape;
3814
+ onChange?: ColorControlChangeHandler;
3815
+ };
3816
+ export type AlphaSliderProps = Omit<ColorSliderProps, "channel"> & {
3817
+ transparency?: boolean;
3818
+ };
3819
+ export declare const ColorArea: React.ForwardRefExoticComponent<Omit<NativeClickHostProps<HTMLDivElement>, "color" | "onChange"> & {
3820
+ color?: ColorPickerHsvColor;
3821
+ defaultColor?: ColorPickerHsvColor;
3822
+ inputX?: React.ReactElement<React.InputHTMLAttributes<HTMLInputElement>> | React.InputHTMLAttributes<HTMLInputElement>;
3823
+ inputY?: React.ReactElement<React.InputHTMLAttributes<HTMLInputElement>> | React.InputHTMLAttributes<HTMLInputElement>;
3824
+ thumb?: React.ReactNode;
3825
+ shape?: ColorPickerShape;
3826
+ onChange?: (event: SharePointUIEvent, data: ColorAreaChangeData) => void;
3827
+ children?: React.ReactNode;
3828
+ } & React.RefAttributes<HTMLElement>>;
3829
+ export declare const ColorSlider: React.ForwardRefExoticComponent<Omit<NativeClickHostProps<HTMLDivElement>, "color" | "onChange"> & {
3830
+ color?: ColorPickerHsvColor;
3831
+ defaultColor?: ColorPickerHsvColor;
3832
+ input?: React.ReactElement<React.InputHTMLAttributes<HTMLInputElement>> | React.InputHTMLAttributes<HTMLInputElement>;
3833
+ rail?: React.ReactNode;
3834
+ thumb?: React.ReactNode;
3835
+ channel?: ColorSliderChannel;
3836
+ vertical?: boolean;
3837
+ shape?: ColorPickerShape;
3838
+ onChange?: ColorControlChangeHandler;
3839
+ } & React.RefAttributes<HTMLElement>>;
3840
+ export declare const AlphaSlider: React.ForwardRefExoticComponent<Omit<ColorSliderProps, "channel"> & {
3841
+ transparency?: boolean;
3842
+ } & React.RefAttributes<HTMLElement>>;
3843
+ export type SwatchPickerSelection = {
3844
+ selectedValue: string;
3845
+ selectedColor: string;
3846
+ selectedValues: string[];
3847
+ selectedColors: string[];
3848
+ selectionMode: "single" | "multiple";
3849
+ };
3850
+ export type SwatchPickerSelectionChangeEvent = SharePointUIEvent;
3851
+ export type SwatchPickerOnSelectionChangeData = (SwatchPickerSelection & {
3852
+ event: SharePointUIEvent;
3853
+ type: undefined;
3854
+ selectedSwatch: string;
3855
+ }) | (SwatchPickerSelection & {
3856
+ event: React.MouseEvent<HTMLButtonElement>;
3857
+ type: "click";
3858
+ selectedSwatch: string;
3859
+ });
3860
+ export type SwatchPickerProps = ElementProps & {
3861
+ selectedValue?: string;
3862
+ defaultSelectedValue?: string;
3863
+ selectedValues?: string[];
3864
+ defaultSelectedValues?: string[];
3865
+ selectionMode?: "single" | "multiple";
3866
+ layout?: "row" | "grid";
3867
+ size?: "extra-small" | "small" | "medium" | "large";
3868
+ shape?: "rounded" | "square" | "circular";
3869
+ spacing?: "small" | "medium";
3870
+ focusMode?: "arrow" | "tab";
3871
+ columns?: number;
3872
+ onSelectionChange?: (event: SwatchPickerSelectionChangeEvent, data: SwatchPickerOnSelectionChangeData) => void;
3873
+ children?: React.ReactNode;
3874
+ };
3875
+ export declare const SwatchPicker: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
3876
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
3877
+ } & {
3878
+ selectedValue?: string;
3879
+ defaultSelectedValue?: string;
3880
+ selectedValues?: string[];
3881
+ defaultSelectedValues?: string[];
3882
+ selectionMode?: "single" | "multiple";
3883
+ layout?: "row" | "grid";
3884
+ size?: "extra-small" | "small" | "medium" | "large";
3885
+ shape?: "rounded" | "square" | "circular";
3886
+ spacing?: "small" | "medium";
3887
+ focusMode?: "arrow" | "tab";
3888
+ columns?: number;
3889
+ onSelectionChange?: (event: SwatchPickerSelectionChangeEvent, data: SwatchPickerOnSelectionChangeData) => void;
3890
+ children?: React.ReactNode;
3891
+ } & React.RefAttributes<HTMLElement>>;
3892
+ export declare const ColorSwatch: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
3893
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
3894
+ } & {
3895
+ color: string;
3896
+ value: string;
3897
+ disabled?: boolean;
3898
+ borderColor?: string;
3899
+ size?: SwatchPickerProps["size"];
3900
+ shape?: SwatchPickerProps["shape"];
3901
+ icon?: React.ReactNode;
3902
+ disabledIcon?: React.ReactNode;
3903
+ children?: React.ReactNode;
3904
+ } & React.RefAttributes<HTMLElement>>;
3905
+ export declare const ImageSwatch: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
3906
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
3907
+ } & {
3908
+ src: string;
3909
+ value: string;
3910
+ disabled?: boolean;
3911
+ size?: SwatchPickerProps["size"];
3912
+ shape?: SwatchPickerProps["shape"];
3913
+ children?: React.ReactNode;
3914
+ } & React.RefAttributes<HTMLElement>>;
3915
+ export declare const EmptySwatch: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
3916
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
3917
+ } & {
3918
+ onAdd?: () => void;
3919
+ disabled?: boolean;
3920
+ size?: SwatchPickerProps["size"];
3921
+ shape?: SwatchPickerProps["shape"];
3922
+ } & React.RefAttributes<HTMLElement>>;
3923
+ export declare const SwatchPickerRow: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
3924
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
3925
+ } & {
3926
+ children?: React.ReactNode;
3927
+ } & React.RefAttributes<HTMLElement>>;
3928
+ export type TableSize = "small" | "medium" | "large";
3929
+ export type TableAppearance = "subtle" | "dividers" | "plain";
3930
+ export type TableSortDirection = "ascending" | "descending";
3931
+ export type TableColumnId = string | number;
3932
+ export type TableRowId = string | number;
3933
+ export type TableContextValue = {
3934
+ size: "extra-small" | "small" | "medium" | "large";
3935
+ noNativeElements: boolean;
3936
+ sortable: boolean;
3937
+ };
3938
+ export declare const TableContextProvider: React.Provider<TableContextValue | undefined>;
3939
+ export declare function useTableContext(): TableContextValue;
3940
+ export declare const TableRowIdContextProvider: React.Provider<TableRowId | undefined>;
3941
+ export declare function useTableRowIdContext(): TableRowId;
3942
+ export declare function useColumnIdContext(): TableColumnId;
3943
+ export declare const TableHeaderContextProvider: React.Provider<string | undefined>;
3944
+ export declare function useIsInTableHeader(): boolean;
3945
+ export type TableColumnDefinition<TItem> = {
3946
+ columnId: TableColumnId;
3947
+ compare: (a: TItem, b: TItem) => number;
3948
+ renderHeaderCell: (data?: unknown) => React.ReactNode;
3949
+ renderCell: (item: TItem) => React.ReactNode;
3950
+ };
3951
+ export type CreateTableColumnOptions<TItem> = {
3952
+ columnId: TableColumnId;
3953
+ compare?: (a: TItem, b: TItem) => number;
3954
+ renderHeaderCell?: (data?: unknown) => React.ReactNode;
3955
+ renderCell?: (item: TItem) => React.ReactNode;
3956
+ };
3957
+ export declare function createTableColumn<TItem>(options: CreateTableColumnOptions<TItem>): TableColumnDefinition<TItem>;
3958
+ export type TableRowData<TItem> = {
3959
+ item: TItem;
3960
+ rowId: TableRowId;
3961
+ };
3962
+ export type TableSelectionState = {
3963
+ selectionMode: "single" | "multiselect";
3964
+ selectedRows: Set<TableRowId>;
3965
+ allRowsSelected: boolean;
3966
+ someRowsSelected: boolean;
3967
+ isRowSelected: (rowId: TableRowId) => boolean;
3968
+ toggleRow: (event: React.SyntheticEvent, rowId: TableRowId) => void;
3969
+ selectRow: (event: React.SyntheticEvent, rowId: TableRowId) => void;
3970
+ deselectRow: (event: React.SyntheticEvent, rowId: TableRowId) => void;
3971
+ toggleAllRows: (event: React.SyntheticEvent) => void;
3972
+ clearRows: (event: React.SyntheticEvent) => void;
3973
+ };
3974
+ export type TableSortState<TItem> = {
3975
+ sortColumn: TableColumnId | undefined;
3976
+ sortDirection: TableSortDirection;
3977
+ getSortDirection: (columnId: TableColumnId) => TableSortDirection | undefined;
3978
+ setColumnSort: (event: React.SyntheticEvent, columnId: TableColumnId, direction: TableSortDirection) => void;
3979
+ toggleColumnSort: (event: React.SyntheticEvent, columnId: TableColumnId) => void;
3980
+ sort: <TRow extends TableRowData<TItem>>(rows: TRow[]) => TRow[];
3981
+ };
3982
+ export type ColumnWidthState = {
3983
+ columnId: TableColumnId;
3984
+ width: number;
3985
+ minWidth: number;
3986
+ idealWidth: number;
3987
+ padding: number;
3988
+ };
3989
+ export type TableColumnSizingOptions = Record<TableColumnId, Partial<Pick<ColumnWidthState, "minWidth" | "idealWidth" | "padding">> & {
3990
+ defaultWidth?: number;
3991
+ autoFitColumns?: boolean;
3992
+ }>;
3993
+ export type TableColumnSizingState = {
3994
+ getOnMouseDown: (columnId: TableColumnId) => (event: React.MouseEvent | React.TouchEvent) => void;
3995
+ setColumnWidth: (columnId: TableColumnId, width: number) => void;
3996
+ getColumnWidths: () => ColumnWidthState[];
3997
+ getTableProps: (props?: React.HTMLAttributes<HTMLDivElement>) => React.HTMLAttributes<HTMLDivElement>;
3998
+ getTableHeaderCellProps: (columnId: TableColumnId) => {
3999
+ style?: React.CSSProperties;
4000
+ aside?: React.ReactNode;
4001
+ };
4002
+ getTableCellProps: (columnId: TableColumnId) => {
4003
+ style?: React.CSSProperties;
4004
+ };
4005
+ enableKeyboardMode: (columnId: TableColumnId, onChange?: (columnId: TableColumnId, isKeyboardMode: boolean) => void) => (event: React.MouseEvent | React.TouchEvent) => void;
4006
+ };
4007
+ export type TableFeaturesState<TItem> = {
4008
+ items: TItem[];
4009
+ columns: TableColumnDefinition<TItem>[];
4010
+ getRowId?: (item: TItem) => TableRowId;
4011
+ getRows: <TRow extends TableRowData<TItem> = TableRowData<TItem>>(rowEnhancer?: (row: TableRowData<TItem>) => TRow) => TRow[];
4012
+ selection: TableSelectionState;
4013
+ sort: TableSortState<TItem>;
4014
+ tableRef: React.RefObject<HTMLDivElement | null>;
4015
+ columnSizing_unstable: TableColumnSizingState;
4016
+ };
4017
+ export type TableFeaturePlugin = <TItem>(state: TableFeaturesState<TItem>) => TableFeaturesState<TItem>;
4018
+ export type UseTableFeaturesOptions<TItem> = {
4019
+ items: TItem[];
4020
+ columns: TableColumnDefinition<TItem>[];
4021
+ getRowId?: (item: TItem) => TableRowId;
4022
+ };
4023
+ export type UseTableSelectionOptions = {
4024
+ selectionMode: "single" | "multiselect";
4025
+ defaultSelectedItems?: Iterable<TableRowId>;
4026
+ selectedItems?: Iterable<TableRowId>;
4027
+ onSelectionChange?: (event: React.SyntheticEvent, data: {
4028
+ selectedItems: Set<TableRowId>;
4029
+ }) => void;
4030
+ };
4031
+ export type UseTableSortOptions = {
4032
+ sortState?: {
4033
+ sortColumn: TableColumnId | undefined;
4034
+ sortDirection: TableSortDirection;
4035
+ };
4036
+ defaultSortState?: {
4037
+ sortColumn: TableColumnId | undefined;
4038
+ sortDirection: TableSortDirection;
4039
+ };
4040
+ onSortChange?: (event: React.SyntheticEvent, state: {
4041
+ sortColumn: TableColumnId | undefined;
4042
+ sortDirection: TableSortDirection;
4043
+ }) => void;
4044
+ };
4045
+ /** Build reusable table row state, then enhance it with selection/sort feature plugins. Keep plugin order stable across renders. */
4046
+ export declare function useTableFeatures<TItem>(options: UseTableFeaturesOptions<TItem>, plugins?: readonly TableFeaturePlugin[]): TableFeaturesState<TItem>;
4047
+ /** Create a Fluent-compatible selection plugin for useTableFeatures. */
4048
+ export declare function useTableSelection(options: UseTableSelectionOptions): TableFeaturePlugin;
4049
+ /** Create a Fluent-compatible sort plugin; sorting returns a shallow-sorted copy of rows. */
4050
+ export declare function useTableSort(options?: UseTableSortOptions): TableFeaturePlugin;
4051
+ export type UseTableColumnSizingParams = {
4052
+ columnSizingOptions?: TableColumnSizingOptions;
4053
+ onColumnResize?: (event: KeyboardEvent | TouchEvent | MouseEvent | undefined, data: {
4054
+ columnId: TableColumnId;
4055
+ width: number;
4056
+ }) => void;
4057
+ containerWidthOffset?: number;
4058
+ autoFitColumns?: boolean;
4059
+ };
4060
+ /** Fluent-compatible composable sizing state for Table and custom table renderers. */
4061
+ export declare function useTableColumnSizing_unstable(params?: UseTableColumnSizingParams): TableFeaturePlugin;
4062
+ export type TableCompositeNavigationAttribute = {
4063
+ "data-tabster": string;
4064
+ };
4065
+ export type TableCompositeNavigation = {
4066
+ onTableKeyDown: React.KeyboardEventHandler<HTMLElement>;
4067
+ tableTabsterAttribute: TableCompositeNavigationAttribute;
4068
+ tableRowTabsterAttribute: TableCompositeNavigationAttribute;
4069
+ };
4070
+ /** Fluent-compatible table/grid navigation attributes and focus handoff events without a Tabster runtime dependency. */
4071
+ export declare function useTableCompositeNavigation(): TableCompositeNavigation;
4072
+ export declare const Table: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
4073
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
4074
+ } & {
4075
+ children?: React.ReactNode;
4076
+ size?: TableSize;
4077
+ appearance?: TableAppearance;
4078
+ noNativeElements?: boolean;
4079
+ sortable?: boolean;
4080
+ } & React.RefAttributes<HTMLElement>>;
4081
+ export declare const TableHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
4082
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
4083
+ } & {
4084
+ children?: React.ReactNode;
4085
+ } & React.RefAttributes<HTMLElement>>;
4086
+ export declare const TableBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
4087
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
4088
+ } & {
4089
+ children?: React.ReactNode;
4090
+ } & React.RefAttributes<HTMLElement>>;
4091
+ export declare const TableRow: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
4092
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
4093
+ } & {
4094
+ children?: React.ReactNode;
4095
+ selected?: boolean;
4096
+ appearance?: "brand" | "neutral" | "none";
4097
+ } & React.RefAttributes<HTMLElement>>;
4098
+ export type TableHeaderCellButtonSlot = React.ReactElement<any> | Omit<React.HTMLAttributes<HTMLElement>, "children">;
4099
+ export declare const TableHeaderCell: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
4100
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
4101
+ } & {
4102
+ children?: React.ReactNode;
4103
+ aside?: React.ReactNode;
4104
+ sortIcon?: React.ReactNode;
4105
+ button?: TableHeaderCellButtonSlot;
4106
+ sortable?: boolean;
4107
+ sortDirection?: TableSortDirection;
4108
+ columnId?: string | number;
4109
+ onSort?: (direction: TableSortDirection, columnId?: string) => void;
4110
+ } & React.RefAttributes<HTMLElement>>;
4111
+ export declare const TableCell: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
4112
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
4113
+ } & {
4114
+ children?: React.ReactNode;
4115
+ } & React.RefAttributes<HTMLElement>>;
4116
+ export type TableCellLayoutSlot = React.ReactNode | React.HTMLAttributes<HTMLSpanElement>;
4117
+ export type TableCellLayoutProps = ElementProps & {
4118
+ children?: React.ReactNode;
4119
+ main?: TableCellLayoutSlot;
4120
+ media?: TableCellLayoutSlot;
4121
+ description?: TableCellLayoutSlot;
4122
+ appearance?: "primary";
4123
+ truncate?: boolean;
4124
+ };
4125
+ export type SpanSlotProps = React.ReactNode | React.HTMLAttributes<HTMLSpanElement>;
4126
+ export declare const TableCellLayout: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
4127
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
4128
+ } & {
4129
+ children?: React.ReactNode;
4130
+ main?: TableCellLayoutSlot;
4131
+ media?: TableCellLayoutSlot;
4132
+ description?: TableCellLayoutSlot;
4133
+ appearance?: "primary";
4134
+ truncate?: boolean;
4135
+ } & React.RefAttributes<HTMLElement>>;
4136
+ export declare const TableCellActions: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
4137
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
4138
+ } & {
4139
+ children?: React.ReactNode;
4140
+ visible?: boolean;
4141
+ } & React.RefAttributes<HTMLElement>>;
4142
+ export declare const TableSelectionCell: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
4143
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
4144
+ } & {
4145
+ type?: "checkbox" | "radio";
4146
+ checked?: boolean | "mixed";
4147
+ subtle?: boolean;
4148
+ invisible?: boolean;
4149
+ hidden?: boolean;
4150
+ checkboxIndicator?: SelectionIndicatorSlot;
4151
+ radioIndicator?: SelectionIndicatorSlot;
4152
+ onSelectionChange?: (checked: boolean, type: "checkbox" | "radio") => void;
4153
+ } & React.RefAttributes<HTMLElement>>;
4154
+ export declare const TableResizeHandle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
4155
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
4156
+ } & {
4157
+ value?: number;
4158
+ min?: number;
4159
+ max?: number;
4160
+ step?: number;
4161
+ label?: string;
4162
+ onResize?: (delta: number, value: number, event?: Event) => void;
4163
+ } & React.RefAttributes<HTMLElement>>;
4164
+ export type TextAreaAppearance = "outline" | "filled-darker" | "filled-lighter" | "filled-darker-shadow" | "filled-lighter-shadow";
4165
+ export type TextAreaSize = "small" | "medium" | "large";
4166
+ export type TextAreaResize = "none" | "horizontal" | "vertical" | "both";
4167
+ export type TextAreaChangeData = {
4168
+ value: string;
4169
+ };
4170
+ export type TextAreaProps = Omit<NativeClickHostProps<HTMLTextAreaElement>, "onChange" | "defaultValue"> & {
4171
+ label?: string;
4172
+ value?: string | number | readonly string[];
4173
+ defaultValue?: string | number | readonly string[];
4174
+ textarea?: React.ReactElement<React.TextareaHTMLAttributes<HTMLTextAreaElement>> | React.TextareaHTMLAttributes<HTMLTextAreaElement>;
4175
+ rows?: number;
4176
+ cols?: number;
4177
+ autoComplete?: string;
4178
+ dirName?: string;
4179
+ form?: string;
4180
+ maxLength?: number;
4181
+ minLength?: number;
4182
+ name?: string;
4183
+ wrap?: "hard" | "soft" | "off";
4184
+ placeholder?: string;
4185
+ disabled?: boolean;
4186
+ required?: boolean;
4187
+ readOnly?: boolean;
4188
+ appearance?: TextAreaAppearance;
4189
+ size?: TextAreaSize;
4190
+ resize?: TextAreaResize;
4191
+ onValueChange?: (value: string) => void;
4192
+ onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>, data: TextAreaChangeData) => void;
4193
+ };
4194
+ export declare const TextArea: React.ForwardRefExoticComponent<Omit<NativeClickHostProps<HTMLTextAreaElement>, "defaultValue" | "onChange"> & {
4195
+ label?: string;
4196
+ value?: string | number | readonly string[];
4197
+ defaultValue?: string | number | readonly string[];
4198
+ textarea?: React.ReactElement<React.TextareaHTMLAttributes<HTMLTextAreaElement>> | React.TextareaHTMLAttributes<HTMLTextAreaElement>;
4199
+ rows?: number;
4200
+ cols?: number;
4201
+ autoComplete?: string;
4202
+ dirName?: string;
4203
+ form?: string;
4204
+ maxLength?: number;
4205
+ minLength?: number;
4206
+ name?: string;
4207
+ wrap?: "hard" | "soft" | "off";
4208
+ placeholder?: string;
4209
+ disabled?: boolean;
4210
+ required?: boolean;
4211
+ readOnly?: boolean;
4212
+ appearance?: TextAreaAppearance;
4213
+ size?: TextAreaSize;
4214
+ resize?: TextAreaResize;
4215
+ onValueChange?: (value: string) => void;
4216
+ onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>, data: TextAreaChangeData) => void;
4217
+ } & React.RefAttributes<HTMLElement>>;
4218
+ export type CheckboxCheckedState = boolean | "mixed";
4219
+ export type CheckboxProps = Omit<NativeClickHostProps<HTMLInputElement>, "onChange" | "children"> & {
4220
+ children?: never;
4221
+ checked?: CheckboxCheckedState;
4222
+ defaultChecked?: CheckboxCheckedState;
4223
+ disabled?: boolean;
4224
+ disabledFocusable?: boolean;
4225
+ required?: boolean;
4226
+ name?: string;
4227
+ form?: string;
4228
+ value?: string;
4229
+ label?: React.ReactNode;
4230
+ input?: React.ReactElement<React.InputHTMLAttributes<HTMLInputElement>> | React.InputHTMLAttributes<HTMLInputElement>;
4231
+ indicator?: React.ReactNode;
4232
+ labelPosition?: "before" | "after";
4233
+ shape?: "square" | "circular";
4234
+ size?: "small" | "medium" | "large";
4235
+ onCheckedChange?: (checked: boolean) => void;
4236
+ onChange?: (event: React.ChangeEvent<HTMLInputElement>, data: {
4237
+ checked: CheckboxCheckedState;
4238
+ }) => void;
4239
+ };
4240
+ export declare const Checkbox: React.ForwardRefExoticComponent<Omit<NativeClickHostProps<HTMLInputElement>, "children" | "onChange"> & {
4241
+ children?: never;
4242
+ checked?: CheckboxCheckedState;
4243
+ defaultChecked?: CheckboxCheckedState;
4244
+ disabled?: boolean;
4245
+ disabledFocusable?: boolean;
4246
+ required?: boolean;
4247
+ name?: string;
4248
+ form?: string;
4249
+ value?: string;
4250
+ label?: React.ReactNode;
4251
+ input?: React.ReactElement<React.InputHTMLAttributes<HTMLInputElement>> | React.InputHTMLAttributes<HTMLInputElement>;
4252
+ indicator?: React.ReactNode;
4253
+ labelPosition?: "before" | "after";
4254
+ shape?: "square" | "circular";
4255
+ size?: "small" | "medium" | "large";
4256
+ onCheckedChange?: (checked: boolean) => void;
4257
+ onChange?: (event: React.ChangeEvent<HTMLInputElement>, data: {
4258
+ checked: CheckboxCheckedState;
4259
+ }) => void;
4260
+ } & React.RefAttributes<HTMLElement>>;
4261
+ export type SwitchProps = Omit<NativeClickHostProps<HTMLInputElement>, "onChange"> & {
4262
+ label?: React.ReactNode;
4263
+ input?: React.ReactElement<React.InputHTMLAttributes<HTMLInputElement>> | React.InputHTMLAttributes<HTMLInputElement>;
4264
+ indicator?: React.ReactNode;
4265
+ checked?: boolean;
4266
+ defaultChecked?: boolean;
4267
+ disabled?: boolean;
4268
+ disabledFocusable?: boolean;
4269
+ required?: boolean;
4270
+ name?: string;
4271
+ form?: string;
4272
+ value?: string;
4273
+ size?: "small" | "medium";
4274
+ labelPosition?: "before" | "after" | "above";
4275
+ onCheckedChange?: (checked: boolean) => void;
4276
+ onChange?: (event: React.ChangeEvent<HTMLInputElement>, data: {
4277
+ checked: boolean;
4278
+ }) => void;
4279
+ };
4280
+ export declare const Switch: React.ForwardRefExoticComponent<Omit<NativeClickHostProps<HTMLInputElement>, "onChange"> & {
4281
+ label?: React.ReactNode;
4282
+ input?: React.ReactElement<React.InputHTMLAttributes<HTMLInputElement>> | React.InputHTMLAttributes<HTMLInputElement>;
4283
+ indicator?: React.ReactNode;
4284
+ checked?: boolean;
4285
+ defaultChecked?: boolean;
4286
+ disabled?: boolean;
4287
+ disabledFocusable?: boolean;
4288
+ required?: boolean;
4289
+ name?: string;
4290
+ form?: string;
4291
+ value?: string;
4292
+ size?: "small" | "medium";
4293
+ labelPosition?: "before" | "after" | "above";
4294
+ onCheckedChange?: (checked: boolean) => void;
4295
+ onChange?: (event: React.ChangeEvent<HTMLInputElement>, data: {
4296
+ checked: boolean;
4297
+ }) => void;
4298
+ } & React.RefAttributes<HTMLElement>>;
4299
+ export type SpinnerContextValue = {
4300
+ size?: SpinnerSize;
4301
+ };
4302
+ export declare const SpinnerContextProvider: React.Provider<SpinnerContextValue | undefined>;
4303
+ export declare function useSpinnerContext(): SpinnerContextValue;
4304
+ export declare const Spinner: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
4305
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
4306
+ } & {
4307
+ label?: React.ReactNode;
4308
+ spinner?: React.ReactNode;
4309
+ spinnerTail?: React.ReactNode;
4310
+ size?: SpinnerSize;
4311
+ appearance?: SpinnerAppearance;
4312
+ labelPosition?: SpinnerLabelPosition;
4313
+ delay?: number;
4314
+ children?: React.ReactNode;
4315
+ } & React.RefAttributes<HTMLElement>>;
4316
+ export declare const MessageBar: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
4317
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
4318
+ } & {
4319
+ intent?: MessageBarIntent;
4320
+ politeness?: MessageBarPoliteness;
4321
+ shape?: MessageBarShape;
4322
+ layout?: MessageBarLayout;
4323
+ icon?: React.ReactNode;
4324
+ bottomReflowSpacer?: React.ReactNode;
4325
+ children?: React.ReactNode;
4326
+ } & React.RefAttributes<HTMLElement>>;
4327
+ export declare const MessageBarActions: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
4328
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
4329
+ } & {
4330
+ containerAction?: React.ReactNode;
4331
+ children?: React.ReactNode;
4332
+ } & React.RefAttributes<HTMLElement>>;
4333
+ export declare const MessageBarBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
4334
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
4335
+ } & {
4336
+ children?: React.ReactNode;
4337
+ } & React.RefAttributes<HTMLElement>>;
4338
+ export declare const MessageBarTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
4339
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
4340
+ } & {
4341
+ children?: React.ReactNode;
4342
+ } & React.RefAttributes<HTMLElement>>;
4343
+ export declare const MessageBarGroup: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
4344
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
4345
+ } & {
4346
+ animate?: MessageBarGroupAnimation;
4347
+ children?: React.ReactNode;
4348
+ } & React.RefAttributes<HTMLElement>>;
4349
+ export declare const Alert: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
4350
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
4351
+ } & {
4352
+ intent?: "info" | "success" | "warning" | "error";
4353
+ appearance?: "primary" | "inverted";
4354
+ assertive?: boolean;
4355
+ dismissible?: boolean;
4356
+ dismissLabel?: string;
4357
+ onDismiss?: () => void;
4358
+ icon?: React.ReactNode;
4359
+ avatar?: React.ReactNode;
4360
+ action?: React.ReactNode;
4361
+ actions?: React.ReactNode;
4362
+ } & React.RefAttributes<HTMLElement>>;
4363
+ export type ToastProps = Omit<ElementProps, "title"> & Omit<ToastDispatchOptions, "appearance"> & {
4364
+ appearance?: "brand" | "inverted";
4365
+ children?: React.ReactNode;
4366
+ onDismiss?: (id: string, reason: string) => void;
4367
+ };
4368
+ export declare const ToastTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
4369
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
4370
+ } & {
4371
+ media?: React.ReactNode;
4372
+ action?: React.ReactNode;
4373
+ children?: React.ReactNode;
4374
+ } & React.RefAttributes<HTMLElement>>;
4375
+ export declare const ToastBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
4376
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
4377
+ } & {
4378
+ subtitle?: React.ReactNode;
4379
+ children?: React.ReactNode;
4380
+ } & React.RefAttributes<HTMLElement>>;
4381
+ export declare const ToastFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
4382
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
4383
+ } & {
4384
+ children?: React.ReactNode;
4385
+ } & React.RefAttributes<HTMLElement>>;
4386
+ export declare function ToastTrigger({ children, disableButtonEnhancement }: {
4387
+ children: React.ReactElement;
4388
+ disableButtonEnhancement?: boolean;
4389
+ }): React.ReactElement;
4390
+ export declare const Toast: React.ForwardRefExoticComponent<Omit<ElementProps, "title"> & Omit<ToastDispatchOptions, "appearance"> & {
4391
+ appearance?: "brand" | "inverted";
4392
+ children?: React.ReactNode;
4393
+ onDismiss?: (id: string, reason: string) => void;
4394
+ } & React.RefAttributes<HTMLElement>>;
4395
+ export declare const Toaster: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
4396
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
4397
+ } & {
4398
+ position?: ToastPosition;
4399
+ limit?: number;
4400
+ inline?: boolean;
4401
+ toasterId?: string;
4402
+ mountNode?: PortalMountNode;
4403
+ announce?: ToastAnnounce;
4404
+ children?: React.ReactNode;
4405
+ } & React.RefAttributes<HTMLElement>>;
4406
+ export declare function useToastController(toasterId?: string): ToastControllerValue;
4407
+ export type SkeletonContextValue = {
4408
+ animation?: SkeletonAnimation;
4409
+ appearance?: SkeletonAppearance;
4410
+ size?: SkeletonItemSize;
4411
+ shape?: SkeletonShape;
4412
+ };
4413
+ export declare const SkeletonContextProvider: React.Provider<SkeletonContextValue | undefined>;
4414
+ export declare function useSkeletonContext(): SkeletonContextValue;
4415
+ export declare const Skeleton: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
4416
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
4417
+ } & {
4418
+ shape?: SkeletonShape;
4419
+ width?: string | number;
4420
+ height?: string | number;
4421
+ animated?: boolean;
4422
+ animation?: SkeletonAnimation;
4423
+ appearance?: SkeletonAppearance;
4424
+ size?: SkeletonItemSize;
4425
+ children?: React.ReactNode;
4426
+ } & React.RefAttributes<HTMLElement>>;
4427
+ export declare const SkeletonItem: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
4428
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
4429
+ } & {
4430
+ animation?: SkeletonAnimation;
4431
+ appearance?: SkeletonAppearance;
4432
+ size?: SkeletonItemSize;
4433
+ shape?: "rectangle" | "square" | "circle";
4434
+ } & React.RefAttributes<HTMLElement>>;
4435
+ export type LinkProps = NativeClickHostProps<HTMLAnchorElement | HTMLButtonElement | HTMLSpanElement> & {
4436
+ href?: string;
4437
+ target?: string;
4438
+ rel?: string;
4439
+ download?: string | boolean;
4440
+ hrefLang?: string;
4441
+ hreflang?: string;
4442
+ media?: string;
4443
+ ping?: string;
4444
+ type?: string;
4445
+ referrerPolicy?: string;
4446
+ title?: string;
4447
+ appearance?: "default" | "subtle";
4448
+ underline?: "always" | "hover" | "none";
4449
+ disabled?: boolean;
4450
+ disabledFocusable?: boolean;
4451
+ inline?: boolean;
4452
+ as?: "a" | "button" | "span";
4453
+ children?: React.ReactNode;
4454
+ };
4455
+ export declare const Link: React.ForwardRefExoticComponent<Omit<ElementProps, "onClick" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & Pick<React.DOMAttributes<HTMLAnchorElement | HTMLButtonElement | HTMLSpanElement>, "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture"> & NativeMousePointerEventProps<HTMLAnchorElement | HTMLButtonElement | HTMLSpanElement> & NativeAdditionalEventProps<HTMLAnchorElement | HTMLButtonElement | HTMLSpanElement> & {
4456
+ onClick?: React.MouseEventHandler<HTMLAnchorElement | HTMLButtonElement | HTMLSpanElement> | undefined;
4457
+ onClickCapture?: React.MouseEventHandler<HTMLAnchorElement | HTMLButtonElement | HTMLSpanElement> | undefined;
4458
+ } & {
4459
+ href?: string;
4460
+ target?: string;
4461
+ rel?: string;
4462
+ download?: string | boolean;
4463
+ hrefLang?: string;
4464
+ hreflang?: string;
4465
+ media?: string;
4466
+ ping?: string;
4467
+ type?: string;
4468
+ referrerPolicy?: string;
4469
+ title?: string;
4470
+ appearance?: "default" | "subtle";
4471
+ underline?: "always" | "hover" | "none";
4472
+ disabled?: boolean;
4473
+ disabledFocusable?: boolean;
4474
+ inline?: boolean;
4475
+ as?: "a" | "button" | "span";
4476
+ children?: React.ReactNode;
4477
+ } & React.RefAttributes<HTMLElement>>;
4478
+ export declare const Divider: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
4479
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
4480
+ } & {
4481
+ orientation?: "horizontal" | "vertical";
4482
+ vertical?: boolean;
4483
+ align?: "start" | "center" | "end";
4484
+ alignContent?: "start" | "center" | "end";
4485
+ appearance?: DividerAppearance;
4486
+ inset?: boolean;
4487
+ wrapper?: React.ReactNode;
4488
+ children?: React.ReactNode;
4489
+ } & React.RefAttributes<HTMLElement>>;
4490
+ export type AccordionProviderValue = {
4491
+ openItems: AccordionItemValue[];
4492
+ requestToggle: (data: {
4493
+ event: Event;
4494
+ value: AccordionItemValue;
4495
+ }) => void;
4496
+ collapsible: boolean;
4497
+ multiple: boolean;
4498
+ navigation: AccordionNavigation | undefined;
4499
+ };
4500
+ export declare function AccordionProvider({ value, children }: {
4501
+ value: AccordionProviderValue;
4502
+ children?: React.ReactNode;
4503
+ }): React.ReactElement;
4504
+ export type AccordionToggleEvent = React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>;
4505
+ export declare const Accordion: <TValue extends AccordionItemValue = AccordionItemValue>(props: ElementProps & {
4506
+ mode?: "single" | "multiple";
4507
+ multiple?: boolean;
4508
+ collapsible?: boolean;
4509
+ navigation?: AccordionNavigation;
4510
+ openItems?: TValue | readonly TValue[];
4511
+ defaultOpenItems?: TValue | readonly TValue[];
4512
+ onToggle?: (event: AccordionToggleEvent, data: {
4513
+ value: TValue;
4514
+ openItems: TValue[];
4515
+ }) => void;
4516
+ children?: React.ReactNode;
4517
+ } & React.RefAttributes<HTMLElement>) => React.ReactElement;
4518
+ export declare const AccordionItem: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
4519
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
4520
+ } & {
4521
+ value: AccordionItemValue;
4522
+ heading?: string;
4523
+ open?: boolean;
4524
+ defaultOpen?: boolean;
4525
+ disabled?: boolean;
4526
+ onOpenChange?: (open: boolean) => void;
4527
+ children?: React.ReactNode;
4528
+ } & React.RefAttributes<HTMLElement>>;
4529
+ export declare const AccordionHeader: React.ForwardRefExoticComponent<Omit<ElementProps, "onClick" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & Pick<React.DOMAttributes<HTMLDivElement>, "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture"> & NativeMousePointerEventProps<HTMLDivElement> & NativeAdditionalEventProps<HTMLDivElement> & {
4530
+ onClick?: React.MouseEventHandler<HTMLDivElement> | undefined;
4531
+ onClickCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
4532
+ } & {
4533
+ expandIconPosition?: "start" | "end";
4534
+ inline?: boolean;
4535
+ size?: "small" | "medium" | "large" | "extra-large";
4536
+ icon?: React.ReactNode;
4537
+ expandIcon?: React.ReactNode;
4538
+ button?: React.ReactElement<React.ButtonHTMLAttributes<HTMLButtonElement>> | React.ButtonHTMLAttributes<HTMLButtonElement>;
4539
+ children?: React.ReactNode;
4540
+ } & React.RefAttributes<HTMLElement>>;
4541
+ export declare const AccordionPanel: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
4542
+ [attribute: `data-${string}`]: string | number | boolean | undefined;
4543
+ } & {
4544
+ children?: React.ReactNode;
4545
+ collapseMotion?: React.ComponentType<PresenceMotionSlotProps>;
4546
+ } & React.RefAttributes<HTMLElement>>;