@salemcobalt/ui 0.2.0-rc.3 → 0.2.0-rc.31

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as react from 'react';
2
- import { ComponentPropsWithRef, ReactNode, ReactElement, CSSProperties } 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"`. Not shown on devices with no fine pointer (touch only). */
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';
@@ -44,19 +49,19 @@ interface BadgeProps extends ComponentPropsWithRef<'span'> {
44
49
  /** One or two words of status beside a thing. Text only; never clickable. */
45
50
  declare function Badge({ tone, variant, size, dot, className, children, ...rest }: BadgeProps): react.JSX.Element;
46
51
 
47
- type CardVariant = 'outlined' | 'elevated' | 'filled';
52
+ type CardVariant = 'outlined' | 'elevated' | 'filled' | 'plain';
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
- /** `outlined` hairline (default), `elevated` floats, `filled` is an inset region. */
56
+ /** `outlined` hairline (default), `elevated` floats, `filled` is an inset region, `plain` has no surface: a quiet list row that washes on hover and takes the accent wash and border when selected. */
52
57
  variant?: CardVariant | undefined;
53
58
  /** `none`, `sm` 12px, `md` 16px (default), `lg` 24px. */
54
59
  padding?: CardPadding | undefined;
55
60
  /** Hover lifts the card and the whole card is the target. Render it as `a` or `button` so it is a real control. */
56
61
  interactive?: boolean | undefined;
57
- /** Accent border with a 1px inset, for the active row or chosen option. */
62
+ /** Accent border with a 1px inset, for the active row or chosen option; on `plain`, the accent wash with a 1px accent border. Also recolours a Score inside. Visual only: pair it with `aria-pressed`, `aria-selected` or `aria-current`. */
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,9 @@ declare const Kbd: typeof KbdBase & {
694
699
  };
695
700
 
696
701
  type DialogSize = 'sm' | 'md' | 'lg';
702
+ type DialogVariant = 'dialog' | 'sheet' | 'fullscreen';
703
+ /** How a person asked to close: Esc, a press on the backdrop, or a `Dialog.Close`. */
704
+ type DialogCloseRequestReason = 'escape-key' | 'outside-press' | 'close-press';
697
705
  interface DialogRootProps {
698
706
  /** Controlled open state. */
699
707
  open?: boolean | undefined;
@@ -703,30 +711,62 @@ interface DialogRootProps {
703
711
  onOpenChange?: ((open: boolean) => void) | undefined;
704
712
  /** When `false`, Esc and backdrop clicks no longer close the dialog. Default `true`. */
705
713
  dismissible?: boolean | undefined;
714
+ /**
715
+ * When set, the dialog no longer closes itself: Esc, a backdrop press and every `Dialog.Close` call
716
+ * this with the reason instead, and the app closes it by setting `open` to `false` (for example after
717
+ * a "Leave for now?" confirmation). Use with a controlled `open`. `dismissible={false}` still swallows
718
+ * Esc and backdrop presses first.
719
+ */
720
+ onRequestClose?: ((reason: DialogCloseRequestReason) => void) | undefined;
706
721
  children?: ReactNode | undefined;
707
722
  }
708
723
  /** Owns the open state. Wrap a `Dialog.Trigger` and a `Dialog.Content`. */
709
- declare function Root$4({ dismissible, onOpenChange, open, defaultOpen, children }: DialogRootProps): react.JSX.Element;
724
+ declare function Root$6({ dismissible, onOpenChange, onRequestClose, open, defaultOpen, children, }: DialogRootProps): react.JSX.Element;
710
725
  interface DialogContentProps extends Omit<Dialog$1.Popup.Props, 'className'> {
711
- /** `sm` 400px for yes/no, `md` 560px (default) for a short form, `lg` 720px rarely. */
726
+ /**
727
+ * Maximum width: `sm` 400px for yes/no, `md` 560px (default) for a short form, `lg` 720px rarely.
728
+ * Every size clamps to the viewport minus a 16px gutter, so a 390px phone gets a 358px dialog.
729
+ */
712
730
  size?: DialogSize | undefined;
731
+ /**
732
+ * `dialog` (default) centres the popup. `sheet` is the same on wide viewports but below 640px it
733
+ * becomes a bottom sheet: full width, rounded top, title and actions pinned while `Dialog.Body`
734
+ * scrolls, padding that clears the home indicator. Use it for forms and pickers opened from a list.
735
+ * `fullscreen` covers the viewport (inset by 16px with a rounded edge from 900px), slides in from the
736
+ * inline end, keeps clear of the safe areas, and lets `Dialog.Body` scroll between a pinned title and
737
+ * actions; `size` is ignored. It is the surface of `FullScreenFlow`. Pair it with `onRequestClose` on
738
+ * the Root when leaving needs a confirmation.
739
+ */
740
+ variant?: DialogVariant | undefined;
741
+ /**
742
+ * `sheet` only. Below 640px a downward drag on the handle or the header (the top 64px, outside controls
743
+ * and `Dialog.Body`) moves the sheet; letting go past 30% of its height, or flicking down, closes it the
744
+ * way a press on the handle does (the handle is a `Dialog.Close` named "Dismiss"). Set `false` where an
745
+ * accidental close loses work; the handle then stays as decoration only. Off whenever the Root is not
746
+ * `dismissible`. Default `true`.
747
+ */
748
+ dismissOnSwipe?: boolean | undefined;
713
749
  className?: string | undefined;
714
750
  }
715
- /** Portal, backdrop and the popup. Focus moves inside on open and returns to the trigger on close. */
716
- declare function Content$1({ size, className, children, ...rest }: DialogContentProps): react.JSX.Element;
751
+ /**
752
+ * Portal, backdrop and the popup. Focus moves inside on open and returns to the trigger on close. A dialog opened
753
+ * from inside another has its own backdrop too, over the first dialog.
754
+ * Menus, selects and tooltips opened from inside render above it (`--sc-z-dropdown` > `--sc-z-dialog`).
755
+ */
756
+ declare function Content$2({ size, variant, dismissOnSwipe, className, children, ...rest }: DialogContentProps): react.JSX.Element;
717
757
  interface DialogTitleProps extends Omit<Dialog$1.Title.Props, 'className'> {
718
758
  className?: string | undefined;
719
759
  }
720
760
  /** Required. Labels the dialog; a question or a statement. Renders an `<h2>`. */
721
- declare function Title({ className, ...rest }: DialogTitleProps): react.JSX.Element;
761
+ declare function Title$1({ className, ...rest }: DialogTitleProps): react.JSX.Element;
722
762
  interface DialogDescriptionProps extends Omit<Dialog$1.Description.Props, 'className'> {
723
763
  className?: string | undefined;
724
764
  }
725
765
  /** Optional, muted. Says what will happen. */
726
- declare function Description({ className, ...rest }: DialogDescriptionProps): react.JSX.Element;
766
+ declare function Description$1({ className, ...rest }: DialogDescriptionProps): react.JSX.Element;
727
767
  type DialogBodyProps = ComponentPropsWithRef<'div'>;
728
- /** Free content between the description and the actions. */
729
- declare function Body$1({ className, ...rest }: DialogBodyProps): react.JSX.Element;
768
+ /** Free content between the description and the actions. In a `sheet` it is the part that scrolls. */
769
+ declare function Body$2({ className, ...rest }: DialogBodyProps): react.JSX.Element;
730
770
  type DialogActionsProps = Omit<InlineProps, 'justify'>;
731
771
  /** Right-aligned row of Buttons. Put the confirming action last. */
732
772
  declare function Actions({ className, ...rest }: DialogActionsProps): react.JSX.Element;
@@ -734,17 +774,17 @@ interface DialogCloseProps extends Omit<Dialog$1.Close.Props, 'className'> {
734
774
  className?: string | undefined;
735
775
  }
736
776
  /** 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;
777
+ declare function Close$1({ className, children, render, ...rest }: DialogCloseProps): react.JSX.Element;
738
778
  /** A modal that interrupts for a decision or a short form. Built on Base UI's Dialog. */
739
779
  declare const Dialog: {
740
- Root: typeof Root$4;
780
+ Root: typeof Root$6;
741
781
  Trigger: Dialog$1.Trigger;
742
- Content: typeof Content$1;
743
- Title: typeof Title;
744
- Description: typeof Description;
745
- Body: typeof Body$1;
782
+ Content: typeof Content$2;
783
+ Title: typeof Title$1;
784
+ Description: typeof Description$1;
785
+ Body: typeof Body$2;
746
786
  Actions: typeof Actions;
747
- Close: typeof Close;
787
+ Close: typeof Close$1;
748
788
  };
749
789
 
750
790
  type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'em';
@@ -808,6 +848,8 @@ declare function EditIcon(props: IconGlyphProps): react.JSX.Element;
808
848
  declare function ExternalLinkIcon(props: IconGlyphProps): react.JSX.Element;
809
849
  /** `eye` */
810
850
  declare function EyeIcon(props: IconGlyphProps): react.JSX.Element;
851
+ /** `eye-off` */
852
+ declare function EyeOffIcon(props: IconGlyphProps): react.JSX.Element;
811
853
  /** `filter` */
812
854
  declare function FilterIcon(props: IconGlyphProps): react.JSX.Element;
813
855
  /** `flag` */
@@ -864,7 +906,7 @@ declare function WarningIcon(props: IconGlyphProps): react.JSX.Element;
864
906
  declare function XIcon(props: IconGlyphProps): react.JSX.Element;
865
907
 
866
908
  /** Every icon shipped by this package, as `<Name>Icon` components. */
867
- 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"];
909
+ 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", "eye-off", "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"];
868
910
  type IconName = (typeof iconNames)[number];
869
911
 
870
912
  type TooltipSide = 'top' | 'bottom' | 'left' | 'right';
@@ -901,7 +943,8 @@ declare const Tooltip: typeof TooltipBase & {
901
943
  Provider: react.FC<_base_ui_react.TooltipProviderProps>;
902
944
  };
903
945
 
904
- interface IconButtonProps extends Omit<ComponentPropsWithRef<'button'>, 'children' | 'aria-label'> {
946
+ type IconButtonDotTone = 'neutral' | 'accent' | 'success' | 'warning' | 'danger' | 'info';
947
+ interface IconButtonProps extends Omit<useRender.ComponentProps<'button'>, 'children' | 'aria-label'> {
905
948
  /** Required. The accessible name, and the tooltip text when `tooltip` is `true`. */
906
949
  label: string;
907
950
  /** 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`. */
@@ -918,9 +961,15 @@ interface IconButtonProps extends Omit<ComponentPropsWithRef<'button'>, 'childre
918
961
  round?: boolean | undefined;
919
962
  /** Shows a spinner, sets `aria-busy` and ignores clicks. */
920
963
  loading?: boolean | undefined;
964
+ /** 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"). */
965
+ dot?: IconButtonDotTone | undefined;
921
966
  }
922
- /** A square Button for one icon. Always named by `label`; use `tooltip` to show that name on hover. */
923
- declare function IconButton({ label, children, variant, size, tooltip, tooltipSide, round, loading, type, className, onClick, ...rest }: IconButtonProps): react.JSX.Element;
967
+ /**
968
+ * A square Button for one icon. Always named by `label`; use `tooltip` to show that name on hover.
969
+ * Renders a `<button>` unless `render` gives another element: `render={<a href="/settings" />}` or a
970
+ * Next.js `<Link href="/settings" />` makes it a link with the same look and name.
971
+ */
972
+ declare function IconButton({ label, children, variant, size, tooltip, tooltipSide, round, loading, dot, type, className, onClick, render, ref, ...rest }: IconButtonProps): react.JSX.Element;
924
973
 
925
974
  type MenuSide = 'top' | 'bottom' | 'left' | 'right';
926
975
  type MenuAlign = 'start' | 'center' | 'end';
@@ -939,7 +988,7 @@ interface MenuRootProps {
939
988
  children?: ReactNode | undefined;
940
989
  }
941
990
  /** Owns the open state. Wrap a `Menu.Trigger` and a `Menu.Content`. */
942
- declare function Root$3({ open, defaultOpen, onOpenChange, disabled, modal, children }: MenuRootProps): react.JSX.Element;
991
+ declare function Root$5({ open, defaultOpen, onOpenChange, disabled, modal, children }: MenuRootProps): react.JSX.Element;
943
992
  interface MenuTriggerProps extends Omit<Menu$1.Trigger.Props, 'className'> {
944
993
  className?: string | undefined;
945
994
  }
@@ -947,7 +996,7 @@ interface MenuTriggerProps extends Omit<Menu$1.Trigger.Props, 'className'> {
947
996
  * Opens the menu. With no `render` it is a secondary Button with a chevron; pass any Button or
948
997
  * IconButton through `render`: `<Menu.Trigger render={<IconButton label="More" />}><MoreHorizontalIcon /></Menu.Trigger>`.
949
998
  */
950
- declare function Trigger({ render, className, children, ...rest }: MenuTriggerProps): react.JSX.Element;
999
+ declare function Trigger$1({ render, className, children, ...rest }: MenuTriggerProps): react.JSX.Element;
951
1000
  interface MenuContentProps extends Omit<Menu$1.Popup.Props, 'className'> {
952
1001
  /** Side of the trigger the menu opens on; flips when there is no room. Default `bottom`. */
953
1002
  side?: MenuSide | undefined;
@@ -958,10 +1007,15 @@ interface MenuContentProps extends Omit<Menu$1.Popup.Props, 'className'> {
958
1007
  className?: string | undefined;
959
1008
  }
960
1009
  /** Portal, positioner and the popup. Items go inside. */
961
- declare function Content({ side, align, sideOffset, className, children, ...rest }: MenuContentProps): react.JSX.Element;
1010
+ declare function Content$1({ side, align, sideOffset, className, children, ...rest }: MenuContentProps): react.JSX.Element;
962
1011
  interface ItemSlots {
963
- /** A 16px icon before the label. */
1012
+ /** A 16px icon before the label. Decorative: hidden from assistive tech. */
964
1013
  icon?: ReactNode | undefined;
1014
+ /**
1015
+ * A muted second line under the label that says what the item does. It is the item's accessible
1016
+ * description (`aria-describedby`), not part of its name.
1017
+ */
1018
+ description?: ReactNode | undefined;
965
1019
  /** Muted text at the end: a shortcut (`<Kbd>`) or a count. */
966
1020
  trailing?: ReactNode | undefined;
967
1021
  /** `danger` for destructive actions; put them last, after a separator. */
@@ -971,12 +1025,15 @@ interface MenuItemProps extends Omit<Menu$1.Item.Props, 'className'>, ItemSlots
971
1025
  className?: string | undefined;
972
1026
  }
973
1027
  /** One action. Closes the menu when activated. */
974
- declare function Item({ icon, trailing, tone, className, children, ...rest }: MenuItemProps): react.JSX.Element;
1028
+ declare function Item({ icon, description, trailing, tone, className, children, 'aria-labelledby': labelledBy, 'aria-describedby': describedBy, ...rest }: MenuItemProps): react.JSX.Element;
975
1029
  interface MenuLinkItemProps extends Omit<Menu$1.LinkItem.Props, 'className'>, ItemSlots {
976
1030
  className?: string | undefined;
977
1031
  }
978
- /** An item that navigates: renders an `<a href>`. */
979
- declare function LinkItem({ icon, trailing, tone, className, children, ...rest }: MenuLinkItemProps): react.JSX.Element;
1032
+ /**
1033
+ * An item that navigates: renders an `<a href>`. Closes the menu when chosen, like `Menu.Item`: with client-side
1034
+ * routing the page stays mounted, so an open menu would sit over the new page. Pass `closeOnClick={false}` to keep it.
1035
+ */
1036
+ declare function LinkItem({ icon, description, trailing, tone, className, closeOnClick, children, 'aria-labelledby': labelledBy, 'aria-describedby': describedBy, ...rest }: MenuLinkItemProps): react.JSX.Element;
980
1037
  interface MenuCheckboxItemProps extends Omit<Menu$1.CheckboxItem.Props, 'className' | 'onCheckedChange'> {
981
1038
  /** Called with the next checked state. */
982
1039
  onCheckedChange?: ((checked: boolean) => void) | undefined;
@@ -1021,9 +1078,9 @@ interface MenuSeparatorProps extends Omit<Menu$1.Separator.Props, 'className'> {
1021
1078
  declare function Separator$1({ className, ...rest }: MenuSeparatorProps): react.JSX.Element;
1022
1079
  /** A dropdown of actions on a trigger, with full keyboard support. Built on Base UI's Menu. */
1023
1080
  declare const Menu: {
1024
- Root: typeof Root$3;
1025
- Trigger: typeof Trigger;
1026
- Content: typeof Content;
1081
+ Root: typeof Root$5;
1082
+ Trigger: typeof Trigger$1;
1083
+ Content: typeof Content$1;
1027
1084
  Item: typeof Item;
1028
1085
  LinkItem: typeof LinkItem;
1029
1086
  CheckboxItem: typeof CheckboxItem;
@@ -1065,19 +1122,30 @@ interface InputProps extends Omit<ComponentPropsWithRef<'input'>, 'size' | 'name
1065
1122
  /** Called with the string value on every change, beside the native `onChange`. */
1066
1123
  onValueChange?: ((value: string) => void) | undefined;
1067
1124
  }
1068
- /** A labelled single-line text field. Renders a native `<input>` inside Base UI's Field. */
1125
+ /**
1126
+ * A labelled single-line text field. Renders a native `<input>` inside Base UI's Field, so every native
1127
+ * attribute passes through: `type="date" | "time" | "number" | "url" | …` keep the same height and
1128
+ * `iconStart` slot; `list="id"` with a `<datalist>` beside it gives native suggestions. Date and time
1129
+ * fields show the browser's picker at the end edge, so leave `iconEnd` off those.
1130
+ */
1069
1131
  declare function Input({ label, hideLabel, description, error, invalid, required, disabled, name, size, className, iconStart, iconEnd, onValueChange, ...rest }: InputProps): react.JSX.Element;
1070
1132
 
1133
+ type TextareaVariant = 'default' | 'code';
1071
1134
  interface TextareaProps extends Omit<ComponentPropsWithRef<'textarea'>, 'name' | 'disabled' | 'required' | 'className'>, Omit<FieldProps, 'size'> {
1072
1135
  /** Visible lines. Default 3. */
1073
1136
  rows?: number | undefined;
1074
1137
  /** `vertical` (default) lets the user drag it taller; `none` fixes the height. */
1075
1138
  resize?: 'vertical' | 'none' | undefined;
1139
+ /**
1140
+ * `code` for Markdown, JSON and other source: monospace, `tab-size: 2`, spellcheck, autocorrect and
1141
+ * autocapitalize off. Add the native `wrap="off"` to keep long lines on one line and scroll sideways.
1142
+ */
1143
+ variant?: TextareaVariant | undefined;
1076
1144
  /** Called with the string value on every change, beside the native `onChange`. */
1077
1145
  onValueChange?: ((value: string) => void) | undefined;
1078
1146
  }
1079
1147
  /** A labelled multi-line text field. Renders a native `<textarea>` inside Base UI's Field. */
1080
- declare function Textarea({ label, hideLabel, description, error, invalid, required, disabled, name, className, rows, resize, onValueChange, ...rest }: TextareaProps): react.JSX.Element;
1148
+ declare function Textarea({ label, hideLabel, description, error, invalid, required, disabled, name, className, rows, resize, variant, onValueChange, spellCheck, autoCorrect, autoCapitalize, ...rest }: TextareaProps): react.JSX.Element;
1081
1149
 
1082
1150
  interface SelectOption<Value extends string = string> {
1083
1151
  value: Value;
@@ -1092,14 +1160,21 @@ interface SelectGroup<Value extends string = string> {
1092
1160
  interface SelectProps<Value extends string = string> extends FieldProps {
1093
1161
  /** Flat options, or groups of options with a heading. */
1094
1162
  options: Array<SelectOption<Value> | SelectGroup<Value>>;
1095
- /** Controlled value; `null` for none. */
1163
+ /** Controlled value; `null` for none, which shows `placeholder`. No sentinel option needed. */
1096
1164
  value?: Value | null | undefined;
1097
- /** Initial value when uncontrolled. */
1165
+ /** Initial value when uncontrolled; `null` (default) for none. */
1098
1166
  defaultValue?: Value | null | undefined;
1099
- /** Called with the chosen value. */
1167
+ /** Called with the chosen value, or `null` when the field is cleared. */
1100
1168
  onValueChange?: ((value: Value | null) => void) | undefined;
1101
1169
  /** Shown in the trigger while nothing is chosen. */
1102
1170
  placeholder?: ReactNode | undefined;
1171
+ /**
1172
+ * Shows an × beside the chevron while a value is chosen; pressing it, or Backspace/Delete on the
1173
+ * focused trigger, sets the value to `null` and calls `onValueChange(null)`.
1174
+ */
1175
+ clearable?: boolean | undefined;
1176
+ /** Accessible name of the clear button. Default "Clear". */
1177
+ clearLabel?: string | undefined;
1103
1178
  /** Prevents choosing a different option. */
1104
1179
  readOnly?: boolean | undefined;
1105
1180
  /** Stretches the trigger to the container. */
@@ -1110,7 +1185,7 @@ interface SelectProps<Value extends string = string> extends FieldProps {
1110
1185
  * A labelled single-choice dropdown. Built on Base UI's Select so the list is styled and keyboard
1111
1186
  * complete; submits like a native select through `name`.
1112
1187
  */
1113
- 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;
1188
+ 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;
1114
1189
 
1115
1190
  interface CheckboxProps extends Omit<Checkbox$1.Root.Props, 'className' | 'onCheckedChange' | 'render' | 'children'> {
1116
1191
  /** Required. The visible label; clicking it toggles the box. */
@@ -1148,16 +1223,19 @@ interface TabsRootProps extends Omit<Tabs$1.Root.Props, 'className' | 'value' |
1148
1223
  className?: string | undefined;
1149
1224
  }
1150
1225
  /** Owns the active tab. Wrap a `Tabs.List` and one `Tabs.Panel` per tab. */
1151
- declare function Root$2({ className, onValueChange, ...rest }: TabsRootProps): react.JSX.Element;
1226
+ declare function Root$4({ className, onValueChange, ...rest }: TabsRootProps): react.JSX.Element;
1227
+ type TabsListVariant = 'line' | 'segmented';
1152
1228
  interface TabsListProps extends Omit<Tabs$1.List.Props, 'className'> {
1153
1229
  /** Names the set of tabs for assistive tech: "Inbox sections". */
1154
1230
  'aria-label': string;
1155
1231
  /** Tabs share the width equally instead of sizing to their labels. */
1156
1232
  fill?: boolean | undefined;
1233
+ /** `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. */
1234
+ variant?: TabsListVariant | undefined;
1157
1235
  className?: string | undefined;
1158
1236
  }
1159
1237
  /** The row of tabs with the sliding indicator. Arrow keys move between tabs; Enter or Space activates. */
1160
- declare function List({ fill, className, children, ...rest }: TabsListProps): react.JSX.Element;
1238
+ declare function List({ fill, variant, className, children, ...rest }: TabsListProps): react.JSX.Element;
1161
1239
  interface TabsTabProps extends Omit<Tabs$1.Tab.Props, 'className' | 'value'> {
1162
1240
  value: string;
1163
1241
  /** A 16px icon before the label. */
@@ -1176,7 +1254,7 @@ interface TabsPanelProps extends Omit<Tabs$1.Panel.Props, 'className' | 'value'>
1176
1254
  declare function Panel({ className, ...rest }: TabsPanelProps): react.JSX.Element;
1177
1255
  /** Switches between sections of one view. Built on Base UI's Tabs. */
1178
1256
  declare const Tabs: {
1179
- Root: typeof Root$2;
1257
+ Root: typeof Root$4;
1180
1258
  List: typeof List;
1181
1259
  Tab: typeof Tab;
1182
1260
  Panel: typeof Panel;
@@ -1195,7 +1273,7 @@ interface ToolbarRootProps extends Omit<Toolbar$1.Root.Props, 'className'> {
1195
1273
  * A row of controls with one tab stop: Tab enters, arrow keys move between items, Tab leaves. Put every
1196
1274
  * control through `Toolbar.Button` (`render={<IconButton … />}`) so it joins the roving focus.
1197
1275
  */
1198
- declare function Root$1({ wrap, gap, className, ...rest }: ToolbarRootProps): react.JSX.Element;
1276
+ declare function Root$3({ wrap, gap, className, ...rest }: ToolbarRootProps): react.JSX.Element;
1199
1277
  interface ToolbarGroupProps extends Omit<Toolbar$1.Group.Props, 'className'> {
1200
1278
  /** Names the group: "Playback". */
1201
1279
  'aria-label'?: string | undefined;
@@ -1213,6 +1291,9 @@ declare function Separator({ className, ...rest }: ToolbarSeparatorProps): react
1213
1291
  interface ToolbarButtonProps extends Omit<Toolbar$1.Button.Props, 'className'> {
1214
1292
  className?: string | undefined;
1215
1293
  }
1294
+ interface ToolbarLinkProps extends Omit<Toolbar$1.Link.Props, 'className'> {
1295
+ className?: string | undefined;
1296
+ }
1216
1297
  interface ToolbarSpacerProps {
1217
1298
  className?: string | undefined;
1218
1299
  }
@@ -1220,10 +1301,11 @@ interface ToolbarSpacerProps {
1220
1301
  declare function Spacer({ className }: ToolbarSpacerProps): react.JSX.Element;
1221
1302
  /** A horizontal container of controls. Built on Base UI's Toolbar. */
1222
1303
  declare const Toolbar: {
1223
- Root: typeof Root$1;
1304
+ Root: typeof Root$3;
1224
1305
  Group: typeof Group;
1225
1306
  Separator: typeof Separator;
1226
1307
  Button: react.ForwardRefExoticComponent<Omit<_base_ui_react.ToolbarButtonProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
1308
+ Link: react.ForwardRefExoticComponent<Omit<_base_ui_react.ToolbarLinkProps, "ref"> & react.RefAttributes<HTMLAnchorElement>>;
1227
1309
  Spacer: typeof Spacer;
1228
1310
  };
1229
1311
 
@@ -1287,20 +1369,20 @@ interface ProgressProps extends Omit<ComponentPropsWithRef<'div'>, 'children'> {
1287
1369
  * Says that something is processing and, when known, how far along it is. Built on Base UI's Progress:
1288
1370
  * `role="progressbar"` with the aria value attributes, or none while indeterminate.
1289
1371
  */
1290
- declare function Progress({ value, max, min, label, valueText, showValue, tone, size, variant, className, ...rest }: ProgressProps): react.JSX.Element;
1372
+ declare function Progress$1({ value, max, min, label, valueText, showValue, tone, size, variant, className, ...rest }: ProgressProps): react.JSX.Element;
1291
1373
 
1292
1374
  type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
1293
- type HeadingSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl';
1375
+ type HeadingSize = 'overline' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl';
1294
1376
  type HeadingElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div' | 'span' | 'p';
1295
1377
  type TextTone = 'default' | 'muted' | 'subtle' | 'accent' | 'success' | 'warning' | 'danger' | 'info';
1296
1378
  interface HeadingProps extends ComponentPropsWithRef<'h2'> {
1297
1379
  /** The outline level, rendered as `h1`–`h6`. Default 2. */
1298
1380
  level?: HeadingLevel | undefined;
1299
- /** Visual size from the type scale, independent of the level. Defaults by level: 3xl, 2xl, xl, lg, md, sm. */
1381
+ /** Visual size from the type scale, independent of the level. Defaults by level: 3xl, 2xl, xl, lg, md, sm. `overline` is a 12px uppercase mono label with wide tracking, muted by default, for section labels ("Why it fits"). */
1300
1382
  size?: HeadingSize | undefined;
1301
1383
  /** Render a different element and keep the look; `div`/`span` for a card title that is not an outline entry. */
1302
1384
  as?: HeadingElement | undefined;
1303
- /** Colour. Default is the text colour. */
1385
+ /** Colour. Default is the text colour; `muted` for `size="overline"`. */
1304
1386
  tone?: TextTone | undefined;
1305
1387
  /** One line with an ellipsis. */
1306
1388
  truncate?: boolean | undefined;
@@ -1597,6 +1679,7 @@ declare function Heading({ level, size, as, tone, truncate, className, ...rest }
1597
1679
  type TextSize = 'xs' | 'sm' | 'md' | 'lg';
1598
1680
  type TextWeight = 'regular' | 'medium' | 'semibold';
1599
1681
  type TextAlign = 'start' | 'center' | 'end';
1682
+ type TextFamily = 'sans' | 'mono';
1600
1683
  type TextElement = 'p' | 'span' | 'div' | 'label' | 'li' | 'dt' | 'dd' | 'strong' | 'em' | 'small' | 'time' | 'figcaption' | 'legend';
1601
1684
  interface TextProps extends ComponentPropsWithRef<'p'> {
1602
1685
  /** Element to render. Default `p`; `span` inside other text. */
@@ -1611,9 +1694,40 @@ interface TextProps extends ComponentPropsWithRef<'p'> {
1611
1694
  truncate?: boolean | number | undefined;
1612
1695
  /** Tabular figures, for numbers that line up in columns. */
1613
1696
  numeric?: boolean | undefined;
1697
+ /** `sans` (default) or `mono` for data next to prose: row metadata, dates, counts ("Quillstack · 5 h"). */
1698
+ family?: TextFamily | undefined;
1614
1699
  }
1615
1700
  /** Running text and labels from the type scale. Parents own spacing: Text has no margins. */
1616
- declare function Text({ as, size, tone, weight, align, truncate, numeric, className, style, ...rest }: TextProps): ReactElement;
1701
+ declare function Text({ as, size, tone, weight, align, truncate, numeric, family, className, style, ...rest }: TextProps): ReactElement;
1702
+
1703
+ /** The header checkbox: nothing, some or every row selected. */
1704
+ type RowSelectionHeaderState = 'none' | 'some' | 'all';
1705
+
1706
+ interface RowSelection {
1707
+ /** The selectable ids, in the order passed in. */
1708
+ ids: readonly string[];
1709
+ /** The selected ids; a subset of the ids passed in. */
1710
+ selected: ReadonlySet<string>;
1711
+ /** The selected ids in visible order. */
1712
+ selectedIds: readonly string[];
1713
+ count: number;
1714
+ /** Where the next Shift range starts. */
1715
+ anchor: string | null;
1716
+ /** For the header checkbox. */
1717
+ headerState: RowSelectionHeaderState;
1718
+ isSelected: (id: string) => boolean;
1719
+ toggle: (id: string) => void;
1720
+ /** Every row from the anchor to `id`, inclusive, in the current order, takes `id`'s new state. */
1721
+ toggleRange: (id: string) => void;
1722
+ selectAll: () => void;
1723
+ clear: () => void;
1724
+ }
1725
+ /**
1726
+ * Selection state for a list of rows, by id. Pass the selectable ids in visible order (after filtering and
1727
+ * sorting); when one disappears it leaves the selection and the rest stay. Hand the result to
1728
+ * `Table.Root selection` for the checkbox column and keyboard, or read it for a bulk-action bar.
1729
+ */
1730
+ declare function useRowSelection(ids: readonly string[]): RowSelection;
1617
1731
 
1618
1732
  type TableAlign = 'start' | 'center' | 'end';
1619
1733
  type TableDensity = 'comfortable' | 'compact';
@@ -1634,25 +1748,56 @@ interface TableRootProps extends Omit<ComponentPropsWithRef<'table'>, 'style'> {
1634
1748
  wrapperStyle?: CSSProperties | undefined;
1635
1749
  style?: CSSProperties | undefined;
1636
1750
  children?: ReactNode | undefined;
1751
+ /**
1752
+ * `useRowSelection(ids)`. Turns on the selection column parts (`Table.SelectionHeader`, `Table.SelectionCell`),
1753
+ * modifier clicks on rows with a `selectionId`, and the keyboard: Cmd/Ctrl+A selects every row while focus
1754
+ * is inside the table, Escape clears.
1755
+ */
1756
+ selection?: RowSelection | undefined;
1637
1757
  }
1638
1758
  /** A semantic `<table>` in a horizontally scrolling wrapper. Compose `Table.Head`, `Table.Body`, `Table.Row`, `Table.Header`, `Table.Cell`. */
1639
- declare function Root({ stickyHeader, maxHeight, density, divided, layout, wrapperClassName, wrapperStyle, className, style, children, ...rest }: TableRootProps): react.JSX.Element;
1759
+ declare function Root$2({ stickyHeader, maxHeight, density, divided, layout, wrapperClassName, wrapperStyle, className, style, children, selection, onKeyDown, ...rest }: TableRootProps): react.JSX.Element;
1640
1760
  type TableCaptionProps = ComponentPropsWithRef<'caption'>;
1641
1761
  /** Names the table for assistive tech; visually a muted line above it. */
1642
1762
  declare function Caption({ className, ...rest }: TableCaptionProps): react.JSX.Element;
1643
1763
  type TableHeadProps = ComponentPropsWithRef<'thead'>;
1644
1764
  declare function Head({ className, ...rest }: TableHeadProps): react.JSX.Element;
1645
1765
  type TableBodyProps = ComponentPropsWithRef<'tbody'>;
1646
- declare function Body({ className, ...rest }: TableBodyProps): react.JSX.Element;
1766
+ declare function Body$1({ className, ...rest }: TableBodyProps): react.JSX.Element;
1647
1767
  type TableFootProps = ComponentPropsWithRef<'tfoot'>;
1648
1768
  declare function Foot({ className, ...rest }: TableFootProps): react.JSX.Element;
1649
1769
  interface TableRowProps extends ComponentPropsWithRef<'tr'> {
1650
- /** Accent wash, for the current row. */
1770
+ /** Accent wash, for the current row. With `selectionId` it defaults to the row's selection. */
1651
1771
  selected?: boolean | undefined;
1652
1772
  /** Hover wash and pointer; make the primary cell a link or button for the real target. */
1653
1773
  interactive?: boolean | undefined;
1774
+ /**
1775
+ * The row's id in `Table.Root selection`. Shift+click extends the range to this row and Cmd/Ctrl+click
1776
+ * toggles it, unless the click is on a link, button or field inside the row; neither reaches `onClick`,
1777
+ * so a plain click can still open the row.
1778
+ */
1779
+ selectionId?: string | undefined;
1654
1780
  }
1655
- declare function Row({ selected, interactive, className, ...rest }: TableRowProps): react.JSX.Element;
1781
+ declare function Row({ selected, interactive, selectionId, className, onClick, onMouseDown, ...rest }: TableRowProps): react.JSX.Element;
1782
+ interface TableSelectionHeaderProps extends Omit<ComponentPropsWithRef<'th'>, 'children'> {
1783
+ /** The checkbox's accessible name. Default "Select all rows". */
1784
+ label?: string | undefined;
1785
+ }
1786
+ /**
1787
+ * The selection column's header: a checkbox that is checked when every row is, mixed when some are, and
1788
+ * selects every row (or, when all are selected, none). The whole cell is the hit area.
1789
+ */
1790
+ declare function SelectionHeader({ label, className, onClick, ...rest }: TableSelectionHeaderProps): react.JSX.Element;
1791
+ interface TableSelectionCellProps extends Omit<ComponentPropsWithRef<'td'>, 'children'> {
1792
+ /** Required. Names the row's checkbox: "Select Tailscale, Front End Engineer". */
1793
+ label: string;
1794
+ }
1795
+ /**
1796
+ * The row's checkbox, inside a `Table.Row selectionId`. Click or Space toggles; Shift+click or Shift+Space
1797
+ * extends the range from the last toggled row. The whole cell is the hit area, and its clicks never reach the
1798
+ * row's `onClick`.
1799
+ */
1800
+ declare function SelectionCell({ label, className, onClick, onClickCapture, ...rest }: TableSelectionCellProps): react.JSX.Element;
1656
1801
  interface CellSlots {
1657
1802
  /** Horizontal alignment. Default `start`; `end` for numbers. */
1658
1803
  align?: TableAlign | undefined;
@@ -1674,20 +1819,110 @@ interface TableHeaderProps extends Omit<ComponentPropsWithRef<'th'>, 'align' | '
1674
1819
  onSort?: ((direction: Exclude<TableSortDirection, 'none'>) => void) | undefined;
1675
1820
  }
1676
1821
  /** A `<th>`; `scope` defaults to `col`, pass `row` for the first cell of a row. */
1677
- declare function Header({ align, numeric, nowrap, truncate, width, sortable, sortDirection, onSort, scope, className, style, children, ...rest }: TableHeaderProps): react.JSX.Element;
1822
+ declare function Header$1({ align, numeric, nowrap, truncate, width, sortable, sortDirection, onSort, scope, className, style, children, ...rest }: TableHeaderProps): react.JSX.Element;
1678
1823
  interface TableCellProps extends Omit<ComponentPropsWithRef<'td'>, 'align' | 'width'>, CellSlots {
1679
1824
  }
1680
1825
  declare function Cell({ align, numeric, nowrap, truncate, width, className, style, ...rest }: TableCellProps): react.JSX.Element;
1681
1826
  /** Rows of records with column headers. Native table elements, so screen readers get rows and columns. */
1682
1827
  declare const Table: {
1683
- Root: typeof Root;
1828
+ Root: typeof Root$2;
1684
1829
  Caption: typeof Caption;
1685
1830
  Head: typeof Head;
1686
- Body: typeof Body;
1831
+ Body: typeof Body$1;
1687
1832
  Foot: typeof Foot;
1688
1833
  Row: typeof Row;
1689
- Header: typeof Header;
1834
+ Header: typeof Header$1;
1690
1835
  Cell: typeof Cell;
1836
+ SelectionHeader: typeof SelectionHeader;
1837
+ SelectionCell: typeof SelectionCell;
1838
+ };
1839
+
1840
+ interface SelectionBarProps {
1841
+ /** How many rows are selected. The bar shows from 1 and leaves at 0. */
1842
+ count: number;
1843
+ /** Clears the selection (the Clear button). */
1844
+ onClear: () => void;
1845
+ /** The actions, each a `Toolbar.Button`: `<Toolbar.Button render={<Button size="sm" variant="secondary" />}>Close 3</Toolbar.Button>`. */
1846
+ children?: ReactNode | undefined;
1847
+ /** Names the toolbar. Default "Bulk actions". */
1848
+ 'aria-label'?: string | undefined;
1849
+ /** The count text, visible and announced. Default `${count} selected`. */
1850
+ countLabel?: ((count: number) => string) | undefined;
1851
+ /** Default "Clear". */
1852
+ clearLabel?: string | undefined;
1853
+ /** Announced when the selection goes back to none. Default "Selection cleared". */
1854
+ clearedMessage?: string | undefined;
1855
+ className?: string | undefined;
1856
+ }
1857
+ /**
1858
+ * A floating bar for bulk actions on selected rows, centred at the bottom of the viewport: the count, the actions
1859
+ * and Clear, as one Toolbar (one tab stop, arrow keys inside). A polite status region announces the count as it
1860
+ * changes. Put it after the table, at the end of the scrolling content: while it shows, it leaves a spacer as
1861
+ * tall as itself there, so the last rows can scroll clear of it. When it leaves while holding focus (an action
1862
+ * cleared the selection), focus goes back to where it came from, usually the last row checkbox.
1863
+ */
1864
+ declare function SelectionBar({ count, onClear, children, 'aria-label': ariaLabel, countLabel, clearLabel, clearedMessage, className, }: SelectionBarProps): react.JSX.Element;
1865
+
1866
+ type ToastTone = 'neutral' | 'success' | 'danger' | 'accent';
1867
+ interface ToastOptions {
1868
+ /** Required. One line: "Closed 5 applications". */
1869
+ title: ReactNode;
1870
+ description?: ReactNode | undefined;
1871
+ /**
1872
+ * `neutral` (default), `success` and `danger` colour the edge. `accent` fills the toast with the accent colour, for
1873
+ * the rare notice that has to be seen (the app was updated); its buttons read on the fill (`.sc-on-accent`).
1874
+ */
1875
+ tone?: ToastTone | undefined;
1876
+ /**
1877
+ * One action, usually Undo. It closes the toast after `onClick`, unless `keepOpen` (the action asks first, and the
1878
+ * person may cancel).
1879
+ */
1880
+ action?: {
1881
+ label: string;
1882
+ onClick: () => void;
1883
+ keepOpen?: boolean | undefined;
1884
+ } | undefined;
1885
+ /** Milliseconds before it closes; paused while hovered or focused; `0` keeps it. Default: the Provider's. */
1886
+ timeout?: number | undefined;
1887
+ /** `high` announces assertively (errors). Default `low`, polite. */
1888
+ priority?: 'low' | 'high' | undefined;
1889
+ /**
1890
+ * Names the toast. Adding one whose id is showing updates it in place (new text, the timer starts again) instead
1891
+ * of stacking a second.
1892
+ */
1893
+ id?: string | undefined;
1894
+ /** The dismiss control as a text button ("Later") instead of the ×. */
1895
+ dismissLabel?: string | undefined;
1896
+ /** Called once when it closes, however: dismissed, swiped away, its action, its timeout or `close()`. */
1897
+ onClose?: (() => void) | undefined;
1898
+ }
1899
+ interface ToastProviderProps {
1900
+ children?: ReactNode | undefined;
1901
+ /** Default auto-close, in milliseconds. Default 6000. */
1902
+ timeout?: number | undefined;
1903
+ /** How many show at once; older ones close. Default 3. */
1904
+ limit?: number | undefined;
1905
+ }
1906
+ /**
1907
+ * Holds the toasts for `useToast()` below it and renders them, bottom-end, above the page. One viewport per page: a
1908
+ * Provider inside another adds nothing (its `timeout` and `limit` are ignored), so a component may wrap itself in one
1909
+ * and still share the app's.
1910
+ */
1911
+ declare function Provider({ children, timeout, limit }: ToastProviderProps): string | number | bigint | boolean | react.JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null | undefined;
1912
+ interface ToastApi {
1913
+ /** Shows a toast and returns its id. */
1914
+ add: (options: ToastOptions) => string;
1915
+ /** Closes one toast, or every toast without an id. */
1916
+ close: (id?: string) => void;
1917
+ }
1918
+ /** Shows toasts from inside a `Toast.Provider`. */
1919
+ declare function useToast(): ToastApi;
1920
+ /**
1921
+ * Short-lived status messages: "Closed 5 applications · Undo". Built on Base UI's Toast: announced through a
1922
+ * polite region (`priority: 'high'` for errors), paused while hovered or focused, F6 moves focus to them.
1923
+ */
1924
+ declare const Toast: {
1925
+ Provider: typeof Provider;
1691
1926
  };
1692
1927
 
1693
1928
  type StatTrend = 'up' | 'down' | 'flat';
@@ -2004,7 +2239,1149 @@ declare function Stat({ label, value, delta, deltaTone, trend, hint, icon, varia
2004
2239
  'data-size': StatSize;
2005
2240
  }, HTMLDivElement>;
2006
2241
 
2242
+ type ChipTone = 'neutral' | 'accent' | 'success' | 'warning' | 'danger' | 'info';
2243
+ type ChipSize = 'sm' | 'md';
2244
+ interface ChipProps extends Omit<ComponentPropsWithRef<'span'>, 'onClick' | 'onRemove'> {
2245
+ /** The chip text. Keep it to a word or three. */
2246
+ children: ReactNode;
2247
+ /** A 14px icon before the text. Decorative. */
2248
+ icon?: ReactNode | undefined;
2249
+ /** Colour. `neutral` (default) for filters, a status tone when the chip is the status. */
2250
+ tone?: ChipTone | undefined;
2251
+ /** `md` 32px (default) or `sm` 24px inside table rows and Card headers. */
2252
+ size?: ChipSize | undefined;
2253
+ /** Filled and `aria-pressed`. Use with `onClick` for a toggling filter chip. */
2254
+ selected?: boolean | undefined;
2255
+ /** Makes the chip a `<button>` that toggles; `selected` is reflected as `aria-pressed`. */
2256
+ onClick?: ((event: MouseEvent<HTMLButtonElement>) => void) | undefined;
2257
+ /**
2258
+ * Adds a labelled × that calls this. Backspace or Delete on the focused chip (or on the ×) removes it
2259
+ * too. Focus is yours to manage after removal: move it to the next chip or the filter input.
2260
+ */
2261
+ onRemove?: (() => void) | undefined;
2262
+ /** Accessible name of the ×. Default "Remove" followed by the chip text when that text is a string. */
2263
+ removeLabel?: string | undefined;
2264
+ disabled?: boolean | undefined;
2265
+ }
2266
+ /**
2267
+ * A small pill: an applied filter, a tag, a selectable option in a row of a few. `onClick` makes it a
2268
+ * toggle button, `onRemove` adds the ×, and the two combine. Plain text otherwise.
2269
+ */
2270
+ declare function Chip({ children, icon, tone, size, selected, onClick, onRemove, removeLabel, disabled, className, ...rest }: ChipProps): react.JSX.Element;
2271
+
2272
+ interface DisclosureProps extends Omit<ComponentPropsWithRef<'details'>, 'open' | 'onToggle'> {
2273
+ /** Required. The summary line, a verb phrase: "Show full description". */
2274
+ summary: ReactNode;
2275
+ /** Replaces `summary` while open: "Show less". */
2276
+ summaryOpen?: ReactNode | undefined;
2277
+ /** Controlled open state. */
2278
+ open?: boolean | undefined;
2279
+ /** Initial open state when uncontrolled. */
2280
+ defaultOpen?: boolean | undefined;
2281
+ /** Called when the user toggles it. */
2282
+ onOpenChange?: ((open: boolean) => void) | undefined;
2283
+ /**
2284
+ * While closed, shows this many lines of the content fading out, so a long description still reads
2285
+ * as a teaser. Puts the summary line under the preview. Needs `::details-content` (2025 browsers);
2286
+ * older ones show the summary alone.
2287
+ */
2288
+ previewLines?: number | undefined;
2289
+ /** Puts the summary line above (default) or below the content. Defaults to `end` with `previewLines`. */
2290
+ summaryPosition?: 'start' | 'end' | undefined;
2291
+ children?: ReactNode | undefined;
2292
+ }
2293
+ /**
2294
+ * A native `<details>` collapse with a styled summary. Works without JavaScript, is announced as a
2295
+ * disclosure, and shares `name` with siblings for an exclusive group.
2296
+ */
2297
+ declare function Disclosure({ summary, summaryOpen, open, defaultOpen, onOpenChange, previewLines, summaryPosition, className, style, children, ref, ...rest }: DisclosureProps): react.JSX.Element;
2298
+
2299
+ type EmptyStateSize = 'sm' | 'md';
2300
+ type EmptyStateElement = 'div' | 'section' | 'li';
2301
+ interface EmptyStateProps extends Omit<ComponentPropsWithRef<'div'>, 'title'> {
2302
+ /** Required. What is empty, as a short statement: "No applications yet". */
2303
+ title: ReactNode;
2304
+ /** One sentence on why, or what to do: "Postings you apply to show up here." */
2305
+ description?: ReactNode | undefined;
2306
+ /** A 24px icon in a muted circle above the title. Decorative. */
2307
+ icon?: ReactNode | undefined;
2308
+ /** The actions, usually one primary Button and at most one secondary. Rendered in an Inline. */
2309
+ children?: ReactNode | undefined;
2310
+ /** `md` (default) for a whole view or panel, `sm` inside a Card or a table body. */
2311
+ size?: EmptyStateSize | undefined;
2312
+ /** Element to render. Default `div`. */
2313
+ as?: EmptyStateElement | undefined;
2314
+ }
2315
+ /**
2316
+ * Centred placeholder for a view with nothing in it: an icon, a title, a sentence and the action that
2317
+ * fills it. Say what is missing and the next step; never apologise.
2318
+ */
2319
+ declare function EmptyState({ title, description, icon, children, size, as, className, ...rest }: EmptyStateProps): react.DetailedReactHTMLElement<{
2320
+ slot?: string | undefined | undefined;
2321
+ style?: react.CSSProperties | undefined;
2322
+ ref?: react.Ref<HTMLDivElement> | undefined;
2323
+ key?: react.Key | null | undefined;
2324
+ defaultChecked?: boolean | undefined | undefined;
2325
+ defaultValue?: string | number | readonly string[] | undefined;
2326
+ suppressContentEditableWarning?: boolean | undefined | undefined;
2327
+ suppressHydrationWarning?: boolean | undefined | undefined;
2328
+ accessKey?: string | undefined | undefined;
2329
+ autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
2330
+ autoFocus?: boolean | undefined | undefined;
2331
+ contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
2332
+ contextMenu?: string | undefined | undefined;
2333
+ dir?: string | undefined | undefined;
2334
+ draggable?: (boolean | "true" | "false") | undefined;
2335
+ enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
2336
+ hidden?: boolean | undefined | undefined;
2337
+ id?: string | undefined | undefined;
2338
+ lang?: string | undefined | undefined;
2339
+ nonce?: string | undefined | undefined;
2340
+ spellCheck?: (boolean | "true" | "false") | undefined;
2341
+ tabIndex?: number | undefined | undefined;
2342
+ translate?: "yes" | "no" | undefined | undefined;
2343
+ radioGroup?: string | undefined | undefined;
2344
+ role?: react.AriaRole | undefined;
2345
+ about?: string | undefined | undefined;
2346
+ content?: string | undefined | undefined;
2347
+ datatype?: string | undefined | undefined;
2348
+ inlist?: any;
2349
+ prefix?: string | undefined | undefined;
2350
+ property?: string | undefined | undefined;
2351
+ rel?: string | undefined | undefined;
2352
+ resource?: string | undefined | undefined;
2353
+ rev?: string | undefined | undefined;
2354
+ typeof?: string | undefined | undefined;
2355
+ vocab?: string | undefined | undefined;
2356
+ autoCorrect?: string | undefined | undefined;
2357
+ autoSave?: string | undefined | undefined;
2358
+ color?: string | undefined | undefined;
2359
+ itemProp?: string | undefined | undefined;
2360
+ itemScope?: boolean | undefined | undefined;
2361
+ itemType?: string | undefined | undefined;
2362
+ itemID?: string | undefined | undefined;
2363
+ itemRef?: string | undefined | undefined;
2364
+ results?: number | undefined | undefined;
2365
+ security?: string | undefined | undefined;
2366
+ unselectable?: "on" | "off" | undefined | undefined;
2367
+ popover?: "" | "auto" | "manual" | "hint" | undefined | undefined;
2368
+ popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
2369
+ popoverTarget?: string | undefined | undefined;
2370
+ inert?: boolean | undefined | undefined;
2371
+ inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
2372
+ is?: string | undefined | undefined;
2373
+ exportparts?: string | undefined | undefined;
2374
+ part?: string | undefined | undefined;
2375
+ "aria-activedescendant"?: string | undefined | undefined;
2376
+ "aria-atomic"?: (boolean | "true" | "false") | undefined;
2377
+ "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
2378
+ "aria-braillelabel"?: string | undefined | undefined;
2379
+ "aria-brailleroledescription"?: string | undefined | undefined;
2380
+ "aria-busy"?: (boolean | "true" | "false") | undefined;
2381
+ "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
2382
+ "aria-colcount"?: number | undefined | undefined;
2383
+ "aria-colindex"?: number | undefined | undefined;
2384
+ "aria-colindextext"?: string | undefined | undefined;
2385
+ "aria-colspan"?: number | undefined | undefined;
2386
+ "aria-controls"?: string | undefined | undefined;
2387
+ "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined | undefined;
2388
+ "aria-describedby"?: string | undefined | undefined;
2389
+ "aria-description"?: string | undefined | undefined;
2390
+ "aria-details"?: string | undefined | undefined;
2391
+ "aria-disabled"?: (boolean | "true" | "false") | undefined;
2392
+ "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined | undefined;
2393
+ "aria-errormessage"?: string | undefined | undefined;
2394
+ "aria-expanded"?: (boolean | "true" | "false") | undefined;
2395
+ "aria-flowto"?: string | undefined | undefined;
2396
+ "aria-grabbed"?: (boolean | "true" | "false") | undefined;
2397
+ "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined | undefined;
2398
+ "aria-hidden"?: (boolean | "true" | "false") | undefined;
2399
+ "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined | undefined;
2400
+ "aria-keyshortcuts"?: string | undefined | undefined;
2401
+ "aria-label"?: string | undefined | undefined;
2402
+ "aria-labelledby"?: string | undefined | undefined;
2403
+ "aria-level"?: number | undefined | undefined;
2404
+ "aria-live"?: "off" | "assertive" | "polite" | undefined | undefined;
2405
+ "aria-modal"?: (boolean | "true" | "false") | undefined;
2406
+ "aria-multiline"?: (boolean | "true" | "false") | undefined;
2407
+ "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
2408
+ "aria-orientation"?: "horizontal" | "vertical" | undefined | undefined;
2409
+ "aria-owns"?: string | undefined | undefined;
2410
+ "aria-placeholder"?: string | undefined | undefined;
2411
+ "aria-posinset"?: number | undefined | undefined;
2412
+ "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
2413
+ "aria-readonly"?: (boolean | "true" | "false") | undefined;
2414
+ "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined | undefined;
2415
+ "aria-required"?: (boolean | "true" | "false") | undefined;
2416
+ "aria-roledescription"?: string | undefined | undefined;
2417
+ "aria-rowcount"?: number | undefined | undefined;
2418
+ "aria-rowindex"?: number | undefined | undefined;
2419
+ "aria-rowindextext"?: string | undefined | undefined;
2420
+ "aria-rowspan"?: number | undefined | undefined;
2421
+ "aria-selected"?: (boolean | "true" | "false") | undefined;
2422
+ "aria-setsize"?: number | undefined | undefined;
2423
+ "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined | undefined;
2424
+ "aria-valuemax"?: number | undefined | undefined;
2425
+ "aria-valuemin"?: number | undefined | undefined;
2426
+ "aria-valuenow"?: number | undefined | undefined;
2427
+ "aria-valuetext"?: string | undefined | undefined;
2428
+ dangerouslySetInnerHTML?: {
2429
+ __html: string | TrustedHTML;
2430
+ } | undefined | undefined;
2431
+ onCopy?: react.ClipboardEventHandler<HTMLDivElement> | undefined;
2432
+ onCopyCapture?: react.ClipboardEventHandler<HTMLDivElement> | undefined;
2433
+ onCut?: react.ClipboardEventHandler<HTMLDivElement> | undefined;
2434
+ onCutCapture?: react.ClipboardEventHandler<HTMLDivElement> | undefined;
2435
+ onPaste?: react.ClipboardEventHandler<HTMLDivElement> | undefined;
2436
+ onPasteCapture?: react.ClipboardEventHandler<HTMLDivElement> | undefined;
2437
+ onCompositionEnd?: react.CompositionEventHandler<HTMLDivElement> | undefined;
2438
+ onCompositionEndCapture?: react.CompositionEventHandler<HTMLDivElement> | undefined;
2439
+ onCompositionStart?: react.CompositionEventHandler<HTMLDivElement> | undefined;
2440
+ onCompositionStartCapture?: react.CompositionEventHandler<HTMLDivElement> | undefined;
2441
+ onCompositionUpdate?: react.CompositionEventHandler<HTMLDivElement> | undefined;
2442
+ onCompositionUpdateCapture?: react.CompositionEventHandler<HTMLDivElement> | undefined;
2443
+ onFocus?: react.FocusEventHandler<HTMLDivElement> | undefined;
2444
+ onFocusCapture?: react.FocusEventHandler<HTMLDivElement> | undefined;
2445
+ onBlur?: react.FocusEventHandler<HTMLDivElement> | undefined;
2446
+ onBlurCapture?: react.FocusEventHandler<HTMLDivElement> | undefined;
2447
+ onChange?: react.ChangeEventHandler<HTMLDivElement, Element> | undefined;
2448
+ onChangeCapture?: react.ChangeEventHandler<HTMLDivElement, Element> | undefined;
2449
+ onBeforeInput?: react.InputEventHandler<HTMLDivElement> | undefined;
2450
+ onBeforeInputCapture?: react.InputEventHandler<HTMLDivElement> | undefined;
2451
+ onInput?: react.InputEventHandler<HTMLDivElement> | undefined;
2452
+ onInputCapture?: react.InputEventHandler<HTMLDivElement> | undefined;
2453
+ onReset?: react.ReactEventHandler<HTMLDivElement> | undefined;
2454
+ onResetCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
2455
+ onSubmit?: react.SubmitEventHandler<HTMLDivElement> | undefined;
2456
+ onSubmitCapture?: react.SubmitEventHandler<HTMLDivElement> | undefined;
2457
+ onInvalid?: react.ReactEventHandler<HTMLDivElement> | undefined;
2458
+ onInvalidCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
2459
+ onLoad?: react.ReactEventHandler<HTMLDivElement> | undefined;
2460
+ onLoadCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
2461
+ onError?: react.ReactEventHandler<HTMLDivElement> | undefined;
2462
+ onErrorCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
2463
+ onKeyDown?: react.KeyboardEventHandler<HTMLDivElement> | undefined;
2464
+ onKeyDownCapture?: react.KeyboardEventHandler<HTMLDivElement> | undefined;
2465
+ onKeyPress?: react.KeyboardEventHandler<HTMLDivElement> | undefined;
2466
+ onKeyPressCapture?: react.KeyboardEventHandler<HTMLDivElement> | undefined;
2467
+ onKeyUp?: react.KeyboardEventHandler<HTMLDivElement> | undefined;
2468
+ onKeyUpCapture?: react.KeyboardEventHandler<HTMLDivElement> | undefined;
2469
+ onAbort?: react.ReactEventHandler<HTMLDivElement> | undefined;
2470
+ onAbortCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
2471
+ onCanPlay?: react.ReactEventHandler<HTMLDivElement> | undefined;
2472
+ onCanPlayCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
2473
+ onCanPlayThrough?: react.ReactEventHandler<HTMLDivElement> | undefined;
2474
+ onCanPlayThroughCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
2475
+ onDurationChange?: react.ReactEventHandler<HTMLDivElement> | undefined;
2476
+ onDurationChangeCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
2477
+ onEmptied?: react.ReactEventHandler<HTMLDivElement> | undefined;
2478
+ onEmptiedCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
2479
+ onEncrypted?: react.ReactEventHandler<HTMLDivElement> | undefined;
2480
+ onEncryptedCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
2481
+ onEnded?: react.ReactEventHandler<HTMLDivElement> | undefined;
2482
+ onEndedCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
2483
+ onLoadedData?: react.ReactEventHandler<HTMLDivElement> | undefined;
2484
+ onLoadedDataCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
2485
+ onLoadedMetadata?: react.ReactEventHandler<HTMLDivElement> | undefined;
2486
+ onLoadedMetadataCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
2487
+ onLoadStart?: react.ReactEventHandler<HTMLDivElement> | undefined;
2488
+ onLoadStartCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
2489
+ onPause?: react.ReactEventHandler<HTMLDivElement> | undefined;
2490
+ onPauseCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
2491
+ onPlay?: react.ReactEventHandler<HTMLDivElement> | undefined;
2492
+ onPlayCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
2493
+ onPlaying?: react.ReactEventHandler<HTMLDivElement> | undefined;
2494
+ onPlayingCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
2495
+ onProgress?: react.ReactEventHandler<HTMLDivElement> | undefined;
2496
+ onProgressCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
2497
+ onRateChange?: react.ReactEventHandler<HTMLDivElement> | undefined;
2498
+ onRateChangeCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
2499
+ onSeeked?: react.ReactEventHandler<HTMLDivElement> | undefined;
2500
+ onSeekedCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
2501
+ onSeeking?: react.ReactEventHandler<HTMLDivElement> | undefined;
2502
+ onSeekingCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
2503
+ onStalled?: react.ReactEventHandler<HTMLDivElement> | undefined;
2504
+ onStalledCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
2505
+ onSuspend?: react.ReactEventHandler<HTMLDivElement> | undefined;
2506
+ onSuspendCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
2507
+ onTimeUpdate?: react.ReactEventHandler<HTMLDivElement> | undefined;
2508
+ onTimeUpdateCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
2509
+ onVolumeChange?: react.ReactEventHandler<HTMLDivElement> | undefined;
2510
+ onVolumeChangeCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
2511
+ onWaiting?: react.ReactEventHandler<HTMLDivElement> | undefined;
2512
+ onWaitingCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
2513
+ onAuxClick?: react.MouseEventHandler<HTMLDivElement> | undefined;
2514
+ onAuxClickCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
2515
+ onClick?: react.MouseEventHandler<HTMLDivElement> | undefined;
2516
+ onClickCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
2517
+ onContextMenu?: react.MouseEventHandler<HTMLDivElement> | undefined;
2518
+ onContextMenuCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
2519
+ onDoubleClick?: react.MouseEventHandler<HTMLDivElement> | undefined;
2520
+ onDoubleClickCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
2521
+ onDrag?: react.DragEventHandler<HTMLDivElement> | undefined;
2522
+ onDragCapture?: react.DragEventHandler<HTMLDivElement> | undefined;
2523
+ onDragEnd?: react.DragEventHandler<HTMLDivElement> | undefined;
2524
+ onDragEndCapture?: react.DragEventHandler<HTMLDivElement> | undefined;
2525
+ onDragEnter?: react.DragEventHandler<HTMLDivElement> | undefined;
2526
+ onDragEnterCapture?: react.DragEventHandler<HTMLDivElement> | undefined;
2527
+ onDragExit?: react.DragEventHandler<HTMLDivElement> | undefined;
2528
+ onDragExitCapture?: react.DragEventHandler<HTMLDivElement> | undefined;
2529
+ onDragLeave?: react.DragEventHandler<HTMLDivElement> | undefined;
2530
+ onDragLeaveCapture?: react.DragEventHandler<HTMLDivElement> | undefined;
2531
+ onDragOver?: react.DragEventHandler<HTMLDivElement> | undefined;
2532
+ onDragOverCapture?: react.DragEventHandler<HTMLDivElement> | undefined;
2533
+ onDragStart?: react.DragEventHandler<HTMLDivElement> | undefined;
2534
+ onDragStartCapture?: react.DragEventHandler<HTMLDivElement> | undefined;
2535
+ onDrop?: react.DragEventHandler<HTMLDivElement> | undefined;
2536
+ onDropCapture?: react.DragEventHandler<HTMLDivElement> | undefined;
2537
+ onMouseDown?: react.MouseEventHandler<HTMLDivElement> | undefined;
2538
+ onMouseDownCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
2539
+ onMouseEnter?: react.MouseEventHandler<HTMLDivElement> | undefined;
2540
+ onMouseLeave?: react.MouseEventHandler<HTMLDivElement> | undefined;
2541
+ onMouseMove?: react.MouseEventHandler<HTMLDivElement> | undefined;
2542
+ onMouseMoveCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
2543
+ onMouseOut?: react.MouseEventHandler<HTMLDivElement> | undefined;
2544
+ onMouseOutCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
2545
+ onMouseOver?: react.MouseEventHandler<HTMLDivElement> | undefined;
2546
+ onMouseOverCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
2547
+ onMouseUp?: react.MouseEventHandler<HTMLDivElement> | undefined;
2548
+ onMouseUpCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
2549
+ onSelect?: react.ReactEventHandler<HTMLDivElement> | undefined;
2550
+ onSelectCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
2551
+ onTouchCancel?: react.TouchEventHandler<HTMLDivElement> | undefined;
2552
+ onTouchCancelCapture?: react.TouchEventHandler<HTMLDivElement> | undefined;
2553
+ onTouchEnd?: react.TouchEventHandler<HTMLDivElement> | undefined;
2554
+ onTouchEndCapture?: react.TouchEventHandler<HTMLDivElement> | undefined;
2555
+ onTouchMove?: react.TouchEventHandler<HTMLDivElement> | undefined;
2556
+ onTouchMoveCapture?: react.TouchEventHandler<HTMLDivElement> | undefined;
2557
+ onTouchStart?: react.TouchEventHandler<HTMLDivElement> | undefined;
2558
+ onTouchStartCapture?: react.TouchEventHandler<HTMLDivElement> | undefined;
2559
+ onPointerDown?: react.PointerEventHandler<HTMLDivElement> | undefined;
2560
+ onPointerDownCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
2561
+ onPointerMove?: react.PointerEventHandler<HTMLDivElement> | undefined;
2562
+ onPointerMoveCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
2563
+ onPointerUp?: react.PointerEventHandler<HTMLDivElement> | undefined;
2564
+ onPointerUpCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
2565
+ onPointerCancel?: react.PointerEventHandler<HTMLDivElement> | undefined;
2566
+ onPointerCancelCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
2567
+ onPointerEnter?: react.PointerEventHandler<HTMLDivElement> | undefined;
2568
+ onPointerLeave?: react.PointerEventHandler<HTMLDivElement> | undefined;
2569
+ onPointerOver?: react.PointerEventHandler<HTMLDivElement> | undefined;
2570
+ onPointerOverCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
2571
+ onPointerOut?: react.PointerEventHandler<HTMLDivElement> | undefined;
2572
+ onPointerOutCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
2573
+ onGotPointerCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
2574
+ onGotPointerCaptureCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
2575
+ onLostPointerCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
2576
+ onLostPointerCaptureCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
2577
+ onScroll?: react.UIEventHandler<HTMLDivElement> | undefined;
2578
+ onScrollCapture?: react.UIEventHandler<HTMLDivElement> | undefined;
2579
+ onScrollEnd?: react.UIEventHandler<HTMLDivElement> | undefined;
2580
+ onScrollEndCapture?: react.UIEventHandler<HTMLDivElement> | undefined;
2581
+ onWheel?: react.WheelEventHandler<HTMLDivElement> | undefined;
2582
+ onWheelCapture?: react.WheelEventHandler<HTMLDivElement> | undefined;
2583
+ onAnimationStart?: react.AnimationEventHandler<HTMLDivElement> | undefined;
2584
+ onAnimationStartCapture?: react.AnimationEventHandler<HTMLDivElement> | undefined;
2585
+ onAnimationEnd?: react.AnimationEventHandler<HTMLDivElement> | undefined;
2586
+ onAnimationEndCapture?: react.AnimationEventHandler<HTMLDivElement> | undefined;
2587
+ onAnimationIteration?: react.AnimationEventHandler<HTMLDivElement> | undefined;
2588
+ onAnimationIterationCapture?: react.AnimationEventHandler<HTMLDivElement> | undefined;
2589
+ onToggle?: react.ToggleEventHandler<HTMLDivElement> | undefined;
2590
+ onBeforeToggle?: react.ToggleEventHandler<HTMLDivElement> | undefined;
2591
+ onTransitionCancel?: react.TransitionEventHandler<HTMLDivElement> | undefined;
2592
+ onTransitionCancelCapture?: react.TransitionEventHandler<HTMLDivElement> | undefined;
2593
+ onTransitionEnd?: react.TransitionEventHandler<HTMLDivElement> | undefined;
2594
+ onTransitionEndCapture?: react.TransitionEventHandler<HTMLDivElement> | undefined;
2595
+ onTransitionRun?: react.TransitionEventHandler<HTMLDivElement> | undefined;
2596
+ onTransitionRunCapture?: react.TransitionEventHandler<HTMLDivElement> | undefined;
2597
+ onTransitionStart?: react.TransitionEventHandler<HTMLDivElement> | undefined;
2598
+ onTransitionStartCapture?: react.TransitionEventHandler<HTMLDivElement> | undefined;
2599
+ className: string;
2600
+ 'data-size': EmptyStateSize;
2601
+ }, HTMLDivElement>;
2602
+
2603
+ type SkeletonVariant = 'text' | 'rect' | 'circle';
2604
+ interface SkeletonProps extends ComponentPropsWithRef<'span'> {
2605
+ /** `text` (default) is one line of the current font size; `rect` a block; `circle` an avatar. */
2606
+ variant?: SkeletonVariant | undefined;
2607
+ /** Any CSS length. Default: text `100%`, rect `100%`, circle `40px`. */
2608
+ width?: string | number | undefined;
2609
+ /** Any CSS length. Default: text `1em` (one line), rect `80px`, circle = `width`. */
2610
+ height?: string | number | undefined;
2611
+ /** For `text`: how many lines; the last is shorter. Default 1. */
2612
+ lines?: number | undefined;
2613
+ /** Hides the shimmer. Default `false`; reduced motion hides it anyway. */
2614
+ still?: boolean | undefined;
2615
+ }
2616
+ /**
2617
+ * A placeholder shape shown while real content loads. It is hidden from assistive tech: put
2618
+ * `aria-busy="true"` on the region being filled, or a `Spinner` with a label beside it, so the loading
2619
+ * state is announced once instead of per block.
2620
+ */
2621
+ declare function Skeleton({ variant, width, height, lines, still, className, style, ...rest }: SkeletonProps): react.JSX.Element;
2622
+
2623
+ interface FileInputProps extends FieldProps {
2624
+ /** Accepted types, as for the native attribute: `".pdf,.docx,text/plain"` or a list. Extensions, exact MIME types and `image/*` wildcards. */
2625
+ accept?: string | readonly string[] | undefined;
2626
+ /** How the accepted types read in the error message. Default derived from `accept` ("PDF, DOCX or plain text"). */
2627
+ acceptLabel?: string | undefined;
2628
+ /** Largest file accepted, in bytes or as `"10MB"` (base 1000, like the size shown in the list). */
2629
+ maxFileSize?: number | string | undefined;
2630
+ /** Allows several files. Without it a new file replaces the current one. */
2631
+ multiple?: boolean | undefined;
2632
+ /** With `multiple`, the most files the list holds. */
2633
+ maxFiles?: number | undefined;
2634
+ /** Controlled list of accepted files. Pass `[]` to clear. */
2635
+ files?: readonly File[] | undefined;
2636
+ /** Initial files when uncontrolled. */
2637
+ defaultFiles?: readonly File[] | undefined;
2638
+ /** Called with the accepted files (plain `File` objects) after every add or remove. Rejected files never appear here. */
2639
+ onFilesChange?: ((files: File[]) => void) | undefined;
2640
+ /** Drop zone text before the browse link. Default "Drop a file here or" (or "Drop files here or" with `multiple`). */
2641
+ idleLabel?: string | undefined;
2642
+ /** The browse link's text. Default "browse". */
2643
+ browseLabel?: string | undefined;
2644
+ /**
2645
+ * Lets people check a file before it is uploaded: the name of each PDF, plain text, Markdown or image
2646
+ * file becomes a button that opens it in a `FilePreviewDialog`. Other types (DOCX …) show a plain name.
2647
+ * Default `true`; no preview while `disabled`.
2648
+ */
2649
+ preview?: boolean | undefined;
2650
+ }
2651
+ /**
2652
+ * A labelled file picker with a drop zone, on FilePond (docs/adr/0004). Files stay in the browser: the
2653
+ * component hands plain `File` objects to `onFilesChange`, and with `name` it also keeps them in a file
2654
+ * input so a `<form>` (or a Server Action) submits them. Type, size and count are checked before a file
2655
+ * joins the list; a rejected file never joins it, and the reason shows in the field's error slot and is
2656
+ * announced. FilePond loads on mount, so the server renders a static drop zone and nothing of FilePond.
2657
+ */
2658
+ declare function FileInput({ label, hideLabel, description, error, invalid, required, disabled, name, size, className, accept, acceptLabel, maxFileSize, multiple, maxFiles, files, defaultFiles, onFilesChange, idleLabel, browseLabel, preview, }: FileInputProps): react.JSX.Element;
2659
+
2660
+ interface FilePreviewDialogProps {
2661
+ /** The file to show. Kept while the dialog closes, so pass `null` only once it has. */
2662
+ file: File | null | undefined;
2663
+ /** Controlled open state. */
2664
+ open: boolean;
2665
+ /** Called when the dialog asks to close (Esc, the ×, the backdrop). */
2666
+ onOpenChange: (open: boolean) => void;
2667
+ /** Where focus goes on close. Default: the element that had focus when it opened. */
2668
+ finalFocus?: DialogContentProps['finalFocus'];
2669
+ }
2670
+ /**
2671
+ * Shows a local file before it is uploaded: a PDF in the browser's own viewer, plain text and Markdown as
2672
+ * text, an image as an image. Any other type gets a short note and nothing else, because a blob URL runs
2673
+ * with the page's origin: only a PDF is ever framed, and it is re-typed `application/pdf` first, so an HTML
2674
+ * file named `.pdf` cannot run. The object URL exists only while the dialog is open.
2675
+ */
2676
+ declare function FilePreviewDialog({ file, open, onOpenChange, finalFocus }: FilePreviewDialogProps): react.JSX.Element;
2677
+
2678
+ interface PriorityNavItem {
2679
+ /** Where the link goes. */
2680
+ href: string;
2681
+ /** The visible text. A string (or number) is part of the width cache key; see `PriorityNav`. */
2682
+ label: ReactNode;
2683
+ /** A stable key. Defaults to `href`. */
2684
+ id?: string | undefined;
2685
+ /** The page being shown: `aria-current="page"`, and the link never collapses into "More". */
2686
+ current?: boolean | undefined;
2687
+ /**
2688
+ * A small count (`2`) or `'dot'` after the label: something waiting there. `0` shows nothing. Visual only; say
2689
+ * what it means in `badgeLabel`. While the item is collapsed, "More" shows the summed count (or a dot) and adds
2690
+ * the label to its accessible name.
2691
+ */
2692
+ badge?: number | 'dot' | undefined;
2693
+ /** What the badge means, appended to the link's (and, while collapsed, More's) accessible name: "2 suggestions to review". A count without it is read as the bare number; a dot without it is not announced. */
2694
+ badgeLabel?: string | undefined;
2695
+ }
2696
+ /** What `renderLink` receives: spread it onto your link component. */
2697
+ interface PriorityNavLinkProps {
2698
+ href: string;
2699
+ className: string;
2700
+ 'aria-current': 'page' | undefined;
2701
+ onClick: MouseEventHandler<HTMLAnchorElement> | undefined;
2702
+ children: ReactNode;
2703
+ }
2704
+ interface PriorityNavProps extends Omit<ComponentPropsWithRef<'nav'>, 'children'> {
2705
+ /** Names the landmark: "Main". */
2706
+ 'aria-label': string;
2707
+ /** The links, in priority order: the first ones stay inline longest. */
2708
+ items: readonly PriorityNavItem[];
2709
+ /** Visible text of the overflow toggle. Default "More". */
2710
+ moreLabel?: string | undefined;
2711
+ /** Appended to the toggle's accessible name only: "More, 3 links". Default `n link(s)`. */
2712
+ moreCountLabel?: ((hidden: number) => string) | undefined;
2713
+ /** Renders each link. Default a plain `<a>`; pass a router link: `(props) => <Link {...props} />`. */
2714
+ renderLink?: ((props: PriorityNavLinkProps, item: PriorityNavItem) => ReactElement) | undefined;
2715
+ /**
2716
+ * Called when links start or stop collapsing into "More" (also `data-overflowing` on the `nav`), so a
2717
+ * header can make room, e.g. an action button going icon-only.
2718
+ */
2719
+ onOverflowChange?: ((overflowing: boolean) => void) | undefined;
2720
+ /**
2721
+ * Room in px the row must have beyond fitting every link before it stops reporting overflow. Set it to
2722
+ * the space your header gives back on overflow (the button label's width), so the two cannot oscillate.
2723
+ * Default 0.
2724
+ */
2725
+ overflowHysteresis?: number | undefined;
2726
+ }
2727
+ /**
2728
+ * Priority+ navigation: a row of primary links that keeps the ones that fit inline and collapses the rest
2729
+ * into a "More" disclosure at the end of the row. The current page is never collapsed. Follows the
2730
+ * WAI-ARIA APG disclosure navigation pattern (links in a list, a real button with `aria-expanded`), not
2731
+ * `role="menu"`. Server-renders every link inline, so it works before hydration and without JavaScript;
2732
+ * see docs/adr/0005-priority-nav.md.
2733
+ */
2734
+ declare function PriorityNav({ items, moreLabel, moreCountLabel, renderLink, onOverflowChange, overflowHysteresis, className, style, ...rest }: PriorityNavProps): react.JSX.Element;
2735
+
2736
+ type PopoverSide = 'top' | 'bottom' | 'left' | 'right';
2737
+ type PopoverAlign = 'start' | 'center' | 'end';
2738
+ interface PopoverRootProps {
2739
+ /** Controlled open state. */
2740
+ open?: boolean | undefined;
2741
+ /** Initial open state when uncontrolled. */
2742
+ defaultOpen?: boolean | undefined;
2743
+ /** Called when the popover opens or closes. */
2744
+ onOpenChange?: ((open: boolean) => void) | undefined;
2745
+ /** Default `false`: the page stays interactive and focus may leave. `true` makes the page inert until it closes. */
2746
+ modal?: boolean | undefined;
2747
+ children?: ReactNode | undefined;
2748
+ }
2749
+ /** Owns the open state. Wrap a `Popover.Trigger` and a `Popover.Content`. */
2750
+ declare function Root$1({ open, defaultOpen, onOpenChange, modal, children }: PopoverRootProps): react.JSX.Element;
2751
+ interface PopoverTriggerProps extends Omit<Popover$1.Trigger.Props, 'className'> {
2752
+ className?: string | undefined;
2753
+ }
2754
+ /**
2755
+ * Opens the popover. With no `render` it is a secondary Button; pass any Button or IconButton through
2756
+ * `render`: `<Popover.Trigger render={<IconButton label="Sweeps: running" dot="success" />}>`.
2757
+ */
2758
+ declare function Trigger({ render, className, children, ...rest }: PopoverTriggerProps): react.JSX.Element;
2759
+ interface PopoverContentProps extends Omit<Popover$1.Popup.Props, 'className'> {
2760
+ /**
2761
+ * Side of the trigger it opens on. Default `bottom`. With no room it flips to the opposite side (`top` for `bottom`),
2762
+ * never to a perpendicular one; when neither side fits, it takes the roomier one and scrolls inside.
2763
+ */
2764
+ side?: PopoverSide | undefined;
2765
+ /** Alignment along that side. Default `center`. */
2766
+ align?: PopoverAlign | undefined;
2767
+ /** Distance from the trigger in px. Default 4, or 8 with `arrow`. */
2768
+ sideOffset?: number | undefined;
2769
+ /** Draws a tip pointing at the trigger. */
2770
+ arrow?: boolean | undefined;
2771
+ /**
2772
+ * What to position against instead of the `Popover.Trigger`: an element, a ref to one, a virtual element or a
2773
+ * function returning either. For a popover opened from elsewhere (a menu item, a row action) with a controlled
2774
+ * `Popover.Root open`. The panel is still portaled to `document.body`.
2775
+ */
2776
+ anchor?: Popover$1.Positioner.Props['anchor'];
2777
+ className?: string | undefined;
2778
+ }
2779
+ /** Portal, positioner and the panel. Any content goes inside; name it with `Popover.Title`. */
2780
+ declare function Content({ side, align, sideOffset, arrow, anchor, className, children, ...rest }: PopoverContentProps): react.JSX.Element;
2781
+ interface PopoverTitleProps extends Omit<Popover$1.Title.Props, 'className'> {
2782
+ className?: string | undefined;
2783
+ }
2784
+ /** Names the popover (`aria-labelledby`). A heading, `h2` by default. */
2785
+ declare function Title({ className, ...rest }: PopoverTitleProps): react.JSX.Element;
2786
+ interface PopoverDescriptionProps extends Omit<Popover$1.Description.Props, 'className'> {
2787
+ className?: string | undefined;
2788
+ }
2789
+ /** Describes the popover (`aria-describedby`). Muted text. */
2790
+ declare function Description({ className, ...rest }: PopoverDescriptionProps): react.JSX.Element;
2791
+ interface PopoverCloseProps extends Omit<Popover$1.Close.Props, 'className'> {
2792
+ className?: string | undefined;
2793
+ }
2794
+ /** With no children or `render`, the × in the corner. Otherwise wraps any Button: `<Popover.Close render={<Button variant="ghost" />}>Done</Popover.Close>`. */
2795
+ declare function Close({ className, children, render, ...rest }: PopoverCloseProps): react.JSX.Element;
2796
+ /** A non-modal panel anchored to a trigger, for a small form, a status summary or a legend. Built on Base UI's Popover. */
2797
+ declare const Popover: {
2798
+ Root: typeof Root$1;
2799
+ Trigger: typeof Trigger;
2800
+ Content: typeof Content;
2801
+ Title: typeof Title;
2802
+ Description: typeof Description;
2803
+ Close: typeof Close;
2804
+ };
2805
+
2806
+ interface BroomIconProps extends Omit<ComponentPropsWithRef<'svg'>, 'children'> {
2807
+ /** Sweeps back and forth while dust drifts. With `prefers-reduced-motion` it holds still and shows the dust. */
2808
+ sweeping?: boolean | undefined;
2809
+ /** 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. */
2810
+ size?: IconSize | 'display' | undefined;
2811
+ /** Gives the icon an accessible name (`role="img"`). Without it the icon is decorative and hidden from assistive tech. */
2812
+ title?: string | undefined;
2813
+ }
2814
+ /**
2815
+ * An animated broom on a 24×24 grid, for "a sweep is running". Inline SVG, because CSS cannot animate
2816
+ * inside a `<use>` clone. Strokes keep a fixed screen width at every size (`vector-effect: non-scaling-stroke`).
2817
+ * Decorative by default: say what is happening in the surrounding control's label ("Sweeps: running").
2818
+ */
2819
+ declare function BroomIcon({ sweeping, size, title, className, ...rest }: BroomIconProps): react.JSX.Element;
2820
+
2821
+ /** Which way the flow moved: `forward` slides the new step in from the inline end, `back` from the start. */
2822
+ type FlowDirection = 'forward' | 'back';
2823
+ /** Why the flow asked to close: Esc, or the × in the header. */
2824
+ type FlowCloseRequestReason = 'escape-key' | 'close-press';
2825
+ interface FullScreenFlowRootProps {
2826
+ /** Whether the flow is showing. Default `true`, for a flow that lives on its own route. */
2827
+ open?: boolean | undefined;
2828
+ /**
2829
+ * Esc and the header's × call this instead of closing. Show a leave confirmation (a nested `Dialog`),
2830
+ * then close by setting `open` to `false` or by navigating away. A press on the backdrop does nothing.
2831
+ */
2832
+ onRequestClose: (reason: FlowCloseRequestReason) => void;
2833
+ /** Enter (outside buttons, links, textareas and `[data-flow-keys="local"]`) and the forward arrow key call this. */
2834
+ onNext?: (() => void) | undefined;
2835
+ /** The back arrow key (outside form controls) calls this. */
2836
+ onBack?: (() => void) | undefined;
2837
+ /** A decorative layer behind everything, such as an illustration. Hidden from assistive tech. */
2838
+ decoration?: ReactNode | undefined;
2839
+ className?: string | undefined;
2840
+ /** `Header`, `Body` and `Footer`, in that order. */
2841
+ children?: ReactNode | undefined;
2842
+ }
2843
+ /**
2844
+ * A full-screen modal for a multi-step task, on `Dialog variant="fullscreen"`: focus is trapped, the page
2845
+ * behind is inert, and Esc goes to `onRequestClose`. Holds the polite live region that `Step` announces into.
2846
+ */
2847
+ declare function Root({ open, onRequestClose, onNext, onBack, decoration, className, children, }: FullScreenFlowRootProps): react.JSX.Element;
2848
+ interface FullScreenFlowHeaderProps extends Omit<ComponentPropsWithRef<'div'>, 'title'> {
2849
+ /** The flow's name ("Set up your search"). Labels the dialog. */
2850
+ title: ReactNode;
2851
+ /** A small mark before the title. Decorative. */
2852
+ logo?: ReactNode | undefined;
2853
+ /** Shown instead of `title` below 760px, where the progress drops to its own row: "4 of 10 · Roles". */
2854
+ compactTitle?: ReactNode | undefined;
2855
+ /** A status after the progress, such as a "Saved" tick. */
2856
+ status?: ReactNode | undefined;
2857
+ /** Name of the × button, which calls `onRequestClose('close-press')`. Default "Close". */
2858
+ closeLabel?: string | undefined;
2859
+ /** Usually a `FullScreenFlow.Progress`. */
2860
+ children?: ReactNode | undefined;
2861
+ }
2862
+ /** The top bar: logo and title, progress in the middle, a status, and the ×. Pinned; it never scrolls. */
2863
+ declare function Header({ title, logo, compactTitle, status, closeLabel, className, children, ...rest }: FullScreenFlowHeaderProps): react.JSX.Element;
2864
+ /** A chapter of the flow and how many numbered steps it holds. */
2865
+ interface FlowChapter {
2866
+ label: string;
2867
+ steps: number;
2868
+ }
2869
+ interface FullScreenFlowProgressProps extends Omit<ComponentPropsWithRef<'div'>, 'children'> {
2870
+ /** The chapters in order. Each draws one segment, as wide as its share of the steps. */
2871
+ chapters: readonly FlowChapter[];
2872
+ /**
2873
+ * The current step, counted from 1 across every chapter. `0` is before the first (a welcome screen);
2874
+ * anything past the total fills every segment. The current step counts as half done.
2875
+ */
2876
+ step: number;
2877
+ /** One line above the segments: "Step 4 of 10 · Roles · about 5 min left". Hidden below 760px. */
2878
+ label?: ReactNode | undefined;
2879
+ /** Name of the list of segments. Default "Progress". */
2880
+ listLabel?: string | undefined;
2881
+ }
2882
+ /** Segmented progress, one segment per chapter; the chapter holding the current step has `aria-current="step"`. */
2883
+ declare function Progress({ chapters, step, label, listLabel, className, ...rest }: FullScreenFlowProgressProps): react.JSX.Element;
2884
+ type FullScreenFlowBodyProps = ComponentPropsWithRef<'div'>;
2885
+ /** Between header and footer: a `Rail` (from 1000px) beside the `Viewport`. */
2886
+ declare function Body({ className, ...rest }: FullScreenFlowBodyProps): react.JSX.Element;
2887
+ interface FullScreenFlowRailProps extends ComponentPropsWithRef<'nav'> {
2888
+ /** A note under the steps, such as where answers can be changed later. Hidden on short screens. */
2889
+ footer?: ReactNode | undefined;
2890
+ }
2891
+ /** Every step by chapter, shown from 1000px. Holds `RailGroup`s of `RailItem`s. Named "Steps" unless `aria-label` says otherwise. */
2892
+ declare function Rail({ 'aria-label': ariaLabel, footer, className, children, ...rest }: FullScreenFlowRailProps): react.JSX.Element;
2893
+ interface FullScreenFlowRailGroupProps extends Omit<ComponentPropsWithRef<'div'>, 'title'> {
2894
+ /** The chapter name. */
2895
+ label: ReactNode;
2896
+ }
2897
+ /** One chapter in the rail: its name over a list of `RailItem`s. */
2898
+ declare function RailGroup({ label, className, children, ...rest }: FullScreenFlowRailGroupProps): react.JSX.Element;
2899
+ interface FullScreenFlowRailItemProps extends ComponentPropsWithRef<'button'> {
2900
+ /** The step on screen: `aria-current="step"` and the accent wash. */
2901
+ current?: boolean | undefined;
2902
+ /** Shows a check and adds `doneLabel` for assistive tech. */
2903
+ done?: boolean | undefined;
2904
+ /** Read after the label when `done`. Default "done". */
2905
+ doneLabel?: string | undefined;
2906
+ /** A small icon at the end of the row, e.g. "drafted for you". Give it a `title` if it carries meaning. */
2907
+ adornment?: ReactNode | undefined;
2908
+ }
2909
+ /** A step in the rail. A button: disable the steps not reached yet. */
2910
+ declare function RailItem({ current, done, doneLabel, adornment, type, className, children, ...rest }: FullScreenFlowRailItemProps): react.JSX.Element;
2911
+ interface FullScreenFlowViewportProps extends Omit<ComponentPropsWithRef<'div'>, 'children' | 'ref'> {
2912
+ /** Which way this change goes. Set it with the step: `back` when the person went back. Default `forward`. */
2913
+ direction?: FlowDirection | undefined;
2914
+ /** Exactly one `FullScreenFlow.Step`, keyed by step: `<FullScreenFlow.Step key={step.id} …>`. */
2915
+ children: ReactElement;
2916
+ }
2917
+ /**
2918
+ * The scrolling area that shows one step. When the child's `key` changes, the old step slides out and the
2919
+ * new one slides in (by `direction`; a short crossfade under reduced motion), the area scrolls to the top,
2920
+ * and the new step's title takes focus and is announced.
2921
+ */
2922
+ declare function Viewport({ direction, className, children, ...rest }: FullScreenFlowViewportProps): react.JSX.Element;
2923
+ interface FullScreenFlowStepProps extends Omit<ComponentPropsWithRef<'section'>, 'title'> {
2924
+ /** The step's heading, an `<h2>` that takes focus (`tabindex="-1"`) when the step arrives. */
2925
+ title: ReactNode;
2926
+ /** A short line above the title: "Your search · Step 4 of 10". */
2927
+ eyebrow?: ReactNode | undefined;
2928
+ /** Why this step is asked, under the title. */
2929
+ description?: ReactNode | undefined;
2930
+ /** What the live region says when the step arrives: "Step 4 of 10, Roles". Defaults to `title` when it is a string. */
2931
+ announcement?: string | undefined;
2932
+ }
2933
+ /** One step: eyebrow, title, description, then its content. Render it inside `Viewport` with a `key`. */
2934
+ declare function Step({ title, eyebrow, description, announcement, className, children, ...rest }: FullScreenFlowStepProps): react.JSX.Element;
2935
+ interface FullScreenFlowFooterProps extends ComponentPropsWithRef<'div'> {
2936
+ /** At the inline start: a Back button. */
2937
+ back?: ReactNode | undefined;
2938
+ /** Before the actions, from 760px: "Press Enter to continue". */
2939
+ hint?: ReactNode | undefined;
2940
+ /** The primary action, at the inline end; stretches below 520px. */
2941
+ children?: ReactNode | undefined;
2942
+ }
2943
+ /** The pinned bottom bar. Buttons in it are at least 44px tall and wide, and it clears the home indicator. */
2944
+ declare function Footer({ back, hint, className, children, ...rest }: FullScreenFlowFooterProps): react.JSX.Element;
2945
+ /**
2946
+ * A full-screen, multi-step flow (onboarding, setup) on `Dialog variant="fullscreen"`:
2947
+ * `Root` › `Header` (with `Progress`) · `Body` (`Rail` › `RailGroup` › `RailItem`, and `Viewport` › `Step`) · `Footer`.
2948
+ * The app owns the state (which step, which direction); this owns the surface, motion, focus and announcements.
2949
+ */
2950
+ declare const FullScreenFlow: {
2951
+ Root: typeof Root;
2952
+ Header: typeof Header;
2953
+ Progress: typeof Progress;
2954
+ Body: typeof Body;
2955
+ Rail: typeof Rail;
2956
+ RailGroup: typeof RailGroup;
2957
+ RailItem: typeof RailItem;
2958
+ Viewport: typeof Viewport;
2959
+ Step: typeof Step;
2960
+ Footer: typeof Footer;
2961
+ };
2962
+
2963
+ type ScoreTone = 'neutral' | 'accent' | 'success' | 'warning' | 'danger';
2964
+ type ScoreSize = 'sm' | 'md';
2965
+ type ScoreVariant = 'tile' | 'ring';
2966
+ interface ScoreProps extends Omit<ComponentPropsWithRef<'span'>, 'children'> {
2967
+ /**
2968
+ * The number shown, e.g. a fit score. Rendered as given; round it first. `null` means not scored yet: a neutral
2969
+ * tile (or an empty ring) with a dash, read as "{label}: not scored", and `tone` is ignored.
2970
+ */
2971
+ value: number | null;
2972
+ /** The top of the scale. Default 100. Fills the ring and ends the default accessible text. */
2973
+ max?: number | undefined;
2974
+ /** Colour. The system holds no thresholds: map the value to a tone in the app. Default `accent`. */
2975
+ tone?: ScoreTone | undefined;
2976
+ /** `tile` (default), a number on a tinted square, or `ring`, a donut for detail headers. */
2977
+ variant?: ScoreVariant | undefined;
2978
+ /** Tile size: `sm` 40px for list rows (default), `md` 48px. The ring is 64px. */
2979
+ size?: ScoreSize | undefined;
2980
+ /** A short word under the number: "fit". Visual only; say it in `label`. */
2981
+ caption?: ReactNode | undefined;
2982
+ /** What the number measures, read before it: "Fit score". Default "Score". */
2983
+ label?: string | undefined;
2984
+ /** The whole text assistive tech reads instead of the default "{label} {value} out of {max}" ("{label}: not scored" without a value). */
2985
+ valueText?: string | undefined;
2986
+ /** Shows the selected look (solid fill). Also on automatically inside a selected Card or an element with `aria-pressed="true"` or `aria-selected="true"`. */
2987
+ selected?: boolean | undefined;
2988
+ }
2989
+ /**
2990
+ * A score as a number on a tinted tile or inside a ring. The number and caption are visual; assistive tech reads one
2991
+ * visually hidden sentence ("Fit score 94 out of 100"), so the score is named without `aria-label` on a non-interactive
2992
+ * element and reads whole inside a row button. A `null` value is "not scored": a dash, no tone, no arc.
2993
+ */
2994
+ declare function Score({ value, max, tone, variant, size, caption, label, valueText, selected, className, style, ...rest }: ScoreProps): react.JSX.Element;
2995
+
2996
+ type ReasonTone = 'for' | 'against' | 'gap';
2997
+ type ReasonListSize = 'sm' | 'md';
2998
+ interface ReasonListProps extends ComponentPropsWithRef<'ul'> {
2999
+ /** What every item in the list is: `for` (a filled square), `against` (a bar) or `gap` (a hollow circle). Shape and colour both carry it. */
3000
+ tone: ReasonTone;
3001
+ /** `md` 14px (default) for a detail view, `sm` 12px for the compact form inside a card. */
3002
+ size?: ReasonListSize | undefined;
3003
+ /** A dashed rule above the list, for the compact form under a card's title. */
3004
+ divider?: boolean | undefined;
3005
+ }
3006
+ type ReasonListItemProps = ComponentPropsWithRef<'li'>;
3007
+ /**
3008
+ * A list of reasons with a marker shape per tone, so the meaning is never colour alone. Name the list with a
3009
+ * heading ("Why it fits", "Watch for") and point `aria-labelledby` at it: the heading says what the marker means.
3010
+ */
3011
+ declare function ReasonListRoot({ tone, size, divider, className, ...rest }: ReasonListProps): react.JSX.Element;
3012
+ /** One reason. `<strong>` inside picks out the key words in the default text colour. */
3013
+ declare function ReasonListItem({ className, ...rest }: ReasonListItemProps): react.JSX.Element;
3014
+ declare const ReasonList: typeof ReasonListRoot & {
3015
+ Item: typeof ReasonListItem;
3016
+ };
3017
+
3018
+ type WordDiffKind = 'same' | 'added' | 'removed';
3019
+ interface WordDiffPart {
3020
+ kind: WordDiffKind;
3021
+ text: string;
3022
+ }
3023
+ type WordDiffElement = 'p' | 'div' | 'span';
3024
+ type WordDiffSize = 'sm' | 'md';
3025
+ type WordDiffFamily = 'sans' | 'mono';
3026
+ interface WordDiffProps extends Omit<ComponentPropsWithRef<'p'>, 'children'> {
3027
+ /** Runs of unchanged, removed and added text, in reading order, whitespace included. Rendered exactly: joining every `text` gives the visible string. */
3028
+ parts: readonly WordDiffPart[];
3029
+ /** Element to render. Default `p`; `div` or `span` inside other text. */
3030
+ as?: WordDiffElement | undefined;
3031
+ /** `sm` 14px UI text (default) or `md` body copy. */
3032
+ size?: WordDiffSize | undefined;
3033
+ /**
3034
+ * `sans` prose (default), or `mono` for code and structured text (YAML, JSON, Markdown source): the mono face, no
3035
+ * reading-measure cap, and marks without side padding so columns stay aligned.
3036
+ */
3037
+ family?: WordDiffFamily | undefined;
3038
+ /** Screen reader word around added text: "[added: …]". Default "added". */
3039
+ addedLabel?: string | undefined;
3040
+ /** Screen reader word around removed text: "[removed: …]". Default "removed". */
3041
+ removedLabel?: string | undefined;
3042
+ }
3043
+ /**
3044
+ * A word-level diff as prose: removed text struck through and added text underlined, each on a tint, inside real
3045
+ * `<del>` and `<ins>` with "[removed: …]" / "[added: …]" for screen readers. The line, not the colour, carries the
3046
+ * meaning. Whitespace is preserved exactly (`white-space: pre-wrap`).
3047
+ */
3048
+ declare function WordDiff({ parts, as, size, family, addedLabel, removedLabel, className, ...rest }: WordDiffProps): react.DetailedReactHTMLElement<{
3049
+ slot?: string | undefined | undefined;
3050
+ style?: react.CSSProperties | undefined;
3051
+ title?: string | undefined | undefined;
3052
+ ref?: react.Ref<HTMLParagraphElement> | undefined;
3053
+ key?: react.Key | null | undefined;
3054
+ defaultChecked?: boolean | undefined | undefined;
3055
+ defaultValue?: string | number | readonly string[] | undefined;
3056
+ suppressContentEditableWarning?: boolean | undefined | undefined;
3057
+ suppressHydrationWarning?: boolean | undefined | undefined;
3058
+ accessKey?: string | undefined | undefined;
3059
+ autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
3060
+ autoFocus?: boolean | undefined | undefined;
3061
+ contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
3062
+ contextMenu?: string | undefined | undefined;
3063
+ dir?: string | undefined | undefined;
3064
+ draggable?: (boolean | "true" | "false") | undefined;
3065
+ enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
3066
+ hidden?: boolean | undefined | undefined;
3067
+ id?: string | undefined | undefined;
3068
+ lang?: string | undefined | undefined;
3069
+ nonce?: string | undefined | undefined;
3070
+ spellCheck?: (boolean | "true" | "false") | undefined;
3071
+ tabIndex?: number | undefined | undefined;
3072
+ translate?: "yes" | "no" | undefined | undefined;
3073
+ radioGroup?: string | undefined | undefined;
3074
+ role?: react.AriaRole | undefined;
3075
+ about?: string | undefined | undefined;
3076
+ content?: string | undefined | undefined;
3077
+ datatype?: string | undefined | undefined;
3078
+ inlist?: any;
3079
+ prefix?: string | undefined | undefined;
3080
+ property?: string | undefined | undefined;
3081
+ rel?: string | undefined | undefined;
3082
+ resource?: string | undefined | undefined;
3083
+ rev?: string | undefined | undefined;
3084
+ typeof?: string | undefined | undefined;
3085
+ vocab?: string | undefined | undefined;
3086
+ autoCorrect?: string | undefined | undefined;
3087
+ autoSave?: string | undefined | undefined;
3088
+ color?: string | undefined | undefined;
3089
+ itemProp?: string | undefined | undefined;
3090
+ itemScope?: boolean | undefined | undefined;
3091
+ itemType?: string | undefined | undefined;
3092
+ itemID?: string | undefined | undefined;
3093
+ itemRef?: string | undefined | undefined;
3094
+ results?: number | undefined | undefined;
3095
+ security?: string | undefined | undefined;
3096
+ unselectable?: "on" | "off" | undefined | undefined;
3097
+ popover?: "" | "auto" | "manual" | "hint" | undefined | undefined;
3098
+ popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
3099
+ popoverTarget?: string | undefined | undefined;
3100
+ inert?: boolean | undefined | undefined;
3101
+ inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
3102
+ is?: string | undefined | undefined;
3103
+ exportparts?: string | undefined | undefined;
3104
+ part?: string | undefined | undefined;
3105
+ "aria-activedescendant"?: string | undefined | undefined;
3106
+ "aria-atomic"?: (boolean | "true" | "false") | undefined;
3107
+ "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
3108
+ "aria-braillelabel"?: string | undefined | undefined;
3109
+ "aria-brailleroledescription"?: string | undefined | undefined;
3110
+ "aria-busy"?: (boolean | "true" | "false") | undefined;
3111
+ "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
3112
+ "aria-colcount"?: number | undefined | undefined;
3113
+ "aria-colindex"?: number | undefined | undefined;
3114
+ "aria-colindextext"?: string | undefined | undefined;
3115
+ "aria-colspan"?: number | undefined | undefined;
3116
+ "aria-controls"?: string | undefined | undefined;
3117
+ "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined | undefined;
3118
+ "aria-describedby"?: string | undefined | undefined;
3119
+ "aria-description"?: string | undefined | undefined;
3120
+ "aria-details"?: string | undefined | undefined;
3121
+ "aria-disabled"?: (boolean | "true" | "false") | undefined;
3122
+ "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined | undefined;
3123
+ "aria-errormessage"?: string | undefined | undefined;
3124
+ "aria-expanded"?: (boolean | "true" | "false") | undefined;
3125
+ "aria-flowto"?: string | undefined | undefined;
3126
+ "aria-grabbed"?: (boolean | "true" | "false") | undefined;
3127
+ "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined | undefined;
3128
+ "aria-hidden"?: (boolean | "true" | "false") | undefined;
3129
+ "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined | undefined;
3130
+ "aria-keyshortcuts"?: string | undefined | undefined;
3131
+ "aria-label"?: string | undefined | undefined;
3132
+ "aria-labelledby"?: string | undefined | undefined;
3133
+ "aria-level"?: number | undefined | undefined;
3134
+ "aria-live"?: "off" | "assertive" | "polite" | undefined | undefined;
3135
+ "aria-modal"?: (boolean | "true" | "false") | undefined;
3136
+ "aria-multiline"?: (boolean | "true" | "false") | undefined;
3137
+ "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
3138
+ "aria-orientation"?: "horizontal" | "vertical" | undefined | undefined;
3139
+ "aria-owns"?: string | undefined | undefined;
3140
+ "aria-placeholder"?: string | undefined | undefined;
3141
+ "aria-posinset"?: number | undefined | undefined;
3142
+ "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
3143
+ "aria-readonly"?: (boolean | "true" | "false") | undefined;
3144
+ "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined | undefined;
3145
+ "aria-required"?: (boolean | "true" | "false") | undefined;
3146
+ "aria-roledescription"?: string | undefined | undefined;
3147
+ "aria-rowcount"?: number | undefined | undefined;
3148
+ "aria-rowindex"?: number | undefined | undefined;
3149
+ "aria-rowindextext"?: string | undefined | undefined;
3150
+ "aria-rowspan"?: number | undefined | undefined;
3151
+ "aria-selected"?: (boolean | "true" | "false") | undefined;
3152
+ "aria-setsize"?: number | undefined | undefined;
3153
+ "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined | undefined;
3154
+ "aria-valuemax"?: number | undefined | undefined;
3155
+ "aria-valuemin"?: number | undefined | undefined;
3156
+ "aria-valuenow"?: number | undefined | undefined;
3157
+ "aria-valuetext"?: string | undefined | undefined;
3158
+ dangerouslySetInnerHTML?: {
3159
+ __html: string | TrustedHTML;
3160
+ } | undefined | undefined;
3161
+ onCopy?: react.ClipboardEventHandler<HTMLParagraphElement> | undefined;
3162
+ onCopyCapture?: react.ClipboardEventHandler<HTMLParagraphElement> | undefined;
3163
+ onCut?: react.ClipboardEventHandler<HTMLParagraphElement> | undefined;
3164
+ onCutCapture?: react.ClipboardEventHandler<HTMLParagraphElement> | undefined;
3165
+ onPaste?: react.ClipboardEventHandler<HTMLParagraphElement> | undefined;
3166
+ onPasteCapture?: react.ClipboardEventHandler<HTMLParagraphElement> | undefined;
3167
+ onCompositionEnd?: react.CompositionEventHandler<HTMLParagraphElement> | undefined;
3168
+ onCompositionEndCapture?: react.CompositionEventHandler<HTMLParagraphElement> | undefined;
3169
+ onCompositionStart?: react.CompositionEventHandler<HTMLParagraphElement> | undefined;
3170
+ onCompositionStartCapture?: react.CompositionEventHandler<HTMLParagraphElement> | undefined;
3171
+ onCompositionUpdate?: react.CompositionEventHandler<HTMLParagraphElement> | undefined;
3172
+ onCompositionUpdateCapture?: react.CompositionEventHandler<HTMLParagraphElement> | undefined;
3173
+ onFocus?: react.FocusEventHandler<HTMLParagraphElement> | undefined;
3174
+ onFocusCapture?: react.FocusEventHandler<HTMLParagraphElement> | undefined;
3175
+ onBlur?: react.FocusEventHandler<HTMLParagraphElement> | undefined;
3176
+ onBlurCapture?: react.FocusEventHandler<HTMLParagraphElement> | undefined;
3177
+ onChange?: react.ChangeEventHandler<HTMLParagraphElement, Element> | undefined;
3178
+ onChangeCapture?: react.ChangeEventHandler<HTMLParagraphElement, Element> | undefined;
3179
+ onBeforeInput?: react.InputEventHandler<HTMLParagraphElement> | undefined;
3180
+ onBeforeInputCapture?: react.InputEventHandler<HTMLParagraphElement> | undefined;
3181
+ onInput?: react.InputEventHandler<HTMLParagraphElement> | undefined;
3182
+ onInputCapture?: react.InputEventHandler<HTMLParagraphElement> | undefined;
3183
+ onReset?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
3184
+ onResetCapture?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
3185
+ onSubmit?: react.SubmitEventHandler<HTMLParagraphElement> | undefined;
3186
+ onSubmitCapture?: react.SubmitEventHandler<HTMLParagraphElement> | undefined;
3187
+ onInvalid?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
3188
+ onInvalidCapture?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
3189
+ onLoad?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
3190
+ onLoadCapture?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
3191
+ onError?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
3192
+ onErrorCapture?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
3193
+ onKeyDown?: react.KeyboardEventHandler<HTMLParagraphElement> | undefined;
3194
+ onKeyDownCapture?: react.KeyboardEventHandler<HTMLParagraphElement> | undefined;
3195
+ onKeyPress?: react.KeyboardEventHandler<HTMLParagraphElement> | undefined;
3196
+ onKeyPressCapture?: react.KeyboardEventHandler<HTMLParagraphElement> | undefined;
3197
+ onKeyUp?: react.KeyboardEventHandler<HTMLParagraphElement> | undefined;
3198
+ onKeyUpCapture?: react.KeyboardEventHandler<HTMLParagraphElement> | undefined;
3199
+ onAbort?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
3200
+ onAbortCapture?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
3201
+ onCanPlay?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
3202
+ onCanPlayCapture?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
3203
+ onCanPlayThrough?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
3204
+ onCanPlayThroughCapture?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
3205
+ onDurationChange?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
3206
+ onDurationChangeCapture?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
3207
+ onEmptied?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
3208
+ onEmptiedCapture?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
3209
+ onEncrypted?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
3210
+ onEncryptedCapture?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
3211
+ onEnded?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
3212
+ onEndedCapture?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
3213
+ onLoadedData?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
3214
+ onLoadedDataCapture?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
3215
+ onLoadedMetadata?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
3216
+ onLoadedMetadataCapture?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
3217
+ onLoadStart?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
3218
+ onLoadStartCapture?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
3219
+ onPause?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
3220
+ onPauseCapture?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
3221
+ onPlay?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
3222
+ onPlayCapture?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
3223
+ onPlaying?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
3224
+ onPlayingCapture?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
3225
+ onProgress?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
3226
+ onProgressCapture?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
3227
+ onRateChange?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
3228
+ onRateChangeCapture?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
3229
+ onSeeked?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
3230
+ onSeekedCapture?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
3231
+ onSeeking?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
3232
+ onSeekingCapture?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
3233
+ onStalled?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
3234
+ onStalledCapture?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
3235
+ onSuspend?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
3236
+ onSuspendCapture?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
3237
+ onTimeUpdate?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
3238
+ onTimeUpdateCapture?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
3239
+ onVolumeChange?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
3240
+ onVolumeChangeCapture?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
3241
+ onWaiting?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
3242
+ onWaitingCapture?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
3243
+ onAuxClick?: react.MouseEventHandler<HTMLParagraphElement> | undefined;
3244
+ onAuxClickCapture?: react.MouseEventHandler<HTMLParagraphElement> | undefined;
3245
+ onClick?: react.MouseEventHandler<HTMLParagraphElement> | undefined;
3246
+ onClickCapture?: react.MouseEventHandler<HTMLParagraphElement> | undefined;
3247
+ onContextMenu?: react.MouseEventHandler<HTMLParagraphElement> | undefined;
3248
+ onContextMenuCapture?: react.MouseEventHandler<HTMLParagraphElement> | undefined;
3249
+ onDoubleClick?: react.MouseEventHandler<HTMLParagraphElement> | undefined;
3250
+ onDoubleClickCapture?: react.MouseEventHandler<HTMLParagraphElement> | undefined;
3251
+ onDrag?: react.DragEventHandler<HTMLParagraphElement> | undefined;
3252
+ onDragCapture?: react.DragEventHandler<HTMLParagraphElement> | undefined;
3253
+ onDragEnd?: react.DragEventHandler<HTMLParagraphElement> | undefined;
3254
+ onDragEndCapture?: react.DragEventHandler<HTMLParagraphElement> | undefined;
3255
+ onDragEnter?: react.DragEventHandler<HTMLParagraphElement> | undefined;
3256
+ onDragEnterCapture?: react.DragEventHandler<HTMLParagraphElement> | undefined;
3257
+ onDragExit?: react.DragEventHandler<HTMLParagraphElement> | undefined;
3258
+ onDragExitCapture?: react.DragEventHandler<HTMLParagraphElement> | undefined;
3259
+ onDragLeave?: react.DragEventHandler<HTMLParagraphElement> | undefined;
3260
+ onDragLeaveCapture?: react.DragEventHandler<HTMLParagraphElement> | undefined;
3261
+ onDragOver?: react.DragEventHandler<HTMLParagraphElement> | undefined;
3262
+ onDragOverCapture?: react.DragEventHandler<HTMLParagraphElement> | undefined;
3263
+ onDragStart?: react.DragEventHandler<HTMLParagraphElement> | undefined;
3264
+ onDragStartCapture?: react.DragEventHandler<HTMLParagraphElement> | undefined;
3265
+ onDrop?: react.DragEventHandler<HTMLParagraphElement> | undefined;
3266
+ onDropCapture?: react.DragEventHandler<HTMLParagraphElement> | undefined;
3267
+ onMouseDown?: react.MouseEventHandler<HTMLParagraphElement> | undefined;
3268
+ onMouseDownCapture?: react.MouseEventHandler<HTMLParagraphElement> | undefined;
3269
+ onMouseEnter?: react.MouseEventHandler<HTMLParagraphElement> | undefined;
3270
+ onMouseLeave?: react.MouseEventHandler<HTMLParagraphElement> | undefined;
3271
+ onMouseMove?: react.MouseEventHandler<HTMLParagraphElement> | undefined;
3272
+ onMouseMoveCapture?: react.MouseEventHandler<HTMLParagraphElement> | undefined;
3273
+ onMouseOut?: react.MouseEventHandler<HTMLParagraphElement> | undefined;
3274
+ onMouseOutCapture?: react.MouseEventHandler<HTMLParagraphElement> | undefined;
3275
+ onMouseOver?: react.MouseEventHandler<HTMLParagraphElement> | undefined;
3276
+ onMouseOverCapture?: react.MouseEventHandler<HTMLParagraphElement> | undefined;
3277
+ onMouseUp?: react.MouseEventHandler<HTMLParagraphElement> | undefined;
3278
+ onMouseUpCapture?: react.MouseEventHandler<HTMLParagraphElement> | undefined;
3279
+ onSelect?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
3280
+ onSelectCapture?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
3281
+ onTouchCancel?: react.TouchEventHandler<HTMLParagraphElement> | undefined;
3282
+ onTouchCancelCapture?: react.TouchEventHandler<HTMLParagraphElement> | undefined;
3283
+ onTouchEnd?: react.TouchEventHandler<HTMLParagraphElement> | undefined;
3284
+ onTouchEndCapture?: react.TouchEventHandler<HTMLParagraphElement> | undefined;
3285
+ onTouchMove?: react.TouchEventHandler<HTMLParagraphElement> | undefined;
3286
+ onTouchMoveCapture?: react.TouchEventHandler<HTMLParagraphElement> | undefined;
3287
+ onTouchStart?: react.TouchEventHandler<HTMLParagraphElement> | undefined;
3288
+ onTouchStartCapture?: react.TouchEventHandler<HTMLParagraphElement> | undefined;
3289
+ onPointerDown?: react.PointerEventHandler<HTMLParagraphElement> | undefined;
3290
+ onPointerDownCapture?: react.PointerEventHandler<HTMLParagraphElement> | undefined;
3291
+ onPointerMove?: react.PointerEventHandler<HTMLParagraphElement> | undefined;
3292
+ onPointerMoveCapture?: react.PointerEventHandler<HTMLParagraphElement> | undefined;
3293
+ onPointerUp?: react.PointerEventHandler<HTMLParagraphElement> | undefined;
3294
+ onPointerUpCapture?: react.PointerEventHandler<HTMLParagraphElement> | undefined;
3295
+ onPointerCancel?: react.PointerEventHandler<HTMLParagraphElement> | undefined;
3296
+ onPointerCancelCapture?: react.PointerEventHandler<HTMLParagraphElement> | undefined;
3297
+ onPointerEnter?: react.PointerEventHandler<HTMLParagraphElement> | undefined;
3298
+ onPointerLeave?: react.PointerEventHandler<HTMLParagraphElement> | undefined;
3299
+ onPointerOver?: react.PointerEventHandler<HTMLParagraphElement> | undefined;
3300
+ onPointerOverCapture?: react.PointerEventHandler<HTMLParagraphElement> | undefined;
3301
+ onPointerOut?: react.PointerEventHandler<HTMLParagraphElement> | undefined;
3302
+ onPointerOutCapture?: react.PointerEventHandler<HTMLParagraphElement> | undefined;
3303
+ onGotPointerCapture?: react.PointerEventHandler<HTMLParagraphElement> | undefined;
3304
+ onGotPointerCaptureCapture?: react.PointerEventHandler<HTMLParagraphElement> | undefined;
3305
+ onLostPointerCapture?: react.PointerEventHandler<HTMLParagraphElement> | undefined;
3306
+ onLostPointerCaptureCapture?: react.PointerEventHandler<HTMLParagraphElement> | undefined;
3307
+ onScroll?: react.UIEventHandler<HTMLParagraphElement> | undefined;
3308
+ onScrollCapture?: react.UIEventHandler<HTMLParagraphElement> | undefined;
3309
+ onScrollEnd?: react.UIEventHandler<HTMLParagraphElement> | undefined;
3310
+ onScrollEndCapture?: react.UIEventHandler<HTMLParagraphElement> | undefined;
3311
+ onWheel?: react.WheelEventHandler<HTMLParagraphElement> | undefined;
3312
+ onWheelCapture?: react.WheelEventHandler<HTMLParagraphElement> | undefined;
3313
+ onAnimationStart?: react.AnimationEventHandler<HTMLParagraphElement> | undefined;
3314
+ onAnimationStartCapture?: react.AnimationEventHandler<HTMLParagraphElement> | undefined;
3315
+ onAnimationEnd?: react.AnimationEventHandler<HTMLParagraphElement> | undefined;
3316
+ onAnimationEndCapture?: react.AnimationEventHandler<HTMLParagraphElement> | undefined;
3317
+ onAnimationIteration?: react.AnimationEventHandler<HTMLParagraphElement> | undefined;
3318
+ onAnimationIterationCapture?: react.AnimationEventHandler<HTMLParagraphElement> | undefined;
3319
+ onToggle?: react.ToggleEventHandler<HTMLParagraphElement> | undefined;
3320
+ onBeforeToggle?: react.ToggleEventHandler<HTMLParagraphElement> | undefined;
3321
+ onTransitionCancel?: react.TransitionEventHandler<HTMLParagraphElement> | undefined;
3322
+ onTransitionCancelCapture?: react.TransitionEventHandler<HTMLParagraphElement> | undefined;
3323
+ onTransitionEnd?: react.TransitionEventHandler<HTMLParagraphElement> | undefined;
3324
+ onTransitionEndCapture?: react.TransitionEventHandler<HTMLParagraphElement> | undefined;
3325
+ onTransitionRun?: react.TransitionEventHandler<HTMLParagraphElement> | undefined;
3326
+ onTransitionRunCapture?: react.TransitionEventHandler<HTMLParagraphElement> | undefined;
3327
+ onTransitionStart?: react.TransitionEventHandler<HTMLParagraphElement> | undefined;
3328
+ onTransitionStartCapture?: react.TransitionEventHandler<HTMLParagraphElement> | undefined;
3329
+ 'data-family'?: string;
3330
+ className: string;
3331
+ 'data-size': WordDiffSize;
3332
+ }, HTMLParagraphElement>;
3333
+
3334
+ interface QuoteProps extends ComponentPropsWithRef<'figure'> {
3335
+ /** Who said it, shown as a small overline before the words: "You". */
3336
+ label: ReactNode;
3337
+ /** The quoted words. Phrasing content: the quote renders inline after the label. */
3338
+ children: ReactNode;
3339
+ }
3340
+ /**
3341
+ * Someone's own words echoed back on the accent wash, with who said them: the instruction you gave above the
3342
+ * rewrite it produced. A `<figure>` whose `<figcaption>` is the label and whose `<blockquote>` is the text, so the
3343
+ * attribution is part of the semantics, not just the styling.
3344
+ */
3345
+ declare function Quote({ label, className, children, ...rest }: QuoteProps): react.JSX.Element;
3346
+
3347
+ type AvatarSize = 'xs' | 'sm' | 'md' | 'lg';
3348
+ /**
3349
+ * One or two capital letters for a person: the first letters of the first and last words of a name, or, for an email
3350
+ * address, of its local part split on `.`, `_`, `+`, `-` and digits. Empty when there is nothing to take a letter from.
3351
+ */
3352
+ declare function avatarInitials(name: string | null | undefined): string;
3353
+ interface AvatarLookProps {
3354
+ /** The person's name, or their email address when there is no name. The initials come from it. (On AvatarButton it is not the form `name` attribute.) */
3355
+ name?: string | null | undefined;
3356
+ /** Overrides the initials taken from `name`. Shown as given, up to two characters. */
3357
+ initials?: string | undefined;
3358
+ /** A picture. The initials show until it loads, and stay if it fails. */
3359
+ src?: string | undefined;
3360
+ /** `xs` 24px (beside text), `sm` 32, `md` 40 (default) and `lg` 48 follow the control heights, compact density included. */
3361
+ size?: AvatarSize | undefined;
3362
+ }
3363
+ interface AvatarProps extends AvatarLookProps, Omit<ComponentPropsWithRef<'span'>, 'children'> {
3364
+ /** Gives the avatar an accessible name (`role="img"`), e.g. the person's name where it is not written next to it. Without it the avatar is decorative and hidden from assistive tech. */
3365
+ label?: string | undefined;
3366
+ }
3367
+ /**
3368
+ * A person: their picture, else their initials on a brand tint inside a 1px ring (the ring is what keeps the circle
3369
+ * visible on every surface). Decorative unless `label` is given. For a clickable avatar use `AvatarButton`.
3370
+ */
3371
+ declare function Avatar({ name, initials, src, size, label, className, ...rest }: AvatarProps): react.JSX.Element;
3372
+ interface AvatarButtonProps extends AvatarLookProps, Omit<useRender.ComponentProps<'button'>, 'children' | 'aria-label' | 'name'> {
3373
+ /** Required. The button's accessible name, e.g. `Account: Robin Test`; the avatar inside is decorative. */
3374
+ label: string;
3375
+ }
3376
+ /**
3377
+ * A round button that is an Avatar, for an account menu or a profile link. The ring thickens on hover and while its
3378
+ * popup is open; the focus ring is the system's; on touch the hit area is at least 44px. Compose it as a trigger:
3379
+ * `<Menu.Trigger render={<AvatarButton label="Account: Robin Test" name="Robin Test" size="sm" />} />`, or make it a
3380
+ * link with `render={<a href="/profile" />}`.
3381
+ */
3382
+ declare function AvatarButton({ label, name, initials, src, size, type, className, render, ref, ...rest }: AvatarButtonProps): react.ReactElement<unknown, string | react.JSXElementConstructor<any>>;
3383
+
2007
3384
  declare const version = "0.1.1";
2008
3385
 
2009
- export { ArchiveIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, 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, Stat, SunIcon, Switch, Table, Tabs, Text, Textarea, ThumbsDownIcon, ThumbsUpIcon, Toolbar, Tooltip, TrashIcon, UndoIcon, UserIcon, WarningIcon, XIcon, iconNames, version };
2010
- 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, StatDeltaTone, StatElement, StatProps, StatSize, StatTrend, StatVariant, SwitchProps, TableAlign, TableBodyProps, TableCaptionProps, TableCellProps, TableDensity, TableFootProps, TableHeadProps, TableHeaderProps, TableRootProps, TableRowProps, TableSortDirection, TabsListProps, TabsPanelProps, TabsRootProps, TabsTabProps, TextAlign, TextElement, TextProps, TextSize, TextTone, TextWeight, TextareaProps, ToolbarButtonProps, ToolbarGroupProps, ToolbarRootProps, ToolbarSeparatorProps, ToolbarSpacerProps, TooltipAlign, TooltipProps, TooltipSide };
3386
+ export { ArchiveIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, Avatar, AvatarButton, 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, EyeOffIcon, FileInput, FilePreviewDialog, FilterIcon, FlagIcon, FullScreenFlow, Heading, Icon, IconButton, InboxIcon, InfoIcon, Inline, Input, Kbd, LinkIcon, MailIcon, MapPinIcon, Menu, MenuIcon, MinusIcon, MoonIcon, MoreHorizontalIcon, MoreVerticalIcon, PauseIcon, PlayIcon, PlusIcon, Popover, PriorityNav, Progress$1 as Progress, Quote, ReasonList, RefreshIcon, Score, SearchIcon, Select, SelectionBar, SettingsIcon, Skeleton, Spinner, Stack, StarIcon, Stat, SunIcon, Switch, Table, Tabs, Text, Textarea, ThumbsDownIcon, ThumbsUpIcon, Toast, Toolbar, Tooltip, TrashIcon, UndoIcon, UserIcon, WarningIcon, WordDiff, XIcon, avatarInitials, iconNames, useRowSelection, useToast, version };
3387
+ export type { AvatarButtonProps, AvatarProps, AvatarSize, BadgeProps, BadgeSize, BadgeTone, BadgeVariant, BannerProps, BannerTone, BroomIconProps, ButtonProps, ButtonSize, ButtonVariant, CardElement, CardPadding, CardProps, CardVariant, CheckboxProps, ChipProps, ChipSize, ChipTone, ControlSize, DialogActionsProps, DialogBodyProps, DialogCloseProps, DialogCloseRequestReason, DialogContentProps, DialogDescriptionProps, DialogRootProps, DialogSize, DialogTitleProps, DialogVariant, DisclosureProps, EmptyStateElement, EmptyStateProps, EmptyStateSize, FieldProps, FileInputProps, FilePreviewDialogProps, FlowChapter, FlowCloseRequestReason, FlowDirection, FullScreenFlowBodyProps, FullScreenFlowFooterProps, FullScreenFlowHeaderProps, FullScreenFlowProgressProps, FullScreenFlowRailGroupProps, FullScreenFlowRailItemProps, FullScreenFlowRailProps, FullScreenFlowRootProps, FullScreenFlowStepProps, FullScreenFlowViewportProps, 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, QuoteProps, ReasonListItemProps, ReasonListProps, ReasonListSize, ReasonTone, RowSelection, RowSelectionHeaderState, ScoreProps, ScoreSize, ScoreTone, ScoreVariant, 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, TextFamily, TextProps, TextSize, TextTone, TextWeight, TextareaProps, TextareaVariant, ToastApi, ToastOptions, ToastProviderProps, ToastTone, ToolbarButtonProps, ToolbarGroupProps, ToolbarLinkProps, ToolbarRootProps, ToolbarSeparatorProps, ToolbarSpacerProps, TooltipAlign, TooltipProps, TooltipSide, WordDiffElement, WordDiffKind, WordDiffPart, WordDiffProps, WordDiffSize };