@salemcobalt/ui 0.2.0-rc.14 → 0.2.0-rc.16

package/dist/index.d.ts

@@ -25,7 +25,7 @@ interface ButtonProps extends ComponentPropsWithRef<'button'> {
     loading?: boolean | undefined;
     /** Stretches to the container. */
     fullWidth?: boolean | undefined;
-    /** A keyboard hint after the label: `shortcut={<Kbd>N</Kbd>}`. Hidden from assistive tech; announce the key with `aria-keyshortcuts="n"`. */
+    /** 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). */
     shortcut?: ReactNode | undefined;
     /** 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. */
     iconOnly?: boolean | undefined;
@@ -49,17 +49,17 @@ interface BadgeProps extends ComponentPropsWithRef<'span'> {
 /** One or two words of status beside a thing. Text only; never clickable. */
 declare function Badge({ tone, variant, size, dot, className, children, ...rest }: BadgeProps): react.JSX.Element;
 
-type CardVariant = 'outlined' | 'elevated' | 'filled';
+type CardVariant = 'outlined' | 'elevated' | 'filled' | 'plain';
 type CardPadding = 'none' | 'sm' | 'md' | 'lg';
 type CardElement = 'div' | 'article' | 'section' | 'nav' | 'li' | 'a' | 'button';
 interface CardProps extends useRender.ComponentProps<'div'> {
-    /** `outlined` hairline (default), `elevated` floats, `filled` is an inset region. */
+    /** `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. */
     variant?: CardVariant | undefined;
     /** `none`, `sm` 12px, `md` 16px (default), `lg` 24px. */
     padding?: CardPadding | undefined;
     /** Hover lifts the card and the whole card is the target. Render it as `a` or `button` so it is a real control. */
     interactive?: boolean | undefined;
-    /** Accent border with a 1px inset, for the active row or chosen option. */
+    /** 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`. */
     selected?: boolean | undefined;
     /** Element to render when `render` is not given. Use `nav` (with an `aria-label`) for a carded navigation landmark. */
     as?: CardElement | undefined;
@@ -1353,17 +1353,17 @@ interface ProgressProps extends Omit<ComponentPropsWithRef<'div'>, 'children'> {
 declare function Progress$1({ value, max, min, label, valueText, showValue, tone, size, variant, className, ...rest }: ProgressProps): react.JSX.Element;
 
 type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
-type HeadingSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl';
+type HeadingSize = 'overline' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl';
 type HeadingElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div' | 'span' | 'p';
 type TextTone = 'default' | 'muted' | 'subtle' | 'accent' | 'success' | 'warning' | 'danger' | 'info';
 interface HeadingProps extends ComponentPropsWithRef<'h2'> {
     /** The outline level, rendered as `h1`–`h6`. Default 2. */
     level?: HeadingLevel | undefined;
-    /** Visual size from the type scale, independent of the level. Defaults by level: 3xl, 2xl, xl, lg, md, sm. */
+    /** 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"). */
     size?: HeadingSize | undefined;
     /** Render a different element and keep the look; `div`/`span` for a card title that is not an outline entry. */
     as?: HeadingElement | undefined;
-    /** Colour. Default is the text colour. */
+    /** Colour. Default is the text colour; `muted` for `size="overline"`. */
     tone?: TextTone | undefined;
     /** One line with an ellipsis. */
     truncate?: boolean | undefined;
@@ -1660,6 +1660,7 @@ declare function Heading({ level, size, as, tone, truncate, className, ...rest }
 type TextSize = 'xs' | 'sm' | 'md' | 'lg';
 type TextWeight = 'regular' | 'medium' | 'semibold';
 type TextAlign = 'start' | 'center' | 'end';
+type TextFamily = 'sans' | 'mono';
 type TextElement = 'p' | 'span' | 'div' | 'label' | 'li' | 'dt' | 'dd' | 'strong' | 'em' | 'small' | 'time' | 'figcaption' | 'legend';
 interface TextProps extends ComponentPropsWithRef<'p'> {
     /** Element to render. Default `p`; `span` inside other text. */
@@ -1674,9 +1675,11 @@ interface TextProps extends ComponentPropsWithRef<'p'> {
     truncate?: boolean | number | undefined;
     /** Tabular figures, for numbers that line up in columns. */
     numeric?: boolean | undefined;
+    /** `sans` (default) or `mono` for data next to prose: row metadata, dates, counts ("Quillstack · 5 h"). */
+    family?: TextFamily | undefined;
 }
 /** Running text and labels from the type scale. Parents own spacing: Text has no margins. */
-declare function Text({ as, size, tone, weight, align, truncate, numeric, className, style, ...rest }: TextProps): ReactElement;
+declare function Text({ as, size, tone, weight, align, truncate, numeric, family, className, style, ...rest }: TextProps): ReactElement;
 
 /** The header checkbox: nothing, some or every row selected. */
 type RowSelectionHeaderState = 'none' | 'some' | 'all';
@@ -2642,6 +2645,14 @@ interface PriorityNavItem {
     id?: string | undefined;
     /** The page being shown: `aria-current="page"`, and the link never collapses into "More". */
     current?: boolean | undefined;
+    /**
+     * A small count (`2`) or `'dot'` after the label: something waiting there. `0` shows nothing. Visual only; say
+     * what it means in `badgeLabel`. While the item is collapsed, "More" shows the summed count (or a dot) and adds
+     * the label to its accessible name.
+     */
+    badge?: number | 'dot' | undefined;
+    /** 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. */
+    badgeLabel?: string | undefined;
 }
 /** What `renderLink` receives: spread it onto your link component. */
 interface PriorityNavLinkProps {
@@ -2901,7 +2912,384 @@ declare const FullScreenFlow: {
     Footer: typeof Footer;
 };
 
+type ScoreTone = 'neutral' | 'accent' | 'success' | 'warning' | 'danger';
+type ScoreSize = 'sm' | 'md';
+type ScoreVariant = 'tile' | 'ring';
+interface ScoreProps extends Omit<ComponentPropsWithRef<'span'>, 'children'> {
+    /**
+     * The number shown, e.g. a fit score. Rendered as given; round it first. `null` means not scored yet: a neutral
+     * tile (or an empty ring) with a dash, read as "{label}: not scored", and `tone` is ignored.
+     */
+    value: number | null;
+    /** The top of the scale. Default 100. Fills the ring and ends the default accessible text. */
+    max?: number | undefined;
+    /** Colour. The system holds no thresholds: map the value to a tone in the app. Default `accent`. */
+    tone?: ScoreTone | undefined;
+    /** `tile` (default), a number on a tinted square, or `ring`, a donut for detail headers. */
+    variant?: ScoreVariant | undefined;
+    /** Tile size: `sm` 40px for list rows (default), `md` 48px. The ring is 64px. */
+    size?: ScoreSize | undefined;
+    /** A short word under the number: "fit". Visual only; say it in `label`. */
+    caption?: ReactNode | undefined;
+    /** What the number measures, read before it: "Fit score". Default "Score". */
+    label?: string | undefined;
+    /** The whole text assistive tech reads instead of the default "{label} {value} out of {max}" ("{label}: not scored" without a value). */
+    valueText?: string | undefined;
+    /** Shows the selected look (solid fill). Also on automatically inside a selected Card or an element with `aria-pressed="true"` or `aria-selected="true"`. */
+    selected?: boolean | undefined;
+}
+/**
+ * A score as a number on a tinted tile or inside a ring. The number and caption are visual; assistive tech reads one
+ * visually hidden sentence ("Fit score 94 out of 100"), so the score is named without `aria-label` on a non-interactive
+ * element and reads whole inside a row button. A `null` value is "not scored": a dash, no tone, no arc.
+ */
+declare function Score({ value, max, tone, variant, size, caption, label, valueText, selected, className, style, ...rest }: ScoreProps): react.JSX.Element;
+
+type ReasonTone = 'for' | 'against' | 'gap';
+type ReasonListSize = 'sm' | 'md';
+interface ReasonListProps extends ComponentPropsWithRef<'ul'> {
+    /** 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. */
+    tone: ReasonTone;
+    /** `md` 14px (default) for a detail view, `sm` 12px for the compact form inside a card. */
+    size?: ReasonListSize | undefined;
+    /** A dashed rule above the list, for the compact form under a card's title. */
+    divider?: boolean | undefined;
+}
+type ReasonListItemProps = ComponentPropsWithRef<'li'>;
+/**
+ * A list of reasons with a marker shape per tone, so the meaning is never colour alone. Name the list with a
+ * heading ("Why it fits", "Watch for") and point `aria-labelledby` at it: the heading says what the marker means.
+ */
+declare function ReasonListRoot({ tone, size, divider, className, ...rest }: ReasonListProps): react.JSX.Element;
+/** One reason. `<strong>` inside picks out the key words in the default text colour. */
+declare function ReasonListItem({ className, ...rest }: ReasonListItemProps): react.JSX.Element;
+declare const ReasonList: typeof ReasonListRoot & {
+    Item: typeof ReasonListItem;
+};
+
+type WordDiffKind = 'same' | 'added' | 'removed';
+interface WordDiffPart {
+    kind: WordDiffKind;
+    text: string;
+}
+type WordDiffElement = 'p' | 'div' | 'span';
+type WordDiffSize = 'sm' | 'md';
+interface WordDiffProps extends Omit<ComponentPropsWithRef<'p'>, 'children'> {
+    /** Runs of unchanged, removed and added text, in reading order, whitespace included. Rendered exactly: joining every `text` gives the visible string. */
+    parts: readonly WordDiffPart[];
+    /** Element to render. Default `p`; `div` or `span` inside other text. */
+    as?: WordDiffElement | undefined;
+    /** `sm` 14px UI text (default) or `md` body copy. */
+    size?: WordDiffSize | undefined;
+    /** Screen reader word around added text: "[added: …]". Default "added". */
+    addedLabel?: string | undefined;
+    /** Screen reader word around removed text: "[removed: …]". Default "removed". */
+    removedLabel?: string | undefined;
+}
+/**
+ * A word-level diff as prose: removed text struck through and added text underlined, each on a tint, inside real
+ * `<del>` and `<ins>` with "[removed: …]" / "[added: …]" for screen readers. The line, not the colour, carries the
+ * meaning. Whitespace is preserved exactly (`white-space: pre-wrap`).
+ */
+declare function WordDiff({ parts, as, size, addedLabel, removedLabel, className, ...rest }: WordDiffProps): react.DetailedReactHTMLElement<{
+    slot?: string | undefined | undefined;
+    style?: react.CSSProperties | undefined;
+    title?: string | undefined | undefined;
+    ref?: react.Ref<HTMLParagraphElement> | undefined;
+    key?: react.Key | null | undefined;
+    defaultChecked?: boolean | undefined | undefined;
+    defaultValue?: string | number | readonly string[] | undefined;
+    suppressContentEditableWarning?: boolean | undefined | undefined;
+    suppressHydrationWarning?: boolean | undefined | undefined;
+    accessKey?: string | undefined | undefined;
+    autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
+    autoFocus?: boolean | undefined | undefined;
+    contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
+    contextMenu?: string | undefined | undefined;
+    dir?: string | undefined | undefined;
+    draggable?: (boolean | "true" | "false") | undefined;
+    enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
+    hidden?: boolean | undefined | undefined;
+    id?: string | undefined | undefined;
+    lang?: string | undefined | undefined;
+    nonce?: string | undefined | undefined;
+    spellCheck?: (boolean | "true" | "false") | undefined;
+    tabIndex?: number | undefined | undefined;
+    translate?: "yes" | "no" | undefined | undefined;
+    radioGroup?: string | undefined | undefined;
+    role?: react.AriaRole | undefined;
+    about?: string | undefined | undefined;
+    content?: string | undefined | undefined;
+    datatype?: string | undefined | undefined;
+    inlist?: any;
+    prefix?: string | undefined | undefined;
+    property?: string | undefined | undefined;
+    rel?: string | undefined | undefined;
+    resource?: string | undefined | undefined;
+    rev?: string | undefined | undefined;
+    typeof?: string | undefined | undefined;
+    vocab?: string | undefined | undefined;
+    autoCorrect?: string | undefined | undefined;
+    autoSave?: string | undefined | undefined;
+    color?: string | undefined | undefined;
+    itemProp?: string | undefined | undefined;
+    itemScope?: boolean | undefined | undefined;
+    itemType?: string | undefined | undefined;
+    itemID?: string | undefined | undefined;
+    itemRef?: string | undefined | undefined;
+    results?: number | undefined | undefined;
+    security?: string | undefined | undefined;
+    unselectable?: "on" | "off" | undefined | undefined;
+    popover?: "" | "auto" | "manual" | "hint" | undefined | undefined;
+    popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
+    popoverTarget?: string | undefined | undefined;
+    inert?: boolean | undefined | undefined;
+    inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
+    is?: string | undefined | undefined;
+    exportparts?: string | undefined | undefined;
+    part?: string | undefined | undefined;
+    "aria-activedescendant"?: string | undefined | undefined;
+    "aria-atomic"?: (boolean | "true" | "false") | undefined;
+    "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
+    "aria-braillelabel"?: string | undefined | undefined;
+    "aria-brailleroledescription"?: string | undefined | undefined;
+    "aria-busy"?: (boolean | "true" | "false") | undefined;
+    "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
+    "aria-colcount"?: number | undefined | undefined;
+    "aria-colindex"?: number | undefined | undefined;
+    "aria-colindextext"?: string | undefined | undefined;
+    "aria-colspan"?: number | undefined | undefined;
+    "aria-controls"?: string | undefined | undefined;
+    "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined | undefined;
+    "aria-describedby"?: string | undefined | undefined;
+    "aria-description"?: string | undefined | undefined;
+    "aria-details"?: string | undefined | undefined;
+    "aria-disabled"?: (boolean | "true" | "false") | undefined;
+    "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined | undefined;
+    "aria-errormessage"?: string | undefined | undefined;
+    "aria-expanded"?: (boolean | "true" | "false") | undefined;
+    "aria-flowto"?: string | undefined | undefined;
+    "aria-grabbed"?: (boolean | "true" | "false") | undefined;
+    "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined | undefined;
+    "aria-hidden"?: (boolean | "true" | "false") | undefined;
+    "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined | undefined;
+    "aria-keyshortcuts"?: string | undefined | undefined;
+    "aria-label"?: string | undefined | undefined;
+    "aria-labelledby"?: string | undefined | undefined;
+    "aria-level"?: number | undefined | undefined;
+    "aria-live"?: "off" | "assertive" | "polite" | undefined | undefined;
+    "aria-modal"?: (boolean | "true" | "false") | undefined;
+    "aria-multiline"?: (boolean | "true" | "false") | undefined;
+    "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
+    "aria-orientation"?: "horizontal" | "vertical" | undefined | undefined;
+    "aria-owns"?: string | undefined | undefined;
+    "aria-placeholder"?: string | undefined | undefined;
+    "aria-posinset"?: number | undefined | undefined;
+    "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
+    "aria-readonly"?: (boolean | "true" | "false") | undefined;
+    "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined | undefined;
+    "aria-required"?: (boolean | "true" | "false") | undefined;
+    "aria-roledescription"?: string | undefined | undefined;
+    "aria-rowcount"?: number | undefined | undefined;
+    "aria-rowindex"?: number | undefined | undefined;
+    "aria-rowindextext"?: string | undefined | undefined;
+    "aria-rowspan"?: number | undefined | undefined;
+    "aria-selected"?: (boolean | "true" | "false") | undefined;
+    "aria-setsize"?: number | undefined | undefined;
+    "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined | undefined;
+    "aria-valuemax"?: number | undefined | undefined;
+    "aria-valuemin"?: number | undefined | undefined;
+    "aria-valuenow"?: number | undefined | undefined;
+    "aria-valuetext"?: string | undefined | undefined;
+    dangerouslySetInnerHTML?: {
+        __html: string | TrustedHTML;
+    } | undefined | undefined;
+    onCopy?: react.ClipboardEventHandler<HTMLParagraphElement> | undefined;
+    onCopyCapture?: react.ClipboardEventHandler<HTMLParagraphElement> | undefined;
+    onCut?: react.ClipboardEventHandler<HTMLParagraphElement> | undefined;
+    onCutCapture?: react.ClipboardEventHandler<HTMLParagraphElement> | undefined;
+    onPaste?: react.ClipboardEventHandler<HTMLParagraphElement> | undefined;
+    onPasteCapture?: react.ClipboardEventHandler<HTMLParagraphElement> | undefined;
+    onCompositionEnd?: react.CompositionEventHandler<HTMLParagraphElement> | undefined;
+    onCompositionEndCapture?: react.CompositionEventHandler<HTMLParagraphElement> | undefined;
+    onCompositionStart?: react.CompositionEventHandler<HTMLParagraphElement> | undefined;
+    onCompositionStartCapture?: react.CompositionEventHandler<HTMLParagraphElement> | undefined;
+    onCompositionUpdate?: react.CompositionEventHandler<HTMLParagraphElement> | undefined;
+    onCompositionUpdateCapture?: react.CompositionEventHandler<HTMLParagraphElement> | undefined;
+    onFocus?: react.FocusEventHandler<HTMLParagraphElement> | undefined;
+    onFocusCapture?: react.FocusEventHandler<HTMLParagraphElement> | undefined;
+    onBlur?: react.FocusEventHandler<HTMLParagraphElement> | undefined;
+    onBlurCapture?: react.FocusEventHandler<HTMLParagraphElement> | undefined;
+    onChange?: react.ChangeEventHandler<HTMLParagraphElement, Element> | undefined;
+    onChangeCapture?: react.ChangeEventHandler<HTMLParagraphElement, Element> | undefined;
+    onBeforeInput?: react.InputEventHandler<HTMLParagraphElement> | undefined;
+    onBeforeInputCapture?: react.InputEventHandler<HTMLParagraphElement> | undefined;
+    onInput?: react.InputEventHandler<HTMLParagraphElement> | undefined;
+    onInputCapture?: react.InputEventHandler<HTMLParagraphElement> | undefined;
+    onReset?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
+    onResetCapture?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
+    onSubmit?: react.SubmitEventHandler<HTMLParagraphElement> | undefined;
+    onSubmitCapture?: react.SubmitEventHandler<HTMLParagraphElement> | undefined;
+    onInvalid?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
+    onInvalidCapture?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
+    onLoad?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
+    onLoadCapture?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
+    onError?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
+    onErrorCapture?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
+    onKeyDown?: react.KeyboardEventHandler<HTMLParagraphElement> | undefined;
+    onKeyDownCapture?: react.KeyboardEventHandler<HTMLParagraphElement> | undefined;
+    onKeyPress?: react.KeyboardEventHandler<HTMLParagraphElement> | undefined;
+    onKeyPressCapture?: react.KeyboardEventHandler<HTMLParagraphElement> | undefined;
+    onKeyUp?: react.KeyboardEventHandler<HTMLParagraphElement> | undefined;
+    onKeyUpCapture?: react.KeyboardEventHandler<HTMLParagraphElement> | undefined;
+    onAbort?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
+    onAbortCapture?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
+    onCanPlay?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
+    onCanPlayCapture?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
+    onCanPlayThrough?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
+    onCanPlayThroughCapture?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
+    onDurationChange?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
+    onDurationChangeCapture?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
+    onEmptied?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
+    onEmptiedCapture?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
+    onEncrypted?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
+    onEncryptedCapture?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
+    onEnded?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
+    onEndedCapture?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
+    onLoadedData?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
+    onLoadedDataCapture?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
+    onLoadedMetadata?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
+    onLoadedMetadataCapture?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
+    onLoadStart?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
+    onLoadStartCapture?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
+    onPause?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
+    onPauseCapture?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
+    onPlay?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
+    onPlayCapture?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
+    onPlaying?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
+    onPlayingCapture?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
+    onProgress?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
+    onProgressCapture?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
+    onRateChange?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
+    onRateChangeCapture?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
+    onSeeked?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
+    onSeekedCapture?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
+    onSeeking?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
+    onSeekingCapture?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
+    onStalled?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
+    onStalledCapture?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
+    onSuspend?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
+    onSuspendCapture?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
+    onTimeUpdate?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
+    onTimeUpdateCapture?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
+    onVolumeChange?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
+    onVolumeChangeCapture?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
+    onWaiting?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
+    onWaitingCapture?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
+    onAuxClick?: react.MouseEventHandler<HTMLParagraphElement> | undefined;
+    onAuxClickCapture?: react.MouseEventHandler<HTMLParagraphElement> | undefined;
+    onClick?: react.MouseEventHandler<HTMLParagraphElement> | undefined;
+    onClickCapture?: react.MouseEventHandler<HTMLParagraphElement> | undefined;
+    onContextMenu?: react.MouseEventHandler<HTMLParagraphElement> | undefined;
+    onContextMenuCapture?: react.MouseEventHandler<HTMLParagraphElement> | undefined;
+    onDoubleClick?: react.MouseEventHandler<HTMLParagraphElement> | undefined;
+    onDoubleClickCapture?: react.MouseEventHandler<HTMLParagraphElement> | undefined;
+    onDrag?: react.DragEventHandler<HTMLParagraphElement> | undefined;
+    onDragCapture?: react.DragEventHandler<HTMLParagraphElement> | undefined;
+    onDragEnd?: react.DragEventHandler<HTMLParagraphElement> | undefined;
+    onDragEndCapture?: react.DragEventHandler<HTMLParagraphElement> | undefined;
+    onDragEnter?: react.DragEventHandler<HTMLParagraphElement> | undefined;
+    onDragEnterCapture?: react.DragEventHandler<HTMLParagraphElement> | undefined;
+    onDragExit?: react.DragEventHandler<HTMLParagraphElement> | undefined;
+    onDragExitCapture?: react.DragEventHandler<HTMLParagraphElement> | undefined;
+    onDragLeave?: react.DragEventHandler<HTMLParagraphElement> | undefined;
+    onDragLeaveCapture?: react.DragEventHandler<HTMLParagraphElement> | undefined;
+    onDragOver?: react.DragEventHandler<HTMLParagraphElement> | undefined;
+    onDragOverCapture?: react.DragEventHandler<HTMLParagraphElement> | undefined;
+    onDragStart?: react.DragEventHandler<HTMLParagraphElement> | undefined;
+    onDragStartCapture?: react.DragEventHandler<HTMLParagraphElement> | undefined;
+    onDrop?: react.DragEventHandler<HTMLParagraphElement> | undefined;
+    onDropCapture?: react.DragEventHandler<HTMLParagraphElement> | undefined;
+    onMouseDown?: react.MouseEventHandler<HTMLParagraphElement> | undefined;
+    onMouseDownCapture?: react.MouseEventHandler<HTMLParagraphElement> | undefined;
+    onMouseEnter?: react.MouseEventHandler<HTMLParagraphElement> | undefined;
+    onMouseLeave?: react.MouseEventHandler<HTMLParagraphElement> | undefined;
+    onMouseMove?: react.MouseEventHandler<HTMLParagraphElement> | undefined;
+    onMouseMoveCapture?: react.MouseEventHandler<HTMLParagraphElement> | undefined;
+    onMouseOut?: react.MouseEventHandler<HTMLParagraphElement> | undefined;
+    onMouseOutCapture?: react.MouseEventHandler<HTMLParagraphElement> | undefined;
+    onMouseOver?: react.MouseEventHandler<HTMLParagraphElement> | undefined;
+    onMouseOverCapture?: react.MouseEventHandler<HTMLParagraphElement> | undefined;
+    onMouseUp?: react.MouseEventHandler<HTMLParagraphElement> | undefined;
+    onMouseUpCapture?: react.MouseEventHandler<HTMLParagraphElement> | undefined;
+    onSelect?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
+    onSelectCapture?: react.ReactEventHandler<HTMLParagraphElement> | undefined;
+    onTouchCancel?: react.TouchEventHandler<HTMLParagraphElement> | undefined;
+    onTouchCancelCapture?: react.TouchEventHandler<HTMLParagraphElement> | undefined;
+    onTouchEnd?: react.TouchEventHandler<HTMLParagraphElement> | undefined;
+    onTouchEndCapture?: react.TouchEventHandler<HTMLParagraphElement> | undefined;
+    onTouchMove?: react.TouchEventHandler<HTMLParagraphElement> | undefined;
+    onTouchMoveCapture?: react.TouchEventHandler<HTMLParagraphElement> | undefined;
+    onTouchStart?: react.TouchEventHandler<HTMLParagraphElement> | undefined;
+    onTouchStartCapture?: react.TouchEventHandler<HTMLParagraphElement> | undefined;
+    onPointerDown?: react.PointerEventHandler<HTMLParagraphElement> | undefined;
+    onPointerDownCapture?: react.PointerEventHandler<HTMLParagraphElement> | undefined;
+    onPointerMove?: react.PointerEventHandler<HTMLParagraphElement> | undefined;
+    onPointerMoveCapture?: react.PointerEventHandler<HTMLParagraphElement> | undefined;
+    onPointerUp?: react.PointerEventHandler<HTMLParagraphElement> | undefined;
+    onPointerUpCapture?: react.PointerEventHandler<HTMLParagraphElement> | undefined;
+    onPointerCancel?: react.PointerEventHandler<HTMLParagraphElement> | undefined;
+    onPointerCancelCapture?: react.PointerEventHandler<HTMLParagraphElement> | undefined;
+    onPointerEnter?: react.PointerEventHandler<HTMLParagraphElement> | undefined;
+    onPointerLeave?: react.PointerEventHandler<HTMLParagraphElement> | undefined;
+    onPointerOver?: react.PointerEventHandler<HTMLParagraphElement> | undefined;
+    onPointerOverCapture?: react.PointerEventHandler<HTMLParagraphElement> | undefined;
+    onPointerOut?: react.PointerEventHandler<HTMLParagraphElement> | undefined;
+    onPointerOutCapture?: react.PointerEventHandler<HTMLParagraphElement> | undefined;
+    onGotPointerCapture?: react.PointerEventHandler<HTMLParagraphElement> | undefined;
+    onGotPointerCaptureCapture?: react.PointerEventHandler<HTMLParagraphElement> | undefined;
+    onLostPointerCapture?: react.PointerEventHandler<HTMLParagraphElement> | undefined;
+    onLostPointerCaptureCapture?: react.PointerEventHandler<HTMLParagraphElement> | undefined;
+    onScroll?: react.UIEventHandler<HTMLParagraphElement> | undefined;
+    onScrollCapture?: react.UIEventHandler<HTMLParagraphElement> | undefined;
+    onScrollEnd?: react.UIEventHandler<HTMLParagraphElement> | undefined;
+    onScrollEndCapture?: react.UIEventHandler<HTMLParagraphElement> | undefined;
+    onWheel?: react.WheelEventHandler<HTMLParagraphElement> | undefined;
+    onWheelCapture?: react.WheelEventHandler<HTMLParagraphElement> | undefined;
+    onAnimationStart?: react.AnimationEventHandler<HTMLParagraphElement> | undefined;
+    onAnimationStartCapture?: react.AnimationEventHandler<HTMLParagraphElement> | undefined;
+    onAnimationEnd?: react.AnimationEventHandler<HTMLParagraphElement> | undefined;
+    onAnimationEndCapture?: react.AnimationEventHandler<HTMLParagraphElement> | undefined;
+    onAnimationIteration?: react.AnimationEventHandler<HTMLParagraphElement> | undefined;
+    onAnimationIterationCapture?: react.AnimationEventHandler<HTMLParagraphElement> | undefined;
+    onToggle?: react.ToggleEventHandler<HTMLParagraphElement> | undefined;
+    onBeforeToggle?: react.ToggleEventHandler<HTMLParagraphElement> | undefined;
+    onTransitionCancel?: react.TransitionEventHandler<HTMLParagraphElement> | undefined;
+    onTransitionCancelCapture?: react.TransitionEventHandler<HTMLParagraphElement> | undefined;
+    onTransitionEnd?: react.TransitionEventHandler<HTMLParagraphElement> | undefined;
+    onTransitionEndCapture?: react.TransitionEventHandler<HTMLParagraphElement> | undefined;
+    onTransitionRun?: react.TransitionEventHandler<HTMLParagraphElement> | undefined;
+    onTransitionRunCapture?: react.TransitionEventHandler<HTMLParagraphElement> | undefined;
+    onTransitionStart?: react.TransitionEventHandler<HTMLParagraphElement> | undefined;
+    onTransitionStartCapture?: react.TransitionEventHandler<HTMLParagraphElement> | undefined;
+    className: string;
+    'data-size': WordDiffSize;
+}, HTMLParagraphElement>;
+
+interface QuoteProps extends ComponentPropsWithRef<'figure'> {
+    /** Who said it, shown as a small overline before the words: "You". */
+    label: ReactNode;
+    /** The quoted words. Phrasing content: the quote renders inline after the label. */
+    children: ReactNode;
+}
+/**
+ * Someone's own words echoed back on the accent wash, with who said them: the instruction you gave above the
+ * rewrite it produced. A `<figure>` whose `<figcaption>` is the label and whose `<blockquote>` is the text, so the
+ * attribution is part of the semantics, not just the styling.
+ */
+declare function Quote({ label, className, children, ...rest }: QuoteProps): react.JSX.Element;
+
 declare const version = "0.1.1";
 
-export { ArchiveIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, Badge, Banner, BellIcon, BriefcaseIcon, BroomIcon, Button, CalendarIcon, Card, CheckIcon, Checkbox, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, Chip, CircleCheckIcon, CircleXIcon, ClockIcon, CopyIcon, Dialog, Disclosure, DocumentIcon, DownloadIcon, EditIcon, EmptyState, ExternalLinkIcon, EyeIcon, FileInput, 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, RefreshIcon, SearchIcon, Select, SelectionBar, SettingsIcon, Skeleton, Spinner, Stack, StarIcon, Stat, SunIcon, Switch, Table, Tabs, Text, Textarea, ThumbsDownIcon, ThumbsUpIcon, Toast, Toolbar, Tooltip, TrashIcon, UndoIcon, UserIcon, WarningIcon, XIcon, iconNames, useRowSelection, useToast, version };
-export type { 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, RowSelection, RowSelectionHeaderState, SelectGroup, SelectOption, SelectProps, SelectionBarProps, SkeletonProps, SkeletonVariant, SpacingSize, SpinnerProps, StackAlign, StackElement, StackJustify, StackProps, StatDeltaTone, StatElement, StatProps, StatSize, StatTrend, StatVariant, SwitchProps, TableAlign, TableBodyProps, TableCaptionProps, TableCellProps, TableDensity, TableFootProps, TableHeadProps, TableHeaderProps, TableRootProps, TableRowProps, TableSelectionCellProps, TableSelectionHeaderProps, TableSortDirection, TabsListProps, TabsListVariant, TabsPanelProps, TabsRootProps, TabsTabProps, TextAlign, TextElement, TextProps, TextSize, TextTone, TextWeight, TextareaProps, TextareaVariant, ToastApi, ToastOptions, ToastProviderProps, ToastTone, ToolbarButtonProps, ToolbarGroupProps, ToolbarLinkProps, ToolbarRootProps, ToolbarSeparatorProps, ToolbarSpacerProps, TooltipAlign, TooltipProps, TooltipSide };
+export { ArchiveIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, Badge, Banner, BellIcon, BriefcaseIcon, BroomIcon, Button, CalendarIcon, Card, CheckIcon, Checkbox, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, Chip, CircleCheckIcon, CircleXIcon, ClockIcon, CopyIcon, Dialog, Disclosure, DocumentIcon, DownloadIcon, EditIcon, EmptyState, ExternalLinkIcon, EyeIcon, FileInput, 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, iconNames, useRowSelection, useToast, version };
+export type { 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 };