import { Nil } from "@architus/lib/types" ; const breakpoints = { xs : 0 , vs : 400 , sm : 576 , md : 768 , lg : 992 , xl : 1200 , xxl : 1600 , } as const ; export type BreakpointKey = keyof typeof breakpoints ; const breakpointMin = ( key ) : number | null => breakpoints [ key ] === 0 ? null : breakpoints [ key ] ; const breakpointMax = ( key ) : number | null => breakpoints [ key ] === 0 ? null : breakpoints [ key ] - 0.02 ; export const minWidth = ( value ) : string => `(min-width: ${ value })` ; export const maxWidth = ( value ) : string => `(max-width: ${ value })` ; export const betweenWidth = ( min , max ) : string => `(min-width: ${ min }) and (max-width: ${ max })` ; export const mediaMinWidth = ( value ) : string => `@media ${ minWidth ( value ) }` ; export const mediaMaxWidth = ( value ) : string => `@media ${ maxWidth ( value ) }` ; export const mediaBetweenWidth = ( min , max ) : string => `@media ${ betweenWidth ( min , max ) }` ; param key export function breakpoint ( key ) { return `${ breakpoints [ key ] }px` ; } param key export function up ( key ) { const breakpointValue = breakpointMin ( key ) ; if ( breakpointValue === null ) return "&" ; return mediaMinWidth ( `${ breakpointValue }px` ) ; } param key export function down ( key ) { const breakpointValue = breakpointMax ( key ) ; if ( breakpointValue === null ) return "&.__unused" ; return mediaMaxWidth ( `${ breakpointValue }px` ) ; } param lower param upper export function between ( lower , upper ) { const min = breakpointMin ( lower ) ; const max = breakpointMax ( upper ) ; if ( max === null ) return up ( lower ) ; if ( min === null ) return down ( upper ) ; return mediaBetweenWidth ( `${ min }px` , `${ max }px` ) ; }