/**
 * Options for the useFocus hook.
 */
export interface FocusOptions {
    /**
     * Enable or disable this component's focus, while still maintaining its
     * position in the list of focusable components.
     *
     * @defaultValue true
     */
    isActive?: boolean;
    /**
     * Auto-focus this component if there's no active (focused) component right
     * now.
     *
     * @defaultValue false
     */
    autoFocus?: boolean;
    /**
     * Assign an ID to this component, so it can be programmatically focused with
     * `focus(id)`.
     */
    id?: string;
}
/**
 * Focus state and control methods.
 */
export interface FocusState {
    /**
     * Determines whether this component is focused.
     */
    isFocused: boolean;
    /**
     * Allows focusing a specific element with the provided `id`.
     */
    focus: (id: string) => void;
}
/**
 * A component that uses the `useFocus` hook becomes "focusable" to Tinky, so
 * when the user presses <kbd>Tab</kbd>, Tinky will switch focus to this
 * component. If there are multiple components that execute the `useFocus`
 * hook, focus will be given to them in render order. This hook returns an
 * object with an `isFocused` boolean property, which determines whether
 * this component is focused.
 *
 * @example
 * ```tsx
 * import {render, Text, useFocus} from 'tinky';
 *
 * const Component = () => {
 *   const {isFocused} = useFocus();
 *
 *   return (
 *     <Text color={isFocused ? 'green' : 'white'}>
 *       {isFocused ? 'I am focused' : 'I am not focused'}
 *     </Text>
 *   );
 * };
 *
 * render(<Component />);
 * ```
 *
 * @param options - Configuration options.
 * @returns Focus state and control methods.
 */
export declare const useFocus: ({ isActive, autoFocus, id: customId, }?: FocusOptions) => FocusState;