altitude-design 0.2.0 → 0.3.0

package/dist/types/collections.d.ts

@@ -1,4 +1,6 @@
 import * as React from 'react';
+import { EditRegionBinder, EditRegionSaveResult } from './edit-region.js';
+import { Promised, SkeletonOption } from './suspense.js';
 export interface TableProps extends React.TableHTMLAttributes<HTMLTableElement> {
     /** The table scrolls under its header past this height. */
     maxHeight?: number | string;
@@ -49,6 +51,13 @@ export interface DataTableColumn<T> {
     sortValue?: (row: T) => string | number;
     align?: 'start' | 'end';
     width?: number | string;
+    /**
+     * The narrowest the column gets (#260): on a phone the table scrolls inside its frame rather than squeezing a column
+     * below this. Default: the header's width, and at least 6rem when the table is narrow.
+     */
+    minWidth?: number | string;
+    /** Keep this column in view while the table scrolls sideways, over a flush 1px edge (no shadow: it isn't live). */
+    sticky?: boolean;
 }
 export type TableSort = {
     key: string;
@@ -56,7 +65,10 @@ export type TableSort = {
 } | null;
 export interface DataTableProps<T> {
     columns: DataTableColumn<T>[];
-    rows: T[];
+    /** The rows. Undefined while your data loads, or a promise: until they arrive the table is its header over `skeleton.lines` imprinted rows (default 5). */
+    rows: Promised<T[]> | undefined;
+    /** While the rows are on their way: how many rows to imprint (`lines`). `false`: undefined rows render as empty, and a promise suspends to your own boundary. */
+    skeleton?: SkeletonOption;
     getRowId: (row: T) => string;
     /** A row's name, for screen readers (its checkbox, its move handle, announcements) and its button with onRowClick. */
     getRowLabel?: (row: T) => string;
@@ -65,8 +77,17 @@ export interface DataTableProps<T> {
     selected?: string[];
     defaultSelected?: string[];
     onSelectedChange?: (ids: string[]) => void;
-    /** Toolbar actions for the selected rows, shown beside their count. */
-    actions?: (ids: string[]) => React.ReactNode;
+    /** Actions for the selected rows, shown beside their count. The second argument is the whole selection, which may be "all matching". */
+    actions?: (ids: string[], selection: TableSelection) => React.ReactNode;
+    /** The selection, when it can reach past the loaded rows: { kind: 'ids', ids } or { kind: 'query', total, except }. */
+    selection?: TableSelection;
+    onSelectionChange?: (selection: TableSelection) => void;
+    /** How many records match the current filter, across every page. Offers "Select all N matching" once a page is selected. */
+    matchingTotal?: number;
+    /** Where the count and actions sit: in the toolbar, in a bar floating at the bottom edge (level 3), or 'auto' (floating once the toolbar scrolls away). Default 'toolbar'. */
+    actionsPlacement?: 'toolbar' | 'floating' | 'auto';
+    /** What the rows are, plural ("users"), for "Select all 2,341 users". Default "rows". */
+    noun?: string;
     /** Anything else for the toolbar's end (a filter field, a button). */
     toolbar?: React.ReactNode;
     sort?: TableSort;
@@ -83,12 +104,72 @@ export interface DataTableProps<T> {
     empty?: React.ReactNode;
     className?: string;
     'aria-label'?: string;
+    /** Read-only detail: a disclosure button in the first column opens a full-width region under the row, on the ground. */
+    renderExpanded?: (row: T) => React.ReactNode;
+    /** With onSave, an Edit button opens the row's region as an EditRegion holding these fields; row and region rise together. */
+    renderEditor?: (field: EditRegionBinder<T & Record<string, unknown>>, row: T) => React.ReactNode;
+    onSave?: (draft: T, context: {
+        previousValue: T;
+        changed: (keyof T)[];
+    }) => EditRegionSaveResult<T & Record<string, unknown>> | Promise<EditRegionSaveResult<T & Record<string, unknown>>>;
+    /** Publishes a saved row's canonical record (a synchronous setter). */
+    onRowChange?: (canonical: T) => void;
+    /** Rows whose detail is open, by id. */
+    expanded?: string[];
+    defaultExpanded?: string[];
+    onExpandedChange?: (ids: string[]) => void;
+    /** 'single' (default): opening one closes the others. */
+    expandMode?: 'single' | 'multiple';
+    /** Which columns show, by key: false hides one. The first column in order always shows. */
+    columnVisibility?: Record<string, boolean>;
+    defaultColumnVisibility?: Record<string, boolean>;
+    onColumnVisibilityChange?: (visibility: Record<string, boolean>) => void;
+    /** The columns' order, by key. Keys left out keep their place after the ones given. */
+    columnOrder?: string[];
+    defaultColumnOrder?: string[];
+    onColumnOrderChange?: (order: string[]) => void;
+    /** Row density. 'compact' keeps every target at least 24px tall. Default 'comfortable'. */
+    density?: 'comfortable' | 'compact';
+    defaultDensity?: 'comfortable' | 'compact';
+    onDensityChange?: (density: 'comfortable' | 'compact') => void;
+    /** A "Columns" button in the toolbar: show, hide and reorder columns, and choose the density. */
+    columnsMenu?: boolean;
+    /** Rows paged by your server: Pagination in the footer, or "Load more". */
+    pagination?: DataTablePaging;
 }
+/** Rows chosen by id, or every record matching the query except some. */
+export type TableSelection = {
+    kind: 'ids';
+    ids: string[];
+} | {
+    kind: 'query';
+    total: number;
+    except: string[];
+};
+export type DataTablePaging = {
+    mode?: 'pages';
+    page: number;
+    pageCount?: number;
+    pageSize?: number;
+    total?: number;
+    onPageChange: (page: number) => void;
+    hrefFor?: (page: number) => string;
+    hasNext?: boolean;
+    /** The next page is loading: the rows stay at half strength and the page thumb is held pressed. */ loading?: boolean;
+    noun?: string;
+} | {
+    mode: 'more';
+    hasMore: boolean;
+    onLoadMore: () => void;
+    total?: number;
+    loading?: boolean;
+    noun?: string;
+};
 /**
  * A table from data: sortable columns whose rows are carried to their new places, a checkbox column whose selected rows
  * rise (counted by a floating Badge in the toolbar), filtering in place, interactive rows and reordering by hand.
  */
-export declare function DataTable<T>({ columns, rows, getRowId, getRowLabel, selectable, selected, defaultSelected, onSelectedChange, actions, toolbar, sort, defaultSort, onSortChange, onRowClick, relevance, onReorder, maxHeight, empty, className, ...rest }: DataTableProps<T>): React.JSX.Element;
+export declare function DataTable<T>({ skeleton, ...props }: DataTableProps<T>): React.JSX.Element;
 export interface BoardPlace {
     column: string;
     index: number;
@@ -118,8 +199,28 @@ export interface BoardColumnProps extends Omit<React.HTMLAttributes<HTMLElement>
     onCollapsedChange?: (collapsed: boolean) => void;
     /** Show the collapse button. */
     collapsible?: boolean;
+    /** Adds an add slot at the foot of the column. Resolve after the new card is among the children. */
+    onCreate?: (title: string) => BoardCreateResult | Promise<BoardCreateResult>;
+    /** Default “Add a card”. */
+    addLabel?: string;
 }
-export declare function BoardColumn({ id, title, collapsed, defaultCollapsed, onCollapsedChange, collapsible, className, children, ...rest }: BoardColumnProps): React.JSX.Element;
+export type BoardCreateResult = {
+    ok: true;
+    value: {
+        id: string;
+    };
+} | {
+    ok: false;
+    error: string;
+};
+export type BoardRenameResult = {
+    ok: true;
+    value: string;
+} | {
+    ok: false;
+    error: string;
+};
+export declare function BoardColumn({ id, title, collapsed, defaultCollapsed, onCollapsedChange, collapsible, onCreate, addLabel, className, children, ...rest }: BoardColumnProps): React.JSX.Element;
 export interface BoardCardProps extends React.HTMLAttributes<HTMLDivElement> {
     id: string;
     /** How announcements name the card. Default: its first line of text. */
@@ -131,5 +232,15 @@ export interface BoardCardProps extends React.HTMLAttributes<HTMLDivElement> {
     };
     /** Afterglow: when this value changes the card arrives tinted and lifted, then settles. */
     settle?: unknown;
+    /** Rename in place (F2, or the visible Rename button): InlineEdit's contract. Use with `label`. */
+    onRename?: (draft: string) => BoardRenameResult | Promise<BoardRenameResult>;
+    /** The card's record, for a fuller editor in its place (EditRegion). */
+    value?: Record<string, unknown>;
+    renderEditor?: (field: EditRegionBinder<Record<string, unknown>>) => React.ReactNode;
+    onSave?: (draft: Record<string, unknown>, context: {
+        previousValue: Record<string, unknown>;
+        changed: string[];
+    }) => EditRegionSaveResult<Record<string, unknown>> | Promise<EditRegionSaveResult<Record<string, unknown>>>;
+    onValueChange?: (canonical: Record<string, unknown>) => void;
 }
 export declare const BoardCard: React.ForwardRefExoticComponent<BoardCardProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types/color-picker.d.ts

@@ -0,0 +1,38 @@
+import * as React from 'react';
+export interface ColorSwatch {
+    value: string;
+    /** Every swatch has a name: colour is never the only way to tell them apart. */
+    name: string;
+}
+export interface ColorSwatchPickerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
+    swatches: ColorSwatch[];
+    value?: string | null;
+    defaultValue?: string | null;
+    onValueChange?: (value: string) => void;
+    'aria-label'?: string;
+}
+/**
+ * Colours as choices: each swatch is a trench the colour pours into, and the chosen one carries the raised white mark,
+ * which travels between swatches as RadioGroup's thumb does. A radio group: arrows move and choose.
+ */
+export declare function ColorSwatchPicker({ swatches, value, defaultValue, onValueChange, className, ...rest }: ColorSwatchPickerProps): React.JSX.Element;
+export interface ColorPickerProps {
+    /** What the colour is for ("Brand colour"). It names the swatches. */
+    label: string;
+    value?: string;
+    defaultValue?: string;
+    /** Called with a lower-case "#rrggbb". */
+    onValueChange?: (value: string) => void;
+    swatches?: ColorSwatch[];
+    /** A hex field and a full picker (area and hue) for any colour. Default false. */
+    allowCustom?: boolean;
+    /** Says in words whether white text and dark text on the colour reach 4.5:1. Default false. */
+    checkContrast?: boolean;
+    className?: string;
+}
+/**
+ * A brand or label colour: swatches as choices (trenches the colour pours into, one travelling mark), and, if allowed,
+ * a hex field that fills when it holds a whole colour and a full picker in a Popover. A contrast check says in words
+ * whether text on the colour passes, because the accent carries text.
+ */
+export declare function ColorPicker({ label, value, defaultValue, onValueChange, swatches, allowCustom, checkContrast, className }: ColorPickerProps): React.JSX.Element;

package/dist/types/command.d.ts

@@ -45,8 +45,11 @@ export interface CommandPaletteProps {
     onQueryChange?: (query: string) => void;
     /** Close once an item is chosen. Default true. */
     closeOnSelect?: boolean;
-    /** The key hints along the bottom. Default true. */
-    hints?: boolean;
+    /**
+     * The key hints: the footer, the item shortcuts and the field's esc. 'auto' (default): shown where there's likely a
+     * keyboard, hidden on a touch-only device until a key is pressed (#262). true or false forces them.
+     */
+    hints?: boolean | 'auto';
     className?: string;
     'aria-label'?: string;
 }
@@ -60,4 +63,4 @@ export declare function commandScore(text: string, query: string): number;
  * as it does for Dialog. The query field is an opening built like Input; one highlight glides between results;
  * when results change, surviving rows travel to their new places and new ones rise in, a few at a time.
  */
-export declare function CommandPalette({ items, open, defaultOpen, onOpenChange, onSelect, placeholder, filter, empty, shortcut, query: queryProp, defaultQuery, onQueryChange, closeOnSelect, hints, className, ...rest }: CommandPaletteProps): React.JSX.Element | null;
+export declare function CommandPalette({ items, open, defaultOpen, onOpenChange, onSelect, placeholder, filter, empty, shortcut, query: queryProp, defaultQuery, onQueryChange, closeOnSelect, hints: hintsProp, className, ...rest }: CommandPaletteProps): React.JSX.Element | null;

package/dist/types/comment-thread.d.ts

@@ -0,0 +1,48 @@
+import * as React from 'react';
+export interface ThreadComment {
+    id: string;
+    author: {
+        name: string;
+        avatar?: string;
+    };
+    /** Plain text; "@Name" for someone mentioned (their names in `mentions`). */
+    body: string;
+    createdAt: Date | string | number;
+    /** One you're posting: pending hovers ("Posting…"), failed drops to a trench with Retry and keeps the text. */
+    status?: 'pending' | 'failed';
+    /** Names mentioned in the body, drawn as plates. */
+    mentions?: string[];
+    /** Yours: it can be deleted. */
+    mine?: boolean;
+    /** Deleted: its result stays in its slot ("Comment deleted") with Undo. */
+    deleted?: boolean;
+}
+export interface Mentionable {
+    id: string;
+    name: string;
+}
+export interface CommentThreadProps {
+    comments: ThreadComment[];
+    /** The thread is resolved: stamped, muted and collapsed to one line, kept in place. */
+    resolved?: {
+        by: string;
+    } | false;
+    onPost?: (body: string, mentions: Mentionable[]) => void;
+    onResolve?: () => void;
+    onReopen?: () => void;
+    onRetry?: (id: string) => void;
+    onDelete?: (id: string) => void;
+    onUndoDelete?: (id: string) => void;
+    /** People who can be mentioned, for a query after "@". */
+    mentionable?: (query: string) => Mentionable[];
+    /** Other people typing now (shown with their presence, never announced). */
+    typing?: string[];
+    'aria-label'?: string;
+    className?: string;
+}
+/**
+ * Comments on a record. Posted comments are the record, flush on the ground; the composer is an opening that fills; a
+ * comment being posted hovers until it lands, or drops to a trench keeping its text. A resolved thread is stamped like a
+ * done Checklist item: muted, collapsed to one line, kept in place. Mentions are a listbox at level 3.
+ */
+export declare function CommentThread({ comments, resolved, onPost, onResolve, onReopen, onRetry, onDelete, onUndoDelete, mentionable, typing, 'aria-label': label, className }: CommentThreadProps): React.JSX.Element;

package/dist/types/confirmation.d.ts

@@ -0,0 +1,60 @@
+import * as React from 'react';
+export type ConfirmationState = 'requested' | 'approved' | 'running' | 'done' | 'failed' | 'rejected' | 'expired';
+export interface ConfirmationProps {
+    state: ConfirmationState;
+    /** What's proposed ("Send campaign email"). */
+    title: React.ReactNode;
+    /** The concrete consequence, in words ("214 Pro customers will receive “October product update”."). */
+    consequence: React.ReactNode;
+    /** What exactly would change: a DiffView, a list, a preview. */
+    details?: React.ReactNode;
+    /** The verb and outcome ("Send 214 emails"). Default "Approve". */
+    approveLabel?: string;
+    /** Default "Reject". */
+    rejectLabel?: string;
+    /** While it runs ("Sending…"). Default "Working…". */
+    runningLabel?: string;
+    /** Once done ("Sent"). Default "Done". */
+    doneLabel?: string;
+    /** When it failed ("Couldn't send"). Default "Couldn't finish". */
+    failedLabel?: string;
+    /** For consequential actions: approving needs a hold, or a stationary Dialog for irreversible ones. */
+    escalate?: 'hold' | 'dialog';
+    /** Who resolved it and when, for rejected and done ("Maya"). */
+    resolvedBy?: string;
+    resolvedAt?: Date | string | number;
+    /** Who's asking. Default "The assistant". */
+    requestedBy?: string;
+    /**
+     * Wider ways to approve (#280): Approve becomes a SplitButton whose face approves once and whose menu ("More ways to
+     * approve") holds these. Ignored with `escalate`: an action that needs a hold or a dialog is never pre-approved.
+     */
+    scopes?: {
+        value: string;
+        label: string;
+        description?: string;
+    }[];
+    /**
+     * Fields to change the proposal before approving it (#281): an Edit action opens them in place inside the card.
+     * Keep `consequence` and `approveLabel` following the edited values, so Approve names what will happen.
+     */
+    edit?: React.ReactNode;
+    /** The proposal was changed: an "Edited" plate by the title, and "edited and approved by you" once done. */
+    edited?: boolean;
+    /** Cancel edit or Escape in the fields: put the values back. */
+    onEditCancel?: () => void;
+    /** The scope it was approved with ('once', or a scope's value), named in the resolved line. */
+    resolvedScope?: string;
+    /** Called with the scope: 'once' from the face, or a scope's value from the menu. */
+    onApprove?: (scope?: string) => void;
+    onReject?: () => void;
+    onRetry?: () => void;
+    className?: string;
+}
+/**
+ * Approve or reject an action an agent proposes. A proposal is raised, not pending: it's status that asks for action
+ * (Alert's raised rule), naming the consequence, with Approve and Reject. Nothing has been dispatched, so it mustn't
+ * hover. Once approved it becomes a pending write (hovers), then lands or drops to a trench. Rejected and expired are
+ * flush and muted, kept in the record.
+ */
+export declare function Confirmation({ state, title, consequence, details, approveLabel, rejectLabel, runningLabel, doneLabel, failedLabel, escalate, resolvedBy, resolvedAt, requestedBy, scopes, resolvedScope, edit, edited, onEditCancel, onApprove, onReject, onRetry, className }: ConfirmationProps): React.JSX.Element;

package/dist/types/context-menu.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { MenuEntry } from './overlays.js';
+export interface ContextMenuProps {
+    /** The actions on the thing. A function is called each time the menu opens. Submenus aren't offered: one floating surface at a time. */
+    items: MenuEntry[] | (() => MenuEntry[]);
+    /** The thing: one element. It gets the right-click, the long-press and Shift+F10 / the Menu key. */
+    children: React.ReactElement<any>;
+    /** Names the menu. Default "Actions". */
+    'aria-label'?: string;
+    onOpenChange?: (open: boolean) => void;
+}
+/**
+ * Actions on a thing, opened where you right-click or long-press it, or at it with Shift+F10 or the Menu key. The menu
+ * is DropdownMenu's, at level 3; the thing shows it's the subject with a 2px accent-ink outline, never a height, so a
+ * flush row doesn't lift out of its table. Every action here must also be reachable another way.
+ */
+export declare function ContextMenu({ items, children, 'aria-label': label, onOpenChange }: ContextMenuProps): React.JSX.Element;

package/dist/types/controls.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { DepthProps } from './core';
+import { DepthProps } from './core.js';
+import { Promised, SkeletonOption } from './suspense.js';
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     variant?: 'primary' | 'secondary' | 'ghost' | 'danger';
     size?: 'sm' | 'md' | 'lg';
@@ -13,21 +14,53 @@ export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React
 export interface CardProps extends React.HTMLAttributes<HTMLDivElement>, DepthProps {
     /** Lifts on hover and presses on click. Only set it when the whole card does something. */
     interactive?: boolean;
+    /**
+     * The card holds a Suspense boundary: while anything of yours inside it suspends, the card stays up and its body is an
+     * imprint (a title line and `lines` lines of text, default 3). `false` lets it suspend to your own boundary.
+     * It's also a loading scope: its optional parts (description, body text) wait while its required parts do.
+     */
+    skeleton?: SkeletonOption;
 }
 export declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
 export declare const CardHeader: ({ className, ...p }: React.HTMLAttributes<HTMLDivElement>) => React.JSX.Element;
-export declare const CardTitle: ({ className, ...p }: React.HTMLAttributes<HTMLHeadingElement>) => React.JSX.Element;
-export declare const CardDescription: ({ className, ...p }: React.HTMLAttributes<HTMLParagraphElement>) => React.JSX.Element;
-export declare const CardContent: ({ className, ...p }: React.HTMLAttributes<HTMLDivElement>) => React.JSX.Element;
+/**
+ * Text that may still be on its way: `undefined` while your data loads (`{user?.name}`), a promise, or one promise among
+ * plain text. `null` renders nothing.
+ */
+type PromisedText<E> = Omit<React.HTMLAttributes<E>, 'children'> & {
+    children?: React.ReactNode | PromiseLike<React.ReactNode> | Array<React.ReactNode | PromiseLike<React.ReactNode>>;
+    /** While the text is on its way, its imprint: `lines` (one for a title, two for a description) and `width`. `false`: render what you pass as it is, and let promises suspend to your own boundary. */
+    skeleton?: SkeletonOption;
+};
+export declare const CardTitle: ({ className, children, skeleton, ...p }: PromisedText<HTMLHeadingElement>) => React.JSX.Element;
+export declare const CardDescription: ({ className, children, skeleton, ...p }: PromisedText<HTMLParagraphElement>) => React.JSX.Element;
+export interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** The body holds a Suspense boundary: while anything of yours inside it suspends, or its text (`{user?.bio}`) is undefined while the card's other parts are, it's `lines` lines of imprint (default 3). `false` suspends to your own boundary. */
+    skeleton?: SkeletonOption;
+}
+export declare const CardContent: ({ className, skeleton, children, ...p }: CardContentProps) => React.JSX.Element;
 export declare const CardFooter: ({ className, ...p }: React.HTMLAttributes<HTMLDivElement>) => React.JSX.Element;
-export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+export interface SuggestionProps {
+    /**
+     * A value proposed for this field (by an AI feature, autofill, a template), drawn as a ghost of the value in ink-faint:
+     * the whole value while the field is empty (or the rest of it while what's typed matches its start), or after the text
+     * with suggestionMode="append". Tab accepts, Escape dismisses, typing carries on past it. It's never put in the value,
+     * so an empty field with a ghost is still an opening.
+     */
+    suggestion?: string;
+    /** 'replace' (default): the suggestion is the whole value. 'append': it continues the text. */
+    suggestionMode?: 'replace' | 'append';
+    /** Called with the new value when Tab accepts (onChange is called too). */
+    onAcceptSuggestion?: (value: string) => void;
+}
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>, SuggestionProps {
     invalid?: boolean;
     leading?: React.ReactNode;
     trailing?: React.ReactNode;
     size?: 'sm' | 'md';
 }
 export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
-export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement>, SuggestionProps {
     invalid?: boolean;
     /** With maxLength, the well fills from the bottom as the text approaches the limit, and shows a count. Default true. */
     showFill?: boolean;
@@ -93,8 +126,9 @@ export declare function TabsList({ className, children, ...rest }: React.HTMLAtt
 export declare function TabsTrigger({ value, className, children, ...rest }: React.ButtonHTMLAttributes<HTMLButtonElement> & {
     value: string;
 }): React.JSX.Element;
-export declare function TabsContent({ value, className, ...rest }: React.HTMLAttributes<HTMLDivElement> & {
+export declare function TabsContent({ value, forceMount, className, ...rest }: React.HTMLAttributes<HTMLDivElement> & {
     value: string;
+    forceMount?: boolean;
 }): React.JSX.Element | null;
 export interface SliderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
     value?: number;
@@ -108,14 +142,51 @@ export interface SliderProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
     format?: (v: number) => React.ReactNode;
     'aria-label'?: string;
 }
-export declare function Slider({ value, defaultValue, onValueChange, min, max, step, disabled, format, className, ...rest }: SliderProps): React.JSX.Element;
+/** A range: two thumbs with the raised fill between them. */
+export interface SliderRangeProps extends Omit<SliderProps, 'value' | 'defaultValue' | 'onValueChange' | 'aria-label'> {
+    value?: [number, number];
+    defaultValue?: [number, number];
+    onValueChange?: (v: [number, number]) => void;
+    /** Steps the thumbs keep between them, so they can't meet. Default 0. */
+    minStepsBetween?: number;
+    /** A name per thumb, or one name for the pair (each thumb is then "<name>, minimum" and "<name>, maximum"). */
+    'aria-label'?: string | [string, string];
+}
+export declare function Slider(props: SliderProps): React.ReactElement;
+export declare function Slider(props: SliderRangeProps): React.ReactElement;
+/** Two values on one track: what the range Slider and ChartBrush share. A thumb can't cross the other or come within
+ *  `minStepsBetween` of it; dragging between the thumbs pans both; pressing outside them moves the nearer one there,
+ *  or with `outside: 'centre'` centres the pair there and pans from it. */
+export declare function useRange({ value, defaultValue, onValueChange, min, max, step, minStepsBetween, disabled, outside }: {
+    value?: [number, number];
+    defaultValue?: [number, number];
+    onValueChange?: (v: [number, number]) => void;
+    min: number;
+    max: number;
+    step: number;
+    minStepsBetween?: number;
+    disabled?: boolean;
+    outside?: 'nearer' | 'centre';
+}): {
+    value: [number, number];
+    set: (v: [number, number]) => void;
+    held: 0 | 1 | "both" | "tie" | null;
+    track: React.RefObject<HTMLDivElement | null>;
+    bounds: (i: 0 | 1) => [number, number];
+    pct: (n: number) => number;
+    press: (e: React.PointerEvent<HTMLElement>, thumb?: 0 | 1) => 0 | 1 | "both" | undefined;
+    drag: (e: React.PointerEvent<HTMLElement>) => void;
+    release: () => void;
+    keys: (i: 0 | 1) => (e: React.KeyboardEvent) => void;
+    shift: (d: number) => void;
+};
 export interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> {
     value?: number | null;
     max?: number;
     'aria-label'?: string;
 }
 export declare function Progress({ value, max, className, ...rest }: ProgressProps): React.JSX.Element;
-export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+export interface BadgeProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'> {
     tone?: 'neutral' | 'accent' | 'positive' | 'caution' | 'critical';
     /**
      * plate (default): an indicator plate set flush into the page. tinted: the plate takes its tone's colour.
@@ -127,27 +198,43 @@ export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
     lamp?: boolean | 'pulse';
     /** @deprecated Use `lamp`. */
     dot?: boolean;
+    /** The label. Undefined while your data loads, or a promise: until it arrives the badge is a plate-shaped imprint. */
+    children?: React.ReactNode | PromiseLike<React.ReactNode> | Array<React.ReactNode | PromiseLike<React.ReactNode>>;
+    /** While the label is on its way: the imprint's `width` (default 64px; a count is round). `false`: render what you pass as it is, and let promises suspend to your own boundary. */
+    skeleton?: SkeletonOption;
 }
 /** A label stamped into the record. Status carries a lamp that relights when it changes; a changed label is re-stamped. */
-export declare function Badge({ tone, variant, lamp, dot, className, children, ...rest }: BadgeProps): React.JSX.Element;
+export declare function Badge({ children, skeleton, ...props }: BadgeProps): React.JSX.Element;
 export interface AvatarProps extends React.HTMLAttributes<HTMLSpanElement> {
-    name: string;
-    src?: string;
+    /** The accessible label. Undefined while your data loads (`user?.name`), or a promise: until it arrives the avatar is an imprint of its size and shape. */
+    name: Promised<string> | undefined;
+    /** May be a promise, like `name`. If the image fails to load, the initials show instead. */
+    src?: Promised<string | undefined>;
+    /** In pixels. Default 36. */
     size?: number;
-    /** Presence as height: active people hover above the page (their shadow drops away), idle ones rest on it, offline ones lie flat and grey. */
+    /** `circle` (default) for a person; `square` for a team, an organisation, a bot or an agent. */
+    shape?: 'circle' | 'square';
+    /** Presence: active and idle people are here, so they rest on the page (a filled lamp or an empty one says which); offline people lie flat in it, grey. */
     status?: 'active' | 'idle' | 'offline';
-    /** Speaking, typing or presenting right now: the avatar drifts gently. */
+    /** Speaking, typing or presenting right now: the face leaves the ground and drifts above its shadow. */
     live?: boolean;
     /** Ties the person to their presence colour, the same ring they wear on anything they're holding. */
     presence?: 1 | 2 | 3;
-    /** The status lamp (green active, amber idle). Default: shown when there is a status and the avatar is 24px or larger. Never shown inside AvatarGroup. */
+    /** The status lamp (filled green active, empty amber ring idle). Default: shown when there is a status and the avatar is 24px or larger. Never shown inside AvatarGroup. */
     lamp?: boolean;
+    /** `false`: no imprint. An undefined `name` renders an empty face; a promised one suspends to your own boundary. */
+    skeleton?: boolean;
 }
-/** A disc above its own shadow. The gap between them is how high the person is: how present they are right now. */
-export declare function Avatar({ name, src, size, status, live, presence, lamp, className, style, onClick, ...rest }: AvatarProps): React.JSX.Element;
-export declare function AvatarGroup({ className, children, max, style, ...rest }: React.HTMLAttributes<HTMLDivElement> & {
+/** A disc resting on the page while the person is here, flush in it when they're not; live, it lifts off its shadow. */
+export declare function Avatar({ skeleton, ...props }: AvatarProps): React.JSX.Element;
+export interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Show at most this many faces; the rest become a "+N" plate that names them. */
     max?: number;
-}): React.JSX.Element;
+    /** In pixels, for every face that doesn't set its own. Default: the first face's size, or 36. */
+    size?: number;
+}
+/** Faces standing on one ground line, each cut out of the one before it. */
+export declare function AvatarGroup({ className, children, max, size: groupSize, style, ...rest }: AvatarGroupProps): React.JSX.Element;
 export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
     /** When it turns true, the children rise out of the imprint into place. */
     loaded?: boolean;
@@ -169,9 +256,15 @@ export interface AlertProps extends Omit<React.HTMLAttributes<HTMLDivElement>, '
     icon?: React.ReactNode;
     /** Shows a dismiss button; the sheet lifts off the page and the gap closes, then this is called. */
     onDismiss?: () => void;
+    /** The dismiss button's words ("Remind me tomorrow"). Default: an × named "Dismiss". */
+    dismissLabel?: string;
+    /** 'page': a banner for the whole app or page, edge to edge with no side rounding, in a labelled region. Default 'inline'. */
+    placement?: 'inline' | 'page';
+    /** With placement="page": stays at the top while the page scrolls. */
+    sticky?: boolean;
 }
 /** Status as a sheet laid on the page: it rests on the ground (you can see its edge and its contact shadow) and never floats. When it asks the person to act it becomes a raised card. */
-export declare function Alert({ tone, variant, title, action, icon, onDismiss, settle, className, style, children, ...rest }: AlertProps): React.JSX.Element;
+export declare function Alert({ tone, variant, title, action, icon, onDismiss, dismissLabel, placement, sticky, settle, className, style, children, ...rest }: AlertProps): React.JSX.Element;
 export interface AlertStackProps extends React.HTMLAttributes<HTMLDivElement> {
     /** Alert elements, most important first. Give each a key. */
     children: React.ReactNode;
@@ -182,12 +275,14 @@ export interface AlertStackProps extends React.HTMLAttributes<HTMLDivElement> {
     moreLabel?: (hidden: number) => React.ReactNode;
     /** Label for collapsing. Default "Show less". */
     lessLabel?: React.ReactNode;
+    /** 'page': a stack of page banners, edge to edge. Give each Alert placement="page" too. */
+    placement?: 'inline' | 'page';
 }
 /**
  * Several alerts as a stack of sheets: the first lies on top and the others peek out beneath it, each tinted by its
  * own tone, with a count. Opening the stack fans them out; dismissing the top one lifts it off and the next comes up.
  */
-export declare function AlertStack({ children, expanded, defaultExpanded, onExpandedChange, moreLabel, lessLabel, className, ...rest }: AlertStackProps): React.JSX.Element;
+export declare function AlertStack({ children, expanded, defaultExpanded, onExpandedChange, moreLabel, lessLabel, placement, className, ...rest }: AlertStackProps): React.JSX.Element;
 export interface AccordionItem {
     value: string;
     title: React.ReactNode;
@@ -228,9 +323,25 @@ export interface DropZoneProps extends Omit<React.HTMLAttributes<HTMLDivElement>
     multiple?: boolean;
     /** Force a visual state, for documentation: idle, armed (a file is being dragged somewhere on the page) or over. */
     state?: 'idle' | 'armed' | 'over';
+    /** The files you're handling, shown as slats under the zone: uploading (a Progress fill), processing (hovering, pending), done (lands and settles) or failed (a trench with Retry). */
+    queue?: UploadItem[];
+    onRetry?: (id: string) => void;
+    onCancel?: (id: string) => void;
+    onRemove?: (id: string) => void;
+}
+export interface UploadItem {
+    id: string;
+    name: string;
+    /** Bytes. */
+    size?: number;
+    state: 'uploading' | 'processing' | 'done' | 'failed';
+    /** 0–100, while uploading. */
+    progress?: number;
+    /** Why it failed, in words. */
+    error?: string;
 }
 /** Receptacles open when they're needed: a drop zone is flush until a file is dragged anywhere on the page, then sinks open; over it, it deepens. */
-export declare function DropZone({ onFiles, accept, multiple, state, className, children, ...rest }: DropZoneProps): React.JSX.Element;
+export declare function DropZone({ onFiles, accept, multiple, state, queue, onRetry, onCancel, onRemove, className, children, ...rest }: DropZoneProps): React.JSX.Element;
 export interface SortableListProps<T> {
     items: T[];
     getKey: (item: T) => string;
@@ -246,3 +357,4 @@ export interface SortableListProps<T> {
 }
 /** Possession as depth: the item you pick up comes into your hand (level 3), the slot it will land in opens as a well, and it lands with a settle. */
 export declare function SortableList<T>({ items, getKey, onReorder, renderItem, getLabel, gap, className, ...rest }: SortableListProps<T>): React.JSX.Element;
+export {};