export interface UseMediaQueryOptions { /** * As `window.matchMedia()` is unavailable on the server, * it returns a default matches during the first mount. * @default false */ defaultMatches?: boolean; /** * You can provide your own implementation of matchMedia. * This can be used for handling an iframe content window. */ matchMedia?: typeof window.matchMedia; /** * To perform the server-side hydration, the hook needs to render twice. * A first time with `defaultMatches`, the value of the server, and a second time with the resolved value. * This double pass rendering cycle comes with a drawback: it's slower. * You can set this option to `true` if you use the returned value **only** client-side. * @default false */ noSsr?: boolean; /** * You can provide your own implementation of `matchMedia`. * This can be used for handling an iframe content window. */ ssrMatchMedia?: (query: string) => { matches: boolean; }; } /** * A useMediaQuery hook for Nova applications. * * This hook provides a consistent way to handle responsive behavior across Nova applications. * It works with Nova's breakpoint system and custom media queries. * * @param query - The media query string to evaluate * @param options - Configuration options for the hook * @returns boolean indicating whether the media query matches * * @example * ```tsx * import { useMediaQuery } from '@hxnova/react-components'; * import { NovaTheme } from '@hxnova/themes'; * * function MyComponent() { * // Check if screen is medium or larger * const isMdUp = useMediaQuery(NovaTheme.breakpoints.up('md')); * * // Check if screen is small or smaller * const isSmDown = useMediaQuery(NovaTheme.breakpoints.down('sm')); * * // Custom media query * const isLandscape = useMediaQuery('(orientation: landscape)'); * * return ( *