responsive-media 1.0.7 → 1.2.0

package/dist/container-state.js

@@ -0,0 +1,107 @@
+import { BaseResponsiveState } from './base-state';
+import { buildMediaQuery } from './create-responsive';
+import { hasResizeObserver } from './utils';
+// ---------------------------------------------------------------------------
+// Condition evaluator (JS-side, no matchMedia)
+// ---------------------------------------------------------------------------
+function evaluateSingle(cond, w, h) {
+    const val = typeof cond.value === 'number' ? cond.value : parseFloat(String(cond.value));
+    switch (cond.type) {
+        case 'max-width': return w <= val;
+        case 'min-width': return w >= val;
+        case 'max-height': return h <= val;
+        case 'min-height': return h >= val;
+        case 'orientation': return cond.value === 'landscape' ? w > h : w <= h;
+        case 'aspect-ratio': {
+            const [rw, rh] = String(cond.value).split('/').map(Number);
+            return rh ? Math.abs(w / h - rw / rh) < 0.01 : false;
+        }
+        default: return false;
+    }
+}
+function evaluateConditions(conditions, w, h) {
+    if (Array.isArray(conditions[0])) {
+        // OR mode — any group must fully match
+        return conditions.some(group => group.every(c => evaluateSingle(c, w, h)));
+    }
+    // AND mode — all conditions must match
+    return conditions.every(c => evaluateSingle(c, w, h));
+}
+// ---------------------------------------------------------------------------
+// ContainerState — ResizeObserver-based
+// ---------------------------------------------------------------------------
+export class ContainerState extends BaseResponsiveState {
+    constructor(element, config, options) {
+        super();
+        this.observer = null;
+        this.configSnapshot = {};
+        this.element = element;
+        if ((options === null || options === void 0 ? void 0 : options.debounce) !== undefined)
+            this.debounceMs = options.debounce;
+        if ((options === null || options === void 0 ? void 0 : options.order) !== undefined)
+            this.order = options.order;
+        this.applyConfig(config);
+    }
+    setupSources(config) {
+        this.configSnapshot = config;
+        // Generate CSS @container-compatible strings for each breakpoint
+        Object.entries(config).forEach(([key, conditions]) => {
+            this.mediaQueries[key] = buildMediaQuery(conditions);
+        });
+        if (!hasResizeObserver()) {
+            // SSR or unsupported — default to false
+            Object.keys(config).forEach(key => { this.state[key] = false; });
+            return;
+        }
+        // Synchronous initial evaluation using the element's current size
+        const rect = this.element.getBoundingClientRect();
+        Object.entries(config).forEach(([key, conditions]) => {
+            this.state[key] = evaluateConditions(conditions, rect.width, rect.height);
+        });
+        this.observer = new ResizeObserver((entries) => {
+            const { width, height } = entries[0].contentRect;
+            Object.entries(this.configSnapshot).forEach(([key, conditions]) => {
+                this.proxy[key] = evaluateConditions(conditions, width, height);
+            });
+        });
+        this.observer.observe(this.element);
+    }
+    cleanupSources() {
+        if (this.observer) {
+            this.observer.disconnect();
+            this.observer = null;
+        }
+        this.configSnapshot = {};
+    }
+}
+// ---------------------------------------------------------------------------
+// Factory
+// ---------------------------------------------------------------------------
+/**
+ * Creates a `ContainerState` that tracks an element's dimensions via
+ * `ResizeObserver` and evaluates breakpoint conditions in JavaScript.
+ *
+ * The API is identical to `ReactiveResponsiveState` — all subscription
+ * methods (`subscribe`, `on`, `onEnter`, `onLeave`, `waitFor`, etc.) work
+ * the same way.
+ *
+ * The `getMediaQueries()` method returns CSS `@container` compatible strings
+ * that can be used in stylesheets alongside the JS reactive state.
+ *
+ * @example
+ * const card = document.querySelector('.card')!;
+ *
+ * const cardState = createContainerState(card, {
+ *   compact: [{ type: 'max-width', value: 300 }],
+ *   wide:    [{ type: 'min-width', value: 600 }],
+ * });
+ *
+ * cardState.on('compact', (v) => card.classList.toggle('card--compact', v));
+ * cardState.syncCSSVars({ prefix: '--card-' });
+ *
+ * // Cleanup when no longer needed:
+ * cardState.destroy();
+ */
+export function createContainerState(element, config, options) {
+    return new ContainerState(element, config, options);
+}

package/dist/create-responsive.d.ts

@@ -1,20 +1,49 @@
-import { type Breakpoint, type MediaQueryConfig } from './responsive.enum';
-export type { MediaQueryConfig };
-type ResponsiveState = Record<Breakpoint, boolean>;
-type ResponsiveListener = (state: ResponsiveState) => void;
-declare class ReactiveResponsiveState {
-    private state;
-    private listeners;
-    proxy: ResponsiveState;
+import { type MediaQueryConfig } from './responsive.enum';
+import { BaseResponsiveState, type ResponsiveState, type SetConfigOptions } from './base-state';
+export type { MediaQueryConfig, ResponsiveState, SetConfigOptions };
+export { BaseResponsiveState };
+export declare function buildMediaQuery(conditions: MediaQueryConfig): string;
+export declare class ReactiveResponsiveState extends BaseResponsiveState {
     private queries;
-    private mediaQueries;
-    constructor();
-    private applyConfig;
-    getMediaQueries(): Record<string, string>;
-    setConfig(config: Record<string, MediaQueryConfig>): void;
-    subscribe(listener: ResponsiveListener): () => boolean;
-    private notify;
+    private handlers;
+    constructor(config?: Record<string, MediaQueryConfig>, options?: SetConfigOptions);
+    protected setupSources(config: Record<string, MediaQueryConfig>): void;
+    protected cleanupSources(): void;
 }
-export declare function getResponsiveMediaQueries(): Record<string, string>;
 export declare const responsiveState: ReactiveResponsiveState;
-export declare function setResponsiveConfig(config: Record<string, MediaQueryConfig>): void;
+/**
+ * Creates an isolated `ReactiveResponsiveState` instance — useful for tests,
+ * SSR (per-request instances), or multiple independent responsive contexts.
+ *
+ * @example
+ * const layoutState = createResponsiveState(TailwindPreset, {
+ *   order: ['xs', 'sm', 'md', 'lg', 'xl', '2xl'],
+ * });
+ * const themeState = createResponsiveState(AccessibilityPreset);
+ */
+export declare function createResponsiveState(config?: Record<string, MediaQueryConfig>, options?: SetConfigOptions): ReactiveResponsiveState;
+/**
+ * Converts a `MediaQueryConfig` array to a CSS media query string.
+ * Useful for CSS-in-JS, `@container` rules, or debugging.
+ *
+ * @example
+ * toMediaQueryString([{ type: 'min-width', value: 768 }, { type: 'max-width', value: 1024 }])
+ * // → "(min-width: 768px) and (max-width: 1024px)"
+ *
+ * toMediaQueryString([[{ type: 'max-width', value: 600 }], [{ type: 'orientation', value: 'portrait' }]])
+ * // → "(max-width: 600px), (orientation: portrait)"
+ */
+export declare function toMediaQueryString(conditions: MediaQueryConfig): string;
+export declare function getResponsiveState<T extends Record<string, boolean> = ResponsiveState>(): T;
+export declare function getResponsiveMediaQueries(): Record<string, string>;
+export declare function setResponsiveConfig(config: Record<string, MediaQueryConfig>, options?: SetConfigOptions): void;
+/**
+ * Returns the first value in `map` whose key is `true` in `state`,
+ * or `fallback` if none match. Priority follows `map` insertion order.
+ *
+ * @example
+ * const cols  = match(state, { mobile: 1, tablet: 2, desktop: 4 });
+ * const View  = match(state, { mobile: MobileMenu, desktop: DesktopNav });
+ * const label = match(state, { sm: 'Compact', lg: 'Full' }, 'Default');
+ */
+export declare function match<T>(state: Record<string, boolean>, map: Record<string, T>, fallback?: T): T | undefined;

package/dist/create-responsive.js

@@ -1,69 +1,132 @@
 import { ResponsiveConfig } from './responsive.enum';
-class ReactiveResponsiveState {
-    constructor() {
-        this.listeners = new Set();
-        this.queries = {};
-        this.mediaQueries = {};
-        this.state = {};
-        this.proxy = new Proxy(this.state, {
-            set: (target, prop, value) => {
-                if (target[prop] !== value) {
-                    target[prop] = value;
-                    this.notify();
-                }
-                return true;
-            },
-            get: (target, prop) => {
-                return target[prop];
-            },
-        });
-        this.applyConfig(ResponsiveConfig);
+import { BaseResponsiveState } from './base-state';
+import { hasMatchMedia } from './utils';
+export { BaseResponsiveState };
+// ---------------------------------------------------------------------------
+// Media query string builder (also used by ContainerState for @container strings)
+// ---------------------------------------------------------------------------
+const PIXEL_TYPES = new Set([
+    'width', 'min-width', 'max-width',
+    'height', 'min-height', 'max-height',
+]);
+function formatValue(cond) {
+    if (typeof cond.value === 'number' && PIXEL_TYPES.has(cond.type)) {
+        return `${cond.value}px`;
     }
-    applyConfig(config) {
-        Object.entries(this.queries).forEach(([key, query]) => {
-            query.onchange = null;
-        });
+    return String(cond.value);
+}
+function conditionToString(cond) {
+    // 'raw' inserts the value verbatim (e.g. 'print', 'screen')
+    return cond.type === 'raw' ? String(cond.value) : `(${cond.type}: ${formatValue(cond)})`;
+}
+export function buildMediaQuery(conditions) {
+    if (conditions.length === 0)
+        return '';
+    if (Array.isArray(conditions[0])) {
+        return conditions
+            .map(group => group.map(conditionToString).join(' and '))
+            .join(', ');
+    }
+    return conditions.map(conditionToString).join(' and ');
+}
+// ---------------------------------------------------------------------------
+// ReactiveResponsiveState — viewport-based (matchMedia)
+// ---------------------------------------------------------------------------
+export class ReactiveResponsiveState extends BaseResponsiveState {
+    constructor(config, options) {
+        super();
         this.queries = {};
-        this.mediaQueries = {};
-        Object.keys(this.state).forEach(key => delete this.state[key]);
+        this.handlers = {};
+        if ((options === null || options === void 0 ? void 0 : options.debounce) !== undefined)
+            this.debounceMs = options.debounce;
+        if ((options === null || options === void 0 ? void 0 : options.order) !== undefined)
+            this.order = options.order;
+        this.applyConfig(config !== null && config !== void 0 ? config : ResponsiveConfig);
+    }
+    setupSources(config) {
         Object.entries(config).forEach(([key, conditions]) => {
-            const mq = conditions
-                .map(cond => {
-                const val = typeof cond.value === 'number' && !String(cond.type).includes('aspect-ratio')
-                    ? cond.value + 'px'
-                    : cond.value;
-                return `(${cond.type}: ${val})`;
-            })
-                .join(' and ');
+            const mq = buildMediaQuery(conditions);
             this.mediaQueries[key] = mq;
+            if (!hasMatchMedia()) {
+                this.state[key] = false;
+                return;
+            }
             const query = window.matchMedia(mq);
             this.queries[key] = query;
-            this.proxy[key] = query.matches;
-            query.addEventListener('change', (e) => {
-                this.proxy[key] = e.matches;
-            });
+            const handler = (e) => { this.proxy[key] = e.matches; };
+            this.handlers[key] = handler;
+            query.addEventListener('change', handler);
+            this.state[key] = query.matches;
         });
-        this.notify();
-    }
-    getMediaQueries() {
-        return { ...this.mediaQueries };
-    }
-    setConfig(config) {
-        this.applyConfig(config);
     }
-    subscribe(listener) {
-        this.listeners.add(listener);
-        listener(this.proxy);
-        return () => this.listeners.delete(listener);
-    }
-    notify() {
-        this.listeners.forEach(listener => listener(this.proxy));
+    cleanupSources() {
+        Object.entries(this.handlers).forEach(([key, handler]) => {
+            var _a;
+            (_a = this.queries[key]) === null || _a === void 0 ? void 0 : _a.removeEventListener('change', handler);
+        });
+        this.queries = {};
+        this.handlers = {};
     }
 }
+// ---------------------------------------------------------------------------
+// Singleton
+// ---------------------------------------------------------------------------
+export const responsiveState = new ReactiveResponsiveState();
+// ---------------------------------------------------------------------------
+// Public factory
+// ---------------------------------------------------------------------------
+/**
+ * Creates an isolated `ReactiveResponsiveState` instance — useful for tests,
+ * SSR (per-request instances), or multiple independent responsive contexts.
+ *
+ * @example
+ * const layoutState = createResponsiveState(TailwindPreset, {
+ *   order: ['xs', 'sm', 'md', 'lg', 'xl', '2xl'],
+ * });
+ * const themeState = createResponsiveState(AccessibilityPreset);
+ */
+export function createResponsiveState(config, options) {
+    return new ReactiveResponsiveState(config, options);
+}
+// ---------------------------------------------------------------------------
+// Standalone helpers
+// ---------------------------------------------------------------------------
+/**
+ * Converts a `MediaQueryConfig` array to a CSS media query string.
+ * Useful for CSS-in-JS, `@container` rules, or debugging.
+ *
+ * @example
+ * toMediaQueryString([{ type: 'min-width', value: 768 }, { type: 'max-width', value: 1024 }])
+ * // → "(min-width: 768px) and (max-width: 1024px)"
+ *
+ * toMediaQueryString([[{ type: 'max-width', value: 600 }], [{ type: 'orientation', value: 'portrait' }]])
+ * // → "(max-width: 600px), (orientation: portrait)"
+ */
+export function toMediaQueryString(conditions) {
+    return buildMediaQuery(conditions);
+}
+export function getResponsiveState() {
+    return responsiveState.getState();
+}
 export function getResponsiveMediaQueries() {
     return responsiveState.getMediaQueries();
 }
-export const responsiveState = new ReactiveResponsiveState();
-export function setResponsiveConfig(config) {
-    responsiveState.setConfig(config);
+export function setResponsiveConfig(config, options) {
+    responsiveState.setConfig(config, options);
+}
+/**
+ * Returns the first value in `map` whose key is `true` in `state`,
+ * or `fallback` if none match. Priority follows `map` insertion order.
+ *
+ * @example
+ * const cols  = match(state, { mobile: 1, tablet: 2, desktop: 4 });
+ * const View  = match(state, { mobile: MobileMenu, desktop: DesktopNav });
+ * const label = match(state, { sm: 'Compact', lg: 'Full' }, 'Default');
+ */
+export function match(state, map, fallback) {
+    for (const [key, value] of Object.entries(map)) {
+        if (state[key])
+            return value;
+    }
+    return fallback;
 }

package/dist/index.d.ts

@@ -1,3 +1,8 @@
 export * from './responsive.enum';
+export * from './base-state';
 export * from './create-responsive';
-export { ResponsivePlugin, useResponsive } from './vue-responsive';
+export * from './container-state';
+export * from './media-query';
+export * from './presets';
+export { ResponsivePlugin, useResponsive, useMediaQuery, useBreakpoints, useContainerState } from './vue-responsive';
+export type { BreakpointHelpers } from './vue-responsive';

package/dist/index.js

@@ -1,3 +1,7 @@
 export * from './responsive.enum';
+export * from './base-state';
 export * from './create-responsive';
-export { ResponsivePlugin, useResponsive } from './vue-responsive';
+export * from './container-state';
+export * from './media-query';
+export * from './presets';
+export { ResponsivePlugin, useResponsive, useMediaQuery, useBreakpoints, useContainerState } from './vue-responsive';

package/dist/media-query.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Low-level reactive wrapper around a single raw CSS media query string.
+ * Framework-agnostic — Vue and React adapters live in their own files.
+ */
+/**
+ * Subscribes to a raw CSS media query string. The callback is called immediately
+ * with the current match state and again whenever it changes.
+ * Returns an unsubscribe / cleanup function.
+ *
+ * @example
+ * const off = subscribeMediaQuery('(prefers-color-scheme: dark)', (matches) => {
+ *   document.body.classList.toggle('dark', matches);
+ * });
+ * // Later:
+ * off();
+ */
+export declare function subscribeMediaQuery(query: string, callback: (matches: boolean) => void): () => void;

package/dist/media-query.js

@@ -0,0 +1,30 @@
+/**
+ * Low-level reactive wrapper around a single raw CSS media query string.
+ * Framework-agnostic — Vue and React adapters live in their own files.
+ */
+function isSSR() {
+    return typeof window === 'undefined' || typeof window.matchMedia !== 'function';
+}
+/**
+ * Subscribes to a raw CSS media query string. The callback is called immediately
+ * with the current match state and again whenever it changes.
+ * Returns an unsubscribe / cleanup function.
+ *
+ * @example
+ * const off = subscribeMediaQuery('(prefers-color-scheme: dark)', (matches) => {
+ *   document.body.classList.toggle('dark', matches);
+ * });
+ * // Later:
+ * off();
+ */
+export function subscribeMediaQuery(query, callback) {
+    if (isSSR()) {
+        callback(false);
+        return () => { };
+    }
+    const mql = window.matchMedia(query);
+    const handler = (e) => callback(e.matches);
+    mql.addEventListener('change', handler);
+    callback(mql.matches);
+    return () => mql.removeEventListener('change', handler);
+}

package/dist/presets.d.ts

@@ -0,0 +1,48 @@
+import type { MediaQueryConfig } from './responsive.enum';
+/**
+ * Tailwind CSS v3/v4 breakpoints — mutually exclusive ranges.
+ *
+ * | Key  | Range              |
+ * |------|--------------------|
+ * | xs   | ≤ 639px            |
+ * | sm   | 640 – 767px        |
+ * | md   | 768 – 1023px       |
+ * | lg   | 1024 – 1279px      |
+ * | xl   | 1280 – 1535px      |
+ * | 2xl  | ≥ 1536px           |
+ */
+export declare const TailwindPreset: Record<string, MediaQueryConfig>;
+/** Ordered key array matching `TailwindPreset` — pass as `order` option. */
+export declare const TailwindOrder: readonly ["xs", "sm", "md", "lg", "xl", "2xl"];
+/**
+ * Bootstrap 5 breakpoints — mutually exclusive ranges.
+ *
+ * | Key  | Range              |
+ * |------|--------------------|
+ * | xs   | ≤ 575px            |
+ * | sm   | 576 – 767px        |
+ * | md   | 768 – 991px        |
+ * | lg   | 992 – 1199px       |
+ * | xl   | 1200 – 1399px      |
+ * | xxl  | ≥ 1400px           |
+ */
+export declare const BootstrapPreset: Record<string, MediaQueryConfig>;
+/** Ordered key array matching `BootstrapPreset` — pass as `order` option. */
+export declare const BootstrapOrder: readonly ["xs", "sm", "md", "lg", "xl", "xxl"];
+/**
+ * Accessibility & user-preference media queries.
+ * Keys are mutually independent — multiple can be `true` at the same time.
+ *
+ * | Key            | Matches when …                              |
+ * |----------------|---------------------------------------------|
+ * | dark           | `prefers-color-scheme: dark`                |
+ * | light          | `prefers-color-scheme: light`               |
+ * | reducedMotion  | `prefers-reduced-motion: reduce`            |
+ * | highContrast   | `prefers-contrast: more`                    |
+ * | lowContrast    | `prefers-contrast: less`                    |
+ * | noHover        | `hover: none` (touch / stylus devices)      |
+ * | coarsePointer  | `pointer: coarse` (finger-sized input)      |
+ * | forcedColors   | `forced-colors: active` (Windows HCM)      |
+ * | print          | `print` media type                          |
+ */
+export declare const AccessibilityPreset: Record<string, MediaQueryConfig>;

package/dist/presets.js

@@ -0,0 +1,71 @@
+/**
+ * Tailwind CSS v3/v4 breakpoints — mutually exclusive ranges.
+ *
+ * | Key  | Range              |
+ * |------|--------------------|
+ * | xs   | ≤ 639px            |
+ * | sm   | 640 – 767px        |
+ * | md   | 768 – 1023px       |
+ * | lg   | 1024 – 1279px      |
+ * | xl   | 1280 – 1535px      |
+ * | 2xl  | ≥ 1536px           |
+ */
+export const TailwindPreset = {
+    xs: [{ type: 'max-width', value: 639 }],
+    sm: [{ type: 'min-width', value: 640 }, { type: 'max-width', value: 767 }],
+    md: [{ type: 'min-width', value: 768 }, { type: 'max-width', value: 1023 }],
+    lg: [{ type: 'min-width', value: 1024 }, { type: 'max-width', value: 1279 }],
+    xl: [{ type: 'min-width', value: 1280 }, { type: 'max-width', value: 1535 }],
+    '2xl': [{ type: 'min-width', value: 1536 }],
+};
+/** Ordered key array matching `TailwindPreset` — pass as `order` option. */
+export const TailwindOrder = ['xs', 'sm', 'md', 'lg', 'xl', '2xl'];
+/**
+ * Bootstrap 5 breakpoints — mutually exclusive ranges.
+ *
+ * | Key  | Range              |
+ * |------|--------------------|
+ * | xs   | ≤ 575px            |
+ * | sm   | 576 – 767px        |
+ * | md   | 768 – 991px        |
+ * | lg   | 992 – 1199px       |
+ * | xl   | 1200 – 1399px      |
+ * | xxl  | ≥ 1400px           |
+ */
+export const BootstrapPreset = {
+    xs: [{ type: 'max-width', value: 575 }],
+    sm: [{ type: 'min-width', value: 576 }, { type: 'max-width', value: 767 }],
+    md: [{ type: 'min-width', value: 768 }, { type: 'max-width', value: 991 }],
+    lg: [{ type: 'min-width', value: 992 }, { type: 'max-width', value: 1199 }],
+    xl: [{ type: 'min-width', value: 1200 }, { type: 'max-width', value: 1399 }],
+    xxl: [{ type: 'min-width', value: 1400 }],
+};
+/** Ordered key array matching `BootstrapPreset` — pass as `order` option. */
+export const BootstrapOrder = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'];
+/**
+ * Accessibility & user-preference media queries.
+ * Keys are mutually independent — multiple can be `true` at the same time.
+ *
+ * | Key            | Matches when …                              |
+ * |----------------|---------------------------------------------|
+ * | dark           | `prefers-color-scheme: dark`                |
+ * | light          | `prefers-color-scheme: light`               |
+ * | reducedMotion  | `prefers-reduced-motion: reduce`            |
+ * | highContrast   | `prefers-contrast: more`                    |
+ * | lowContrast    | `prefers-contrast: less`                    |
+ * | noHover        | `hover: none` (touch / stylus devices)      |
+ * | coarsePointer  | `pointer: coarse` (finger-sized input)      |
+ * | forcedColors   | `forced-colors: active` (Windows HCM)      |
+ * | print          | `print` media type                          |
+ */
+export const AccessibilityPreset = {
+    dark: [{ type: 'prefers-color-scheme', value: 'dark' }],
+    light: [{ type: 'prefers-color-scheme', value: 'light' }],
+    reducedMotion: [{ type: 'prefers-reduced-motion', value: 'reduce' }],
+    highContrast: [{ type: 'prefers-contrast', value: 'more' }],
+    lowContrast: [{ type: 'prefers-contrast', value: 'less' }],
+    noHover: [{ type: 'hover', value: 'none' }],
+    coarsePointer: [{ type: 'pointer', value: 'coarse' }],
+    forcedColors: [{ type: 'forced-colors', value: 'active' }],
+    print: [{ type: 'raw', value: 'print' }],
+};

package/dist/react-responsive.d.ts

@@ -0,0 +1,64 @@
+import type { RefObject } from 'react';
+import type { MediaQueryConfig, ResponsiveState, SetConfigOptions } from './create-responsive';
+/**
+ * Returns the current responsive state. Re-renders only when state changes.
+ * Requires React 18+. Generic `T` narrows the type for custom configs.
+ *
+ * @example
+ * type MyState = { sm: boolean; lg: boolean };
+ * const { sm, lg } = useResponsive<MyState>();
+ */
+export declare function useResponsive<T extends Record<string, boolean> = ResponsiveState>(): T;
+export interface BreakpointHelpers {
+    /** First active breakpoint key, or `null`. */
+    current: string | null;
+    /** `true` when the current breakpoint is after `key` in the order. */
+    isAbove: (key: string) => boolean;
+    /** `true` when the current breakpoint is before `key` in the order. */
+    isBelow: (key: string) => boolean;
+    /** `true` when the current breakpoint is between `from` and `to` (inclusive). */
+    between: (from: string, to: string) => boolean;
+}
+/**
+ * Returns ordered breakpoint helpers. Re-renders when the responsive state
+ * changes, so all helpers always reflect the current breakpoint.
+ *
+ * Requires a breakpoint `order` set via `setResponsiveConfig` or
+ * `createResponsiveState`. Falls back to config key insertion order.
+ *
+ * @example
+ * const { current, isAbove, isBelow, between } = useBreakpoints();
+ * return isAbove('sm') ? <DesktopNav /> : <MobileNav />;
+ */
+export declare function useBreakpoints(): BreakpointHelpers;
+/**
+ * Returns a boolean that tracks a raw CSS media query string.
+ * Compatible with React 18+ SSR (returns `false` on the server).
+ *
+ * @example
+ * const isDark   = useMediaQuery('(prefers-color-scheme: dark)');
+ * const canHover = useMediaQuery('(hover: hover)');
+ */
+export declare function useMediaQuery(query: string): boolean;
+/**
+ * Tracks an element's dimensions with `ResizeObserver` and evaluates
+ * breakpoint conditions in JavaScript (Container Queries).
+ *
+ * Pass a `ref` created with `useRef<Element>(null)` — the hook sets up the
+ * observer after mount and cleans up on unmount.
+ *
+ * @example
+ * function Card() {
+ *   const ref = useRef<HTMLDivElement>(null);
+ *   const { compact, wide } = useContainerState(ref, {
+ *     compact: [{ type: 'max-width', value: 300 }],
+ *     wide:    [{ type: 'min-width', value: 600 }],
+ *   });
+ *   return (
+ *     <div ref={ref}>
+ *       {compact ? <CompactLayout /> : wide ? <WideLayout /> : <DefaultLayout />}
+ *     </div>
+ *   );
+ * }
+ */
+export declare function useContainerState(ref: RefObject<Element | null>, config: Record<string, MediaQueryConfig>, options?: SetConfigOptions): Record<string, boolean>;