"use client";
import { useForkRef } from "@base-ui-components/react/utils";
import { useRef, useCallback } from "react";
import { camelToKebab } from "../../utils/camelToKebab.js";
import { componentsCSSProps } from "./cssProps.js";
import { pxToTw } from "./theme.js";
function useCSSProp(componentName, propName, options = {}) {
  const { ref: passedRef } = options;
  const elementRef = useRef(null);
  const callbackRef = useForkRef(elementRef, passedRef);
  const getCSSProp = useCallback(() => {
    if (typeof window === "undefined" || !elementRef.current) return null;
    const prop = componentsCSSProps[componentName][propName];
    const value = window.getComputedStyle(elementRef.current).getPropertyValue(`--gds-${componentName}-${camelToKebab(propName)}`).replace(/^(gds-)?/, "");
    if (prop.type === "length" && /^\d+(?:\.\d+)?px$/.test(value)) {
      return pxToTw(parseFloat(value));
    }
    return value;
  }, [componentName, propName, callbackRef]);
  return [callbackRef, getCSSProp];
}
export {
  useCSSProp
};
