'use strict';

var React = require('react');
var useResizeObserver = require('./useResizeObserver.js');

/**
 * Hook that returns a ref and a boolean indicating if the container
 * has a width >= the specified breakpoint.
 *
 * Useful for synchronizing React state with CSS container queries.
 *
 * Uses content-box measurements to match CSS container query behavior
 * (excludes padding and border).
 *
 * @param breakpoint - Minimum width in pixels
 * @returns [ref, isAboveBreakpoint] tuple
 */
function useContainerSize(breakpoint) {
  const ref = React.useRef(null);
  const [isAboveBreakpoint, setIsAboveBreakpoint] = React.useState(false);
  useResizeObserver.useResizeObserver(ref, entry => {
    // Use contentRect.width to match CSS container query box model (content-box)
    const inlineSize = entry.contentRect.width;
    setIsAboveBreakpoint(inlineSize >= breakpoint);
  }, 'content-box');
  return [ref, isAboveBreakpoint];
}

exports.useContainerSize = useContainerSize;
//# sourceMappingURL=useContainerSize.js.map
