@rivetjs/cdk 0.0.0-stage → 0.1.0-alpha.0

package/collections/tree-state.d.ts

@@ -0,0 +1,47 @@
+import { type Signal } from "@rivetjs/reactivity";
+import { TreeCollection } from "./tree.js";
+import type { Collection, CollectionChildren, Key, Node } from "./types.js";
+import { SelectionManager } from "../selection/manager.js";
+import { type MultipleSelectionState, type MultipleSelectionStateProps } from "../selection/state.js";
+export interface TreeProps<T> extends MultipleSelectionStateProps {
+    /** Item objects (array or accessor of one), rendered by `children`. */
+    items?: Iterable<T> | (() => Iterable<T>) | undefined;
+    /** Static `Item(…)` / `Section(…)` elements, or a renderer for `items`. */
+    children?: CollectionChildren<NoInfer<T>> | undefined;
+    /**
+     * A pre-built collection (RAC `Tree` passes its flattened, expanded-aware collection) or an
+     * accessor of one (`collectionOf`); used as is instead of building from `items` / `children`.
+     */
+    collection?: Collection<Node<T>> | (() => Collection<Node<T>>) | undefined;
+    /** Expanded keys: a signal (two-way), a plain value or an accessor returning a Set (controlled). */
+    expandedKeys?: Signal<Set<Key>> | (() => Set<Key>) | Iterable<Key> | undefined;
+    /** Initially expanded keys (uncontrolled). */
+    defaultExpandedKeys?: Iterable<Key> | undefined;
+    /** Handler that is called when items are expanded or collapsed. */
+    onExpandedChange?: ((keys: Set<Key>) => void) | undefined;
+}
+export interface TreeState<T = any> {
+    /** Selection + focus state. */
+    readonly selectionState: MultipleSelectionState;
+    /** A set of keys for items that are disabled. */
+    readonly disabledKeys: Set<Key>;
+    /** A set of keys for items that are expanded. */
+    readonly expandedKeys: Signal<Set<Key>>;
+    readonly expandedKeysControlled: boolean;
+    readonly onExpandedChange?: ((keys: Set<Key>) => void) | undefined;
+    readonly items?: Iterable<T> | (() => Iterable<T>) | undefined;
+    readonly children?: CollectionChildren<T> | undefined;
+    readonly collection?: Collection<Node<T>> | (() => Collection<Node<T>>) | undefined;
+}
+/** useTreeState: expanded keys + selection state for tree-like components. */
+export declare function createTreeState<T>(props: TreeProps<T>): TreeState<T>;
+/** The tree collection (react-stately `state.collection`); tracks `expandedKeys` and `items`. */
+export declare function treeCollection<T>(state: TreeState<T>): TreeCollection<T>;
+/** The selection manager (react-stately `state.selectionManager`). */
+export declare function treeSelectionManager<T>(state: TreeState<T>, collection?: Collection<Node<T>>): SelectionManager;
+/** Replaces the set of expanded keys. */
+export declare function setExpandedKeys<T>(state: TreeState<T>, keys: Set<Key>): void;
+/** Toggles the expanded state for an item by its key. */
+export declare function toggleTreeKey<T>(state: TreeState<T>, key: Key): void;
+/** Reset the focused key if that item was deleted from the collection (useTreeState's effect). */
+export declare function resetTreeFocusedKey<T>(state: TreeState<T>, collection?: Collection<Node<T>>): void;

package/collections/tree-state.js

@@ -0,0 +1,73 @@
+// Ported from @react-stately/tree (useTreeState.ts), Apache-2.0, © Adobe.
+//
+// Tree state: a TreeCollection built from `items` / `children` (only expanded rows are visible to
+// keyboard navigation) plus expanded keys and multiple-selection + focus state.
+//
+// Rivet: the state is serializable (signals + plain data); the collection and SelectionManager are
+// derived on demand by `treeCollection(state)` / `treeSelectionManager(state)` (cached per state,
+// items array and expanded-keys set), as in `@rivetjs/cdk/state/list`.
+import { signal, untrack } from "@rivetjs/reactivity";
+import { CollectionBuilder, createCollection } from "./builder.js";
+import { TreeCollection } from "./tree.js";
+import { SelectionManager } from "../selection/manager.js";
+import { createMultipleSelectionState } from "../selection/state.js";
+const isSignal = (value) => typeof value === "function" && typeof value.set === "function";
+/** useTreeState: expanded keys + selection state for tree-like components. */
+export function createTreeState(props) {
+    const prop = props.expandedKeys;
+    const controlled = prop !== undefined && !isSignal(prop);
+    // A Signal is two-way; an accessor (live prop, `liveKeys`: a Set) is controlled, read live, never written.
+    const expandedKeys = typeof prop === "function" ? prop : signal(new Set(controlled ? prop : (props.defaultExpandedKeys ?? [])));
+    const disabledKeys = new Set(props.disabledKeys ?? []);
+    return {
+        selectionState: createMultipleSelectionState({ ...props, disabledKeys }),
+        disabledKeys,
+        expandedKeys,
+        expandedKeysControlled: controlled,
+        onExpandedChange: props.onExpandedChange,
+        items: props.items,
+        children: props.children,
+        collection: props.collection,
+    };
+}
+const trees = new WeakMap();
+/** The tree collection (react-stately `state.collection`); tracks `expandedKeys` and `items`. */
+export function treeCollection(state) {
+    const provided = state.collection;
+    if (provided)
+        return (typeof provided === "function" ? provided() : provided);
+    const items = typeof state.items === "function" ? state.items() : state.items;
+    const expanded = state.expandedKeys();
+    const cached = trees.get(state);
+    if (cached && cached.items === items && cached.expanded === expanded)
+        return cached.collection;
+    const builder = cached?.builder ?? new CollectionBuilder();
+    const collection = createCollection({ children: state.children ?? null, items: items }, (nodes) => new TreeCollection(nodes, { expandedKeys: expanded }), null, builder);
+    trees.set(state, { items, expanded, collection, builder });
+    return collection;
+}
+/** The selection manager (react-stately `state.selectionManager`). */
+export function treeSelectionManager(state, collection = treeCollection(state)) {
+    return new SelectionManager(collection, state.selectionState);
+}
+/** Replaces the set of expanded keys. */
+export function setExpandedKeys(state, keys) {
+    if (!state.expandedKeysControlled)
+        state.expandedKeys.set(keys);
+    state.onExpandedChange?.(keys);
+}
+/** Toggles the expanded state for an item by its key. */
+export function toggleTreeKey(state, key) {
+    const res = new Set(untrack(state.expandedKeys));
+    if (res.has(key))
+        res.delete(key);
+    else
+        res.add(key);
+    setExpandedKeys(state, res);
+}
+/** Reset the focused key if that item was deleted from the collection (useTreeState's effect). */
+export function resetTreeFocusedKey(state, collection = treeCollection(state)) {
+    const focusedKey = untrack(state.selectionState.focusedKey);
+    if (focusedKey != null && !collection.getItem(focusedKey))
+        state.selectionState.focusedKey.set(null);
+}

package/collections/tree.d.ts

@@ -0,0 +1,20 @@
+import type { Collection, Key, Node } from "./types.js";
+/** A tree flattened in display order: children of sections and of expanded items are visited. */
+export declare class TreeCollection<T> implements Collection<Node<T>> {
+    private keyMap;
+    private iterable;
+    private firstKey;
+    private lastKey;
+    constructor(nodes: Iterable<Node<T>>, { expandedKeys }?: {
+        expandedKeys?: Set<Key>;
+    });
+    [Symbol.iterator](): IterableIterator<Node<T>>;
+    get size(): number;
+    getKeys(): IterableIterator<Key>;
+    getKeyBefore(key: Key): Key | null;
+    getKeyAfter(key: Key): Key | null;
+    getFirstKey(): Key | null;
+    getLastKey(): Key | null;
+    getItem(key: Key): Node<T> | null;
+    at(idx: number): Node<T> | null;
+}

package/collections/tree.js

@@ -0,0 +1,66 @@
+/** A tree flattened in display order: children of sections and of expanded items are visited. */
+export class TreeCollection {
+    keyMap = new Map();
+    iterable;
+    firstKey = null;
+    lastKey = null;
+    constructor(nodes, { expandedKeys } = {}) {
+        this.iterable = nodes;
+        const expanded = expandedKeys || new Set();
+        const visit = (node) => {
+            this.keyMap.set(node.key, node);
+            if (node.childNodes && (node.type === "section" || expanded.has(node.key)))
+                for (const child of node.childNodes)
+                    visit(child);
+        };
+        for (const node of nodes)
+            visit(node);
+        let last = null;
+        let index = 0;
+        for (const [key, node] of this.keyMap) {
+            if (last) {
+                last.nextKey = key;
+                node.prevKey = last.key;
+            }
+            else {
+                this.firstKey = key;
+                node.prevKey = undefined;
+            }
+            if (node.type === "item")
+                node.index = index++;
+            last = node;
+            last.nextKey = undefined;
+        }
+        this.lastKey = last?.key ?? null;
+    }
+    *[Symbol.iterator]() {
+        yield* this.iterable;
+    }
+    get size() {
+        return this.keyMap.size;
+    }
+    getKeys() {
+        return this.keyMap.keys();
+    }
+    getKeyBefore(key) {
+        const node = this.keyMap.get(key);
+        return node ? (node.prevKey ?? null) : null;
+    }
+    getKeyAfter(key) {
+        const node = this.keyMap.get(key);
+        return node ? (node.nextKey ?? null) : null;
+    }
+    getFirstKey() {
+        return this.firstKey;
+    }
+    getLastKey() {
+        return this.lastKey;
+    }
+    getItem(key) {
+        return this.keyMap.get(key) ?? null;
+    }
+    at(idx) {
+        const keys = [...this.getKeys()];
+        return this.getItem(keys[idx]);
+    }
+}

package/collections/types.d.ts

@@ -0,0 +1,229 @@
+/** Item key: serializable, rendered as `data-key`. */
+export type Key = string | number;
+/** Rendered content of a node (Rivet content: string, node, accessor, …). */
+export type Rendered = unknown;
+export type SelectionMode = "none" | "single" | "multiple";
+export type SelectionBehavior = "toggle" | "replace";
+/** `"all"` (select all, including items not loaded yet) or a set of keys. */
+export type Selection = "all" | Set<Key>;
+export type FocusStrategy = "first" | "last";
+export type DisabledBehavior = "selection" | "all";
+export type Orientation = "horizontal" | "vertical";
+export type Direction = "ltr" | "rtl";
+export type LoadingState = "loading" | "sorting" | "loadingMore" | "error" | "idle" | "filtering";
+export interface SortDescriptor {
+    /** The key of the column to sort by. */
+    column: Key;
+    /** The direction to sort by. */
+    direction: SortDirection;
+}
+export type SortDirection = "ascending" | "descending";
+/** A generic interface to access a readonly sequential collection of unique keyed items. */
+export interface Collection<T> extends Iterable<T> {
+    /** The number of items in the collection. */
+    readonly size: number;
+    /** Iterate over all keys in the collection. */
+    getKeys(): Iterable<Key>;
+    /** Get an item by its key. */
+    getItem(key: Key): T | null;
+    /** Get an item by the index of its key. */
+    at(idx: number): T | null;
+    /** Get the key that comes before the given key in the collection. */
+    getKeyBefore(key: Key): Key | null;
+    /** Get the key that comes after the given key in the collection. */
+    getKeyAfter(key: Key): Key | null;
+    /** Get the first key in the collection. */
+    getFirstKey(): Key | null;
+    /** Get the last key in the collection. */
+    getLastKey(): Key | null;
+    /** Iterate over the child items of the given key. */
+    getChildren?(key: Key): Iterable<T>;
+    /** Returns a string representation of the item's contents. */
+    getTextValue?(key: Key): string;
+    /** Filters the collection using the given function. */
+    filter?(filterFn: (nodeValue: string, node: T) => boolean): Collection<T>;
+}
+export interface Node<T> {
+    /** The type of item this node represents. */
+    type: string;
+    /** A unique key for the node. */
+    key: Key;
+    /** The object value the node was created from. */
+    value: T | null;
+    /** The level of depth this node is at in the hierarchy. */
+    level: number;
+    /** Whether this item has children, even if not loaded yet. */
+    hasChildNodes: boolean;
+    /**
+     * The loaded children of this node.
+     * @deprecated Use `collection.getChildren(node.key)` instead.
+     */
+    childNodes: Iterable<Node<T>>;
+    /** The rendered contents of this node. */
+    rendered: Rendered;
+    /** A string value for this node, used for features like typeahead. */
+    textValue: string;
+    /** An accessibility label for this node. */
+    "aria-label"?: string | undefined;
+    /** The index of this node within its parent. */
+    index: number;
+    /** A function that should be called to wrap the rendered node. */
+    wrapper?: ((element: Rendered) => Rendered) | undefined;
+    /** The key of the parent node. */
+    parentKey?: Key | null | undefined;
+    /** The key of the node before this node. */
+    prevKey?: Key | null | undefined;
+    /** The key of the node after this node. */
+    nextKey?: Key | null | undefined;
+    /** The first child key of this node. */
+    firstChildKey?: Key | null | undefined;
+    /** The last child key of this node. */
+    lastChildKey?: Key | null | undefined;
+    /** Additional properties specific to a particular node type. */
+    props?: any;
+    /** @private */
+    shouldInvalidate?: ((context: any) => boolean) | undefined;
+    /** A function that renders this node. */
+    render?: ((node: Node<any>) => Rendered) | undefined;
+}
+export interface Rect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface Size {
+    width: number;
+    height: number;
+}
+/** A KeyboardDelegate returns collection item keys with respect to visual layout. */
+export interface KeyboardDelegate {
+    /** Returns the key visually below the given one, or `null` for none. */
+    getKeyBelow?(key: Key, options?: {
+        includeDisabled?: boolean;
+    }): Key | null;
+    /** Returns the key visually above the given one, or `null` for none. */
+    getKeyAbove?(key: Key, options?: {
+        includeDisabled?: boolean;
+    }): Key | null;
+    /** Returns the key visually to the left of the given one, or `null` for none. */
+    getKeyLeftOf?(key: Key, options?: {
+        includeDisabled?: boolean;
+    }): Key | null;
+    /** Returns the key visually to the right of the given one, or `null` for none. */
+    getKeyRightOf?(key: Key, options?: {
+        includeDisabled?: boolean;
+    }): Key | null;
+    /** Returns the key visually one page below the given one, or `null` for none. */
+    getKeyPageBelow?(key: Key): Key | null;
+    /** Returns the key visually one page above the given one, or `null` for none. */
+    getKeyPageAbove?(key: Key): Key | null;
+    /** Returns the first key, or `null` for none. */
+    getFirstKey?(key?: Key | null, global?: boolean): Key | null;
+    /** Returns the last key, or `null` for none. */
+    getLastKey?(key?: Key | null, global?: boolean): Key | null;
+    /** Returns the next key after `fromKey` that matches the given search string, or `null` for none. */
+    getKeyForSearch?(search: string, fromKey?: Key | null): Key | null;
+}
+/** A LayoutDelegate provides layout information for collection items. */
+export interface LayoutDelegate {
+    /** Returns a rectangle for the item with the given key. */
+    getItemRect(key: Key): Rect | null;
+    /** Returns the visible rectangle of the collection. */
+    getVisibleRect(): Rect;
+    /** Returns the size of the scrollable content in the collection. */
+    getContentSize(): Size;
+    /** Returns a list of keys between `from` and `to`. */
+    getKeyRange?(from: Key, to: Key): Key[];
+    /** Optional spatial overrides (card / waterfall layouts). */
+    getKeyRightOf?(key: Key): Key | null;
+    getKeyLeftOf?(key: Key): Key | null;
+}
+/** Link props of an item (`LinkDOMProps`). */
+export interface LinkDOMProps {
+    href?: string | undefined;
+    hrefLang?: string | undefined;
+    target?: string | undefined;
+    rel?: string | undefined;
+    download?: boolean | string | undefined;
+    ping?: string | undefined;
+    referrerPolicy?: string | undefined;
+    routerOptions?: unknown;
+}
+export interface ItemProps<T> extends LinkDOMProps {
+    /** Unique key (React's element `key`). */
+    key?: Key | undefined;
+    /** Rendered contents of the item or child items. */
+    children?: Rendered | CollectionElement<T> | CollectionElement<T>[];
+    /** Rendered contents of the item if `children` contains child items. */
+    title?: Rendered;
+    /** A string representation of the item's contents, used for features like typeahead. */
+    textValue?: string | undefined;
+    /** An accessibility label for this item. */
+    "aria-label"?: string | undefined;
+    /** A list of child item objects. Used for dynamic collections. */
+    childItems?: Iterable<T> | undefined;
+    /** Whether this item has children, even if not loaded yet. */
+    hasChildItems?: boolean | undefined;
+    /** Item-level disabled flag (react-aria-components). */
+    isDisabled?: boolean | undefined;
+    [prop: string]: unknown;
+}
+export interface SectionProps<T> {
+    key?: Key | undefined;
+    /** Rendered contents of the section, e.g. a header. */
+    title?: Rendered;
+    /** An accessibility label for the section. */
+    "aria-label"?: string | undefined;
+    /** Static child items or a function to render children. */
+    children: CollectionElement<T> | CollectionElement<T>[] | ItemRenderer<T>;
+    /** Item objects in the section. */
+    items?: Iterable<T> | undefined;
+    [prop: string]: unknown;
+}
+/**
+ * A collection element: what `Item(…)` / `Section(…)` return (React's `<Item>` element). `type`
+ * carries the `getCollectionNode` generator; `key` is the element key.
+ */
+export interface CollectionElement<T = unknown, P = any> {
+    readonly $$collection: true;
+    readonly type: CollectionComponent<T, P>;
+    readonly key: Key | null;
+    readonly props: P;
+}
+/** A component the builder understands (react-stately's static `getCollectionNode`). */
+export interface CollectionComponent<T = unknown, P = any> {
+    (props: P): CollectionElement<T, P>;
+    getCollectionNode(props: P, context: any): Generator<PartialNode<T>, void, Node<T>[]>;
+}
+export type ItemRenderer<T> = (item: T) => CollectionElement<T> | null;
+export type CollectionChildren<T> = CollectionElement<T> | null | (CollectionElement<T> | null)[] | ItemRenderer<T>;
+export interface CollectionBase<T> {
+    /** The contents of the collection. */
+    children: CollectionChildren<T>;
+    /** Item objects in the collection. */
+    items?: Iterable<T> | undefined;
+    /** The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with. */
+    disabledKeys?: Iterable<Key> | undefined;
+}
+export interface CollectionStateBase<T, C extends Collection<Node<T>> = Collection<Node<T>>> extends Partial<CollectionBase<T>> {
+    /** A pre-constructed collection to use instead of building one from items and children. */
+    collection?: C | undefined;
+}
+/** A partial node yielded by `getCollectionNode` (react-stately `PartialNode`). */
+export interface PartialNode<T> {
+    type?: string | undefined;
+    key?: Key | null | undefined;
+    value?: T | undefined;
+    element?: CollectionElement<T> | null | undefined;
+    wrapper?: ((element: Rendered) => Rendered) | undefined;
+    rendered?: Rendered;
+    textValue?: string | undefined;
+    "aria-label"?: string | undefined;
+    index?: number | undefined;
+    renderer?: ItemRenderer<T> | undefined;
+    hasChildNodes?: boolean | undefined;
+    childNodes?: (() => IterableIterator<PartialNode<T>>) | undefined;
+    props?: any;
+    shouldInvalidate?: ((context: any) => boolean) | undefined;
+}

package/collections/types.js

@@ -0,0 +1,4 @@
+// Ported from @react-types/shared (collections.d.ts, selection.d.ts), Apache-2.0, © Adobe.
+// Collection / node / selection types shared by every collection, selection manager and keyboard
+// delegate. Pure types: zero bytes at runtime.
+export {};

package/collections/unique-selection-dispatcher.d.ts

@@ -0,0 +1,10 @@
+export type UniqueSelectionDispatcherListener = (id: string, name: string) => void;
+export declare class UniqueSelectionDispatcher {
+    private _listeners;
+    /** Notify other items that selection for the given name has been set. */
+    notify(id: string, name: string): void;
+    /** Listen for future changes to item selection. Returns a function that deregisters the listener. */
+    listen(listener: UniqueSelectionDispatcherListener): () => void;
+    /** Drop all listeners (Angular `ngOnDestroy`). */
+    destroy(): void;
+}

package/collections/unique-selection-dispatcher.js

@@ -0,0 +1,25 @@
+// Ported from @angular/cdk/collections (unique-selection-dispatcher.ts), MIT, © Google LLC.
+//
+// Coordinates unique selection by name (radio-like items that live in different components):
+// native radio change events only fire on the newly selected item, so the others need a
+// notification to uncheck. Angular provides it as a root service; Rivet: create one per scope
+// (`new UniqueSelectionDispatcher()`, or provide it through context).
+export class UniqueSelectionDispatcher {
+    _listeners = [];
+    /** Notify other items that selection for the given name has been set. */
+    notify(id, name) {
+        for (const listener of this._listeners)
+            listener(id, name);
+    }
+    /** Listen for future changes to item selection. Returns a function that deregisters the listener. */
+    listen(listener) {
+        this._listeners.push(listener);
+        return () => {
+            this._listeners = this._listeners.filter((registered) => listener !== registered);
+        };
+    }
+    /** Drop all listeners (Angular `ngOnDestroy`). */
+    destroy() {
+        this._listeners = [];
+    }
+}

package/color/area-state.d.ts

@@ -0,0 +1,99 @@
+import { type Signal } from "@rivetjs/reactivity";
+import { type Color, type ColorAxes, type ColorChannel, type ColorSpace } from "./color.js";
+import { type ColorCell, type ColorInput } from "./value.js";
+export interface ColorAreaProps {
+    /** The current value (controlled): a two-way signal or a fixed value. */
+    value?: ColorInput;
+    /** The default value (uncontrolled). */
+    defaultValue?: string | Color;
+    /**
+     * The color space that the color area operates in. The `xChannel` and `yChannel` must be in this
+     * color space. If not provided, this defaults to the color space of the `color` or `defaultColor`
+     * value.
+     */
+    colorSpace?: ColorSpace;
+    /** Color channel for the horizontal axis. */
+    xChannel?: ColorChannel;
+    /** Color channel for the vertical axis. */
+    yChannel?: ColorChannel;
+    /** Whether the ColorArea is disabled. */
+    isDisabled?: boolean;
+    /** Handler that is called when the value changes, as the user drags. */
+    onChange?: (value: Color) => void;
+    /** Handler that is called when the user stops dragging. */
+    onChangeEnd?: (value: Color) => void;
+}
+export interface ColorAreaState {
+    readonly kind: "area";
+    readonly cell: ColorCell<string | Color>;
+    readonly colorSpace: ColorSpace | undefined;
+    readonly xChannel: ColorChannel | undefined;
+    readonly yChannel: ColorChannel | undefined;
+    /** Disabled at creation; read `isColorAreaDisabled(state)` (follows a live `disabled`). */
+    readonly isDisabled: boolean;
+    /** Rivet (live props): the caller's `isDisabled` accessor, when it passed one. */
+    readonly disabled?: () => boolean | undefined;
+    /** The default value of the color area (lossless color string). */
+    readonly defaultValue: string;
+    /** Whether the color area is currently being dragged. */
+    readonly dragging: Signal<boolean>;
+    readonly onChange: ((value: Color) => void) | undefined;
+    readonly onChangeEnd: ((value: Color) => void) | undefined;
+    /** Upstream refs: last color set (string), dragging flag. */
+    readonly refs: {
+        value: string;
+        dragging: boolean;
+    };
+}
+/**
+ * Provides state management for a color area component. Color area allows users to adjust two
+ * channels of an HSL, HSB or RGB color value against a two-dimensional gradient background.
+ */
+export declare function createColorAreaState(props: ColorAreaProps): ColorAreaState;
+/** Whether the color area is disabled now (its live `isDisabled` accessor, else the creation value). */
+export declare const isColorAreaDisabled: (state: ColorAreaState) => boolean;
+/** The current color value displayed by the color area (in `colorSpace` when given). */
+export declare function colorAreaValue(state: ColorAreaState): Color;
+/** The default value of the color area. */
+export declare const colorAreaDefaultValue: (state: ColorAreaState) => Color;
+/** Sets the current color value. If a string is passed, it will be parsed to a Color. */
+export declare function setColorAreaValue(state: ColorAreaState, value: string | Color): void;
+/** Returns the xChannel, yChannel and zChannel names based on the color value. */
+export declare function getChannels(state: ColorAreaState): ColorAxes;
+/** Step / page step of the x and y channels (upstream `xChannelStep`, `yChannelStep`, `xChannelPageStep`, `yChannelPageStep`). */
+export declare function getChannelSteps(state: ColorAreaState): {
+    xChannelStep: number;
+    yChannelStep: number;
+    xChannelPageStep: number;
+    yChannelPageStep: number;
+};
+/** The current value of the horizontal axis channel displayed by the color area. */
+export declare const getXValue: (state: ColorAreaState) => number;
+/** The current value of the vertical axis channel displayed by the color area. */
+export declare const getYValue: (state: ColorAreaState) => number;
+/** Sets the value for the horizontal axis channel displayed by the color area, and triggers `onChange`. */
+export declare function setXValue(state: ColorAreaState, v: number): void;
+/** Sets the value for the vertical axis channel displayed by the color area, and triggers `onChange`. */
+export declare function setYValue(state: ColorAreaState, v: number): void;
+/**
+ * Sets the x and y channels of the current color value based on a percentage of the width and
+ * height of the color area, and triggers `onChange`.
+ */
+export declare function setColorFromPoint(state: ColorAreaState, x: number, y: number): void;
+/** Returns the coordinates of the thumb relative to the upper left corner of the color area as a percentage. */
+export declare function getColorAreaThumbPosition(state: ColorAreaState): {
+    x: number;
+    y: number;
+};
+/** Increments the value of the horizontal axis channel by the channel step or page amount. */
+export declare function incrementX(state: ColorAreaState, stepSize?: number): void;
+/** Increments the value of the vertical axis channel by the channel step or page amount. */
+export declare function incrementY(state: ColorAreaState, stepSize?: number): void;
+/** Decrements the value of the horizontal axis channel by the channel step or page amount. */
+export declare function decrementX(state: ColorAreaState, stepSize?: number): void;
+/** Decrements the value of the vertical axis channel by the channel step or page amount. */
+export declare function decrementY(state: ColorAreaState, stepSize?: number): void;
+/** Sets whether the color area is being dragged (fires `onChangeEnd` when a drag ends). */
+export declare function setColorAreaDragging(state: ColorAreaState, isDragging: boolean): void;
+/** Returns the color that should be displayed in the color area thumb instead of `value`. */
+export declare const getColorAreaDisplayColor: (state: ColorAreaState) => Color;