@anpdgovbr/shared-ui
Version:
Biblioteca de componentes React com MUI v7 e padrão GovBR-ds para ANPD
107 lines • 2.68 kB
TypeScript
/**
* Sistema de breakpoints baseado no GovBR Design System
*
* @security Valores fixos garantem consistência em ambientes diversos
* @resilience Abordagem mobile-first para acessibilidade em qualquer dispositivo
*
* Referência: Especificações responsive do Gov.br DS
*
* O GovBR-DS segue uma abordagem mobile-first com breakpoints
* definidos para garantir consistência em dispositivos governamentais
*/
export declare const govbrBreakpointValues: {
xs: number;
sm: number;
md: number;
lg: number;
xl: number;
xxl: number;
};
/**
* Breakpoints configurados para MUI Theme
* Usa os valores padrão do GovBR-DS para máxima compatibilidade
*/
export declare const breakpoints: {
values: {
xs: number;
sm: number;
md: number;
lg: number;
xl: number;
xxl: number;
};
unit: "px";
up: (key: keyof typeof govbrBreakpointValues | number) => string;
down: (key: keyof typeof govbrBreakpointValues | number) => string;
between: (start: keyof typeof govbrBreakpointValues | number, end: keyof typeof govbrBreakpointValues | number) => string;
only: (key: keyof typeof govbrBreakpointValues) => string;
};
/**
* Containers responsivos baseados no GovBR-DS
* Define larguras máximas para diferentes breakpoints
*/
export declare const containerBreakpoints: {
maxWidth: {
xs: string;
sm: string;
md: string;
lg: string;
xl: string;
xxl: string;
};
padding: {
xs: string;
sm: string;
md: string;
lg: string;
xl: string;
xxl: string;
};
};
/**
* Grid system responsivo baseado no GovBR-DS
* Sistema de 12 colunas com gutters responsivos
*/
export declare const gridBreakpoints: {
columns: number;
spacing: {
xs: string;
sm: string;
md: string;
lg: string;
xl: string;
xxl: string;
};
margin: {
xs: string;
sm: string;
md: string;
lg: string;
xl: string;
xxl: string;
};
};
/**
* Utilitários para media queries responsivas
* Facilita o uso consistente de breakpoints em componentes
*/
export declare const mediaQueries: {
mobile: string;
tabletUp: string;
tabletOnly: string;
desktopUp: string;
desktopOnly: string;
largeUp: string;
largeOnly: string;
xlUp: string;
xlOnly: string;
xxlUp: string;
landscape: string;
portrait: string;
highDensity: string;
reducedMotion: string;
darkMode: string;
lightMode: string;
print: string;
};
//# sourceMappingURL=breakpoints.d.ts.map