@furystack/shades/esm/services/screen-service.d.ts

A lightweight UI framework for FuryStack with JSX support

import type { Token } from '@furystack/inject';
import { ObservableValue } from '@furystack/utils';
/**
 * Available screen size breakpoint identifiers, ordered from smallest to largest.
 */
export declare const ScreenSizes: readonly ["xs", "sm", "md", "lg", "xl"];
/**
 * A screen size breakpoint identifier.
 */
export type ScreenSize = (typeof ScreenSizes)[number];
/**
 * Breakpoint definition with name and size constraints.
 */
export type Breakpoint = {
    name: ScreenSize;
    minSize: number;
    maxSize?: number;
};
/**
 * Service for detecting and subscribing to screen size and orientation changes.
 *
 * Use `screenSize.atLeast[size]` to check if the viewport is at least a certain size.
 *
 * **Breakpoint Thresholds:**
 * - `xs`: 0px+
 * - `sm`: 600px+
 * - `md`: 960px+
 * - `lg`: 1280px+
 * - `xl`: 1920px+
 *
 * @example
 * ```typescript
 * const screenService = injector.get(ScreenService)
 *
 * if (screenService.screenSize.atLeast.md.getValue()) {
 *   // Desktop layout
 * }
 *
 * screenService.screenSize.atLeast.md.subscribe((isAtLeastMd) => {
 *   // react to breakpoint changes
 * })
 * ```
 */
export interface ScreenService {
    readonly breakpoints: {
        [K in ScreenSize]: {
            minSize: number;
        };
    };
    readonly screenSize: {
        atLeast: {
            [K in ScreenSize]: ObservableValue<boolean>;
        };
    };
    readonly orientation: ObservableValue<'landscape' | 'portrait'>;
}
export declare const ScreenService: Token<ScreenService, 'singleton'>;
//# sourceMappingURL=screen-service.d.ts.map