@justanarthur/modo-ui 0.2.0 → 0.4.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.
- package/README.md +20 -16
- package/dist/blocks/sidebar-app/index.js +7 -7
- package/dist/components/{inputs → AI}/input-message/index.js +2 -2
- package/dist/components/AI/thinking-indicator/index.js +13 -0
- package/dist/components/accordion/index.js +28 -0
- package/dist/components/card/index.js +2 -2
- package/dist/components/{inputs/input-copy → copy}/index.d.ts +7 -7
- package/dist/components/copy/index.js +16 -0
- package/dist/components/inputs/checkbox/index.d.ts +62 -0
- package/dist/components/inputs/{checkbox-group → checkbox}/index.js +7 -6
- package/dist/components/inputs/color-picker/index.js +2 -2
- package/dist/components/inputs/combobox/index.d.ts +8 -7
- package/dist/components/inputs/combobox/index.js +3 -3
- package/dist/components/inputs/date-time/calendar/index.js +3 -3
- package/dist/components/inputs/date-time/date-picker/index.d.ts +7 -3
- package/dist/components/inputs/date-time/date-picker/index.js +8 -8
- package/dist/components/inputs/date-time/date-range-picker/index.d.ts +7 -3
- package/dist/components/inputs/date-time/date-range-picker/index.js +7 -7
- package/dist/components/inputs/date-time/duration-picker/index.d.ts +7 -3
- package/dist/components/inputs/date-time/duration-picker/index.js +7 -7
- package/dist/components/inputs/date-time/month-picker/index.d.ts +7 -3
- package/dist/components/inputs/date-time/month-picker/index.js +6 -6
- package/dist/components/inputs/date-time/time-picker/index.d.ts +7 -3
- package/dist/components/inputs/date-time/time-picker/index.js +7 -7
- package/dist/components/inputs/input/index.d.ts +5 -1
- package/dist/components/inputs/input/index.js +2 -2
- package/dist/components/inputs/{radio-group → radio}/index.d.ts +30 -30
- package/dist/components/inputs/{radio-group → radio}/index.js +7 -6
- package/dist/components/inputs/search/index.js +3 -3
- package/dist/components/inputs/select/index.js +2 -2
- package/dist/components/inputs/switch/index.d.ts +27 -6
- package/dist/components/inputs/switch/index.js +8 -1
- package/dist/components/inputs/textarea/index.d.ts +46 -0
- package/dist/components/inputs/textarea/index.js +13 -0
- package/dist/components/navigation/sidebar/index.js +4 -4
- package/dist/components/navigation/tabs/index.js +2 -2
- package/dist/components/navigation/tabs-subtle/index.js +2 -2
- package/dist/components/overlays/command/index.js +2 -2
- package/dist/components/overlays/context-menu/index.js +3 -3
- package/dist/components/overlays/dropdown/index.d.ts +2 -2
- package/dist/components/overlays/dropdown/index.js +2 -2
- package/dist/components/table/index.js +2 -2
- package/dist/index.d.ts +896 -808
- package/dist/index.js +57 -50
- package/dist/primitives/fluid-hover/index.js +2 -2
- package/dist/primitives/morph/index.d.ts +2 -2
- package/dist/primitives/sizes/index.d.ts +2 -2
- package/dist/shared/{components-1rfwbyyc.js → components-1z6tdadk.js} +1 -1
- package/dist/shared/{components-7x9kawxv.js → components-27nnvrwe.js} +1 -1
- package/dist/shared/{components-mhd39z7x.js → components-3myrw7ne.js} +36 -1
- package/dist/shared/{components-gvr9w41t.js → components-50m950y9.js} +19 -23
- package/dist/shared/{components-asr5pg50.js → components-8snj490h.js} +106 -9
- package/dist/shared/{components-1xekx2hx.js → components-ar66gnt0.js} +1 -1
- package/dist/shared/{components-3wk0w46f.js → components-b3c5et5b.js} +1 -1
- package/dist/shared/{components-yh3kwdhr.js → components-d6xtjht3.js} +3 -3
- package/dist/shared/{components-ytb2tefr.js → components-hyq23phv.js} +39 -20
- package/dist/shared/{components-q4daerx0.js → components-mjthm1kf.js} +1 -1
- package/dist/shared/{components-ca2c898n.js → components-mqyvvh8k.js} +1 -1
- package/dist/shared/{components-4cnjmgex.js → components-nsjec21k.js} +4 -2
- package/dist/shared/{components-7ans7ce5.js → components-nyq0rym2.js} +5 -3
- package/dist/shared/{components-ny774h8p.js → components-pbmqctfa.js} +15 -8
- package/dist/shared/{components-7btqt08d.js → components-qtqxgfrb.js} +17 -20
- package/dist/shared/components-rd9tbsqv.js +89 -0
- package/dist/shared/{components-1j9791sn.js → components-s083f38z.js} +5 -5
- package/dist/shared/components-ta7shw28.js +19 -0
- package/dist/shared/{components-3gae8nta.js → components-tcee5k0s.js} +22 -24
- package/dist/shared/{components-ez65vtbq.js → components-wshd8f3n.js} +5 -3
- package/dist/shared/{components-v7wtz8hk.js → components-wtbesgdp.js} +6 -4
- package/dist/shared/{components-66mv71kx.js → components-xxvdw7k1.js} +1 -1
- package/dist/shared/{components-njzgqdwy.js → components-ye0ze0h8.js} +2 -2
- package/dist/shared/{components-cbxjn9p8.js → components-zwhtxm15.js} +5 -3
- package/dist/styles.css +1 -1
- package/package.json +1 -1
- package/dist/components/inputs/checkbox-group/index.d.ts +0 -50
- package/dist/components/inputs/input-copy/index.js +0 -16
- package/dist/components/navigation/accordion/index.js +0 -28
- package/dist/components/thinking-indicator/index.js +0 -13
- /package/dist/components/{inputs → AI}/input-message/index.d.ts +0 -0
- /package/dist/components/{thinking-indicator → AI/thinking-indicator}/index.d.ts +0 -0
- /package/dist/components/{navigation/accordion → accordion}/index.d.ts +0 -0
- /package/dist/shared/{components-0ke6xada.js → components-1434p1mh.js} +0 -0
- /package/dist/shared/{components-h2dpcwgc.js → components-2dxkv6zm.js} +0 -0
- /package/dist/shared/{components-8fpr3s4p.js → components-39vmfq9s.js} +0 -0
- /package/dist/shared/{components-nh8tma1n.js → components-a86dytt0.js} +0 -0
- /package/dist/shared/{components-v6xp325t.js → components-dk0gjr5a.js} +0 -0
- /package/dist/shared/{components-62ybc7t2.js → components-frw34b65.js} +0 -0
- /package/dist/shared/{components-9jvzzvt1.js → components-gz8zf3ec.js} +0 -0
- /package/dist/shared/{components-tqvarbfv.js → components-hw9yk32z.js} +0 -0
- /package/dist/shared/{components-apdwtweq.js → components-jbbmdr74.js} +0 -0
- /package/dist/shared/{components-3k8xpnpq.js → components-jthe1pwb.js} +0 -0
package/dist/index.d.ts
CHANGED
|
@@ -31,11 +31,370 @@ type Element_12xgc = JSX_1kxb["Element"];
|
|
|
31
31
|
* @example {@include ./examples.mdx}
|
|
32
32
|
*/
|
|
33
33
|
declare function SidebarApp({ defaultOpen, variant, side, openOnHover, contained }: SidebarAppProps): Element_12xgc;
|
|
34
|
-
import {
|
|
35
|
-
|
|
36
|
-
|
|
34
|
+
import { HTMLAttributes, ReactNode, TextareaHTMLAttributes } from "react";
|
|
35
|
+
type SizeVariant = "default" | "compact";
|
|
36
|
+
interface SizeClasses {
|
|
37
|
+
/** The variant these classes belong to — handy for conditionals. */
|
|
38
|
+
variant: SizeVariant;
|
|
39
|
+
/** Bounded control height — buttons, inputs, select triggers, subtle tabs —
|
|
40
|
+
* AND list/menu rows (select options, dropdown, checkbox and radio rows).
|
|
41
|
+
* One token by design: a popup row lines up with the trigger that opened
|
|
42
|
+
* it because they share this height. */
|
|
43
|
+
control: string;
|
|
44
|
+
/** `control` as a number, for consumers that need raw pixels. */
|
|
45
|
+
controlHeight: number;
|
|
46
|
+
/** Tab trigger height inside a padded segmented list. Sized so
|
|
47
|
+
* `segmentPad` + `segmentItem` adds back up to the control height —
|
|
48
|
+
* the segmented control's outer box stays on the same ladder. */
|
|
49
|
+
segmentItem: string;
|
|
50
|
+
/** Padding of the segmented list around its tabs. */
|
|
51
|
+
segmentPad: string;
|
|
52
|
+
/** Body text inside controls. */
|
|
53
|
+
text: string;
|
|
54
|
+
/** Horizontal padding of bounded controls (select trigger, inputs). */
|
|
55
|
+
px: string;
|
|
56
|
+
/** Horizontal padding of list/menu rows, which sit inside a padded popup
|
|
57
|
+
* or group and need less inset than a bounded control. */
|
|
58
|
+
itemPx: string;
|
|
59
|
+
/** Gap between an icon / control glyph and its label, and between
|
|
60
|
+
* neighbouring controls in a row (toolbars, filter bars, button
|
|
61
|
+
* clusters). Density is spacing as much as control height, so the
|
|
62
|
+
* compact step halves it. */
|
|
63
|
+
gap: string;
|
|
64
|
+
/** Glyph size in px: leading/trailing icons inside controls, and the
|
|
65
|
+
* checkbox square / radio circle. */
|
|
66
|
+
icon: number;
|
|
67
|
+
}
|
|
68
|
+
declare const sizeMap: Record<SizeVariant, SizeClasses>;
|
|
69
|
+
/** One role of the type scale: px per ladder step. */
|
|
70
|
+
interface TypeScaleStep {
|
|
71
|
+
default: number;
|
|
72
|
+
compact: number;
|
|
73
|
+
}
|
|
74
|
+
/**
|
|
75
|
+
* Role-based type scale, per ladder step (px values).
|
|
76
|
+
*
|
|
77
|
+
* The default column is the system as shipped; the compact column steps each
|
|
78
|
+
* role down one notch so dense regions read as a smaller sibling of the same
|
|
79
|
+
* hierarchy, not a squeezed copy. `body`, `caption`, and `subtitle` are what
|
|
80
|
+
* the sized components already render through `SizeClasses.text` and their
|
|
81
|
+
* compact conditionals; `display` and `title` are the page-level roles
|
|
82
|
+
* for consumers composing their own screens.
|
|
83
|
+
*/
|
|
84
|
+
declare const typeScale: {
|
|
85
|
+
/** Page titles. */
|
|
86
|
+
readonly display: {
|
|
87
|
+
readonly default: 28;
|
|
88
|
+
readonly compact: 24;
|
|
89
|
+
};
|
|
90
|
+
/** Section headings, dialog titles. */
|
|
91
|
+
readonly title: {
|
|
92
|
+
readonly default: 16;
|
|
93
|
+
readonly compact: 15;
|
|
94
|
+
};
|
|
95
|
+
/** Card titles, chat bubbles, emphasized rows. */
|
|
96
|
+
readonly subtitle: {
|
|
97
|
+
readonly default: 14;
|
|
98
|
+
readonly compact: 13;
|
|
99
|
+
};
|
|
100
|
+
/** Control labels and body copy — `SizeClasses.text`. */
|
|
101
|
+
readonly body: {
|
|
102
|
+
readonly default: 13;
|
|
103
|
+
readonly compact: 12;
|
|
104
|
+
};
|
|
105
|
+
/** Secondary text: descriptions, meta rows, errors, eyebrows and group
|
|
106
|
+
* labels (the former overline role — an uppercase or muted caption). */
|
|
107
|
+
readonly caption: {
|
|
108
|
+
readonly default: 12;
|
|
109
|
+
readonly compact: 11;
|
|
110
|
+
};
|
|
111
|
+
};
|
|
112
|
+
type TypeScaleRole = keyof typeof typeScale;
|
|
113
|
+
/** The type scale resolved for the active ladder step (px per role):
|
|
114
|
+
* explicit override > surrounding SizeProvider > "default". */
|
|
115
|
+
declare function useTypeScale(override?: SizeVariant | null): Record<TypeScaleRole, number>;
|
|
116
|
+
interface SizeContextValue {
|
|
117
|
+
size: SizeVariant;
|
|
118
|
+
setSize: (size: SizeVariant) => void;
|
|
119
|
+
classes: SizeClasses;
|
|
120
|
+
}
|
|
121
|
+
/** Resolve the active size variant: explicit prop > provider > "default". */
|
|
122
|
+
declare function useSizeVariant(override?: SizeVariant | null): SizeVariant;
|
|
123
|
+
/** Resolve size classes: explicit prop > provider > "default". */
|
|
124
|
+
declare function useSize(override?: SizeVariant | null): SizeClasses;
|
|
125
|
+
declare function useSizeContext(): SizeContextValue;
|
|
37
126
|
import { ForwardRefExoticComponent as ForwardRefExoticComponent_tcubfn } from "react";
|
|
38
127
|
import { RefAttributes as RefAttributes_miuf56 } from "react";
|
|
128
|
+
import { JSX as JSX_1kxb2 } from "react";
|
|
129
|
+
interface FileThumbnailProps {
|
|
130
|
+
file: File;
|
|
131
|
+
/** Side length of the square thumbnail in pixels. */
|
|
132
|
+
size: number;
|
|
133
|
+
className?: string;
|
|
134
|
+
}
|
|
135
|
+
type Element_12xgc2 = JSX_1kxb2["Element"];
|
|
136
|
+
declare function FileThumbnail({ file, size, className }: FileThumbnailProps): Element_12xgc2;
|
|
137
|
+
type InputMessageStatus = "idle" | "streaming";
|
|
138
|
+
interface InputMessageSlotContext {
|
|
139
|
+
/** Opens the native file picker via the hidden `<input type="file">`.
|
|
140
|
+
* Pass `acceptOverride` (e.g. `"image/*"`) to scope the picker to a
|
|
141
|
+
* subset of the component's accept types just for this invocation. */
|
|
142
|
+
openFilePicker: (acceptOverride?: string) => void;
|
|
143
|
+
/** Currently-attached files. */
|
|
144
|
+
files: File[];
|
|
145
|
+
}
|
|
146
|
+
type InputMessageSlot = ReactNode | ((ctx: InputMessageSlotContext) => ReactNode);
|
|
147
|
+
/** A message held in the queue while the assistant is responding. Carries the
|
|
148
|
+
* trimmed text plus a snapshot of the files attached when it was queued, so
|
|
149
|
+
* double-click-to-edit can restore both. `id` is a stable key minted on enqueue. */
|
|
150
|
+
interface QueuedMessage {
|
|
151
|
+
id: string;
|
|
152
|
+
text: string;
|
|
153
|
+
files: File[];
|
|
154
|
+
}
|
|
155
|
+
interface InputMessageProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
|
|
156
|
+
/** Step on the size ladder (see Sizes). Wins over the surrounding SizeProvider and propagates to the composer's rows, buttons and queued messages. */
|
|
157
|
+
size?: SizeVariant;
|
|
158
|
+
/** Controlled textarea value. Pair with `onValueChange`; omit both for an uncontrolled composer. */
|
|
159
|
+
value?: string;
|
|
160
|
+
/** Initial textarea value for an uncontrolled composer. Defaults to `""`. */
|
|
161
|
+
defaultValue?: string;
|
|
162
|
+
/** Called with the new value on every textarea change. */
|
|
163
|
+
onValueChange?: (value: string) => void;
|
|
164
|
+
/** Fires on Enter (without Shift) or send-button click, and when a queued message auto-dispatches. Receives the trimmed value, the attached files, and — for auto-dispatched queue items — `meta.queuedId`. Skipped when the value is empty and no files are attached. */
|
|
165
|
+
onSend?: (value: string, files: File[], meta?: {
|
|
166
|
+
queuedId?: string;
|
|
167
|
+
}) => void;
|
|
168
|
+
/** Placeholder shown when the value is empty. While a file is dragged over the component (and attachments are enabled) it swaps to "Drop files here to add to chat". Defaults to `"Ask me anything…"`. */
|
|
169
|
+
placeholder?: string;
|
|
170
|
+
/** Content rendered in the bottom-left action area. May be a render-fn that receives `{ openFilePicker, files }` — `openFilePicker(acceptOverride?)` opens the native file picker. */
|
|
171
|
+
leftSlot?: InputMessageSlot;
|
|
172
|
+
/** Content rendered in the bottom-right action area, before the built-in send button. Same render-fn shape as `leftSlot`. */
|
|
173
|
+
rightSlot?: InputMessageSlot;
|
|
174
|
+
/** Disables the textarea, send button, and drag-and-drop. Defaults to `false`. */
|
|
175
|
+
disabled?: boolean;
|
|
176
|
+
/** Minimum visible rows before the textarea grows. Defaults to 1. */
|
|
177
|
+
minRows?: number;
|
|
178
|
+
/** Maximum visible rows before the textarea starts to scroll. Defaults to 8. */
|
|
179
|
+
maxRows?: number;
|
|
180
|
+
/** When true, clicking anywhere on the surrounding container (outside of buttons / links / inputs) focuses the textarea. Defaults to `true`. */
|
|
181
|
+
clickToFocus?: boolean;
|
|
182
|
+
/** Accessible label for the send button. Defaults to `"Send"`. */
|
|
183
|
+
sendLabel?: string;
|
|
184
|
+
/** Controlled list of attached files. Pair with `onFilesChange` to enable drag-and-drop and the file-picker slot helper. */
|
|
185
|
+
files?: File[];
|
|
186
|
+
/** Initial attachments for an uncontrolled composer. Providing it (even as `[]`) enables attachment behavior on its own. */
|
|
187
|
+
defaultFiles?: File[];
|
|
188
|
+
/** Called when files are added (drag-drop or picker) or removed via the preview tile's × button. Duplicate drops of the same file (same name + size + lastModified) are silently de-duplicated. */
|
|
189
|
+
onFilesChange?: (files: File[]) => void;
|
|
190
|
+
/** Accepted MIME types as a comma-separated string. Used by both the file picker and the drag-and-drop filter. Defaults to `"image/png,image/jpeg,application/pdf"`. */
|
|
191
|
+
accept?: string;
|
|
192
|
+
/** Maximum number of attached files. Extra files beyond this limit are dropped. */
|
|
193
|
+
maxFiles?: number;
|
|
194
|
+
/** Side length (in pixels) of each preview tile. Images use object-cover; PDFs render the first page via pdfjs; other types fall back to a centered icon. Defaults to 80. */
|
|
195
|
+
filePreviewSize?: number;
|
|
196
|
+
/** Extra props forwarded to the underlying textarea (value, onChange, onKeyDown, disabled and placeholder are controlled by the component). */
|
|
197
|
+
textareaProps?: Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "value" | "onChange" | "onKeyDown" | "disabled" | "placeholder">;
|
|
198
|
+
/** Assistant response state. When `"streaming"`, the send button becomes a Stop control (empty draft) or a Queue action (non-empty draft). On the streaming→idle edge the next queued message auto-dispatches via `onSend`. Leave it and `defaultStatus` undefined for the send-immediately behavior. */
|
|
199
|
+
status?: InputMessageStatus;
|
|
200
|
+
/** Initial status for an uncontrolled composer — the component then owns the streaming flag, and Stop flips it to `"idle"` itself. */
|
|
201
|
+
defaultStatus?: InputMessageStatus;
|
|
202
|
+
/** Called whenever the status changes while it is uncontrolled (currently: the Stop control). */
|
|
203
|
+
onStatusChange?: (status: InputMessageStatus) => void;
|
|
204
|
+
/** Fires when the Stop control is pressed (streaming + empty draft). Halt the current response and set status to `"idle"` — that edge immediately dispatches the next queued message. */
|
|
205
|
+
onStop?: () => void;
|
|
206
|
+
/** Controlled queue of pending messages, rendered as reorderable rows above the textarea. Double-click (or Enter/F2) edits a row back into the composer; the × (or Delete) removes it; drag — or Alt+↑/↓ — reorders. Requires a status. */
|
|
207
|
+
queue?: QueuedMessage[];
|
|
208
|
+
/** Initial queue for an uncontrolled composer. Providing it (even as `[]`) enables the queue on its own, alongside `status` or `defaultStatus`. */
|
|
209
|
+
defaultQueue?: QueuedMessage[];
|
|
210
|
+
/** Called whenever the queue changes — enqueue, edit, delete, reorder, or auto-dispatch. Each QueuedMessage is `{ id, text, files }`. */
|
|
211
|
+
onQueueChange?: (queue: QueuedMessage[]) => void;
|
|
212
|
+
/** Render the built-in reorderable queue rows above the textarea. Set to false to suppress them and render the queue yourself — enqueue and auto-dispatch still run. Defaults to `true`. */
|
|
213
|
+
showQueue?: boolean;
|
|
214
|
+
/** Previously-sent messages, oldest first. With the textarea focused, ArrowUp (caret on the first line) recalls the previous message and walks backward; ArrowDown (caret on the last line) walks forward toward the in-progress draft. Editing or sending exits history mode. Defaults to `[]`. */
|
|
215
|
+
history?: string[];
|
|
216
|
+
/** Suggested prompt rendered as the placeholder (with a Tab keycap) while the draft is empty. Pressing Tab fills it into the composer — it doesn't send. Takes precedence over `placeholder`. */
|
|
217
|
+
placeholderSuggestion?: string;
|
|
218
|
+
/** Suggested prompts listed under the action bar while the draft is empty. ArrowDown moves a highlight into the list (focus stays in the textarea), ArrowUp walks back up and out, Enter or click fills the highlighted prompt. Escape drops the highlight; typing collapses the list. */
|
|
219
|
+
suggestions?: string[];
|
|
220
|
+
/** Extra classes for the composer surface. */
|
|
221
|
+
className?: string;
|
|
222
|
+
}
|
|
223
|
+
/**
|
|
224
|
+
* Chat-style message composer with an auto-resizing textarea, flexible
|
|
225
|
+
* left/right action slots, and a built-in send button on a Surface-2
|
|
226
|
+
* substrate.
|
|
227
|
+
*
|
|
228
|
+
* The textarea grows from `minRows` to `maxRows` and then scrolls, Enter
|
|
229
|
+
* sends while Shift+Enter breaks the line, and the whole panel is one
|
|
230
|
+
* hairline ring that recolours in place for hover, focus and drag instead of
|
|
231
|
+
* layering a second border. Attachments drop anywhere on the composer (or
|
|
232
|
+
* come from `openFilePicker` in a slot) and preview as tiles — images
|
|
233
|
+
* object-cover, PDFs render their first page. `suggestions` open a listbox
|
|
234
|
+
* under the action bar that ↓/↑ walk without moving focus, and
|
|
235
|
+
* `placeholderSuggestion` writes a ghost prompt with a Tab keycap. With a
|
|
236
|
+
* `status` the send button morphs into Stop (empty draft) or Queue (draft
|
|
237
|
+
* typed while streaming); queued rows reorder by drag or Alt+↑/↓, edit back
|
|
238
|
+
* into the composer on double-click, and the head auto-dispatches on the
|
|
239
|
+
* streaming→idle edge.
|
|
240
|
+
*
|
|
241
|
+
* Every controlled prop has an uncontrolled twin — `defaultValue`,
|
|
242
|
+
* `defaultFiles`, `defaultQueue`, `defaultStatus` — so a composer can hold
|
|
243
|
+
* its own draft, attachments and queue with no state in the caller.
|
|
244
|
+
*
|
|
245
|
+
* @example {@include ./examples.mdx}
|
|
246
|
+
*/
|
|
247
|
+
declare const InputMessage: ForwardRefExoticComponent_tcubfn<InputMessageProps & RefAttributes_miuf56<HTMLDivElement>>;
|
|
248
|
+
import { HTMLAttributes as HTMLAttributes2 } from "react";
|
|
249
|
+
import { ForwardRefExoticComponent as ForwardRefExoticComponent_tcubfn2 } from "react";
|
|
250
|
+
import { RefAttributes as RefAttributes_miuf562 } from "react";
|
|
251
|
+
interface ThinkingIndicatorProps extends HTMLAttributes2<HTMLDivElement> {
|
|
252
|
+
/** The look: `shimmer` morphs a circle⇄infinity glyph beside a shimmering label (Fluid Functionalism's), `goo` melts three dots into one blob and splits them again beside a plain label. Defaults to `"shimmer"`. */
|
|
253
|
+
variant?: "shimmer" | "goo";
|
|
254
|
+
/** Show the glyph (or, for `goo`, the dots) before the label. Set to `false` for a text-only indicator (e.g. inline before a streamed reply). Defaults to `true`. */
|
|
255
|
+
showIcon?: boolean;
|
|
256
|
+
/** Step on the size ladder. Wins over the surrounding SizeProvider. Defaults to the provider's step, else `"default"`. */
|
|
257
|
+
size?: SizeVariant;
|
|
258
|
+
}
|
|
259
|
+
/**
|
|
260
|
+
* Animated status indicator with morphing SVG and cycling text — the
|
|
261
|
+
* assistant's working state.
|
|
262
|
+
*
|
|
263
|
+
* A glyph that morphs circle to infinity and back sits next to a shimmering
|
|
264
|
+
* label that cycles Thinking, Moonwalking, Planning, Refining, each word
|
|
265
|
+
* swapped on a spring. The row reserves the width of the longest word, so
|
|
266
|
+
* nothing around it shifts while the words change. One static "Thinking…" is
|
|
267
|
+
* announced to screen readers instead of a re-announcement every four
|
|
268
|
+
* seconds, and reduced motion drops both the morph and the cycling for a
|
|
269
|
+
* still glyph and label.
|
|
270
|
+
*
|
|
271
|
+
* `variant="goo"` swaps the glyph for three dots that melt into one blob and
|
|
272
|
+
* split again through the goo filter (see Morph), beside a plain label;
|
|
273
|
+
* reduced motion holds them split.
|
|
274
|
+
*
|
|
275
|
+
* @example {@include ./examples.mdx}
|
|
276
|
+
*/
|
|
277
|
+
declare const ThinkingIndicator: ForwardRefExoticComponent_tcubfn2<ThinkingIndicatorProps & RefAttributes_miuf562<HTMLDivElement>>;
|
|
278
|
+
import { ForwardRefExoticComponent, HTMLAttributes as HTMLAttributes3, ReactNode as ReactNode2, RefAttributes } from "react";
|
|
279
|
+
type AccordionGroupSingleProps = {
|
|
280
|
+
/** Whether one or multiple items can be expanded. Defaults to `"single"`. */
|
|
281
|
+
type?: "single";
|
|
282
|
+
/** Controlled expanded value. */
|
|
283
|
+
value?: string;
|
|
284
|
+
/** Initially expanded item value — uncontrolled. */
|
|
285
|
+
defaultValue?: string;
|
|
286
|
+
/** Callback when expanded state changes. */
|
|
287
|
+
onValueChange?: (value: string) => void;
|
|
288
|
+
/** Allow collapsing all items when type is single. Defaults to `true`. */
|
|
289
|
+
collapsible?: boolean;
|
|
290
|
+
};
|
|
291
|
+
type AccordionGroupMultipleProps = {
|
|
292
|
+
/** Whether one or multiple items can be expanded. */
|
|
293
|
+
type: "multiple";
|
|
294
|
+
/** Controlled expanded values. */
|
|
295
|
+
value?: string[];
|
|
296
|
+
/** Initially expanded item values — uncontrolled. */
|
|
297
|
+
defaultValue?: string[];
|
|
298
|
+
/** Callback when expanded state changes. */
|
|
299
|
+
onValueChange?: (value: string[]) => void;
|
|
300
|
+
};
|
|
301
|
+
type AccordionGroupProps = HTMLAttributes3<HTMLDivElement> & {
|
|
302
|
+
children: ReactNode2;
|
|
303
|
+
/** Pins the group's rows to one step of the size ladder (default 36px,
|
|
304
|
+
* compact 28px — see /docs/sizes). Omitted, they follow the surrounding
|
|
305
|
+
* SizeProvider. */
|
|
306
|
+
size?: SizeVariant;
|
|
307
|
+
/** What an open item tints. "item" paints the row and its panel as one
|
|
308
|
+
* block, and holds while it stays open. "trigger" scopes the fill to the
|
|
309
|
+
* row and shows it on hover only, leaving the panel on the page's own
|
|
310
|
+
* surface — the way a sidebar row highlights without colouring its
|
|
311
|
+
* sub-tree. @default "item" */
|
|
312
|
+
highlight?: "trigger" | "item";
|
|
313
|
+
} & (AccordionGroupSingleProps | AccordionGroupMultipleProps);
|
|
314
|
+
declare const AccordionGroup: ForwardRefExoticComponent<AccordionGroupProps & RefAttributes<HTMLDivElement>>;
|
|
315
|
+
interface AccordionProps extends HTMLAttributes3<HTMLDivElement> {
|
|
316
|
+
/** The accordion's items (`Accordion.Item`). */
|
|
317
|
+
children: ReactNode2;
|
|
318
|
+
/** Whether one or multiple items can be expanded. Defaults to `"single"`. */
|
|
319
|
+
type?: "single" | "multiple";
|
|
320
|
+
/** Allow collapsing all items when type is single. Defaults to `true` (Base UI's single mode is always collapsible). */
|
|
321
|
+
collapsible?: boolean;
|
|
322
|
+
/** Initially expanded item value(s) — uncontrolled. A string for `type="single"`, an array for `type="multiple"`. */
|
|
323
|
+
defaultValue?: string | string[];
|
|
324
|
+
/** Controlled expanded value(s). Pair with `onValueChange`. */
|
|
325
|
+
value?: string | string[];
|
|
326
|
+
/** Callback when expanded state changes. Receives a string in single mode, an array in multiple mode. */
|
|
327
|
+
onValueChange?: ((value: string) => void) | ((value: string[]) => void);
|
|
328
|
+
/** What an open item tints: `item` holds a block across the row and its panel, `trigger` scopes it to the row and shows it on hover. Same prop on `Accordion.Group` and on a standalone `Accordion.Item`. Defaults to `"item"`. */
|
|
329
|
+
highlight?: "trigger" | "item";
|
|
330
|
+
/** Pins the accordion's rows to one step of the size ladder (default 36px, compact 28px). Omitted, they follow the surrounding SizeProvider. */
|
|
331
|
+
size?: SizeVariant;
|
|
332
|
+
}
|
|
333
|
+
type AccordionComponent = ForwardRefExoticComponent<AccordionProps & RefAttributes<HTMLDivElement>> & {
|
|
334
|
+
Group: typeof AccordionGroup;
|
|
335
|
+
Item: typeof AccordionItem;
|
|
336
|
+
Trigger: typeof AccordionTrigger;
|
|
337
|
+
Content: typeof AccordionContent;
|
|
338
|
+
};
|
|
339
|
+
/**
|
|
340
|
+
* Collapsible sections with animated expand/collapse and fluid hover in
|
|
341
|
+
* grouped mode.
|
|
342
|
+
*
|
|
343
|
+
* Accordion is the standalone form: every row carries its own hover fill.
|
|
344
|
+
* Accordion.Group takes the same props and adds one magnetic highlight that
|
|
345
|
+
* glides between rows, so give each item inside it an `index`. Built on Base
|
|
346
|
+
* UI Accordion (WAI-ARIA wiring, keyboard navigation, focus management).
|
|
347
|
+
* Uncontrolled through `defaultValue`, controlled through `value` +
|
|
348
|
+
* `onValueChange`.
|
|
349
|
+
*
|
|
350
|
+
* The panel grows out of its row (see Morph): a shape drips from where the
|
|
351
|
+
* row was pressed (its middle, from the keyboard), widens into the whole
|
|
352
|
+
* item, and the content is revealed by a clip from the same shape. Under the
|
|
353
|
+
* default `highlight="item"` that shape is the open tint, melted into the
|
|
354
|
+
* row through a liquid goo neck; closing folds it back into the row. The
|
|
355
|
+
* rows below ride the shape's bottom edge, so nothing jumps.
|
|
356
|
+
*
|
|
357
|
+
* Statics: Accordion.Group (the grouped root: type, collapsible,
|
|
358
|
+
* defaultValue, value, onValueChange, highlight, size), Accordion.Item (value,
|
|
359
|
+
* index, disabled), Accordion.Trigger (the row that toggles its item) and
|
|
360
|
+
* Accordion.Content (the collapsible panel: `effect` — `'goo'` or a plain
|
|
361
|
+
* `'morph'` — and the spring `tier`, `'slow'` or `'moderate'`).
|
|
362
|
+
*
|
|
363
|
+
* @example {@include ./examples.mdx}
|
|
364
|
+
*/
|
|
365
|
+
declare const Accordion: AccordionComponent;
|
|
366
|
+
interface AccordionItemProps extends HTMLAttributes3<HTMLDivElement> {
|
|
367
|
+
/** Unique identifier for this item. */
|
|
368
|
+
value: string;
|
|
369
|
+
/** Position index for fluid hover. Required inside `Accordion.Group`, omit for standalone. */
|
|
370
|
+
index?: number;
|
|
371
|
+
/** Whether this item is disabled. Defaults to `false`. */
|
|
372
|
+
disabled?: boolean;
|
|
373
|
+
/** Standalone equivalent of the group's prop: what an open item tints. Ignored inside a group, which decides for all its rows. Defaults to the standalone root's `highlight`, else `"item"`. */
|
|
374
|
+
highlight?: "trigger" | "item";
|
|
375
|
+
/** The item's `Accordion.Trigger` and `Accordion.Content`. */
|
|
376
|
+
children: ReactNode2;
|
|
377
|
+
}
|
|
378
|
+
declare const AccordionItem: ForwardRefExoticComponent<AccordionItemProps & RefAttributes<HTMLDivElement>>;
|
|
379
|
+
interface AccordionTriggerProps extends HTMLAttributes3<HTMLButtonElement> {
|
|
380
|
+
/** Trigger label content. */
|
|
381
|
+
children: ReactNode2;
|
|
382
|
+
}
|
|
383
|
+
declare const AccordionTrigger: ForwardRefExoticComponent<AccordionTriggerProps & RefAttributes<HTMLButtonElement>>;
|
|
384
|
+
interface AccordionContentProps extends HTMLAttributes3<HTMLDivElement> {
|
|
385
|
+
/** Collapsible content. */
|
|
386
|
+
children: ReactNode2;
|
|
387
|
+
/** How the panel grows out of its row (see Morph): `goo` melts the open tint out of the row through a liquid neck, `morph` grows it without one. Defaults to `'goo'`. */
|
|
388
|
+
effect?: "goo" | "morph";
|
|
389
|
+
/** Spring tier the panel opens on; it closes on the tier's faster exit tween. Defaults to `'slow'`. */
|
|
390
|
+
tier?: "moderate" | "slow";
|
|
391
|
+
}
|
|
392
|
+
declare const AccordionContent: ForwardRefExoticComponent<AccordionContentProps & RefAttributes<HTMLDivElement>>;
|
|
393
|
+
import { VariantProps } from "class-variance-authority";
|
|
394
|
+
import { HTMLAttributes as HTMLAttributes4 } from "react";
|
|
395
|
+
import { ClassProp as ClassProp_wz9o0r } from "class-variance-authority/types";
|
|
396
|
+
import { ForwardRefExoticComponent as ForwardRefExoticComponent_tcubfn3 } from "react";
|
|
397
|
+
import { RefAttributes as RefAttributes_miuf563 } from "react";
|
|
39
398
|
declare const badgeColors: {
|
|
40
399
|
readonly gray: "var(--badge-gray)";
|
|
41
400
|
readonly red: "var(--badge-red)";
|
|
@@ -65,7 +424,7 @@ type BadgeSizeCanonical = "default" | "compact";
|
|
|
65
424
|
* aliases, kept so existing call sites keep compiling. Aliases resolve onto
|
|
66
425
|
* the canonical ladder (sm → compact; md/lg → default). */
|
|
67
426
|
type BadgeSize = BadgeSizeCanonical | "sm" | "md" | "lg";
|
|
68
|
-
interface BadgeProps extends Omit<
|
|
427
|
+
interface BadgeProps extends Omit<HTMLAttributes4<HTMLSpanElement>, "color">, Omit<VariantProps<typeof badgeVariants>, "size"> {
|
|
69
428
|
/** Visual style. Solid uses a tinted background; dot shows a colored indicator. Defaults to `"solid"`. */
|
|
70
429
|
variant?: "solid" | "dot";
|
|
71
430
|
/** Step on the size ladder (see Sizes). Legacy sm/md/lg values resolve as aliases (sm → compact; md/lg → default). Defaults to the surrounding SizeProvider, else `"default"`. */
|
|
@@ -88,11 +447,11 @@ interface BadgeProps extends Omit<HTMLAttributes<HTMLSpanElement>, "color">, Omi
|
|
|
88
447
|
*
|
|
89
448
|
* @example {@include ./examples.mdx}
|
|
90
449
|
*/
|
|
91
|
-
declare const Badge:
|
|
450
|
+
declare const Badge: ForwardRefExoticComponent_tcubfn3<BadgeProps & RefAttributes_miuf563<HTMLSpanElement>>;
|
|
92
451
|
import { VariantProps as VariantProps2 } from "class-variance-authority";
|
|
93
|
-
import { ButtonHTMLAttributes, ReactNode as
|
|
94
|
-
import { ComponentType, ReactNode } from "react";
|
|
95
|
-
import { JSX as
|
|
452
|
+
import { ButtonHTMLAttributes, ReactNode as ReactNode4 } from "react";
|
|
453
|
+
import { ComponentType, ReactNode as ReactNode3 } from "react";
|
|
454
|
+
import { JSX as JSX_1kxb3 } from "react";
|
|
96
455
|
interface IconComponentProps {
|
|
97
456
|
size?: number | string;
|
|
98
457
|
strokeWidth?: number | string;
|
|
@@ -100,18 +459,18 @@ interface IconComponentProps {
|
|
|
100
459
|
}
|
|
101
460
|
type IconComponent = ComponentType<IconComponentProps>;
|
|
102
461
|
type IconName = "chevron-right" | "chevron-down" | "x" | "copy" | "menu" | "dot" | "monitor" | "sun" | "moon" | "rectangle-horizontal" | "circle" | "square-library" | "clock" | "star" | "settings" | "plus" | "arrow-left" | "arrow-right" | "arrow-up" | "arrow-down" | "search" | "loader" | "users" | "lock" | "mail" | "bell" | "shield" | "palette" | "lightbulb" | "rocket" | "heart" | "paintbrush" | "brain" | "globe" | "user" | "image" | "link" | "check" | "rotate-ccw" | "play" | "pause" | "pipette" | "home" | "message-circle" | "inbox" | "pencil" | "scaling" | "skip-forward" | "corner-down-right" | "corner-down-left" | "panel-left" | "panel-left-dashed" | "panel-right" | "panel-right-dashed" | "chevrons-up-down" | "more-horizontal" | "more-vertical" | "calendar" | "folder" | "sliders-horizontal";
|
|
103
|
-
type
|
|
462
|
+
type Element_12xgc3 = JSX_1kxb3["Element"];
|
|
104
463
|
/**
|
|
105
464
|
* Swap some or all icons for components from another library.
|
|
106
465
|
* Names left out of `icons` keep their default (Lucide) component.
|
|
107
466
|
*/
|
|
108
467
|
declare function IconProvider({ children, icons }: {
|
|
109
|
-
children:
|
|
468
|
+
children: ReactNode3;
|
|
110
469
|
icons?: Partial<Record<IconName, IconComponent>>;
|
|
111
|
-
}):
|
|
470
|
+
}): Element_12xgc3;
|
|
112
471
|
import { ClassProp as ClassProp_wz9o0r2 } from "class-variance-authority/types";
|
|
113
|
-
import { ForwardRefExoticComponent as
|
|
114
|
-
import { RefAttributes as
|
|
472
|
+
import { ForwardRefExoticComponent as ForwardRefExoticComponent_tcubfn4 } from "react";
|
|
473
|
+
import { RefAttributes as RefAttributes_miuf564 } from "react";
|
|
115
474
|
declare const buttonVariants: (props?: ({
|
|
116
475
|
variant?: "primary" | "secondary" | "tertiary" | "ghost" | null | undefined;
|
|
117
476
|
size?: "default" | "compact" | "icon" | "icon-compact" | null | undefined;
|
|
@@ -141,7 +500,7 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, Omit<Vari
|
|
|
141
500
|
/** Disables the button. Defaults to `false`. */
|
|
142
501
|
disabled?: boolean;
|
|
143
502
|
/** The label. With `size="icon"` / `"icon-compact"`, the icon itself (give the button an `aria-label`). */
|
|
144
|
-
children?:
|
|
503
|
+
children?: ReactNode4;
|
|
145
504
|
}
|
|
146
505
|
/**
|
|
147
506
|
* Versatile button with variants, sizes, loading state, and icon support.
|
|
@@ -157,103 +516,12 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, Omit<Vari
|
|
|
157
516
|
*
|
|
158
517
|
* @example {@include ./examples.mdx}
|
|
159
518
|
*/
|
|
160
|
-
declare const Button2:
|
|
161
|
-
import { ForwardRefExoticComponent, HTMLAttributes as
|
|
162
|
-
|
|
163
|
-
interface SizeClasses {
|
|
164
|
-
/** The variant these classes belong to — handy for conditionals. */
|
|
165
|
-
variant: SizeVariant;
|
|
166
|
-
/** Bounded control height — buttons, inputs, select triggers, subtle tabs —
|
|
167
|
-
* AND list/menu rows (select options, dropdown, checkbox and radio rows).
|
|
168
|
-
* One token by design: a popup row lines up with the trigger that opened
|
|
169
|
-
* it because they share this height. */
|
|
170
|
-
control: string;
|
|
171
|
-
/** `control` as a number, for consumers that need raw pixels. */
|
|
172
|
-
controlHeight: number;
|
|
173
|
-
/** Tab trigger height inside a padded segmented list. Sized so
|
|
174
|
-
* `segmentPad` + `segmentItem` adds back up to the control height —
|
|
175
|
-
* the segmented control's outer box stays on the same ladder. */
|
|
176
|
-
segmentItem: string;
|
|
177
|
-
/** Padding of the segmented list around its tabs. */
|
|
178
|
-
segmentPad: string;
|
|
179
|
-
/** Body text inside controls. */
|
|
180
|
-
text: string;
|
|
181
|
-
/** Horizontal padding of bounded controls (select trigger, inputs). */
|
|
182
|
-
px: string;
|
|
183
|
-
/** Horizontal padding of list/menu rows, which sit inside a padded popup
|
|
184
|
-
* or group and need less inset than a bounded control. */
|
|
185
|
-
itemPx: string;
|
|
186
|
-
/** Gap between an icon / control glyph and its label, and between
|
|
187
|
-
* neighbouring controls in a row (toolbars, filter bars, button
|
|
188
|
-
* clusters). Density is spacing as much as control height, so the
|
|
189
|
-
* compact step halves it. */
|
|
190
|
-
gap: string;
|
|
191
|
-
/** Glyph size in px: leading/trailing icons inside controls, and the
|
|
192
|
-
* checkbox square / radio circle. */
|
|
193
|
-
icon: number;
|
|
194
|
-
}
|
|
195
|
-
declare const sizeMap: Record<SizeVariant, SizeClasses>;
|
|
196
|
-
/** One role of the type scale: px per ladder step. */
|
|
197
|
-
interface TypeScaleStep {
|
|
198
|
-
default: number;
|
|
199
|
-
compact: number;
|
|
200
|
-
}
|
|
201
|
-
/**
|
|
202
|
-
* Role-based type scale, per ladder step (px values).
|
|
203
|
-
*
|
|
204
|
-
* The default column is the system as shipped; the compact column steps each
|
|
205
|
-
* role down one notch so dense regions read as a smaller sibling of the same
|
|
206
|
-
* hierarchy, not a squeezed copy. `body`, `caption`, and `subtitle` are what
|
|
207
|
-
* the sized components already render through `SizeClasses.text` and their
|
|
208
|
-
* compact conditionals; `display` and `title` are the page-level roles
|
|
209
|
-
* for consumers composing their own screens.
|
|
210
|
-
*/
|
|
211
|
-
declare const typeScale: {
|
|
212
|
-
/** Page titles. */
|
|
213
|
-
readonly display: {
|
|
214
|
-
readonly default: 28;
|
|
215
|
-
readonly compact: 24;
|
|
216
|
-
};
|
|
217
|
-
/** Section headings, dialog titles. */
|
|
218
|
-
readonly title: {
|
|
219
|
-
readonly default: 16;
|
|
220
|
-
readonly compact: 15;
|
|
221
|
-
};
|
|
222
|
-
/** Card titles, chat bubbles, emphasized rows. */
|
|
223
|
-
readonly subtitle: {
|
|
224
|
-
readonly default: 14;
|
|
225
|
-
readonly compact: 13;
|
|
226
|
-
};
|
|
227
|
-
/** Control labels and body copy — `SizeClasses.text`. */
|
|
228
|
-
readonly body: {
|
|
229
|
-
readonly default: 13;
|
|
230
|
-
readonly compact: 12;
|
|
231
|
-
};
|
|
232
|
-
/** Secondary text: descriptions, meta rows, errors, eyebrows and group
|
|
233
|
-
* labels (the former overline role — an uppercase or muted caption). */
|
|
234
|
-
readonly caption: {
|
|
235
|
-
readonly default: 12;
|
|
236
|
-
readonly compact: 11;
|
|
237
|
-
};
|
|
238
|
-
};
|
|
239
|
-
type TypeScaleRole = keyof typeof typeScale;
|
|
240
|
-
/** The type scale resolved for the active ladder step (px per role):
|
|
241
|
-
* explicit override > surrounding SizeProvider > "default". */
|
|
242
|
-
declare function useTypeScale(override?: SizeVariant | null): Record<TypeScaleRole, number>;
|
|
243
|
-
interface SizeContextValue {
|
|
244
|
-
size: SizeVariant;
|
|
245
|
-
setSize: (size: SizeVariant) => void;
|
|
246
|
-
classes: SizeClasses;
|
|
247
|
-
}
|
|
248
|
-
/** Resolve the active size variant: explicit prop > provider > "default". */
|
|
249
|
-
declare function useSizeVariant(override?: SizeVariant | null): SizeVariant;
|
|
250
|
-
/** Resolve size classes: explicit prop > provider > "default". */
|
|
251
|
-
declare function useSize(override?: SizeVariant | null): SizeClasses;
|
|
252
|
-
declare function useSizeContext(): SizeContextValue;
|
|
253
|
-
import { JSX as JSX_1kxb3 } from "react";
|
|
519
|
+
declare const Button2: ForwardRefExoticComponent_tcubfn4<ButtonProps & RefAttributes_miuf564<HTMLButtonElement>>;
|
|
520
|
+
import { ForwardRefExoticComponent as ForwardRefExoticComponent2, HTMLAttributes as HTMLAttributes5, ReactNode as ReactNode5, RefAttributes as RefAttributes2 } from "react";
|
|
521
|
+
import { JSX as JSX_1kxb4 } from "react";
|
|
254
522
|
type CardOrientation = "card" | "inline";
|
|
255
523
|
type CardBorder = "none" | "outlined";
|
|
256
|
-
interface CardGroupProps extends Omit<
|
|
524
|
+
interface CardGroupProps extends Omit<HTMLAttributes5<HTMLDivElement>, "onDrag"> {
|
|
257
525
|
/** How each card lays its own content out.
|
|
258
526
|
* "card" — stacked vertically (media/header on top). "inline" — a
|
|
259
527
|
* horizontal row (leading media, trailing footer), like a Table row.
|
|
@@ -272,10 +540,10 @@ interface CardGroupProps extends Omit<HTMLAttributes2<HTMLDivElement>, "onDrag">
|
|
|
272
540
|
/** Enable the magnetic fluid-hover highlight. @default true */
|
|
273
541
|
fluidHover?: boolean;
|
|
274
542
|
}
|
|
275
|
-
declare const CardGroup:
|
|
276
|
-
interface CardProps extends Omit<
|
|
543
|
+
declare const CardGroup: ForwardRefExoticComponent2<CardGroupProps & RefAttributes2<HTMLDivElement>>;
|
|
544
|
+
interface CardProps extends Omit<HTMLAttributes5<HTMLDivElement>, "onClick"> {
|
|
277
545
|
/** Compositional parts: Card.Image, Card.Media, Card.Header, Card.Content, Card.Footer. */
|
|
278
|
-
children?:
|
|
546
|
+
children?: ReactNode5;
|
|
279
547
|
/** Makes the whole card a clickable target (stretched button); fluid hover previews it. */
|
|
280
548
|
onClick?: () => void;
|
|
281
549
|
/** Makes the whole card a link (stretched anchor). */
|
|
@@ -299,7 +567,7 @@ interface CardProps extends Omit<HTMLAttributes2<HTMLDivElement>, "onClick"> {
|
|
|
299
567
|
/** Injected by Card.Group — do not set by hand. */
|
|
300
568
|
index?: number;
|
|
301
569
|
}
|
|
302
|
-
type CardComponent =
|
|
570
|
+
type CardComponent = ForwardRefExoticComponent2<CardProps & RefAttributes2<HTMLDivElement>> & {
|
|
303
571
|
Group: typeof CardGroup;
|
|
304
572
|
Header: typeof CardHeader;
|
|
305
573
|
Title: typeof CardTitle;
|
|
@@ -339,12 +607,12 @@ type CardComponent = ForwardRefExoticComponent<CardProps & RefAttributes<HTMLDiv
|
|
|
339
607
|
* @example {@include ./examples.mdx}
|
|
340
608
|
*/
|
|
341
609
|
declare const Card: CardComponent;
|
|
342
|
-
declare const CardHeader:
|
|
343
|
-
declare const CardTitle:
|
|
344
|
-
declare const CardDescription:
|
|
345
|
-
declare const CardAction:
|
|
346
|
-
declare const CardContent:
|
|
347
|
-
declare const CardFooter:
|
|
610
|
+
declare const CardHeader: ForwardRefExoticComponent2<HTMLAttributes5<HTMLDivElement> & RefAttributes2<HTMLDivElement>>;
|
|
611
|
+
declare const CardTitle: ForwardRefExoticComponent2<HTMLAttributes5<HTMLSpanElement> & RefAttributes2<HTMLSpanElement>>;
|
|
612
|
+
declare const CardDescription: ForwardRefExoticComponent2<HTMLAttributes5<HTMLParagraphElement> & RefAttributes2<HTMLParagraphElement>>;
|
|
613
|
+
declare const CardAction: ForwardRefExoticComponent2<HTMLAttributes5<HTMLDivElement> & RefAttributes2<HTMLDivElement>>;
|
|
614
|
+
declare const CardContent: ForwardRefExoticComponent2<HTMLAttributes5<HTMLDivElement> & RefAttributes2<HTMLDivElement>>;
|
|
615
|
+
declare const CardFooter: ForwardRefExoticComponent2<HTMLAttributes5<HTMLDivElement> & RefAttributes2<HTMLDivElement>>;
|
|
348
616
|
type CardLogo = string | [string, string];
|
|
349
617
|
interface CardMediaProps {
|
|
350
618
|
logo?: CardLogo;
|
|
@@ -353,24 +621,24 @@ interface CardMediaProps {
|
|
|
353
621
|
size?: number;
|
|
354
622
|
className?: string;
|
|
355
623
|
}
|
|
356
|
-
type
|
|
357
|
-
declare function CardMedia({ logo, logoAlt, icon: Icon, size, className }: CardMediaProps):
|
|
624
|
+
type Element_12xgc4 = JSX_1kxb4["Element"];
|
|
625
|
+
declare function CardMedia({ logo, logoAlt, icon: Icon, size, className }: CardMediaProps): Element_12xgc4 | null;
|
|
358
626
|
interface CardImageProps {
|
|
359
627
|
src: string;
|
|
360
628
|
alt?: string;
|
|
361
629
|
className?: string;
|
|
362
630
|
}
|
|
363
|
-
declare function CardImage({ src, alt, className }: CardImageProps):
|
|
364
|
-
declare const CardEyebrow:
|
|
631
|
+
declare function CardImage({ src, alt, className }: CardImageProps): Element_12xgc4;
|
|
632
|
+
declare const CardEyebrow: ForwardRefExoticComponent2<HTMLAttributes5<HTMLSpanElement> & RefAttributes2<HTMLSpanElement>>;
|
|
365
633
|
interface CardFeatureProps {
|
|
366
634
|
icon?: IconComponent;
|
|
367
635
|
title: string;
|
|
368
636
|
description?: string;
|
|
369
637
|
}
|
|
370
|
-
declare function CardFeature({ icon: Icon, title, description }: CardFeatureProps):
|
|
638
|
+
declare function CardFeature({ icon: Icon, title, description }: CardFeatureProps): Element_12xgc4;
|
|
371
639
|
type CardButtonVariant = "primary" | "secondary" | "ghost" | "link";
|
|
372
640
|
interface CardButtonProps {
|
|
373
|
-
children: React.
|
|
641
|
+
children: React.ReactNode5;
|
|
374
642
|
onClick?: () => void;
|
|
375
643
|
href?: string;
|
|
376
644
|
variant?: CardButtonVariant;
|
|
@@ -380,11 +648,53 @@ interface CardButtonProps {
|
|
|
380
648
|
external?: boolean;
|
|
381
649
|
disabled?: boolean;
|
|
382
650
|
}
|
|
383
|
-
declare function CardButton({ children, onClick, href, variant, icon: Icon, iconPosition, external, disabled }: CardButtonProps):
|
|
384
|
-
import {
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
651
|
+
declare function CardButton({ children, onClick, href, variant, icon: Icon, iconPosition, external, disabled }: CardButtonProps): Element_12xgc4;
|
|
652
|
+
import { HTMLAttributes as HTMLAttributes6 } from "react";
|
|
653
|
+
import { ForwardRefExoticComponent as ForwardRefExoticComponent_tcubfn5 } from "react";
|
|
654
|
+
import { RefAttributes as RefAttributes_miuf565 } from "react";
|
|
655
|
+
type CopyVariant = "icon" | "button";
|
|
656
|
+
type CopyAlign = "right" | "left";
|
|
657
|
+
interface CopyProps extends Omit<HTMLAttributes6<HTMLDivElement>, "children"> {
|
|
658
|
+
/** The text value to display and copy to clipboard. */
|
|
659
|
+
value: string;
|
|
660
|
+
/** Optional label displayed above the input. */
|
|
661
|
+
label?: string;
|
|
662
|
+
/** Callback fired after the value is successfully copied. */
|
|
663
|
+
onCopy?: () => void;
|
|
664
|
+
/** Disables the input and copy button. Defaults to `false`. */
|
|
665
|
+
disabled?: boolean;
|
|
666
|
+
/** Icon-only with tooltip, or button with visible label. Defaults to `"icon"`. */
|
|
667
|
+
variant?: CopyVariant;
|
|
668
|
+
/** Position of the copy action relative to the value. Defaults to `"right"`. */
|
|
669
|
+
align?: CopyAlign;
|
|
670
|
+
/** Pins the field to one step of the size ladder (default 36px, compact 28px — see Sizes). Omitted, it follows the surrounding SizeProvider. */
|
|
671
|
+
size?: SizeVariant;
|
|
672
|
+
/** Extra classes for the wrapper around the label and the field. */
|
|
673
|
+
className?: string;
|
|
674
|
+
}
|
|
675
|
+
/**
|
|
676
|
+
* Read-only input with a copy-to-clipboard button and animated check
|
|
677
|
+
* feedback.
|
|
678
|
+
*
|
|
679
|
+
* The whole row is the button: click anywhere on it and the value goes to
|
|
680
|
+
* the clipboard, the copy glyph's two sheets melt into a tinted disc (the
|
|
681
|
+
* goo of Morph) behind a check that draws itself, and the tooltip flips to
|
|
682
|
+
* "Copied" for 2 seconds; then the disc splits back into the glyph. The value is monospaced and
|
|
683
|
+
* highlights on hover so it reads as one selectable token rather than a
|
|
684
|
+
* text field, and the async Clipboard API falls back to an off-screen
|
|
685
|
+
* textarea + `execCommand` where it is unavailable (insecure context,
|
|
686
|
+
* permissions policy) — a failure animates a ✕ and says so. `variant`
|
|
687
|
+
* switches between the icon-only affordance (with a tooltip) and a labelled
|
|
688
|
+
* Copy button, `align` moves that action to the leading edge, and the field
|
|
689
|
+
* follows the surrounding SizeProvider unless `size` pins it.
|
|
690
|
+
*
|
|
691
|
+
* @example {@include ./examples.mdx}
|
|
692
|
+
*/
|
|
693
|
+
declare const Copy: ForwardRefExoticComponent_tcubfn5<CopyProps & RefAttributes_miuf565<HTMLDivElement>>;
|
|
694
|
+
import { ForwardRefExoticComponent as ForwardRefExoticComponent3, HTMLAttributes as HTMLAttributes7, ReactNode as ReactNode6, RefAttributes as RefAttributes3 } from "react";
|
|
695
|
+
interface CheckboxGroupProps extends HTMLAttributes7<HTMLDivElement> {
|
|
696
|
+
/** `Checkbox` rows. */
|
|
697
|
+
children: ReactNode6;
|
|
388
698
|
/** Set of checked item indices; drives the merged background across contiguous picks. Controlled — pair it with `onCheckedIndicesChange` (or per-item `onToggle`). */
|
|
389
699
|
checkedIndices?: Set<number>;
|
|
390
700
|
/** Checked indices on first render when uncontrolled (a Set or an array). Defaults to none. */
|
|
@@ -394,49 +704,61 @@ interface CheckboxGroupProps extends HTMLAttributes3<HTMLDivElement> {
|
|
|
394
704
|
/** Pins the group's rows to one step of the size ladder (default 36px, compact 28px). Defaults to the surrounding SizeProvider. */
|
|
395
705
|
size?: SizeVariant;
|
|
396
706
|
}
|
|
397
|
-
|
|
398
|
-
|
|
707
|
+
declare const CheckboxGroup: ForwardRefExoticComponent3<CheckboxGroupProps & RefAttributes3<HTMLDivElement>>;
|
|
708
|
+
interface CheckboxProps extends HTMLAttributes7<HTMLDivElement> {
|
|
709
|
+
/** Text label for the checkbox. */
|
|
710
|
+
label: string;
|
|
711
|
+
/** Whether the checkbox is checked (controlled). Defaults to the group's checked set inside a `Checkbox.Group`, else its own state. */
|
|
712
|
+
checked?: boolean;
|
|
713
|
+
/** Whether a standalone checkbox starts checked (uncontrolled). Defaults to `false`. */
|
|
714
|
+
defaultChecked?: boolean;
|
|
715
|
+
/** Called with the new state whenever the checkbox is toggled, in a group or not. */
|
|
716
|
+
onCheckedChange?: (checked: boolean) => void;
|
|
717
|
+
/** Called when the checkbox is toggled (a group's `onCheckedIndicesChange` fires too). */
|
|
718
|
+
onToggle?: () => void;
|
|
719
|
+
/** Position within a `Checkbox.Group`: the row's key in `checkedIndices`. Defaults to its order among the group's rows. */
|
|
720
|
+
index?: number;
|
|
721
|
+
/** Pins the checkbox to one step of the size ladder (see Sizes). Defaults to the surrounding SizeProvider (a group's `size`). */
|
|
722
|
+
size?: SizeVariant;
|
|
723
|
+
}
|
|
724
|
+
type CheckboxComponent = ForwardRefExoticComponent3<CheckboxProps & RefAttributes3<HTMLDivElement>> & {
|
|
725
|
+
Group: typeof CheckboxGroup;
|
|
399
726
|
};
|
|
400
727
|
/**
|
|
401
|
-
* Checkbox
|
|
402
|
-
*
|
|
403
|
-
*
|
|
404
|
-
*
|
|
405
|
-
*
|
|
406
|
-
*
|
|
407
|
-
*
|
|
408
|
-
*
|
|
409
|
-
*
|
|
410
|
-
*
|
|
411
|
-
*
|
|
412
|
-
*
|
|
728
|
+
* Checkbox with a self-drawing check, alone or in a group with merged
|
|
729
|
+
* backgrounds for contiguous picks.
|
|
730
|
+
*
|
|
731
|
+
* The whole row is the hit target; Space or Enter toggles it, the check mark
|
|
732
|
+
* draws itself in, and the checked label animates to semibold without
|
|
733
|
+
* shifting its width. A standalone checkbox keeps its own state from
|
|
734
|
+
* `defaultChecked`, or is controlled with `checked`; `onCheckedChange`
|
|
735
|
+
* reports every toggle.
|
|
736
|
+
*
|
|
737
|
+
* In a `Checkbox.Group`, contiguous checked rows share one background: a
|
|
738
|
+
* checked row's background grows out of its center and melts into its
|
|
739
|
+
* neighbours, an unchecked one pinches off and shrinks away (the liquid
|
|
740
|
+
* indicators in Morph). A fluid hover highlight melts from row to row, and
|
|
741
|
+
* Arrow Up/Down, Home and End move focus. The group numbers its rows in
|
|
742
|
+
* order, so they need no `index`; pass one to key a row explicitly.
|
|
413
743
|
*
|
|
414
744
|
* Statics:
|
|
415
|
-
* - `
|
|
416
|
-
*
|
|
745
|
+
* - `Checkbox.Group` — the list: uncontrolled with `defaultCheckedIndices`
|
|
746
|
+
* (a Set or an array of row indices), or controlled with `checkedIndices`
|
|
747
|
+
* plus `onCheckedIndicesChange`; `size` pins every row to one step of the
|
|
748
|
+
* size ladder. A row's own `checked` / `onToggle` still override the group
|
|
749
|
+
* for that row.
|
|
417
750
|
*
|
|
418
751
|
* @example {@include ./examples.mdx}
|
|
419
752
|
*/
|
|
420
|
-
declare const
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
label: string;
|
|
424
|
-
/** Position index within the group. */
|
|
425
|
-
index: number;
|
|
426
|
-
/** Whether this item is checked. Defaults to the group's checked set. */
|
|
427
|
-
checked?: boolean;
|
|
428
|
-
/** Called when this item is toggled (the group's `onCheckedIndicesChange` fires too). */
|
|
429
|
-
onToggle?: () => void;
|
|
430
|
-
}
|
|
431
|
-
declare const CheckboxItem: ForwardRefExoticComponent2<CheckboxItemProps & RefAttributes2<HTMLDivElement>>;
|
|
432
|
-
import { CSSProperties, ForwardRefExoticComponent as ForwardRefExoticComponent3, HTMLAttributes as HTMLAttributes4, ReactNode as ReactNode5, RefAttributes as RefAttributes3, RefObject as RefObject2 } from "react";
|
|
433
|
-
import { JSX as JSX_1kxb4 } from "react";
|
|
753
|
+
declare const Checkbox: CheckboxComponent;
|
|
754
|
+
import { CSSProperties, ForwardRefExoticComponent as ForwardRefExoticComponent4, HTMLAttributes as HTMLAttributes8, ReactNode as ReactNode7, RefAttributes as RefAttributes4, RefObject as RefObject2 } from "react";
|
|
755
|
+
import { JSX as JSX_1kxb5 } from "react";
|
|
434
756
|
type ColorFormat = "hex" | "rgb" | "hsl" | "oklch";
|
|
435
|
-
type
|
|
757
|
+
type Element_12xgc5 = JSX_1kxb5["Element"];
|
|
436
758
|
declare function ColorPickerPortalContainer({ value, children }: {
|
|
437
759
|
value: HTMLElement | null;
|
|
438
|
-
children:
|
|
439
|
-
}):
|
|
760
|
+
children: ReactNode7;
|
|
761
|
+
}): Element_12xgc5;
|
|
440
762
|
interface ParsedColor {
|
|
441
763
|
h: number;
|
|
442
764
|
s: number;
|
|
@@ -450,7 +772,7 @@ interface ParsedColor {
|
|
|
450
772
|
hsl: string;
|
|
451
773
|
oklch: string;
|
|
452
774
|
}
|
|
453
|
-
interface ColorPickerProps extends Omit<
|
|
775
|
+
interface ColorPickerProps extends Omit<HTMLAttributes8<HTMLDivElement>, "onChange" | "defaultValue"> {
|
|
454
776
|
/** Controlled color value, in any of the supported formats. Omit it to let the picker keep its own state, seeded from `defaultValue`. */
|
|
455
777
|
value?: string;
|
|
456
778
|
/** Initial color when uncontrolled — any CSS color string, named colors included. Defaults to `"#6B97FF"`. */
|
|
@@ -505,7 +827,7 @@ interface ColorPickerPopoverProps extends ColorPickerProps {
|
|
|
505
827
|
/** Spring tier of a plain morph, slide or fade; goo runs on its own `spring.goo`. Defaults to `'slow'`. */
|
|
506
828
|
tier?: "moderate" | "slow";
|
|
507
829
|
}
|
|
508
|
-
interface ColorSwatchProps extends Omit<
|
|
830
|
+
interface ColorSwatchProps extends Omit<HTMLAttributes8<HTMLButtonElement>, "color"> {
|
|
509
831
|
/** The swatch color — any CSS color string. */
|
|
510
832
|
color: string;
|
|
511
833
|
/** Edge length in pixels. Defaults to `28`. */
|
|
@@ -526,9 +848,9 @@ interface ColorTileProps {
|
|
|
526
848
|
className?: string;
|
|
527
849
|
style?: CSSProperties;
|
|
528
850
|
}
|
|
529
|
-
declare function ColorTile({ color, size, className, style }: ColorTileProps):
|
|
530
|
-
declare const ColorSwatch:
|
|
531
|
-
type ColorPickerComponent =
|
|
851
|
+
declare function ColorTile({ color, size, className, style }: ColorTileProps): Element_12xgc5;
|
|
852
|
+
declare const ColorSwatch: ForwardRefExoticComponent4<ColorSwatchProps & RefAttributes4<HTMLButtonElement>>;
|
|
853
|
+
type ColorPickerComponent = ForwardRefExoticComponent4<ColorPickerProps & RefAttributes4<HTMLDivElement>> & {
|
|
532
854
|
/** `ColorPickerPopover` — the same panel behind a trigger button. */
|
|
533
855
|
Popover: typeof ColorPickerPopover;
|
|
534
856
|
};
|
|
@@ -563,9 +885,8 @@ type ColorPickerComponent = ForwardRefExoticComponent3<ColorPickerProps & RefAtt
|
|
|
563
885
|
* @example {@include ./examples.mdx}
|
|
564
886
|
*/
|
|
565
887
|
declare const ColorPicker: ColorPickerComponent;
|
|
566
|
-
declare const ColorPickerPopover:
|
|
567
|
-
import {
|
|
568
|
-
import { HTMLAttributes as HTMLAttributes5, InputHTMLAttributes as InputHTMLAttributes2, ReactNode as ReactNode6, RefObject as RefObject3 } from "react";
|
|
888
|
+
declare const ColorPickerPopover: ForwardRefExoticComponent4<ColorPickerPopoverProps & RefAttributes4<HTMLDivElement>>;
|
|
889
|
+
import { HTMLAttributes as HTMLAttributes9, InputHTMLAttributes as InputHTMLAttributes2, ReactNode as ReactNode8, RefObject as RefObject4 } from "react";
|
|
569
890
|
import { ClassProp as ClassProp_wz9o0r3 } from "class-variance-authority/types";
|
|
570
891
|
/**
|
|
571
892
|
* The ringed box of a text field. It steps from rest to a muted fill when lit
|
|
@@ -578,9 +899,11 @@ import { ClassProp as ClassProp_wz9o0r3 } from "class-variance-authority/types";
|
|
|
578
899
|
declare const fieldVariants: (props?: ({
|
|
579
900
|
variant?: "borderless" | "bordered" | null | undefined;
|
|
580
901
|
} & ClassProp_wz9o0r3) | undefined) => string;
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
import {
|
|
902
|
+
/** Framed at rest (`bordered`), or invisible until hovered or focused (`borderless`). */
|
|
903
|
+
type FieldVariant = "bordered" | "borderless";
|
|
904
|
+
import { JSX as JSX_1kxb6 } from "react";
|
|
905
|
+
import { ForwardRefExoticComponent as ForwardRefExoticComponent_tcubfn6 } from "react";
|
|
906
|
+
import { RefAttributes as RefAttributes_miuf566 } from "react";
|
|
584
907
|
/** An object item: `value` and `label`, plus whatever the rows need. */
|
|
585
908
|
interface ComboboxItemObject {
|
|
586
909
|
value: string;
|
|
@@ -591,7 +914,7 @@ type ComboboxItemData = string | ComboboxItemObject;
|
|
|
591
914
|
type ComboboxValue<Multiple extends boolean> = Multiple extends true ? string[] : string;
|
|
592
915
|
interface ComboboxProps {
|
|
593
916
|
/** `Combobox.Input` or `Combobox.Chips`, plus `Combobox.Content`. */
|
|
594
|
-
children:
|
|
917
|
+
children: ReactNode8;
|
|
595
918
|
/** The options. A string is its own value and label; an object carries `value`, `label`, and whatever your rows need. */
|
|
596
919
|
items: readonly ComboboxItemData[];
|
|
597
920
|
/** Any number of picks. Values become `string[]`; use `Combobox.Chips` for the field. Defaults to `false`. */
|
|
@@ -607,7 +930,7 @@ interface ComboboxProps {
|
|
|
607
930
|
/** Adds a last row that creates the trimmed query whenever no label matches it exactly. Add the item to `items` and return it to select it. */
|
|
608
931
|
onCreate?: (query: string) => ComboboxItemData | void;
|
|
609
932
|
/** The create row's label. Defaults to ``(query) => `Create “${query}”` ``. */
|
|
610
|
-
createLabel?: (query: string) =>
|
|
933
|
+
createLabel?: (query: string) => ReactNode8;
|
|
611
934
|
/** Local addition: offer the create row with no callback — the component keeps the items it makes, so nothing outside has to hold the list. Defaults to `false`. */
|
|
612
935
|
creatable?: boolean;
|
|
613
936
|
/** Multiple only. Picked items leave the list, so it reads as what is left to add. Deselect from the chips. Defaults to `false`. */
|
|
@@ -621,7 +944,7 @@ interface ComboboxProps {
|
|
|
621
944
|
/** Pins field and popup to one step of the size ladder (default 36px, compact 28px — see the Sizes primitive). Omitted, both follow the surrounding SizeProvider. */
|
|
622
945
|
size?: SizeVariant;
|
|
623
946
|
}
|
|
624
|
-
type
|
|
947
|
+
type Element_12xgc6 = JSX_1kxb6["Element"];
|
|
625
948
|
/**
|
|
626
949
|
* Type to filter a list. 1 pick, or chips.
|
|
627
950
|
*
|
|
@@ -631,7 +954,7 @@ type Element_12xgc5 = JSX_1kxb5["Element"];
|
|
|
631
954
|
* (the input keeps focus while the arrows move a highlight through the rows),
|
|
632
955
|
* the positioning and the hidden form input stay with Base UI. On top of that
|
|
633
956
|
* sit the fluid-hover highlight, the merged selection background of
|
|
634
|
-
* `
|
|
957
|
+
* `Checkbox.Group`, and a list that oozes out of the field and back through the
|
|
635
958
|
* shared morph (see Morph), goo by default. `multiple` turns the picks into a
|
|
636
959
|
* `string[]` and pairs with `Combobox.Chips`: one chip per pick, Backspace in
|
|
637
960
|
* an empty field drops the last one. Uncontrolled with `defaultValue`, or
|
|
@@ -648,10 +971,10 @@ type Element_12xgc5 = JSX_1kxb5["Element"];
|
|
|
648
971
|
*
|
|
649
972
|
* @example {@include ./examples.mdx}
|
|
650
973
|
*/
|
|
651
|
-
declare function Combobox({ children, items, multiple, value, defaultValue, onValueChange, filter, onCreate, createLabel, creatable, hideSelected, disabled, name, required, size }: ComboboxProps):
|
|
652
|
-
interface ComboboxFieldProps extends Omit<InputHTMLAttributes2<HTMLInputElement>, "size" | "value" | "defaultValue" | "onChange"
|
|
974
|
+
declare function Combobox({ children, items, multiple, value, defaultValue, onValueChange, filter, onCreate, createLabel, creatable, hideSelected, disabled, name, required, size }: ComboboxProps): Element_12xgc6;
|
|
975
|
+
interface ComboboxFieldProps extends Omit<InputHTMLAttributes2<HTMLInputElement>, "size" | "value" | "defaultValue" | "onChange"> {
|
|
653
976
|
/** Framed at rest, or invisible until hovered or focused. Defaults to `"bordered"`. */
|
|
654
|
-
variant?:
|
|
977
|
+
variant?: FieldVariant;
|
|
655
978
|
/** Leading icon inside the field. */
|
|
656
979
|
icon?: IconComponent;
|
|
657
980
|
/** Shown while nothing is typed or selected. Defaults to `"Search…"`. */
|
|
@@ -666,14 +989,14 @@ interface ComboboxFieldProps extends Omit<InputHTMLAttributes2<HTMLInputElement>
|
|
|
666
989
|
size?: SizeVariant;
|
|
667
990
|
}
|
|
668
991
|
type ComboboxInputProps = ComboboxFieldProps;
|
|
669
|
-
declare const ComboboxInput:
|
|
992
|
+
declare const ComboboxInput: ForwardRefExoticComponent_tcubfn6<ComboboxFieldProps & RefAttributes_miuf566<HTMLInputElement>>;
|
|
670
993
|
type ComboboxChipsProps = ComboboxFieldProps;
|
|
671
|
-
declare const ComboboxChips:
|
|
994
|
+
declare const ComboboxChips: ForwardRefExoticComponent_tcubfn6<ComboboxFieldProps & RefAttributes_miuf566<HTMLInputElement>>;
|
|
672
995
|
interface ComboboxContentProps {
|
|
673
996
|
/** Classes for the popup surface — merged after the radius and max-height. */
|
|
674
997
|
className?: string;
|
|
675
998
|
/** `Combobox.Empty` and `Combobox.List`. */
|
|
676
|
-
children:
|
|
999
|
+
children: ReactNode8;
|
|
677
1000
|
/** Side of the field the popup prefers. Defaults to `"bottom"`. */
|
|
678
1001
|
side?: "top" | "bottom" | "left" | "right";
|
|
679
1002
|
/** Alignment against the field. Defaults to `"start"`. */
|
|
@@ -681,7 +1004,7 @@ interface ComboboxContentProps {
|
|
|
681
1004
|
/** Gap to the field, in px. Ignored when the list opens in place over the field (`effect="morph"` with `hideSource`). Defaults to `6`. */
|
|
682
1005
|
sideOffset?: number;
|
|
683
1006
|
/** Where the list grows from (see Morph): the field, the press point, its own center, a viewport edge, or a ref to any element. Defaults to `'trigger'` (the field). */
|
|
684
|
-
from?: "trigger" | "pointer" | "center" | "top" | "right" | "bottom" | "left" |
|
|
1007
|
+
from?: "trigger" | "pointer" | "center" | "top" | "right" | "bottom" | "left" | RefObject4<HTMLElement | null>;
|
|
685
1008
|
/** How it grows (see Morph): with the liquid goo neck, a plain morph, a slide or a fade. Defaults to `'goo'`. */
|
|
686
1009
|
effect?: "goo" | "morph" | "slide" | "fade";
|
|
687
1010
|
/** Hide the field while open, so it reads as turning into the list. Defaults to `false`. */
|
|
@@ -689,15 +1012,15 @@ interface ComboboxContentProps {
|
|
|
689
1012
|
/** Spring tier of a plain morph, slide or fade; goo runs on its own `spring.goo`. Defaults to `'moderate'`. */
|
|
690
1013
|
tier?: "moderate" | "slow";
|
|
691
1014
|
}
|
|
692
|
-
declare const ComboboxContent:
|
|
1015
|
+
declare const ComboboxContent: ForwardRefExoticComponent_tcubfn6<ComboboxContentProps & RefAttributes_miuf566<HTMLDivElement>>;
|
|
693
1016
|
interface ComboboxListProps {
|
|
694
1017
|
/** Classes for the rows' container. */
|
|
695
1018
|
className?: string;
|
|
696
1019
|
/** Render one row per matching item: `(item, index) => <Combobox.Item …/>`. Rows get their index from the list. */
|
|
697
|
-
children: (item: ComboboxItemData, index: number) =>
|
|
1020
|
+
children: (item: ComboboxItemData, index: number) => ReactNode8;
|
|
698
1021
|
}
|
|
699
|
-
declare const ComboboxList:
|
|
700
|
-
interface ComboboxItemProps extends
|
|
1022
|
+
declare const ComboboxList: ForwardRefExoticComponent_tcubfn6<ComboboxListProps & RefAttributes_miuf566<HTMLDivElement>>;
|
|
1023
|
+
interface ComboboxItemProps extends HTMLAttributes9<HTMLDivElement> {
|
|
701
1024
|
/** Leading icon in the row. */
|
|
702
1025
|
icon?: IconComponent;
|
|
703
1026
|
/** The item's value — a string item itself, or an object item's `value`. */
|
|
@@ -705,22 +1028,22 @@ interface ComboboxItemProps extends HTMLAttributes5<HTMLDivElement> {
|
|
|
705
1028
|
/** Disables the row. Defaults to `false`. */
|
|
706
1029
|
disabled?: boolean;
|
|
707
1030
|
/** The row label. */
|
|
708
|
-
children?:
|
|
1031
|
+
children?: ReactNode8;
|
|
709
1032
|
}
|
|
710
|
-
declare const ComboboxItem:
|
|
711
|
-
interface ComboboxEmptyProps extends
|
|
1033
|
+
declare const ComboboxItem: ForwardRefExoticComponent_tcubfn6<ComboboxItemProps & RefAttributes_miuf566<HTMLDivElement>>;
|
|
1034
|
+
interface ComboboxEmptyProps extends HTMLAttributes9<HTMLDivElement> {
|
|
712
1035
|
/** Shown instead of the children when `hideSelected` has emptied the
|
|
713
1036
|
* list with nothing typed: every item is a chip already. */
|
|
714
|
-
allSelected?:
|
|
1037
|
+
allSelected?: ReactNode8;
|
|
715
1038
|
/** Shown when nothing matches the query. */
|
|
716
|
-
children?:
|
|
1039
|
+
children?: ReactNode8;
|
|
717
1040
|
}
|
|
718
|
-
declare const ComboboxEmpty:
|
|
1041
|
+
declare const ComboboxEmpty: ForwardRefExoticComponent_tcubfn6<ComboboxEmptyProps & RefAttributes_miuf566<HTMLDivElement>>;
|
|
719
1042
|
import { Locale } from "date-fns";
|
|
720
|
-
import { ReactNode as
|
|
1043
|
+
import { ReactNode as ReactNode9 } from "react";
|
|
721
1044
|
import { DayPickerProps } from "react-day-picker";
|
|
722
|
-
import { JSX as
|
|
723
|
-
type
|
|
1045
|
+
import { JSX as JSX_1kxb7 } from "react";
|
|
1046
|
+
type Element_12xgc7 = JSX_1kxb7["Element"];
|
|
724
1047
|
/**
|
|
725
1048
|
* A calendar that scrolls through the months instead of paging, with month
|
|
726
1049
|
* and year columns to jump by.
|
|
@@ -752,18 +1075,18 @@ declare function Calendar({ locale, size, columnsSide, extraColumns, extraColumn
|
|
|
752
1075
|
/** Which side of the days the month and year columns stand on; the month column keeps next to the days. Defaults to `'end'`. */
|
|
753
1076
|
columnsSide?: "start" | "end";
|
|
754
1077
|
/** More columns, given the layout's orientation — the date picker's hours and minutes. */
|
|
755
|
-
extraColumns?: (orientation: "vertical" | "horizontal") =>
|
|
1078
|
+
extraColumns?: (orientation: "vertical" | "horizontal") => ReactNode9;
|
|
756
1079
|
/** Which side of the days the extra columns stand on, outside the month and year columns when they share it. Defaults to `'end'`. */
|
|
757
1080
|
extraColumnsSide?: "start" | "end";
|
|
758
1081
|
/** Classes for the calendar's box. */
|
|
759
1082
|
className?: string;
|
|
760
|
-
}):
|
|
1083
|
+
}): Element_12xgc7;
|
|
761
1084
|
type CalendarProps = Parameters<typeof Calendar>[0];
|
|
762
1085
|
import { Locale as Locale3 } from "date-fns";
|
|
763
|
-
import { RefObject as
|
|
1086
|
+
import { RefObject as RefObject5 } from "react";
|
|
764
1087
|
import { Matcher } from "react-day-picker";
|
|
765
1088
|
type HourCycle = "h11" | "h12" | "h23" | "h24";
|
|
766
|
-
import { JSX as
|
|
1089
|
+
import { JSX as JSX_1kxb8 } from "react";
|
|
767
1090
|
interface DatePickerProps {
|
|
768
1091
|
/** The picked date (and time, with `withTime`); `null` when empty. */
|
|
769
1092
|
value?: Date | null;
|
|
@@ -787,6 +1110,8 @@ interface DatePickerProps {
|
|
|
787
1110
|
startMonth?: Date;
|
|
788
1111
|
/** The last month the calendar reaches. Defaults to 50 years ahead. */
|
|
789
1112
|
endMonth?: Date;
|
|
1113
|
+
/** Framed at rest, or invisible until hovered or focused. Defaults to `"bordered"`. */
|
|
1114
|
+
variant?: FieldVariant;
|
|
790
1115
|
/** Marks the field invalid. Defaults to `false`. */
|
|
791
1116
|
invalid?: boolean;
|
|
792
1117
|
/** Pins the field and its panel to one step of the size ladder. Defaults to the surrounding SizeProvider. */
|
|
@@ -806,7 +1131,7 @@ interface DatePickerProps {
|
|
|
806
1131
|
/** Id of the field, for a `Label`'s `htmlFor`. */
|
|
807
1132
|
id?: string;
|
|
808
1133
|
/** Where the panel grows from (see Morph): the field, the press point, its own center, a viewport edge, or a ref to any element. Defaults to `'trigger'` (the field). */
|
|
809
|
-
from?: "trigger" | "pointer" | "center" | "top" | "right" | "bottom" | "left" |
|
|
1134
|
+
from?: "trigger" | "pointer" | "center" | "top" | "right" | "bottom" | "left" | RefObject5<HTMLElement | null>;
|
|
810
1135
|
/** How the panel grows (see Morph), as Combobox's list does: with the liquid goo neck, a plain morph, a slide or a fade. `'morph'` with `hideSource` opens it in place over the field. Defaults to `'goo'`. */
|
|
811
1136
|
effect?: "goo" | "morph" | "slide" | "fade";
|
|
812
1137
|
/** Hide the field while open, so it reads as turning into the panel. Defaults to `false`. */
|
|
@@ -816,7 +1141,7 @@ interface DatePickerProps {
|
|
|
816
1141
|
/** Classes for the field. */
|
|
817
1142
|
className?: string;
|
|
818
1143
|
}
|
|
819
|
-
type
|
|
1144
|
+
type Element_12xgc8 = JSX_1kxb8["Element"];
|
|
820
1145
|
/**
|
|
821
1146
|
* A date field that opens a scrolling calendar, with an optional time.
|
|
822
1147
|
*
|
|
@@ -838,11 +1163,11 @@ type Element_12xgc7 = JSX_1kxb7["Element"];
|
|
|
838
1163
|
*
|
|
839
1164
|
* @example {@include ./examples.mdx}
|
|
840
1165
|
*/
|
|
841
|
-
declare function DatePicker({ value: valueProp, defaultValue, onValueChange, withTime, hourCycle, minuteStep, locale, placeholder, disabled, startMonth, endMonth, invalid, size, open: openProp, defaultOpen, onOpenChange, dir, columnsSide, timeColumnsSide, id, from, effect, hideSource, tier, className }: DatePickerProps):
|
|
1166
|
+
declare function DatePicker({ value: valueProp, defaultValue, onValueChange, withTime, hourCycle, minuteStep, locale, placeholder, disabled, startMonth, endMonth, variant, invalid, size, open: openProp, defaultOpen, onOpenChange, dir, columnsSide, timeColumnsSide, id, from, effect, hideSource, tier, className }: DatePickerProps): Element_12xgc8;
|
|
842
1167
|
import { Locale as Locale4 } from "date-fns";
|
|
843
|
-
import { RefObject as
|
|
1168
|
+
import { RefObject as RefObject6 } from "react";
|
|
844
1169
|
import { DateRange, Matcher as Matcher2 } from "react-day-picker";
|
|
845
|
-
import { JSX as
|
|
1170
|
+
import { JSX as JSX_1kxb9 } from "react";
|
|
846
1171
|
interface DateRangePickerProps {
|
|
847
1172
|
/** The picked range, react-day-picker's `{ from, to }`; `null` when empty. */
|
|
848
1173
|
value?: DateRange | null;
|
|
@@ -860,6 +1185,8 @@ interface DateRangePickerProps {
|
|
|
860
1185
|
startMonth?: Date;
|
|
861
1186
|
/** The last month the calendar reaches. Defaults to 50 years ahead. */
|
|
862
1187
|
endMonth?: Date;
|
|
1188
|
+
/** Framed at rest, or invisible until hovered or focused. Defaults to `"bordered"`. */
|
|
1189
|
+
variant?: FieldVariant;
|
|
863
1190
|
/** Marks the field invalid. Defaults to `false`. */
|
|
864
1191
|
invalid?: boolean;
|
|
865
1192
|
/** Pins the field and its panel to one step of the size ladder. Defaults to the surrounding SizeProvider. */
|
|
@@ -877,7 +1204,7 @@ interface DateRangePickerProps {
|
|
|
877
1204
|
/** Id of the field, for a `Label`'s `htmlFor`. */
|
|
878
1205
|
id?: string;
|
|
879
1206
|
/** Where the panel grows from (see Morph): the field, the press point, its own center, a viewport edge, or a ref to any element. Defaults to `'trigger'` (the field). */
|
|
880
|
-
from?: "trigger" | "pointer" | "center" | "top" | "right" | "bottom" | "left" |
|
|
1207
|
+
from?: "trigger" | "pointer" | "center" | "top" | "right" | "bottom" | "left" | RefObject6<HTMLElement | null>;
|
|
881
1208
|
/** How the panel grows (see Morph), as Combobox's list does: with the liquid goo neck, a plain morph, a slide or a fade. `'morph'` with `hideSource` opens it in place over the field. Defaults to `'goo'`. */
|
|
882
1209
|
effect?: "goo" | "morph" | "slide" | "fade";
|
|
883
1210
|
/** Hide the field while open, so it reads as turning into the panel. Defaults to `false`. */
|
|
@@ -887,7 +1214,7 @@ interface DateRangePickerProps {
|
|
|
887
1214
|
/** Classes for the field. */
|
|
888
1215
|
className?: string;
|
|
889
1216
|
}
|
|
890
|
-
type
|
|
1217
|
+
type Element_12xgc9 = JSX_1kxb9["Element"];
|
|
891
1218
|
/**
|
|
892
1219
|
* A field for a span of days, picked with two clicks on a scrolling calendar.
|
|
893
1220
|
*
|
|
@@ -900,10 +1227,10 @@ type Element_12xgc8 = JSX_1kxb8["Element"];
|
|
|
900
1227
|
*
|
|
901
1228
|
* @example {@include ./examples.mdx}
|
|
902
1229
|
*/
|
|
903
|
-
declare function DateRangePicker({ value: valueProp, defaultValue, onValueChange, locale, placeholder, disabled, startMonth, endMonth, invalid, size, open: openProp, defaultOpen, onOpenChange, dir, columnsSide, id, from: growFrom, effect, hideSource, tier, className }: DateRangePickerProps):
|
|
1230
|
+
declare function DateRangePicker({ value: valueProp, defaultValue, onValueChange, locale, placeholder, disabled, startMonth, endMonth, variant, invalid, size, open: openProp, defaultOpen, onOpenChange, dir, columnsSide, id, from: growFrom, effect, hideSource, tier, className }: DateRangePickerProps): Element_12xgc9;
|
|
904
1231
|
import { Duration, Locale as Locale5 } from "date-fns";
|
|
905
|
-
import { RefObject as
|
|
906
|
-
import { JSX as
|
|
1232
|
+
import { RefObject as RefObject7 } from "react";
|
|
1233
|
+
import { JSX as JSX_1kxb10 } from "react";
|
|
907
1234
|
interface DurationPickerProps {
|
|
908
1235
|
/** The picked duration, a date-fns `Duration` (`{ hours, minutes }`); `null` when empty. */
|
|
909
1236
|
value?: Duration | null;
|
|
@@ -921,6 +1248,8 @@ interface DurationPickerProps {
|
|
|
921
1248
|
placeholder?: string;
|
|
922
1249
|
/** Disables the field. Defaults to `false`. */
|
|
923
1250
|
disabled?: boolean;
|
|
1251
|
+
/** Framed at rest, or invisible until hovered or focused. Defaults to `"bordered"`. */
|
|
1252
|
+
variant?: FieldVariant;
|
|
924
1253
|
/** Marks the field invalid. Defaults to `false`. */
|
|
925
1254
|
invalid?: boolean;
|
|
926
1255
|
/** Pins the field and its panel to one step of the size ladder. Defaults to the surrounding SizeProvider. */
|
|
@@ -934,7 +1263,7 @@ interface DurationPickerProps {
|
|
|
934
1263
|
/** Id of the field, for a `Label`'s `htmlFor`. */
|
|
935
1264
|
id?: string;
|
|
936
1265
|
/** Where the panel grows from (see Morph): the field, the press point, its own center, a viewport edge, or a ref to any element. Defaults to `'trigger'` (the field). */
|
|
937
|
-
from?: "trigger" | "pointer" | "center" | "top" | "right" | "bottom" | "left" |
|
|
1266
|
+
from?: "trigger" | "pointer" | "center" | "top" | "right" | "bottom" | "left" | RefObject7<HTMLElement | null>;
|
|
938
1267
|
/** How the panel grows (see Morph), as Combobox's list does: with the liquid goo neck, a plain morph, a slide or a fade. `'morph'` with `hideSource` opens it in place over the field. Defaults to `'goo'`. */
|
|
939
1268
|
effect?: "goo" | "morph" | "slide" | "fade";
|
|
940
1269
|
/** Hide the field while open, so it reads as turning into the panel. Defaults to `false`. */
|
|
@@ -944,7 +1273,7 @@ interface DurationPickerProps {
|
|
|
944
1273
|
/** Classes for the field. */
|
|
945
1274
|
className?: string;
|
|
946
1275
|
}
|
|
947
|
-
type
|
|
1276
|
+
type Element_12xgc10 = JSX_1kxb10["Element"];
|
|
948
1277
|
/**
|
|
949
1278
|
* A field for a length of time, in hours and minutes.
|
|
950
1279
|
*
|
|
@@ -955,10 +1284,10 @@ type Element_12xgc9 = JSX_1kxb9["Element"];
|
|
|
955
1284
|
*
|
|
956
1285
|
* @example {@include ./examples.mdx}
|
|
957
1286
|
*/
|
|
958
|
-
declare function DurationPicker({ value: valueProp, defaultValue, onValueChange, maxHours, minuteStep, locale, placeholder, disabled, invalid, size, open: openProp, defaultOpen, onOpenChange, id, from, effect, hideSource, tier, className }: DurationPickerProps):
|
|
1287
|
+
declare function DurationPicker({ value: valueProp, defaultValue, onValueChange, maxHours, minuteStep, locale, placeholder, disabled, variant, invalid, size, open: openProp, defaultOpen, onOpenChange, id, from, effect, hideSource, tier, className }: DurationPickerProps): Element_12xgc10;
|
|
959
1288
|
import { Locale as Locale6 } from "date-fns";
|
|
960
|
-
import { RefObject as
|
|
961
|
-
import { JSX as
|
|
1289
|
+
import { RefObject as RefObject8 } from "react";
|
|
1290
|
+
import { JSX as JSX_1kxb11 } from "react";
|
|
962
1291
|
interface MonthPickerProps {
|
|
963
1292
|
/** The picked month as its first day; `null` when empty. */
|
|
964
1293
|
value?: Date | null;
|
|
@@ -976,6 +1305,8 @@ interface MonthPickerProps {
|
|
|
976
1305
|
endMonth?: Date;
|
|
977
1306
|
/** Disables the field. Defaults to `false`. */
|
|
978
1307
|
disabled?: boolean;
|
|
1308
|
+
/** Framed at rest, or invisible until hovered or focused. Defaults to `"bordered"`. */
|
|
1309
|
+
variant?: FieldVariant;
|
|
979
1310
|
/** Marks the field invalid. Defaults to `false`. */
|
|
980
1311
|
invalid?: boolean;
|
|
981
1312
|
/** Pins the field and its panel to one step of the size ladder. Defaults to the surrounding SizeProvider. */
|
|
@@ -989,7 +1320,7 @@ interface MonthPickerProps {
|
|
|
989
1320
|
/** Id of the field, for a `Label`'s `htmlFor`. */
|
|
990
1321
|
id?: string;
|
|
991
1322
|
/** Where the panel grows from (see Morph): the field, the press point, its own center, a viewport edge, or a ref to any element. Defaults to `'trigger'` (the field). */
|
|
992
|
-
from?: "trigger" | "pointer" | "center" | "top" | "right" | "bottom" | "left" |
|
|
1323
|
+
from?: "trigger" | "pointer" | "center" | "top" | "right" | "bottom" | "left" | RefObject8<HTMLElement | null>;
|
|
993
1324
|
/** How the panel grows (see Morph), as Combobox's list does: with the liquid goo neck, a plain morph, a slide or a fade. `'morph'` with `hideSource` opens it in place over the field. Defaults to `'goo'`. */
|
|
994
1325
|
effect?: "goo" | "morph" | "slide" | "fade";
|
|
995
1326
|
/** Hide the field while open, so it reads as turning into the panel. Defaults to `false`. */
|
|
@@ -999,7 +1330,7 @@ interface MonthPickerProps {
|
|
|
999
1330
|
/** Classes for the field. */
|
|
1000
1331
|
className?: string;
|
|
1001
1332
|
}
|
|
1002
|
-
type
|
|
1333
|
+
type Element_12xgc11 = JSX_1kxb11["Element"];
|
|
1003
1334
|
/**
|
|
1004
1335
|
* A field for a month of a year: a billing period, a card's expiry.
|
|
1005
1336
|
*
|
|
@@ -1010,10 +1341,10 @@ type Element_12xgc10 = JSX_1kxb10["Element"];
|
|
|
1010
1341
|
*
|
|
1011
1342
|
* @example {@include ./examples.mdx}
|
|
1012
1343
|
*/
|
|
1013
|
-
declare function MonthPicker({ value: valueProp, defaultValue, onValueChange, locale, placeholder, startMonth, endMonth, disabled, invalid, size, open: openProp, defaultOpen, onOpenChange, id, from, effect, hideSource, tier, className }: MonthPickerProps):
|
|
1344
|
+
declare function MonthPicker({ value: valueProp, defaultValue, onValueChange, locale, placeholder, startMonth, endMonth, disabled, variant, invalid, size, open: openProp, defaultOpen, onOpenChange, id, from, effect, hideSource, tier, className }: MonthPickerProps): Element_12xgc11;
|
|
1014
1345
|
import { Locale as Locale7 } from "date-fns";
|
|
1015
|
-
import { RefObject as
|
|
1016
|
-
import { JSX as
|
|
1346
|
+
import { RefObject as RefObject9 } from "react";
|
|
1347
|
+
import { JSX as JSX_1kxb12 } from "react";
|
|
1017
1348
|
interface TimePickerProps {
|
|
1018
1349
|
/** The picked time as `"HH:mm"` on a 24-hour clock (an `<input type="time">`'s value); `null` when empty. */
|
|
1019
1350
|
value?: string | null;
|
|
@@ -1031,6 +1362,8 @@ interface TimePickerProps {
|
|
|
1031
1362
|
placeholder?: string;
|
|
1032
1363
|
/** Disables the field. Defaults to `false`. */
|
|
1033
1364
|
disabled?: boolean;
|
|
1365
|
+
/** Framed at rest, or invisible until hovered or focused. Defaults to `"bordered"`. */
|
|
1366
|
+
variant?: FieldVariant;
|
|
1034
1367
|
/** Marks the field invalid. Defaults to `false`. */
|
|
1035
1368
|
invalid?: boolean;
|
|
1036
1369
|
/** Pins the field and its panel to one step of the size ladder. Defaults to the surrounding SizeProvider. */
|
|
@@ -1044,7 +1377,7 @@ interface TimePickerProps {
|
|
|
1044
1377
|
/** Id of the field, for a `Label`'s `htmlFor`. */
|
|
1045
1378
|
id?: string;
|
|
1046
1379
|
/** Where the panel grows from (see Morph): the field, the press point, its own center, a viewport edge, or a ref to any element. Defaults to `'trigger'` (the field). */
|
|
1047
|
-
from?: "trigger" | "pointer" | "center" | "top" | "right" | "bottom" | "left" |
|
|
1380
|
+
from?: "trigger" | "pointer" | "center" | "top" | "right" | "bottom" | "left" | RefObject9<HTMLElement | null>;
|
|
1048
1381
|
/** How the panel grows (see Morph), as Combobox's list does: with the liquid goo neck, a plain morph, a slide or a fade. `'morph'` with `hideSource` opens it in place over the field. Defaults to `'goo'`. */
|
|
1049
1382
|
effect?: "goo" | "morph" | "slide" | "fade";
|
|
1050
1383
|
/** Hide the field while open, so it reads as turning into the panel. Defaults to `false`. */
|
|
@@ -1054,7 +1387,7 @@ interface TimePickerProps {
|
|
|
1054
1387
|
/** Classes for the field. */
|
|
1055
1388
|
className?: string;
|
|
1056
1389
|
}
|
|
1057
|
-
type
|
|
1390
|
+
type Element_12xgc12 = JSX_1kxb12["Element"];
|
|
1058
1391
|
/**
|
|
1059
1392
|
* A time-of-day field with scrolling hour and minute columns.
|
|
1060
1393
|
*
|
|
@@ -1066,8 +1399,8 @@ type Element_12xgc11 = JSX_1kxb11["Element"];
|
|
|
1066
1399
|
*
|
|
1067
1400
|
* @example {@include ./examples.mdx}
|
|
1068
1401
|
*/
|
|
1069
|
-
declare function TimePicker({ value: valueProp, defaultValue, onValueChange, hourCycle, minuteStep, locale, placeholder, disabled, invalid, size, open: openProp, defaultOpen, onOpenChange, id, from, effect, hideSource, tier, className }: TimePickerProps):
|
|
1070
|
-
import { ForwardRefExoticComponent as
|
|
1402
|
+
declare function TimePicker({ value: valueProp, defaultValue, onValueChange, hourCycle, minuteStep, locale, placeholder, disabled, variant, invalid, size, open: openProp, defaultOpen, onOpenChange, id, from, effect, hideSource, tier, className }: TimePickerProps): Element_12xgc12;
|
|
1403
|
+
import { ForwardRefExoticComponent as ForwardRefExoticComponent5, HTMLAttributes as HTMLAttributes10, InputHTMLAttributes as InputHTMLAttributes3, LabelHTMLAttributes, ReactNode as ReactNode10, RefAttributes as RefAttributes5 } from "react";
|
|
1071
1404
|
interface InputProps extends Omit<InputHTMLAttributes3<HTMLInputElement>, "onChange" | "value" | "defaultValue" | "size"> {
|
|
1072
1405
|
/** Placeholder text. */
|
|
1073
1406
|
placeholder?: string;
|
|
@@ -1079,6 +1412,8 @@ interface InputProps extends Omit<InputHTMLAttributes3<HTMLInputElement>, "onCha
|
|
|
1079
1412
|
defaultValue?: string;
|
|
1080
1413
|
/** Called when the input value changes. */
|
|
1081
1414
|
onChange?: (value: string) => void;
|
|
1415
|
+
/** Framed at rest, or invisible until hovered or focused. Defaults to `"borderless"`. */
|
|
1416
|
+
variant?: FieldVariant;
|
|
1082
1417
|
/** Marks the value invalid: the field turns destructive and sets `aria-invalid`. Defaults to `false`. */
|
|
1083
1418
|
invalid?: boolean;
|
|
1084
1419
|
/** Disables the input. Defaults to `false`. */
|
|
@@ -1110,23 +1445,23 @@ interface InputProps extends Omit<InputHTMLAttributes3<HTMLInputElement>, "onCha
|
|
|
1110
1445
|
*
|
|
1111
1446
|
* @example {@include ./examples.mdx}
|
|
1112
1447
|
*/
|
|
1113
|
-
declare const Input2:
|
|
1448
|
+
declare const Input2: ForwardRefExoticComponent5<InputProps & RefAttributes5<HTMLInputElement>>;
|
|
1114
1449
|
interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
|
|
1115
1450
|
/** Label text. */
|
|
1116
|
-
children:
|
|
1451
|
+
children: ReactNode10;
|
|
1117
1452
|
/** Turns the label destructive, matching an invalid Input. Defaults to `false`. */
|
|
1118
1453
|
invalid?: boolean;
|
|
1119
1454
|
/** Pins the label to one step of the size ladder. Defaults to the surrounding SizeProvider. */
|
|
1120
1455
|
size?: SizeVariant;
|
|
1121
1456
|
}
|
|
1122
|
-
declare const Label2:
|
|
1123
|
-
interface InputGroupProps extends
|
|
1457
|
+
declare const Label2: ForwardRefExoticComponent5<LabelProps & RefAttributes5<HTMLLabelElement>>;
|
|
1458
|
+
interface InputGroupProps extends HTMLAttributes10<HTMLDivElement> {
|
|
1124
1459
|
/** One or more InputGroup.Field children. */
|
|
1125
|
-
children:
|
|
1460
|
+
children: ReactNode10;
|
|
1126
1461
|
/** Pins the group's fields to one step of the size ladder (default 36px, compact 28px). Defaults to the surrounding SizeProvider. */
|
|
1127
1462
|
size?: SizeVariant;
|
|
1128
1463
|
}
|
|
1129
|
-
type InputGroupComponent =
|
|
1464
|
+
type InputGroupComponent = ForwardRefExoticComponent5<InputGroupProps & RefAttributes5<HTMLDivElement>> & {
|
|
1130
1465
|
Field: typeof InputField;
|
|
1131
1466
|
};
|
|
1132
1467
|
declare const InputGroup: InputGroupComponent;
|
|
@@ -1141,176 +1476,11 @@ interface InputFieldProps extends Omit<InputProps, "invalid" | "size" | "classNa
|
|
|
1141
1476
|
error?: string;
|
|
1142
1477
|
className?: string;
|
|
1143
1478
|
}
|
|
1144
|
-
declare const InputField:
|
|
1145
|
-
import { HTMLAttributes as
|
|
1146
|
-
|
|
1147
|
-
|
|
1148
|
-
|
|
1149
|
-
type InputCopyAlign = "right" | "left";
|
|
1150
|
-
interface InputCopyProps extends Omit<HTMLAttributes7<HTMLDivElement>, "children"> {
|
|
1151
|
-
/** The text value to display and copy to clipboard. */
|
|
1152
|
-
value: string;
|
|
1153
|
-
/** Optional label displayed above the input. */
|
|
1154
|
-
label?: string;
|
|
1155
|
-
/** Callback fired after the value is successfully copied. */
|
|
1156
|
-
onCopy?: () => void;
|
|
1157
|
-
/** Disables the input and copy button. Defaults to `false`. */
|
|
1158
|
-
disabled?: boolean;
|
|
1159
|
-
/** Icon-only with tooltip, or button with visible label. Defaults to `"icon"`. */
|
|
1160
|
-
variant?: InputCopyVariant;
|
|
1161
|
-
/** Position of the copy action relative to the value. Defaults to `"right"`. */
|
|
1162
|
-
align?: InputCopyAlign;
|
|
1163
|
-
/** Pins the field to one step of the size ladder (default 36px, compact 28px — see Sizes). Omitted, it follows the surrounding SizeProvider. */
|
|
1164
|
-
size?: SizeVariant;
|
|
1165
|
-
/** Extra classes for the wrapper around the label and the field. */
|
|
1166
|
-
className?: string;
|
|
1167
|
-
}
|
|
1168
|
-
/**
|
|
1169
|
-
* Read-only input with a copy-to-clipboard button and animated check
|
|
1170
|
-
* feedback.
|
|
1171
|
-
*
|
|
1172
|
-
* The whole row is the button: click anywhere on it and the value goes to
|
|
1173
|
-
* the clipboard, the copy glyph's two sheets melt into a tinted disc (the
|
|
1174
|
-
* goo of Morph) behind a check that draws itself, and the tooltip flips to
|
|
1175
|
-
* "Copied" for 2 seconds; then the disc splits back into the glyph. The value is monospaced and
|
|
1176
|
-
* highlights on hover so it reads as one selectable token rather than a
|
|
1177
|
-
* text field, and the async Clipboard API falls back to an off-screen
|
|
1178
|
-
* textarea + `execCommand` where it is unavailable (insecure context,
|
|
1179
|
-
* permissions policy) — a failure animates a ✕ and says so. `variant`
|
|
1180
|
-
* switches between the icon-only affordance (with a tooltip) and a labelled
|
|
1181
|
-
* Copy button, `align` moves that action to the leading edge, and the field
|
|
1182
|
-
* follows the surrounding SizeProvider unless `size` pins it.
|
|
1183
|
-
*
|
|
1184
|
-
* @example {@include ./examples.mdx}
|
|
1185
|
-
*/
|
|
1186
|
-
declare const InputCopy: ForwardRefExoticComponent_tcubfn4<InputCopyProps & RefAttributes_miuf564<HTMLDivElement>>;
|
|
1187
|
-
import { HTMLAttributes as HTMLAttributes8, ReactNode as ReactNode9, TextareaHTMLAttributes } from "react";
|
|
1188
|
-
import { ForwardRefExoticComponent as ForwardRefExoticComponent_tcubfn5 } from "react";
|
|
1189
|
-
import { RefAttributes as RefAttributes_miuf565 } from "react";
|
|
1190
|
-
import { JSX as JSX_1kxb12 } from "react";
|
|
1191
|
-
interface FileThumbnailProps {
|
|
1192
|
-
file: File;
|
|
1193
|
-
/** Side length of the square thumbnail in pixels. */
|
|
1194
|
-
size: number;
|
|
1195
|
-
className?: string;
|
|
1196
|
-
}
|
|
1197
|
-
type Element_12xgc12 = JSX_1kxb12["Element"];
|
|
1198
|
-
declare function FileThumbnail({ file, size, className }: FileThumbnailProps): Element_12xgc12;
|
|
1199
|
-
type InputMessageStatus = "idle" | "streaming";
|
|
1200
|
-
interface InputMessageSlotContext {
|
|
1201
|
-
/** Opens the native file picker via the hidden `<input type="file">`.
|
|
1202
|
-
* Pass `acceptOverride` (e.g. `"image/*"`) to scope the picker to a
|
|
1203
|
-
* subset of the component's accept types just for this invocation. */
|
|
1204
|
-
openFilePicker: (acceptOverride?: string) => void;
|
|
1205
|
-
/** Currently-attached files. */
|
|
1206
|
-
files: File[];
|
|
1207
|
-
}
|
|
1208
|
-
type InputMessageSlot = ReactNode9 | ((ctx: InputMessageSlotContext) => ReactNode9);
|
|
1209
|
-
/** A message held in the queue while the assistant is responding. Carries the
|
|
1210
|
-
* trimmed text plus a snapshot of the files attached when it was queued, so
|
|
1211
|
-
* double-click-to-edit can restore both. `id` is a stable key minted on enqueue. */
|
|
1212
|
-
interface QueuedMessage {
|
|
1213
|
-
id: string;
|
|
1214
|
-
text: string;
|
|
1215
|
-
files: File[];
|
|
1216
|
-
}
|
|
1217
|
-
interface InputMessageProps extends Omit<HTMLAttributes8<HTMLDivElement>, "onChange" | "defaultValue"> {
|
|
1218
|
-
/** Step on the size ladder (see Sizes). Wins over the surrounding SizeProvider and propagates to the composer's rows, buttons and queued messages. */
|
|
1219
|
-
size?: SizeVariant;
|
|
1220
|
-
/** Controlled textarea value. Pair with `onValueChange`; omit both for an uncontrolled composer. */
|
|
1221
|
-
value?: string;
|
|
1222
|
-
/** Initial textarea value for an uncontrolled composer. Defaults to `""`. */
|
|
1223
|
-
defaultValue?: string;
|
|
1224
|
-
/** Called with the new value on every textarea change. */
|
|
1225
|
-
onValueChange?: (value: string) => void;
|
|
1226
|
-
/** Fires on Enter (without Shift) or send-button click, and when a queued message auto-dispatches. Receives the trimmed value, the attached files, and — for auto-dispatched queue items — `meta.queuedId`. Skipped when the value is empty and no files are attached. */
|
|
1227
|
-
onSend?: (value: string, files: File[], meta?: {
|
|
1228
|
-
queuedId?: string;
|
|
1229
|
-
}) => void;
|
|
1230
|
-
/** Placeholder shown when the value is empty. While a file is dragged over the component (and attachments are enabled) it swaps to "Drop files here to add to chat". Defaults to `"Ask me anything…"`. */
|
|
1231
|
-
placeholder?: string;
|
|
1232
|
-
/** Content rendered in the bottom-left action area. May be a render-fn that receives `{ openFilePicker, files }` — `openFilePicker(acceptOverride?)` opens the native file picker. */
|
|
1233
|
-
leftSlot?: InputMessageSlot;
|
|
1234
|
-
/** Content rendered in the bottom-right action area, before the built-in send button. Same render-fn shape as `leftSlot`. */
|
|
1235
|
-
rightSlot?: InputMessageSlot;
|
|
1236
|
-
/** Disables the textarea, send button, and drag-and-drop. Defaults to `false`. */
|
|
1237
|
-
disabled?: boolean;
|
|
1238
|
-
/** Minimum visible rows before the textarea grows. Defaults to 1. */
|
|
1239
|
-
minRows?: number;
|
|
1240
|
-
/** Maximum visible rows before the textarea starts to scroll. Defaults to 8. */
|
|
1241
|
-
maxRows?: number;
|
|
1242
|
-
/** When true, clicking anywhere on the surrounding container (outside of buttons / links / inputs) focuses the textarea. Defaults to `true`. */
|
|
1243
|
-
clickToFocus?: boolean;
|
|
1244
|
-
/** Accessible label for the send button. Defaults to `"Send"`. */
|
|
1245
|
-
sendLabel?: string;
|
|
1246
|
-
/** Controlled list of attached files. Pair with `onFilesChange` to enable drag-and-drop and the file-picker slot helper. */
|
|
1247
|
-
files?: File[];
|
|
1248
|
-
/** Initial attachments for an uncontrolled composer. Providing it (even as `[]`) enables attachment behavior on its own. */
|
|
1249
|
-
defaultFiles?: File[];
|
|
1250
|
-
/** Called when files are added (drag-drop or picker) or removed via the preview tile's × button. Duplicate drops of the same file (same name + size + lastModified) are silently de-duplicated. */
|
|
1251
|
-
onFilesChange?: (files: File[]) => void;
|
|
1252
|
-
/** Accepted MIME types as a comma-separated string. Used by both the file picker and the drag-and-drop filter. Defaults to `"image/png,image/jpeg,application/pdf"`. */
|
|
1253
|
-
accept?: string;
|
|
1254
|
-
/** Maximum number of attached files. Extra files beyond this limit are dropped. */
|
|
1255
|
-
maxFiles?: number;
|
|
1256
|
-
/** Side length (in pixels) of each preview tile. Images use object-cover; PDFs render the first page via pdfjs; other types fall back to a centered icon. Defaults to 80. */
|
|
1257
|
-
filePreviewSize?: number;
|
|
1258
|
-
/** Extra props forwarded to the underlying textarea (value, onChange, onKeyDown, disabled and placeholder are controlled by the component). */
|
|
1259
|
-
textareaProps?: Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "value" | "onChange" | "onKeyDown" | "disabled" | "placeholder">;
|
|
1260
|
-
/** Assistant response state. When `"streaming"`, the send button becomes a Stop control (empty draft) or a Queue action (non-empty draft). On the streaming→idle edge the next queued message auto-dispatches via `onSend`. Leave it and `defaultStatus` undefined for the send-immediately behavior. */
|
|
1261
|
-
status?: InputMessageStatus;
|
|
1262
|
-
/** Initial status for an uncontrolled composer — the component then owns the streaming flag, and Stop flips it to `"idle"` itself. */
|
|
1263
|
-
defaultStatus?: InputMessageStatus;
|
|
1264
|
-
/** Called whenever the status changes while it is uncontrolled (currently: the Stop control). */
|
|
1265
|
-
onStatusChange?: (status: InputMessageStatus) => void;
|
|
1266
|
-
/** Fires when the Stop control is pressed (streaming + empty draft). Halt the current response and set status to `"idle"` — that edge immediately dispatches the next queued message. */
|
|
1267
|
-
onStop?: () => void;
|
|
1268
|
-
/** Controlled queue of pending messages, rendered as reorderable rows above the textarea. Double-click (or Enter/F2) edits a row back into the composer; the × (or Delete) removes it; drag — or Alt+↑/↓ — reorders. Requires a status. */
|
|
1269
|
-
queue?: QueuedMessage[];
|
|
1270
|
-
/** Initial queue for an uncontrolled composer. Providing it (even as `[]`) enables the queue on its own, alongside `status` or `defaultStatus`. */
|
|
1271
|
-
defaultQueue?: QueuedMessage[];
|
|
1272
|
-
/** Called whenever the queue changes — enqueue, edit, delete, reorder, or auto-dispatch. Each QueuedMessage is `{ id, text, files }`. */
|
|
1273
|
-
onQueueChange?: (queue: QueuedMessage[]) => void;
|
|
1274
|
-
/** Render the built-in reorderable queue rows above the textarea. Set to false to suppress them and render the queue yourself — enqueue and auto-dispatch still run. Defaults to `true`. */
|
|
1275
|
-
showQueue?: boolean;
|
|
1276
|
-
/** Previously-sent messages, oldest first. With the textarea focused, ArrowUp (caret on the first line) recalls the previous message and walks backward; ArrowDown (caret on the last line) walks forward toward the in-progress draft. Editing or sending exits history mode. Defaults to `[]`. */
|
|
1277
|
-
history?: string[];
|
|
1278
|
-
/** Suggested prompt rendered as the placeholder (with a Tab keycap) while the draft is empty. Pressing Tab fills it into the composer — it doesn't send. Takes precedence over `placeholder`. */
|
|
1279
|
-
placeholderSuggestion?: string;
|
|
1280
|
-
/** Suggested prompts listed under the action bar while the draft is empty. ArrowDown moves a highlight into the list (focus stays in the textarea), ArrowUp walks back up and out, Enter or click fills the highlighted prompt. Escape drops the highlight; typing collapses the list. */
|
|
1281
|
-
suggestions?: string[];
|
|
1282
|
-
/** Extra classes for the composer surface. */
|
|
1283
|
-
className?: string;
|
|
1284
|
-
}
|
|
1285
|
-
/**
|
|
1286
|
-
* Chat-style message composer with an auto-resizing textarea, flexible
|
|
1287
|
-
* left/right action slots, and a built-in send button on a Surface-2
|
|
1288
|
-
* substrate.
|
|
1289
|
-
*
|
|
1290
|
-
* The textarea grows from `minRows` to `maxRows` and then scrolls, Enter
|
|
1291
|
-
* sends while Shift+Enter breaks the line, and the whole panel is one
|
|
1292
|
-
* hairline ring that recolours in place for hover, focus and drag instead of
|
|
1293
|
-
* layering a second border. Attachments drop anywhere on the composer (or
|
|
1294
|
-
* come from `openFilePicker` in a slot) and preview as tiles — images
|
|
1295
|
-
* object-cover, PDFs render their first page. `suggestions` open a listbox
|
|
1296
|
-
* under the action bar that ↓/↑ walk without moving focus, and
|
|
1297
|
-
* `placeholderSuggestion` writes a ghost prompt with a Tab keycap. With a
|
|
1298
|
-
* `status` the send button morphs into Stop (empty draft) or Queue (draft
|
|
1299
|
-
* typed while streaming); queued rows reorder by drag or Alt+↑/↓, edit back
|
|
1300
|
-
* into the composer on double-click, and the head auto-dispatches on the
|
|
1301
|
-
* streaming→idle edge.
|
|
1302
|
-
*
|
|
1303
|
-
* Every controlled prop has an uncontrolled twin — `defaultValue`,
|
|
1304
|
-
* `defaultFiles`, `defaultQueue`, `defaultStatus` — so a composer can hold
|
|
1305
|
-
* its own draft, attachments and queue with no state in the caller.
|
|
1306
|
-
*
|
|
1307
|
-
* @example {@include ./examples.mdx}
|
|
1308
|
-
*/
|
|
1309
|
-
declare const InputMessage: ForwardRefExoticComponent_tcubfn5<InputMessageProps & RefAttributes_miuf565<HTMLDivElement>>;
|
|
1310
|
-
import { ForwardRefExoticComponent as ForwardRefExoticComponent5, HTMLAttributes as HTMLAttributes9, ReactNode as ReactNode10, RefAttributes as RefAttributes5 } from "react";
|
|
1311
|
-
interface RadioGroupProps extends Omit<HTMLAttributes9<HTMLDivElement>, "onSelect" | "defaultValue"> {
|
|
1312
|
-
/** RadioGroup.Item children. */
|
|
1313
|
-
children: ReactNode10;
|
|
1479
|
+
declare const InputField: ForwardRefExoticComponent5<InputFieldProps & RefAttributes5<HTMLDivElement>>;
|
|
1480
|
+
import { ForwardRefExoticComponent as ForwardRefExoticComponent6, HTMLAttributes as HTMLAttributes11, ReactNode as ReactNode11, RefAttributes as RefAttributes6 } from "react";
|
|
1481
|
+
interface RadioGroupProps extends Omit<HTMLAttributes11<HTMLDivElement>, "onSelect" | "defaultValue"> {
|
|
1482
|
+
/** `Radio` rows. */
|
|
1483
|
+
children: ReactNode11;
|
|
1314
1484
|
/** Index of the currently selected item. Controlled — pair it with `onSelectedIndexChange` (or per-item `onSelect`). */
|
|
1315
1485
|
selectedIndex?: number;
|
|
1316
1486
|
/** Selected index on first render when uncontrolled. Defaults to no selection. */
|
|
@@ -1326,35 +1496,12 @@ interface RadioGroupProps extends Omit<HTMLAttributes9<HTMLDivElement>, "onSelec
|
|
|
1326
1496
|
/** Pins the group's rows to one step of the size ladder (default 36px, compact 28px). Defaults to the surrounding SizeProvider. */
|
|
1327
1497
|
size?: SizeVariant;
|
|
1328
1498
|
}
|
|
1329
|
-
|
|
1330
|
-
|
|
1331
|
-
};
|
|
1332
|
-
/**
|
|
1333
|
-
* Radio button group with fluid hover and animated selection.
|
|
1334
|
-
*
|
|
1335
|
-
* Each row is a `RadioGroup.Item` with a stable `index`. The selected
|
|
1336
|
-
* background melts to the chosen row, a fluid hover highlight melts between
|
|
1337
|
-
* rows (the liquid indicators in Morph), the dot scales in, and the label animates to semibold without shifting
|
|
1338
|
-
* its width. Arrow keys, Home and End move focus and select, with a roving
|
|
1339
|
-
* tabindex on the selected row. Select by index — uncontrolled with
|
|
1340
|
-
* `defaultSelectedIndex`, controlled with `selectedIndex` +
|
|
1341
|
-
* `onSelectedIndexChange` — or by item `value` (`defaultValue` / `value` +
|
|
1342
|
-
* `onValueChange`), which also renders Base UI radios for form integration.
|
|
1343
|
-
* FF's per-item `selected` / `onSelect` still work and override the group for
|
|
1344
|
-
* their row.
|
|
1345
|
-
*
|
|
1346
|
-
* Statics:
|
|
1347
|
-
* - `RadioGroup.Item` — one radio row: `label`, `index`, and optional `value`,
|
|
1348
|
-
* `selected`, `onSelect`.
|
|
1349
|
-
*
|
|
1350
|
-
* @example {@include ./examples.mdx}
|
|
1351
|
-
*/
|
|
1352
|
-
declare const RadioGroup: RadioGroupComponent;
|
|
1353
|
-
interface RadioItemProps extends HTMLAttributes9<HTMLDivElement> {
|
|
1499
|
+
declare const RadioGroup: ForwardRefExoticComponent6<RadioGroupProps & RefAttributes6<HTMLDivElement>>;
|
|
1500
|
+
interface RadioProps extends HTMLAttributes11<HTMLDivElement> {
|
|
1354
1501
|
/** Text label for the radio item. */
|
|
1355
1502
|
label: string;
|
|
1356
|
-
/** Position
|
|
1357
|
-
index
|
|
1503
|
+
/** Position within the `Radio.Group`: the row's `selectedIndex`. Defaults to its order among the group's rows. */
|
|
1504
|
+
index?: number;
|
|
1358
1505
|
/** Whether this item is selected. Defaults to the group's selection. */
|
|
1359
1506
|
selected?: boolean;
|
|
1360
1507
|
/** Called when this item is selected (the group's change callbacks fire too). */
|
|
@@ -1362,21 +1509,44 @@ interface RadioItemProps extends HTMLAttributes9<HTMLDivElement> {
|
|
|
1362
1509
|
/** Optional value forwarded to the underlying Base UI primitive for form integration. */
|
|
1363
1510
|
value?: string;
|
|
1364
1511
|
}
|
|
1365
|
-
|
|
1512
|
+
type RadioComponent = ForwardRefExoticComponent6<RadioProps & RefAttributes6<HTMLDivElement>> & {
|
|
1513
|
+
Group: typeof RadioGroup;
|
|
1514
|
+
};
|
|
1515
|
+
/**
|
|
1516
|
+
* Radio buttons with fluid hover and animated selection.
|
|
1517
|
+
*
|
|
1518
|
+
* Each `Radio` is one row of a `Radio.Group`. The selected background melts
|
|
1519
|
+
* to the chosen row, a fluid hover highlight melts between rows (the liquid
|
|
1520
|
+
* indicators in Morph), the dot scales in, and the label animates to
|
|
1521
|
+
* semibold without shifting its width. Arrow keys, Home and End move focus
|
|
1522
|
+
* and select, with a roving tabindex on the selected row. The group numbers
|
|
1523
|
+
* its rows in order, so they need no `index`. FF's per-row `selected` /
|
|
1524
|
+
* `onSelect` still work and override the group for their row.
|
|
1525
|
+
*
|
|
1526
|
+
* Statics:
|
|
1527
|
+
* - `Radio.Group` — the list. Select by index — uncontrolled with
|
|
1528
|
+
* `defaultSelectedIndex`, controlled with `selectedIndex` +
|
|
1529
|
+
* `onSelectedIndexChange` — or by row `value` (`defaultValue` / `value` +
|
|
1530
|
+
* `onValueChange`), which also renders Base UI radios for form
|
|
1531
|
+
* integration; `size` pins every row to one step of the size ladder.
|
|
1532
|
+
*
|
|
1533
|
+
* @example {@include ./examples.mdx}
|
|
1534
|
+
*/
|
|
1535
|
+
declare const Radio: RadioComponent;
|
|
1366
1536
|
import { Autocomplete } from "@base-ui/react/autocomplete";
|
|
1367
|
-
import { HTMLAttributes as
|
|
1368
|
-
import { ButtonHTMLAttributes as ButtonHTMLAttributes2, ReactElement as ReactElement2, ReactNode as
|
|
1537
|
+
import { HTMLAttributes as HTMLAttributes12, ReactNode as ReactNode13, RefObject as RefObject10 } from "react";
|
|
1538
|
+
import { ButtonHTMLAttributes as ButtonHTMLAttributes2, ReactElement as ReactElement2, ReactNode as ReactNode12 } from "react";
|
|
1369
1539
|
interface SlotProps extends ButtonHTMLAttributes2<HTMLButtonElement> {
|
|
1370
1540
|
/** The element that becomes the control, e.g. a Button. */
|
|
1371
1541
|
render?: ReactElement2;
|
|
1372
1542
|
/** Compose onto the single child instead. Both spellings work in both flavors. Defaults to `false`. */
|
|
1373
1543
|
asChild?: boolean;
|
|
1374
1544
|
/** Control content when there is no render element. */
|
|
1375
|
-
children?:
|
|
1545
|
+
children?: ReactNode12;
|
|
1376
1546
|
}
|
|
1377
1547
|
import { JSX as JSX_1kxb13 } from "react";
|
|
1378
|
-
import { ForwardRefExoticComponent as
|
|
1379
|
-
import { RefAttributes as
|
|
1548
|
+
import { ForwardRefExoticComponent as ForwardRefExoticComponent_tcubfn7 } from "react";
|
|
1549
|
+
import { RefAttributes as RefAttributes_miuf567 } from "react";
|
|
1380
1550
|
/** One command: the label the query matches, plus what the row shows and does. */
|
|
1381
1551
|
interface CommandItem {
|
|
1382
1552
|
label: string;
|
|
@@ -1399,10 +1569,10 @@ type CommandListRootProps = Omit<Autocomplete.Root.Props<CommandItem>, "items" |
|
|
|
1399
1569
|
type Element_12xgc13 = JSX_1kxb13["Element"];
|
|
1400
1570
|
/** Base UI's Autocomplete set up for command rows: it matches labels and keywords and hands its highlight to `CommandList`. */
|
|
1401
1571
|
declare function CommandListRoot({ items,...props }: CommandListRootProps): Element_12xgc13;
|
|
1402
|
-
declare function CommandShortcut({ className,...props }:
|
|
1572
|
+
declare function CommandShortcut({ className,...props }: HTMLAttributes12<HTMLElement>): Element_12xgc13;
|
|
1403
1573
|
interface CommandListProps {
|
|
1404
1574
|
onPick: (item: CommandItem) => void;
|
|
1405
|
-
emptyMessage:
|
|
1575
|
+
emptyMessage: ReactNode13;
|
|
1406
1576
|
className?: string;
|
|
1407
1577
|
}
|
|
1408
1578
|
/** The filtered rows (grouped or flat) under one fluid highlight, inside a ScrollArea. Goes inside `CommandListRoot`. */
|
|
@@ -1413,17 +1583,17 @@ interface CommandPaletteProps {
|
|
|
1413
1583
|
/** The search field's placeholder. Defaults to `'Type a command or search…'`. */
|
|
1414
1584
|
placeholder?: string;
|
|
1415
1585
|
/** Shown when nothing matches the query. Defaults to `'No results found.'`. */
|
|
1416
|
-
emptyMessage?:
|
|
1586
|
+
emptyMessage?: ReactNode13;
|
|
1417
1587
|
/** Classes for the palette's box. */
|
|
1418
1588
|
className?: string;
|
|
1419
1589
|
}
|
|
1420
1590
|
declare function CommandPalette({ items, placeholder, emptyMessage, className }: CommandPaletteProps): Element_12xgc13;
|
|
1421
|
-
declare const CommandTrigger:
|
|
1591
|
+
declare const CommandTrigger: ForwardRefExoticComponent_tcubfn7<SlotProps & RefAttributes_miuf567<HTMLButtonElement>>;
|
|
1422
1592
|
interface CommandContentProps extends CommandPaletteProps {
|
|
1423
1593
|
/** Accessible name of the panel. Defaults to `'Command menu'`. */
|
|
1424
1594
|
label?: string;
|
|
1425
1595
|
/** Where the panel grows from (see Morph): the pressed trigger (its center when none), the press point, its own center, a viewport edge, or a ref to any element. Defaults to `'trigger'`. */
|
|
1426
|
-
from?: "trigger" | "pointer" | "center" | "top" | "right" | "bottom" | "left" |
|
|
1596
|
+
from?: "trigger" | "pointer" | "center" | "top" | "right" | "bottom" | "left" | RefObject10<HTMLElement | null>;
|
|
1427
1597
|
/** How it grows (see Morph): with the liquid goo neck, a plain morph, a slide or a fade. Defaults to `'goo'`. */
|
|
1428
1598
|
effect?: "goo" | "morph" | "slide" | "fade";
|
|
1429
1599
|
/** Hide the trigger while open, so it reads as turning into the panel. Defaults to `false`. */
|
|
@@ -1431,7 +1601,7 @@ interface CommandContentProps extends CommandPaletteProps {
|
|
|
1431
1601
|
/** Spring tier of a plain morph, slide or fade; goo runs on its own `spring.goo`. Defaults to `'slow'`. */
|
|
1432
1602
|
tier?: "moderate" | "slow";
|
|
1433
1603
|
}
|
|
1434
|
-
declare const CommandContent:
|
|
1604
|
+
declare const CommandContent: ForwardRefExoticComponent_tcubfn7<CommandContentProps & RefAttributes_miuf567<HTMLDivElement>>;
|
|
1435
1605
|
interface CommandProps {
|
|
1436
1606
|
/** Controlled open state. */
|
|
1437
1607
|
open?: boolean;
|
|
@@ -1442,7 +1612,7 @@ interface CommandProps {
|
|
|
1442
1612
|
/** The key that toggles the palette with ⌘ (Ctrl elsewhere); `false` leaves the keyboard alone. Defaults to `'k'`. */
|
|
1443
1613
|
hotkey?: string | false;
|
|
1444
1614
|
/** The trigger and the panel: `Command.Trigger` plus a `Command.Content`. */
|
|
1445
|
-
children?:
|
|
1615
|
+
children?: ReactNode13;
|
|
1446
1616
|
}
|
|
1447
1617
|
/**
|
|
1448
1618
|
* A ⌘K command menu: a search field over grouped commands, grown out of
|
|
@@ -1540,15 +1710,15 @@ type Element_12xgc14 = JSX_1kxb14["Element"];
|
|
|
1540
1710
|
* @example {@include ./examples.mdx}
|
|
1541
1711
|
*/
|
|
1542
1712
|
declare function Search2({ variant, placeholder, items, value, defaultValue, onValueChange, onSubmit, expanded, defaultExpanded, onExpandedChange, width, align, shortcut, emptyMessage, effect, tier, className }: SearchProps): Element_12xgc14;
|
|
1543
|
-
import { VariantProps as
|
|
1544
|
-
import { HTMLAttributes as
|
|
1713
|
+
import { VariantProps as VariantProps3 } from "class-variance-authority";
|
|
1714
|
+
import { HTMLAttributes as HTMLAttributes13, ReactNode as ReactNode14 } from "react";
|
|
1545
1715
|
import { JSX as JSX_1kxb15 } from "react";
|
|
1546
|
-
import { ForwardRefExoticComponent as
|
|
1547
|
-
import { RefAttributes as
|
|
1716
|
+
import { ForwardRefExoticComponent as ForwardRefExoticComponent_tcubfn8 } from "react";
|
|
1717
|
+
import { RefAttributes as RefAttributes_miuf568 } from "react";
|
|
1548
1718
|
import { ClassProp as ClassProp_wz9o0r4 } from "class-variance-authority/types";
|
|
1549
1719
|
interface SelectProps {
|
|
1550
1720
|
/** `Select.Trigger` and `Select.Content`. */
|
|
1551
|
-
children:
|
|
1721
|
+
children: ReactNode14;
|
|
1552
1722
|
/** Controlled selected value. Pair with `onValueChange`. */
|
|
1553
1723
|
value?: string;
|
|
1554
1724
|
/** Uncontrolled default value — the select then keeps the selection itself. */
|
|
@@ -1590,7 +1760,7 @@ declare function Select({ children, value, defaultValue, onValueChange, disabled
|
|
|
1590
1760
|
declare const triggerVariants: (props?: ({
|
|
1591
1761
|
variant?: "borderless" | "bordered" | null | undefined;
|
|
1592
1762
|
} & ClassProp_wz9o0r4) | undefined) => string;
|
|
1593
|
-
interface SelectTriggerProps extends Omit<
|
|
1763
|
+
interface SelectTriggerProps extends Omit<HTMLAttributes13<HTMLButtonElement>, "children">, VariantProps3<typeof triggerVariants> {
|
|
1594
1764
|
/** Visual style of the trigger. Defaults to `"bordered"`. */
|
|
1595
1765
|
variant?: "bordered" | "borderless";
|
|
1596
1766
|
/** Optional icon displayed before the value. */
|
|
@@ -1604,7 +1774,7 @@ interface SelectTriggerProps extends Omit<HTMLAttributes11<HTMLButtonElement>, "
|
|
|
1604
1774
|
/** Extra classes for the trigger button. */
|
|
1605
1775
|
className?: string;
|
|
1606
1776
|
}
|
|
1607
|
-
declare const SelectTrigger:
|
|
1777
|
+
declare const SelectTrigger: ForwardRefExoticComponent_tcubfn8<SelectTriggerProps & RefAttributes_miuf568<HTMLButtonElement>>;
|
|
1608
1778
|
interface SelectContentProps {
|
|
1609
1779
|
/** Where the menu grows from (see Morph): the trigger, the pointer, its own center, a viewport edge, or a ref to any element. Defaults to `'trigger'`. */
|
|
1610
1780
|
from?: "trigger" | "pointer" | "center" | "top" | "right" | "bottom" | "left" | React.RefObject<HTMLElement | null>;
|
|
@@ -1617,10 +1787,10 @@ interface SelectContentProps {
|
|
|
1617
1787
|
/** Additional classes for the menu container. */
|
|
1618
1788
|
className?: string;
|
|
1619
1789
|
/** `Select.Item`, `Select.Group`, `Select.Label`, `Select.Separator`. */
|
|
1620
|
-
children:
|
|
1790
|
+
children: ReactNode14;
|
|
1621
1791
|
}
|
|
1622
|
-
declare const SelectContent:
|
|
1623
|
-
interface SelectItemProps extends
|
|
1792
|
+
declare const SelectContent: ForwardRefExoticComponent_tcubfn8<SelectContentProps & RefAttributes_miuf568<HTMLDivElement>>;
|
|
1793
|
+
interface SelectItemProps extends HTMLAttributes13<HTMLDivElement> {
|
|
1624
1794
|
/** Optional icon displayed before the label. */
|
|
1625
1795
|
icon?: IconComponent;
|
|
1626
1796
|
/** Position index within the content — what fluid hover measures rows by. */
|
|
@@ -1630,21 +1800,21 @@ interface SelectItemProps extends HTMLAttributes11<HTMLDivElement> {
|
|
|
1630
1800
|
/** Disables this individual item. Defaults to `false`. */
|
|
1631
1801
|
disabled?: boolean;
|
|
1632
1802
|
/** The row label. A string label is also what the trigger shows for this value. */
|
|
1633
|
-
children?:
|
|
1803
|
+
children?: ReactNode14;
|
|
1634
1804
|
}
|
|
1635
|
-
declare const SelectItem:
|
|
1636
|
-
declare function SelectGroup({ children, className,...props }:
|
|
1637
|
-
declare const SelectLabel:
|
|
1638
|
-
declare const SelectSeparator:
|
|
1639
|
-
import { CSSProperties as CSSProperties2, HTMLAttributes as
|
|
1640
|
-
import { ForwardRefExoticComponent as
|
|
1641
|
-
import { RefAttributes as
|
|
1805
|
+
declare const SelectItem: ForwardRefExoticComponent_tcubfn8<SelectItemProps & RefAttributes_miuf568<HTMLDivElement>>;
|
|
1806
|
+
declare function SelectGroup({ children, className,...props }: HTMLAttributes13<HTMLDivElement>): Element_12xgc15;
|
|
1807
|
+
declare const SelectLabel: ForwardRefExoticComponent_tcubfn8<HTMLAttributes13<HTMLDivElement> & RefAttributes_miuf568<HTMLDivElement>>;
|
|
1808
|
+
declare const SelectSeparator: ForwardRefExoticComponent_tcubfn8<HTMLAttributes13<HTMLDivElement> & RefAttributes_miuf568<HTMLDivElement>>;
|
|
1809
|
+
import { CSSProperties as CSSProperties2, HTMLAttributes as HTMLAttributes14 } from "react";
|
|
1810
|
+
import { ForwardRefExoticComponent as ForwardRefExoticComponent_tcubfn9 } from "react";
|
|
1811
|
+
import { RefAttributes as RefAttributes_miuf569 } from "react";
|
|
1642
1812
|
type SliderValue = number | [number, number];
|
|
1643
1813
|
type ValuePosition = "left" | "right" | "top" | "bottom" | "tooltip";
|
|
1644
1814
|
/** Props of the compact engine — the feature-rich design (ranges, discrete
|
|
1645
1815
|
* step lists, value display) that renders the ladder's compact step. The
|
|
1646
1816
|
* public <Slider> accepts these plus `variant` and `size`. */
|
|
1647
|
-
interface SliderEngineProps extends Omit<
|
|
1817
|
+
interface SliderEngineProps extends Omit<HTMLAttributes14<HTMLDivElement>, "onChange" | "defaultValue"> {
|
|
1648
1818
|
value: SliderValue;
|
|
1649
1819
|
onChange: (value: SliderValue) => void;
|
|
1650
1820
|
min?: number;
|
|
@@ -1672,7 +1842,7 @@ interface SliderEngineProps extends Omit<HTMLAttributes12<HTMLDivElement>, "onCh
|
|
|
1672
1842
|
thumbColor?: string;
|
|
1673
1843
|
thumbBorderColor?: string;
|
|
1674
1844
|
}
|
|
1675
|
-
interface SliderComfortableProps extends Omit<
|
|
1845
|
+
interface SliderComfortableProps extends Omit<HTMLAttributes14<HTMLDivElement>, "onChange" | "defaultValue" | "onDrag" | "onDragStart" | "onDragEnd" | "onDragOver" | "onAnimationStart"> {
|
|
1676
1846
|
value: number;
|
|
1677
1847
|
onChange: (value: number) => void;
|
|
1678
1848
|
min?: number;
|
|
@@ -1738,17 +1908,19 @@ interface SliderProps extends Omit<SliderEngineProps, "value" | "onChange"> {
|
|
|
1738
1908
|
*
|
|
1739
1909
|
* @example {@include ./examples.mdx}
|
|
1740
1910
|
*/
|
|
1741
|
-
declare const Slider:
|
|
1911
|
+
declare const Slider: ForwardRefExoticComponent_tcubfn9<SliderProps & RefAttributes_miuf569<HTMLDivElement>>;
|
|
1742
1912
|
/** @deprecated The comfortable design is now the ladder's default step —
|
|
1743
1913
|
* render <Slider> (optionally with `variant`) instead. */
|
|
1744
|
-
declare const SliderComfortable:
|
|
1914
|
+
declare const SliderComfortable: ForwardRefExoticComponent_tcubfn9<SliderComfortableProps & RefAttributes_miuf569<HTMLDivElement>>;
|
|
1745
1915
|
import { Transition } from "motion/react";
|
|
1746
|
-
import { HTMLAttributes as
|
|
1747
|
-
|
|
1748
|
-
import { RefAttributes as RefAttributes_miuf569 } from "react";
|
|
1749
|
-
interface SwitchProps extends HTMLAttributes13<HTMLDivElement> {
|
|
1916
|
+
import { ForwardRefExoticComponent as ForwardRefExoticComponent7, HTMLAttributes as HTMLAttributes15, ReactNode as ReactNode15, RefAttributes as RefAttributes7 } from "react";
|
|
1917
|
+
interface SwitchProps extends HTMLAttributes15<HTMLDivElement> {
|
|
1750
1918
|
/** Text label displayed next to the switch. */
|
|
1751
1919
|
label: string;
|
|
1920
|
+
/** Secondary text under the label: what turning the switch on does. With one, the label stays at full contrast. */
|
|
1921
|
+
description?: ReactNode15;
|
|
1922
|
+
/** The side of the label the track sits on; `"end"` pushes it to the row's far edge, as in a settings list (always, inside a `Switch.Group`). Defaults to `"start"`. */
|
|
1923
|
+
trackSide?: "start" | "end";
|
|
1752
1924
|
/** Whether the switch is on (controlled). Omit it to let the switch keep its own state, seeded from `defaultChecked`. */
|
|
1753
1925
|
checked?: boolean;
|
|
1754
1926
|
/** Whether the switch starts on when uncontrolled. Defaults to `false`. */
|
|
@@ -1764,6 +1936,9 @@ interface SwitchProps extends HTMLAttributes13<HTMLDivElement> {
|
|
|
1764
1936
|
/** Pins the switch to one step of the size ladder (see Sizes). Defaults to the surrounding SizeProvider, else `"default"`. */
|
|
1765
1937
|
size?: SizeVariant;
|
|
1766
1938
|
}
|
|
1939
|
+
type SwitchComponent = ForwardRefExoticComponent7<SwitchProps & RefAttributes7<HTMLDivElement>> & {
|
|
1940
|
+
Group: typeof SwitchGroup;
|
|
1941
|
+
};
|
|
1767
1942
|
/**
|
|
1768
1943
|
* Toggle switch with animated thumb and label.
|
|
1769
1944
|
*
|
|
@@ -1778,130 +1953,73 @@ interface SwitchProps extends HTMLAttributes13<HTMLDivElement> {
|
|
|
1778
1953
|
* Works controlled (`checked` + `onToggle`, exactly as upstream) or
|
|
1779
1954
|
* uncontrolled (`defaultChecked`, with `onCheckedChange` reporting each
|
|
1780
1955
|
* change). `size` pins it to one step of the size ladder; otherwise it
|
|
1781
|
-
* follows the surrounding SizeProvider.
|
|
1956
|
+
* follows the surrounding SizeProvider. `description` adds a muted line under
|
|
1957
|
+
* the label and `trackSide="end"` moves the track to the row's far edge.
|
|
1958
|
+
*
|
|
1959
|
+
* Statics:
|
|
1960
|
+
* - `Switch.Group` — switches as a settings list in one outlined frame: each
|
|
1961
|
+
* `Switch` inside becomes a row with its track at the far edge, hairlines
|
|
1962
|
+
* divide the rows and a fluid hover highlight melts between them, dropping
|
|
1963
|
+
* the hairlines it touches (as in an outlined Card.Group); a disabled row
|
|
1964
|
+
* gets no highlight. Every switch keeps its own state. `size` pins every
|
|
1965
|
+
* row; name the group with `aria-label` or `aria-labelledby`.
|
|
1782
1966
|
*
|
|
1783
1967
|
* @example {@include ./examples.mdx}
|
|
1784
1968
|
*/
|
|
1785
|
-
declare const Switch:
|
|
1786
|
-
|
|
1787
|
-
|
|
1788
|
-
|
|
1789
|
-
|
|
1790
|
-
|
|
1969
|
+
declare const Switch: SwitchComponent;
|
|
1970
|
+
interface SwitchGroupProps extends HTMLAttributes15<HTMLFieldSetElement> {
|
|
1971
|
+
/** `Switch` rows. */
|
|
1972
|
+
children: ReactNode15;
|
|
1973
|
+
/** Pins every row to one step of the size ladder (see Sizes). Defaults to the surrounding SizeProvider. */
|
|
1974
|
+
size?: SizeVariant;
|
|
1975
|
+
}
|
|
1976
|
+
declare const SwitchGroup: ForwardRefExoticComponent7<SwitchGroupProps & RefAttributes7<HTMLFieldSetElement>>;
|
|
1977
|
+
import { TextareaHTMLAttributes as TextareaHTMLAttributes2 } from "react";
|
|
1978
|
+
import { ForwardRefExoticComponent as ForwardRefExoticComponent_tcubfn10 } from "react";
|
|
1979
|
+
import { RefAttributes as RefAttributes_miuf5610 } from "react";
|
|
1980
|
+
interface TextareaProps extends Omit<TextareaHTMLAttributes2<HTMLTextAreaElement>, "onChange" | "value" | "defaultValue" | "rows"> {
|
|
1981
|
+
/** Placeholder text. */
|
|
1982
|
+
placeholder?: string;
|
|
1983
|
+
/** Controlled value. Pair with `onChange`. */
|
|
1791
1984
|
value?: string;
|
|
1792
|
-
/**
|
|
1985
|
+
/** Initial value when uncontrolled. Defaults to `''`. */
|
|
1793
1986
|
defaultValue?: string;
|
|
1794
|
-
/**
|
|
1795
|
-
|
|
1796
|
-
/**
|
|
1797
|
-
|
|
1798
|
-
|
|
1799
|
-
|
|
1800
|
-
/**
|
|
1801
|
-
|
|
1802
|
-
/**
|
|
1803
|
-
|
|
1804
|
-
/**
|
|
1805
|
-
|
|
1806
|
-
/**
|
|
1807
|
-
onValueChange?: (value: string[]) => void;
|
|
1808
|
-
};
|
|
1809
|
-
type AccordionGroupProps = HTMLAttributes14<HTMLDivElement> & {
|
|
1810
|
-
children: ReactNode14;
|
|
1811
|
-
/** Pins the group's rows to one step of the size ladder (default 36px,
|
|
1812
|
-
* compact 28px — see /docs/sizes). Omitted, they follow the surrounding
|
|
1813
|
-
* SizeProvider. */
|
|
1814
|
-
size?: SizeVariant;
|
|
1815
|
-
/** What an open item tints. "item" paints the row and its panel as one
|
|
1816
|
-
* block, and holds while it stays open. "trigger" scopes the fill to the
|
|
1817
|
-
* row and shows it on hover only, leaving the panel on the page's own
|
|
1818
|
-
* surface — the way a sidebar row highlights without colouring its
|
|
1819
|
-
* sub-tree. @default "item" */
|
|
1820
|
-
highlight?: "trigger" | "item";
|
|
1821
|
-
} & (AccordionGroupSingleProps | AccordionGroupMultipleProps);
|
|
1822
|
-
declare const AccordionGroup: ForwardRefExoticComponent6<AccordionGroupProps & RefAttributes6<HTMLDivElement>>;
|
|
1823
|
-
interface AccordionProps extends HTMLAttributes14<HTMLDivElement> {
|
|
1824
|
-
/** The accordion's items (`Accordion.Item`). */
|
|
1825
|
-
children: ReactNode14;
|
|
1826
|
-
/** Whether one or multiple items can be expanded. Defaults to `"single"`. */
|
|
1827
|
-
type?: "single" | "multiple";
|
|
1828
|
-
/** Allow collapsing all items when type is single. Defaults to `true` (Base UI's single mode is always collapsible). */
|
|
1829
|
-
collapsible?: boolean;
|
|
1830
|
-
/** Initially expanded item value(s) — uncontrolled. A string for `type="single"`, an array for `type="multiple"`. */
|
|
1831
|
-
defaultValue?: string | string[];
|
|
1832
|
-
/** Controlled expanded value(s). Pair with `onValueChange`. */
|
|
1833
|
-
value?: string | string[];
|
|
1834
|
-
/** Callback when expanded state changes. Receives a string in single mode, an array in multiple mode. */
|
|
1835
|
-
onValueChange?: ((value: string) => void) | ((value: string[]) => void);
|
|
1836
|
-
/** What an open item tints: `item` holds a block across the row and its panel, `trigger` scopes it to the row and shows it on hover. Same prop on `Accordion.Group` and on a standalone `Accordion.Item`. Defaults to `"item"`. */
|
|
1837
|
-
highlight?: "trigger" | "item";
|
|
1838
|
-
/** Pins the accordion's rows to one step of the size ladder (default 36px, compact 28px). Omitted, they follow the surrounding SizeProvider. */
|
|
1987
|
+
/** Called with the new value on every change. */
|
|
1988
|
+
onChange?: (value: string) => void;
|
|
1989
|
+
/** Rows shown when empty; the box never gets shorter. Defaults to `3`. */
|
|
1990
|
+
minRows?: number;
|
|
1991
|
+
/** Rows the box grows to before it scrolls. Set it to `minRows` for a fixed height. Defaults to `8`. */
|
|
1992
|
+
maxRows?: number;
|
|
1993
|
+
/** Framed at rest, or invisible until hovered or focused. Defaults to `"borderless"`. */
|
|
1994
|
+
variant?: FieldVariant;
|
|
1995
|
+
/** Marks the value invalid: the field turns destructive and sets `aria-invalid`. Defaults to `false`. */
|
|
1996
|
+
invalid?: boolean;
|
|
1997
|
+
/** Disables the textarea. Defaults to `false`. */
|
|
1998
|
+
disabled?: boolean;
|
|
1999
|
+
/** Pins the textarea to one step of the size ladder (36px default, 28px compact): its text and padding follow, so one row matches an Input. Defaults to the surrounding SizeProvider. */
|
|
1839
2000
|
size?: SizeVariant;
|
|
2001
|
+
/** Classes for the ringed box around the textarea. */
|
|
2002
|
+
className?: string;
|
|
1840
2003
|
}
|
|
1841
|
-
type AccordionComponent = ForwardRefExoticComponent6<AccordionProps & RefAttributes6<HTMLDivElement>> & {
|
|
1842
|
-
Group: typeof AccordionGroup;
|
|
1843
|
-
Item: typeof AccordionItem;
|
|
1844
|
-
Trigger: typeof AccordionTrigger;
|
|
1845
|
-
Content: typeof AccordionContent;
|
|
1846
|
-
};
|
|
1847
2004
|
/**
|
|
1848
|
-
*
|
|
1849
|
-
* grouped mode.
|
|
1850
|
-
*
|
|
1851
|
-
* Accordion is the standalone form: every row carries its own hover fill.
|
|
1852
|
-
* Accordion.Group takes the same props and adds one magnetic highlight that
|
|
1853
|
-
* glides between rows, so give each item inside it an `index`. Built on Base
|
|
1854
|
-
* UI Accordion (WAI-ARIA wiring, keyboard navigation, focus management).
|
|
1855
|
-
* Uncontrolled through `defaultValue`, controlled through `value` +
|
|
1856
|
-
* `onValueChange`.
|
|
1857
|
-
*
|
|
1858
|
-
* The panel grows out of its row (see Morph): a shape drips from where the
|
|
1859
|
-
* row was pressed (its middle, from the keyboard), widens into the whole
|
|
1860
|
-
* item, and the content is revealed by a clip from the same shape. Under the
|
|
1861
|
-
* default `highlight="item"` that shape is the open tint, melted into the
|
|
1862
|
-
* row through a liquid goo neck; closing folds it back into the row. The
|
|
1863
|
-
* rows below ride the shape's bottom edge, so nothing jumps.
|
|
2005
|
+
* Multi-line text field that grows with what you type.
|
|
1864
2006
|
*
|
|
1865
|
-
*
|
|
1866
|
-
*
|
|
1867
|
-
*
|
|
1868
|
-
*
|
|
1869
|
-
*
|
|
2007
|
+
* It sits on the same ground as Input: bare text at rest (or framed, with
|
|
2008
|
+
* `variant="bordered"`), a muted fill with a hairline ring on hover, the
|
|
2009
|
+
* card ground on focus, a destructive ring when `invalid`. The box starts at `minRows`, grows line by line as text wraps,
|
|
2010
|
+
* and scrolls once it reaches `maxRows`. One row lines up with an Input of
|
|
2011
|
+
* the same size, so the two stack in a form without a seam. It is
|
|
2012
|
+
* uncontrolled with `defaultValue`, or controlled with `value` + `onChange`,
|
|
2013
|
+
* fills the width of its container, and joins a Base UI `Field` when placed
|
|
2014
|
+
* inside one. Pair it with a `Label` (see Input) through `htmlFor` / `id`.
|
|
1870
2015
|
*
|
|
1871
2016
|
* @example {@include ./examples.mdx}
|
|
1872
2017
|
*/
|
|
1873
|
-
declare const
|
|
1874
|
-
|
|
1875
|
-
|
|
1876
|
-
|
|
1877
|
-
|
|
1878
|
-
index?: number;
|
|
1879
|
-
/** Whether this item is disabled. Defaults to `false`. */
|
|
1880
|
-
disabled?: boolean;
|
|
1881
|
-
/** Standalone equivalent of the group's prop: what an open item tints. Ignored inside a group, which decides for all its rows. Defaults to the standalone root's `highlight`, else `"item"`. */
|
|
1882
|
-
highlight?: "trigger" | "item";
|
|
1883
|
-
/** The item's `Accordion.Trigger` and `Accordion.Content`. */
|
|
1884
|
-
children: ReactNode14;
|
|
1885
|
-
}
|
|
1886
|
-
declare const AccordionItem: ForwardRefExoticComponent6<AccordionItemProps & RefAttributes6<HTMLDivElement>>;
|
|
1887
|
-
interface AccordionTriggerProps extends HTMLAttributes14<HTMLButtonElement> {
|
|
1888
|
-
/** Trigger label content. */
|
|
1889
|
-
children: ReactNode14;
|
|
1890
|
-
}
|
|
1891
|
-
declare const AccordionTrigger: ForwardRefExoticComponent6<AccordionTriggerProps & RefAttributes6<HTMLButtonElement>>;
|
|
1892
|
-
interface AccordionContentProps extends HTMLAttributes14<HTMLDivElement> {
|
|
1893
|
-
/** Collapsible content. */
|
|
1894
|
-
children: ReactNode14;
|
|
1895
|
-
/** How the panel grows out of its row (see Morph): `goo` melts the open tint out of the row through a liquid neck, `morph` grows it without one. Defaults to `'goo'`. */
|
|
1896
|
-
effect?: "goo" | "morph";
|
|
1897
|
-
/** Spring tier the panel opens on; it closes on the tier's faster exit tween. Defaults to `'slow'`. */
|
|
1898
|
-
tier?: "moderate" | "slow";
|
|
1899
|
-
}
|
|
1900
|
-
declare const AccordionContent: ForwardRefExoticComponent6<AccordionContentProps & RefAttributes6<HTMLDivElement>>;
|
|
1901
|
-
import { ForwardRefExoticComponent as ForwardRefExoticComponent7, HTMLAttributes as HTMLAttributes17, ReactNode as ReactNode16, RefAttributes as RefAttributes7 } from "react";
|
|
1902
|
-
import { HTMLAttributes as HTMLAttributes15, MutableRefObject, ReactElement as ReactElement3 } from "react";
|
|
1903
|
-
import { ForwardRefExoticComponent as ForwardRefExoticComponent_tcubfn10 } from "react";
|
|
1904
|
-
import { RefAttributes as RefAttributes_miuf5610 } from "react";
|
|
2018
|
+
declare const Textarea: ForwardRefExoticComponent_tcubfn10<TextareaProps & RefAttributes_miuf5610<HTMLTextAreaElement>>;
|
|
2019
|
+
import { ForwardRefExoticComponent as ForwardRefExoticComponent8, HTMLAttributes as HTMLAttributes18, ReactNode as ReactNode17, RefAttributes as RefAttributes8 } from "react";
|
|
2020
|
+
import { HTMLAttributes as HTMLAttributes16, MutableRefObject, ReactElement as ReactElement3 } from "react";
|
|
2021
|
+
import { ForwardRefExoticComponent as ForwardRefExoticComponent_tcubfn11 } from "react";
|
|
2022
|
+
import { RefAttributes as RefAttributes_miuf5611 } from "react";
|
|
1905
2023
|
declare const SIDEBAR_COOKIE_NAME = "sidebar_state";
|
|
1906
2024
|
declare const SIDEBAR_COOKIE_MAX_AGE: number;
|
|
1907
2025
|
declare const SIDEBAR_WIDTH = "16rem";
|
|
@@ -1953,7 +2071,7 @@ interface SidebarContextValue {
|
|
|
1953
2071
|
setIsResizing: React.Dispatch<React.SetStateAction<boolean>>;
|
|
1954
2072
|
}
|
|
1955
2073
|
declare function useSidebar(): SidebarContextValue;
|
|
1956
|
-
interface SidebarProviderProps extends
|
|
2074
|
+
interface SidebarProviderProps extends HTMLAttributes16<HTMLDivElement> {
|
|
1957
2075
|
defaultOpen?: boolean;
|
|
1958
2076
|
open?: boolean;
|
|
1959
2077
|
onOpenChange?: (open: boolean) => void;
|
|
@@ -1973,15 +2091,15 @@ interface SidebarProviderProps extends HTMLAttributes15<HTMLDivElement> {
|
|
|
1973
2091
|
width?: string;
|
|
1974
2092
|
widthMobile?: string;
|
|
1975
2093
|
}
|
|
1976
|
-
declare const SidebarProvider:
|
|
2094
|
+
declare const SidebarProvider: ForwardRefExoticComponent_tcubfn11<SidebarProviderProps & RefAttributes_miuf5611<HTMLDivElement>>;
|
|
1977
2095
|
type SidebarTriggerProps = ButtonProps;
|
|
1978
2096
|
/** Ghost icon button calling toggleSidebar(). The icon mirrors the
|
|
1979
2097
|
* sidebar's side, and its tooltip names the action with the toggle
|
|
1980
2098
|
* keystroke by default. With `openOnHover` it switches between open and on
|
|
1981
2099
|
* hover (a dashed glyph), and the hover zone reaches its far side when it
|
|
1982
2100
|
* sits beside the sidebar's edge. */
|
|
1983
|
-
declare const SidebarTrigger:
|
|
1984
|
-
interface SidebarRailProps extends
|
|
2101
|
+
declare const SidebarTrigger: ForwardRefExoticComponent_tcubfn11<ButtonProps & RefAttributes_miuf5611<HTMLButtonElement>>;
|
|
2102
|
+
interface SidebarRailProps extends HTMLAttributes16<HTMLButtonElement> {
|
|
1985
2103
|
/** Pin the tooltip open/closed; `undefined` leaves it on hover. */
|
|
1986
2104
|
tooltipOpen?: boolean;
|
|
1987
2105
|
}
|
|
@@ -1989,15 +2107,15 @@ interface SidebarRailProps extends HTMLAttributes15<HTMLButtonElement> {
|
|
|
1989
2107
|
* the desktop shell: drag it to resize (clamped), click it to collapse, and
|
|
1990
2108
|
* its tooltip explains both with the toggle keystroke. Hovering it
|
|
1991
2109
|
* brightens the edge border. */
|
|
1992
|
-
declare const SidebarRail:
|
|
1993
|
-
type SidebarInsetProps =
|
|
1994
|
-
declare const SidebarInset:
|
|
2110
|
+
declare const SidebarRail: ForwardRefExoticComponent_tcubfn11<SidebarRailProps & RefAttributes_miuf5611<HTMLButtonElement>>;
|
|
2111
|
+
type SidebarInsetProps = HTMLAttributes16<HTMLElement>;
|
|
2112
|
+
declare const SidebarInset: ForwardRefExoticComponent_tcubfn11<SidebarInsetProps & RefAttributes_miuf5611<HTMLElement>>;
|
|
1995
2113
|
type SidebarInputProps = React.InputHTMLAttributes<HTMLInputElement>;
|
|
1996
|
-
declare const SidebarInput:
|
|
1997
|
-
type SidebarSectionProps =
|
|
1998
|
-
declare const SidebarHeader:
|
|
1999
|
-
declare const SidebarFooter:
|
|
2000
|
-
declare const SidebarSeparator:
|
|
2114
|
+
declare const SidebarInput: ForwardRefExoticComponent_tcubfn11<SidebarInputProps & RefAttributes_miuf5611<HTMLInputElement>>;
|
|
2115
|
+
type SidebarSectionProps = HTMLAttributes16<HTMLDivElement>;
|
|
2116
|
+
declare const SidebarHeader: ForwardRefExoticComponent_tcubfn11<SidebarSectionProps & RefAttributes_miuf5611<HTMLDivElement>>;
|
|
2117
|
+
declare const SidebarFooter: ForwardRefExoticComponent_tcubfn11<SidebarSectionProps & RefAttributes_miuf5611<HTMLDivElement>>;
|
|
2118
|
+
declare const SidebarSeparator: ForwardRefExoticComponent_tcubfn11<SidebarSectionProps & RefAttributes_miuf5611<HTMLDivElement>>;
|
|
2001
2119
|
interface SidebarGroupProps extends SidebarSectionProps {
|
|
2002
2120
|
/** Makes the group's SidebarGroupLabel a toggle that collapses everything
|
|
2003
2121
|
* rendered after it — a group-level accordion. Uncontrolled by default;
|
|
@@ -2007,28 +2125,28 @@ interface SidebarGroupProps extends SidebarSectionProps {
|
|
|
2007
2125
|
defaultOpen?: boolean;
|
|
2008
2126
|
onOpenChange?: (open: boolean) => void;
|
|
2009
2127
|
}
|
|
2010
|
-
declare const SidebarGroup:
|
|
2011
|
-
interface SidebarGroupLabelProps extends
|
|
2128
|
+
declare const SidebarGroup: ForwardRefExoticComponent_tcubfn11<SidebarGroupProps & RefAttributes_miuf5611<HTMLDivElement>>;
|
|
2129
|
+
interface SidebarGroupLabelProps extends HTMLAttributes16<HTMLDivElement> {
|
|
2012
2130
|
render?: ReactElement3;
|
|
2013
2131
|
asChild?: boolean;
|
|
2014
2132
|
}
|
|
2015
|
-
declare const SidebarGroupLabel:
|
|
2016
|
-
interface SidebarGroupActionProps extends
|
|
2133
|
+
declare const SidebarGroupLabel: ForwardRefExoticComponent_tcubfn11<SidebarGroupLabelProps & RefAttributes_miuf5611<HTMLDivElement>>;
|
|
2134
|
+
interface SidebarGroupActionProps extends HTMLAttributes16<HTMLButtonElement> {
|
|
2017
2135
|
render?: ReactElement3;
|
|
2018
2136
|
asChild?: boolean;
|
|
2019
2137
|
}
|
|
2020
|
-
declare const SidebarGroupAction:
|
|
2138
|
+
declare const SidebarGroupAction: ForwardRefExoticComponent_tcubfn11<SidebarGroupActionProps & RefAttributes_miuf5611<HTMLButtonElement>>;
|
|
2021
2139
|
/** Header action cluster: 1–3 SidebarGroupActions laid out in a row over the
|
|
2022
2140
|
* group label's right edge. Use instead of a lone SidebarGroupAction when a
|
|
2023
2141
|
* section needs several controls. */
|
|
2024
|
-
type SidebarGroupActionsProps =
|
|
2025
|
-
declare const SidebarGroupActions:
|
|
2026
|
-
declare const SidebarGroupContent:
|
|
2027
|
-
import { VariantProps as
|
|
2028
|
-
import { AnchorHTMLAttributes, ButtonHTMLAttributes as ButtonHTMLAttributes3, HTMLAttributes as
|
|
2142
|
+
type SidebarGroupActionsProps = HTMLAttributes16<HTMLDivElement>;
|
|
2143
|
+
declare const SidebarGroupActions: ForwardRefExoticComponent_tcubfn11<SidebarGroupActionsProps & RefAttributes_miuf5611<HTMLDivElement>>;
|
|
2144
|
+
declare const SidebarGroupContent: ForwardRefExoticComponent_tcubfn11<SidebarSectionProps & RefAttributes_miuf5611<HTMLDivElement>>;
|
|
2145
|
+
import { VariantProps as VariantProps4 } from "class-variance-authority";
|
|
2146
|
+
import { AnchorHTMLAttributes, ButtonHTMLAttributes as ButtonHTMLAttributes3, HTMLAttributes as HTMLAttributes17, LiHTMLAttributes, ReactElement as ReactElement4 } from "react";
|
|
2029
2147
|
import { Context as Context_rri5bl2 } from "react";
|
|
2030
|
-
import { ForwardRefExoticComponent as
|
|
2031
|
-
import { RefAttributes as
|
|
2148
|
+
import { ForwardRefExoticComponent as ForwardRefExoticComponent_tcubfn12 } from "react";
|
|
2149
|
+
import { RefAttributes as RefAttributes_miuf5612 } from "react";
|
|
2032
2150
|
import { ClassProp as ClassProp_wz9o0r5 } from "class-variance-authority/types";
|
|
2033
2151
|
/** The selection a `Sidebar` holds for buttons that carry a `value`. */
|
|
2034
2152
|
interface SidebarSelectionValue {
|
|
@@ -2036,7 +2154,7 @@ interface SidebarSelectionValue {
|
|
|
2036
2154
|
select: (value: string) => void;
|
|
2037
2155
|
}
|
|
2038
2156
|
declare const SidebarSelection: Context_rri5bl2<SidebarSelectionValue | null>;
|
|
2039
|
-
interface SidebarMenuProps extends
|
|
2157
|
+
interface SidebarMenuProps extends HTMLAttributes17<HTMLUListElement> {
|
|
2040
2158
|
/** Pins the menu's rows to one step of the size ladder. Omitted, they
|
|
2041
2159
|
* follow the surrounding SizeProvider. */
|
|
2042
2160
|
size?: SizeVariant;
|
|
@@ -2044,7 +2162,7 @@ interface SidebarMenuProps extends HTMLAttributes16<HTMLUListElement> {
|
|
|
2044
2162
|
* hover background only. @default true */
|
|
2045
2163
|
focusRing?: boolean;
|
|
2046
2164
|
}
|
|
2047
|
-
declare const SidebarMenu:
|
|
2165
|
+
declare const SidebarMenu: ForwardRefExoticComponent_tcubfn12<SidebarMenuProps & RefAttributes_miuf5612<HTMLUListElement>>;
|
|
2048
2166
|
interface SidebarMenuItemProps extends LiHTMLAttributes<HTMLLIElement> {
|
|
2049
2167
|
/** The row folds a `SidebarMenuSub` under it: its button toggles the sub-menu and shows a chevron. */
|
|
2050
2168
|
collapsible?: boolean;
|
|
@@ -2055,13 +2173,13 @@ interface SidebarMenuItemProps extends LiHTMLAttributes<HTMLLIElement> {
|
|
|
2055
2173
|
/** Called when a collapsible row opens or closes. */
|
|
2056
2174
|
onOpenChange?: (open: boolean) => void;
|
|
2057
2175
|
}
|
|
2058
|
-
declare const SidebarMenuItem:
|
|
2176
|
+
declare const SidebarMenuItem: ForwardRefExoticComponent_tcubfn12<SidebarMenuItemProps & RefAttributes_miuf5612<HTMLLIElement>>;
|
|
2059
2177
|
type SidebarMenuSubItemProps = LiHTMLAttributes<HTMLLIElement>;
|
|
2060
|
-
declare const SidebarMenuSubItem:
|
|
2178
|
+
declare const SidebarMenuSubItem: ForwardRefExoticComponent_tcubfn12<SidebarMenuSubItemProps & RefAttributes_miuf5612<HTMLLIElement>>;
|
|
2061
2179
|
declare const sidebarMenuButtonVariants: (props?: ({
|
|
2062
2180
|
variant?: "default" | "outline" | null | undefined;
|
|
2063
2181
|
} & ClassProp_wz9o0r5) | undefined) => string;
|
|
2064
|
-
interface SidebarMenuButtonProps extends ButtonHTMLAttributes3<HTMLButtonElement>,
|
|
2182
|
+
interface SidebarMenuButtonProps extends ButtonHTMLAttributes3<HTMLButtonElement>, VariantProps4<typeof sidebarMenuButtonVariants> {
|
|
2065
2183
|
isActive?: boolean;
|
|
2066
2184
|
size?: "default" | "sm" | "lg";
|
|
2067
2185
|
icon?: IconComponent;
|
|
@@ -2081,33 +2199,33 @@ interface SidebarMenuButtonProps extends ButtonHTMLAttributes3<HTMLButtonElement
|
|
|
2081
2199
|
render?: ReactElement4;
|
|
2082
2200
|
asChild?: boolean;
|
|
2083
2201
|
}
|
|
2084
|
-
declare const SidebarMenuButton:
|
|
2202
|
+
declare const SidebarMenuButton: ForwardRefExoticComponent_tcubfn12<SidebarMenuButtonProps & RefAttributes_miuf5612<HTMLButtonElement>>;
|
|
2085
2203
|
interface SidebarMenuActionProps extends ButtonHTMLAttributes3<HTMLButtonElement> {
|
|
2086
2204
|
showOnHover?: boolean;
|
|
2087
2205
|
render?: ReactElement4;
|
|
2088
2206
|
asChild?: boolean;
|
|
2089
2207
|
}
|
|
2090
|
-
declare const SidebarMenuAction:
|
|
2091
|
-
interface SidebarMenuActionsProps extends
|
|
2208
|
+
declare const SidebarMenuAction: ForwardRefExoticComponent_tcubfn12<SidebarMenuActionProps & RefAttributes_miuf5612<HTMLButtonElement>>;
|
|
2209
|
+
interface SidebarMenuActionsProps extends HTMLAttributes17<HTMLDivElement> {
|
|
2092
2210
|
/** Hide the cluster until the row is hovered or focused. */
|
|
2093
2211
|
showOnHover?: boolean;
|
|
2094
2212
|
}
|
|
2095
2213
|
/** Row-level cluster for more than one SidebarMenuAction. It owns the
|
|
2096
2214
|
* positioning and publishes the whole count to the row, so the button
|
|
2097
2215
|
* reserves the exact gutter the cluster occupies. */
|
|
2098
|
-
declare const SidebarMenuActions:
|
|
2099
|
-
type SidebarMenuBadgeProps =
|
|
2100
|
-
declare const SidebarMenuBadge:
|
|
2101
|
-
interface SidebarMenuSkeletonProps extends
|
|
2216
|
+
declare const SidebarMenuActions: ForwardRefExoticComponent_tcubfn12<SidebarMenuActionsProps & RefAttributes_miuf5612<HTMLDivElement>>;
|
|
2217
|
+
type SidebarMenuBadgeProps = HTMLAttributes17<HTMLDivElement>;
|
|
2218
|
+
declare const SidebarMenuBadge: ForwardRefExoticComponent_tcubfn12<SidebarMenuBadgeProps & RefAttributes_miuf5612<HTMLDivElement>>;
|
|
2219
|
+
interface SidebarMenuSkeletonProps extends HTMLAttributes17<HTMLDivElement> {
|
|
2102
2220
|
showIcon?: boolean;
|
|
2103
2221
|
}
|
|
2104
|
-
declare const SidebarMenuSkeleton:
|
|
2105
|
-
interface SidebarMenuSubProps extends
|
|
2222
|
+
declare const SidebarMenuSkeleton: ForwardRefExoticComponent_tcubfn12<SidebarMenuSkeletonProps & RefAttributes_miuf5612<HTMLDivElement>>;
|
|
2223
|
+
interface SidebarMenuSubProps extends HTMLAttributes17<HTMLUListElement> {
|
|
2106
2224
|
/** Built-in measured-height collapse. Omitted, the sub-menu follows its
|
|
2107
2225
|
* `collapsible` row's state, or stays visible without one. */
|
|
2108
2226
|
open?: boolean;
|
|
2109
2227
|
}
|
|
2110
|
-
declare const SidebarMenuSub:
|
|
2228
|
+
declare const SidebarMenuSub: ForwardRefExoticComponent_tcubfn12<SidebarMenuSubProps & RefAttributes_miuf5612<HTMLUListElement>>;
|
|
2111
2229
|
interface SidebarMenuSubButtonProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
|
|
2112
2230
|
isActive?: boolean;
|
|
2113
2231
|
size?: "sm" | "md";
|
|
@@ -2117,8 +2235,8 @@ interface SidebarMenuSubButtonProps extends AnchorHTMLAttributes<HTMLAnchorEleme
|
|
|
2117
2235
|
render?: ReactElement4;
|
|
2118
2236
|
asChild?: boolean;
|
|
2119
2237
|
}
|
|
2120
|
-
declare const SidebarMenuSubButton:
|
|
2121
|
-
interface SidebarProps extends Omit<
|
|
2238
|
+
declare const SidebarMenuSubButton: ForwardRefExoticComponent_tcubfn12<SidebarMenuSubButtonProps & RefAttributes_miuf5612<HTMLAnchorElement>>;
|
|
2239
|
+
interface SidebarProps extends Omit<HTMLAttributes18<HTMLDivElement>, "defaultValue" | "onDrag" | "onDragStart" | "onDragEnd" | "onAnimationStart" | "onAnimationEnd" | "onAnimationIteration"> {
|
|
2122
2240
|
/** The edge it sits on; the shortcut key and the rail mirror it. Defaults to `'left'`. */
|
|
2123
2241
|
side?: "left" | "right";
|
|
2124
2242
|
/** `'sidebar'` sits flush with an inner border, `'floating'` lifts it onto its own card one surface level up, `'inset'` makes the main region the card. Defaults to `'sidebar'`. */
|
|
@@ -2140,9 +2258,9 @@ interface SidebarProps extends Omit<HTMLAttributes17<HTMLDivElement>, "defaultVa
|
|
|
2140
2258
|
/** Extra classes for the sidebar column (`h-full` pins it to a bounded frame). */
|
|
2141
2259
|
className?: string;
|
|
2142
2260
|
/** The sidebar's parts: `Sidebar.Header`, `Sidebar.Content`, `Sidebar.Footer`. */
|
|
2143
|
-
children?:
|
|
2261
|
+
children?: ReactNode17;
|
|
2144
2262
|
}
|
|
2145
|
-
type SidebarComponent =
|
|
2263
|
+
type SidebarComponent = ForwardRefExoticComponent8<SidebarProps & RefAttributes8<HTMLDivElement>> & {
|
|
2146
2264
|
Provider: typeof SidebarProvider;
|
|
2147
2265
|
Trigger: typeof SidebarTrigger;
|
|
2148
2266
|
Rail: typeof SidebarRail;
|
|
@@ -2239,12 +2357,12 @@ type SidebarComponent = ForwardRefExoticComponent7<SidebarProps & RefAttributes7
|
|
|
2239
2357
|
* @example {@include ./examples.mdx}
|
|
2240
2358
|
*/
|
|
2241
2359
|
declare const Sidebar: SidebarComponent;
|
|
2242
|
-
interface SidebarContentProps extends
|
|
2360
|
+
interface SidebarContentProps extends HTMLAttributes18<HTMLDivElement> {
|
|
2243
2361
|
viewportClassName?: string;
|
|
2244
2362
|
}
|
|
2245
|
-
declare const SidebarContent:
|
|
2363
|
+
declare const SidebarContent: ForwardRefExoticComponent8<SidebarContentProps & RefAttributes8<HTMLDivElement>>;
|
|
2246
2364
|
import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
|
|
2247
|
-
import { ComponentPropsWithoutRef, ForwardRefExoticComponent as
|
|
2365
|
+
import { ComponentPropsWithoutRef, ForwardRefExoticComponent as ForwardRefExoticComponent9, ReactNode as ReactNode18, RefAttributes as RefAttributes9 } from "react";
|
|
2248
2366
|
import { TabsListProps as TabsListProps_6iqhkk } from "@base-ui/react";
|
|
2249
2367
|
interface TabsProps extends Omit<ComponentPropsWithoutRef<typeof TabsPrimitive.Root>, "onValueChange" | "value" | "defaultValue" | "onSelect"> {
|
|
2250
2368
|
/** Controlled active tab value. Takes precedence over selectedIndex. */
|
|
@@ -2262,9 +2380,9 @@ interface TabsProps extends Omit<ComponentPropsWithoutRef<typeof TabsPrimitive.R
|
|
|
2262
2380
|
/** Pins the segmented control to one step of the size ladder (default 36px outer, compact 28px). Defaults to the surrounding SizeProvider. */
|
|
2263
2381
|
size?: SizeVariant;
|
|
2264
2382
|
/** Tabs.List and Tabs.Panel children. */
|
|
2265
|
-
children?:
|
|
2383
|
+
children?: ReactNode18;
|
|
2266
2384
|
}
|
|
2267
|
-
type TabsComponent =
|
|
2385
|
+
type TabsComponent = ForwardRefExoticComponent9<TabsProps & RefAttributes9<HTMLDivElement>> & {
|
|
2268
2386
|
List: typeof TabsList;
|
|
2269
2387
|
Item: typeof TabItem;
|
|
2270
2388
|
Panel: typeof TabPanel;
|
|
@@ -2291,7 +2409,7 @@ type TabsComponent = ForwardRefExoticComponent8<TabsProps & RefAttributes8<HTMLD
|
|
|
2291
2409
|
*/
|
|
2292
2410
|
declare const Tabs: TabsComponent;
|
|
2293
2411
|
type TabsListProps = ComponentPropsWithoutRef<typeof TabsPrimitive.List>;
|
|
2294
|
-
declare const TabsList:
|
|
2412
|
+
declare const TabsList: ForwardRefExoticComponent9<Omit<Omit<TabsListProps_6iqhkk, "ref"> & RefAttributes9<HTMLDivElement>, "ref"> & RefAttributes9<HTMLDivElement>>;
|
|
2295
2413
|
interface TabItemProps extends ComponentPropsWithoutRef<typeof TabsPrimitive.Tab> {
|
|
2296
2414
|
value: string;
|
|
2297
2415
|
icon?: IconComponent;
|
|
@@ -2299,15 +2417,15 @@ interface TabItemProps extends ComponentPropsWithoutRef<typeof TabsPrimitive.Tab
|
|
|
2299
2417
|
/** @internal Auto-assigned by TabsList. */
|
|
2300
2418
|
_index?: number;
|
|
2301
2419
|
}
|
|
2302
|
-
declare const TabItem:
|
|
2420
|
+
declare const TabItem: ForwardRefExoticComponent9<TabItemProps & RefAttributes9<HTMLButtonElement>>;
|
|
2303
2421
|
interface TabPanelProps extends ComponentPropsWithoutRef<typeof TabsPrimitive.Panel> {
|
|
2304
2422
|
value: string;
|
|
2305
2423
|
}
|
|
2306
|
-
declare const TabPanel:
|
|
2307
|
-
import { ForwardRefExoticComponent as
|
|
2308
|
-
interface TabsSubtleProps extends Omit<
|
|
2424
|
+
declare const TabPanel: ForwardRefExoticComponent9<TabPanelProps & RefAttributes9<HTMLDivElement>>;
|
|
2425
|
+
import { ForwardRefExoticComponent as ForwardRefExoticComponent10, HTMLAttributes as HTMLAttributes19, ReactNode as ReactNode19, RefAttributes as RefAttributes10 } from "react";
|
|
2426
|
+
interface TabsSubtleProps extends Omit<HTMLAttributes19<HTMLDivElement>, "onSelect"> {
|
|
2309
2427
|
/** TabsSubtle.Item children, and optionally the TabsSubtle.Panel children they select. */
|
|
2310
|
-
children:
|
|
2428
|
+
children: ReactNode19;
|
|
2311
2429
|
/** Index of the currently selected tab. Controlled — pair it with `onSelect`. */
|
|
2312
2430
|
selectedIndex?: number;
|
|
2313
2431
|
/** Selected tab on first render when uncontrolled. Defaults to `0`. */
|
|
@@ -2321,7 +2439,7 @@ interface TabsSubtleProps extends Omit<HTMLAttributes18<HTMLDivElement>, "onSele
|
|
|
2321
2439
|
/** Pins the tabs to one step of the size ladder (default 36px, compact 28px). Defaults to the surrounding SizeProvider. */
|
|
2322
2440
|
size?: SizeVariant;
|
|
2323
2441
|
}
|
|
2324
|
-
type TabsSubtleComponent =
|
|
2442
|
+
type TabsSubtleComponent = ForwardRefExoticComponent10<TabsSubtleProps & RefAttributes10<HTMLDivElement>> & {
|
|
2325
2443
|
Item: typeof TabsSubtleItem;
|
|
2326
2444
|
Panel: typeof TabsSubtlePanel;
|
|
2327
2445
|
};
|
|
@@ -2348,7 +2466,7 @@ type TabsSubtleComponent = ForwardRefExoticComponent9<TabsSubtleProps & RefAttri
|
|
|
2348
2466
|
* @example {@include ./examples.mdx}
|
|
2349
2467
|
*/
|
|
2350
2468
|
declare const TabsSubtle: TabsSubtleComponent;
|
|
2351
|
-
interface TabsSubtleItemProps extends
|
|
2469
|
+
interface TabsSubtleItemProps extends HTMLAttributes19<HTMLButtonElement> {
|
|
2352
2470
|
/** Icon displayed in the tab. */
|
|
2353
2471
|
icon?: IconComponent;
|
|
2354
2472
|
/** Text label for the tab. */
|
|
@@ -2356,8 +2474,8 @@ interface TabsSubtleItemProps extends HTMLAttributes18<HTMLButtonElement> {
|
|
|
2356
2474
|
/** Position index within the tab list. */
|
|
2357
2475
|
index: number;
|
|
2358
2476
|
}
|
|
2359
|
-
declare const TabsSubtleItem:
|
|
2360
|
-
interface TabsSubtlePanelProps extends
|
|
2477
|
+
declare const TabsSubtleItem: ForwardRefExoticComponent10<TabsSubtleItemProps & RefAttributes10<HTMLButtonElement>>;
|
|
2478
|
+
interface TabsSubtlePanelProps extends HTMLAttributes19<HTMLDivElement> {
|
|
2361
2479
|
/** Index of this panel; rendered only when it matches the selected tab. */
|
|
2362
2480
|
index: number;
|
|
2363
2481
|
/** Currently selected tab index. Defaults to the enclosing TabsSubtle's selection. */
|
|
@@ -2365,11 +2483,11 @@ interface TabsSubtlePanelProps extends HTMLAttributes18<HTMLDivElement> {
|
|
|
2365
2483
|
/** Must match the TabsSubtle idPrefix. Defaults to the enclosing TabsSubtle's prefix. */
|
|
2366
2484
|
idPrefix?: string;
|
|
2367
2485
|
/** Panel content, only rendered when selected. */
|
|
2368
|
-
children:
|
|
2486
|
+
children: ReactNode19;
|
|
2369
2487
|
}
|
|
2370
|
-
declare const TabsSubtlePanel:
|
|
2371
|
-
import { ReactNode as
|
|
2372
|
-
import { HTMLAttributes as
|
|
2488
|
+
declare const TabsSubtlePanel: ForwardRefExoticComponent10<TabsSubtlePanelProps & RefAttributes10<HTMLDivElement>>;
|
|
2489
|
+
import { ReactNode as ReactNode21 } from "react";
|
|
2490
|
+
import { HTMLAttributes as HTMLAttributes20, ReactNode as ReactNode20, RefObject as RefObject12 } from "react";
|
|
2373
2491
|
/** What opened the overlay: the pressed trigger and the press point. */
|
|
2374
2492
|
interface MorphOrigin {
|
|
2375
2493
|
trigger?: HTMLElement;
|
|
@@ -2378,18 +2496,18 @@ interface MorphOrigin {
|
|
|
2378
2496
|
y: number;
|
|
2379
2497
|
};
|
|
2380
2498
|
}
|
|
2381
|
-
import { ForwardRefExoticComponent as
|
|
2382
|
-
import { RefAttributes as
|
|
2499
|
+
import { ForwardRefExoticComponent as ForwardRefExoticComponent_tcubfn13 } from "react";
|
|
2500
|
+
import { RefAttributes as RefAttributes_miuf5613 } from "react";
|
|
2383
2501
|
import { JSX as JSX_1kxb16 } from "react";
|
|
2384
2502
|
type DialogSlotProps = SlotProps;
|
|
2385
2503
|
/** The open state and origin `DialogState` provides, for content built on another Base UI popup (Sheet). */
|
|
2386
2504
|
declare const useDialogState: () => {
|
|
2387
2505
|
open: boolean;
|
|
2388
|
-
origin:
|
|
2506
|
+
origin: RefObject12<MorphOrigin>;
|
|
2389
2507
|
};
|
|
2390
|
-
declare const DialogTrigger:
|
|
2391
|
-
declare const DialogClose:
|
|
2392
|
-
interface DialogContentProps extends
|
|
2508
|
+
declare const DialogTrigger: ForwardRefExoticComponent_tcubfn13<SlotProps & RefAttributes_miuf5613<HTMLButtonElement>>;
|
|
2509
|
+
declare const DialogClose: ForwardRefExoticComponent_tcubfn13<SlotProps & RefAttributes_miuf5613<HTMLButtonElement>>;
|
|
2510
|
+
interface DialogContentProps extends HTMLAttributes20<HTMLDivElement> {
|
|
2393
2511
|
/** Width: 400, 540, or 880. Compact regions narrow each by 1 notch: 360,
|
|
2394
2512
|
* 480, 800. `xl` is the canvas for composed layouts — a sidebar beside a
|
|
2395
2513
|
* panel — which usually pair it with `className="p-0"` and a fixed
|
|
@@ -2410,7 +2528,7 @@ interface DialogContentProps extends HTMLAttributes19<HTMLDivElement> {
|
|
|
2410
2528
|
* edge still. Defaults to `"center"`. */
|
|
2411
2529
|
position?: "center" | "top";
|
|
2412
2530
|
/** Where the panel grows from (see Morph): the pressed trigger (its center when none), the press point, its own center, a viewport edge, or a ref to any element. Defaults to `'trigger'`. */
|
|
2413
|
-
from?: "trigger" | "pointer" | "center" | "top" | "right" | "bottom" | "left" |
|
|
2531
|
+
from?: "trigger" | "pointer" | "center" | "top" | "right" | "bottom" | "left" | RefObject12<HTMLElement | null>;
|
|
2414
2532
|
/** How it grows (see Morph): with the liquid goo neck, a plain morph, a slide or a fade. Defaults to `'goo'`. */
|
|
2415
2533
|
effect?: "goo" | "morph" | "slide" | "fade";
|
|
2416
2534
|
/** Hide the trigger while open, so it reads as turning into the panel. Defaults to `false`. */
|
|
@@ -2418,14 +2536,14 @@ interface DialogContentProps extends HTMLAttributes19<HTMLDivElement> {
|
|
|
2418
2536
|
/** Spring tier of a plain morph, slide or fade; goo runs on its own `spring.goo`. Defaults to `'slow'`. */
|
|
2419
2537
|
tier?: "moderate" | "slow";
|
|
2420
2538
|
/** Dialog content. Everything inside reads the dialog's surface level as its substrate. */
|
|
2421
|
-
children?:
|
|
2539
|
+
children?: ReactNode20;
|
|
2422
2540
|
}
|
|
2423
|
-
declare const DialogContent:
|
|
2541
|
+
declare const DialogContent: ForwardRefExoticComponent_tcubfn13<DialogContentProps & RefAttributes_miuf5613<HTMLDivElement>>;
|
|
2424
2542
|
type Element_12xgc16 = JSX_1kxb16["Element"];
|
|
2425
|
-
declare function DialogHeader({ className,...props }:
|
|
2426
|
-
declare function DialogFooter({ className,...props }:
|
|
2427
|
-
declare const DialogTitle:
|
|
2428
|
-
declare const DialogDescription:
|
|
2543
|
+
declare function DialogHeader({ className,...props }: HTMLAttributes20<HTMLDivElement>): Element_12xgc16;
|
|
2544
|
+
declare function DialogFooter({ className,...props }: HTMLAttributes20<HTMLDivElement>): Element_12xgc16;
|
|
2545
|
+
declare const DialogTitle: ForwardRefExoticComponent_tcubfn13<HTMLAttributes20<HTMLHeadingElement> & RefAttributes_miuf5613<HTMLHeadingElement>>;
|
|
2546
|
+
declare const DialogDescription: ForwardRefExoticComponent_tcubfn13<HTMLAttributes20<HTMLParagraphElement> & RefAttributes_miuf5613<HTMLParagraphElement>>;
|
|
2429
2547
|
interface DialogStateProps {
|
|
2430
2548
|
open?: boolean;
|
|
2431
2549
|
defaultOpen?: boolean;
|
|
@@ -2436,7 +2554,7 @@ interface DialogStateProps {
|
|
|
2436
2554
|
trigger?: Element;
|
|
2437
2555
|
event?: Event;
|
|
2438
2556
|
}) => void;
|
|
2439
|
-
}) =>
|
|
2557
|
+
}) => ReactNode20;
|
|
2440
2558
|
}
|
|
2441
2559
|
/**
|
|
2442
2560
|
* A dialog's open state, held here (not in Base UI's Root) because the morph
|
|
@@ -2454,7 +2572,7 @@ interface DialogProps {
|
|
|
2454
2572
|
/** Traps focus and locks page scroll while open. Defaults to `true`. */
|
|
2455
2573
|
modal?: boolean;
|
|
2456
2574
|
/** The trigger and the content — `Dialog.Trigger` plus a `Dialog.Content`. */
|
|
2457
|
-
children?:
|
|
2575
|
+
children?: ReactNode20;
|
|
2458
2576
|
}
|
|
2459
2577
|
/**
|
|
2460
2578
|
* 3 widths, grown out of whatever opened them.
|
|
@@ -2489,10 +2607,10 @@ interface DialogProps {
|
|
|
2489
2607
|
* @example {@include ./examples.mdx}
|
|
2490
2608
|
*/
|
|
2491
2609
|
declare function Dialog({ children, open, defaultOpen, onOpenChange, modal }: DialogProps): Element_12xgc16;
|
|
2492
|
-
import { ForwardRefExoticComponent as
|
|
2493
|
-
import { RefAttributes as
|
|
2610
|
+
import { ForwardRefExoticComponent as ForwardRefExoticComponent_tcubfn14 } from "react";
|
|
2611
|
+
import { RefAttributes as RefAttributes_miuf5614 } from "react";
|
|
2494
2612
|
import { JSX as JSX_1kxb17 } from "react";
|
|
2495
|
-
declare const AlertDialogContent:
|
|
2613
|
+
declare const AlertDialogContent: ForwardRefExoticComponent_tcubfn14<DialogContentProps & RefAttributes_miuf5614<HTMLDivElement>>;
|
|
2496
2614
|
interface AlertDialogProps {
|
|
2497
2615
|
/** Controlled open state. */
|
|
2498
2616
|
open?: boolean;
|
|
@@ -2501,7 +2619,7 @@ interface AlertDialogProps {
|
|
|
2501
2619
|
/** Called when the dialog opens or closes. */
|
|
2502
2620
|
onOpenChange?: (open: boolean) => void;
|
|
2503
2621
|
/** The trigger and the content — `AlertDialog.Trigger` plus an `AlertDialog.Content`. */
|
|
2504
|
-
children?:
|
|
2622
|
+
children?: ReactNode21;
|
|
2505
2623
|
}
|
|
2506
2624
|
type Element_12xgc17 = JSX_1kxb17["Element"];
|
|
2507
2625
|
/**
|
|
@@ -2522,10 +2640,10 @@ type Element_12xgc17 = JSX_1kxb17["Element"];
|
|
|
2522
2640
|
* @example {@include ./examples.mdx}
|
|
2523
2641
|
*/
|
|
2524
2642
|
declare function AlertDialog({ children, open, defaultOpen, onOpenChange }: AlertDialogProps): Element_12xgc17;
|
|
2525
|
-
import { ReactNode as
|
|
2526
|
-
import { HTMLAttributes as
|
|
2527
|
-
import { ForwardRefExoticComponent as
|
|
2528
|
-
import { RefAttributes as
|
|
2643
|
+
import { ReactNode as ReactNode23, RefObject as RefObject13 } from "react";
|
|
2644
|
+
import { HTMLAttributes as HTMLAttributes21, ReactElement as ReactElement5, ReactNode as ReactNode22 } from "react";
|
|
2645
|
+
import { ForwardRefExoticComponent as ForwardRefExoticComponent_tcubfn15 } from "react";
|
|
2646
|
+
import { RefAttributes as RefAttributes_miuf5615 } from "react";
|
|
2529
2647
|
/** What MenuItem hands to the popup's primitive wrapper. `element` is the
|
|
2530
2648
|
* styled row div (visuals + fluid hover registration, no children); `children`
|
|
2531
2649
|
* is the row content (icon, label, check). The dropdown wraps them in its
|
|
@@ -2548,7 +2666,7 @@ interface MenuItemRenderOptions {
|
|
|
2548
2666
|
* never sees a handler on the render element. */
|
|
2549
2667
|
onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
|
|
2550
2668
|
element: ReactElement5;
|
|
2551
|
-
children:
|
|
2669
|
+
children: ReactNode22;
|
|
2552
2670
|
}
|
|
2553
2671
|
interface DropdownContextValue {
|
|
2554
2672
|
registerItem: (index: number, element: HTMLElement | null) => void;
|
|
@@ -2578,7 +2696,7 @@ interface DropdownContextValue {
|
|
|
2578
2696
|
declare function useDropdown(): DropdownContextValue;
|
|
2579
2697
|
/** Null-safe context read for callers that render outside a provider. */
|
|
2580
2698
|
declare function useDropdownMaybe(): DropdownContextValue | null;
|
|
2581
|
-
interface MenuItemProps extends
|
|
2699
|
+
interface MenuItemProps extends HTMLAttributes21<HTMLDivElement> {
|
|
2582
2700
|
/** Optional leading icon. When omitted, the row renders text-only with no
|
|
2583
2701
|
* reserved icon column. */
|
|
2584
2702
|
icon?: IconComponent;
|
|
@@ -2598,18 +2716,18 @@ interface MenuItemProps extends HTMLAttributes20<HTMLDivElement> {
|
|
|
2598
2716
|
* re-indexed the visible rows. Selection is keyed on it. */
|
|
2599
2717
|
sourceIndex?: number;
|
|
2600
2718
|
}
|
|
2601
|
-
declare const MenuItem2:
|
|
2602
|
-
import { ForwardRefExoticComponent as
|
|
2603
|
-
import { RefAttributes as
|
|
2719
|
+
declare const MenuItem2: ForwardRefExoticComponent_tcubfn15<MenuItemProps & RefAttributes_miuf5615<HTMLDivElement>>;
|
|
2720
|
+
import { ForwardRefExoticComponent as ForwardRefExoticComponent_tcubfn16 } from "react";
|
|
2721
|
+
import { RefAttributes as RefAttributes_miuf5616 } from "react";
|
|
2604
2722
|
import { JSX as JSX_1kxb18 } from "react";
|
|
2605
2723
|
interface ContextMenuItemProps extends MenuItemProps {
|
|
2606
2724
|
/** Keyboard shortcut shown at the row's end, e.g. `⌘C`. */
|
|
2607
2725
|
shortcut?: string;
|
|
2608
2726
|
}
|
|
2609
|
-
declare const ContextMenuItem:
|
|
2727
|
+
declare const ContextMenuItem: ForwardRefExoticComponent_tcubfn16<ContextMenuItemProps & RefAttributes_miuf5616<HTMLDivElement>>;
|
|
2610
2728
|
interface ContextMenuContentProps {
|
|
2611
2729
|
/** Where the menu grows from (see Morph): the press point, its own center, a viewport edge, or a ref to any element. Defaults to `'pointer'`. */
|
|
2612
|
-
from?: "pointer" | "center" | "top" | "right" | "bottom" | "left" |
|
|
2730
|
+
from?: "pointer" | "center" | "top" | "right" | "bottom" | "left" | RefObject13<HTMLElement | null>;
|
|
2613
2731
|
/** How it grows (see Morph): with the liquid goo neck, a plain morph, a slide or a fade. Defaults to `'goo'`. */
|
|
2614
2732
|
effect?: "goo" | "morph" | "slide" | "fade";
|
|
2615
2733
|
/** Hide the `from` element while open, so it reads as turning into the menu. Defaults to `false`. */
|
|
@@ -2621,9 +2739,9 @@ interface ContextMenuContentProps {
|
|
|
2621
2739
|
/** Extra classes for the menu surface — it is 14rem wide by default. */
|
|
2622
2740
|
className?: string;
|
|
2623
2741
|
/** `ContextMenu.Item` rows, plus `ContextMenu.Label` and `ContextMenu.Separator`. */
|
|
2624
|
-
children?:
|
|
2742
|
+
children?: ReactNode23;
|
|
2625
2743
|
}
|
|
2626
|
-
declare const ContextMenuContent:
|
|
2744
|
+
declare const ContextMenuContent: ForwardRefExoticComponent_tcubfn16<ContextMenuContentProps & RefAttributes_miuf5616<HTMLDivElement>>;
|
|
2627
2745
|
interface ContextMenuProps {
|
|
2628
2746
|
/** Controlled open state. Pair with `onOpenChange`. */
|
|
2629
2747
|
open?: boolean;
|
|
@@ -2636,7 +2754,7 @@ interface ContextMenuProps {
|
|
|
2636
2754
|
/** Pins the rows to one step of the size ladder (default 36px, compact 28px — see Sizes). Omitted, they follow the surrounding SizeProvider. */
|
|
2637
2755
|
size?: SizeVariant;
|
|
2638
2756
|
/** The area and the menu — `ContextMenu.Trigger` plus a `ContextMenu.Content`. */
|
|
2639
|
-
children?:
|
|
2757
|
+
children?: ReactNode23;
|
|
2640
2758
|
}
|
|
2641
2759
|
type Element_12xgc18 = JSX_1kxb18["Element"];
|
|
2642
2760
|
/**
|
|
@@ -2667,10 +2785,10 @@ type Element_12xgc18 = JSX_1kxb18["Element"];
|
|
|
2667
2785
|
declare function ContextMenu({ open, defaultOpen, onOpenChange, disabled, size, children }: ContextMenuProps): Element_12xgc18;
|
|
2668
2786
|
import { MenuTriggerProps } from "@base-ui/react/menu";
|
|
2669
2787
|
import { Menu as Menu2 } from "@base-ui/react/menu";
|
|
2670
|
-
import { ComponentProps, ForwardRefExoticComponent as
|
|
2671
|
-
import { HTMLAttributes as
|
|
2672
|
-
import { ForwardRefExoticComponent as
|
|
2673
|
-
import { RefAttributes as
|
|
2788
|
+
import { ComponentProps, ForwardRefExoticComponent as ForwardRefExoticComponent11, HTMLAttributes as HTMLAttributes23, ReactNode as ReactNode24, RefAttributes as RefAttributes11, RefObject as RefObject15 } from "react";
|
|
2789
|
+
import { HTMLAttributes as HTMLAttributes22, InputHTMLAttributes as InputHTMLAttributes4 } from "react";
|
|
2790
|
+
import { ForwardRefExoticComponent as ForwardRefExoticComponent_tcubfn17 } from "react";
|
|
2791
|
+
import { RefAttributes as RefAttributes_miuf5617 } from "react";
|
|
2674
2792
|
interface DropdownSearchProps extends Omit<InputHTMLAttributes4<HTMLInputElement>, "value" | "onChange" | "size" | "defaultValue"> {
|
|
2675
2793
|
/** The query. Filter the MenuItems you render against it. Optional under `filter`, where the panel holds the query. */
|
|
2676
2794
|
value?: string;
|
|
@@ -2686,19 +2804,19 @@ interface DropdownSearchProps extends Omit<InputHTMLAttributes4<HTMLInputElement
|
|
|
2686
2804
|
/** Take focus when the popup opens. @default true */
|
|
2687
2805
|
autoFocus?: boolean;
|
|
2688
2806
|
}
|
|
2689
|
-
declare const DropdownSearch:
|
|
2690
|
-
declare const DropdownEmpty:
|
|
2807
|
+
declare const DropdownSearch: ForwardRefExoticComponent_tcubfn17<DropdownSearchProps & RefAttributes_miuf5617<HTMLInputElement>>;
|
|
2808
|
+
declare const DropdownEmpty: ForwardRefExoticComponent_tcubfn17<HTMLAttributes22<HTMLDivElement> & RefAttributes_miuf5617<HTMLDivElement>>;
|
|
2691
2809
|
import { JSX as JSX_1kxb19 } from "react";
|
|
2692
|
-
interface DropdownProps extends
|
|
2810
|
+
interface DropdownProps extends HTMLAttributes23<HTMLDivElement> {
|
|
2693
2811
|
/** `Dropdown.Item` rows, plus `Dropdown.Label` and `Dropdown.Separator`. */
|
|
2694
|
-
children:
|
|
2812
|
+
children: ReactNode24;
|
|
2695
2813
|
/** The checked row: drives the animated selected background and the rows' radio semantics. */
|
|
2696
2814
|
checkedIndex?: number;
|
|
2697
2815
|
/** Uncontrolled twin of `checkedIndex`: the panel owns the selection, so rows need no `checked` or `onSelect` of their own. */
|
|
2698
2816
|
defaultCheckedIndex?: number;
|
|
2699
2817
|
/** Called with the newly checked row, or `undefined` when nothing is checked. */
|
|
2700
2818
|
onCheckedIndexChange?: (index: number | undefined) => void;
|
|
2701
|
-
/** Multiple selection: the checked rows. Rows become checkbox items and contiguous runs share one merged background (see
|
|
2819
|
+
/** Multiple selection: the checked rows. Rows become checkbox items and contiguous runs share one merged background (see Checkbox.Group). */
|
|
2702
2820
|
checkedIndices?: number[];
|
|
2703
2821
|
/** Uncontrolled twin of `checkedIndices`: the panel toggles rows itself. */
|
|
2704
2822
|
defaultCheckedIndices?: number[];
|
|
@@ -2709,7 +2827,7 @@ interface DropdownProps extends HTMLAttributes22<HTMLDivElement> {
|
|
|
2709
2827
|
/** Extra classes for the panel surface — it is 18rem wide by default. */
|
|
2710
2828
|
className?: string;
|
|
2711
2829
|
}
|
|
2712
|
-
type DropdownComponent =
|
|
2830
|
+
type DropdownComponent = ForwardRefExoticComponent11<DropdownProps & RefAttributes11<HTMLDivElement>> & {
|
|
2713
2831
|
Menu2: typeof DropdownMenu;
|
|
2714
2832
|
Trigger: typeof DropdownTrigger;
|
|
2715
2833
|
Content: typeof DropdownContent;
|
|
@@ -2747,7 +2865,7 @@ type DropdownComponent = ForwardRefExoticComponent10<DropdownProps & RefAttribut
|
|
|
2747
2865
|
declare const Dropdown: DropdownComponent;
|
|
2748
2866
|
interface DropdownMenuProps {
|
|
2749
2867
|
/** `Dropdown.Trigger` and `Dropdown.Content`. */
|
|
2750
|
-
children:
|
|
2868
|
+
children: ReactNode24;
|
|
2751
2869
|
/** Controlled open state. Pair with `onOpenChange`. */
|
|
2752
2870
|
open?: boolean;
|
|
2753
2871
|
/** Initial open state — uncontrolled. Defaults to `false`. */
|
|
@@ -2766,7 +2884,7 @@ declare const DropdownTrigger: Menu2.Trigger;
|
|
|
2766
2884
|
type MenuPositionerProps = ComponentProps<typeof Menu2.Positioner>;
|
|
2767
2885
|
interface DropdownContentProps {
|
|
2768
2886
|
/** `Dropdown.Item` rows, plus `Dropdown.Label`, `Dropdown.Separator`, `Dropdown.Search`, `Dropdown.Empty`. */
|
|
2769
|
-
children:
|
|
2887
|
+
children: ReactNode24;
|
|
2770
2888
|
/** Extra classes for the popup surface. */
|
|
2771
2889
|
className?: string;
|
|
2772
2890
|
/** Index of the checked item. Drives the animated selected background and
|
|
@@ -2778,7 +2896,7 @@ interface DropdownContentProps {
|
|
|
2778
2896
|
onCheckedIndexChange?: (index: number | undefined) => void;
|
|
2779
2897
|
/** Multiple selection: the checked rows. Rows become checkbox items that
|
|
2780
2898
|
* keep the menu open when toggled, and contiguous runs share one merged
|
|
2781
|
-
* background (see
|
|
2899
|
+
* background (see Checkbox.Group). */
|
|
2782
2900
|
checkedIndices?: number[];
|
|
2783
2901
|
/** Uncontrolled twin of `checkedIndices`: the popup toggles rows itself. */
|
|
2784
2902
|
defaultCheckedIndices?: number[];
|
|
@@ -2791,7 +2909,7 @@ interface DropdownContentProps {
|
|
|
2791
2909
|
/** Gap to the trigger, in px. Ignored when the menu opens in place over its trigger (`effect="morph"` with `hideSource`). Defaults to `6`. */
|
|
2792
2910
|
sideOffset?: number;
|
|
2793
2911
|
/** Where the menu grows from (see Morph): the trigger, the pointer, its own center, a viewport edge, or a ref to any element. Defaults to `'trigger'`. */
|
|
2794
|
-
from?: "trigger" | "pointer" | "center" | "top" | "right" | "bottom" | "left" |
|
|
2912
|
+
from?: "trigger" | "pointer" | "center" | "top" | "right" | "bottom" | "left" | RefObject15<HTMLElement | null>;
|
|
2795
2913
|
/** How it grows (see Morph): with the liquid goo neck, a plain morph, a slide or a fade. Defaults to `'goo'`. */
|
|
2796
2914
|
effect?: "goo" | "morph" | "slide" | "fade";
|
|
2797
2915
|
/** Hide the trigger while open, so it reads as turning into the menu. Defaults to `false`. */
|
|
@@ -2799,12 +2917,12 @@ interface DropdownContentProps {
|
|
|
2799
2917
|
/** Spring tier of a plain morph, slide or fade; goo runs on its own `spring.goo`. Defaults to `'moderate'`. */
|
|
2800
2918
|
tier?: "moderate" | "slow";
|
|
2801
2919
|
}
|
|
2802
|
-
declare const DropdownContent:
|
|
2803
|
-
declare const DropdownLabel:
|
|
2804
|
-
declare const DropdownSeparator:
|
|
2805
|
-
import { HTMLAttributes as
|
|
2806
|
-
import { ForwardRefExoticComponent as
|
|
2807
|
-
import { RefAttributes as
|
|
2920
|
+
declare const DropdownContent: ForwardRefExoticComponent11<DropdownContentProps & RefAttributes11<HTMLDivElement>>;
|
|
2921
|
+
declare const DropdownLabel: ForwardRefExoticComponent11<HTMLAttributes23<HTMLDivElement> & RefAttributes11<HTMLDivElement>>;
|
|
2922
|
+
declare const DropdownSeparator: ForwardRefExoticComponent11<HTMLAttributes23<HTMLDivElement> & RefAttributes11<HTMLDivElement>>;
|
|
2923
|
+
import { HTMLAttributes as HTMLAttributes24, ReactNode as ReactNode25, RefObject as RefObject16 } from "react";
|
|
2924
|
+
import { ForwardRefExoticComponent as ForwardRefExoticComponent_tcubfn18 } from "react";
|
|
2925
|
+
import { RefAttributes as RefAttributes_miuf5618 } from "react";
|
|
2808
2926
|
import { JSX as JSX_1kxb20 } from "react";
|
|
2809
2927
|
interface PopoverTriggerProps extends SlotProps {
|
|
2810
2928
|
/** Open on hover as well as on press (a tap still toggles it on touch). Defaults to `false`. */
|
|
@@ -2814,9 +2932,9 @@ interface PopoverTriggerProps extends SlotProps {
|
|
|
2814
2932
|
/** Delay before closing once the pointer leaves, in ms. Needs `openOnHover`. Defaults to `0`. */
|
|
2815
2933
|
closeDelay?: number;
|
|
2816
2934
|
}
|
|
2817
|
-
declare const PopoverTrigger:
|
|
2818
|
-
declare const PopoverClose:
|
|
2819
|
-
interface PopoverContentProps extends
|
|
2935
|
+
declare const PopoverTrigger: ForwardRefExoticComponent_tcubfn18<PopoverTriggerProps & RefAttributes_miuf5618<HTMLButtonElement>>;
|
|
2936
|
+
declare const PopoverClose: ForwardRefExoticComponent_tcubfn18<SlotProps & RefAttributes_miuf5618<HTMLButtonElement>>;
|
|
2937
|
+
interface PopoverContentProps extends HTMLAttributes24<HTMLDivElement> {
|
|
2820
2938
|
/** Side of the trigger the panel opens on; it flips when there is no room. Defaults to `'bottom'`. */
|
|
2821
2939
|
side?: "top" | "right" | "bottom" | "left";
|
|
2822
2940
|
/** Alignment along that side. Defaults to `'center'`, or `'start'` when the panel opens in place (`effect="morph"` with `hideSource`). */
|
|
@@ -2824,7 +2942,7 @@ interface PopoverContentProps extends HTMLAttributes23<HTMLDivElement> {
|
|
|
2824
2942
|
/** Gap between trigger and panel in px — the length of the goo neck. Ignored when the panel opens in place over its trigger (`effect="morph"` with `hideSource`). Defaults to `12`. */
|
|
2825
2943
|
sideOffset?: number;
|
|
2826
2944
|
/** Where the panel grows from (see Morph): the pressed trigger, the press point, its own center, a viewport edge, or a ref to any element. Defaults to `'trigger'`. */
|
|
2827
|
-
from?: "trigger" | "pointer" | "center" | "top" | "right" | "bottom" | "left" |
|
|
2945
|
+
from?: "trigger" | "pointer" | "center" | "top" | "right" | "bottom" | "left" | RefObject16<HTMLElement | null>;
|
|
2828
2946
|
/** How it grows (see Morph): with the liquid goo neck, a plain morph, a slide or a fade. Defaults to `'goo'`. */
|
|
2829
2947
|
effect?: "goo" | "morph" | "slide" | "fade";
|
|
2830
2948
|
/** Hide the trigger while open, so it reads as turning into the panel. Defaults to `false`. */
|
|
@@ -2836,11 +2954,11 @@ interface PopoverContentProps extends HTMLAttributes23<HTMLDivElement> {
|
|
|
2836
2954
|
/** Classes for the panel's content box: padding, width, layout. */
|
|
2837
2955
|
className?: string;
|
|
2838
2956
|
/** The panel's content. Everything inside reads the popover's surface level as its substrate. */
|
|
2839
|
-
children?:
|
|
2957
|
+
children?: ReactNode25;
|
|
2840
2958
|
}
|
|
2841
|
-
declare const PopoverContent:
|
|
2842
|
-
declare const PopoverTitle:
|
|
2843
|
-
declare const PopoverDescription:
|
|
2959
|
+
declare const PopoverContent: ForwardRefExoticComponent_tcubfn18<PopoverContentProps & RefAttributes_miuf5618<HTMLDivElement>>;
|
|
2960
|
+
declare const PopoverTitle: ForwardRefExoticComponent_tcubfn18<HTMLAttributes24<HTMLHeadingElement> & RefAttributes_miuf5618<HTMLHeadingElement>>;
|
|
2961
|
+
declare const PopoverDescription: ForwardRefExoticComponent_tcubfn18<HTMLAttributes24<HTMLParagraphElement> & RefAttributes_miuf5618<HTMLParagraphElement>>;
|
|
2844
2962
|
interface PopoverProps {
|
|
2845
2963
|
/** Controlled open state. Pair with `onOpenChange`. */
|
|
2846
2964
|
open?: boolean;
|
|
@@ -2851,7 +2969,7 @@ interface PopoverProps {
|
|
|
2851
2969
|
/** Trap focus and block page interaction while open. Defaults to `false`. */
|
|
2852
2970
|
modal?: boolean;
|
|
2853
2971
|
/** The trigger and the panel — `Popover.Trigger` plus a `Popover.Content`. */
|
|
2854
|
-
children?:
|
|
2972
|
+
children?: ReactNode25;
|
|
2855
2973
|
}
|
|
2856
2974
|
type Element_12xgc20 = JSX_1kxb20["Element"];
|
|
2857
2975
|
/**
|
|
@@ -2879,9 +2997,9 @@ type Element_12xgc20 = JSX_1kxb20["Element"];
|
|
|
2879
2997
|
* @example {@include ./examples.mdx}
|
|
2880
2998
|
*/
|
|
2881
2999
|
declare function Popover2({ open, defaultOpen, onOpenChange, modal, children }: PopoverProps): Element_12xgc20;
|
|
2882
|
-
import { AnchorHTMLAttributes as AnchorHTMLAttributes2, HTMLAttributes as
|
|
2883
|
-
import { ForwardRefExoticComponent as
|
|
2884
|
-
import { RefAttributes as
|
|
3000
|
+
import { AnchorHTMLAttributes as AnchorHTMLAttributes2, HTMLAttributes as HTMLAttributes25, ReactElement as ReactElement6, ReactNode as ReactNode26, RefObject as RefObject17 } from "react";
|
|
3001
|
+
import { ForwardRefExoticComponent as ForwardRefExoticComponent_tcubfn19 } from "react";
|
|
3002
|
+
import { RefAttributes as RefAttributes_miuf5619 } from "react";
|
|
2885
3003
|
import { JSX as JSX_1kxb21 } from "react";
|
|
2886
3004
|
interface PreviewCardTriggerProps extends AnchorHTMLAttributes2<HTMLAnchorElement> {
|
|
2887
3005
|
/** Hover delay before the card opens, in ms. Defaults to `600`. */
|
|
@@ -2893,10 +3011,10 @@ interface PreviewCardTriggerProps extends AnchorHTMLAttributes2<HTMLAnchorElemen
|
|
|
2893
3011
|
/** Extra classes for the link. */
|
|
2894
3012
|
className?: string;
|
|
2895
3013
|
/** The link's content. */
|
|
2896
|
-
children?:
|
|
3014
|
+
children?: ReactNode26;
|
|
2897
3015
|
}
|
|
2898
|
-
declare const PreviewCardTrigger:
|
|
2899
|
-
interface PreviewCardContentProps extends
|
|
3016
|
+
declare const PreviewCardTrigger: ForwardRefExoticComponent_tcubfn19<PreviewCardTriggerProps & RefAttributes_miuf5619<HTMLAnchorElement>>;
|
|
3017
|
+
interface PreviewCardContentProps extends HTMLAttributes25<HTMLDivElement> {
|
|
2900
3018
|
/** Side of the link the card opens on; it flips when there is no room. Defaults to `'bottom'`. */
|
|
2901
3019
|
side?: "top" | "right" | "bottom" | "left";
|
|
2902
3020
|
/** Alignment along that side. Defaults to `'center'`, or `'start'` when the card opens in place (`effect="morph"` with `hideSource`). */
|
|
@@ -2904,7 +3022,7 @@ interface PreviewCardContentProps extends HTMLAttributes24<HTMLDivElement> {
|
|
|
2904
3022
|
/** Gap between link and card in px — the length of the goo neck. Ignored when the card opens in place over its link (`effect="morph"` with `hideSource`). Defaults to `12`. */
|
|
2905
3023
|
sideOffset?: number;
|
|
2906
3024
|
/** Where the card grows from (see Morph): the hovered link, its own center, a viewport edge, or a ref to any element. Defaults to `'trigger'`. */
|
|
2907
|
-
from?: "trigger" | "center" | "top" | "right" | "bottom" | "left" |
|
|
3025
|
+
from?: "trigger" | "center" | "top" | "right" | "bottom" | "left" | RefObject17<HTMLElement | null>;
|
|
2908
3026
|
/** How it grows (see Morph): with the liquid goo neck, a plain morph, a slide or a fade. Defaults to `'goo'`. */
|
|
2909
3027
|
effect?: "goo" | "morph" | "slide" | "fade";
|
|
2910
3028
|
/** Hide the link while open, so it reads as turning into the card. Defaults to `false`. */
|
|
@@ -2916,9 +3034,9 @@ interface PreviewCardContentProps extends HTMLAttributes24<HTMLDivElement> {
|
|
|
2916
3034
|
/** Classes for the card's content box: padding, width, layout. */
|
|
2917
3035
|
className?: string;
|
|
2918
3036
|
/** The card's content. Everything inside reads the card's surface level as its substrate. */
|
|
2919
|
-
children?:
|
|
3037
|
+
children?: ReactNode26;
|
|
2920
3038
|
}
|
|
2921
|
-
declare const PreviewCardContent:
|
|
3039
|
+
declare const PreviewCardContent: ForwardRefExoticComponent_tcubfn19<PreviewCardContentProps & RefAttributes_miuf5619<HTMLDivElement>>;
|
|
2922
3040
|
interface PreviewCardProps {
|
|
2923
3041
|
/** Controlled open state. Pair with `onOpenChange`. */
|
|
2924
3042
|
open?: boolean;
|
|
@@ -2927,7 +3045,7 @@ interface PreviewCardProps {
|
|
|
2927
3045
|
/** Called when the card opens or closes. */
|
|
2928
3046
|
onOpenChange?: (open: boolean) => void;
|
|
2929
3047
|
/** The link and the card — `PreviewCard.Trigger` plus a `PreviewCard.Content`. */
|
|
2930
|
-
children?:
|
|
3048
|
+
children?: ReactNode26;
|
|
2931
3049
|
}
|
|
2932
3050
|
type Element_12xgc21 = JSX_1kxb21["Element"];
|
|
2933
3051
|
/**
|
|
@@ -2953,14 +3071,14 @@ type Element_12xgc21 = JSX_1kxb21["Element"];
|
|
|
2953
3071
|
* @example {@include ./examples.mdx}
|
|
2954
3072
|
*/
|
|
2955
3073
|
declare function PreviewCard({ open, defaultOpen, onOpenChange, children }: PreviewCardProps): Element_12xgc21;
|
|
2956
|
-
import { HTMLAttributes as
|
|
2957
|
-
import { ForwardRefExoticComponent as
|
|
2958
|
-
import { RefAttributes as
|
|
3074
|
+
import { HTMLAttributes as HTMLAttributes26, ReactNode as ReactNode27, RefObject as RefObject18 } from "react";
|
|
3075
|
+
import { ForwardRefExoticComponent as ForwardRefExoticComponent_tcubfn20 } from "react";
|
|
3076
|
+
import { RefAttributes as RefAttributes_miuf5620 } from "react";
|
|
2959
3077
|
import { JSX as JSX_1kxb22 } from "react";
|
|
2960
3078
|
type SheetSide = "top" | "right" | "bottom" | "left";
|
|
2961
|
-
interface SheetContentProps extends
|
|
3079
|
+
interface SheetContentProps extends HTMLAttributes26<HTMLDivElement> {
|
|
2962
3080
|
/** Where the sheet grows from (see Morph): its own edge, the pressed trigger, the press point, its center, another edge, or a ref to any element. Defaults to the sheet's `side`. */
|
|
2963
|
-
from?: "trigger" | "pointer" | "center" | "top" | "right" | "bottom" | "left" |
|
|
3081
|
+
from?: "trigger" | "pointer" | "center" | "top" | "right" | "bottom" | "left" | RefObject18<HTMLElement | null>;
|
|
2964
3082
|
/** How it grows (see Morph): with the liquid goo neck, a plain morph, a slide or a fade. Defaults to `'goo'`. */
|
|
2965
3083
|
effect?: "goo" | "morph" | "slide" | "fade";
|
|
2966
3084
|
/** Hide the trigger while open, so it reads as turning into the sheet. Defaults to `false`. */
|
|
@@ -2972,10 +3090,10 @@ interface SheetContentProps extends HTMLAttributes25<HTMLDivElement> {
|
|
|
2972
3090
|
/** Classes for the sheet's content box: padding, layout. */
|
|
2973
3091
|
className?: string;
|
|
2974
3092
|
/** The sheet's content. Everything inside reads the sheet's surface level as its substrate. */
|
|
2975
|
-
children?:
|
|
3093
|
+
children?: ReactNode27;
|
|
2976
3094
|
}
|
|
2977
|
-
declare const SheetContent:
|
|
2978
|
-
declare const SheetIndent:
|
|
3095
|
+
declare const SheetContent: ForwardRefExoticComponent_tcubfn20<SheetContentProps & RefAttributes_miuf5620<HTMLDivElement>>;
|
|
3096
|
+
declare const SheetIndent: ForwardRefExoticComponent_tcubfn20<HTMLAttributes26<HTMLDivElement> & RefAttributes_miuf5620<HTMLDivElement>>;
|
|
2979
3097
|
interface SheetProps {
|
|
2980
3098
|
/** Controlled open state. */
|
|
2981
3099
|
open?: boolean;
|
|
@@ -2992,7 +3110,7 @@ interface SheetProps {
|
|
|
2992
3110
|
/** Traps focus and locks page scroll while open. Defaults to `true`. */
|
|
2993
3111
|
modal?: boolean;
|
|
2994
3112
|
/** The trigger and the content — `Sheet.Trigger` plus a `Sheet.Content`. */
|
|
2995
|
-
children?:
|
|
3113
|
+
children?: ReactNode27;
|
|
2996
3114
|
}
|
|
2997
3115
|
type Element_12xgc22 = JSX_1kxb22["Element"];
|
|
2998
3116
|
/**
|
|
@@ -3019,9 +3137,9 @@ type Element_12xgc22 = JSX_1kxb22["Element"];
|
|
|
3019
3137
|
* @example {@include ./examples.mdx}
|
|
3020
3138
|
*/
|
|
3021
3139
|
declare function Sheet({ children, open, defaultOpen, onOpenChange, side, snapPoints, defaultSnapPoint, modal }: SheetProps): Element_12xgc22;
|
|
3022
|
-
import { ReactNode as
|
|
3023
|
-
import { ForwardRefExoticComponent as
|
|
3024
|
-
import { RefAttributes as
|
|
3140
|
+
import { ReactNode as ReactNode28 } from "react";
|
|
3141
|
+
import { ForwardRefExoticComponent as ForwardRefExoticComponent_tcubfn21 } from "react";
|
|
3142
|
+
import { RefAttributes as RefAttributes_miuf5621 } from "react";
|
|
3025
3143
|
import { JSX as JSX_1kxb23 } from "react";
|
|
3026
3144
|
type ToastType = "success" | "loading" | "error" | "warning" | "info" | "action";
|
|
3027
3145
|
type ToastPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
|
|
@@ -3077,7 +3195,7 @@ interface ToastTriggerProps extends Omit<SlotProps, "type"> {
|
|
|
3077
3195
|
description?: string;
|
|
3078
3196
|
};
|
|
3079
3197
|
}
|
|
3080
|
-
declare const ToastTrigger:
|
|
3198
|
+
declare const ToastTrigger: ForwardRefExoticComponent_tcubfn21<ToastTriggerProps & RefAttributes_miuf5621<HTMLButtonElement>>;
|
|
3081
3199
|
interface ToastProps {
|
|
3082
3200
|
/** Where toasts stack; the pill sits on that side and the body opens away from the edge. Defaults to `'top-right'`. */
|
|
3083
3201
|
position?: "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
|
|
@@ -3086,7 +3204,7 @@ interface ToastProps {
|
|
|
3086
3204
|
/** Ms a toast stays; hovering pauses it. Defaults to `6000`. */
|
|
3087
3205
|
timeout?: number;
|
|
3088
3206
|
/** The part of the app that can show toasts, with `Toast.Trigger`s or `useToast()`. */
|
|
3089
|
-
children?:
|
|
3207
|
+
children?: ReactNode28;
|
|
3090
3208
|
}
|
|
3091
3209
|
type Element_12xgc23 = JSX_1kxb23["Element"];
|
|
3092
3210
|
/**
|
|
@@ -3116,15 +3234,15 @@ type Element_12xgc23 = JSX_1kxb23["Element"];
|
|
|
3116
3234
|
* @example {@include ./examples.mdx}
|
|
3117
3235
|
*/
|
|
3118
3236
|
declare function Toast({ position, limit, timeout, children }: ToastProps): Element_12xgc23;
|
|
3119
|
-
import { ReactNode as
|
|
3237
|
+
import { ReactNode as ReactNode29, RefObject as RefObject19 } from "react";
|
|
3120
3238
|
import { JSX as JSX_1kxb24 } from "react";
|
|
3121
3239
|
type Element_12xgc24 = JSX_1kxb24["Element"];
|
|
3122
3240
|
declare function TooltipPortalContainer({ value, children }: {
|
|
3123
3241
|
value: HTMLElement | null;
|
|
3124
|
-
children:
|
|
3242
|
+
children: ReactNode29;
|
|
3125
3243
|
}): Element_12xgc24;
|
|
3126
3244
|
interface TooltipProviderProps {
|
|
3127
|
-
children:
|
|
3245
|
+
children: ReactNode29;
|
|
3128
3246
|
/** Hover delay before tooltips open, in ms. Defaults to 200. */
|
|
3129
3247
|
delayDuration?: number;
|
|
3130
3248
|
/** After a tooltip closes, adjacent tooltips opened within this window
|
|
@@ -3139,7 +3257,7 @@ declare function TooltipProvider({ children, delayDuration, skipDelayDuration }:
|
|
|
3139
3257
|
type TooltipSide = "top" | "right" | "bottom" | "left";
|
|
3140
3258
|
interface TooltipProps {
|
|
3141
3259
|
/** The content displayed inside the tooltip. */
|
|
3142
|
-
content:
|
|
3260
|
+
content: ReactNode29;
|
|
3143
3261
|
/** The trigger element. Must accept a ref. */
|
|
3144
3262
|
children: React.ReactElement;
|
|
3145
3263
|
/** Preferred side of the trigger to render the tooltip on. Defaults to `"top"`. */
|
|
@@ -3163,7 +3281,7 @@ interface TooltipProps {
|
|
|
3163
3281
|
/** Called when the tooltip's internal open state changes (before forceOpen is applied). */
|
|
3164
3282
|
onOpenChange?: (open: boolean) => void;
|
|
3165
3283
|
/** Where the label grows from (see Morph): the trigger, the pointer, its own center, a viewport edge, or a ref to any element. Defaults to `'trigger'`. */
|
|
3166
|
-
from?: "trigger" | "pointer" | "center" | "top" | "right" | "bottom" | "left" |
|
|
3284
|
+
from?: "trigger" | "pointer" | "center" | "top" | "right" | "bottom" | "left" | RefObject19<HTMLElement | null>;
|
|
3167
3285
|
/** How it grows (see Morph): with the liquid goo neck, a plain morph, a slide or a fade. `followCursor` tooltips always fade. Defaults to `'goo'`. */
|
|
3168
3286
|
effect?: "goo" | "morph" | "slide" | "fade";
|
|
3169
3287
|
/** Spring tier of a plain morph, slide or fade; goo runs on its own `spring.goo`. Defaults to `'moderate'`. */
|
|
@@ -3190,15 +3308,15 @@ interface TooltipProps {
|
|
|
3190
3308
|
* @example {@include ./examples.mdx}
|
|
3191
3309
|
*/
|
|
3192
3310
|
declare function Tooltip({ content, children, side, sideOffset, delayDuration, className, contentClassName, forceOpen, onOpenChange: onOpenChangeProp, followCursor, from, effect, tier }: TooltipProps): Element_12xgc24;
|
|
3193
|
-
import { ForwardRefExoticComponent as
|
|
3194
|
-
interface TableProps extends
|
|
3311
|
+
import { ForwardRefExoticComponent as ForwardRefExoticComponent12, HTMLAttributes as HTMLAttributes27, ReactNode as ReactNode30, RefAttributes as RefAttributes12, TdHTMLAttributes, ThHTMLAttributes } from "react";
|
|
3312
|
+
interface TableProps extends HTMLAttributes27<HTMLTableElement> {
|
|
3195
3313
|
/** `Table.Header` and `Table.Body` children. */
|
|
3196
|
-
children:
|
|
3314
|
+
children: ReactNode30;
|
|
3197
3315
|
/** Pins the table's rows to one step of the size ladder (default 36px, compact 28px — see Sizes). Defaults to the surrounding SizeProvider, else `"default"`. */
|
|
3198
3316
|
size?: SizeVariant;
|
|
3199
3317
|
}
|
|
3200
3318
|
/** The root plus its compound parts, typed so `<Table.Row>` type-checks. */
|
|
3201
|
-
type TableComponent =
|
|
3319
|
+
type TableComponent = ForwardRefExoticComponent12<TableProps & RefAttributes12<HTMLTableElement>> & {
|
|
3202
3320
|
Header: typeof TableHeader;
|
|
3203
3321
|
Body: typeof TableBody;
|
|
3204
3322
|
Row: typeof TableRow;
|
|
@@ -3224,50 +3342,20 @@ type TableComponent = ForwardRefExoticComponent11<TableProps & RefAttributes11<H
|
|
|
3224
3342
|
* @example {@include ./examples.mdx}
|
|
3225
3343
|
*/
|
|
3226
3344
|
declare const Table: TableComponent;
|
|
3227
|
-
declare const TableHeader:
|
|
3228
|
-
declare const TableBody:
|
|
3229
|
-
interface TableRowProps extends
|
|
3345
|
+
declare const TableHeader: ForwardRefExoticComponent12<HTMLAttributes27<HTMLTableSectionElement> & RefAttributes12<HTMLTableSectionElement>>;
|
|
3346
|
+
declare const TableBody: ForwardRefExoticComponent12<HTMLAttributes27<HTMLTableSectionElement> & RefAttributes12<HTMLTableSectionElement>>;
|
|
3347
|
+
interface TableRowProps extends HTMLAttributes27<HTMLTableRowElement> {
|
|
3230
3348
|
index?: number;
|
|
3231
3349
|
}
|
|
3232
|
-
declare const TableRow:
|
|
3233
|
-
declare const TableHead:
|
|
3234
|
-
declare const TableCell:
|
|
3235
|
-
import {
|
|
3236
|
-
import { ForwardRefExoticComponent as ForwardRefExoticComponent_tcubfn21 } from "react";
|
|
3237
|
-
import { RefAttributes as RefAttributes_miuf5621 } from "react";
|
|
3238
|
-
interface ThinkingIndicatorProps extends HTMLAttributes27<HTMLDivElement> {
|
|
3239
|
-
/** The look: `shimmer` morphs a circle⇄infinity glyph beside a shimmering label (Fluid Functionalism's), `goo` melts three dots into one blob and splits them again beside a plain label. Defaults to `"shimmer"`. */
|
|
3240
|
-
variant?: "shimmer" | "goo";
|
|
3241
|
-
/** Show the glyph (or, for `goo`, the dots) before the label. Set to `false` for a text-only indicator (e.g. inline before a streamed reply). Defaults to `true`. */
|
|
3242
|
-
showIcon?: boolean;
|
|
3243
|
-
/** Step on the size ladder. Wins over the surrounding SizeProvider. Defaults to the provider's step, else `"default"`. */
|
|
3244
|
-
size?: SizeVariant;
|
|
3245
|
-
}
|
|
3246
|
-
/**
|
|
3247
|
-
* Animated status indicator with morphing SVG and cycling text — the
|
|
3248
|
-
* assistant's working state.
|
|
3249
|
-
*
|
|
3250
|
-
* A glyph that morphs circle to infinity and back sits next to a shimmering
|
|
3251
|
-
* label that cycles Thinking, Moonwalking, Planning, Refining, each word
|
|
3252
|
-
* swapped on a spring. The row reserves the width of the longest word, so
|
|
3253
|
-
* nothing around it shifts while the words change. One static "Thinking…" is
|
|
3254
|
-
* announced to screen readers instead of a re-announcement every four
|
|
3255
|
-
* seconds, and reduced motion drops both the morph and the cycling for a
|
|
3256
|
-
* still glyph and label.
|
|
3257
|
-
*
|
|
3258
|
-
* `variant="goo"` swaps the glyph for three dots that melt into one blob and
|
|
3259
|
-
* split again through the goo filter (see Morph), beside a plain label;
|
|
3260
|
-
* reduced motion holds them split.
|
|
3261
|
-
*
|
|
3262
|
-
* @example {@include ./examples.mdx}
|
|
3263
|
-
*/
|
|
3264
|
-
declare const ThinkingIndicator: ForwardRefExoticComponent_tcubfn21<ThinkingIndicatorProps & RefAttributes_miuf5621<HTMLDivElement>>;
|
|
3265
|
-
import { ReactNode as ReactNode30 } from "react";
|
|
3350
|
+
declare const TableRow: ForwardRefExoticComponent12<TableRowProps & RefAttributes12<HTMLTableRowElement>>;
|
|
3351
|
+
declare const TableHead: ForwardRefExoticComponent12<ThHTMLAttributes<HTMLTableCellElement> & RefAttributes12<HTMLTableCellElement>>;
|
|
3352
|
+
declare const TableCell: ForwardRefExoticComponent12<TdHTMLAttributes<HTMLTableCellElement> & RefAttributes12<HTMLTableCellElement>>;
|
|
3353
|
+
import { ReactNode as ReactNode31 } from "react";
|
|
3266
3354
|
import { JSX as JSX_1kxb25 } from "react";
|
|
3267
3355
|
type ShapeVariant = "pill" | "rounded";
|
|
3268
3356
|
type Element_12xgc25 = JSX_1kxb25["Element"];
|
|
3269
3357
|
declare function ShapeProvider({ children, defaultShape }: {
|
|
3270
|
-
children:
|
|
3358
|
+
children: ReactNode31;
|
|
3271
3359
|
defaultShape?: ShapeVariant;
|
|
3272
3360
|
}): Element_12xgc25;
|
|
3273
3361
|
import { CnFunction } from "cn";
|
|
@@ -3294,12 +3382,12 @@ declare function Code({ children, language, className }: {
|
|
|
3294
3382
|
/** Extra classes for the frame. */
|
|
3295
3383
|
className?: string;
|
|
3296
3384
|
}): Element_12xgc26;
|
|
3297
|
-
import { ReactNode as
|
|
3385
|
+
import { ReactNode as ReactNode32 } from "react";
|
|
3298
3386
|
interface CraftProps {
|
|
3299
3387
|
/** The naive version: the same interface with the detail missing. */
|
|
3300
|
-
bad:
|
|
3388
|
+
bad: ReactNode32;
|
|
3301
3389
|
/** The system's version, with the detail in place. */
|
|
3302
|
-
good:
|
|
3390
|
+
good: ReactNode32;
|
|
3303
3391
|
/** What goes wrong on the bad side, in one line. */
|
|
3304
3392
|
badNote?: string;
|
|
3305
3393
|
/** What the good side does instead, in one line. */
|
|
@@ -3307,9 +3395,9 @@ interface CraftProps {
|
|
|
3307
3395
|
/** Classes for the root grid. */
|
|
3308
3396
|
className?: string;
|
|
3309
3397
|
}
|
|
3310
|
-
import { ForwardRefExoticComponent as
|
|
3398
|
+
import { ForwardRefExoticComponent as ForwardRefExoticComponent13, HTMLAttributes as HTMLAttributes28, ReactNode as ReactNode33, RefAttributes as RefAttributes13 } from "react";
|
|
3311
3399
|
import { Transition as Transition2 } from "motion/react";
|
|
3312
|
-
import { Dispatch as Dispatch2, MutableRefObject as MutableRefObject2, RefObject as
|
|
3400
|
+
import { Dispatch as Dispatch2, MutableRefObject as MutableRefObject2, RefObject as RefObject20, SetStateAction as SetStateAction2 } from "react";
|
|
3313
3401
|
interface ItemRect {
|
|
3314
3402
|
top: number;
|
|
3315
3403
|
height: number;
|
|
@@ -3389,7 +3477,7 @@ interface UseFluidHoverReturn {
|
|
|
3389
3477
|
*/
|
|
3390
3478
|
measureItems: () => void;
|
|
3391
3479
|
}
|
|
3392
|
-
declare function useFluidHover<T extends HTMLElement>(containerRef:
|
|
3480
|
+
declare function useFluidHover<T extends HTMLElement>(containerRef: RefObject20<T | null>, options?: UseFluidHoverOptions): UseFluidHoverReturn;
|
|
3393
3481
|
/**
|
|
3394
3482
|
* Registers an item's element with its list for as long as it is mounted.
|
|
3395
3483
|
* The one way rows join a list: pass the hook's `registerItem` (or the copy
|
|
@@ -3397,7 +3485,7 @@ declare function useFluidHover<T extends HTMLElement>(containerRef: RefObject19<
|
|
|
3397
3485
|
* missing for a row rendered outside a list (a standalone card, an accordion
|
|
3398
3486
|
* item that is not grouped); then nothing is registered.
|
|
3399
3487
|
*/
|
|
3400
|
-
declare function useRegisterFluidHoverItem(registerItem: ((index: number, element: HTMLElement | null) => void) | undefined, index: number | undefined, ref:
|
|
3488
|
+
declare function useRegisterFluidHoverItem(registerItem: ((index: number, element: HTMLElement | null) => void) | undefined, index: number | undefined, ref: RefObject20<HTMLElement | null>): void;
|
|
3401
3489
|
import { JSX as JSX_1kxb28 } from "react";
|
|
3402
3490
|
/** What the highlight reads off the hook: the highlighted index, the
|
|
3403
3491
|
* measured rects, whether they are current, and the pointer session. */
|
|
@@ -3445,7 +3533,7 @@ interface FluidHoverItemProps extends HTMLAttributes28<HTMLButtonElement> {
|
|
|
3445
3533
|
/** Skips the row: never lit, never the target of a gap click. It stays registered, so its neighbours keep their indices. Defaults to `false`. */
|
|
3446
3534
|
disabled?: boolean;
|
|
3447
3535
|
/** The row's content — a label, or an icon plus text, or (on `xy`) a title over a description. */
|
|
3448
|
-
children?:
|
|
3536
|
+
children?: ReactNode33;
|
|
3449
3537
|
/** Classes for the row, merged over the per-axis defaults. */
|
|
3450
3538
|
className?: string;
|
|
3451
3539
|
}
|
|
@@ -3455,7 +3543,7 @@ interface FluidHoverItemProps extends HTMLAttributes28<HTMLButtonElement> {
|
|
|
3455
3543
|
* surrounding `FluidHover` for as long as it is mounted; outside one it is
|
|
3456
3544
|
* just a button.
|
|
3457
3545
|
*/
|
|
3458
|
-
declare const FluidHoverItem:
|
|
3546
|
+
declare const FluidHoverItem: ForwardRefExoticComponent13<FluidHoverItemProps & RefAttributes13<HTMLButtonElement>>;
|
|
3459
3547
|
interface FluidHoverProps extends HTMLAttributes28<HTMLDivElement> {
|
|
3460
3548
|
/** Which way the list runs: `'y'` for lists, `'x'` for strips, `'xy'` for grids. Defaults to `'y'`, or `'xy'` when `columns` is above 1. */
|
|
3461
3549
|
axis?: FluidHoverAxis;
|
|
@@ -3464,7 +3552,7 @@ interface FluidHoverProps extends HTMLAttributes28<HTMLDivElement> {
|
|
|
3464
3552
|
/** Shorthand rows: one `FluidHover.Item` per string, indexed in order. Omit it and pass `FluidHover.Item` children instead. */
|
|
3465
3553
|
items?: string[];
|
|
3466
3554
|
/** Renders the content of a shorthand row. Defaults to the string itself. */
|
|
3467
|
-
renderItem?: (item: string, index: number) =>
|
|
3555
|
+
renderItem?: (item: string, index: number) => ReactNode33;
|
|
3468
3556
|
/** Rows to skip: never lit, never the target of a gap click. They stay registered, so their neighbours keep their indices. */
|
|
3469
3557
|
disabledIndices?: number[];
|
|
3470
3558
|
/** Whether a click that lands between rows goes to the lit one, so what is lit is what a click hits. `false` leaves empty space inert; `{ maxDistance }` routes only clicks within that many pixels of the lit row. Defaults to `true`. */
|
|
@@ -3476,9 +3564,9 @@ interface FluidHoverProps extends HTMLAttributes28<HTMLDivElement> {
|
|
|
3476
3564
|
/** Classes for the list container. Padding here is part of the list: a click in it still lands on the lit row. */
|
|
3477
3565
|
className?: string;
|
|
3478
3566
|
/** `FluidHover.Item` rows, when `items` is not enough. Direct Item children are indexed in order. */
|
|
3479
|
-
children?:
|
|
3567
|
+
children?: ReactNode33;
|
|
3480
3568
|
}
|
|
3481
|
-
type FluidHoverComponent =
|
|
3569
|
+
type FluidHoverComponent = ForwardRefExoticComponent13<FluidHoverProps & RefAttributes13<HTMLDivElement>> & {
|
|
3482
3570
|
Item: typeof FluidHoverItem;
|
|
3483
3571
|
};
|
|
3484
3572
|
/**
|
|
@@ -3539,8 +3627,8 @@ type FluidHoverComponent = ForwardRefExoticComponent12<FluidHoverProps & RefAttr
|
|
|
3539
3627
|
* @example {@include ./examples.mdx}
|
|
3540
3628
|
*/
|
|
3541
3629
|
declare const FluidHover: FluidHoverComponent;
|
|
3630
|
+
import { ReactNode as ReactNode35 } from "react";
|
|
3542
3631
|
import { ReactNode as ReactNode34 } from "react";
|
|
3543
|
-
import { ReactNode as ReactNode33 } from "react";
|
|
3544
3632
|
import { JSX as JSX_1kxb29 } from "react";
|
|
3545
3633
|
interface MorphPartProps {
|
|
3546
3634
|
/** Pairs the part in the trigger with its twin in the overlay; unique within one overlay. */
|
|
@@ -3548,7 +3636,7 @@ interface MorphPartProps {
|
|
|
3548
3636
|
/** Classes for the part's box. */
|
|
3549
3637
|
className?: string;
|
|
3550
3638
|
/** The part's content: an image, a title. */
|
|
3551
|
-
children?:
|
|
3639
|
+
children?: ReactNode34;
|
|
3552
3640
|
}
|
|
3553
3641
|
type Element_12xgc29 = JSX_1kxb29["Element"];
|
|
3554
3642
|
declare function MorphPart({ id, className, children }: MorphPartProps): Element_12xgc29;
|
|
@@ -3573,7 +3661,7 @@ interface MorphProps {
|
|
|
3573
3661
|
/** Extra classes for the stage (trigger + panel). */
|
|
3574
3662
|
className?: string;
|
|
3575
3663
|
/** The panel's content. */
|
|
3576
|
-
children?:
|
|
3664
|
+
children?: ReactNode35;
|
|
3577
3665
|
}
|
|
3578
3666
|
type Element_12xgc30 = JSX_1kxb30["Element"];
|
|
3579
3667
|
/**
|
|
@@ -3626,7 +3714,7 @@ type Element_12xgc30 = JSX_1kxb30["Element"];
|
|
|
3626
3714
|
* ## Liquid indicators
|
|
3627
3715
|
*
|
|
3628
3716
|
* The same goo moves everything that travels between items: the active tab
|
|
3629
|
-
* of Tabs and TabsSubtle, the Switch thumb,
|
|
3717
|
+
* of Tabs and TabsSubtle, the Switch thumb, Radio.Group's selection and the
|
|
3630
3718
|
* fluid hover highlight of every list (Select, Dropdown, Combobox, Card,
|
|
3631
3719
|
* Accordion, FluidHover). The indicator springs to its new item and leaves
|
|
3632
3720
|
* a blob behind. The blob lingers for a third of the spring, then follows
|
|
@@ -3634,7 +3722,7 @@ type Element_12xgc30 = JSX_1kxb30["Element"];
|
|
|
3634
3722
|
* stretched drop that lets go. A long move tears it into a drop and a
|
|
3635
3723
|
* droplet that catches up and is absorbed.
|
|
3636
3724
|
*
|
|
3637
|
-
* Merged selections (
|
|
3725
|
+
* Merged selections (Checkbox.Group, a multiple Dropdown) melt the same way:
|
|
3638
3726
|
* a checked row grows out of its center and flows into its checked
|
|
3639
3727
|
* neighbours, and an unchecked one pinches off and shrinks away.
|
|
3640
3728
|
*
|
|
@@ -3665,7 +3753,7 @@ type Element_12xgc30 = JSX_1kxb30["Element"];
|
|
|
3665
3753
|
* @example {@include ./examples.mdx}
|
|
3666
3754
|
*/
|
|
3667
3755
|
declare function Morph2({ from, effect, tier, hideSource, open, defaultOpen, onOpenChange, label, className, children }: MorphProps): Element_12xgc30;
|
|
3668
|
-
import { ReactNode as
|
|
3756
|
+
import { ReactNode as ReactNode36 } from "react";
|
|
3669
3757
|
declare const spring: {
|
|
3670
3758
|
readonly fast: {
|
|
3671
3759
|
readonly type: "spring";
|
|
@@ -3727,7 +3815,7 @@ interface MotionProps {
|
|
|
3727
3815
|
/** Extra classes for the wrapper (stage + trigger column). */
|
|
3728
3816
|
className?: string;
|
|
3729
3817
|
/** The content that animates in and out. */
|
|
3730
|
-
children:
|
|
3818
|
+
children: ReactNode36;
|
|
3731
3819
|
}
|
|
3732
3820
|
type Element_12xgc31 = JSX_1kxb31["Element"];
|
|
3733
3821
|
/**
|
|
@@ -3779,7 +3867,7 @@ type Element_12xgc31 = JSX_1kxb31["Element"];
|
|
|
3779
3867
|
* @example {@include ./examples.mdx}
|
|
3780
3868
|
*/
|
|
3781
3869
|
declare function Motion({ tier, show, defaultShow, onShowChange, sameExit, reducedMotion, className, children }: MotionProps): Element_12xgc31;
|
|
3782
|
-
import { ComponentPropsWithoutRef as ComponentPropsWithoutRef2, ForwardRefExoticComponent as
|
|
3870
|
+
import { ComponentPropsWithoutRef as ComponentPropsWithoutRef2, ForwardRefExoticComponent as ForwardRefExoticComponent14, ReactNode as ReactNode37, RefAttributes as RefAttributes14 } from "react";
|
|
3783
3871
|
import { ScrollAreaScrollbarProps as ScrollAreaScrollbarProps_g9nf4s } from "@base-ui/react";
|
|
3784
3872
|
type Orientation = "vertical" | "horizontal" | "both";
|
|
3785
3873
|
interface ScrollAreaProps extends ComponentPropsWithoutRef2<"div"> {
|
|
@@ -3790,7 +3878,7 @@ interface ScrollAreaProps extends ComponentPropsWithoutRef2<"div"> {
|
|
|
3790
3878
|
/** Classes for the outer container — set the height/width constraint here. */
|
|
3791
3879
|
className?: string;
|
|
3792
3880
|
/** The scrolling content. Give it an intrinsic size (`w-max`, `whitespace-nowrap`) to overflow horizontally. */
|
|
3793
|
-
children?:
|
|
3881
|
+
children?: ReactNode37;
|
|
3794
3882
|
}
|
|
3795
3883
|
interface ScrollAreaStatics {
|
|
3796
3884
|
/** `ScrollBar` — one scrollbar, for composing a Base UI scroll area by hand. */
|
|
@@ -3817,9 +3905,9 @@ interface ScrollAreaStatics {
|
|
|
3817
3905
|
*
|
|
3818
3906
|
* @example {@include ./examples.mdx}
|
|
3819
3907
|
*/
|
|
3820
|
-
declare const ScrollArea:
|
|
3821
|
-
declare const ScrollBar:
|
|
3822
|
-
import { ReactNode as
|
|
3908
|
+
declare const ScrollArea: ForwardRefExoticComponent14<ScrollAreaProps & RefAttributes14<HTMLDivElement>> & ScrollAreaStatics;
|
|
3909
|
+
declare const ScrollBar: ForwardRefExoticComponent14<Omit<Omit<ScrollAreaScrollbarProps_g9nf4s, "ref"> & RefAttributes14<HTMLDivElement>, "ref"> & RefAttributes14<HTMLDivElement>>;
|
|
3910
|
+
import { ReactNode as ReactNode38 } from "react";
|
|
3823
3911
|
import { JSX as JSX_1kxb32 } from "react";
|
|
3824
3912
|
type Element_12xgc32 = JSX_1kxb32["Element"];
|
|
3825
3913
|
/**
|
|
@@ -3834,8 +3922,8 @@ type Element_12xgc32 = JSX_1kxb32["Element"];
|
|
|
3834
3922
|
* `SizeProvider` and every sized component inside follows — menus included,
|
|
3835
3923
|
* since React context crosses portals. Precedence is explicit `size` prop on
|
|
3836
3924
|
* the component > nearest `SizeProvider` > `'default'`. Button, Badge,
|
|
3837
|
-
* Select, Tabs, TabsSubtle, Dropdown,
|
|
3838
|
-
* InputGroup,
|
|
3925
|
+
* Select, Tabs, TabsSubtle, Dropdown, Checkbox, Radio, Input,
|
|
3926
|
+
* InputGroup, Copy, InputMessage, Table, Switch, Slider, Accordion, Card,
|
|
3839
3927
|
* ColorPicker, ThinkingIndicator, Calendar and the date and time pickers all
|
|
3840
3928
|
* take that per-component `size`. Type follows the ladder too: compact drops
|
|
3841
3929
|
* each type role one notch.
|
|
@@ -3849,21 +3937,21 @@ type Element_12xgc32 = JSX_1kxb32["Element"];
|
|
|
3849
3937
|
*/
|
|
3850
3938
|
declare function SizeProvider({ children, size, defaultSize }: {
|
|
3851
3939
|
/** The region whose controls follow the step — popups opened from inside it included. */
|
|
3852
|
-
children:
|
|
3940
|
+
children: ReactNode38;
|
|
3853
3941
|
/** Controlled variant — pins every control in the subtree to one step, overriding internal state. `'default'` is 36px controls, `'compact'` is 28px. */
|
|
3854
3942
|
size?: "default" | "compact";
|
|
3855
3943
|
/** Uncontrolled initial variant, switchable via `useSizeContext().setSize`. Defaults to `'default'`. */
|
|
3856
3944
|
defaultSize?: "default" | "compact";
|
|
3857
3945
|
}): Element_12xgc32;
|
|
3858
|
-
import { ComponentPropsWithoutRef as ComponentPropsWithoutRef3, ForwardRefExoticComponent as
|
|
3946
|
+
import { ComponentPropsWithoutRef as ComponentPropsWithoutRef3, ForwardRefExoticComponent as ForwardRefExoticComponent15, ReactNode as ReactNode40, RefAttributes as RefAttributes15 } from "react";
|
|
3859
3947
|
declare function surfaceClasses(bgLevel: number, shadowLevel?: number): string;
|
|
3860
|
-
import { ReactNode as
|
|
3948
|
+
import { ReactNode as ReactNode39 } from "react";
|
|
3861
3949
|
import { JSX as JSX_1kxb33 } from "react";
|
|
3862
3950
|
declare function useSurface(): number;
|
|
3863
3951
|
type Element_12xgc33 = JSX_1kxb33["Element"];
|
|
3864
3952
|
declare function SurfaceProvider({ value, children }: {
|
|
3865
3953
|
value: number;
|
|
3866
|
-
children:
|
|
3954
|
+
children: ReactNode39;
|
|
3867
3955
|
}): Element_12xgc33;
|
|
3868
3956
|
interface ElevatedProps extends ComponentPropsWithoutRef3<"div"> {
|
|
3869
3957
|
/**
|
|
@@ -3890,7 +3978,7 @@ interface ElevatedProps extends ComponentPropsWithoutRef3<"div"> {
|
|
|
3890
3978
|
/** Merged after the surface classes; radius and padding go here. */
|
|
3891
3979
|
className?: string;
|
|
3892
3980
|
/** Content of the surface. Everything inside reads this surface's level as its substrate. */
|
|
3893
|
-
children?:
|
|
3981
|
+
children?: ReactNode40;
|
|
3894
3982
|
}
|
|
3895
3983
|
interface ElevatedStatics {
|
|
3896
3984
|
/** `SurfaceProvider` — set the substrate for a subtree by hand. */
|
|
@@ -3922,5 +4010,5 @@ interface ElevatedStatics {
|
|
|
3922
4010
|
*
|
|
3923
4011
|
* @example {@include ./examples.mdx}
|
|
3924
4012
|
*/
|
|
3925
|
-
declare const Elevated:
|
|
3926
|
-
export { Accordion, AccordionContent, AccordionGroup, AccordionItem, AccordionTrigger, AlertDialog, AlertDialogContent, AlertDialogProps, Badge, BadgeColor, BadgeProps, BadgeSize, Button2 as Button, ButtonProps, ButtonSize, Calendar, CalendarProps, Card, CardAction, CardButton, CardButtonProps, CardButtonVariant, CardContent, CardDescription, CardEyebrow, CardFeature, CardFooter, CardGroup, CardGroupProps, CardHeader, CardImage, CardLogo, CardMedia, CardProps, CardTitle, CheckboxGroup, CheckboxGroupProps,
|
|
4013
|
+
declare const Elevated: ForwardRefExoticComponent15<ElevatedProps & RefAttributes15<HTMLDivElement>> & ElevatedStatics;
|
|
4014
|
+
export { Accordion, AccordionContent, AccordionGroup, AccordionItem, AccordionTrigger, AlertDialog, AlertDialogContent, AlertDialogProps, Badge, BadgeColor, BadgeProps, BadgeSize, Button2 as Button, ButtonProps, ButtonSize, Calendar, CalendarProps, Card, CardAction, CardButton, CardButtonProps, CardButtonVariant, CardContent, CardDescription, CardEyebrow, CardFeature, CardFooter, CardGroup, CardGroupProps, CardHeader, CardImage, CardLogo, CardMedia, CardProps, CardTitle, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, Code, ColorFormat, ColorPicker, ColorPickerPopover, ColorPickerPopoverProps, ColorPickerPortalContainer, ColorPickerProps, ColorSwatch, ColorSwatchProps, ColorTile, Combobox, ComboboxChips, ComboboxChipsProps, ComboboxContent, ComboboxContentProps, ComboboxEmpty, ComboboxEmptyProps, ComboboxInput, ComboboxInputProps, ComboboxItem, ComboboxItemData, ComboboxItemObject, ComboboxItemProps, ComboboxList, ComboboxListProps, ComboboxProps, ComboboxValue, Command, CommandContent, CommandContentProps, CommandGroup, CommandItem, CommandItems, CommandList, CommandListRoot, CommandPalette, CommandPaletteProps, CommandProps, CommandShortcut, CommandTrigger, ContextMenu, ContextMenuContent, ContextMenuContentProps, ContextMenuItem, ContextMenuItemProps, ContextMenuProps, Copy, CopyAlign, CopyProps, CopyVariant, CraftProps, DatePicker, DatePickerProps, DateRangePicker, DateRangePickerProps, Dialog, DialogClose, DialogSlotProps as DialogCloseProps, DialogContent, DialogContentProps, DialogDescription, DialogFooter, DialogHeader, DialogProps, DialogState, DialogTitle, DialogTrigger, DialogSlotProps as DialogTriggerProps, Dropdown, DropdownContent, DropdownContentProps, DropdownContextValue, DropdownEmpty, DropdownLabel, DropdownMenu, DropdownMenuProps, DropdownProps, DropdownSearch, DropdownSearchProps, DropdownSeparator, DropdownTrigger, DropdownTriggerProps, DurationPicker, DurationPickerProps, Elevated, ElevatedProps, FileThumbnail, FluidHover, FluidHoverAxis, FluidHoverHighlight, FluidHoverHighlightProps, FluidHoverItem, FluidHoverItemProps, FluidHoverProps, IconProvider, Input2 as Input, InputFieldProps, InputGroup, InputGroupProps, InputMessage, InputMessageProps, InputMessageSlotContext, InputMessageStatus, InputProps, ItemRect, Label2 as Label, LabelProps, MenuItem2 as MenuItem, MenuItemRenderOptions, MonthPicker, MonthPickerProps, Morph2 as Morph, MorphPart, MorphProps, Motion, MotionProps, ParsedColor, Popover2 as Popover, PopoverClose, PopoverContent, PopoverContentProps, PopoverDescription, PopoverProps, PopoverTitle, PopoverTrigger, PopoverTriggerProps, PreviewCard, PreviewCardContent, PreviewCardContentProps, PreviewCardProps, PreviewCardTrigger, PreviewCardTriggerProps, QueuedMessage, Radio, RadioGroup, RadioGroupProps, RadioProps, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_KEYBOARD_SHORTCUT_RIGHT, SIDEBAR_MAX_WIDTH, SIDEBAR_MIN_WIDTH, SIDEBAR_WIDTH, SIDEBAR_WIDTH_MOBILE, ScrollArea, ScrollAreaProps, ScrollBar, Search2 as Search, SearchProps, Select, SelectContent, SelectContentProps, SelectGroup, SelectItem, SelectItemProps, SelectLabel, SelectProps, SelectSeparator, SelectTrigger, SelectTriggerProps, ShapeProvider, Sheet, SheetContent, SheetContentProps, SheetIndent, SheetProps, SheetSide, Sidebar, SidebarApp, SidebarAppProps, SidebarCollapsible, SidebarContent, SidebarContentProps, SidebarContextValue, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupActionProps, SidebarGroupActions, SidebarGroupContent, SidebarGroupLabel, SidebarGroupLabelProps, SidebarHeader, SidebarInput, SidebarInputProps, SidebarInset, SidebarInsetProps, SidebarMenu, SidebarMenuAction, SidebarMenuActionProps, SidebarMenuActions, SidebarMenuBadge, SidebarMenuBadgeProps, SidebarMenuButton, SidebarMenuButtonProps, SidebarMenuItem, SidebarMenuItemProps, SidebarMenuProps, SidebarMenuSkeleton, SidebarMenuSkeletonProps, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubButtonProps, SidebarMenuSubItem, SidebarMenuSubItemProps, SidebarMenuSubProps, SidebarProps, SidebarProvider, SidebarProviderProps, SidebarRail, SidebarRailProps, SidebarSectionProps, SidebarSelection, SidebarSelectionValue, SidebarSeparator, SidebarSide, SidebarTrigger, SidebarTriggerProps, SidebarVariant, SizeClasses, SizeProvider, SizeVariant, Slider, SliderComfortable, SliderComfortableProps, SliderProps, SliderValue, SpringTier, SurfaceProvider, Switch, SwitchGroup, SwitchGroupProps, SwitchProps, TabItem, TabItemProps, TabPanel, TabPanelProps, Table, TableBody, TableCell, TableHead, TableHeader, TableProps, TableRow, TableRowProps, Tabs, TabsList, TabsListProps, TabsProps, TabsSubtle, TabsSubtleItem, TabsSubtleItemProps, TabsSubtlePanel, TabsSubtlePanelProps, TabsSubtleProps, Textarea, TextareaProps, ThinkingIndicator, ThinkingIndicatorProps, TimePicker, TimePickerProps, Toast, ToastOptions, ToastPosition, ToastProps, ToastTrigger, ToastTriggerProps, ToastType, Tooltip, TooltipPortalContainer, TooltipProps, TooltipProvider, TooltipProviderProps, TooltipSide, TypeScaleRole, TypeScaleStep, UseFluidHoverOptions, UseFluidHoverReturn, ValuePosition, badgeColors, badgeVariants, buildParsed, buttonVariants, cn, fieldVariants as comboboxFieldVariants, exitFallbackMs, parseColor, sidebarMenuButtonVariants, sizeMap, spring, surfaceClasses, triggerVariants, typeScale, useDialogState, useDropdown, useDropdownMaybe, useFluidHover, useRegisterFluidHoverItem, useSidebar, useSize, useSizeContext, useSizeVariant, useSurface, useToast, useTypeScale };
|