@sikka/hawa/dist/glow/index.mjs.map

Modern UI Kit made with Tailwind

{"version":3,"sources":["../../elements/glow/Glow.tsx"],"sourcesContent":["import React, { CSSProperties, useEffect, useRef } from \"react\";\n\nexport const GlowCapture = ({ className = \"\", size = 400, ...rest }) => {\n  const element = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const move = (e: PointerEvent) => {\n      if (e.pointerType === \"mouse\") {\n        requestAnimationFrame(() => {\n          // @ts-ignore\n          element.current?.style.setProperty(\"--glow-x\", `${e.layerX}px`);\n          // @ts-ignore\n          element.current?.style.setProperty(\"--glow-y\", `${e.layerY}px`);\n        });\n      }\n    };\n\n    const leave = () => {\n      element.current?.style.removeProperty(\"--glow-x\");\n      element.current?.style.removeProperty(\"--glow-y\");\n    };\n\n    element.current?.addEventListener(\"pointermove\", move, { passive: true });\n    element.current?.addEventListener(\"pointerleave\", leave, { passive: true });\n    return () => {\n      element.current?.removeEventListener(\"pointermove\", move);\n      element.current?.removeEventListener(\"pointerleave\", leave);\n    };\n  }, []);\n\n  return (\n    <div\n      ref={element}\n      className={`hawa-glow-capture ${className}`}\n      style={\n        {\n          position: \"relative\",\n          \"--glow-size\": `${size}px`,\n        } as CSSProperties\n      }\n      {...rest}\n    />\n  );\n};\n\nconst mask = `\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`;\n\nexport const Glow = ({\n  className = \"\",\n  style = {},\n\n  color = \"#f50057\",\n  debug = false,\n  ...rest\n}) => {\n  const element = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    element.current?.style.setProperty(\n      \"--glow-top\",\n      `${element.current?.offsetTop}px`,\n    );\n    element.current?.style.setProperty(\n      \"--glow-left\",\n      `${element.current?.offsetLeft}px`,\n    );\n  });\n\n  useEffect(() => {\n    const observer = new ResizeObserver(() => {\n      requestAnimationFrame(() => {\n        element.current?.style.setProperty(\n          \"--glow-top\",\n          `${element.current?.offsetTop}px`,\n        );\n        element.current?.style.setProperty(\n          \"--glow-left\",\n          `${element.current?.offsetLeft}px`,\n        );\n      });\n    });\n\n    const capture = element.current?.closest(\".glow-capture\");\n    if (capture) observer.observe(capture);\n\n    return () => observer.disconnect();\n  }, []);\n\n  return (\n    <div ref={element} className=\"hawa-glow\" style={{ display: \"grid\" }}>\n      <div\n        className={className}\n        style={{\n          ...style,\n          gridArea: \"1/1/1/1\",\n        }}\n        {...rest}\n      >\n        {rest.children}\n      </div>\n      <div\n        className={`glow-mask ${className}`}\n        // @ts-ignore\n        glow=\"true\"\n        style={\n          {\n            ...style,\n            \"--glow-color\": color,\n            gridArea: \"1/1/1/1\",\n            pointerEvents: \"none\",\n            mask: debug ? undefined : mask,\n            WebkitMask: debug ? undefined : mask,\n          } as CSSProperties\n        }\n        {...rest}\n      >\n        {rest.children}\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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","names":["_a","_b"]}