@codaworks/react-glow/dist/react-glow.cjs.production.min.js

Add a mouse-tracing glow effect to React components

"use client";
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),r=(e=t)&&"object"==typeof e&&"default"in e?e.default:e;function n(){return(n=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e}).apply(this,arguments)}function l(e,t){if(null==e)return{};var r,n,l={},o=Object.keys(e);for(n=0;n<o.length;n++)t.indexOf(r=o[n])>=0||(l[r]=e[r]);return l}var o=["className","size"],s=["className","style","children","color","debug"],i="\nradial-gradient(var(--glow-size) var(--glow-size) at calc(var(--glow-x, -99999px) - var(--glow-left, 0px))\ncalc(var(--glow-y, -99999px) - var(--glow-top, 0px)), #000000 1%, transparent 50%)\n";exports.Glow=function(e){var o=e.className,u=void 0===o?"":o,a=e.style,c=e.children,v=e.color,f=void 0===v?"#f50057":v,p=e.debug,d=void 0!==p&&p,g=l(e,s),y=t.useRef(null);return t.useEffect((function(){var e,t,r,n;null==(e=y.current)||e.style.setProperty("--glow-top",(null==(t=y.current)?void 0:t.offsetTop)+"px"),null==(r=y.current)||r.style.setProperty("--glow-left",(null==(n=y.current)?void 0:n.offsetLeft)+"px")})),t.useEffect((function(){var e,t=new ResizeObserver((function(){requestAnimationFrame((function(){var e,t,r,n;null==(e=y.current)||e.style.setProperty("--glow-top",(null==(t=y.current)?void 0:t.offsetTop)+"px"),null==(r=y.current)||r.style.setProperty("--glow-left",(null==(n=y.current)?void 0:n.offsetLeft)+"px")}))})),r=null==(e=y.current)?void 0:e.closest(".glow-capture");return r&&t.observe(r),function(){return t.disconnect()}}),[]),r.createElement("div",{ref:y,className:"glow",style:{display:"grid"}},r.createElement("div",Object.assign({className:u,style:n({},a,{gridArea:"1/1/1/1"})},g),c),r.createElement("div",Object.assign({className:"glow-mask "+u,glow:"true",style:n({},a,{"--glow-color":f,gridArea:"1/1/1/1",pointerEvents:"none",mask:d?void 0:i,WebkitMask:d?void 0:i})},g),c))},exports.GlowCapture=function(e){var n=e.className,s=void 0===n?"":n,i=e.size,u=void 0===i?400:i,a=l(e,o),c=t.useRef(null);return t.useEffect((function(){var e,t,r=function(e){"mouse"===e.pointerType&&requestAnimationFrame((function(){if(c.current){var t=c.current.getBoundingClientRect(),r=e.clientY-t.top;c.current.style.setProperty("--glow-x",e.clientX-t.left+"px"),c.current.style.setProperty("--glow-y",r+"px")}}))},n=function(){var e,t;null==(e=c.current)||e.style.removeProperty("--glow-x"),null==(t=c.current)||t.style.removeProperty("--glow-y")};return null==(e=c.current)||e.addEventListener("pointermove",r,{passive:!0}),null==(t=c.current)||t.addEventListener("pointerleave",n,{passive:!0}),function(){var e,t;null==(e=c.current)||e.removeEventListener("pointermove",r),null==(t=c.current)||t.removeEventListener("pointerleave",n)}}),[]),r.createElement("div",Object.assign({ref:c,className:"glow-capture "+s,style:{position:"relative","--glow-size":u+"px"}},a))};
//# sourceMappingURL=react-glow.cjs.production.min.js.map