@ui-machines/tabs/dist/tabs.types.d.ts

Core logic for the tabs widget implemented as a state machine

import { Context } from "@ui-machines/types";
export declare type MachineContext = Context<{
    /**
     * Whether the keyboard navigation will loop from last tab to first, and vice versa.
     * @default true
     */
    loop: boolean;
    /**
     * The focused tab id
     */
    focusedValue: string | null;
    /**
     * The selected tab id
     */
    value: string | null;
    /**
     * The orientation of the tabs. Can be `horizontal` or `vertical`
     * - `horizontal`: only left and right arrow key navigation will work.
     * - `vertical`: only up and down arrow key navigation will work.
     *
     * @default "horizontal"
     */
    orientation?: "horizontal" | "vertical";
    /**
     * The activation mode of the tabs. Can be `manual` or `automatic`
     * - `manual`: Tabs are activated when clicked or press `enter` key.
     * - `automatic`: Tabs are activated when receiving focus
     * @default "automatic"
     */
    activationMode?: "manual" | "automatic";
    /**
     * @internal The active tab indicator's dom rect
     */
    indicatorRect?: Partial<DOMRect>;
    /**
     * @internal Whether the active tab indicator's rect has been measured
     */
    measuredRect?: boolean;
    /**
     * Callback to be called when the selected/active tab changes
     */
    onChange?: (id: string | null) => void;
    /**
     * Callback to be called when the focused tab changes
     */
    onFocus?: (id: string | null) => void;
}>;
export declare type MachineState = {
    value: "unknown" | "idle" | "focused";
};