@candidhealth/react-vitals 1.0.0-alpha.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.
- package/README.md +25 -0
- package/base.css +105 -0
- package/dist/index.css +88 -0
- package/dist/index.css.map +1 -0
- package/dist/index.d.mts +1821 -0
- package/dist/index.d.ts +1821 -0
- package/dist/index.js +4476 -0
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +4315 -0
- package/dist/index.mjs.map +1 -0
- package/package.json +63 -0
- package/theme.css +456 -0
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,1821 @@
|
|
|
1
|
+
import * as React$1 from 'react';
|
|
2
|
+
import React__default, { InputHTMLAttributes, PropsWithChildren, ReactNode, TextareaHTMLAttributes, RefObject, ElementType, ComponentPropsWithoutRef } from 'react';
|
|
3
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
4
|
+
import { IconDefinition, SizeProp } from '@fortawesome/fontawesome-svg-core';
|
|
5
|
+
import { Placement } from '@floating-ui/react';
|
|
6
|
+
import { DatePickerProps as DatePickerProps$1 } from 'react-datepicker';
|
|
7
|
+
import * as react_hook_form from 'react-hook-form';
|
|
8
|
+
import { SubmitHandler, UseFormProps, FieldValues, FieldErrors, FieldPath, FieldError } from 'react-hook-form';
|
|
9
|
+
export { ControllerRenderProps, Field, FieldArrayWithId, FieldError, FieldErrors, FieldPath, FieldValues, FormProvider, Path, UseControllerProps, UseControllerReturn, UseFieldArrayMove, UseFieldArrayProps, UseFieldArrayRemove, UseFieldArrayReturn, UseFieldArrayUpdate, UseFormGetValues, UseFormProps, UseFormReset, UseFormReturn, useController, useFieldArray, useFormState, useWatch } from 'react-hook-form';
|
|
10
|
+
import { z } from 'zod';
|
|
11
|
+
import * as _radix_ui_react_dropdown_menu from '@radix-ui/react-dropdown-menu';
|
|
12
|
+
import { DropdownMenuProps, DropdownMenuContentProps, DropdownMenuItemProps } from '@radix-ui/react-dropdown-menu';
|
|
13
|
+
import { DialogContentProps } from '@radix-ui/react-dialog';
|
|
14
|
+
import * as RadixTooltip from '@radix-ui/react-tooltip';
|
|
15
|
+
import { PhoneInputProps } from 'react-international-phone';
|
|
16
|
+
export { getCountry } from 'react-international-phone';
|
|
17
|
+
import * as RadixPopover from '@radix-ui/react-popover';
|
|
18
|
+
import * as RadixSwitch from '@radix-ui/react-switch';
|
|
19
|
+
import * as _tanstack_react_table from '@tanstack/react-table';
|
|
20
|
+
import { Table as Table$1, TableOptions, ColumnSort, Row } from '@tanstack/react-table';
|
|
21
|
+
import { TabsContentProps, TabsProps as TabsProps$1, TabsListProps } from '@radix-ui/react-tabs';
|
|
22
|
+
|
|
23
|
+
type Size = "xs" | "sm" | "md" | "lg";
|
|
24
|
+
type Intent = "primary" | "default" | "danger" | "warning" | "success";
|
|
25
|
+
type Justify = "start" | "center" | "end" | "between" | "around";
|
|
26
|
+
type Soften = "left" | "right" | "both" | "none";
|
|
27
|
+
type Variant$1 = "default" | "transparent" | "dark";
|
|
28
|
+
|
|
29
|
+
declare const linkStyles = "text-indigo-600 hover:underline active:text-indigo-400 focus:outline-indigo-400 focus:outline-offset-2";
|
|
30
|
+
type ButtonSize = Extract<Size, "xs" | "sm" | "md" | "lg">;
|
|
31
|
+
type ButtonIntent = Extract<Intent, "primary" | "default" | "danger"> | "error";
|
|
32
|
+
type ButtonRoundedness = "default" | "large";
|
|
33
|
+
type ButtonStyleProps = {
|
|
34
|
+
fullWidth?: boolean;
|
|
35
|
+
size?: ButtonSize;
|
|
36
|
+
intent?: ButtonIntent;
|
|
37
|
+
variant?: Variant$1 | "link";
|
|
38
|
+
disabled?: boolean;
|
|
39
|
+
loading?: boolean;
|
|
40
|
+
soften?: Soften;
|
|
41
|
+
roundedness?: ButtonRoundedness;
|
|
42
|
+
};
|
|
43
|
+
declare const buttonStyles: ({ fullWidth, size, intent, variant, soften, loading, roundedness, }: Omit<ButtonStyleProps, "disabled">) => string;
|
|
44
|
+
|
|
45
|
+
type ButtonProps = Simplify<ButtonStyleProps & React$1.ComponentPropsWithoutRef<"button">>;
|
|
46
|
+
declare const Button: React$1.ForwardRefExoticComponent<{
|
|
47
|
+
fullWidth?: boolean | undefined;
|
|
48
|
+
size?: ("xs" | "sm" | "md" | "lg") | undefined;
|
|
49
|
+
intent?: ("primary" | "default" | "danger" | "error") | undefined;
|
|
50
|
+
variant?: (Variant$1 | "link") | undefined;
|
|
51
|
+
disabled?: boolean | undefined;
|
|
52
|
+
loading?: boolean | undefined;
|
|
53
|
+
soften?: Soften | undefined;
|
|
54
|
+
roundedness?: ("default" | "large") | undefined;
|
|
55
|
+
form?: string | undefined | undefined;
|
|
56
|
+
slot?: string | undefined | undefined;
|
|
57
|
+
style?: React$1.CSSProperties | undefined;
|
|
58
|
+
title?: string | undefined | undefined;
|
|
59
|
+
key?: React$1.Key | null | undefined;
|
|
60
|
+
formAction?: string | undefined;
|
|
61
|
+
formEncType?: string | undefined | undefined;
|
|
62
|
+
formMethod?: string | undefined | undefined;
|
|
63
|
+
formNoValidate?: boolean | undefined | undefined;
|
|
64
|
+
formTarget?: string | undefined | undefined;
|
|
65
|
+
name?: string | undefined | undefined;
|
|
66
|
+
type?: "submit" | "reset" | "button" | undefined | undefined;
|
|
67
|
+
value?: string | number | readonly string[] | undefined;
|
|
68
|
+
defaultChecked?: boolean | undefined | undefined;
|
|
69
|
+
defaultValue?: string | number | readonly string[] | undefined;
|
|
70
|
+
suppressContentEditableWarning?: boolean | undefined | undefined;
|
|
71
|
+
suppressHydrationWarning?: boolean | undefined | undefined;
|
|
72
|
+
accessKey?: string | undefined | undefined;
|
|
73
|
+
autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
|
|
74
|
+
autoFocus?: boolean | undefined | undefined;
|
|
75
|
+
className?: string | undefined | undefined;
|
|
76
|
+
contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
|
|
77
|
+
contextMenu?: string | undefined | undefined;
|
|
78
|
+
dir?: string | undefined | undefined;
|
|
79
|
+
draggable?: (boolean | "true" | "false") | undefined;
|
|
80
|
+
enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
|
|
81
|
+
hidden?: boolean | undefined | undefined;
|
|
82
|
+
id?: string | undefined | undefined;
|
|
83
|
+
lang?: string | undefined | undefined;
|
|
84
|
+
nonce?: string | undefined | undefined;
|
|
85
|
+
spellCheck?: (boolean | "true" | "false") | undefined;
|
|
86
|
+
tabIndex?: number | undefined | undefined;
|
|
87
|
+
translate?: "yes" | "no" | undefined | undefined;
|
|
88
|
+
radioGroup?: string | undefined | undefined;
|
|
89
|
+
role?: React$1.AriaRole | undefined;
|
|
90
|
+
about?: string | undefined | undefined;
|
|
91
|
+
content?: string | undefined | undefined;
|
|
92
|
+
datatype?: string | undefined | undefined;
|
|
93
|
+
inlist?: any;
|
|
94
|
+
prefix?: string | undefined | undefined;
|
|
95
|
+
property?: string | undefined | undefined;
|
|
96
|
+
rel?: string | undefined | undefined;
|
|
97
|
+
resource?: string | undefined | undefined;
|
|
98
|
+
rev?: string | undefined | undefined;
|
|
99
|
+
typeof?: string | undefined | undefined;
|
|
100
|
+
vocab?: string | undefined | undefined;
|
|
101
|
+
autoCorrect?: string | undefined | undefined;
|
|
102
|
+
autoSave?: string | undefined | undefined;
|
|
103
|
+
color?: string | undefined | undefined;
|
|
104
|
+
itemProp?: string | undefined | undefined;
|
|
105
|
+
itemScope?: boolean | undefined | undefined;
|
|
106
|
+
itemType?: string | undefined | undefined;
|
|
107
|
+
itemID?: string | undefined | undefined;
|
|
108
|
+
itemRef?: string | undefined | undefined;
|
|
109
|
+
results?: number | undefined | undefined;
|
|
110
|
+
security?: string | undefined | undefined;
|
|
111
|
+
unselectable?: "on" | "off" | undefined | undefined;
|
|
112
|
+
inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
|
|
113
|
+
is?: string | undefined | undefined;
|
|
114
|
+
exportparts?: string | undefined | undefined;
|
|
115
|
+
part?: string | undefined | undefined;
|
|
116
|
+
"aria-activedescendant"?: string | undefined | undefined;
|
|
117
|
+
"aria-atomic"?: (boolean | "true" | "false") | undefined;
|
|
118
|
+
"aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
|
|
119
|
+
"aria-braillelabel"?: string | undefined | undefined;
|
|
120
|
+
"aria-brailleroledescription"?: string | undefined | undefined;
|
|
121
|
+
"aria-busy"?: (boolean | "true" | "false") | undefined;
|
|
122
|
+
"aria-checked"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
|
|
123
|
+
"aria-colcount"?: number | undefined | undefined;
|
|
124
|
+
"aria-colindex"?: number | undefined | undefined;
|
|
125
|
+
"aria-colindextext"?: string | undefined | undefined;
|
|
126
|
+
"aria-colspan"?: number | undefined | undefined;
|
|
127
|
+
"aria-controls"?: string | undefined | undefined;
|
|
128
|
+
"aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined | undefined;
|
|
129
|
+
"aria-describedby"?: string | undefined | undefined;
|
|
130
|
+
"aria-description"?: string | undefined | undefined;
|
|
131
|
+
"aria-details"?: string | undefined | undefined;
|
|
132
|
+
"aria-disabled"?: (boolean | "true" | "false") | undefined;
|
|
133
|
+
"aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined | undefined;
|
|
134
|
+
"aria-errormessage"?: string | undefined | undefined;
|
|
135
|
+
"aria-expanded"?: (boolean | "true" | "false") | undefined;
|
|
136
|
+
"aria-flowto"?: string | undefined | undefined;
|
|
137
|
+
"aria-grabbed"?: (boolean | "true" | "false") | undefined;
|
|
138
|
+
"aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined | undefined;
|
|
139
|
+
"aria-hidden"?: (boolean | "true" | "false") | undefined;
|
|
140
|
+
"aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined | undefined;
|
|
141
|
+
"aria-keyshortcuts"?: string | undefined | undefined;
|
|
142
|
+
"aria-label"?: string | undefined | undefined;
|
|
143
|
+
"aria-labelledby"?: string | undefined | undefined;
|
|
144
|
+
"aria-level"?: number | undefined | undefined;
|
|
145
|
+
"aria-live"?: "off" | "assertive" | "polite" | undefined | undefined;
|
|
146
|
+
"aria-modal"?: (boolean | "true" | "false") | undefined;
|
|
147
|
+
"aria-multiline"?: (boolean | "true" | "false") | undefined;
|
|
148
|
+
"aria-multiselectable"?: (boolean | "true" | "false") | undefined;
|
|
149
|
+
"aria-orientation"?: "horizontal" | "vertical" | undefined | undefined;
|
|
150
|
+
"aria-owns"?: string | undefined | undefined;
|
|
151
|
+
"aria-placeholder"?: string | undefined | undefined;
|
|
152
|
+
"aria-posinset"?: number | undefined | undefined;
|
|
153
|
+
"aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
|
|
154
|
+
"aria-readonly"?: (boolean | "true" | "false") | undefined;
|
|
155
|
+
"aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined | undefined;
|
|
156
|
+
"aria-required"?: (boolean | "true" | "false") | undefined;
|
|
157
|
+
"aria-roledescription"?: string | undefined | undefined;
|
|
158
|
+
"aria-rowcount"?: number | undefined | undefined;
|
|
159
|
+
"aria-rowindex"?: number | undefined | undefined;
|
|
160
|
+
"aria-rowindextext"?: string | undefined | undefined;
|
|
161
|
+
"aria-rowspan"?: number | undefined | undefined;
|
|
162
|
+
"aria-selected"?: (boolean | "true" | "false") | undefined;
|
|
163
|
+
"aria-setsize"?: number | undefined | undefined;
|
|
164
|
+
"aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined | undefined;
|
|
165
|
+
"aria-valuemax"?: number | undefined | undefined;
|
|
166
|
+
"aria-valuemin"?: number | undefined | undefined;
|
|
167
|
+
"aria-valuenow"?: number | undefined | undefined;
|
|
168
|
+
"aria-valuetext"?: string | undefined | undefined;
|
|
169
|
+
children?: React$1.ReactNode;
|
|
170
|
+
dangerouslySetInnerHTML?: {
|
|
171
|
+
__html: string | TrustedHTML;
|
|
172
|
+
} | undefined | undefined;
|
|
173
|
+
onCopy?: React$1.ClipboardEventHandler<HTMLButtonElement> | undefined;
|
|
174
|
+
onCopyCapture?: React$1.ClipboardEventHandler<HTMLButtonElement> | undefined;
|
|
175
|
+
onCut?: React$1.ClipboardEventHandler<HTMLButtonElement> | undefined;
|
|
176
|
+
onCutCapture?: React$1.ClipboardEventHandler<HTMLButtonElement> | undefined;
|
|
177
|
+
onPaste?: React$1.ClipboardEventHandler<HTMLButtonElement> | undefined;
|
|
178
|
+
onPasteCapture?: React$1.ClipboardEventHandler<HTMLButtonElement> | undefined;
|
|
179
|
+
onCompositionEnd?: React$1.CompositionEventHandler<HTMLButtonElement> | undefined;
|
|
180
|
+
onCompositionEndCapture?: React$1.CompositionEventHandler<HTMLButtonElement> | undefined;
|
|
181
|
+
onCompositionStart?: React$1.CompositionEventHandler<HTMLButtonElement> | undefined;
|
|
182
|
+
onCompositionStartCapture?: React$1.CompositionEventHandler<HTMLButtonElement> | undefined;
|
|
183
|
+
onCompositionUpdate?: React$1.CompositionEventHandler<HTMLButtonElement> | undefined;
|
|
184
|
+
onCompositionUpdateCapture?: React$1.CompositionEventHandler<HTMLButtonElement> | undefined;
|
|
185
|
+
onFocus?: React$1.FocusEventHandler<HTMLButtonElement> | undefined;
|
|
186
|
+
onFocusCapture?: React$1.FocusEventHandler<HTMLButtonElement> | undefined;
|
|
187
|
+
onBlur?: React$1.FocusEventHandler<HTMLButtonElement> | undefined;
|
|
188
|
+
onBlurCapture?: React$1.FocusEventHandler<HTMLButtonElement> | undefined;
|
|
189
|
+
onChange?: React$1.FormEventHandler<HTMLButtonElement> | undefined;
|
|
190
|
+
onChangeCapture?: React$1.FormEventHandler<HTMLButtonElement> | undefined;
|
|
191
|
+
onBeforeInput?: React$1.InputEventHandler<HTMLButtonElement> | undefined;
|
|
192
|
+
onBeforeInputCapture?: React$1.FormEventHandler<HTMLButtonElement> | undefined;
|
|
193
|
+
onInput?: React$1.FormEventHandler<HTMLButtonElement> | undefined;
|
|
194
|
+
onInputCapture?: React$1.FormEventHandler<HTMLButtonElement> | undefined;
|
|
195
|
+
onReset?: React$1.FormEventHandler<HTMLButtonElement> | undefined;
|
|
196
|
+
onResetCapture?: React$1.FormEventHandler<HTMLButtonElement> | undefined;
|
|
197
|
+
onSubmit?: React$1.FormEventHandler<HTMLButtonElement> | undefined;
|
|
198
|
+
onSubmitCapture?: React$1.FormEventHandler<HTMLButtonElement> | undefined;
|
|
199
|
+
onInvalid?: React$1.FormEventHandler<HTMLButtonElement> | undefined;
|
|
200
|
+
onInvalidCapture?: React$1.FormEventHandler<HTMLButtonElement> | undefined;
|
|
201
|
+
onLoad?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
202
|
+
onLoadCapture?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
203
|
+
onError?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
204
|
+
onErrorCapture?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
205
|
+
onKeyDown?: React$1.KeyboardEventHandler<HTMLButtonElement> | undefined;
|
|
206
|
+
onKeyDownCapture?: React$1.KeyboardEventHandler<HTMLButtonElement> | undefined;
|
|
207
|
+
onKeyPress?: React$1.KeyboardEventHandler<HTMLButtonElement> | undefined;
|
|
208
|
+
onKeyPressCapture?: React$1.KeyboardEventHandler<HTMLButtonElement> | undefined;
|
|
209
|
+
onKeyUp?: React$1.KeyboardEventHandler<HTMLButtonElement> | undefined;
|
|
210
|
+
onKeyUpCapture?: React$1.KeyboardEventHandler<HTMLButtonElement> | undefined;
|
|
211
|
+
onAbort?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
212
|
+
onAbortCapture?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
213
|
+
onCanPlay?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
214
|
+
onCanPlayCapture?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
215
|
+
onCanPlayThrough?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
216
|
+
onCanPlayThroughCapture?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
217
|
+
onDurationChange?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
218
|
+
onDurationChangeCapture?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
219
|
+
onEmptied?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
220
|
+
onEmptiedCapture?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
221
|
+
onEncrypted?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
222
|
+
onEncryptedCapture?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
223
|
+
onEnded?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
224
|
+
onEndedCapture?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
225
|
+
onLoadedData?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
226
|
+
onLoadedDataCapture?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
227
|
+
onLoadedMetadata?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
228
|
+
onLoadedMetadataCapture?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
229
|
+
onLoadStart?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
230
|
+
onLoadStartCapture?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
231
|
+
onPause?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
232
|
+
onPauseCapture?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
233
|
+
onPlay?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
234
|
+
onPlayCapture?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
235
|
+
onPlaying?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
236
|
+
onPlayingCapture?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
237
|
+
onProgress?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
238
|
+
onProgressCapture?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
239
|
+
onRateChange?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
240
|
+
onRateChangeCapture?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
241
|
+
onSeeked?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
242
|
+
onSeekedCapture?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
243
|
+
onSeeking?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
244
|
+
onSeekingCapture?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
245
|
+
onStalled?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
246
|
+
onStalledCapture?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
247
|
+
onSuspend?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
248
|
+
onSuspendCapture?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
249
|
+
onTimeUpdate?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
250
|
+
onTimeUpdateCapture?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
251
|
+
onVolumeChange?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
252
|
+
onVolumeChangeCapture?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
253
|
+
onWaiting?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
254
|
+
onWaitingCapture?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
255
|
+
onAuxClick?: React$1.MouseEventHandler<HTMLButtonElement> | undefined;
|
|
256
|
+
onAuxClickCapture?: React$1.MouseEventHandler<HTMLButtonElement> | undefined;
|
|
257
|
+
onClick?: React$1.MouseEventHandler<HTMLButtonElement> | undefined;
|
|
258
|
+
onClickCapture?: React$1.MouseEventHandler<HTMLButtonElement> | undefined;
|
|
259
|
+
onContextMenu?: React$1.MouseEventHandler<HTMLButtonElement> | undefined;
|
|
260
|
+
onContextMenuCapture?: React$1.MouseEventHandler<HTMLButtonElement> | undefined;
|
|
261
|
+
onDoubleClick?: React$1.MouseEventHandler<HTMLButtonElement> | undefined;
|
|
262
|
+
onDoubleClickCapture?: React$1.MouseEventHandler<HTMLButtonElement> | undefined;
|
|
263
|
+
onDrag?: React$1.DragEventHandler<HTMLButtonElement> | undefined;
|
|
264
|
+
onDragCapture?: React$1.DragEventHandler<HTMLButtonElement> | undefined;
|
|
265
|
+
onDragEnd?: React$1.DragEventHandler<HTMLButtonElement> | undefined;
|
|
266
|
+
onDragEndCapture?: React$1.DragEventHandler<HTMLButtonElement> | undefined;
|
|
267
|
+
onDragEnter?: React$1.DragEventHandler<HTMLButtonElement> | undefined;
|
|
268
|
+
onDragEnterCapture?: React$1.DragEventHandler<HTMLButtonElement> | undefined;
|
|
269
|
+
onDragExit?: React$1.DragEventHandler<HTMLButtonElement> | undefined;
|
|
270
|
+
onDragExitCapture?: React$1.DragEventHandler<HTMLButtonElement> | undefined;
|
|
271
|
+
onDragLeave?: React$1.DragEventHandler<HTMLButtonElement> | undefined;
|
|
272
|
+
onDragLeaveCapture?: React$1.DragEventHandler<HTMLButtonElement> | undefined;
|
|
273
|
+
onDragOver?: React$1.DragEventHandler<HTMLButtonElement> | undefined;
|
|
274
|
+
onDragOverCapture?: React$1.DragEventHandler<HTMLButtonElement> | undefined;
|
|
275
|
+
onDragStart?: React$1.DragEventHandler<HTMLButtonElement> | undefined;
|
|
276
|
+
onDragStartCapture?: React$1.DragEventHandler<HTMLButtonElement> | undefined;
|
|
277
|
+
onDrop?: React$1.DragEventHandler<HTMLButtonElement> | undefined;
|
|
278
|
+
onDropCapture?: React$1.DragEventHandler<HTMLButtonElement> | undefined;
|
|
279
|
+
onMouseDown?: React$1.MouseEventHandler<HTMLButtonElement> | undefined;
|
|
280
|
+
onMouseDownCapture?: React$1.MouseEventHandler<HTMLButtonElement> | undefined;
|
|
281
|
+
onMouseEnter?: React$1.MouseEventHandler<HTMLButtonElement> | undefined;
|
|
282
|
+
onMouseLeave?: React$1.MouseEventHandler<HTMLButtonElement> | undefined;
|
|
283
|
+
onMouseMove?: React$1.MouseEventHandler<HTMLButtonElement> | undefined;
|
|
284
|
+
onMouseMoveCapture?: React$1.MouseEventHandler<HTMLButtonElement> | undefined;
|
|
285
|
+
onMouseOut?: React$1.MouseEventHandler<HTMLButtonElement> | undefined;
|
|
286
|
+
onMouseOutCapture?: React$1.MouseEventHandler<HTMLButtonElement> | undefined;
|
|
287
|
+
onMouseOver?: React$1.MouseEventHandler<HTMLButtonElement> | undefined;
|
|
288
|
+
onMouseOverCapture?: React$1.MouseEventHandler<HTMLButtonElement> | undefined;
|
|
289
|
+
onMouseUp?: React$1.MouseEventHandler<HTMLButtonElement> | undefined;
|
|
290
|
+
onMouseUpCapture?: React$1.MouseEventHandler<HTMLButtonElement> | undefined;
|
|
291
|
+
onSelect?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
292
|
+
onSelectCapture?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
293
|
+
onTouchCancel?: React$1.TouchEventHandler<HTMLButtonElement> | undefined;
|
|
294
|
+
onTouchCancelCapture?: React$1.TouchEventHandler<HTMLButtonElement> | undefined;
|
|
295
|
+
onTouchEnd?: React$1.TouchEventHandler<HTMLButtonElement> | undefined;
|
|
296
|
+
onTouchEndCapture?: React$1.TouchEventHandler<HTMLButtonElement> | undefined;
|
|
297
|
+
onTouchMove?: React$1.TouchEventHandler<HTMLButtonElement> | undefined;
|
|
298
|
+
onTouchMoveCapture?: React$1.TouchEventHandler<HTMLButtonElement> | undefined;
|
|
299
|
+
onTouchStart?: React$1.TouchEventHandler<HTMLButtonElement> | undefined;
|
|
300
|
+
onTouchStartCapture?: React$1.TouchEventHandler<HTMLButtonElement> | undefined;
|
|
301
|
+
onPointerDown?: React$1.PointerEventHandler<HTMLButtonElement> | undefined;
|
|
302
|
+
onPointerDownCapture?: React$1.PointerEventHandler<HTMLButtonElement> | undefined;
|
|
303
|
+
onPointerMove?: React$1.PointerEventHandler<HTMLButtonElement> | undefined;
|
|
304
|
+
onPointerMoveCapture?: React$1.PointerEventHandler<HTMLButtonElement> | undefined;
|
|
305
|
+
onPointerUp?: React$1.PointerEventHandler<HTMLButtonElement> | undefined;
|
|
306
|
+
onPointerUpCapture?: React$1.PointerEventHandler<HTMLButtonElement> | undefined;
|
|
307
|
+
onPointerCancel?: React$1.PointerEventHandler<HTMLButtonElement> | undefined;
|
|
308
|
+
onPointerCancelCapture?: React$1.PointerEventHandler<HTMLButtonElement> | undefined;
|
|
309
|
+
onPointerEnter?: React$1.PointerEventHandler<HTMLButtonElement> | undefined;
|
|
310
|
+
onPointerLeave?: React$1.PointerEventHandler<HTMLButtonElement> | undefined;
|
|
311
|
+
onPointerOver?: React$1.PointerEventHandler<HTMLButtonElement> | undefined;
|
|
312
|
+
onPointerOverCapture?: React$1.PointerEventHandler<HTMLButtonElement> | undefined;
|
|
313
|
+
onPointerOut?: React$1.PointerEventHandler<HTMLButtonElement> | undefined;
|
|
314
|
+
onPointerOutCapture?: React$1.PointerEventHandler<HTMLButtonElement> | undefined;
|
|
315
|
+
onGotPointerCapture?: React$1.PointerEventHandler<HTMLButtonElement> | undefined;
|
|
316
|
+
onGotPointerCaptureCapture?: React$1.PointerEventHandler<HTMLButtonElement> | undefined;
|
|
317
|
+
onLostPointerCapture?: React$1.PointerEventHandler<HTMLButtonElement> | undefined;
|
|
318
|
+
onLostPointerCaptureCapture?: React$1.PointerEventHandler<HTMLButtonElement> | undefined;
|
|
319
|
+
onScroll?: React$1.UIEventHandler<HTMLButtonElement> | undefined;
|
|
320
|
+
onScrollCapture?: React$1.UIEventHandler<HTMLButtonElement> | undefined;
|
|
321
|
+
onWheel?: React$1.WheelEventHandler<HTMLButtonElement> | undefined;
|
|
322
|
+
onWheelCapture?: React$1.WheelEventHandler<HTMLButtonElement> | undefined;
|
|
323
|
+
onAnimationStart?: React$1.AnimationEventHandler<HTMLButtonElement> | undefined;
|
|
324
|
+
onAnimationStartCapture?: React$1.AnimationEventHandler<HTMLButtonElement> | undefined;
|
|
325
|
+
onAnimationEnd?: React$1.AnimationEventHandler<HTMLButtonElement> | undefined;
|
|
326
|
+
onAnimationEndCapture?: React$1.AnimationEventHandler<HTMLButtonElement> | undefined;
|
|
327
|
+
onAnimationIteration?: React$1.AnimationEventHandler<HTMLButtonElement> | undefined;
|
|
328
|
+
onAnimationIterationCapture?: React$1.AnimationEventHandler<HTMLButtonElement> | undefined;
|
|
329
|
+
onTransitionEnd?: React$1.TransitionEventHandler<HTMLButtonElement> | undefined;
|
|
330
|
+
onTransitionEndCapture?: React$1.TransitionEventHandler<HTMLButtonElement> | undefined;
|
|
331
|
+
} & React$1.RefAttributes<HTMLButtonElement>>;
|
|
332
|
+
|
|
333
|
+
type ButtonGroupProps<TValue extends string | number> = {
|
|
334
|
+
size?: ButtonProps["size"];
|
|
335
|
+
value: TValue;
|
|
336
|
+
onChange: (value: TValue) => void;
|
|
337
|
+
buttons: readonly {
|
|
338
|
+
content: React.ReactNode;
|
|
339
|
+
value: TValue;
|
|
340
|
+
}[];
|
|
341
|
+
};
|
|
342
|
+
declare const ButtonGroup: <TValue extends string | number>({ size, value, onChange, buttons, }: ButtonGroupProps<TValue>) => react_jsx_runtime.JSX.Element;
|
|
343
|
+
|
|
344
|
+
type CalloutIntent = Extract<Intent, "default" | "warning" | "primary" | "danger">;
|
|
345
|
+
type CalloutProps = {
|
|
346
|
+
intent?: CalloutIntent;
|
|
347
|
+
title?: string;
|
|
348
|
+
rightSlot?: React.ReactNode;
|
|
349
|
+
children?: React.ReactNode;
|
|
350
|
+
customIcon?: IconDefinition;
|
|
351
|
+
isAttachedAtBottom?: boolean;
|
|
352
|
+
isCentered?: boolean;
|
|
353
|
+
};
|
|
354
|
+
declare const Callout: ({ title, intent, rightSlot, children, customIcon, isAttachedAtBottom, isCentered, }: CalloutProps) => react_jsx_runtime.JSX.Element;
|
|
355
|
+
|
|
356
|
+
type ErrorProps$1 = {
|
|
357
|
+
hasError?: boolean;
|
|
358
|
+
errorNode?: React.ReactNode;
|
|
359
|
+
};
|
|
360
|
+
type CheckboxProps = InputHTMLAttributes<HTMLInputElement> & ErrorProps$1;
|
|
361
|
+
declare const Checkbox: React$1.ForwardRefExoticComponent<InputHTMLAttributes<HTMLInputElement> & ErrorProps$1 & React$1.RefAttributes<HTMLInputElement>>;
|
|
362
|
+
declare const IndeterminateCheckbox: ({ indeterminate, ...rest }: {
|
|
363
|
+
indeterminate?: boolean;
|
|
364
|
+
} & CheckboxProps) => react_jsx_runtime.JSX.Element;
|
|
365
|
+
|
|
366
|
+
type CollapsibleProps = {
|
|
367
|
+
title: React$1.ReactNode;
|
|
368
|
+
children: React$1.ReactNode;
|
|
369
|
+
defaultOpen?: boolean;
|
|
370
|
+
iconPosition?: "left" | "right" | undefined;
|
|
371
|
+
hideIcon?: boolean;
|
|
372
|
+
open?: boolean;
|
|
373
|
+
setOpen?: (open: boolean) => void;
|
|
374
|
+
triggerClassName?: string;
|
|
375
|
+
};
|
|
376
|
+
declare const Collapsible: ({ title, children, defaultOpen, iconPosition, hideIcon, open: controlledOpen, setOpen: controlledSetOpen, triggerClassName, }: CollapsibleProps) => react_jsx_runtime.JSX.Element;
|
|
377
|
+
|
|
378
|
+
type ToggleButtonProps = ButtonProps;
|
|
379
|
+
type CollapsibleSectionProps = {
|
|
380
|
+
children: React$1.ReactNode;
|
|
381
|
+
defaultOpen?: boolean;
|
|
382
|
+
};
|
|
383
|
+
declare const CollapsibleSection: {
|
|
384
|
+
({ children, defaultOpen }: CollapsibleSectionProps): react_jsx_runtime.JSX.Element;
|
|
385
|
+
ToggleButton: ({ children, ...rest }: ToggleButtonProps) => react_jsx_runtime.JSX.Element;
|
|
386
|
+
Content: ({ children }: {
|
|
387
|
+
children: React$1.ReactNode;
|
|
388
|
+
}) => React$1.ReactNode;
|
|
389
|
+
};
|
|
390
|
+
|
|
391
|
+
type CopyEasyProps = {
|
|
392
|
+
children: React$1.ReactNode;
|
|
393
|
+
value: string | undefined;
|
|
394
|
+
tooltip?: React$1.ReactNode;
|
|
395
|
+
onClick?: () => void;
|
|
396
|
+
asChild?: boolean;
|
|
397
|
+
};
|
|
398
|
+
declare const Copyable: ({ children, value, tooltip, onClick, asChild }: CopyEasyProps) => string | number | boolean | Iterable<React$1.ReactNode> | react_jsx_runtime.JSX.Element | null | undefined;
|
|
399
|
+
|
|
400
|
+
declare const copyToClipboard: (value: string) => Promise<void>;
|
|
401
|
+
declare const useCopyable: () => {
|
|
402
|
+
state: "idle" | "copying" | "copied";
|
|
403
|
+
copy: (value: string | undefined, onClick?: () => void) => Promise<void>;
|
|
404
|
+
};
|
|
405
|
+
|
|
406
|
+
type FalsyValues = false | null | undefined | 0;
|
|
407
|
+
type ClassNameProps = {
|
|
408
|
+
className?: string;
|
|
409
|
+
};
|
|
410
|
+
type ChildrenProps$2 = PropsWithChildren<unknown>;
|
|
411
|
+
type DisabledProps = {
|
|
412
|
+
disabled?: boolean;
|
|
413
|
+
};
|
|
414
|
+
type StylesProps = {
|
|
415
|
+
styles?: string | FalsyValues;
|
|
416
|
+
};
|
|
417
|
+
type PropsWithClassName<T> = T & ClassNameProps;
|
|
418
|
+
type ErrorProps = {
|
|
419
|
+
hasError?: boolean;
|
|
420
|
+
errorNode?: ReactNode;
|
|
421
|
+
};
|
|
422
|
+
type AllAsNever<T> = {
|
|
423
|
+
[P in keyof Partial<T>]: T[P] extends object ? AllAsNever<T[P]> : never;
|
|
424
|
+
};
|
|
425
|
+
declare const RING_COLOR_CLASSNAME = "focus:ring-2 focus:ring-indigo-200";
|
|
426
|
+
|
|
427
|
+
type DatePickerInputProps = InputHTMLAttributes<HTMLInputElement>;
|
|
428
|
+
|
|
429
|
+
type DatePickerSharedProps = Pick<DatePickerProps$1, "inline" | "autoFocus" | "showTimeInput" | "preventOpenOnFocus" | "minDate" | "maxDate" | "disabled"> & {
|
|
430
|
+
inputProps?: DatePickerInputProps;
|
|
431
|
+
placeholder?: string;
|
|
432
|
+
position?: Placement;
|
|
433
|
+
} & ErrorProps;
|
|
434
|
+
|
|
435
|
+
type DatePickerRangeProps = DatePickerSharedProps & {
|
|
436
|
+
value: [Date | undefined, Date | undefined];
|
|
437
|
+
range: true;
|
|
438
|
+
onChange?: (newDate: [Date | undefined, Date | undefined]) => void;
|
|
439
|
+
};
|
|
440
|
+
|
|
441
|
+
type DatePickerSingleProps = DatePickerSharedProps & {
|
|
442
|
+
value: Date | undefined;
|
|
443
|
+
range?: false;
|
|
444
|
+
onChange?: (newDate: Date | undefined) => void;
|
|
445
|
+
};
|
|
446
|
+
|
|
447
|
+
type DatePickerProps = DatePickerSingleProps | DatePickerRangeProps;
|
|
448
|
+
declare const DatePicker: (props: DatePickerProps) => react_jsx_runtime.JSX.Element;
|
|
449
|
+
|
|
450
|
+
type DividerProps = ClassNameProps;
|
|
451
|
+
declare const Divider: ({ className }: DividerProps) => react_jsx_runtime.JSX.Element;
|
|
452
|
+
|
|
453
|
+
/** ErrorText will return `null` if `children` is falsy */
|
|
454
|
+
declare const ErrorText: React__default.ForwardRefExoticComponent<Omit<React__default.DetailedHTMLProps<React__default.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
|
|
455
|
+
className?: string;
|
|
456
|
+
} & React__default.RefAttributes<HTMLParagraphElement>>;
|
|
457
|
+
|
|
458
|
+
type FormSchema = z.ZodTypeAny;
|
|
459
|
+
type OnSubmitHandler<T extends FormSchema> = SubmitHandler<z.infer<T>>;
|
|
460
|
+
type GetEventHandlers<T extends keyof JSX.IntrinsicElements> = Extract<keyof JSX.IntrinsicElements[T], `on${string}`>;
|
|
461
|
+
/**
|
|
462
|
+
* Provides the event type for a given element and handler.
|
|
463
|
+
*
|
|
464
|
+
* @example
|
|
465
|
+
*
|
|
466
|
+
* type MyEvent = EventFor<"input", "onChange">;
|
|
467
|
+
*/
|
|
468
|
+
type EventFor<TElement extends keyof JSX.IntrinsicElements, THandler extends GetEventHandlers<TElement>> = JSX.IntrinsicElements[TElement][THandler] extends ((e: infer TEvent) => any) | undefined ? TEvent : never;
|
|
469
|
+
|
|
470
|
+
type UseFormOptions<TSchema extends FormSchema> = Pick<UseFormProps<z.infer<TSchema>>, "defaultValues" | "shouldUnregister" | "values" | "reValidateMode">;
|
|
471
|
+
type FormFieldNameProps = {
|
|
472
|
+
name: string;
|
|
473
|
+
};
|
|
474
|
+
type UncontrolledFormFieldProps = FormFieldNameProps & {
|
|
475
|
+
onChange?: (e: EventFor<"input" | "textarea", "onChange">) => void;
|
|
476
|
+
onBlur?: (e: EventFor<"input" | "textarea", "onBlur">) => void;
|
|
477
|
+
};
|
|
478
|
+
declare const useForm: {
|
|
479
|
+
<T extends FormSchema>(schema: T, options?: UseFormOptions<T>): {
|
|
480
|
+
setRootError: (message: string) => void;
|
|
481
|
+
watch: react_hook_form.UseFormWatch<z.TypeOf<T>>;
|
|
482
|
+
getValues: react_hook_form.UseFormGetValues<z.TypeOf<T>>;
|
|
483
|
+
getFieldState: react_hook_form.UseFormGetFieldState<z.TypeOf<T>>;
|
|
484
|
+
setError: react_hook_form.UseFormSetError<z.TypeOf<T>>;
|
|
485
|
+
clearErrors: react_hook_form.UseFormClearErrors<z.TypeOf<T>>;
|
|
486
|
+
setValue: react_hook_form.UseFormSetValue<z.TypeOf<T>>;
|
|
487
|
+
trigger: react_hook_form.UseFormTrigger<z.TypeOf<T>>;
|
|
488
|
+
formState: react_hook_form.FormState<z.TypeOf<T>>;
|
|
489
|
+
resetField: react_hook_form.UseFormResetField<z.TypeOf<T>>;
|
|
490
|
+
reset: react_hook_form.UseFormReset<z.TypeOf<T>>;
|
|
491
|
+
handleSubmit: react_hook_form.UseFormHandleSubmit<z.TypeOf<T>, z.TypeOf<T>>;
|
|
492
|
+
unregister: react_hook_form.UseFormUnregister<z.TypeOf<T>>;
|
|
493
|
+
control: react_hook_form.Control<z.TypeOf<T>, any, z.TypeOf<T>>;
|
|
494
|
+
register: react_hook_form.UseFormRegister<z.TypeOf<T>>;
|
|
495
|
+
setFocus: react_hook_form.UseFormSetFocus<z.TypeOf<T>>;
|
|
496
|
+
subscribe: react_hook_form.UseFormSubscribe<z.TypeOf<T>>;
|
|
497
|
+
};
|
|
498
|
+
displayName: string;
|
|
499
|
+
};
|
|
500
|
+
declare const useFormContext: {
|
|
501
|
+
<T extends FieldValues>(): {
|
|
502
|
+
setRootError: (message: string) => void;
|
|
503
|
+
watch: react_hook_form.UseFormWatch<T>;
|
|
504
|
+
getValues: react_hook_form.UseFormGetValues<T>;
|
|
505
|
+
getFieldState: react_hook_form.UseFormGetFieldState<T>;
|
|
506
|
+
setError: react_hook_form.UseFormSetError<T>;
|
|
507
|
+
clearErrors: react_hook_form.UseFormClearErrors<T>;
|
|
508
|
+
setValue: react_hook_form.UseFormSetValue<T>;
|
|
509
|
+
trigger: react_hook_form.UseFormTrigger<T>;
|
|
510
|
+
formState: react_hook_form.FormState<T>;
|
|
511
|
+
resetField: react_hook_form.UseFormResetField<T>;
|
|
512
|
+
reset: react_hook_form.UseFormReset<T>;
|
|
513
|
+
handleSubmit: react_hook_form.UseFormHandleSubmit<T, T>;
|
|
514
|
+
unregister: react_hook_form.UseFormUnregister<T>;
|
|
515
|
+
control: react_hook_form.Control<T, any, T>;
|
|
516
|
+
register: react_hook_form.UseFormRegister<T>;
|
|
517
|
+
setFocus: react_hook_form.UseFormSetFocus<T>;
|
|
518
|
+
subscribe: react_hook_form.UseFormSubscribe<T>;
|
|
519
|
+
};
|
|
520
|
+
displayName: string;
|
|
521
|
+
};
|
|
522
|
+
declare const useControlledFormField: {
|
|
523
|
+
({ name: fieldName }: FormFieldNameProps): {
|
|
524
|
+
error: react_hook_form.FieldError | undefined;
|
|
525
|
+
onChange: (...event: any[]) => void;
|
|
526
|
+
onBlur: react_hook_form.Noop;
|
|
527
|
+
value: any;
|
|
528
|
+
disabled?: boolean;
|
|
529
|
+
name: string;
|
|
530
|
+
ref: react_hook_form.RefCallBack;
|
|
531
|
+
};
|
|
532
|
+
displayName: string;
|
|
533
|
+
};
|
|
534
|
+
declare const useUncontrolledFormField: {
|
|
535
|
+
({ name: fieldName, ...changeHandlers }: UncontrolledFormFieldProps): {
|
|
536
|
+
register: () => {
|
|
537
|
+
onChange: ((event: EventFor<"input" | "textarea", "onChange">) => Promise<void>) | react_hook_form.ChangeHandler;
|
|
538
|
+
onBlur: react_hook_form.ChangeHandler | ((event: EventFor<"input" | "textarea", "onBlur">) => Promise<void>);
|
|
539
|
+
ref: react_hook_form.RefCallBack;
|
|
540
|
+
name: string;
|
|
541
|
+
min?: string | number;
|
|
542
|
+
max?: string | number;
|
|
543
|
+
maxLength?: number;
|
|
544
|
+
minLength?: number;
|
|
545
|
+
pattern?: string;
|
|
546
|
+
required?: boolean;
|
|
547
|
+
disabled?: boolean;
|
|
548
|
+
};
|
|
549
|
+
error: react_hook_form.FieldError | undefined;
|
|
550
|
+
};
|
|
551
|
+
displayName: string;
|
|
552
|
+
};
|
|
553
|
+
|
|
554
|
+
declare const ControlledFieldProvider: {
|
|
555
|
+
({ children, ...restField }: FormFieldNameProps & PropsWithChildren): react_jsx_runtime.JSX.Element;
|
|
556
|
+
displayName: string;
|
|
557
|
+
};
|
|
558
|
+
declare const useControlledField: {
|
|
559
|
+
(): {
|
|
560
|
+
error: react_hook_form.FieldError | undefined;
|
|
561
|
+
onChange: (...event: any[]) => void;
|
|
562
|
+
onBlur: react_hook_form.Noop;
|
|
563
|
+
value: any;
|
|
564
|
+
disabled?: boolean;
|
|
565
|
+
name: string;
|
|
566
|
+
ref: react_hook_form.RefCallBack;
|
|
567
|
+
};
|
|
568
|
+
displayName: string;
|
|
569
|
+
};
|
|
570
|
+
type ControlledFieldProps = FormFieldNameProps & {
|
|
571
|
+
render: (props: ReturnType<typeof useControlledFormField>) => React.ReactNode;
|
|
572
|
+
};
|
|
573
|
+
declare const ControlledField: {
|
|
574
|
+
({ render, ...restField }: ControlledFieldProps): react_jsx_runtime.JSX.Element;
|
|
575
|
+
displayName: string;
|
|
576
|
+
};
|
|
577
|
+
|
|
578
|
+
declare const UncontrolledFieldProvider: {
|
|
579
|
+
({ children, ...restField }: UncontrolledFormFieldProps & PropsWithChildren): react_jsx_runtime.JSX.Element;
|
|
580
|
+
displayName: string;
|
|
581
|
+
};
|
|
582
|
+
declare const useUncontrolledField: {
|
|
583
|
+
(): {
|
|
584
|
+
register: () => {
|
|
585
|
+
onChange: ((event: EventFor<"input" | "textarea", "onChange">) => Promise<void>) | react_hook_form.ChangeHandler;
|
|
586
|
+
onBlur: react_hook_form.ChangeHandler | ((event: EventFor<"input" | "textarea", "onBlur">) => Promise<void>);
|
|
587
|
+
ref: react_hook_form.RefCallBack;
|
|
588
|
+
name: string;
|
|
589
|
+
min?: string | number;
|
|
590
|
+
max?: string | number;
|
|
591
|
+
maxLength?: number;
|
|
592
|
+
minLength?: number;
|
|
593
|
+
pattern?: string;
|
|
594
|
+
required?: boolean;
|
|
595
|
+
disabled?: boolean;
|
|
596
|
+
};
|
|
597
|
+
error: react_hook_form.FieldError | undefined;
|
|
598
|
+
};
|
|
599
|
+
displayName: string;
|
|
600
|
+
};
|
|
601
|
+
type UncontrolledFieldProps = UncontrolledFormFieldProps & {
|
|
602
|
+
render: (props: ReturnType<typeof useUncontrolledFormField>) => React.ReactNode;
|
|
603
|
+
};
|
|
604
|
+
declare const UncontrolledField: {
|
|
605
|
+
({ render, ...restField }: UncontrolledFieldProps): react_jsx_runtime.JSX.Element;
|
|
606
|
+
displayName: string;
|
|
607
|
+
};
|
|
608
|
+
|
|
609
|
+
declare const getFieldError: <TFieldValues extends FieldValues>(errors: FieldErrors<TFieldValues> | undefined, name: FieldPath<TFieldValues> | undefined) => FieldError | undefined;
|
|
610
|
+
|
|
611
|
+
type InputSize = Extract<Size, "sm" | "md" | "lg">;
|
|
612
|
+
type InputVariants = "default" | "transparent";
|
|
613
|
+
type InputBoxStyleProps = {
|
|
614
|
+
size?: InputSize;
|
|
615
|
+
variant?: InputVariants;
|
|
616
|
+
hasError?: boolean;
|
|
617
|
+
hasWarning?: boolean;
|
|
618
|
+
};
|
|
619
|
+
declare const inputBoxStyles: ({ size, variant, hasError, hasWarning }: InputBoxStyleProps) => string;
|
|
620
|
+
declare const inputStyles = "w-full text-gray-800 placeholder:text-gray-400 disabled:text-gray-400";
|
|
621
|
+
|
|
622
|
+
type InputBoxProps = InputBoxStyleProps & {
|
|
623
|
+
children: React$1.ReactNode;
|
|
624
|
+
};
|
|
625
|
+
type InputBaseProps = React$1.ComponentPropsWithoutRef<"input">;
|
|
626
|
+
declare const NestedInput: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
|
|
627
|
+
type CompoundInputBox = React$1.ForwardRefExoticComponent<InputBoxProps & React$1.RefAttributes<HTMLLabelElement>> & {
|
|
628
|
+
Input: typeof NestedInput;
|
|
629
|
+
};
|
|
630
|
+
declare const InputBox: CompoundInputBox;
|
|
631
|
+
type InputProps = InputBoxStyleProps & InputBaseProps;
|
|
632
|
+
declare const Input: React$1.ForwardRefExoticComponent<InputBoxStyleProps & Omit<React$1.DetailedHTMLProps<React$1.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
|
|
633
|
+
|
|
634
|
+
type FormItemVariants = "none" | "stacked" | "side-by-side" | "inline";
|
|
635
|
+
type InfoTooltip = {
|
|
636
|
+
tooltip: string | undefined;
|
|
637
|
+
tooltipLabel?: string;
|
|
638
|
+
tooltipIcon?: React.ReactNode;
|
|
639
|
+
} | {
|
|
640
|
+
tooltip?: never;
|
|
641
|
+
tooltipLabel?: never;
|
|
642
|
+
tooltipIcon?: never;
|
|
643
|
+
};
|
|
644
|
+
type ItemOptions = InfoTooltip & {
|
|
645
|
+
optionalLabel?: boolean;
|
|
646
|
+
description?: React.ReactNode;
|
|
647
|
+
inlineLabelEndSlot?: React.ReactNode;
|
|
648
|
+
bottomSlot?: React.ReactNode;
|
|
649
|
+
};
|
|
650
|
+
type SharedFormItemProps = {
|
|
651
|
+
label?: React.ReactNode;
|
|
652
|
+
options?: ItemOptions;
|
|
653
|
+
};
|
|
654
|
+
|
|
655
|
+
type SharedFormControlProps = StylesProps & {
|
|
656
|
+
name: string;
|
|
657
|
+
layout?: FormItemVariants;
|
|
658
|
+
disabled?: boolean;
|
|
659
|
+
};
|
|
660
|
+
type CommonSelectProps = "items" | "hideSearch" | "triggerPlaceholder" | "onChange" | "disabled";
|
|
661
|
+
|
|
662
|
+
type FormInputProps = SharedFormControlProps & SharedFormItemProps & Pick<UncontrolledFormFieldProps, "onChange" | "onBlur"> & Pick<InputProps, "placeholder" | "variant" | "prefix" | "type" | "step" | "autoFocus" | "min" | "max">;
|
|
663
|
+
declare const FormInput: ({ name, styles, layout, label, options, onChange, onBlur, disabled, ...rest }: FormInputProps) => react_jsx_runtime.JSX.Element;
|
|
664
|
+
|
|
665
|
+
type DollarInputProps = {
|
|
666
|
+
value: number | null | undefined;
|
|
667
|
+
onChange?: (cents: number | null | undefined) => void;
|
|
668
|
+
disabled?: boolean;
|
|
669
|
+
hasError?: boolean;
|
|
670
|
+
hasWarning?: boolean;
|
|
671
|
+
message?: string;
|
|
672
|
+
};
|
|
673
|
+
/**
|
|
674
|
+
* DollarInput component for displaying and editing a monetary value.
|
|
675
|
+
*
|
|
676
|
+
* Exposes `cents` to consuming components, which is the value in cents.
|
|
677
|
+
*/
|
|
678
|
+
declare const DollarInput: React$1.ForwardRefExoticComponent<DollarInputProps & React$1.RefAttributes<HTMLInputElement>>;
|
|
679
|
+
declare const FormDollarInput: React$1.ForwardRefExoticComponent<StylesProps & {
|
|
680
|
+
name: string;
|
|
681
|
+
layout?: FormItemVariants;
|
|
682
|
+
disabled?: boolean;
|
|
683
|
+
} & SharedFormItemProps & {
|
|
684
|
+
onChange?: (cents: number | null | undefined) => void;
|
|
685
|
+
} & Pick<DollarInputProps, "message" | "hasWarning"> & React$1.RefAttributes<HTMLInputElement>>;
|
|
686
|
+
|
|
687
|
+
type PercentInputProps = {
|
|
688
|
+
value: number | null | undefined;
|
|
689
|
+
onChange?: (percent: number | null | undefined) => void;
|
|
690
|
+
disabled?: boolean;
|
|
691
|
+
hasError?: boolean;
|
|
692
|
+
hasWarning?: boolean;
|
|
693
|
+
message?: string;
|
|
694
|
+
};
|
|
695
|
+
/**
|
|
696
|
+
* PercentInput component for displaying and editing a percentage value.
|
|
697
|
+
*
|
|
698
|
+
* Exposes `percent` to consuming components, which is the value as a number (0-100).
|
|
699
|
+
*/
|
|
700
|
+
declare const PercentInput: React$1.ForwardRefExoticComponent<PercentInputProps & React$1.RefAttributes<HTMLInputElement>>;
|
|
701
|
+
declare const FormPercentInput: React$1.ForwardRefExoticComponent<StylesProps & {
|
|
702
|
+
name: string;
|
|
703
|
+
layout?: FormItemVariants;
|
|
704
|
+
disabled?: boolean;
|
|
705
|
+
} & SharedFormItemProps & {
|
|
706
|
+
onChange?: (percent: number | null | undefined) => void;
|
|
707
|
+
} & Pick<PercentInputProps, "message" | "hasWarning"> & React$1.RefAttributes<HTMLInputElement>>;
|
|
708
|
+
|
|
709
|
+
type FormCheckboxProps = Pick<SharedFormControlProps, "name" | "disabled"> & {
|
|
710
|
+
children?: React.ReactNode;
|
|
711
|
+
onChange?: (checked: boolean) => void;
|
|
712
|
+
};
|
|
713
|
+
declare const FormCheckbox: {
|
|
714
|
+
({ name, disabled, onChange: propsOnChange, children }: FormCheckboxProps): react_jsx_runtime.JSX.Element;
|
|
715
|
+
Label: typeof LabelImpl;
|
|
716
|
+
Checkbox: typeof CheckboxImpl;
|
|
717
|
+
};
|
|
718
|
+
declare function CheckboxImpl({ onChange: propsOnChange }: {
|
|
719
|
+
onChange?: (checked: boolean) => void;
|
|
720
|
+
}): react_jsx_runtime.JSX.Element;
|
|
721
|
+
declare function LabelImpl({ children, className }: {
|
|
722
|
+
children: React.ReactNode;
|
|
723
|
+
className?: string;
|
|
724
|
+
}): react_jsx_runtime.JSX.Element;
|
|
725
|
+
|
|
726
|
+
type SelectValue = string | number;
|
|
727
|
+
/**
|
|
728
|
+
* An item in a Select component. This could represent an available option, or a selected value.
|
|
729
|
+
*/
|
|
730
|
+
type SelectItem<TValue extends SelectValue = string> = {
|
|
731
|
+
/**
|
|
732
|
+
* The value of the option. Must be unique and extend either string or number.
|
|
733
|
+
*/
|
|
734
|
+
value: TValue;
|
|
735
|
+
/**
|
|
736
|
+
* Label to show in the select dropdown and trigger.
|
|
737
|
+
*/
|
|
738
|
+
label: string;
|
|
739
|
+
/**
|
|
740
|
+
* Optional unique key for React rendering. Use when value may not be unique.
|
|
741
|
+
* Falls back to value if not provided.
|
|
742
|
+
*/
|
|
743
|
+
reactKey?: string;
|
|
744
|
+
/**
|
|
745
|
+
* Optional React node to show in the select dropdown, but not in the trigger.
|
|
746
|
+
*/
|
|
747
|
+
display?: React.ReactNode;
|
|
748
|
+
icon?: React.ReactNode;
|
|
749
|
+
disabled?: boolean;
|
|
750
|
+
/**
|
|
751
|
+
* Predicate to determine if the option matches a query.
|
|
752
|
+
* Default is to match if the lowercase label contains the lowercase query.
|
|
753
|
+
* @param query search query
|
|
754
|
+
* @returns whether the option matches the query
|
|
755
|
+
*/
|
|
756
|
+
isMatch?: (query: string) => boolean;
|
|
757
|
+
};
|
|
758
|
+
/**
|
|
759
|
+
* Returns true if the option matches the query.
|
|
760
|
+
* @param option
|
|
761
|
+
* @param query
|
|
762
|
+
* @returns
|
|
763
|
+
*/
|
|
764
|
+
declare function doesSelectItemMatch<T extends SelectValue>(option: SelectItem<T>, query: string | undefined): boolean;
|
|
765
|
+
|
|
766
|
+
declare const DEFAULT_NUM_VALUES_TO_SHOW = 2;
|
|
767
|
+
/**
|
|
768
|
+
* Props to control the loading and error states of an AsyncSelect component.
|
|
769
|
+
*/
|
|
770
|
+
type LoadProps = {
|
|
771
|
+
isLoading: boolean;
|
|
772
|
+
isError: boolean;
|
|
773
|
+
canLoadMore: boolean;
|
|
774
|
+
onLoadMore: () => void;
|
|
775
|
+
};
|
|
776
|
+
/**
|
|
777
|
+
* Props for the AsyncMultiSelect component, the most unopinionated of the Select components and the base
|
|
778
|
+
* of all the others.
|
|
779
|
+
*/
|
|
780
|
+
type AsyncMultiSelectProps<T extends SelectValue> = {
|
|
781
|
+
value?: T[];
|
|
782
|
+
onChange?: (value: T[]) => void;
|
|
783
|
+
disabled?: boolean;
|
|
784
|
+
triggerPlaceholder?: string;
|
|
785
|
+
variant?: "default" | "simple";
|
|
786
|
+
/**
|
|
787
|
+
* Number of selected values to show by default. If more than this number are selected, the select will
|
|
788
|
+
* render a button to expand the list. Defaults to {@link DEFAULT_NUM_VALUES_TO_SHOW}.
|
|
789
|
+
*/
|
|
790
|
+
numValuesToShow?: number;
|
|
791
|
+
/**
|
|
792
|
+
* If true, this select will strictly enforce ordering of the items. Items added first will
|
|
793
|
+
* be displayed first, and the user can reorder items by dragging them. Defaults to false.
|
|
794
|
+
*/
|
|
795
|
+
ordered?: boolean;
|
|
796
|
+
/**
|
|
797
|
+
* Hide the search field. Defaults to false. Recommended only for Selects with a small number of items.
|
|
798
|
+
*/
|
|
799
|
+
hideSearch?: boolean;
|
|
800
|
+
searchPlaceholder?: string;
|
|
801
|
+
/**
|
|
802
|
+
* Callback when the user types in the input field.
|
|
803
|
+
*/
|
|
804
|
+
onSearchChange?: (query: string) => void;
|
|
805
|
+
/**
|
|
806
|
+
* All items that the Select knows about, for both selected and unselected values.
|
|
807
|
+
*
|
|
808
|
+
* This list should eventually include items for ALL values that are selected,
|
|
809
|
+
* including custom values. *The component will render a loading state until then.*
|
|
810
|
+
*
|
|
811
|
+
* This list may not necessarily include all available items, e.g., if the user
|
|
812
|
+
* is searching or if the list is paginated.
|
|
813
|
+
*/
|
|
814
|
+
items: SelectItem<T>[];
|
|
815
|
+
/**
|
|
816
|
+
* Optional props to control the loading and error states of the AsyncMultiSelect, which can add item(s)
|
|
817
|
+
* to the bottom of the dropdown that convey and control this state.
|
|
818
|
+
*/
|
|
819
|
+
loadProps?: LoadProps;
|
|
820
|
+
/**
|
|
821
|
+
* Min number of items that must be selected. Defaults to 0. If 1, the user cannot
|
|
822
|
+
* unselect the last item.
|
|
823
|
+
*/
|
|
824
|
+
minSelection?: 0 | 1;
|
|
825
|
+
/**
|
|
826
|
+
* Max number of items that can be selected. Defaults to unlimited.
|
|
827
|
+
*/
|
|
828
|
+
maxSelection?: number | "unlimited";
|
|
829
|
+
/**
|
|
830
|
+
* If true, the user can enter custom values. Defaults to false.
|
|
831
|
+
* Can only be true if T is string.
|
|
832
|
+
*/
|
|
833
|
+
allowCustomValues?: T extends string ? boolean : false;
|
|
834
|
+
isValidCustomValue?: (value: string) => boolean;
|
|
835
|
+
/**
|
|
836
|
+
* What to do when "Select all" is clicked (only shown if there are no items selected).
|
|
837
|
+
* If not provided, no "Select all" button will be shown.
|
|
838
|
+
*/
|
|
839
|
+
onSelectAll?: () => void;
|
|
840
|
+
hasError?: boolean;
|
|
841
|
+
popover?: {
|
|
842
|
+
customTrigger?: React.ReactNode;
|
|
843
|
+
contentClassName?: string;
|
|
844
|
+
triggerClassName?: string;
|
|
845
|
+
container?: Element;
|
|
846
|
+
};
|
|
847
|
+
emptyState?: React.ReactNode;
|
|
848
|
+
size?: "sm" | "md" | "lg";
|
|
849
|
+
onOpen?: () => void;
|
|
850
|
+
onClose?: () => void;
|
|
851
|
+
};
|
|
852
|
+
/**
|
|
853
|
+
* Props for the AsyncSelect component, which is a wrapper around AsyncMultiSelect that only allows
|
|
854
|
+
* a single item to be selected.
|
|
855
|
+
*/
|
|
856
|
+
type UnselectableProps<T extends SelectValue> = {
|
|
857
|
+
value?: T;
|
|
858
|
+
onChange?: (value: T | undefined) => void;
|
|
859
|
+
allowUnselect: boolean;
|
|
860
|
+
};
|
|
861
|
+
type NotUnselectableProps<T extends SelectValue> = {
|
|
862
|
+
value?: T;
|
|
863
|
+
onChange?: (value: T) => void;
|
|
864
|
+
allowUnselect?: false;
|
|
865
|
+
};
|
|
866
|
+
type AsyncSelectProps<T extends SelectValue> = Simplify<(UnselectableProps<T> | NotUnselectableProps<T>) & Omit<AsyncMultiSelectProps<T>, "value" | "onChange" | "minSelection" | "maxSelection" | "onSelectAll">>;
|
|
867
|
+
/**
|
|
868
|
+
* Props for the MultiSelect component, which is a wrapper around AsyncMultiSelect that does not
|
|
869
|
+
* require async loading (and assumes that all options are always available).
|
|
870
|
+
*/
|
|
871
|
+
type MultiSelectProps<T extends SelectValue> = {
|
|
872
|
+
/**
|
|
873
|
+
* A function for creating a select option given a custom value. This is used to render
|
|
874
|
+
* the selected items both in the trigger and in the dropdown.
|
|
875
|
+
*/
|
|
876
|
+
customValueToOption?: string extends T ? (value: string) => SelectItem<T> : never;
|
|
877
|
+
} & Omit<AsyncMultiSelectProps<T>, "debounceMs">;
|
|
878
|
+
/**
|
|
879
|
+
* Props for the Select component, which is a wrapper around MultiSelect that only allows
|
|
880
|
+
* a single item to be selected.
|
|
881
|
+
*/
|
|
882
|
+
type SelectProps<T extends SelectValue> = (UnselectableProps<T> | NotUnselectableProps<T>) & Omit<MultiSelectProps<T>, "value" | "onChange" | "minSelection" | "maxSelection" | "onSelectAll">;
|
|
883
|
+
type SelectWithUnselectProps<T extends SelectValue> = Omit<UnselectableProps<T>, "allowUnselect"> & Omit<MultiSelectProps<T>, "value" | "onChange" | "minSelection" | "maxSelection" | "onSelectAll">;
|
|
884
|
+
/**
|
|
885
|
+
* Helper type for async single-select components with enriched object callback.
|
|
886
|
+
* Makes it easy to define custom select component props.
|
|
887
|
+
*/
|
|
888
|
+
type AsyncSelectControlledProps<TValue extends SelectValue, TObj> = {
|
|
889
|
+
value: TValue | undefined;
|
|
890
|
+
onChange: (value: TValue | undefined, obj: TObj | undefined) => void;
|
|
891
|
+
};
|
|
892
|
+
/**
|
|
893
|
+
* Helper type for async multi-select components with enriched object callback.
|
|
894
|
+
* Makes it easy to define custom multi-select component props.
|
|
895
|
+
*/
|
|
896
|
+
type AsyncMultiSelectControlledProps<TValue extends SelectValue, TObj> = {
|
|
897
|
+
value: TValue[];
|
|
898
|
+
onChange: (value: TValue[] | undefined, objs: TObj[]) => void;
|
|
899
|
+
};
|
|
900
|
+
|
|
901
|
+
declare function useDebounce<T>(value: T, delay: number): T;
|
|
902
|
+
type ErrorOr<T> = {
|
|
903
|
+
error: true;
|
|
904
|
+
} | {
|
|
905
|
+
error: false;
|
|
906
|
+
value: T;
|
|
907
|
+
};
|
|
908
|
+
type UseAsyncMultiSelectArgs<TValue extends SelectValue, TObj, TPage> = {
|
|
909
|
+
value: TValue[];
|
|
910
|
+
/**
|
|
911
|
+
* Fetch objects associated with the selected values.
|
|
912
|
+
*
|
|
913
|
+
* If the select allows custom values, then some values may not resolve to a
|
|
914
|
+
* corresponding object (determined by objToItem). In this case, these values
|
|
915
|
+
* will be converted to items using customValueToItem.
|
|
916
|
+
* @param values current selected items
|
|
917
|
+
* @returns list of objects corresponding to the selected values
|
|
918
|
+
*/
|
|
919
|
+
fetchValues: (values: TValue[]) => Promise<ErrorOr<TObj[]>>;
|
|
920
|
+
/**
|
|
921
|
+
* Fetch objects matching a search term and page token. This is used to render
|
|
922
|
+
* available options in the dropdown.
|
|
923
|
+
* @param query query the user has searched
|
|
924
|
+
* @param page page token
|
|
925
|
+
* @returns the results and the next page token, if any
|
|
926
|
+
*/
|
|
927
|
+
fetchOptions: (query: string, page: TPage | undefined) => Promise<ErrorOr<{
|
|
928
|
+
results: TObj[];
|
|
929
|
+
nextPage?: TPage;
|
|
930
|
+
}>>;
|
|
931
|
+
/**
|
|
932
|
+
* Convert an object returned from a query to a select item.
|
|
933
|
+
* @param obj
|
|
934
|
+
* @returns
|
|
935
|
+
*/
|
|
936
|
+
objToItem: (obj: TObj) => SelectItem<TValue>;
|
|
937
|
+
/**
|
|
938
|
+
* Convert a custom value to a select item. *Only provide this if the select
|
|
939
|
+
* accepts custom values.*
|
|
940
|
+
*
|
|
941
|
+
* If this is not provided, the select will render a loading state until all
|
|
942
|
+
* values have been resolved to objects by fetchValues.
|
|
943
|
+
*
|
|
944
|
+
* TODO: how to handle cases where custom values are disallowed, but a value
|
|
945
|
+
* previously entered by the user is no longer present on the backend?
|
|
946
|
+
* @param value
|
|
947
|
+
* @returns
|
|
948
|
+
*/
|
|
949
|
+
customValueToItem?: (value: TValue) => SelectItem<TValue>;
|
|
950
|
+
queryKeyPrefix: string | string[] | readonly string[];
|
|
951
|
+
};
|
|
952
|
+
/**
|
|
953
|
+
* Utility hook for fetching data and getting props for AsyncMultiSelect.
|
|
954
|
+
*/
|
|
955
|
+
declare function useAsyncMultiSelect<TValue extends SelectValue, TObj, TPage>({ value, fetchValues, fetchOptions, objToItem, customValueToItem, queryKeyPrefix, }: UseAsyncMultiSelectArgs<TValue, TObj, TPage>): {
|
|
956
|
+
setQuery: React$1.Dispatch<React$1.SetStateAction<string>>;
|
|
957
|
+
selectItems: SelectItem<TValue>[];
|
|
958
|
+
loadProps: LoadProps;
|
|
959
|
+
queriedObjects: TObj[];
|
|
960
|
+
};
|
|
961
|
+
type UseAsyncSelectArgs<TValue extends SelectValue, TObj, TPage> = {
|
|
962
|
+
value: TValue | undefined;
|
|
963
|
+
fetchValue: (value: TValue) => Promise<ErrorOr<TObj | undefined>>;
|
|
964
|
+
} & Omit<UseAsyncMultiSelectArgs<TValue, TObj, TPage>, "value" | "fetchValues">;
|
|
965
|
+
/**
|
|
966
|
+
* Utility hook for fetching data and getting props for AsyncSelect.
|
|
967
|
+
*/
|
|
968
|
+
declare const useAsyncSelect: <TValue extends SelectValue, TObj, TPage>({ value, fetchValue, ...rest }: UseAsyncSelectArgs<TValue, TObj, TPage>) => {
|
|
969
|
+
setQuery: React$1.Dispatch<React$1.SetStateAction<string>>;
|
|
970
|
+
selectItems: SelectItem<TValue>[];
|
|
971
|
+
loadProps: LoadProps;
|
|
972
|
+
queriedObjects: TObj[];
|
|
973
|
+
};
|
|
974
|
+
|
|
975
|
+
/**
|
|
976
|
+
* The most unopinionated of the family of Select components, the base for all the others.
|
|
977
|
+
* Supports asynchronous loading (and does not assume that all available options are provided
|
|
978
|
+
* in the `options` prop).
|
|
979
|
+
*/
|
|
980
|
+
declare const AsyncMultiSelect: <TValue extends string | number>({ value, onChange, disabled, ordered, variant, triggerPlaceholder, hideSearch, searchPlaceholder, items, loadProps, onSearchChange, minSelection, maxSelection, allowCustomValues, hasError, popover, isValidCustomValue, onSelectAll, numValuesToShow, emptyState, size, onOpen, onClose, }: AsyncMultiSelectProps<TValue>) => react_jsx_runtime.JSX.Element;
|
|
981
|
+
|
|
982
|
+
/**
|
|
983
|
+
* Thin wrapper around AsyncMultiSelect that only allows a single value to be selected.
|
|
984
|
+
*/
|
|
985
|
+
declare const AsyncSelect: <T extends string | number>({ value, onChange, allowUnselect, ...rest }: AsyncSelectProps<T>) => react_jsx_runtime.JSX.Element;
|
|
986
|
+
|
|
987
|
+
/**
|
|
988
|
+
* Thin wrapper around AsyncMultiSelect that does not support asynchronous loading, and
|
|
989
|
+
* assumes all available options are provided in the `options` prop.
|
|
990
|
+
*/
|
|
991
|
+
declare const MultiSelect: <T extends string | number>({ value, items: options, onSearchChange, customValueToOption, ...rest }: MultiSelectProps<T>) => react_jsx_runtime.JSX.Element;
|
|
992
|
+
|
|
993
|
+
/**
|
|
994
|
+
* Thin wrapper around MultiSelect that only allows a single value to be selected.
|
|
995
|
+
*/
|
|
996
|
+
declare function Select<T extends string | number>({ value, onChange, allowUnselect, ...rest }: SelectProps<T>): react_jsx_runtime.JSX.Element;
|
|
997
|
+
|
|
998
|
+
/**
|
|
999
|
+
* Thin wrapper around MultiSelect that only allows a single value to be selected.
|
|
1000
|
+
*/
|
|
1001
|
+
declare function SelectWithUnselect<T extends string | number>({ value, onChange, ...rest }: SelectWithUnselectProps<T>): react_jsx_runtime.JSX.Element;
|
|
1002
|
+
|
|
1003
|
+
type SelectListItemProps = {
|
|
1004
|
+
sortableId?: string | number;
|
|
1005
|
+
children?: React.ReactNode;
|
|
1006
|
+
onClick?: () => void;
|
|
1007
|
+
disabled?: boolean;
|
|
1008
|
+
focused?: boolean;
|
|
1009
|
+
};
|
|
1010
|
+
/**
|
|
1011
|
+
* An item rendered in a Select dropdown. Does not necessarily correspond to an option.
|
|
1012
|
+
* @param param0
|
|
1013
|
+
* @returns
|
|
1014
|
+
*/
|
|
1015
|
+
declare const SelectListItem: ({ sortableId, children, onClick, disabled, focused, }: SelectListItemProps) => react_jsx_runtime.JSX.Element;
|
|
1016
|
+
|
|
1017
|
+
type FormSelectProps<TValue extends SelectValue> = SharedFormControlProps & SharedFormItemProps & Pick<SelectProps<TValue>, CommonSelectProps | "loadProps" | "triggerPlaceholder">;
|
|
1018
|
+
declare const FormSelect: <TValue extends SelectValue>({ name, styles, layout, label, options, onChange, ...rest }: FormSelectProps<TValue>) => react_jsx_runtime.JSX.Element;
|
|
1019
|
+
|
|
1020
|
+
type FormMultiSelectProps<TValue extends SelectValue> = SharedFormControlProps & SharedFormItemProps & Pick<MultiSelectProps<TValue>, CommonSelectProps | "allowCustomValues" | "minSelection" | "maxSelection">;
|
|
1021
|
+
declare const FormMultiSelect: <TValue extends SelectValue>({ name, styles, layout, label, options, onChange, ...rest }: FormMultiSelectProps<TValue>) => react_jsx_runtime.JSX.Element;
|
|
1022
|
+
|
|
1023
|
+
type TextAreaProps = TextareaHTMLAttributes<HTMLTextAreaElement> & Simplify<ErrorProps>;
|
|
1024
|
+
declare const TextAreaComp: React$1.ForwardRefExoticComponent<TextareaHTMLAttributes<HTMLTextAreaElement> & {
|
|
1025
|
+
hasError?: boolean | undefined;
|
|
1026
|
+
errorNode?: React$1.ReactNode;
|
|
1027
|
+
} & React$1.RefAttributes<HTMLTextAreaElement>>;
|
|
1028
|
+
declare const TextArea: React$1.ForwardRefExoticComponent<TextareaHTMLAttributes<HTMLTextAreaElement> & {
|
|
1029
|
+
hasError?: boolean | undefined;
|
|
1030
|
+
errorNode?: React$1.ReactNode;
|
|
1031
|
+
} & React$1.RefAttributes<HTMLTextAreaElement>>;
|
|
1032
|
+
|
|
1033
|
+
type FormTextAreaProps = SharedFormControlProps & SharedFormItemProps & TextAreaProps & {
|
|
1034
|
+
debounce?: number;
|
|
1035
|
+
};
|
|
1036
|
+
declare const FormTextArea: ({ name, styles, layout, label, options, debounce: debounceInterval, ...rest }: FormTextAreaProps) => react_jsx_runtime.JSX.Element;
|
|
1037
|
+
|
|
1038
|
+
type FormSwitchProps = SharedFormControlProps & SharedFormItemProps & {
|
|
1039
|
+
onChange?: (value: boolean) => void;
|
|
1040
|
+
};
|
|
1041
|
+
declare const FormSwitch: ({ name, styles, layout, label, options, onChange, ...props }: FormSwitchProps) => react_jsx_runtime.JSX.Element;
|
|
1042
|
+
|
|
1043
|
+
type RadioButtonGroupItem = {
|
|
1044
|
+
value: string;
|
|
1045
|
+
displayValue: string;
|
|
1046
|
+
description?: string | React.ReactNode;
|
|
1047
|
+
expandedContents?: (isDisabled: boolean) => React.ReactNode;
|
|
1048
|
+
expandedContentsStyle?: "inline" | "block";
|
|
1049
|
+
disabled?: boolean;
|
|
1050
|
+
};
|
|
1051
|
+
type RadioButtonItemProps = RadioButtonGroupItem & {
|
|
1052
|
+
isChecked: boolean;
|
|
1053
|
+
onSelect?: (value: string) => void;
|
|
1054
|
+
asCard?: boolean;
|
|
1055
|
+
};
|
|
1056
|
+
declare const RadioButtonItem: ({ value, displayValue, description, expandedContents, expandedContentsStyle, disabled, isChecked, onSelect, asCard, }: RadioButtonItemProps) => react_jsx_runtime.JSX.Element;
|
|
1057
|
+
|
|
1058
|
+
type RadioButtonGroupProps = PropsWithClassName<{
|
|
1059
|
+
items: RadioButtonGroupItem[];
|
|
1060
|
+
value?: string | undefined;
|
|
1061
|
+
onChange?: (newValue: string) => void;
|
|
1062
|
+
asCards?: boolean;
|
|
1063
|
+
}>;
|
|
1064
|
+
declare const RadioButtonGroup: ({ className, items, onChange, value, asCards }: RadioButtonGroupProps) => react_jsx_runtime.JSX.Element;
|
|
1065
|
+
|
|
1066
|
+
type FormRadioButtonGroupProps = Simplify<Pick<SharedFormControlProps, "name"> & Pick<RadioButtonGroupProps, "items" | "onChange" | "className" | "asCards">>;
|
|
1067
|
+
declare const FormRadioButtonGroup: ({ name, items, onChange, asCards, className, }: FormRadioButtonGroupProps) => react_jsx_runtime.JSX.Element;
|
|
1068
|
+
|
|
1069
|
+
type FormDatePickerProps = SharedFormControlProps & SharedFormItemProps & Pick<DatePickerProps, "placeholder" | "minDate" | "range" | "onChange" | "maxDate" | "showTimeInput"> & {
|
|
1070
|
+
containerRef?: React.RefObject<HTMLDivElement>;
|
|
1071
|
+
};
|
|
1072
|
+
declare const FormDatePicker: ({ name, styles, layout, label, onChange, options, containerRef, disabled, ...rest }: FormDatePickerProps) => react_jsx_runtime.JSX.Element;
|
|
1073
|
+
|
|
1074
|
+
/** This regex will match currency values like `123`, `-123`, `1,234`, `12,345.67`, `.12`, etc.
|
|
1075
|
+
*/
|
|
1076
|
+
declare const CURRENCY_REGEX: RegExp;
|
|
1077
|
+
declare const dollarsStrSchema: z.ZodString;
|
|
1078
|
+
declare const requiredDollarsStrSchema: z.ZodString;
|
|
1079
|
+
declare const requiredDollarsStrSchemaWithCustomMessage: (requiredError: string, invalidTypeError: string) => z.ZodString;
|
|
1080
|
+
declare const requiredNonZeroDollarsStrSchema: z.ZodEffects<z.ZodString, string, string>;
|
|
1081
|
+
declare const requiredPositiveDollarsStrSchema: z.ZodEffects<z.ZodString, string, string>;
|
|
1082
|
+
declare const requiredPositiveOrZeroDollarsStrSchema: z.ZodEffects<z.ZodString, string, string>;
|
|
1083
|
+
|
|
1084
|
+
declare const npiSchema: z.ZodString;
|
|
1085
|
+
declare const npiSchemaOptional: z.ZodUnion<[z.ZodEffects<z.ZodLiteral<null>, undefined, null>, z.ZodEffects<z.ZodLiteral<"">, undefined, "">, z.ZodPipeline<z.ZodEffects<z.ZodString, string | undefined, string>, z.ZodUndefined>, z.ZodOptional<z.ZodString>]>;
|
|
1086
|
+
declare const taxonomyCodeSchema: z.ZodString;
|
|
1087
|
+
declare const taxIdSchema: z.ZodString;
|
|
1088
|
+
|
|
1089
|
+
/** Handles empty values (`""`, `null`) and marks schema as `.optional()`. */
|
|
1090
|
+
declare const asOptional: <T extends z.ZodTypeAny>(schema: T) => z.ZodUnion<[z.ZodEffects<z.ZodLiteral<null>, undefined, null>, z.ZodEffects<z.ZodLiteral<"">, undefined, "">, z.ZodPipeline<z.ZodEffects<z.ZodString, string | undefined, string>, z.ZodUndefined>, z.ZodOptional<T>]>;
|
|
1091
|
+
/** Handles empty values (`""`, `null`) and marks schema as `.nullish()`. */
|
|
1092
|
+
declare const asNullish: <T extends z.ZodTypeAny>(schema: T) => z.ZodUnion<[z.ZodEffects<z.ZodLiteral<null>, undefined, null>, z.ZodEffects<z.ZodLiteral<"">, undefined, "">, z.ZodPipeline<z.ZodEffects<z.ZodString, string | undefined, string>, z.ZodUndefined>, z.ZodOptional<z.ZodNullable<T>>]>;
|
|
1093
|
+
/** Adds validation on string to ensure only numbers are allowed. */
|
|
1094
|
+
declare const asNumericStr: <T extends z.ZodString>(schema: T, message?: string) => z.ZodString;
|
|
1095
|
+
declare const asRequiredCustom: <T>(message?: string) => z.ZodType<T, z.ZodTypeDef, T>;
|
|
1096
|
+
|
|
1097
|
+
declare const selectedAmountSchema: z.ZodObject<{
|
|
1098
|
+
selected: z.ZodUnion<[z.ZodEffects<z.ZodLiteral<null>, undefined, null>, z.ZodEffects<z.ZodLiteral<"">, undefined, "">, z.ZodPipeline<z.ZodEffects<z.ZodString, string | undefined, string>, z.ZodUndefined>, z.ZodOptional<z.ZodBoolean>]>;
|
|
1099
|
+
amountStr: z.ZodUnion<[z.ZodEffects<z.ZodLiteral<null>, undefined, null>, z.ZodEffects<z.ZodLiteral<"">, undefined, "">, z.ZodPipeline<z.ZodEffects<z.ZodString, string | undefined, string>, z.ZodUndefined>, z.ZodOptional<z.ZodString>]>;
|
|
1100
|
+
}, "strip", z.ZodTypeAny, {
|
|
1101
|
+
selected?: boolean | undefined;
|
|
1102
|
+
amountStr?: string | undefined;
|
|
1103
|
+
}, {
|
|
1104
|
+
selected?: string | boolean | null | undefined;
|
|
1105
|
+
amountStr?: string | null | undefined;
|
|
1106
|
+
}>;
|
|
1107
|
+
type SelectedAmountSchema = z.infer<typeof selectedAmountSchema>;
|
|
1108
|
+
|
|
1109
|
+
declare const buildZodIssue: (path: string | string[], message: string) => {
|
|
1110
|
+
path: string[];
|
|
1111
|
+
message: string;
|
|
1112
|
+
code: "custom";
|
|
1113
|
+
};
|
|
1114
|
+
|
|
1115
|
+
type UseDrawerResizeParams = {
|
|
1116
|
+
slider: RefObject<HTMLDivElement>;
|
|
1117
|
+
drawer: RefObject<HTMLDivElement>;
|
|
1118
|
+
isOpen: boolean;
|
|
1119
|
+
defaultSizePct: number;
|
|
1120
|
+
persistWidth?: PersistDrawerWidth;
|
|
1121
|
+
};
|
|
1122
|
+
type PersistDrawerWidth = {
|
|
1123
|
+
load: () => number | undefined;
|
|
1124
|
+
save: (widthPct: number) => void;
|
|
1125
|
+
};
|
|
1126
|
+
declare const localStoragePersist: (key: string) => PersistDrawerWidth;
|
|
1127
|
+
declare const useDrawerResize: ({ slider, drawer, isOpen, defaultSizePct, persistWidth }: UseDrawerResizeParams) => void;
|
|
1128
|
+
|
|
1129
|
+
declare const drawerSizes: {
|
|
1130
|
+
sm: number;
|
|
1131
|
+
md: number;
|
|
1132
|
+
lg: number;
|
|
1133
|
+
};
|
|
1134
|
+
type DrawerProps = {
|
|
1135
|
+
isOpen: boolean;
|
|
1136
|
+
onClose?: () => void;
|
|
1137
|
+
onClickOutside?: () => void;
|
|
1138
|
+
blurredOverlay?: boolean;
|
|
1139
|
+
width?: keyof typeof drawerSizes;
|
|
1140
|
+
persistWidth?: PersistDrawerWidth;
|
|
1141
|
+
children: React.ReactNode;
|
|
1142
|
+
};
|
|
1143
|
+
declare const Drawer: React$1.ForwardRefExoticComponent<DrawerProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
1144
|
+
|
|
1145
|
+
type DrawerHeaderProps = {
|
|
1146
|
+
resource?: {
|
|
1147
|
+
icon?: IconDefinition;
|
|
1148
|
+
name: string;
|
|
1149
|
+
};
|
|
1150
|
+
pagination?: {
|
|
1151
|
+
hasNext: boolean;
|
|
1152
|
+
hasPrevious: boolean;
|
|
1153
|
+
onNext: () => void;
|
|
1154
|
+
onPrevious: () => void;
|
|
1155
|
+
extra?: React.ReactNode;
|
|
1156
|
+
};
|
|
1157
|
+
title: React.ReactNode;
|
|
1158
|
+
subtitle?: React.ReactNode;
|
|
1159
|
+
actions?: React.ReactNode;
|
|
1160
|
+
label?: React.ReactNode;
|
|
1161
|
+
closeAction?: React.ReactNode;
|
|
1162
|
+
};
|
|
1163
|
+
declare const DrawerHeader: ({ resource, pagination, title, subtitle, actions, closeAction, label, }: DrawerHeaderProps) => react_jsx_runtime.JSX.Element;
|
|
1164
|
+
declare const DrawerHeaderSkeleton: () => react_jsx_runtime.JSX.Element;
|
|
1165
|
+
|
|
1166
|
+
type DrawerState = {
|
|
1167
|
+
isOpen: boolean;
|
|
1168
|
+
onClose: () => void;
|
|
1169
|
+
};
|
|
1170
|
+
declare const DrawerStateContext: React$1.Context<DrawerState>;
|
|
1171
|
+
declare const useDrawer: () => DrawerState;
|
|
1172
|
+
|
|
1173
|
+
declare const DropdownChevron: () => react_jsx_runtime.JSX.Element;
|
|
1174
|
+
|
|
1175
|
+
type EmptyStateProps = {
|
|
1176
|
+
icon?: IconDefinition;
|
|
1177
|
+
title: React.ReactNode;
|
|
1178
|
+
description?: React.ReactNode;
|
|
1179
|
+
};
|
|
1180
|
+
declare const EmptyState: React$1.ForwardRefExoticComponent<EmptyStateProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
1181
|
+
|
|
1182
|
+
declare const HeaderTile: (props: {
|
|
1183
|
+
title: string;
|
|
1184
|
+
content: ReactNode;
|
|
1185
|
+
popover?: ReactNode;
|
|
1186
|
+
className?: string;
|
|
1187
|
+
}) => react_jsx_runtime.JSX.Element;
|
|
1188
|
+
|
|
1189
|
+
type IconProps = {
|
|
1190
|
+
icon: IconDefinition;
|
|
1191
|
+
};
|
|
1192
|
+
declare const Icon: ({ icon }: IconProps) => react_jsx_runtime.JSX.Element;
|
|
1193
|
+
|
|
1194
|
+
type LabelIntent = Intent | "disabled";
|
|
1195
|
+
type LabelVariant = "default" | "dark";
|
|
1196
|
+
type LabelStyleProps = {
|
|
1197
|
+
variant?: LabelVariant;
|
|
1198
|
+
intent?: LabelIntent;
|
|
1199
|
+
size?: Size;
|
|
1200
|
+
};
|
|
1201
|
+
declare const labelStyles: ({ intent, size, variant }: LabelStyleProps) => string;
|
|
1202
|
+
|
|
1203
|
+
declare const Label: React$1.ForwardRefExoticComponent<{
|
|
1204
|
+
children: React$1.ReactNode;
|
|
1205
|
+
} & LabelStyleProps & React$1.RefAttributes<HTMLSpanElement>>;
|
|
1206
|
+
|
|
1207
|
+
type LoaderProps = {
|
|
1208
|
+
className?: string;
|
|
1209
|
+
size?: SizeProp;
|
|
1210
|
+
};
|
|
1211
|
+
declare const Spinner: ({ className, ...props }: LoaderProps) => react_jsx_runtime.JSX.Element;
|
|
1212
|
+
|
|
1213
|
+
declare const LoadingState: ({ size }: {
|
|
1214
|
+
size?: SizeProp;
|
|
1215
|
+
}) => react_jsx_runtime.JSX.Element;
|
|
1216
|
+
|
|
1217
|
+
type LoadingBarProps = {
|
|
1218
|
+
className?: string;
|
|
1219
|
+
};
|
|
1220
|
+
declare const LoadingBar: ({ className }: LoadingBarProps) => react_jsx_runtime.JSX.Element;
|
|
1221
|
+
|
|
1222
|
+
type MenuContentProps = DropdownMenuContentProps & {
|
|
1223
|
+
unrestrictedHeight?: boolean;
|
|
1224
|
+
};
|
|
1225
|
+
type MenuItemProps = Pick<DropdownMenuItemProps, "asChild" | "children" | "disabled" | "textValue" | "onSelect"> & {
|
|
1226
|
+
loading?: boolean;
|
|
1227
|
+
size?: "default" | "lg";
|
|
1228
|
+
};
|
|
1229
|
+
type MenuItemWithToolTipProps = MenuItemProps & {
|
|
1230
|
+
/**
|
|
1231
|
+
* tooltip Content
|
|
1232
|
+
*/
|
|
1233
|
+
tooltip?: React$1.ReactNode;
|
|
1234
|
+
};
|
|
1235
|
+
declare const MenuRoot: (props: DropdownMenuProps) => react_jsx_runtime.JSX.Element;
|
|
1236
|
+
declare const MenuSeparator: () => react_jsx_runtime.JSX.Element;
|
|
1237
|
+
type MenuProps = DropdownMenuProps & Pick<DropdownMenuContentProps, "align"> & {
|
|
1238
|
+
trigger?: React$1.ReactNode;
|
|
1239
|
+
triggerSize?: ButtonProps["size"];
|
|
1240
|
+
variant?: "default" | "minimal";
|
|
1241
|
+
} & Pick<ButtonProps, "disabled">;
|
|
1242
|
+
/**
|
|
1243
|
+
* @example
|
|
1244
|
+
* <Menu trigger="Actions">
|
|
1245
|
+
* <Menu.Item>Transform object...</Menu.Item>
|
|
1246
|
+
* <Menu.Item>Edit</Menu.Item>
|
|
1247
|
+
* </Menu>
|
|
1248
|
+
* // use default trigger!
|
|
1249
|
+
* <Menu>
|
|
1250
|
+
* <Menu.Item onSelect={() => ...}>Transform object...</Menu.Item>
|
|
1251
|
+
* <Menu.Item>Edit</Menu.Item>
|
|
1252
|
+
* </Menu>
|
|
1253
|
+
*/
|
|
1254
|
+
declare const Menu: {
|
|
1255
|
+
({ children, trigger, align, variant, triggerSize, ...rest }: MenuProps): react_jsx_runtime.JSX.Element;
|
|
1256
|
+
Root: (props: DropdownMenuProps) => react_jsx_runtime.JSX.Element;
|
|
1257
|
+
Trigger: ({ children, ...rest }: ButtonProps) => react_jsx_runtime.JSX.Element;
|
|
1258
|
+
RawTrigger: React$1.ForwardRefExoticComponent<_radix_ui_react_dropdown_menu.DropdownMenuTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
|
|
1259
|
+
Content: ({ children, unrestrictedHeight, ...props }: MenuContentProps) => react_jsx_runtime.JSX.Element;
|
|
1260
|
+
Item: ({ loading, disabled, size, ...rest }: MenuItemProps) => react_jsx_runtime.JSX.Element;
|
|
1261
|
+
ItemWithDisabledToolTip: ({ tooltip, onSelect, ...props }: MenuItemWithToolTipProps) => react_jsx_runtime.JSX.Element;
|
|
1262
|
+
Separator: () => react_jsx_runtime.JSX.Element;
|
|
1263
|
+
};
|
|
1264
|
+
|
|
1265
|
+
type ModalContentBaseProps = Pick<DialogContentProps, "children" | "onOpenAutoFocus" | "onCloseAutoFocus">;
|
|
1266
|
+
type SoftDismissProps = {
|
|
1267
|
+
dismissible?: never;
|
|
1268
|
+
onDismiss?: (e: Event) => void;
|
|
1269
|
+
} | {
|
|
1270
|
+
dismissible?: boolean;
|
|
1271
|
+
onDismiss?: never;
|
|
1272
|
+
};
|
|
1273
|
+
type ModalContentProps = SoftDismissProps & {
|
|
1274
|
+
maxWidthClassName?: `max-w-${string}`;
|
|
1275
|
+
overflowYClassName?: `overflow-y-${string}`;
|
|
1276
|
+
};
|
|
1277
|
+
|
|
1278
|
+
type ChildrenProps$1 = {
|
|
1279
|
+
children?: React$1.ReactNode;
|
|
1280
|
+
};
|
|
1281
|
+
type ModalBodyImplProps$1 = {
|
|
1282
|
+
title?: React$1.ReactNode;
|
|
1283
|
+
error?: React$1.ReactNode;
|
|
1284
|
+
description?: React$1.ReactNode;
|
|
1285
|
+
actions?: React$1.ReactNode;
|
|
1286
|
+
showX?: boolean;
|
|
1287
|
+
};
|
|
1288
|
+
type SharedModalProps = React$1.PropsWithChildren & {
|
|
1289
|
+
isOpen?: boolean;
|
|
1290
|
+
onClose?: () => void;
|
|
1291
|
+
};
|
|
1292
|
+
/**
|
|
1293
|
+
* If using `trigger`, the modal will control its own visibility state though you can observe changes with onOpenChange
|
|
1294
|
+
* Otherwise, pass `isOpen` and `onClose` to control modal state yourself.
|
|
1295
|
+
*/
|
|
1296
|
+
type DiscriminatedVisibilityProps = {
|
|
1297
|
+
isOpen: boolean;
|
|
1298
|
+
onClose: () => void;
|
|
1299
|
+
trigger?: never;
|
|
1300
|
+
onOpenChange?: never;
|
|
1301
|
+
} | {
|
|
1302
|
+
isOpen?: never;
|
|
1303
|
+
onClose?: never;
|
|
1304
|
+
trigger: React$1.ReactNode;
|
|
1305
|
+
onOpenChange?: (open: boolean) => void;
|
|
1306
|
+
};
|
|
1307
|
+
type DiscriminatedContentProps$1 = {
|
|
1308
|
+
children?: React$1.ReactNode;
|
|
1309
|
+
content?: never;
|
|
1310
|
+
title?: never;
|
|
1311
|
+
error?: never;
|
|
1312
|
+
description?: never;
|
|
1313
|
+
actions?: never;
|
|
1314
|
+
} | (ModalBodyImplProps$1 & {
|
|
1315
|
+
children?: never;
|
|
1316
|
+
content?: React$1.ReactNode;
|
|
1317
|
+
});
|
|
1318
|
+
type ModalProps$2 = DiscriminatedVisibilityProps & ModalContentBaseProps & ModalContentProps & DiscriminatedContentProps$1 & {
|
|
1319
|
+
trigger?: React$1.ReactNode;
|
|
1320
|
+
};
|
|
1321
|
+
declare const Modal: {
|
|
1322
|
+
({ children, trigger, isOpen, onClose, onOpenChange, content, title, error, description, actions, ...rest }: ModalProps$2): react_jsx_runtime.JSX.Element;
|
|
1323
|
+
Body: ({ children, title, error, description, actions, showX, }: ModalBodyImplProps$1 & ChildrenProps$1) => react_jsx_runtime.JSX.Element;
|
|
1324
|
+
TriggerButton: (props: ButtonProps) => react_jsx_runtime.JSX.Element;
|
|
1325
|
+
CloseButton: (props: ButtonProps) => react_jsx_runtime.JSX.Element;
|
|
1326
|
+
};
|
|
1327
|
+
|
|
1328
|
+
type FullscreenModalHeaderProps = {
|
|
1329
|
+
title: React.ReactNode;
|
|
1330
|
+
description?: React.ReactNode;
|
|
1331
|
+
leftSlot?: React.ReactNode;
|
|
1332
|
+
rightSlot?: React.ReactNode;
|
|
1333
|
+
className?: string;
|
|
1334
|
+
};
|
|
1335
|
+
|
|
1336
|
+
type ModalProps$1 = DiscriminatedVisibilityProps & ModalContentBaseProps & {
|
|
1337
|
+
trigger?: React$1.ReactNode;
|
|
1338
|
+
fullscreen?: boolean;
|
|
1339
|
+
title?: React$1.ReactNode;
|
|
1340
|
+
showX?: boolean;
|
|
1341
|
+
};
|
|
1342
|
+
declare const FullscreenModal: {
|
|
1343
|
+
({ children, trigger, isOpen, onClose, onOpenChange, fullscreen, showX, title, ...rest }: ModalProps$1): react_jsx_runtime.JSX.Element;
|
|
1344
|
+
TriggerButton: (props: ButtonProps) => react_jsx_runtime.JSX.Element;
|
|
1345
|
+
CloseButton: (props: ButtonProps) => react_jsx_runtime.JSX.Element;
|
|
1346
|
+
Header: ({ className, title, description, leftSlot, rightSlot, }: FullscreenModalHeaderProps) => react_jsx_runtime.JSX.Element;
|
|
1347
|
+
};
|
|
1348
|
+
|
|
1349
|
+
type ChildrenProps = {
|
|
1350
|
+
children?: React$1.ReactNode;
|
|
1351
|
+
};
|
|
1352
|
+
type ModalBodyImplProps = {
|
|
1353
|
+
title?: React$1.ReactNode;
|
|
1354
|
+
error?: React$1.ReactNode;
|
|
1355
|
+
description?: React$1.ReactNode;
|
|
1356
|
+
actions?: React$1.ReactNode;
|
|
1357
|
+
};
|
|
1358
|
+
type DiscriminatedContentProps = {
|
|
1359
|
+
children?: React$1.ReactNode;
|
|
1360
|
+
content?: never;
|
|
1361
|
+
title?: never;
|
|
1362
|
+
error?: never;
|
|
1363
|
+
description?: never;
|
|
1364
|
+
actions?: never;
|
|
1365
|
+
} | (ModalBodyImplProps & {
|
|
1366
|
+
children?: never;
|
|
1367
|
+
content?: React$1.ReactNode;
|
|
1368
|
+
});
|
|
1369
|
+
type ModalProps = Simplify<DiscriminatedVisibilityProps & Pick<ModalContentProps, "maxWidthClassName"> & DiscriminatedContentProps & {
|
|
1370
|
+
trigger?: React$1.ReactNode;
|
|
1371
|
+
}>;
|
|
1372
|
+
declare const AlertModal: {
|
|
1373
|
+
({ children, trigger, isOpen, onOpenChange, onClose, content, title, error, description, actions, ...rest }: ModalProps): react_jsx_runtime.JSX.Element;
|
|
1374
|
+
Body: ({ children, title, error, description, actions }: ModalBodyImplProps & ChildrenProps) => react_jsx_runtime.JSX.Element;
|
|
1375
|
+
TriggerButton: (props: ButtonProps) => react_jsx_runtime.JSX.Element;
|
|
1376
|
+
CloseButton: (props: ButtonProps) => react_jsx_runtime.JSX.Element;
|
|
1377
|
+
};
|
|
1378
|
+
|
|
1379
|
+
type TooltipContentProps = Pick<RadixTooltip.TooltipContentProps, "side"> & {
|
|
1380
|
+
children: React$1.ReactNode;
|
|
1381
|
+
variant?: "dark" | "light";
|
|
1382
|
+
};
|
|
1383
|
+
declare const TooltipContent: {
|
|
1384
|
+
({ children, variant, ...rest }: TooltipContentProps): react_jsx_runtime.JSX.Element;
|
|
1385
|
+
displayName: string | undefined;
|
|
1386
|
+
};
|
|
1387
|
+
type OverflowTriggerProps<TElement extends HTMLElement> = Omit<RadixTooltip.TooltipTriggerProps, "children"> & {
|
|
1388
|
+
/** The `elementRef` render prop should attach to a measurable DOM element.
|
|
1389
|
+
*
|
|
1390
|
+
* @example
|
|
1391
|
+
* element={elementRef => (
|
|
1392
|
+
* <span ref={elementRef} className="truncate ...">
|
|
1393
|
+
* {text}
|
|
1394
|
+
* </span>
|
|
1395
|
+
* )}
|
|
1396
|
+
*/
|
|
1397
|
+
element: (elementRef: React$1.RefObject<TElement>) => React$1.ReactElement;
|
|
1398
|
+
};
|
|
1399
|
+
type TooltipProps = Simplify<Omit<RadixTooltip.TooltipProps, "children"> & Omit<TooltipContentProps, "children"> & {
|
|
1400
|
+
trigger?: React$1.ReactNode;
|
|
1401
|
+
content?: React$1.ReactNode;
|
|
1402
|
+
}>;
|
|
1403
|
+
/**
|
|
1404
|
+
* @example
|
|
1405
|
+
* <Tooltip
|
|
1406
|
+
* trigger={<Button>Cool action</Button>}
|
|
1407
|
+
* content={<p className="text-xs">This is the tooltip content</p>}
|
|
1408
|
+
* />
|
|
1409
|
+
*/
|
|
1410
|
+
declare const Tooltip: {
|
|
1411
|
+
({ trigger, content, variant, side, ...rest }: TooltipProps): react_jsx_runtime.JSX.Element;
|
|
1412
|
+
Provider: (props: RadixTooltip.TooltipProviderProps) => react_jsx_runtime.JSX.Element;
|
|
1413
|
+
Root: (props: RadixTooltip.TooltipProps) => react_jsx_runtime.JSX.Element;
|
|
1414
|
+
Trigger: (props: RadixTooltip.TooltipTriggerProps) => react_jsx_runtime.JSX.Element;
|
|
1415
|
+
OverflowTrigger: <TElement extends HTMLElement = HTMLDivElement>({ element, ...rest }: OverflowTriggerProps<TElement>) => react_jsx_runtime.JSX.Element;
|
|
1416
|
+
Content: {
|
|
1417
|
+
({ children, variant, ...rest }: TooltipContentProps): react_jsx_runtime.JSX.Element;
|
|
1418
|
+
displayName: string | undefined;
|
|
1419
|
+
};
|
|
1420
|
+
};
|
|
1421
|
+
|
|
1422
|
+
type OverflowTooltipProps = Pick<React__default.ComponentPropsWithoutRef<typeof Tooltip>, "side" | "variant" | "open"> & {
|
|
1423
|
+
tooltip: React__default.ReactNode;
|
|
1424
|
+
/** The `elementRef` render prop should attach to a measurable DOM element.
|
|
1425
|
+
*
|
|
1426
|
+
* @example
|
|
1427
|
+
* element={elementRef => (
|
|
1428
|
+
* <span ref={elementRef} className="truncate ...">
|
|
1429
|
+
* {text}
|
|
1430
|
+
* </span>
|
|
1431
|
+
* )}
|
|
1432
|
+
*/
|
|
1433
|
+
element: (elementRef: React__default.RefObject<HTMLElement & HTMLDivElement>) => React__default.ReactElement;
|
|
1434
|
+
};
|
|
1435
|
+
declare const OverflowTooltip: ({ element, tooltip, side, variant, ...props }: OverflowTooltipProps) => react_jsx_runtime.JSX.Element;
|
|
1436
|
+
|
|
1437
|
+
declare const PhoneNumber: React__default.FC<PhoneInputProps & {
|
|
1438
|
+
hasError?: boolean;
|
|
1439
|
+
onChange: (value?: string) => void;
|
|
1440
|
+
}>;
|
|
1441
|
+
declare const formatPhoneNumber: (input: string | undefined) => string | undefined;
|
|
1442
|
+
declare const formatPhoneNumberForDisplay: (input: string | undefined) => string | undefined;
|
|
1443
|
+
declare const isValidPhoneNumber: (input: string | undefined) => boolean;
|
|
1444
|
+
|
|
1445
|
+
type Align = "start" | "center" | "end";
|
|
1446
|
+
type Side = "top" | "right" | "bottom" | "left";
|
|
1447
|
+
type PopoverProps = {
|
|
1448
|
+
triggerClassName?: string;
|
|
1449
|
+
trigger: React.ReactNode;
|
|
1450
|
+
open?: boolean;
|
|
1451
|
+
disabled?: boolean;
|
|
1452
|
+
alignContent?: Align;
|
|
1453
|
+
side?: Side;
|
|
1454
|
+
arrowClassName?: string;
|
|
1455
|
+
contentClassName?: string;
|
|
1456
|
+
children: React.ReactNode;
|
|
1457
|
+
onOpenChange?: (open: boolean) => void;
|
|
1458
|
+
};
|
|
1459
|
+
declare const Popover: {
|
|
1460
|
+
({ open, trigger, triggerClassName, children, arrowClassName, contentClassName, disabled, onOpenChange, alignContent, container, ...props }: PopoverProps & PopoverBodyProps): react_jsx_runtime.JSX.Element;
|
|
1461
|
+
Root(props: RadixPopover.PopoverProps): react_jsx_runtime.JSX.Element;
|
|
1462
|
+
Trigger(props: ButtonProps): react_jsx_runtime.JSX.Element;
|
|
1463
|
+
Body: ({ children, arrowClassName, contentClassName, container, ...props }: PopoverBodyProps) => react_jsx_runtime.JSX.Element;
|
|
1464
|
+
Close(props: RadixPopover.PopoverCloseProps): react_jsx_runtime.JSX.Element;
|
|
1465
|
+
};
|
|
1466
|
+
type PopoverBodyProps = {
|
|
1467
|
+
align?: Align;
|
|
1468
|
+
side?: Side;
|
|
1469
|
+
arrowClassName?: string;
|
|
1470
|
+
contentClassName?: string;
|
|
1471
|
+
children: React.ReactNode;
|
|
1472
|
+
container?: Element;
|
|
1473
|
+
};
|
|
1474
|
+
|
|
1475
|
+
type SkeletonProps = {
|
|
1476
|
+
className?: string;
|
|
1477
|
+
};
|
|
1478
|
+
declare const Skeleton: ({ className }: SkeletonProps) => react_jsx_runtime.JSX.Element;
|
|
1479
|
+
|
|
1480
|
+
type TabsSkeletonProps = {
|
|
1481
|
+
numTabs?: number;
|
|
1482
|
+
className?: string;
|
|
1483
|
+
tabClassName?: string;
|
|
1484
|
+
};
|
|
1485
|
+
declare const TabsSkeleton: ({ numTabs, className, tabClassName }: TabsSkeletonProps) => react_jsx_runtime.JSX.Element;
|
|
1486
|
+
|
|
1487
|
+
type TableSkeletonProps$1 = {
|
|
1488
|
+
numTableCols?: number;
|
|
1489
|
+
numTableRows?: number;
|
|
1490
|
+
className?: string;
|
|
1491
|
+
rowHeight?: number;
|
|
1492
|
+
hasBorder?: boolean;
|
|
1493
|
+
};
|
|
1494
|
+
declare const TableSkeleton: ({ numTableCols, numTableRows, className, rowHeight, hasBorder, }: TableSkeletonProps$1) => react_jsx_runtime.JSX.Element;
|
|
1495
|
+
|
|
1496
|
+
type TableSkeletonProps = {
|
|
1497
|
+
numTableRows?: number;
|
|
1498
|
+
className?: string;
|
|
1499
|
+
rowHeight?: number;
|
|
1500
|
+
hasBorder?: boolean;
|
|
1501
|
+
};
|
|
1502
|
+
declare const TableCheckboxSkeleton: ({ numTableRows, className, rowHeight, hasBorder, }: TableSkeletonProps) => react_jsx_runtime.JSX.Element;
|
|
1503
|
+
|
|
1504
|
+
type SwitchIdValue = string | undefined;
|
|
1505
|
+
declare const useSwitchId: () => SwitchIdValue;
|
|
1506
|
+
declare const Switch: {
|
|
1507
|
+
({ children, className, ...rest }: Simplify<Omit<RadixSwitch.SwitchProps, "id">>): react_jsx_runtime.JSX.Element;
|
|
1508
|
+
Control: (props: Simplify<RadixSwitch.SwitchProps>) => react_jsx_runtime.JSX.Element;
|
|
1509
|
+
Label: (props: React$1.ComponentPropsWithoutRef<"label">) => react_jsx_runtime.JSX.Element;
|
|
1510
|
+
};
|
|
1511
|
+
|
|
1512
|
+
declare const variants: {
|
|
1513
|
+
readonly default: "default";
|
|
1514
|
+
readonly seamless: "seamless";
|
|
1515
|
+
readonly transparent: "transparent";
|
|
1516
|
+
readonly subtable: "subtable";
|
|
1517
|
+
};
|
|
1518
|
+
type Variant = (typeof variants)[keyof typeof variants];
|
|
1519
|
+
type TableProps<T> = {
|
|
1520
|
+
table: Table$1<T>;
|
|
1521
|
+
variant?: Variant;
|
|
1522
|
+
loading?: boolean;
|
|
1523
|
+
fillHeight?: boolean;
|
|
1524
|
+
};
|
|
1525
|
+
declare const Table: <T>({ variant, loading, fillHeight, ...props }: TableProps<T>) => react_jsx_runtime.JSX.Element;
|
|
1526
|
+
|
|
1527
|
+
type SortOptions = {
|
|
1528
|
+
sort: string | undefined;
|
|
1529
|
+
onSortColumn?: (newSort: ColumnSort | undefined) => void;
|
|
1530
|
+
};
|
|
1531
|
+
type CustomTableMeta<T> = {
|
|
1532
|
+
emptyText?: React.ReactNode;
|
|
1533
|
+
activeRowId?: string;
|
|
1534
|
+
onRowClick?: (row: Row<T>) => void;
|
|
1535
|
+
staticSubRows?: boolean;
|
|
1536
|
+
};
|
|
1537
|
+
type DiscriminatedSortOptions = SortOptions | AllAsNever<SortOptions>;
|
|
1538
|
+
type CustomTableOptions<T> = Simplify<Omit<TableOptions<T>, "getCoreRowModel"> & DiscriminatedSortOptions & CustomTableMeta<T>>;
|
|
1539
|
+
declare const useTable: <T>(options: CustomTableOptions<T>) => _tanstack_react_table.Table<T>;
|
|
1540
|
+
|
|
1541
|
+
type TabsTriggerProps<TabId extends string> = {
|
|
1542
|
+
id: TabId;
|
|
1543
|
+
label: React.ReactNode;
|
|
1544
|
+
disabled?: boolean;
|
|
1545
|
+
dataTestId?: string;
|
|
1546
|
+
fsId?: string;
|
|
1547
|
+
extra?: React.ReactNode;
|
|
1548
|
+
className?: string;
|
|
1549
|
+
};
|
|
1550
|
+
declare const TabsTrigger: <TabId extends string>({ id, label, disabled, dataTestId, fsId, extra, className, }: TabsTriggerProps<TabId>) => react_jsx_runtime.JSX.Element;
|
|
1551
|
+
|
|
1552
|
+
type TabDefinition<TabId extends string> = {
|
|
1553
|
+
id: TabId;
|
|
1554
|
+
label: React.ReactNode;
|
|
1555
|
+
disabled?: boolean;
|
|
1556
|
+
fsId?: string;
|
|
1557
|
+
};
|
|
1558
|
+
type TabsProps<TabId extends string> = PropsWithChildren & {
|
|
1559
|
+
tabs: readonly TabDefinition<TabId>[];
|
|
1560
|
+
currentTab: TabId;
|
|
1561
|
+
setCurrentTab: (id: TabId) => void;
|
|
1562
|
+
className?: string;
|
|
1563
|
+
tabsListClassName?: string;
|
|
1564
|
+
tabsListContainerClassName?: string;
|
|
1565
|
+
tabsListTriggerClassName?: string;
|
|
1566
|
+
extraNode?: React.ReactNode;
|
|
1567
|
+
};
|
|
1568
|
+
declare const Tabs: {
|
|
1569
|
+
<TabId extends string>({ tabs, className, tabsListClassName, tabsListContainerClassName, tabsListTriggerClassName, currentTab, setCurrentTab, children, extraNode, }: TabsProps<TabId>): react_jsx_runtime.JSX.Element;
|
|
1570
|
+
TabContent: <TabId extends string>({ id, ...rest }: TabContentProps<TabId>) => react_jsx_runtime.JSX.Element;
|
|
1571
|
+
AlwaysMountedTabContent: <TabId extends string>({ id, visibleClassName, className, children, }: TabContentProps<TabId> & {
|
|
1572
|
+
visibleClassName?: string;
|
|
1573
|
+
}) => react_jsx_runtime.JSX.Element;
|
|
1574
|
+
};
|
|
1575
|
+
type TabContentProps<TabId = string> = {
|
|
1576
|
+
id: TabId;
|
|
1577
|
+
} & Omit<TabsContentProps, "value">;
|
|
1578
|
+
type TabsRootProps<TabId extends string> = Omit<TabsProps$1, "value" | "onValueChange" | "defaultValue"> & {
|
|
1579
|
+
defaultValue?: TabId;
|
|
1580
|
+
currentTab?: TabId;
|
|
1581
|
+
setCurrentTab?: (id: TabId) => void;
|
|
1582
|
+
className?: string;
|
|
1583
|
+
};
|
|
1584
|
+
declare const createTypedTabs: <TabId extends string>() => {
|
|
1585
|
+
Root: ({ currentTab, setCurrentTab, ...props }: TabsRootProps<TabId>) => react_jsx_runtime.JSX.Element;
|
|
1586
|
+
List: ({ className, ...props }: TabsListProps) => react_jsx_runtime.JSX.Element;
|
|
1587
|
+
Trigger: ({ id, label, disabled, dataTestId, fsId, extra, className, }: TabsTriggerProps<TabId>) => react_jsx_runtime.JSX.Element;
|
|
1588
|
+
Content: ({ id, ...rest }: TabContentProps<TabId>) => react_jsx_runtime.JSX.Element;
|
|
1589
|
+
};
|
|
1590
|
+
|
|
1591
|
+
type ScrollTab = {
|
|
1592
|
+
tabName: string;
|
|
1593
|
+
content: ReactNode;
|
|
1594
|
+
};
|
|
1595
|
+
type ScrollTabsProps = {
|
|
1596
|
+
tabs: ScrollTab[];
|
|
1597
|
+
onSelectTab?: (tabId: string) => void;
|
|
1598
|
+
sectionClassName?: string;
|
|
1599
|
+
};
|
|
1600
|
+
/**
|
|
1601
|
+
* Reusable component for creating a page layout with a set of tabs which scroll to different
|
|
1602
|
+
* sections of the page. The layout will automatically keep track of scroll position and update
|
|
1603
|
+
* the selected tab accordingly.
|
|
1604
|
+
*/
|
|
1605
|
+
declare const ScrollTabsLayout: ({ tabs, onSelectTab, sectionClassName }: ScrollTabsProps) => react_jsx_runtime.JSX.Element;
|
|
1606
|
+
|
|
1607
|
+
type ComposableTabDefinition<TabId extends string> = {
|
|
1608
|
+
id: TabId;
|
|
1609
|
+
label: React.ReactNode;
|
|
1610
|
+
disabled?: boolean;
|
|
1611
|
+
};
|
|
1612
|
+
type ComposableTabsListProps = {
|
|
1613
|
+
className?: string;
|
|
1614
|
+
containerClassName?: string;
|
|
1615
|
+
extraNode?: React.ReactNode;
|
|
1616
|
+
};
|
|
1617
|
+
type ComposableTabContentProps<TabId = string> = {
|
|
1618
|
+
id: TabId;
|
|
1619
|
+
} & Omit<TabsContentProps, "value">;
|
|
1620
|
+
type ComposableTabsProps<TabId extends string> = PropsWithChildren & {
|
|
1621
|
+
tabs: readonly ComposableTabDefinition<TabId>[];
|
|
1622
|
+
currentTab: TabId;
|
|
1623
|
+
setCurrentTab: (id: TabId) => void;
|
|
1624
|
+
className?: string;
|
|
1625
|
+
};
|
|
1626
|
+
declare const ComposableTabs: {
|
|
1627
|
+
Root: <TabId extends string>({ tabs, currentTab, setCurrentTab, className, children, }: ComposableTabsProps<TabId>) => react_jsx_runtime.JSX.Element;
|
|
1628
|
+
List: ({ className, containerClassName, extraNode }: ComposableTabsListProps) => react_jsx_runtime.JSX.Element;
|
|
1629
|
+
TabContent: <TabId extends string>({ id, ...rest }: ComposableTabContentProps<TabId>) => react_jsx_runtime.JSX.Element;
|
|
1630
|
+
AlwaysMountedTabContent: <TabId extends string>({ id, visibleClassName, className, children, }: ComposableTabContentProps<TabId> & {
|
|
1631
|
+
visibleClassName?: string;
|
|
1632
|
+
}) => react_jsx_runtime.JSX.Element;
|
|
1633
|
+
};
|
|
1634
|
+
|
|
1635
|
+
type TabGroupProps<TabId extends string> = {
|
|
1636
|
+
tabs: TabDefinition<TabId>[];
|
|
1637
|
+
currentTab: TabId;
|
|
1638
|
+
setCurrentTab: (id: TabId) => void;
|
|
1639
|
+
};
|
|
1640
|
+
declare const TabGroup: <TabId extends string>({ tabs, currentTab, setCurrentTab }: TabGroupProps<TabId>) => react_jsx_runtime.JSX.Element;
|
|
1641
|
+
|
|
1642
|
+
type TagLabelProps = {
|
|
1643
|
+
children: React$1.ReactNode;
|
|
1644
|
+
removable?: boolean;
|
|
1645
|
+
onRemove?: () => void;
|
|
1646
|
+
intent?: Intent;
|
|
1647
|
+
};
|
|
1648
|
+
type TagProps = TagLabelProps & {
|
|
1649
|
+
tooltip?: string;
|
|
1650
|
+
};
|
|
1651
|
+
declare const Tag: ({ tooltip, ...rest }: TagProps) => react_jsx_runtime.JSX.Element;
|
|
1652
|
+
|
|
1653
|
+
type TextTag = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "label";
|
|
1654
|
+
declare const VARIANT_STYLES: {
|
|
1655
|
+
readonly "marketing-headline": "text-marketing-headline";
|
|
1656
|
+
readonly "headline-1": "text-headline-1";
|
|
1657
|
+
readonly "headline-2": "text-headline-2";
|
|
1658
|
+
readonly "headline-3": "text-headline-3";
|
|
1659
|
+
readonly "headline-4": "text-headline-4";
|
|
1660
|
+
readonly "title-1": "text-title-1";
|
|
1661
|
+
readonly "title-2": "text-title-2";
|
|
1662
|
+
readonly "title-3": "text-title-3";
|
|
1663
|
+
readonly "body-1": "text-body-1";
|
|
1664
|
+
readonly "body-2": "text-body-2";
|
|
1665
|
+
readonly label: "text-label";
|
|
1666
|
+
readonly footnote: "text-footnote";
|
|
1667
|
+
readonly smallcaps: "text-smallcaps";
|
|
1668
|
+
};
|
|
1669
|
+
type TextVariant = keyof typeof VARIANT_STYLES;
|
|
1670
|
+
/**
|
|
1671
|
+
* Props specific to Text component (excluding native HTML props)
|
|
1672
|
+
*/
|
|
1673
|
+
type TextOwnProps<T extends ElementType = "p"> = {
|
|
1674
|
+
/**
|
|
1675
|
+
* The HTML tag to render
|
|
1676
|
+
* @default "p"
|
|
1677
|
+
*/
|
|
1678
|
+
as?: T;
|
|
1679
|
+
/**
|
|
1680
|
+
* Typography variant to apply
|
|
1681
|
+
* @default "body-1"
|
|
1682
|
+
*/
|
|
1683
|
+
variant?: keyof typeof VARIANT_STYLES;
|
|
1684
|
+
/**
|
|
1685
|
+
* Content to render
|
|
1686
|
+
*/
|
|
1687
|
+
children: ReactNode;
|
|
1688
|
+
};
|
|
1689
|
+
/**
|
|
1690
|
+
* Full component props combining Text-specific props with native HTML element props
|
|
1691
|
+
*/
|
|
1692
|
+
type TextProps<T extends TextTag = "p"> = TextOwnProps<T> & Omit<ComponentPropsWithoutRef<T>, keyof TextOwnProps>;
|
|
1693
|
+
/**
|
|
1694
|
+
* @summary A typography component for rendering styled text with semantic HTML tags.
|
|
1695
|
+
*
|
|
1696
|
+
* @description This component provides a consistent way to render text with proper semantic HTML
|
|
1697
|
+
* while maintaining design system typography. It is extendable but closed for modification.
|
|
1698
|
+
* The component is fully type-safe and provides proper autocompletion for all native HTML
|
|
1699
|
+
* attributes based on the selected tag.
|
|
1700
|
+
*
|
|
1701
|
+
* @example Basic Usage (defaults to <p> tag)
|
|
1702
|
+
* <Text>Default paragraph text</Text>
|
|
1703
|
+
*
|
|
1704
|
+
* @example With Custom Tags (fully typed)
|
|
1705
|
+
* <Text as="h1">Heading Text</Text>
|
|
1706
|
+
* <Text as="span">Inline Text</Text>
|
|
1707
|
+
*
|
|
1708
|
+
* @example Type Safety - Native Props
|
|
1709
|
+
* // ✓ Valid: span supports onClick
|
|
1710
|
+
* <Text as="span" onClick={() => console.log('clicked')}>
|
|
1711
|
+
* Clickable text
|
|
1712
|
+
* </Text>
|
|
1713
|
+
*
|
|
1714
|
+
* // ✓ Valid: h1 supports id
|
|
1715
|
+
* <Text as="h1" id="page-title">
|
|
1716
|
+
* Page Title
|
|
1717
|
+
* </Text>
|
|
1718
|
+
*
|
|
1719
|
+
* @example Extendable with className
|
|
1720
|
+
* <Text className="text-blue-500 font-bold">
|
|
1721
|
+
* Custom styled text
|
|
1722
|
+
* </Text>
|
|
1723
|
+
*
|
|
1724
|
+
* @example With Variants
|
|
1725
|
+
* <Text variant="headline-1">Large Heading</Text>
|
|
1726
|
+
* <Text variant="body-1">Body text</Text>
|
|
1727
|
+
* <Text variant="label">Label text</Text>
|
|
1728
|
+
*/
|
|
1729
|
+
declare const Text: <T extends TextTag = "p">({ as, variant, children, className, ...props }: TextProps<T>) => react_jsx_runtime.JSX.Element;
|
|
1730
|
+
|
|
1731
|
+
/**
|
|
1732
|
+
* @example
|
|
1733
|
+
* type FooContextValue = { foo: string };
|
|
1734
|
+
* const [FooProvider, useFoo] = createContextHelper<FooContextValue>({ foo: "bar" });
|
|
1735
|
+
*/
|
|
1736
|
+
declare const createContextHelper: <ContextValue extends object | null>(defaultContext?: ContextValue) => readonly [({ children, ...rest }: ContextValue & {
|
|
1737
|
+
children: React$1.ReactNode;
|
|
1738
|
+
}) => react_jsx_runtime.JSX.Element, () => ContextValue];
|
|
1739
|
+
|
|
1740
|
+
/**
|
|
1741
|
+
* I've found managing hover state with onMouseOver and onMouseOut events can be unreliable
|
|
1742
|
+
* when moving the mouse quickly. So this hook uses an event listener to more reliably track
|
|
1743
|
+
* mouse movement.
|
|
1744
|
+
*/
|
|
1745
|
+
declare const useIsHovered: (ref: React.RefObject<HTMLElement>) => boolean;
|
|
1746
|
+
|
|
1747
|
+
declare const useOverflowObserver: <T extends HTMLElement>() => {
|
|
1748
|
+
elementRef: React$1.RefObject<T>;
|
|
1749
|
+
hasOverflow: boolean;
|
|
1750
|
+
};
|
|
1751
|
+
|
|
1752
|
+
declare const useSyncState: <T>(upstream: T) => readonly [T, React$1.Dispatch<React$1.SetStateAction<T>>];
|
|
1753
|
+
|
|
1754
|
+
/**
|
|
1755
|
+
* @example
|
|
1756
|
+
* const defaultState = false; // optional as false is the default
|
|
1757
|
+
* const [Provider, useToggle] = createToggleContextHelper(defaultState);
|
|
1758
|
+
*
|
|
1759
|
+
* const {
|
|
1760
|
+
* state, // boolean
|
|
1761
|
+
* update, // (state: boolean) => void
|
|
1762
|
+
* toggle // () => void
|
|
1763
|
+
* } = useToggle();
|
|
1764
|
+
*/
|
|
1765
|
+
declare const createToggleContextHelper: (defaultState?: boolean) => readonly [{
|
|
1766
|
+
({ children, state: initState }: {
|
|
1767
|
+
children: React$1.ReactNode;
|
|
1768
|
+
state?: boolean;
|
|
1769
|
+
}): react_jsx_runtime.JSX.Element;
|
|
1770
|
+
displayName: string;
|
|
1771
|
+
}, () => {
|
|
1772
|
+
state: boolean;
|
|
1773
|
+
update: React$1.Dispatch<React$1.SetStateAction<boolean>>;
|
|
1774
|
+
toggle: () => void;
|
|
1775
|
+
}];
|
|
1776
|
+
/**
|
|
1777
|
+
* @example
|
|
1778
|
+
* const defaultState = true;
|
|
1779
|
+
* const { state, update, toggle } = useIsVisible(defaultState);
|
|
1780
|
+
*/
|
|
1781
|
+
declare const IsVisibleProvider: {
|
|
1782
|
+
({ children, state: initState }: {
|
|
1783
|
+
children: React$1.ReactNode;
|
|
1784
|
+
state?: boolean;
|
|
1785
|
+
}): react_jsx_runtime.JSX.Element;
|
|
1786
|
+
displayName: string;
|
|
1787
|
+
};
|
|
1788
|
+
declare const useIsVisible: () => {
|
|
1789
|
+
state: boolean;
|
|
1790
|
+
update: React$1.Dispatch<React$1.SetStateAction<boolean>>;
|
|
1791
|
+
toggle: () => void;
|
|
1792
|
+
};
|
|
1793
|
+
/**
|
|
1794
|
+
* @example
|
|
1795
|
+
* const defaultState = false;
|
|
1796
|
+
* const { state, update, toggle } = useIsEditing(defaultState);
|
|
1797
|
+
*/
|
|
1798
|
+
declare const IsEditingProvider: {
|
|
1799
|
+
({ children, state: initState }: {
|
|
1800
|
+
children: React$1.ReactNode;
|
|
1801
|
+
state?: boolean;
|
|
1802
|
+
}): react_jsx_runtime.JSX.Element;
|
|
1803
|
+
displayName: string;
|
|
1804
|
+
};
|
|
1805
|
+
declare const useIsEditing: () => {
|
|
1806
|
+
state: boolean;
|
|
1807
|
+
update: React$1.Dispatch<React$1.SetStateAction<boolean>>;
|
|
1808
|
+
toggle: () => void;
|
|
1809
|
+
};
|
|
1810
|
+
/**
|
|
1811
|
+
* @example
|
|
1812
|
+
* const defaultState = false; // optional as false is the default
|
|
1813
|
+
* const { state, update, toggle } = useToggle(defaultState);
|
|
1814
|
+
*/
|
|
1815
|
+
declare const useToggle: (initState?: boolean) => {
|
|
1816
|
+
state: boolean;
|
|
1817
|
+
update: React$1.Dispatch<React$1.SetStateAction<boolean>>;
|
|
1818
|
+
toggle: () => void;
|
|
1819
|
+
};
|
|
1820
|
+
|
|
1821
|
+
export { AlertModal, type AllAsNever, AsyncMultiSelect, type AsyncMultiSelectControlledProps, type AsyncMultiSelectProps, AsyncSelect, type AsyncSelectControlledProps, type AsyncSelectProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, type ButtonStyleProps, CURRENCY_REGEX, Callout, type CalloutIntent, type CalloutProps, Checkbox, type CheckboxProps, type ChildrenProps$2 as ChildrenProps, type ClassNameProps, Collapsible, CollapsibleSection, type ComposableTabDefinition, ComposableTabs, type ComposableTabsProps, ControlledField, ControlledFieldProvider, Copyable, DEFAULT_NUM_VALUES_TO_SHOW, DatePicker, type DatePickerProps, type DisabledProps, type DiscriminatedVisibilityProps, Divider, type DividerProps, DollarInput, Drawer, DrawerHeader, type DrawerHeaderProps, DrawerHeaderSkeleton, type DrawerState, DrawerStateContext, DropdownChevron, EmptyState, type ErrorProps, ErrorText, type EventFor, type FalsyValues, FormCheckbox, FormDatePicker, FormDollarInput, type FormFieldNameProps, FormInput, FormMultiSelect, FormPercentInput, FormRadioButtonGroup, type FormSchema, FormSelect, type FormSelectProps, FormSwitch, FormTextArea, FullscreenModal, HeaderTile, Icon, IndeterminateCheckbox, Input, InputBox, type InputBoxProps, type InputBoxStyleProps, type InputProps, type Intent, IsEditingProvider, IsVisibleProvider, type Justify, Label, type LabelStyleProps, type LoadProps, LoadingBar, LoadingState, Menu, type MenuProps, MenuRoot, MenuSeparator, Modal, type ModalBodyImplProps$1 as ModalBodyImplProps, MultiSelect, type MultiSelectProps, type OnSubmitHandler, OverflowTooltip, PercentInput, type PersistDrawerWidth, PhoneNumber, Popover, type PopoverProps, type PropsWithClassName, RING_COLOR_CLASSNAME, RadioButtonGroup, type RadioButtonGroupItem, type RadioButtonGroupProps, RadioButtonItem, ScrollTabsLayout, Select, type SelectItem, SelectListItem, type SelectListItemProps, type SelectProps, type SelectValue, SelectWithUnselect, type SelectWithUnselectProps, type SelectedAmountSchema, type SharedModalProps, type Size, Skeleton, type SkeletonProps, type Soften, Spinner, type StylesProps, Switch, type TabDefinition, TabGroup, Table, TableCheckboxSkeleton, type TableProps, TableSkeleton, Tabs, type TabsProps, TabsSkeleton, TabsTrigger, type TabsTriggerProps, Tag, Text, TextArea, TextAreaComp, type TextAreaProps, type TextProps, type TextTag, type TextVariant, Tooltip, TooltipContent, type TooltipProps, UncontrolledField, UncontrolledFieldProvider, type UncontrolledFormFieldProps, type UseAsyncMultiSelectArgs, type UseAsyncSelectArgs, type UseDrawerResizeParams, type Variant$1 as Variant, asNullish, asNumericStr, asOptional, asRequiredCustom, buildZodIssue, buttonStyles, copyToClipboard, createContextHelper, createToggleContextHelper, createTypedTabs, doesSelectItemMatch, dollarsStrSchema, formatPhoneNumber, formatPhoneNumberForDisplay, getFieldError, inputBoxStyles, inputStyles, isValidPhoneNumber, labelStyles, linkStyles, localStoragePersist, npiSchema, npiSchemaOptional, requiredDollarsStrSchema, requiredDollarsStrSchemaWithCustomMessage, requiredNonZeroDollarsStrSchema, requiredPositiveDollarsStrSchema, requiredPositiveOrZeroDollarsStrSchema, selectedAmountSchema, taxIdSchema, taxonomyCodeSchema, useAsyncMultiSelect, useAsyncSelect, useControlledField, useControlledFormField, useCopyable, useDebounce, useDrawer, useDrawerResize, useForm, useFormContext, useIsEditing, useIsHovered, useIsVisible, useOverflowObserver, useSwitchId, useSyncState, useTable, useToggle, useUncontrolledField, useUncontrolledFormField };
|