@dbs-portal/core-theme
Version:
Theme management, styling utilities, and design tokens for DBS Portal
65 lines • 2.54 kB
TypeScript
/**
* Responsive utilities
* Provides helpers for responsive design and media queries
*/
import { type Breakpoint } from '../tokens/breakpoints';
/**
* Check if current viewport matches breakpoint
*/
export declare const useMediaQuery: (query: string) => boolean;
/**
* Get current breakpoint
*/
export declare const getCurrentBreakpoint: () => Breakpoint;
/**
* Check if viewport is at or above breakpoint
*/
export declare const isBreakpointUp: (breakpoint: Breakpoint) => boolean;
/**
* Check if viewport is below breakpoint
*/
export declare const isBreakpointDown: (breakpoint: Breakpoint) => boolean;
/**
* Check if viewport is between breakpoints
*/
export declare const isBreakpointBetween: (min: Breakpoint, max: Breakpoint) => boolean;
/**
* Responsive value resolver
* Resolves responsive values based on current breakpoint
*/
export declare const resolveResponsiveValue: <T>(value: T | Partial<Record<Breakpoint, T>>, currentBreakpoint?: Breakpoint) => T;
/**
* Create responsive CSS styles
*/
export declare const createResponsiveStyles: <T extends Record<string, any>>(styles: Partial<Record<Breakpoint, T>>) => Record<string, T>;
/**
* Responsive grid utilities
*/
export declare const createResponsiveGrid: (columns: Partial<Record<Breakpoint, number>>, gap?: Partial<Record<Breakpoint, string>>) => Record<string, any>;
/**
* Container query utilities (experimental)
*/
export declare const containerQueries: {
readonly sm: "@container (min-width: 384px)";
readonly md: "@container (min-width: 448px)";
readonly lg: "@container (min-width: 512px)";
readonly xl: "@container (min-width: 768px)";
readonly xxl: "@container (min-width: 1024px)";
};
/**
* Responsive text utilities
*/
export declare const responsiveText: {
fontSize: (sizes: Partial<Record<Breakpoint, string>>) => Record<string, Record<string, any>>;
lineHeight: (heights: Partial<Record<Breakpoint, string>>) => Record<string, Record<string, any>>;
textAlign: (alignments: Partial<Record<Breakpoint, "left" | "center" | "right" | "justify">>) => Record<string, Record<string, any>>;
};
/**
* Responsive spacing utilities
*/
export declare const responsiveSpacing: {
padding: (values: Partial<Record<Breakpoint, string>>) => Record<string, Record<string, any>>;
margin: (values: Partial<Record<Breakpoint, string>>) => Record<string, Record<string, any>>;
gap: (values: Partial<Record<Breakpoint, string>>) => Record<string, Record<string, any>>;
};
//# sourceMappingURL=responsive.d.ts.map