export const duration = { simple : '100ms' , complex : '200ms' , detail : '500ms' , smallIn : '150ms' , smallOut : '75ms' , mediumIn : '250ms' , mediumOut : '200ms' , largeIn : '300ms' , largeOut : '250ms' } as const ; export const easing = { standard : 'cubic-bezier(0.4, 0, 0.2, 1)' , decelerate : 'cubic-bezier(0, 0, 0.2, 1)' , accelerate : 'cubic-bezier(0.4, 0, 1, 1)' } as const ; export interface TransitionOption { duration ? : string ; easing ? : string ; delay ? : string ; } export const createTransition = ( props = [ 'all' ] , { duration : durationOption = duration . simple , easing : easingOption = easing . standard , delay = '0ms' } = { } ) => ( Array . isArray ( props ) ? props : [ props ] ) . map ( prop => `${ prop } ${ durationOption } ${ easingOption } ${ delay }` ) . join ( ',' ) ;