altitude-design 0.2.0 → 0.3.0

package/dist/types/resizable.d.ts

@@ -0,0 +1,48 @@
+import * as React from 'react';
+export interface ResizablePanelGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** horizontal (default): panes side by side; vertical: stacked. */
+    direction?: 'horizontal' | 'vertical';
+    /** Remembers the sizes in this browser under this name. */
+    autoSaveId?: string;
+    onLayout?: (sizes: number[]) => void;
+    /**
+     * Under 480px of its own width (#265). 'stack' (default): one panel at a time, `narrowPanel` (default the first), the
+     * list-and-detail pattern on phones, with the handles hidden. 'vertical': the panes stack with a horizontal grip.
+     * false: as on a wide screen.
+     */
+    narrow?: 'stack' | 'vertical' | false;
+    /** With narrow="stack", the panel shown while narrow (by index). Change it to move between list and detail. */
+    narrowPanel?: number;
+    /** Called when the group becomes narrow or wide again, so the app can show its way back (a Back button). */
+    onNarrowChange?: (narrow: boolean) => void;
+}
+/**
+ * Panes beside each other on the ground, parted by dividers you can drag. The panes never lift (a detail pane opening
+ * beside its list stays on the ground, unlike a Sheet); only the grip is live, and it floats while held.
+ */
+export declare function ResizablePanelGroup({ direction: directionProp, autoSaveId, onLayout, narrow, narrowPanel, onNarrowChange, className, children, ...rest }: ResizablePanelGroupProps): React.JSX.Element;
+export interface ResizablePanelProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Percent of the group. Panels without one share what's left. */
+    defaultSize?: number;
+    /** Percent. Default 10. */
+    minSize?: number;
+    /** Percent. Default 90. */
+    maxSize?: number;
+    /** Enter on the handle before it collapses it to nothing, and restores it. */
+    collapsible?: boolean;
+    /** Names the pane, and the handle that resizes it. */
+    'aria-label'?: string;
+}
+/** A pane: settled, on the ground. A collapsed pane is inert. */
+export declare function ResizablePanel({ defaultSize: _d, minSize: _min, maxSize: _max, collapsible: _c, className, style, id, ...rest }: ResizablePanelProps): React.JSX.Element;
+export interface ResizableHandleProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Show the grip plate. Default true. */
+    withGrip?: boolean;
+    /** Its name. Default "Resize {the pane before it}". */
+    label?: string;
+}
+/**
+ * The divider between two panes: 1px of line with a grip. The grip is flush at rest, lifts one level when pointed at,
+ * and floats at level 3 while held. A window splitter: arrows resize, Home and End go to the limits, Enter collapses.
+ */
+export declare function ResizableHandle({ withGrip, label, className, ...rest }: ResizableHandleProps): React.JSX.Element | null;

package/dist/types/roving.d.ts

@@ -0,0 +1,44 @@
+import * as React from 'react';
+/** True inside a roving container: its buttons mark themselves as items (data-roving-item). */
+export declare const RovingCtx: React.Context<boolean>;
+/** What a control looks like when a toolbar moves it into its "More" menu. */
+export type OverflowEntry = {
+    label?: string;
+    onSelect: () => void;
+    checked?: boolean;
+    disabled?: boolean;
+};
+/** Set by a Toolbar with overflow="menu": its controls register how to show themselves in the menu. */
+export declare const OverflowCtx: React.Context<React.MutableRefObject<Map<HTMLElement, OverflowEntry>> | null>;
+/** Registers a control (by its element) with the nearest overflowing Toolbar. The entry is read when the menu renders. */
+export declare function useOverflowEntry(el: React.RefObject<HTMLElement | null>, entry: OverflowEntry): void;
+/** One ref for a forwarded ref and our own. */
+export declare function useMergedRef<T>(forwarded: React.ForwardedRef<T>): readonly [React.RefObject<T | null>, (el: T | null) => void];
+/** A control's name for a menu: its aria-label, else its text. */
+export declare const nameOf: (el: HTMLElement | null) => string;
+export interface RovingOptions {
+    orientation?: 'horizontal' | 'vertical';
+    /** Off: the items keep their own tab stops (a ToggleGroup inside a Toolbar leaves roving to the Toolbar). */
+    enabled?: boolean;
+    /** Moving also chooses (a radio group): called with the item focus moved to. */
+    onMove?: (el: HTMLElement) => void;
+    /** The item that holds the tab stop when focus hasn't been in the group yet (the chosen one). Default the first. */
+    initial?: (box: HTMLElement) => HTMLElement | null | undefined;
+}
+/**
+ * Spread the result onto the container. One item holds tabIndex 0: the last one focused, so returning to the group
+ * lands where you left it.
+ */
+export declare function useRoving<T extends HTMLElement>({ orientation, enabled, onMove, initial }?: RovingOptions): {
+    ref: React.RefObject<T | null>;
+    'data-roving'?: undefined;
+    'aria-orientation'?: undefined;
+    onFocus?: undefined;
+    onKeyDown?: undefined;
+} | {
+    ref: React.RefObject<T | null>;
+    'data-roving': string;
+    'aria-orientation': "horizontal" | "vertical";
+    onFocus: (e: React.FocusEvent) => void;
+    onKeyDown: (e: React.KeyboardEvent) => void;
+};

package/dist/types/save-bar.d.ts

@@ -0,0 +1,38 @@
+import * as React from 'react';
+/** What SaveBar reads from useEditRecord. */
+interface RecordLike {
+    dirty: boolean;
+    phase: 'editing' | 'invalid' | 'submitting' | 'saved' | 'failed';
+    errors: object;
+    error?: string;
+    draft?: object;
+    baseline?: object;
+    submit: () => unknown;
+    reset: () => unknown;
+}
+export interface SaveBarProps {
+    /** A useEditRecord result: SaveBar reads dirty, phase and errors from it, and Save and Discard call submit and reset. */
+    record?: RecordLike;
+    dirty?: boolean;
+    saving?: boolean;
+    /** Why the last save failed. The draft is kept. */
+    error?: string;
+    /** Fields that need attention before saving. */
+    invalidCount?: number;
+    /** How many fields changed. Default: counted from the record. */
+    changedCount?: number;
+    onSave?: () => void;
+    onDiscard?: () => void;
+    /** The bar appears once a change has settled into the draft (this long without another), not on the first key. Default 600. */
+    delay?: number;
+    saveLabel?: string;
+    discardLabel?: string;
+    className?: string;
+}
+/**
+ * Unsaved changes on a page, held above it until saved or discarded. A draft is something in your hand, so the bar
+ * floats at level 3, docked to the bottom edge (below Sheets and Dialogs). Saving hovers as a pending write; a saved
+ * draft lowers away while the fields settle; a failed save drops the bar to a trench and keeps the draft.
+ */
+export declare function SaveBar({ record, dirty: dirtyProp, saving: savingProp, error: errorProp, invalidCount: invalidProp, changedCount, onSave, onDiscard, delay, saveLabel, discardLabel, className }: SaveBarProps): React.JSX.Element;
+export {};

package/dist/types/saved-views.d.ts

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import { Filter } from './filter-bar.js';
+import { TableSort } from './collections.js';
+/** What a view keeps: its filters, their match, the sort and the columns. */
+export interface ViewState {
+    filters: Filter[];
+    match: 'all' | 'any';
+    sort: TableSort;
+    columnVisibility: Record<string, boolean>;
+    columnOrder?: string[];
+}
+export interface SavedView extends Partial<ViewState> {
+    id: string;
+    name: string;
+}
+export interface SavedViewsOptions {
+    views: SavedView[];
+    /** The view shown first. Default the first. */
+    defaultViewId?: string;
+    /** Saves the active view's changes over it. */
+    onSave?: (view: SavedView) => void;
+    /** Saves the active view's state as a new view with this name. */
+    onCreate?: (view: Omit<SavedView, 'id'>) => void;
+    onDelete?: (id: string) => void;
+}
+export interface SavedViewsApi {
+    views: SavedView[];
+    active: SavedView;
+    /** The view as it is now, with any unsaved changes. */
+    draft: ViewState;
+    /** The draft differs from what's saved. */
+    modified: boolean;
+    select: (id: string) => void;
+    save: () => void;
+    saveAsNew: (name: string) => void;
+    reset: () => void;
+    canSave: boolean;
+    canCreate: boolean;
+    /** Spread onto FilterBar. */
+    filterBarProps: {
+        value: Filter[];
+        onValueChange: (f: Filter[]) => void;
+        match: 'all' | 'any';
+        onMatchChange: (m: 'all' | 'any') => void;
+    };
+    /** Spread onto DataTable. */
+    tableProps: {
+        sort: TableSort;
+        onSortChange: (s: TableSort) => void;
+        columnVisibility: Record<string, boolean>;
+        onColumnVisibilityChange: (v: Record<string, boolean>) => void;
+        columnOrder?: string[];
+        onColumnOrderChange: (o: string[]) => void;
+    };
+}
+/**
+ * Named combinations of a FilterBar's filters and a DataTable's sort and columns. Each view keeps its own draft while
+ * you change it, so switching away and back doesn't lose work; `modified` says when the draft differs from what's saved.
+ */
+export declare function useSavedViews({ views, defaultViewId, onSave, onCreate, onDelete: _onDelete }: SavedViewsOptions): SavedViewsApi;
+export interface SavedViewsProps {
+    views: SavedViewsApi;
+    /** The FilterBar and DataTable the views drive: shown on the active tab's sheet. */
+    children: React.ReactNode;
+    'aria-label'?: string;
+    className?: string;
+}
+/**
+ * Saved views as folder Tabs: the active tab and the table beneath it are one raised sheet. A view you've changed is a
+ * draft: its tab carries a dot and "modified", and Save view, Save as new view and Reset appear beside the tabs.
+ */
+export declare function SavedViews({ views: v, children, 'aria-label': label, className }: SavedViewsProps): React.JSX.Element;

package/dist/types/scatter-chart.d.ts

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { type ChartConfig, type ChartContextValue, type ChartDatum, type ChartEmpty, type ChartInfo, type ChartReadout } from './chart.js';
+export interface ScatterChartProps {
+    /** The records: one dot each. */
+    data: ChartDatum[] | null | undefined | PromiseLike<ChartDatum[] | null>;
+    /** The key of each record's first measure, along the bottom. Name and format it in the container's config. */
+    x: string;
+    /** The key of each record's second measure, up the side. Name and format it in the container's config. */
+    y: string;
+    /** The key that sorts records into groups, each a colour and a marker shape. At most three; more belong in small multiples. */
+    group?: string;
+    /** Each record's stable identity, a key or a function: dots glide to new places when it's given, and cross-fade otherwise. */
+    id?: string | ((d: ChartDatum) => string);
+    /** Each record's name, a key or a function, for the readout, its name on the keyboard path and the table. */
+    name?: string | ((d: ChartDatum) => string);
+    /** Labels a few dots on the plot (outliers): return the words, or null for none. */
+    label?: (d: ChartDatum) => string | null | undefined;
+    /** A least-squares trend line, 1px ink-muted, named "Trend" (or the words you pass). */
+    trend?: boolean | string;
+    /** The dots' size in px. Default 8, the least. */
+    size?: number;
+    /** The readout. Default true. */
+    tooltip?: boolean;
+    /**
+     * What the chart is about (#188): groups that keep their colours while the rest take data-context, or a test for
+     * the records that keep theirs (on a one-series chart, the categories the takeaway names). The author's statement of
+     * importance, not a reader's filter (that's relevance).
+     */
+    focus?: string[] | ((d: ChartDatum) => boolean);
+    /** Filter in place: which records match. Misses recede to 35%, keeping their place and colour. */
+    relevance?: (d: ChartDatum) => 'match' | 'miss' | undefined;
+    /** With relevance: fit y to the matches. Default false: the axes hold. */
+    rescale?: boolean;
+    /** The selected record, or its id. The others recede; the frame says "Filtered to …". */
+    selected?: ChartDatum | string | null;
+    /** Makes dots selectable: called with the chosen record, or null when the selection clears. */
+    onSelect?: (d: ChartDatum | null) => void;
+    /** Makes dots open a level down, inside a Drilldown: return the id of the current node's child this record opens. */
+    drill?: (d: ChartDatum) => string | null | undefined;
+    /** What the plot says when there's no data. */
+    empty?: ChartEmpty;
+    /** A ChartTooltip or ChartLegend. */
+    children?: React.ReactNode;
+}
+/**
+ * Two measures per record, to see how they relate: payload against latency per endpoint, spend against usage per
+ * customer. Dots are the record, so they lie on the plot: at least 8px, a data-* fill and a marker shape per group, a
+ * 2px ring of the plot's own colour so overlapping dots stay apart. Never raised, never shaded. A few can be labelled
+ * in ink with a 1px leader, and a least-squares trend drawn as a 1px ink-muted line.
+ */
+export declare function ScatterChart(props: ScatterChartProps): React.JSX.Element;
+export declare namespace ScatterChart {
+    var chartPoint: (props: Record<string, unknown>, ctx: ChartContextValue, d: ChartDatum) => [number, number];
+    var chartMark: (props: Record<string, unknown>, ctx: ChartContextValue, d: ChartDatum) => string | null;
+    var chartNearest: (props: Record<string, unknown>, ctx: ChartContextValue, px: number, py: number) => number | null;
+    var chartMove: (props: Record<string, unknown>, ctx: ChartContextValue, i: number, e: React.KeyboardEvent) => number | null;
+    var chartName: (props: Record<string, unknown>, ctx: ChartContextValue, d: ChartDatum) => string;
+    var chartReadout: (props: Record<string, unknown>, ctx: ChartContextValue, d: ChartDatum) => ChartReadout;
+    var chartInfo: (props: Record<string, unknown>, config: ChartConfig) => ChartInfo;
+}

package/dist/types/schedule.d.ts

@@ -0,0 +1,80 @@
+import * as React from 'react';
+/** A local date-time, 'YYYY-MM-DDTHH:mm': no time zone. Convert at your edges. */
+export type LocalDateTime = string;
+export type ScheduleResult = {
+    ok: true;
+} | {
+    ok: false;
+    error: string;
+};
+export type ScheduleCreateResult<T> = {
+    ok: true;
+    value: T;
+} | {
+    ok: false;
+    error: string;
+};
+export interface ScheduleSpan {
+    start: LocalDateTime;
+    end: LocalDateTime;
+}
+export interface ScheduleProps<T> {
+    /** Default 'week'. */
+    view?: 'day' | 'week' | 'workweek';
+    /**
+     * What it shows under 480px of its own width (#257). 'day' (default): one day at a time, paged with the header's
+     * previous and next, so events and slots keep a readable width. false: the view, squeezed.
+     */
+    narrowView?: 'day' | false;
+    /** Any day in the period shown, 'YYYY-MM-DD'. */
+    date: string;
+    onDateChange?: (date: string) => void;
+    events: T[];
+    getKey: (event: T) => string;
+    getStart: (event: T) => LocalDateTime;
+    getEnd: (event: T) => LocalDateTime;
+    getLabel: (event: T) => string;
+    /** Minutes per slot, and the snap for moves and resizes. Default 15. */
+    step?: number;
+    /** Default '08:00' and '19:00'. */
+    dayStart?: string;
+    dayEnd?: string;
+    /** Pixels per hour. Default 48, or 96 under a coarse pointer so a 15-minute slot is 24px tall. */
+    hourHeight?: number;
+    /** 0 Sunday … 6 Saturday. Default 1. */
+    weekStartsOn?: number;
+    /** A new event's length when made with Enter on an empty slot. Default 60 minutes. */
+    defaultDuration?: number;
+    renderEvent?: (event: T) => React.ReactNode;
+    /** Resolve after `events` includes the new event. */
+    onCreate?: (request: ScheduleSpan & {
+        title: string;
+    }) => ScheduleCreateResult<T> | Promise<ScheduleCreateResult<T>>;
+    /** A move or a resize. Resolve after `events` reflects it. */
+    onChange?: (next: ScheduleSpan & {
+        id: string;
+    }, previous: T) => ScheduleResult | Promise<ScheduleResult>;
+    onRename?: (event: T, title: string) => ScheduleResult | Promise<ScheduleResult>;
+    /** Enter on an event: show its details (in a Sheet, not a Dialog). */
+    onOpen?: (event: T) => void;
+    /** Delete. Your removal policy applies. */
+    onRemove?: (event: T) => void;
+    /** Someone else is moving this event: it can't be picked up. */
+    heldBy?: (event: T) => {
+        name: string;
+        presence?: 1 | 2 | 3;
+    } | null | undefined;
+    /** Refuse a span (outside hours, a closed room). */
+    isUnavailable?: (span: ScheduleSpan) => boolean;
+    /** The now line's time. Default: the clock. */
+    now?: LocalDateTime;
+    locale?: string;
+    'aria-label'?: string;
+    className?: string;
+}
+/**
+ * A day or week of time whose events you handle directly. The grid is ground; events are live work items raised one
+ * level, like BoardCards. Time opens into wells only while something could land in it (carrying or drawing), and the
+ * slot under a carried event deepens to a trench the length of the event. A carried event floats at level 3, tilted.
+ */
+export declare function Schedule<T>({ view: viewProp, narrowView, date, onDateChange, events, getKey, getStart, getEnd, getLabel, step, dayStart, dayEnd, hourHeight: hourHeightProp, weekStartsOn, defaultDuration, renderEvent, onCreate, onChange, onRename, onOpen, onRemove, heldBy, isUnavailable, now, locale, className, ...aria }: ScheduleProps<T>): React.JSX.Element;

package/dist/types/secret-field.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+export interface SecretFieldProps {
+    /** What the secret is ("Secret key"). It names the field. */
+    label: string;
+    /** The word used in the buttons and the warning: "Copy key", "Show key", "Revoke key". Default "key". */
+    noun?: string;
+    /** A secret just created: shown in full, once. */
+    value?: string;
+    /** With value: the secret is shown only now. It stays an opening until onAcknowledge, then masks. */
+    once?: boolean;
+    /** Called when the person confirms they've saved the secret. Gate closing on it. */
+    onAcknowledge?: () => void;
+    /** The confirmation's words. Default "I've saved this {noun}". */
+    acknowledgeLabel?: string;
+    /** The warning while the secret is new. Default "You won't see this {noun} again. Store it somewhere safe." */
+    warning?: React.ReactNode;
+    /** A stored secret: the part shown before the mask ("sk_live_"). */
+    prefix?: string;
+    /** A stored secret: its last characters ("4f2a"). */
+    maskedTail?: string;
+    /** A stored secret that may be shown again: returns it (it may be a promise). Without it there's no reveal. */
+    onReveal?: () => string | Promise<string>;
+    onRotate?: () => void;
+    /** Revoking is held, not clicked (HoldButton). */
+    onRevoke?: () => void;
+    className?: string;
+}
+/**
+ * A key or token: shown once when created, masked afterwards. A new secret is an opening, something to take away: a
+ * sunk well with copy beside it and a warning, until you say you've saved it; then it fills flush and masks. A stored
+ * secret is settled: flush, masked to its tail, with reveal (if allowed), rotate and a held revoke.
+ */
+export declare function SecretField({ label, noun, value, once, onAcknowledge, acknowledgeLabel, warning, prefix, maskedTail, onReveal, onRotate, onRevoke, className }: SecretFieldProps): React.JSX.Element;

package/dist/types/select.d.ts

@@ -1,4 +1,6 @@
 import * as React from 'react';
+import { type Presentation } from './core.js';
+export declare const EXIT_3 = 160;
 export interface SelectOption {
     value: string;
     label: React.ReactNode;
@@ -18,6 +20,34 @@ export interface SelectItemProps {
 }
 /** Declares one option of a Select. It renders nothing itself; Select reads its props. */
 export declare function SelectItem(_: SelectItemProps): React.ReactElement | null;
+export declare const textOf: (o: SelectOption) => string;
+/** The Checkbox family's tick: the same path and stroke, here in accent-ink on the chosen row. */
+export declare const Tick: () => React.JSX.Element;
+/** Opens downward unless there's more room above the field than below it (within whatever clips it). */
+export declare function useSide(open: boolean, anchor: React.RefObject<HTMLElement | null>, list: React.RefObject<HTMLElement | null>): "bottom" | "top";
+/** Finds the label element that names a control by id, so the list can carry the same name. */
+export declare function useLabelId(controlId: string, fallback: string): string | undefined;
+type ListProps = {
+    id: string;
+    options: SelectOption[];
+    active: number;
+    value: string;
+    state: 'open' | 'closed';
+    side: 'bottom' | 'top';
+    query?: string;
+    empty?: React.ReactNode;
+    listRef: React.RefObject<HTMLDivElement | null>;
+    labelledBy?: string;
+    label?: string;
+    focusable: boolean;
+    onActive: (i: number) => void;
+    onChoose: (i: number) => void;
+    onKeyDown?: (e: React.KeyboardEvent) => void;
+    /** Presented as a bottom sheet (#249); Close calls onDismiss. */
+    sheet?: boolean;
+    onDismiss?: () => void;
+};
+export declare function OptionList({ id, options, active, value, state, side, query, empty, listRef, labelledBy, label, focusable, onActive, onChoose, onKeyDown, sheet, onDismiss }: ListProps): React.JSX.Element;
 interface FieldLike {
     id?: string;
     name?: string;
@@ -36,6 +66,13 @@ interface FieldLike {
     defaultOpen?: boolean;
 }
 export interface SelectProps extends FieldLike {
+    /**
+     * 'auto' (default): the list opens under the trigger, or on a narrow touch screen as a sheet at the bottom edge with
+     * the field's label and Close (#249). 'anchored' or 'sheet' forces one.
+     */
+    presentation?: Presentation;
+    /** Visible required-field feedback after native validation. Localize this for the application. */
+    requiredMessage?: string;
     value?: string;
     defaultValue?: string;
     onValueChange?: (value: string) => void;
@@ -48,8 +85,13 @@ export interface SelectProps extends FieldLike {
  * empty, its floor rises flush once a value is chosen, and it drops to trench depth when invalid. The list rises from
  * the field's edge at level 3 with one gliding highlight; the chosen option wears the Checkbox family's tick.
  */
-export declare function Select({ value, defaultValue, onValueChange, items, children, id, name, required, disabled, invalid, size, placeholder, defaultOpen, className, ...aria }: SelectProps): React.JSX.Element;
+export declare function Select({ value, defaultValue, onValueChange, items, children, id, name, required, disabled, invalid, size, placeholder, requiredMessage, defaultOpen, className, presentation, ...aria }: SelectProps): React.JSX.Element;
 export interface ComboboxProps extends FieldLike {
+    /**
+     * 'auto' (default) and 'anchored': the list stays under the field you're typing in, so the on-screen keyboard never
+     * hides the list or the field. 'sheet' opens it at the bottom edge with the field's label and Close (#249).
+     */
+    presentation?: Presentation;
     items: SelectOption[];
     value?: string;
     defaultValue?: string;
@@ -63,5 +105,5 @@ export interface ComboboxProps extends FieldLike {
  * An editable Select: type to filter, choose to fill. What you type is a query, not yet a value, so the field stays an
  * opening (its back wall showing) until an option is chosen; then its floor rises flush.
  */
-export declare function Combobox({ items, value, defaultValue, onValueChange, filter, empty, id, name, required, disabled, invalid, size, placeholder, defaultOpen, className, ...aria }: ComboboxProps): React.JSX.Element;
+export declare function Combobox({ items, value, defaultValue, onValueChange, filter, empty, id, name, required, disabled, invalid, size, placeholder, defaultOpen, className, presentation, ...aria }: ComboboxProps): React.JSX.Element;
 export {};

package/dist/types/separator.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+export interface SeparatorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Default horizontal. A vertical one stretches to the height of the row it's in. */
+    orientation?: 'horizontal' | 'vertical';
+    /** Purely visual: hidden from assistive technology (role="none"). Use it when the layout already says what's parted. */
+    decorative?: boolean;
+    /** A word between two lines ("or"). It's read in the flow, so it's never decorative. */
+    label?: React.ReactNode;
+}
+/** A divider on the ground: 1px of `line`, never `line-control` and never a shadow. role="separator" unless decorative. */
+export declare const Separator: React.ForwardRefExoticComponent<SeparatorProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types/settings.d.ts

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import type { DepthProps } from './core.js';
+export interface SettingsSectionProps extends Omit<React.HTMLAttributes<HTMLElement>, 'title'> {
+    /** Every section has a heading; it names the region. */
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    /** 'critical': the danger zone. A critical rim and the same height as every other section. */
+    tone?: 'critical';
+    /** Default 2. */
+    headingLevel?: 2 | 3;
+    /** Why this person can't change these settings ("Only workspace admins can change billing details"). The rows are disabled and say why. */
+    readOnlyReason?: React.ReactNode;
+}
+/**
+ * One section of a settings page: a raised Card (level 1) with a heading and rows. The danger zone is the same card with
+ * a critical rim, never higher or louder: its consequences are said in its rows' words.
+ */
+export declare function SettingsSection({ title, description, tone, headingLevel, readOnlyReason, className, children, ...rest }: SettingsSectionProps): React.JSX.Element;
+export interface SettingsRowProps extends DepthProps {
+    label: React.ReactNode;
+    /** What the setting does, beside its label. */
+    description?: React.ReactNode;
+    /** Replaces the description and marks the control invalid. */
+    error?: React.ReactNode;
+    /**
+     * The words for an apply-now control's write. Defaults: pending "Saving…", committed "Saved", failed "Couldn't save
+     * this change. Try again." Pass the status of the write the control made; the row hovers while it's pending.
+     */
+    statusText?: Partial<Record<'pending' | 'committed' | 'failed', React.ReactNode>>;
+    className?: string;
+    /** Exactly one control: Switch, Select, Input, Button… It's labelled and described by the row. */
+    children: React.ReactElement<any>;
+}
+/**
+ * A setting: label and description on the start side, the control on the end side, stacked when the section is narrow.
+ * A control that applies immediately reports its write through `status` (pending hovers, committed lands, failed drops
+ * into a trench), with the state in words. Fields saved together belong to one draft with a SaveBar instead.
+ */
+export declare function SettingsRow({ label, description, error, status, settle, heldBy, relevance, statusText, className, children }: SettingsRowProps): React.JSX.Element;

package/dist/types/sheet.d.ts

@@ -20,7 +20,7 @@ export interface SheetProps extends Omit<React.HTMLAttributes<HTMLDivElement>, '
  */
 export declare function Sheet({ open, defaultOpen, onOpenChange, trigger, side, size, modal, dismissible, className, style, children, ...rest }: SheetProps): React.JSX.Element;
 /** The title block. It stays at the top while the sheet scrolls, and rises once content passes under it. */
-export declare function SheetHeader({ className, ...p }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+export declare function SheetHeader({ className, children, ...p }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
 export declare function SheetTitle({ className, ...p }: React.HTMLAttributes<HTMLHeadingElement>): React.JSX.Element;
 export declare function SheetDescription({ className, ...p }: React.HTMLAttributes<HTMLParagraphElement>): React.JSX.Element;
 /** Actions, right-aligned. It stays at the bottom; where content continues beneath it, its top edge curves away. */

package/dist/types/sparkline.d.ts

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { type ChartDatum } from './chart.js';
+type SparkData = Array<number | null> | ChartDatum[];
+export interface SparklineProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'> {
+    /**
+     * The values, oldest first: numbers (a null is a gap), or records with `y` naming the value. Undefined while your
+     * data loads, or a promise: until it lands the sparkline is an imprint one line high and its own width.
+     */
+    data: SparkData | null | undefined | PromiseLike<SparkData | null>;
+    /** The key of each record's value, when `data` holds records. */
+    y?: string;
+    /** The key of each record's date, so the label can say "over 30 days" rather than "over 30 values". */
+    x?: string;
+    /** A line (default), or bars standing on zero for counts. */
+    kind?: 'line' | 'bar';
+    /**
+     * The colour. 'neutral' (default) is ink-muted: context for the number beside it. 'data' is data-1, when the
+     * sparkline is the series itself. A status hue only when the series means good or bad, and the text beside it says so.
+     */
+    tone?: 'neutral' | 'data' | 'positive' | 'caution' | 'critical';
+    /** A normal range, drawn as a flat band behind the line. The label says how many values fall outside it. */
+    band?: [number, number];
+    /** The width: a number of px or any CSS length. Default 5em. Its height is the line height of the text around it. */
+    width?: number | string;
+    /** Formats values in the generated label. Default: compact ("1.2K"). */
+    format?: (value: number) => string;
+    /** Replaces the generated label ("Up 12% over 30 days, from 1.2K to 1.4K."). */
+    summary?: string;
+    /** The text beside it already says what it shows: hide it from assistive technology. */
+    decorative?: boolean;
+    locale?: string;
+}
+/** "Up 12% over 30 days, from 1.2K to 1.4K." Direction in words, the first and last values, and the band if any. */
+export declare function describeTrend(vals: Array<number | null>, opts: {
+    format: (v: number) => string;
+    span?: string;
+    band?: [number, number];
+}): string;
+/**
+ * A word-sized trend: rising, falling, spiky or flat at a glance, beside the number that gives the detail. It's the
+ * record in the row it sits in, so it lies flush on the ground like everything a chart draws: a 1.5px stroke (or flat
+ * bars), no axes, no gridlines, no readout, no fill under the line. Its height is the line height of the text beside
+ * it. The last point wears a 4px marker. Colour is context (ink-muted) unless you say it's the series or a status.
+ */
+export declare function Sparkline({ data, ...props }: SparklineProps): React.JSX.Element;
+export {};

package/dist/types/split-button.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { ButtonProps } from './controls.js';
+import { MenuEntry } from './overlays.js';
+export interface SplitButtonProps extends Omit<ButtonProps, 'variant' | 'children' | 'square'> {
+    /** The default action's words ("Save changes"). They also name the group. */
+    label: React.ReactNode;
+    /** primary (default) or secondary. */
+    variant?: 'primary' | 'secondary';
+    /** The alternatives, in a DropdownMenu. */
+    items: MenuEntry[];
+    /** The chevron's name. Default "More options". Say what for: "More save options". */
+    menuLabel?: string;
+    /** Names the group when label isn't plain text. */
+    groupLabel?: string;
+}
+/**
+ * One action with its alternatives: two faces on one slab, sharing one wall and parted by a line notch. The slab lifts
+ * and presses as one whichever face is pointed at; the face under the pointer is tinted, so you can tell which action a
+ * click takes without the faces splitting into two heights. Alt+Down on the action opens the menu.
+ */
+export declare const SplitButton: React.ForwardRefExoticComponent<SplitButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/types/stat.d.ts

@@ -0,0 +1,54 @@
+import * as React from 'react';
+export interface StatChange {
+    /** The change. By default a fraction (0.08 is up 8%); with `format`, in whatever units you format. */
+    value: number;
+    /** What it's compared with, in words: "last month". */
+    vs?: string;
+    /** The value it's compared with, shown and announced as "vs last month: 11,556". Formatted like the value. */
+    previous?: number;
+    /** Formats the size of the change, without its sign: the stat says "Up" or "Down" in words. Default: a percentage. */
+    format?: (magnitude: number) => string;
+}
+export interface StatProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {
+    /** What the number is: "Active users". It names the stat. */
+    label: React.ReactNode;
+    /**
+     * The number. Undefined while your data loads, or a promise: until it lands the value is an imprint of a number's
+     * width, with the label already in place. null: nothing to show (an em dash).
+     */
+    value: number | string | null | undefined | PromiseLike<number | string | null>;
+    /** Formats a numeric value and `change.previous`. Default: Intl.NumberFormat. */
+    format?: (value: number) => string;
+    /** How it changed, and against what. */
+    change?: StatChange;
+    /**
+     * Which direction is good. Without it the change is neutral, ink-muted text with an arrow, because up isn't always
+     * good (an error rate). With it, the change is a Badge plate whose lamp is positive or critical.
+     */
+    good?: 'up' | 'down';
+    /** A trend beside the value, usually a decorative Sparkline. */
+    trend?: React.ReactNode;
+    /** More context, in a caption under the change: "Signed in at least once in 28 days." */
+    help?: React.ReactNode;
+    /** 'hero' sets the value in text-display, for the one number a view leads with. Once per view. */
+    size?: 'default' | 'hero';
+    /** Announce a changed value politely: "Active users, 12,480, up 8% vs last month." */
+    live?: boolean;
+    locale?: string;
+}
+/**
+ * A headline number with how it changed and against what. A number is the record, so a stat lies flush on whatever
+ * it sits on (a Card, or the page): no level of its own. A changed value cross-fades and the stat gets the afterglow,
+ * within the attention budget; it never counts up. The change says its direction in words and with an arrow, and only
+ * takes a status colour when you say which direction is good.
+ */
+export declare function Stat({ value, ...props }: StatProps): React.JSX.Element;
+export interface StatGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Names the row of stats for assistive technology: "This month". */
+    'aria-label'?: string;
+}
+/**
+ * A row of stats that land together: their values stay imprints until the slowest arrives, then rise at once
+ * (RevealGroup). They wrap to fit, each at least 180px wide.
+ */
+export declare function StatGroup({ className, children, ...rest }: StatGroupProps): React.JSX.Element;