@stacksjs/stx/dist/composables/use-media-query.d.ts

A performant UI Framework. Powered by Bun.

/**
 * Create a reactive media query
 *
 * @example
 * ```ts
 * const isDark = useMediaQuery('(prefers-color-scheme: dark)')
 * const isMobile = useMediaQuery('(max-width: 768px)')
 *
 * isDark.subscribe((matches) => {
 *   console.log('Dark mode:', matches)
 * })
 * ```
 */
export declare function useMediaQuery(query: string): MediaQueryRef;
/**
 * Reactive dark mode preference
 */
export declare function usePreferredDark(): MediaQueryRef;
/**
 * Reactive light mode preference
 */
export declare function usePreferredLight(): MediaQueryRef;
/**
 * Reactive reduced motion preference
 */
export declare function usePreferredReducedMotion(): MediaQueryRef;
/**
 * Reactive contrast preference
 */
export declare function usePreferredContrast(): MediaQueryRef;
/**
 * Reactive breakpoint helpers
 */
export declare function useBreakpoint(breakpoint: keyof typeof breakpoints): MediaQueryRef;
export declare function useIsMobile(): MediaQueryRef;
export declare function useIsTablet(): MediaQueryRef;
export declare function useIsDesktop(): MediaQueryRef;
/**
 * Common breakpoints
 */
export declare const breakpoints: {
  sm: '(min-width: 640px)';
  md: '(min-width: 768px)';
  lg: '(min-width: 1024px)';
  xl: '(min-width: 1280px)';
  '2xl': '(min-width: 1536px)'
};
/**
 * useMediaQuery - Reactive media query composable
 *
 * Provides reactive tracking of CSS media queries.
 */
export declare interface MediaQueryRef {
  matches: boolean
  subscribe: (callback: (matches: boolean) => void) => () => void
}