(function(){
const { useEffect, useId, useRef, useState } = React;
function GlassSurfaceStock({
children,
width = 200,
height = 80,
borderRadius = 20,
borderWidth = 0.07,
brightness = 50,
opacity = 0.93,
blur = 11,
displace = 0,
backgroundOpacity = 0,
saturation = 1,
distortionScale = -180,
redOffset = 0,
greenOffset = 10,
blueOffset = 20,
xChannel = 'R',
yChannel = 'G',
mixBlendMode = 'difference',
className = '',
style = {}
}){
const uniqueId = useId().replace(/:/g, '-');
const filterId = 'glass-filter-' + uniqueId;
const redGradId = 'red-grad-' + uniqueId;
const blueGradId = 'blue-grad-' + uniqueId;
const containerRef = useRef(null);
const feImageRef = useRef(null);
const redChannelRef = useRef(null);
const greenChannelRef = useRef(null);
const blueChannelRef = useRef(null);
const gaussianBlurRef = useRef(null);
const [svgSupported, setSvgSupported] = useState(false);
function supportsSVGFilters(){
if (typeof window === 'undefined' || typeof document === 'undefined') return false;
const isChromium = /Chrome|Chromium|HeadlessChrome|CriOS|Edg/.test(navigator.userAgent);
const isWebkit = /Safari/.test(navigator.userAgent) && !isChromium;
const isFirefox = /Firefox/.test(navigator.userAgent);
return !isWebkit && !isFirefox;
}
function generateDisplacementMap(){
const rect = containerRef.current && containerRef.current.getBoundingClientRect();
const actualWidth = (rect && rect.width) || (typeof width === 'number' ? width : 400);
const actualHeight = (rect && rect.height) || (typeof height === 'number' ? height : 200);
const edgeSize = Math.min(actualWidth, actualHeight) * (borderWidth * 0.5);
const innerWidth = Math.max(0, actualWidth - edgeSize * 2);
const innerHeight = Math.max(0, actualHeight - edgeSize * 2);
const svgContent =
'';
return 'data:image/svg+xml,' + encodeURIComponent(svgContent);
}
function updateDisplacementMap(){
if (feImageRef.current) feImageRef.current.setAttribute('href', generateDisplacementMap());
}
useEffect(function(){
updateDisplacementMap();
[
{ ref: redChannelRef, offset: redOffset },
{ ref: greenChannelRef, offset: greenOffset },
{ ref: blueChannelRef, offset: blueOffset }
].forEach(function(item){
if (!item.ref.current) return;
item.ref.current.setAttribute('scale', String(distortionScale + item.offset));
item.ref.current.setAttribute('xChannelSelector', xChannel);
item.ref.current.setAttribute('yChannelSelector', yChannel);
});
if (gaussianBlurRef.current) gaussianBlurRef.current.setAttribute('stdDeviation', String(displace));
}, [width, height, borderRadius, borderWidth, brightness, opacity, blur, displace, distortionScale, redOffset, greenOffset, blueOffset, xChannel, yChannel, mixBlendMode]);
useEffect(function(){
if (!containerRef.current || typeof ResizeObserver === 'undefined') return;
const resizeObserver = new ResizeObserver(function(){ setTimeout(updateDisplacementMap, 0); });
resizeObserver.observe(containerRef.current);
return function(){ resizeObserver.disconnect(); };
}, []);
useEffect(function(){ setTimeout(updateDisplacementMap, 0); }, [width, height]);
useEffect(function(){ setSvgSupported(supportsSVGFilters()); }, []);
const containerStyle = Object.assign({}, style, {
width: typeof width === 'number' ? width + 'px' : width,
height: typeof height === 'number' ? height + 'px' : height,
borderRadius: borderRadius + 'px',
'--glass-frost': backgroundOpacity,
'--glass-saturation': saturation,
'--filter-id': 'url(#' + filterId + ')'
});
return (
);
}
window.GlassSurfaceStock = GlassSurfaceStock;
window.GlassSurface = GlassSurfaceStock;
})();