@arcfusionz/arc-primitive-ui 0.0.0 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (136) hide show
  1. package/dist/components/AILoader/AILoader.d.ts +32 -0
  2. package/dist/components/AILoader/AILoader.js +157 -0
  3. package/dist/components/AILoader/index.d.ts +2 -0
  4. package/dist/components/AILoader/index.js +2 -0
  5. package/dist/components/Accordion/Accordion.d.ts +96 -0
  6. package/dist/components/Accordion/Accordion.js +149 -0
  7. package/dist/components/Accordion/index.d.ts +2 -0
  8. package/dist/components/Accordion/index.js +2 -0
  9. package/dist/components/Avatar/Avatar.d.ts +152 -0
  10. package/dist/components/Avatar/Avatar.js +216 -0
  11. package/dist/components/Avatar/index.d.ts +2 -0
  12. package/dist/components/Avatar/index.js +2 -0
  13. package/dist/components/Badge/Badge.d.ts +87 -0
  14. package/dist/components/Badge/Badge.js +118 -0
  15. package/dist/components/Badge/index.d.ts +2 -0
  16. package/dist/components/Badge/index.js +2 -0
  17. package/dist/components/Breadcrumb/Breadcrumb.d.ts +109 -0
  18. package/dist/components/Breadcrumb/Breadcrumb.js +182 -0
  19. package/dist/components/Breadcrumb/index.d.ts +2 -0
  20. package/dist/components/Breadcrumb/index.js +2 -0
  21. package/dist/components/Button/Button.d.ts +57 -0
  22. package/dist/components/Button/Button.js +177 -0
  23. package/dist/components/Button/index.d.ts +2 -0
  24. package/dist/components/Button/index.js +2 -0
  25. package/dist/components/Calendar/Calendar.d.ts +140 -0
  26. package/dist/components/Calendar/Calendar.js +468 -0
  27. package/dist/components/Calendar/index.d.ts +2 -0
  28. package/dist/components/Calendar/index.js +2 -0
  29. package/dist/components/Checkbox/Checkbox.d.ts +60 -0
  30. package/dist/components/Checkbox/Checkbox.js +129 -0
  31. package/dist/components/Checkbox/index.d.ts +2 -0
  32. package/dist/components/Checkbox/index.js +2 -0
  33. package/dist/components/Combobox/Combobox.d.ts +251 -0
  34. package/dist/components/Combobox/Combobox.js +354 -0
  35. package/dist/components/Combobox/index.d.ts +2 -0
  36. package/dist/components/Combobox/index.js +2 -0
  37. package/dist/components/ContextMenu/ContextMenu.d.ts +129 -0
  38. package/dist/components/ContextMenu/ContextMenu.js +93 -0
  39. package/dist/components/ContextMenu/index.d.ts +2 -0
  40. package/dist/components/ContextMenu/index.js +2 -0
  41. package/dist/components/DatePicker/DatePicker.d.ts +109 -0
  42. package/dist/components/DatePicker/DatePicker.js +145 -0
  43. package/dist/components/DatePicker/index.d.ts +2 -0
  44. package/dist/components/DatePicker/index.js +2 -0
  45. package/dist/components/DateRangePicker/DateRangePicker.d.ts +107 -0
  46. package/dist/components/DateRangePicker/DateRangePicker.js +161 -0
  47. package/dist/components/DateRangePicker/index.d.ts +2 -0
  48. package/dist/components/DateRangePicker/index.js +2 -0
  49. package/dist/components/Dialog/Dialog.d.ts +112 -0
  50. package/dist/components/Dialog/Dialog.js +141 -0
  51. package/dist/components/Dialog/index.d.ts +2 -0
  52. package/dist/components/Dialog/index.js +2 -0
  53. package/dist/components/Drawer/Drawer.d.ts +188 -0
  54. package/dist/components/Drawer/Drawer.js +268 -0
  55. package/dist/components/Drawer/index.d.ts +2 -0
  56. package/dist/components/Drawer/index.js +2 -0
  57. package/dist/components/Field/Field.d.ts +123 -0
  58. package/dist/components/Field/Field.js +241 -0
  59. package/dist/components/Field/FieldContext.d.ts +43 -0
  60. package/dist/components/Field/FieldContext.js +28 -0
  61. package/dist/components/Field/index.d.ts +3 -0
  62. package/dist/components/Field/index.js +3 -0
  63. package/dist/components/Fieldset/Fieldset.d.ts +43 -0
  64. package/dist/components/Fieldset/Fieldset.js +48 -0
  65. package/dist/components/Fieldset/index.d.ts +2 -0
  66. package/dist/components/Fieldset/index.js +2 -0
  67. package/dist/components/Form/Form.d.ts +54 -0
  68. package/dist/components/Form/Form.js +57 -0
  69. package/dist/components/Form/index.d.ts +2 -0
  70. package/dist/components/Form/index.js +2 -0
  71. package/dist/components/Input/Input.d.ts +64 -0
  72. package/dist/components/Input/Input.js +111 -0
  73. package/dist/components/Input/index.d.ts +2 -0
  74. package/dist/components/Input/index.js +2 -0
  75. package/dist/components/Menu/Menu.d.ts +212 -0
  76. package/dist/components/Menu/Menu.js +255 -0
  77. package/dist/components/Menu/index.d.ts +2 -0
  78. package/dist/components/Menu/index.js +2 -0
  79. package/dist/components/Popover/Popover.d.ts +122 -0
  80. package/dist/components/Popover/Popover.js +116 -0
  81. package/dist/components/Popover/index.d.ts +2 -0
  82. package/dist/components/Popover/index.js +2 -0
  83. package/dist/components/Progress/Progress.d.ts +87 -0
  84. package/dist/components/Progress/Progress.js +73 -0
  85. package/dist/components/Progress/index.d.ts +2 -0
  86. package/dist/components/Progress/index.js +2 -0
  87. package/dist/components/Radio/Radio.d.ts +65 -0
  88. package/dist/components/Radio/Radio.js +93 -0
  89. package/dist/components/Radio/index.d.ts +2 -0
  90. package/dist/components/Radio/index.js +2 -0
  91. package/dist/components/Select/Select.d.ts +136 -0
  92. package/dist/components/Select/Select.js +219 -0
  93. package/dist/components/Select/index.d.ts +2 -0
  94. package/dist/components/Select/index.js +2 -0
  95. package/dist/components/Skeleton/Skeleton.d.ts +39 -0
  96. package/dist/components/Skeleton/Skeleton.js +44 -0
  97. package/dist/components/Skeleton/index.d.ts +2 -0
  98. package/dist/components/Skeleton/index.js +2 -0
  99. package/dist/components/Stepper/Stepper.d.ts +161 -0
  100. package/dist/components/Stepper/Stepper.js +344 -0
  101. package/dist/components/Stepper/index.d.ts +2 -0
  102. package/dist/components/Stepper/index.js +2 -0
  103. package/dist/components/Switch/Switch.d.ts +56 -0
  104. package/dist/components/Switch/Switch.js +87 -0
  105. package/dist/components/Switch/index.d.ts +2 -0
  106. package/dist/components/Switch/index.js +2 -0
  107. package/dist/components/Table/Table.d.ts +116 -0
  108. package/dist/components/Table/Table.js +143 -0
  109. package/dist/components/Table/index.d.ts +2 -0
  110. package/dist/components/Table/index.js +2 -0
  111. package/dist/components/Tabs/Tabs.d.ts +116 -0
  112. package/dist/components/Tabs/Tabs.js +158 -0
  113. package/dist/components/Tabs/index.d.ts +2 -0
  114. package/dist/components/Tabs/index.js +2 -0
  115. package/dist/components/Timeline/Timeline.d.ts +137 -0
  116. package/dist/components/Timeline/Timeline.js +243 -0
  117. package/dist/components/Timeline/index.d.ts +2 -0
  118. package/dist/components/Timeline/index.js +2 -0
  119. package/dist/components/Toast/Toast.d.ts +135 -0
  120. package/dist/components/Toast/Toast.js +314 -0
  121. package/dist/components/Toast/index.d.ts +2 -0
  122. package/dist/components/Toast/index.js +2 -0
  123. package/dist/components/Tooltip/Tooltip.d.ts +104 -0
  124. package/dist/components/Tooltip/Tooltip.js +95 -0
  125. package/dist/components/Tooltip/index.d.ts +2 -0
  126. package/dist/components/Tooltip/index.js +2 -0
  127. package/dist/components/Typography/Typography.d.ts +38 -0
  128. package/dist/components/Typography/Typography.js +53 -0
  129. package/dist/components/Typography/index.d.ts +2 -0
  130. package/dist/components/Typography/index.js +2 -0
  131. package/dist/index.d.ts +66 -3398
  132. package/dist/index.js +34 -5343
  133. package/dist/lib/cn.d.ts +6 -0
  134. package/dist/lib/cn.js +9 -0
  135. package/package.json +6 -2
  136. package/src/styles/theme.css +341 -341
package/dist/index.d.ts CHANGED
@@ -1,3399 +1,67 @@
1
- import { CSSProperties, ComponentPropsWithoutRef, ElementType, HTMLAttributes, MouseEvent, ReactNode, Ref } from "react";
2
- import { Accordion as Accordion$1 } from "@base-ui/react/accordion";
3
- import { ClassValue } from "clsx";
4
- import { useRender } from "@base-ui/react/use-render";
5
- import { Avatar as Avatar$1 } from "@base-ui/react/avatar";
6
- import { Button as Button$1 } from "@base-ui/react/button";
7
- import { Checkbox as Checkbox$1 } from "@base-ui/react/checkbox";
8
- import { CheckboxGroup as CheckboxGroup$1 } from "@base-ui/react/checkbox-group";
9
- import { Combobox as Combobox$1 } from "@base-ui/react/combobox";
10
- import { Input as Input$1 } from "@base-ui/react/input";
11
- import { Select as Select$1 } from "@base-ui/react/select";
12
- import { ContextMenu as ContextMenu$1 } from "@base-ui/react/context-menu";
13
- import { Menu as Menu$1 } from "@base-ui/react/menu";
14
- import { Popover as Popover$1 } from "@base-ui/react/popover";
15
- import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
16
- import { Drawer as Drawer$1 } from "@base-ui/react/drawer";
17
- import { Field as Field$1 } from "@base-ui/react/field";
18
- import { Control, FieldPath, FieldValues, SubmitErrorHandler, SubmitHandler, UseFormReturn } from "react-hook-form";
19
- import { Fieldset as Fieldset$1 } from "@base-ui/react/fieldset";
20
- import { Form as Form$1 } from "@base-ui/react/form";
21
- import { Progress as Progress$1 } from "@base-ui/react/progress";
22
- import { Radio as Radio$1 } from "@base-ui/react/radio";
23
- import { RadioGroup as RadioGroup$1 } from "@base-ui/react/radio-group";
24
- import { Switch as Switch$1 } from "@base-ui/react/switch";
25
- import { Tabs as Tabs$1 } from "@base-ui/react/tabs";
26
- import { Toast, ToastManager as ToastManager$1, ToastManagerAddOptions, ToastManagerPromiseOptions, ToastManagerUpdateOptions, ToastObject as ToastObject$1 } from "@base-ui/react/toast";
27
- import { Tooltip as Tooltip$1 } from "@base-ui/react/tooltip";
28
- //#region src/components/Accordion/Accordion.d.ts
29
- type AccordionVariant = "divided" | "contained" | "separated";
30
- type AccordionSize = "sm" | "md" | "lg";
31
- type AccordionChevronPosition = "start" | "end";
32
- type BaseRootProps$2 = ComponentPropsWithoutRef<typeof Accordion$1.Root>;
33
- type AccordionChangeEventDetails = Parameters<NonNullable<BaseRootProps$2["onValueChange"]>>[1];
34
- interface AccordionProps extends Omit<BaseRootProps$2, "className" | "value" | "defaultValue" | "onValueChange"> {
35
- /**
36
- * Controlled set of open item values — always an array; single mode holds
37
- * zero or one entries. Item values are strings in this design system
38
- * (Base UI itself allows any value type).
39
- */
40
- value?: string[];
41
- /** Item values open on first render (uncontrolled). */
42
- defaultValue?: string[];
43
- /** Called with the next open set when an item expands or collapses. */
44
- onValueChange?: (value: string[], eventDetails: AccordionChangeEventDetails) => void;
45
- /**
46
- * Container treatment: `divided` separates full-bleed rows with hairlines,
47
- * `contained` wraps all items in one bordered box, `separated` renders each
48
- * item as its own bordered card with a gap.
49
- */
50
- variant?: AccordionVariant;
51
- /** Row density. Trigger rows are 36px (`sm`) / 44px (`md`) / 56px (`lg`) tall before wrapping — all clear the WCAG 2.5.8 24px target-size floor. */
52
- size?: AccordionSize;
53
- /**
54
- * Side of the header the expansion icon sits on. `end` is the familiar
55
- * default; `start` keeps the icon next to the label, which NN/g found
56
- * faster to scan for magnified and low-vision use.
57
- */
58
- chevronPosition?: AccordionChevronPosition;
59
- className?: string;
60
- }
61
- /**
62
- * Vertically stacked disclosure sections built on Base UI's Accordion.
63
- * One panel opens at a time by default (`multiple` lifts that); the open
64
- * panel can always be collapsed again.
65
- */
66
- declare const Accordion: import("react").ForwardRefExoticComponent<AccordionProps & import("react").RefAttributes<HTMLDivElement>>;
67
- interface AccordionItemProps extends Omit<ComponentPropsWithoutRef<typeof Accordion$1.Item>, "className" | "value"> {
68
- /**
69
- * Identifies the item in the root's `value`/`defaultValue` arrays.
70
- * Auto-generated when omitted (fine for purely uncontrolled use).
71
- */
72
- value?: string;
73
- className?: string;
74
- }
75
- /**
76
- * One disclosure section: a header/trigger pair plus its panel. Give it a
77
- * `value` to control or pre-open it; omit the value and Base UI generates one.
78
- */
79
- declare const AccordionItem: import("react").ForwardRefExoticComponent<AccordionItemProps & import("react").RefAttributes<HTMLDivElement>>;
80
- interface AccordionHeaderProps extends Omit<ComponentPropsWithoutRef<typeof Accordion$1.Header>, "className"> {
81
- className?: string;
82
- }
83
- /**
84
- * The heading that labels a panel — an `<h3>` by default. Pick the level
85
- * from the surrounding document outline via `render`, e.g.
86
- * `<AccordionHeader render={<h4 />}>`; the visual style lives on the trigger
87
- * either way.
88
- */
89
- declare const AccordionHeader: import("react").ForwardRefExoticComponent<AccordionHeaderProps & import("react").RefAttributes<HTMLHeadingElement>>;
90
- interface AccordionTriggerProps extends Omit<ComponentPropsWithoutRef<typeof Accordion$1.Trigger>, "className"> {
91
- /**
92
- * Replace the default chevron; pass `null` to render no indicator. The
93
- * default chevron rotates 180° while open — a custom icon styles its own
94
- * open state off the trigger's `group`, e.g.
95
- * `className="motion-safe:transition-transform group-data-panel-open:rotate-45"`.
96
- */
97
- icon?: ReactNode;
98
- className?: string;
99
- }
100
- /**
101
- * The full-width button that toggles its panel. Label and icon are one
102
- * target (never split them); long labels wrap.
103
- */
104
- declare const AccordionTrigger: import("react").ForwardRefExoticComponent<AccordionTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
105
- interface AccordionPanelProps extends Omit<ComponentPropsWithoutRef<typeof Accordion$1.Panel>, "className"> {
106
- /**
107
- * Applied to the content block inside the animated panel — the panel
108
- * element itself must keep zero padding and `overflow-hidden` for the
109
- * height transition to measure cleanly (customize it via `render`).
110
- */
111
- className?: string;
112
- }
113
- /**
114
- * The collapsible content region. Height animates via Base UI's
115
- * `--accordion-panel-height` behind `motion-safe:`; with reduced motion it
116
- * snaps open. Set `hiddenUntilFound` (here or on the root) so browser
117
- * find-in-page can reveal closed panels.
118
- */
119
- declare const AccordionPanel: import("react").ForwardRefExoticComponent<AccordionPanelProps & import("react").RefAttributes<HTMLDivElement>>;
120
- //#endregion
121
- //#region src/components/AILoader/AILoader.d.ts
122
- type AILoaderState = "default" | "processing";
123
- type AILoaderSize = "sm" | "md" | "lg";
124
- type AILoaderTone = "brand" | "current";
125
- interface AILoaderRenderState extends Record<string, unknown> {
126
- /** Current visual and semantic state. */
127
- state: AILoaderState;
128
- /** Whether the indicator represents active work. */
129
- processing: boolean;
130
- }
131
- interface AILoaderBaseProps extends Omit<ComponentPropsWithoutRef<"span">, "children" | "className"> {
132
- /** Ambient AI motion or a rotating indeterminate processing indicator. */
133
- state?: AILoaderState;
134
- /** Visual scale: `sm` uses a 16px mark/12px plain text, `md` 24px/14px, and `lg` 32px/16px. This is non-interactive, so no target-size floor applies. */
135
- size?: AILoaderSize;
136
- /** `brand` uses info → primary → hero at rest and primary blue while processing; `current` inherits the surrounding text color. Processing uses `currentColor`, so text-color utilities or `style.color` can override either tone. */
137
- tone?: AILoaderTone;
138
- /** Optional visible status content beside the mark. Accepts plain text or an inline node such as `<Typography as="span">`; processing adds a reduced-motion-safe shimmer. */
139
- text?: ReactNode;
140
- /** Accessible label. Defaults to a string `text` value when present, otherwise “AI” at rest and “Processing” while active. When `text` is JSX, set this to override its readable content. */
141
- label?: string;
142
- /** Replace the rendered `span` or inspect `{ state, processing }` in a render callback. */
143
- render?: useRender.RenderProp<AILoaderRenderState>;
144
- /** Additional classes merged after the component's layout and spacing classes. */
145
- className?: string;
146
- }
147
- type AILoaderProps = AILoaderBaseProps;
148
- declare const AILoader: import("react").ForwardRefExoticComponent<AILoaderBaseProps & import("react").RefAttributes<HTMLSpanElement>>;
149
- //#endregion
150
- //#region src/components/Avatar/Avatar.d.ts
151
- type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl";
152
- type AvatarShape = "circle" | "square";
153
- interface AvatarVariantsOptions {
154
- size?: AvatarSize;
155
- shape?: AvatarShape;
156
- className?: string;
157
- }
158
- /**
159
- * Class list for an element styled as an Avatar box.
160
- *
161
- * Use it when the box must stay a foreign element — e.g. a plain anchor
162
- * around a raw `<img>`, or a static placeholder — so it still matches
163
- * real avatars in size, shape and fill:
164
- *
165
- * <a href="/profile" className={avatarVariants({ size: "sm" })}>
166
- * <img src={photo} alt="Open profile" className="size-full rounded-[inherit] object-cover" />
167
- * </a>
168
- */
169
- declare function avatarVariants({ size, shape, className }?: AvatarVariantsOptions): string;
170
- interface AvatarProps extends Omit<ComponentPropsWithoutRef<typeof Avatar$1.Root>, "className"> {
171
- /**
172
- * Box size: `xs` 24px · `sm` 32px · `md` 40px · `lg` 48px · `xl` 64px.
173
- * Defaults to the enclosing `AvatarGroup`'s size, then `md`. Avatars are
174
- * non-interactive by default; one made clickable via `render` should use
175
- * `sm`+ to clear the WCAG 2.5.8 24px target-size floor with room to spare.
176
- */
177
- size?: AvatarSize;
178
- /** `circle` for people (default), `square` (6px radius) for entities like teams, orgs, or apps. Defaults to the enclosing `AvatarGroup`'s shape. */
179
- shape?: AvatarShape;
180
- /** Image URL. While it loads — and if it fails — the fallback shows instead. */
181
- src?: string;
182
- /**
183
- * Alt text for the image. Defaults to `""` (decorative) because avatars
184
- * usually sit next to the visible name. For a standalone avatar put the
185
- * name on the root via `aria-label` instead — it also covers the fallback,
186
- * which `alt` cannot.
187
- */
188
- alt?: string;
189
- /**
190
- * Person or entity name used to derive the fallback initials (first letter
191
- * of the first and last words). Used for initials only — pass `aria-label`
192
- * when the avatar must be announced.
193
- */
194
- name?: string;
195
- /** Custom fallback content (e.g. an org icon), replacing the derived initials / person icon. */
196
- fallback?: ReactNode;
197
- /**
198
- * Milliseconds to wait before showing the fallback, avoiding a flash of
199
- * initials when images load fast. Only applied while `src` is set — the
200
- * muted box shows in the meantime. Without `src` the fallback is immediate.
201
- */
202
- fallbackDelay?: number;
203
- className?: string;
204
- }
205
- /**
206
- * Profile picture with automatic fallback, built on Base UI's Avatar.
207
- *
208
- * Shorthand props (`src`, `alt`, `name`, `fallback`, `fallbackDelay`) render
209
- * the image and fallback parts internally; `children` render after them, so
210
- * an `AvatarBadge` composes on top of the shorthand. When only `children`
211
- * are passed the root renders them alone — full manual composition with
212
- * `AvatarImage` / `AvatarFallback` (don't mix that with the shorthand props,
213
- * or two fallbacks render).
214
- *
215
- * Decorative by default. When it stands alone, pass `aria-label` — the root
216
- * then gets `role="img"` and its internals are hidden from assistive
217
- * technology, whether the image or the fallback is showing.
218
- */
219
- declare const Avatar: import("react").ForwardRefExoticComponent<AvatarProps & import("react").RefAttributes<HTMLSpanElement>>;
220
- interface AvatarImageProps extends Omit<ComponentPropsWithoutRef<typeof Avatar$1.Image>, "className"> {
221
- className?: string;
222
- }
223
- /**
224
- * The avatar photo, cropped to fill the box. Base UI keeps it unmounted
225
- * until the file has actually loaded (the fallback shows meanwhile), then it
226
- * fades in motion-safe. Defaults to `alt=""` — see `Avatar`'s `alt` docs.
227
- * `onLoadingStatusChange` reports `idle → loading → loaded | error`.
228
- */
229
- declare const AvatarImage: import("react").ForwardRefExoticComponent<AvatarImageProps & import("react").RefAttributes<HTMLImageElement>>;
230
- interface AvatarFallbackProps extends Omit<ComponentPropsWithoutRef<typeof Avatar$1.Fallback>, "className"> {
231
- className?: string;
232
- }
233
- /**
234
- * Shown while there is no loaded image: initials, an icon, or any content.
235
- * Fills the box and inherits the root's muted fill and text styling — set
236
- * colors via `className` on the root (or here) as a pair, e.g.
237
- * `bg-primary-100 text-primary-800`. Base UI's `delay` prop postpones it to
238
- * avoid a flash on fast image loads; only set a delay when an `AvatarImage`
239
- * sibling exists, otherwise the box just sits empty for that long.
240
- */
241
- declare const AvatarFallback: import("react").ForwardRefExoticComponent<AvatarFallbackProps & import("react").RefAttributes<HTMLSpanElement>>;
242
- interface AvatarBadgeProps extends Omit<ComponentPropsWithoutRef<"span">, "className"> {
243
- /**
244
- * Screen-reader text for the state the badge conveys (e.g. "Online").
245
- * Color alone must not carry meaning (WCAG 1.4.1) — always pass this when
246
- * the badge is more than decoration.
247
- */
248
- label?: string;
249
- /** Replace the rendered `span`, e.g. `render={<a href="…" />}`. */
250
- render?: useRender.RenderProp;
251
- className?: string;
252
- }
253
- /**
254
- * Corner indicator anchored to the avatar's bottom-right rim, scaled to the
255
- * avatar's size, with a background-colored ring separating it from the
256
- * photo. Defaults to the success fill (presence "online"); recolor via
257
- * `className` — `bg-warning` away, `bg-destructive` busy, `bg-slate-400`
258
- * offline — and match the ring to the page surface with `ring-*` when the
259
- * avatar sits on a non-background fill. Compose inside `<Avatar>`, after the
260
- * shorthand props or parts.
261
- */
262
- declare const AvatarBadge: import("react").ForwardRefExoticComponent<AvatarBadgeProps & import("react").RefAttributes<HTMLSpanElement>>;
263
- interface AvatarGroupProps extends Omit<ComponentPropsWithoutRef<"div">, "className"> {
264
- /** Size applied to every member avatar (and the overlap distance). Members can still override it. */
265
- size?: AvatarSize;
266
- /** Shape applied to every member avatar. Members can still override it. */
267
- shape?: AvatarShape;
268
- /**
269
- * Maximum boxes to render, counting the overflow chip: with 6 children and
270
- * `max={4}`, 3 avatars and a "+3" chip show. Values below 2 are treated
271
- * as 2. Omit to render every child.
272
- */
273
- max?: number;
274
- /**
275
- * Total member count when the children are only a page of the real list —
276
- * e.g. 4 fetched collaborators of 12 → `total={12}` renders "+9" after
277
- * `max` is applied. Defaults to the number of children.
278
- */
279
- total?: number;
280
- /** Replace the rendered `div`, e.g. `render={<ul />}` with `<li>`-wrapped avatars. */
281
- render?: useRender.RenderProp;
282
- className?: string;
283
- }
284
- /**
285
- * Overlapping stack of avatars ("facepile") with an optional "+N" overflow
286
- * chip. Members inherit the group's `size`/`shape` and get a
287
- * background-colored separator ring; later members overlap earlier ones
288
- * (DOM order). For a custom overflow control — different text, or a chip
289
- * that opens the full member list — omit `max` and append your own child,
290
- * e.g. `<Avatar render={<button aria-label="Show all 12 members" />}>+9</Avatar>`.
291
- * The ring assumes the group sits on `background` — on another surface,
292
- * override per member (`className="ring-surface"`). Purely visual grouping:
293
- * give the group an `aria-label` (e.g. "Contributors") when the stack is
294
- * meaningful, and name each member if avatars are individually meaningful.
295
- */
296
- declare const AvatarGroup: import("react").ForwardRefExoticComponent<AvatarGroupProps & import("react").RefAttributes<HTMLDivElement>>;
297
- //#endregion
298
- //#region src/components/Badge/Badge.d.ts
299
- type BadgeVariant = "neutral" | "primary" | "success" | "warning" | "destructive";
300
- type BadgeAppearance = "solid" | "soft" | "outline";
301
- type BadgeSize = "sm" | "md" | "lg";
302
- interface BadgeVariantsOptions {
303
- variant?: BadgeVariant;
304
- appearance?: BadgeAppearance;
305
- size?: BadgeSize;
306
- pill?: boolean;
307
- className?: string;
308
- }
309
- /**
310
- * Class list for an element styled as a Badge.
311
- *
312
- * Use it to style a plain anchor as a clickable badge while keeping link
313
- * semantics (alternatively pass `render={<a href … />}` to `Badge` itself —
314
- * badges carry no role, so both are sound):
315
- *
316
- * <a href="/releases" className={badgeVariants({ variant: "primary" })}>v2.0</a>
317
- */
318
- declare function badgeVariants({ variant, appearance, size, pill, className }?: BadgeVariantsOptions): string;
319
- interface BadgeBaseProps extends Omit<ComponentPropsWithoutRef<"span">, "className" | "children"> {
320
- /**
321
- * Semantic intent. Drives the hue in every appearance. For informational
322
- * statuses use `primary` — the palette's `info` alias shares the primary
323
- * ramp, so a separate variant would render identically.
324
- */
325
- variant?: BadgeVariant;
326
- /** Emphasis level: `solid` fill, `soft` tint (default), or `outline`. */
327
- appearance?: BadgeAppearance;
328
- /** Badge height: `sm` 20px · `md` 24px · `lg` 28px. The badge body is non-interactive; the delete button expands its hit area to the WCAG 2.5.8 24px floor. If the badge is made clickable via `render`, provide enough surrounding spacing to reach 24px. */
329
- size?: BadgeSize;
330
- /** Fully rounded shape for tags and counts. min-width equals the height, so single-digit counts stay compact and centered. */
331
- pill?: boolean;
332
- /** Badge label; icons ride along as children and inherit sizing. Standalone dots omit children. */
333
- children?: ReactNode;
334
- /**
335
- * Leading status dot (color inherits the label). Per WCAG 1.4.1 the dot
336
- * alone must not carry meaning — keep a visible label where state matters.
337
- * Without `children` the badge collapses to a bare circular indicator.
338
- */
339
- dot?: boolean;
340
- /** Called when the trailing delete button is activated with pointer, Enter, or Space. Requires `deleteLabel`. */
341
- onDelete?: NonNullable<ComponentPropsWithoutRef<typeof Button$1>["onClick"]>;
342
- /** Accessible name for the delete button, e.g. `Remove React filter`. Required when `onDelete` is set. */
343
- deleteLabel?: string;
344
- /** Decorative replacement for the default close icon. Only rendered when `onDelete` is set. */
345
- deleteIcon?: ReactNode;
346
- /** Replace the rendered `span`, e.g. `render={<a href="…" />}` for a clickable badge. Unavailable when `onDelete` is set, so interactive elements are never nested. */
347
- render?: useRender.RenderProp;
348
- /** Additional classes merged after the badge's variant classes. */
349
- className?: string;
350
- }
351
- /** A badge with no visible label is a bare dot, so an accessible name is required. */
352
- type BadgeContentProps = {
353
- children: ReactNode;
354
- } | {
355
- children?: never;
356
- dot: true;
357
- "aria-label": string;
358
- } | {
359
- children?: never;
360
- dot: true;
361
- "aria-labelledby": string;
362
- };
363
- /** A static badge may use `render` for semantic composition, including links. */
364
- type BadgeStaticProps = BadgeContentProps & {
365
- render?: useRender.RenderProp;
366
- onDelete?: never;
367
- deleteLabel?: never;
368
- deleteIcon?: never;
369
- };
370
- /** Deletable badges need visible content and a unique name for their delete button. */
371
- type BadgeDeletableProps = {
372
- children: ReactNode;
373
- onDelete: NonNullable<ComponentPropsWithoutRef<typeof Button$1>["onClick"]>;
374
- deleteLabel: string;
375
- deleteIcon?: ReactNode;
376
- render?: never;
377
- };
378
- type BadgeProps = BadgeBaseProps & (BadgeStaticProps | BadgeDeletableProps);
379
- declare const Badge: import("react").ForwardRefExoticComponent<BadgeProps & import("react").RefAttributes<HTMLSpanElement>>;
380
- //#endregion
381
- //#region src/components/Breadcrumb/Breadcrumb.d.ts
382
- interface BreadcrumbProps extends Omit<ComponentPropsWithoutRef<"nav">, "className"> {
383
- /** Replace the rendered `nav`. Preserve the navigation landmark so screen-reader users can jump to the trail. */
384
- render?: useRender.RenderProp;
385
- /** Additional classes merged after the root recipe. */
386
- className?: string;
387
- }
388
- /**
389
- * Navigation landmark that holds the trail. It defaults to
390
- * `aria-label="Breadcrumb"`; pass a localized `aria-label` (or
391
- * `aria-labelledby`) when the page language isn't English.
392
- */
393
- declare const Breadcrumb: import("react").ForwardRefExoticComponent<BreadcrumbProps & import("react").RefAttributes<HTMLElement>>;
394
- interface BreadcrumbListProps extends Omit<ComponentPropsWithoutRef<"ol">, "className"> {
395
- /** Replace the rendered `ol`. Preserve list semantics so assistive technology announces the trail length. */
396
- render?: useRender.RenderProp;
397
- /** Additional classes merged after the list recipe, e.g. `text-xs` for a denser trail. */
398
- className?: string;
399
- }
400
- /**
401
- * Ordered list of crumbs. It wraps onto new lines on narrow viewports; cap
402
- * individual crumbs with a truncation `className` instead of letting the
403
- * whole trail overflow.
404
- */
405
- declare const BreadcrumbList: import("react").ForwardRefExoticComponent<BreadcrumbListProps & import("react").RefAttributes<HTMLOListElement>>;
406
- interface BreadcrumbItemProps extends Omit<ComponentPropsWithoutRef<"li">, "className"> {
407
- /** Replace the rendered `li`. Preserve list-item semantics. */
408
- render?: useRender.RenderProp;
409
- /** Additional classes merged after the item recipe. */
410
- className?: string;
411
- }
412
- /** One entry in the trail: wraps a link, the current page, or a composed control. */
413
- declare const BreadcrumbItem: import("react").ForwardRefExoticComponent<BreadcrumbItemProps & import("react").RefAttributes<HTMLLIElement>>;
414
- interface BreadcrumbLinkVariantsOptions {
415
- className?: string;
416
- }
417
- /**
418
- * Class list for an element styled as a breadcrumb link.
419
- *
420
- * Use it to give non-anchor crumbs the same resting/hover/focus treatment —
421
- * e.g. a Menu trigger button that reveals collapsed levels:
422
- *
423
- * <MenuTrigger
424
- * render={<button aria-label="Show hidden levels" className={breadcrumbLinkVariants()} />}
425
- * >
426
- * <BreadcrumbEllipsis />
427
- * </MenuTrigger>
428
- */
429
- declare function breadcrumbLinkVariants({ className }?: BreadcrumbLinkVariantsOptions): string;
430
- interface BreadcrumbLinkProps extends Omit<ComponentPropsWithoutRef<"a">, "className"> {
431
- /** Replace the rendered `a`, e.g. `render={<Link to="…" />}` for a client-side router. Keep it a real link so open-in-new-tab and copy-link work. */
432
- render?: useRender.RenderProp;
433
- /** Additional classes merged after the link recipe, e.g. `block max-w-40 truncate` to cap a long crumb. */
434
- className?: string;
435
- }
436
- /**
437
- * Ancestor link in the trail. Inline text links are exempt from the WCAG
438
- * 2.5.8 target-size floor, but keep the list's default gap so adjacent
439
- * targets stay distinguishable on touch screens. For the APG variant where
440
- * the current page stays a link, add `aria-current="page"` — the recipe
441
- * restyles it to match `BreadcrumbPage`.
442
- */
443
- declare const BreadcrumbLink: import("react").ForwardRefExoticComponent<BreadcrumbLinkProps & import("react").RefAttributes<HTMLAnchorElement>>;
444
- interface BreadcrumbPageProps extends Omit<ComponentPropsWithoutRef<"span">, "className"> {
445
- /** Replace the rendered `span`. Keep it non-interactive — NN/g: the current page must not look or behave like a link. */
446
- render?: useRender.RenderProp;
447
- /** Additional classes merged after the current-page recipe. */
448
- className?: string;
449
- }
450
- /**
451
- * The current page, rendered as plain text with `aria-current="page"` — an
452
- * honest `span`, not a disabled fake link. Use `BreadcrumbLink` with
453
- * `aria-current="page"` instead when the current page must stay navigable.
454
- */
455
- declare const BreadcrumbPage: import("react").ForwardRefExoticComponent<BreadcrumbPageProps & import("react").RefAttributes<HTMLSpanElement>>;
456
- interface BreadcrumbSeparatorProps extends Omit<ComponentPropsWithoutRef<"li">, "className"> {
457
- /** Custom separator glyph, e.g. `/` or `·`. Defaults to a chevron. */
458
- children?: ComponentPropsWithoutRef<"li">["children"];
459
- /** Replace the rendered `li`. Keep it hidden from assistive technology — separators are purely visual. */
460
- render?: useRender.RenderProp;
461
- /** Additional classes merged after the separator recipe. */
462
- className?: string;
463
- }
464
- /**
465
- * Visual divider between crumbs. It is `aria-hidden` with
466
- * `role="presentation"`, so screen readers hear only the crumbs and the
467
- * list's item count — never the glyphs.
468
- */
469
- declare const BreadcrumbSeparator: import("react").ForwardRefExoticComponent<BreadcrumbSeparatorProps & import("react").RefAttributes<HTMLLIElement>>;
470
- interface BreadcrumbEllipsisProps extends Omit<ComponentPropsWithoutRef<"span">, "className"> {
471
- /** Custom collapsed-levels glyph. Defaults to a horizontal ellipsis. */
472
- children?: ComponentPropsWithoutRef<"span">["children"];
473
- /** Replace the rendered `span`. Keep it decorative — an interactive wrapper owns the accessible name. */
474
- render?: useRender.RenderProp;
475
- /** Additional classes merged after the ellipsis recipe. */
476
- className?: string;
477
- }
478
- /**
479
- * Marker for collapsed levels in a deep trail. It is decorative
480
- * (`aria-hidden`); when the hidden levels must stay reachable, wrap it in a
481
- * labelled trigger — e.g. a Menu trigger styled with
482
- * `breadcrumbLinkVariants()` — so the control, not the glyph, carries the
483
- * accessible name.
484
- */
485
- declare const BreadcrumbEllipsis: import("react").ForwardRefExoticComponent<BreadcrumbEllipsisProps & import("react").RefAttributes<HTMLSpanElement>>;
486
- //#endregion
487
- //#region src/components/Button/Button.d.ts
488
- type ButtonVariant = "primary" | "secondary" | "outline" | "ghost" | "destructive" | "link";
489
- type ButtonSize = "sm" | "md" | "lg";
490
- interface ButtonVariantsOptions {
491
- variant?: ButtonVariant;
492
- size?: ButtonSize;
493
- fullWidth?: boolean;
494
- iconOnly?: boolean;
495
- className?: string;
496
- }
497
- /**
498
- * Class list for an element styled as a Button.
499
- *
500
- * Links must keep link semantics — never render an `<a>` through Button
501
- * (it would receive `role="button"`). Style the anchor directly instead:
502
- *
503
- * <a href="/docs" className={buttonVariants({ variant: "primary" })}>Docs</a>
504
- */
505
- declare function buttonVariants({ variant, size, fullWidth, iconOnly, className }?: ButtonVariantsOptions): string;
506
- interface ButtonBaseProps extends Omit<ComponentPropsWithoutRef<typeof Button$1>, "className"> {
507
- /** Visual style of the button */
508
- variant?: ButtonVariant;
509
- /** Size of the button. `sm` (32px) meets the WCAG 2.5.8 AA target-size floor; prefer `md`/`lg` for touch-first surfaces. */
510
- size?: ButtonSize;
511
- /** Stretch to fill the container width */
512
- fullWidth?: boolean;
513
- /**
514
- * Show a progress indicator and block interaction while keeping the button
515
- * focusable, so keyboard/screen-reader focus is not lost mid-action.
516
- * The button keeps its width; the label is swapped for a centered spinner
517
- * unless `loadingText` is set.
518
- */
519
- loading?: boolean;
520
- /** Visible label shown next to the spinner while `loading` (announced to screen readers). */
521
- loadingText?: ReactNode;
522
- /** Decorative icon before the label (hidden from assistive technology). */
523
- startIcon?: ReactNode;
524
- /** Decorative icon after the label (hidden from assistive technology). */
525
- endIcon?: ReactNode;
526
- className?: string;
527
- }
528
- /** Icon-only buttons have no visible label, so an accessible name is required. */
529
- type ButtonIconOnlyProps = {
530
- iconOnly: true;
531
- "aria-label": string;
532
- } | {
533
- iconOnly: true;
534
- "aria-labelledby": string;
535
- } | {
536
- iconOnly?: false;
537
- };
538
- type ButtonProps = ButtonBaseProps & ButtonIconOnlyProps;
539
- declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
540
- //#endregion
541
- //#region src/components/Calendar/Calendar.d.ts
542
- type CalendarMode = "single" | "multiple" | "range";
543
- /** Inclusive date range. `onValueChange` only ever emits complete ranges. */
544
- interface CalendarDateRange {
545
- start: Date;
546
- end: Date;
547
- }
548
- /** State passed to the `render` callback (also exposed as root data-attributes). */
549
- type CalendarState = {
550
- mode: CalendarMode;
551
- disabled: boolean;
552
- readOnly: boolean;
553
- };
554
- interface CalendarBaseProps extends Omit<ComponentPropsWithoutRef<"div">, "className" | "children" | "defaultValue"> {
555
- /**
556
- * Month shown in the first grid (controlled). Any day of the month works;
557
- * it is normalized to the first. Pair with `onMonthChange`.
558
- */
559
- month?: Date;
560
- /**
561
- * Initial visible month (uncontrolled). Defaults to the month of the first
562
- * selected date, else the current month.
563
- */
564
- defaultMonth?: Date;
565
- /** Called when the visible month changes (navigation buttons or keyboard paging). */
566
- onMonthChange?: (month: Date) => void;
567
- /**
568
- * Months rendered side by side (wraps on narrow containers). Navigation
569
- * pages by this amount so months never repeat across a page turn.
570
- * @default 1
571
- */
572
- numberOfMonths?: number;
573
- /**
574
- * Earliest selectable day. Days before it are hard-disabled: dimmed,
575
- * skipped by keyboard focus, and the previous-month button disables at
576
- * the boundary.
577
- */
578
- minDate?: Date;
579
- /** Latest selectable day — the `minDate` counterpart. */
580
- maxDate?: Date;
581
- /**
582
- * Marks days as unavailable (e.g. sold out). Unlike `minDate`/`maxDate`,
583
- * unavailable days stay keyboard-focusable and readable (WCAG 4.5:1) so
584
- * screen-reader users can discover them — they just can't be selected.
585
- * In `range` mode a pending selection is limited to the contiguous
586
- * available run around its start date.
587
- */
588
- isDateUnavailable?: (date: Date) => boolean;
589
- /** Disable the whole calendar: selection and navigation. */
590
- disabled?: boolean;
591
- /** Keep the calendar navigable but ignore selection — for display-only surfaces. */
592
- readOnly?: boolean;
593
- /**
594
- * BCP-47 tag (e.g. `"en-US"`, `"th-TH"`) for the caption, weekday names,
595
- * day numerals, and day-cell accessible labels via `Intl.DateTimeFormat`.
596
- * Defaults to the runtime locale. Rendering stays Gregorian, but locales
597
- * with a different default calendar display accordingly (Thai → Buddhist-era
598
- * years).
599
- */
600
- locale?: string;
601
- /**
602
- * First day of the week: 0 = Sunday … 6 = Saturday. Defaults to the
603
- * locale's week convention when the runtime exposes it, else Sunday.
604
- */
605
- weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
606
- /**
607
- * Show the leading/trailing days of adjacent months. They are inert
608
- * (visual continuity only) and hidden from assistive technology.
609
- * @default true
610
- */
611
- showOutsideDays?: boolean;
612
- /**
613
- * Always render six weeks per month so the calendar height never changes
614
- * while paging — recommended inside popovers.
615
- * @default false
616
- */
617
- fixedWeeks?: boolean;
618
- /**
619
- * The day highlighted as "today" (`aria-current="date"`). Defaults to the
620
- * current date; pin it in tests and visual baselines for determinism.
621
- */
622
- today?: Date;
623
- /** Move focus to the focus-target day (selected → today → first enabled) on mount. */
624
- autoFocus?: boolean;
625
- /**
626
- * Accessible label for the previous-month navigation button.
627
- * @default "Previous month"
628
- */
629
- previousMonthLabel?: string;
630
- /**
631
- * Accessible label for the next-month navigation button.
632
- * @default "Next month"
633
- */
634
- nextMonthLabel?: string;
635
- className?: string;
636
- /** Replace the root element — Base UI's composition prop. */
637
- render?: useRender.RenderProp<CalendarState>;
638
- }
639
- /** Selection props follow `mode`, so a mismatched value shape fails to compile. */
640
- type CalendarModeProps = {
641
- /** Selection behavior. `single` picks one date. @default "single" */
642
- mode?: "single";
643
- /** Selected date (controlled). `null` = empty. */
644
- value?: Date | null;
645
- /** Initial selected date (uncontrolled). */
646
- defaultValue?: Date | null;
647
- /** Called with the new date, or `null` when deselected via `allowDeselect`. */
648
- onValueChange?: (value: Date | null) => void;
649
- /**
650
- * Let clicking the selected date clear it — for optional filters.
651
- * @default false
652
- */
653
- allowDeselect?: boolean;
654
- } | {
655
- /** `multiple` toggles any number of dates. */
656
- mode: "multiple";
657
- /** Selected dates (controlled), kept sorted ascending. */
658
- value?: Date[];
659
- /** Initial selected dates (uncontrolled). */
660
- defaultValue?: Date[];
661
- /** Called with the new sorted date list after every toggle. */
662
- onValueChange?: (value: Date[]) => void;
663
- allowDeselect?: never;
664
- } | {
665
- /** `range` picks a start and end with a live preview in between. */
666
- mode: "range";
667
- /** Selected range (controlled). `null` = empty. */
668
- value?: CalendarDateRange | null;
669
- /** Initial selected range (uncontrolled). */
670
- defaultValue?: CalendarDateRange | null;
671
- /** Called only with complete `{ start, end }` ranges (ends ordered, never inverted). */
672
- onValueChange?: (value: CalendarDateRange | null) => void;
673
- allowDeselect?: never;
674
- };
675
- type CalendarProps = CalendarBaseProps & CalendarModeProps;
676
- declare const Calendar: import("react").ForwardRefExoticComponent<CalendarProps & import("react").RefAttributes<HTMLDivElement>>;
677
- //#endregion
678
- //#region src/components/Checkbox/Checkbox.d.ts
679
- type CheckboxSize = "sm" | "md" | "lg";
680
- interface CheckboxVariantsOptions {
681
- size?: CheckboxSize;
682
- className?: string;
683
- }
684
- /**
685
- * Class list for the checkbox box itself. State styling hangs off Base UI's
686
- * data-attributes (`data-checked`, `data-indeterminate`, `data-disabled`,
687
- * `data-readonly`, `data-invalid`) plus `aria-invalid`.
688
- */
689
- declare function checkboxVariants({ size, className }?: CheckboxVariantsOptions): string;
690
- interface CheckboxProps extends Omit<ComponentPropsWithoutRef<typeof Checkbox$1.Root>, "className"> {
691
- /**
692
- * Box size. The 24px `lg` box meets the WCAG 2.5.8 target-size floor on its
693
- * own; `sm`/`md` rely on the clickable `label` (or surrounding spacing) to
694
- * extend the target. Prefer `md`+ with a label on touch-first surfaces.
695
- */
696
- size?: CheckboxSize;
697
- /**
698
- * Visible label rendered in an enclosing `<label>`, so clicking it toggles
699
- * the checkbox and it names the control. Without it, provide an accessible
700
- * name another way: `aria-label`, `aria-labelledby`, or an external
701
- * `<label>`. When `required` is set, the label shows a decorative asterisk.
702
- */
703
- label?: ReactNode;
704
- /**
705
- * Supporting copy below the label, linked via `aria-describedby`. Rendered
706
- * outside the `<label>` element so screen readers announce it as the
707
- * description instead of reading it into the accessible name.
708
- */
709
- description?: ReactNode;
710
- /** Applied to the checkbox box itself, also when `label`/`description` wrap it. */
711
- className?: string;
712
- }
713
- /**
714
- * Binary/mixed-state control built on Base UI's Checkbox. The indicator is
715
- * built in: a check mark, or a minus while `indeterminate` — so a `parent`
716
- * checkbox inside a controlled `CheckboxGroup` with `allValues` needs no
717
- * extra wiring. `ref` and `className` always target the box element, whether
718
- * or not the labelled layout wraps it.
719
- */
720
- declare const Checkbox: import("react").ForwardRefExoticComponent<CheckboxProps & import("react").RefAttributes<HTMLSpanElement>>;
721
- interface CheckboxGroupProps extends Omit<ComponentPropsWithoutRef<typeof CheckboxGroup$1>, "className"> {
722
- className?: string;
723
- }
724
- /**
725
- * Shares ticked-value state (`value`/`defaultValue`/`onValueChange`) across
726
- * child checkboxes matched by their `value` prop, and drives a `parent`
727
- * checkbox's indeterminate state when `allValues` is set. Lays the items out
728
- * as a vertical stack — pass `className="flex-row"` for a horizontal row.
729
- * The group needs an accessible name: `aria-labelledby` pointing at a caption,
730
- * or `aria-label`.
731
- */
732
- declare const CheckboxGroup: import("react").ForwardRefExoticComponent<CheckboxGroupProps & import("react").RefAttributes<HTMLDivElement>>;
733
- //#endregion
734
- //#region src/components/Select/Select.d.ts
735
- /**
736
- * Groups the select parts and owns value + popup state. This is Base UI's
737
- * `Select.Root` re-exported unchanged, so every root feature is available:
738
- * `value`/`defaultValue`/`onValueChange(value, details)`, `multiple`,
739
- * `items` (lets `SelectValue` display labels instead of raw values),
740
- * `name`/`required`/`disabled`/`readOnly` form wiring, and object values via
741
- * `isItemEqualToValue`/`itemToStringLabel`/`itemToStringValue`.
742
- */
743
- declare const Select: typeof Select$1.Root;
744
- type SelectProps<Value = unknown, Multiple extends boolean | undefined = false> = Select$1.Root.Props<Value, Multiple>;
745
- interface SelectLabelProps extends Omit<ComponentPropsWithoutRef<typeof Select$1.Label>, "className"> {
746
- className?: string;
747
- }
748
- /**
749
- * Visible label for the select — Base UI associates it with the trigger
750
- * automatically, and clicking it focuses the trigger without opening the
751
- * popup. Renders a `<div>`. When no visible label is rendered, give the
752
- * trigger an accessible name with `aria-label` instead.
753
- */
754
- declare const SelectLabel: import("react").ForwardRefExoticComponent<SelectLabelProps & import("react").RefAttributes<HTMLDivElement>>;
755
- type SelectTriggerVariant = "outline" | "ghost";
756
- type SelectTriggerSize = "sm" | "md" | "lg";
757
- type BaseTriggerProps$3 = ComponentPropsWithoutRef<typeof Select$1.Trigger>;
758
- interface SelectTriggerVariantsOptions {
759
- variant?: SelectTriggerVariant;
760
- size?: SelectTriggerSize;
761
- fullWidth?: boolean;
762
- className?: string;
763
- }
764
- /**
765
- * Class list for an element styled as the select trigger — for select-shaped
766
- * controls that don't come from Base UI (custom comboboxes, fake dropdowns
767
- * in previews) so every value-picker in the product shares one look.
768
- */
769
- declare function selectTriggerVariants({ variant, size, fullWidth, className }?: SelectTriggerVariantsOptions): string;
770
- interface SelectTriggerProps extends Omit<BaseTriggerProps$3, "className"> {
771
- /** Visual style: `outline` is the input-like default; `ghost` is borderless for toolbars and dense inline filters. */
772
- variant?: SelectTriggerVariant;
773
- /** Control height. `sm` (32px) meets the WCAG 2.5.8 AA target-size floor; prefer `md`/`lg` for touch-first surfaces. */
774
- size?: SelectTriggerSize;
775
- /** Stretch to fill the container width — the usual setting inside form layouts. `anchorWidth` takes precedence when both are set. */
776
- fullWidth?: boolean;
777
- /**
778
- * CSS width of the trigger (the popup anchor). Accepts a number in pixels
779
- * or any CSS width such as `"14rem"`, `"100%"`, or `"max-content"`.
780
- * `"max-content"` keeps the control only as wide as the selected value,
781
- * padding, and icon; the popup still grows when an option needs more room.
782
- * A consumer `style.width` can override this convenience prop.
783
- */
784
- anchorWidth?: CSSProperties["width"];
785
- /** Replaces the dropdown chevron. Decorative — hidden from assistive technology. */
786
- icon?: ReactNode;
787
- className?: string;
788
- }
789
- /**
790
- * The button that shows the current value and opens the popup. Place a
791
- * `SelectValue` inside it and the dropdown chevron is appended
792
- * automatically. The trigger's accessible name comes from a sibling
793
- * `SelectLabel` (or a composed `Field.Label`); without one, pass
794
- * `aria-label`.
795
- */
796
- declare const SelectTrigger: import("react").ForwardRefExoticComponent<SelectTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
797
- interface SelectValueProps extends Omit<ComponentPropsWithoutRef<typeof Select$1.Value>, "className"> {
798
- className?: string;
799
- }
800
- /**
801
- * The selected value's text inside the trigger. Set `placeholder` for the
802
- * empty state (rendered muted). With `items` on the root it shows the
803
- * matching label instead of the raw value; pass a function as `children`
804
- * to format the value yourself — the multi-select "+N more" pattern lives
805
- * there.
806
- */
807
- declare const SelectValue: import("react").ForwardRefExoticComponent<SelectValueProps & import("react").RefAttributes<HTMLSpanElement>>;
808
- type BasePositionerProps$5 = ComponentPropsWithoutRef<typeof Select$1.Positioner>;
809
- type SelectAlign = NonNullable<BasePositionerProps$5["align"]>;
810
- interface SelectPopupProps extends Omit<ComponentPropsWithoutRef<typeof Select$1.Popup>, "className"> {
811
- /** How the popup lines up along the trigger's bottom (or top) edge. */
812
- align?: SelectAlign;
813
- /** Gap between trigger and popup in pixels. */
814
- sideOffset?: BasePositionerProps$5["sideOffset"];
815
- /** Additional shift along the alignment axis in pixels. */
816
- alignOffset?: BasePositionerProps$5["alignOffset"];
817
- /** Minimum space kept from the viewport (or collision boundary) edges when repositioning. */
818
- collisionPadding?: BasePositionerProps$5["collisionPadding"];
819
- /**
820
- * Caps the popup's height so long lists scroll inside it — a number is
821
- * pixels, a string is any CSS length. Whatever the value, the popup never
822
- * exceeds the space between the trigger and the viewport edge.
823
- */
824
- maxHeight?: number | string;
825
- /** Portal destination. Defaults to `document.body`. */
826
- container?: ComponentPropsWithoutRef<typeof Select$1.Portal>["container"];
827
- /**
828
- * Applied to the popup panel. Width hooks: the panel is at least as wide
829
- * as the trigger — set `w-[var(--anchor-width)]` to match it exactly or
830
- * `w-*`/`max-w-*` for a fixed width. Cap height with the `maxHeight` prop.
831
- */
832
- className?: string;
833
- }
834
- /**
835
- * The floating option list, with the portal, positioning, list, and
836
- * hover-scroll arrow plumbing folded in. Always drops below the trigger and
837
- * flips above it only when the space below runs out — never sideways. Long
838
- * lists scroll inside the popup, up to `maxHeight`.
839
- */
840
- declare const SelectPopup: import("react").ForwardRefExoticComponent<SelectPopupProps & import("react").RefAttributes<HTMLDivElement>>;
841
- interface SelectItemProps extends Omit<ComponentPropsWithoutRef<typeof Select$1.Item>, "className"> {
842
- className?: string;
843
- }
844
- /**
845
- * One option in the popup. Children render as the option's label (wrapped in
846
- * Base UI's `ItemText`); a check mark appears at the item's right edge while
847
- * selected. Set `label` when children aren't plain text so keyboard
848
- * typeahead has something to match, and `disabled` for unavailable options.
849
- */
850
- declare const SelectItem: import("react").ForwardRefExoticComponent<SelectItemProps & import("react").RefAttributes<HTMLDivElement>>;
851
- interface SelectGroupProps extends Omit<ComponentPropsWithoutRef<typeof Select$1.Group>, "className"> {
852
- className?: string;
853
- }
854
- /** Groups related options under a `SelectGroupLabel`, announced together by assistive technology. */
855
- declare const SelectGroup: import("react").ForwardRefExoticComponent<SelectGroupProps & import("react").RefAttributes<HTMLDivElement>>;
856
- interface SelectGroupLabelProps extends Omit<ComponentPropsWithoutRef<typeof Select$1.GroupLabel>, "className"> {
857
- className?: string;
858
- }
859
- /** Heading for a `SelectGroup` — visually a meta caption, wired to the group via `aria-labelledby`. */
860
- declare const SelectGroupLabel: import("react").ForwardRefExoticComponent<SelectGroupLabelProps & import("react").RefAttributes<HTMLDivElement>>;
861
- interface SelectSeparatorProps extends Omit<ComponentPropsWithoutRef<typeof Select$1.Separator>, "className"> {
862
- className?: string;
863
- }
864
- /** Divider between option groups, exposed to screen readers as a separator. */
865
- declare const SelectSeparator: import("react").ForwardRefExoticComponent<SelectSeparatorProps & import("react").RefAttributes<HTMLDivElement>>;
866
- //#endregion
867
- //#region src/components/Combobox/Combobox.d.ts
868
- /**
869
- * Groups the combobox parts and owns value, input text, filtering, and popup
870
- * state. This is Base UI's `Combobox.Root` re-exported unchanged, so every
871
- * root feature is available: `value`/`defaultValue`/`onValueChange`,
872
- * `inputValue`/`onInputValueChange`, `items` (enables filtering and the
873
- * built-in empty state), `multiple`, `filter`/`filteredItems`/`limit` for
874
- * custom matching, `name`/`required`/`disabled`/`readOnly` form wiring, and
875
- * object values via `isItemEqualToValue`/`itemToStringLabel`/
876
- * `itemToStringValue`. Prefer Combobox over Select once a list is long
877
- * enough to need filtering (~15+ options); it does not accept free-form
878
- * text. Advanced `grid` and `virtualized` modes are out of this wrapper's
879
- * scope — compose `@base-ui/react/combobox` parts directly for those.
880
- */
881
- declare const Combobox: typeof Combobox$1.Root;
882
- type ComboboxProps<Value = unknown, Multiple extends boolean | undefined = false> = Combobox$1.Root.Props<Value, Multiple>;
883
- /** Control height shared by the input group, standalone input, and trigger. */
884
- type ComboboxSize = "sm" | "md" | "lg";
885
- declare const useComboboxFilter: typeof Combobox$1.useFilter;
886
- declare const useComboboxFilteredItems: typeof Combobox$1.useFilteredItems;
887
- interface ComboboxLabelProps extends Omit<ComponentPropsWithoutRef<typeof Combobox$1.Label>, "className"> {
888
- className?: string;
889
- }
890
- /**
891
- * Visible label associated automatically with the combobox **trigger** — use
892
- * it with the trigger-anchored (input-inside-popup) pattern. When the
893
- * `ComboboxInput` is the form control, label the input instead: a native
894
- * `<label htmlFor>`, a composed `FieldLabel`, or `aria-label` on the input.
895
- * Renders a `<div>`; pass `render={<span />}` for inline layouts.
896
- */
897
- declare const ComboboxLabel: import("react").ForwardRefExoticComponent<ComboboxLabelProps & import("react").RefAttributes<HTMLDivElement>>;
898
- interface ComboboxInputGroupVariantsOptions {
899
- size?: ComboboxSize;
900
- className?: string;
901
- }
902
- /**
903
- * Class list for an element styled as the combobox field frame — for
904
- * combobox-shaped controls that don't come from Base UI (command-palette
905
- * openers, fake search fields in previews) so every filterable picker
906
- * shares one look.
907
- */
908
- declare function comboboxInputGroupVariants({ size, className }?: ComboboxInputGroupVariantsOptions): string;
909
- interface ComboboxInputGroupProps extends Omit<ComponentPropsWithoutRef<typeof Combobox$1.InputGroup>, "className"> {
910
- /** Control height. `sm` (32px) meets the WCAG 2.5.8 AA target-size floor; prefer `md`/`lg` for touch-first surfaces. The `ComboboxInput` inside inherits it. With chips the field grows taller as rows wrap. */
911
- size?: ComboboxSize;
912
- /** Append the dropdown chevron button after the input — the visual cue that the field holds a predefined list. The popup also opens from clicking the input itself. */
913
- showTrigger?: boolean;
914
- /** Append a clear button that appears while there is a selection or typed text to erase. Leave off for required fields that must always hold a value. */
915
- showClear?: boolean;
916
- /** Accessible name for the folded clear button — override with localized copy. */
917
- clearLabel?: string;
918
- /** Accessible name for the folded chevron button — override with localized copy. */
919
- triggerLabel?: string;
920
- className?: string;
921
- }
922
- /**
923
- * The field frame of an input-anchored combobox: seats the `ComboboxInput`
924
- * (and selection `ComboboxChips`) inside one border with a single focus
925
- * ring, and folds in the standard end-of-field buttons — a dropdown chevron
926
- * (`showTrigger`) and a clear button (`showClear`). The popup anchors to
927
- * this frame. Give the input an accessible name: a native `<label htmlFor>`,
928
- * a composed `FieldLabel`, or `aria-label` on `ComboboxInput`.
929
- */
930
- declare const ComboboxInputGroup: import("react").ForwardRefExoticComponent<ComboboxInputGroupProps & import("react").RefAttributes<HTMLDivElement>>;
931
- interface ComboboxInputProps extends Omit<ComponentPropsWithoutRef<typeof Combobox$1.Input>, "className" | "size"> {
932
- /** Control height when the input stands alone. Inside a `ComboboxInputGroup` the group's `size` wins; inside a `ComboboxPopup` the fixed search-row style applies. */
933
- size?: ComboboxSize;
934
- className?: string;
935
- }
936
- /**
937
- * The text input that filters the list. Context-aware: bare inside a
938
- * `ComboboxInputGroup` (the group owns the frame), a pinned search row
939
- * inside a `ComboboxPopup` (the trigger-anchored pattern), and a standalone
940
- * `Input`-look field otherwise. Typing filters as you type; ArrowDown opens
941
- * and moves through options while focus stays in the input.
942
- */
943
- declare const ComboboxInput: import("react").ForwardRefExoticComponent<ComboboxInputProps & import("react").RefAttributes<HTMLInputElement>>;
944
- interface ComboboxClearProps extends Omit<ComponentPropsWithoutRef<typeof Combobox$1.Clear>, "className"> {
945
- className?: string;
946
- }
947
- /**
948
- * Erases the selection and typed text. Renders only while there is
949
- * something to clear. `ComboboxInputGroup` folds one in via `showClear`;
950
- * use this part directly for custom field layouts. Icon-only — keep an
951
- * accessible name (defaults to "Clear selection").
952
- */
953
- declare const ComboboxClear: import("react").ForwardRefExoticComponent<ComboboxClearProps & import("react").RefAttributes<HTMLButtonElement>>;
954
- type ComboboxTriggerVariant = SelectTriggerVariant;
955
- type ComboboxTriggerSize = SelectTriggerSize;
956
- type BaseTriggerProps$2 = ComponentPropsWithoutRef<typeof Combobox$1.Trigger>;
957
- interface ComboboxTriggerProps extends Omit<BaseTriggerProps$2, "className"> {
958
- /** Visual style: `outline` is the input-like default; `ghost` is borderless for toolbars and dense inline filters. */
959
- variant?: ComboboxTriggerVariant;
960
- /** Control height. `sm` (32px) meets the WCAG 2.5.8 AA target-size floor; prefer `md`/`lg` for touch-first surfaces. */
961
- size?: ComboboxTriggerSize;
962
- /** Stretch to fill the container width — the usual setting inside form layouts. `anchorWidth` takes precedence when both are set. */
963
- fullWidth?: boolean;
964
- /**
965
- * CSS width of the trigger (the popup anchor). Accepts a number in pixels
966
- * or any CSS width such as `"14rem"`, `"100%"`, or `"max-content"`.
967
- * `"max-content"` keeps the control only as wide as the selected value,
968
- * padding, and icon. A consumer `style.width` can override this
969
- * convenience prop.
970
- */
971
- anchorWidth?: CSSProperties["width"];
972
- /** Replaces the up-down carets. Decorative — hidden from assistive technology. */
973
- icon?: ReactNode;
974
- className?: string;
975
- }
976
- /**
977
- * Select-like button anchor for the trigger-anchored pattern: it shows the
978
- * current `ComboboxValue` and opens a popup whose search input rides along
979
- * inside (`header` on `ComboboxPopup`). Shares the Select trigger recipe, so
980
- * value pickers look identical across the system; the up-down carets mark
981
- * this one as searchable. Its accessible name comes from a sibling
982
- * `ComboboxLabel` (or a composed `FieldLabel`); without one, pass
983
- * `aria-label`.
984
- */
985
- declare const ComboboxTrigger: import("react").ForwardRefExoticComponent<ComboboxTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
986
- /**
987
- * The selected value's text, for use inside `ComboboxTrigger` (set
988
- * `placeholder` for the empty state) or as a render-function wrapper in the
989
- * chips pattern. Base UI's `Combobox.Value` re-exported unchanged — it
990
- * renders no element of its own; the trigger styles the text.
991
- */
992
- declare const ComboboxValue: typeof Combobox$1.Value;
993
- type ComboboxValueProps = Combobox$1.Value.Props;
994
- type BasePositionerProps$4 = ComponentPropsWithoutRef<typeof Combobox$1.Positioner>;
995
- type BaseListProps = ComponentPropsWithoutRef<typeof Combobox$1.List>;
996
- type ComboboxAlign = NonNullable<BasePositionerProps$4["align"]>;
997
- interface ComboboxPopupProps extends Omit<ComponentPropsWithoutRef<typeof Combobox$1.Popup>, "className" | "children"> {
998
- /** Items to render: static nodes, or a function `(item, index) => node` that renders the root's filtered `items`. */
999
- children?: BaseListProps["children"];
1000
- /** How the popup lines up along the anchor's bottom (or top) edge. */
1001
- align?: ComboboxAlign;
1002
- /** Gap between anchor and popup in pixels. */
1003
- sideOffset?: BasePositionerProps$4["sideOffset"];
1004
- /** Additional shift along the alignment axis in pixels. */
1005
- alignOffset?: BasePositionerProps$4["alignOffset"];
1006
- /** Minimum space kept from the viewport (or collision boundary) edges when repositioning. */
1007
- collisionPadding?: BasePositionerProps$4["collisionPadding"];
1008
- /**
1009
- * Caps the popup's height so long lists scroll inside it — a number is
1010
- * pixels, a string is any CSS length. Whatever the value, the popup never
1011
- * exceeds the space between the anchor and the viewport edge.
1012
- */
1013
- maxHeight?: number | string;
1014
- /** Portal destination. Defaults to `document.body`. */
1015
- container?: ComponentPropsWithoutRef<typeof Combobox$1.Portal>["container"];
1016
- /** Pinned content above the list — a `ComboboxInput` here creates the searchable-select (trigger-anchored) pattern. */
1017
- header?: ReactNode;
1018
- /** Live status row above the list for async lists ("Searching…", errors). Announced politely to screen readers; its slot stays mounted, so swap the content rather than the prop's presence. */
1019
- status?: ReactNode;
1020
- /**
1021
- * Shown when filtering leaves no items (requires `items` on the root).
1022
- * Defaults to "No results found." — override with localized copy, or pass
1023
- * `null` to omit the built-in empty state entirely.
1024
- */
1025
- emptyMessage?: ReactNode;
1026
- /**
1027
- * Applied to the popup panel. Width hooks: the panel is at least as wide
1028
- * as the anchor — set `w-[var(--anchor-width)]` to match it exactly or
1029
- * `w-*`/`max-w-*` for a fixed width. Cap height with the `maxHeight` prop.
1030
- */
1031
- className?: string;
1032
- }
1033
- /**
1034
- * The floating option list, with the portal, positioning, scrollable list,
1035
- * and always-mounted status/empty regions folded in. Always drops below the
1036
- * anchor and flips above it only when the space below runs out — never
1037
- * sideways. Long lists scroll inside the popup, up to `maxHeight`.
1038
- */
1039
- declare const ComboboxPopup: import("react").ForwardRefExoticComponent<ComboboxPopupProps & import("react").RefAttributes<HTMLDivElement>>;
1040
- interface ComboboxItemProps extends Omit<ComponentPropsWithoutRef<typeof Combobox$1.Item>, "className"> {
1041
- className?: string;
1042
- }
1043
- /**
1044
- * One option in the popup. Children render as the option's label; a check
1045
- * mark appears at the item's right edge while selected. Filtering matches
1046
- * the item's `value` — for object values set `itemToStringLabel` on the
1047
- * root. Keep unavailable options visible but `disabled` so the list stays
1048
- * spatially consistent.
1049
- */
1050
- declare const ComboboxItem: import("react").ForwardRefExoticComponent<ComboboxItemProps & import("react").RefAttributes<HTMLDivElement>>;
1051
- interface ComboboxGroupProps extends Omit<ComponentPropsWithoutRef<typeof Combobox$1.Group>, "className"> {
1052
- className?: string;
1053
- }
1054
- /**
1055
- * Groups related options under a `ComboboxGroupLabel`, announced together by
1056
- * assistive technology. With grouped `items` data (`{ value, items }[]`),
1057
- * pass each group's `items` here and render them via `ComboboxCollection`.
1058
- */
1059
- declare const ComboboxGroup: import("react").ForwardRefExoticComponent<ComboboxGroupProps & import("react").RefAttributes<HTMLDivElement>>;
1060
- interface ComboboxGroupLabelProps extends Omit<ComponentPropsWithoutRef<typeof Combobox$1.GroupLabel>, "className"> {
1061
- className?: string;
1062
- }
1063
- /** Heading for a `ComboboxGroup` — visually a meta caption, wired to the group via `aria-labelledby`. */
1064
- declare const ComboboxGroupLabel: import("react").ForwardRefExoticComponent<ComboboxGroupLabelProps & import("react").RefAttributes<HTMLDivElement>>;
1065
- /**
1066
- * Renders the filtered items of the enclosing `ComboboxGroup` through a
1067
- * function child `(item, index) => node`. Base UI's `Combobox.Collection`
1068
- * re-exported unchanged — it renders no element of its own.
1069
- */
1070
- declare const ComboboxCollection: typeof Combobox$1.Collection;
1071
- type ComboboxCollectionProps = Combobox$1.Collection.Props;
1072
- interface ComboboxSeparatorProps extends Omit<ComponentPropsWithoutRef<typeof Combobox$1.Separator>, "className"> {
1073
- className?: string;
1074
- }
1075
- /** Divider between option groups, exposed to screen readers as a separator. */
1076
- declare const ComboboxSeparator: import("react").ForwardRefExoticComponent<ComboboxSeparatorProps & import("react").RefAttributes<HTMLDivElement>>;
1077
- interface ComboboxChipsProps extends Omit<ComponentPropsWithoutRef<typeof Combobox$1.Chips>, "className"> {
1078
- className?: string;
1079
- }
1080
- /**
1081
- * Row of selection chips for a `multiple` combobox, rendered inside the
1082
- * `ComboboxInputGroup` before the input. Compose it with a `ComboboxValue`
1083
- * render function that maps the selected values to `ComboboxChip`s and ends
1084
- * with the `ComboboxInput`, so typing continues after the chips.
1085
- */
1086
- declare const ComboboxChips: import("react").ForwardRefExoticComponent<ComboboxChipsProps & import("react").RefAttributes<HTMLDivElement>>;
1087
- interface ComboboxChipProps extends Omit<ComponentPropsWithoutRef<typeof Combobox$1.Chip>, "className"> {
1088
- className?: string;
1089
- }
1090
- /**
1091
- * One selected value in a `multiple` combobox. ArrowLeft from the input
1092
- * walks the chips and Backspace removes the last one; give each chip an
1093
- * `aria-label` naming its value. Nest a `ComboboxChipRemove` for pointer
1094
- * users.
1095
- */
1096
- declare const ComboboxChip: import("react").ForwardRefExoticComponent<ComboboxChipProps & import("react").RefAttributes<HTMLDivElement>>;
1097
- interface ComboboxChipRemoveBaseProps extends Omit<ComponentPropsWithoutRef<typeof Combobox$1.ChipRemove>, "className"> {
1098
- className?: string;
1099
- }
1100
- /** The remove button renders only an icon, so an accessible name naming the value is required. */
1101
- type ComboboxChipRemoveProps = ComboboxChipRemoveBaseProps & ({
1102
- "aria-label": string;
1103
- } | {
1104
- "aria-labelledby": string;
1105
- });
1106
- /**
1107
- * Removes its chip's value from the selection. Icon-only, so an accessible
1108
- * name is required — include the value it removes, e.g.
1109
- * `aria-label={`Remove ${item.label}`}`. Children replace the default × icon.
1110
- */
1111
- declare const ComboboxChipRemove: import("react").ForwardRefExoticComponent<ComboboxChipRemoveProps & import("react").RefAttributes<HTMLButtonElement>>;
1112
- //#endregion
1113
- //#region src/components/Menu/Menu.d.ts
1114
- /**
1115
- * Groups the menu parts and owns the open state. A menu lists **actions**
1116
- * (role `menu`); to pick a value that a field keeps showing, use Select.
1117
- * This is Base UI's `Menu.Root` re-exported unchanged, so every root feature
1118
- * is available: `open`/`defaultOpen`/`onOpenChange(open, details)`,
1119
- * `modal` (defaults `true` — page scroll locks while open), `disabled`,
1120
- * `loopFocus`, `orientation`, `highlightItemOnHover`, and
1121
- * `handle`/`triggerId` for detached triggers.
1122
- */
1123
- declare const Menu: <Payload>(props: Menu$1.Root.Props<Payload>) => import("react").JSX.Element;
1124
- type MenuProps = ComponentPropsWithoutRef<typeof Menu$1.Root>;
1125
- /**
1126
- * Creates a handle that links `Menu` with `MenuTrigger`s rendered elsewhere
1127
- * in the tree (toolbars, table rows). Triggers may attach a `payload`, which
1128
- * the `Menu` children render function receives.
1129
- */
1130
- declare const createMenuHandle: typeof Menu$1.createHandle;
1131
- type MenuHandle<Payload = unknown> = Menu$1.Handle<Payload>;
1132
- interface MenuTriggerProps extends Omit<ComponentPropsWithoutRef<typeof Menu$1.Trigger>, "className"> {
1133
- className?: string;
1134
- }
1135
- /**
1136
- * The button that opens the menu. Ships unstyled so the visual comes from
1137
- * composition — render the design system's Button:
1138
- *
1139
- * <MenuTrigger render={<Button variant="outline" />}>Options</MenuTrigger>
1140
- *
1141
- * For the kebab/ellipsis pattern, Button's icon-only form already enforces
1142
- * the accessible name:
1143
- *
1144
- * <MenuTrigger render={<Button variant="ghost" iconOnly aria-label="Row actions" />}>
1145
- * <EllipsisIcon />
1146
- * </MenuTrigger>
1147
- *
1148
- * While its menu is open the element carries `data-popup-open`, the hook for
1149
- * a pressed look (e.g. `className="data-popup-open:bg-muted"`). `openOnHover`
1150
- * with `delay`/`closeDelay` (100/0ms defaults) is available but click-to-open
1151
- * is the reliable default for action menus — hover menus misfire on the way
1152
- * to other targets.
1153
- */
1154
- declare const MenuTrigger: import("react").ForwardRefExoticComponent<MenuTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
1155
- type BasePositionerProps$3 = ComponentPropsWithoutRef<typeof Menu$1.Positioner>;
1156
- type MenuSide = NonNullable<BasePositionerProps$3["side"]>;
1157
- type MenuAlign = NonNullable<BasePositionerProps$3["align"]>;
1158
- interface MenuPopupProps extends Omit<ComponentPropsWithoutRef<typeof Menu$1.Popup>, "className"> {
1159
- /**
1160
- * Side of the anchor to place the popup on; flips automatically when there
1161
- * is no room. When omitted, Base UI picks the menu default: `bottom` for a
1162
- * top-level menu, the inline end (submenu convention) inside a
1163
- * `MenuSubmenuRoot` — so leave it unset unless the layout demands a side.
1164
- */
1165
- side?: MenuSide;
1166
- /**
1167
- * How the popup lines up along the chosen side. When omitted, top-level
1168
- * menus center on the trigger and submenus align `start` so their panel
1169
- * tracks the trigger row.
1170
- */
1171
- align?: MenuAlign;
1172
- /**
1173
- * Gap between anchor and popup in pixels. Defaults adapt to the resolved
1174
- * side: 4px below/above a trigger, and a 4px *overlap* for submenus so the
1175
- * pointer never crosses a dead zone between panels.
1176
- */
1177
- sideOffset?: BasePositionerProps$3["sideOffset"];
1178
- /**
1179
- * Additional shift along the alignment axis in pixels. Defaults adapt: 0
1180
- * for top-level menus, -4px for submenus so the first item lines up with
1181
- * the submenu trigger's row.
1182
- */
1183
- alignOffset?: BasePositionerProps$3["alignOffset"];
1184
- /** Minimum space kept from the viewport (or collision boundary) edges when repositioning. */
1185
- collisionPadding?: BasePositionerProps$3["collisionPadding"];
1186
- /** Position against this element instead of the trigger (e.g. the whole toolbar while a button opens the menu). */
1187
- anchor?: BasePositionerProps$3["anchor"];
1188
- /** Keep the popup in the DOM while closed — for SEO or measuring; closed popups normally unmount. */
1189
- keepMounted?: boolean;
1190
- /** Portal destination. Defaults to `document.body`. */
1191
- container?: ComponentPropsWithoutRef<typeof Menu$1.Portal>["container"];
1192
- /**
1193
- * Applied to the popup panel. Width hooks: the panel is content-sized from
1194
- * 8rem up — set `w-*`/`max-w-*` for a fixed width or
1195
- * `min-w-[var(--anchor-width)]` to never be narrower than the trigger.
1196
- * Long menus scroll inside the panel; cap them earlier with `max-h-*`.
1197
- */
1198
- className?: string;
1199
- }
1200
- /**
1201
- * The floating list of menu items, with the portal and positioning plumbing
1202
- * folded in. Anchored to its trigger by default; opens with a motion-safe
1203
- * scale/fade from the anchor-facing corner. The same component nests inside
1204
- * `MenuSubmenuRoot`, where its placement defaults switch to the submenu
1205
- * conventions (inline-end side, overlapped edge, trigger-row alignment).
1206
- */
1207
- declare const MenuPopup: import("react").ForwardRefExoticComponent<MenuPopupProps & import("react").RefAttributes<HTMLDivElement>>;
1208
- type MenuItemVariant = "default" | "destructive";
1209
- interface MenuItemVariantsOptions {
1210
- variant?: MenuItemVariant;
1211
- inset?: boolean;
1212
- className?: string;
1213
- }
1214
- /**
1215
- * Class list for an element styled as a menu item — for menu-shaped rows
1216
- * that don't come from Base UI (command palettes, custom listboxes) so every
1217
- * item row in the product shares one look.
1218
- */
1219
- declare function menuItemVariants({ variant, inset, className }?: MenuItemVariantsOptions): string;
1220
- interface MenuItemProps extends Omit<ComponentPropsWithoutRef<typeof Menu$1.Item>, "className"> {
1221
- /** Visual tone: `destructive` marks irreversible actions (delete, revoke) in the error hue. */
1222
- variant?: MenuItemVariant;
1223
- /** Indent the label into the indicator column so it aligns with checkbox/radio items in the same menu. */
1224
- inset?: boolean;
1225
- className?: string;
1226
- }
1227
- /**
1228
- * One action in the menu. Children are free-form — a leading `<svg>` icon is
1229
- * sized and muted automatically. Set `label` when children aren't plain text
1230
- * so keyboard typeahead still matches, `disabled` for unavailable actions
1231
- * (keep them visible so users can see what exists), and `closeOnClick={false}`
1232
- * to keep the menu open after the action runs.
1233
- */
1234
- declare const MenuItem: import("react").ForwardRefExoticComponent<MenuItemProps & import("react").RefAttributes<HTMLDivElement>>;
1235
- interface MenuLinkItemProps extends Omit<ComponentPropsWithoutRef<typeof Menu$1.LinkItem>, "className"> {
1236
- /** Indent the label into the indicator column so it aligns with checkbox/radio items in the same menu. */
1237
- inset?: boolean;
1238
- className?: string;
1239
- }
1240
- /**
1241
- * A navigation entry that keeps link semantics — it renders a real `<a>`
1242
- * (never a button styled as one), so it supports open-in-new-tab, copy link,
1243
- * and middle-click. Pass `href` directly, or compose a client-side router
1244
- * link via `render={<Link to="…" />}`.
1245
- */
1246
- declare const MenuLinkItem: import("react").ForwardRefExoticComponent<MenuLinkItemProps & import("react").RefAttributes<HTMLAnchorElement>>;
1247
- type MenuShortcutProps = HTMLAttributes<HTMLSpanElement>;
1248
- /**
1249
- * Right-aligned keyboard hint inside an item (`⌘N`, `Ctrl+D`). Purely
1250
- * visual — it does not register the shortcut; wire the actual key handling
1251
- * in the app. Helper text mirrors Typography caption.
1252
- */
1253
- declare const MenuShortcut: import("react").ForwardRefExoticComponent<MenuShortcutProps & import("react").RefAttributes<HTMLSpanElement>>;
1254
- interface MenuGroupProps extends Omit<ComponentPropsWithoutRef<typeof Menu$1.Group>, "className"> {
1255
- className?: string;
1256
- }
1257
- /** Groups related items under a `MenuGroupLabel`, announced together by assistive technology. */
1258
- declare const MenuGroup: import("react").ForwardRefExoticComponent<MenuGroupProps & import("react").RefAttributes<HTMLDivElement>>;
1259
- interface MenuGroupLabelProps extends Omit<ComponentPropsWithoutRef<typeof Menu$1.GroupLabel>, "className"> {
1260
- /** Indent the label into the indicator column so it aligns with checkbox/radio items in the same menu. */
1261
- inset?: boolean;
1262
- className?: string;
1263
- }
1264
- /** Heading for a `MenuGroup` (or `MenuRadioGroup`) — visually a meta caption, wired to the group via `aria-labelledby`. */
1265
- declare const MenuGroupLabel: import("react").ForwardRefExoticComponent<MenuGroupLabelProps & import("react").RefAttributes<HTMLDivElement>>;
1266
- interface MenuSeparatorProps extends Omit<ComponentPropsWithoutRef<typeof Menu$1.Separator>, "className"> {
1267
- className?: string;
1268
- }
1269
- /** Divider between item groups, exposed to screen readers as a separator. */
1270
- declare const MenuSeparator: import("react").ForwardRefExoticComponent<MenuSeparatorProps & import("react").RefAttributes<HTMLDivElement>>;
1271
- interface MenuCheckboxItemProps extends Omit<ComponentPropsWithoutRef<typeof Menu$1.CheckboxItem>, "className"> {
1272
- className?: string;
1273
- }
1274
- /**
1275
- * An item that toggles a setting on or off — a check mark fills the leading
1276
- * indicator column while `checked`. Control it with
1277
- * `checked`/`defaultChecked`/`onCheckedChange`. It keeps the menu open on
1278
- * click by default (Base UI's `closeOnClick={false}`) so several settings
1279
- * can be flipped in one visit.
1280
- */
1281
- declare const MenuCheckboxItem: import("react").ForwardRefExoticComponent<MenuCheckboxItemProps & import("react").RefAttributes<HTMLDivElement>>;
1282
- interface MenuRadioGroupProps extends Omit<ComponentPropsWithoutRef<typeof Menu$1.RadioGroup>, "className"> {
1283
- className?: string;
1284
- }
1285
- /**
1286
- * Groups `MenuRadioItem`s into a single-choice set and owns its value:
1287
- * `value`/`defaultValue`/`onValueChange(value, details)`. Label the set with
1288
- * a `MenuGroupLabel` inside the group.
1289
- */
1290
- declare const MenuRadioGroup: import("react").ForwardRefExoticComponent<MenuRadioGroupProps & import("react").RefAttributes<HTMLDivElement>>;
1291
- interface MenuRadioItemProps extends Omit<ComponentPropsWithoutRef<typeof Menu$1.RadioItem>, "className"> {
1292
- className?: string;
1293
- }
1294
- /**
1295
- * One option of a `MenuRadioGroup` — a dot fills the leading indicator
1296
- * column while selected. `value` is required; the menu stays open on click
1297
- * by default so the choice can be reconsidered without reopening.
1298
- */
1299
- declare const MenuRadioItem: import("react").ForwardRefExoticComponent<MenuRadioItemProps & import("react").RefAttributes<HTMLDivElement>>;
1300
- /**
1301
- * Groups the parts of a nested menu; renders no HTML. Place it among the
1302
- * parent's items with a `MenuSubmenuTrigger` and a nested `MenuPopup`
1303
- * inside. Keep nesting to one level — deeper trees are hard to steer
1304
- * (and to reach on touch screens). Accepts Base UI's SubmenuRoot props
1305
- * (`open`/`defaultOpen`/`onOpenChange`, `disabled`, `closeParentOnEsc`).
1306
- */
1307
- declare const MenuSubmenuRoot: typeof Menu$1.SubmenuRoot;
1308
- type MenuSubmenuRootProps = ComponentPropsWithoutRef<typeof Menu$1.SubmenuRoot>;
1309
- interface MenuSubmenuTriggerProps extends Omit<ComponentPropsWithoutRef<typeof Menu$1.SubmenuTrigger>, "className"> {
1310
- /** Indent the label into the indicator column so it aligns with checkbox/radio items in the same menu. */
1311
- inset?: boolean;
1312
- className?: string;
1313
- }
1314
- /**
1315
- * The item that opens a submenu — a trailing chevron is appended
1316
- * automatically, and the row stays tinted (`data-popup-open`) while its
1317
- * submenu is open. Opens on hover after a short delay, on click, and with
1318
- * the right arrow key.
1319
- */
1320
- declare const MenuSubmenuTrigger: import("react").ForwardRefExoticComponent<MenuSubmenuTriggerProps & import("react").RefAttributes<HTMLDivElement>>;
1321
- //#endregion
1322
- //#region src/components/ContextMenu/ContextMenu.d.ts
1323
- /**
1324
- * Groups the context menu parts and owns the open state. The menu opens at
1325
- * the pointer from a right click — or a long press on touch — anywhere
1326
- * inside `ContextMenuTrigger`. Base UI's `ContextMenu.Root` re-exported
1327
- * unchanged: `open`/`defaultOpen`/`onOpenChange(open, details)`, `disabled`,
1328
- * `loopFocus`, `orientation`, and `highlightItemOnHover` are all available.
1329
- * A context menu is an invisible shortcut — keep a visible path (a kebab
1330
- * `Menu`, toolbar buttons) to the same actions.
1331
- */
1332
- declare const ContextMenu: typeof ContextMenu$1.Root;
1333
- type ContextMenuProps = ComponentPropsWithoutRef<typeof ContextMenu$1.Root>;
1334
- interface ContextMenuTriggerProps extends Omit<ComponentPropsWithoutRef<typeof ContextMenu$1.Trigger>, "className"> {
1335
- className?: string;
1336
- }
1337
- /**
1338
- * The region the menu acts on. It opens on right click, on the context-menu
1339
- * key / Shift+F10 (the browser fires `contextmenu` for these while focus is
1340
- * inside the region), and on a 500ms long press on touch — movement cancels
1341
- * the press, and the iOS callout is suppressed automatically. Renders an
1342
- * unstyled `<div>` around its children; make an existing element the region
1343
- * via `render`:
1344
- *
1345
- * <ContextMenuTrigger render={<tr />}>…</ContextMenuTrigger>
1346
- *
1347
- * While its menu is open the element carries `data-popup-open` — the hook
1348
- * for a "this is the target" outline. Keep something inside the region
1349
- * focusable so keyboard users can reach the menu, and consider `select-none`
1350
- * on touch-first surfaces so a long press doesn't also start text selection.
1351
- */
1352
- declare const ContextMenuTrigger: import("react").ForwardRefExoticComponent<ContextMenuTriggerProps & import("react").RefAttributes<HTMLDivElement>>;
1353
- type BasePositionerProps$2 = ComponentPropsWithoutRef<typeof ContextMenu$1.Positioner>;
1354
- type ContextMenuSide = NonNullable<BasePositionerProps$2["side"]>;
1355
- type ContextMenuAlign = NonNullable<BasePositionerProps$2["align"]>;
1356
- interface ContextMenuPopupProps extends Omit<ComponentPropsWithoutRef<typeof ContextMenu$1.Popup>, "className"> {
1357
- /**
1358
- * Side of the pointer (or `anchor`) to place the popup on. Leave unset for
1359
- * context-menu behavior: below the cursor, shifting — not flipping — along
1360
- * the edges to stay in the viewport; submenus resolve to the inline end.
1361
- */
1362
- side?: ContextMenuSide;
1363
- /**
1364
- * How the popup lines up along the chosen side. Unset defaults to `start`,
1365
- * so the popup's corner sits at the cursor (submenus align to the trigger
1366
- * row instead).
1367
- */
1368
- align?: ContextMenuAlign;
1369
- /**
1370
- * Distance to the anchor in pixels. Unset defaults adapt: Base UI's
1371
- * pointer-tuned 5px overlap at the root, a 4px panel overlap for submenus.
1372
- * When `side` is set explicitly the default is 0 — the popup edge stays
1373
- * exactly at the pointer.
1374
- */
1375
- sideOffset?: BasePositionerProps$2["sideOffset"];
1376
- /**
1377
- * Additional shift along the alignment axis in pixels. Unset defaults
1378
- * adapt: 2px past the cursor at the root, -4px for submenus so the first
1379
- * item meets the trigger row. 0 when `side` is set explicitly.
1380
- */
1381
- alignOffset?: BasePositionerProps$2["alignOffset"];
1382
- /** Minimum space kept from the viewport (or collision boundary) edges when repositioning. */
1383
- collisionPadding?: BasePositionerProps$2["collisionPadding"];
1384
- /**
1385
- * Position against an element (or virtual element) instead of the pointer —
1386
- * e.g. pin the menu to the card that was right-clicked so it opens in the
1387
- * same place regardless of where inside it the click landed.
1388
- */
1389
- anchor?: BasePositionerProps$2["anchor"];
1390
- /** Keep the popup in the DOM while closed — for SEO or measuring; closed popups normally unmount. */
1391
- keepMounted?: boolean;
1392
- /** Portal destination. Defaults to `document.body`. */
1393
- container?: ComponentPropsWithoutRef<typeof ContextMenu$1.Portal>["container"];
1394
- /**
1395
- * Applied to the popup panel. Width hooks: the panel is content-sized from
1396
- * 8rem up — set `w-*`/`max-w-*` for a fixed width. Long menus scroll
1397
- * inside the panel; cap them earlier with `max-h-*`.
1398
- */
1399
- className?: string;
1400
- }
1401
- /**
1402
- * The floating list of items, with the portal and positioning plumbing
1403
- * folded in. Anchored to the pointer by default — the panel's corner lands
1404
- * at the cursor and shifts (rather than flips) at viewport edges, matching
1405
- * OS context menus; opens with a motion-safe scale/fade. The same component
1406
- * nests inside `ContextMenuSubmenuRoot`, where its placement defaults switch
1407
- * to the shared submenu conventions (inline-end side, overlapped edges,
1408
- * trigger-row alignment). The panel recipe is shared with `MenuPopup`, so
1409
- * context menus and action menus look identical.
1410
- */
1411
- declare const ContextMenuPopup: import("react").ForwardRefExoticComponent<ContextMenuPopupProps & import("react").RefAttributes<HTMLDivElement>>;
1412
- /** One action in the menu — `MenuItem` shared as-is: same `variant`/`inset` props, icon slot, and 32px rows. */
1413
- declare const ContextMenuItem: import("react").ForwardRefExoticComponent<MenuItemProps & import("react").RefAttributes<HTMLDivElement>>;
1414
- type ContextMenuItemProps = MenuItemProps;
1415
- type ContextMenuItemVariant = MenuItemVariant;
1416
- /** A navigation entry that keeps real `<a>` semantics — `MenuLinkItem` shared as-is. */
1417
- declare const ContextMenuLinkItem: import("react").ForwardRefExoticComponent<MenuLinkItemProps & import("react").RefAttributes<HTMLAnchorElement>>;
1418
- type ContextMenuLinkItemProps = MenuLinkItemProps;
1419
- /** Right-aligned keyboard hint inside an item — `MenuShortcut` shared as-is (visual only; wire the key handling in the app). */
1420
- declare const ContextMenuShortcut: import("react").ForwardRefExoticComponent<MenuShortcutProps & import("react").RefAttributes<HTMLSpanElement>>;
1421
- type ContextMenuShortcutProps = MenuShortcutProps;
1422
- /** Groups related items under a `ContextMenuGroupLabel` — `MenuGroup` shared as-is. */
1423
- declare const ContextMenuGroup: import("react").ForwardRefExoticComponent<MenuGroupProps & import("react").RefAttributes<HTMLDivElement>>;
1424
- type ContextMenuGroupProps = MenuGroupProps;
1425
- /** Heading for a group, wired via `aria-labelledby` — `MenuGroupLabel` shared as-is. */
1426
- declare const ContextMenuGroupLabel: import("react").ForwardRefExoticComponent<MenuGroupLabelProps & import("react").RefAttributes<HTMLDivElement>>;
1427
- type ContextMenuGroupLabelProps = MenuGroupLabelProps;
1428
- /** Divider between item groups — `MenuSeparator` shared as-is. */
1429
- declare const ContextMenuSeparator: import("react").ForwardRefExoticComponent<MenuSeparatorProps & import("react").RefAttributes<HTMLDivElement>>;
1430
- type ContextMenuSeparatorProps = MenuSeparatorProps;
1431
- /** An item that toggles a setting and keeps the menu open — `MenuCheckboxItem` shared as-is. */
1432
- declare const ContextMenuCheckboxItem: import("react").ForwardRefExoticComponent<MenuCheckboxItemProps & import("react").RefAttributes<HTMLDivElement>>;
1433
- type ContextMenuCheckboxItemProps = MenuCheckboxItemProps;
1434
- /** Single-choice set for `ContextMenuRadioItem`s — `MenuRadioGroup` shared as-is. */
1435
- declare const ContextMenuRadioGroup: import("react").ForwardRefExoticComponent<MenuRadioGroupProps & import("react").RefAttributes<HTMLDivElement>>;
1436
- type ContextMenuRadioGroupProps = MenuRadioGroupProps;
1437
- /** One option of a radio group — `MenuRadioItem` shared as-is. */
1438
- declare const ContextMenuRadioItem: import("react").ForwardRefExoticComponent<MenuRadioItemProps & import("react").RefAttributes<HTMLDivElement>>;
1439
- type ContextMenuRadioItemProps = MenuRadioItemProps;
1440
- /** Groups the parts of a nested menu; renders no HTML — `MenuSubmenuRoot` shared as-is. Keep nesting to one level. */
1441
- declare const ContextMenuSubmenuRoot: typeof ContextMenu$1.SubmenuRoot;
1442
- type ContextMenuSubmenuRootProps = MenuSubmenuRootProps;
1443
- /** The item that opens a submenu (chevron appended, row tinted while open) — `MenuSubmenuTrigger` shared as-is. */
1444
- declare const ContextMenuSubmenuTrigger: import("react").ForwardRefExoticComponent<MenuSubmenuTriggerProps & import("react").RefAttributes<HTMLDivElement>>;
1445
- type ContextMenuSubmenuTriggerProps = MenuSubmenuTriggerProps;
1446
- //#endregion
1447
- //#region src/components/Popover/Popover.d.ts
1448
- /**
1449
- * Groups the popover parts and owns the open state. Accepts Base UI's Root
1450
- * props: `open`/`defaultOpen`/`onOpenChange` for control, `modal` to lock
1451
- * scroll or trap focus, and `handle`/`triggerId` for detached triggers.
1452
- */
1453
- declare const Popover: typeof Popover$1.Root;
1454
- type PopoverProps = ComponentPropsWithoutRef<typeof Popover$1.Root>;
1455
- /**
1456
- * Creates a handle that links `Popover` with `PopoverTrigger`s rendered
1457
- * elsewhere in the tree (toolbars, table rows). Triggers may attach a
1458
- * `payload`, which the `Popover` children render function receives.
1459
- */
1460
- declare const createPopoverHandle: typeof Popover$1.createHandle;
1461
- type PopoverHandle<Payload = unknown> = Popover$1.Handle<Payload>;
1462
- interface PopoverTriggerProps extends Omit<ComponentPropsWithoutRef<typeof Popover$1.Trigger>, "className"> {
1463
- className?: string;
1464
- }
1465
- /**
1466
- * The button that opens the popover. Ships unstyled so the visual comes from
1467
- * composition — render the design system's Button:
1468
- *
1469
- * <PopoverTrigger render={<Button variant="outline" />}>Filters</PopoverTrigger>
1470
- *
1471
- * While its popup is open the element carries `data-popup-open`, the hook for
1472
- * a pressed look (e.g. `className="data-popup-open:bg-muted"`). Hover-card
1473
- * behavior comes from `openOnHover` with its `delay`/`closeDelay` (300/0ms
1474
- * defaults) — reserve it for previews; interactive content should open on
1475
- * click so it can't vanish mid-interaction.
1476
- */
1477
- declare const PopoverTrigger: import("react").ForwardRefExoticComponent<PopoverTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
1478
- type BasePositionerProps$1 = ComponentPropsWithoutRef<typeof Popover$1.Positioner>;
1479
- type PopoverSide = NonNullable<BasePositionerProps$1["side"]>;
1480
- type PopoverAlign = NonNullable<BasePositionerProps$1["align"]>;
1481
- interface PopoverPopupVariantsOptions {
1482
- className?: string;
1483
- }
1484
- /**
1485
- * Class list for an element styled as the popover panel — for floating
1486
- * surfaces that don't come from Base UI (static previews, custom
1487
- * floating-ui popups) so every popup in the product shares one look.
1488
- */
1489
- declare function popoverPopupVariants({ className }?: PopoverPopupVariantsOptions): string;
1490
- interface PopoverPopupProps extends Omit<ComponentPropsWithoutRef<typeof Popover$1.Popup>, "className"> {
1491
- /** Side of the anchor to place the popup on; flips automatically when there is no room. */
1492
- side?: PopoverSide;
1493
- /** How the popup lines up along the chosen side. */
1494
- align?: PopoverAlign;
1495
- /** Gap between anchor and popup in pixels. The default 8px leaves room for the `arrow`. */
1496
- sideOffset?: BasePositionerProps$1["sideOffset"];
1497
- /** Additional shift along the alignment axis in pixels. */
1498
- alignOffset?: BasePositionerProps$1["alignOffset"];
1499
- /** Minimum space kept from the viewport (or collision boundary) edges when repositioning. */
1500
- collisionPadding?: BasePositionerProps$1["collisionPadding"];
1501
- /** Position against this element instead of the trigger (e.g. an input while a toolbar button opens the popup). */
1502
- anchor?: BasePositionerProps$1["anchor"];
1503
- /** Keep the popup in the DOM while closed — for SEO or measuring; closed popups normally unmount. */
1504
- keepMounted?: boolean;
1505
- /**
1506
- * Portal destination. Defaults to `document.body`. When the popover renders
1507
- * open on first paint (`defaultOpen`) and the container mounts in the same
1508
- * commit, pass the element via callback-ref state — a `RefObject` to an
1509
- * ancestor is not attached yet when the portal first resolves, and it would
1510
- * silently fall back to `document.body`.
1511
- */
1512
- container?: ComponentPropsWithoutRef<typeof Popover$1.Portal>["container"];
1513
- /** Show a caret pointing at the anchor. */
1514
- arrow?: boolean;
1515
- /**
1516
- * Applied to the popup panel. Sizing hooks: the panel is content-sized up
1517
- * to 20rem — set `w-*`/`max-w-*` to change that, `w-[var(--anchor-width)]`
1518
- * to match the trigger width, or an inner `max-h-* overflow-y-auto`
1519
- * wrapper for scrollable content (the panel itself must not clip — the
1520
- * arrow hangs outside it).
1521
- */
1522
- className?: string;
1523
- }
1524
- /**
1525
- * The floating panel, with the portal and positioning plumbing folded in.
1526
- * Anchored to its trigger by default; opens with a motion-safe scale/fade
1527
- * from the anchor-facing corner. When the popover holds no `PopoverTitle`,
1528
- * name the panel for assistive tech with `aria-label`.
1529
- */
1530
- declare const PopoverPopup: import("react").ForwardRefExoticComponent<PopoverPopupProps & import("react").RefAttributes<HTMLDivElement>>;
1531
- interface PopoverTitleProps extends Omit<ComponentPropsWithoutRef<typeof Popover$1.Title>, "className"> {
1532
- className?: string;
1533
- }
1534
- /**
1535
- * Heading that names the popup — Base UI wires it to the panel via
1536
- * `aria-labelledby` automatically. An `<h2>` by default; pick the level from
1537
- * the surrounding outline with `render`, e.g. `render={<h3 />}`.
1538
- */
1539
- declare const PopoverTitle: import("react").ForwardRefExoticComponent<PopoverTitleProps & import("react").RefAttributes<HTMLHeadingElement>>;
1540
- interface PopoverDescriptionProps extends Omit<ComponentPropsWithoutRef<typeof Popover$1.Description>, "className"> {
1541
- className?: string;
1542
- }
1543
- /**
1544
- * Supporting copy announced with the popup — Base UI wires it via
1545
- * `aria-describedby` automatically.
1546
- */
1547
- declare const PopoverDescription: import("react").ForwardRefExoticComponent<PopoverDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>>;
1548
- interface PopoverCloseProps extends Omit<ComponentPropsWithoutRef<typeof Popover$1.Close>, "className"> {
1549
- className?: string;
1550
- }
1551
- /**
1552
- * A button that closes the popup. Unstyled, like the trigger — compose the
1553
- * design system's Button for footer actions:
1554
- *
1555
- * <PopoverClose render={<Button size="sm" variant="outline" />}>Done</PopoverClose>
1556
- *
1557
- * or borrow its classes for a corner icon dismiss, which needs an accessible
1558
- * name:
1559
- *
1560
- * <PopoverClose aria-label="Close" className={buttonVariants({ variant: "ghost", size: "sm", iconOnly: true })}>
1561
- * <XIcon />
1562
- * </PopoverClose>
1563
- */
1564
- declare const PopoverClose: import("react").ForwardRefExoticComponent<PopoverCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
1565
- //#endregion
1566
- //#region src/components/DatePicker/DatePicker.d.ts
1567
- type DatePickerVariant = "outline" | "ghost";
1568
- type DatePickerSize = "sm" | "md" | "lg";
1569
- type BaseTriggerProps$1 = ComponentPropsWithoutRef<typeof PopoverTrigger>;
1570
- type BaseRootProps$1 = ComponentPropsWithoutRef<typeof Popover>;
1571
- type SingleCalendarProps = Extract<CalendarProps, {
1572
- mode?: "single";
1573
- }>;
1574
- /**
1575
- * Calendar configuration accepted by DatePicker. Selection, locale, and
1576
- * disabled/read-only state stay owned by DatePicker so trigger and grid can
1577
- * never drift apart.
1578
- */
1579
- interface DatePickerCalendarProps extends Omit<SingleCalendarProps, "mode" | "value" | "defaultValue" | "onValueChange" | "allowDeselect" | "disabled" | "readOnly" | "locale"> {}
1580
- /** Popup positioning, focus, portal, and ARIA options forwarded to `PopoverPopup`. */
1581
- interface DatePickerPopupProps extends Omit<PopoverPopupProps, "children" | "className"> {}
1582
- interface DatePickerVariantsOptions {
1583
- /** Visual style of the trigger. */
1584
- variant?: DatePickerVariant;
1585
- /** Control height. */
1586
- size?: DatePickerSize;
1587
- /** Stretch the trigger to fill its container. */
1588
- fullWidth?: boolean;
1589
- /** Additional classes merged after the variant recipe. */
1590
- className?: string;
1591
- }
1592
- /** Class list for an element styled as the DatePicker trigger. */
1593
- declare function datePickerVariants({ variant, size, fullWidth, className }?: DatePickerVariantsOptions): string;
1594
- interface DatePickerProps extends Omit<BaseTriggerProps$1, "children" | "className" | "defaultValue" | "disabled" | "form" | "name" | "value"> {
1595
- /** Selected local calendar date (controlled). `null` represents no selection. */
1596
- value?: Date | null;
1597
- /** Initial selected local calendar date (uncontrolled). */
1598
- defaultValue?: Date | null;
1599
- /** Called when a day is selected, or with `null` when `allowDeselect` clears it. */
1600
- onValueChange?: (value: Date | null) => void;
1601
- /** Let selecting the chosen day again clear the value. @default false */
1602
- allowDeselect?: boolean;
1603
- /** Whether the calendar popup is open (controlled). */
1604
- open?: BaseRootProps$1["open"];
1605
- /** Whether the calendar popup starts open (uncontrolled). @default false */
1606
- defaultOpen?: BaseRootProps$1["defaultOpen"];
1607
- /** Called whenever Base UI requests that the popup open or close. */
1608
- onOpenChange?: BaseRootProps$1["onOpenChange"];
1609
- /** Called after the popup's opening or closing animation completes. */
1610
- onOpenChangeComplete?: BaseRootProps$1["onOpenChangeComplete"];
1611
- /** Close the popup after a date is selected or deselected. @default true */
1612
- closeOnSelect?: boolean;
1613
- /** Text shown while no date is selected. Localize this consumer-owned string. @default "Pick a date" */
1614
- placeholder?: string;
1615
- /**
1616
- * BCP-47 locale used by the trigger formatter and Calendar. Defaults to the
1617
- * runtime locale.
1618
- */
1619
- locale?: string;
1620
- /** Options passed to `Intl.DateTimeFormat` for the trigger value. @default { dateStyle: "medium" } */
1621
- formatOptions?: Intl.DateTimeFormatOptions;
1622
- /** Replace the default `Intl.DateTimeFormat` trigger text. Must return an accessible text label. */
1623
- formatValue?: (date: Date, locale: string | undefined) => string;
1624
- /** Accessible name for the calendar popup and date grid. Localize it. @default "Choose date" */
1625
- calendarLabel?: string;
1626
- /** Calendar behavior and layout options; DatePicker keeps selection/state props synchronized itself. */
1627
- calendarProps?: DatePickerCalendarProps;
1628
- /** Popover positioning, portal, focus, and ARIA options. Defaults to bottom-start alignment. */
1629
- popupProps?: DatePickerPopupProps;
1630
- /** Additional classes for the calendar popup panel. */
1631
- popupClassName?: string;
1632
- /** Visual style: `outline` is input-like; `ghost` suits toolbars and inline filters. */
1633
- variant?: DatePickerVariant;
1634
- /** Trigger height. `sm` (32px) meets WCAG 2.5.8 AA; prefer `md`/`lg` for touch-first surfaces. */
1635
- size?: DatePickerSize;
1636
- /** Stretch the trigger to fill its container. `anchorWidth` or consumer `style.width` can override it. */
1637
- fullWidth?: boolean;
1638
- /**
1639
- * CSS width of the trigger. Accepts pixels or any CSS width such as
1640
- * `"18rem"`, `"100%"`, or `"max-content"`.
1641
- */
1642
- anchorWidth?: CSSProperties["width"];
1643
- /** Replaces the decorative calendar icon. Pass `null` to hide it. */
1644
- icon?: ReactNode;
1645
- /** Disable the trigger and calendar; a named hidden input is omitted from form submission. */
1646
- disabled?: boolean;
1647
- /** Keep the picker openable and navigable while preventing date changes. */
1648
- readOnly?: boolean;
1649
- /**
1650
- * Name used to submit the selected date through a hidden input as local
1651
- * `YYYY-MM-DD`. Native required validation is intentionally left to the
1652
- * surrounding form-field abstraction.
1653
- */
1654
- name?: string;
1655
- /** ID of the form associated with both the trigger and the hidden date input. */
1656
- form?: string;
1657
- /** Additional classes merged onto the trigger. */
1658
- className?: string;
1659
- }
1660
- /**
1661
- * A localized date trigger with a Calendar in a Base UI Popover.
1662
- *
1663
- * The visible trigger text is always its baseline accessible name. Add
1664
- * `aria-label`/`aria-labelledby` when surrounding context (for example,
1665
- * "Departure date") must be part of the name.
1666
- */
1667
- declare const DatePicker: import("react").ForwardRefExoticComponent<DatePickerProps & import("react").RefAttributes<HTMLButtonElement>>;
1668
- //#endregion
1669
- //#region src/components/DateRangePicker/DateRangePicker.d.ts
1670
- type DateRangePickerVariant = DatePickerVariant;
1671
- type DateRangePickerSize = DatePickerSize;
1672
- type BaseTriggerProps = ComponentPropsWithoutRef<typeof PopoverTrigger>;
1673
- type BaseRootProps = ComponentPropsWithoutRef<typeof Popover>;
1674
- type RangeCalendarProps = Extract<CalendarProps, {
1675
- mode: "range";
1676
- }>;
1677
- /**
1678
- * Calendar configuration accepted by DateRangePicker. Selection, locale, and
1679
- * disabled/read-only state stay owned by DateRangePicker so trigger and grid
1680
- * can never drift apart.
1681
- */
1682
- interface DateRangePickerCalendarProps extends Omit<RangeCalendarProps, "mode" | "value" | "defaultValue" | "onValueChange" | "disabled" | "readOnly" | "locale"> {}
1683
- /** Popup positioning, focus, portal, and ARIA options forwarded to `PopoverPopup`. */
1684
- interface DateRangePickerPopupProps extends Omit<PopoverPopupProps, "children" | "className"> {}
1685
- interface DateRangePickerVariantsOptions {
1686
- /** Visual style of the trigger. */
1687
- variant?: DateRangePickerVariant;
1688
- /** Control height. */
1689
- size?: DateRangePickerSize;
1690
- /** Stretch the trigger to fill its container. */
1691
- fullWidth?: boolean;
1692
- /** Additional classes merged after the variant recipe. */
1693
- className?: string;
1694
- }
1695
- /** Class list for an element styled as the DateRangePicker trigger. */
1696
- declare function dateRangePickerVariants({ variant, size, fullWidth, className }?: DateRangePickerVariantsOptions): string;
1697
- interface DateRangePickerProps extends Omit<BaseTriggerProps, "children" | "className" | "defaultValue" | "disabled" | "form" | "name" | "value"> {
1698
- /** Selected inclusive local-calendar range (controlled). `null` represents no selection. */
1699
- value?: CalendarDateRange | null;
1700
- /** Initial selected inclusive local-calendar range (uncontrolled). */
1701
- defaultValue?: CalendarDateRange | null;
1702
- /** Called with an ordered, complete range after its second date is chosen. */
1703
- onValueChange?: (value: CalendarDateRange | null) => void;
1704
- /** Whether the calendar popup is open (controlled). */
1705
- open?: BaseRootProps["open"];
1706
- /** Whether the calendar popup starts open (uncontrolled). @default false */
1707
- defaultOpen?: BaseRootProps["defaultOpen"];
1708
- /** Called whenever Base UI requests that the popup open or close. */
1709
- onOpenChange?: BaseRootProps["onOpenChange"];
1710
- /** Called after the popup's opening or closing animation completes. */
1711
- onOpenChangeComplete?: BaseRootProps["onOpenChangeComplete"];
1712
- /** Close the popup after the range's second date is selected. @default true */
1713
- closeOnSelect?: boolean;
1714
- /** Text shown while no complete range is selected. Localize this consumer-owned string. @default "Pick a date range" */
1715
- placeholder?: string;
1716
- /**
1717
- * BCP-47 locale used by the trigger formatter and Calendar. Defaults to the
1718
- * runtime locale.
1719
- */
1720
- locale?: string;
1721
- /** Options passed to `Intl.DateTimeFormat` for the trigger range. @default { dateStyle: "medium" } */
1722
- formatOptions?: Intl.DateTimeFormatOptions;
1723
- /** Replace the default localized trigger text. Must return an accessible plain-text label. */
1724
- formatValue?: (range: CalendarDateRange, locale: string | undefined) => string;
1725
- /** Accessible name for the calendar popup and date grids. Localize it. @default "Choose date range" */
1726
- calendarLabel?: string;
1727
- /** Calendar behavior and layout options; selection/state props stay synchronized by DateRangePicker. */
1728
- calendarProps?: DateRangePickerCalendarProps;
1729
- /** Popover positioning, portal, focus, and ARIA options. Defaults to bottom-start alignment. */
1730
- popupProps?: DateRangePickerPopupProps;
1731
- /** Additional classes for the calendar popup panel. */
1732
- popupClassName?: string;
1733
- /** Visual style: `outline` is input-like; `ghost` suits toolbars and inline filters. */
1734
- variant?: DateRangePickerVariant;
1735
- /** Trigger height. `sm` (32px) meets WCAG 2.5.8 AA; prefer `md`/`lg` for touch-first surfaces. */
1736
- size?: DateRangePickerSize;
1737
- /** Stretch the trigger to fill its container. `anchorWidth` or consumer `style.width` can override it. */
1738
- fullWidth?: boolean;
1739
- /**
1740
- * CSS width of the trigger. Accepts pixels or any CSS width such as
1741
- * `"20rem"`, `"100%"`, or `"max-content"`.
1742
- */
1743
- anchorWidth?: CSSProperties["width"];
1744
- /** Replaces the decorative calendar icon. Pass `null` to hide it. */
1745
- icon?: ReactNode;
1746
- /** Disable the trigger and calendar; named hidden inputs are omitted from form submission. */
1747
- disabled?: boolean;
1748
- /** Keep the picker openable and navigable while preventing range changes. */
1749
- readOnly?: boolean;
1750
- /** Name used to submit the range start as a local `YYYY-MM-DD` hidden value. */
1751
- startName?: string;
1752
- /** Name used to submit the range end as a local `YYYY-MM-DD` hidden value. */
1753
- endName?: string;
1754
- /** ID of the form associated with the trigger and both hidden date inputs. */
1755
- form?: string;
1756
- /** Additional classes merged onto the trigger. */
1757
- className?: string;
1758
- }
1759
- /**
1760
- * A localized date-range trigger with an ArcFusion Calendar in a Base UI Popover.
1761
- *
1762
- * The visible trigger text is always its baseline accessible name. Add
1763
- * `aria-label`/`aria-labelledby` when surrounding context (for example,
1764
- * "Booking dates") must be part of the name.
1765
- */
1766
- declare const DateRangePicker: import("react").ForwardRefExoticComponent<DateRangePickerProps & import("react").RefAttributes<HTMLButtonElement>>;
1767
- //#endregion
1768
- //#region src/components/Dialog/Dialog.d.ts
1769
- type DialogSize = "sm" | "md" | "lg" | "full";
1770
- type DialogScrollBehavior = "inside" | "outside";
1771
- /**
1772
- * Groups all parts of the dialog and owns its state. Renders no DOM.
1773
- *
1774
- * This is Base UI's `Dialog.Root` re-exported unchanged, so every root
1775
- * feature is available: `open`/`defaultOpen`/`onOpenChange(open, details)`,
1776
- * `modal` (`true` | `false` | `"trap-focus"`), `disablePointerDismissal`,
1777
- * `onOpenChangeComplete`, `actionsRef`, and detached triggers via
1778
- * `Dialog.createHandle()` payloads.
1779
- */
1780
- declare const Dialog: typeof Dialog$1.Root;
1781
- type DialogProps = Dialog$1.Root.Props;
1782
- interface DialogTriggerProps extends Omit<ComponentPropsWithoutRef<typeof Dialog$1.Trigger>, "className"> {
1783
- className?: string;
1784
- }
1785
- /**
1786
- * Opens the dialog. Renders an unstyled `<button>` and exposes
1787
- * `data-popup-open` while its dialog is open — compose it with Button for
1788
- * the usual look: `<DialogTrigger render={<Button>Open</Button>} />`.
1789
- */
1790
- declare const DialogTrigger: import("react").ForwardRefExoticComponent<DialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
1791
- interface DialogCloseProps extends Omit<ComponentPropsWithoutRef<typeof Dialog$1.Close>, "className"> {
1792
- className?: string;
1793
- }
1794
- /**
1795
- * Closes the dialog. Renders an unstyled `<button>` — compose it with
1796
- * Button for footer actions:
1797
- * `<DialogClose render={<Button variant="outline">Cancel</Button>} />`.
1798
- */
1799
- declare const DialogClose: import("react").ForwardRefExoticComponent<DialogCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
1800
- interface DialogPopupVariantsOptions {
1801
- size?: DialogSize;
1802
- scrollBehavior?: DialogScrollBehavior;
1803
- className?: string;
1804
- }
1805
- /**
1806
- * Class list for the dialog surface itself. Useful when composing Base UI's
1807
- * dialog parts directly (custom portals, alert dialogs) while keeping the
1808
- * ArcFusion look.
1809
- */
1810
- declare function dialogPopupVariants({ size, scrollBehavior, className }?: DialogPopupVariantsOptions): string;
1811
- interface DialogPopupProps extends Omit<ComponentPropsWithoutRef<typeof Dialog$1.Popup>, "className"> {
1812
- /**
1813
- * Width preset: `sm` 384px for confirmations, `md` 512px (default) for
1814
- * forms, `lg` 672px for rich content, `full` for an edge-to-edge
1815
- * full-screen dialog. Below the preset the popup shrinks with the
1816
- * viewport, keeping a 16px margin.
1817
- */
1818
- size?: DialogSize;
1819
- /**
1820
- * How content taller than the viewport scrolls. `inside` (default) caps
1821
- * the popup at the viewport and scrolls within it; `outside` lets the
1822
- * popup grow and scrolls the page-like viewport behind the backdrop
1823
- * instead. `full` dialogs always scroll inside.
1824
- */
1825
- scrollBehavior?: DialogScrollBehavior;
1826
- /**
1827
- * Show the corner close button. When disabling it for a required
1828
- * decision, keep another `DialogClose` action inside the popup — with
1829
- * `modal` dialogs a visible close control is what lets touch
1830
- * screen-reader users escape.
1831
- */
1832
- showCloseButton?: boolean;
1833
- /** Accessible name (and tooltip-free label) of the corner close button — localize it alongside your content. */
1834
- closeLabel?: string;
1835
- /**
1836
- * Render the dimming scrim behind the dialog. Disable it together with
1837
- * `modal={false}` on the root so the rest of the page stays visible and
1838
- * interactive.
1839
- */
1840
- showBackdrop?: boolean;
1841
- /**
1842
- * Keep the dialog mounted in the DOM while closed. Off by default —
1843
- * enable it to preserve heavy content or form state across reopens.
1844
- */
1845
- keepMounted?: boolean;
1846
- /** Element the dialog portals into instead of `<body>` — for scoped stacking contexts, shadow DOM, or inline previews. */
1847
- container?: ComponentPropsWithoutRef<typeof Dialog$1.Portal>["container"];
1848
- className?: string;
1849
- }
1850
- /**
1851
- * The dialog surface. Bundles Base UI's Portal, Backdrop, Viewport, and
1852
- * Popup parts into one styled component; `initialFocus`/`finalFocus` and
1853
- * every other Base UI popup prop pass straight through.
1854
- */
1855
- declare const DialogPopup: import("react").ForwardRefExoticComponent<DialogPopupProps & import("react").RefAttributes<HTMLDivElement>>;
1856
- interface DialogHeaderProps extends HTMLAttributes<HTMLDivElement> {}
1857
- /** Groups the title and description with standard spacing at the top of the popup. */
1858
- declare const DialogHeader: import("react").ForwardRefExoticComponent<DialogHeaderProps & import("react").RefAttributes<HTMLDivElement>>;
1859
- interface DialogFooterProps extends HTMLAttributes<HTMLDivElement> {}
1860
- /** Action row: right-aligned on desktop, stacked with the primary action on top on small screens. */
1861
- declare const DialogFooter: import("react").ForwardRefExoticComponent<DialogFooterProps & import("react").RefAttributes<HTMLDivElement>>;
1862
- interface DialogTitleProps extends Omit<ComponentPropsWithoutRef<typeof Dialog$1.Title>, "className"> {
1863
- className?: string;
1864
- }
1865
- /**
1866
- * Labels the dialog — Base UI wires it to the popup's `aria-labelledby`.
1867
- * Renders an `<h2>`; every dialog should have one (or an `aria-label` on
1868
- * the popup) so the dialog announces meaningfully.
1869
- */
1870
- declare const DialogTitle: import("react").ForwardRefExoticComponent<DialogTitleProps & import("react").RefAttributes<HTMLHeadingElement>>;
1871
- interface DialogDescriptionProps extends Omit<ComponentPropsWithoutRef<typeof Dialog$1.Description>, "className"> {
1872
- className?: string;
1873
- }
1874
- /** Supporting copy announced when the dialog opens — wired to `aria-describedby`. */
1875
- declare const DialogDescription: import("react").ForwardRefExoticComponent<DialogDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>>;
1876
- //#endregion
1877
- //#region src/components/Drawer/Drawer.d.ts
1878
- type DrawerSide = "top" | "right" | "bottom" | "left";
1879
- type DrawerSize = "sm" | "md" | "lg" | "full";
1880
- interface DrawerProps extends Drawer$1.Root.Props {
1881
- /**
1882
- * Screen edge the drawer is attached to. `right` (default) suits detail
1883
- * and settings panels, `left` navigation, `bottom` mobile sheets (snap
1884
- * points and the drag handle are designed for it), `top` banners. Also
1885
- * sets the matching swipe-to-dismiss direction.
1886
- */
1887
- side?: DrawerSide;
1888
- }
1889
- /**
1890
- * Groups all parts of the drawer and owns its state. Renders no DOM.
1891
- *
1892
- * Wraps Base UI's `Drawer.Root`, deriving `swipeDirection` from `side` (pass
1893
- * `swipeDirection` yourself only to decouple them). Every other root feature
1894
- * passes through: `open`/`defaultOpen`/`onOpenChange(open, details)`,
1895
- * `snapPoints` with `snapPoint`/`defaultSnapPoint`/`onSnapPointChange`,
1896
- * `modal` (`true` | `false` | `"trap-focus"`), `disablePointerDismissal`,
1897
- * `onOpenChangeComplete`, `actionsRef`, and detached triggers via
1898
- * `createDrawerHandle()` payloads.
1899
- */
1900
- declare function Drawer({ side, swipeDirection, ...rest }: DrawerProps): import("react").JSX.Element;
1901
- declare namespace Drawer {
1902
- var displayName: string;
1903
- }
1904
- interface DrawerTriggerProps extends Omit<ComponentPropsWithoutRef<typeof Drawer$1.Trigger>, "className"> {
1905
- className?: string;
1906
- }
1907
- /**
1908
- * Opens the drawer. Renders an unstyled `<button>` and exposes
1909
- * `data-popup-open` while its drawer is open — compose it with Button for
1910
- * the usual look: `<DrawerTrigger render={<Button>Open</Button>} />`.
1911
- */
1912
- declare const DrawerTrigger: import("react").ForwardRefExoticComponent<DrawerTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
1913
- interface DrawerCloseProps extends Omit<ComponentPropsWithoutRef<typeof Drawer$1.Close>, "className"> {
1914
- className?: string;
1915
- }
1916
- /**
1917
- * Closes the drawer. Renders an unstyled `<button>` — compose it with
1918
- * Button for footer actions:
1919
- * `<DrawerClose render={<Button variant="outline">Cancel</Button>} />`.
1920
- */
1921
- declare const DrawerClose: import("react").ForwardRefExoticComponent<DrawerCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
1922
- interface DrawerPopupVariantsOptions {
1923
- side?: DrawerSide;
1924
- size?: DrawerSize;
1925
- className?: string;
1926
- }
1927
- /**
1928
- * Class list for the drawer surface itself. Useful when composing Base UI's
1929
- * drawer parts directly (custom viewports, snap-point layouts) while keeping
1930
- * the ArcFusion look.
1931
- */
1932
- declare function drawerPopupVariants({ side, size, className }?: DrawerPopupVariantsOptions): string;
1933
- interface DrawerPopupProps extends Omit<ComponentPropsWithoutRef<typeof Drawer$1.Popup>, "className"> {
1934
- /**
1935
- * Amount of screen the drawer takes on its `side`'s axis. Side panels:
1936
- * `sm` 320px, `md` 384px (default), `lg` 512px, `full` edge-to-edge — all
1937
- * but `full` keep a 48px page peek on narrow screens. Sheets (`top`/
1938
- * `bottom`) size to their content up to `sm` 40dvh, `md` 75dvh, `lg`
1939
- * 90dvh, or a `full` viewport takeover.
1940
- */
1941
- size?: DrawerSize;
1942
- /**
1943
- * Show the corner close button. When disabling it for a required
1944
- * decision, keep another `DrawerClose` action inside the popup — swiping
1945
- * is not discoverable or possible for everyone, and with `modal` drawers
1946
- * a visible close control is what lets touch screen-reader users escape.
1947
- */
1948
- showCloseButton?: boolean;
1949
- /** Accessible name (and tooltip-free label) of the corner close button — localize it alongside your content. */
1950
- closeLabel?: string;
1951
- /**
1952
- * Show the drag-handle affordance on the swipe edge. Recommended for
1953
- * `bottom` sheets on touch surfaces; it is decorative (the whole drawer
1954
- * responds to swipes) and hidden from assistive technology.
1955
- */
1956
- showHandle?: boolean;
1957
- /**
1958
- * Render the dimming scrim behind the drawer. Disable it together with
1959
- * `modal={false}` on the root so the rest of the page stays visible and
1960
- * interactive.
1961
- */
1962
- showBackdrop?: boolean;
1963
- /**
1964
- * Keep the drawer mounted in the DOM while closed. Off by default —
1965
- * enable it to preserve heavy content or form state across reopens.
1966
- */
1967
- keepMounted?: boolean;
1968
- /**
1969
- * Enable Base UI's keyboard-aware focus and scroll handling — turn it on
1970
- * for bottom sheets with form fields so software keyboards don't cover
1971
- * the focused input. No effect on devices without a virtual keyboard.
1972
- */
1973
- virtualKeyboard?: boolean;
1974
- /** Element the drawer portals into instead of `<body>` — for scoped stacking contexts, shadow DOM, or inline previews. */
1975
- container?: ComponentPropsWithoutRef<typeof Drawer$1.Portal>["container"];
1976
- className?: string;
1977
- }
1978
- /**
1979
- * The drawer surface. Bundles Base UI's Portal, Backdrop, Viewport, Popup,
1980
- * and Content parts into one styled component positioned on the root's
1981
- * `side`; `initialFocus`/`finalFocus` and every other Base UI popup prop
1982
- * pass straight through. Children render inside the scrollable content
1983
- * region while the handle and corner close stay pinned to the frame.
1984
- */
1985
- declare const DrawerPopup: import("react").ForwardRefExoticComponent<DrawerPopupProps & import("react").RefAttributes<HTMLDivElement>>;
1986
- interface DrawerHeaderProps extends HTMLAttributes<HTMLDivElement> {}
1987
- /** Groups the title and description with standard spacing at the top of the drawer. */
1988
- declare const DrawerHeader: import("react").ForwardRefExoticComponent<DrawerHeaderProps & import("react").RefAttributes<HTMLDivElement>>;
1989
- interface DrawerFooterProps extends HTMLAttributes<HTMLDivElement> {}
1990
- /**
1991
- * Action row: right-aligned on desktop, stacked with the primary action on
1992
- * top on small screens. As a direct child of the popup it pins to the
1993
- * drawer's bottom edge when the content is shorter than a full-height panel.
1994
- */
1995
- declare const DrawerFooter: import("react").ForwardRefExoticComponent<DrawerFooterProps & import("react").RefAttributes<HTMLDivElement>>;
1996
- interface DrawerTitleProps extends Omit<ComponentPropsWithoutRef<typeof Drawer$1.Title>, "className"> {
1997
- className?: string;
1998
- }
1999
- /**
2000
- * Labels the drawer — Base UI wires it to the popup's `aria-labelledby`.
2001
- * Renders an `<h2>`; every drawer should have one (or an `aria-label` on
2002
- * the popup) so the panel announces meaningfully.
2003
- */
2004
- declare const DrawerTitle: import("react").ForwardRefExoticComponent<DrawerTitleProps & import("react").RefAttributes<HTMLHeadingElement>>;
2005
- interface DrawerDescriptionProps extends Omit<ComponentPropsWithoutRef<typeof Drawer$1.Description>, "className"> {
2006
- className?: string;
2007
- }
2008
- /** Supporting copy announced when the drawer opens — wired to `aria-describedby`. */
2009
- declare const DrawerDescription: import("react").ForwardRefExoticComponent<DrawerDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>>;
2010
- interface DrawerSwipeAreaProps extends Omit<ComponentPropsWithoutRef<typeof Drawer$1.SwipeArea>, "className"> {
2011
- className?: string;
2012
- }
2013
- /**
2014
- * Invisible strip along the drawer's edge that opens it with a swipe-in
2015
- * gesture (mobile-navigation pattern). Positions itself on the root's
2016
- * `side` with a 24px hit area — pass `className` to widen it or add a
2017
- * visible affordance as children. Keep a regular `DrawerTrigger` too:
2018
- * edge swipes are invisible to most users and unavailable to keyboards.
2019
- */
2020
- declare const DrawerSwipeArea: import("react").ForwardRefExoticComponent<DrawerSwipeAreaProps & import("react").RefAttributes<HTMLDivElement>>;
2021
- /**
2022
- * Shares drawer state across the app shell so `DrawerIndent` /
2023
- * `DrawerIndentBackground` can react to any drawer opening. Renders no DOM —
2024
- * wrap it around the app root only when using the indent effect.
2025
- */
2026
- declare const DrawerProvider: typeof Drawer$1.Provider;
2027
- /**
2028
- * Keyboard-aware focus and scroll handling for bottom sheets that contain
2029
- * form fields. Prefer the `virtualKeyboard` prop on `DrawerPopup`; this raw
2030
- * part exists for custom compositions and MUST render inside a `Drawer`
2031
- * (it reads the root's context), wrapping the drawer's parts. Exposes
2032
- * `--drawer-keyboard-inset` on the viewport. Renders no DOM.
2033
- */
2034
- declare const DrawerVirtualKeyboardProvider: typeof Drawer$1.VirtualKeyboardProvider;
2035
- /**
2036
- * Creates a handle that connects detached `DrawerTrigger`s (or imperative
2037
- * `open`/`close` calls) to a `Drawer` rendered elsewhere — e.g. opening a
2038
- * drawer from a menu item. Pass it to both as the `handle` prop.
2039
- */
2040
- declare const createDrawerHandle: typeof Drawer$1.createHandle;
2041
- interface DrawerIndentProps extends Omit<ComponentPropsWithoutRef<typeof Drawer$1.Indent>, "className"> {
2042
- className?: string;
2043
- }
2044
- /**
2045
- * Wrapper for the app's main UI inside a `DrawerProvider`; gets
2046
- * `data-active` while any drawer is open. Unstyled on purpose — the app
2047
- * shell owns the effect, e.g.
2048
- * `className="motion-safe:transition-transform data-active:scale-[0.98]"`
2049
- * for the iOS-style recede.
2050
- */
2051
- declare const DrawerIndent: import("react").ForwardRefExoticComponent<DrawerIndentProps & import("react").RefAttributes<HTMLDivElement>>;
2052
- interface DrawerIndentBackgroundProps extends Omit<ComponentPropsWithoutRef<typeof Drawer$1.IndentBackground>, "className"> {
2053
- className?: string;
2054
- }
2055
- /**
2056
- * Backdrop layer rendered behind `DrawerIndent` (place it just before) so
2057
- * the receded app has something to sit on — style it with `data-active`
2058
- * like the indent itself. Unstyled on purpose.
2059
- */
2060
- declare const DrawerIndentBackground: import("react").ForwardRefExoticComponent<DrawerIndentBackgroundProps & import("react").RefAttributes<HTMLDivElement>>;
2061
- //#endregion
2062
- //#region src/components/Field/Field.d.ts
2063
- type FieldOrientation = "vertical" | "horizontal";
2064
- type BaseFieldRootProps = ComponentPropsWithoutRef<typeof Field$1.Root>;
2065
- interface FieldProps<TFieldValues extends FieldValues = FieldValues> extends Omit<BaseFieldRootProps, "className" | "name"> {
2066
- /**
2067
- * Identifies the field: the submitted name in native forms, the registered
2068
- * path when connected to React Hook Form. With an explicit `control`, the
2069
- * name is type-checked against the form's values.
2070
- */
2071
- name?: FieldPath<TFieldValues>;
2072
- /**
2073
- * React Hook Form `control` for connecting this field explicitly. Inside a
2074
- * `<Form form={…}>` it is read from context instead, so most fields only
2075
- * need `name`. A field with a `name` and a reachable control is
2076
- * "connected": it subscribes to that field's state via `useController`,
2077
- * shows `FieldError` messages automatically, and wires the `Input` inside
2078
- * it (value, change/blur handlers, focus ref) with no extra props.
2079
- */
2080
- control?: Control<TFieldValues>;
2081
- /**
2082
- * Marks the field as required: the label gains a decorative asterisk and
2083
- * the control is announced as required (`aria-required` when connected —
2084
- * the schema owns actual enforcement — or the native `required` attribute
2085
- * in static fields).
2086
- */
2087
- required?: boolean;
2088
- /**
2089
- * `vertical` (default) stacks label, control, and supporting text.
2090
- * `horizontal` puts the label in a leading column, baseline-aligned with
2091
- * the control — for dense, label-left form layouts. Checkbox/switch rows
2092
- * are a different pattern: wrap the control with `FieldLabel` instead.
2093
- */
2094
- orientation?: FieldOrientation;
2095
- className?: string;
2096
- }
2097
- interface FieldComponent {
2098
- <TFieldValues extends FieldValues = FieldValues>(props: FieldProps<TFieldValues> & {
2099
- ref?: Ref<HTMLDivElement>;
2100
- }): ReactNode;
2101
- displayName?: string;
2102
- }
2103
- /**
2104
- * Labelling + validation wrapper for a single form control, built on Base UI's
2105
- * Field. It associates `FieldLabel`, `FieldDescription`, and `FieldError`
2106
- * with the control automatically (ids, `aria-describedby`) and exposes state
2107
- * data-attributes (`data-invalid`, `data-touched`, `data-dirty`,
2108
- * `data-filled`, `data-focused`) on every part for styling.
2109
- *
2110
- * Give it a `name` inside `<Form form={…}>` (or pass `control`) to connect it
2111
- * to React Hook Form — validation state then flows in from the form and the
2112
- * `Input` inside is wired automatically. Without a form library it works as a
2113
- * native field: constraint attributes plus the `validate`/`validationMode`
2114
- * props drive `FieldError` via its `match` prop.
2115
- */
2116
- declare const Field: FieldComponent;
2117
- interface FieldLabelVariantsOptions {
2118
- className?: string;
2119
- }
2120
- /**
2121
- * Class list for an element styled as a field label — for labelling controls
2122
- * that live outside a `Field` (e.g. a filter Select in a toolbar) so every
2123
- * label in the product shares one look.
2124
- */
2125
- declare function fieldLabelVariants({ className }?: FieldLabelVariantsOptions): string;
2126
- interface FieldLabelProps extends Omit<ComponentPropsWithoutRef<typeof Field$1.Label>, "className"> {
2127
- className?: string;
2128
- }
2129
- /**
2130
- * Visible label, automatically associated with the field's control — clicking
2131
- * it focuses the control. When the `Field` is `required`, a decorative
2132
- * asterisk (hidden from assistive technology, which hears the control's
2133
- * required state instead) is appended. For checkbox/radio/switch rows, wrap
2134
- * the control instead: `<FieldLabel><Switch /> Notifications</FieldLabel>`.
2135
- * When the control is button-based (Select, Combobox triggers), pass
2136
- * `nativeLabel={false}` — the label then renders as a `<div>` wired via
2137
- * `aria-labelledby`, so hovering or clicking it doesn't act on the button.
2138
- */
2139
- declare const FieldLabel: import("react").ForwardRefExoticComponent<FieldLabelProps & import("react").RefAttributes<HTMLLabelElement>>;
2140
- interface FieldDescriptionProps extends Omit<ComponentPropsWithoutRef<typeof Field$1.Description>, "className"> {
2141
- className?: string;
2142
- }
2143
- /**
2144
- * Persistent supporting copy for the field, announced via `aria-describedby`.
2145
- * It stays visible while an error shows — the hint is exactly what the user
2146
- * needs to fix the problem. Order it in the children wherever the design
2147
- * calls for (before or after the control); the association is automatic.
2148
- */
2149
- declare const FieldDescription: import("react").ForwardRefExoticComponent<FieldDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>>;
2150
- interface FieldErrorProps extends Omit<ComponentPropsWithoutRef<typeof Field$1.Error>, "className"> {
2151
- className?: string;
2152
- }
2153
- /**
2154
- * Validation message for the field, wired into `aria-describedby` and
2155
- * announced on appearance (`role="alert"`). In a connected field it renders
2156
- * the form error automatically — the message (or a list when
2157
- * `criteriaMode: "all"` reports several), shown exactly while the field is
2158
- * invalid; `children` replace the message text. In static fields it follows
2159
- * Base UI's native behavior: `match` picks a ValidityState condition (e.g.
2160
- * `match="valueMissing"`) and `children` provide the message.
2161
- */
2162
- declare const FieldError: import("react").ForwardRefExoticComponent<FieldErrorProps & import("react").RefAttributes<HTMLDivElement>>;
2163
- interface FieldItemProps extends Omit<ComponentPropsWithoutRef<typeof Field$1.Item>, "className"> {
2164
- className?: string;
2165
- }
2166
- /**
2167
- * Groups one option of a checkbox or radio group with its own label and
2168
- * description — inside it, `FieldLabel`/`FieldDescription` attach to that
2169
- * option's control instead of the whole field. Compose with `Fieldset`
2170
- * (legend = the group's name) per option.
2171
- */
2172
- declare const FieldItem: import("react").ForwardRefExoticComponent<FieldItemProps & import("react").RefAttributes<HTMLDivElement>>;
2173
- type FieldValidityProps = ComponentPropsWithoutRef<typeof Field$1.Validity>;
2174
- /**
2175
- * Render-prop over the field's native ValidityState — for custom validity UI
2176
- * such as inline requirement checklists. Renders no element of its own.
2177
- * Base UI's `Field.Validity`, re-exported unchanged.
2178
- */
2179
- declare const FieldValidity: import("react").FC<import("@base-ui/react").FieldValidityProps>;
2180
- //#endregion
2181
- //#region src/components/Field/FieldContext.d.ts
2182
- /**
2183
- * Control wiring a connected `Field` provides to the form control inside it.
2184
- * The shape mirrors React Hook Form's `field` object from `useController`,
2185
- * kept structural so consumers of the context never import react-hook-form.
2186
- */
2187
- interface FieldControlProps {
2188
- /** Field name registered with the form. */
2189
- name: string;
2190
- /** Current field value from form state. */
2191
- value: unknown;
2192
- /** Whether react-hook-form marked the field disabled (form- or field-level). */
2193
- disabled?: boolean;
2194
- /** Change handler — accepts either a change event or a raw value. */
2195
- onChange: (eventOrValue: unknown) => void;
2196
- /** Blur handler — marks the field as touched. */
2197
- onBlur: () => void;
2198
- /** Ref callback used for focus management (e.g. focus-first-error on submit). */
2199
- ref: (instance: unknown) => void;
2200
- }
2201
- /**
2202
- * Control wiring published by the closest connected `Field`, or `null` when
2203
- * the component is not inside one. `Input` consumes this automatically; use
2204
- * it to connect controls that don't yet, e.g. a Select:
2205
- *
2206
- * function PlanSelect(props: SelectProps<string>) {
2207
- * const control = useFieldControl();
2208
- * return (
2209
- * <Select
2210
- * value={control?.value as string}
2211
- * onValueChange={control?.onChange}
2212
- * inputRef={control?.ref}
2213
- * {...props}
2214
- * />
2215
- * );
2216
- * }
2217
- *
2218
- * React Hook Form's `onChange` accepts raw values, so Base UI `onValueChange`
2219
- * callbacks can be passed straight through.
2220
- */
2221
- declare function useFieldControl(): FieldControlProps | null;
2222
- //#endregion
2223
- //#region src/components/Fieldset/Fieldset.d.ts
2224
- interface FieldsetProps extends Omit<ComponentPropsWithoutRef<typeof Fieldset$1.Root>, "className"> {
2225
- className?: string;
2226
- }
2227
- /**
2228
- * Groups related fields under one shared `FieldsetLegend` — required for
2229
- * radio and checkbox groups (WCAG 1.3.1), useful for form sections like
2230
- * "Billing details". Renders a native `<fieldset>`, so `disabled` disables
2231
- * every control inside it at once; with React Hook Form, note that disabling
2232
- * here is visual/interactive only — schema validation still runs, so also
2233
- * disable or exclude those fields in the form when they shouldn't block
2234
- * submission.
2235
- */
2236
- declare const Fieldset: import("react").ForwardRefExoticComponent<FieldsetProps & import("react").RefAttributes<HTMLFieldSetElement>>;
2237
- type FieldsetLegendVariant = "section" | "label";
2238
- interface FieldsetLegendProps extends Omit<ComponentPropsWithoutRef<typeof Fieldset$1.Legend>, "className"> {
2239
- /**
2240
- * `section` (default) styles the legend as a form-section heading;
2241
- * `label` matches `FieldLabel` for radio/checkbox groups, so the group
2242
- * caption reads like the labels of the fields around it.
2243
- */
2244
- variant?: FieldsetLegendVariant;
2245
- className?: string;
2246
- }
2247
- /**
2248
- * The fieldset's caption, automatically associated with the group for
2249
- * assistive technology. Keep it short — some screen readers repeat the
2250
- * legend before every control in the group.
2251
- */
2252
- declare const FieldsetLegend: import("react").ForwardRefExoticComponent<FieldsetLegendProps & import("react").RefAttributes<HTMLDivElement>>;
2253
- interface FieldsetDescriptionProps extends Omit<HTMLAttributes<HTMLParagraphElement>, "className"> {
2254
- className?: string;
2255
- }
2256
- /**
2257
- * Supporting copy for the whole group, placed right after the legend.
2258
- * Visible text content read in sequence — unlike `FieldDescription` it is
2259
- * not wired into any control's `aria-describedby`.
2260
- */
2261
- declare const FieldsetDescription: import("react").ForwardRefExoticComponent<FieldsetDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>>;
2262
- //#endregion
2263
- //#region src/components/Form/Form.d.ts
2264
- type BaseFormProps = ComponentPropsWithoutRef<typeof Form$1>;
2265
- interface FormProps<TFieldValues extends FieldValues = FieldValues, TTransformedValues = TFieldValues> extends Omit<BaseFormProps, "className"> {
2266
- /**
2267
- * The `useForm` return value. Providing it switches the form to React Hook
2268
- * Form mode: children get the form context (so `<Field name="…">` connects
2269
- * with no extra props), submission runs through `handleSubmit`, and native
2270
- * constraint validation is turned off (`noValidate`) so the schema is the
2271
- * single source of truth. Omit it for a native Base UI form (constraint
2272
- * validation, the `errors` server-error map, `onFormSubmit`).
2273
- */
2274
- form?: UseFormReturn<TFieldValues, any, TTransformedValues>;
2275
- /**
2276
- * Called with the parsed values when submission passes validation — with a
2277
- * Zod resolver this is the schema's output type. React Hook Form focuses
2278
- * the first invalid control when validation fails (`shouldFocusError`).
2279
- */
2280
- onValidSubmit?: SubmitHandler<TTransformedValues>;
2281
- /** Called with the field errors when submission fails validation. */
2282
- onInvalidSubmit?: SubmitErrorHandler<TFieldValues>;
2283
- className?: string;
2284
- }
2285
- interface FormComponent {
2286
- <TFieldValues extends FieldValues = FieldValues, TTransformedValues = TFieldValues>(props: FormProps<TFieldValues, TTransformedValues> & {
2287
- ref?: Ref<HTMLFormElement>;
2288
- }): ReactNode;
2289
- displayName?: string;
2290
- }
2291
- /**
2292
- * The form element for both worlds. With `form={useForm(…)}` it becomes the
2293
- * React Hook Form shell — provider, `handleSubmit`, and `noValidate` in one:
2294
- *
2295
- * const schema = z.object({ email: z.email("Enter a valid email") });
2296
- * const form = useForm({ resolver: zodResolver(schema), mode: "onTouched" });
2297
- *
2298
- * <Form form={form} onValidSubmit={(data) => save(data)}>
2299
- * <Field name="email">
2300
- * <FieldLabel>Email</FieldLabel>
2301
- * <Input type="email" autoComplete="email" />
2302
- * <FieldError />
2303
- * </Field>
2304
- * <Button type="submit">Save</Button>
2305
- * </Form>
2306
- *
2307
- * Without `form` it is Base UI's native form: constraint validation drives
2308
- * `FieldError` via `match`, `errors` maps server errors onto fields by name,
2309
- * and `onFormSubmit` receives values as a plain object.
2310
- */
2311
- declare const Form: FormComponent;
2312
- //#endregion
2313
- //#region src/components/Input/Input.d.ts
2314
- type InputSize = "sm" | "md" | "lg";
2315
- interface InputVariantsOptions {
2316
- size?: InputSize;
2317
- className?: string;
2318
- }
2319
- /**
2320
- * Class list for an element styled as a standalone Input — for input-shaped
2321
- * elements that aren't this component (a `<textarea>`, a fake search box that
2322
- * opens a command palette) so every text control shares one look. Inside an
2323
- * `InputGroup` the group owns the frame; these classes are for standalone use.
2324
- */
2325
- declare function inputVariants({ size, className }?: InputVariantsOptions): string;
2326
- type BaseInputProps = ComponentPropsWithoutRef<typeof Input$1>;
2327
- interface InputProps extends Omit<BaseInputProps, "className" | "size"> {
2328
- /** Control height. `sm` (32px) meets the WCAG 2.5.8 AA target-size floor; prefer `md`/`lg` for touch-first surfaces. Inside an `InputGroup` the group's `size` wins. */
2329
- size?: InputSize;
2330
- /** The native `size` attribute (visible width in characters) — renamed because `size` selects the control height. */
2331
- htmlSize?: number;
2332
- /** Marks the input invalid (`aria-invalid` + destructive styling) when validation is wired manually. Composed `Field`s set this state for you via `data-invalid`. */
2333
- invalid?: boolean;
2334
- className?: string;
2335
- }
2336
- /**
2337
- * Native text input built on Base UI's Input. Full width by default — size
2338
- * it via the container. Inside a `Field` it inherits labelling, description
2339
- * and error wiring plus state data-attributes automatically; inside a
2340
- * *connected* Field (React Hook Form) the value, change/blur handlers, and
2341
- * focus ref are wired for you too — passing `value`, `defaultValue`,
2342
- * `onChange`, or `name` yourself takes back manual control (don't also
2343
- * `register` the same name: the Field already registered it). Standalone
2344
- * max-performance registration `{...form.register("name")}` works as usual.
2345
- * Fields that collect data about the user must pass the matching
2346
- * `autocomplete` token (WCAG 1.3.5).
2347
- */
2348
- declare const Input: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement>>;
2349
- interface InputGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, "className"> {
2350
- /** Frame height, mirroring Input sizes. The Input inside inherits it. */
2351
- size?: InputSize;
2352
- className?: string;
2353
- }
2354
- /**
2355
- * Frame that seats decorations next to an `Input` — icons, text affixes like
2356
- * `$` or `.com`, or interactive addons — inside one shared border with a
2357
- * single focus ring. Compose `InputGroupAddon`(s) and one `Input` in visual
2358
- * order; the input goes bare and the group takes over its frame, including
2359
- * invalid/disabled/read-only states. Works inside `Field` unchanged.
2360
- */
2361
- declare const InputGroup: import("react").ForwardRefExoticComponent<InputGroupProps & import("react").RefAttributes<HTMLDivElement>>;
2362
- interface InputGroupAddonProps extends Omit<HTMLAttributes<HTMLDivElement>, "className"> {
2363
- className?: string;
2364
- }
2365
- /**
2366
- * A decoration slot inside `InputGroup` — place it before or after the
2367
- * `Input` in the children. Addon content sits outside the input's accessible
2368
- * name: mark purely decorative content (icons, unit text repeated in the
2369
- * label) with `aria-hidden`, and never hide interactive addons — a clear or
2370
- * show-password `Button` must stay in the accessibility tree.
2371
- */
2372
- declare const InputGroupAddon: import("react").ForwardRefExoticComponent<InputGroupAddonProps & import("react").RefAttributes<HTMLDivElement>>;
2373
- //#endregion
2374
- //#region src/components/Progress/Progress.d.ts
2375
- type ProgressSize = "sm" | "md" | "lg";
2376
- type ProgressVariant = "primary" | "success" | "warning" | "destructive";
2377
- interface ProgressTrackVariantsOptions {
2378
- size?: ProgressSize;
2379
- className?: string;
2380
- }
2381
- /**
2382
- * Class list for an element styled as a Progress track.
2383
- *
2384
- * Pair with `progressIndicatorVariants()` to build layouts the flattened
2385
- * component doesn't cover — e.g. a stacked storage bar. Such a composite is
2386
- * one image to assistive technology, so name the whole thing:
2387
- *
2388
- * <div role="img" aria-label="Storage: documents 45%, media 21%"
2389
- * className={progressTrackVariants({ size: "lg" })}>
2390
- * <div className="flex h-full gap-px">
2391
- * <div className={progressIndicatorVariants({ className: "rounded-none" })} style={{ width: "45%" }} />
2392
- * <div className={progressIndicatorVariants({ variant: "success", className: "rounded-none" })} style={{ width: "21%" }} />
2393
- * </div>
2394
- * </div>
2395
- */
2396
- declare function progressTrackVariants({ size, className }?: ProgressTrackVariantsOptions): string;
2397
- interface ProgressIndicatorVariantsOptions {
2398
- variant?: ProgressVariant;
2399
- className?: string;
2400
- }
2401
- /** Class list for an element styled as a Progress fill — see `progressTrackVariants`. */
2402
- declare function progressIndicatorVariants({ variant, className }?: ProgressIndicatorVariantsOptions): string;
2403
- interface ProgressBaseProps extends Omit<ComponentPropsWithoutRef<typeof Progress$1.Root>, "className" | "value" | "children"> {
2404
- /**
2405
- * Completion within `[min, max]` (0–100 by default). Omit — or pass
2406
- * `null` — for an indeterminate bar while the amount of work is unknown.
2407
- * Never move it backwards; per NN/g, prefer indeterminate under ~10s and
2408
- * a percent-done readout beyond that.
2409
- */
2410
- value?: number | null;
2411
- /** Track thickness: `sm` 4px · `md` 8px · `lg` 12px. Text and spacing are unaffected. */
2412
- size?: ProgressSize;
2413
- /**
2414
- * Semantic fill color. For informational statuses use `primary` — the
2415
- * palette's `info` alias shares the primary ramp. Every fill clears the
2416
- * WCAG 1.4.11 3:1 non-text contrast floor against the track. The fill does
2417
- * not change on completion; switch to `success` yourself if the surface
2418
- * calls for it (see `data-complete`).
2419
- */
2420
- variant?: ProgressVariant;
2421
- /**
2422
- * Visible operation name (Base UI's Label part), rendered above the track
2423
- * and wired up as the accessible name. Without it, `aria-label` or
2424
- * `aria-labelledby` is required — enforced at the type level.
2425
- */
2426
- label?: ReactNode;
2427
- /**
2428
- * Show the formatted value (Base UI's Value part) at the trailing edge of
2429
- * the header row — a percentage by default; `format` and `locale` on the
2430
- * root change the formatting. Renders nothing while indeterminate.
2431
- */
2432
- showValue?: boolean;
2433
- className?: string;
2434
- }
2435
- /** A progressbar must expose an accessible name: a visible label or an aria attribute. */
2436
- type ProgressLabellingProps = {
2437
- label: ReactNode;
2438
- } | {
2439
- label?: never;
2440
- "aria-label": string;
2441
- } | {
2442
- label?: never;
2443
- "aria-labelledby": string;
2444
- };
2445
- type ProgressProps = ProgressBaseProps & ProgressLabellingProps;
2446
- /**
2447
- * Linear indicator for the status of a long-running task, built on Base UI's
2448
- * Progress. `value` fills the track (the width transition is motion-safe);
2449
- * omitting it renders the indeterminate sweep, which degrades to an opacity
2450
- * pulse under reduced motion so the bar never looks stalled. `min`, `max`,
2451
- * `format`, `locale`, `aria-valuetext`, and `getAriaValueText` pass through
2452
- * to Base UI's Root; `data-progressing` / `data-complete` /
2453
- * `data-indeterminate` are available as styling hooks. Linear only — for
2454
- * spinner-style ambient waits use AILoader.
2455
- */
2456
- declare const Progress: import("react").ForwardRefExoticComponent<ProgressProps & import("react").RefAttributes<HTMLDivElement>>;
2457
- //#endregion
2458
- //#region src/components/Radio/Radio.d.ts
2459
- type RadioSize = "sm" | "md" | "lg";
2460
- interface RadioVariantsOptions {
2461
- size?: RadioSize;
2462
- className?: string;
2463
- }
2464
- /**
2465
- * Class list for the radio circle itself. State styling hangs off Base UI's
2466
- * data-attributes (`data-checked`, `data-disabled`, `data-readonly`,
2467
- * `data-invalid`) plus `aria-invalid` — useful when styling a sibling of the
2468
- * radio (e.g. a selection card) with the same look.
2469
- */
2470
- declare function radioVariants({ size, className }?: RadioVariantsOptions): string;
2471
- interface RadioProps extends Omit<ComponentPropsWithoutRef<typeof Radio$1.Root>, "className"> {
2472
- /**
2473
- * Circle size. The 24px `lg` circle meets the WCAG 2.5.8 target-size floor
2474
- * on its own; `sm`/`md` rely on the clickable `label` (or surrounding
2475
- * spacing) to extend the target. Prefer `md`+ with a label on touch-first
2476
- * surfaces.
2477
- */
2478
- size?: RadioSize;
2479
- /**
2480
- * Visible option label rendered in an enclosing `<label>`, so clicking it
2481
- * selects the radio and it names the option. Without it, provide an
2482
- * accessible name another way: `aria-label`, `aria-labelledby`, or an
2483
- * external `<label>`. Unlike Checkbox, `required` adds no asterisk here —
2484
- * a radio option is never required by itself; mark the group caption
2485
- * instead.
2486
- */
2487
- label?: ReactNode;
2488
- /**
2489
- * Supporting copy below the label, linked via `aria-describedby`. Rendered
2490
- * outside the `<label>` element so screen readers announce it as the
2491
- * description instead of reading it into the accessible name.
2492
- */
2493
- description?: ReactNode;
2494
- /** Applied to the radio circle itself, also when `label`/`description` wrap it. */
2495
- className?: string;
2496
- }
2497
- /**
2498
- * One option of a `RadioGroup`, built on Base UI's Radio. The indicator dot
2499
- * is built in and animates behind `motion-safe`. `ref` and `className`
2500
- * always target the circle element, whether or not the labelled layout
2501
- * wraps it. Radios only function inside a `RadioGroup`.
2502
- */
2503
- declare const Radio: import("react").ForwardRefExoticComponent<RadioProps & import("react").RefAttributes<HTMLSpanElement>>;
2504
- interface RadioGroupProps extends Omit<ComponentPropsWithoutRef<typeof RadioGroup$1>, "className"> {
2505
- className?: string;
2506
- }
2507
- /**
2508
- * Holds the single selected value (`value`/`defaultValue`/`onValueChange`)
2509
- * shared by child radios matched by their `value` prop, and submits it in
2510
- * forms via `name`. `disabled`, `readOnly`, and `required` apply group-wide.
2511
- * Lays the options out as a vertical stack — pass `className="flex-row"` for
2512
- * a horizontal row (arrow keys move the selection either way). The group
2513
- * needs an accessible name: `aria-labelledby` pointing at a caption, or
2514
- * `aria-label`; when the choice is required, mark that caption — not the
2515
- * individual options.
2516
- */
2517
- declare const RadioGroup: import("react").ForwardRefExoticComponent<RadioGroupProps & import("react").RefAttributes<HTMLDivElement>>;
2518
- //#endregion
2519
- //#region src/components/Skeleton/Skeleton.d.ts
2520
- type SkeletonVariant = "text" | "circular" | "rectangular" | "rounded";
2521
- type SkeletonAnimation = "pulse" | "wave" | "none";
2522
- interface SkeletonRenderState extends Record<string, unknown> {
2523
- /** Whether the placeholder is currently concealing its content. */
2524
- loading: boolean;
2525
- }
2526
- interface SkeletonVariantsOptions {
2527
- /** Shape recipe for text, avatars, sharp media, or rounded surfaces. */
2528
- variant?: SkeletonVariant;
2529
- /** Indeterminate motion. All animation stops when reduced motion is requested. */
2530
- animation?: SkeletonAnimation;
2531
- /** Apply placeholder appearance; `false` keeps only the structural wrapper classes. */
2532
- loading?: boolean;
2533
- /** Additional classes merged after the Skeleton recipe. */
2534
- className?: string;
2535
- }
2536
- /** Class list for an element styled as a Skeleton placeholder. */
2537
- declare function skeletonVariants({ variant, animation, loading, className }?: SkeletonVariantsOptions): string;
2538
- interface SkeletonBaseProps extends Omit<ComponentPropsWithoutRef<"div">, "children" | "className"> {
2539
- /** Shape of the placeholder. `text` has a usable 16px minimum height and fills its container; other shapes infer dimensions from children or `className`/`style`. */
2540
- variant?: SkeletonVariant;
2541
- /** `pulse` is the calm default, `wave` adds directional progress, and `none` is static. Motion is disabled automatically for `prefers-reduced-motion`. */
2542
- animation?: SkeletonAnimation;
2543
- /** Show the placeholder and make wrapped content inert. Set to `false` to reveal the content without replacing the host element. */
2544
- loading?: boolean;
2545
- /** Optional content whose dimensions the placeholder should preserve. Interactive descendants cannot be focused or activated while loading. */
2546
- children?: ReactNode;
2547
- /** Replace the rendered `div` or inspect `{ loading }` in a render callback. */
2548
- render?: useRender.RenderProp<SkeletonRenderState>;
2549
- /** Additional classes for dimensions, layout, or a context-specific semantic background. */
2550
- className?: string;
2551
- }
2552
- type SkeletonProps = SkeletonBaseProps;
2553
- declare const Skeleton: import("react").ForwardRefExoticComponent<SkeletonBaseProps & import("react").RefAttributes<HTMLDivElement>>;
2554
- //#endregion
2555
- //#region src/components/Stepper/Stepper.d.ts
2556
- type StepperOrientation = "horizontal" | "vertical";
2557
- type StepperSize = "sm" | "md" | "lg";
2558
- interface StepperTriggerVariantsOptions {
2559
- size?: StepperSize;
2560
- className?: string;
2561
- }
2562
- /**
2563
- * Class list for an element laid out and focus-styled as a StepperTrigger.
2564
- *
2565
- * Use it when a foreign interactive element must sit in a step's place — e.g.
2566
- * a router link that re-enters a completed step:
2567
- *
2568
- * <a href="/checkout/plan" className={stepperTriggerVariants()}>
2569
- * <StepperIndicator />
2570
- * <StepperTitle>Choose plan</StepperTitle>
2571
- * </a>
2572
- */
2573
- declare function stepperTriggerVariants({ size, className }?: StepperTriggerVariantsOptions): string;
2574
- interface StepperProps extends Omit<ComponentPropsWithoutRef<"ol">, "className"> {
2575
- /**
2576
- * Zero-based index of the current step. Steps before it read as completed,
2577
- * steps after it as upcoming (per-item `completed` overrides). Set it to
2578
- * the step count once the flow finishes so every step reads completed.
2579
- * The stepper holds no internal state — the surrounding flow owns the step.
2580
- */
2581
- value?: number;
2582
- /**
2583
- * Called with a step's index when its `StepperTrigger` is activated.
2584
- * Update `value` from it (gate the update to keep a step unreachable).
2585
- * Without triggers the stepper is a static indicator and this never fires.
2586
- */
2587
- onValueChange?: (value: number, event: MouseEvent<HTMLButtonElement>) => void;
2588
- /**
2589
- * Enforce sequential order (the NN/g wizard default): triggers on steps
2590
- * after the current one are blocked, while completed steps stay
2591
- * revisitable. Blocked steps keep the upcoming look — only the explicit
2592
- * `disabled` prop fades a step. Set `false` for free navigation.
2593
- */
2594
- linear?: boolean;
2595
- /** Layout axis. Vertical suits long labels, descriptions, and inline step content. */
2596
- orientation?: StepperOrientation;
2597
- /**
2598
- * Indicator diameter: `sm` 24px · `md` 32px · `lg` 40px. `sm` sits exactly
2599
- * on the WCAG 2.5.8 24px target-size floor — with triggers, the label
2600
- * extends the target, but prefer `md`+ for touch-first surfaces.
2601
- */
2602
- size?: StepperSize;
2603
- /** Visually-hidden status appended to completed steps (USWDS wording). Localize it with the page. */
2604
- completedLabel?: string;
2605
- /** Visually-hidden status appended to upcoming steps. Localize it with the page. */
2606
- incompleteLabel?: string;
2607
- /** Visually-hidden status appended to invalid steps. Localize it with the page. */
2608
- invalidLabel?: string;
2609
- /** Replace the rendered `ol`. Preserve list semantics — they give screen-reader users the "step 2 of 4" position for free. */
2610
- render?: useRender.RenderProp;
2611
- /** Additional classes merged after the root recipe, e.g. `max-w-md`. */
2612
- className?: string;
2613
- }
2614
- /**
2615
- * Progress through a multi-step flow, marked up as an ordered list with
2616
- * `aria-current="step"` on the current step and visually-hidden state text on
2617
- * the others. It defaults to `aria-label="Progress"`; pass a localized
2618
- * `aria-label` (or `aria-labelledby`) when the page language isn't English.
2619
- */
2620
- declare const Stepper: import("react").ForwardRefExoticComponent<StepperProps & import("react").RefAttributes<HTMLOListElement>>;
2621
- interface StepperItemProps extends Omit<ComponentPropsWithoutRef<"li">, "className"> {
2622
- /** Zero-based position of this step. Drives the derived state and the number the indicator shows. */
2623
- index: number;
2624
- /**
2625
- * Override the derived completed state — e.g. mark a skipped optional step
2626
- * incomplete with `completed={false}`, or a finished later step in a free
2627
- * flow with `completed`. Omit to derive from the stepper's `value`.
2628
- */
2629
- completed?: boolean;
2630
- /** Fade the step and block its trigger. For sequence-enforcement leave it to `linear` instead, which blocks without fading. */
2631
- disabled?: boolean;
2632
- /** Mark the step as failed: destructive styling, an error glyph, and the `invalidLabel` status for screen readers. */
2633
- invalid?: boolean;
2634
- /** Replace the rendered `li`. Preserve list-item semantics. */
2635
- render?: useRender.RenderProp;
2636
- /** Additional classes merged after the item recipe. */
2637
- className?: string;
2638
- }
2639
- /**
2640
- * One step in the flow. When it holds no `StepperTrigger` the item itself
2641
- * carries `aria-current="step"` (the USWDS static-indicator pattern); with a
2642
- * trigger, the trigger takes over so keyboard focus announces the state.
2643
- */
2644
- declare const StepperItem: import("react").ForwardRefExoticComponent<StepperItemProps & import("react").RefAttributes<HTMLLIElement>>;
2645
- interface StepperTriggerProps extends Omit<ComponentPropsWithoutRef<"button">, "className"> {
2646
- /** Replace the rendered `button`, e.g. `render={<a href="…" />}` when steps are routed pages. Keep it interactive — static steps simply omit the trigger. */
2647
- render?: useRender.RenderProp;
2648
- /** Additional classes merged after the trigger recipe. */
2649
- className?: string;
2650
- }
2651
- /**
2652
- * Makes a step navigable: activating it calls the stepper's `onValueChange`
2653
- * with this step's index. Under `linear` (the default) upcoming steps are
2654
- * blocked automatically; completed steps stay revisitable, which is the
2655
- * universal wizard convention. Carries `aria-current="step"` on the current
2656
- * step so the state is announced on focus, not only while browsing the list.
2657
- */
2658
- declare const StepperTrigger: import("react").ForwardRefExoticComponent<StepperTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
2659
- interface StepperIndicatorProps extends Omit<ComponentPropsWithoutRef<"span">, "className" | "children"> {
2660
- /**
2661
- * Custom glyph — an icon, a spinner, a letter. It replaces the default
2662
- * number/check/error glyph in every state (state still shows through the
2663
- * fill colors and the visually-hidden status text). Mark decorative glyphs
2664
- * `aria-hidden` yourself; the defaults already are.
2665
- */
2666
- children?: ReactNode;
2667
- /** Replace the rendered `span`. */
2668
- render?: useRender.RenderProp;
2669
- /** Additional classes merged after the indicator recipe, e.g. `size-3` with an empty fragment as children for a dots-only stepper. */
2670
- className?: string;
2671
- }
2672
- /**
2673
- * The step's circular marker: the step number, a check once completed, an
2674
- * error glyph when invalid. Numbers and glyphs are decorative — the
2675
- * visually-hidden status text rendered alongside them (`completedLabel` /
2676
- * `incompleteLabel` / `invalidLabel`) plus the list position carry the state
2677
- * for screen readers, following the USWDS step indicator.
2678
- */
2679
- declare const StepperIndicator: import("react").ForwardRefExoticComponent<StepperIndicatorProps & import("react").RefAttributes<HTMLSpanElement>>;
2680
- interface StepperTitleProps extends Omit<ComponentPropsWithoutRef<"span">, "className"> {
2681
- /** Replace the rendered `span`. */
2682
- render?: useRender.RenderProp;
2683
- /** Additional classes merged after the title recipe, e.g. `sr-only` to keep labels for assistive technology in a compact stepper. */
2684
- className?: string;
2685
- }
2686
- /** The step's label. Carbon guidance: keep it to one or two words. */
2687
- declare const StepperTitle: import("react").ForwardRefExoticComponent<StepperTitleProps & import("react").RefAttributes<HTMLSpanElement>>;
2688
- interface StepperDescriptionProps extends Omit<ComponentPropsWithoutRef<"span">, "className"> {
2689
- /** Replace the rendered `span`. */
2690
- render?: useRender.RenderProp;
2691
- /** Additional classes merged after the description recipe. */
2692
- className?: string;
2693
- }
2694
- /**
2695
- * Secondary line under the title: helper copy, or the "Optional" marker the
2696
- * W3C multi-page-forms guidance asks for on skippable steps.
2697
- */
2698
- declare const StepperDescription: import("react").ForwardRefExoticComponent<StepperDescriptionProps & import("react").RefAttributes<HTMLSpanElement>>;
2699
- interface StepperSeparatorProps extends Omit<ComponentPropsWithoutRef<"span">, "className"> {
2700
- /** Replace the rendered `span`. Keep it hidden from assistive technology — connectors are purely visual. */
2701
- render?: useRender.RenderProp;
2702
- /** Additional classes merged after the separator recipe. */
2703
- className?: string;
2704
- }
2705
- /**
2706
- * Connector after a step (omit it on the last item). It fills toward the
2707
- * next step horizontally and hangs below the indicator vertically — where it
2708
- * tracks the item's height, so inline step content stretches it. The line
2709
- * turns primary once its step completes.
2710
- */
2711
- declare const StepperSeparator: import("react").ForwardRefExoticComponent<StepperSeparatorProps & import("react").RefAttributes<HTMLSpanElement>>;
2712
- //#endregion
2713
- //#region src/components/Switch/Switch.d.ts
2714
- type SwitchSize = "sm" | "md" | "lg";
2715
- type SwitchLabelPosition = "start" | "end";
2716
- interface SwitchVariantsOptions {
2717
- size?: SwitchSize;
2718
- className?: string;
2719
- }
2720
- /**
2721
- * Class list for the switch track itself. State styling hangs off Base UI's
2722
- * data-attributes (`data-checked`, `data-disabled`, `data-readonly`,
2723
- * `data-invalid`) plus `aria-invalid`.
2724
- */
2725
- declare function switchVariants({ size, className }?: SwitchVariantsOptions): string;
2726
- interface SwitchProps extends Omit<ComponentPropsWithoutRef<typeof Switch$1.Root>, "className"> {
2727
- /**
2728
- * Track size. The 24px-tall `lg` track meets the WCAG 2.5.8 target-size
2729
- * floor on its own; `sm`/`md` rely on the clickable `label` (or surrounding
2730
- * spacing) to extend the target. Prefer `md`+ with a label on touch-first
2731
- * surfaces.
2732
- */
2733
- size?: SwitchSize;
2734
- /**
2735
- * Visible label rendered in an enclosing `<label>`, so clicking it flips
2736
- * the switch and it names the control. Without it, provide an accessible
2737
- * name another way: `aria-label`, `aria-labelledby`, or an external
2738
- * `<label>`. When `required` is set, the label shows a decorative asterisk.
2739
- */
2740
- label?: ReactNode;
2741
- /**
2742
- * Supporting copy below the label, linked via `aria-describedby`. Rendered
2743
- * outside the `<label>` element so screen readers announce it as the
2744
- * description instead of reading it into the accessible name.
2745
- */
2746
- description?: ReactNode;
2747
- /**
2748
- * Side of the switch the `label` text sits on. `end` (the default) reads
2749
- * label-after like a Checkbox row; `start` reads text-first and pushes the
2750
- * switch to the far edge when the row is stretched — the settings-list
2751
- * pattern. Ignored without `label`.
2752
- */
2753
- labelPosition?: SwitchLabelPosition;
2754
- /** Applied to the switch track itself, also when `label`/`description` wrap it. */
2755
- className?: string;
2756
- }
2757
- /**
2758
- * On/off control built on Base UI's Switch. Reach for it when flipping the
2759
- * value takes effect immediately (settings); for choices collected until a
2760
- * form submit, prefer Checkbox. The thumb slide is built in behind
2761
- * `motion-safe`. `ref` and `className` always target the track element,
2762
- * whether or not the labelled layout wraps it.
2763
- */
2764
- declare const Switch: import("react").ForwardRefExoticComponent<SwitchProps & import("react").RefAttributes<HTMLSpanElement>>;
2765
- //#endregion
2766
- //#region src/components/Table/Table.d.ts
2767
- type TableSize = "sm" | "md" | "lg";
2768
- type TableLayout = "auto" | "fixed";
2769
- type TableContainerVariant = "plain" | "outline" | "elevated";
2770
- type TableCaptionSide = "top" | "bottom";
2771
- interface TableRenderState extends Record<string, unknown> {
2772
- /** Density applied to header and data cells. */
2773
- size: TableSize;
2774
- /** Browser column-sizing algorithm. */
2775
- layout: TableLayout;
2776
- /** Whether alternating body rows receive a supporting surface. */
2777
- striped: boolean;
2778
- /** Whether body rows receive a hover affordance. */
2779
- hoverable: boolean;
2780
- /** Whether column headers stay pinned inside a scrolling container. */
2781
- stickyHeader: boolean;
2782
- /** Whether adjacent cells are visually separated. */
2783
- showColumnBorders: boolean;
2784
- }
2785
- interface TableContainerRenderState extends Record<string, unknown> {
2786
- /** Surface treatment surrounding the scroll area. */
2787
- variant: TableContainerVariant;
2788
- }
2789
- interface TableCaptionRenderState extends Record<string, unknown> {
2790
- /** Visual edge where the native caption is placed. */
2791
- side: TableCaptionSide;
2792
- }
2793
- interface TableRowRenderState extends Record<string, unknown> {
2794
- /** Whether the row receives the selected visual treatment. */
2795
- selected: boolean;
2796
- }
2797
- interface TableContainerProps extends Omit<ComponentPropsWithoutRef<"div">, "className"> {
2798
- /** Surface around the responsive scroll area. `elevated` is the rich card default, `outline` removes depth, and `plain` keeps only overflow behavior. */
2799
- variant?: TableContainerVariant;
2800
- /** Replace the rendered `div` or inspect `{ variant }` in a render callback. Preserve a suitable grouping element. */
2801
- render?: useRender.RenderProp<TableContainerRenderState>;
2802
- /** Additional classes merged after the container recipe; set `max-height` here to activate a sticky header. */
2803
- className?: string;
2804
- }
2805
- declare const TableContainer: import("react").ForwardRefExoticComponent<TableContainerProps & import("react").RefAttributes<HTMLDivElement>>;
2806
- interface TableProps extends Omit<ComponentPropsWithoutRef<"table">, "className"> {
2807
- /** Cell density. `sm` is optimized for desktop data review; prefer `md` or `lg` for touch-heavy rows containing controls. */
2808
- size?: TableSize;
2809
- /** `auto` lets content size columns; `fixed` obeys explicit widths and makes truncation predictable. */
2810
- layout?: TableLayout;
2811
- /** Add a supporting surface to alternating rows to improve scanning across wide datasets. */
2812
- striped?: boolean;
2813
- /** Add a subtle body-row hover affordance. This is visual only and does not make a row interactive. */
2814
- hoverable?: boolean;
2815
- /** Pin column headers to the top of the nearest scrolling `TableContainer`; give the container a max height for vertical scrolling. */
2816
- stickyHeader?: boolean;
2817
- /** Draw semantic-border separators between adjacent columns. */
2818
- showColumnBorders?: boolean;
2819
- /** Replace the rendered `table` or inspect the visual state in a render callback. Preserve native table semantics. */
2820
- render?: useRender.RenderProp<TableRenderState>;
2821
- /** Additional classes for table width, minimum width, or context-specific layout. */
2822
- className?: string;
2823
- }
2824
- declare const Table: import("react").ForwardRefExoticComponent<TableProps & import("react").RefAttributes<HTMLTableElement>>;
2825
- interface TableHeaderProps extends Omit<ComponentPropsWithoutRef<"thead">, "className"> {
2826
- /** Replace the rendered `thead`. Preserve its row-group semantics. */
2827
- render?: useRender.RenderProp;
2828
- /** Additional classes merged after the header recipe. */
2829
- className?: string;
2830
- }
2831
- declare const TableHeader: import("react").ForwardRefExoticComponent<TableHeaderProps & import("react").RefAttributes<HTMLTableSectionElement>>;
2832
- interface TableBodyProps extends Omit<ComponentPropsWithoutRef<"tbody">, "className"> {
2833
- /** Replace the rendered `tbody`. Preserve its row-group semantics. */
2834
- render?: useRender.RenderProp;
2835
- /** Additional classes merged after the body recipe. */
2836
- className?: string;
2837
- }
2838
- declare const TableBody: import("react").ForwardRefExoticComponent<TableBodyProps & import("react").RefAttributes<HTMLTableSectionElement>>;
2839
- interface TableFooterProps extends Omit<ComponentPropsWithoutRef<"tfoot">, "className"> {
2840
- /** Replace the rendered `tfoot`. Preserve its row-group semantics. */
2841
- render?: useRender.RenderProp;
2842
- /** Additional classes merged after the footer recipe. */
2843
- className?: string;
2844
- }
2845
- declare const TableFooter: import("react").ForwardRefExoticComponent<TableFooterProps & import("react").RefAttributes<HTMLTableSectionElement>>;
2846
- interface TableRowProps extends Omit<ComponentPropsWithoutRef<"tr">, "className"> {
2847
- /** Apply the selected visual treatment. In a native data table, the composed checkbox or control must expose the accessible checked state; use an advanced grid for row-level selection semantics. */
2848
- selected?: boolean;
2849
- /** Replace the rendered `tr` or inspect `{ selected }` in a render callback. Preserve its row semantics. */
2850
- render?: useRender.RenderProp<TableRowRenderState>;
2851
- /** Additional classes merged after the row recipe. */
2852
- className?: string;
2853
- }
2854
- declare const TableRow: import("react").ForwardRefExoticComponent<TableRowProps & import("react").RefAttributes<HTMLTableRowElement>>;
2855
- interface TableHeadProps extends Omit<ComponentPropsWithoutRef<"th">, "className"> {
2856
- /** Replace the rendered `th`. Preserve header-cell semantics and set `scope`, `id`, and `headers` as the table structure requires. */
2857
- render?: useRender.RenderProp;
2858
- /** Additional classes for alignment, width, truncation, or a sortable-header button. */
2859
- className?: string;
2860
- }
2861
- declare const TableHead: import("react").ForwardRefExoticComponent<TableHeadProps & import("react").RefAttributes<HTMLTableCellElement>>;
2862
- interface TableCellProps extends Omit<ComponentPropsWithoutRef<"td">, "className"> {
2863
- /** Replace the rendered `td`. Preserve data-cell semantics; use `headers` for complex header relationships. */
2864
- render?: useRender.RenderProp;
2865
- /** Additional classes for alignment, width, truncation, or tabular numeric data. */
2866
- className?: string;
2867
- }
2868
- declare const TableCell: import("react").ForwardRefExoticComponent<TableCellProps & import("react").RefAttributes<HTMLTableCellElement>>;
2869
- interface TableCaptionProps extends Omit<ComponentPropsWithoutRef<"caption">, "className"> {
2870
- /** Place the native caption above or below the data. Captions identify tables for screen-reader navigation. */
2871
- side?: TableCaptionSide;
2872
- /** Replace the rendered `caption`. Preserve caption semantics so the table keeps its accessible name. */
2873
- render?: useRender.RenderProp<TableCaptionRenderState>;
2874
- /** Additional classes merged after the caption recipe. */
2875
- className?: string;
2876
- }
2877
- declare const TableCaption: import("react").ForwardRefExoticComponent<TableCaptionProps & import("react").RefAttributes<HTMLTableCaptionElement>>;
2878
- //#endregion
2879
- //#region src/components/Tabs/Tabs.d.ts
2880
- type TabsVariant = "underline" | "pills";
2881
- type TabsSize = "sm" | "md" | "lg";
2882
- type TabsIndicatorPosition = "start" | "end";
2883
- interface TabsListVariantsOptions {
2884
- variant?: TabsVariant;
2885
- fullWidth?: boolean;
2886
- /** Show the passive divider behind an underline list. Has no effect on pills. */
2887
- showDivider?: boolean;
2888
- /** Edge used by the divider when the styled element is a vertical underline list. */
2889
- indicatorPosition?: TabsIndicatorPosition;
2890
- className?: string;
2891
- }
2892
- /**
2893
- * Class list for an element styled as a TabsList.
2894
- *
2895
- * For navigation that only *looks* like tabs (each "tab" is a different
2896
- * page), keep honest semantics — a `<nav>` of links with `aria-current`, not
2897
- * `role="tablist"`:
2898
- *
2899
- * <nav aria-label="Settings" className={tabsListVariants()}>
2900
- * <a href="/profile" aria-current="page" className={tabsTabVariants({ active: true })}>Profile</a>
2901
- * <a href="/billing" className={tabsTabVariants()}>Billing</a>
2902
- * </nav>
2903
- */
2904
- declare function tabsListVariants({ variant, fullWidth, showDivider, indicatorPosition, className }?: TabsListVariantsOptions): string;
2905
- interface TabsTabVariantsOptions {
2906
- variant?: TabsVariant;
2907
- size?: TabsSize;
2908
- /**
2909
- * Style as the selected item — the static replacement for Base UI's
2910
- * `data-active` on plain nav elements: underline gains an inset 2px primary
2911
- * bar, pills the raised card.
2912
- */
2913
- active?: boolean;
2914
- fullWidth?: boolean;
2915
- className?: string;
2916
- }
2917
- /** Class list for an element styled as a TabsTab (see tabsListVariants). */
2918
- declare function tabsTabVariants({ variant, size, active, fullWidth, className }?: TabsTabVariantsOptions): string;
2919
- interface TabsProps extends Omit<ComponentPropsWithoutRef<typeof Tabs$1.Root>, "className"> {
2920
- /**
2921
- * Visual style shared by every part: `underline` (default) marks the active
2922
- * tab with a 2px primary bar on the list's divider; `pills` renders a
2923
- * segmented control — a muted track with a raised card sliding to the
2924
- * active tab.
2925
- */
2926
- variant?: TabsVariant;
2927
- /**
2928
- * Control density. Underline tabs are 32/40/48px tall; pill tabs are
2929
- * 24/32/40px inside the track's padding, so `sm` pills sit exactly on the
2930
- * WCAG 2.5.8 24px target-size floor — prefer `md`+ for touch-first
2931
- * surfaces.
2932
- */
2933
- size?: TabsSize;
2934
- /** Stretch tabs to share the full list width equally. Horizontal orientation only. */
2935
- fullWidth?: boolean;
2936
- /**
2937
- * Show the muted divider behind the active indicator in `underline` tabs.
2938
- * Set to `false` for an indicator-only treatment. The primary active
2939
- * indicator remains visible; this has no visual effect on `pills`.
2940
- */
2941
- showDivider?: boolean;
2942
- /**
2943
- * Edge for the active indicator and divider in vertical underline tabs.
2944
- * `start` is left in LTR and right in RTL; `end` (default) is the opposite.
2945
- * Has no visual effect on horizontal or pill tabs.
2946
- */
2947
- indicatorPosition?: TabsIndicatorPosition;
2948
- className?: string;
2949
- }
2950
- /**
2951
- * Groups the tab list and its panels; lays them out in a column, or a row
2952
- * when `orientation="vertical"`.
2953
- */
2954
- declare const Tabs: import("react").ForwardRefExoticComponent<TabsProps & import("react").RefAttributes<HTMLDivElement>>;
2955
- interface TabsListProps extends Omit<ComponentPropsWithoutRef<typeof Tabs$1.List>, "className" | "activateOnFocus"> {
2956
- /**
2957
- * Whether arrow-key focus immediately activates the focused tab. Defaults
2958
- * to `true` (automatic activation — the WAI-ARIA APG recommendation when
2959
- * panels render instantly); Base UI's own default is manual. Set `false`
2960
- * so Enter/Space activates instead when merely mounting a panel is
2961
- * expensive, e.g. it fetches on mount.
2962
- */
2963
- activateOnFocus?: boolean;
2964
- className?: string;
2965
- }
2966
- /**
2967
- * Container for the tab buttons. Renders Base UI's `Tabs.Indicator` after the
2968
- * tabs automatically, so the sliding active-tab marker comes for free — don't
2969
- * add one manually. (The indicator positions itself on the client; before
2970
- * hydration the active tab is still distinguished by its text color.)
2971
- */
2972
- declare const TabsList: import("react").ForwardRefExoticComponent<TabsListProps & import("react").RefAttributes<HTMLDivElement>>;
2973
- interface TabsTabProps extends Omit<ComponentPropsWithoutRef<typeof Tabs$1.Tab>, "className"> {
2974
- className?: string;
2975
- }
2976
- /**
2977
- * One tab button; its `value` pairs it with a `TabsPanel`. Icons and badges
2978
- * ride along as children and inherit the icon sizing. For route-driven tabs,
2979
- * render a real link: `render={<a href="…" />}` plus `nativeButton={false}`.
2980
- */
2981
- declare const TabsTab: import("react").ForwardRefExoticComponent<TabsTabProps & import("react").RefAttributes<HTMLButtonElement>>;
2982
- interface TabsPanelProps extends Omit<ComponentPropsWithoutRef<typeof Tabs$1.Panel>, "className"> {
2983
- className?: string;
2984
- }
2985
- /**
2986
- * Content shown while its `value` matches the active tab. Hidden panels are
2987
- * unmounted unless `keepMounted` is set — use it to preserve form state or
2988
- * scroll position across switches.
2989
- */
2990
- declare const TabsPanel: import("react").ForwardRefExoticComponent<TabsPanelProps & import("react").RefAttributes<HTMLDivElement>>;
2991
- //#endregion
2992
- //#region src/components/Timeline/Timeline.d.ts
2993
- type TimelineSize = "sm" | "md" | "lg";
2994
- type TimelineIndicatorVariant = "neutral" | "primary" | "success" | "warning" | "destructive";
2995
- type TimelineIndicatorAppearance = "solid" | "soft" | "outline";
2996
- type TimelineSeparatorVariant = "solid" | "dashed";
2997
- interface TimelineProps extends Omit<ComponentPropsWithoutRef<"ol">, "className"> {
2998
- /**
2999
- * Marker diameter and type scale: `sm` 16px · `md` 20px · `lg` 24px.
3000
- * Markers are non-interactive, so WCAG target-size floors don't apply —
3001
- * pick by information density, `sm` for compact logs.
3002
- */
3003
- size?: TimelineSize;
3004
- /** Replace the rendered `ol`. Preserve list semantics — they give screen-reader users the "2 of 5" position for free. */
3005
- render?: useRender.RenderProp;
3006
- /** Additional classes merged after the root recipe, e.g. `max-w-md`. */
3007
- className?: string;
3008
- }
3009
- /**
3010
- * A chronological list of events, marked up as an ordered list. The timeline
3011
- * is display-only — it holds no current-step state (progress through a flow
3012
- * is Stepper's job) and renders whatever order it receives; feeds usually
3013
- * pass newest-first. Give the list an accessible name (`aria-label` or
3014
- * `aria-labelledby`, e.g. "Deployment history") when the surrounding context
3015
- * doesn't already announce one.
3016
- */
3017
- declare const Timeline: import("react").ForwardRefExoticComponent<TimelineProps & import("react").RefAttributes<HTMLOListElement>>;
3018
- interface TimelineItemProps extends Omit<ComponentPropsWithoutRef<"li">, "className"> {
3019
- /** Replace the rendered `li`. Preserve list-item semantics. */
3020
- render?: useRender.RenderProp;
3021
- /** Additional classes merged after the item recipe. */
3022
- className?: string;
3023
- }
3024
- /**
3025
- * One event: a flex row of an optional leading `TimelineContent` (opposite
3026
- * side), the `TimelineConnector` column, and the trailing `TimelineContent`.
3027
- */
3028
- declare const TimelineItem: import("react").ForwardRefExoticComponent<TimelineItemProps & import("react").RefAttributes<HTMLLIElement>>;
3029
- interface TimelineConnectorProps extends Omit<ComponentPropsWithoutRef<"div">, "className"> {
3030
- /** Replace the rendered `div`. */
3031
- render?: useRender.RenderProp;
3032
- /** Additional classes merged after the connector recipe. */
3033
- className?: string;
3034
- }
3035
- /**
3036
- * The marker column: it stretches to the item's height and stacks the
3037
- * `TimelineIndicator` above the `TimelineSeparator`, which fills the rest —
3038
- * so the rail always reaches the next item's marker, however tall the
3039
- * content grows.
3040
- */
3041
- declare const TimelineConnector: import("react").ForwardRefExoticComponent<TimelineConnectorProps & import("react").RefAttributes<HTMLDivElement>>;
3042
- interface TimelineIndicatorProps extends Omit<ComponentPropsWithoutRef<"span">, "className"> {
3043
- /** Status color of the marker, reusing the Badge vocabulary. */
3044
- variant?: TimelineIndicatorVariant;
3045
- /**
3046
- * Fill treatment: `solid` is the classic filled dot, `soft` the tinted
3047
- * icon circle, `outline` a hollow ring — the upcoming/unreached look in
3048
- * tracking timelines.
3049
- */
3050
- appearance?: TimelineIndicatorAppearance;
3051
- /** Replace the rendered `span`, e.g. with an `Avatar` for actor feeds. */
3052
- render?: useRender.RenderProp;
3053
- /** Additional classes merged after the marker recipe, e.g. `size-8` for an avatar-sized marker. */
3054
- className?: string;
3055
- }
3056
- /**
3057
- * The event's marker. Empty it renders as a plain dot; children (an icon, a
3058
- * spinner, a letter) center inside it. Glyphs are decorative next to the
3059
- * event's own text — mark them `aria-hidden`; when the marker alone carries
3060
- * meaning (a bare status dot), pair it with visually-hidden text in the
3061
- * content instead.
3062
- */
3063
- declare const TimelineIndicator: import("react").ForwardRefExoticComponent<TimelineIndicatorProps & import("react").RefAttributes<HTMLSpanElement>>;
3064
- interface TimelineSeparatorProps extends Omit<ComponentPropsWithoutRef<"span">, "className"> {
3065
- /** Line style. `dashed` marks an unfinished stretch — the rail into upcoming or in-progress events. */
3066
- variant?: TimelineSeparatorVariant;
3067
- /** Replace the rendered `span`. Keep it hidden from assistive technology — the rail is purely visual. */
3068
- render?: useRender.RenderProp;
3069
- /** Additional classes merged after the separator recipe, e.g. `border-primary` for a completed stretch. */
3070
- className?: string;
3071
- }
3072
- /**
3073
- * The rail segment below a marker, connecting it to the next event. Omit it
3074
- * on the last item so the timeline ends at its final marker.
3075
- */
3076
- declare const TimelineSeparator: import("react").ForwardRefExoticComponent<TimelineSeparatorProps & import("react").RefAttributes<HTMLSpanElement>>;
3077
- interface TimelineContentProps extends Omit<ComponentPropsWithoutRef<"div">, "className"> {
3078
- /** Replace the rendered `div`. */
3079
- render?: useRender.RenderProp;
3080
- /**
3081
- * Additional classes merged after the content recipe. A leading (opposite
3082
- * side) copy usually caps its width and right-aligns: `flex-none w-24
3083
- * text-end`; leave both sides `flex-1` to center the rail for alternating
3084
- * layouts.
3085
- */
3086
- className?: string;
3087
- }
3088
- /**
3089
- * The event's body, holding `TimelineTitle` / `TimelineTime` /
3090
- * `TimelineDescription` or any richer blocks. It carries the spacing between
3091
- * items, so the connector's rail spans the full distance to the next marker.
3092
- * Place one before the connector for opposite-side content (dates in a
3093
- * roadmap, alternating layouts).
3094
- */
3095
- declare const TimelineContent: import("react").ForwardRefExoticComponent<TimelineContentProps & import("react").RefAttributes<HTMLDivElement>>;
3096
- interface TimelineTitleProps extends Omit<ComponentPropsWithoutRef<"span">, "className"> {
3097
- /** Replace the rendered `span`, e.g. `render={<h3 />}` when changelog entries belong in the document outline. */
3098
- render?: useRender.RenderProp;
3099
- /** Additional classes merged after the title recipe. */
3100
- className?: string;
3101
- }
3102
- /** The event's one-line headline. */
3103
- declare const TimelineTitle: import("react").ForwardRefExoticComponent<TimelineTitleProps & import("react").RefAttributes<HTMLSpanElement>>;
3104
- interface TimelineDescriptionProps extends Omit<ComponentPropsWithoutRef<"span">, "className"> {
3105
- /** Replace the rendered `span`. */
3106
- render?: useRender.RenderProp;
3107
- /** Additional classes merged after the description recipe. */
3108
- className?: string;
3109
- }
3110
- /** Supporting copy under the title. */
3111
- declare const TimelineDescription: import("react").ForwardRefExoticComponent<TimelineDescriptionProps & import("react").RefAttributes<HTMLSpanElement>>;
3112
- interface TimelineTimeProps extends Omit<ComponentPropsWithoutRef<"time">, "className"> {
3113
- /** Replace the rendered `time`. */
3114
- render?: useRender.RenderProp;
3115
- /** Additional classes merged after the time recipe. */
3116
- className?: string;
3117
- }
3118
- /**
3119
- * The event's timestamp as a real `<time>` element. Feeds abbreviate the
3120
- * visible text ("3h", "May 12") — keep the absolute moment machine-readable
3121
- * in `dateTime`, and put it in the human-readable `title` when the visible
3122
- * form is relative.
3123
- */
3124
- declare const TimelineTime: import("react").ForwardRefExoticComponent<TimelineTimeProps & import("react").RefAttributes<HTMLTimeElement>>;
3125
- //#endregion
3126
- //#region src/components/Toast/Toast.d.ts
3127
- type ToastPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
3128
- /**
3129
- * The severity values the built-in styling recognizes (icon + color, and
3130
- * `loading` renders a spinner). Base UI's `type` field is an open string —
3131
- * unknown values render the neutral look with no icon.
3132
- */
3133
- type ToastType = "success" | "error" | "warning" | "info" | "loading";
3134
- /** Per-toast extension data the ArcFusion `Toaster` understands. */
3135
- interface ToastData {
3136
- /**
3137
- * Custom leading icon, replacing the automatic `type` icon. Sized to the
3138
- * 20px slot unless the node carries its own `size-*` class.
3139
- */
3140
- icon?: ReactNode;
3141
- [key: string]: unknown;
3142
- }
3143
- /** Options for `toast.add` — Base UI's add options with ArcFusion `data`. */
3144
- interface ToastOptions extends ToastManagerAddOptions<ToastData> {}
3145
- /** Options for `toast.update` and the object states of `toast.promise`. */
3146
- interface ToastUpdateOptions extends ToastManagerUpdateOptions<ToastData> {}
3147
- /** State map for `toast.promise` — strings are shorthand for `{ title }`. */
3148
- type ToastPromiseOptions<Value> = ToastManagerPromiseOptions<Value, ToastData>;
3149
- /** A toast manager, as returned by `createToastManager()`. */
3150
- type ToastManager<Data extends object = any> = ToastManager$1<Data>;
3151
- /** A queued toast as the manager tracks it (id, content, type, timing). */
3152
- type ToastObject<Data extends object = ToastData> = ToastObject$1<Data>;
3153
- /**
3154
- * Creates an isolated toast manager for a scoped `<Toaster />` (a preview
3155
- * frame, a second stack with different placement, tests). Pass it to that
3156
- * Toaster's `toastManager` prop and call `manager.add/close/update/promise`
3157
- * on it directly — the `toast` helpers always target the built-in default
3158
- * manager, not scoped ones.
3159
- */
3160
- declare const createToastManager: typeof Toast.createToastManager;
3161
- type ToastHelperOptions = Omit<ToastOptions, "title" | "type">;
3162
- /**
3163
- * Imperative toast API, callable from anywhere — components, stores, fetch
3164
- * wrappers. Requires one default `<Toaster />` (no `toastManager` prop)
3165
- * mounted in the app. Every method accepts Base UI's full option set
3166
- * (`description`, `timeout`, `priority`, `onClose`, `actionProps`,
3167
- * `data.icon`, …); `add` with an existing `id` updates that toast in place,
3168
- * which is how repeated events deduplicate.
3169
- */
3170
- declare const toast: {
3171
- /** Queue a toast with full control over its options. Returns the toast id. */
3172
- add(options: ToastOptions): string;
3173
- /** Success feedback: green check icon, polite announcement. */
3174
- success(title: ReactNode, options?: ToastHelperOptions): string;
3175
- /** Informational notice: blue info icon, polite announcement. */
3176
- info(title: ReactNode, options?: ToastHelperOptions): string;
3177
- /** Warning: amber triangle icon, polite announcement. */
3178
- warning(title: ReactNode, options?: ToastHelperOptions): string;
3179
- /**
3180
- * Failure feedback: red icon, announced assertively (`priority: "high"`)
3181
- * so screen readers interrupt with it, as errors warrant. For critical
3182
- * errors the user must act on, add `timeout: 0` so the toast persists.
3183
- */
3184
- error(title: ReactNode, options?: ToastHelperOptions): string;
3185
- /**
3186
- * Spinner toast for manual async flows. Never auto-dismisses (the
3187
- * operation decides when it ends) — resolve it via
3188
- * `toast.update(id, { type: "success", … })` or `toast.close(id)`.
3189
- * Prefer `toast.promise` when a promise already models the operation.
3190
- */
3191
- loading(title: ReactNode, options?: ToastHelperOptions): string;
3192
- /**
3193
- * One toast tracking a promise through loading → success/error, switching
3194
- * `type` (spinner → check/cross) at each step. States take a string
3195
- * (shorthand for the title), an options object, or — for
3196
- * `success`/`error` — a function of the resolved value/rejection reason.
3197
- * Returns the input promise's result, so it can be awaited in place.
3198
- */
3199
- promise<Value>(promise: Promise<Value>, options: ToastPromiseOptions<Value>): Promise<Value>;
3200
- /** Update a queued toast in place (content, type, timing) by id. */
3201
- update(toastId: string, options: ToastUpdateOptions): void;
3202
- /** Close one toast by id, or every toast when called with no argument. */
3203
- close(toastId?: string): void;
3204
- };
3205
- interface ToasterProps extends Omit<ComponentPropsWithoutRef<typeof Toast.Viewport>, "className" | "children"> {
3206
- /**
3207
- * Screen corner or edge the stack anchors to. Toasts enter from, exit
3208
- * toward, and swipe-dismiss past the nearest edges. `bottom-right` is the
3209
- * desktop convention; prefer a `*-center` position on mobile-first
3210
- * surfaces.
3211
- */
3212
- position?: ToastPosition;
3213
- /**
3214
- * Maximum number of toasts shown at once — older ones hide (`inert`)
3215
- * until room frees up. The cap keeps bursts from covering the page.
3216
- */
3217
- limit?: number;
3218
- /**
3219
- * Default auto-dismiss delay in ms; per-toast `timeout` overrides it and
3220
- * `0` persists until dismissed. Timers pause while the stack is hovered
3221
- * or focused, so reading is never raced.
3222
- */
3223
- timeout?: number;
3224
- /**
3225
- * Render toasts from this manager (see `createToastManager`) instead of
3226
- * the built-in one the `toast` helpers target. Mount exactly one Toaster
3227
- * per manager — two Toasters on the same manager render every toast
3228
- * twice.
3229
- */
3230
- toastManager?: ToastManager;
3231
- /** Element the stack portals into instead of `<body>` — for scoped stacking contexts or inline previews. */
3232
- container?: ComponentPropsWithoutRef<typeof Toast.Portal>["container"];
3233
- /** Accessible name of each toast's dismiss button — localize it alongside your content. */
3234
- closeLabel?: string;
3235
- /**
3236
- * Applied to the viewport. Sizing hook: the stack is 22.5rem wide on
3237
- * `sm+` (full-width minus margins below) — override with `sm:w-*`.
3238
- */
3239
- className?: string;
3240
- }
3241
- /**
3242
- * The toast stack. Mount one per app (typically at the root); after that,
3243
- * `toast.success("Saved")` & co. work from anywhere. Bundles Base UI's
3244
- * Provider, Portal, and Viewport with fully styled toasts: severity icon,
3245
- * title, description, optional action button, and an always-visible
3246
- * dismiss button.
3247
- *
3248
- * Collapsed toasts stack with a peek; hovering or focusing the stack
3249
- * expands it and pauses dismiss timers. Every toast can be dismissed by
3250
- * pointer (×), swipe, or keyboard, and F6 jumps focus into the stack.
3251
- * Announcements use the toast's `title`/`description` strings — polite by
3252
- * default, assertive for `priority: "high"`. The stack portals to `<body>`;
3253
- * consumer apps should set `isolation: isolate` on their root so page
3254
- * stacking contexts stay below it.
3255
- */
3256
- declare const Toaster: import("react").ForwardRefExoticComponent<ToasterProps & import("react").RefAttributes<HTMLDivElement>>;
3257
- //#endregion
3258
- //#region src/components/Tooltip/Tooltip.d.ts
3259
- /**
3260
- * Shares tooltip timing for every tooltip inside it: `delay`/`closeDelay`
3261
- * set the subtree's defaults, and once one tooltip has shown, moving to a
3262
- * nearby trigger within `timeout` (400ms) opens the next tooltip instantly
3263
- * instead of re-waiting the open delay. Mount one around toolbars and icon
3264
- * rows (or once at the app root) — without it every tooltip waits the full
3265
- * delay on its own.
3266
- */
3267
- declare const TooltipProvider: import("react").FC<import("@base-ui/react").TooltipProviderProps>;
3268
- type TooltipProviderProps = ComponentPropsWithoutRef<typeof Tooltip$1.Provider>;
3269
- /**
3270
- * Groups the tooltip parts and owns the open state. Accepts Base UI's Root
3271
- * props: `open`/`defaultOpen`/`onOpenChange` for control, `disabled` to keep
3272
- * the tooltip from opening, `trackCursorAxis` to follow the pointer (chart
3273
- * and canvas surfaces), `actionsRef` for imperative close, and
3274
- * `handle`/`triggerId` for detached triggers.
3275
- */
3276
- declare const Tooltip: <Payload>(props: Tooltip$1.Root.Props<Payload>) => import("react").JSX.Element;
3277
- type TooltipProps = ComponentPropsWithoutRef<typeof Tooltip$1.Root>;
3278
- /**
3279
- * Creates a handle that links `Tooltip` with `TooltipTrigger`s rendered
3280
- * elsewhere in the tree (table rows, toolbars). Triggers may attach a
3281
- * `payload`, which the `Tooltip` children render function receives — one
3282
- * mounted tooltip serving many targets.
3283
- */
3284
- declare const createTooltipHandle: typeof Tooltip$1.createHandle;
3285
- type TooltipHandle<Payload = unknown> = Tooltip$1.Handle<Payload>;
3286
- interface TooltipTriggerProps extends Omit<ComponentPropsWithoutRef<typeof Tooltip$1.Trigger>, "className"> {
3287
- className?: string;
3288
- }
3289
- /**
3290
- * The element the tooltip describes. A `<button>` by default and unstyled on
3291
- * purpose — compose the real control via `render`:
3292
- *
3293
- * <TooltipTrigger render={<Button iconOnly aria-label="Delete" />}>
3294
- * <TrashIcon />
3295
- * </TooltipTrigger>
3296
- *
3297
- * The popup text is invisible to assistive technology (see `TooltipPopup`),
3298
- * so the trigger must carry its own accessible name — icon-only Buttons
3299
- * already enforce one at the type level. Non-interactive targets (truncated
3300
- * text, a wrapper around a disabled control) need `render={<span tabIndex={0} />}`
3301
- * so keyboard users can focus them to see the hint. Per-trigger timing comes
3302
- * from `delay`/`closeDelay` (600/0ms defaults); while its tooltip is open the
3303
- * element carries `data-popup-open` as a styling hook.
3304
- */
3305
- declare const TooltipTrigger: import("react").ForwardRefExoticComponent<TooltipTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
3306
- type BasePositionerProps = ComponentPropsWithoutRef<typeof Tooltip$1.Positioner>;
3307
- type TooltipSide = NonNullable<BasePositionerProps["side"]>;
3308
- type TooltipAlign = NonNullable<BasePositionerProps["align"]>;
3309
- interface TooltipPopupVariantsOptions {
3310
- className?: string;
3311
- }
3312
- /**
3313
- * Class list for an element styled as the tooltip chip — for floating hints
3314
- * that don't come from Base UI (chart hover tooltips, custom floating-ui
3315
- * popups) so every hint in the product shares one look.
3316
- */
3317
- declare function tooltipPopupVariants({ className }?: TooltipPopupVariantsOptions): string;
3318
- interface TooltipPopupProps extends Omit<ComponentPropsWithoutRef<typeof Tooltip$1.Popup>, "className"> {
3319
- /** Side of the trigger to place the tooltip on; flips automatically when there is no room. */
3320
- side?: TooltipSide;
3321
- /** How the tooltip lines up along the chosen side. */
3322
- align?: TooltipAlign;
3323
- /** Gap between trigger and tooltip in pixels. The default 8px leaves room for the `arrow`. */
3324
- sideOffset?: BasePositionerProps["sideOffset"];
3325
- /** Additional shift along the alignment axis in pixels. */
3326
- alignOffset?: BasePositionerProps["alignOffset"];
3327
- /** Minimum space kept from the viewport (or collision boundary) edges when repositioning. */
3328
- collisionPadding?: BasePositionerProps["collisionPadding"];
3329
- /** Position against this element instead of the trigger (e.g. a chart point or a text selection). */
3330
- anchor?: BasePositionerProps["anchor"];
3331
- /** Keep the closed tooltip in the DOM — for measuring; closed tooltips normally unmount. */
3332
- keepMounted?: boolean;
3333
- /**
3334
- * Portal destination. Defaults to `document.body`. When the tooltip renders
3335
- * open on first paint (`defaultOpen`) and the container mounts in the same
3336
- * commit, pass the element via callback-ref state — a `RefObject` to an
3337
- * ancestor is not attached yet when the portal first resolves.
3338
- */
3339
- container?: ComponentPropsWithoutRef<typeof Tooltip$1.Portal>["container"];
3340
- /** Caret pointing at the trigger. On by default — it ties the hint to small targets in dense rows. */
3341
- arrow?: boolean;
3342
- /**
3343
- * Applied to the popup chip. The chip is content-sized up to 17.5rem —
3344
- * set `max-w-*` to change the cap.
3345
- */
3346
- className?: string;
3347
- }
3348
- /**
3349
- * The floating hint, with the portal and positioning plumbing folded in.
3350
- * Text only: the popup never receives focus and Base UI exposes none of it
3351
- * to assistive technology, so it must stay a redundant visual label — never
3352
- * the sole carrier of essential information (tooltips also cannot open on
3353
- * touch), and never a host for links or buttons (that content belongs in a
3354
- * Popover). Stays open while the pointer is over the trigger or the popup,
3355
- * and Escape dismisses it (WCAG 1.4.13).
3356
- */
3357
- declare const TooltipPopup: import("react").ForwardRefExoticComponent<TooltipPopupProps & import("react").RefAttributes<HTMLDivElement>>;
3358
- //#endregion
3359
- //#region src/components/Typography/Typography.d.ts
3360
- type TypographyVariant = "display" | "h1" | "h2" | "h3" | "h4" | "body-lg" | "body" | "body-sm" | "caption" | "overline";
3361
- interface TypographyVariantsOptions {
3362
- variant?: TypographyVariant;
3363
- className?: string;
3364
- }
3365
- /**
3366
- * Class list for an element styled per the ArcFusion type scale.
3367
- *
3368
- * Use it where the element must stay native (form labels, `figcaption`,
3369
- * `time`) and inside other primitives — primitives must not nest
3370
- * `<Typography>` (it would block `render` composition), so they mirror the
3371
- * recipe instead:
3372
- *
3373
- * <label className={typographyVariants({ variant: "body-sm" })}>Email</label>
3374
- */
3375
- declare function typographyVariants({ variant, className }?: TypographyVariantsOptions): string;
3376
- interface TypographyProps extends HTMLAttributes<HTMLElement> {
3377
- /**
3378
- * Text style from the ArcFusion type scale. `display`–`h4` render in
3379
- * Poppins ("the Brand Voice"); `body-lg` down to `overline` render in
3380
- * Inter ("the Context"). The variant also picks the default element:
3381
- * `display` → `h1`, headings → their level, body styles → `p`,
3382
- * `caption`/`overline` → `span`.
3383
- */
3384
- variant?: TypographyVariant;
3385
- /**
3386
- * Override the rendered element without changing the visual style, e.g.
3387
- * `variant="h4" as="h2"` when the document outline needs a level-2 heading
3388
- * with a compact look. Heading levels must descend without skipping — pick
3389
- * `as` from the outline, `variant` from the design.
3390
- */
3391
- as?: ElementType;
3392
- }
3393
- declare const Typography: import("react").ForwardRefExoticComponent<TypographyProps & import("react").RefAttributes<HTMLElement>>;
3394
- //#endregion
3395
- //#region src/lib/cn.d.ts
3396
- /** Merge class names with Tailwind-aware conflict resolution. */
3397
- declare function cn(...inputs: ClassValue[]): string;
3398
- //#endregion
1
+ import { AILoader, AILoaderProps, AILoaderRenderState, AILoaderSize, AILoaderState, AILoaderTone } from "./components/AILoader/AILoader.js";
2
+ import "./components/AILoader/index.js";
3
+ import { Accordion, AccordionChevronPosition, AccordionHeader, AccordionHeaderProps, AccordionItem, AccordionItemProps, AccordionPanel, AccordionPanelProps, AccordionProps, AccordionSize, AccordionTrigger, AccordionTriggerProps, AccordionVariant } from "./components/Accordion/Accordion.js";
4
+ import "./components/Accordion/index.js";
5
+ import { Avatar, AvatarBadge, AvatarBadgeProps, AvatarFallback, AvatarFallbackProps, AvatarGroup, AvatarGroupProps, AvatarImage, AvatarImageProps, AvatarProps, AvatarShape, AvatarSize, AvatarVariantsOptions, avatarVariants } from "./components/Avatar/Avatar.js";
6
+ import "./components/Avatar/index.js";
7
+ import { Badge, BadgeAppearance, BadgeProps, BadgeSize, BadgeVariant, BadgeVariantsOptions, badgeVariants } from "./components/Badge/Badge.js";
8
+ import "./components/Badge/index.js";
9
+ import { Breadcrumb, BreadcrumbEllipsis, BreadcrumbEllipsisProps, BreadcrumbItem, BreadcrumbItemProps, BreadcrumbLink, BreadcrumbLinkProps, BreadcrumbLinkVariantsOptions, BreadcrumbList, BreadcrumbListProps, BreadcrumbPage, BreadcrumbPageProps, BreadcrumbProps, BreadcrumbSeparator, BreadcrumbSeparatorProps, breadcrumbLinkVariants } from "./components/Breadcrumb/Breadcrumb.js";
10
+ import "./components/Breadcrumb/index.js";
11
+ import { Button, ButtonProps, ButtonSize, ButtonVariant, ButtonVariantsOptions, buttonVariants } from "./components/Button/Button.js";
12
+ import "./components/Button/index.js";
13
+ import { Calendar, CalendarDateRange, CalendarMode, CalendarProps, CalendarState } from "./components/Calendar/Calendar.js";
14
+ import "./components/Calendar/index.js";
15
+ import { Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, CheckboxSize, CheckboxVariantsOptions, checkboxVariants } from "./components/Checkbox/Checkbox.js";
16
+ import "./components/Checkbox/index.js";
17
+ import { Select, SelectAlign, SelectGroup, SelectGroupLabel, SelectGroupLabelProps, SelectGroupProps, SelectItem, SelectItemProps, SelectLabel, SelectLabelProps, SelectPopup, SelectPopupProps, SelectProps, SelectSeparator, SelectSeparatorProps, SelectTrigger, SelectTriggerProps, SelectTriggerSize, SelectTriggerVariant, SelectTriggerVariantsOptions, SelectValue, SelectValueProps, selectTriggerVariants } from "./components/Select/Select.js";
18
+ import "./components/Select/index.js";
19
+ import { Combobox, ComboboxAlign, ComboboxChip, ComboboxChipProps, ComboboxChipRemove, ComboboxChipRemoveProps, ComboboxChips, ComboboxChipsProps, ComboboxClear, ComboboxClearProps, ComboboxCollection, ComboboxCollectionProps, ComboboxGroup, ComboboxGroupLabel, ComboboxGroupLabelProps, ComboboxGroupProps, ComboboxInput, ComboboxInputGroup, ComboboxInputGroupProps, ComboboxInputGroupVariantsOptions, ComboboxInputProps, ComboboxItem, ComboboxItemProps, ComboboxLabel, ComboboxLabelProps, ComboboxPopup, ComboboxPopupProps, ComboboxProps, ComboboxSeparator, ComboboxSeparatorProps, ComboboxSize, ComboboxTrigger, ComboboxTriggerProps, ComboboxTriggerSize, ComboboxTriggerVariant, ComboboxValue, ComboboxValueProps, comboboxInputGroupVariants, useComboboxFilter, useComboboxFilteredItems } from "./components/Combobox/Combobox.js";
20
+ import "./components/Combobox/index.js";
21
+ import { Menu, MenuAlign, MenuCheckboxItem, MenuCheckboxItemProps, MenuGroup, MenuGroupLabel, MenuGroupLabelProps, MenuGroupProps, MenuHandle, MenuItem, MenuItemProps, MenuItemVariant, MenuItemVariantsOptions, MenuLinkItem, MenuLinkItemProps, MenuPopup, MenuPopupProps, MenuProps, MenuRadioGroup, MenuRadioGroupProps, MenuRadioItem, MenuRadioItemProps, MenuSeparator, MenuSeparatorProps, MenuShortcut, MenuShortcutProps, MenuSide, MenuSubmenuRoot, MenuSubmenuRootProps, MenuSubmenuTrigger, MenuSubmenuTriggerProps, MenuTrigger, MenuTriggerProps, createMenuHandle, menuItemVariants } from "./components/Menu/Menu.js";
22
+ import { ContextMenu, ContextMenuAlign, ContextMenuCheckboxItem, ContextMenuCheckboxItemProps, ContextMenuGroup, ContextMenuGroupLabel, ContextMenuGroupLabelProps, ContextMenuGroupProps, ContextMenuItem, ContextMenuItemProps, ContextMenuItemVariant, ContextMenuLinkItem, ContextMenuLinkItemProps, ContextMenuPopup, ContextMenuPopupProps, ContextMenuProps, ContextMenuRadioGroup, ContextMenuRadioGroupProps, ContextMenuRadioItem, ContextMenuRadioItemProps, ContextMenuSeparator, ContextMenuSeparatorProps, ContextMenuShortcut, ContextMenuShortcutProps, ContextMenuSide, ContextMenuSubmenuRoot, ContextMenuSubmenuRootProps, ContextMenuSubmenuTrigger, ContextMenuSubmenuTriggerProps, ContextMenuTrigger, ContextMenuTriggerProps } from "./components/ContextMenu/ContextMenu.js";
23
+ import "./components/ContextMenu/index.js";
24
+ import { Popover, PopoverAlign, PopoverClose, PopoverCloseProps, PopoverDescription, PopoverDescriptionProps, PopoverHandle, PopoverPopup, PopoverPopupProps, PopoverPopupVariantsOptions, PopoverProps, PopoverSide, PopoverTitle, PopoverTitleProps, PopoverTrigger, PopoverTriggerProps, createPopoverHandle, popoverPopupVariants } from "./components/Popover/Popover.js";
25
+ import "./components/Popover/index.js";
26
+ import { DatePicker, DatePickerCalendarProps, DatePickerPopupProps, DatePickerProps, DatePickerSize, DatePickerVariant, DatePickerVariantsOptions, datePickerVariants } from "./components/DatePicker/DatePicker.js";
27
+ import "./components/DatePicker/index.js";
28
+ import { DateRangePicker, DateRangePickerCalendarProps, DateRangePickerPopupProps, DateRangePickerProps, DateRangePickerSize, DateRangePickerVariant, DateRangePickerVariantsOptions, dateRangePickerVariants } from "./components/DateRangePicker/DateRangePicker.js";
29
+ import "./components/DateRangePicker/index.js";
30
+ import { Dialog, DialogClose, DialogCloseProps, DialogDescription, DialogDescriptionProps, DialogFooter, DialogFooterProps, DialogHeader, DialogHeaderProps, DialogPopup, DialogPopupProps, DialogPopupVariantsOptions, DialogProps, DialogScrollBehavior, DialogSize, DialogTitle, DialogTitleProps, DialogTrigger, DialogTriggerProps, dialogPopupVariants } from "./components/Dialog/Dialog.js";
31
+ import "./components/Dialog/index.js";
32
+ import { Drawer, DrawerClose, DrawerCloseProps, DrawerDescription, DrawerDescriptionProps, DrawerFooter, DrawerFooterProps, DrawerHeader, DrawerHeaderProps, DrawerIndent, DrawerIndentBackground, DrawerIndentBackgroundProps, DrawerIndentProps, DrawerPopup, DrawerPopupProps, DrawerPopupVariantsOptions, DrawerProps, DrawerProvider, DrawerSide, DrawerSize, DrawerSwipeArea, DrawerSwipeAreaProps, DrawerTitle, DrawerTitleProps, DrawerTrigger, DrawerTriggerProps, DrawerVirtualKeyboardProvider, createDrawerHandle, drawerPopupVariants } from "./components/Drawer/Drawer.js";
33
+ import "./components/Drawer/index.js";
34
+ import { Field, FieldDescription, FieldDescriptionProps, FieldError, FieldErrorProps, FieldItem, FieldItemProps, FieldLabel, FieldLabelProps, FieldLabelVariantsOptions, FieldOrientation, FieldProps, FieldValidity, FieldValidityProps, fieldLabelVariants } from "./components/Field/Field.js";
35
+ import { FieldControlProps, useFieldControl } from "./components/Field/FieldContext.js";
36
+ import "./components/Field/index.js";
37
+ import { Fieldset, FieldsetDescription, FieldsetDescriptionProps, FieldsetLegend, FieldsetLegendProps, FieldsetLegendVariant, FieldsetProps } from "./components/Fieldset/Fieldset.js";
38
+ import "./components/Fieldset/index.js";
39
+ import { Form, FormProps } from "./components/Form/Form.js";
40
+ import "./components/Form/index.js";
41
+ import { Input, InputGroup, InputGroupAddon, InputGroupAddonProps, InputGroupProps, InputProps, InputSize, InputVariantsOptions, inputVariants } from "./components/Input/Input.js";
42
+ import "./components/Input/index.js";
43
+ import "./components/Menu/index.js";
44
+ import { Progress, ProgressIndicatorVariantsOptions, ProgressProps, ProgressSize, ProgressTrackVariantsOptions, ProgressVariant, progressIndicatorVariants, progressTrackVariants } from "./components/Progress/Progress.js";
45
+ import "./components/Progress/index.js";
46
+ import { Radio, RadioGroup, RadioGroupProps, RadioProps, RadioSize, RadioVariantsOptions, radioVariants } from "./components/Radio/Radio.js";
47
+ import "./components/Radio/index.js";
48
+ import { Skeleton, SkeletonAnimation, SkeletonProps, SkeletonRenderState, SkeletonVariant, SkeletonVariantsOptions, skeletonVariants } from "./components/Skeleton/Skeleton.js";
49
+ import "./components/Skeleton/index.js";
50
+ import { Stepper, StepperDescription, StepperDescriptionProps, StepperIndicator, StepperIndicatorProps, StepperItem, StepperItemProps, StepperOrientation, StepperProps, StepperSeparator, StepperSeparatorProps, StepperSize, StepperTitle, StepperTitleProps, StepperTrigger, StepperTriggerProps, StepperTriggerVariantsOptions, stepperTriggerVariants } from "./components/Stepper/Stepper.js";
51
+ import "./components/Stepper/index.js";
52
+ import { Switch, SwitchLabelPosition, SwitchProps, SwitchSize, SwitchVariantsOptions, switchVariants } from "./components/Switch/Switch.js";
53
+ import "./components/Switch/index.js";
54
+ import { Table, TableBody, TableBodyProps, TableCaption, TableCaptionProps, TableCaptionRenderState, TableCaptionSide, TableCell, TableCellProps, TableContainer, TableContainerProps, TableContainerRenderState, TableContainerVariant, TableFooter, TableFooterProps, TableHead, TableHeadProps, TableHeader, TableHeaderProps, TableLayout, TableProps, TableRenderState, TableRow, TableRowProps, TableRowRenderState, TableSize } from "./components/Table/Table.js";
55
+ import "./components/Table/index.js";
56
+ import { Tabs, TabsIndicatorPosition, TabsList, TabsListProps, TabsListVariantsOptions, TabsPanel, TabsPanelProps, TabsProps, TabsSize, TabsTab, TabsTabProps, TabsTabVariantsOptions, TabsVariant, tabsListVariants, tabsTabVariants } from "./components/Tabs/Tabs.js";
57
+ import "./components/Tabs/index.js";
58
+ import { Timeline, TimelineConnector, TimelineConnectorProps, TimelineContent, TimelineContentProps, TimelineDescription, TimelineDescriptionProps, TimelineIndicator, TimelineIndicatorAppearance, TimelineIndicatorProps, TimelineIndicatorVariant, TimelineItem, TimelineItemProps, TimelineProps, TimelineSeparator, TimelineSeparatorProps, TimelineSeparatorVariant, TimelineSize, TimelineTime, TimelineTimeProps, TimelineTitle, TimelineTitleProps } from "./components/Timeline/Timeline.js";
59
+ import "./components/Timeline/index.js";
60
+ import { ToastData, ToastManager, ToastObject, ToastOptions, ToastPosition, ToastPromiseOptions, ToastType, ToastUpdateOptions, Toaster, ToasterProps, createToastManager, toast } from "./components/Toast/Toast.js";
61
+ import "./components/Toast/index.js";
62
+ import { Tooltip, TooltipAlign, TooltipHandle, TooltipPopup, TooltipPopupProps, TooltipPopupVariantsOptions, TooltipProps, TooltipProvider, TooltipProviderProps, TooltipSide, TooltipTrigger, TooltipTriggerProps, createTooltipHandle, tooltipPopupVariants } from "./components/Tooltip/Tooltip.js";
63
+ import "./components/Tooltip/index.js";
64
+ import { Typography, TypographyProps, TypographyVariant, TypographyVariantsOptions, typographyVariants } from "./components/Typography/Typography.js";
65
+ import "./components/Typography/index.js";
66
+ import { cn } from "./lib/cn.js";
3399
67
  export { AILoader, type AILoaderProps, type AILoaderRenderState, type AILoaderSize, type AILoaderState, type AILoaderTone, Accordion, type AccordionChevronPosition, AccordionHeader, type AccordionHeaderProps, AccordionItem, type AccordionItemProps, AccordionPanel, type AccordionPanelProps, type AccordionProps, type AccordionSize, AccordionTrigger, type AccordionTriggerProps, type AccordionVariant, Avatar, AvatarBadge, type AvatarBadgeProps, AvatarFallback, type AvatarFallbackProps, AvatarGroup, type AvatarGroupProps, AvatarImage, type AvatarImageProps, type AvatarProps, type AvatarShape, type AvatarSize, type AvatarVariantsOptions, Badge, type BadgeAppearance, type BadgeProps, type BadgeSize, type BadgeVariant, type BadgeVariantsOptions, Breadcrumb, BreadcrumbEllipsis, type BreadcrumbEllipsisProps, BreadcrumbItem, type BreadcrumbItemProps, BreadcrumbLink, type BreadcrumbLinkProps, type BreadcrumbLinkVariantsOptions, BreadcrumbList, type BreadcrumbListProps, BreadcrumbPage, type BreadcrumbPageProps, type BreadcrumbProps, BreadcrumbSeparator, type BreadcrumbSeparatorProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, type ButtonVariantsOptions, Calendar, type CalendarDateRange, type CalendarMode, type CalendarProps, type CalendarState, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, type CheckboxSize, type CheckboxVariantsOptions, Combobox, type ComboboxAlign, ComboboxChip, type ComboboxChipProps, ComboboxChipRemove, type ComboboxChipRemoveProps, ComboboxChips, type ComboboxChipsProps, ComboboxClear, type ComboboxClearProps, ComboboxCollection, type ComboboxCollectionProps, ComboboxGroup, ComboboxGroupLabel, type ComboboxGroupLabelProps, type ComboboxGroupProps, ComboboxInput, ComboboxInputGroup, type ComboboxInputGroupProps, type ComboboxInputGroupVariantsOptions, type ComboboxInputProps, ComboboxItem, type ComboboxItemProps, ComboboxLabel, type ComboboxLabelProps, ComboboxPopup, type ComboboxPopupProps, type ComboboxProps, ComboboxSeparator, type ComboboxSeparatorProps, type ComboboxSize, ComboboxTrigger, type ComboboxTriggerProps, type ComboboxTriggerSize, type ComboboxTriggerVariant, ComboboxValue, type ComboboxValueProps, ContextMenu, type ContextMenuAlign, ContextMenuCheckboxItem, type ContextMenuCheckboxItemProps, ContextMenuGroup, ContextMenuGroupLabel, type ContextMenuGroupLabelProps, type ContextMenuGroupProps, ContextMenuItem, type ContextMenuItemProps, type ContextMenuItemVariant, ContextMenuLinkItem, type ContextMenuLinkItemProps, ContextMenuPopup, type ContextMenuPopupProps, type ContextMenuProps, ContextMenuRadioGroup, type ContextMenuRadioGroupProps, ContextMenuRadioItem, type ContextMenuRadioItemProps, ContextMenuSeparator, type ContextMenuSeparatorProps, ContextMenuShortcut, type ContextMenuShortcutProps, type ContextMenuSide, ContextMenuSubmenuRoot, type ContextMenuSubmenuRootProps, ContextMenuSubmenuTrigger, type ContextMenuSubmenuTriggerProps, ContextMenuTrigger, type ContextMenuTriggerProps, DatePicker, type DatePickerCalendarProps, type DatePickerPopupProps, type DatePickerProps, type DatePickerSize, type DatePickerVariant, type DatePickerVariantsOptions, DateRangePicker, type DateRangePickerCalendarProps, type DateRangePickerPopupProps, type DateRangePickerProps, type DateRangePickerSize, type DateRangePickerVariant, type DateRangePickerVariantsOptions, Dialog, DialogClose, type DialogCloseProps, DialogDescription, type DialogDescriptionProps, DialogFooter, type DialogFooterProps, DialogHeader, type DialogHeaderProps, DialogPopup, type DialogPopupProps, type DialogPopupVariantsOptions, type DialogProps, type DialogScrollBehavior, type DialogSize, DialogTitle, type DialogTitleProps, DialogTrigger, type DialogTriggerProps, Drawer, DrawerClose, type DrawerCloseProps, DrawerDescription, type DrawerDescriptionProps, DrawerFooter, type DrawerFooterProps, DrawerHeader, type DrawerHeaderProps, DrawerIndent, DrawerIndentBackground, type DrawerIndentBackgroundProps, type DrawerIndentProps, DrawerPopup, type DrawerPopupProps, type DrawerPopupVariantsOptions, type DrawerProps, DrawerProvider, type DrawerSide, type DrawerSize, DrawerSwipeArea, type DrawerSwipeAreaProps, DrawerTitle, type DrawerTitleProps, DrawerTrigger, type DrawerTriggerProps, DrawerVirtualKeyboardProvider, Field, type FieldControlProps, FieldDescription, type FieldDescriptionProps, FieldError, type FieldErrorProps, FieldItem, type FieldItemProps, FieldLabel, type FieldLabelProps, type FieldLabelVariantsOptions, type FieldOrientation, type FieldProps, FieldValidity, type FieldValidityProps, Fieldset, FieldsetDescription, type FieldsetDescriptionProps, FieldsetLegend, type FieldsetLegendProps, type FieldsetLegendVariant, type FieldsetProps, Form, type FormProps, Input, InputGroup, InputGroupAddon, type InputGroupAddonProps, type InputGroupProps, type InputProps, type InputSize, type InputVariantsOptions, Menu, type MenuAlign, MenuCheckboxItem, type MenuCheckboxItemProps, MenuGroup, MenuGroupLabel, type MenuGroupLabelProps, type MenuGroupProps, type MenuHandle, MenuItem, type MenuItemProps, type MenuItemVariant, type MenuItemVariantsOptions, MenuLinkItem, type MenuLinkItemProps, MenuPopup, type MenuPopupProps, type MenuProps, MenuRadioGroup, type MenuRadioGroupProps, MenuRadioItem, type MenuRadioItemProps, MenuSeparator, type MenuSeparatorProps, MenuShortcut, type MenuShortcutProps, type MenuSide, MenuSubmenuRoot, type MenuSubmenuRootProps, MenuSubmenuTrigger, type MenuSubmenuTriggerProps, MenuTrigger, type MenuTriggerProps, Popover, type PopoverAlign, PopoverClose, type PopoverCloseProps, PopoverDescription, type PopoverDescriptionProps, type PopoverHandle, PopoverPopup, type PopoverPopupProps, type PopoverPopupVariantsOptions, type PopoverProps, type PopoverSide, PopoverTitle, type PopoverTitleProps, PopoverTrigger, type PopoverTriggerProps, Progress, type ProgressIndicatorVariantsOptions, type ProgressProps, type ProgressSize, type ProgressTrackVariantsOptions, type ProgressVariant, Radio, RadioGroup, type RadioGroupProps, type RadioProps, type RadioSize, type RadioVariantsOptions, Select, type SelectAlign, SelectGroup, SelectGroupLabel, type SelectGroupLabelProps, type SelectGroupProps, SelectItem, type SelectItemProps, SelectLabel, type SelectLabelProps, SelectPopup, type SelectPopupProps, type SelectProps, SelectSeparator, type SelectSeparatorProps, SelectTrigger, type SelectTriggerProps, type SelectTriggerSize, type SelectTriggerVariant, type SelectTriggerVariantsOptions, SelectValue, type SelectValueProps, Skeleton, type SkeletonAnimation, type SkeletonProps, type SkeletonRenderState, type SkeletonVariant, type SkeletonVariantsOptions, Stepper, StepperDescription, type StepperDescriptionProps, StepperIndicator, type StepperIndicatorProps, StepperItem, type StepperItemProps, type StepperOrientation, type StepperProps, StepperSeparator, type StepperSeparatorProps, type StepperSize, StepperTitle, type StepperTitleProps, StepperTrigger, type StepperTriggerProps, type StepperTriggerVariantsOptions, Switch, type SwitchLabelPosition, type SwitchProps, type SwitchSize, type SwitchVariantsOptions, Table, TableBody, type TableBodyProps, TableCaption, type TableCaptionProps, type TableCaptionRenderState, type TableCaptionSide, TableCell, type TableCellProps, TableContainer, type TableContainerProps, type TableContainerRenderState, type TableContainerVariant, TableFooter, type TableFooterProps, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, type TableLayout, type TableProps, type TableRenderState, TableRow, type TableRowProps, type TableRowRenderState, type TableSize, Tabs, type TabsIndicatorPosition, TabsList, type TabsListProps, type TabsListVariantsOptions, TabsPanel, type TabsPanelProps, type TabsProps, type TabsSize, TabsTab, type TabsTabProps, type TabsTabVariantsOptions, type TabsVariant, Timeline, TimelineConnector, type TimelineConnectorProps, TimelineContent, type TimelineContentProps, TimelineDescription, type TimelineDescriptionProps, TimelineIndicator, type TimelineIndicatorAppearance, type TimelineIndicatorProps, type TimelineIndicatorVariant, TimelineItem, type TimelineItemProps, type TimelineProps, TimelineSeparator, type TimelineSeparatorProps, type TimelineSeparatorVariant, type TimelineSize, TimelineTime, type TimelineTimeProps, TimelineTitle, type TimelineTitleProps, type ToastData, type ToastManager, type ToastObject, type ToastOptions, type ToastPosition, type ToastPromiseOptions, type ToastType, type ToastUpdateOptions, Toaster, type ToasterProps, Tooltip, type TooltipAlign, type TooltipHandle, TooltipPopup, type TooltipPopupProps, type TooltipPopupVariantsOptions, type TooltipProps, TooltipProvider, type TooltipProviderProps, type TooltipSide, TooltipTrigger, type TooltipTriggerProps, Typography, type TypographyProps, type TypographyVariant, type TypographyVariantsOptions, avatarVariants, badgeVariants, breadcrumbLinkVariants, buttonVariants, checkboxVariants, cn, comboboxInputGroupVariants, createDrawerHandle, createMenuHandle, createPopoverHandle, createToastManager, createTooltipHandle, datePickerVariants, dateRangePickerVariants, dialogPopupVariants, drawerPopupVariants, fieldLabelVariants, inputVariants, menuItemVariants, popoverPopupVariants, progressIndicatorVariants, progressTrackVariants, radioVariants, selectTriggerVariants, skeletonVariants, stepperTriggerVariants, switchVariants, tabsListVariants, tabsTabVariants, toast, tooltipPopupVariants, typographyVariants, useComboboxFilter, useComboboxFilteredItems, useFieldControl };