import { StackProps } from '@tamagui/core' ; import React from 'react' ; import { YStack } from './Stacks' ; export type BlurViewProps = StackProps & { blurAmount ? : number ; blurRadius ? : number ; fallbackBackgroundColor ? : string ; blurType ? : 'xlight' | 'light' | 'dark' | 'chromeMaterial' | 'material' | 'thickMaterial' | 'thinMaterial' | 'ultraThinMaterial' | 'chromeMaterialDark' | 'materialDark' | 'thickMaterialDark' | 'thinMaterialDark' | 'ultraThinMaterialDark' | 'chromeMaterialLight' | 'materialLight' | 'thickMaterialLight' | 'thinMaterialLight' | 'ultraThinMaterialLight' | 'regular' | 'prominent' | 'extraDark' ; downsampleFactor ? : number ; } ; export function BlurView ( { children , borderRadius , fallbackBackgroundColor , blurRadius = 20 , blurType , downsampleFactor , ... props } ) { return ( < YStack position = "relative" borderRadius = { borderRadius } { ... props } > < div className = "backdrop-filter" style = { { position : 'absolute' , width : '100%' , height : '100%' , backdropFilter : `blur(${ blurRadius }px)` , borderRadius , zIndex : - 1 , pointerEvents : 'none' , } } /> { children } < /YStack>); }