@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 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, DefaultValues, UseFormProps, FieldValues, FieldErrors, FieldPath, FieldError } from 'react-hook-form';
9
- export { ControllerRenderProps, Field, FieldArrayWithId, FieldError, FieldErrors, FieldPath, FieldValues, FormProvider, Path, UseControllerProps, UseControllerReturn, UseFieldArrayMove, UseFieldArrayProps, UseFieldArrayRemove, UseFieldArrayReturn, UseFieldArrayUpdate, UseFormGetValues, UseFormProps, UseFormReset, UseFormReturn, useController, useFieldArray, 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
- declare const getInitials: (name: string) => string;
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$2 = PropsWithChildren<unknown>;
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$1 = {
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$2;
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
- type ErrorProps = {
135
- hasError?: boolean;
136
- errorNode?: React.ReactNode;
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$1;
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
- type TextAreaProps = TextareaHTMLAttributes<HTMLTextAreaElement> & Simplify<ErrorProps$1>;
745
- declare const TextAreaComp: React$1.ForwardRefExoticComponent<TextareaHTMLAttributes<HTMLTextAreaElement> & {
746
- hasError?: boolean | undefined;
747
- errorNode?: React$1.ReactNode;
748
- } & React$1.RefAttributes<HTMLTextAreaElement>>;
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 ChildrenProps$1 = {
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$1 & {
1555
+ } | (ModalBodyImplProps & {
1034
1556
  children?: never;
1035
1557
  content?: React$1.ReactNode;
1036
1558
  });
1037
- type ModalProps$2 = DiscriminatedVisibilityProps & ModalContentBaseProps & ModalContentProps & DiscriminatedContentProps$1 & {
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$2): react_jsx_runtime.JSX.Element;
1042
- Body: ({ children, title, error, description, actions, showX, }: ModalBodyImplProps$1 & ChildrenProps$1) => react_jsx_runtime.JSX.Element;
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 ModalProps$1 = DiscriminatedVisibilityProps & ModalContentBaseProps & {
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<ModalProps$1 & React$1.RefAttributes<HTMLDivElement>> & {
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 ChildrenProps = {
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
- } | (ModalBodyImplProps & {
1626
+ } | (AlertModalBodyProps & {
1084
1627
  children?: never;
1085
1628
  content?: React$1.ReactNode;
1086
1629
  });
1087
- type ModalProps = Simplify<DiscriminatedVisibilityProps & Pick<ModalContentProps, "maxWidthClassName"> & DiscriminatedContentProps & {
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 }: ModalProps): react_jsx_runtime.JSX.Element;
1092
- Body: ({ children, title, error, description, actions }: ModalBodyImplProps & ChildrenProps) => react_jsx_runtime.JSX.Element;
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
- declare const VARIANT_STYLES: {
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 "p"
2703
+ * @default p
2068
2704
  */
2069
2705
  as?: T;
2070
2706
  /**
2071
2707
  * Typography variant to apply
2072
- * @default "body-1"
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
- * @example
2115
- * const defaultState = false; // optional as false is the default
2116
- * const [Provider, useToggle] = createToggleContextHelper(defaultState);
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
- * const defaultState = false; // optional as false is the default
2172
- * const { state, update, toggle } = useToggle(defaultState);
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 useToggle: (initState?: boolean) => {
2175
- state: boolean;
2176
- update: React$1.Dispatch<React$1.SetStateAction<boolean>>;
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$2 as ChildrenProps, type ClassNameProps, Collapsible, CollapsibleSection, type ComposableTabDefinition, ComposableTabs, type ComposableTabsProps, type ConfigClassNames, ControlledField, ControlledFieldProvider, Copyable, type CustomTableOptions, DEFAULT_NUM_VALUES_TO_SHOW, DatePicker, type DatePickerProps, type DisabledProps, type DiscriminatedVisibilityProps, Divider, type DividerProps, DollarInput, Drawer, DrawerHeader, type DrawerHeaderProps, DrawerHeaderSkeleton, type DrawerState, DrawerStateContext, DropdownChevron, EmptyState, type ErrorProps$1 as ErrorProps, ErrorText, type EventFor, type FalsyValues, FormCheckbox, FormDatePicker, FormDollarInput, type FormDollarInputProps, type FormFieldNameProps, FormInput, FormMultiSelect, FormPercentInput, type FormPercentInputProps, FormRadioButtonGroup, type FormSchema, FormSelect, type FormSelectProps, FormSwitch, FormTextArea, FullscreenModalNamespace as FullscreenModal, HeaderTile, HeaderTileGroup, Icon, IndeterminateCheckbox, Input, InputBox, type InputBoxProps, type InputBoxStyleProps, type InputProps, type Intent, IsEditingProvider, IsVisibleProvider, type Justify, Label, type LabelStyleProps, type LoadProps, LoadingBar, LoadingState, Menu, type MenuProps, MenuRoot, MenuSeparator, Modal, type ModalBodyImplProps$1 as ModalBodyImplProps, MultiSelect, type MultiSelectProps, type NonEmpty, type OnSubmitHandler, OverflowTooltip, PageContainer, PercentInput, type PersistDrawerWidth, PhoneNumber, Popover, type PopoverProps, type PropsWithClassName, RESPONSIVE_PADDING, RadioButtonGroup, type RadioButtonGroupItem, type RadioButtonGroupProps, RadioButtonItem, ScreenHeightPageContainer, ScrollTabsLayout, Select, type SelectItem, SelectListItem, type SelectListItemProps, type SelectProps, type SelectValue, SelectWithUnselect, type SelectWithUnselectProps, type SharedModalProps, type Size, Skeleton, type SkeletonProps, type Soften, Spinner, Stepper, type StepperProps, type StylesProps, Switch, type TabDefinition, TabGroup, Table, TableCheckboxSkeleton, type TableProps, TableSkeleton, type TableVariant, Tabs, type TabsProps, TabsSkeleton, TabsTrigger, type TabsTriggerProps, Tag, Text, TextArea, TextAreaComp, type TextAreaProps, type TextProps, Tooltip, TooltipContent, type TooltipProps, TwoCirclesSpinner, UncontrolledField, UncontrolledFieldProvider, type UncontrolledFormFieldProps, type UseAsyncMultiSelectArgs, type UseAsyncSelectArgs, type UseDrawerResizeParams, type Variant, VirtualizedTable, type VirtualizedTableProps, bodyClassNames, buttonStyles, copyToClipboard, createContextHelper, createToggleContextHelper, doesSelectItemMatch, formatPhoneNumber, formatPhoneNumberForDisplay, getFieldError, getInitials, headerClassNames, inputBoxStyles, inputStyles, isValidPhoneNumber, labelStyles, linkStyles, localStoragePersist, tableVariants, useAsyncMultiSelect, useAsyncSelect, useColumnResizing, useControlledField, useControlledFormField, useCopyable, useDebounce, useDrawer, useDrawerResize, useForm, useIntersectionObserver, useIsEditing, useIsHovered, useIsVisible, useOverflowObserver, useSwitchId, useSyncState, useTable, useToggle, 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 };