@ceebee/ui 0.6.0 → 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/client.d.ts CHANGED
@@ -1,7 +1,24 @@
1
+ import { ThemeConfig } from 'antd';
2
+ export * from 'antd';
1
3
  import * as react from 'react';
2
- import { ReactNode, ButtonHTMLAttributes, ReactElement, InputHTMLAttributes, TextareaHTMLAttributes } from 'react';
4
+ import { ReactNode } from 'react';
5
+ export { default as enUSLocale } from 'antd/locale/en_US.js';
6
+ export { default as enUSDatePickerLocale } from 'antd/lib/date-picker/locale/en_US.js';
7
+ export { default as idIDLocale } from 'antd/locale/id_ID.js';
8
+ export { default as zhCNLocale } from 'antd/locale/zh_CN.js';
3
9
  import * as _base_ui_react from '@base-ui/react';
4
10
 
11
+ interface ThemeBridgeProps {
12
+ children: ReactNode;
13
+ mode: 'light' | 'dark';
14
+ theme?: ThemeConfig;
15
+ }
16
+ /**
17
+ * Translates Ceebee's live CSS Tokens into Ant's theme seed. Ant still owns component geometry,
18
+ * interaction, accessibility, and derived tokens; Ceebee owns the active Skin and colour mode.
19
+ */
20
+ declare function ThemeBridge({ children, mode, theme }: ThemeBridgeProps): react.JSX.Element;
21
+
5
22
  /**
6
23
  * Every string the library says out loud. They are here rather than inline because a component
7
24
  * that hard-codes "Previous slide" is an English component, and this library is used to build
@@ -34,13 +51,8 @@ interface Labels {
34
51
  decrease: string;
35
52
  expandNavigation: string;
36
53
  collapseNavigation: string;
37
- /** Tour buttons. A Tour's own `labels` prop still wins over these. */
38
- back: string;
54
+ /** Carousel and image-preview stepping. */
39
55
  next: string;
40
- done: string;
41
- skip: string;
42
- /** Coachmark and Checklist progress, e.g. "2 of 5". */
43
- progress: (current: number, total: number) => string;
44
56
  }
45
57
  declare const DEFAULT_LABELS: Labels;
46
58
  interface LabelsProviderProps {
@@ -67,7 +79,7 @@ interface MotionProviderProps {
67
79
  }
68
80
  /**
69
81
  * The one place animation is scaled or switched off, and the seam that honours
70
- * `prefers-reduced-motion` (ADR 0004). Reduced motion means transforms drop and opacity
82
+ * `prefers-reduced-motion`. Reduced motion means transforms drop and opacity
71
83
  * stays; it never means a state change happens invisibly.
72
84
  */
73
85
  declare function MotionProvider({ children, enabled, scale }: MotionProviderProps): react.JSX.Element;
@@ -87,691 +99,19 @@ interface ThemeState {
87
99
  resolved: 'light' | 'dark';
88
100
  }
89
101
  /**
90
- * Colour itself comes from CSS, not from here (ADR 0002) — this only flips `data-theme`
102
+ * Colour itself comes from CSS, not from here — this only flips `data-theme`
91
103
  * on the document root, so the first paint is already correct without a blocking script
92
104
  * for anyone who never overrides the system setting.
93
105
  */
94
- declare function ThemeProvider({ children, defaultChoice, persist, }: {
106
+ declare function ThemeProvider({ children, defaultChoice, persist, antdTheme, }: {
95
107
  children: ReactNode;
96
108
  defaultChoice?: ThemeChoice;
97
109
  persist?: boolean;
110
+ /** Optional Ant token/component overrides applied after the active Ceebee Skin. */
111
+ antdTheme?: ThemeConfig;
98
112
  }): react.JSX.Element;
99
113
  declare function useTheme(): ThemeState;
100
114
 
101
- type Tone = 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'danger';
102
- type Size = 'sm' | 'md' | 'lg';
103
-
104
- /** Motion redefines the drag and animation event handlers, so the DOM versions are dropped
105
- * rather than silently conflicting. A button that needs HTML5 drag is not this component. */
106
- type NativeButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color' | 'onDrag' | 'onDragStart' | 'onDragEnd' | 'onAnimationStart' | 'onAnimationEnd' | 'onAnimationIteration'>;
107
- interface ButtonProps extends NativeButtonProps {
108
- variant?: 'solid' | 'soft' | 'outline' | 'ghost';
109
- tone?: Tone;
110
- size?: Size;
111
- /** Shown instead of the label, with the button held at its current width. */
112
- loading?: boolean;
113
- iconStart?: ReactNode;
114
- iconEnd?: ReactNode;
115
- /** Opts this button out of press feedback without touching the provider. */
116
- motion?: boolean;
117
- }
118
- declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
119
-
120
- type FloatButtonPlacement = 'bottom-start' | 'bottom-end';
121
- type NativeFloatButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'aria-label' | 'aria-labelledby' | 'children' | 'className' | 'color' | 'role' | 'style'>;
122
- type FloatButtonCommonProps = NativeFloatButtonProps & {
123
- /** Required accessible name. It is also rendered when `visibleLabel` is enabled. */
124
- label: string;
125
- tone?: Tone;
126
- size?: Size;
127
- placement?: FloatButtonPlacement;
128
- /** These native escape hatches are rejected so FloatButton owns its name and fixed layout. */
129
- 'aria-label'?: never;
130
- 'aria-labelledby'?: never;
131
- style?: never;
132
- };
133
- type FloatButtonProps = FloatButtonCommonProps & ({
134
- /** Renders `label` beside the optional icon. */
135
- visibleLabel: true;
136
- icon?: ReactNode;
137
- } | {
138
- /** An icon-only action must still expose a visible affordance. */
139
- visibleLabel?: false;
140
- icon: ReactElement;
141
- });
142
- /**
143
- * A persistent, fixed-viewport action. It intentionally remains one native
144
- * button: navigation, grouped actions, and scroll-to-top behaviour are separate
145
- * contracts rather than variants of this component.
146
- */
147
- declare const FloatButton: react.ForwardRefExoticComponent<FloatButtonProps & react.RefAttributes<HTMLButtonElement>>;
148
-
149
- interface FieldWiring {
150
- controlId: string;
151
- describedBy: string | undefined;
152
- invalid: boolean;
153
- required: boolean;
154
- }
155
- /** Inputs read their id and aria wiring from here; standalone use returns null. */
156
- declare function useFieldWiring(): FieldWiring | null;
157
- interface FieldProps {
158
- label: ReactNode;
159
- hint?: ReactNode;
160
- /** A string renders the message; `true` marks invalid without one. */
161
- error?: ReactNode | boolean;
162
- required?: boolean;
163
- /** Hides the label visually while keeping it for screen readers. */
164
- labelHidden?: boolean;
165
- className?: string;
166
- children: ReactNode;
167
- }
168
- /**
169
- * Label, hint, error, and the `aria-describedby` / `aria-invalid` links between them —
170
- * the part that is most often silently wrong. The library owns this and refuses to own
171
- * form state or validation (ADR 0011).
172
- */
173
- declare function Field({ label, hint, error, required, labelHidden, className, children }: FieldProps): react.JSX.Element;
174
-
175
- interface TextInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
176
- size?: Size;
177
- /** Marks invalid when used outside a Field; inside one, the Field decides. */
178
- invalid?: boolean;
179
- }
180
- declare const Input: react.ForwardRefExoticComponent<TextInputProps & react.RefAttributes<HTMLInputElement>>;
181
- interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
182
- invalid?: boolean;
183
- }
184
- declare const Textarea: react.ForwardRefExoticComponent<TextareaProps & react.RefAttributes<HTMLTextAreaElement>>;
185
-
186
- interface SelectOption<T extends string = string> {
187
- value: T;
188
- label: ReactNode;
189
- disabled?: boolean;
190
- }
191
- interface SelectProps<T extends string = string> {
192
- items: Array<SelectOption<T>>;
193
- value?: T | null;
194
- defaultValue?: T | null;
195
- onValueChange?: (value: T) => void;
196
- placeholder?: string;
197
- size?: Size;
198
- disabled?: boolean;
199
- invalid?: boolean;
200
- name?: string;
201
- id?: string;
202
- className?: string;
203
- }
204
- /**
205
- * Listbox behaviour — typeahead, roving focus, scroll containment, form association —
206
- * is Base UI's (ADR 0003). This adds the brand and the Field wiring.
207
- */
208
- declare function Select<T extends string = string>({ items, value, defaultValue, onValueChange, placeholder, size, disabled, invalid, name, id, className, }: SelectProps<T>): react.JSX.Element;
209
-
210
- interface CheckboxProps {
211
- label: ReactNode;
212
- checked?: boolean;
213
- defaultChecked?: boolean;
214
- indeterminate?: boolean;
215
- onCheckedChange?: (checked: boolean) => void;
216
- disabled?: boolean;
217
- name?: string;
218
- value?: string;
219
- /** Secondary line under the label — the place for "why would I tick this". */
220
- description?: ReactNode;
221
- className?: string;
222
- }
223
- /** The control and its label are one component: a checkbox whose label is not wired is a bug. */
224
- declare function Checkbox({ label, checked, defaultChecked, indeterminate, onCheckedChange, disabled, name, value, description, className, }: CheckboxProps): react.JSX.Element;
225
- interface RadioOption<T extends string = string> {
226
- value: T;
227
- label: ReactNode;
228
- description?: ReactNode;
229
- disabled?: boolean;
230
- }
231
- interface RadioGroupProps<T extends string = string> {
232
- options: Array<RadioOption<T>>;
233
- value?: T;
234
- defaultValue?: T;
235
- onValueChange?: (value: T) => void;
236
- name?: string;
237
- /** Names the group for assistive technology when it is not inside a Field. */
238
- label?: string;
239
- direction?: 'column' | 'row';
240
- /**
241
- * `segmented` draws the group as one track of adjoining cells instead of a
242
- * list of dots. Appearance and geometry only — the role, the keyboard, and
243
- * the value it reports are a radiogroup's either way (ADR 0014). Reach for it
244
- * where the options are few enough to show at once, which is where a dropdown
245
- * is the wrong control anyway.
246
- */
247
- variant?: 'list' | 'segmented';
248
- disabled?: boolean;
249
- className?: string;
250
- }
251
- declare function RadioGroup<T extends string = string>({ options, value, defaultValue, onValueChange, name, label, direction, variant, disabled, className, }: RadioGroupProps<T>): react.JSX.Element;
252
- interface SwitchProps {
253
- label: ReactNode;
254
- checked?: boolean;
255
- defaultChecked?: boolean;
256
- onCheckedChange?: (checked: boolean) => void;
257
- disabled?: boolean;
258
- name?: string;
259
- description?: ReactNode;
260
- /** Label on the left, control on the right — the settings-row arrangement. */
261
- justified?: boolean;
262
- className?: string;
263
- }
264
- /** A Switch applies immediately. If a change needs saving, that is a Checkbox in a form. */
265
- declare function Switch({ label, checked, defaultChecked, onCheckedChange, disabled, name, description, justified, className, }: SwitchProps): react.JSX.Element;
266
-
267
- interface ComboboxOption {
268
- value: string;
269
- label: string;
270
- description?: ReactNode;
271
- disabled?: boolean;
272
- }
273
- /**
274
- * Fetches the options for a query. Receiving one puts the AutoComplete in async mode:
275
- * the built-in match is switched off, because whatever answered the query has
276
- * already decided what matches and filtering the reply again would drop rows whose
277
- * label does not happen to contain what was typed.
278
- *
279
- * The `signal` aborts when a newer query supersedes this one. Replies are also
280
- * discarded by sequence, so a slow "a" landing after a fast "abc" cannot overwrite
281
- * the newer list — the failure that makes an async picker show the wrong rows.
282
- */
283
- type ComboboxLoader = (query: string, signal: AbortSignal) => Promise<ComboboxOption[]>;
284
- interface ComboboxProps {
285
- /** The whole list, filtered in the browser. Omit when `loadItems` is given. */
286
- items?: ComboboxOption[];
287
- /** Asks somewhere else for the options instead of holding them all (ADR 0006). */
288
- loadItems?: ComboboxLoader;
289
- /** How long typing has to stop before `loadItems` is asked. */
290
- loadDelay?: number;
291
- value?: string | null;
292
- defaultValue?: string | null;
293
- onValueChange?: (value: string | null) => void;
294
- placeholder?: string;
295
- /** Shown when the query matches nothing. */
296
- emptyMessage?: ReactNode;
297
- /** Shown while `loadItems` is outstanding. */
298
- loadingMessage?: ReactNode;
299
- /** Shown when `loadItems` rejects. */
300
- errorMessage?: ReactNode;
301
- size?: Size;
302
- disabled?: boolean;
303
- invalid?: boolean;
304
- name?: string;
305
- id?: string;
306
- className?: string;
307
- }
308
- /**
309
- * A Select you can type into. Reach for it past roughly a dozen options — below that, scanning a
310
- * list is faster than typing, and Select is the simpler component.
311
- */
312
- declare function AutoComplete({ items, loadItems, loadDelay, value, defaultValue, onValueChange, placeholder, emptyMessage, loadingMessage, errorMessage, size, disabled, invalid, name, id, className, }: ComboboxProps): react.JSX.Element;
313
-
314
- interface DateInputProps {
315
- value?: Date | null;
316
- defaultValue?: Date | null;
317
- onValueChange?: (value: Date | null) => void;
318
- min?: Date;
319
- max?: Date;
320
- /** How the chosen date reads in the field. Defaults to the viewer's locale, medium length. */
321
- format?: (date: Date) => string;
322
- weekStartsOn?: 0 | 1;
323
- size?: Size;
324
- disabled?: boolean;
325
- invalid?: boolean;
326
- placeholder?: string;
327
- className?: string;
328
- }
329
- /**
330
- * Typing and picking, both. Typing is what fast people do and what a date of birth needs; the
331
- * calendar is for "the second Tuesday" questions a text field cannot answer.
332
- */
333
- declare function DatePicker({ value, defaultValue, onValueChange, min, max, format, weekStartsOn, size, disabled, invalid, placeholder, className, }: DateInputProps): react.JSX.Element;
334
-
335
- /** Date arithmetic for the picker. Pure, and dealing only in local calendar days. */
336
- interface DayCell {
337
- date: Date;
338
- /** False for the leading and trailing days that belong to the neighbouring months. */
339
- inMonth: boolean;
340
- }
341
- declare function isSameDay(a: Date | null, b: Date | null): boolean;
342
- declare function startOfDay(date: Date): Date;
343
- /**
344
- * Six weeks of cells, always. A fixed grid height means the popover does not resize when a
345
- * month happens to span five weeks instead of six.
346
- */
347
- declare function monthMatrix(year: number, month: number, weekStartsOn?: 0 | 1): DayCell[][];
348
- /**
349
- * Reads what a person typed. ISO first, then day-first with `/`, `-`, or `.` — day-first because
350
- * that is what most of the world writes, and an ambiguous `03/04` has to pick a side.
351
- */
352
- declare function parseDateInput(input: string): Date | null;
353
- declare function formatISO(date: Date | null): string;
354
- declare function isOutOfRange(date: Date, min?: Date, max?: Date): boolean;
355
-
356
- /** Time-of-day parsing and formatting. Pure, like the date maths next to it. */
357
- interface TimeValue {
358
- hours: number;
359
- minutes: number;
360
- }
361
- /**
362
- * Reads what a person typed: `9`, `9:30`, `0930`, `9.30`, `9 pm`, `21:05`. Returns null rather
363
- * than guessing when the result would not be a real time.
364
- */
365
- declare function parseTime(input: string): TimeValue | null;
366
- declare function formatTime({ hours, minutes }: TimeValue): string;
367
- declare function timeToMinutes({ hours, minutes }: TimeValue): number;
368
- /** Every selectable time between two bounds, at `step` minutes. Bounds are inclusive. */
369
- declare function timeOptions(step: number, min?: TimeValue, max?: TimeValue): TimeValue[];
370
- declare function isTimeOutOfRange(value: TimeValue, min?: TimeValue, max?: TimeValue): boolean;
371
-
372
- interface TimeInputProps {
373
- value?: TimeValue | null;
374
- defaultValue?: TimeValue | null;
375
- onValueChange?: (value: TimeValue | null) => void;
376
- min?: TimeValue;
377
- max?: TimeValue;
378
- /** Minutes between the offered times. Typing is never restricted to them. */
379
- step?: number;
380
- size?: Size;
381
- disabled?: boolean;
382
- invalid?: boolean;
383
- placeholder?: string;
384
- className?: string;
385
- }
386
- /**
387
- * The DatePicker's sibling. Typing accepts what people actually type — `9`, `0930`, `9:30`,
388
- * `9pm` — and the list is a convenience on top, never the only way to answer.
389
- */
390
- declare function TimePicker({ value, defaultValue, onValueChange, min, max, step, size, disabled, invalid, placeholder, className, }: TimeInputProps): react.JSX.Element;
391
-
392
- /** File acceptance rules, kept pure: what gets rejected and why is worth asserting. */
393
- interface FileRules {
394
- /** Extensions or MIME types, e.g. ['.pdf', 'image/*']. */
395
- accept?: string[];
396
- /** Bytes. */
397
- maxSize?: number;
398
- maxFiles?: number;
399
- multiple?: boolean;
400
- }
401
- interface Rejection {
402
- file: File;
403
- reason: string;
404
- }
405
- declare function matchesAccept(file: File, accept: string[] | undefined): boolean;
406
- /**
407
- * Splits an incoming batch against the rules and what is already held. Every rejection carries
408
- * a reason, because a file that disappears without explanation reads as a broken uploader.
409
- */
410
- declare function partitionFiles(incoming: File[], existing: File[], rules: FileRules): {
411
- accepted: File[];
412
- rejected: Rejection[];
413
- };
414
- /** The " — PDF up to 5 MB" tail under the drop zone. Empty when there is nothing to say. */
415
- declare function describeAccept(rules: FileRules): string;
416
-
417
- interface UploadProps extends FileRules {
418
- onFilesChange: (files: File[]) => void;
419
- files?: File[];
420
- /** Rejections are surfaced rather than swallowed — a file that vanishes silently reads as a bug. */
421
- onReject?: (rejections: Array<{
422
- file: File;
423
- reason: string;
424
- }>) => void;
425
- disabled?: boolean;
426
- children?: ReactNode;
427
- className?: string;
428
- }
429
- declare function Upload({ onFilesChange, files, onReject, accept, maxSize, maxFiles, multiple, disabled, children, className, }: UploadProps): react.JSX.Element;
430
-
431
- /** Numeric input arithmetic, kept pure so the awkward cases are asserted, not hoped for. */
432
- interface NumberBounds {
433
- min?: number;
434
- max?: number;
435
- step?: number;
436
- }
437
- /** Parses what a person typed. Accepts a comma decimal separator; returns null for nonsense. */
438
- declare function parseNumber(input: string): number | null;
439
- declare function clamp(value: number, { min, max }: NumberBounds): number;
440
- /**
441
- * Steps by `step` and clamps. Floating point is rounded back to the step's own precision,
442
- * because 0.1 + 0.2 must read as 0.3 in an input a person is looking at.
443
- */
444
- declare function stepBy(value: number | null, direction: 1 | -1, bounds: NumberBounds): number;
445
- declare function decimalPlaces(step: number): number;
446
- /** Whether stepping in this direction would do anything — drives the disabled state. */
447
- declare function canStep(value: number | null, direction: 1 | -1, bounds: NumberBounds): boolean;
448
-
449
- interface NumberInputProps extends NumberBounds {
450
- value?: number | null;
451
- defaultValue?: number | null;
452
- onValueChange?: (value: number | null) => void;
453
- size?: Size;
454
- disabled?: boolean;
455
- invalid?: boolean;
456
- name?: string;
457
- placeholder?: string;
458
- /** Shown inside the control, e.g. 'kg', 'IDR'. Decorative — keep the unit in the label too. */
459
- suffix?: string;
460
- className?: string;
461
- }
462
- /**
463
- * A text input that speaks numbers, not `<input type="number">`: that one scrolls its value
464
- * away under the wheel, accepts 'e' and '+', and formats inconsistently across locales.
465
- */
466
- declare function InputNumber({ value, defaultValue, onValueChange, min, max, step, size, disabled, invalid, name, placeholder, suffix, className, }: NumberInputProps): react.JSX.Element;
467
-
468
- interface SliderSkeletonProps {
469
- orientation?: SliderOrientation;
470
- range?: boolean;
471
- size?: Size;
472
- }
473
- /** Placeholder geometry for a one- or two-thumb Slider (ADR 0009). */
474
- declare function SliderSkeleton({ orientation, range, size }: SliderSkeletonProps): react.JSX.Element;
475
-
476
- type SliderOrientation = 'horizontal' | 'vertical';
477
- type SliderRangeValue = readonly [number, number];
478
- interface SliderCommonProps {
479
- /** Names the value control. Range thumbs become “Minimum {label}” and “Maximum {label}”. */
480
- label: string;
481
- min?: number;
482
- max?: number;
483
- step?: number;
484
- largeStep?: number;
485
- minStepsBetweenValues?: number;
486
- /** Disables visual thumb transitions without changing Slider state feedback. */
487
- motion?: boolean;
488
- disabled?: boolean;
489
- orientation?: SliderOrientation;
490
- tone?: Tone;
491
- size?: Size;
492
- name?: string;
493
- /** Announces a formatted value without changing the numeric form value. */
494
- getAriaValueText?: (value: number, index: number) => string;
495
- }
496
- type SliderProps = SliderCommonProps & ({
497
- range?: false;
498
- value?: number;
499
- defaultValue?: number;
500
- onValueChange?: (value: number) => void;
501
- onValueCommitted?: (value: number) => void;
502
- } | {
503
- range: true;
504
- value?: SliderRangeValue;
505
- defaultValue?: SliderRangeValue;
506
- onValueChange?: (value: SliderRangeValue) => void;
507
- onValueCommitted?: (value: SliderRangeValue) => void;
508
- });
509
- /**
510
- * A continuous numeric value, or two bounded values when `range` is true.
511
- * Base UI owns the hidden range inputs, keyboard map, pointer and touch dragging,
512
- * thumb collision, and form submission semantics.
513
- */
514
- declare function SliderComponent(props: SliderProps): react.JSX.Element;
515
- declare const Slider: typeof SliderComponent & {
516
- Skeleton: typeof SliderSkeleton;
517
- };
518
-
519
- interface MentionsSkeletonProps {
520
- rows?: number;
521
- }
522
- declare function MentionsSkeleton({ rows }: MentionsSkeletonProps): react.JSX.Element;
523
-
524
- interface MentionOption {
525
- /** Stable text inserted after the trigger character. */
526
- value: string;
527
- label: ReactNode;
528
- searchText?: string;
529
- disabled?: boolean;
530
- }
531
- interface MentionsProps {
532
- options: MentionOption[];
533
- value?: string;
534
- defaultValue?: string;
535
- onValueChange?: (value: string) => void;
536
- trigger?: string;
537
- separator?: string;
538
- placeholder?: string;
539
- rows?: number;
540
- name?: string;
541
- disabled?: boolean;
542
- motion?: boolean;
543
- }
544
- /** Inline textarea editing with an anchored mention-list contract, not a text-field combobox. */
545
- declare function MentionsRoot({ options, value, defaultValue, onValueChange, trigger, separator, placeholder, rows, name, disabled, motion, }: MentionsProps): react.JSX.Element;
546
- declare const Mentions: typeof MentionsRoot & {
547
- Skeleton: typeof MentionsSkeleton;
548
- };
549
-
550
- interface TransferSkeletonProps {
551
- items?: number;
552
- }
553
- /** Static two-list loading geometry matching Transfer without controls or destination state. */
554
- declare function TransferSkeleton({ items }: TransferSkeletonProps): react.JSX.Element;
555
-
556
- interface TransferItem {
557
- /** Stable identity. Keys must be unique within one Transfer. */
558
- key: string;
559
- label: ReactNode;
560
- description?: ReactNode;
561
- disabled?: boolean;
562
- }
563
- interface TransferProps {
564
- /** The application supplies the complete, stable collection; Transfer never fetches it. */
565
- items: TransferItem[];
566
- /** Keys currently assigned to the target list. Supplying this makes assignment controlled. */
567
- targetKeys?: string[];
568
- defaultTargetKeys?: string[];
569
- onTargetKeysChange?: (keys: string[]) => void;
570
- sourceTitle?: ReactNode;
571
- targetTitle?: ReactNode;
572
- disabled?: boolean;
573
- 'aria-label'?: string;
574
- }
575
- /**
576
- * Two persistent checkbox lists for assigning supplied records between source and target.
577
- * `targetKeys` is controlled or uncontrolled assignment state; transient per-list checkbox
578
- * selection is deliberately internal, cleared only for records that are moved.
579
- */
580
- declare function TransferRoot({ items, targetKeys, defaultTargetKeys, onTargetKeysChange, sourceTitle, targetTitle, disabled, 'aria-label': ariaLabel, }: TransferProps): react.JSX.Element;
581
- declare const Transfer: typeof TransferRoot & {
582
- Skeleton: typeof TransferSkeleton;
583
- };
584
-
585
- interface TreeSkeletonProps {
586
- items?: number;
587
- size?: 'sm' | 'md' | 'lg';
588
- tone?: 'neutral' | 'brand' | 'success' | 'warning' | 'danger' | 'info';
589
- 'aria-label'?: string;
590
- }
591
- /** Placeholder geometry for an inline tree whose static nodes are still loading. */
592
- declare function TreeSkeleton({ items, size, tone, 'aria-label': ariaLabel }: TreeSkeletonProps): react.JSX.Element;
593
-
594
- type TreeTone = 'neutral' | 'brand' | 'success' | 'warning' | 'danger' | 'info';
595
- type TreeSize = 'sm' | 'md' | 'lg';
596
- interface TreeNode {
597
- key: string;
598
- label: ReactNode;
599
- /** Static supplementary content, such as a count or status. It must not introduce controls. */
600
- content?: ReactNode;
601
- disabled?: boolean;
602
- children?: TreeNode[];
603
- }
604
- interface TreeProps {
605
- nodes: TreeNode[];
606
- expandedPaths?: string[];
607
- defaultExpandedPaths?: string[];
608
- onExpandedPathsChange?: (paths: string[]) => void;
609
- selectedPath?: string;
610
- defaultSelectedPath?: string;
611
- onSelectedPathChange?: (path: string) => void;
612
- size?: TreeSize;
613
- tone?: TreeTone;
614
- motion?: boolean;
615
- 'aria-label'?: string;
616
- }
617
- /**
618
- * Inline hierarchy with the ARIA tree keyboard model. It is neither a navigation menu nor a
619
- * disclosure: Tree owns one roving treeitem focus and independently controlled expansion.
620
- */
621
- declare function TreeRoot({ nodes, expandedPaths, defaultExpandedPaths, onExpandedPathsChange, selectedPath, defaultSelectedPath, onSelectedPathChange, size, tone, motion, 'aria-label': ariaLabel, }: TreeProps): react.JSX.Element;
622
- declare const Tree: typeof TreeRoot & {
623
- Skeleton: typeof TreeSkeleton;
624
- };
625
-
626
- interface TreeSelectSkeletonProps {
627
- size?: 'sm' | 'md' | 'lg';
628
- }
629
- declare function TreeSelectSkeleton({ size }: TreeSelectSkeletonProps): react.JSX.Element;
630
-
631
- interface TreeSelectProps {
632
- nodes: TreeNode[];
633
- value?: string | null;
634
- defaultValue?: string | null;
635
- onValueChange?: (path: string) => void;
636
- open?: boolean;
637
- defaultOpen?: boolean;
638
- onOpenChange?: (open: boolean) => void;
639
- label: string;
640
- placeholder?: string;
641
- name?: string;
642
- disabled?: boolean;
643
- motion?: boolean;
644
- }
645
- /** One value chosen from injected hierarchy. Popover owns anchoring/dismissal; Tree owns traversal. */
646
- declare function TreeSelectRoot({ nodes, value, defaultValue, onValueChange, open, defaultOpen, onOpenChange, label, placeholder, name, disabled, motion }: TreeSelectProps): react.JSX.Element;
647
- declare const TreeSelect: typeof TreeSelectRoot & {
648
- Skeleton: typeof TreeSelectSkeleton;
649
- };
650
-
651
- interface CascaderSkeletonProps {
652
- rows?: number;
653
- }
654
- declare function CascaderSkeleton({ rows }: CascaderSkeletonProps): react.JSX.Element;
655
-
656
- interface CascaderOption {
657
- key: string;
658
- label: ReactNode;
659
- disabled?: boolean;
660
- children?: CascaderOption[];
661
- }
662
- interface CascaderProps {
663
- options: CascaderOption[];
664
- label: string;
665
- value?: string[];
666
- defaultValue?: string[];
667
- onValueChange?: (path: string[]) => void;
668
- placeholder?: string;
669
- disabled?: boolean;
670
- motion?: boolean;
671
- }
672
- /** A hierarchical, column-by-column selection surface. It is not an inline tree or a flat Select. */
673
- declare function CascaderRoot({ options, label, value, defaultValue, onValueChange, placeholder, disabled, motion, }: CascaderProps): react.JSX.Element;
674
- declare const Cascader: typeof CascaderRoot & {
675
- Skeleton: typeof CascaderSkeleton;
676
- };
677
-
678
- declare function ColorPickerSkeleton(): react.JSX.Element;
679
-
680
- interface ColorPickerOption {
681
- tone: Tone;
682
- label: string;
683
- disabled?: boolean;
684
- }
685
- interface ColorPickerProps {
686
- label: string;
687
- value?: Tone;
688
- defaultValue?: Tone;
689
- onValueChange?: (tone: Tone) => void;
690
- open?: boolean;
691
- defaultOpen?: boolean;
692
- onOpenChange?: (open: boolean) => void;
693
- options?: ColorPickerOption[];
694
- name?: string;
695
- disabled?: boolean;
696
- motion?: boolean;
697
- }
698
- declare function ColorPickerRoot({ label, value, defaultValue, onValueChange, open, defaultOpen, onOpenChange, options, name, disabled, motion }: ColorPickerProps): react.JSX.Element;
699
- declare const ColorPicker: typeof ColorPickerRoot & {
700
- Skeleton: typeof ColorPickerSkeleton;
701
- };
702
-
703
- interface ModalSkeletonProps {
704
- size?: 'sm' | 'md' | 'lg';
705
- lines?: number;
706
- withActions?: boolean;
707
- className?: string;
708
- }
709
- /** Static loading geometry for content that will resolve into a Modal (ADR 0009). */
710
- declare function ModalSkeleton({ size, lines, withActions, className, }: ModalSkeletonProps): react.JSX.Element;
711
-
712
- interface DialogProps {
713
- open?: boolean;
714
- defaultOpen?: boolean;
715
- onOpenChange?: (open: boolean) => void;
716
- title: ReactNode;
717
- description?: ReactNode;
718
- children?: ReactNode;
719
- footer?: ReactNode;
720
- size?: 'sm' | 'md' | 'lg';
721
- /** Slides from the edge instead of scaling in the centre. */
722
- placement?: 'center' | 'end';
723
- /** The element that opens it. Omit for a fully controlled dialog. */
724
- trigger?: ReactNode;
725
- className?: string;
726
- }
727
- /**
728
- * Focus trapping, scroll locking, dismissal, and the `aria-labelledby` wiring are Base UI's
729
- * (ADR 0003). Enter and exit are CSS transitions driven by Base UI's own state attributes,
730
- * because Base UI owns this element's mount lifecycle — motion is used where we own it.
731
- */
732
- declare function ModalRoot({ open, defaultOpen, onOpenChange, title, description, children, footer, size, placement, trigger, className, }: DialogProps): react.JSX.Element;
733
- interface ModalConfirmProps extends Omit<DialogProps, 'children' | 'footer' | 'placement' | 'size'> {
734
- /** Optional supporting content below the description. */
735
- children?: ReactNode;
736
- /** Action that dismisses without applying the decision. Rendered first. */
737
- cancelAction?: ReactNode;
738
- /** Action that applies the decision. Rendered last. */
739
- confirmAction: ReactNode;
740
- /** Semantic treatment for the confirmation icon and emphasis. */
741
- tone?: Tone;
742
- /** Replaces the semantic icon supplied by the consumer. */
743
- icon?: ReactNode;
744
- }
745
- /**
746
- * A composable counterpart to Ant's modal confirmation family. It intentionally reuses Modal's
747
- * dialog contract: this is viewport-modal confirmation, never an anchored Popconfirm.
748
- */
749
- declare function ModalConfirm({ title, description, children, cancelAction, confirmAction, tone, icon, className, ...rootProps }: ModalConfirmProps): react.JSX.Element;
750
- declare const Modal: typeof ModalRoot & {
751
- Confirm: typeof ModalConfirm;
752
- Skeleton: typeof ModalSkeleton;
753
- };
754
- declare const DialogClose: react.ForwardRefExoticComponent<Omit<_base_ui_react.AlertDialogCloseProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
755
-
756
- interface DrawerProps {
757
- open?: boolean;
758
- defaultOpen?: boolean;
759
- onOpenChange?: (open: boolean) => void;
760
- title: ReactNode;
761
- description?: ReactNode;
762
- children?: ReactNode;
763
- footer?: ReactNode;
764
- /** The element that opens it. Omit for a fully controlled drawer. */
765
- trigger?: ReactNode;
766
- className?: string;
767
- }
768
- /**
769
- * Modal navigation or task panel anchored to the inline end edge. Base UI supplies
770
- * focus trapping, dismissal, scroll locking, and accessible dialog semantics.
771
- */
772
- declare function Drawer({ open, defaultOpen, onOpenChange, title, description, children, footer, trigger, className, }: DrawerProps): react.JSX.Element;
773
- declare const DrawerClose: react.ForwardRefExoticComponent<Omit<_base_ui_react.AlertDialogCloseProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
774
-
775
115
  /** Command matching and ranking. Pure — search that ranks badly is a bug you can only see in a test. */
776
116
  interface Command {
777
117
  id: string;
@@ -833,146 +173,11 @@ interface ChecklistProps {
833
173
  /**
834
174
  * Getting-started tasks with progress. Which tasks are done is the app's knowledge, passed in —
835
175
  * the library does not track anyone's account state, the same rule the Seen Store follows
836
- * (ADR 0006).
176
+ *.
837
177
  */
838
178
  declare function Checklist({ title, tasks, completeSlot, className }: ChecklistProps): react.JSX.Element;
839
179
 
840
- type Side = 'top' | 'right' | 'bottom' | 'left';
841
- type Align = 'start' | 'center' | 'end';
842
- interface PopoverProps {
843
- trigger: ReactElement;
844
- children: ReactNode;
845
- side?: Side;
846
- align?: Align;
847
- /** Distance from the anchor, in px. Keep it at the token step unless the arrow needs room. */
848
- sideOffset?: number;
849
- showArrow?: boolean;
850
- open?: boolean;
851
- onOpenChange?: (open: boolean) => void;
852
- className?: string;
853
- }
854
- /** Positioning, dismissal, and focus return come from Base UI; this adds the surface (ADR 0003). */
855
- declare function Popover({ trigger, children, side, align, sideOffset, showArrow, open, onOpenChange, className, }: PopoverProps): react.JSX.Element;
856
- interface TooltipProps {
857
- children: ReactElement;
858
- /** Plain text. A tooltip that needs markup is a Popover — screen readers read this as a label. */
859
- label: string;
860
- side?: Side;
861
- align?: Align;
862
- /** Distance from the anchor, in px. */
863
- sideOffset?: number;
864
- showArrow?: boolean;
865
- delay?: number;
866
- }
867
- declare function Tooltip({ children, label, side, align, sideOffset, showArrow, delay, }: TooltipProps): react.JSX.Element;
868
-
869
- interface PopconfirmSkeletonProps {
870
- withDescription?: boolean;
871
- withCancel?: boolean;
872
- }
873
- /** Static loading geometry matching the anchored confirmation surface. */
874
- declare function PopconfirmSkeleton({ withDescription, withCancel, }: PopconfirmSkeletonProps): react.JSX.Element;
875
-
876
- interface PopconfirmProps {
877
- /** Native interactive element that anchors and opens the confirmation. */
878
- trigger: ReactElement;
879
- title: ReactNode;
880
- description?: ReactNode;
881
- /** Dismisses the confirmation after the rendered action handles its click. */
882
- cancelAction?: ReactElement;
883
- /** Dismisses the confirmation after the rendered action handles its click. */
884
- confirmAction: ReactElement;
885
- tone?: Extract<Tone, 'neutral' | 'warning' | 'danger'>;
886
- icon?: ReactNode;
887
- side?: Side;
888
- align?: Align;
889
- open?: boolean;
890
- defaultOpen?: boolean;
891
- onOpenChange?: (open: boolean) => void;
892
- motion?: boolean;
893
- }
894
- /**
895
- * Anchored, lightweight confirmation. Base UI owns anchoring, outside dismissal, Escape,
896
- * initial focus, and focus restoration when dismissal does not move focus elsewhere.
897
- * Viewport-modal confirmation remains Modal.Confirm.
898
- */
899
- declare function PopconfirmRoot({ trigger, title, description, cancelAction, confirmAction, tone, icon, side, align, open, defaultOpen, onOpenChange, motion, }: PopconfirmProps): react.JSX.Element;
900
- declare const Popconfirm: typeof PopconfirmRoot & {
901
- Skeleton: typeof PopconfirmSkeleton;
902
- };
903
-
904
- interface TagProps {
905
- children: ReactNode;
906
- tone?: Tone;
907
- variant?: 'soft' | 'solid' | 'outline';
908
- size?: 'sm' | 'md';
909
- icon?: ReactNode;
910
- /** Makes the tag itself pressable — filtering by it, or opening what it names. */
911
- onClick?: () => void;
912
- /** Whether a pressable tag is currently on. Reported as `aria-pressed`. */
913
- pressed?: boolean;
914
- /** Adds a control that takes the tag away. Not the same as pressing it. */
915
- onClose?: () => void;
916
- /** Render something else in the tag's place — a router's own Link. */
917
- render?: ReactElement;
918
- className?: string;
919
- }
920
- /**
921
- * A label you can do something to.
922
- *
923
- * `Badge` is the one you cannot: it says what something is and nothing more, and
924
- * its own note says that a label which can be pressed or removed is this instead.
925
- * That is the whole boundary between them — not the size, not the colour, but
926
- * whether there is anything to press (ADR 0014). They share the look and differ
927
- * in what they are.
928
- *
929
- * Pressing and removing are also two different things, so they are two props. A
930
- * tag that filters by its own value and a tag that takes itself off a list are
931
- * not the same gesture, and one component that guessed which you meant would be
932
- * wrong half the time.
933
- */
934
- declare function Tag({ children, tone, variant, size, icon, onClick, pressed, onClose, render, className, }: TagProps): react.JSX.Element;
935
-
936
- interface RateProps {
937
- /** 0 means nothing chosen, which is different from choosing the lowest score. */
938
- value: number;
939
- onValueChange?: (value: number) => void;
940
- count?: number;
941
- size?: number;
942
- /** Shows a score without offering to change it. */
943
- readOnly?: boolean;
944
- /** Names the group when it is not inside a Field. */
945
- label?: string;
946
- className?: string;
947
- }
948
- /**
949
- * A score out of a few, set by pressing one of them.
950
- *
951
- * A radiogroup, not a row of buttons: exactly one of a small visible set is the
952
- * definition of one, and it buys the arrow keys and the announced position for
953
- * free. Read-only it is not a group at all — there is nothing to choose, so it
954
- * is an image with a label saying what it shows.
955
- *
956
- * Pressing the current score again clears it. Nought stars and one star are
957
- * different answers, and without this there is no way back to the first.
958
- */
959
- declare function Rate({ value, onValueChange, count, size, readOnly, label, className, }: RateProps): react.JSX.Element;
960
-
961
- interface AlertProps {
962
- title?: ReactNode;
963
- children?: ReactNode;
964
- tone?: Tone;
965
- /** Replaces the tone's default icon. Pass null to drop it. */
966
- icon?: ReactNode | null;
967
- actions?: ReactNode;
968
- onDismiss?: () => void;
969
- className?: string;
970
- }
971
- /**
972
- * `danger` and `warning` announce themselves through `role="alert"`; the quieter tones do not,
973
- * because a success note that interrupts a screen reader mid-sentence is not helpful.
974
- */
975
- declare function Alert({ title, children, tone, icon, actions, onDismiss, className }: AlertProps): react.JSX.Element;
180
+ type Tone = 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'danger';
976
181
 
977
182
  type ToastPosition = 'bottom-end' | 'bottom-center' | 'bottom-start' | 'top-end' | 'top-center' | 'top-start';
978
183
  interface ToastProviderProps {
@@ -1005,135 +210,6 @@ declare function useToast(): {
1005
210
  promise: <Value, T extends any = any>(promise: Promise<Value>, options: _base_ui_react.ToastManagerPromiseOptions<Value, T>) => Promise<Value>;
1006
211
  };
1007
212
 
1008
- interface WatermarkSkeletonProps {
1009
- content?: WatermarkContent;
1010
- tone?: Tone;
1011
- density?: WatermarkDensity;
1012
- direction?: WatermarkDirection;
1013
- lines?: number;
1014
- }
1015
- /** Matching marked content surface while the wrapped content is loading (ADR 0009). */
1016
- declare function WatermarkSkeleton({ content, tone, density, direction, lines, }: WatermarkSkeletonProps): react.JSX.Element;
1017
-
1018
- type WatermarkContent = string | string[];
1019
- type WatermarkDensity = 'sm' | 'md' | 'lg';
1020
- type WatermarkDirection = 'horizontal' | 'vertical';
1021
- interface WatermarkProps {
1022
- /** One mark, or a sequence that repeats in order across the overlay. */
1023
- content: WatermarkContent;
1024
- children: ReactNode;
1025
- tone?: Tone;
1026
- density?: WatermarkDensity;
1027
- direction?: WatermarkDirection;
1028
- }
1029
- /** A presentational overlay that keeps its supplied content's semantics untouched. */
1030
- declare function WatermarkRoot({ content, children, tone, density, direction, }: WatermarkProps): react.JSX.Element;
1031
- declare const Watermark: typeof WatermarkRoot & {
1032
- Skeleton: typeof WatermarkSkeleton;
1033
- };
1034
-
1035
- interface TabItem {
1036
- value: string;
1037
- label: ReactNode;
1038
- /** Count or status shown after the label, e.g. a Badge. */
1039
- adornment?: ReactNode;
1040
- disabled?: boolean;
1041
- content: ReactNode;
1042
- }
1043
- interface TabsProps {
1044
- items: TabItem[];
1045
- value?: string;
1046
- defaultValue?: string;
1047
- onValueChange?: (value: string) => void;
1048
- variant?: 'underline' | 'pill';
1049
- className?: string;
1050
- }
1051
- /** Roving focus, panel association, and the moving indicator are Base UI's (ADR 0003). */
1052
- declare function Tabs({ items, value, defaultValue, onValueChange, variant, className }: TabsProps): react.JSX.Element;
1053
-
1054
- interface MenuItem {
1055
- /** Omit everything but `separator` to draw a divider. */
1056
- separator?: boolean;
1057
- label?: ReactNode;
1058
- icon?: ReactNode;
1059
- shortcut?: string;
1060
- tone?: Extract<Tone, 'neutral' | 'danger'>;
1061
- disabled?: boolean;
1062
- checked?: boolean;
1063
- onSelect?: () => void;
1064
- }
1065
- interface MenuSection {
1066
- label?: ReactNode;
1067
- items: MenuItem[];
1068
- }
1069
- interface DropdownMenuBaseProps {
1070
- trigger: ReactElement;
1071
- align?: 'start' | 'center' | 'end';
1072
- side?: 'top' | 'right' | 'bottom' | 'left';
1073
- className?: string;
1074
- }
1075
- type DropdownMenuProps = DropdownMenuBaseProps & ({
1076
- items: MenuItem[];
1077
- sections?: never;
1078
- } | {
1079
- items?: never;
1080
- sections: MenuSection[];
1081
- });
1082
- /** Typeahead, roving focus, and dismissal are Base UI's; the surface and the rhythm are ours. */
1083
- declare function Dropdown({ trigger, items, sections, align, side, className }: DropdownMenuProps): react.JSX.Element;
1084
-
1085
- interface MenuSkeletonProps {
1086
- items?: number;
1087
- size?: 'sm' | 'md' | 'lg';
1088
- tone?: 'neutral' | 'brand' | 'success' | 'warning' | 'danger' | 'info';
1089
- 'aria-label'?: string;
1090
- }
1091
- /** Placeholder rows for a persistent navigation menu whose destinations have not loaded yet. */
1092
- declare function MenuSkeleton({ items, size, tone, 'aria-label': ariaLabel, }: MenuSkeletonProps): react.JSX.Element;
1093
-
1094
- type MenuTone = 'neutral' | 'brand' | 'success' | 'warning' | 'danger' | 'info';
1095
- type MenuSize = 'sm' | 'md' | 'lg';
1096
- interface PersistentMenuLeaf {
1097
- key: string;
1098
- label: ReactNode;
1099
- href: string;
1100
- icon?: ReactNode;
1101
- disabled?: boolean;
1102
- }
1103
- interface PersistentMenuBranch {
1104
- key: string;
1105
- label: ReactNode;
1106
- /** Explicit accessible name for the disclosure control; labels may contain arbitrary React nodes. */
1107
- ariaLabel: string;
1108
- icon?: ReactNode;
1109
- disabled?: boolean;
1110
- children: PersistentMenuItem[];
1111
- href?: never;
1112
- }
1113
- type PersistentMenuItem = PersistentMenuLeaf | PersistentMenuBranch;
1114
- interface MenuProps {
1115
- items: PersistentMenuItem[];
1116
- selectedPath?: string;
1117
- defaultSelectedPath?: string;
1118
- onSelectedPathChange?: (path: string) => void;
1119
- openKeys?: string[];
1120
- defaultOpenKeys?: string[];
1121
- onOpenKeysChange?: (keys: string[]) => void;
1122
- size?: MenuSize;
1123
- tone?: MenuTone;
1124
- motion?: boolean;
1125
- 'aria-label'?: string;
1126
- }
1127
- /**
1128
- * Persistent navigation in normal document flow. Native links retain their normal browser
1129
- * behaviour; nested branches are disclosure buttons. This is intentionally not Dropdown:
1130
- * Dropdown is an anchored, dismissible action menu with roving focus.
1131
- */
1132
- declare function MenuRoot({ items, selectedPath, defaultSelectedPath, onSelectedPathChange, openKeys, defaultOpenKeys, onOpenKeysChange, size, tone, motion, 'aria-label': ariaLabel, }: MenuProps): react.JSX.Element;
1133
- declare const Menu: typeof MenuRoot & {
1134
- Skeleton: typeof MenuSkeleton;
1135
- };
1136
-
1137
213
  interface NavItem {
1138
214
  label: ReactNode;
1139
215
  icon?: ReactNode;
@@ -1176,401 +252,6 @@ interface TopBarProps {
1176
252
  }
1177
253
  declare function TopBar({ title, subtitle, center, actions, sticky, className }: TopBarProps): react.JSX.Element;
1178
254
 
1179
- /** Sorting and pagination arithmetic, kept pure so the off-by-ones are asserted (ADR 0012). */
1180
- type SortDirection = 'asc' | 'desc';
1181
- interface SortState {
1182
- column: string;
1183
- direction: SortDirection;
1184
- }
1185
- /**
1186
- * What clicking a header does. Sorting a new column starts ascending; clicking the sorted
1187
- * column flips it; clicking a descending column clears the sort — three states, because
1188
- * "back to the order the server gave me" is a state people look for.
1189
- */
1190
- declare function nextSort(current: SortState | null, column: string): SortState | null;
1191
- declare function ariaSortFor(current: SortState | null, column: string): 'ascending' | 'descending' | 'none';
1192
- interface PageRange {
1193
- /** Page numbers to render; `null` is an ellipsis. */
1194
- items: Array<number | null>;
1195
- totalPages: number;
1196
- /** 1-based index of the first and last row on this page, for "1–20 of 137". */
1197
- from: number;
1198
- to: number;
1199
- }
1200
- /**
1201
- * The page list, with ellipses. `siblings` is how many pages flank the current one; first and
1202
- * last are always shown, because jumping to the end is the second most common thing people do.
1203
- */
1204
- declare function pageRange(page: number, pageSize: number, total: number, siblings?: number): PageRange;
1205
-
1206
- interface Column<Row> {
1207
- key: string;
1208
- header: ReactNode;
1209
- /** Cell content. Given the row, so a column can render a Badge or an Avatar. */
1210
- cell: (row: Row) => ReactNode;
1211
- align?: 'start' | 'end';
1212
- width?: string;
1213
- sortable?: boolean;
1214
- /** Hides the column below 720px — for the ones a phone can live without. */
1215
- secondary?: boolean;
1216
- /** Clips overflowing text with an ellipsis instead of widening the column. */
1217
- truncate?: boolean;
1218
- }
1219
- interface DataTableProps<Row> {
1220
- columns: Array<Column<Row>>;
1221
- rows: Row[];
1222
- rowKey: (row: Row) => string;
1223
- /** Accessible name for the table. */
1224
- label: string;
1225
- sort?: SortState | null;
1226
- onSortChange?: (sort: SortState | null) => void;
1227
- onRowClick?: (row: Row) => void;
1228
- /** Rendered in place of the body when there are no rows — an Empty, usually. */
1229
- empty?: ReactNode;
1230
- className?: string;
1231
- }
1232
- /**
1233
- * A table, not a grid: no virtualisation, no column resizing, no editing. It renders rows and
1234
- * sorts by a column, and anything past that is a product feature rather than a design system one.
1235
- */
1236
- declare function Table<Row>({ columns, rows, rowKey, label, sort, onSortChange, onRowClick, empty, className, }: DataTableProps<Row>): react.JSX.Element;
1237
- declare namespace Table {
1238
- var Skeleton: typeof DataTableSkeleton;
1239
- }
1240
- interface DataTableSkeletonProps {
1241
- columns: number;
1242
- rows?: number;
1243
- className?: string;
1244
- }
1245
- /** Same row height and column count as the real table, so the page does not jump (ADR 0009). */
1246
- declare function DataTableSkeleton({ columns, rows, className }: DataTableSkeletonProps): react.JSX.Element;
1247
-
1248
- interface PaginationProps {
1249
- page: number;
1250
- pageSize: number;
1251
- total: number;
1252
- onPageChange: (page: number) => void;
1253
- /** Shows "1–20 of 137" beside the controls. */
1254
- showSummary?: boolean;
1255
- siblings?: number;
1256
- className?: string;
1257
- }
1258
- declare function Pagination({ page, pageSize, total, onPageChange, showSummary, siblings, className, }: PaginationProps): react.JSX.Element;
1259
-
1260
- interface CollapseSkeletonProps {
1261
- items?: number;
1262
- openItems?: number[];
1263
- lines?: number;
1264
- size?: 'sm' | 'md' | 'lg';
1265
- bordered?: boolean;
1266
- expandIconPosition?: 'start' | 'end';
1267
- className?: string;
1268
- }
1269
- /** Matching disclosure-row geometry for a Collapse that has not loaded yet (ADR 0009). */
1270
- declare function CollapseSkeleton({ items, openItems, lines, size, bordered, expandIconPosition, className, }: CollapseSkeletonProps): react.JSX.Element;
1271
-
1272
- interface CollapseItem {
1273
- key: string;
1274
- label: ReactNode;
1275
- children: ReactNode;
1276
- disabled?: boolean;
1277
- }
1278
- interface CollapseProps {
1279
- items: CollapseItem[];
1280
- /** One key in single mode; an array of keys when `multiple` is true. */
1281
- value?: string | string[];
1282
- /** Initial key or keys for an uncontrolled Collapse. */
1283
- defaultValue?: string | string[];
1284
- onValueChange?: (value: string | string[] | undefined) => void;
1285
- multiple?: boolean;
1286
- size?: 'sm' | 'md' | 'lg';
1287
- bordered?: boolean;
1288
- expandIconPosition?: 'start' | 'end';
1289
- headingLevel?: 2 | 3 | 4 | 5 | 6;
1290
- disabled?: boolean;
1291
- /** Keeps closed panels in the DOM, for content whose local state must survive toggles. */
1292
- keepMounted?: boolean;
1293
- /** Allows browser page search to reveal matching content in closed panels. */
1294
- hiddenUntilFound?: boolean;
1295
- motion?: boolean;
1296
- className?: string;
1297
- }
1298
- declare function CollapseRoot({ items, value, defaultValue, onValueChange, multiple, size, bordered, expandIconPosition, headingLevel, disabled, keepMounted, hiddenUntilFound, motion, className, }: CollapseProps): react.JSX.Element;
1299
- /** A disclosure group. Base UI owns expansion state, button semantics, and panel association. */
1300
- declare const Collapse: typeof CollapseRoot & {
1301
- Skeleton: typeof CollapseSkeleton;
1302
- };
1303
-
1304
- interface CalendarSkeletonProps {
1305
- weekStartsOn?: 0 | 1;
1306
- }
1307
- /** A fixed six-week placeholder matching Calendar's inline month-grid geometry. */
1308
- declare function CalendarSkeleton({ weekStartsOn }: CalendarSkeletonProps): react.JSX.Element;
1309
-
1310
- interface CalendarDay {
1311
- date: Date;
1312
- inMonth: boolean;
1313
- selected: boolean;
1314
- today: boolean;
1315
- disabled: boolean;
1316
- }
1317
- interface CalendarProps {
1318
- /** Selected local calendar day. Supplying it makes date selection controlled. */
1319
- value?: Date | null;
1320
- defaultValue?: Date | null;
1321
- onValueChange?: (value: Date) => void;
1322
- /** Month being displayed. Supplying it makes month navigation controlled. */
1323
- month?: Date;
1324
- defaultMonth?: Date;
1325
- onMonthChange?: (month: Date) => void;
1326
- minDate?: Date;
1327
- maxDate?: Date;
1328
- disabledDate?: (date: Date) => boolean;
1329
- /** Renders static, noninteractive content inside each day button without changing its grid or selection contract. */
1330
- renderDay?: (day: CalendarDay) => ReactNode;
1331
- locale?: string | string[];
1332
- weekStartsOn?: 0 | 1;
1333
- disabled?: boolean;
1334
- }
1335
- /** Inline month grid: it owns neither a field, a popup, nor dismissal. */
1336
- declare function CalendarRoot({ value, defaultValue, onValueChange, month, defaultMonth, onMonthChange, minDate, maxDate, disabledDate, renderDay, locale, weekStartsOn, disabled, }: CalendarProps): react.JSX.Element;
1337
- declare const Calendar: typeof CalendarRoot & {
1338
- Skeleton: typeof CalendarSkeleton;
1339
- };
1340
-
1341
- interface ImageSkeletonProps {
1342
- aspectRatio?: number;
1343
- radius?: "none" | "sm" | "md" | "lg" | "xl";
1344
- className?: string;
1345
- }
1346
- interface ImagePreviewGroupSkeletonProps extends ImageSkeletonProps {
1347
- items?: number;
1348
- }
1349
- /** Reserves the same aspect-ratio and radius geometry as Image (ADR 0009). */
1350
- declare function ImageSkeleton({ aspectRatio, radius, className, }: ImageSkeletonProps): react.JSX.Element;
1351
- /** Mirrors the responsive thumbnail collection owned by Image.PreviewGroup. */
1352
- declare function ImagePreviewGroupSkeleton({ items, aspectRatio, radius, className, }: ImagePreviewGroupSkeletonProps): react.JSX.Element;
1353
-
1354
- type TokenReference = `var(--${string})`;
1355
- interface ImageProps {
1356
- src: string;
1357
- /** Empty string is allowed, and means "decorative" — but it has to be said out loud. */
1358
- alt: string;
1359
- /** Width / height, e.g. 16 / 9. Reserves the space so nothing below it jumps. */
1360
- aspectRatio?: number;
1361
- /** A tiny data URI, blurred up while the real image loads. */
1362
- blurDataUrl?: string;
1363
- /** Flat colour to sit behind the image when there is no blur placeholder. */
1364
- background?: TokenReference;
1365
- fit?: "cover" | "contain";
1366
- radius?: "none" | "sm" | "md" | "lg" | "xl";
1367
- loading?: "lazy" | "eager";
1368
- /** Opts this image out of its loading fade without changing its visibility. */
1369
- motion?: boolean;
1370
- className?: string;
1371
- }
1372
- declare function ImageRoot({ src, alt, aspectRatio, blurDataUrl, background, fit, radius, loading, motion, className, }: ImageProps): react.JSX.Element;
1373
- interface ImagePreviewItem extends ImageProps {
1374
- /** Stable identity for React and controlled collections. */
1375
- id: string;
1376
- /** Optional larger source used only inside the preview. */
1377
- previewSrc?: string;
1378
- /** Optional content shown below the fullscreen image. */
1379
- caption?: ReactNode;
1380
- }
1381
- interface ImagePreviewLabels {
1382
- close: string;
1383
- previous: string;
1384
- next: string;
1385
- zoomIn: string;
1386
- zoomOut: string;
1387
- resetZoom: string;
1388
- open: (item: ImagePreviewItem, index: number) => string;
1389
- position: (current: number, total: number) => string;
1390
- }
1391
- interface ImagePreviewGroupProps {
1392
- items: readonly ImagePreviewItem[];
1393
- /** Accessible name for the thumbnail collection. */
1394
- label: string;
1395
- open?: boolean;
1396
- defaultOpen?: boolean;
1397
- onOpenChange?: (open: boolean) => void;
1398
- index?: number;
1399
- defaultIndex?: number;
1400
- onIndexChange?: (index: number) => void;
1401
- loop?: boolean;
1402
- labels?: Partial<ImagePreviewLabels>;
1403
- motion?: boolean;
1404
- className?: string;
1405
- }
1406
- declare function ImagePreviewGroupRoot({ items, label, open, defaultOpen, onOpenChange, index, defaultIndex, onIndexChange, loop, labels: labelOverrides, motion, className, }: ImagePreviewGroupProps): react.JSX.Element;
1407
- /**
1408
- * `Image` stays an image-loading composition. Preview is a separate compound contract because it
1409
- * adds dialog semantics, keyboard navigation, focus ownership, and a zoom gesture (ADR 0014).
1410
- */
1411
- declare const Image: typeof ImageRoot & {
1412
- PreviewGroup: typeof ImagePreviewGroupRoot & {
1413
- Skeleton: typeof ImagePreviewGroupSkeleton;
1414
- };
1415
- Skeleton: typeof ImageSkeleton;
1416
- };
1417
-
1418
- interface CarouselProps {
1419
- children: ReactNode;
1420
- /** Accessible name — a carousel with no name is an unlabelled region to a screen reader. */
1421
- label: string;
1422
- /** Slide width as a CSS length or fraction of the viewport, e.g. '18rem' or '50%'. */
1423
- slideWidth?: string;
1424
- gap?: 2 | 3 | 4 | 5;
1425
- loop?: boolean;
1426
- align?: 'start' | 'center';
1427
- /** Milliseconds between advances. Omit for a carousel that only moves when asked. */
1428
- autoplay?: number;
1429
- showArrows?: boolean;
1430
- showDots?: boolean;
1431
- className?: string;
1432
- }
1433
- declare function CarouselRoot({ children, label, slideWidth, gap, loop, align, autoplay, showArrows, showDots, className, }: CarouselProps): react.JSX.Element;
1434
- interface CarouselSlideProps {
1435
- children: ReactNode;
1436
- className?: string;
1437
- }
1438
- declare function CarouselSlide({ children, className }: CarouselSlideProps): react.JSX.Element;
1439
- interface CarouselSkeletonProps {
1440
- slides?: number;
1441
- slideWidth?: string;
1442
- slideHeight?: string;
1443
- gap?: 2 | 3 | 4 | 5;
1444
- }
1445
- /** Same track geometry as the real carousel, so slides do not resize on load (ADR 0009). */
1446
- declare function CarouselSkeleton({ slides, slideWidth, slideHeight, gap, }: CarouselSkeletonProps): react.JSX.Element;
1447
- declare const Carousel: typeof CarouselRoot & {
1448
- Slide: typeof CarouselSlide;
1449
- Skeleton: typeof CarouselSkeleton;
1450
- };
1451
-
1452
- /** Inputs that decide whether a carousel may advance on its own. */
1453
- interface AutoplayConditions {
1454
- /** The caller asked for autoplay at all. */
1455
- requested: boolean;
1456
- pointerInside: boolean;
1457
- /** Focus is somewhere inside the carousel — keyboard users must not lose their place. */
1458
- focusInside: boolean;
1459
- documentHidden: boolean;
1460
- reducedMotion: boolean;
1461
- }
1462
- /**
1463
- * Autoplay stops for four separate reasons, and every one of them is a bug when missed:
1464
- * a hovered carousel that keeps moving, a focused one that steals the slide out from under
1465
- * a keyboard user, a background tab burning frames, and motion nobody asked for.
1466
- */
1467
- declare function shouldAutoplay(conditions: AutoplayConditions): boolean;
1468
-
1469
- interface CoachmarkProps {
1470
- open: boolean;
1471
- /** The element being pointed at. Already resolved — a Tour does the resolving. */
1472
- anchor: Element | null;
1473
- title: ReactNode;
1474
- children?: ReactNode;
1475
- side?: Side;
1476
- align?: Align;
1477
- /** Dims the page and cuts a hole around the anchor. A number sets the hole's padding in px. */
1478
- spotlight?: boolean | number;
1479
- /** e.g. `{ current: 2, total: 5 }` — rendered as "2 of 5" and announced. */
1480
- progress?: {
1481
- current: number;
1482
- total: number;
1483
- };
1484
- actions?: ReactNode;
1485
- onDismiss?: () => void;
1486
- className?: string;
1487
- }
1488
- /**
1489
- * One anchored bubble pointing at one element. It knows nothing about sequence and nothing
1490
- * about who has seen it — those are Tour and the Seen Store (ADR 0006).
1491
- */
1492
- declare function Coachmark({ open, anchor, title, children, side, align, spotlight, progress, actions, onDismiss, className, }: CoachmarkProps): react.JSX.Element;
1493
-
1494
- /**
1495
- * How a Tour asks whether someone has already been through it.
1496
- *
1497
- * The library ships this interface and no implementation on purpose (ADR 0006): a library that
1498
- * reaches for localStorage has decided what a user is and where their state lives, and that is
1499
- * the assumption that makes an onboarding library impossible to remove later.
1500
- *
1501
- * A localStorage adapter is four lines; a server-backed one is a fetch. Both are yours.
1502
- */
1503
- interface SeenStore {
1504
- /** Whether this tour has been completed or skipped before. May be async. */
1505
- has: (tourId: string) => boolean | Promise<boolean>;
1506
- /** Records that it has now. Called once, when the tour finishes or is skipped. */
1507
- mark: (tourId: string) => void | Promise<void>;
1508
- }
1509
-
1510
- /** Tour sequencing, kept pure so every edge is assertable (ADR 0012). */
1511
- type TourStatus = 'idle' | 'running' | 'finished' | 'skipped';
1512
- interface TourState {
1513
- index: number;
1514
- status: TourStatus;
1515
- }
1516
- type TourAction = {
1517
- type: 'start';
1518
- } | {
1519
- type: 'next';
1520
- } | {
1521
- type: 'prev';
1522
- } | {
1523
- type: 'goto';
1524
- index: number;
1525
- } | {
1526
- type: 'skip';
1527
- } | {
1528
- type: 'finish';
1529
- };
1530
- declare const initialTourState: TourState;
1531
- /**
1532
- * `stepCount` is passed in rather than held in state because steps are props: a tour whose
1533
- * steps change while it runs must not point past the end of the new list.
1534
- */
1535
- declare function tourReducer(state: TourState, action: TourAction, stepCount: number): TourState;
1536
- /** A tour that ended, either way. Both outcomes mark the Seen Store. */
1537
- declare function hasEnded(status: TourStatus): boolean;
1538
- type StepTarget = string | Element | {
1539
- current: Element | null;
1540
- } | (() => Element | null) | null;
1541
- /**
1542
- * Resolves a step's target. Returns null rather than throwing when the element is not mounted
1543
- * yet — the Tour retries, because a target that appears one frame late is normal, not an error.
1544
- */
1545
- declare function resolveTarget(target: StepTarget, root: ParentNode): Element | null;
1546
-
1547
- interface TourStep {
1548
- target: StepTarget;
1549
- title: ReactNode;
1550
- content?: ReactNode;
1551
- side?: Side;
1552
- align?: Align;
1553
- spotlight?: boolean | number;
1554
- }
1555
- interface TourProps {
1556
- /** Stable id — this is what the Seen Store remembers. */
1557
- id: string;
1558
- steps: TourStep[];
1559
- /** Starts the tour when it turns true. */
1560
- open?: boolean;
1561
- onOpenChange?: (open: boolean) => void;
1562
- /** Injected by the app; without one the tour runs every time it is opened (ADR 0006). */
1563
- seenStore?: SeenStore;
1564
- onFinish?: () => void;
1565
- onSkip?: () => void;
1566
- labels?: Partial<Record<'back' | 'next' | 'done' | 'skip', string>>;
1567
- }
1568
- /**
1569
- * Sequences Coachmarks. It owns order and nothing else: memory is the Seen Store's, the bubble
1570
- * is the Coachmark's, and the steps belong to the caller.
1571
- */
1572
- declare function Tour({ id, steps, open, onOpenChange, seenStore, onFinish, onSkip, labels }: TourProps): react.JSX.Element | null;
1573
-
1574
255
  interface RevealProps {
1575
256
  children: ReactNode;
1576
257
  /** Direction the content travels from. Under reduced motion it only fades. */
@@ -1594,52 +275,4 @@ interface StaggerProps {
1594
275
  /** Wraps each child in a Reveal with an increasing delay — the list arrives, it does not pop. */
1595
276
  declare function Stagger({ children, step, from, onView, className }: StaggerProps): react.JSX.Element;
1596
277
 
1597
- interface BorderBeamProps {
1598
- /** Content keeps its own semantics and interactions; the beam is decorative. */
1599
- children: ReactNode;
1600
- tone?: Tone;
1601
- /** Controls the beam thickness and the geometry of its visible sweep. */
1602
- size?: Size;
1603
- /** Opt out of the decorative movement while retaining a visible border. */
1604
- motion?: boolean;
1605
- }
1606
- /**
1607
- * Wraps content with a decorative moving border. The overlay is deliberately
1608
- * not an interaction layer: it is hidden from assistive technology and cannot
1609
- * intercept pointer events.
1610
- */
1611
- declare function BorderBeam({ children, tone, size, motion }: BorderBeamProps): react.JSX.Element;
1612
-
1613
- interface SplitterSkeletonProps {
1614
- orientation?: SplitterOrientation;
1615
- size?: number;
1616
- handleSize?: SplitterHandleSize;
1617
- }
1618
- declare function SplitterSkeleton({ orientation, size, handleSize, }: SplitterSkeletonProps): react.JSX.Element;
1619
-
1620
- type SplitterOrientation = 'horizontal' | 'vertical';
1621
- type SplitterHandleSize = 'sm' | 'md' | 'lg';
1622
- interface SplitterProps {
1623
- /** Percentage assigned to the first pane. Supplying this makes the Splitter controlled. */
1624
- size?: number;
1625
- /** Initial percentage assigned to the first pane when uncontrolled. */
1626
- defaultSize?: number;
1627
- /** Lowest allowed percentage for the first pane. */
1628
- minSize?: number;
1629
- /** Highest allowed percentage for the first pane. */
1630
- maxSize?: number;
1631
- onSizeChange?: (size: number) => void;
1632
- orientation?: SplitterOrientation;
1633
- /** Handle geometry only; it does not alter the resize contract. */
1634
- handleSize?: SplitterHandleSize;
1635
- disabled?: boolean;
1636
- /** Accessible name for the separator. */
1637
- handleLabel?: string;
1638
- children: ReactNode;
1639
- }
1640
- declare function SplitterRoot({ size, defaultSize, minSize, maxSize, onSizeChange, orientation, handleSize, disabled, handleLabel, children, }: SplitterProps): react.JSX.Element;
1641
- declare const Splitter: typeof SplitterRoot & {
1642
- Skeleton: typeof SplitterSkeleton;
1643
- };
1644
-
1645
- export { Alert, type AlertProps, type Align, AutoComplete, type AutoplayConditions, BorderBeam, type BorderBeamProps, Button, type ButtonProps, Calendar, type CalendarDay, type CalendarProps, CalendarSkeleton, type CalendarSkeletonProps, Carousel, type CarouselProps, type CarouselSkeletonProps, type CarouselSlideProps, Cascader, type CascaderOption, type CascaderProps, CascaderSkeleton, type CascaderSkeletonProps, Checkbox, type CheckboxProps, Checklist, type ChecklistProps, type ChecklistTask, Coachmark, type CoachmarkProps, Collapse, type CollapseItem, type CollapseProps, CollapseSkeleton, type CollapseSkeletonProps, ColorPicker, type ColorPickerOption, type ColorPickerProps, ColorPickerSkeleton, type Column, type ComboboxOption, type ComboboxProps, type Command, CommandPalette, type CommandPaletteProps, DEFAULT_LABELS, type DataTableProps, type DataTableSkeletonProps, type DateInputProps, DatePicker, type DayCell, DialogClose, type DialogProps, Drawer, DrawerClose, type DrawerProps, Dropdown, type DropdownMenuProps, type DurationToken, Field, type FieldProps, type FileRules, FloatButton, type FloatButtonPlacement, type FloatButtonProps, Image, type ImagePreviewGroupProps, type ImagePreviewGroupSkeletonProps, type ImagePreviewItem, type ImagePreviewLabels, type ImageProps, type ImageSkeletonProps, Input, InputNumber, type Labels, LabelsProvider, type LabelsProviderProps, type MentionOption, Mentions, type MentionsProps, MentionsSkeleton, type MentionsSkeletonProps, Menu, type MenuItem, type MenuProps, type MenuSection, type MenuSize, MenuSkeleton, type MenuSkeletonProps, type MenuTone, Modal, type ModalConfirmProps, type ModalSkeletonProps, type MotionHelpers, MotionProvider, type MotionProviderProps, type MotionSettings, type NavItem, type NavSection, type NumberBounds, type NumberInputProps, type PageRange, Pagination, type PaginationProps, type PaletteCommand, type PersistentMenuItem, Popconfirm, type PopconfirmProps, PopconfirmSkeleton, type PopconfirmSkeletonProps, Popover, type PopoverProps, RadioGroup, type RadioGroupProps, type RadioOption, type RankedCommand, Rate, type RateProps, type Rejection, Reveal, type RevealProps, type SeenStore, Select, type SelectOption, type SelectProps, type Side, Sidebar, type SidebarProps, Slider, type SliderOrientation, type SliderProps, type SliderRangeValue, SliderSkeleton, type SliderSkeletonProps, type SortDirection, type SortState, Splitter, type SplitterHandleSize, type SplitterOrientation, type SplitterProps, SplitterSkeleton, type SplitterSkeletonProps, type SpringPreset, Stagger, type StaggerProps, type StepTarget, Switch, type SwitchProps, type TabItem, Table, Tabs, type TabsProps, Tag, type TagProps, type TextInputProps, Textarea, type TextareaProps, type ThemeChoice, ThemeProvider, type TimeInputProps, TimePicker, type TimeValue, type ToastOptions, type ToastPosition, ToastProvider, type ToastProviderProps, Tooltip, type TooltipProps, TopBar, type TopBarProps, Tour, type TourAction, type TourProps, type TourState, type TourStatus, type TourStep, Transfer, type TransferItem, type TransferProps, TransferSkeleton, type TransferSkeletonProps, Tree, type TreeNode, type TreeProps, TreeSelect, type TreeSelectProps, TreeSelectSkeleton, type TreeSelectSkeletonProps, type TreeSize, TreeSkeleton, type TreeSkeletonProps, type TreeTone, Upload, type UploadProps, Watermark, type WatermarkContent, type WatermarkDensity, type WatermarkDirection, type WatermarkProps, WatermarkSkeleton, type WatermarkSkeletonProps, ariaSortFor, canStep, clamp, decimalPlaces, describeAccept, filterCommands, formatISO, formatTime, groupCommands, hasEnded, initialTourState, isOutOfRange, isSameDay, isTimeOutOfRange, matchesAccept, monthMatrix, nextSort, pageRange, parseDateInput, parseNumber, parseTime, partitionFiles, rankCommand, resolveTarget, shouldAutoplay, startOfDay, stepBy, timeOptions, timeToMinutes, tourReducer, useFieldWiring, useLabels, useMotionSettings, useTheme, useToast };
278
+ export { Checklist, type ChecklistProps, type ChecklistTask, type Command, CommandPalette, type CommandPaletteProps, DEFAULT_LABELS, type DurationToken, type Labels, LabelsProvider, type LabelsProviderProps, type MotionHelpers, MotionProvider, type MotionProviderProps, type MotionSettings, type NavItem, type NavSection, type PaletteCommand, type RankedCommand, Reveal, type RevealProps, Sidebar, type SidebarProps, type SpringPreset, Stagger, type StaggerProps, ThemeBridge, type ThemeBridgeProps, type ThemeChoice, ThemeProvider, type ToastOptions, type ToastPosition, ToastProvider, type ToastProviderProps, TopBar, type TopBarProps, filterCommands, groupCommands, rankCommand, useLabels, useMotionSettings, useTheme, useToast };