@candidhealth/react-vitals 1.0.0-alpha.12 → 1.0.0-alpha.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.mts +793 -233
- package/dist/index.d.ts +793 -233
- package/dist/index.js +262 -556
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +251 -504
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.d.mts
CHANGED
|
@@ -5,15 +5,13 @@ import { IconDefinition, SizeProp } from '@fortawesome/fontawesome-svg-core';
|
|
|
5
5
|
import { Placement } from '@floating-ui/react';
|
|
6
6
|
import { DatePickerProps as DatePickerProps$1 } from 'react-datepicker';
|
|
7
7
|
import * as react_hook_form from 'react-hook-form';
|
|
8
|
-
import { SubmitHandler,
|
|
9
|
-
export { ControllerRenderProps, Field, FieldArrayWithId, FieldError, FieldErrors, FieldPath, FieldValues, FormProvider, Path, UseControllerProps, UseControllerReturn, UseFieldArrayMove, UseFieldArrayProps, UseFieldArrayRemove, UseFieldArrayReturn, UseFieldArrayUpdate, UseFormGetValues, UseFormProps, UseFormReset, UseFormReturn, useController, useFieldArray, useFormContext, useFormState, useWatch } from 'react-hook-form';
|
|
8
|
+
import { SubmitHandler, UseFormProps, DefaultValues, FieldValues, FieldErrors, FieldPath, FieldError } from 'react-hook-form';
|
|
10
9
|
import { z } from 'zod';
|
|
11
10
|
import * as _radix_ui_react_dropdown_menu from '@radix-ui/react-dropdown-menu';
|
|
12
11
|
import { DropdownMenuProps, DropdownMenuContentProps, DropdownMenuItemProps } from '@radix-ui/react-dropdown-menu';
|
|
13
12
|
import { DialogContentProps } from '@radix-ui/react-dialog';
|
|
14
13
|
import * as RadixTooltip from '@radix-ui/react-tooltip';
|
|
15
14
|
import { PhoneInputProps } from 'react-international-phone';
|
|
16
|
-
export { getCountry } from 'react-international-phone';
|
|
17
15
|
import * as RadixPopover from '@radix-ui/react-popover';
|
|
18
16
|
import * as RadixSwitch from '@radix-ui/react-switch';
|
|
19
17
|
import * as _tanstack_react_table from '@tanstack/react-table';
|
|
@@ -22,15 +20,49 @@ import { TabsContentProps } from '@radix-ui/react-tabs';
|
|
|
22
20
|
|
|
23
21
|
type AvatarVariant = "active" | "inactive";
|
|
24
22
|
type AvatarSize = "sm" | "md";
|
|
25
|
-
|
|
23
|
+
/**
|
|
24
|
+
* Props for {@link Avatar}: the custom props below plus all native `<div>` attributes
|
|
25
|
+
* (`onClick`, `title`, `aria-*`, …), which are forwarded to the root element.
|
|
26
|
+
*/
|
|
26
27
|
type AvatarProps = ComponentPropsWithoutRef<"div"> & {
|
|
28
|
+
/** Full name used to derive the displayed initials. */
|
|
27
29
|
name: string;
|
|
30
|
+
/**
|
|
31
|
+
* Visual emphasis. `inactive` dims the avatar.
|
|
32
|
+
* @default active
|
|
33
|
+
*/
|
|
28
34
|
variant?: AvatarVariant;
|
|
35
|
+
/**
|
|
36
|
+
* Avatar diameter.
|
|
37
|
+
* @default md
|
|
38
|
+
*/
|
|
29
39
|
size?: AvatarSize;
|
|
30
40
|
};
|
|
41
|
+
/**
|
|
42
|
+
* A circular avatar showing a person's initials.
|
|
43
|
+
*
|
|
44
|
+
* Initials are derived from `name`. The `ref` and native `<div>` props are
|
|
45
|
+
* forwarded to the root element. For stacks of avatars or an avatar paired with a name label, see
|
|
46
|
+
* the `AvatarGroup` and `AvatarWithName` components in this module.
|
|
47
|
+
*
|
|
48
|
+
* @example
|
|
49
|
+
* <Avatar name="Ada Lovelace" />
|
|
50
|
+
*
|
|
51
|
+
* @example
|
|
52
|
+
* <Avatar name="Grace Hopper" variant="inactive" size="sm" />
|
|
53
|
+
*/
|
|
31
54
|
declare const Avatar: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
55
|
+
/** Full name used to derive the displayed initials. */
|
|
32
56
|
name: string;
|
|
57
|
+
/**
|
|
58
|
+
* Visual emphasis. `inactive` dims the avatar.
|
|
59
|
+
* @default active
|
|
60
|
+
*/
|
|
33
61
|
variant?: AvatarVariant;
|
|
62
|
+
/**
|
|
63
|
+
* Avatar diameter.
|
|
64
|
+
* @default md
|
|
65
|
+
*/
|
|
34
66
|
size?: AvatarSize;
|
|
35
67
|
} & React$1.RefAttributes<HTMLDivElement>>;
|
|
36
68
|
|
|
@@ -60,7 +92,6 @@ type Justify = "start" | "center" | "end" | "between" | "around";
|
|
|
60
92
|
type Soften = "left" | "right" | "both" | "none";
|
|
61
93
|
type Variant = "default" | "transparent" | "dark";
|
|
62
94
|
|
|
63
|
-
declare const linkStyles = "text-indigo-600 hover:underline active:text-indigo-400 focus:outline-indigo-400 focus:outline-offset-2";
|
|
64
95
|
type ButtonSize = Extract<Size, "xs" | "sm" | "md" | "lg">;
|
|
65
96
|
type ButtonIntent = Extract<Intent, "primary" | "default" | "danger"> | "error";
|
|
66
97
|
type ButtonRoundedness = "default" | "large";
|
|
@@ -74,9 +105,28 @@ type ButtonStyleProps = {
|
|
|
74
105
|
soften?: Soften;
|
|
75
106
|
roundedness?: ButtonRoundedness;
|
|
76
107
|
};
|
|
77
|
-
declare const buttonStyles: ({ fullWidth, size, intent, variant, soften, loading, roundedness, }: Omit<ButtonStyleProps, "disabled">) => string;
|
|
78
108
|
|
|
109
|
+
/**
|
|
110
|
+
* Props for {@link Button}: the design-system style variants merged with all native
|
|
111
|
+
* `<button>` attributes. Any prop not listed below (`onClick`, `type`, `aria-*`, etc.)
|
|
112
|
+
* is a standard button attribute and is forwarded to the underlying element.
|
|
113
|
+
*/
|
|
79
114
|
type ButtonProps = Simplify<ButtonStyleProps & React$1.ComponentPropsWithoutRef<"button">>;
|
|
115
|
+
/**
|
|
116
|
+
* The primary clickable button of the design system.
|
|
117
|
+
*
|
|
118
|
+
* Renders a native `<button>` styled by the `intent`/`variant`/`size` style props.
|
|
119
|
+
*
|
|
120
|
+
* @example
|
|
121
|
+
* <Button intent="primary" onClick={handleSave}>
|
|
122
|
+
* Save
|
|
123
|
+
* </Button>
|
|
124
|
+
*
|
|
125
|
+
* @example Loading
|
|
126
|
+
* <Button intent="primary" loading={isSaving}>
|
|
127
|
+
* Save
|
|
128
|
+
* </Button>
|
|
129
|
+
*/
|
|
80
130
|
declare const Button: React$1.ForwardRefExoticComponent<ButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
|
|
81
131
|
|
|
82
132
|
type ButtonGroupProps<TValue extends string | number> = {
|
|
@@ -92,21 +142,48 @@ declare const ButtonGroup: <TValue extends string | number>({ size, value, onCha
|
|
|
92
142
|
|
|
93
143
|
type CalloutIntent = Extract<Intent, "default" | "warning" | "primary" | "danger">;
|
|
94
144
|
type CalloutProps = {
|
|
145
|
+
/**
|
|
146
|
+
* Semantic intent driving the background, border, and default leading icon.
|
|
147
|
+
* @default default
|
|
148
|
+
*/
|
|
95
149
|
intent?: CalloutIntent;
|
|
150
|
+
/** Bold heading shown above the body. */
|
|
96
151
|
title?: React.ReactNode;
|
|
152
|
+
/** Content rendered at the trailing edge, e.g. a dismiss button or action link. */
|
|
97
153
|
rightSlot?: React.ReactNode;
|
|
154
|
+
/** Body content of the callout. */
|
|
98
155
|
children?: React.ReactNode;
|
|
156
|
+
/** Overrides the intent's default leading icon. */
|
|
99
157
|
customIcon?: IconDefinition;
|
|
158
|
+
/**
|
|
159
|
+
* Squares off the bottom corners so the callout can sit flush against the element below it.
|
|
160
|
+
* @default false
|
|
161
|
+
*/
|
|
100
162
|
isAttachedAtBottom?: boolean;
|
|
163
|
+
/**
|
|
164
|
+
* Vertically centers the icon with the content instead of top-aligning it.
|
|
165
|
+
* @default false
|
|
166
|
+
*/
|
|
101
167
|
isCentered?: boolean;
|
|
102
168
|
};
|
|
169
|
+
/**
|
|
170
|
+
* A boxed, color-coded message for drawing attention to information, warnings, or errors.
|
|
171
|
+
*
|
|
172
|
+
* The `intent` sets the background, border, and a default leading icon (override with `customIcon`).
|
|
173
|
+
* Provide a `title`, body `children`, or both, plus an optional `rightSlot` for a trailing action.
|
|
174
|
+
*
|
|
175
|
+
* @example
|
|
176
|
+
* <Callout intent="warning" title="Heads up">
|
|
177
|
+
* Saving will overwrite the existing draft.
|
|
178
|
+
* </Callout>
|
|
179
|
+
*/
|
|
103
180
|
declare const Callout: ({ title, intent, rightSlot, children, customIcon, isAttachedAtBottom, isCentered, }: CalloutProps) => react_jsx_runtime.JSX.Element;
|
|
104
181
|
|
|
105
182
|
type FalsyValues = false | null | undefined | 0;
|
|
106
183
|
type ClassNameProps = {
|
|
107
184
|
className?: string;
|
|
108
185
|
};
|
|
109
|
-
type ChildrenProps
|
|
186
|
+
type ChildrenProps = PropsWithChildren<unknown>;
|
|
110
187
|
type DisabledProps = {
|
|
111
188
|
disabled?: boolean;
|
|
112
189
|
};
|
|
@@ -114,7 +191,7 @@ type StylesProps = {
|
|
|
114
191
|
styles?: string | FalsyValues;
|
|
115
192
|
};
|
|
116
193
|
type PropsWithClassName<T> = T & ClassNameProps;
|
|
117
|
-
type ErrorProps
|
|
194
|
+
type ErrorProps = {
|
|
118
195
|
hasError?: boolean;
|
|
119
196
|
errorNode?: ReactNode;
|
|
120
197
|
};
|
|
@@ -123,41 +200,111 @@ type AllAsNever<T> = {
|
|
|
123
200
|
};
|
|
124
201
|
|
|
125
202
|
type CardProps = {
|
|
203
|
+
/**
|
|
204
|
+
* Click handler. When provided, the card gains a pointer cursor and a hover elevation to signal
|
|
205
|
+
* that it is interactive.
|
|
206
|
+
*/
|
|
126
207
|
onClick?: React__default.MouseEventHandler<HTMLDivElement>;
|
|
127
|
-
} & ClassNameProps & ChildrenProps
|
|
208
|
+
} & ClassNameProps & ChildrenProps;
|
|
209
|
+
/**
|
|
210
|
+
* A rounded, elevated surface that groups related content.
|
|
211
|
+
*
|
|
212
|
+
* Renders a white container with a border and shadow; the `ref` forwards to the root `<div>`.
|
|
213
|
+
* Supplying `onClick` makes it interactive (cursor + hover elevation). Use `className` to adjust
|
|
214
|
+
* padding, width, or margins.
|
|
215
|
+
*
|
|
216
|
+
* @example
|
|
217
|
+
* <Card className="p-4" onClick={() => openDetails(id)}>
|
|
218
|
+
* <Text variant="title-2">Summary</Text>
|
|
219
|
+
* </Card>
|
|
220
|
+
*/
|
|
128
221
|
declare const Card: React__default.ForwardRefExoticComponent<{
|
|
222
|
+
/**
|
|
223
|
+
* Click handler. When provided, the card gains a pointer cursor and a hover elevation to signal
|
|
224
|
+
* that it is interactive.
|
|
225
|
+
*/
|
|
129
226
|
onClick?: React__default.MouseEventHandler<HTMLDivElement>;
|
|
130
227
|
} & ClassNameProps & {
|
|
131
228
|
children?: React__default.ReactNode | undefined;
|
|
132
229
|
} & React__default.RefAttributes<HTMLDivElement>>;
|
|
133
230
|
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
231
|
+
/**
|
|
232
|
+
* Props for {@link Checkbox}: all native `<input>` attributes (`checked`, `onChange`, `disabled`,
|
|
233
|
+
* `name`, …) plus the design-system error props.
|
|
234
|
+
*/
|
|
138
235
|
type CheckboxProps = InputHTMLAttributes<HTMLInputElement> & ErrorProps;
|
|
236
|
+
/**
|
|
237
|
+
* A styled checkbox input.
|
|
238
|
+
*
|
|
239
|
+
* Renders a native `<input type="checkbox">` with design-system styling and forwards its `ref` and
|
|
240
|
+
* all native attributes, so it works controlled (`checked` + `onChange`) or uncontrolled
|
|
241
|
+
* (`defaultChecked`). Set `hasError` for the error appearance. For the tri-state "some selected"
|
|
242
|
+
* look, use `IndeterminateCheckbox`.
|
|
243
|
+
*
|
|
244
|
+
* @example
|
|
245
|
+
* <Checkbox checked={agreed} onChange={(e) => setAgreed(e.target.checked)} />
|
|
246
|
+
*/
|
|
139
247
|
declare const Checkbox: React$1.ForwardRefExoticComponent<InputHTMLAttributes<HTMLInputElement> & ErrorProps & React$1.RefAttributes<HTMLInputElement>>;
|
|
140
|
-
declare const IndeterminateCheckbox: ({ indeterminate, ...rest }: {
|
|
141
|
-
indeterminate?: boolean;
|
|
142
|
-
} & CheckboxProps) => react_jsx_runtime.JSX.Element;
|
|
143
248
|
|
|
144
249
|
type CollapsibleProps = {
|
|
250
|
+
/** Always-visible header that toggles the content when clicked. */
|
|
145
251
|
title: React$1.ReactNode;
|
|
252
|
+
/** Content shown while expanded. */
|
|
146
253
|
children: React$1.ReactNode;
|
|
254
|
+
/**
|
|
255
|
+
* Initial open state when uncontrolled.
|
|
256
|
+
* @default false
|
|
257
|
+
*/
|
|
147
258
|
defaultOpen?: boolean;
|
|
259
|
+
/**
|
|
260
|
+
* Which side of the title the chevron sits on.
|
|
261
|
+
* @default left
|
|
262
|
+
*/
|
|
148
263
|
iconPosition?: "left" | "right" | undefined;
|
|
264
|
+
/** Hides the chevron entirely. */
|
|
149
265
|
hideIcon?: boolean;
|
|
266
|
+
/** Controlled open state. Pass together with `setOpen`. */
|
|
150
267
|
open?: boolean;
|
|
268
|
+
/** Setter for controlled open state. Pass together with `open`. */
|
|
151
269
|
setOpen?: (open: boolean) => void;
|
|
270
|
+
/** Class name for the clickable trigger row. */
|
|
152
271
|
triggerClassName?: string;
|
|
153
272
|
};
|
|
273
|
+
/**
|
|
274
|
+
* A title row that expands and collapses to reveal its content, built on Radix `Collapsible`.
|
|
275
|
+
*
|
|
276
|
+
* Works uncontrolled (`defaultOpen`) or controlled (pass both `open` and `setOpen`). A chevron
|
|
277
|
+
* reflects the open state; position it with `iconPosition` or remove it with `hideIcon`.
|
|
278
|
+
*
|
|
279
|
+
* @example
|
|
280
|
+
* <Collapsible title="Advanced options">
|
|
281
|
+
* <Options />
|
|
282
|
+
* </Collapsible>
|
|
283
|
+
*/
|
|
154
284
|
declare const Collapsible: ({ title, children, defaultOpen, iconPosition, hideIcon, open: controlledOpen, setOpen: controlledSetOpen, triggerClassName, }: CollapsibleProps) => react_jsx_runtime.JSX.Element;
|
|
155
285
|
|
|
156
286
|
type ToggleButtonProps = ButtonProps;
|
|
157
287
|
type CollapsibleSectionProps = {
|
|
288
|
+
/** The section, typically containing a {@link CollapsibleSection.ToggleButton} and {@link CollapsibleSection.Content}. */
|
|
158
289
|
children: React$1.ReactNode;
|
|
290
|
+
/** Whether the section starts expanded. */
|
|
159
291
|
defaultOpen?: boolean;
|
|
160
292
|
};
|
|
293
|
+
/**
|
|
294
|
+
* A collapsible region whose toggle and content can live anywhere within it.
|
|
295
|
+
*
|
|
296
|
+
* Unlike {@link Collapsible} (a single title-over-content unit), this shares open state via context,
|
|
297
|
+
* so {@link CollapsibleSection.ToggleButton} and {@link CollapsibleSection.Content} can be placed
|
|
298
|
+
* independently in the layout. The toggle is a transparent {@link Button} with a rotating chevron.
|
|
299
|
+
*
|
|
300
|
+
* @example
|
|
301
|
+
* <CollapsibleSection defaultOpen>
|
|
302
|
+
* <CollapsibleSection.ToggleButton>Details</CollapsibleSection.ToggleButton>
|
|
303
|
+
* <CollapsibleSection.Content>
|
|
304
|
+
* <Details />
|
|
305
|
+
* </CollapsibleSection.Content>
|
|
306
|
+
* </CollapsibleSection>
|
|
307
|
+
*/
|
|
161
308
|
declare const CollapsibleSection: {
|
|
162
309
|
({ children, defaultOpen }: CollapsibleSectionProps): react_jsx_runtime.JSX.Element;
|
|
163
310
|
ToggleButton: ({ children, ...rest }: ToggleButtonProps) => react_jsx_runtime.JSX.Element;
|
|
@@ -167,16 +314,39 @@ declare const CollapsibleSection: {
|
|
|
167
314
|
};
|
|
168
315
|
|
|
169
316
|
type CopyEasyProps = {
|
|
317
|
+
/** The element the user clicks to copy. */
|
|
170
318
|
children: React$1.ReactNode;
|
|
319
|
+
/**
|
|
320
|
+
* Text copied to the clipboard on click. When falsy, nothing is copyable: the children render
|
|
321
|
+
* as-is (wrapped in a tooltip if `tooltip` is provided).
|
|
322
|
+
*/
|
|
171
323
|
value: string | undefined;
|
|
324
|
+
/** Optional hover tooltip describing the copy action. */
|
|
172
325
|
tooltip?: React$1.ReactNode;
|
|
326
|
+
/** Extra callback invoked after a successful copy. */
|
|
173
327
|
onClick?: () => void;
|
|
328
|
+
/**
|
|
329
|
+
* Render children directly as the trigger instead of wrapping them in a `<span>`. Use when the
|
|
330
|
+
* child already forwards a ref and props.
|
|
331
|
+
*/
|
|
174
332
|
asChild?: boolean;
|
|
333
|
+
/** Class name for the trigger. */
|
|
175
334
|
className?: string;
|
|
176
335
|
};
|
|
336
|
+
/**
|
|
337
|
+
* Makes its children click-to-copy, with a popover that confirms the copy.
|
|
338
|
+
*
|
|
339
|
+
* Clicking copies `value` to the clipboard and briefly shows a checkmark. If `value` is empty the
|
|
340
|
+
* content is non-interactive (shown plainly, or inside a tooltip when `tooltip` is set). The click
|
|
341
|
+
* is stopped from propagating, so it is safe to nest inside clickable rows.
|
|
342
|
+
*
|
|
343
|
+
* @example
|
|
344
|
+
* <Copyable value={patient.id} tooltip="Copy patient ID">
|
|
345
|
+
* {patient.id}
|
|
346
|
+
* </Copyable>
|
|
347
|
+
*/
|
|
177
348
|
declare const Copyable: ({ children, value, tooltip, onClick, asChild, className }: CopyEasyProps) => string | number | boolean | Iterable<React$1.ReactNode> | react_jsx_runtime.JSX.Element | null | undefined;
|
|
178
349
|
|
|
179
|
-
declare const copyToClipboard: (value: string) => Promise<void>;
|
|
180
350
|
declare const useCopyable: () => {
|
|
181
351
|
state: "idle" | "copying" | "copied";
|
|
182
352
|
copy: (value: string | undefined, onClick?: () => void) => Promise<void>;
|
|
@@ -188,7 +358,7 @@ type DatePickerSharedProps = Pick<DatePickerProps$1, "inline" | "autoFocus" | "s
|
|
|
188
358
|
inputProps?: DatePickerInputProps;
|
|
189
359
|
placeholder?: string;
|
|
190
360
|
position?: Placement;
|
|
191
|
-
} & ErrorProps
|
|
361
|
+
} & ErrorProps;
|
|
192
362
|
|
|
193
363
|
type DatePickerRangeProps = DatePickerSharedProps & {
|
|
194
364
|
value: [Date | undefined, Date | undefined];
|
|
@@ -202,10 +372,41 @@ type DatePickerSingleProps = DatePickerSharedProps & {
|
|
|
202
372
|
onChange?: (newDate: Date | undefined) => void;
|
|
203
373
|
};
|
|
204
374
|
|
|
375
|
+
/**
|
|
376
|
+
* Props for {@link DatePicker}, discriminated by `range`:
|
|
377
|
+
* - `range` omitted/`false` → single-date mode: `value: Date | undefined` and
|
|
378
|
+
* `onChange(date: Date | undefined)`.
|
|
379
|
+
* - `range: true` → range mode: `value: [start, end]` and `onChange([start, end])`.
|
|
380
|
+
*
|
|
381
|
+
* Both modes also accept the shared options (placeholder, error state, popper `position`,
|
|
382
|
+
* `showTimeInput`, `inline`, native `inputProps`, etc.).
|
|
383
|
+
*/
|
|
205
384
|
type DatePickerProps = DatePickerSingleProps | DatePickerRangeProps;
|
|
385
|
+
/**
|
|
386
|
+
* A date input with a calendar popover, in either single-date or date-range mode.
|
|
387
|
+
*
|
|
388
|
+
* Set `range` to switch modes; this changes the types of `value` and `onChange` accordingly (see
|
|
389
|
+
* {@link DatePickerProps}). Controlled — supply `value` and handle `onChange`. Clearing the input
|
|
390
|
+
* emits `undefined` (single) or `[undefined, undefined]` (range).
|
|
391
|
+
*
|
|
392
|
+
* @example Single date
|
|
393
|
+
* <DatePicker value={date} onChange={setDate} placeholder="Select a date" />
|
|
394
|
+
*
|
|
395
|
+
* @example Date range
|
|
396
|
+
* <DatePicker range value={[start, end]} onChange={([s, e]) => setRange([s, e])} />
|
|
397
|
+
*/
|
|
206
398
|
declare const DatePicker: (props: DatePickerProps) => react_jsx_runtime.JSX.Element;
|
|
207
399
|
|
|
400
|
+
/** Props for {@link Divider}. `className` is merged in, e.g. to add vertical margin. */
|
|
208
401
|
type DividerProps = ClassNameProps;
|
|
402
|
+
/**
|
|
403
|
+
* A thin horizontal rule that spans the full width of its container.
|
|
404
|
+
*
|
|
405
|
+
* Use it to separate sections of content. Pass `className` to adjust spacing or color.
|
|
406
|
+
*
|
|
407
|
+
* @example
|
|
408
|
+
* <Divider className="my-4" />
|
|
409
|
+
*/
|
|
209
410
|
declare const Divider: ({ className }: DividerProps) => react_jsx_runtime.JSX.Element;
|
|
210
411
|
|
|
211
412
|
/** ErrorText will return `null` if `children` is falsy */
|
|
@@ -273,10 +474,28 @@ declare const useUncontrolledFormField: {
|
|
|
273
474
|
displayName: string;
|
|
274
475
|
};
|
|
275
476
|
|
|
477
|
+
/**
|
|
478
|
+
* Binds a named, controlled form field and exposes its state to descendants via context.
|
|
479
|
+
*
|
|
480
|
+
* Resolves the field for the given `name` (value, change/blur handlers, error, etc.) and provides it
|
|
481
|
+
* to children, which read it with {@link useControlledField}. Use this when several pieces of UI
|
|
482
|
+
* need the same field's state; for a single input prefer the {@link ControlledField} render prop.
|
|
483
|
+
*
|
|
484
|
+
* @example
|
|
485
|
+
* <ControlledFieldProvider name="email">
|
|
486
|
+
* <EmailInput />
|
|
487
|
+
* <EmailHint />
|
|
488
|
+
* </ControlledFieldProvider>
|
|
489
|
+
*/
|
|
276
490
|
declare const ControlledFieldProvider: {
|
|
277
491
|
({ children, ...restField }: FormFieldNameProps & PropsWithChildren): react_jsx_runtime.JSX.Element;
|
|
278
492
|
displayName: string;
|
|
279
493
|
};
|
|
494
|
+
/**
|
|
495
|
+
* Reads the controlled field provided by the nearest {@link ControlledFieldProvider}.
|
|
496
|
+
*
|
|
497
|
+
* @throws if called outside a {@link ControlledFieldProvider}.
|
|
498
|
+
*/
|
|
280
499
|
declare const useControlledField: {
|
|
281
500
|
(): {
|
|
282
501
|
error: react_hook_form.FieldError | undefined;
|
|
@@ -290,17 +509,49 @@ declare const useControlledField: {
|
|
|
290
509
|
displayName: string;
|
|
291
510
|
};
|
|
292
511
|
type ControlledFieldProps = FormFieldNameProps & {
|
|
512
|
+
/** Render prop receiving the resolved field state (value, handlers, error, …). */
|
|
293
513
|
render: (props: ReturnType<typeof useControlledFormField>) => React.ReactNode;
|
|
294
514
|
};
|
|
515
|
+
/**
|
|
516
|
+
* Binds a named, controlled form field and hands its state to a render prop.
|
|
517
|
+
*
|
|
518
|
+
* The lightweight alternative to {@link ControlledFieldProvider} for a single consumer: wire the
|
|
519
|
+
* field's value and handlers straight into your input.
|
|
520
|
+
*
|
|
521
|
+
* @example
|
|
522
|
+
* <ControlledField
|
|
523
|
+
* name="email"
|
|
524
|
+
* render={({ value, onChange, error }) => (
|
|
525
|
+
* <Input value={value} onChange={onChange} hasError={!!error} />
|
|
526
|
+
* )}
|
|
527
|
+
* />
|
|
528
|
+
*/
|
|
295
529
|
declare const ControlledField: {
|
|
296
530
|
({ render, ...restField }: ControlledFieldProps): react_jsx_runtime.JSX.Element;
|
|
297
531
|
displayName: string;
|
|
298
532
|
};
|
|
299
533
|
|
|
534
|
+
/**
|
|
535
|
+
* Registers a named, uncontrolled form field and exposes it to descendants via context.
|
|
536
|
+
*
|
|
537
|
+
* The uncontrolled counterpart to {@link ControlledFieldProvider}: the field registers with the
|
|
538
|
+
* form (ref-based) rather than tracking value in React state. Children read it with
|
|
539
|
+
* {@link useUncontrolledField}; for a single input prefer the {@link UncontrolledField} render prop.
|
|
540
|
+
*
|
|
541
|
+
* @example
|
|
542
|
+
* <UncontrolledFieldProvider name="title">
|
|
543
|
+
* <TitleInput />
|
|
544
|
+
* </UncontrolledFieldProvider>
|
|
545
|
+
*/
|
|
300
546
|
declare const UncontrolledFieldProvider: {
|
|
301
547
|
({ children, ...restField }: UncontrolledFormFieldProps & PropsWithChildren): react_jsx_runtime.JSX.Element;
|
|
302
548
|
displayName: string;
|
|
303
549
|
};
|
|
550
|
+
/**
|
|
551
|
+
* Reads the uncontrolled field provided by the nearest {@link UncontrolledFieldProvider}.
|
|
552
|
+
*
|
|
553
|
+
* @throws if called outside an {@link UncontrolledFieldProvider}.
|
|
554
|
+
*/
|
|
304
555
|
declare const useUncontrolledField: {
|
|
305
556
|
(): {
|
|
306
557
|
register: () => {
|
|
@@ -321,39 +572,26 @@ declare const useUncontrolledField: {
|
|
|
321
572
|
displayName: string;
|
|
322
573
|
};
|
|
323
574
|
type UncontrolledFieldProps = UncontrolledFormFieldProps & {
|
|
575
|
+
/** Render prop receiving the registered field (ref, name, error, …) to spread onto an input. */
|
|
324
576
|
render: (props: ReturnType<typeof useUncontrolledFormField>) => React.ReactNode;
|
|
325
577
|
};
|
|
578
|
+
/**
|
|
579
|
+
* Registers a named, uncontrolled form field and hands it to a render prop.
|
|
580
|
+
*
|
|
581
|
+
* The lightweight alternative to {@link UncontrolledFieldProvider} for a single consumer: spread the
|
|
582
|
+
* provided registration props onto your input.
|
|
583
|
+
*
|
|
584
|
+
* @example
|
|
585
|
+
* <UncontrolledField
|
|
586
|
+
* name="title"
|
|
587
|
+
* render={(field) => <Input {...field} />}
|
|
588
|
+
* />
|
|
589
|
+
*/
|
|
326
590
|
declare const UncontrolledField: {
|
|
327
591
|
({ render, ...restField }: UncontrolledFieldProps): react_jsx_runtime.JSX.Element;
|
|
328
592
|
displayName: string;
|
|
329
593
|
};
|
|
330
594
|
|
|
331
|
-
declare const getFieldError: <TFieldValues extends FieldValues>(errors: FieldErrors<TFieldValues> | undefined, name: FieldPath<TFieldValues> | undefined) => FieldError | undefined;
|
|
332
|
-
|
|
333
|
-
type InputSize = Extract<Size, "sm" | "md" | "lg">;
|
|
334
|
-
type InputVariants = "default" | "transparent";
|
|
335
|
-
type InputBoxStyleProps = {
|
|
336
|
-
size?: InputSize;
|
|
337
|
-
variant?: InputVariants;
|
|
338
|
-
hasError?: boolean;
|
|
339
|
-
hasWarning?: boolean;
|
|
340
|
-
hasSuccess?: boolean;
|
|
341
|
-
};
|
|
342
|
-
declare const inputBoxStyles: ({ size, variant, hasError, hasWarning, hasSuccess, }: InputBoxStyleProps) => string;
|
|
343
|
-
declare const inputStyles = "w-full text-gray-800 placeholder:text-placeholder disabled:text-placeholder";
|
|
344
|
-
|
|
345
|
-
type InputBoxProps = InputBoxStyleProps & {
|
|
346
|
-
children: React$1.ReactNode;
|
|
347
|
-
};
|
|
348
|
-
type InputBaseProps = React$1.ComponentPropsWithoutRef<"input">;
|
|
349
|
-
declare const NestedInput: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
|
|
350
|
-
type CompoundInputBox = React$1.ForwardRefExoticComponent<InputBoxProps & React$1.RefAttributes<HTMLLabelElement>> & {
|
|
351
|
-
Input: typeof NestedInput;
|
|
352
|
-
};
|
|
353
|
-
declare const InputBox: CompoundInputBox;
|
|
354
|
-
type InputProps = InputBoxStyleProps & InputBaseProps;
|
|
355
|
-
declare const Input: React$1.ForwardRefExoticComponent<InputBoxStyleProps & Omit<React$1.DetailedHTMLProps<React$1.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
|
|
356
|
-
|
|
357
595
|
type FormItemVariants = "none" | "stacked" | "side-by-side" | "inline";
|
|
358
596
|
type InfoTooltip = {
|
|
359
597
|
tooltip: string | undefined;
|
|
@@ -383,7 +621,45 @@ type SharedFormControlProps = StylesProps & {
|
|
|
383
621
|
};
|
|
384
622
|
type CommonSelectProps = "items" | "hideSearch" | "triggerPlaceholder" | "onChange" | "disabled";
|
|
385
623
|
|
|
624
|
+
declare const getFieldError: <TFieldValues extends FieldValues>(errors: FieldErrors<TFieldValues> | undefined, name: FieldPath<TFieldValues> | undefined) => FieldError | undefined;
|
|
625
|
+
|
|
626
|
+
type InputSize = Extract<Size, "sm" | "md" | "lg">;
|
|
627
|
+
type InputVariants = "default" | "transparent";
|
|
628
|
+
type InputBoxStyleProps = {
|
|
629
|
+
size?: InputSize;
|
|
630
|
+
variant?: InputVariants;
|
|
631
|
+
hasError?: boolean;
|
|
632
|
+
hasWarning?: boolean;
|
|
633
|
+
hasSuccess?: boolean;
|
|
634
|
+
};
|
|
635
|
+
|
|
636
|
+
type InputBoxProps = InputBoxStyleProps & {
|
|
637
|
+
/**
|
|
638
|
+
* Contents of the box — typically `<InputBox.Input />` alongside adornments such as icons,
|
|
639
|
+
* a prefix, or a clear button.
|
|
640
|
+
*/
|
|
641
|
+
children: React$1.ReactNode;
|
|
642
|
+
};
|
|
643
|
+
type InputBaseProps = React$1.ComponentPropsWithoutRef<"input">;
|
|
644
|
+
declare const NestedInput: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
|
|
645
|
+
type CompoundInputBox = React$1.ForwardRefExoticComponent<InputBoxProps & React$1.RefAttributes<HTMLLabelElement>> & {
|
|
646
|
+
Input: typeof NestedInput;
|
|
647
|
+
};
|
|
648
|
+
declare const InputBox: CompoundInputBox;
|
|
649
|
+
/**
|
|
650
|
+
* Props for {@link Input}: the design-system style/state props (`size`, `variant`, `hasError`,
|
|
651
|
+
* `hasWarning`, `hasSuccess`, `prefix`) plus all native `<input>` attributes, which pass through.
|
|
652
|
+
*/
|
|
653
|
+
type InputProps = InputBoxStyleProps & InputBaseProps;
|
|
654
|
+
declare const Input: React$1.ForwardRefExoticComponent<InputBoxStyleProps & Omit<React$1.DetailedHTMLProps<React$1.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
|
|
655
|
+
|
|
386
656
|
type FormInputProps = SharedFormControlProps & SharedFormItemProps & Pick<UncontrolledFormFieldProps, "onChange" | "onBlur"> & Pick<InputProps, "placeholder" | "variant" | "prefix" | "type" | "step" | "autoFocus" | "min" | "max">;
|
|
657
|
+
/**
|
|
658
|
+
* Text input bound to a named field of the surrounding form.
|
|
659
|
+
*
|
|
660
|
+
* Registers an uncontrolled field and surfaces its validation error. Forwards input-level props such
|
|
661
|
+
* as `placeholder`, `variant`, `prefix`, and `type` to the underlying {@link Input}.
|
|
662
|
+
*/
|
|
387
663
|
declare const FormInput: ({ name, styles, layout, label, options, onChange, onBlur, disabled, ...rest }: FormInputProps) => react_jsx_runtime.JSX.Element;
|
|
388
664
|
|
|
389
665
|
type DollarInputProps = {
|
|
@@ -428,9 +704,23 @@ type FormPercentInputProps = SharedFormControlProps & SharedFormItemProps & {
|
|
|
428
704
|
declare const FormPercentInput: ForwardRefExoticComponent<FormPercentInputProps & RefAttributes<HTMLInputElement>>;
|
|
429
705
|
|
|
430
706
|
type FormCheckboxProps = Pick<SharedFormControlProps, "name" | "disabled"> & {
|
|
707
|
+
/**
|
|
708
|
+
* Optional content to render in place of the default checkbox. When provided, compose the field
|
|
709
|
+
* yourself with {@link FormCheckbox.Checkbox} and {@link FormCheckbox.Label}; when omitted, a
|
|
710
|
+
* standalone {@link Checkbox} is rendered.
|
|
711
|
+
*/
|
|
431
712
|
children?: React.ReactNode;
|
|
713
|
+
/** Called with the new checked state whenever the checkbox is toggled. */
|
|
432
714
|
onChange?: (checked: boolean) => void;
|
|
433
715
|
};
|
|
716
|
+
/**
|
|
717
|
+
* Checkbox bound to a named field of the surrounding form.
|
|
718
|
+
*
|
|
719
|
+
* Reads and writes the field's boolean value and surfaces its validation error. Used without
|
|
720
|
+
* `children` it renders a standalone {@link Checkbox}; with `children` it provides the field via
|
|
721
|
+
* context so it can be composed with the {@link FormCheckbox.Checkbox} and {@link FormCheckbox.Label}
|
|
722
|
+
* subcomponents.
|
|
723
|
+
*/
|
|
434
724
|
declare const FormCheckbox: {
|
|
435
725
|
({ name, disabled, onChange: propsOnChange, children }: FormCheckboxProps): react_jsx_runtime.JSX.Element;
|
|
436
726
|
Label: typeof LabelImpl;
|
|
@@ -617,7 +907,6 @@ type AsyncMultiSelectControlledProps<TValue extends SelectValue, TObj> = {
|
|
|
617
907
|
onChange: (value: TValue[] | undefined, objs: TObj[]) => void;
|
|
618
908
|
};
|
|
619
909
|
|
|
620
|
-
declare function useDebounce<T>(value: T, delay: number): T;
|
|
621
910
|
type ErrorOr<T> = {
|
|
622
911
|
error: true;
|
|
623
912
|
} | {
|
|
@@ -736,29 +1025,70 @@ type SelectListItemProps = {
|
|
|
736
1025
|
declare const SelectListItem: ({ sortableId, children, onClick, disabled, focused, }: SelectListItemProps) => react_jsx_runtime.JSX.Element;
|
|
737
1026
|
|
|
738
1027
|
type FormSelectProps<TValue extends SelectValue> = SharedFormControlProps & SharedFormItemProps & Pick<SelectProps<TValue>, CommonSelectProps | "loadProps" | "triggerPlaceholder">;
|
|
1028
|
+
/**
|
|
1029
|
+
* Single-select bound to a named field of the surrounding form.
|
|
1030
|
+
*
|
|
1031
|
+
* Reads and writes the field's selected value and surfaces its validation error. Forwards
|
|
1032
|
+
* select-level props such as `loadProps` and `triggerPlaceholder` to the underlying {@link Select}.
|
|
1033
|
+
*/
|
|
739
1034
|
declare const FormSelect: <TValue extends SelectValue>({ name, styles, layout, label, options, onChange, ...rest }: FormSelectProps<TValue>) => react_jsx_runtime.JSX.Element;
|
|
740
1035
|
|
|
741
1036
|
type FormMultiSelectProps<TValue extends SelectValue> = SharedFormControlProps & SharedFormItemProps & Pick<MultiSelectProps<TValue>, CommonSelectProps | "allowCustomValues" | "minSelection" | "maxSelection">;
|
|
1037
|
+
/**
|
|
1038
|
+
* Multi-select bound to a named field of the surrounding form.
|
|
1039
|
+
*
|
|
1040
|
+
* Reads and writes the field's array of selected values and surfaces its validation error. Forwards
|
|
1041
|
+
* select-level props such as `allowCustomValues`, `minSelection`, and `maxSelection` to the
|
|
1042
|
+
* underlying {@link MultiSelect}.
|
|
1043
|
+
*/
|
|
742
1044
|
declare const FormMultiSelect: <TValue extends SelectValue>({ name, styles, layout, label, options, onChange, ...rest }: FormMultiSelectProps<TValue>) => react_jsx_runtime.JSX.Element;
|
|
743
1045
|
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
|
|
747
|
-
|
|
748
|
-
|
|
1046
|
+
/**
|
|
1047
|
+
* Props for {@link TextArea}: all native `<textarea>` attributes (`value`, `onChange`, `rows`,
|
|
1048
|
+
* `disabled`, …) plus the design-system error props (`hasError`, `errorNode`).
|
|
1049
|
+
*/
|
|
1050
|
+
type TextAreaProps = TextareaHTMLAttributes<HTMLTextAreaElement> & Simplify<ErrorProps>;
|
|
1051
|
+
/**
|
|
1052
|
+
* A multi-line text input with built-in error messaging.
|
|
1053
|
+
*
|
|
1054
|
+
* Renders a styled `<textarea>` (controlled or uncontrolled via native props) and, when `hasError`
|
|
1055
|
+
* is set, displays `errorNode` beneath it. The `ref` forwards to the textarea element.
|
|
1056
|
+
*
|
|
1057
|
+
* @example
|
|
1058
|
+
* <TextArea
|
|
1059
|
+
* value={notes}
|
|
1060
|
+
* onChange={(e) => setNotes(e.target.value)}
|
|
1061
|
+
* hasError={!!error}
|
|
1062
|
+
* errorNode={error}
|
|
1063
|
+
* />
|
|
1064
|
+
*/
|
|
749
1065
|
declare const TextArea: React$1.ForwardRefExoticComponent<TextareaHTMLAttributes<HTMLTextAreaElement> & {
|
|
750
1066
|
hasError?: boolean | undefined;
|
|
751
1067
|
errorNode?: React$1.ReactNode;
|
|
752
1068
|
} & React$1.RefAttributes<HTMLTextAreaElement>>;
|
|
753
1069
|
|
|
754
1070
|
type FormTextAreaProps = SharedFormControlProps & SharedFormItemProps & TextAreaProps & {
|
|
1071
|
+
/** Debounce interval in milliseconds for change events. When set, `onChange` fires at most once per interval. */
|
|
755
1072
|
debounce?: number;
|
|
756
1073
|
};
|
|
1074
|
+
/**
|
|
1075
|
+
* Multi-line text input bound to a named field of the surrounding form.
|
|
1076
|
+
*
|
|
1077
|
+
* Registers an uncontrolled field and surfaces its validation error. When `debounce` is set, change
|
|
1078
|
+
* events written back to the field are debounced by that many milliseconds.
|
|
1079
|
+
*/
|
|
757
1080
|
declare const FormTextArea: ({ name, styles, layout, label, options, debounce: debounceInterval, ...rest }: FormTextAreaProps) => react_jsx_runtime.JSX.Element;
|
|
758
1081
|
|
|
759
1082
|
type FormSwitchProps = SharedFormControlProps & SharedFormItemProps & {
|
|
760
1083
|
onChange?: (value: boolean) => void;
|
|
761
1084
|
};
|
|
1085
|
+
/**
|
|
1086
|
+
* Toggle switch bound to a named field of the surrounding form.
|
|
1087
|
+
*
|
|
1088
|
+
* Reads and writes the field's boolean value and surfaces its validation error. With the
|
|
1089
|
+
* `side-by-side` layout the switch sits inline beside its label, description, and error; otherwise it
|
|
1090
|
+
* renders within a standard form item.
|
|
1091
|
+
*/
|
|
762
1092
|
declare const FormSwitch: ({ name, styles, layout, label, options, onChange, ...props }: FormSwitchProps) => react_jsx_runtime.JSX.Element;
|
|
763
1093
|
|
|
764
1094
|
type RadioButtonGroupItem = {
|
|
@@ -777,24 +1107,75 @@ type RadioButtonItemProps = RadioButtonGroupItem & {
|
|
|
777
1107
|
declare const RadioButtonItem: ({ value, displayValue, description, expandedContents, expandedContentsStyle, disabled, isChecked, onSelect, asCard, }: RadioButtonItemProps) => react_jsx_runtime.JSX.Element;
|
|
778
1108
|
|
|
779
1109
|
type RadioButtonGroupProps = PropsWithClassName<{
|
|
1110
|
+
/**
|
|
1111
|
+
* The selectable options. Each item supplies its `value`, `displayValue`, and optional
|
|
1112
|
+
* `description` / `expandedContents` shown when selected.
|
|
1113
|
+
*/
|
|
780
1114
|
items: RadioButtonGroupItem[];
|
|
1115
|
+
/** The `value` of the currently selected item (controlled). */
|
|
781
1116
|
value?: string | undefined;
|
|
1117
|
+
/** Called with the newly selected item's `value`. */
|
|
782
1118
|
onChange?: (newValue: string) => void;
|
|
1119
|
+
/**
|
|
1120
|
+
* Render each option as a bordered card instead of a plain radio row.
|
|
1121
|
+
* @default false
|
|
1122
|
+
*/
|
|
783
1123
|
asCards?: boolean;
|
|
784
1124
|
}>;
|
|
1125
|
+
/**
|
|
1126
|
+
* A single-select group of radio buttons rendered inside a `<fieldset>`.
|
|
1127
|
+
*
|
|
1128
|
+
* Controlled: the selected option is whichever item's `value` matches `value`, and `onChange` fires
|
|
1129
|
+
* with the newly selected `value`. Options come from `items`; set `asCards` to render them as
|
|
1130
|
+
* bordered cards (useful when items have descriptions or expanded content).
|
|
1131
|
+
*
|
|
1132
|
+
* @example
|
|
1133
|
+
* <RadioButtonGroup
|
|
1134
|
+
* value={plan}
|
|
1135
|
+
* onChange={setPlan}
|
|
1136
|
+
* items={[
|
|
1137
|
+
* { value: "monthly", displayValue: "Monthly" },
|
|
1138
|
+
* { value: "annual", displayValue: "Annual", description: "Save 20%" },
|
|
1139
|
+
* ]}
|
|
1140
|
+
* />
|
|
1141
|
+
*/
|
|
785
1142
|
declare const RadioButtonGroup: React$1.ForwardRefExoticComponent<{
|
|
1143
|
+
/**
|
|
1144
|
+
* The selectable options. Each item supplies its `value`, `displayValue`, and optional
|
|
1145
|
+
* `description` / `expandedContents` shown when selected.
|
|
1146
|
+
*/
|
|
786
1147
|
items: RadioButtonGroupItem[];
|
|
1148
|
+
/** The `value` of the currently selected item (controlled). */
|
|
787
1149
|
value?: string | undefined;
|
|
1150
|
+
/** Called with the newly selected item's `value`. */
|
|
788
1151
|
onChange?: (newValue: string) => void;
|
|
1152
|
+
/**
|
|
1153
|
+
* Render each option as a bordered card instead of a plain radio row.
|
|
1154
|
+
* @default false
|
|
1155
|
+
*/
|
|
789
1156
|
asCards?: boolean;
|
|
790
1157
|
} & ClassNameProps & React$1.RefAttributes<HTMLFieldSetElement>>;
|
|
791
1158
|
|
|
792
1159
|
type FormRadioButtonGroupProps = Simplify<Pick<SharedFormControlProps, "name"> & Pick<RadioButtonGroupProps, "items" | "onChange" | "className" | "asCards">>;
|
|
1160
|
+
/**
|
|
1161
|
+
* Radio button group bound to a named field of the surrounding form.
|
|
1162
|
+
*
|
|
1163
|
+
* Reads and writes the field's selected value and surfaces its validation error. Forwards
|
|
1164
|
+
* group-level props such as `items`, `className`, and `asCards` to the underlying
|
|
1165
|
+
* {@link RadioButtonGroup}.
|
|
1166
|
+
*/
|
|
793
1167
|
declare const FormRadioButtonGroup: ({ name, items, onChange, asCards, className, }: FormRadioButtonGroupProps) => react_jsx_runtime.JSX.Element;
|
|
794
1168
|
|
|
795
1169
|
type FormDatePickerProps = SharedFormControlProps & SharedFormItemProps & Pick<DatePickerProps, "placeholder" | "minDate" | "range" | "onChange" | "maxDate" | "showTimeInput"> & {
|
|
1170
|
+
/** Ref forwarded to the field's container element. */
|
|
796
1171
|
containerRef?: React.RefObject<HTMLDivElement>;
|
|
797
1172
|
};
|
|
1173
|
+
/**
|
|
1174
|
+
* Date picker bound to a named field of the surrounding form.
|
|
1175
|
+
*
|
|
1176
|
+
* Reads and writes the field's date value and surfaces its validation error. An empty selection is
|
|
1177
|
+
* normalised to `null` before being written back to the field.
|
|
1178
|
+
*/
|
|
798
1179
|
declare const FormDatePicker: ({ name, styles, layout, label, onChange, options, containerRef, disabled, ...rest }: FormDatePickerProps) => react_jsx_runtime.JSX.Element;
|
|
799
1180
|
|
|
800
1181
|
type UseDrawerResizeParams = {
|
|
@@ -808,7 +1189,6 @@ type PersistDrawerWidth = {
|
|
|
808
1189
|
load: () => number | undefined;
|
|
809
1190
|
save: (widthPct: number) => void;
|
|
810
1191
|
};
|
|
811
|
-
declare const localStoragePersist: (key: string) => PersistDrawerWidth;
|
|
812
1192
|
declare const useDrawerResize: ({ slider, drawer, isOpen, defaultSizePct, persistWidth }: UseDrawerResizeParams) => void;
|
|
813
1193
|
|
|
814
1194
|
declare const drawerSizes: {
|
|
@@ -817,14 +1197,38 @@ declare const drawerSizes: {
|
|
|
817
1197
|
lg: number;
|
|
818
1198
|
};
|
|
819
1199
|
type DrawerProps = {
|
|
1200
|
+
/** Whether the drawer is open. Controlled — the drawer never closes itself. */
|
|
820
1201
|
isOpen: boolean;
|
|
1202
|
+
/** Called when the user requests close (pressing `Escape`). */
|
|
821
1203
|
onClose?: () => void;
|
|
1204
|
+
/** Called when the user clicks the overlay outside the drawer. */
|
|
822
1205
|
onClickOutside?: () => void;
|
|
1206
|
+
/** Renders a blurred, click-blocking overlay behind the drawer while open. */
|
|
823
1207
|
blurredOverlay?: boolean;
|
|
1208
|
+
/**
|
|
1209
|
+
* Initial drawer width as a fraction of the viewport: `sm` (½), `md` (¾), `lg` (⅚).
|
|
1210
|
+
* The user can drag the left edge to resize.
|
|
1211
|
+
* @default md
|
|
1212
|
+
*/
|
|
824
1213
|
width?: keyof typeof drawerSizes;
|
|
1214
|
+
/** Persist the user's resized width (e.g. to localStorage) across opens. */
|
|
825
1215
|
persistWidth?: PersistDrawerWidth;
|
|
1216
|
+
/** Drawer contents. Rendered lazily (inside `Suspense`) only while open. */
|
|
826
1217
|
children: React.ReactNode;
|
|
827
1218
|
};
|
|
1219
|
+
/**
|
|
1220
|
+
* A resizable panel that slides in from the right edge of its positioned container.
|
|
1221
|
+
*
|
|
1222
|
+
* Controlled via `isOpen`; closing is up to the caller (`onClose` fires on `Escape`,
|
|
1223
|
+
* `onClickOutside` on overlay clicks). The user can drag the left edge to resize, and
|
|
1224
|
+
* `persistWidth` remembers that choice. Children mount lazily under `Suspense` (with a loading
|
|
1225
|
+
* fallback) and only while open, so heavy content isn't rendered when the drawer is closed.
|
|
1226
|
+
*
|
|
1227
|
+
* @example
|
|
1228
|
+
* <Drawer isOpen={isOpen} onClose={close} onClickOutside={close} width="lg" blurredOverlay>
|
|
1229
|
+
* <DrawerContents />
|
|
1230
|
+
* </Drawer>
|
|
1231
|
+
*/
|
|
828
1232
|
declare const Drawer: React$1.ForwardRefExoticComponent<DrawerProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
829
1233
|
|
|
830
1234
|
type DrawerHeaderProps = {
|
|
@@ -852,25 +1256,72 @@ type DrawerState = {
|
|
|
852
1256
|
isOpen: boolean;
|
|
853
1257
|
onClose: () => void;
|
|
854
1258
|
};
|
|
855
|
-
declare const DrawerStateContext: React$1.Context<DrawerState>;
|
|
856
1259
|
declare const useDrawer: () => DrawerState;
|
|
857
1260
|
|
|
1261
|
+
/**
|
|
1262
|
+
* The small downward chevron used to mark dropdown/select triggers.
|
|
1263
|
+
*
|
|
1264
|
+
* A fixed-size, muted decorative icon with no props — place it inside a custom trigger to match the
|
|
1265
|
+
* design system's dropdown affordance.
|
|
1266
|
+
*
|
|
1267
|
+
* @example
|
|
1268
|
+
* <button className="flex items-center gap-1">
|
|
1269
|
+
* {label}
|
|
1270
|
+
* <DropdownChevron />
|
|
1271
|
+
* </button>
|
|
1272
|
+
*/
|
|
858
1273
|
declare const DropdownChevron: () => react_jsx_runtime.JSX.Element;
|
|
859
1274
|
|
|
860
1275
|
type EmptyStateProps = {
|
|
1276
|
+
/**
|
|
1277
|
+
* Icon shown above the text.
|
|
1278
|
+
* @default faCircleDashed
|
|
1279
|
+
*/
|
|
861
1280
|
icon?: IconDefinition;
|
|
1281
|
+
/** Primary message explaining why there's nothing to show. */
|
|
862
1282
|
title: React.ReactNode;
|
|
1283
|
+
/** Optional supporting text, e.g. a hint on how to add data. */
|
|
863
1284
|
description?: React.ReactNode;
|
|
864
1285
|
};
|
|
1286
|
+
/**
|
|
1287
|
+
* A centered placeholder for when a list, table, or view has no content.
|
|
1288
|
+
*
|
|
1289
|
+
* Renders an icon, a `title`, and an optional `description`. The `ref` forwards to the root element.
|
|
1290
|
+
*
|
|
1291
|
+
* @example
|
|
1292
|
+
* <EmptyState
|
|
1293
|
+
* icon={faInbox}
|
|
1294
|
+
* title="No messages"
|
|
1295
|
+
* description="New messages will appear here."
|
|
1296
|
+
* />
|
|
1297
|
+
*/
|
|
865
1298
|
declare const EmptyState: React$1.ForwardRefExoticComponent<EmptyStateProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
866
1299
|
|
|
867
1300
|
type HeaderTileProps = {
|
|
1301
|
+
/** Small label shown above the content. */
|
|
868
1302
|
title: string;
|
|
1303
|
+
/** Main value of the tile; a string is rendered as styled text, otherwise rendered as-is. */
|
|
869
1304
|
content: string | ReactNode;
|
|
1305
|
+
/** When provided, the tile becomes a button that opens this content in a popover. */
|
|
870
1306
|
popover?: ReactNode;
|
|
1307
|
+
/** Class name for the tile container. */
|
|
871
1308
|
className?: string;
|
|
1309
|
+
/** Drops the tile's own border/rounding for use inside a grouped row of tiles. */
|
|
872
1310
|
grouped?: boolean;
|
|
873
1311
|
};
|
|
1312
|
+
/**
|
|
1313
|
+
* A compact labeled stat tile for page headers (a `title` over a `content` value).
|
|
1314
|
+
*
|
|
1315
|
+
* When `popover` is provided the tile becomes an interactive button that reveals that content on
|
|
1316
|
+
* click; otherwise it's a static tile. Set `grouped` to drop the border when placing several tiles
|
|
1317
|
+
* side by side.
|
|
1318
|
+
*
|
|
1319
|
+
* @example
|
|
1320
|
+
* <HeaderTile title="Balance" content="$1,240.00" />
|
|
1321
|
+
*
|
|
1322
|
+
* @example With a popover
|
|
1323
|
+
* <HeaderTile title="Status" content="In review" popover={<StatusHistory />} />
|
|
1324
|
+
*/
|
|
874
1325
|
declare const HeaderTile: (props: HeaderTileProps) => react_jsx_runtime.JSX.Element;
|
|
875
1326
|
|
|
876
1327
|
type HeaderTileGroupProps = {
|
|
@@ -883,8 +1334,21 @@ declare const HeaderTileGroup: {
|
|
|
883
1334
|
};
|
|
884
1335
|
|
|
885
1336
|
type IconProps = {
|
|
1337
|
+
/** A Font Awesome icon definition, imported from one of the `@fortawesome/*-svg-icons` packages. */
|
|
886
1338
|
icon: IconDefinition;
|
|
887
1339
|
};
|
|
1340
|
+
/**
|
|
1341
|
+
* Renders a Font Awesome SVG icon.
|
|
1342
|
+
*
|
|
1343
|
+
* A thin wrapper over `FontAwesomeIcon` that constrains the API to a single `icon` prop, keeping
|
|
1344
|
+
* icon usage consistent across the design system. Color and size are inherited from the surrounding
|
|
1345
|
+
* text (`font-size` / `color`).
|
|
1346
|
+
*
|
|
1347
|
+
* @example
|
|
1348
|
+
* import { faCircleInfo } from "@fortawesome/sharp-solid-svg-icons";
|
|
1349
|
+
*
|
|
1350
|
+
* <Icon icon={faCircleInfo} />
|
|
1351
|
+
*/
|
|
888
1352
|
declare const Icon: ({ icon }: IconProps) => react_jsx_runtime.JSX.Element;
|
|
889
1353
|
|
|
890
1354
|
type LabelIntent = Intent | "disabled";
|
|
@@ -894,13 +1358,22 @@ type LabelStyleProps = {
|
|
|
894
1358
|
intent?: LabelIntent;
|
|
895
1359
|
size?: Size;
|
|
896
1360
|
};
|
|
897
|
-
declare const labelStyles: ({ intent, size, variant }: LabelStyleProps) => string;
|
|
898
1361
|
|
|
1362
|
+
/**
|
|
1363
|
+
* A small inline text label/badge with design-system styling.
|
|
1364
|
+
*
|
|
1365
|
+
* Renders a `<span>` styled by `intent` (color), `size`, and `variant`, with the `ref` and any
|
|
1366
|
+
* extra native attributes forwarded. Used on its own for status badges and as the visual base for
|
|
1367
|
+
* {@link Tag}.
|
|
1368
|
+
*
|
|
1369
|
+
* @example
|
|
1370
|
+
* <Label intent="success">Active</Label>
|
|
1371
|
+
*/
|
|
899
1372
|
declare const Label: React$1.ForwardRefExoticComponent<{
|
|
1373
|
+
/** Label content. */
|
|
900
1374
|
children: React$1.ReactNode;
|
|
901
1375
|
} & LabelStyleProps & React$1.RefAttributes<HTMLSpanElement>>;
|
|
902
1376
|
|
|
903
|
-
declare const RESPONSIVE_PADDING = "px-4 md:px-8 lg:px-12 xl:px-16";
|
|
904
1377
|
/**
|
|
905
1378
|
The content container used across the app to get content centered, use consistent padding, and get whole page
|
|
906
1379
|
scrolling to work cohesively.
|
|
@@ -913,29 +1386,83 @@ declare const ScreenHeightPageContainer: React$1.ForwardRefExoticComponent<Class
|
|
|
913
1386
|
} & React$1.RefAttributes<HTMLDivElement>>;
|
|
914
1387
|
|
|
915
1388
|
type LoaderProps = {
|
|
1389
|
+
/** Additional classes, e.g. to override the color. */
|
|
916
1390
|
className?: string;
|
|
1391
|
+
/** Font Awesome size token (e.g. `"sm"`, `"lg"`, `"2x"`). */
|
|
917
1392
|
size?: SizeProp;
|
|
918
1393
|
};
|
|
1394
|
+
/**
|
|
1395
|
+
* A simple spinning loading indicator (a rotating Font Awesome spinner icon).
|
|
1396
|
+
*
|
|
1397
|
+
* Inline by default; size it with `size`. For a centered spinner with
|
|
1398
|
+
* optional text, use {@link LoadingState}.
|
|
1399
|
+
*
|
|
1400
|
+
* @example
|
|
1401
|
+
* <Spinner size="lg" />
|
|
1402
|
+
*/
|
|
919
1403
|
declare const Spinner: ({ className, ...props }: LoaderProps) => react_jsx_runtime.JSX.Element;
|
|
920
1404
|
|
|
921
1405
|
type LoadingStateProps = {
|
|
1406
|
+
/**
|
|
1407
|
+
* Spinner size (Font Awesome token).
|
|
1408
|
+
* @default 2x
|
|
1409
|
+
*/
|
|
922
1410
|
size?: SizeProp;
|
|
1411
|
+
/** Optional heading shown beneath the spinner. */
|
|
923
1412
|
title?: React.ReactNode;
|
|
1413
|
+
/** Optional supporting text shown beneath the title. */
|
|
924
1414
|
description?: React.ReactNode;
|
|
925
1415
|
};
|
|
1416
|
+
/**
|
|
1417
|
+
* A centered spinner with optional title/description that fills its container.
|
|
1418
|
+
*
|
|
1419
|
+
* The standard "loading a whole view/section" indicator (e.g. as a `Suspense` fallback or while a
|
|
1420
|
+
* page's primary query loads). For an inline spinner alone, use {@link Spinner}.
|
|
1421
|
+
*
|
|
1422
|
+
* @example
|
|
1423
|
+
* <Suspense fallback={<LoadingState title="Loading patients…" />}>
|
|
1424
|
+
* <PatientList />
|
|
1425
|
+
* </Suspense>
|
|
1426
|
+
*/
|
|
926
1427
|
declare const LoadingState: ({ size, title, description }: LoadingStateProps) => react_jsx_runtime.JSX.Element;
|
|
927
1428
|
|
|
928
1429
|
type LoadingBarProps = {
|
|
1430
|
+
/** Class name for the bar track, e.g. to set height or position. */
|
|
929
1431
|
className?: string;
|
|
930
1432
|
};
|
|
1433
|
+
/**
|
|
1434
|
+
* An indeterminate progress bar — a shimmer sliding across a full-width track.
|
|
1435
|
+
*
|
|
1436
|
+
* Use it to signal background activity of unknown duration (e.g. refetching a table). For a
|
|
1437
|
+
* blocking, centered loading view use {@link LoadingState}.
|
|
1438
|
+
*
|
|
1439
|
+
* @example
|
|
1440
|
+
* {isFetching && <LoadingBar className="h-1" />}
|
|
1441
|
+
*/
|
|
931
1442
|
declare const LoadingBar: ({ className }: LoadingBarProps) => react_jsx_runtime.JSX.Element;
|
|
932
1443
|
|
|
933
1444
|
type TwoCirclesSpinnerProps = {
|
|
1445
|
+
/** Class name for the wrapper. */
|
|
934
1446
|
className?: string;
|
|
1447
|
+
/**
|
|
1448
|
+
* Spinner diameter.
|
|
1449
|
+
* @default md
|
|
1450
|
+
*/
|
|
935
1451
|
size?: "sm" | "md" | "lg" | "xl";
|
|
1452
|
+
/** Optional heading shown beneath the spinner. */
|
|
936
1453
|
title?: React.ReactNode;
|
|
1454
|
+
/** Optional supporting text shown beneath the title. */
|
|
937
1455
|
description?: React.ReactNode;
|
|
938
1456
|
};
|
|
1457
|
+
/**
|
|
1458
|
+
* A two-ring orbital loading animation with optional title/description.
|
|
1459
|
+
*
|
|
1460
|
+
* A more prominent, branded alternative to {@link LoadingState} for full-screen or marketing-style
|
|
1461
|
+
* loading moments. Two concentric arcs counter-rotate; `size` scales the whole indicator.
|
|
1462
|
+
*
|
|
1463
|
+
* @example
|
|
1464
|
+
* <TwoCirclesSpinner size="lg" title="Setting things up…" />
|
|
1465
|
+
*/
|
|
939
1466
|
declare const TwoCirclesSpinner: ({ className, size, title, description }: TwoCirclesSpinnerProps) => react_jsx_runtime.JSX.Element;
|
|
940
1467
|
|
|
941
1468
|
type MenuContentProps = DropdownMenuContentProps & {
|
|
@@ -951,8 +1478,6 @@ type MenuItemWithToolTipProps = MenuItemProps & {
|
|
|
951
1478
|
*/
|
|
952
1479
|
tooltip?: React$1.ReactNode;
|
|
953
1480
|
};
|
|
954
|
-
declare const MenuRoot: (props: DropdownMenuProps) => react_jsx_runtime.JSX.Element;
|
|
955
|
-
declare const MenuSeparator: () => react_jsx_runtime.JSX.Element;
|
|
956
1481
|
type MenuProps = DropdownMenuProps & Pick<DropdownMenuContentProps, "align"> & {
|
|
957
1482
|
trigger?: React$1.ReactNode;
|
|
958
1483
|
triggerSize?: ButtonProps["size"];
|
|
@@ -994,10 +1519,7 @@ type ModalContentProps = SoftDismissProps & {
|
|
|
994
1519
|
overflowYClassName?: `overflow-y-${string}`;
|
|
995
1520
|
};
|
|
996
1521
|
|
|
997
|
-
type
|
|
998
|
-
children?: React$1.ReactNode;
|
|
999
|
-
};
|
|
1000
|
-
type ModalBodyImplProps$1 = {
|
|
1522
|
+
type ModalBodyImplProps = {
|
|
1001
1523
|
title?: React$1.ReactNode;
|
|
1002
1524
|
error?: React$1.ReactNode;
|
|
1003
1525
|
description?: React$1.ReactNode;
|
|
@@ -1030,16 +1552,40 @@ type DiscriminatedContentProps$1 = {
|
|
|
1030
1552
|
error?: never;
|
|
1031
1553
|
description?: never;
|
|
1032
1554
|
actions?: never;
|
|
1033
|
-
} | (ModalBodyImplProps
|
|
1555
|
+
} | (ModalBodyImplProps & {
|
|
1034
1556
|
children?: never;
|
|
1035
1557
|
content?: React$1.ReactNode;
|
|
1036
1558
|
});
|
|
1037
|
-
type ModalProps
|
|
1559
|
+
type ModalProps = DiscriminatedVisibilityProps & ModalContentBaseProps & ModalContentProps & DiscriminatedContentProps$1 & {
|
|
1038
1560
|
trigger?: React$1.ReactNode;
|
|
1039
1561
|
};
|
|
1562
|
+
/**
|
|
1563
|
+
* A dialog overlay with two interchangeable modes for both visibility and content.
|
|
1564
|
+
*
|
|
1565
|
+
* **Visibility** is either controlled or self-managed (see {@link DiscriminatedVisibilityProps}):
|
|
1566
|
+
* pass `isOpen` + `onClose` to drive it yourself, or pass a `trigger` element to let the modal own
|
|
1567
|
+
* its open state (observe changes via `onOpenChange`). The two sets are mutually exclusive.
|
|
1568
|
+
*
|
|
1569
|
+
* **Content** is either fully custom or structured: pass `children` to render the body yourself, or
|
|
1570
|
+
* pass `content` together with `title` / `description` / `error` / `actions` to use the standard
|
|
1571
|
+
* layout (title bar, scrollable body, sticky actions). These two sets are also mutually exclusive.
|
|
1572
|
+
*
|
|
1573
|
+
* Sub-components: {@link Modal.Body} (the structured layout, also usable directly),
|
|
1574
|
+
* {@link Modal.TriggerButton}, and {@link Modal.CloseButton}.
|
|
1575
|
+
*
|
|
1576
|
+
* @example Controlled
|
|
1577
|
+
* <Modal isOpen={isOpen} onClose={close} title="Delete item" actions={<Button>Delete</Button>}>
|
|
1578
|
+
* This action cannot be undone.
|
|
1579
|
+
* </Modal>
|
|
1580
|
+
*
|
|
1581
|
+
* @example Self-managed via a trigger
|
|
1582
|
+
* <Modal trigger={<Modal.TriggerButton>Open</Modal.TriggerButton>} title="Settings">
|
|
1583
|
+
* <SettingsForm />
|
|
1584
|
+
* </Modal>
|
|
1585
|
+
*/
|
|
1040
1586
|
declare const Modal: {
|
|
1041
|
-
({ children, trigger, isOpen, onClose, onOpenChange, content, title, error, description, actions, ...rest }: ModalProps
|
|
1042
|
-
Body: ({ children, title, error, description, actions, showX, }: ModalBodyImplProps
|
|
1587
|
+
({ children, trigger, isOpen, onClose, onOpenChange, content, title, error, description, actions, ...rest }: ModalProps): react_jsx_runtime.JSX.Element;
|
|
1588
|
+
Body: ({ children, title, error, description, actions, showX, }: ModalBodyImplProps & ChildrenProps) => react_jsx_runtime.JSX.Element;
|
|
1043
1589
|
TriggerButton: (props: undefined) => react_jsx_runtime.JSX.Element;
|
|
1044
1590
|
CloseButton: (props: undefined) => react_jsx_runtime.JSX.Element;
|
|
1045
1591
|
};
|
|
@@ -1052,22 +1598,19 @@ type FullscreenModalHeaderProps = {
|
|
|
1052
1598
|
className?: string;
|
|
1053
1599
|
};
|
|
1054
1600
|
|
|
1055
|
-
type
|
|
1601
|
+
type FullscreenModalProps = DiscriminatedVisibilityProps & ModalContentBaseProps & {
|
|
1056
1602
|
trigger?: React$1.ReactNode;
|
|
1057
1603
|
fullscreen?: boolean;
|
|
1058
1604
|
title?: React$1.ReactNode;
|
|
1059
1605
|
showX?: boolean;
|
|
1060
1606
|
};
|
|
1061
|
-
declare const FullscreenModalNamespace: React$1.ForwardRefExoticComponent<
|
|
1607
|
+
declare const FullscreenModalNamespace: React$1.ForwardRefExoticComponent<FullscreenModalProps & React$1.RefAttributes<HTMLDivElement>> & {
|
|
1062
1608
|
TriggerButton: (props: undefined) => react_jsx_runtime.JSX.Element;
|
|
1063
1609
|
CloseButton: (props: undefined) => react_jsx_runtime.JSX.Element;
|
|
1064
1610
|
Header: ({ className, title, description, leftSlot, rightSlot, }: FullscreenModalHeaderProps) => react_jsx_runtime.JSX.Element;
|
|
1065
1611
|
};
|
|
1066
1612
|
|
|
1067
|
-
type
|
|
1068
|
-
children?: React$1.ReactNode;
|
|
1069
|
-
};
|
|
1070
|
-
type ModalBodyImplProps = {
|
|
1613
|
+
type AlertModalBodyProps = {
|
|
1071
1614
|
title?: React$1.ReactNode;
|
|
1072
1615
|
error?: React$1.ReactNode;
|
|
1073
1616
|
description?: React$1.ReactNode;
|
|
@@ -1080,16 +1623,16 @@ type DiscriminatedContentProps = {
|
|
|
1080
1623
|
error?: never;
|
|
1081
1624
|
description?: never;
|
|
1082
1625
|
actions?: never;
|
|
1083
|
-
} | (
|
|
1626
|
+
} | (AlertModalBodyProps & {
|
|
1084
1627
|
children?: never;
|
|
1085
1628
|
content?: React$1.ReactNode;
|
|
1086
1629
|
});
|
|
1087
|
-
type
|
|
1630
|
+
type AlertModalProps = Simplify<DiscriminatedVisibilityProps & Pick<ModalContentProps, "maxWidthClassName"> & DiscriminatedContentProps & {
|
|
1088
1631
|
trigger?: React$1.ReactNode;
|
|
1089
1632
|
}>;
|
|
1090
1633
|
declare const AlertModal: {
|
|
1091
|
-
({ children, trigger, isOpen, onOpenChange, onClose, content, title, error, description, actions, ...rest }:
|
|
1092
|
-
Body: ({ children, title, error, description, actions }:
|
|
1634
|
+
({ children, trigger, isOpen, onOpenChange, onClose, content, title, error, description, actions, ...rest }: AlertModalProps): react_jsx_runtime.JSX.Element;
|
|
1635
|
+
Body: ({ children, title, error, description, actions }: AlertModalBodyProps & ChildrenProps) => react_jsx_runtime.JSX.Element;
|
|
1093
1636
|
TriggerButton: (props: undefined) => react_jsx_runtime.JSX.Element;
|
|
1094
1637
|
CloseButton: (props: undefined) => react_jsx_runtime.JSX.Element;
|
|
1095
1638
|
};
|
|
@@ -1098,10 +1641,6 @@ type TooltipContentProps = Pick<RadixTooltip.TooltipContentProps, "side"> & {
|
|
|
1098
1641
|
children: React$1.ReactNode;
|
|
1099
1642
|
variant?: "dark" | "light";
|
|
1100
1643
|
};
|
|
1101
|
-
declare const TooltipContent: {
|
|
1102
|
-
({ children, variant, ...rest }: TooltipContentProps): react_jsx_runtime.JSX.Element;
|
|
1103
|
-
displayName: string | undefined;
|
|
1104
|
-
};
|
|
1105
1644
|
type OverflowTriggerProps<TElement extends HTMLElement> = Omit<RadixTooltip.TooltipTriggerProps, "children"> & {
|
|
1106
1645
|
/** The `elementRef` render prop should attach to a measurable DOM element.
|
|
1107
1646
|
*
|
|
@@ -1152,28 +1691,66 @@ type OverflowTooltipProps = Pick<React__default.ComponentPropsWithoutRef<typeof
|
|
|
1152
1691
|
};
|
|
1153
1692
|
declare const OverflowTooltip: ({ element, tooltip, side, variant, ...props }: OverflowTooltipProps) => react_jsx_runtime.JSX.Element;
|
|
1154
1693
|
|
|
1694
|
+
/**
|
|
1695
|
+
* An international phone-number input with a country selector, built on `react-international-phone`.
|
|
1696
|
+
*
|
|
1697
|
+
* Controlled: `onChange` receives the E.164 value (e.g. `"+12025550123"`), or `undefined` when the
|
|
1698
|
+
* field is cleared. Defaults to the US country. Set `hasError` for error styling. All other
|
|
1699
|
+
* `react-international-phone` `PhoneInput` props pass through.
|
|
1700
|
+
*
|
|
1701
|
+
* @example
|
|
1702
|
+
* <PhoneNumber value={phone} onChange={(v) => setPhone(v)} hasError={!!error} />
|
|
1703
|
+
*/
|
|
1155
1704
|
declare const PhoneNumber: React__default.FC<PhoneInputProps & {
|
|
1156
1705
|
hasError?: boolean;
|
|
1157
1706
|
onChange: (value?: string) => void;
|
|
1158
1707
|
}>;
|
|
1159
|
-
declare const formatPhoneNumber: (input: string | undefined) => string | undefined;
|
|
1160
|
-
declare const formatPhoneNumberForDisplay: (input: string | undefined) => string | undefined;
|
|
1161
|
-
declare const isValidPhoneNumber: (input: string | undefined) => boolean;
|
|
1162
1708
|
|
|
1163
1709
|
type Align = "start" | "center" | "end";
|
|
1164
1710
|
type Side = "top" | "right" | "bottom" | "left";
|
|
1165
1711
|
type PopoverProps = {
|
|
1712
|
+
/** Class name applied to the trigger wrapper. */
|
|
1166
1713
|
triggerClassName?: string;
|
|
1714
|
+
/** Element that opens the popover. Rendered via Radix `asChild`. */
|
|
1167
1715
|
trigger: React.ReactNode;
|
|
1716
|
+
/** Controls open state. Omit to let the popover manage its own. */
|
|
1168
1717
|
open?: boolean;
|
|
1718
|
+
/** Disables the trigger. */
|
|
1169
1719
|
disabled?: boolean;
|
|
1720
|
+
/** Alignment of the content relative to the trigger. */
|
|
1170
1721
|
alignContent?: Align;
|
|
1722
|
+
/** Side of the trigger the content appears on. */
|
|
1171
1723
|
side?: Side;
|
|
1724
|
+
/** Class name for the arrow element. */
|
|
1172
1725
|
arrowClassName?: string;
|
|
1726
|
+
/** Class name for the content container. */
|
|
1173
1727
|
contentClassName?: string;
|
|
1728
|
+
/** Popover content. */
|
|
1174
1729
|
children: React.ReactNode;
|
|
1730
|
+
/** Called when the open state changes (controlled or uncontrolled). */
|
|
1175
1731
|
onOpenChange?: (open: boolean) => void;
|
|
1176
1732
|
};
|
|
1733
|
+
/**
|
|
1734
|
+
* A floating content panel anchored to a trigger element, built on Radix `Popover`.
|
|
1735
|
+
*
|
|
1736
|
+
* The all-in-one form takes a `trigger` and `children` and renders a portaled, shadowed card with
|
|
1737
|
+
* an arrow. For finer control over composition, use the compound parts: {@link Popover.Root},
|
|
1738
|
+
* {@link Popover.Trigger} (a styled {@link Button}), {@link Popover.Body}, and {@link Popover.Close}.
|
|
1739
|
+
*
|
|
1740
|
+
* @example
|
|
1741
|
+
* <Popover trigger={<Button>Options</Button>} side="bottom" alignContent="start">
|
|
1742
|
+
* <Menu />
|
|
1743
|
+
* </Popover>
|
|
1744
|
+
*
|
|
1745
|
+
* @example Compound form
|
|
1746
|
+
* <Popover.Root>
|
|
1747
|
+
* <Popover.Trigger>Options</Popover.Trigger>
|
|
1748
|
+
* <Popover.Body>
|
|
1749
|
+
* <Menu />
|
|
1750
|
+
* <Popover.Close><Button>Done</Button></Popover.Close>
|
|
1751
|
+
* </Popover.Body>
|
|
1752
|
+
* </Popover.Root>
|
|
1753
|
+
*/
|
|
1177
1754
|
declare const Popover: {
|
|
1178
1755
|
({ open, trigger, triggerClassName, children, arrowClassName, contentClassName, disabled, onOpenChange, alignContent, container, ...props }: PopoverProps & PopoverBodyProps): react_jsx_runtime.JSX.Element;
|
|
1179
1756
|
Root(props: RadixPopover.PopoverProps): react_jsx_runtime.JSX.Element;
|
|
@@ -1191,43 +1768,58 @@ type PopoverBodyProps = {
|
|
|
1191
1768
|
};
|
|
1192
1769
|
|
|
1193
1770
|
type SkeletonProps = {
|
|
1771
|
+
/** Sizing/shape classes for the placeholder (e.g. `"h-4 w-32"`). */
|
|
1194
1772
|
className?: string;
|
|
1195
1773
|
};
|
|
1774
|
+
/**
|
|
1775
|
+
* An animated grey placeholder shown while content loads.
|
|
1776
|
+
*
|
|
1777
|
+
* Size and shape come entirely from `className`; render one per piece of content you're awaiting to
|
|
1778
|
+
* preserve layout and reduce shift.
|
|
1779
|
+
*
|
|
1780
|
+
* @example
|
|
1781
|
+
* {isLoading ? <Skeleton className="h-4 w-32" /> : <Text>{name}</Text>}
|
|
1782
|
+
*/
|
|
1196
1783
|
declare const Skeleton: ({ className }: SkeletonProps) => react_jsx_runtime.JSX.Element;
|
|
1197
1784
|
|
|
1198
|
-
type TabsSkeletonProps = {
|
|
1199
|
-
numTabs?: number;
|
|
1200
|
-
className?: string;
|
|
1201
|
-
tabClassName?: string;
|
|
1202
|
-
};
|
|
1203
|
-
declare const TabsSkeleton: ({ numTabs, className, tabClassName }: TabsSkeletonProps) => react_jsx_runtime.JSX.Element;
|
|
1204
|
-
|
|
1205
|
-
type TableSkeletonProps$1 = {
|
|
1206
|
-
numTableCols?: number;
|
|
1207
|
-
numTableRows?: number;
|
|
1208
|
-
className?: string;
|
|
1209
|
-
rowHeight?: number;
|
|
1210
|
-
hasBorder?: boolean;
|
|
1211
|
-
};
|
|
1212
|
-
declare const TableSkeleton: ({ numTableCols, numTableRows, className, rowHeight, hasBorder, }: TableSkeletonProps$1) => react_jsx_runtime.JSX.Element;
|
|
1213
|
-
|
|
1214
|
-
type TableSkeletonProps = {
|
|
1215
|
-
numTableRows?: number;
|
|
1216
|
-
className?: string;
|
|
1217
|
-
rowHeight?: number;
|
|
1218
|
-
hasBorder?: boolean;
|
|
1219
|
-
};
|
|
1220
|
-
declare const TableCheckboxSkeleton: ({ numTableRows, className, rowHeight, hasBorder, }: TableSkeletonProps) => react_jsx_runtime.JSX.Element;
|
|
1221
|
-
|
|
1222
1785
|
type StepperProps = {
|
|
1786
|
+
/** Ordered step labels; each renders a numbered circle (1-based) with its label. */
|
|
1223
1787
|
steps: string[];
|
|
1788
|
+
/** Zero-based index of the active step. */
|
|
1224
1789
|
currentStep: number;
|
|
1790
|
+
/** Class name for the row container. */
|
|
1225
1791
|
className?: string;
|
|
1226
1792
|
};
|
|
1793
|
+
/**
|
|
1794
|
+
* A horizontal progress indicator for multi-step flows.
|
|
1795
|
+
*
|
|
1796
|
+
* Renders each label in `steps` as a numbered circle; the step at `currentStep` (zero-based) is
|
|
1797
|
+
* highlighted as active.
|
|
1798
|
+
*
|
|
1799
|
+
* @example
|
|
1800
|
+
* <Stepper steps={["Details", "Payment", "Review"]} currentStep={1} />
|
|
1801
|
+
*/
|
|
1227
1802
|
declare const Stepper: ({ steps, currentStep, className }: StepperProps) => react_jsx_runtime.JSX.Element;
|
|
1228
1803
|
|
|
1229
1804
|
type SwitchIdValue = string | undefined;
|
|
1230
1805
|
declare const useSwitchId: () => SwitchIdValue;
|
|
1806
|
+
/**
|
|
1807
|
+
* A toggle switch, built on Radix `Switch`.
|
|
1808
|
+
*
|
|
1809
|
+
* Controlled via `checked` + `onCheckedChange` (or uncontrolled via `defaultChecked`). Render it
|
|
1810
|
+
* with no `children` for a bare control, or pass `children` containing {@link Switch.Control} and
|
|
1811
|
+
* {@link Switch.Label} to get an accessible label wired to the control automatically (a shared `id`
|
|
1812
|
+
* is generated and linked via `htmlFor`).
|
|
1813
|
+
*
|
|
1814
|
+
* @example Bare control
|
|
1815
|
+
* <Switch checked={enabled} onCheckedChange={setEnabled} />
|
|
1816
|
+
*
|
|
1817
|
+
* @example With a linked label
|
|
1818
|
+
* <Switch checked={enabled} onCheckedChange={setEnabled}>
|
|
1819
|
+
* <Switch.Control />
|
|
1820
|
+
* <Switch.Label>Enable notifications</Switch.Label>
|
|
1821
|
+
* </Switch>
|
|
1822
|
+
*/
|
|
1231
1823
|
declare const Switch: {
|
|
1232
1824
|
({ children, className, ...rest }: Simplify<Omit<RadixSwitch.SwitchProps, "id">>): react_jsx_runtime.JSX.Element;
|
|
1233
1825
|
Control: (props: Simplify<RadixSwitch.SwitchProps>) => react_jsx_runtime.JSX.Element;
|
|
@@ -1246,22 +1838,57 @@ type ConfigClassNames = {
|
|
|
1246
1838
|
rowClassName?: string;
|
|
1247
1839
|
cellClassName?: string;
|
|
1248
1840
|
};
|
|
1249
|
-
declare const headerClassNames: (variant: TableVariant) => ConfigClassNames;
|
|
1250
|
-
declare const bodyClassNames: (variant: TableVariant) => ConfigClassNames;
|
|
1251
1841
|
type TableProps<T> = {
|
|
1842
|
+
/**
|
|
1843
|
+
* A TanStack `react-table` instance. The table reads its data, columns, and behavior
|
|
1844
|
+
* (sorting, resizing, infinite scroll) from this instance's options and `meta`.
|
|
1845
|
+
*/
|
|
1252
1846
|
table: Table$1<T>;
|
|
1847
|
+
/**
|
|
1848
|
+
* Visual treatment of the table chrome (borders, background, spacing).
|
|
1849
|
+
* @default default
|
|
1850
|
+
*/
|
|
1253
1851
|
variant?: TableVariant;
|
|
1852
|
+
/**
|
|
1853
|
+
* Forces the loading state (skeleton rows / dimmed UI). When omitted, the table falls back
|
|
1854
|
+
* to `table.options.meta.isLoading` / `isFetching`.
|
|
1855
|
+
*/
|
|
1254
1856
|
loading?: boolean;
|
|
1255
1857
|
};
|
|
1858
|
+
/**
|
|
1859
|
+
* Renders a TanStack `react-table` instance as a styled table.
|
|
1860
|
+
*
|
|
1861
|
+
* Pass a configured `table` instance and pick a `variant` for the chrome. Loading and fetching
|
|
1862
|
+
* states come from `loading` or, if unset, from the table's `meta`; `default` and `seamless`
|
|
1863
|
+
* variants also support infinite scroll via `meta.infiniteScroll` (a sentinel row fetches the next
|
|
1864
|
+
* page as it scrolls into view).
|
|
1865
|
+
*
|
|
1866
|
+
* @example
|
|
1867
|
+
* const table = useReactTable({ data, columns, getCoreRowModel: getCoreRowModel() });
|
|
1868
|
+
*
|
|
1869
|
+
* <Table table={table} variant="seamless" loading={isLoading} />
|
|
1870
|
+
*/
|
|
1256
1871
|
declare const Table: <T>({ variant, loading: loadingProp, ...props }: TableProps<T>) => react_jsx_runtime.JSX.Element;
|
|
1257
1872
|
|
|
1258
1873
|
type VirtualizedTableProps<T> = {
|
|
1874
|
+
/** The TanStack table instance to render. */
|
|
1259
1875
|
table: Table$1<T>;
|
|
1876
|
+
/** Visual style of the table. Defaults to `default`. */
|
|
1260
1877
|
variant?: Extract<TableVariant, "default" | "subtable">;
|
|
1878
|
+
/** Whether to show the loading state. Falls back to the table's `meta.isLoading` when omitted. */
|
|
1261
1879
|
loading?: boolean;
|
|
1880
|
+
/** Estimated height in pixels of each row, used to size the virtualizer. Defaults to 37. */
|
|
1262
1881
|
rowHeight?: number;
|
|
1882
|
+
/** Number of rows to render beyond the visible window. Defaults to 5. */
|
|
1263
1883
|
overscan?: number;
|
|
1264
1884
|
};
|
|
1885
|
+
/**
|
|
1886
|
+
* Table that renders only the rows in (and near) the viewport using row virtualization, so large
|
|
1887
|
+
* datasets stay performant.
|
|
1888
|
+
*
|
|
1889
|
+
* Supports infinite scroll via the table's `meta.infiniteScroll`: the next page is fetched as the
|
|
1890
|
+
* user nears the end, with skeleton rows shown while more pages remain.
|
|
1891
|
+
*/
|
|
1265
1892
|
declare const VirtualizedTable: <T>({ table, variant, loading: loadingProp, rowHeight, overscan, }: VirtualizedTableProps<T>) => react_jsx_runtime.JSX.Element;
|
|
1266
1893
|
|
|
1267
1894
|
type SortOptions = {
|
|
@@ -1967,22 +2594,6 @@ type TabsTriggerProps<TabId extends string> = {
|
|
|
1967
2594
|
};
|
|
1968
2595
|
declare const TabsTrigger: <TabId extends string>({ id, label, disabled, fsId, extra, className, isActive, layoutId, }: TabsTriggerProps<TabId>) => react_jsx_runtime.JSX.Element;
|
|
1969
2596
|
|
|
1970
|
-
type ScrollTab = {
|
|
1971
|
-
tabName: string;
|
|
1972
|
-
content: ReactNode;
|
|
1973
|
-
};
|
|
1974
|
-
type ScrollTabsProps = {
|
|
1975
|
-
tabs: ScrollTab[];
|
|
1976
|
-
onSelectTab?: (tabId: string) => void;
|
|
1977
|
-
sectionClassName?: string;
|
|
1978
|
-
};
|
|
1979
|
-
/**
|
|
1980
|
-
* Reusable component for creating a page layout with a set of tabs which scroll to different
|
|
1981
|
-
* sections of the page. The layout will automatically keep track of scroll position and update
|
|
1982
|
-
* the selected tab accordingly.
|
|
1983
|
-
*/
|
|
1984
|
-
declare const ScrollTabsLayout: ({ tabs, onSelectTab, sectionClassName }: ScrollTabsProps) => react_jsx_runtime.JSX.Element;
|
|
1985
|
-
|
|
1986
2597
|
type ComposableTabDefinition<TabId extends string> = {
|
|
1987
2598
|
id: TabId;
|
|
1988
2599
|
label: React.ReactNode;
|
|
@@ -2012,22 +2623,62 @@ declare const ComposableTabs: {
|
|
|
2012
2623
|
};
|
|
2013
2624
|
|
|
2014
2625
|
type TabGroupProps<TabId extends string> = {
|
|
2626
|
+
/** The selectable tabs; each supplies an `id`, `label`, and optional `disabled`. */
|
|
2015
2627
|
tabs: TabDefinition<TabId>[];
|
|
2628
|
+
/** `id` of the currently selected tab (controlled). */
|
|
2016
2629
|
currentTab: TabId;
|
|
2630
|
+
/** Called with the newly selected tab's `id`. */
|
|
2017
2631
|
setCurrentTab: (id: TabId) => void;
|
|
2632
|
+
/**
|
|
2633
|
+
* Control density.
|
|
2634
|
+
* @default md
|
|
2635
|
+
*/
|
|
2018
2636
|
size?: "sm" | "md";
|
|
2019
2637
|
};
|
|
2638
|
+
/**
|
|
2639
|
+
* A segmented control for switching between a small set of mutually exclusive tabs.
|
|
2640
|
+
*
|
|
2641
|
+
* Controlled single-select: the tab whose `id` matches `currentTab` is active, and `setCurrentTab`
|
|
2642
|
+
* fires on change. An animated pill slides to the active tab. Use this for a compact, bordered
|
|
2643
|
+
* toggle; for full page-level tab panels use the `Tabs` component instead.
|
|
2644
|
+
*
|
|
2645
|
+
* @example
|
|
2646
|
+
* <TabGroup
|
|
2647
|
+
* tabs={[{ id: "all", label: "All" }, { id: "mine", label: "Mine" }]}
|
|
2648
|
+
* currentTab={tab}
|
|
2649
|
+
* setCurrentTab={setTab}
|
|
2650
|
+
* />
|
|
2651
|
+
*/
|
|
2020
2652
|
declare const TabGroup: <TabId extends string>({ tabs, currentTab, setCurrentTab, size, }: TabGroupProps<TabId>) => react_jsx_runtime.JSX.Element;
|
|
2021
2653
|
|
|
2022
2654
|
type TagLabelProps = {
|
|
2655
|
+
/** Tag content. */
|
|
2023
2656
|
children: React$1.ReactNode;
|
|
2657
|
+
/** When `true`, renders a trailing close button that calls `onRemove`. */
|
|
2024
2658
|
removable?: boolean;
|
|
2659
|
+
/** Called when the remove button is clicked (only relevant with `removable`). */
|
|
2025
2660
|
onRemove?: () => void;
|
|
2661
|
+
/**
|
|
2662
|
+
* Color intent of the tag.
|
|
2663
|
+
* @default default
|
|
2664
|
+
*/
|
|
2026
2665
|
intent?: Intent;
|
|
2027
2666
|
};
|
|
2028
2667
|
type TagProps = TagLabelProps & {
|
|
2668
|
+
/** Optional tooltip shown on hover; when set, the tag is wrapped in a {@link Tooltip}. */
|
|
2029
2669
|
tooltip?: string;
|
|
2030
2670
|
};
|
|
2671
|
+
/**
|
|
2672
|
+
* A compact, color-coded chip — e.g. for categories, statuses, or selected filter values.
|
|
2673
|
+
*
|
|
2674
|
+
* Built on {@link Label}, with optional removability (`removable` + `onRemove` render a close
|
|
2675
|
+
* button) and an optional hover `tooltip`. Set `intent` to control the color.
|
|
2676
|
+
*
|
|
2677
|
+
* @example
|
|
2678
|
+
* <Tag intent="primary" removable onRemove={() => remove(id)}>
|
|
2679
|
+
* In progress
|
|
2680
|
+
* </Tag>
|
|
2681
|
+
*/
|
|
2031
2682
|
declare const Tag: ({ tooltip, ...rest }: TagProps) => react_jsx_runtime.JSX.Element;
|
|
2032
2683
|
|
|
2033
2684
|
type TextTagElementMap = {
|
|
@@ -2042,34 +2693,19 @@ type TextTagElementMap = {
|
|
|
2042
2693
|
label: HTMLLabelElement;
|
|
2043
2694
|
};
|
|
2044
2695
|
type TextTag = keyof TextTagElementMap;
|
|
2045
|
-
|
|
2046
|
-
readonly "marketing-headline": "text-marketing-headline";
|
|
2047
|
-
readonly "headline-1": "text-headline-1";
|
|
2048
|
-
readonly "headline-2": "text-headline-2";
|
|
2049
|
-
readonly "headline-3": "text-headline-3";
|
|
2050
|
-
readonly "headline-4": "text-headline-4";
|
|
2051
|
-
readonly "title-1": "text-title-1";
|
|
2052
|
-
readonly "title-2": "text-title-2";
|
|
2053
|
-
readonly "title-3": "text-title-3";
|
|
2054
|
-
readonly "body-1": "text-body-1";
|
|
2055
|
-
readonly "body-2": "text-body-2";
|
|
2056
|
-
readonly label: "text-label";
|
|
2057
|
-
readonly footnote: "text-footnote";
|
|
2058
|
-
readonly smallcaps: "text-smallcaps uppercase";
|
|
2059
|
-
};
|
|
2060
|
-
type TextVariant = keyof typeof VARIANT_STYLES;
|
|
2696
|
+
type TextVariant = "marketing-headline" | "headline-1" | "headline-2" | "headline-3" | "headline-4" | "title-1" | "title-2" | "title-3" | "body-1" | "body-2" | "label" | "footnote" | "smallcaps";
|
|
2061
2697
|
/**
|
|
2062
2698
|
* Props specific to Text component (excluding native HTML props)
|
|
2063
2699
|
*/
|
|
2064
2700
|
type TextOwnProps<T extends TextTag = "p"> = {
|
|
2065
2701
|
/**
|
|
2066
2702
|
* The HTML tag to render
|
|
2067
|
-
* @default
|
|
2703
|
+
* @default p
|
|
2068
2704
|
*/
|
|
2069
2705
|
as?: T;
|
|
2070
2706
|
/**
|
|
2071
2707
|
* Typography variant to apply
|
|
2072
|
-
* @default
|
|
2708
|
+
* @default body-1
|
|
2073
2709
|
*/
|
|
2074
2710
|
variant?: TextVariant;
|
|
2075
2711
|
/**
|
|
@@ -2081,100 +2717,24 @@ type TextOwnProps<T extends TextTag = "p"> = {
|
|
|
2081
2717
|
* Full component props combining Text-specific props with native HTML element props
|
|
2082
2718
|
*/
|
|
2083
2719
|
type TextProps<T extends TextTag = "p"> = TextOwnProps<T> & Omit<JSX.IntrinsicElements[T], keyof TextOwnProps>;
|
|
2084
|
-
declare const Text: <T extends TextTag = "p">(props: TextProps<T> & {
|
|
2085
|
-
ref?: React.ForwardedRef<TextTagElementMap[T]>;
|
|
2086
|
-
}) => React.ReactElement;
|
|
2087
|
-
|
|
2088
|
-
/**
|
|
2089
|
-
* @example
|
|
2090
|
-
* type FooContextValue = { foo: string };
|
|
2091
|
-
* const [FooProvider, useFoo] = createContextHelper<FooContextValue>({ foo: "bar" });
|
|
2092
|
-
*/
|
|
2093
|
-
declare const createContextHelper: <ContextValue extends object | null>(defaultContext?: ContextValue) => readonly [({ children, ...rest }: ContextValue & {
|
|
2094
|
-
children: React$1.ReactNode;
|
|
2095
|
-
}) => react_jsx_runtime.JSX.Element, () => ContextValue];
|
|
2096
|
-
|
|
2097
|
-
declare const useIntersectionObserver: <T extends Element>(options?: IntersectionObserverInit) => [React.RefCallback<T>, IntersectionObserverEntry | null];
|
|
2098
|
-
|
|
2099
|
-
/**
|
|
2100
|
-
* I've found managing hover state with onMouseOver and onMouseOut events can be unreliable
|
|
2101
|
-
* when moving the mouse quickly over small targets. So this hook uses an event listener to more reliably track
|
|
2102
|
-
* mouse movement.
|
|
2103
|
-
*/
|
|
2104
|
-
declare const useIsHovered: (ref: React.RefObject<HTMLElement>) => boolean;
|
|
2105
|
-
|
|
2106
|
-
declare const useOverflowObserver: <T extends HTMLElement>() => {
|
|
2107
|
-
elementRef: React$1.RefObject<T>;
|
|
2108
|
-
hasOverflow: boolean;
|
|
2109
|
-
};
|
|
2110
|
-
|
|
2111
|
-
declare const useSyncState: <T>(upstream: T) => readonly [T, React$1.Dispatch<React$1.SetStateAction<T>>];
|
|
2112
|
-
|
|
2113
2720
|
/**
|
|
2114
|
-
*
|
|
2115
|
-
*
|
|
2116
|
-
*
|
|
2721
|
+
* Renders text with design-system typography on a semantic HTML element.
|
|
2722
|
+
*
|
|
2723
|
+
* Choose the rendered tag with `as` (defaults to `<p>`) and the typography style with `variant`.
|
|
2724
|
+
* Props are fully typed against the chosen tag, so native attributes (`onClick`, `id`, `htmlFor`,
|
|
2725
|
+
* …) are type-checked and forwarded, and the `ref` points at the corresponding element. `className`
|
|
2726
|
+
* is merged after the variant styles, so it can override them.
|
|
2117
2727
|
*
|
|
2118
|
-
* const {
|
|
2119
|
-
* state, // boolean
|
|
2120
|
-
* update, // (state: boolean) => void
|
|
2121
|
-
* toggle // () => void
|
|
2122
|
-
* } = useToggle();
|
|
2123
|
-
*/
|
|
2124
|
-
declare const createToggleContextHelper: (defaultState?: boolean) => readonly [{
|
|
2125
|
-
({ children, state: initState }: {
|
|
2126
|
-
children: React$1.ReactNode;
|
|
2127
|
-
state?: boolean;
|
|
2128
|
-
}): react_jsx_runtime.JSX.Element;
|
|
2129
|
-
displayName: string;
|
|
2130
|
-
}, () => {
|
|
2131
|
-
state: boolean;
|
|
2132
|
-
update: React$1.Dispatch<React$1.SetStateAction<boolean>>;
|
|
2133
|
-
toggle: () => void;
|
|
2134
|
-
}];
|
|
2135
|
-
/**
|
|
2136
|
-
* @example
|
|
2137
|
-
* const defaultState = true;
|
|
2138
|
-
* const { state, update, toggle } = useIsVisible(defaultState);
|
|
2139
|
-
*/
|
|
2140
|
-
declare const IsVisibleProvider: {
|
|
2141
|
-
({ children, state: initState }: {
|
|
2142
|
-
children: React$1.ReactNode;
|
|
2143
|
-
state?: boolean;
|
|
2144
|
-
}): react_jsx_runtime.JSX.Element;
|
|
2145
|
-
displayName: string;
|
|
2146
|
-
};
|
|
2147
|
-
declare const useIsVisible: () => {
|
|
2148
|
-
state: boolean;
|
|
2149
|
-
update: React$1.Dispatch<React$1.SetStateAction<boolean>>;
|
|
2150
|
-
toggle: () => void;
|
|
2151
|
-
};
|
|
2152
|
-
/**
|
|
2153
|
-
* @example
|
|
2154
|
-
* const defaultState = false;
|
|
2155
|
-
* const { state, update, toggle } = useIsEditing(defaultState);
|
|
2156
|
-
*/
|
|
2157
|
-
declare const IsEditingProvider: {
|
|
2158
|
-
({ children, state: initState }: {
|
|
2159
|
-
children: React$1.ReactNode;
|
|
2160
|
-
state?: boolean;
|
|
2161
|
-
}): react_jsx_runtime.JSX.Element;
|
|
2162
|
-
displayName: string;
|
|
2163
|
-
};
|
|
2164
|
-
declare const useIsEditing: () => {
|
|
2165
|
-
state: boolean;
|
|
2166
|
-
update: React$1.Dispatch<React$1.SetStateAction<boolean>>;
|
|
2167
|
-
toggle: () => void;
|
|
2168
|
-
};
|
|
2169
|
-
/**
|
|
2170
2728
|
* @example
|
|
2171
|
-
*
|
|
2172
|
-
*
|
|
2729
|
+
* <Text>Body copy</Text>
|
|
2730
|
+
*
|
|
2731
|
+
* @example Semantic tag with a typography variant
|
|
2732
|
+
* <Text as="h1" variant="headline-1">
|
|
2733
|
+
* Page title
|
|
2734
|
+
* </Text>
|
|
2173
2735
|
*/
|
|
2174
|
-
declare const
|
|
2175
|
-
|
|
2176
|
-
|
|
2177
|
-
toggle: () => void;
|
|
2178
|
-
};
|
|
2736
|
+
declare const Text: <T extends TextTag = "p">(props: TextProps<T> & {
|
|
2737
|
+
ref?: React.ForwardedRef<TextTagElementMap[T]>;
|
|
2738
|
+
}) => React.ReactElement;
|
|
2179
2739
|
|
|
2180
|
-
export { AlertModal, type AllAsNever, AsyncMultiSelect, type AsyncMultiSelectControlledProps, type AsyncMultiSelectProps, AsyncSelect, type AsyncSelectControlledProps, type AsyncSelectProps, Avatar, AvatarGroup, type AvatarGroupItem, type AvatarGroupProps, type AvatarProps, type AvatarSize, type AvatarVariant, AvatarWithName, type AvatarWithNameProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, type ButtonStyleProps, Callout, type CalloutIntent, type CalloutProps, Card, type CardProps, Checkbox, type CheckboxProps, type ChildrenProps
|
|
2740
|
+
export { AlertModal, type AlertModalBodyProps, type AlertModalProps, type Align, type AllAsNever, AsyncMultiSelect, type AsyncMultiSelectControlledProps, type AsyncMultiSelectProps, AsyncSelect, type AsyncSelectControlledProps, type AsyncSelectProps, Avatar, AvatarGroup, type AvatarGroupItem, type AvatarGroupProps, type AvatarProps, type AvatarSize, type AvatarVariant, AvatarWithName, type AvatarWithNameProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonIntent, type ButtonProps, type ButtonRoundedness, type ButtonSize, type ButtonStyleProps, Callout, type CalloutIntent, type CalloutProps, Card, type CardProps, Checkbox, type CheckboxProps, type ChildrenProps, type ClassNameProps, Collapsible, type CollapsibleProps, CollapsibleSection, type CollapsibleSectionProps, type CommonSelectProps, type ComposableTabContentProps, type ComposableTabDefinition, ComposableTabs, type ComposableTabsListProps, type ComposableTabsProps, type ConfigClassNames, ControlledField, type ControlledFieldProps, ControlledFieldProvider, type CopyEasyProps, Copyable, type CustomTableOptions, DEFAULT_NUM_VALUES_TO_SHOW, DatePicker, type DatePickerInputProps, type DatePickerProps, type DatePickerRangeProps, type DatePickerSharedProps, type DatePickerSingleProps, type DisabledProps, type DiscriminatedSortOptions, type DiscriminatedVisibilityProps, Divider, type DividerProps, DollarInput, type DollarInputProps, Drawer, DrawerHeader, type DrawerHeaderProps, DrawerHeaderSkeleton, type DrawerProps, type DrawerState, DropdownChevron, EmptyState, type EmptyStateProps, type ErrorOr, type ErrorProps, ErrorText, type EventFor, type FalsyValues, FormCheckbox, type FormCheckboxProps, FormDatePicker, type FormDatePickerProps, FormDollarInput, type FormDollarInputProps, type FormFieldNameProps, FormInput, type FormInputProps, type FormItemVariants, FormMultiSelect, type FormMultiSelectProps, FormPercentInput, type FormPercentInputProps, FormRadioButtonGroup, type FormRadioButtonGroupProps, type FormSchema, FormSelect, type FormSelectProps, FormSwitch, type FormSwitchProps, FormTextArea, type FormTextAreaProps, FullscreenModalNamespace as FullscreenModal, type FullscreenModalHeaderProps, type FullscreenModalProps, type GetEventHandlers, HeaderTile, HeaderTileGroup, type HeaderTileGroupProps, type HeaderTileProps, Icon, type IconProps, type InfoTooltip, Input, type InputBaseProps, InputBox, type InputBoxProps, type InputBoxStyleProps, type InputProps, type InputSize, type InputVariants, type Intent, type ItemOptions, type Justify, Label, type LabelIntent, type LabelStyleProps, type LabelVariant, type LoadProps, type LoaderProps, LoadingBar, type LoadingBarProps, LoadingState, type LoadingStateProps, Menu, type MenuContentProps, type MenuItemProps, type MenuItemWithToolTipProps, type MenuProps, Modal, type ModalBodyImplProps, type ModalContentBaseProps, type ModalContentProps, type ModalProps, MultiSelect, type MultiSelectProps, type NonEmpty, type NotUnselectableProps, type OnSubmitHandler, OverflowTooltip, type OverflowTooltipProps, type OverflowTriggerProps, PageContainer, PercentInput, type PercentInputProps, type PersistDrawerWidth, PhoneNumber, Popover, type PopoverBodyProps, type PopoverProps, type PropsWithClassName, RadioButtonGroup, type RadioButtonGroupItem, type RadioButtonGroupProps, RadioButtonItem, type RadioButtonItemProps, ScreenHeightPageContainer, Select, type SelectItem, SelectListItem, type SelectListItemProps, type SelectProps, type SelectValue, SelectWithUnselect, type SelectWithUnselectProps, type SharedFormControlProps, type SharedFormItemProps, type SharedModalProps, type Side, type Size, Skeleton, type SkeletonProps, type SoftDismissProps, type Soften, type SortOptions, Spinner, Stepper, type StepperProps, type StylesProps, Switch, type SwitchIdValue, type TabContentProps, type TabDefinition, TabGroup, type TabGroupProps, Table, type TableProps, type TableVariant, Tabs, type TabsProps, TabsTrigger, type TabsTriggerProps, Tag, type TagLabelProps, type TagProps, Text, TextArea, type TextAreaProps, type TextOwnProps, type TextProps, type TextTag, type TextTagElementMap, type TextVariant, type ToggleButtonProps, Tooltip, type TooltipContentProps, type TooltipProps, TwoCirclesSpinner, type TwoCirclesSpinnerProps, UncontrolledField, type UncontrolledFieldProps, UncontrolledFieldProvider, type UncontrolledFormFieldProps, type UnselectableProps, type UseAsyncMultiSelectArgs, type UseAsyncSelectArgs, type UseDrawerResizeParams, type UseFormOptions, type Variant, VirtualizedTable, type VirtualizedTableProps, doesSelectItemMatch, drawerSizes, getFieldError, tableVariants, useAsyncMultiSelect, useAsyncSelect, useColumnResizing, useControlledField, useControlledFormField, useCopyable, useDrawer, useDrawerResize, useForm, useSwitchId, useTable, useUncontrolledField, useUncontrolledFormField };
|