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