import { useCallback, useRef } from 'react';
import { useMergedRefs } from '@base-ui/utils/useMergedRefs';
import { parseCSSPropValue, } from '@graphprotocol/gds-css';
import { styleScheduler } from "../utils/index.js";
/**
 * Returns a `ref` to set on an element, and an async function to get the current value of a CSS
 * prop from said element (or `null` if we can't access the DOM, e.g. on the server).
 */
export function useCSSProp(component, propName, options = {}) {
    const { ref: passedRef } = options;
    const elementRef = useRef(null);
    const callbackRef = useMergedRefs(elementRef, passedRef);
    const cssProp = component.getCSSPropByName(propName);
    const getCSSPropValue = useCallback(async () => {
        if (typeof window === 'undefined' || !elementRef.current)
            return null;
        const element = elementRef.current;
        const computedStyle = await styleScheduler.getComputedStyle(element);
        const rawValue = computedStyle.getPropertyValue(cssProp.cssProperty);
        return parseCSSPropValue(cssProp, rawValue);
    }, [cssProp]);
    return [callbackRef, getCSSPropValue];
}
//# sourceMappingURL=useCSSProp.js.map