@salemcobalt/ui 0.2.0-rc.1 → 0.2.0-rc.10
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 +30 -19
- package/dist/index.d.ts +1153 -42
- package/dist/index.js +1673 -43
- package/dist/index.js.map +1 -1
- package/dist/styles.css +2897 -69
- package/package.json +6 -5
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import { ComponentPropsWithRef, ReactNode, ReactElement } from 'react';
|
|
2
|
+
import { ComponentPropsWithRef, ReactNode, ReactElement, CSSProperties, MouseEvent, MouseEventHandler } from 'react';
|
|
3
3
|
import { useRender } from '@base-ui/react/use-render';
|
|
4
4
|
import { Dialog as Dialog$1 } from '@base-ui/react/dialog';
|
|
5
5
|
import * as _base_ui_react from '@base-ui/react';
|
|
@@ -8,6 +8,7 @@ import { Checkbox as Checkbox$1 } from '@base-ui/react/checkbox';
|
|
|
8
8
|
import { Switch as Switch$1 } from '@base-ui/react/switch';
|
|
9
9
|
import { Tabs as Tabs$1 } from '@base-ui/react/tabs';
|
|
10
10
|
import { Toolbar as Toolbar$1 } from '@base-ui/react/toolbar';
|
|
11
|
+
import { Popover as Popover$1 } from '@base-ui/react/popover';
|
|
11
12
|
|
|
12
13
|
type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger';
|
|
13
14
|
type ButtonSize = 'sm' | 'md' | 'lg';
|
|
@@ -24,9 +25,13 @@ interface ButtonProps extends ComponentPropsWithRef<'button'> {
|
|
|
24
25
|
loading?: boolean | undefined;
|
|
25
26
|
/** Stretches to the container. */
|
|
26
27
|
fullWidth?: boolean | undefined;
|
|
28
|
+
/** A keyboard hint after the label: `shortcut={<Kbd>N</Kbd>}`. Hidden from assistive tech; announce the key with `aria-keyshortcuts="n"`. */
|
|
29
|
+
shortcut?: ReactNode | undefined;
|
|
30
|
+
/** Shows only `iconStart` (or `iconEnd`) in a square button; the label stays the accessible name and the shortcut hides. Toggles without remounting, e.g. when a header runs out of room. Pair with a Tooltip carrying the label. */
|
|
31
|
+
iconOnly?: boolean | undefined;
|
|
27
32
|
}
|
|
28
33
|
/** The one way to trigger an action. Renders a native `<button>`; `type` defaults to `button`. */
|
|
29
|
-
declare function Button({ variant, size, iconStart, iconEnd, loading, fullWidth, type, className, children, onClick, ...rest }: ButtonProps): react.JSX.Element;
|
|
34
|
+
declare function Button({ variant, size, iconStart, iconEnd, loading, fullWidth, shortcut, iconOnly, type, className, children, onClick, ...rest }: ButtonProps): react.JSX.Element;
|
|
30
35
|
|
|
31
36
|
type BadgeTone = 'neutral' | 'accent' | 'success' | 'warning' | 'danger' | 'info';
|
|
32
37
|
type BadgeVariant = 'soft' | 'solid' | 'outline';
|
|
@@ -46,7 +51,7 @@ declare function Badge({ tone, variant, size, dot, className, children, ...rest
|
|
|
46
51
|
|
|
47
52
|
type CardVariant = 'outlined' | 'elevated' | 'filled';
|
|
48
53
|
type CardPadding = 'none' | 'sm' | 'md' | 'lg';
|
|
49
|
-
type CardElement = 'div' | 'article' | 'section' | 'li' | 'a' | 'button';
|
|
54
|
+
type CardElement = 'div' | 'article' | 'section' | 'nav' | 'li' | 'a' | 'button';
|
|
50
55
|
interface CardProps extends useRender.ComponentProps<'div'> {
|
|
51
56
|
/** `outlined` hairline (default), `elevated` floats, `filled` is an inset region. */
|
|
52
57
|
variant?: CardVariant | undefined;
|
|
@@ -56,7 +61,7 @@ interface CardProps extends useRender.ComponentProps<'div'> {
|
|
|
56
61
|
interactive?: boolean | undefined;
|
|
57
62
|
/** Accent border with a 1px inset, for the active row or chosen option. */
|
|
58
63
|
selected?: boolean | undefined;
|
|
59
|
-
/** Element to render when `render` is not given. */
|
|
64
|
+
/** Element to render when `render` is not given. Use `nav` (with an `aria-label`) for a carded navigation landmark. */
|
|
60
65
|
as?: CardElement | undefined;
|
|
61
66
|
}
|
|
62
67
|
/** A bordered surface that groups related content. Compose the inside with Stack and Inline. */
|
|
@@ -694,6 +699,7 @@ declare const Kbd: typeof KbdBase & {
|
|
|
694
699
|
};
|
|
695
700
|
|
|
696
701
|
type DialogSize = 'sm' | 'md' | 'lg';
|
|
702
|
+
type DialogVariant = 'dialog' | 'sheet';
|
|
697
703
|
interface DialogRootProps {
|
|
698
704
|
/** Controlled open state. */
|
|
699
705
|
open?: boolean | undefined;
|
|
@@ -706,27 +712,39 @@ interface DialogRootProps {
|
|
|
706
712
|
children?: ReactNode | undefined;
|
|
707
713
|
}
|
|
708
714
|
/** Owns the open state. Wrap a `Dialog.Trigger` and a `Dialog.Content`. */
|
|
709
|
-
declare function Root$
|
|
715
|
+
declare function Root$5({ dismissible, onOpenChange, open, defaultOpen, children }: DialogRootProps): react.JSX.Element;
|
|
710
716
|
interface DialogContentProps extends Omit<Dialog$1.Popup.Props, 'className'> {
|
|
711
|
-
/**
|
|
717
|
+
/**
|
|
718
|
+
* Maximum width: `sm` 400px for yes/no, `md` 560px (default) for a short form, `lg` 720px rarely.
|
|
719
|
+
* Every size clamps to the viewport minus a 16px gutter, so a 390px phone gets a 358px dialog.
|
|
720
|
+
*/
|
|
712
721
|
size?: DialogSize | undefined;
|
|
722
|
+
/**
|
|
723
|
+
* `dialog` (default) centres the popup. `sheet` is the same on wide viewports but below 640px it
|
|
724
|
+
* becomes a bottom sheet: full width, rounded top, title and actions pinned while `Dialog.Body`
|
|
725
|
+
* scrolls, padding that clears the home indicator. Use it for forms and pickers opened from a list.
|
|
726
|
+
*/
|
|
727
|
+
variant?: DialogVariant | undefined;
|
|
713
728
|
className?: string | undefined;
|
|
714
729
|
}
|
|
715
|
-
/**
|
|
716
|
-
|
|
730
|
+
/**
|
|
731
|
+
* Portal, backdrop and the popup. Focus moves inside on open and returns to the trigger on close.
|
|
732
|
+
* Menus, selects and tooltips opened from inside render above it (`--sc-z-dropdown` > `--sc-z-dialog`).
|
|
733
|
+
*/
|
|
734
|
+
declare function Content$2({ size, variant, className, children, ...rest }: DialogContentProps): react.JSX.Element;
|
|
717
735
|
interface DialogTitleProps extends Omit<Dialog$1.Title.Props, 'className'> {
|
|
718
736
|
className?: string | undefined;
|
|
719
737
|
}
|
|
720
738
|
/** Required. Labels the dialog; a question or a statement. Renders an `<h2>`. */
|
|
721
|
-
declare function Title({ className, ...rest }: DialogTitleProps): react.JSX.Element;
|
|
739
|
+
declare function Title$1({ className, ...rest }: DialogTitleProps): react.JSX.Element;
|
|
722
740
|
interface DialogDescriptionProps extends Omit<Dialog$1.Description.Props, 'className'> {
|
|
723
741
|
className?: string | undefined;
|
|
724
742
|
}
|
|
725
743
|
/** Optional, muted. Says what will happen. */
|
|
726
|
-
declare function Description({ className, ...rest }: DialogDescriptionProps): react.JSX.Element;
|
|
744
|
+
declare function Description$1({ className, ...rest }: DialogDescriptionProps): react.JSX.Element;
|
|
727
745
|
type DialogBodyProps = ComponentPropsWithRef<'div'>;
|
|
728
|
-
/** Free content between the description and the actions. */
|
|
729
|
-
declare function Body({ className, ...rest }: DialogBodyProps): react.JSX.Element;
|
|
746
|
+
/** Free content between the description and the actions. In a `sheet` it is the part that scrolls. */
|
|
747
|
+
declare function Body$1({ className, ...rest }: DialogBodyProps): react.JSX.Element;
|
|
730
748
|
type DialogActionsProps = Omit<InlineProps, 'justify'>;
|
|
731
749
|
/** Right-aligned row of Buttons. Put the confirming action last. */
|
|
732
750
|
declare function Actions({ className, ...rest }: DialogActionsProps): react.JSX.Element;
|
|
@@ -734,17 +752,17 @@ interface DialogCloseProps extends Omit<Dialog$1.Close.Props, 'className'> {
|
|
|
734
752
|
className?: string | undefined;
|
|
735
753
|
}
|
|
736
754
|
/** With no children or `render`, the × in the corner. Otherwise wraps any Button: `<Dialog.Close render={<Button variant="secondary" />}>Cancel</Dialog.Close>`. */
|
|
737
|
-
declare function Close({ className, children, render, ...rest }: DialogCloseProps): react.JSX.Element;
|
|
755
|
+
declare function Close$1({ className, children, render, ...rest }: DialogCloseProps): react.JSX.Element;
|
|
738
756
|
/** A modal that interrupts for a decision or a short form. Built on Base UI's Dialog. */
|
|
739
757
|
declare const Dialog: {
|
|
740
|
-
Root: typeof Root$
|
|
758
|
+
Root: typeof Root$5;
|
|
741
759
|
Trigger: Dialog$1.Trigger;
|
|
742
|
-
Content: typeof Content$
|
|
743
|
-
Title: typeof Title;
|
|
744
|
-
Description: typeof Description;
|
|
745
|
-
Body: typeof Body;
|
|
760
|
+
Content: typeof Content$2;
|
|
761
|
+
Title: typeof Title$1;
|
|
762
|
+
Description: typeof Description$1;
|
|
763
|
+
Body: typeof Body$1;
|
|
746
764
|
Actions: typeof Actions;
|
|
747
|
-
Close: typeof Close;
|
|
765
|
+
Close: typeof Close$1;
|
|
748
766
|
};
|
|
749
767
|
|
|
750
768
|
type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'em';
|
|
@@ -766,10 +784,14 @@ declare function Icon({ size, title, className, children, ...rest }: IconProps):
|
|
|
766
784
|
|
|
767
785
|
/** `archive` */
|
|
768
786
|
declare function ArchiveIcon(props: IconGlyphProps): react.JSX.Element;
|
|
787
|
+
/** `arrow-down` */
|
|
788
|
+
declare function ArrowDownIcon(props: IconGlyphProps): react.JSX.Element;
|
|
769
789
|
/** `arrow-left` */
|
|
770
790
|
declare function ArrowLeftIcon(props: IconGlyphProps): react.JSX.Element;
|
|
771
791
|
/** `arrow-right` */
|
|
772
792
|
declare function ArrowRightIcon(props: IconGlyphProps): react.JSX.Element;
|
|
793
|
+
/** `arrow-up` */
|
|
794
|
+
declare function ArrowUpIcon(props: IconGlyphProps): react.JSX.Element;
|
|
773
795
|
/** `bell` */
|
|
774
796
|
declare function BellIcon(props: IconGlyphProps): react.JSX.Element;
|
|
775
797
|
/** `briefcase` */
|
|
@@ -860,7 +882,7 @@ declare function WarningIcon(props: IconGlyphProps): react.JSX.Element;
|
|
|
860
882
|
declare function XIcon(props: IconGlyphProps): react.JSX.Element;
|
|
861
883
|
|
|
862
884
|
/** Every icon shipped by this package, as `<Name>Icon` components. */
|
|
863
|
-
declare const iconNames: readonly ["archive", "arrow-left", "arrow-right", "bell", "briefcase", "calendar", "check", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "circle-check", "circle-x", "clock", "copy", "document", "download", "edit", "external-link", "eye", "filter", "flag", "inbox", "info", "link", "mail", "map-pin", "menu", "minus", "moon", "more-horizontal", "more-vertical", "pause", "play", "plus", "refresh", "search", "settings", "star", "sun", "thumbs-down", "thumbs-up", "trash", "undo", "user", "warning", "x"];
|
|
885
|
+
declare const iconNames: readonly ["archive", "arrow-down", "arrow-left", "arrow-right", "arrow-up", "bell", "briefcase", "calendar", "check", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "circle-check", "circle-x", "clock", "copy", "document", "download", "edit", "external-link", "eye", "filter", "flag", "inbox", "info", "link", "mail", "map-pin", "menu", "minus", "moon", "more-horizontal", "more-vertical", "pause", "play", "plus", "refresh", "search", "settings", "star", "sun", "thumbs-down", "thumbs-up", "trash", "undo", "user", "warning", "x"];
|
|
864
886
|
type IconName = (typeof iconNames)[number];
|
|
865
887
|
|
|
866
888
|
type TooltipSide = 'top' | 'bottom' | 'left' | 'right';
|
|
@@ -897,7 +919,8 @@ declare const Tooltip: typeof TooltipBase & {
|
|
|
897
919
|
Provider: react.FC<_base_ui_react.TooltipProviderProps>;
|
|
898
920
|
};
|
|
899
921
|
|
|
900
|
-
|
|
922
|
+
type IconButtonDotTone = 'neutral' | 'accent' | 'success' | 'warning' | 'danger' | 'info';
|
|
923
|
+
interface IconButtonProps extends Omit<useRender.ComponentProps<'button'>, 'children' | 'aria-label'> {
|
|
901
924
|
/** Required. The accessible name, and the tooltip text when `tooltip` is `true`. */
|
|
902
925
|
label: string;
|
|
903
926
|
/** The icon, usually a shipped `<Name>Icon`. It is decorative; `label` names the button. Optional only so a popup trigger can supply it through `render`. */
|
|
@@ -914,9 +937,15 @@ interface IconButtonProps extends Omit<ComponentPropsWithRef<'button'>, 'childre
|
|
|
914
937
|
round?: boolean | undefined;
|
|
915
938
|
/** Shows a spinner, sets `aria-busy` and ignores clicks. */
|
|
916
939
|
loading?: boolean | undefined;
|
|
940
|
+
/** A status dot in the top-left corner, ringed in `--sc-icon-button-dot-ring` (default `surface-default`). Decorative: put the status in `label` too ("Sweeps: paused"). */
|
|
941
|
+
dot?: IconButtonDotTone | undefined;
|
|
917
942
|
}
|
|
918
|
-
/**
|
|
919
|
-
|
|
943
|
+
/**
|
|
944
|
+
* A square Button for one icon. Always named by `label`; use `tooltip` to show that name on hover.
|
|
945
|
+
* Renders a `<button>` unless `render` gives another element: `render={<a href="/settings" />}` or a
|
|
946
|
+
* Next.js `<Link href="/settings" />` makes it a link with the same look and name.
|
|
947
|
+
*/
|
|
948
|
+
declare function IconButton({ label, children, variant, size, tooltip, tooltipSide, round, loading, dot, type, className, onClick, render, ref, ...rest }: IconButtonProps): react.JSX.Element;
|
|
920
949
|
|
|
921
950
|
type MenuSide = 'top' | 'bottom' | 'left' | 'right';
|
|
922
951
|
type MenuAlign = 'start' | 'center' | 'end';
|
|
@@ -935,7 +964,7 @@ interface MenuRootProps {
|
|
|
935
964
|
children?: ReactNode | undefined;
|
|
936
965
|
}
|
|
937
966
|
/** Owns the open state. Wrap a `Menu.Trigger` and a `Menu.Content`. */
|
|
938
|
-
declare function Root$
|
|
967
|
+
declare function Root$4({ open, defaultOpen, onOpenChange, disabled, modal, children }: MenuRootProps): react.JSX.Element;
|
|
939
968
|
interface MenuTriggerProps extends Omit<Menu$1.Trigger.Props, 'className'> {
|
|
940
969
|
className?: string | undefined;
|
|
941
970
|
}
|
|
@@ -943,7 +972,7 @@ interface MenuTriggerProps extends Omit<Menu$1.Trigger.Props, 'className'> {
|
|
|
943
972
|
* Opens the menu. With no `render` it is a secondary Button with a chevron; pass any Button or
|
|
944
973
|
* IconButton through `render`: `<Menu.Trigger render={<IconButton label="More" />}><MoreHorizontalIcon /></Menu.Trigger>`.
|
|
945
974
|
*/
|
|
946
|
-
declare function Trigger({ render, className, children, ...rest }: MenuTriggerProps): react.JSX.Element;
|
|
975
|
+
declare function Trigger$1({ render, className, children, ...rest }: MenuTriggerProps): react.JSX.Element;
|
|
947
976
|
interface MenuContentProps extends Omit<Menu$1.Popup.Props, 'className'> {
|
|
948
977
|
/** Side of the trigger the menu opens on; flips when there is no room. Default `bottom`. */
|
|
949
978
|
side?: MenuSide | undefined;
|
|
@@ -954,7 +983,7 @@ interface MenuContentProps extends Omit<Menu$1.Popup.Props, 'className'> {
|
|
|
954
983
|
className?: string | undefined;
|
|
955
984
|
}
|
|
956
985
|
/** Portal, positioner and the popup. Items go inside. */
|
|
957
|
-
declare function Content({ side, align, sideOffset, className, children, ...rest }: MenuContentProps): react.JSX.Element;
|
|
986
|
+
declare function Content$1({ side, align, sideOffset, className, children, ...rest }: MenuContentProps): react.JSX.Element;
|
|
958
987
|
interface ItemSlots {
|
|
959
988
|
/** A 16px icon before the label. */
|
|
960
989
|
icon?: ReactNode | undefined;
|
|
@@ -1017,9 +1046,9 @@ interface MenuSeparatorProps extends Omit<Menu$1.Separator.Props, 'className'> {
|
|
|
1017
1046
|
declare function Separator$1({ className, ...rest }: MenuSeparatorProps): react.JSX.Element;
|
|
1018
1047
|
/** A dropdown of actions on a trigger, with full keyboard support. Built on Base UI's Menu. */
|
|
1019
1048
|
declare const Menu: {
|
|
1020
|
-
Root: typeof Root$
|
|
1021
|
-
Trigger: typeof Trigger;
|
|
1022
|
-
Content: typeof Content;
|
|
1049
|
+
Root: typeof Root$4;
|
|
1050
|
+
Trigger: typeof Trigger$1;
|
|
1051
|
+
Content: typeof Content$1;
|
|
1023
1052
|
Item: typeof Item;
|
|
1024
1053
|
LinkItem: typeof LinkItem;
|
|
1025
1054
|
CheckboxItem: typeof CheckboxItem;
|
|
@@ -1061,19 +1090,30 @@ interface InputProps extends Omit<ComponentPropsWithRef<'input'>, 'size' | 'name
|
|
|
1061
1090
|
/** Called with the string value on every change, beside the native `onChange`. */
|
|
1062
1091
|
onValueChange?: ((value: string) => void) | undefined;
|
|
1063
1092
|
}
|
|
1064
|
-
/**
|
|
1093
|
+
/**
|
|
1094
|
+
* A labelled single-line text field. Renders a native `<input>` inside Base UI's Field, so every native
|
|
1095
|
+
* attribute passes through: `type="date" | "time" | "number" | "url" | …` keep the same height and
|
|
1096
|
+
* `iconStart` slot; `list="id"` with a `<datalist>` beside it gives native suggestions. Date and time
|
|
1097
|
+
* fields show the browser's picker at the end edge, so leave `iconEnd` off those.
|
|
1098
|
+
*/
|
|
1065
1099
|
declare function Input({ label, hideLabel, description, error, invalid, required, disabled, name, size, className, iconStart, iconEnd, onValueChange, ...rest }: InputProps): react.JSX.Element;
|
|
1066
1100
|
|
|
1101
|
+
type TextareaVariant = 'default' | 'code';
|
|
1067
1102
|
interface TextareaProps extends Omit<ComponentPropsWithRef<'textarea'>, 'name' | 'disabled' | 'required' | 'className'>, Omit<FieldProps, 'size'> {
|
|
1068
1103
|
/** Visible lines. Default 3. */
|
|
1069
1104
|
rows?: number | undefined;
|
|
1070
1105
|
/** `vertical` (default) lets the user drag it taller; `none` fixes the height. */
|
|
1071
1106
|
resize?: 'vertical' | 'none' | undefined;
|
|
1107
|
+
/**
|
|
1108
|
+
* `code` for Markdown, JSON and other source: monospace, `tab-size: 2`, spellcheck, autocorrect and
|
|
1109
|
+
* autocapitalize off. Add the native `wrap="off"` to keep long lines on one line and scroll sideways.
|
|
1110
|
+
*/
|
|
1111
|
+
variant?: TextareaVariant | undefined;
|
|
1072
1112
|
/** Called with the string value on every change, beside the native `onChange`. */
|
|
1073
1113
|
onValueChange?: ((value: string) => void) | undefined;
|
|
1074
1114
|
}
|
|
1075
1115
|
/** A labelled multi-line text field. Renders a native `<textarea>` inside Base UI's Field. */
|
|
1076
|
-
declare function Textarea({ label, hideLabel, description, error, invalid, required, disabled, name, className, rows, resize, onValueChange, ...rest }: TextareaProps): react.JSX.Element;
|
|
1116
|
+
declare function Textarea({ label, hideLabel, description, error, invalid, required, disabled, name, className, rows, resize, variant, onValueChange, spellCheck, autoCorrect, autoCapitalize, ...rest }: TextareaProps): react.JSX.Element;
|
|
1077
1117
|
|
|
1078
1118
|
interface SelectOption<Value extends string = string> {
|
|
1079
1119
|
value: Value;
|
|
@@ -1088,14 +1128,21 @@ interface SelectGroup<Value extends string = string> {
|
|
|
1088
1128
|
interface SelectProps<Value extends string = string> extends FieldProps {
|
|
1089
1129
|
/** Flat options, or groups of options with a heading. */
|
|
1090
1130
|
options: Array<SelectOption<Value> | SelectGroup<Value>>;
|
|
1091
|
-
/** Controlled value; `null` for none. */
|
|
1131
|
+
/** Controlled value; `null` for none, which shows `placeholder`. No sentinel option needed. */
|
|
1092
1132
|
value?: Value | null | undefined;
|
|
1093
|
-
/** Initial value when uncontrolled. */
|
|
1133
|
+
/** Initial value when uncontrolled; `null` (default) for none. */
|
|
1094
1134
|
defaultValue?: Value | null | undefined;
|
|
1095
|
-
/** Called with the chosen value. */
|
|
1135
|
+
/** Called with the chosen value, or `null` when the field is cleared. */
|
|
1096
1136
|
onValueChange?: ((value: Value | null) => void) | undefined;
|
|
1097
1137
|
/** Shown in the trigger while nothing is chosen. */
|
|
1098
1138
|
placeholder?: ReactNode | undefined;
|
|
1139
|
+
/**
|
|
1140
|
+
* Shows an × beside the chevron while a value is chosen; pressing it, or Backspace/Delete on the
|
|
1141
|
+
* focused trigger, sets the value to `null` and calls `onValueChange(null)`.
|
|
1142
|
+
*/
|
|
1143
|
+
clearable?: boolean | undefined;
|
|
1144
|
+
/** Accessible name of the clear button. Default "Clear". */
|
|
1145
|
+
clearLabel?: string | undefined;
|
|
1099
1146
|
/** Prevents choosing a different option. */
|
|
1100
1147
|
readOnly?: boolean | undefined;
|
|
1101
1148
|
/** Stretches the trigger to the container. */
|
|
@@ -1106,7 +1153,7 @@ interface SelectProps<Value extends string = string> extends FieldProps {
|
|
|
1106
1153
|
* A labelled single-choice dropdown. Built on Base UI's Select so the list is styled and keyboard
|
|
1107
1154
|
* complete; submits like a native select through `name`.
|
|
1108
1155
|
*/
|
|
1109
|
-
declare function Select<Value extends string = string>({ label, hideLabel, description, error, invalid, required, disabled, name, size, className, options, value, defaultValue, onValueChange, placeholder, readOnly, fullWidth, id, }: SelectProps<Value>): react.JSX.Element;
|
|
1156
|
+
declare function Select<Value extends string = string>({ label, hideLabel, description, error, invalid, required, disabled, name, size, className, options, value, defaultValue, onValueChange, placeholder, clearable, clearLabel, readOnly, fullWidth, id, }: SelectProps<Value>): react.JSX.Element;
|
|
1110
1157
|
|
|
1111
1158
|
interface CheckboxProps extends Omit<Checkbox$1.Root.Props, 'className' | 'onCheckedChange' | 'render' | 'children'> {
|
|
1112
1159
|
/** Required. The visible label; clicking it toggles the box. */
|
|
@@ -1144,16 +1191,19 @@ interface TabsRootProps extends Omit<Tabs$1.Root.Props, 'className' | 'value' |
|
|
|
1144
1191
|
className?: string | undefined;
|
|
1145
1192
|
}
|
|
1146
1193
|
/** Owns the active tab. Wrap a `Tabs.List` and one `Tabs.Panel` per tab. */
|
|
1147
|
-
declare function Root$
|
|
1194
|
+
declare function Root$3({ className, onValueChange, ...rest }: TabsRootProps): react.JSX.Element;
|
|
1195
|
+
type TabsListVariant = 'line' | 'segmented';
|
|
1148
1196
|
interface TabsListProps extends Omit<Tabs$1.List.Props, 'className'> {
|
|
1149
1197
|
/** Names the set of tabs for assistive tech: "Inbox sections". */
|
|
1150
1198
|
'aria-label': string;
|
|
1151
1199
|
/** Tabs share the width equally instead of sizing to their labels. */
|
|
1152
1200
|
fill?: boolean | undefined;
|
|
1201
|
+
/** `line` (default): an accent underline on the active tab. `segmented`: a quiet segmented control, a sunken track with the active tab raised and no accent colour. */
|
|
1202
|
+
variant?: TabsListVariant | undefined;
|
|
1153
1203
|
className?: string | undefined;
|
|
1154
1204
|
}
|
|
1155
1205
|
/** The row of tabs with the sliding indicator. Arrow keys move between tabs; Enter or Space activates. */
|
|
1156
|
-
declare function List({ fill, className, children, ...rest }: TabsListProps): react.JSX.Element;
|
|
1206
|
+
declare function List({ fill, variant, className, children, ...rest }: TabsListProps): react.JSX.Element;
|
|
1157
1207
|
interface TabsTabProps extends Omit<Tabs$1.Tab.Props, 'className' | 'value'> {
|
|
1158
1208
|
value: string;
|
|
1159
1209
|
/** A 16px icon before the label. */
|
|
@@ -1172,7 +1222,7 @@ interface TabsPanelProps extends Omit<Tabs$1.Panel.Props, 'className' | 'value'>
|
|
|
1172
1222
|
declare function Panel({ className, ...rest }: TabsPanelProps): react.JSX.Element;
|
|
1173
1223
|
/** Switches between sections of one view. Built on Base UI's Tabs. */
|
|
1174
1224
|
declare const Tabs: {
|
|
1175
|
-
Root: typeof Root$
|
|
1225
|
+
Root: typeof Root$3;
|
|
1176
1226
|
List: typeof List;
|
|
1177
1227
|
Tab: typeof Tab;
|
|
1178
1228
|
Panel: typeof Panel;
|
|
@@ -1191,7 +1241,7 @@ interface ToolbarRootProps extends Omit<Toolbar$1.Root.Props, 'className'> {
|
|
|
1191
1241
|
* A row of controls with one tab stop: Tab enters, arrow keys move between items, Tab leaves. Put every
|
|
1192
1242
|
* control through `Toolbar.Button` (`render={<IconButton … />}`) so it joins the roving focus.
|
|
1193
1243
|
*/
|
|
1194
|
-
declare function Root({ wrap, gap, className, ...rest }: ToolbarRootProps): react.JSX.Element;
|
|
1244
|
+
declare function Root$2({ wrap, gap, className, ...rest }: ToolbarRootProps): react.JSX.Element;
|
|
1195
1245
|
interface ToolbarGroupProps extends Omit<Toolbar$1.Group.Props, 'className'> {
|
|
1196
1246
|
/** Names the group: "Playback". */
|
|
1197
1247
|
'aria-label'?: string | undefined;
|
|
@@ -1209,6 +1259,9 @@ declare function Separator({ className, ...rest }: ToolbarSeparatorProps): react
|
|
|
1209
1259
|
interface ToolbarButtonProps extends Omit<Toolbar$1.Button.Props, 'className'> {
|
|
1210
1260
|
className?: string | undefined;
|
|
1211
1261
|
}
|
|
1262
|
+
interface ToolbarLinkProps extends Omit<Toolbar$1.Link.Props, 'className'> {
|
|
1263
|
+
className?: string | undefined;
|
|
1264
|
+
}
|
|
1212
1265
|
interface ToolbarSpacerProps {
|
|
1213
1266
|
className?: string | undefined;
|
|
1214
1267
|
}
|
|
@@ -1216,10 +1269,11 @@ interface ToolbarSpacerProps {
|
|
|
1216
1269
|
declare function Spacer({ className }: ToolbarSpacerProps): react.JSX.Element;
|
|
1217
1270
|
/** A horizontal container of controls. Built on Base UI's Toolbar. */
|
|
1218
1271
|
declare const Toolbar: {
|
|
1219
|
-
Root: typeof Root;
|
|
1272
|
+
Root: typeof Root$2;
|
|
1220
1273
|
Group: typeof Group;
|
|
1221
1274
|
Separator: typeof Separator;
|
|
1222
1275
|
Button: react.ForwardRefExoticComponent<Omit<_base_ui_react.ToolbarButtonProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
|
|
1276
|
+
Link: react.ForwardRefExoticComponent<Omit<_base_ui_react.ToolbarLinkProps, "ref"> & react.RefAttributes<HTMLAnchorElement>>;
|
|
1223
1277
|
Spacer: typeof Spacer;
|
|
1224
1278
|
};
|
|
1225
1279
|
|
|
@@ -1611,7 +1665,1064 @@ interface TextProps extends ComponentPropsWithRef<'p'> {
|
|
|
1611
1665
|
/** Running text and labels from the type scale. Parents own spacing: Text has no margins. */
|
|
1612
1666
|
declare function Text({ as, size, tone, weight, align, truncate, numeric, className, style, ...rest }: TextProps): ReactElement;
|
|
1613
1667
|
|
|
1668
|
+
/** The header checkbox: nothing, some or every row selected. */
|
|
1669
|
+
type RowSelectionHeaderState = 'none' | 'some' | 'all';
|
|
1670
|
+
|
|
1671
|
+
interface RowSelection {
|
|
1672
|
+
/** The selectable ids, in the order passed in. */
|
|
1673
|
+
ids: readonly string[];
|
|
1674
|
+
/** The selected ids; a subset of the ids passed in. */
|
|
1675
|
+
selected: ReadonlySet<string>;
|
|
1676
|
+
/** The selected ids in visible order. */
|
|
1677
|
+
selectedIds: readonly string[];
|
|
1678
|
+
count: number;
|
|
1679
|
+
/** Where the next Shift range starts. */
|
|
1680
|
+
anchor: string | null;
|
|
1681
|
+
/** For the header checkbox. */
|
|
1682
|
+
headerState: RowSelectionHeaderState;
|
|
1683
|
+
isSelected: (id: string) => boolean;
|
|
1684
|
+
toggle: (id: string) => void;
|
|
1685
|
+
/** Every row from the anchor to `id`, inclusive, in the current order, takes `id`'s new state. */
|
|
1686
|
+
toggleRange: (id: string) => void;
|
|
1687
|
+
selectAll: () => void;
|
|
1688
|
+
clear: () => void;
|
|
1689
|
+
}
|
|
1690
|
+
/**
|
|
1691
|
+
* Selection state for a list of rows, by id. Pass the selectable ids in visible order (after filtering and
|
|
1692
|
+
* sorting); when one disappears it leaves the selection and the rest stay. Hand the result to
|
|
1693
|
+
* `Table.Root selection` for the checkbox column and keyboard, or read it for a bulk-action bar.
|
|
1694
|
+
*/
|
|
1695
|
+
declare function useRowSelection(ids: readonly string[]): RowSelection;
|
|
1696
|
+
|
|
1697
|
+
type TableAlign = 'start' | 'center' | 'end';
|
|
1698
|
+
type TableDensity = 'comfortable' | 'compact';
|
|
1699
|
+
type TableSortDirection = 'ascending' | 'descending' | 'none';
|
|
1700
|
+
interface TableRootProps extends Omit<ComponentPropsWithRef<'table'>, 'style'> {
|
|
1701
|
+
/** Column headers stay visible while the table scrolls. Give `maxHeight` to scroll inside the table; otherwise they stick to the page. */
|
|
1702
|
+
stickyHeader?: boolean | undefined;
|
|
1703
|
+
/** Limits the height and scrolls rows inside; pairs with `stickyHeader`. A CSS length. */
|
|
1704
|
+
maxHeight?: string | undefined;
|
|
1705
|
+
/** `compact` tightens row height and padding; `data-density="compact"` on an ancestor does the same. */
|
|
1706
|
+
density?: TableDensity | undefined;
|
|
1707
|
+
/** Hairlines between rows (default) or none. */
|
|
1708
|
+
divided?: boolean | undefined;
|
|
1709
|
+
/** `fixed` column widths from the first row, for truncating cells. Default `auto`. */
|
|
1710
|
+
layout?: 'auto' | 'fixed' | undefined;
|
|
1711
|
+
/** Style and class for the scrolling wrapper; `className` goes on the `<table>`. */
|
|
1712
|
+
wrapperClassName?: string | undefined;
|
|
1713
|
+
wrapperStyle?: CSSProperties | undefined;
|
|
1714
|
+
style?: CSSProperties | undefined;
|
|
1715
|
+
children?: ReactNode | undefined;
|
|
1716
|
+
/**
|
|
1717
|
+
* `useRowSelection(ids)`. Turns on the selection column parts (`Table.SelectionHeader`, `Table.SelectionCell`),
|
|
1718
|
+
* modifier clicks on rows with a `selectionId`, and the keyboard: Cmd/Ctrl+A selects every row while focus
|
|
1719
|
+
* is inside the table, Escape clears.
|
|
1720
|
+
*/
|
|
1721
|
+
selection?: RowSelection | undefined;
|
|
1722
|
+
}
|
|
1723
|
+
/** A semantic `<table>` in a horizontally scrolling wrapper. Compose `Table.Head`, `Table.Body`, `Table.Row`, `Table.Header`, `Table.Cell`. */
|
|
1724
|
+
declare function Root$1({ stickyHeader, maxHeight, density, divided, layout, wrapperClassName, wrapperStyle, className, style, children, selection, onKeyDown, ...rest }: TableRootProps): react.JSX.Element;
|
|
1725
|
+
type TableCaptionProps = ComponentPropsWithRef<'caption'>;
|
|
1726
|
+
/** Names the table for assistive tech; visually a muted line above it. */
|
|
1727
|
+
declare function Caption({ className, ...rest }: TableCaptionProps): react.JSX.Element;
|
|
1728
|
+
type TableHeadProps = ComponentPropsWithRef<'thead'>;
|
|
1729
|
+
declare function Head({ className, ...rest }: TableHeadProps): react.JSX.Element;
|
|
1730
|
+
type TableBodyProps = ComponentPropsWithRef<'tbody'>;
|
|
1731
|
+
declare function Body({ className, ...rest }: TableBodyProps): react.JSX.Element;
|
|
1732
|
+
type TableFootProps = ComponentPropsWithRef<'tfoot'>;
|
|
1733
|
+
declare function Foot({ className, ...rest }: TableFootProps): react.JSX.Element;
|
|
1734
|
+
interface TableRowProps extends ComponentPropsWithRef<'tr'> {
|
|
1735
|
+
/** Accent wash, for the current row. With `selectionId` it defaults to the row's selection. */
|
|
1736
|
+
selected?: boolean | undefined;
|
|
1737
|
+
/** Hover wash and pointer; make the primary cell a link or button for the real target. */
|
|
1738
|
+
interactive?: boolean | undefined;
|
|
1739
|
+
/**
|
|
1740
|
+
* The row's id in `Table.Root selection`. Shift+click extends the range to this row and Cmd/Ctrl+click
|
|
1741
|
+
* toggles it, unless the click is on a link, button or field inside the row; neither reaches `onClick`,
|
|
1742
|
+
* so a plain click can still open the row.
|
|
1743
|
+
*/
|
|
1744
|
+
selectionId?: string | undefined;
|
|
1745
|
+
}
|
|
1746
|
+
declare function Row({ selected, interactive, selectionId, className, onClick, onMouseDown, ...rest }: TableRowProps): react.JSX.Element;
|
|
1747
|
+
interface TableSelectionHeaderProps extends Omit<ComponentPropsWithRef<'th'>, 'children'> {
|
|
1748
|
+
/** The checkbox's accessible name. Default "Select all rows". */
|
|
1749
|
+
label?: string | undefined;
|
|
1750
|
+
}
|
|
1751
|
+
/**
|
|
1752
|
+
* The selection column's header: a checkbox that is checked when every row is, mixed when some are, and
|
|
1753
|
+
* selects every row (or, when all are selected, none). The whole cell is the hit area.
|
|
1754
|
+
*/
|
|
1755
|
+
declare function SelectionHeader({ label, className, onClick, ...rest }: TableSelectionHeaderProps): react.JSX.Element;
|
|
1756
|
+
interface TableSelectionCellProps extends Omit<ComponentPropsWithRef<'td'>, 'children'> {
|
|
1757
|
+
/** Required. Names the row's checkbox: "Select Tailscale, Front End Engineer". */
|
|
1758
|
+
label: string;
|
|
1759
|
+
}
|
|
1760
|
+
/**
|
|
1761
|
+
* The row's checkbox, inside a `Table.Row selectionId`. Click or Space toggles; Shift+click or Shift+Space
|
|
1762
|
+
* extends the range from the last toggled row. The whole cell is the hit area, and its clicks never reach the
|
|
1763
|
+
* row's `onClick`.
|
|
1764
|
+
*/
|
|
1765
|
+
declare function SelectionCell({ label, className, onClick, onClickCapture, ...rest }: TableSelectionCellProps): react.JSX.Element;
|
|
1766
|
+
interface CellSlots {
|
|
1767
|
+
/** Horizontal alignment. Default `start`; `end` for numbers. */
|
|
1768
|
+
align?: TableAlign | undefined;
|
|
1769
|
+
/** Tabular figures and end alignment. */
|
|
1770
|
+
numeric?: boolean | undefined;
|
|
1771
|
+
/** No wrapping. */
|
|
1772
|
+
nowrap?: boolean | undefined;
|
|
1773
|
+
/** One line with an ellipsis; needs `layout="fixed"` or a `width`. */
|
|
1774
|
+
truncate?: boolean | undefined;
|
|
1775
|
+
/** Column width as a CSS length, on headers. */
|
|
1776
|
+
width?: string | undefined;
|
|
1777
|
+
}
|
|
1778
|
+
interface TableHeaderProps extends Omit<ComponentPropsWithRef<'th'>, 'align' | 'width'>, CellSlots {
|
|
1779
|
+
/** Renders the label as a button that sorts the column. The table stays controlled: sort the rows yourself in `onSort`. */
|
|
1780
|
+
sortable?: boolean | undefined;
|
|
1781
|
+
/** The column's current sort, reflected as `aria-sort`. `none` (default) for every column but the sorted one. */
|
|
1782
|
+
sortDirection?: TableSortDirection | undefined;
|
|
1783
|
+
/** Called with the direction to apply: `ascending` first, then it toggles. */
|
|
1784
|
+
onSort?: ((direction: Exclude<TableSortDirection, 'none'>) => void) | undefined;
|
|
1785
|
+
}
|
|
1786
|
+
/** A `<th>`; `scope` defaults to `col`, pass `row` for the first cell of a row. */
|
|
1787
|
+
declare function Header({ align, numeric, nowrap, truncate, width, sortable, sortDirection, onSort, scope, className, style, children, ...rest }: TableHeaderProps): react.JSX.Element;
|
|
1788
|
+
interface TableCellProps extends Omit<ComponentPropsWithRef<'td'>, 'align' | 'width'>, CellSlots {
|
|
1789
|
+
}
|
|
1790
|
+
declare function Cell({ align, numeric, nowrap, truncate, width, className, style, ...rest }: TableCellProps): react.JSX.Element;
|
|
1791
|
+
/** Rows of records with column headers. Native table elements, so screen readers get rows and columns. */
|
|
1792
|
+
declare const Table: {
|
|
1793
|
+
Root: typeof Root$1;
|
|
1794
|
+
Caption: typeof Caption;
|
|
1795
|
+
Head: typeof Head;
|
|
1796
|
+
Body: typeof Body;
|
|
1797
|
+
Foot: typeof Foot;
|
|
1798
|
+
Row: typeof Row;
|
|
1799
|
+
Header: typeof Header;
|
|
1800
|
+
Cell: typeof Cell;
|
|
1801
|
+
SelectionHeader: typeof SelectionHeader;
|
|
1802
|
+
SelectionCell: typeof SelectionCell;
|
|
1803
|
+
};
|
|
1804
|
+
|
|
1805
|
+
interface SelectionBarProps {
|
|
1806
|
+
/** How many rows are selected. The bar shows from 1 and leaves at 0. */
|
|
1807
|
+
count: number;
|
|
1808
|
+
/** Clears the selection (the Clear button). */
|
|
1809
|
+
onClear: () => void;
|
|
1810
|
+
/** The actions, each a `Toolbar.Button`: `<Toolbar.Button render={<Button size="sm" variant="secondary" />}>Close 3</Toolbar.Button>`. */
|
|
1811
|
+
children?: ReactNode | undefined;
|
|
1812
|
+
/** Names the toolbar. Default "Bulk actions". */
|
|
1813
|
+
'aria-label'?: string | undefined;
|
|
1814
|
+
/** The count text, visible and announced. Default `${count} selected`. */
|
|
1815
|
+
countLabel?: ((count: number) => string) | undefined;
|
|
1816
|
+
/** Default "Clear". */
|
|
1817
|
+
clearLabel?: string | undefined;
|
|
1818
|
+
/** Announced when the selection goes back to none. Default "Selection cleared". */
|
|
1819
|
+
clearedMessage?: string | undefined;
|
|
1820
|
+
className?: string | undefined;
|
|
1821
|
+
}
|
|
1822
|
+
/**
|
|
1823
|
+
* A floating bar for bulk actions on selected rows, centred at the bottom of the viewport: the count, the actions
|
|
1824
|
+
* and Clear, as one Toolbar (one tab stop, arrow keys inside). A polite status region announces the count as it
|
|
1825
|
+
* changes. Put it after the table, at the end of the scrolling content: while it shows, it leaves a spacer as
|
|
1826
|
+
* tall as itself there, so the last rows can scroll clear of it. When it leaves while holding focus (an action
|
|
1827
|
+
* cleared the selection), focus goes back to where it came from, usually the last row checkbox.
|
|
1828
|
+
*/
|
|
1829
|
+
declare function SelectionBar({ count, onClear, children, 'aria-label': ariaLabel, countLabel, clearLabel, clearedMessage, className, }: SelectionBarProps): react.JSX.Element;
|
|
1830
|
+
|
|
1831
|
+
type ToastTone = 'neutral' | 'success' | 'danger';
|
|
1832
|
+
interface ToastOptions {
|
|
1833
|
+
/** Required. One line: "Closed 5 applications". */
|
|
1834
|
+
title: ReactNode;
|
|
1835
|
+
description?: ReactNode | undefined;
|
|
1836
|
+
/** A coloured edge. Default `neutral`. */
|
|
1837
|
+
tone?: ToastTone | undefined;
|
|
1838
|
+
/** One action, usually Undo. It closes the toast after `onClick`. */
|
|
1839
|
+
action?: {
|
|
1840
|
+
label: string;
|
|
1841
|
+
onClick: () => void;
|
|
1842
|
+
} | undefined;
|
|
1843
|
+
/** Milliseconds before it closes; paused while hovered or focused; `0` keeps it. Default: the Provider's. */
|
|
1844
|
+
timeout?: number | undefined;
|
|
1845
|
+
/** `high` announces assertively (errors). Default `low`, polite. */
|
|
1846
|
+
priority?: 'low' | 'high' | undefined;
|
|
1847
|
+
}
|
|
1848
|
+
interface ToastProviderProps {
|
|
1849
|
+
children?: ReactNode | undefined;
|
|
1850
|
+
/** Default auto-close, in milliseconds. Default 6000. */
|
|
1851
|
+
timeout?: number | undefined;
|
|
1852
|
+
/** How many show at once; older ones close. Default 3. */
|
|
1853
|
+
limit?: number | undefined;
|
|
1854
|
+
}
|
|
1855
|
+
/** Holds the toasts for `useToast()` below it and renders them, bottom-end, in the top layer. */
|
|
1856
|
+
declare function Provider({ children, timeout, limit }: ToastProviderProps): react.JSX.Element;
|
|
1857
|
+
interface ToastApi {
|
|
1858
|
+
/** Shows a toast and returns its id. */
|
|
1859
|
+
add: (options: ToastOptions) => string;
|
|
1860
|
+
/** Closes one toast, or every toast without an id. */
|
|
1861
|
+
close: (id?: string) => void;
|
|
1862
|
+
}
|
|
1863
|
+
/** Shows toasts from inside a `Toast.Provider`. */
|
|
1864
|
+
declare function useToast(): ToastApi;
|
|
1865
|
+
/**
|
|
1866
|
+
* Short-lived status messages: "Closed 5 applications · Undo". Built on Base UI's Toast: announced through a
|
|
1867
|
+
* polite region (`priority: 'high'` for errors), paused while hovered or focused, F6 moves focus to them.
|
|
1868
|
+
*/
|
|
1869
|
+
declare const Toast: {
|
|
1870
|
+
Provider: typeof Provider;
|
|
1871
|
+
};
|
|
1872
|
+
|
|
1873
|
+
type StatTrend = 'up' | 'down' | 'flat';
|
|
1874
|
+
type StatDeltaTone = 'positive' | 'negative' | 'neutral';
|
|
1875
|
+
type StatElement = 'div' | 'li' | 'article';
|
|
1876
|
+
type StatVariant = 'outlined' | 'filled' | 'plain';
|
|
1877
|
+
type StatSize = 'sm' | 'md';
|
|
1878
|
+
interface StatProps extends Omit<ComponentPropsWithRef<'div'>, 'children'> {
|
|
1879
|
+
/** What the number is: "Applications", "Reply rate". */
|
|
1880
|
+
label: ReactNode;
|
|
1881
|
+
/** The number, already formatted: "1,204", "37%". */
|
|
1882
|
+
value: ReactNode;
|
|
1883
|
+
/** The change beside the value: "+12", "−3.1 pts", "same as last week". */
|
|
1884
|
+
delta?: ReactNode | undefined;
|
|
1885
|
+
/** Colour of the delta: `positive` green, `negative` red, `neutral` muted (default). Say which is good; up is not always good. */
|
|
1886
|
+
deltaTone?: StatDeltaTone | undefined;
|
|
1887
|
+
/** Arrow before the delta. */
|
|
1888
|
+
trend?: StatTrend | undefined;
|
|
1889
|
+
/** Muted line under the value: "last 7 days", "of 2,000 budget". */
|
|
1890
|
+
hint?: ReactNode | undefined;
|
|
1891
|
+
/** A 20px icon in the corner. Decorative. */
|
|
1892
|
+
icon?: ReactNode | undefined;
|
|
1893
|
+
/** `outlined` surface (default), `filled` inset, `plain` no surface for a row of stats inside a Card. */
|
|
1894
|
+
variant?: StatVariant | undefined;
|
|
1895
|
+
/** `md` (default) or `sm` for dense rows. */
|
|
1896
|
+
size?: StatSize | undefined;
|
|
1897
|
+
/** Element to render; `li` in a list of stats. */
|
|
1898
|
+
as?: StatElement | undefined;
|
|
1899
|
+
}
|
|
1900
|
+
/** One number with its label: a KPI tile. The value is text, so it reads as "Applications, 1,204, up 12". */
|
|
1901
|
+
declare function Stat({ label, value, delta, deltaTone, trend, hint, icon, variant, size, as, className, ...rest }: StatProps): react.DetailedReactHTMLElement<{
|
|
1902
|
+
slot?: string | undefined | undefined;
|
|
1903
|
+
style?: react.CSSProperties | undefined;
|
|
1904
|
+
title?: string | undefined | undefined;
|
|
1905
|
+
ref?: react.Ref<HTMLDivElement> | undefined;
|
|
1906
|
+
key?: react.Key | null | undefined;
|
|
1907
|
+
defaultChecked?: boolean | undefined | undefined;
|
|
1908
|
+
defaultValue?: string | number | readonly string[] | undefined;
|
|
1909
|
+
suppressContentEditableWarning?: boolean | undefined | undefined;
|
|
1910
|
+
suppressHydrationWarning?: boolean | undefined | undefined;
|
|
1911
|
+
accessKey?: string | undefined | undefined;
|
|
1912
|
+
autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
|
|
1913
|
+
autoFocus?: boolean | undefined | undefined;
|
|
1914
|
+
contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
|
|
1915
|
+
contextMenu?: string | undefined | undefined;
|
|
1916
|
+
dir?: string | undefined | undefined;
|
|
1917
|
+
draggable?: (boolean | "true" | "false") | undefined;
|
|
1918
|
+
enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
|
|
1919
|
+
hidden?: boolean | undefined | undefined;
|
|
1920
|
+
id?: string | undefined | undefined;
|
|
1921
|
+
lang?: string | undefined | undefined;
|
|
1922
|
+
nonce?: string | undefined | undefined;
|
|
1923
|
+
spellCheck?: (boolean | "true" | "false") | undefined;
|
|
1924
|
+
tabIndex?: number | undefined | undefined;
|
|
1925
|
+
translate?: "yes" | "no" | undefined | undefined;
|
|
1926
|
+
radioGroup?: string | undefined | undefined;
|
|
1927
|
+
role?: react.AriaRole | undefined;
|
|
1928
|
+
about?: string | undefined | undefined;
|
|
1929
|
+
content?: string | undefined | undefined;
|
|
1930
|
+
datatype?: string | undefined | undefined;
|
|
1931
|
+
inlist?: any;
|
|
1932
|
+
prefix?: string | undefined | undefined;
|
|
1933
|
+
property?: string | undefined | undefined;
|
|
1934
|
+
rel?: string | undefined | undefined;
|
|
1935
|
+
resource?: string | undefined | undefined;
|
|
1936
|
+
rev?: string | undefined | undefined;
|
|
1937
|
+
typeof?: string | undefined | undefined;
|
|
1938
|
+
vocab?: string | undefined | undefined;
|
|
1939
|
+
autoCorrect?: string | undefined | undefined;
|
|
1940
|
+
autoSave?: string | undefined | undefined;
|
|
1941
|
+
color?: string | undefined | undefined;
|
|
1942
|
+
itemProp?: string | undefined | undefined;
|
|
1943
|
+
itemScope?: boolean | undefined | undefined;
|
|
1944
|
+
itemType?: string | undefined | undefined;
|
|
1945
|
+
itemID?: string | undefined | undefined;
|
|
1946
|
+
itemRef?: string | undefined | undefined;
|
|
1947
|
+
results?: number | undefined | undefined;
|
|
1948
|
+
security?: string | undefined | undefined;
|
|
1949
|
+
unselectable?: "on" | "off" | undefined | undefined;
|
|
1950
|
+
popover?: "" | "auto" | "manual" | "hint" | undefined | undefined;
|
|
1951
|
+
popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
|
|
1952
|
+
popoverTarget?: string | undefined | undefined;
|
|
1953
|
+
inert?: boolean | undefined | undefined;
|
|
1954
|
+
inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
|
|
1955
|
+
is?: string | undefined | undefined;
|
|
1956
|
+
exportparts?: string | undefined | undefined;
|
|
1957
|
+
part?: string | undefined | undefined;
|
|
1958
|
+
"aria-activedescendant"?: string | undefined | undefined;
|
|
1959
|
+
"aria-atomic"?: (boolean | "true" | "false") | undefined;
|
|
1960
|
+
"aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
|
|
1961
|
+
"aria-braillelabel"?: string | undefined | undefined;
|
|
1962
|
+
"aria-brailleroledescription"?: string | undefined | undefined;
|
|
1963
|
+
"aria-busy"?: (boolean | "true" | "false") | undefined;
|
|
1964
|
+
"aria-checked"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
|
|
1965
|
+
"aria-colcount"?: number | undefined | undefined;
|
|
1966
|
+
"aria-colindex"?: number | undefined | undefined;
|
|
1967
|
+
"aria-colindextext"?: string | undefined | undefined;
|
|
1968
|
+
"aria-colspan"?: number | undefined | undefined;
|
|
1969
|
+
"aria-controls"?: string | undefined | undefined;
|
|
1970
|
+
"aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined | undefined;
|
|
1971
|
+
"aria-describedby"?: string | undefined | undefined;
|
|
1972
|
+
"aria-description"?: string | undefined | undefined;
|
|
1973
|
+
"aria-details"?: string | undefined | undefined;
|
|
1974
|
+
"aria-disabled"?: (boolean | "true" | "false") | undefined;
|
|
1975
|
+
"aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined | undefined;
|
|
1976
|
+
"aria-errormessage"?: string | undefined | undefined;
|
|
1977
|
+
"aria-expanded"?: (boolean | "true" | "false") | undefined;
|
|
1978
|
+
"aria-flowto"?: string | undefined | undefined;
|
|
1979
|
+
"aria-grabbed"?: (boolean | "true" | "false") | undefined;
|
|
1980
|
+
"aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined | undefined;
|
|
1981
|
+
"aria-hidden"?: (boolean | "true" | "false") | undefined;
|
|
1982
|
+
"aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined | undefined;
|
|
1983
|
+
"aria-keyshortcuts"?: string | undefined | undefined;
|
|
1984
|
+
"aria-label"?: string | undefined | undefined;
|
|
1985
|
+
"aria-labelledby"?: string | undefined | undefined;
|
|
1986
|
+
"aria-level"?: number | undefined | undefined;
|
|
1987
|
+
"aria-live"?: "off" | "assertive" | "polite" | undefined | undefined;
|
|
1988
|
+
"aria-modal"?: (boolean | "true" | "false") | undefined;
|
|
1989
|
+
"aria-multiline"?: (boolean | "true" | "false") | undefined;
|
|
1990
|
+
"aria-multiselectable"?: (boolean | "true" | "false") | undefined;
|
|
1991
|
+
"aria-orientation"?: "horizontal" | "vertical" | undefined | undefined;
|
|
1992
|
+
"aria-owns"?: string | undefined | undefined;
|
|
1993
|
+
"aria-placeholder"?: string | undefined | undefined;
|
|
1994
|
+
"aria-posinset"?: number | undefined | undefined;
|
|
1995
|
+
"aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
|
|
1996
|
+
"aria-readonly"?: (boolean | "true" | "false") | undefined;
|
|
1997
|
+
"aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined | undefined;
|
|
1998
|
+
"aria-required"?: (boolean | "true" | "false") | undefined;
|
|
1999
|
+
"aria-roledescription"?: string | undefined | undefined;
|
|
2000
|
+
"aria-rowcount"?: number | undefined | undefined;
|
|
2001
|
+
"aria-rowindex"?: number | undefined | undefined;
|
|
2002
|
+
"aria-rowindextext"?: string | undefined | undefined;
|
|
2003
|
+
"aria-rowspan"?: number | undefined | undefined;
|
|
2004
|
+
"aria-selected"?: (boolean | "true" | "false") | undefined;
|
|
2005
|
+
"aria-setsize"?: number | undefined | undefined;
|
|
2006
|
+
"aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined | undefined;
|
|
2007
|
+
"aria-valuemax"?: number | undefined | undefined;
|
|
2008
|
+
"aria-valuemin"?: number | undefined | undefined;
|
|
2009
|
+
"aria-valuenow"?: number | undefined | undefined;
|
|
2010
|
+
"aria-valuetext"?: string | undefined | undefined;
|
|
2011
|
+
dangerouslySetInnerHTML?: {
|
|
2012
|
+
__html: string | TrustedHTML;
|
|
2013
|
+
} | undefined | undefined;
|
|
2014
|
+
onCopy?: react.ClipboardEventHandler<HTMLDivElement> | undefined;
|
|
2015
|
+
onCopyCapture?: react.ClipboardEventHandler<HTMLDivElement> | undefined;
|
|
2016
|
+
onCut?: react.ClipboardEventHandler<HTMLDivElement> | undefined;
|
|
2017
|
+
onCutCapture?: react.ClipboardEventHandler<HTMLDivElement> | undefined;
|
|
2018
|
+
onPaste?: react.ClipboardEventHandler<HTMLDivElement> | undefined;
|
|
2019
|
+
onPasteCapture?: react.ClipboardEventHandler<HTMLDivElement> | undefined;
|
|
2020
|
+
onCompositionEnd?: react.CompositionEventHandler<HTMLDivElement> | undefined;
|
|
2021
|
+
onCompositionEndCapture?: react.CompositionEventHandler<HTMLDivElement> | undefined;
|
|
2022
|
+
onCompositionStart?: react.CompositionEventHandler<HTMLDivElement> | undefined;
|
|
2023
|
+
onCompositionStartCapture?: react.CompositionEventHandler<HTMLDivElement> | undefined;
|
|
2024
|
+
onCompositionUpdate?: react.CompositionEventHandler<HTMLDivElement> | undefined;
|
|
2025
|
+
onCompositionUpdateCapture?: react.CompositionEventHandler<HTMLDivElement> | undefined;
|
|
2026
|
+
onFocus?: react.FocusEventHandler<HTMLDivElement> | undefined;
|
|
2027
|
+
onFocusCapture?: react.FocusEventHandler<HTMLDivElement> | undefined;
|
|
2028
|
+
onBlur?: react.FocusEventHandler<HTMLDivElement> | undefined;
|
|
2029
|
+
onBlurCapture?: react.FocusEventHandler<HTMLDivElement> | undefined;
|
|
2030
|
+
onChange?: react.ChangeEventHandler<HTMLDivElement, Element> | undefined;
|
|
2031
|
+
onChangeCapture?: react.ChangeEventHandler<HTMLDivElement, Element> | undefined;
|
|
2032
|
+
onBeforeInput?: react.InputEventHandler<HTMLDivElement> | undefined;
|
|
2033
|
+
onBeforeInputCapture?: react.InputEventHandler<HTMLDivElement> | undefined;
|
|
2034
|
+
onInput?: react.InputEventHandler<HTMLDivElement> | undefined;
|
|
2035
|
+
onInputCapture?: react.InputEventHandler<HTMLDivElement> | undefined;
|
|
2036
|
+
onReset?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2037
|
+
onResetCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2038
|
+
onSubmit?: react.SubmitEventHandler<HTMLDivElement> | undefined;
|
|
2039
|
+
onSubmitCapture?: react.SubmitEventHandler<HTMLDivElement> | undefined;
|
|
2040
|
+
onInvalid?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2041
|
+
onInvalidCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2042
|
+
onLoad?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2043
|
+
onLoadCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2044
|
+
onError?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2045
|
+
onErrorCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2046
|
+
onKeyDown?: react.KeyboardEventHandler<HTMLDivElement> | undefined;
|
|
2047
|
+
onKeyDownCapture?: react.KeyboardEventHandler<HTMLDivElement> | undefined;
|
|
2048
|
+
onKeyPress?: react.KeyboardEventHandler<HTMLDivElement> | undefined;
|
|
2049
|
+
onKeyPressCapture?: react.KeyboardEventHandler<HTMLDivElement> | undefined;
|
|
2050
|
+
onKeyUp?: react.KeyboardEventHandler<HTMLDivElement> | undefined;
|
|
2051
|
+
onKeyUpCapture?: react.KeyboardEventHandler<HTMLDivElement> | undefined;
|
|
2052
|
+
onAbort?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2053
|
+
onAbortCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2054
|
+
onCanPlay?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2055
|
+
onCanPlayCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2056
|
+
onCanPlayThrough?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2057
|
+
onCanPlayThroughCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2058
|
+
onDurationChange?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2059
|
+
onDurationChangeCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2060
|
+
onEmptied?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2061
|
+
onEmptiedCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2062
|
+
onEncrypted?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2063
|
+
onEncryptedCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2064
|
+
onEnded?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2065
|
+
onEndedCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2066
|
+
onLoadedData?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2067
|
+
onLoadedDataCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2068
|
+
onLoadedMetadata?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2069
|
+
onLoadedMetadataCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2070
|
+
onLoadStart?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2071
|
+
onLoadStartCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2072
|
+
onPause?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2073
|
+
onPauseCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2074
|
+
onPlay?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2075
|
+
onPlayCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2076
|
+
onPlaying?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2077
|
+
onPlayingCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2078
|
+
onProgress?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2079
|
+
onProgressCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2080
|
+
onRateChange?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2081
|
+
onRateChangeCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2082
|
+
onSeeked?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2083
|
+
onSeekedCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2084
|
+
onSeeking?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2085
|
+
onSeekingCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2086
|
+
onStalled?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2087
|
+
onStalledCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2088
|
+
onSuspend?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2089
|
+
onSuspendCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2090
|
+
onTimeUpdate?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2091
|
+
onTimeUpdateCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2092
|
+
onVolumeChange?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2093
|
+
onVolumeChangeCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2094
|
+
onWaiting?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2095
|
+
onWaitingCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2096
|
+
onAuxClick?: react.MouseEventHandler<HTMLDivElement> | undefined;
|
|
2097
|
+
onAuxClickCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
|
|
2098
|
+
onClick?: react.MouseEventHandler<HTMLDivElement> | undefined;
|
|
2099
|
+
onClickCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
|
|
2100
|
+
onContextMenu?: react.MouseEventHandler<HTMLDivElement> | undefined;
|
|
2101
|
+
onContextMenuCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
|
|
2102
|
+
onDoubleClick?: react.MouseEventHandler<HTMLDivElement> | undefined;
|
|
2103
|
+
onDoubleClickCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
|
|
2104
|
+
onDrag?: react.DragEventHandler<HTMLDivElement> | undefined;
|
|
2105
|
+
onDragCapture?: react.DragEventHandler<HTMLDivElement> | undefined;
|
|
2106
|
+
onDragEnd?: react.DragEventHandler<HTMLDivElement> | undefined;
|
|
2107
|
+
onDragEndCapture?: react.DragEventHandler<HTMLDivElement> | undefined;
|
|
2108
|
+
onDragEnter?: react.DragEventHandler<HTMLDivElement> | undefined;
|
|
2109
|
+
onDragEnterCapture?: react.DragEventHandler<HTMLDivElement> | undefined;
|
|
2110
|
+
onDragExit?: react.DragEventHandler<HTMLDivElement> | undefined;
|
|
2111
|
+
onDragExitCapture?: react.DragEventHandler<HTMLDivElement> | undefined;
|
|
2112
|
+
onDragLeave?: react.DragEventHandler<HTMLDivElement> | undefined;
|
|
2113
|
+
onDragLeaveCapture?: react.DragEventHandler<HTMLDivElement> | undefined;
|
|
2114
|
+
onDragOver?: react.DragEventHandler<HTMLDivElement> | undefined;
|
|
2115
|
+
onDragOverCapture?: react.DragEventHandler<HTMLDivElement> | undefined;
|
|
2116
|
+
onDragStart?: react.DragEventHandler<HTMLDivElement> | undefined;
|
|
2117
|
+
onDragStartCapture?: react.DragEventHandler<HTMLDivElement> | undefined;
|
|
2118
|
+
onDrop?: react.DragEventHandler<HTMLDivElement> | undefined;
|
|
2119
|
+
onDropCapture?: react.DragEventHandler<HTMLDivElement> | undefined;
|
|
2120
|
+
onMouseDown?: react.MouseEventHandler<HTMLDivElement> | undefined;
|
|
2121
|
+
onMouseDownCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
|
|
2122
|
+
onMouseEnter?: react.MouseEventHandler<HTMLDivElement> | undefined;
|
|
2123
|
+
onMouseLeave?: react.MouseEventHandler<HTMLDivElement> | undefined;
|
|
2124
|
+
onMouseMove?: react.MouseEventHandler<HTMLDivElement> | undefined;
|
|
2125
|
+
onMouseMoveCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
|
|
2126
|
+
onMouseOut?: react.MouseEventHandler<HTMLDivElement> | undefined;
|
|
2127
|
+
onMouseOutCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
|
|
2128
|
+
onMouseOver?: react.MouseEventHandler<HTMLDivElement> | undefined;
|
|
2129
|
+
onMouseOverCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
|
|
2130
|
+
onMouseUp?: react.MouseEventHandler<HTMLDivElement> | undefined;
|
|
2131
|
+
onMouseUpCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
|
|
2132
|
+
onSelect?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2133
|
+
onSelectCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2134
|
+
onTouchCancel?: react.TouchEventHandler<HTMLDivElement> | undefined;
|
|
2135
|
+
onTouchCancelCapture?: react.TouchEventHandler<HTMLDivElement> | undefined;
|
|
2136
|
+
onTouchEnd?: react.TouchEventHandler<HTMLDivElement> | undefined;
|
|
2137
|
+
onTouchEndCapture?: react.TouchEventHandler<HTMLDivElement> | undefined;
|
|
2138
|
+
onTouchMove?: react.TouchEventHandler<HTMLDivElement> | undefined;
|
|
2139
|
+
onTouchMoveCapture?: react.TouchEventHandler<HTMLDivElement> | undefined;
|
|
2140
|
+
onTouchStart?: react.TouchEventHandler<HTMLDivElement> | undefined;
|
|
2141
|
+
onTouchStartCapture?: react.TouchEventHandler<HTMLDivElement> | undefined;
|
|
2142
|
+
onPointerDown?: react.PointerEventHandler<HTMLDivElement> | undefined;
|
|
2143
|
+
onPointerDownCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
|
|
2144
|
+
onPointerMove?: react.PointerEventHandler<HTMLDivElement> | undefined;
|
|
2145
|
+
onPointerMoveCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
|
|
2146
|
+
onPointerUp?: react.PointerEventHandler<HTMLDivElement> | undefined;
|
|
2147
|
+
onPointerUpCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
|
|
2148
|
+
onPointerCancel?: react.PointerEventHandler<HTMLDivElement> | undefined;
|
|
2149
|
+
onPointerCancelCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
|
|
2150
|
+
onPointerEnter?: react.PointerEventHandler<HTMLDivElement> | undefined;
|
|
2151
|
+
onPointerLeave?: react.PointerEventHandler<HTMLDivElement> | undefined;
|
|
2152
|
+
onPointerOver?: react.PointerEventHandler<HTMLDivElement> | undefined;
|
|
2153
|
+
onPointerOverCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
|
|
2154
|
+
onPointerOut?: react.PointerEventHandler<HTMLDivElement> | undefined;
|
|
2155
|
+
onPointerOutCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
|
|
2156
|
+
onGotPointerCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
|
|
2157
|
+
onGotPointerCaptureCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
|
|
2158
|
+
onLostPointerCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
|
|
2159
|
+
onLostPointerCaptureCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
|
|
2160
|
+
onScroll?: react.UIEventHandler<HTMLDivElement> | undefined;
|
|
2161
|
+
onScrollCapture?: react.UIEventHandler<HTMLDivElement> | undefined;
|
|
2162
|
+
onScrollEnd?: react.UIEventHandler<HTMLDivElement> | undefined;
|
|
2163
|
+
onScrollEndCapture?: react.UIEventHandler<HTMLDivElement> | undefined;
|
|
2164
|
+
onWheel?: react.WheelEventHandler<HTMLDivElement> | undefined;
|
|
2165
|
+
onWheelCapture?: react.WheelEventHandler<HTMLDivElement> | undefined;
|
|
2166
|
+
onAnimationStart?: react.AnimationEventHandler<HTMLDivElement> | undefined;
|
|
2167
|
+
onAnimationStartCapture?: react.AnimationEventHandler<HTMLDivElement> | undefined;
|
|
2168
|
+
onAnimationEnd?: react.AnimationEventHandler<HTMLDivElement> | undefined;
|
|
2169
|
+
onAnimationEndCapture?: react.AnimationEventHandler<HTMLDivElement> | undefined;
|
|
2170
|
+
onAnimationIteration?: react.AnimationEventHandler<HTMLDivElement> | undefined;
|
|
2171
|
+
onAnimationIterationCapture?: react.AnimationEventHandler<HTMLDivElement> | undefined;
|
|
2172
|
+
onToggle?: react.ToggleEventHandler<HTMLDivElement> | undefined;
|
|
2173
|
+
onBeforeToggle?: react.ToggleEventHandler<HTMLDivElement> | undefined;
|
|
2174
|
+
onTransitionCancel?: react.TransitionEventHandler<HTMLDivElement> | undefined;
|
|
2175
|
+
onTransitionCancelCapture?: react.TransitionEventHandler<HTMLDivElement> | undefined;
|
|
2176
|
+
onTransitionEnd?: react.TransitionEventHandler<HTMLDivElement> | undefined;
|
|
2177
|
+
onTransitionEndCapture?: react.TransitionEventHandler<HTMLDivElement> | undefined;
|
|
2178
|
+
onTransitionRun?: react.TransitionEventHandler<HTMLDivElement> | undefined;
|
|
2179
|
+
onTransitionRunCapture?: react.TransitionEventHandler<HTMLDivElement> | undefined;
|
|
2180
|
+
onTransitionStart?: react.TransitionEventHandler<HTMLDivElement> | undefined;
|
|
2181
|
+
onTransitionStartCapture?: react.TransitionEventHandler<HTMLDivElement> | undefined;
|
|
2182
|
+
className: string;
|
|
2183
|
+
'data-variant': StatVariant;
|
|
2184
|
+
'data-size': StatSize;
|
|
2185
|
+
}, HTMLDivElement>;
|
|
2186
|
+
|
|
2187
|
+
type ChipTone = 'neutral' | 'accent' | 'success' | 'warning' | 'danger' | 'info';
|
|
2188
|
+
type ChipSize = 'sm' | 'md';
|
|
2189
|
+
interface ChipProps extends Omit<ComponentPropsWithRef<'span'>, 'onClick' | 'onRemove'> {
|
|
2190
|
+
/** The chip text. Keep it to a word or three. */
|
|
2191
|
+
children: ReactNode;
|
|
2192
|
+
/** A 14px icon before the text. Decorative. */
|
|
2193
|
+
icon?: ReactNode | undefined;
|
|
2194
|
+
/** Colour. `neutral` (default) for filters, a status tone when the chip is the status. */
|
|
2195
|
+
tone?: ChipTone | undefined;
|
|
2196
|
+
/** `md` 32px (default) or `sm` 24px inside table rows and Card headers. */
|
|
2197
|
+
size?: ChipSize | undefined;
|
|
2198
|
+
/** Filled and `aria-pressed`. Use with `onClick` for a toggling filter chip. */
|
|
2199
|
+
selected?: boolean | undefined;
|
|
2200
|
+
/** Makes the chip a `<button>` that toggles; `selected` is reflected as `aria-pressed`. */
|
|
2201
|
+
onClick?: ((event: MouseEvent<HTMLButtonElement>) => void) | undefined;
|
|
2202
|
+
/**
|
|
2203
|
+
* Adds a labelled × that calls this. Backspace or Delete on the focused chip (or on the ×) removes it
|
|
2204
|
+
* too. Focus is yours to manage after removal: move it to the next chip or the filter input.
|
|
2205
|
+
*/
|
|
2206
|
+
onRemove?: (() => void) | undefined;
|
|
2207
|
+
/** Accessible name of the ×. Default "Remove" followed by the chip text when that text is a string. */
|
|
2208
|
+
removeLabel?: string | undefined;
|
|
2209
|
+
disabled?: boolean | undefined;
|
|
2210
|
+
}
|
|
2211
|
+
/**
|
|
2212
|
+
* A small pill: an applied filter, a tag, a selectable option in a row of a few. `onClick` makes it a
|
|
2213
|
+
* toggle button, `onRemove` adds the ×, and the two combine. Plain text otherwise.
|
|
2214
|
+
*/
|
|
2215
|
+
declare function Chip({ children, icon, tone, size, selected, onClick, onRemove, removeLabel, disabled, className, ...rest }: ChipProps): react.JSX.Element;
|
|
2216
|
+
|
|
2217
|
+
interface DisclosureProps extends Omit<ComponentPropsWithRef<'details'>, 'open' | 'onToggle'> {
|
|
2218
|
+
/** Required. The summary line, a verb phrase: "Show full description". */
|
|
2219
|
+
summary: ReactNode;
|
|
2220
|
+
/** Replaces `summary` while open: "Show less". */
|
|
2221
|
+
summaryOpen?: ReactNode | undefined;
|
|
2222
|
+
/** Controlled open state. */
|
|
2223
|
+
open?: boolean | undefined;
|
|
2224
|
+
/** Initial open state when uncontrolled. */
|
|
2225
|
+
defaultOpen?: boolean | undefined;
|
|
2226
|
+
/** Called when the user toggles it. */
|
|
2227
|
+
onOpenChange?: ((open: boolean) => void) | undefined;
|
|
2228
|
+
/**
|
|
2229
|
+
* While closed, shows this many lines of the content fading out, so a long description still reads
|
|
2230
|
+
* as a teaser. Puts the summary line under the preview. Needs `::details-content` (2025 browsers);
|
|
2231
|
+
* older ones show the summary alone.
|
|
2232
|
+
*/
|
|
2233
|
+
previewLines?: number | undefined;
|
|
2234
|
+
/** Puts the summary line above (default) or below the content. Defaults to `end` with `previewLines`. */
|
|
2235
|
+
summaryPosition?: 'start' | 'end' | undefined;
|
|
2236
|
+
children?: ReactNode | undefined;
|
|
2237
|
+
}
|
|
2238
|
+
/**
|
|
2239
|
+
* A native `<details>` collapse with a styled summary. Works without JavaScript, is announced as a
|
|
2240
|
+
* disclosure, and shares `name` with siblings for an exclusive group.
|
|
2241
|
+
*/
|
|
2242
|
+
declare function Disclosure({ summary, summaryOpen, open, defaultOpen, onOpenChange, previewLines, summaryPosition, className, style, children, ref, ...rest }: DisclosureProps): react.JSX.Element;
|
|
2243
|
+
|
|
2244
|
+
type EmptyStateSize = 'sm' | 'md';
|
|
2245
|
+
type EmptyStateElement = 'div' | 'section' | 'li';
|
|
2246
|
+
interface EmptyStateProps extends Omit<ComponentPropsWithRef<'div'>, 'title'> {
|
|
2247
|
+
/** Required. What is empty, as a short statement: "No applications yet". */
|
|
2248
|
+
title: ReactNode;
|
|
2249
|
+
/** One sentence on why, or what to do: "Postings you apply to show up here." */
|
|
2250
|
+
description?: ReactNode | undefined;
|
|
2251
|
+
/** A 24px icon in a muted circle above the title. Decorative. */
|
|
2252
|
+
icon?: ReactNode | undefined;
|
|
2253
|
+
/** The actions, usually one primary Button and at most one secondary. Rendered in an Inline. */
|
|
2254
|
+
children?: ReactNode | undefined;
|
|
2255
|
+
/** `md` (default) for a whole view or panel, `sm` inside a Card or a table body. */
|
|
2256
|
+
size?: EmptyStateSize | undefined;
|
|
2257
|
+
/** Element to render. Default `div`. */
|
|
2258
|
+
as?: EmptyStateElement | undefined;
|
|
2259
|
+
}
|
|
2260
|
+
/**
|
|
2261
|
+
* Centred placeholder for a view with nothing in it: an icon, a title, a sentence and the action that
|
|
2262
|
+
* fills it. Say what is missing and the next step; never apologise.
|
|
2263
|
+
*/
|
|
2264
|
+
declare function EmptyState({ title, description, icon, children, size, as, className, ...rest }: EmptyStateProps): react.DetailedReactHTMLElement<{
|
|
2265
|
+
slot?: string | undefined | undefined;
|
|
2266
|
+
style?: react.CSSProperties | undefined;
|
|
2267
|
+
ref?: react.Ref<HTMLDivElement> | undefined;
|
|
2268
|
+
key?: react.Key | null | undefined;
|
|
2269
|
+
defaultChecked?: boolean | undefined | undefined;
|
|
2270
|
+
defaultValue?: string | number | readonly string[] | undefined;
|
|
2271
|
+
suppressContentEditableWarning?: boolean | undefined | undefined;
|
|
2272
|
+
suppressHydrationWarning?: boolean | undefined | undefined;
|
|
2273
|
+
accessKey?: string | undefined | undefined;
|
|
2274
|
+
autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
|
|
2275
|
+
autoFocus?: boolean | undefined | undefined;
|
|
2276
|
+
contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
|
|
2277
|
+
contextMenu?: string | undefined | undefined;
|
|
2278
|
+
dir?: string | undefined | undefined;
|
|
2279
|
+
draggable?: (boolean | "true" | "false") | undefined;
|
|
2280
|
+
enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
|
|
2281
|
+
hidden?: boolean | undefined | undefined;
|
|
2282
|
+
id?: string | undefined | undefined;
|
|
2283
|
+
lang?: string | undefined | undefined;
|
|
2284
|
+
nonce?: string | undefined | undefined;
|
|
2285
|
+
spellCheck?: (boolean | "true" | "false") | undefined;
|
|
2286
|
+
tabIndex?: number | undefined | undefined;
|
|
2287
|
+
translate?: "yes" | "no" | undefined | undefined;
|
|
2288
|
+
radioGroup?: string | undefined | undefined;
|
|
2289
|
+
role?: react.AriaRole | undefined;
|
|
2290
|
+
about?: string | undefined | undefined;
|
|
2291
|
+
content?: string | undefined | undefined;
|
|
2292
|
+
datatype?: string | undefined | undefined;
|
|
2293
|
+
inlist?: any;
|
|
2294
|
+
prefix?: string | undefined | undefined;
|
|
2295
|
+
property?: string | undefined | undefined;
|
|
2296
|
+
rel?: string | undefined | undefined;
|
|
2297
|
+
resource?: string | undefined | undefined;
|
|
2298
|
+
rev?: string | undefined | undefined;
|
|
2299
|
+
typeof?: string | undefined | undefined;
|
|
2300
|
+
vocab?: string | undefined | undefined;
|
|
2301
|
+
autoCorrect?: string | undefined | undefined;
|
|
2302
|
+
autoSave?: string | undefined | undefined;
|
|
2303
|
+
color?: string | undefined | undefined;
|
|
2304
|
+
itemProp?: string | undefined | undefined;
|
|
2305
|
+
itemScope?: boolean | undefined | undefined;
|
|
2306
|
+
itemType?: string | undefined | undefined;
|
|
2307
|
+
itemID?: string | undefined | undefined;
|
|
2308
|
+
itemRef?: string | undefined | undefined;
|
|
2309
|
+
results?: number | undefined | undefined;
|
|
2310
|
+
security?: string | undefined | undefined;
|
|
2311
|
+
unselectable?: "on" | "off" | undefined | undefined;
|
|
2312
|
+
popover?: "" | "auto" | "manual" | "hint" | undefined | undefined;
|
|
2313
|
+
popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
|
|
2314
|
+
popoverTarget?: string | undefined | undefined;
|
|
2315
|
+
inert?: boolean | undefined | undefined;
|
|
2316
|
+
inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
|
|
2317
|
+
is?: string | undefined | undefined;
|
|
2318
|
+
exportparts?: string | undefined | undefined;
|
|
2319
|
+
part?: string | undefined | undefined;
|
|
2320
|
+
"aria-activedescendant"?: string | undefined | undefined;
|
|
2321
|
+
"aria-atomic"?: (boolean | "true" | "false") | undefined;
|
|
2322
|
+
"aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
|
|
2323
|
+
"aria-braillelabel"?: string | undefined | undefined;
|
|
2324
|
+
"aria-brailleroledescription"?: string | undefined | undefined;
|
|
2325
|
+
"aria-busy"?: (boolean | "true" | "false") | undefined;
|
|
2326
|
+
"aria-checked"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
|
|
2327
|
+
"aria-colcount"?: number | undefined | undefined;
|
|
2328
|
+
"aria-colindex"?: number | undefined | undefined;
|
|
2329
|
+
"aria-colindextext"?: string | undefined | undefined;
|
|
2330
|
+
"aria-colspan"?: number | undefined | undefined;
|
|
2331
|
+
"aria-controls"?: string | undefined | undefined;
|
|
2332
|
+
"aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined | undefined;
|
|
2333
|
+
"aria-describedby"?: string | undefined | undefined;
|
|
2334
|
+
"aria-description"?: string | undefined | undefined;
|
|
2335
|
+
"aria-details"?: string | undefined | undefined;
|
|
2336
|
+
"aria-disabled"?: (boolean | "true" | "false") | undefined;
|
|
2337
|
+
"aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined | undefined;
|
|
2338
|
+
"aria-errormessage"?: string | undefined | undefined;
|
|
2339
|
+
"aria-expanded"?: (boolean | "true" | "false") | undefined;
|
|
2340
|
+
"aria-flowto"?: string | undefined | undefined;
|
|
2341
|
+
"aria-grabbed"?: (boolean | "true" | "false") | undefined;
|
|
2342
|
+
"aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined | undefined;
|
|
2343
|
+
"aria-hidden"?: (boolean | "true" | "false") | undefined;
|
|
2344
|
+
"aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined | undefined;
|
|
2345
|
+
"aria-keyshortcuts"?: string | undefined | undefined;
|
|
2346
|
+
"aria-label"?: string | undefined | undefined;
|
|
2347
|
+
"aria-labelledby"?: string | undefined | undefined;
|
|
2348
|
+
"aria-level"?: number | undefined | undefined;
|
|
2349
|
+
"aria-live"?: "off" | "assertive" | "polite" | undefined | undefined;
|
|
2350
|
+
"aria-modal"?: (boolean | "true" | "false") | undefined;
|
|
2351
|
+
"aria-multiline"?: (boolean | "true" | "false") | undefined;
|
|
2352
|
+
"aria-multiselectable"?: (boolean | "true" | "false") | undefined;
|
|
2353
|
+
"aria-orientation"?: "horizontal" | "vertical" | undefined | undefined;
|
|
2354
|
+
"aria-owns"?: string | undefined | undefined;
|
|
2355
|
+
"aria-placeholder"?: string | undefined | undefined;
|
|
2356
|
+
"aria-posinset"?: number | undefined | undefined;
|
|
2357
|
+
"aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
|
|
2358
|
+
"aria-readonly"?: (boolean | "true" | "false") | undefined;
|
|
2359
|
+
"aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined | undefined;
|
|
2360
|
+
"aria-required"?: (boolean | "true" | "false") | undefined;
|
|
2361
|
+
"aria-roledescription"?: string | undefined | undefined;
|
|
2362
|
+
"aria-rowcount"?: number | undefined | undefined;
|
|
2363
|
+
"aria-rowindex"?: number | undefined | undefined;
|
|
2364
|
+
"aria-rowindextext"?: string | undefined | undefined;
|
|
2365
|
+
"aria-rowspan"?: number | undefined | undefined;
|
|
2366
|
+
"aria-selected"?: (boolean | "true" | "false") | undefined;
|
|
2367
|
+
"aria-setsize"?: number | undefined | undefined;
|
|
2368
|
+
"aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined | undefined;
|
|
2369
|
+
"aria-valuemax"?: number | undefined | undefined;
|
|
2370
|
+
"aria-valuemin"?: number | undefined | undefined;
|
|
2371
|
+
"aria-valuenow"?: number | undefined | undefined;
|
|
2372
|
+
"aria-valuetext"?: string | undefined | undefined;
|
|
2373
|
+
dangerouslySetInnerHTML?: {
|
|
2374
|
+
__html: string | TrustedHTML;
|
|
2375
|
+
} | undefined | undefined;
|
|
2376
|
+
onCopy?: react.ClipboardEventHandler<HTMLDivElement> | undefined;
|
|
2377
|
+
onCopyCapture?: react.ClipboardEventHandler<HTMLDivElement> | undefined;
|
|
2378
|
+
onCut?: react.ClipboardEventHandler<HTMLDivElement> | undefined;
|
|
2379
|
+
onCutCapture?: react.ClipboardEventHandler<HTMLDivElement> | undefined;
|
|
2380
|
+
onPaste?: react.ClipboardEventHandler<HTMLDivElement> | undefined;
|
|
2381
|
+
onPasteCapture?: react.ClipboardEventHandler<HTMLDivElement> | undefined;
|
|
2382
|
+
onCompositionEnd?: react.CompositionEventHandler<HTMLDivElement> | undefined;
|
|
2383
|
+
onCompositionEndCapture?: react.CompositionEventHandler<HTMLDivElement> | undefined;
|
|
2384
|
+
onCompositionStart?: react.CompositionEventHandler<HTMLDivElement> | undefined;
|
|
2385
|
+
onCompositionStartCapture?: react.CompositionEventHandler<HTMLDivElement> | undefined;
|
|
2386
|
+
onCompositionUpdate?: react.CompositionEventHandler<HTMLDivElement> | undefined;
|
|
2387
|
+
onCompositionUpdateCapture?: react.CompositionEventHandler<HTMLDivElement> | undefined;
|
|
2388
|
+
onFocus?: react.FocusEventHandler<HTMLDivElement> | undefined;
|
|
2389
|
+
onFocusCapture?: react.FocusEventHandler<HTMLDivElement> | undefined;
|
|
2390
|
+
onBlur?: react.FocusEventHandler<HTMLDivElement> | undefined;
|
|
2391
|
+
onBlurCapture?: react.FocusEventHandler<HTMLDivElement> | undefined;
|
|
2392
|
+
onChange?: react.ChangeEventHandler<HTMLDivElement, Element> | undefined;
|
|
2393
|
+
onChangeCapture?: react.ChangeEventHandler<HTMLDivElement, Element> | undefined;
|
|
2394
|
+
onBeforeInput?: react.InputEventHandler<HTMLDivElement> | undefined;
|
|
2395
|
+
onBeforeInputCapture?: react.InputEventHandler<HTMLDivElement> | undefined;
|
|
2396
|
+
onInput?: react.InputEventHandler<HTMLDivElement> | undefined;
|
|
2397
|
+
onInputCapture?: react.InputEventHandler<HTMLDivElement> | undefined;
|
|
2398
|
+
onReset?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2399
|
+
onResetCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2400
|
+
onSubmit?: react.SubmitEventHandler<HTMLDivElement> | undefined;
|
|
2401
|
+
onSubmitCapture?: react.SubmitEventHandler<HTMLDivElement> | undefined;
|
|
2402
|
+
onInvalid?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2403
|
+
onInvalidCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2404
|
+
onLoad?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2405
|
+
onLoadCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2406
|
+
onError?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2407
|
+
onErrorCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2408
|
+
onKeyDown?: react.KeyboardEventHandler<HTMLDivElement> | undefined;
|
|
2409
|
+
onKeyDownCapture?: react.KeyboardEventHandler<HTMLDivElement> | undefined;
|
|
2410
|
+
onKeyPress?: react.KeyboardEventHandler<HTMLDivElement> | undefined;
|
|
2411
|
+
onKeyPressCapture?: react.KeyboardEventHandler<HTMLDivElement> | undefined;
|
|
2412
|
+
onKeyUp?: react.KeyboardEventHandler<HTMLDivElement> | undefined;
|
|
2413
|
+
onKeyUpCapture?: react.KeyboardEventHandler<HTMLDivElement> | undefined;
|
|
2414
|
+
onAbort?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2415
|
+
onAbortCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2416
|
+
onCanPlay?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2417
|
+
onCanPlayCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2418
|
+
onCanPlayThrough?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2419
|
+
onCanPlayThroughCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2420
|
+
onDurationChange?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2421
|
+
onDurationChangeCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2422
|
+
onEmptied?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2423
|
+
onEmptiedCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2424
|
+
onEncrypted?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2425
|
+
onEncryptedCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2426
|
+
onEnded?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2427
|
+
onEndedCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2428
|
+
onLoadedData?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2429
|
+
onLoadedDataCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2430
|
+
onLoadedMetadata?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2431
|
+
onLoadedMetadataCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2432
|
+
onLoadStart?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2433
|
+
onLoadStartCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2434
|
+
onPause?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2435
|
+
onPauseCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2436
|
+
onPlay?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2437
|
+
onPlayCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2438
|
+
onPlaying?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2439
|
+
onPlayingCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2440
|
+
onProgress?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2441
|
+
onProgressCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2442
|
+
onRateChange?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2443
|
+
onRateChangeCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2444
|
+
onSeeked?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2445
|
+
onSeekedCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2446
|
+
onSeeking?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2447
|
+
onSeekingCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2448
|
+
onStalled?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2449
|
+
onStalledCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2450
|
+
onSuspend?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2451
|
+
onSuspendCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2452
|
+
onTimeUpdate?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2453
|
+
onTimeUpdateCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2454
|
+
onVolumeChange?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2455
|
+
onVolumeChangeCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2456
|
+
onWaiting?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2457
|
+
onWaitingCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2458
|
+
onAuxClick?: react.MouseEventHandler<HTMLDivElement> | undefined;
|
|
2459
|
+
onAuxClickCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
|
|
2460
|
+
onClick?: react.MouseEventHandler<HTMLDivElement> | undefined;
|
|
2461
|
+
onClickCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
|
|
2462
|
+
onContextMenu?: react.MouseEventHandler<HTMLDivElement> | undefined;
|
|
2463
|
+
onContextMenuCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
|
|
2464
|
+
onDoubleClick?: react.MouseEventHandler<HTMLDivElement> | undefined;
|
|
2465
|
+
onDoubleClickCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
|
|
2466
|
+
onDrag?: react.DragEventHandler<HTMLDivElement> | undefined;
|
|
2467
|
+
onDragCapture?: react.DragEventHandler<HTMLDivElement> | undefined;
|
|
2468
|
+
onDragEnd?: react.DragEventHandler<HTMLDivElement> | undefined;
|
|
2469
|
+
onDragEndCapture?: react.DragEventHandler<HTMLDivElement> | undefined;
|
|
2470
|
+
onDragEnter?: react.DragEventHandler<HTMLDivElement> | undefined;
|
|
2471
|
+
onDragEnterCapture?: react.DragEventHandler<HTMLDivElement> | undefined;
|
|
2472
|
+
onDragExit?: react.DragEventHandler<HTMLDivElement> | undefined;
|
|
2473
|
+
onDragExitCapture?: react.DragEventHandler<HTMLDivElement> | undefined;
|
|
2474
|
+
onDragLeave?: react.DragEventHandler<HTMLDivElement> | undefined;
|
|
2475
|
+
onDragLeaveCapture?: react.DragEventHandler<HTMLDivElement> | undefined;
|
|
2476
|
+
onDragOver?: react.DragEventHandler<HTMLDivElement> | undefined;
|
|
2477
|
+
onDragOverCapture?: react.DragEventHandler<HTMLDivElement> | undefined;
|
|
2478
|
+
onDragStart?: react.DragEventHandler<HTMLDivElement> | undefined;
|
|
2479
|
+
onDragStartCapture?: react.DragEventHandler<HTMLDivElement> | undefined;
|
|
2480
|
+
onDrop?: react.DragEventHandler<HTMLDivElement> | undefined;
|
|
2481
|
+
onDropCapture?: react.DragEventHandler<HTMLDivElement> | undefined;
|
|
2482
|
+
onMouseDown?: react.MouseEventHandler<HTMLDivElement> | undefined;
|
|
2483
|
+
onMouseDownCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
|
|
2484
|
+
onMouseEnter?: react.MouseEventHandler<HTMLDivElement> | undefined;
|
|
2485
|
+
onMouseLeave?: react.MouseEventHandler<HTMLDivElement> | undefined;
|
|
2486
|
+
onMouseMove?: react.MouseEventHandler<HTMLDivElement> | undefined;
|
|
2487
|
+
onMouseMoveCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
|
|
2488
|
+
onMouseOut?: react.MouseEventHandler<HTMLDivElement> | undefined;
|
|
2489
|
+
onMouseOutCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
|
|
2490
|
+
onMouseOver?: react.MouseEventHandler<HTMLDivElement> | undefined;
|
|
2491
|
+
onMouseOverCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
|
|
2492
|
+
onMouseUp?: react.MouseEventHandler<HTMLDivElement> | undefined;
|
|
2493
|
+
onMouseUpCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
|
|
2494
|
+
onSelect?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2495
|
+
onSelectCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
|
|
2496
|
+
onTouchCancel?: react.TouchEventHandler<HTMLDivElement> | undefined;
|
|
2497
|
+
onTouchCancelCapture?: react.TouchEventHandler<HTMLDivElement> | undefined;
|
|
2498
|
+
onTouchEnd?: react.TouchEventHandler<HTMLDivElement> | undefined;
|
|
2499
|
+
onTouchEndCapture?: react.TouchEventHandler<HTMLDivElement> | undefined;
|
|
2500
|
+
onTouchMove?: react.TouchEventHandler<HTMLDivElement> | undefined;
|
|
2501
|
+
onTouchMoveCapture?: react.TouchEventHandler<HTMLDivElement> | undefined;
|
|
2502
|
+
onTouchStart?: react.TouchEventHandler<HTMLDivElement> | undefined;
|
|
2503
|
+
onTouchStartCapture?: react.TouchEventHandler<HTMLDivElement> | undefined;
|
|
2504
|
+
onPointerDown?: react.PointerEventHandler<HTMLDivElement> | undefined;
|
|
2505
|
+
onPointerDownCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
|
|
2506
|
+
onPointerMove?: react.PointerEventHandler<HTMLDivElement> | undefined;
|
|
2507
|
+
onPointerMoveCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
|
|
2508
|
+
onPointerUp?: react.PointerEventHandler<HTMLDivElement> | undefined;
|
|
2509
|
+
onPointerUpCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
|
|
2510
|
+
onPointerCancel?: react.PointerEventHandler<HTMLDivElement> | undefined;
|
|
2511
|
+
onPointerCancelCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
|
|
2512
|
+
onPointerEnter?: react.PointerEventHandler<HTMLDivElement> | undefined;
|
|
2513
|
+
onPointerLeave?: react.PointerEventHandler<HTMLDivElement> | undefined;
|
|
2514
|
+
onPointerOver?: react.PointerEventHandler<HTMLDivElement> | undefined;
|
|
2515
|
+
onPointerOverCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
|
|
2516
|
+
onPointerOut?: react.PointerEventHandler<HTMLDivElement> | undefined;
|
|
2517
|
+
onPointerOutCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
|
|
2518
|
+
onGotPointerCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
|
|
2519
|
+
onGotPointerCaptureCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
|
|
2520
|
+
onLostPointerCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
|
|
2521
|
+
onLostPointerCaptureCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
|
|
2522
|
+
onScroll?: react.UIEventHandler<HTMLDivElement> | undefined;
|
|
2523
|
+
onScrollCapture?: react.UIEventHandler<HTMLDivElement> | undefined;
|
|
2524
|
+
onScrollEnd?: react.UIEventHandler<HTMLDivElement> | undefined;
|
|
2525
|
+
onScrollEndCapture?: react.UIEventHandler<HTMLDivElement> | undefined;
|
|
2526
|
+
onWheel?: react.WheelEventHandler<HTMLDivElement> | undefined;
|
|
2527
|
+
onWheelCapture?: react.WheelEventHandler<HTMLDivElement> | undefined;
|
|
2528
|
+
onAnimationStart?: react.AnimationEventHandler<HTMLDivElement> | undefined;
|
|
2529
|
+
onAnimationStartCapture?: react.AnimationEventHandler<HTMLDivElement> | undefined;
|
|
2530
|
+
onAnimationEnd?: react.AnimationEventHandler<HTMLDivElement> | undefined;
|
|
2531
|
+
onAnimationEndCapture?: react.AnimationEventHandler<HTMLDivElement> | undefined;
|
|
2532
|
+
onAnimationIteration?: react.AnimationEventHandler<HTMLDivElement> | undefined;
|
|
2533
|
+
onAnimationIterationCapture?: react.AnimationEventHandler<HTMLDivElement> | undefined;
|
|
2534
|
+
onToggle?: react.ToggleEventHandler<HTMLDivElement> | undefined;
|
|
2535
|
+
onBeforeToggle?: react.ToggleEventHandler<HTMLDivElement> | undefined;
|
|
2536
|
+
onTransitionCancel?: react.TransitionEventHandler<HTMLDivElement> | undefined;
|
|
2537
|
+
onTransitionCancelCapture?: react.TransitionEventHandler<HTMLDivElement> | undefined;
|
|
2538
|
+
onTransitionEnd?: react.TransitionEventHandler<HTMLDivElement> | undefined;
|
|
2539
|
+
onTransitionEndCapture?: react.TransitionEventHandler<HTMLDivElement> | undefined;
|
|
2540
|
+
onTransitionRun?: react.TransitionEventHandler<HTMLDivElement> | undefined;
|
|
2541
|
+
onTransitionRunCapture?: react.TransitionEventHandler<HTMLDivElement> | undefined;
|
|
2542
|
+
onTransitionStart?: react.TransitionEventHandler<HTMLDivElement> | undefined;
|
|
2543
|
+
onTransitionStartCapture?: react.TransitionEventHandler<HTMLDivElement> | undefined;
|
|
2544
|
+
className: string;
|
|
2545
|
+
'data-size': EmptyStateSize;
|
|
2546
|
+
}, HTMLDivElement>;
|
|
2547
|
+
|
|
2548
|
+
type SkeletonVariant = 'text' | 'rect' | 'circle';
|
|
2549
|
+
interface SkeletonProps extends ComponentPropsWithRef<'span'> {
|
|
2550
|
+
/** `text` (default) is one line of the current font size; `rect` a block; `circle` an avatar. */
|
|
2551
|
+
variant?: SkeletonVariant | undefined;
|
|
2552
|
+
/** Any CSS length. Default: text `100%`, rect `100%`, circle `40px`. */
|
|
2553
|
+
width?: string | number | undefined;
|
|
2554
|
+
/** Any CSS length. Default: text `1em` (one line), rect `80px`, circle = `width`. */
|
|
2555
|
+
height?: string | number | undefined;
|
|
2556
|
+
/** For `text`: how many lines; the last is shorter. Default 1. */
|
|
2557
|
+
lines?: number | undefined;
|
|
2558
|
+
/** Hides the shimmer. Default `false`; reduced motion hides it anyway. */
|
|
2559
|
+
still?: boolean | undefined;
|
|
2560
|
+
}
|
|
2561
|
+
/**
|
|
2562
|
+
* A placeholder shape shown while real content loads. It is hidden from assistive tech: put
|
|
2563
|
+
* `aria-busy="true"` on the region being filled, or a `Spinner` with a label beside it, so the loading
|
|
2564
|
+
* state is announced once instead of per block.
|
|
2565
|
+
*/
|
|
2566
|
+
declare function Skeleton({ variant, width, height, lines, still, className, style, ...rest }: SkeletonProps): react.JSX.Element;
|
|
2567
|
+
|
|
2568
|
+
interface FileInputProps extends FieldProps {
|
|
2569
|
+
/** Accepted types, as for the native attribute: `".pdf,.docx,text/plain"` or a list. Extensions, exact MIME types and `image/*` wildcards. */
|
|
2570
|
+
accept?: string | readonly string[] | undefined;
|
|
2571
|
+
/** How the accepted types read in the error message. Default derived from `accept` ("PDF, DOCX or plain text"). */
|
|
2572
|
+
acceptLabel?: string | undefined;
|
|
2573
|
+
/** Largest file accepted, in bytes or as `"10MB"` (base 1000, like the size shown in the list). */
|
|
2574
|
+
maxFileSize?: number | string | undefined;
|
|
2575
|
+
/** Allows several files. Without it a new file replaces the current one. */
|
|
2576
|
+
multiple?: boolean | undefined;
|
|
2577
|
+
/** With `multiple`, the most files the list holds. */
|
|
2578
|
+
maxFiles?: number | undefined;
|
|
2579
|
+
/** Controlled list of accepted files. Pass `[]` to clear. */
|
|
2580
|
+
files?: readonly File[] | undefined;
|
|
2581
|
+
/** Initial files when uncontrolled. */
|
|
2582
|
+
defaultFiles?: readonly File[] | undefined;
|
|
2583
|
+
/** Called with the accepted files (plain `File` objects) after every add or remove. Rejected files never appear here. */
|
|
2584
|
+
onFilesChange?: ((files: File[]) => void) | undefined;
|
|
2585
|
+
/** Drop zone text before the browse link. Default "Drop a file here or" (or "Drop files here or" with `multiple`). */
|
|
2586
|
+
idleLabel?: string | undefined;
|
|
2587
|
+
/** The browse link's text. Default "browse". */
|
|
2588
|
+
browseLabel?: string | undefined;
|
|
2589
|
+
}
|
|
2590
|
+
/**
|
|
2591
|
+
* A labelled file picker with a drop zone, on FilePond (docs/adr/0004). Files stay in the browser: the
|
|
2592
|
+
* component hands plain `File` objects to `onFilesChange`, and with `name` it also keeps them in a file
|
|
2593
|
+
* input so a `<form>` (or a Server Action) submits them. Type, size and count are checked before a file
|
|
2594
|
+
* joins the list; a rejected file never joins it, and the reason shows in the field's error slot and is
|
|
2595
|
+
* announced. FilePond loads on mount, so the server renders a static drop zone and nothing of FilePond.
|
|
2596
|
+
*/
|
|
2597
|
+
declare function FileInput({ label, hideLabel, description, error, invalid, required, disabled, name, size, className, accept, acceptLabel, maxFileSize, multiple, maxFiles, files, defaultFiles, onFilesChange, idleLabel, browseLabel, }: FileInputProps): react.JSX.Element;
|
|
2598
|
+
|
|
2599
|
+
interface PriorityNavItem {
|
|
2600
|
+
/** Where the link goes. */
|
|
2601
|
+
href: string;
|
|
2602
|
+
/** The visible text. A string (or number) is part of the width cache key; see `PriorityNav`. */
|
|
2603
|
+
label: ReactNode;
|
|
2604
|
+
/** A stable key. Defaults to `href`. */
|
|
2605
|
+
id?: string | undefined;
|
|
2606
|
+
/** The page being shown: `aria-current="page"`, and the link never collapses into "More". */
|
|
2607
|
+
current?: boolean | undefined;
|
|
2608
|
+
}
|
|
2609
|
+
/** What `renderLink` receives: spread it onto your link component. */
|
|
2610
|
+
interface PriorityNavLinkProps {
|
|
2611
|
+
href: string;
|
|
2612
|
+
className: string;
|
|
2613
|
+
'aria-current': 'page' | undefined;
|
|
2614
|
+
onClick: MouseEventHandler<HTMLAnchorElement> | undefined;
|
|
2615
|
+
children: ReactNode;
|
|
2616
|
+
}
|
|
2617
|
+
interface PriorityNavProps extends Omit<ComponentPropsWithRef<'nav'>, 'children'> {
|
|
2618
|
+
/** Names the landmark: "Main". */
|
|
2619
|
+
'aria-label': string;
|
|
2620
|
+
/** The links, in priority order: the first ones stay inline longest. */
|
|
2621
|
+
items: readonly PriorityNavItem[];
|
|
2622
|
+
/** Visible text of the overflow toggle. Default "More". */
|
|
2623
|
+
moreLabel?: string | undefined;
|
|
2624
|
+
/** Appended to the toggle's accessible name only: "More, 3 links". Default `n link(s)`. */
|
|
2625
|
+
moreCountLabel?: ((hidden: number) => string) | undefined;
|
|
2626
|
+
/** Renders each link. Default a plain `<a>`; pass a router link: `(props) => <Link {...props} />`. */
|
|
2627
|
+
renderLink?: ((props: PriorityNavLinkProps, item: PriorityNavItem) => ReactElement) | undefined;
|
|
2628
|
+
/**
|
|
2629
|
+
* Called when links start or stop collapsing into "More" (also `data-overflowing` on the `nav`), so a
|
|
2630
|
+
* header can make room, e.g. an action button going icon-only.
|
|
2631
|
+
*/
|
|
2632
|
+
onOverflowChange?: ((overflowing: boolean) => void) | undefined;
|
|
2633
|
+
/**
|
|
2634
|
+
* Room in px the row must have beyond fitting every link before it stops reporting overflow. Set it to
|
|
2635
|
+
* the space your header gives back on overflow (the button label's width), so the two cannot oscillate.
|
|
2636
|
+
* Default 0.
|
|
2637
|
+
*/
|
|
2638
|
+
overflowHysteresis?: number | undefined;
|
|
2639
|
+
}
|
|
2640
|
+
/**
|
|
2641
|
+
* Priority+ navigation: a row of primary links that keeps the ones that fit inline and collapses the rest
|
|
2642
|
+
* into a "More" disclosure at the end of the row. The current page is never collapsed. Follows the
|
|
2643
|
+
* WAI-ARIA APG disclosure navigation pattern (links in a list, a real button with `aria-expanded`), not
|
|
2644
|
+
* `role="menu"`. Server-renders every link inline, so it works before hydration and without JavaScript;
|
|
2645
|
+
* see docs/adr/0005-priority-nav.md.
|
|
2646
|
+
*/
|
|
2647
|
+
declare function PriorityNav({ items, moreLabel, moreCountLabel, renderLink, onOverflowChange, overflowHysteresis, className, style, ...rest }: PriorityNavProps): react.JSX.Element;
|
|
2648
|
+
|
|
2649
|
+
type PopoverSide = 'top' | 'bottom' | 'left' | 'right';
|
|
2650
|
+
type PopoverAlign = 'start' | 'center' | 'end';
|
|
2651
|
+
interface PopoverRootProps {
|
|
2652
|
+
/** Controlled open state. */
|
|
2653
|
+
open?: boolean | undefined;
|
|
2654
|
+
/** Initial open state when uncontrolled. */
|
|
2655
|
+
defaultOpen?: boolean | undefined;
|
|
2656
|
+
/** Called when the popover opens or closes. */
|
|
2657
|
+
onOpenChange?: ((open: boolean) => void) | undefined;
|
|
2658
|
+
/** Default `false`: the page stays interactive and focus may leave. `true` makes the page inert until it closes. */
|
|
2659
|
+
modal?: boolean | undefined;
|
|
2660
|
+
children?: ReactNode | undefined;
|
|
2661
|
+
}
|
|
2662
|
+
/** Owns the open state. Wrap a `Popover.Trigger` and a `Popover.Content`. */
|
|
2663
|
+
declare function Root({ open, defaultOpen, onOpenChange, modal, children }: PopoverRootProps): react.JSX.Element;
|
|
2664
|
+
interface PopoverTriggerProps extends Omit<Popover$1.Trigger.Props, 'className'> {
|
|
2665
|
+
className?: string | undefined;
|
|
2666
|
+
}
|
|
2667
|
+
/**
|
|
2668
|
+
* Opens the popover. With no `render` it is a secondary Button; pass any Button or IconButton through
|
|
2669
|
+
* `render`: `<Popover.Trigger render={<IconButton label="Sweeps: running" dot="success" />}>`.
|
|
2670
|
+
*/
|
|
2671
|
+
declare function Trigger({ render, className, children, ...rest }: PopoverTriggerProps): react.JSX.Element;
|
|
2672
|
+
interface PopoverContentProps extends Omit<Popover$1.Popup.Props, 'className'> {
|
|
2673
|
+
/** Side of the trigger it opens on; flips when there is no room. Default `bottom`. */
|
|
2674
|
+
side?: PopoverSide | undefined;
|
|
2675
|
+
/** Alignment along that side. Default `center`. */
|
|
2676
|
+
align?: PopoverAlign | undefined;
|
|
2677
|
+
/** Distance from the trigger in px. Default 4, or 8 with `arrow`. */
|
|
2678
|
+
sideOffset?: number | undefined;
|
|
2679
|
+
/** Draws a tip pointing at the trigger. */
|
|
2680
|
+
arrow?: boolean | undefined;
|
|
2681
|
+
className?: string | undefined;
|
|
2682
|
+
}
|
|
2683
|
+
/** Portal, positioner and the panel. Any content goes inside; name it with `Popover.Title`. */
|
|
2684
|
+
declare function Content({ side, align, sideOffset, arrow, className, children, ...rest }: PopoverContentProps): react.JSX.Element;
|
|
2685
|
+
interface PopoverTitleProps extends Omit<Popover$1.Title.Props, 'className'> {
|
|
2686
|
+
className?: string | undefined;
|
|
2687
|
+
}
|
|
2688
|
+
/** Names the popover (`aria-labelledby`). A heading, `h2` by default. */
|
|
2689
|
+
declare function Title({ className, ...rest }: PopoverTitleProps): react.JSX.Element;
|
|
2690
|
+
interface PopoverDescriptionProps extends Omit<Popover$1.Description.Props, 'className'> {
|
|
2691
|
+
className?: string | undefined;
|
|
2692
|
+
}
|
|
2693
|
+
/** Describes the popover (`aria-describedby`). Muted text. */
|
|
2694
|
+
declare function Description({ className, ...rest }: PopoverDescriptionProps): react.JSX.Element;
|
|
2695
|
+
interface PopoverCloseProps extends Omit<Popover$1.Close.Props, 'className'> {
|
|
2696
|
+
className?: string | undefined;
|
|
2697
|
+
}
|
|
2698
|
+
/** With no children or `render`, the × in the corner. Otherwise wraps any Button: `<Popover.Close render={<Button variant="ghost" />}>Done</Popover.Close>`. */
|
|
2699
|
+
declare function Close({ className, children, render, ...rest }: PopoverCloseProps): react.JSX.Element;
|
|
2700
|
+
/** A non-modal panel anchored to a trigger, for a small form, a status summary or a legend. Built on Base UI's Popover. */
|
|
2701
|
+
declare const Popover: {
|
|
2702
|
+
Root: typeof Root;
|
|
2703
|
+
Trigger: typeof Trigger;
|
|
2704
|
+
Content: typeof Content;
|
|
2705
|
+
Title: typeof Title;
|
|
2706
|
+
Description: typeof Description;
|
|
2707
|
+
Close: typeof Close;
|
|
2708
|
+
};
|
|
2709
|
+
|
|
2710
|
+
interface BroomIconProps extends Omit<ComponentPropsWithRef<'svg'>, 'children'> {
|
|
2711
|
+
/** Sweeps back and forth while dust drifts. With `prefers-reduced-motion` it holds still and shows the dust. */
|
|
2712
|
+
sweeping?: boolean | undefined;
|
|
2713
|
+
/** The Icon sizes (`lg` 20, the nav size, is the default), or `display` (72px, stroke 1.75px) for empty states and showcases. Inside an IconButton it fills the icon slot one step up, since it is drawn on a 24px grid. */
|
|
2714
|
+
size?: IconSize | 'display' | undefined;
|
|
2715
|
+
/** Gives the icon an accessible name (`role="img"`). Without it the icon is decorative and hidden from assistive tech. */
|
|
2716
|
+
title?: string | undefined;
|
|
2717
|
+
}
|
|
2718
|
+
/**
|
|
2719
|
+
* An animated broom on a 24×24 grid, for "a sweep is running". Inline SVG, because CSS cannot animate
|
|
2720
|
+
* inside a `<use>` clone. Strokes keep a fixed screen width at every size (`vector-effect: non-scaling-stroke`).
|
|
2721
|
+
* Decorative by default: say what is happening in the surrounding control's label ("Sweeps: running").
|
|
2722
|
+
*/
|
|
2723
|
+
declare function BroomIcon({ sweeping, size, title, className, ...rest }: BroomIconProps): react.JSX.Element;
|
|
2724
|
+
|
|
1614
2725
|
declare const version = "0.1.1";
|
|
1615
2726
|
|
|
1616
|
-
export { ArchiveIcon, ArrowLeftIcon, ArrowRightIcon, Badge, Banner, BellIcon, BriefcaseIcon, Button, CalendarIcon, Card, CheckIcon, Checkbox, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CircleCheckIcon, CircleXIcon, ClockIcon, CopyIcon, Dialog, DocumentIcon, DownloadIcon, EditIcon, ExternalLinkIcon, EyeIcon, FilterIcon, FlagIcon, Heading, Icon, IconButton, InboxIcon, InfoIcon, Inline, Input, Kbd, LinkIcon, MailIcon, MapPinIcon, Menu, MenuIcon, MinusIcon, MoonIcon, MoreHorizontalIcon, MoreVerticalIcon, PauseIcon, PlayIcon, PlusIcon, Progress, RefreshIcon, SearchIcon, Select, SettingsIcon, Spinner, Stack, StarIcon, SunIcon, Switch, Tabs, Text, Textarea, ThumbsDownIcon, ThumbsUpIcon, Toolbar, Tooltip, TrashIcon, UndoIcon, UserIcon, WarningIcon, XIcon, iconNames, version };
|
|
1617
|
-
export type { BadgeProps, BadgeSize, BadgeTone, BadgeVariant, BannerProps, BannerTone, ButtonProps, ButtonSize, ButtonVariant, CardElement, CardPadding, CardProps, CardVariant, CheckboxProps, ControlSize, DialogActionsProps, DialogBodyProps, DialogCloseProps, DialogContentProps, DialogDescriptionProps, DialogRootProps, DialogSize, DialogTitleProps, FieldProps, HeadingElement, HeadingLevel, HeadingProps, HeadingSize, IconButtonProps, IconGlyphProps, IconName, IconProps, IconSize, InlineAlign, InlineElement, InlineJustify, InlineProps, InputProps, KbdGroupProps, KbdProps, MenuAlign, MenuCheckboxItemProps, MenuContentProps, MenuGroupProps, MenuItemProps, MenuItemTone, MenuLinkItemProps, MenuRadioGroupProps, MenuRadioItemProps, MenuRootProps, MenuSeparatorProps, MenuSide, MenuTriggerProps, ProgressProps, ProgressSize, ProgressTone, ProgressVariant, SelectGroup, SelectOption, SelectProps, SpacingSize, SpinnerProps, StackAlign, StackElement, StackJustify, StackProps, SwitchProps, TabsListProps, TabsPanelProps, TabsRootProps, TabsTabProps, TextAlign, TextElement, TextProps, TextSize, TextTone, TextWeight, TextareaProps, ToolbarButtonProps, ToolbarGroupProps, ToolbarRootProps, ToolbarSeparatorProps, ToolbarSpacerProps, TooltipAlign, TooltipProps, TooltipSide };
|
|
2727
|
+
export { ArchiveIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, Badge, Banner, BellIcon, BriefcaseIcon, BroomIcon, Button, CalendarIcon, Card, CheckIcon, Checkbox, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, Chip, CircleCheckIcon, CircleXIcon, ClockIcon, CopyIcon, Dialog, Disclosure, DocumentIcon, DownloadIcon, EditIcon, EmptyState, ExternalLinkIcon, EyeIcon, FileInput, FilterIcon, FlagIcon, Heading, Icon, IconButton, InboxIcon, InfoIcon, Inline, Input, Kbd, LinkIcon, MailIcon, MapPinIcon, Menu, MenuIcon, MinusIcon, MoonIcon, MoreHorizontalIcon, MoreVerticalIcon, PauseIcon, PlayIcon, PlusIcon, Popover, PriorityNav, Progress, RefreshIcon, SearchIcon, Select, SelectionBar, SettingsIcon, Skeleton, Spinner, Stack, StarIcon, Stat, SunIcon, Switch, Table, Tabs, Text, Textarea, ThumbsDownIcon, ThumbsUpIcon, Toast, Toolbar, Tooltip, TrashIcon, UndoIcon, UserIcon, WarningIcon, XIcon, iconNames, useRowSelection, useToast, version };
|
|
2728
|
+
export type { BadgeProps, BadgeSize, BadgeTone, BadgeVariant, BannerProps, BannerTone, BroomIconProps, ButtonProps, ButtonSize, ButtonVariant, CardElement, CardPadding, CardProps, CardVariant, CheckboxProps, ChipProps, ChipSize, ChipTone, ControlSize, DialogActionsProps, DialogBodyProps, DialogCloseProps, DialogContentProps, DialogDescriptionProps, DialogRootProps, DialogSize, DialogTitleProps, DialogVariant, DisclosureProps, EmptyStateElement, EmptyStateProps, EmptyStateSize, FieldProps, FileInputProps, HeadingElement, HeadingLevel, HeadingProps, HeadingSize, IconButtonDotTone, IconButtonProps, IconGlyphProps, IconName, IconProps, IconSize, InlineAlign, InlineElement, InlineJustify, InlineProps, InputProps, KbdGroupProps, KbdProps, MenuAlign, MenuCheckboxItemProps, MenuContentProps, MenuGroupProps, MenuItemProps, MenuItemTone, MenuLinkItemProps, MenuRadioGroupProps, MenuRadioItemProps, MenuRootProps, MenuSeparatorProps, MenuSide, MenuTriggerProps, PopoverAlign, PopoverCloseProps, PopoverContentProps, PopoverDescriptionProps, PopoverRootProps, PopoverSide, PopoverTitleProps, PopoverTriggerProps, PriorityNavItem, PriorityNavLinkProps, PriorityNavProps, ProgressProps, ProgressSize, ProgressTone, ProgressVariant, RowSelection, RowSelectionHeaderState, SelectGroup, SelectOption, SelectProps, SelectionBarProps, SkeletonProps, SkeletonVariant, SpacingSize, SpinnerProps, StackAlign, StackElement, StackJustify, StackProps, StatDeltaTone, StatElement, StatProps, StatSize, StatTrend, StatVariant, SwitchProps, TableAlign, TableBodyProps, TableCaptionProps, TableCellProps, TableDensity, TableFootProps, TableHeadProps, TableHeaderProps, TableRootProps, TableRowProps, TableSelectionCellProps, TableSelectionHeaderProps, TableSortDirection, TabsListProps, TabsListVariant, TabsPanelProps, TabsRootProps, TabsTabProps, TextAlign, TextElement, TextProps, TextSize, TextTone, TextWeight, TextareaProps, TextareaVariant, ToastApi, ToastOptions, ToastProviderProps, ToastTone, ToolbarButtonProps, ToolbarGroupProps, ToolbarLinkProps, ToolbarRootProps, ToolbarSeparatorProps, ToolbarSpacerProps, TooltipAlign, TooltipProps, TooltipSide };
|