@candidhealth/react-vitals 1.0.0-alpha.13 → 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 CHANGED
@@ -20,14 +20,49 @@ import { TabsContentProps } from '@radix-ui/react-tabs';
20
20
 
21
21
  type AvatarVariant = "active" | "inactive";
22
22
  type AvatarSize = "sm" | "md";
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
+ */
23
27
  type AvatarProps = ComponentPropsWithoutRef<"div"> & {
28
+ /** Full name used to derive the displayed initials. */
24
29
  name: string;
30
+ /**
31
+ * Visual emphasis. `inactive` dims the avatar.
32
+ * @default active
33
+ */
25
34
  variant?: AvatarVariant;
35
+ /**
36
+ * Avatar diameter.
37
+ * @default md
38
+ */
26
39
  size?: AvatarSize;
27
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
+ */
28
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. */
29
56
  name: string;
57
+ /**
58
+ * Visual emphasis. `inactive` dims the avatar.
59
+ * @default active
60
+ */
30
61
  variant?: AvatarVariant;
62
+ /**
63
+ * Avatar diameter.
64
+ * @default md
65
+ */
31
66
  size?: AvatarSize;
32
67
  } & React$1.RefAttributes<HTMLDivElement>>;
33
68
 
@@ -71,7 +106,27 @@ type ButtonStyleProps = {
71
106
  roundedness?: ButtonRoundedness;
72
107
  };
73
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
+ */
74
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
+ */
75
130
  declare const Button: React$1.ForwardRefExoticComponent<ButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
76
131
 
77
132
  type ButtonGroupProps<TValue extends string | number> = {
@@ -87,14 +142,41 @@ declare const ButtonGroup: <TValue extends string | number>({ size, value, onCha
87
142
 
88
143
  type CalloutIntent = Extract<Intent, "default" | "warning" | "primary" | "danger">;
89
144
  type CalloutProps = {
145
+ /**
146
+ * Semantic intent driving the background, border, and default leading icon.
147
+ * @default default
148
+ */
90
149
  intent?: CalloutIntent;
150
+ /** Bold heading shown above the body. */
91
151
  title?: React.ReactNode;
152
+ /** Content rendered at the trailing edge, e.g. a dismiss button or action link. */
92
153
  rightSlot?: React.ReactNode;
154
+ /** Body content of the callout. */
93
155
  children?: React.ReactNode;
156
+ /** Overrides the intent's default leading icon. */
94
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
+ */
95
162
  isAttachedAtBottom?: boolean;
163
+ /**
164
+ * Vertically centers the icon with the content instead of top-aligning it.
165
+ * @default false
166
+ */
96
167
  isCentered?: boolean;
97
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
+ */
98
180
  declare const Callout: ({ title, intent, rightSlot, children, customIcon, isAttachedAtBottom, isCentered, }: CalloutProps) => react_jsx_runtime.JSX.Element;
99
181
 
100
182
  type FalsyValues = false | null | undefined | 0;
@@ -118,37 +200,111 @@ type AllAsNever<T> = {
118
200
  };
119
201
 
120
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
+ */
121
207
  onClick?: React__default.MouseEventHandler<HTMLDivElement>;
122
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
+ */
123
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
+ */
124
226
  onClick?: React__default.MouseEventHandler<HTMLDivElement>;
125
227
  } & ClassNameProps & {
126
228
  children?: React__default.ReactNode | undefined;
127
229
  } & React__default.RefAttributes<HTMLDivElement>>;
128
230
 
231
+ /**
232
+ * Props for {@link Checkbox}: all native `<input>` attributes (`checked`, `onChange`, `disabled`,
233
+ * `name`, …) plus the design-system error props.
234
+ */
129
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
+ */
130
247
  declare const Checkbox: React$1.ForwardRefExoticComponent<InputHTMLAttributes<HTMLInputElement> & ErrorProps & React$1.RefAttributes<HTMLInputElement>>;
131
- declare const IndeterminateCheckbox: ({ indeterminate, ...rest }: {
132
- indeterminate?: boolean;
133
- } & CheckboxProps) => react_jsx_runtime.JSX.Element;
134
248
 
135
249
  type CollapsibleProps = {
250
+ /** Always-visible header that toggles the content when clicked. */
136
251
  title: React$1.ReactNode;
252
+ /** Content shown while expanded. */
137
253
  children: React$1.ReactNode;
254
+ /**
255
+ * Initial open state when uncontrolled.
256
+ * @default false
257
+ */
138
258
  defaultOpen?: boolean;
259
+ /**
260
+ * Which side of the title the chevron sits on.
261
+ * @default left
262
+ */
139
263
  iconPosition?: "left" | "right" | undefined;
264
+ /** Hides the chevron entirely. */
140
265
  hideIcon?: boolean;
266
+ /** Controlled open state. Pass together with `setOpen`. */
141
267
  open?: boolean;
268
+ /** Setter for controlled open state. Pass together with `open`. */
142
269
  setOpen?: (open: boolean) => void;
270
+ /** Class name for the clickable trigger row. */
143
271
  triggerClassName?: string;
144
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
+ */
145
284
  declare const Collapsible: ({ title, children, defaultOpen, iconPosition, hideIcon, open: controlledOpen, setOpen: controlledSetOpen, triggerClassName, }: CollapsibleProps) => react_jsx_runtime.JSX.Element;
146
285
 
147
286
  type ToggleButtonProps = ButtonProps;
148
287
  type CollapsibleSectionProps = {
288
+ /** The section, typically containing a {@link CollapsibleSection.ToggleButton} and {@link CollapsibleSection.Content}. */
149
289
  children: React$1.ReactNode;
290
+ /** Whether the section starts expanded. */
150
291
  defaultOpen?: boolean;
151
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
+ */
152
308
  declare const CollapsibleSection: {
153
309
  ({ children, defaultOpen }: CollapsibleSectionProps): react_jsx_runtime.JSX.Element;
154
310
  ToggleButton: ({ children, ...rest }: ToggleButtonProps) => react_jsx_runtime.JSX.Element;
@@ -158,13 +314,37 @@ declare const CollapsibleSection: {
158
314
  };
159
315
 
160
316
  type CopyEasyProps = {
317
+ /** The element the user clicks to copy. */
161
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
+ */
162
323
  value: string | undefined;
324
+ /** Optional hover tooltip describing the copy action. */
163
325
  tooltip?: React$1.ReactNode;
326
+ /** Extra callback invoked after a successful copy. */
164
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
+ */
165
332
  asChild?: boolean;
333
+ /** Class name for the trigger. */
166
334
  className?: string;
167
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
+ */
168
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;
169
349
 
170
350
  declare const useCopyable: () => {
@@ -192,10 +372,41 @@ type DatePickerSingleProps = DatePickerSharedProps & {
192
372
  onChange?: (newDate: Date | undefined) => void;
193
373
  };
194
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
+ */
195
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
+ */
196
398
  declare const DatePicker: (props: DatePickerProps) => react_jsx_runtime.JSX.Element;
197
399
 
400
+ /** Props for {@link Divider}. `className` is merged in, e.g. to add vertical margin. */
198
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
+ */
199
410
  declare const Divider: ({ className }: DividerProps) => react_jsx_runtime.JSX.Element;
200
411
 
201
412
  /** ErrorText will return `null` if `children` is falsy */
@@ -263,10 +474,28 @@ declare const useUncontrolledFormField: {
263
474
  displayName: string;
264
475
  };
265
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
+ */
266
490
  declare const ControlledFieldProvider: {
267
491
  ({ children, ...restField }: FormFieldNameProps & PropsWithChildren): react_jsx_runtime.JSX.Element;
268
492
  displayName: string;
269
493
  };
494
+ /**
495
+ * Reads the controlled field provided by the nearest {@link ControlledFieldProvider}.
496
+ *
497
+ * @throws if called outside a {@link ControlledFieldProvider}.
498
+ */
270
499
  declare const useControlledField: {
271
500
  (): {
272
501
  error: react_hook_form.FieldError | undefined;
@@ -280,17 +509,49 @@ declare const useControlledField: {
280
509
  displayName: string;
281
510
  };
282
511
  type ControlledFieldProps = FormFieldNameProps & {
512
+ /** Render prop receiving the resolved field state (value, handlers, error, …). */
283
513
  render: (props: ReturnType<typeof useControlledFormField>) => React.ReactNode;
284
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
+ */
285
529
  declare const ControlledField: {
286
530
  ({ render, ...restField }: ControlledFieldProps): react_jsx_runtime.JSX.Element;
287
531
  displayName: string;
288
532
  };
289
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
+ */
290
546
  declare const UncontrolledFieldProvider: {
291
547
  ({ children, ...restField }: UncontrolledFormFieldProps & PropsWithChildren): react_jsx_runtime.JSX.Element;
292
548
  displayName: string;
293
549
  };
550
+ /**
551
+ * Reads the uncontrolled field provided by the nearest {@link UncontrolledFieldProvider}.
552
+ *
553
+ * @throws if called outside an {@link UncontrolledFieldProvider}.
554
+ */
294
555
  declare const useUncontrolledField: {
295
556
  (): {
296
557
  register: () => {
@@ -311,8 +572,21 @@ declare const useUncontrolledField: {
311
572
  displayName: string;
312
573
  };
313
574
  type UncontrolledFieldProps = UncontrolledFormFieldProps & {
575
+ /** Render prop receiving the registered field (ref, name, error, …) to spread onto an input. */
314
576
  render: (props: ReturnType<typeof useUncontrolledFormField>) => React.ReactNode;
315
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
+ */
316
590
  declare const UncontrolledField: {
317
591
  ({ render, ...restField }: UncontrolledFieldProps): react_jsx_runtime.JSX.Element;
318
592
  displayName: string;
@@ -360,6 +634,10 @@ type InputBoxStyleProps = {
360
634
  };
361
635
 
362
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
+ */
363
641
  children: React$1.ReactNode;
364
642
  };
365
643
  type InputBaseProps = React$1.ComponentPropsWithoutRef<"input">;
@@ -368,10 +646,20 @@ type CompoundInputBox = React$1.ForwardRefExoticComponent<InputBoxProps & React$
368
646
  Input: typeof NestedInput;
369
647
  };
370
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
+ */
371
653
  type InputProps = InputBoxStyleProps & InputBaseProps;
372
654
  declare const Input: React$1.ForwardRefExoticComponent<InputBoxStyleProps & Omit<React$1.DetailedHTMLProps<React$1.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
373
655
 
374
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
+ */
375
663
  declare const FormInput: ({ name, styles, layout, label, options, onChange, onBlur, disabled, ...rest }: FormInputProps) => react_jsx_runtime.JSX.Element;
376
664
 
377
665
  type DollarInputProps = {
@@ -416,9 +704,23 @@ type FormPercentInputProps = SharedFormControlProps & SharedFormItemProps & {
416
704
  declare const FormPercentInput: ForwardRefExoticComponent<FormPercentInputProps & RefAttributes<HTMLInputElement>>;
417
705
 
418
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
+ */
419
712
  children?: React.ReactNode;
713
+ /** Called with the new checked state whenever the checkbox is toggled. */
420
714
  onChange?: (checked: boolean) => void;
421
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
+ */
422
724
  declare const FormCheckbox: {
423
725
  ({ name, disabled, onChange: propsOnChange, children }: FormCheckboxProps): react_jsx_runtime.JSX.Element;
424
726
  Label: typeof LabelImpl;
@@ -723,25 +1025,70 @@ type SelectListItemProps = {
723
1025
  declare const SelectListItem: ({ sortableId, children, onClick, disabled, focused, }: SelectListItemProps) => react_jsx_runtime.JSX.Element;
724
1026
 
725
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
+ */
726
1034
  declare const FormSelect: <TValue extends SelectValue>({ name, styles, layout, label, options, onChange, ...rest }: FormSelectProps<TValue>) => react_jsx_runtime.JSX.Element;
727
1035
 
728
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
+ */
729
1044
  declare const FormMultiSelect: <TValue extends SelectValue>({ name, styles, layout, label, options, onChange, ...rest }: FormMultiSelectProps<TValue>) => react_jsx_runtime.JSX.Element;
730
1045
 
1046
+ /**
1047
+ * Props for {@link TextArea}: all native `<textarea>` attributes (`value`, `onChange`, `rows`,
1048
+ * `disabled`, …) plus the design-system error props (`hasError`, `errorNode`).
1049
+ */
731
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
+ */
732
1065
  declare const TextArea: React$1.ForwardRefExoticComponent<TextareaHTMLAttributes<HTMLTextAreaElement> & {
733
1066
  hasError?: boolean | undefined;
734
1067
  errorNode?: React$1.ReactNode;
735
1068
  } & React$1.RefAttributes<HTMLTextAreaElement>>;
736
1069
 
737
1070
  type FormTextAreaProps = SharedFormControlProps & SharedFormItemProps & TextAreaProps & {
1071
+ /** Debounce interval in milliseconds for change events. When set, `onChange` fires at most once per interval. */
738
1072
  debounce?: number;
739
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
+ */
740
1080
  declare const FormTextArea: ({ name, styles, layout, label, options, debounce: debounceInterval, ...rest }: FormTextAreaProps) => react_jsx_runtime.JSX.Element;
741
1081
 
742
1082
  type FormSwitchProps = SharedFormControlProps & SharedFormItemProps & {
743
1083
  onChange?: (value: boolean) => void;
744
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
+ */
745
1092
  declare const FormSwitch: ({ name, styles, layout, label, options, onChange, ...props }: FormSwitchProps) => react_jsx_runtime.JSX.Element;
746
1093
 
747
1094
  type RadioButtonGroupItem = {
@@ -760,24 +1107,75 @@ type RadioButtonItemProps = RadioButtonGroupItem & {
760
1107
  declare const RadioButtonItem: ({ value, displayValue, description, expandedContents, expandedContentsStyle, disabled, isChecked, onSelect, asCard, }: RadioButtonItemProps) => react_jsx_runtime.JSX.Element;
761
1108
 
762
1109
  type RadioButtonGroupProps = PropsWithClassName<{
1110
+ /**
1111
+ * The selectable options. Each item supplies its `value`, `displayValue`, and optional
1112
+ * `description` / `expandedContents` shown when selected.
1113
+ */
763
1114
  items: RadioButtonGroupItem[];
1115
+ /** The `value` of the currently selected item (controlled). */
764
1116
  value?: string | undefined;
1117
+ /** Called with the newly selected item's `value`. */
765
1118
  onChange?: (newValue: string) => void;
1119
+ /**
1120
+ * Render each option as a bordered card instead of a plain radio row.
1121
+ * @default false
1122
+ */
766
1123
  asCards?: boolean;
767
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
+ */
768
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
+ */
769
1147
  items: RadioButtonGroupItem[];
1148
+ /** The `value` of the currently selected item (controlled). */
770
1149
  value?: string | undefined;
1150
+ /** Called with the newly selected item's `value`. */
771
1151
  onChange?: (newValue: string) => void;
1152
+ /**
1153
+ * Render each option as a bordered card instead of a plain radio row.
1154
+ * @default false
1155
+ */
772
1156
  asCards?: boolean;
773
1157
  } & ClassNameProps & React$1.RefAttributes<HTMLFieldSetElement>>;
774
1158
 
775
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
+ */
776
1167
  declare const FormRadioButtonGroup: ({ name, items, onChange, asCards, className, }: FormRadioButtonGroupProps) => react_jsx_runtime.JSX.Element;
777
1168
 
778
1169
  type FormDatePickerProps = SharedFormControlProps & SharedFormItemProps & Pick<DatePickerProps, "placeholder" | "minDate" | "range" | "onChange" | "maxDate" | "showTimeInput"> & {
1170
+ /** Ref forwarded to the field's container element. */
779
1171
  containerRef?: React.RefObject<HTMLDivElement>;
780
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
+ */
781
1179
  declare const FormDatePicker: ({ name, styles, layout, label, onChange, options, containerRef, disabled, ...rest }: FormDatePickerProps) => react_jsx_runtime.JSX.Element;
782
1180
 
783
1181
  type UseDrawerResizeParams = {
@@ -799,14 +1197,38 @@ declare const drawerSizes: {
799
1197
  lg: number;
800
1198
  };
801
1199
  type DrawerProps = {
1200
+ /** Whether the drawer is open. Controlled — the drawer never closes itself. */
802
1201
  isOpen: boolean;
1202
+ /** Called when the user requests close (pressing `Escape`). */
803
1203
  onClose?: () => void;
1204
+ /** Called when the user clicks the overlay outside the drawer. */
804
1205
  onClickOutside?: () => void;
1206
+ /** Renders a blurred, click-blocking overlay behind the drawer while open. */
805
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
+ */
806
1213
  width?: keyof typeof drawerSizes;
1214
+ /** Persist the user's resized width (e.g. to localStorage) across opens. */
807
1215
  persistWidth?: PersistDrawerWidth;
1216
+ /** Drawer contents. Rendered lazily (inside `Suspense`) only while open. */
808
1217
  children: React.ReactNode;
809
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
+ */
810
1232
  declare const Drawer: React$1.ForwardRefExoticComponent<DrawerProps & React$1.RefAttributes<HTMLDivElement>>;
811
1233
 
812
1234
  type DrawerHeaderProps = {
@@ -836,22 +1258,70 @@ type DrawerState = {
836
1258
  };
837
1259
  declare const useDrawer: () => DrawerState;
838
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
+ */
839
1273
  declare const DropdownChevron: () => react_jsx_runtime.JSX.Element;
840
1274
 
841
1275
  type EmptyStateProps = {
1276
+ /**
1277
+ * Icon shown above the text.
1278
+ * @default faCircleDashed
1279
+ */
842
1280
  icon?: IconDefinition;
1281
+ /** Primary message explaining why there's nothing to show. */
843
1282
  title: React.ReactNode;
1283
+ /** Optional supporting text, e.g. a hint on how to add data. */
844
1284
  description?: React.ReactNode;
845
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
+ */
846
1298
  declare const EmptyState: React$1.ForwardRefExoticComponent<EmptyStateProps & React$1.RefAttributes<HTMLDivElement>>;
847
1299
 
848
1300
  type HeaderTileProps = {
1301
+ /** Small label shown above the content. */
849
1302
  title: string;
1303
+ /** Main value of the tile; a string is rendered as styled text, otherwise rendered as-is. */
850
1304
  content: string | ReactNode;
1305
+ /** When provided, the tile becomes a button that opens this content in a popover. */
851
1306
  popover?: ReactNode;
1307
+ /** Class name for the tile container. */
852
1308
  className?: string;
1309
+ /** Drops the tile's own border/rounding for use inside a grouped row of tiles. */
853
1310
  grouped?: boolean;
854
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
+ */
855
1325
  declare const HeaderTile: (props: HeaderTileProps) => react_jsx_runtime.JSX.Element;
856
1326
 
857
1327
  type HeaderTileGroupProps = {
@@ -864,8 +1334,21 @@ declare const HeaderTileGroup: {
864
1334
  };
865
1335
 
866
1336
  type IconProps = {
1337
+ /** A Font Awesome icon definition, imported from one of the `@fortawesome/*-svg-icons` packages. */
867
1338
  icon: IconDefinition;
868
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
+ */
869
1352
  declare const Icon: ({ icon }: IconProps) => react_jsx_runtime.JSX.Element;
870
1353
 
871
1354
  type LabelIntent = Intent | "disabled";
@@ -876,7 +1359,18 @@ type LabelStyleProps = {
876
1359
  size?: Size;
877
1360
  };
878
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
+ */
879
1372
  declare const Label: React$1.ForwardRefExoticComponent<{
1373
+ /** Label content. */
880
1374
  children: React$1.ReactNode;
881
1375
  } & LabelStyleProps & React$1.RefAttributes<HTMLSpanElement>>;
882
1376
 
@@ -892,29 +1386,83 @@ declare const ScreenHeightPageContainer: React$1.ForwardRefExoticComponent<Class
892
1386
  } & React$1.RefAttributes<HTMLDivElement>>;
893
1387
 
894
1388
  type LoaderProps = {
1389
+ /** Additional classes, e.g. to override the color. */
895
1390
  className?: string;
1391
+ /** Font Awesome size token (e.g. `"sm"`, `"lg"`, `"2x"`). */
896
1392
  size?: SizeProp;
897
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
+ */
898
1403
  declare const Spinner: ({ className, ...props }: LoaderProps) => react_jsx_runtime.JSX.Element;
899
1404
 
900
1405
  type LoadingStateProps = {
1406
+ /**
1407
+ * Spinner size (Font Awesome token).
1408
+ * @default 2x
1409
+ */
901
1410
  size?: SizeProp;
1411
+ /** Optional heading shown beneath the spinner. */
902
1412
  title?: React.ReactNode;
1413
+ /** Optional supporting text shown beneath the title. */
903
1414
  description?: React.ReactNode;
904
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
+ */
905
1427
  declare const LoadingState: ({ size, title, description }: LoadingStateProps) => react_jsx_runtime.JSX.Element;
906
1428
 
907
1429
  type LoadingBarProps = {
1430
+ /** Class name for the bar track, e.g. to set height or position. */
908
1431
  className?: string;
909
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
+ */
910
1442
  declare const LoadingBar: ({ className }: LoadingBarProps) => react_jsx_runtime.JSX.Element;
911
1443
 
912
1444
  type TwoCirclesSpinnerProps = {
1445
+ /** Class name for the wrapper. */
913
1446
  className?: string;
1447
+ /**
1448
+ * Spinner diameter.
1449
+ * @default md
1450
+ */
914
1451
  size?: "sm" | "md" | "lg" | "xl";
1452
+ /** Optional heading shown beneath the spinner. */
915
1453
  title?: React.ReactNode;
1454
+ /** Optional supporting text shown beneath the title. */
916
1455
  description?: React.ReactNode;
917
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
+ */
918
1466
  declare const TwoCirclesSpinner: ({ className, size, title, description }: TwoCirclesSpinnerProps) => react_jsx_runtime.JSX.Element;
919
1467
 
920
1468
  type MenuContentProps = DropdownMenuContentProps & {
@@ -1011,6 +1559,30 @@ type DiscriminatedContentProps$1 = {
1011
1559
  type ModalProps = DiscriminatedVisibilityProps & ModalContentBaseProps & ModalContentProps & DiscriminatedContentProps$1 & {
1012
1560
  trigger?: React$1.ReactNode;
1013
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
+ */
1014
1586
  declare const Modal: {
1015
1587
  ({ children, trigger, isOpen, onClose, onOpenChange, content, title, error, description, actions, ...rest }: ModalProps): react_jsx_runtime.JSX.Element;
1016
1588
  Body: ({ children, title, error, description, actions, showX, }: ModalBodyImplProps & ChildrenProps) => react_jsx_runtime.JSX.Element;
@@ -1119,6 +1691,16 @@ type OverflowTooltipProps = Pick<React__default.ComponentPropsWithoutRef<typeof
1119
1691
  };
1120
1692
  declare const OverflowTooltip: ({ element, tooltip, side, variant, ...props }: OverflowTooltipProps) => react_jsx_runtime.JSX.Element;
1121
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
+ */
1122
1704
  declare const PhoneNumber: React__default.FC<PhoneInputProps & {
1123
1705
  hasError?: boolean;
1124
1706
  onChange: (value?: string) => void;
@@ -1127,17 +1709,48 @@ declare const PhoneNumber: React__default.FC<PhoneInputProps & {
1127
1709
  type Align = "start" | "center" | "end";
1128
1710
  type Side = "top" | "right" | "bottom" | "left";
1129
1711
  type PopoverProps = {
1712
+ /** Class name applied to the trigger wrapper. */
1130
1713
  triggerClassName?: string;
1714
+ /** Element that opens the popover. Rendered via Radix `asChild`. */
1131
1715
  trigger: React.ReactNode;
1716
+ /** Controls open state. Omit to let the popover manage its own. */
1132
1717
  open?: boolean;
1718
+ /** Disables the trigger. */
1133
1719
  disabled?: boolean;
1720
+ /** Alignment of the content relative to the trigger. */
1134
1721
  alignContent?: Align;
1722
+ /** Side of the trigger the content appears on. */
1135
1723
  side?: Side;
1724
+ /** Class name for the arrow element. */
1136
1725
  arrowClassName?: string;
1726
+ /** Class name for the content container. */
1137
1727
  contentClassName?: string;
1728
+ /** Popover content. */
1138
1729
  children: React.ReactNode;
1730
+ /** Called when the open state changes (controlled or uncontrolled). */
1139
1731
  onOpenChange?: (open: boolean) => void;
1140
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
+ */
1141
1754
  declare const Popover: {
1142
1755
  ({ open, trigger, triggerClassName, children, arrowClassName, contentClassName, disabled, onOpenChange, alignContent, container, ...props }: PopoverProps & PopoverBodyProps): react_jsx_runtime.JSX.Element;
1143
1756
  Root(props: RadixPopover.PopoverProps): react_jsx_runtime.JSX.Element;
@@ -1155,43 +1768,58 @@ type PopoverBodyProps = {
1155
1768
  };
1156
1769
 
1157
1770
  type SkeletonProps = {
1771
+ /** Sizing/shape classes for the placeholder (e.g. `"h-4 w-32"`). */
1158
1772
  className?: string;
1159
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
+ */
1160
1783
  declare const Skeleton: ({ className }: SkeletonProps) => react_jsx_runtime.JSX.Element;
1161
1784
 
1162
- type TabsSkeletonProps = {
1163
- numTabs?: number;
1164
- className?: string;
1165
- tabClassName?: string;
1166
- };
1167
- declare const TabsSkeleton: ({ numTabs, className, tabClassName }: TabsSkeletonProps) => react_jsx_runtime.JSX.Element;
1168
-
1169
- type TableSkeletonProps = {
1170
- numTableCols?: number;
1171
- numTableRows?: number;
1172
- className?: string;
1173
- rowHeight?: number;
1174
- hasBorder?: boolean;
1175
- };
1176
- declare const TableSkeleton: ({ numTableCols, numTableRows, className, rowHeight, hasBorder, }: TableSkeletonProps) => react_jsx_runtime.JSX.Element;
1177
-
1178
- type TableCheckboxSkeletonProps = {
1179
- numTableRows?: number;
1180
- className?: string;
1181
- rowHeight?: number;
1182
- hasBorder?: boolean;
1183
- };
1184
- declare const TableCheckboxSkeleton: ({ numTableRows, className, rowHeight, hasBorder, }: TableCheckboxSkeletonProps) => react_jsx_runtime.JSX.Element;
1185
-
1186
1785
  type StepperProps = {
1786
+ /** Ordered step labels; each renders a numbered circle (1-based) with its label. */
1187
1787
  steps: string[];
1788
+ /** Zero-based index of the active step. */
1188
1789
  currentStep: number;
1790
+ /** Class name for the row container. */
1189
1791
  className?: string;
1190
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
+ */
1191
1802
  declare const Stepper: ({ steps, currentStep, className }: StepperProps) => react_jsx_runtime.JSX.Element;
1192
1803
 
1193
1804
  type SwitchIdValue = string | undefined;
1194
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
+ */
1195
1823
  declare const Switch: {
1196
1824
  ({ children, className, ...rest }: Simplify<Omit<RadixSwitch.SwitchProps, "id">>): react_jsx_runtime.JSX.Element;
1197
1825
  Control: (props: Simplify<RadixSwitch.SwitchProps>) => react_jsx_runtime.JSX.Element;
@@ -1211,19 +1839,56 @@ type ConfigClassNames = {
1211
1839
  cellClassName?: string;
1212
1840
  };
1213
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
+ */
1214
1846
  table: Table$1<T>;
1847
+ /**
1848
+ * Visual treatment of the table chrome (borders, background, spacing).
1849
+ * @default default
1850
+ */
1215
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
+ */
1216
1856
  loading?: boolean;
1217
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
+ */
1218
1871
  declare const Table: <T>({ variant, loading: loadingProp, ...props }: TableProps<T>) => react_jsx_runtime.JSX.Element;
1219
1872
 
1220
1873
  type VirtualizedTableProps<T> = {
1874
+ /** The TanStack table instance to render. */
1221
1875
  table: Table$1<T>;
1876
+ /** Visual style of the table. Defaults to `default`. */
1222
1877
  variant?: Extract<TableVariant, "default" | "subtable">;
1878
+ /** Whether to show the loading state. Falls back to the table's `meta.isLoading` when omitted. */
1223
1879
  loading?: boolean;
1880
+ /** Estimated height in pixels of each row, used to size the virtualizer. Defaults to 37. */
1224
1881
  rowHeight?: number;
1882
+ /** Number of rows to render beyond the visible window. Defaults to 5. */
1225
1883
  overscan?: number;
1226
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
+ */
1227
1892
  declare const VirtualizedTable: <T>({ table, variant, loading: loadingProp, rowHeight, overscan, }: VirtualizedTableProps<T>) => react_jsx_runtime.JSX.Element;
1228
1893
 
1229
1894
  type SortOptions = {
@@ -1929,22 +2594,6 @@ type TabsTriggerProps<TabId extends string> = {
1929
2594
  };
1930
2595
  declare const TabsTrigger: <TabId extends string>({ id, label, disabled, fsId, extra, className, isActive, layoutId, }: TabsTriggerProps<TabId>) => react_jsx_runtime.JSX.Element;
1931
2596
 
1932
- type ScrollTab = {
1933
- tabName: string;
1934
- content: ReactNode;
1935
- };
1936
- type ScrollTabsProps = {
1937
- tabs: ScrollTab[];
1938
- onSelectTab?: (tabId: string) => void;
1939
- sectionClassName?: string;
1940
- };
1941
- /**
1942
- * Reusable component for creating a page layout with a set of tabs which scroll to different
1943
- * sections of the page. The layout will automatically keep track of scroll position and update
1944
- * the selected tab accordingly.
1945
- */
1946
- declare const ScrollTabsLayout: ({ tabs, onSelectTab, sectionClassName }: ScrollTabsProps) => react_jsx_runtime.JSX.Element;
1947
-
1948
2597
  type ComposableTabDefinition<TabId extends string> = {
1949
2598
  id: TabId;
1950
2599
  label: React.ReactNode;
@@ -1974,22 +2623,62 @@ declare const ComposableTabs: {
1974
2623
  };
1975
2624
 
1976
2625
  type TabGroupProps<TabId extends string> = {
2626
+ /** The selectable tabs; each supplies an `id`, `label`, and optional `disabled`. */
1977
2627
  tabs: TabDefinition<TabId>[];
2628
+ /** `id` of the currently selected tab (controlled). */
1978
2629
  currentTab: TabId;
2630
+ /** Called with the newly selected tab's `id`. */
1979
2631
  setCurrentTab: (id: TabId) => void;
2632
+ /**
2633
+ * Control density.
2634
+ * @default md
2635
+ */
1980
2636
  size?: "sm" | "md";
1981
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
+ */
1982
2652
  declare const TabGroup: <TabId extends string>({ tabs, currentTab, setCurrentTab, size, }: TabGroupProps<TabId>) => react_jsx_runtime.JSX.Element;
1983
2653
 
1984
2654
  type TagLabelProps = {
2655
+ /** Tag content. */
1985
2656
  children: React$1.ReactNode;
2657
+ /** When `true`, renders a trailing close button that calls `onRemove`. */
1986
2658
  removable?: boolean;
2659
+ /** Called when the remove button is clicked (only relevant with `removable`). */
1987
2660
  onRemove?: () => void;
2661
+ /**
2662
+ * Color intent of the tag.
2663
+ * @default default
2664
+ */
1988
2665
  intent?: Intent;
1989
2666
  };
1990
2667
  type TagProps = TagLabelProps & {
2668
+ /** Optional tooltip shown on hover; when set, the tag is wrapped in a {@link Tooltip}. */
1991
2669
  tooltip?: string;
1992
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
+ */
1993
2682
  declare const Tag: ({ tooltip, ...rest }: TagProps) => react_jsx_runtime.JSX.Element;
1994
2683
 
1995
2684
  type TextTagElementMap = {
@@ -2011,12 +2700,12 @@ type TextVariant = "marketing-headline" | "headline-1" | "headline-2" | "headlin
2011
2700
  type TextOwnProps<T extends TextTag = "p"> = {
2012
2701
  /**
2013
2702
  * The HTML tag to render
2014
- * @default "p"
2703
+ * @default p
2015
2704
  */
2016
2705
  as?: T;
2017
2706
  /**
2018
2707
  * Typography variant to apply
2019
- * @default "body-1"
2708
+ * @default body-1
2020
2709
  */
2021
2710
  variant?: TextVariant;
2022
2711
  /**
@@ -2028,22 +2717,24 @@ type TextOwnProps<T extends TextTag = "p"> = {
2028
2717
  * Full component props combining Text-specific props with native HTML element props
2029
2718
  */
2030
2719
  type TextProps<T extends TextTag = "p"> = TextOwnProps<T> & Omit<JSX.IntrinsicElements[T], keyof TextOwnProps>;
2720
+ /**
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.
2727
+ *
2728
+ * @example
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>
2735
+ */
2031
2736
  declare const Text: <T extends TextTag = "p">(props: TextProps<T> & {
2032
2737
  ref?: React.ForwardedRef<TextTagElementMap[T]>;
2033
2738
  }) => React.ReactElement;
2034
2739
 
2035
- declare const useIntersectionObserver: <T extends Element>(options?: IntersectionObserverInit) => [React.RefCallback<T>, IntersectionObserverEntry | null];
2036
-
2037
- /**
2038
- * I've found managing hover state with onMouseOver and onMouseOut events can be unreliable
2039
- * when moving the mouse quickly over small targets. So this hook uses an event listener to more reliably track
2040
- * mouse movement.
2041
- */
2042
- declare const useIsHovered: (ref: React.RefObject<HTMLElement>) => boolean;
2043
-
2044
- declare const useOverflowObserver: <T extends HTMLElement>() => {
2045
- elementRef: React$1.RefObject<T>;
2046
- hasOverflow: boolean;
2047
- };
2048
-
2049
- 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, IndeterminateCheckbox, 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, type ScrollTab, ScrollTabsLayout, type ScrollTabsProps, 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, TableCheckboxSkeleton, type TableCheckboxSkeletonProps, type TableProps, TableSkeleton, type TableSkeletonProps, type TableVariant, Tabs, type TabsProps, TabsSkeleton, type TabsSkeletonProps, 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, useIntersectionObserver, useIsHovered, useOverflowObserver, useSwitchId, useTable, useUncontrolledField, useUncontrolledFormField };
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 };