import type { Ref } from 'react';
import { cssStateVariables } from '@graphprotocol/gds-css';
type CSSStateVariableName = keyof typeof cssStateVariables;
type CSSStateVariableValue<K extends CSSStateVariableName> = (typeof cssStateVariables)[K]['values'][keyof (typeof cssStateVariables)[K]['values']];
type CSSStateType<T extends Record<string, unknown>> = {
    [K in keyof T]: K extends CSSStateVariableName ? CSSStateVariableValue<K> : unknown;
};
/**
 * This hook can be used in three different cases (which some components may need simultaneously):
 *
 * - Until Firefox supports style queries, every component that uses CSS states internally (i.e.
 *   contains `@state-*` classes) needs to use this hook and also spread `polyfillAttributes` on the
 *   root element, regardless of what follows.
 * - When a component exposes CSS states from a nested element (e.g.
 *   `u:has-nested-hover/ref:expose-hover` on the root element instead of `u:hover:state-hover`), it
 *   has to call this hook with all the state variables it exposes, even if it's only a particular
 *   state in a particular condition. For instance, it may expose the `active` state when a nested
 *   input is `:active` so it's also triggered with the keyboard, without needing to customize when
 *   `hover` is exposed; regardless, `{ pointer: undefined }` should be passed as the first
 *   argument, `variableInitialValues`. The "initial values" in that object are used during SSR and
 *   on the first render, and should be passed instead of `undefined` for variables whose initial
 *   state may differ from their default value (often the case for `checked` and `disabled`). Not
 *   doing so may result in a flash of incorrect styles, since we need to wait for the DOM to get
 *   style values (including the state variables). The hook returns a tuple with two values: the
 *   first one is a `ref` which should be passed to the root element, and the second one is an
 *   object with an `exposedAttributes` property, which you should spread on the root as well. This
 *   ensures that a class like `active:opacity-50` set by a consumer takes effect when the nested
 *   element is active, rather than when the root element is.
 * - When a component needs to know the state of a nested component or element that supports CSS
 *   states (that is, one that has classes like `u:hover:state-hover` or
 *   `u:has-nested-hover/ref:expose-hover`), then you can call this hook with the state variables
 *   you're interested in, pass the returned `ref` to the component/element in question, and check
 *   the returned `state` (tuple's second value).
 */
export declare function useCSSState<T extends {
    [K in keyof T]: K extends CSSStateVariableName ? CSSStateVariableValue<K> | undefined : unknown;
}>(variableInitialValues: T, options?: {
    ref?: Ref<HTMLElement> | undefined;
    onChange?: (state: CSSStateType<T>) => void;
}): readonly [import("react").RefCallback<HTMLElement>, CSSStateType<T> & {
    readonly exposedAttributes: Record<string, string>;
    readonly polyfillAttributes: Record<string, string>;
}];
export {};
//# sourceMappingURL=useCSSState.d.ts.map