sherick-ui 2.8.0 → 2.10.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/README.md +32 -0
- package/dist/cjs/components/Accordion.cjs +14 -26
- package/dist/cjs/components/Accordion.cjs.map +1 -1
- package/dist/cjs/components/Alert.cjs +64 -19
- package/dist/cjs/components/Alert.cjs.map +1 -1
- package/dist/cjs/components/AlertDialog.cjs +5 -3
- package/dist/cjs/components/AlertDialog.cjs.map +1 -1
- package/dist/cjs/components/Avatar.cjs +12 -3
- package/dist/cjs/components/Avatar.cjs.map +1 -1
- package/dist/cjs/components/Badge.cjs +5 -3
- package/dist/cjs/components/Badge.cjs.map +1 -1
- package/dist/cjs/components/Breadcrumb.cjs +8 -4
- package/dist/cjs/components/Breadcrumb.cjs.map +1 -1
- package/dist/cjs/components/Button.cjs +11 -4
- package/dist/cjs/components/Button.cjs.map +1 -1
- package/dist/cjs/components/Calendar.cjs +39 -4
- package/dist/cjs/components/Calendar.cjs.map +1 -1
- package/dist/cjs/components/Card.cjs +16 -4
- package/dist/cjs/components/Card.cjs.map +1 -1
- package/dist/cjs/components/Checkbox.cjs +15 -3
- package/dist/cjs/components/Checkbox.cjs.map +1 -1
- package/dist/cjs/components/CheckboxGroup.cjs +3 -2
- package/dist/cjs/components/CheckboxGroup.cjs.map +1 -1
- package/dist/cjs/components/Chip.cjs +53 -43
- package/dist/cjs/components/Chip.cjs.map +1 -1
- package/dist/cjs/components/ChipGroup.cjs +17 -0
- package/dist/cjs/components/ChipGroup.cjs.map +1 -1
- package/dist/cjs/components/Collapsible.cjs +1 -1
- package/dist/cjs/components/Collapsible.cjs.map +1 -1
- package/dist/cjs/components/Combobox.cjs +59 -15
- package/dist/cjs/components/Combobox.cjs.map +1 -1
- package/dist/cjs/components/Command.cjs +11 -5
- package/dist/cjs/components/Command.cjs.map +1 -1
- package/dist/cjs/components/CommandPalette.cjs +5 -2
- package/dist/cjs/components/CommandPalette.cjs.map +1 -1
- package/dist/cjs/components/DatePicker.cjs +6 -3
- package/dist/cjs/components/DatePicker.cjs.map +1 -1
- package/dist/cjs/components/DateRangePicker.cjs +3 -2
- package/dist/cjs/components/DateRangePicker.cjs.map +1 -1
- package/dist/cjs/components/DateTimePicker.cjs +1 -1
- package/dist/cjs/components/DateTimePicker.cjs.map +1 -1
- package/dist/cjs/components/Dialog.cjs +10 -3
- package/dist/cjs/components/Dialog.cjs.map +1 -1
- package/dist/cjs/components/DialogContent.cjs +5 -3
- package/dist/cjs/components/DialogContent.cjs.map +1 -1
- package/dist/cjs/components/DialogDescription.cjs +5 -3
- package/dist/cjs/components/DialogDescription.cjs.map +1 -1
- package/dist/cjs/components/DialogFooter.cjs +3 -3
- package/dist/cjs/components/DialogFooter.cjs.map +1 -1
- package/dist/cjs/components/DialogHeader.cjs +5 -3
- package/dist/cjs/components/DialogHeader.cjs.map +1 -1
- package/dist/cjs/components/DialogSurface.cjs +37 -15
- package/dist/cjs/components/DialogSurface.cjs.map +1 -1
- package/dist/cjs/components/DismissButton.cjs +24 -0
- package/dist/cjs/components/DismissButton.cjs.map +1 -0
- package/dist/cjs/components/Divider.cjs +3 -1
- package/dist/cjs/components/Divider.cjs.map +1 -1
- package/dist/cjs/components/Drawer.cjs +28 -15
- package/dist/cjs/components/Drawer.cjs.map +1 -1
- package/dist/cjs/components/Field.cjs +47 -2
- package/dist/cjs/components/Field.cjs.map +1 -1
- package/dist/cjs/components/FieldLabel.cjs +20 -0
- package/dist/cjs/components/FieldLabel.cjs.map +1 -0
- package/dist/cjs/components/FileUpload.cjs +19 -9
- package/dist/cjs/components/FileUpload.cjs.map +1 -1
- package/dist/cjs/components/IconButton.cjs +28 -3
- package/dist/cjs/components/IconButton.cjs.map +1 -1
- package/dist/cjs/components/Input.cjs +14 -5
- package/dist/cjs/components/Input.cjs.map +1 -1
- package/dist/cjs/components/Menu.cjs +18 -4
- package/dist/cjs/components/Menu.cjs.map +1 -1
- package/dist/cjs/components/NavGroup.cjs +7 -1
- package/dist/cjs/components/NavGroup.cjs.map +1 -1
- package/dist/cjs/components/NavItem.cjs +28 -3
- package/dist/cjs/components/NavItem.cjs.map +1 -1
- package/dist/cjs/components/NumberField.cjs +7 -6
- package/dist/cjs/components/NumberField.cjs.map +1 -1
- package/dist/cjs/components/Pagination.cjs +45 -10
- package/dist/cjs/components/Pagination.cjs.map +1 -1
- package/dist/cjs/components/Popover.cjs +17 -3
- package/dist/cjs/components/Popover.cjs.map +1 -1
- package/dist/cjs/components/Progress.cjs +5 -3
- package/dist/cjs/components/Progress.cjs.map +1 -1
- package/dist/cjs/components/RadioGroup.cjs +3 -2
- package/dist/cjs/components/RadioGroup.cjs.map +1 -1
- package/dist/cjs/components/Search.cjs +35 -14
- package/dist/cjs/components/Search.cjs.map +1 -1
- package/dist/cjs/components/SegmentedControl.cjs +2 -1
- package/dist/cjs/components/SegmentedControl.cjs.map +1 -1
- package/dist/cjs/components/Select.cjs +14 -4
- package/dist/cjs/components/Select.cjs.map +1 -1
- package/dist/cjs/components/Skeleton.cjs +5 -3
- package/dist/cjs/components/Skeleton.cjs.map +1 -1
- package/dist/cjs/components/Slider.cjs +1 -1
- package/dist/cjs/components/Slider.cjs.map +1 -1
- package/dist/cjs/components/Spinner.cjs +25 -14
- package/dist/cjs/components/Spinner.cjs.map +1 -1
- package/dist/cjs/components/StatusMark.cjs +43 -0
- package/dist/cjs/components/StatusMark.cjs.map +1 -0
- package/dist/cjs/components/Stepper.cjs +9 -6
- package/dist/cjs/components/Stepper.cjs.map +1 -1
- package/dist/cjs/components/Switch.cjs +20 -1
- package/dist/cjs/components/Switch.cjs.map +1 -1
- package/dist/cjs/components/Table.cjs +15 -7
- package/dist/cjs/components/Table.cjs.map +1 -1
- package/dist/cjs/components/Tabs.cjs +10 -3
- package/dist/cjs/components/Tabs.cjs.map +1 -1
- package/dist/cjs/components/Textarea.cjs +8 -4
- package/dist/cjs/components/Textarea.cjs.map +1 -1
- package/dist/cjs/components/Toast.cjs +47 -34
- package/dist/cjs/components/Toast.cjs.map +1 -1
- package/dist/cjs/components/ToggleGroup.cjs +14 -3
- package/dist/cjs/components/ToggleGroup.cjs.map +1 -1
- package/dist/cjs/components/Tooltip.cjs +16 -2
- package/dist/cjs/components/Tooltip.cjs.map +1 -1
- package/dist/cjs/components/TreeView.cjs +8 -4
- package/dist/cjs/components/TreeView.cjs.map +1 -1
- package/dist/cjs/components/choice-row.cjs +1 -1
- package/dist/cjs/components/choice-row.cjs.map +1 -1
- package/dist/cjs/components/date-family.cjs +16 -2
- package/dist/cjs/components/date-family.cjs.map +1 -1
- package/dist/cjs/components/date-field.cjs +5 -3
- package/dist/cjs/components/date-field.cjs.map +1 -1
- package/dist/cjs/components/edge-fade.cjs +80 -0
- package/dist/cjs/components/edge-fade.cjs.map +1 -0
- package/dist/cjs/components/scroll-region.cjs +56 -0
- package/dist/cjs/components/scroll-region.cjs.map +1 -0
- package/dist/cjs/components/time-panel.cjs +2 -2
- package/dist/cjs/components/time-panel.cjs.map +1 -1
- package/dist/cjs/components/ui.common.cjs +179 -71
- package/dist/cjs/components/ui.common.cjs.map +1 -1
- package/dist/cjs/components/ui.motion.cjs +46 -15
- package/dist/cjs/components/ui.motion.cjs.map +1 -1
- package/dist/cjs/dev.cjs +9 -0
- package/dist/cjs/dev.cjs.map +1 -1
- package/dist/cjs/index.cjs +1 -0
- package/dist/cjs/index.cjs.map +1 -1
- package/dist/esm/components/Accordion.js +16 -28
- package/dist/esm/components/Accordion.js.map +1 -1
- package/dist/esm/components/Alert.js +66 -22
- package/dist/esm/components/Alert.js.map +1 -1
- package/dist/esm/components/AlertDialog.js +6 -4
- package/dist/esm/components/AlertDialog.js.map +1 -1
- package/dist/esm/components/Avatar.js +14 -5
- package/dist/esm/components/Avatar.js.map +1 -1
- package/dist/esm/components/Badge.js +6 -4
- package/dist/esm/components/Badge.js.map +1 -1
- package/dist/esm/components/Breadcrumb.js +9 -5
- package/dist/esm/components/Breadcrumb.js.map +1 -1
- package/dist/esm/components/Button.js +11 -4
- package/dist/esm/components/Button.js.map +1 -1
- package/dist/esm/components/Calendar.js +43 -8
- package/dist/esm/components/Calendar.js.map +1 -1
- package/dist/esm/components/Card.js +17 -5
- package/dist/esm/components/Card.js.map +1 -1
- package/dist/esm/components/Checkbox.js +17 -5
- package/dist/esm/components/Checkbox.js.map +1 -1
- package/dist/esm/components/CheckboxGroup.js +4 -3
- package/dist/esm/components/CheckboxGroup.js.map +1 -1
- package/dist/esm/components/Chip.js +56 -46
- package/dist/esm/components/Chip.js.map +1 -1
- package/dist/esm/components/ChipGroup.js +18 -1
- package/dist/esm/components/ChipGroup.js.map +1 -1
- package/dist/esm/components/CodeBlock.js +58 -28
- package/dist/esm/components/CodeBlock.js.map +1 -1
- package/dist/esm/components/Collapsible.js +2 -2
- package/dist/esm/components/Collapsible.js.map +1 -1
- package/dist/esm/components/Combobox.js +63 -19
- package/dist/esm/components/Combobox.js.map +1 -1
- package/dist/esm/components/Command.js +12 -6
- package/dist/esm/components/Command.js.map +1 -1
- package/dist/esm/components/CommandPalette.js +7 -4
- package/dist/esm/components/CommandPalette.js.map +1 -1
- package/dist/esm/components/DatePicker.js +7 -4
- package/dist/esm/components/DatePicker.js.map +1 -1
- package/dist/esm/components/DateRangePicker.js +4 -3
- package/dist/esm/components/DateRangePicker.js.map +1 -1
- package/dist/esm/components/DateTimePicker.js +2 -2
- package/dist/esm/components/DateTimePicker.js.map +1 -1
- package/dist/esm/components/Dialog.js +12 -6
- package/dist/esm/components/Dialog.js.map +1 -1
- package/dist/esm/components/DialogContent.js +6 -4
- package/dist/esm/components/DialogContent.js.map +1 -1
- package/dist/esm/components/DialogDescription.js +6 -4
- package/dist/esm/components/DialogDescription.js.map +1 -1
- package/dist/esm/components/DialogFooter.js +3 -3
- package/dist/esm/components/DialogFooter.js.map +1 -1
- package/dist/esm/components/DialogHeader.js +5 -3
- package/dist/esm/components/DialogHeader.js.map +1 -1
- package/dist/esm/components/DialogSurface.js +38 -17
- package/dist/esm/components/DialogSurface.js.map +1 -1
- package/dist/esm/components/DismissButton.js +20 -0
- package/dist/esm/components/DismissButton.js.map +1 -0
- package/dist/esm/components/Divider.js +3 -1
- package/dist/esm/components/Divider.js.map +1 -1
- package/dist/esm/components/Drawer.js +31 -18
- package/dist/esm/components/Drawer.js.map +1 -1
- package/dist/esm/components/Field.js +49 -6
- package/dist/esm/components/Field.js.map +1 -1
- package/dist/esm/components/FieldLabel.js +15 -0
- package/dist/esm/components/FieldLabel.js.map +1 -0
- package/dist/esm/components/FileUpload.js +23 -13
- package/dist/esm/components/FileUpload.js.map +1 -1
- package/dist/esm/components/IconButton.js +31 -6
- package/dist/esm/components/IconButton.js.map +1 -1
- package/dist/esm/components/Input.js +15 -6
- package/dist/esm/components/Input.js.map +1 -1
- package/dist/esm/components/Markdown.js +10 -7
- package/dist/esm/components/Markdown.js.map +1 -1
- package/dist/esm/components/Menu.js +20 -6
- package/dist/esm/components/Menu.js.map +1 -1
- package/dist/esm/components/NavGroup.js +9 -3
- package/dist/esm/components/NavGroup.js.map +1 -1
- package/dist/esm/components/NavItem.js +30 -6
- package/dist/esm/components/NavItem.js.map +1 -1
- package/dist/esm/components/NumberField.js +8 -7
- package/dist/esm/components/NumberField.js.map +1 -1
- package/dist/esm/components/Pagination.js +47 -12
- package/dist/esm/components/Pagination.js.map +1 -1
- package/dist/esm/components/Popover.js +18 -4
- package/dist/esm/components/Popover.js.map +1 -1
- package/dist/esm/components/Progress.js +6 -4
- package/dist/esm/components/Progress.js.map +1 -1
- package/dist/esm/components/RadioGroup.js +4 -3
- package/dist/esm/components/RadioGroup.js.map +1 -1
- package/dist/esm/components/Search.js +36 -15
- package/dist/esm/components/Search.js.map +1 -1
- package/dist/esm/components/SegmentedControl.js +2 -1
- package/dist/esm/components/SegmentedControl.js.map +1 -1
- package/dist/esm/components/Select.js +16 -6
- package/dist/esm/components/Select.js.map +1 -1
- package/dist/esm/components/Skeleton.js +5 -3
- package/dist/esm/components/Skeleton.js.map +1 -1
- package/dist/esm/components/Slider.js +2 -2
- package/dist/esm/components/Slider.js.map +1 -1
- package/dist/esm/components/Spinner.js +25 -14
- package/dist/esm/components/Spinner.js.map +1 -1
- package/dist/esm/components/StatusMark.js +38 -0
- package/dist/esm/components/StatusMark.js.map +1 -0
- package/dist/esm/components/Stepper.js +10 -7
- package/dist/esm/components/Stepper.js.map +1 -1
- package/dist/esm/components/Switch.js +21 -2
- package/dist/esm/components/Switch.js.map +1 -1
- package/dist/esm/components/Table.js +16 -8
- package/dist/esm/components/Table.js.map +1 -1
- package/dist/esm/components/Tabs.js +11 -4
- package/dist/esm/components/Tabs.js.map +1 -1
- package/dist/esm/components/Textarea.js +9 -5
- package/dist/esm/components/Textarea.js.map +1 -1
- package/dist/esm/components/Toast.js +49 -36
- package/dist/esm/components/Toast.js.map +1 -1
- package/dist/esm/components/ToggleGroup.js +16 -5
- package/dist/esm/components/ToggleGroup.js.map +1 -1
- package/dist/esm/components/Tooltip.js +17 -4
- package/dist/esm/components/Tooltip.js.map +1 -1
- package/dist/esm/components/TreeView.js +9 -5
- package/dist/esm/components/TreeView.js.map +1 -1
- package/dist/esm/components/choice-row.js +1 -1
- package/dist/esm/components/choice-row.js.map +1 -1
- package/dist/esm/components/date-family.js +15 -3
- package/dist/esm/components/date-family.js.map +1 -1
- package/dist/esm/components/date-field.js +6 -4
- package/dist/esm/components/date-field.js.map +1 -1
- package/dist/esm/components/edge-fade.js +77 -0
- package/dist/esm/components/edge-fade.js.map +1 -0
- package/dist/esm/components/scroll-region.js +52 -0
- package/dist/esm/components/scroll-region.js.map +1 -0
- package/dist/esm/components/time-panel.js +2 -2
- package/dist/esm/components/time-panel.js.map +1 -1
- package/dist/esm/components/ui.common.js +175 -73
- package/dist/esm/components/ui.common.js.map +1 -1
- package/dist/esm/components/ui.motion.js +44 -16
- package/dist/esm/components/ui.motion.js.map +1 -1
- package/dist/esm/content.js +1 -1
- package/dist/esm/dev.js +2 -2
- package/dist/esm/index.js +1 -1
- package/dist/styles.css +341 -209
- package/dist/theme.css +15 -12
- package/dist/types/content.d.ts +13 -3
- package/dist/types/dev.d.cts +79 -29
- package/dist/types/dev.d.ts +79 -29
- package/dist/types/index.d.cts +512 -154
- package/dist/types/index.d.ts +512 -154
- package/package.json +1 -1
package/dist/types/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Accordion as Accordion$1 } from '@base-ui/react/accordion';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
import React__default, { ReactNode, ButtonHTMLAttributes,
|
|
3
|
+
import React__default, { ReactNode, ComponentPropsWithoutRef, ElementType, ButtonHTMLAttributes, ReactElement, ForwardRefExoticComponent, RefAttributes, HTMLAttributes, AnchorHTMLAttributes, ComponentProps, Ref, ClipboardEvent, InputHTMLAttributes, MouseEventHandler, ComponentPropsWithRef, Key, TextareaHTMLAttributes } from 'react';
|
|
4
4
|
import { Collapsible as Collapsible$1 } from '@base-ui/react/collapsible';
|
|
5
5
|
import { AlertDialog as AlertDialog$1 } from '@base-ui/react/alert-dialog';
|
|
6
6
|
import { Checkbox as Checkbox$1 } from '@base-ui/react/checkbox';
|
|
@@ -8,13 +8,14 @@ import { CheckboxGroup as CheckboxGroup$1 } from '@base-ui/react/checkbox-group'
|
|
|
8
8
|
import { Toggle } from '@base-ui/react/toggle';
|
|
9
9
|
import { ToggleGroup as ToggleGroup$1 } from '@base-ui/react/toggle-group';
|
|
10
10
|
import { Combobox as Combobox$1 } from '@base-ui/react/combobox';
|
|
11
|
+
import { Field as Field$1 } from '@base-ui/react/field';
|
|
11
12
|
import { Autocomplete } from '@base-ui/react/autocomplete';
|
|
12
13
|
import { Dialog as Dialog$1 } from '@base-ui/react/dialog';
|
|
13
14
|
import { Popover as Popover$1 } from '@base-ui/react/popover';
|
|
14
15
|
import { Select as Select$1 } from '@base-ui/react/select';
|
|
15
|
-
import { Field as Field$1 } from '@base-ui/react/field';
|
|
16
16
|
import { Form as Form$1 } from '@base-ui/react/form';
|
|
17
17
|
import { Input as Input$1 } from '@base-ui/react/input';
|
|
18
|
+
import * as _base_ui_react from '@base-ui/react';
|
|
18
19
|
import { Menu as Menu$1 } from '@base-ui/react/menu';
|
|
19
20
|
import { NumberField as NumberField$1 } from '@base-ui/react/number-field';
|
|
20
21
|
import { Progress as Progress$1 } from '@base-ui/react/progress';
|
|
@@ -132,6 +133,20 @@ type Variant = "primary" | "secondary" | "danger" | "warning" | "success";
|
|
|
132
133
|
*/
|
|
133
134
|
type OverlaySide = "top" | "bottom" | "left" | "right" | "inline-start" | "inline-end";
|
|
134
135
|
type OverlayAlign = "start" | "center" | "end";
|
|
136
|
+
/**
|
|
137
|
+
* The props a primitive hands to the element it renders in its place (Base's `render`): the
|
|
138
|
+
* button's own attributes, and the event and state wiring Base adds to them. The ref is passed
|
|
139
|
+
* separately, so a trigger that forwards one takes it beside these props rather than inside them.
|
|
140
|
+
*
|
|
141
|
+
* The triggers of Menu, Popover, Drawer, Dialog and AlertDialog take this shape, so a trigger
|
|
142
|
+
* built on any of them accepts the same element.
|
|
143
|
+
*/
|
|
144
|
+
type TriggerProps = ComponentPropsWithoutRef<"button">;
|
|
145
|
+
/**
|
|
146
|
+
* The props of the element a part renders, without its ref. A part that forwards a ref takes
|
|
147
|
+
* the ref beside these props; `T` is the element the part is written as.
|
|
148
|
+
*/
|
|
149
|
+
type PartProps<T extends ElementType> = ComponentPropsWithoutRef<T>;
|
|
135
150
|
|
|
136
151
|
type ButtonAppearance = "filled" | "tonal" | "text";
|
|
137
152
|
type ButtonSize = "sm" | "md" | "lg";
|
|
@@ -142,17 +157,38 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
|
142
157
|
size?: ButtonSize;
|
|
143
158
|
icon?: ReactNode;
|
|
144
159
|
loading?: boolean;
|
|
160
|
+
/**
|
|
161
|
+
* The element the button renders as, such as a router link. The button's classes and its own props
|
|
162
|
+
* are merged onto it, so the link looks and presses like a button and keeps its own navigation.
|
|
163
|
+
*/
|
|
164
|
+
render?: ReactElement;
|
|
145
165
|
}
|
|
146
166
|
declare const Button: React__default.ForwardRefExoticComponent<ButtonProps & React__default.RefAttributes<HTMLButtonElement>>;
|
|
147
167
|
|
|
148
|
-
|
|
168
|
+
/** How an alert is announced to assistive technology. `none` leaves it silent. */
|
|
169
|
+
type AlertAnnounce = "none" | "status" | "alert";
|
|
170
|
+
interface AlertProps extends Omit<ComponentPropsWithoutRef<"div">, "role"> {
|
|
149
171
|
children: ReactNode;
|
|
150
172
|
variant?: Variant;
|
|
151
|
-
|
|
173
|
+
/** Whether the alert has a dismiss control. */
|
|
152
174
|
closeable?: boolean;
|
|
175
|
+
/** The dismiss control's accessible name. Override it when the surface's language is not the default. */
|
|
176
|
+
dismissLabel?: string;
|
|
177
|
+
/**
|
|
178
|
+
* How the alert is announced. `alert` interrupts the reader, `status` is read politely, and `none`
|
|
179
|
+
* adds no live role. Danger and warning default to `alert`, and every other variant to `status`.
|
|
180
|
+
*/
|
|
181
|
+
announce?: AlertAnnounce;
|
|
182
|
+
/** Whether the alert is shown, when the application owns that state. */
|
|
183
|
+
open?: boolean;
|
|
184
|
+
/** Whether the alert starts shown, for one that owns its own dismissal. */
|
|
185
|
+
defaultOpen?: boolean;
|
|
186
|
+
/** Reports `false` when the alert is dismissed, for a controlled alert or to observe an uncontrolled one. */
|
|
187
|
+
onOpenChange?: (open: boolean) => void;
|
|
188
|
+
/** Fires when the alert is dismissed, before its open state changes. */
|
|
153
189
|
onDismiss?: () => void;
|
|
154
190
|
}
|
|
155
|
-
declare const Alert:
|
|
191
|
+
declare const Alert: React__default.ForwardRefExoticComponent<AlertProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
156
192
|
|
|
157
193
|
interface AlertDialogProps {
|
|
158
194
|
/** The question the dialog asks. Base makes it the surface's accessible name. */
|
|
@@ -179,7 +215,18 @@ interface AlertDialogProps {
|
|
|
179
215
|
defaultOpen?: boolean;
|
|
180
216
|
/** Base's own open-change callback, event details included. */
|
|
181
217
|
onOpenChange?: AlertDialog$1.Root.Props["onOpenChange"];
|
|
218
|
+
/** The `AlertDialog.Trigger` that opens the dialog. It renders in the page, beside the trigger's own control. */
|
|
219
|
+
children?: ReactNode;
|
|
182
220
|
}
|
|
221
|
+
/** The control that opens an alert dialog. Base's trigger closes it again through the same root. */
|
|
222
|
+
type AlertDialogTriggerProps = TriggerProps & {
|
|
223
|
+
/** The element the trigger's own props are handed to — usually a Sherick `Button`. */
|
|
224
|
+
render?: ReactElement;
|
|
225
|
+
};
|
|
226
|
+
declare const AlertDialogTrigger: ({ render, ...props }: AlertDialogTriggerProps) => React__default.JSX.Element;
|
|
227
|
+
type AlertDialogComponent = ForwardRefExoticComponent<AlertDialogProps & RefAttributes<HTMLDivElement>> & {
|
|
228
|
+
Trigger: typeof AlertDialogTrigger;
|
|
229
|
+
};
|
|
183
230
|
/**
|
|
184
231
|
* A dialog that asks one question and requires one answer. Its interaction contract differs from
|
|
185
232
|
* `Dialog`: it is always modal, an outside press never dismisses it, and Base's default focus
|
|
@@ -187,27 +234,37 @@ interface AlertDialogProps {
|
|
|
187
234
|
* anything. Base owns presence, focus restoration, Escape and the `alertdialog` semantics; the
|
|
188
235
|
* surface, typography and shape are the same ones `Dialog` uses.
|
|
189
236
|
*/
|
|
190
|
-
declare const AlertDialog:
|
|
237
|
+
declare const AlertDialog: AlertDialogComponent;
|
|
191
238
|
|
|
192
|
-
interface AvatarProps extends Omit<
|
|
239
|
+
interface AvatarProps extends Omit<ComponentPropsWithoutRef<"span">, "children"> {
|
|
193
240
|
src: string;
|
|
194
241
|
alt: string;
|
|
195
242
|
size?: "sm" | "md" | "lg";
|
|
196
243
|
shape?: "circle" | "rounded";
|
|
244
|
+
/**
|
|
245
|
+
* What stands in for the picture while it loads and after it fails. Defaults to the initials of `alt`,
|
|
246
|
+
* so an avatar with no picture still says who it is.
|
|
247
|
+
*/
|
|
248
|
+
fallback?: ReactNode;
|
|
197
249
|
}
|
|
198
|
-
declare const Avatar:
|
|
250
|
+
declare const Avatar: React__default.ForwardRefExoticComponent<AvatarProps & React__default.RefAttributes<HTMLSpanElement>>;
|
|
199
251
|
|
|
200
252
|
interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
|
|
201
253
|
children: ReactNode;
|
|
202
254
|
variant?: Variant;
|
|
203
255
|
icon?: ReactNode;
|
|
204
256
|
}
|
|
205
|
-
declare const Badge:
|
|
257
|
+
declare const Badge: React__default.ForwardRefExoticComponent<BadgeProps & React__default.RefAttributes<HTMLSpanElement>>;
|
|
206
258
|
|
|
207
259
|
interface BreadcrumbItem {
|
|
208
260
|
label: ReactNode;
|
|
209
261
|
href?: string;
|
|
210
262
|
}
|
|
263
|
+
/** The English copy a trail names itself with. */
|
|
264
|
+
interface BreadcrumbLabels {
|
|
265
|
+
/** The trail's accessible name. */
|
|
266
|
+
navigation: string;
|
|
267
|
+
}
|
|
211
268
|
interface BreadcrumbProps extends Omit<ComponentPropsWithoutRef<"nav">, "children"> {
|
|
212
269
|
items: BreadcrumbItem[];
|
|
213
270
|
/**
|
|
@@ -216,6 +273,8 @@ interface BreadcrumbProps extends Omit<ComponentPropsWithoutRef<"nav">, "childre
|
|
|
216
273
|
* spreads them onto its element.
|
|
217
274
|
*/
|
|
218
275
|
renderLink?: (item: BreadcrumbItem, props: AnchorHTMLAttributes<HTMLAnchorElement>) => ReactNode;
|
|
276
|
+
/** The English copy the trail names itself with. `aria-label` takes precedence over it. */
|
|
277
|
+
labels?: Partial<BreadcrumbLabels>;
|
|
219
278
|
}
|
|
220
279
|
declare const Breadcrumb: React.ForwardRefExoticComponent<BreadcrumbProps & React.RefAttributes<HTMLElement>>;
|
|
221
280
|
|
|
@@ -262,7 +321,10 @@ interface CalendarBaseProps extends Omit<ComponentProps<"div">, "children" | "va
|
|
|
262
321
|
locale?: string;
|
|
263
322
|
/** Which weekday a row starts on: 0 is Sunday. */
|
|
264
323
|
weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
|
|
265
|
-
/**
|
|
324
|
+
/**
|
|
325
|
+
* The civil day this application calls today. Left unset, it is the viewer's own local day, refreshed at
|
|
326
|
+
* local midnight; an application whose day is elsewhere passes its own.
|
|
327
|
+
*/
|
|
266
328
|
today?: CalendarDate;
|
|
267
329
|
labels?: Partial<CalendarLabels>;
|
|
268
330
|
}
|
|
@@ -304,7 +366,17 @@ interface CardProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
304
366
|
children: ReactNode;
|
|
305
367
|
variant?: Variant;
|
|
306
368
|
}
|
|
307
|
-
|
|
369
|
+
interface CardTitleProps extends HTMLAttributes<HTMLHeadingElement> {
|
|
370
|
+
children: ReactNode;
|
|
371
|
+
/** The heading level is the host document's business, so it is a prop rather than a fixed level. */
|
|
372
|
+
headingLevel?: 2 | 3 | 4 | 5 | 6;
|
|
373
|
+
}
|
|
374
|
+
type CardDescriptionProps = HTMLAttributes<HTMLParagraphElement>;
|
|
375
|
+
type CardComponent = ForwardRefExoticComponent<CardProps & RefAttributes<HTMLDivElement>> & {
|
|
376
|
+
Title: ForwardRefExoticComponent<CardTitleProps & RefAttributes<HTMLHeadingElement>>;
|
|
377
|
+
Description: ForwardRefExoticComponent<CardDescriptionProps & RefAttributes<HTMLParagraphElement>>;
|
|
378
|
+
};
|
|
379
|
+
declare const Card: CardComponent;
|
|
308
380
|
|
|
309
381
|
interface CheckboxProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "value" | "type"> {
|
|
310
382
|
checked?: boolean;
|
|
@@ -383,19 +455,11 @@ interface ChipAnatomy {
|
|
|
383
455
|
className?: string;
|
|
384
456
|
}
|
|
385
457
|
/**
|
|
386
|
-
* A chip
|
|
387
|
-
*
|
|
388
|
-
*
|
|
389
|
-
* `onCheckedChange` or `value` makes it a toggle button, and it takes the props of one; inside a
|
|
390
|
-
* `ChipGroup` the group owns the value, exactly as it does for any grouped control.
|
|
391
|
-
* * A **tag** holds no selection and may be dismissed. `onRemove` renders the dismiss control, and
|
|
392
|
-
* the tag takes the props of the passive element it is.
|
|
393
|
-
*
|
|
394
|
-
* The two cannot be combined: a control that both holds a value and deletes itself is one target
|
|
395
|
-
* with two meanings, and a toggle is a `<button>` while a tag is a `<span>` containing its dismiss
|
|
396
|
-
* control — a button cannot legally nest inside a button.
|
|
458
|
+
* A toggle chip holds a selection. Supplying any of `checked`, `defaultChecked`, `onCheckedChange` or
|
|
459
|
+
* `value` makes it a toggle button, and it takes the props of one; inside a `ChipGroup` the group owns
|
|
460
|
+
* the value, exactly as it does for any grouped control.
|
|
397
461
|
*/
|
|
398
|
-
type
|
|
462
|
+
type ChipToggleProps = ChipAnatomy & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "value" | "type"> & {
|
|
399
463
|
/** The controlled counterpart of `defaultChecked`. */
|
|
400
464
|
checked?: boolean;
|
|
401
465
|
defaultChecked?: boolean;
|
|
@@ -406,12 +470,18 @@ type ChipProps = (ChipAnatomy & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "v
|
|
|
406
470
|
/** A toggle is a button; it carries no dismiss control. Give the row a `ChipGroup`. */
|
|
407
471
|
onRemove?: never;
|
|
408
472
|
removeLabel?: never;
|
|
409
|
-
}
|
|
473
|
+
};
|
|
474
|
+
/**
|
|
475
|
+
* A tag holds no selection and may be dismissed. It is a span, so it has no button role; its only
|
|
476
|
+
* control is the dismiss, which is what `onRemove` renders. A tag is `Chip.Tag`, or a `Chip` with
|
|
477
|
+
* `onRemove` and no value.
|
|
478
|
+
*/
|
|
479
|
+
type ChipTagProps = ChipAnatomy & HTMLAttributes<HTMLSpanElement> & {
|
|
410
480
|
/** Renders a dismiss control. */
|
|
411
481
|
onRemove?: () => void;
|
|
412
482
|
/**
|
|
413
|
-
* The dismiss control's accessible name. Defaults to `Remove <text>` when the chip's
|
|
414
|
-
*
|
|
483
|
+
* The dismiss control's accessible name. Defaults to `Remove <text>` when the chip's children are a
|
|
484
|
+
* string, and to `Remove` otherwise.
|
|
415
485
|
*/
|
|
416
486
|
removeLabel?: string;
|
|
417
487
|
/** A tag holds nothing to select. */
|
|
@@ -420,17 +490,30 @@ type ChipProps = (ChipAnatomy & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "v
|
|
|
420
490
|
onCheckedChange?: never;
|
|
421
491
|
value?: never;
|
|
422
492
|
disabled?: never;
|
|
423
|
-
}
|
|
493
|
+
};
|
|
424
494
|
/**
|
|
425
|
-
* A
|
|
426
|
-
*
|
|
427
|
-
*
|
|
428
|
-
* A toggle is raised and tactile because it is manipulated. A tag is flat because it is only read,
|
|
429
|
-
* and it is passive in the markup as well: nothing about its own box is interactive, its copy keeps
|
|
430
|
-
* its normal emphasis while its icon carries the semantic tone, and its only control is the dismiss
|
|
431
|
-
* one. The ref points at the chip's own element — the button or the tag's span.
|
|
495
|
+
* A chip is one of two things, and never both. A toggle is a `<button>`, and a tag is a `<span>`
|
|
496
|
+
* containing its dismiss control: a button cannot legally nest inside a button, and a control that both
|
|
497
|
+
* holds a value and deletes itself is one target with two meanings.
|
|
432
498
|
*/
|
|
433
|
-
|
|
499
|
+
type ChipProps = ChipToggleProps | ChipTagProps;
|
|
500
|
+
declare const Chip: React__default.ForwardRefExoticComponent<ChipProps & React__default.RefAttributes<HTMLElement>> & {
|
|
501
|
+
Tag: React__default.ForwardRefExoticComponent<ChipAnatomy & React__default.HTMLAttributes<HTMLSpanElement> & {
|
|
502
|
+
/** Renders a dismiss control. */
|
|
503
|
+
onRemove?: () => void;
|
|
504
|
+
/**
|
|
505
|
+
* The dismiss control's accessible name. Defaults to `Remove <text>` when the chip's children are a
|
|
506
|
+
* string, and to `Remove` otherwise.
|
|
507
|
+
*/
|
|
508
|
+
removeLabel?: string;
|
|
509
|
+
/** A tag holds nothing to select. */
|
|
510
|
+
checked?: never;
|
|
511
|
+
defaultChecked?: never;
|
|
512
|
+
onCheckedChange?: never;
|
|
513
|
+
value?: never;
|
|
514
|
+
disabled?: never;
|
|
515
|
+
} & React__default.RefAttributes<HTMLElement>>;
|
|
516
|
+
};
|
|
434
517
|
|
|
435
518
|
interface ChipGroupProps extends Omit<ToggleGroup$1.Props<string>, "multiple" | "className" | "render"> {
|
|
436
519
|
children: ReactNode;
|
|
@@ -459,6 +542,46 @@ interface OptionGroup<Option> {
|
|
|
459
542
|
options: Option[];
|
|
460
543
|
}
|
|
461
544
|
|
|
545
|
+
/** The density a field takes: `sm` for a dense row, `md` the default and `lg` a prominent field. */
|
|
546
|
+
type FieldSize = "sm" | "md" | "lg";
|
|
547
|
+
interface FieldProps extends Omit<ComponentProps<typeof Field$1.Root>, "children" | "className" | "ref"> {
|
|
548
|
+
/** The field's label. Base UI associates it with the control and names the group. */
|
|
549
|
+
label?: ReactNode;
|
|
550
|
+
/** Supporting copy beneath the control. In a horizontal field it sits beneath the label. */
|
|
551
|
+
description?: ReactNode;
|
|
552
|
+
/**
|
|
553
|
+
* The message shown while the field is invalid. Its presence is what makes the field invalid,
|
|
554
|
+
* so an error can never be rendered without the state that explains it. Omit it and Base UI's
|
|
555
|
+
* own validation message is shown instead.
|
|
556
|
+
*/
|
|
557
|
+
error?: ReactNode;
|
|
558
|
+
/**
|
|
559
|
+
* Renders the required mark beside the label. This is presentational only: the requirement
|
|
560
|
+
* itself can only be declared by the control, so pass `required` to the control as well —
|
|
561
|
+
* every example, fixture and test in this repository does.
|
|
562
|
+
*/
|
|
563
|
+
required?: boolean;
|
|
564
|
+
/**
|
|
565
|
+
* `vertical` stacks the label, the control, the description and the error in one column. `horizontal`
|
|
566
|
+
* is a setting row: the label and its description sit at the start and the control at the end.
|
|
567
|
+
*/
|
|
568
|
+
orientation?: "vertical" | "horizontal";
|
|
569
|
+
/** Styles the field's own column. The control inside styles itself. */
|
|
570
|
+
className?: string;
|
|
571
|
+
/**
|
|
572
|
+
* A Base-backed control that is one control: `Checkbox`, `Switch`, `Slider`, `NumberField`, `Select`
|
|
573
|
+
* or `Combobox`. A group of controls names itself — `RadioGroup` carries its own label — because
|
|
574
|
+
* the field's label belongs to the single control it validates.
|
|
575
|
+
*/
|
|
576
|
+
children: ReactNode;
|
|
577
|
+
}
|
|
578
|
+
/**
|
|
579
|
+
* Labels and validates one form control. Base UI owns the generated IDs and the
|
|
580
|
+
* `aria-describedby` / `aria-invalid` wiring; this component owns only the order and the
|
|
581
|
+
* typography of label, control, description and error.
|
|
582
|
+
*/
|
|
583
|
+
declare const Field: React__default.ForwardRefExoticComponent<FieldProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
584
|
+
|
|
462
585
|
interface ComboboxOption {
|
|
463
586
|
label: string;
|
|
464
587
|
value: string;
|
|
@@ -466,6 +589,19 @@ interface ComboboxOption {
|
|
|
466
589
|
}
|
|
467
590
|
/** Options filed under one heading, such as channels under their category. */
|
|
468
591
|
type ComboboxOptionGroup = OptionGroup<ComboboxOption>;
|
|
592
|
+
/** The copy of the control's own parts. Each default is the text the control has always shown. */
|
|
593
|
+
interface ComboboxLabels {
|
|
594
|
+
/** The accessible name of one chip's dismiss control. */
|
|
595
|
+
removeChip: (label: string) => string;
|
|
596
|
+
/** The clear control of a multiple combobox. */
|
|
597
|
+
clearAll: string;
|
|
598
|
+
/** The clear control of a single combobox. */
|
|
599
|
+
clearSelection: string;
|
|
600
|
+
/** The trigger that opens the list. */
|
|
601
|
+
showOptions: string;
|
|
602
|
+
/** Shown in the list when the query matches nothing. `emptyMessage` replaces it. */
|
|
603
|
+
noResults: string;
|
|
604
|
+
}
|
|
469
605
|
type ComboboxRootProps = Combobox$1.Root.Props<ComboboxOption>;
|
|
470
606
|
type ComboboxChangeDetails = Parameters<NonNullable<ComboboxRootProps["onValueChange"]>>[1];
|
|
471
607
|
/**
|
|
@@ -485,8 +621,16 @@ interface ComboboxCommonProps {
|
|
|
485
621
|
placeholder?: string;
|
|
486
622
|
/** Shown in place of the list when the query matches no option. */
|
|
487
623
|
emptyMessage?: ReactNode;
|
|
624
|
+
/** Waiting for its options: a spinner takes the chevron's place and the trigger reports itself busy. */
|
|
625
|
+
loading?: boolean;
|
|
626
|
+
/** The field's density: `sm` for a dense filter row, `md` (the default) or `lg`. */
|
|
627
|
+
size?: FieldSize;
|
|
628
|
+
/** The copy of the control's own parts, for a locale or a product's wording. */
|
|
629
|
+
labels?: Partial<ComboboxLabels>;
|
|
488
630
|
/** Styles the control's own box. The popup and its rows style themselves. */
|
|
489
631
|
className?: string;
|
|
632
|
+
/** Styles the list's own sheet. The rows style themselves. */
|
|
633
|
+
popupClassName?: string;
|
|
490
634
|
/** Custom matching, when the default label search is not what the list needs. */
|
|
491
635
|
filter?: ((option: ComboboxOption, query: string) => boolean) | null;
|
|
492
636
|
open?: boolean;
|
|
@@ -558,6 +702,15 @@ type ComboboxProps = ComboboxSingleProps | ComboboxMultipleProps;
|
|
|
558
702
|
*/
|
|
559
703
|
declare const Combobox: React__default.ForwardRefExoticComponent<ComboboxProps & React__default.RefAttributes<HTMLInputElement>>;
|
|
560
704
|
|
|
705
|
+
/** The English copy a command list names itself and its parts with. */
|
|
706
|
+
interface CommandLabels {
|
|
707
|
+
/** The search field's accessible name, when the caller does not give one. */
|
|
708
|
+
search: string;
|
|
709
|
+
/** The search field's placeholder. */
|
|
710
|
+
placeholder: string;
|
|
711
|
+
/** Shown in place of the list when the query matches no command. */
|
|
712
|
+
empty: string;
|
|
713
|
+
}
|
|
561
714
|
interface CommandItem {
|
|
562
715
|
/** The action's own identity. Values are unique across the list. */
|
|
563
716
|
value: string;
|
|
@@ -587,9 +740,9 @@ interface CommandProps {
|
|
|
587
740
|
items: CommandItem[];
|
|
588
741
|
/**
|
|
589
742
|
* Names the search field for assistive technology. It is the field's own name — a palette's
|
|
590
|
-
* heading names the surface — so it is not rendered as visible copy.
|
|
743
|
+
* heading names the surface — so it is not rendered as visible copy. Defaults to "Search commands".
|
|
591
744
|
*/
|
|
592
|
-
label
|
|
745
|
+
label?: string;
|
|
593
746
|
/**
|
|
594
747
|
* What choosing a command does. A command performs an action rather than holding a value, so
|
|
595
748
|
* this is the next domain value rather than an event, and activating one leaves the query and
|
|
@@ -602,9 +755,12 @@ interface CommandProps {
|
|
|
602
755
|
defaultValue?: string;
|
|
603
756
|
/** Base's own query-change callback, event details included. */
|
|
604
757
|
onValueChange?: (value: string, eventDetails: CommandQueryChangeDetails) => void;
|
|
758
|
+
/** The search field's placeholder. Defaults to the placeholder in `labels`. */
|
|
605
759
|
placeholder?: string;
|
|
606
|
-
/** Shown in place of the list when the query matches no command. */
|
|
760
|
+
/** Shown in place of the list when the query matches no command. Defaults to the empty text in `labels`. */
|
|
607
761
|
emptyMessage?: ReactNode;
|
|
762
|
+
/** The English copy the list names itself and its parts with. The props above take precedence over it. */
|
|
763
|
+
labels?: Partial<CommandLabels>;
|
|
608
764
|
disabled?: boolean;
|
|
609
765
|
/** A string comparison locale for the default matching. */
|
|
610
766
|
locale?: string;
|
|
@@ -638,6 +794,23 @@ interface CommandProps {
|
|
|
638
794
|
*/
|
|
639
795
|
declare const Command: React__default.ForwardRefExoticComponent<CommandProps & React__default.RefAttributes<HTMLInputElement>>;
|
|
640
796
|
|
|
797
|
+
/**
|
|
798
|
+
* Where a viewport-owning surface is attached. `center` is a dialog: it has no edge, so it rises
|
|
799
|
+
* into the middle of the viewport and takes the modal presence. Every other value is a sheet
|
|
800
|
+
* attached to that edge of the viewport, and slides out of it.
|
|
801
|
+
*/
|
|
802
|
+
type DialogAttachment = "center" | "bottom" | "top" | "left" | "right";
|
|
803
|
+
type DialogTriggerProps = TriggerProps & {
|
|
804
|
+
/** The element the trigger's own props are handed to — usually a Sherick `Button`. */
|
|
805
|
+
render?: ReactElement;
|
|
806
|
+
};
|
|
807
|
+
/**
|
|
808
|
+
* The control that opens a dialog-family surface. It renders in the page rather than in the portal,
|
|
809
|
+
* so the reader sees the control they pressed and the surface arrives from it. Base's trigger closes
|
|
810
|
+
* the surface through its own root, so no open state is needed beside it.
|
|
811
|
+
*/
|
|
812
|
+
declare const DialogTrigger: ({ render, ...props }: DialogTriggerProps) => React__default.JSX.Element;
|
|
813
|
+
|
|
641
814
|
interface CommandPaletteProps extends Omit<CommandProps, "className" | "id"> {
|
|
642
815
|
/** The surface's own heading. It names the dialog. */
|
|
643
816
|
title: string;
|
|
@@ -646,15 +819,23 @@ interface CommandPaletteProps extends Omit<CommandProps, "className" | "id"> {
|
|
|
646
819
|
/**
|
|
647
820
|
* The element the trigger's own props are handed to — usually a Sherick `Button`. The palette
|
|
648
821
|
* opens from whatever this renders, so the control that opens it looks like the control it is.
|
|
822
|
+
* It is a convenience over `CommandPalette.Trigger`, which does the same thing as a part.
|
|
649
823
|
*/
|
|
650
824
|
trigger?: ReactElement;
|
|
825
|
+
/** `CommandPalette.Trigger` parts that open the palette. They render in the page, beside the trigger. */
|
|
826
|
+
children?: ReactNode;
|
|
651
827
|
open?: boolean;
|
|
652
828
|
defaultOpen?: boolean;
|
|
653
829
|
/** Base's own open-change callback, event details included. */
|
|
654
830
|
onOpenChange?: Dialog$1.Root.Props["onOpenChange"];
|
|
655
831
|
/** Adds to the dialog surface's own shell. */
|
|
656
832
|
className?: string;
|
|
833
|
+
/** The accessible name of the dismissal control. Defaults to "Close command palette". */
|
|
834
|
+
closeLabel?: string;
|
|
657
835
|
}
|
|
836
|
+
type CommandPaletteComponent = ForwardRefExoticComponent<CommandPaletteProps & RefAttributes<HTMLInputElement>> & {
|
|
837
|
+
Trigger: typeof DialogTrigger;
|
|
838
|
+
};
|
|
658
839
|
/**
|
|
659
840
|
* The same command list as a surface that owns the viewport: a palette. It is a `Dialog` — Base's
|
|
660
841
|
* dialog root, the shared `DialogSurface` and dismissal, with a compact command header — with one
|
|
@@ -671,7 +852,7 @@ interface CommandPaletteProps extends Omit<CommandProps, "className" | "id"> {
|
|
|
671
852
|
* focus, and a run command closes the surface through Base's own actions instead of through an
|
|
672
853
|
* open state kept here.
|
|
673
854
|
*/
|
|
674
|
-
declare const CommandPalette:
|
|
855
|
+
declare const CommandPalette: CommandPaletteComponent;
|
|
675
856
|
|
|
676
857
|
interface DatePickerProps {
|
|
677
858
|
/** The selected date, or `null` for no selection. Undefined makes the picker uncontrolled. */
|
|
@@ -680,7 +861,11 @@ interface DatePickerProps {
|
|
|
680
861
|
/** Receives the next date, or `null` when the field is cleared. */
|
|
681
862
|
onValueChange?: (value: CalendarDate | null) => void;
|
|
682
863
|
/** The field's label. It names the native field, its control and the calendar popup. */
|
|
683
|
-
label
|
|
864
|
+
label?: ReactNode;
|
|
865
|
+
/** Names the field when `label` is absent or is not text, since the popup and its control need words. */
|
|
866
|
+
"aria-label"?: string;
|
|
867
|
+
/** The field's density: `sm` for a dense filter row, `md` (the default) or `lg`. */
|
|
868
|
+
size?: FieldSize;
|
|
684
869
|
description?: ReactNode;
|
|
685
870
|
error?: ReactNode;
|
|
686
871
|
required?: boolean;
|
|
@@ -858,13 +1043,13 @@ declare const edgeTone: {
|
|
|
858
1043
|
* column header — so a caller names the join it is drawing rather than picking an opacity.
|
|
859
1044
|
*/
|
|
860
1045
|
type DividerWeight = keyof typeof edgeTone;
|
|
861
|
-
interface DividerProps {
|
|
1046
|
+
interface DividerProps extends Omit<ComponentPropsWithoutRef<"div">, "className"> {
|
|
862
1047
|
className?: string;
|
|
863
1048
|
orientation?: "horizontal" | "vertical";
|
|
864
1049
|
/** The weight of the line. `rule` is the general section break. */
|
|
865
1050
|
weight?: DividerWeight;
|
|
866
1051
|
}
|
|
867
|
-
declare const Divider:
|
|
1052
|
+
declare const Divider: React__default.ForwardRefExoticComponent<DividerProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
868
1053
|
|
|
869
1054
|
interface SelectOption {
|
|
870
1055
|
label: string;
|
|
@@ -887,43 +1072,21 @@ interface SelectProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "val
|
|
|
887
1072
|
/** Base's value-change event details are passed through unchanged. */
|
|
888
1073
|
onValueChange?: (value: string | null, eventDetails: SelectChangeDetails) => void;
|
|
889
1074
|
placeholder?: string;
|
|
890
|
-
readOnly?: boolean;
|
|
891
|
-
required?: boolean;
|
|
892
|
-
}
|
|
893
|
-
declare const Select: React__default.ForwardRefExoticComponent<SelectProps & React__default.RefAttributes<HTMLButtonElement>>;
|
|
894
|
-
|
|
895
|
-
interface FieldProps extends Omit<ComponentProps<typeof Field$1.Root>, "children" | "className" | "ref"> {
|
|
896
|
-
/** The field's label. Base UI associates it with the control and names the group. */
|
|
897
|
-
label?: ReactNode;
|
|
898
|
-
/** Supporting copy beneath the control. */
|
|
899
|
-
description?: ReactNode;
|
|
900
|
-
/**
|
|
901
|
-
* The message shown while the field is invalid. Its presence is what makes the field invalid,
|
|
902
|
-
* so an error can never be rendered without the state that explains it. Omit it and Base UI's
|
|
903
|
-
* own validation message is shown instead.
|
|
904
|
-
*/
|
|
905
|
-
error?: ReactNode;
|
|
906
1075
|
/**
|
|
907
|
-
*
|
|
908
|
-
*
|
|
909
|
-
* every example, fixture and test in this repository does.
|
|
1076
|
+
* Shown in the list when there are no options. With no message either, the list does not open at all,
|
|
1077
|
+
* so an empty select never shows an empty sheet.
|
|
910
1078
|
*/
|
|
1079
|
+
emptyMessage?: ReactNode;
|
|
1080
|
+
/** Waiting for its options: a spinner takes the chevron's place and the trigger reports itself busy. */
|
|
1081
|
+
loading?: boolean;
|
|
1082
|
+
/** The field's density: `sm` for a dense filter row, `md` (the default) or `lg`. */
|
|
1083
|
+
size?: FieldSize;
|
|
1084
|
+
/** Styles the list's own sheet. The trigger is styled through `className`, and the rows style themselves. */
|
|
1085
|
+
popupClassName?: string;
|
|
1086
|
+
readOnly?: boolean;
|
|
911
1087
|
required?: boolean;
|
|
912
|
-
/** Styles the field's own column. The control inside styles itself. */
|
|
913
|
-
className?: string;
|
|
914
|
-
/**
|
|
915
|
-
* A Base-backed control that is one control: `Checkbox`, `Slider` or `NumberField`. A
|
|
916
|
-
* group of controls names itself — `RadioGroup` carries its own label — because the
|
|
917
|
-
* field's label belongs to the single control it validates.
|
|
918
|
-
*/
|
|
919
|
-
children: ReactNode;
|
|
920
1088
|
}
|
|
921
|
-
|
|
922
|
-
* Labels and validates one form control. Base UI owns the generated IDs and the
|
|
923
|
-
* `aria-describedby` / `aria-invalid` wiring; this component owns only the order and the
|
|
924
|
-
* typography of label, control, description and error.
|
|
925
|
-
*/
|
|
926
|
-
declare const Field: React__default.ForwardRefExoticComponent<FieldProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
1089
|
+
declare const Select: React__default.ForwardRefExoticComponent<SelectProps & React__default.RefAttributes<HTMLButtonElement>>;
|
|
927
1090
|
|
|
928
1091
|
type RejectionCode = "type" | "size" | "count";
|
|
929
1092
|
/** One file a selection operation refused, with the reason it was refused. */
|
|
@@ -933,6 +1096,15 @@ interface FileRejection {
|
|
|
933
1096
|
message: string;
|
|
934
1097
|
}
|
|
935
1098
|
|
|
1099
|
+
/** The copy of the selection's announcements. Each default is the text the field has always announced. */
|
|
1100
|
+
interface FileUploadLabels {
|
|
1101
|
+
/** Announced when one file is removed. */
|
|
1102
|
+
removedFile: (name: string) => string;
|
|
1103
|
+
/** Announced when several files are removed. */
|
|
1104
|
+
removedFiles: (count: number) => string;
|
|
1105
|
+
/** Announced when files are added. */
|
|
1106
|
+
addedFiles: (count: number) => string;
|
|
1107
|
+
}
|
|
936
1108
|
/**
|
|
937
1109
|
* A labelled field that selects files from the native picker or by dropping them on its zone.
|
|
938
1110
|
*
|
|
@@ -948,8 +1120,8 @@ interface FileRejection {
|
|
|
948
1120
|
* drop, and a mixed batch keeps whatever was valid.
|
|
949
1121
|
*/
|
|
950
1122
|
interface FileUploadProps extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "onChange" | "defaultValue"> {
|
|
951
|
-
/** The field's label. It names the picker. */
|
|
952
|
-
label
|
|
1123
|
+
/** The field's label. It names the picker when it is text, and is absent when the zone speaks for itself. */
|
|
1124
|
+
label?: ReactNode;
|
|
953
1125
|
/** Supporting copy beneath the field. */
|
|
954
1126
|
description?: ReactNode;
|
|
955
1127
|
/**
|
|
@@ -984,6 +1156,8 @@ interface FileUploadProps extends Omit<HTMLAttributes<HTMLDivElement>, "children
|
|
|
984
1156
|
removeLabel?: (file: File) => string;
|
|
985
1157
|
/** The accessible name of the control that empties the selection. */
|
|
986
1158
|
clearLabel?: string;
|
|
1159
|
+
/** The copy of the selection's announcements, for a locale or a product's wording. */
|
|
1160
|
+
labels?: Partial<FileUploadLabels>;
|
|
987
1161
|
}
|
|
988
1162
|
declare const FileUpload: React__default.ForwardRefExoticComponent<FileUploadProps & React__default.RefAttributes<HTMLInputElement>>;
|
|
989
1163
|
|
|
@@ -1013,19 +1187,31 @@ interface FormProps extends Omit<ComponentProps<typeof Form$1>, "className" | "r
|
|
|
1013
1187
|
*/
|
|
1014
1188
|
declare const Form: React__default.ForwardRefExoticComponent<FormProps & React__default.RefAttributes<HTMLFormElement>>;
|
|
1015
1189
|
|
|
1016
|
-
type IconButtonAppearance = "tonal" | "ghost" | "acrylic";
|
|
1190
|
+
type IconButtonAppearance = "tonal" | "filled" | "text" | "ghost" | "acrylic";
|
|
1191
|
+
type IconButtonSize = "target" | "compact";
|
|
1017
1192
|
interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
1018
1193
|
variant?: Variant;
|
|
1019
1194
|
appearance?: IconButtonAppearance;
|
|
1195
|
+
size?: IconButtonSize;
|
|
1020
1196
|
icon?: ReactNode;
|
|
1021
1197
|
loading?: boolean;
|
|
1198
|
+
/**
|
|
1199
|
+
* The element the button renders as, such as a router link. The button's classes and its own props
|
|
1200
|
+
* are merged onto it, so the link keeps the button's look and its own navigation.
|
|
1201
|
+
*/
|
|
1202
|
+
render?: ReactElement;
|
|
1022
1203
|
}
|
|
1023
1204
|
declare const IconButton: React__default.ForwardRefExoticComponent<IconButtonProps & React__default.RefAttributes<HTMLButtonElement>>;
|
|
1024
1205
|
|
|
1025
|
-
interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "prefix"> {
|
|
1206
|
+
interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "prefix" | "size"> {
|
|
1026
1207
|
label?: ReactNode;
|
|
1027
1208
|
description?: ReactNode;
|
|
1028
|
-
|
|
1209
|
+
/**
|
|
1210
|
+
* Marks the field invalid. A message is shown beneath it, so a `ReactNode` here is both the flag and
|
|
1211
|
+
* its message. `true` marks the field without one, and `errorMessage` supplies the message.
|
|
1212
|
+
*/
|
|
1213
|
+
error?: ReactNode;
|
|
1214
|
+
/** The message for `error={true}`. A message passed as `error` takes its place. */
|
|
1029
1215
|
errorMessage?: ReactNode;
|
|
1030
1216
|
inputClassName?: string;
|
|
1031
1217
|
/** Base's value-change callback, event details included. */
|
|
@@ -1037,26 +1223,29 @@ interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "prefix
|
|
|
1037
1223
|
prefix?: ReactNode;
|
|
1038
1224
|
/** Text or a mark at the end of the field, such as `tickets` or `.discord.gg`. Presentation only. */
|
|
1039
1225
|
suffix?: ReactNode;
|
|
1226
|
+
/**
|
|
1227
|
+
* The field's density: `sm` for a dense filter row, `md` (the default) or `lg`. A number is the
|
|
1228
|
+
* native `size` attribute of the input, as it always was.
|
|
1229
|
+
*/
|
|
1230
|
+
size?: FieldSize | number;
|
|
1040
1231
|
}
|
|
1041
1232
|
declare const Input: React__default.ForwardRefExoticComponent<InputProps & React__default.RefAttributes<HTMLInputElement>>;
|
|
1042
1233
|
|
|
1043
|
-
|
|
1044
|
-
|
|
1234
|
+
/** The body's own `div`. It keeps the body meaning it has always had. */
|
|
1235
|
+
type DialogContentProps = PartProps<"div">;
|
|
1236
|
+
declare const DialogContent: React__default.ForwardRefExoticComponent<Omit<React__default.DetailedHTMLProps<React__default.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
|
|
1045
1237
|
|
|
1238
|
+
/** The supporting line's own `p`, as Base renders it. */
|
|
1046
1239
|
type DialogDescriptionProps = ComponentPropsWithoutRef<typeof Dialog$1.Description>;
|
|
1047
|
-
declare const DialogDescription:
|
|
1240
|
+
declare const DialogDescription: React__default.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.AlertDialogDescriptionProps, "ref"> & React__default.RefAttributes<HTMLParagraphElement>, "ref"> & React__default.RefAttributes<HTMLParagraphElement>>;
|
|
1048
1241
|
|
|
1049
|
-
|
|
1050
|
-
|
|
1051
|
-
|
|
1052
|
-
}
|
|
1053
|
-
declare const DialogFooter: ({ children, className }: DialogFooterProps) => React__default.JSX.Element;
|
|
1242
|
+
/** The footer's own `div`, which holds the dialog's actions. */
|
|
1243
|
+
type DialogFooterProps = PartProps<"div">;
|
|
1244
|
+
declare const DialogFooter: React__default.ForwardRefExoticComponent<Omit<React__default.DetailedHTMLProps<React__default.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
|
|
1054
1245
|
|
|
1055
|
-
|
|
1056
|
-
|
|
1057
|
-
|
|
1058
|
-
}
|
|
1059
|
-
declare const DialogHeader: ({ children, className }: DialogHeaderProps) => React__default.JSX.Element;
|
|
1246
|
+
/** The header's own `div`. Its children are the title: Base names the surface from them. */
|
|
1247
|
+
type DialogHeaderProps = PartProps<"div">;
|
|
1248
|
+
declare const DialogHeader: React__default.ForwardRefExoticComponent<Omit<React__default.DetailedHTMLProps<React__default.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
|
|
1060
1249
|
|
|
1061
1250
|
interface DialogProps {
|
|
1062
1251
|
children: ReactNode;
|
|
@@ -1065,12 +1254,22 @@ interface DialogProps {
|
|
|
1065
1254
|
/** Base's open-change callback, event details included. */
|
|
1066
1255
|
onOpenChange?: Dialog$1.Root.Props["onOpenChange"];
|
|
1067
1256
|
className?: string;
|
|
1257
|
+
/** The accessible name of the dismissal control. Defaults to "Close dialog". */
|
|
1258
|
+
closeLabel?: string;
|
|
1068
1259
|
}
|
|
1260
|
+
/**
|
|
1261
|
+
* The close control of a dialog. It is Base's own close part, so whatever the caller renders closes
|
|
1262
|
+
* the dialog through Base, with no open state of the caller's own.
|
|
1263
|
+
*/
|
|
1264
|
+
type DialogCloseProps = ComponentProps<typeof Dialog$1.Close>;
|
|
1265
|
+
declare const DialogClose: (props: DialogCloseProps) => React__default.JSX.Element;
|
|
1069
1266
|
type DialogComponent = ForwardRefExoticComponent<DialogProps & RefAttributes<HTMLDivElement>> & {
|
|
1070
1267
|
Header: typeof DialogHeader;
|
|
1071
1268
|
Description: typeof DialogDescription;
|
|
1072
1269
|
Content: typeof DialogContent;
|
|
1073
1270
|
Footer: typeof DialogFooter;
|
|
1271
|
+
Trigger: typeof DialogTrigger;
|
|
1272
|
+
Close: typeof DialogClose;
|
|
1074
1273
|
};
|
|
1075
1274
|
declare const Dialog: DialogComponent;
|
|
1076
1275
|
|
|
@@ -1091,7 +1290,7 @@ interface MenuTriggerProps {
|
|
|
1091
1290
|
/** Adds to the rendered element. The trigger writes no visual rules of its own. */
|
|
1092
1291
|
className?: string;
|
|
1093
1292
|
}
|
|
1094
|
-
interface MenuContentProps {
|
|
1293
|
+
interface MenuContentProps extends Omit<PartProps<"div">, "children" | "className"> {
|
|
1095
1294
|
children: ReactNode;
|
|
1096
1295
|
/** Adds to the popup's own shell. The sheet's material, shape and elevation are the recipe's. */
|
|
1097
1296
|
className?: string;
|
|
@@ -1118,10 +1317,23 @@ interface MenuItemProps {
|
|
|
1118
1317
|
disabled?: boolean;
|
|
1119
1318
|
/** What choosing the action does. The menu closes afterwards; that is Base's contract. */
|
|
1120
1319
|
onClick?: MouseEventHandler<HTMLDivElement>;
|
|
1320
|
+
/** The row's leading mark. It takes the command icon's slot, beside the label. */
|
|
1321
|
+
icon?: ReactNode;
|
|
1322
|
+
/** The gesture that runs this action elsewhere. It is a hint, and the menu registers no shortcut. */
|
|
1323
|
+
shortcut?: ReactNode;
|
|
1324
|
+
/**
|
|
1325
|
+
* Renders the row as another element, such as a link. Base hands the row's own attributes and its
|
|
1326
|
+
* handlers to that element, so the row keeps its menu behaviour.
|
|
1327
|
+
*/
|
|
1328
|
+
render?: ReactElement;
|
|
1121
1329
|
}
|
|
1122
1330
|
interface MenuSeparatorProps {
|
|
1123
1331
|
className?: string;
|
|
1124
1332
|
}
|
|
1333
|
+
/** A group of rows, announced under its label. */
|
|
1334
|
+
type MenuGroupProps = PartProps<"div">;
|
|
1335
|
+
/** The heading of a group. Base names the group from it, so it is read as the group begins. */
|
|
1336
|
+
type MenuLabelProps = PartProps<"div">;
|
|
1125
1337
|
/**
|
|
1126
1338
|
* A surface of actions. Each item acts and the menu closes; nothing here holds a value, so a
|
|
1127
1339
|
* value-selection surface is `Select` or `Combobox` rather than a menu. Base UI owns keyboard
|
|
@@ -1137,11 +1349,21 @@ type MenuComponent = ((props: MenuProps) => React__default.JSX.Element) & {
|
|
|
1137
1349
|
Content: typeof MenuContent;
|
|
1138
1350
|
Item: typeof MenuItem;
|
|
1139
1351
|
Separator: typeof MenuSeparator;
|
|
1352
|
+
Group: typeof MenuGroup;
|
|
1353
|
+
Label: typeof MenuLabel;
|
|
1140
1354
|
};
|
|
1141
|
-
declare const MenuContent: ({ children, className, side, align, sideOffset, alignOffset, }: MenuContentProps) => React__default.JSX.Element;
|
|
1355
|
+
declare const MenuContent: ({ children, className, side, align, sideOffset, alignOffset, ...props }: MenuContentProps) => React__default.JSX.Element;
|
|
1142
1356
|
declare const MenuTrigger: ({ ...props }: MenuTriggerProps) => React__default.JSX.Element;
|
|
1143
1357
|
declare const MenuItem: {
|
|
1144
|
-
({ variant, className, children, ...props }: MenuItemProps): React__default.JSX.Element;
|
|
1358
|
+
({ variant, className, children, icon, shortcut, render, ...props }: MenuItemProps): React__default.JSX.Element;
|
|
1359
|
+
displayName: string;
|
|
1360
|
+
};
|
|
1361
|
+
declare const MenuGroup: {
|
|
1362
|
+
({ className, ...props }: MenuGroupProps): React__default.JSX.Element;
|
|
1363
|
+
displayName: string;
|
|
1364
|
+
};
|
|
1365
|
+
declare const MenuLabel: {
|
|
1366
|
+
({ className, ...props }: MenuLabelProps): React__default.JSX.Element;
|
|
1145
1367
|
displayName: string;
|
|
1146
1368
|
};
|
|
1147
1369
|
declare const MenuSeparator: ({ className }: MenuSeparatorProps) => React__default.JSX.Element;
|
|
@@ -1197,6 +1419,8 @@ declare const Media: {
|
|
|
1197
1419
|
interface NavGroupItem {
|
|
1198
1420
|
label: string;
|
|
1199
1421
|
href: string;
|
|
1422
|
+
/** The element this destination renders as, such as a router link. It takes precedence over `renderLink`. */
|
|
1423
|
+
render?: ReactElement;
|
|
1200
1424
|
}
|
|
1201
1425
|
/** The heading level a group labels itself with. A navigation group owns a real heading, because
|
|
1202
1426
|
* that is what makes a column of destinations scannable as groups; which level it is depends on
|
|
@@ -1210,17 +1434,28 @@ interface NavGroupProps {
|
|
|
1210
1434
|
* in: a group under a page title is a level 2, one in a sidebar section is whatever its
|
|
1211
1435
|
* neighbours are. The default matches the package's other grouped surfaces. */
|
|
1212
1436
|
headingLevel?: NavGroupHeadingLevel;
|
|
1437
|
+
/**
|
|
1438
|
+
* Renders each destination as the caller's own link, such as a router link. It receives the item and the
|
|
1439
|
+
* row's attributes — the destination, the current marker, the shared classes and the label — the same way
|
|
1440
|
+
* `Breadcrumb` does. An item's own `render` takes precedence over it.
|
|
1441
|
+
*/
|
|
1442
|
+
renderLink?: (item: NavGroupItem, props: AnchorHTMLAttributes<HTMLAnchorElement>) => ReactNode;
|
|
1213
1443
|
className?: string;
|
|
1214
1444
|
}
|
|
1215
|
-
declare const NavGroup: ({ title, items, activeHref, headingLevel, className }: NavGroupProps) => React__default.JSX.Element;
|
|
1445
|
+
declare const NavGroup: ({ title, items, activeHref, headingLevel, renderLink, className }: NavGroupProps) => React__default.JSX.Element;
|
|
1216
1446
|
|
|
1217
1447
|
interface NavItemProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
|
|
1218
1448
|
children: ReactNode;
|
|
1219
1449
|
href: string;
|
|
1220
1450
|
icon?: ReactNode;
|
|
1221
1451
|
active?: boolean;
|
|
1452
|
+
/**
|
|
1453
|
+
* The element the row renders as, such as a router link. The row's classes, its current marker and its
|
|
1454
|
+
* own props are merged onto it, so the link is the row and keeps its own navigation.
|
|
1455
|
+
*/
|
|
1456
|
+
render?: ReactElement;
|
|
1222
1457
|
}
|
|
1223
|
-
declare const NavItem: ({ children, icon, className, href, active, ...props }: NavItemProps) => React__default.JSX.Element;
|
|
1458
|
+
declare const NavItem: ({ children, icon, className, href, active, render, ...props }: NavItemProps) => React__default.JSX.Element;
|
|
1224
1459
|
|
|
1225
1460
|
interface NumberFieldProps extends Omit<ComponentProps<"input">, "value" | "defaultValue" | "onChange" | "min" | "max" | "step" | "type" | "size" | "ref" | "prefix"> {
|
|
1226
1461
|
value?: number | null;
|
|
@@ -1248,6 +1483,8 @@ interface NumberFieldProps extends Omit<ComponentProps<"input">, "value" | "defa
|
|
|
1248
1483
|
* name the unit in the label as well.
|
|
1249
1484
|
*/
|
|
1250
1485
|
suffix?: ReactNode;
|
|
1486
|
+
/** The field's density: `sm` for a dense filter row, `md` (the default) or `lg`. */
|
|
1487
|
+
size?: FieldSize;
|
|
1251
1488
|
disabled?: boolean;
|
|
1252
1489
|
readOnly?: boolean;
|
|
1253
1490
|
required?: boolean;
|
|
@@ -1258,6 +1495,8 @@ interface NumberFieldProps extends Omit<ComponentProps<"input">, "value" | "defa
|
|
|
1258
1495
|
inputRef?: Ref<HTMLInputElement>;
|
|
1259
1496
|
/** Styles the field's own container. The text input is styled through `inputClassName`. */
|
|
1260
1497
|
className?: string;
|
|
1498
|
+
/** Styles the field's box: the tray that holds the steppers and the value. */
|
|
1499
|
+
fieldClassName?: string;
|
|
1261
1500
|
inputClassName?: string;
|
|
1262
1501
|
}
|
|
1263
1502
|
/**
|
|
@@ -1266,6 +1505,19 @@ interface NumberFieldProps extends Omit<ComponentProps<"input">, "value" | "defa
|
|
|
1266
1505
|
*/
|
|
1267
1506
|
declare const NumberField: React__default.ForwardRefExoticComponent<NumberFieldProps & React__default.RefAttributes<HTMLInputElement>>;
|
|
1268
1507
|
|
|
1508
|
+
/** The English copy a pagination names itself and its parts with. Any of it can be replaced. */
|
|
1509
|
+
interface PaginationLabels {
|
|
1510
|
+
/** The landmark's accessible name. */
|
|
1511
|
+
navigation: string;
|
|
1512
|
+
/** The accessible name of the step back. */
|
|
1513
|
+
previous: string;
|
|
1514
|
+
/** The accessible name of the step forward. */
|
|
1515
|
+
next: string;
|
|
1516
|
+
/** The accessible name of a page control. */
|
|
1517
|
+
page: (page: number) => string;
|
|
1518
|
+
/** Read before the page total, so the current page reads as "3 of 12". */
|
|
1519
|
+
of: string;
|
|
1520
|
+
}
|
|
1269
1521
|
interface PaginationProps extends Omit<ComponentPropsWithoutRef<"nav">, "children" | "defaultValue" | "onChange"> {
|
|
1270
1522
|
/** Total number of pages. `0` is a valid pagination with nothing to navigate to. */
|
|
1271
1523
|
count: number;
|
|
@@ -1280,12 +1532,20 @@ interface PaginationProps extends Omit<ComponentPropsWithoutRef<"nav">, "childre
|
|
|
1280
1532
|
disabled?: boolean;
|
|
1281
1533
|
/** Renders every available page as a real anchor to the href this returns. */
|
|
1282
1534
|
getPageHref?: (page: number) => string;
|
|
1535
|
+
/**
|
|
1536
|
+
* Renders each of those anchors as the caller's own link, such as a router link, in place of the plain
|
|
1537
|
+
* anchor. It receives the page and the anchor's props — the href, the accessible name, the shared classes,
|
|
1538
|
+
* the page's content and the activation handler — and it only applies where `getPageHref` gives an href.
|
|
1539
|
+
*/
|
|
1540
|
+
renderLink?: (page: number, props: ComponentPropsWithoutRef<"a">) => ReactNode;
|
|
1283
1541
|
/** The accessible name of a page control. Defaults to `Page {page}`. */
|
|
1284
1542
|
getPageLabel?: (page: number) => string;
|
|
1285
1543
|
/** Defaults to `Previous page`. */
|
|
1286
1544
|
previousLabel?: string;
|
|
1287
1545
|
/** Defaults to `Next page`. */
|
|
1288
1546
|
nextLabel?: string;
|
|
1547
|
+
/** The English copy the pagination names itself with. The props above take precedence over it. */
|
|
1548
|
+
labels?: Partial<PaginationLabels>;
|
|
1289
1549
|
}
|
|
1290
1550
|
declare const Pagination: React.ForwardRefExoticComponent<PaginationProps & React.RefAttributes<HTMLElement>>;
|
|
1291
1551
|
|
|
@@ -1306,7 +1566,13 @@ interface PopoverTriggerProps {
|
|
|
1306
1566
|
/** Adds to the rendered element. The trigger writes no visual rules of its own. */
|
|
1307
1567
|
className?: string;
|
|
1308
1568
|
}
|
|
1309
|
-
|
|
1569
|
+
/** The close control of a popover, as Base's own close part. It closes the surface through Base. */
|
|
1570
|
+
type PopoverCloseProps = ComponentProps<typeof Popover$1.Close>;
|
|
1571
|
+
/** The heading's own `h2`. Base names the popup from it when it is present. */
|
|
1572
|
+
type PopoverTitleProps = PartProps<"h2">;
|
|
1573
|
+
/** The line under the title, as the element Base wires up as the popup's description. */
|
|
1574
|
+
type PopoverDescriptionProps = PartProps<"p">;
|
|
1575
|
+
interface PopoverContentProps extends Omit<PartProps<"div">, "children" | "className"> {
|
|
1310
1576
|
children: ReactNode;
|
|
1311
1577
|
/** Adds to the popup's own shell. The sheet's material, shape and elevation are the recipe's. */
|
|
1312
1578
|
className?: string;
|
|
@@ -1331,9 +1597,15 @@ interface PopoverContentProps {
|
|
|
1331
1597
|
type PopoverComponent = ((props: PopoverProps) => React__default.JSX.Element) & {
|
|
1332
1598
|
Trigger: typeof PopoverTrigger;
|
|
1333
1599
|
Content: typeof PopoverContent;
|
|
1600
|
+
Title: typeof PopoverTitle;
|
|
1601
|
+
Description: typeof PopoverDescription;
|
|
1602
|
+
Close: typeof PopoverClose;
|
|
1334
1603
|
};
|
|
1335
1604
|
declare const PopoverTrigger: ({ ...props }: PopoverTriggerProps) => React__default.JSX.Element;
|
|
1336
|
-
declare const
|
|
1605
|
+
declare const PopoverClose: (props: PopoverCloseProps) => React__default.JSX.Element;
|
|
1606
|
+
declare const PopoverContent: React__default.ForwardRefExoticComponent<PopoverContentProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
1607
|
+
declare const PopoverTitle: React__default.ForwardRefExoticComponent<Omit<React__default.DetailedHTMLProps<React__default.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & React__default.RefAttributes<HTMLHeadingElement>>;
|
|
1608
|
+
declare const PopoverDescription: React__default.ForwardRefExoticComponent<Omit<React__default.DetailedHTMLProps<React__default.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & React__default.RefAttributes<HTMLParagraphElement>>;
|
|
1337
1609
|
declare const Popover: PopoverComponent;
|
|
1338
1610
|
|
|
1339
1611
|
interface ProgressProps extends Omit<ComponentProps<"div">, "children">, Pick<Progress$1.Root.Props, "min" | "max" | "format" | "locale" | "getAriaValueText"> {
|
|
@@ -1401,14 +1673,32 @@ interface RadioGroupProps extends Omit<ComponentProps<"div">, "onChange" | "defa
|
|
|
1401
1673
|
*/
|
|
1402
1674
|
declare const RadioGroup: React__default.ForwardRefExoticComponent<Omit<RadioGroupProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
|
|
1403
1675
|
|
|
1404
|
-
interface SearchProps extends InputHTMLAttributes<HTMLInputElement> {
|
|
1676
|
+
interface SearchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
|
|
1405
1677
|
onSearch: (value: string) => void;
|
|
1406
1678
|
/** Base's value-change callback, event details included. */
|
|
1407
1679
|
onValueChange?: Input$1.Props["onValueChange"];
|
|
1680
|
+
/**
|
|
1681
|
+
* The tone of the submit control. It defaults to `secondary`, the neutral tonal control, so the
|
|
1682
|
+
* search field stays quiet beside the page and the one primary action keeps the strong fill.
|
|
1683
|
+
*/
|
|
1408
1684
|
variant?: Variant;
|
|
1685
|
+
/** Waiting for a result: the submit control shows a spinner and cannot be pressed again. */
|
|
1409
1686
|
loading?: boolean;
|
|
1410
1687
|
debounceMs?: number;
|
|
1688
|
+
/** Styles the search box itself: the tray that holds the input and its submit control. */
|
|
1689
|
+
className?: string;
|
|
1690
|
+
/** Styles the field's own column, which holds the box, the description and the error. */
|
|
1691
|
+
fieldClassName?: string;
|
|
1411
1692
|
inputClassName?: string;
|
|
1693
|
+
/** Supporting copy beneath the field. */
|
|
1694
|
+
description?: ReactNode;
|
|
1695
|
+
/**
|
|
1696
|
+
* Marks the field invalid, and a message is shown beneath it. `true` marks it without a message of
|
|
1697
|
+
* its own, so give the field a message that says how to recover.
|
|
1698
|
+
*/
|
|
1699
|
+
error?: ReactNode;
|
|
1700
|
+
/** The field's density: `sm` for a dense filter row, `md` (the default) or `lg`. A number is the native `size` attribute. */
|
|
1701
|
+
size?: FieldSize | number;
|
|
1412
1702
|
}
|
|
1413
1703
|
declare const Search: React__default.ForwardRefExoticComponent<SearchProps & React__default.RefAttributes<HTMLInputElement>>;
|
|
1414
1704
|
|
|
@@ -1451,7 +1741,7 @@ interface SegmentedControlProps extends Omit<ComponentProps<"div">, "onChange" |
|
|
|
1451
1741
|
declare const SegmentedControl: React__default.ForwardRefExoticComponent<Omit<SegmentedControlProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
|
|
1452
1742
|
|
|
1453
1743
|
type SkeletonProps = HTMLAttributes<HTMLDivElement>;
|
|
1454
|
-
declare const Skeleton:
|
|
1744
|
+
declare const Skeleton: React__default.ForwardRefExoticComponent<SkeletonProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
1455
1745
|
|
|
1456
1746
|
interface SliderProps extends Omit<ComponentProps<"div">, "defaultValue" | "onChange" | "children"> {
|
|
1457
1747
|
value?: number;
|
|
@@ -1486,14 +1776,19 @@ declare const Slider: React__default.ForwardRefExoticComponent<Omit<SliderProps,
|
|
|
1486
1776
|
declare const spinnerVariants: (props?: ({
|
|
1487
1777
|
show?: boolean | null | undefined;
|
|
1488
1778
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
1489
|
-
|
|
1490
|
-
|
|
1491
|
-
|
|
1492
|
-
|
|
1493
|
-
|
|
1494
|
-
|
|
1779
|
+
type SpinnerSize = "small" | "medium" | "large" | "sm" | "md" | "lg";
|
|
1780
|
+
interface SpinnerProps extends Omit<ComponentPropsWithoutRef<"span">, "children">, VariantProps<typeof spinnerVariants> {
|
|
1781
|
+
/** The loader's size. `sm`, `md` and `lg` are aliases of `small`, `medium` and `large`. */
|
|
1782
|
+
size?: SpinnerSize | null;
|
|
1783
|
+
/**
|
|
1784
|
+
* What the work is, read to a screen reader. A spinner with a label, or with visible children, is a status
|
|
1785
|
+
* that announces itself. A spinner with neither is decoration, and assistive technology skips it.
|
|
1786
|
+
*/
|
|
1787
|
+
label?: string;
|
|
1788
|
+
/** Visible copy beside the loader. */
|
|
1789
|
+
children?: ReactNode;
|
|
1495
1790
|
}
|
|
1496
|
-
declare
|
|
1791
|
+
declare const Spinner: React__default.ForwardRefExoticComponent<SpinnerProps & React__default.RefAttributes<HTMLSpanElement>>;
|
|
1497
1792
|
|
|
1498
1793
|
interface StepperItem {
|
|
1499
1794
|
value: string;
|
|
@@ -1517,6 +1812,8 @@ interface StepperProps extends Omit<ComponentProps<"nav">, "children" | "default
|
|
|
1517
1812
|
/** Horizontal when the container has room; otherwise the same sequence stacks vertically. */
|
|
1518
1813
|
orientation?: "horizontal" | "vertical";
|
|
1519
1814
|
disabled?: boolean;
|
|
1815
|
+
/** The name a completed step's mark carries for a screen reader. Defaults to `Complete`. */
|
|
1816
|
+
completeLabel?: string;
|
|
1520
1817
|
}
|
|
1521
1818
|
declare const Stepper: React__default.ForwardRefExoticComponent<Omit<StepperProps, "ref"> & React__default.RefAttributes<HTMLElement>>;
|
|
1522
1819
|
|
|
@@ -1535,9 +1832,17 @@ interface SwitchProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "val
|
|
|
1535
1832
|
declare const Switch: React__default.ForwardRefExoticComponent<SwitchProps & React__default.RefAttributes<HTMLButtonElement>>;
|
|
1536
1833
|
|
|
1537
1834
|
type TabsChangeDetails = Parameters<NonNullable<Tabs$1.Root.Props["onValueChange"]>>[1];
|
|
1835
|
+
/** The English copy a tab list names itself with. */
|
|
1836
|
+
interface TabsLabels {
|
|
1837
|
+
/** The tab list's accessible name, when neither `aria-label` nor `aria-labelledby` names it. */
|
|
1838
|
+
list: string;
|
|
1839
|
+
}
|
|
1538
1840
|
interface Tab {
|
|
1539
1841
|
id: string;
|
|
1540
|
-
label
|
|
1842
|
+
/** The tab's name. The tab is named by its label, so the label may be any content a row can hold. */
|
|
1843
|
+
label: ReactNode;
|
|
1844
|
+
/** A mark before the label. It is decorative: the label alone names the tab. */
|
|
1845
|
+
icon?: ReactNode;
|
|
1541
1846
|
content: ReactNode;
|
|
1542
1847
|
disabled?: boolean;
|
|
1543
1848
|
}
|
|
@@ -1549,9 +1854,16 @@ interface TabsProps {
|
|
|
1549
1854
|
defaultValue?: string;
|
|
1550
1855
|
/** Base's value-change event details are passed through unchanged. */
|
|
1551
1856
|
onValueChange?: (tabId: string, eventDetails: TabsChangeDetails) => void;
|
|
1857
|
+
/** Names the tab list. Left unset, the list takes the name in `labels`. */
|
|
1858
|
+
"aria-label"?: string;
|
|
1859
|
+
/** Names the tab list from an element that already labels it. It takes precedence over a name. */
|
|
1860
|
+
"aria-labelledby"?: string;
|
|
1861
|
+
/** The same name as `aria-label`, kept for callers that already use it. */
|
|
1552
1862
|
ariaLabel?: string;
|
|
1863
|
+
/** The English copy the tab list names itself with. */
|
|
1864
|
+
labels?: Partial<TabsLabels>;
|
|
1553
1865
|
}
|
|
1554
|
-
declare const Tabs: ({ tabs, variant, className, value, defaultValue, onValueChange, ariaLabel, }: TabsProps) => React__default.JSX.Element | null;
|
|
1866
|
+
declare const Tabs: ({ tabs, variant, className, value, defaultValue, onValueChange, "aria-label": ariaLabelProp, "aria-labelledby": ariaLabelledBy, ariaLabel, labels, }: TabsProps) => React__default.JSX.Element | null;
|
|
1555
1867
|
|
|
1556
1868
|
interface ToggleGroupProps extends Omit<ToggleGroup$1.Props<string>, "className" | "render"> {
|
|
1557
1869
|
/** Styles the group's own track. The segments style themselves. */
|
|
@@ -1584,27 +1896,46 @@ type ToggleGroupComponent = ForwardRefExoticComponent<ToggleGroupProps & RefAttr
|
|
|
1584
1896
|
*/
|
|
1585
1897
|
declare const ToggleGroup: ToggleGroupComponent;
|
|
1586
1898
|
|
|
1587
|
-
interface TableProps {
|
|
1588
|
-
headers: Array<string | TableColumn>;
|
|
1589
|
-
rows: ReactNode[][];
|
|
1590
|
-
/** Classes for the outer scrollable surface. */
|
|
1591
|
-
className?: string;
|
|
1592
|
-
/** Classes for the native table element. */
|
|
1593
|
-
tableClassName?: string;
|
|
1594
|
-
}
|
|
1595
1899
|
interface TableColumn {
|
|
1596
1900
|
/** Stable identity for this column, shared by its header and body cells. */
|
|
1597
1901
|
id: string;
|
|
1598
1902
|
label: string;
|
|
1599
1903
|
/** Classes applied to this column's header and body cells. */
|
|
1600
1904
|
className?: string;
|
|
1905
|
+
/**
|
|
1906
|
+
* The column names each row, so its body cells are row headers (`th scope="row"`) rather than data.
|
|
1907
|
+
* A row header is what a screen reader announces with every cell beside it.
|
|
1908
|
+
*/
|
|
1909
|
+
rowHeader?: boolean;
|
|
1601
1910
|
}
|
|
1602
|
-
|
|
1911
|
+
interface TableProps extends Omit<ComponentPropsWithoutRef<"div">, "children" | "role"> {
|
|
1912
|
+
headers: Array<string | TableColumn>;
|
|
1913
|
+
rows: ReactNode[][];
|
|
1914
|
+
/**
|
|
1915
|
+
* The table's visible caption. A string caption also names the scrolling region, so a table with a
|
|
1916
|
+
* caption is never anonymous.
|
|
1917
|
+
*/
|
|
1918
|
+
caption?: ReactNode;
|
|
1919
|
+
/** The one row shown when `rows` is empty, spanning every column. */
|
|
1920
|
+
emptyMessage?: ReactNode;
|
|
1921
|
+
/** A stable key for each row. The index is only right for rows that never reorder. */
|
|
1922
|
+
getRowKey?: (row: ReactNode[], index: number) => Key;
|
|
1923
|
+
/** Classes for the outer scrollable surface. */
|
|
1924
|
+
className?: string;
|
|
1925
|
+
/** Classes for the native table element. */
|
|
1926
|
+
tableClassName?: string;
|
|
1927
|
+
}
|
|
1928
|
+
declare const Table: React__default.ForwardRefExoticComponent<TableProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
1603
1929
|
|
|
1604
1930
|
interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
|
|
1605
1931
|
label?: ReactNode;
|
|
1606
1932
|
description?: ReactNode;
|
|
1607
|
-
|
|
1933
|
+
/**
|
|
1934
|
+
* Marks the field invalid. A message is shown beneath it, so a `ReactNode` here is both the flag and
|
|
1935
|
+
* its message. `true` marks the field without one, and `errorMessage` supplies the message.
|
|
1936
|
+
*/
|
|
1937
|
+
error?: ReactNode;
|
|
1938
|
+
/** The message for `error={true}`. A message passed as `error` takes its place. */
|
|
1608
1939
|
errorMessage?: ReactNode;
|
|
1609
1940
|
textareaClassName?: string;
|
|
1610
1941
|
/** Base's value-change callback, event details included. */
|
|
@@ -1613,12 +1944,31 @@ interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
|
|
|
1613
1944
|
declare const Textarea: React__default.ForwardRefExoticComponent<TextareaProps & React__default.RefAttributes<HTMLTextAreaElement>>;
|
|
1614
1945
|
|
|
1615
1946
|
interface TooltipProps {
|
|
1947
|
+
/** The trigger. The hint attaches to this element directly: no wrapper is rendered around it. */
|
|
1616
1948
|
children: ReactElement;
|
|
1617
1949
|
content: ReactNode;
|
|
1950
|
+
/** Adds to the trigger element. */
|
|
1618
1951
|
className?: string;
|
|
1619
1952
|
position?: "top" | "right" | "bottom" | "left";
|
|
1953
|
+
/** Where the hint sits along its edge. */
|
|
1954
|
+
align?: OverlayAlign;
|
|
1620
1955
|
}
|
|
1621
|
-
|
|
1956
|
+
interface TooltipProviderProps {
|
|
1957
|
+
children: ReactNode;
|
|
1958
|
+
/** How long a hint waits on hover before it opens, in milliseconds. */
|
|
1959
|
+
delay?: number;
|
|
1960
|
+
/** How long a hint waits before it closes, in milliseconds. */
|
|
1961
|
+
closeDelay?: number;
|
|
1962
|
+
/** A hint opened within this window after another closes opens at once. Base's own default is 400ms. */
|
|
1963
|
+
timeout?: number;
|
|
1964
|
+
}
|
|
1965
|
+
/**
|
|
1966
|
+
* Shares one warm-up across every tooltip beneath it. Hovering a hint opens it after its delay; once a
|
|
1967
|
+
* hint closes, the next one opens at once while the pointer stays in the group. Four adjacent icon
|
|
1968
|
+
* buttons therefore show their hints without a wait each time.
|
|
1969
|
+
*/
|
|
1970
|
+
declare const TooltipProvider: ({ children, delay, closeDelay, timeout }: TooltipProviderProps) => React__default.JSX.Element;
|
|
1971
|
+
declare const Tooltip: ({ children, content, className, position, align }: TooltipProps) => React__default.JSX.Element;
|
|
1622
1972
|
|
|
1623
1973
|
/**
|
|
1624
1974
|
* The finite static tree a `TreeView` presents.
|
|
@@ -1684,13 +2034,6 @@ interface TreeViewProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"
|
|
|
1684
2034
|
*/
|
|
1685
2035
|
declare const TreeView: React__default.ForwardRefExoticComponent<TreeViewProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
1686
2036
|
|
|
1687
|
-
/**
|
|
1688
|
-
* Where a viewport-owning surface is attached. `center` is a dialog: it has no edge, so it rises
|
|
1689
|
-
* into the middle of the viewport and takes the modal presence. Every other value is a sheet
|
|
1690
|
-
* attached to that edge of the viewport, and slides out of it.
|
|
1691
|
-
*/
|
|
1692
|
-
type DialogAttachment = "center" | "bottom" | "top" | "left" | "right";
|
|
1693
|
-
|
|
1694
2037
|
/**
|
|
1695
2038
|
* The viewport edge a sheet is attached to. Sides are **physical** rather than logical: the
|
|
1696
2039
|
* contract places the sheet against that edge of the screen rather than resolving a writing
|
|
@@ -1706,6 +2049,8 @@ interface DrawerProps {
|
|
|
1706
2049
|
onOpenChange?: Dialog$1.Root.Props["onOpenChange"];
|
|
1707
2050
|
/** The edge the sheet is attached to. */
|
|
1708
2051
|
side?: DrawerSide;
|
|
2052
|
+
/** The accessible name of the sheet's dismissal control. Defaults to "Close". */
|
|
2053
|
+
closeLabel?: string;
|
|
1709
2054
|
}
|
|
1710
2055
|
interface DrawerTriggerProps {
|
|
1711
2056
|
/**
|
|
@@ -1717,23 +2062,14 @@ interface DrawerTriggerProps {
|
|
|
1717
2062
|
/** Adds to the rendered element. The trigger writes no visual rules of its own. */
|
|
1718
2063
|
className?: string;
|
|
1719
2064
|
}
|
|
1720
|
-
|
|
1721
|
-
|
|
1722
|
-
|
|
1723
|
-
|
|
1724
|
-
|
|
1725
|
-
|
|
1726
|
-
|
|
1727
|
-
|
|
1728
|
-
}
|
|
1729
|
-
interface DrawerDescriptionProps {
|
|
1730
|
-
children: ReactNode;
|
|
1731
|
-
className?: string;
|
|
1732
|
-
}
|
|
1733
|
-
interface DrawerFooterProps {
|
|
1734
|
-
children: ReactNode;
|
|
1735
|
-
className?: string;
|
|
1736
|
-
}
|
|
2065
|
+
/** The sheet's own surface element: the popup, which takes the rest props and the ref. */
|
|
2066
|
+
type DrawerContentProps = PartProps<"div">;
|
|
2067
|
+
/** The header's own `div`. */
|
|
2068
|
+
type DrawerHeaderProps = PartProps<"div">;
|
|
2069
|
+
/** The supporting line's own `p`. */
|
|
2070
|
+
type DrawerDescriptionProps = PartProps<"p">;
|
|
2071
|
+
/** The footer's own `div`. */
|
|
2072
|
+
type DrawerFooterProps = PartProps<"div">;
|
|
1737
2073
|
type DrawerComponent = ((props: DrawerProps) => React__default.JSX.Element) & {
|
|
1738
2074
|
Trigger: typeof DrawerTrigger;
|
|
1739
2075
|
Content: typeof DrawerContent;
|
|
@@ -1753,10 +2089,10 @@ declare const DrawerTrigger: ({ ...props }: DrawerTriggerProps) => React__defaul
|
|
|
1753
2089
|
* traps focus, restores it, locks the page and dismisses exactly as a dialog does. Use a `Dialog`
|
|
1754
2090
|
* when the surface has no edge.
|
|
1755
2091
|
*/
|
|
1756
|
-
declare const DrawerContent:
|
|
1757
|
-
declare const DrawerHeader:
|
|
1758
|
-
declare const DrawerDescription:
|
|
1759
|
-
declare const DrawerFooter:
|
|
2092
|
+
declare const DrawerContent: React__default.ForwardRefExoticComponent<Omit<React__default.DetailedHTMLProps<React__default.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
|
|
2093
|
+
declare const DrawerHeader: React__default.ForwardRefExoticComponent<Omit<React__default.DetailedHTMLProps<React__default.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
|
|
2094
|
+
declare const DrawerDescription: React__default.ForwardRefExoticComponent<Omit<React__default.DetailedHTMLProps<React__default.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & React__default.RefAttributes<HTMLParagraphElement>>;
|
|
2095
|
+
declare const DrawerFooter: React__default.ForwardRefExoticComponent<Omit<React__default.DetailedHTMLProps<React__default.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
|
|
1760
2096
|
declare const DrawerClose: (props: ComponentProps<typeof Dialog$1.Close>) => React__default.JSX.Element;
|
|
1761
2097
|
/**
|
|
1762
2098
|
* A surface attached to one edge of the viewport: a bottom sheet, a side panel, a top drawer. It
|
|
@@ -1797,7 +2133,11 @@ interface ToastOptions {
|
|
|
1797
2133
|
type?: ToastType;
|
|
1798
2134
|
title?: ReactNode;
|
|
1799
2135
|
description?: ReactNode;
|
|
1800
|
-
/**
|
|
2136
|
+
/**
|
|
2137
|
+
* How long it stays before dismissing itself. `0` keeps it until it is dismissed. Left unset, a
|
|
2138
|
+
* toast with an action or a `danger` type is sticky: its action is a decision to make and its
|
|
2139
|
+
* danger is one to acknowledge, so it waits. Any other toast keeps the provider's timeout.
|
|
2140
|
+
*/
|
|
1801
2141
|
timeout?: number;
|
|
1802
2142
|
/** How urgently it is announced. `high` interrupts rather than waiting its turn. */
|
|
1803
2143
|
priority?: "low" | "high";
|
|
@@ -1847,9 +2187,27 @@ interface ToastProviderProps {
|
|
|
1847
2187
|
/** A manager built with `createToastManager`, for raising a toast from outside React. */
|
|
1848
2188
|
manager?: ToastManager;
|
|
1849
2189
|
}
|
|
2190
|
+
/**
|
|
2191
|
+
* The words a toast gives its own status when it has no title, so an assistive technology can name it.
|
|
2192
|
+
* Each one is the English default, and each can be replaced with the application's own wording.
|
|
2193
|
+
*/
|
|
2194
|
+
interface ToastLabels {
|
|
2195
|
+
info: string;
|
|
2196
|
+
success: string;
|
|
2197
|
+
warning: string;
|
|
2198
|
+
danger: string;
|
|
2199
|
+
error: string;
|
|
2200
|
+
loading: string;
|
|
2201
|
+
/** The name of a toast that reports no type this library knows. */
|
|
2202
|
+
notification: string;
|
|
2203
|
+
}
|
|
1850
2204
|
interface ToastViewportProps {
|
|
1851
2205
|
/** The corner the stack grows from. It is also the edge a toast enters and leaves through. */
|
|
1852
2206
|
position?: ToastPosition;
|
|
2207
|
+
/** The accessible name of every toast's dismissal control. Defaults to "Dismiss". */
|
|
2208
|
+
dismissLabel?: string;
|
|
2209
|
+
/** The words a toast without a title is named by, one per status. Each one overrides its English default. */
|
|
2210
|
+
labels?: Partial<ToastLabels>;
|
|
1853
2211
|
/** Adds to the viewport's own layer. The toasts style themselves. */
|
|
1854
2212
|
className?: string;
|
|
1855
2213
|
}
|
|
@@ -1869,7 +2227,7 @@ declare const ToastProvider: ({ children, manager, ...props }: ToastProviderProp
|
|
|
1869
2227
|
* is holding. Base provides F6 entry and focus restoration; the live region remains available
|
|
1870
2228
|
* while a modal is open. Keep the keyboard shortcut discoverable without reimplementing it.
|
|
1871
2229
|
*/
|
|
1872
|
-
declare const ToastViewport: ({ position, className }: ToastViewportProps) => React__default.JSX.Element;
|
|
2230
|
+
declare const ToastViewport: ({ position, dismissLabel, labels, className, }: ToastViewportProps) => React__default.JSX.Element;
|
|
1873
2231
|
/**
|
|
1874
2232
|
* Raises, updates and closes toasts from inside the React tree. The handle is stable for as long as
|
|
1875
2233
|
* the provider is, so it can be listed as a dependency without churning an effect.
|
|
@@ -1890,5 +2248,5 @@ interface DirectionProviderProps {
|
|
|
1890
2248
|
/** Declares writing direction to the interaction and positioning primitives, including portals. */
|
|
1891
2249
|
declare const DirectionProvider: ({ direction, children }: DirectionProviderProps) => React__default.JSX.Element;
|
|
1892
2250
|
|
|
1893
|
-
export { Accordion, Alert, AlertDialog, Avatar, Badge, Breadcrumb, Button, Calendar, Card, Checkbox, CheckboxGroup, Chip, ChipGroup, Collapsible, Combobox, Command, CommandPalette, DatePicker, DateRangePicker, DateTimePicker, Dialog, DirectionProvider, Divider, Drawer, Field, FileUpload, Form, IconButton, Input, Media, Menu, NavGroup, NavItem, NumberField, Pagination, Popover, Progress, RadioGroup, Search, SegmentedControl, Select, Skeleton, Slider, Spinner, Stepper, Switch, Table, Tabs, Textarea, ToastProvider, ToastViewport, ToggleGroup, Tooltip, TreeView, createToastManager, useToast };
|
|
1894
|
-
export type { AccordionHeadingLevel, AccordionItemProps, AccordionPanelProps, AccordionProps, AccordionTriggerProps, AlertDialogProps, AlertProps, AvatarProps, BadgeProps, BreadcrumbItem, BreadcrumbProps, ButtonAppearance, ButtonProps, ButtonSize, CalendarDate, CalendarDateTime, CalendarLabels, CalendarProps, CardProps, CheckboxGroupOption, CheckboxGroupProps, CheckboxProps, ChipGroupProps, ChipProps, CollapsiblePanelProps, CollapsibleProps, CollapsibleTriggerProps, ComboboxMultipleProps, ComboboxOption, ComboboxOptionGroup, ComboboxPasteDetails, ComboboxProps, ComboboxSingleProps, CommandItem, CommandPaletteProps, CommandProps, DatePickerProps, DateRange, DateRangePickerProps, DateTimePickerLabels, DateTimePickerProps, DialogContentProps, DialogDescriptionProps, DialogFooterProps, DialogHeaderProps, DialogProps, DirectionProviderProps, DividerProps, DividerWeight, DrawerContentProps, DrawerDescriptionProps, DrawerFooterProps, DrawerHeaderProps, DrawerProps, DrawerSide, DrawerTriggerProps, FieldProps, FileRejection, FileUploadProps, FormErrors, FormProps, IconButtonAppearance, IconButtonProps, InputProps, MediaImageProps, MediaVideoProps, MenuContentProps, MenuItemProps, MenuProps, MenuSeparatorProps, MenuTriggerProps, NavGroupHeadingLevel, NavGroupItem, NavGroupProps, NavItemProps, NumberFieldProps, OverlayAlign, OverlaySide, PaginationProps, PopoverContentProps, PopoverProps, PopoverTriggerProps, ProgressProps, RadioGroupOption, RadioGroupProps, SearchProps, SegmentedControlOption, SegmentedControlProps, SelectOption, SelectOptionGroup, SelectProps, SkeletonProps, SliderProps, SpinnerProps, StepperItem, StepperProps, SwitchProps, Tab, TableColumn, TableProps, TabsProps, TextareaProps, ToastActionOptions, ToastManager, ToastOptions, ToastPosition, ToastPromiseOptions, ToastProviderProps, ToastType, ToastUpdateOptions, ToastViewportProps, ToggleGroupItemProps, ToggleGroupProps, TooltipProps, TreeViewItem, TreeViewProps, Variant };
|
|
2251
|
+
export { Accordion, Alert, AlertDialog, Avatar, Badge, Breadcrumb, Button, Calendar, Card, Checkbox, CheckboxGroup, Chip, ChipGroup, Collapsible, Combobox, Command, CommandPalette, DatePicker, DateRangePicker, DateTimePicker, Dialog, DirectionProvider, Divider, Drawer, Field, FileUpload, Form, IconButton, Input, Media, Menu, NavGroup, NavItem, NumberField, Pagination, Popover, Progress, RadioGroup, Search, SegmentedControl, Select, Skeleton, Slider, Spinner, Stepper, Switch, Table, Tabs, Textarea, ToastProvider, ToastViewport, ToggleGroup, Tooltip, TooltipProvider, TreeView, createToastManager, useToast };
|
|
2252
|
+
export type { AccordionHeadingLevel, AccordionItemProps, AccordionPanelProps, AccordionProps, AccordionTriggerProps, AlertDialogProps, AlertDialogTriggerProps, AlertProps, AvatarProps, BadgeProps, BreadcrumbItem, BreadcrumbLabels, BreadcrumbProps, ButtonAppearance, ButtonProps, ButtonSize, CalendarDate, CalendarDateTime, CalendarLabels, CalendarProps, CardDescriptionProps, CardProps, CardTitleProps, CheckboxGroupOption, CheckboxGroupProps, CheckboxProps, ChipGroupProps, ChipProps, ChoiceAppearance, CollapsiblePanelProps, CollapsibleProps, CollapsibleTriggerProps, ComboboxLabels, ComboboxMultipleProps, ComboboxOption, ComboboxOptionGroup, ComboboxPasteDetails, ComboboxProps, ComboboxSingleProps, CommandItem, CommandLabels, CommandPaletteProps, CommandProps, DatePickerProps, DateRange, DateRangePickerProps, DateTimePickerLabels, DateTimePickerProps, DialogAttachment, DialogCloseProps, DialogContentProps, DialogDescriptionProps, DialogFooterProps, DialogHeaderProps, DialogProps, DialogTriggerProps, DirectionProviderProps, DividerProps, DividerWeight, DrawerContentProps, DrawerDescriptionProps, DrawerFooterProps, DrawerHeaderProps, DrawerProps, DrawerSide, DrawerTriggerProps, FieldProps, FieldSize, FileRejection, FileUploadLabels, FileUploadProps, FormErrors, FormProps, IconButtonAppearance, IconButtonProps, IconButtonSize, InputProps, MediaImageProps, MediaVideoProps, MenuContentProps, MenuGroupProps, MenuItemProps, MenuLabelProps, MenuProps, MenuSeparatorProps, MenuTriggerProps, NavGroupHeadingLevel, NavGroupItem, NavGroupProps, NavItemProps, NumberFieldProps, OverlayAlign, OverlaySide, PaginationLabels, PaginationProps, PartProps, PopoverCloseProps, PopoverContentProps, PopoverDescriptionProps, PopoverProps, PopoverTitleProps, PopoverTriggerProps, ProgressProps, RadioGroupOption, RadioGroupProps, SearchProps, SegmentedControlOption, SegmentedControlProps, SelectOption, SelectOptionGroup, SelectProps, SkeletonProps, SliderProps, SpinnerProps, StepperItem, StepperProps, SwitchProps, Tab, TableColumn, TableProps, TabsLabels, TabsProps, TextareaProps, ToastActionOptions, ToastLabels, ToastManager, ToastOptions, ToastPosition, ToastPromiseOptions, ToastProviderProps, ToastType, ToastUpdateOptions, ToastViewportProps, ToggleGroupItemProps, ToggleGroupProps, TooltipProps, TooltipProviderProps, TreeViewItem, TreeViewProps, TriggerProps, Variant };
|