@sikka/hawa
Version:
Modern UI Kit made with Tailwind
119 lines (118 loc) • 3.71 kB
JavaScript
"use client";
// elements/glow/Glow.tsx
import React, { useEffect, useRef } from "react";
var GlowCapture = ({ className = "", size = 400, ...rest }) => {
const element = useRef(null);
useEffect(() => {
var _a, _b;
const move = (e) => {
if (e.pointerType === "mouse") {
requestAnimationFrame(() => {
var _a2, _b2;
(_a2 = element.current) == null ? void 0 : _a2.style.setProperty("--glow-x", `${e.layerX}px`);
(_b2 = element.current) == null ? void 0 : _b2.style.setProperty("--glow-y", `${e.layerY}px`);
});
}
};
const leave = () => {
var _a2, _b2;
(_a2 = element.current) == null ? void 0 : _a2.style.removeProperty("--glow-x");
(_b2 = element.current) == null ? void 0 : _b2.style.removeProperty("--glow-y");
};
(_a = element.current) == null ? void 0 : _a.addEventListener("pointermove", move, { passive: true });
(_b = element.current) == null ? void 0 : _b.addEventListener("pointerleave", leave, { passive: true });
return () => {
var _a2, _b2;
(_a2 = element.current) == null ? void 0 : _a2.removeEventListener("pointermove", move);
(_b2 = element.current) == null ? void 0 : _b2.removeEventListener("pointerleave", leave);
};
}, []);
return /* @__PURE__ */ React.createElement(
"div",
{
ref: element,
className: `hawa-glow-capture ${className}`,
style: {
position: "relative",
"--glow-size": `${size}px`
},
...rest
}
);
};
var mask = `
radial-gradient(var(--glow-size) var(--glow-size) at calc(var(--glow-x, -99999px) - var(--glow-left, 0px))
calc(var(--glow-y, -99999px) - var(--glow-top, 0px)), #000000 1%, transparent 50%)
`;
var Glow = ({
className = "",
style = {},
color = "#f50057",
debug = false,
...rest
}) => {
const element = useRef(null);
useEffect(() => {
var _a, _b, _c, _d;
(_b = element.current) == null ? void 0 : _b.style.setProperty(
"--glow-top",
`${(_a = element.current) == null ? void 0 : _a.offsetTop}px`
);
(_d = element.current) == null ? void 0 : _d.style.setProperty(
"--glow-left",
`${(_c = element.current) == null ? void 0 : _c.offsetLeft}px`
);
});
useEffect(() => {
var _a;
const observer = new ResizeObserver(() => {
requestAnimationFrame(() => {
var _a2, _b, _c, _d;
(_b = element.current) == null ? void 0 : _b.style.setProperty(
"--glow-top",
`${(_a2 = element.current) == null ? void 0 : _a2.offsetTop}px`
);
(_d = element.current) == null ? void 0 : _d.style.setProperty(
"--glow-left",
`${(_c = element.current) == null ? void 0 : _c.offsetLeft}px`
);
});
});
const capture = (_a = element.current) == null ? void 0 : _a.closest(".glow-capture");
if (capture) observer.observe(capture);
return () => observer.disconnect();
}, []);
return /* @__PURE__ */ React.createElement("div", { ref: element, className: "hawa-glow", style: { display: "grid" } }, /* @__PURE__ */ React.createElement(
"div",
{
className,
style: {
...style,
gridArea: "1/1/1/1"
},
...rest
},
rest.children
), /* @__PURE__ */ React.createElement(
"div",
{
className: `glow-mask ${className}`,
glow: "true",
style: {
...style,
"--glow-color": color,
gridArea: "1/1/1/1",
pointerEvents: "none",
mask: debug ? void 0 : mask,
WebkitMask: debug ? void 0 : mask
},
...rest
},
rest.children
));
};
export {
Glow,
GlowCapture
};
//# sourceMappingURL=index.mjs.map