@sikka/hawa 0.25.0-next → 0.25.2-next

package/dist/glow/index.js

@@ -0,0 +1,155 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// components/elements/glow/index.ts
+var glow_exports = {};
+__export(glow_exports, {
+  Glow: () => Glow,
+  GlowCapture: () => GlowCapture
+});
+module.exports = __toCommonJS(glow_exports);
+
+// components/elements/glow/Glow.tsx
+var import_react = __toESM(require("react"));
+var GlowCapture = ({ className = "", size = 400, ...rest }) => {
+  const element = (0, import_react.useRef)(null);
+  (0, import_react.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__ */ import_react.default.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 = (0, import_react.useRef)(null);
+  (0, import_react.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`
+    );
+  });
+  (0, import_react.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__ */ import_react.default.createElement("div", { ref: element, className: "hawa-glow", style: { display: "grid" } }, /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className,
+      style: {
+        ...style,
+        gridArea: "1/1/1/1"
+      },
+      ...rest
+    },
+    rest.children
+  ), /* @__PURE__ */ import_react.default.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
+  ));
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Glow,
+  GlowCapture
+});

package/dist/glow/index.mjs

@@ -0,0 +1,117 @@
+// components/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
+};