import type { Ref } from '@stacksjs/stx';
/**
 * Reactive responsive breakpoints.
 * Observe viewport width changes and query breakpoint states.
 */
export declare function useBreakpoints<K extends string>(breakpoints: Breakpoints<K>): UseBreakpointsReturn<K>;
/**
 * Tailwind CSS default breakpoints.
 */
export declare const breakpointsTailwind: {
  sm: 640;
  md: 768;
  lg: 1024;
  xl: 1280;
  '2xl': 1536
};
/**
 * Bootstrap default breakpoints.
 */
export declare const breakpointsBootstrap: {
  sm: 576;
  md: 768;
  lg: 992;
  xl: 1200;
  xxl: 1400
};
/** Alias for breakpointsBootstrap */
export declare const breakpointsBootstrapV5: unknown;
/**
 * Ant Design breakpoints.
 */
export declare const breakpointsAntDesign: {
  xs: 480;
  sm: 576;
  md: 768;
  lg: 992;
  xl: 1200;
  xxl: 1600
};
/**
 * Material Design breakpoints.
 */
export declare const breakpointsMaterialDesign: {
  xs: 600;
  sm: 960;
  md: 1264;
  lg: 1904
};
/**
 * Quasar breakpoints.
 */
export declare const breakpointsQuasar: {
  xs: 600;
  sm: 1024;
  md: 1440;
  lg: 1920
};
/**
 * Master CSS breakpoints.
 */
export declare const breakpointsMasterCss: {
  '3xs': 360;
  '2xs': 480;
  'xs': 600;
  'sm': 768;
  'md': 1024;
  'lg': 1280;
  'xl': 1440;
  '2xl': 1600;
  '3xl': 1920;
  '4xl': 2560
};
/**
 * Semantic UI breakpoints.
 */
export declare const breakpointsSematic: {
  mobileS: 320;
  mobileM: 375;
  mobileL: 425;
  tablet: 768;
  laptop: 1024;
  laptopL: 1440;
  desktop: 2560
};
export declare interface UseBreakpointsReturn<K extends string> {
  greaterOrEqual: (k: K) => Ref<boolean>
  smallerOrEqual: (k: K) => Ref<boolean>
  between: (a: K, b: K) => Ref<boolean>
  isGreater: (k: K) => Ref<boolean>
  isSmaller: (k: K) => Ref<boolean>
  current: () => Ref<K[]>
}
/**
 * Breakpoints map type: key names to pixel widths.
 */
export type Breakpoints<K extends string = string> = Record<K, number>;