@sikka/hawa 0.26.31 → 0.26.33

package/dist/glow/index.js

@@ -40,23 +40,27 @@ 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(() => {
-          element.current?.style.setProperty("--glow-x", `${e.layerX}px`);
-          element.current?.style.setProperty("--glow-y", `${e.layerY}px`);
+          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 = () => {
-      element.current?.style.removeProperty("--glow-x");
-      element.current?.style.removeProperty("--glow-y");
+      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");
     };
-    element.current?.addEventListener("pointermove", move, { passive: true });
-    element.current?.addEventListener("pointerleave", leave, { passive: true });
+    (_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 () => {
-      element.current?.removeEventListener("pointermove", move);
-      element.current?.removeEventListener("pointerleave", leave);
+      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(
@@ -85,29 +89,32 @@ var Glow = ({
 }) => {
   const element = (0, import_react.useRef)(null);
   (0, import_react.useEffect)(() => {
-    element.current?.style.setProperty(
+    var _a, _b, _c, _d;
+    (_b = element.current) == null ? void 0 : _b.style.setProperty(
       "--glow-top",
-      `${element.current?.offsetTop}px`
+      `${(_a = element.current) == null ? void 0 : _a.offsetTop}px`
     );
-    element.current?.style.setProperty(
+    (_d = element.current) == null ? void 0 : _d.style.setProperty(
       "--glow-left",
-      `${element.current?.offsetLeft}px`
+      `${(_c = element.current) == null ? void 0 : _c.offsetLeft}px`
     );
   });
   (0, import_react.useEffect)(() => {
+    var _a;
     const observer = new ResizeObserver(() => {
       requestAnimationFrame(() => {
-        element.current?.style.setProperty(
+        var _a2, _b, _c, _d;
+        (_b = element.current) == null ? void 0 : _b.style.setProperty(
           "--glow-top",
-          `${element.current?.offsetTop}px`
+          `${(_a2 = element.current) == null ? void 0 : _a2.offsetTop}px`
         );
-        element.current?.style.setProperty(
+        (_d = element.current) == null ? void 0 : _d.style.setProperty(
           "--glow-left",
-          `${element.current?.offsetLeft}px`
+          `${(_c = element.current) == null ? void 0 : _c.offsetLeft}px`
         );
       });
     });
-    const capture = element.current?.closest(".glow-capture");
+    const capture = (_a = element.current) == null ? void 0 : _a.closest(".glow-capture");
     if (capture)
       observer.observe(capture);
     return () => observer.disconnect();

package/dist/glow/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../elements/glow/index.ts","../../elements/glow/Glow.tsx"],"sourcesContent":["export * from \"./Glow\";\n","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":["React"]}
+{"version":3,"sources":["../../elements/glow/index.ts","../../elements/glow/Glow.tsx"],"sourcesContent":["export * from \"./Glow\";\n","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","React"]}

package/dist/glow/index.mjs

@@ -3,23 +3,27 @@ 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(() => {
-          element.current?.style.setProperty("--glow-x", `${e.layerX}px`);
-          element.current?.style.setProperty("--glow-y", `${e.layerY}px`);
+          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 = () => {
-      element.current?.style.removeProperty("--glow-x");
-      element.current?.style.removeProperty("--glow-y");
+      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");
     };
-    element.current?.addEventListener("pointermove", move, { passive: true });
-    element.current?.addEventListener("pointerleave", leave, { passive: true });
+    (_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 () => {
-      element.current?.removeEventListener("pointermove", move);
-      element.current?.removeEventListener("pointerleave", leave);
+      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(
@@ -48,29 +52,32 @@ var Glow = ({
 }) => {
   const element = useRef(null);
   useEffect(() => {
-    element.current?.style.setProperty(
+    var _a, _b, _c, _d;
+    (_b = element.current) == null ? void 0 : _b.style.setProperty(
       "--glow-top",
-      `${element.current?.offsetTop}px`
+      `${(_a = element.current) == null ? void 0 : _a.offsetTop}px`
     );
-    element.current?.style.setProperty(
+    (_d = element.current) == null ? void 0 : _d.style.setProperty(
       "--glow-left",
-      `${element.current?.offsetLeft}px`
+      `${(_c = element.current) == null ? void 0 : _c.offsetLeft}px`
     );
   });
   useEffect(() => {
+    var _a;
     const observer = new ResizeObserver(() => {
       requestAnimationFrame(() => {
-        element.current?.style.setProperty(
+        var _a2, _b, _c, _d;
+        (_b = element.current) == null ? void 0 : _b.style.setProperty(
           "--glow-top",
-          `${element.current?.offsetTop}px`
+          `${(_a2 = element.current) == null ? void 0 : _a2.offsetTop}px`
         );
-        element.current?.style.setProperty(
+        (_d = element.current) == null ? void 0 : _d.style.setProperty(
           "--glow-left",
-          `${element.current?.offsetLeft}px`
+          `${(_c = element.current) == null ? void 0 : _c.offsetLeft}px`
         );
       });
     });
-    const capture = element.current?.closest(".glow-capture");
+    const capture = (_a = element.current) == null ? void 0 : _a.closest(".glow-capture");
     if (capture)
       observer.observe(capture);
     return () => observer.disconnect();

package/dist/glow/index.mjs.map

@@ -1 +1 @@
-{"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":";AAAA,OAAO,SAAwB,WAAW,cAAc;AAEjD,IAAM,cAAc,CAAC,EAAE,YAAY,IAAI,OAAO,KAAK,GAAG,KAAK,MAAM;AACtE,QAAM,UAAU,OAAuB,IAAI;AAE3C,YAAU,MAAM;AACd,UAAM,OAAO,CAAC,MAAoB;AAChC,UAAI,EAAE,gBAAgB,SAAS;AAC7B,8BAAsB,MAAM;AAE1B,kBAAQ,SAAS,MAAM,YAAY,YAAY,GAAG,EAAE,MAAM,IAAI;AAE9D,kBAAQ,SAAS,MAAM,YAAY,YAAY,GAAG,EAAE,MAAM,IAAI;AAAA,QAChE,CAAC;AAAA,MACH;AAAA,IACF;AAEA,UAAM,QAAQ,MAAM;AAClB,cAAQ,SAAS,MAAM,eAAe,UAAU;AAChD,cAAQ,SAAS,MAAM,eAAe,UAAU;AAAA,IAClD;AAEA,YAAQ,SAAS,iBAAiB,eAAe,MAAM,EAAE,SAAS,KAAK,CAAC;AACxE,YAAQ,SAAS,iBAAiB,gBAAgB,OAAO,EAAE,SAAS,KAAK,CAAC;AAC1E,WAAO,MAAM;AACX,cAAQ,SAAS,oBAAoB,eAAe,IAAI;AACxD,cAAQ,SAAS,oBAAoB,gBAAgB,KAAK;AAAA,IAC5D;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW,qBAAqB,SAAS;AAAA,MACzC,OACE;AAAA,QACE,UAAU;AAAA,QACV,eAAe,GAAG,IAAI;AAAA,MACxB;AAAA,MAED,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,IAAM,OAAO;AAAA;AAAA;AAAA;AAKN,IAAM,OAAO,CAAC;AAAA,EACnB,YAAY;AAAA,EACZ,QAAQ,CAAC;AAAA,EAET,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,GAAG;AACL,MAAM;AACJ,QAAM,UAAU,OAAuB,IAAI;AAE3C,YAAU,MAAM;AACd,YAAQ,SAAS,MAAM;AAAA,MACrB;AAAA,MACA,GAAG,QAAQ,SAAS,SAAS;AAAA,IAC/B;AACA,YAAQ,SAAS,MAAM;AAAA,MACrB;AAAA,MACA,GAAG,QAAQ,SAAS,UAAU;AAAA,IAChC;AAAA,EACF,CAAC;AAED,YAAU,MAAM;AACd,UAAM,WAAW,IAAI,eAAe,MAAM;AACxC,4BAAsB,MAAM;AAC1B,gBAAQ,SAAS,MAAM;AAAA,UACrB;AAAA,UACA,GAAG,QAAQ,SAAS,SAAS;AAAA,QAC/B;AACA,gBAAQ,SAAS,MAAM;AAAA,UACrB;AAAA,UACA,GAAG,QAAQ,SAAS,UAAU;AAAA,QAChC;AAAA,MACF,CAAC;AAAA,IACH,CAAC;AAED,UAAM,UAAU,QAAQ,SAAS,QAAQ,eAAe;AACxD,QAAI;AAAS,eAAS,QAAQ,OAAO;AAErC,WAAO,MAAM,SAAS,WAAW;AAAA,EACnC,GAAG,CAAC,CAAC;AAEL,SACE,oCAAC,SAAI,KAAK,SAAS,WAAU,aAAY,OAAO,EAAE,SAAS,OAAO,KAChE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,OAAO;AAAA,QACL,GAAG;AAAA,QACH,UAAU;AAAA,MACZ;AAAA,MACC,GAAG;AAAA;AAAA,IAEH,KAAK;AAAA,EACR,GACA;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,aAAa,SAAS;AAAA,MAEjC,MAAK;AAAA,MACL,OACE;AAAA,QACE,GAAG;AAAA,QACH,gBAAgB;AAAA,QAChB,UAAU;AAAA,QACV,eAAe;AAAA,QACf,MAAM,QAAQ,SAAY;AAAA,QAC1B,YAAY,QAAQ,SAAY;AAAA,MAClC;AAAA,MAED,GAAG;AAAA;AAAA,IAEH,KAAK;AAAA,EACR,CACF;AAEJ;","names":[]}
+{"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"]}

package/dist/hooks/index.d.mts

@@ -1,6 +1,5 @@
-import * as React$1 from 'react';
 import React__default, { useLayoutEffect } from 'react';
-import { T as ToastProps, a as ToastActionElement } from '../Toast-VBd4UvlM.mjs';
+import { T as ToasterToastProps } from '../Toast-ySvjL_-K.mjs';
 import 'class-variance-authority/types';
 import '@radix-ui/react-toast';
 import 'class-variance-authority';
@@ -8,14 +7,6 @@ import '../commonTypes-CKtkuNFH.mjs';
 
 declare const useIsomorphicEffect: typeof useLayoutEffect;
 
-type ToasterToast = ToastProps & {
-    id: string;
-    title?: React$1.ReactNode;
-    description?: React$1.ReactNode;
-    severity?: "info" | "warning" | "error" | "success" | "none";
-    action?: ToastActionElement;
-    size?: "default" | "sm";
-};
 declare const actionTypes: {
     readonly ADD_TOAST: "ADD_TOAST";
     readonly UPDATE_TOAST: "UPDATE_TOAST";
@@ -25,31 +16,31 @@ declare const actionTypes: {
 type ActionType = typeof actionTypes;
 type Action = {
     type: ActionType["ADD_TOAST"];
-    toast: ToasterToast;
+    toast: ToasterToastProps;
 } | {
     type: ActionType["UPDATE_TOAST"];
-    toast: Partial<ToasterToast>;
+    toast: Partial<ToasterToastProps>;
 } | {
     type: ActionType["DISMISS_TOAST"];
-    toastId?: ToasterToast["id"];
+    toastId?: ToasterToastProps["id"];
 } | {
     type: ActionType["REMOVE_TOAST"];
-    toastId?: ToasterToast["id"];
+    toastId?: ToasterToastProps["id"];
 };
 interface State {
-    toasts: ToasterToast[];
+    toasts: ToasterToastProps[];
 }
 declare const reducer: (state: State, action: Action) => State;
-type Toast = Omit<ToasterToast, "id">;
+type Toast = Omit<ToasterToastProps, "id">;
 declare function toast({ ...props }: Toast): {
     id: string;
     dismiss: () => void;
-    update: (props: ToasterToast) => void;
+    update: (props: ToasterToastProps) => void;
 };
 declare function useToast(): {
     toast: typeof toast;
     dismiss: (toastId?: string) => void;
-    toasts: ToasterToast[];
+    toasts: ToasterToastProps[];
 };
 
 type DialogCarouselType = {

package/dist/hooks/index.d.ts

@@ -1,6 +1,5 @@
-import * as React$1 from 'react';
 import React__default, { useLayoutEffect } from 'react';
-import { T as ToastProps, a as ToastActionElement } from '../Toast-pOd4uGZz.js';
+import { T as ToasterToastProps } from '../Toast-YaClwi7z.js';
 import 'class-variance-authority/types';
 import '@radix-ui/react-toast';
 import 'class-variance-authority';
@@ -8,14 +7,6 @@ import '../commonTypes-CKtkuNFH.js';
 
 declare const useIsomorphicEffect: typeof useLayoutEffect;
 
-type ToasterToast = ToastProps & {
-    id: string;
-    title?: React$1.ReactNode;
-    description?: React$1.ReactNode;
-    severity?: "info" | "warning" | "error" | "success" | "none";
-    action?: ToastActionElement;
-    size?: "default" | "sm";
-};
 declare const actionTypes: {
     readonly ADD_TOAST: "ADD_TOAST";
     readonly UPDATE_TOAST: "UPDATE_TOAST";
@@ -25,31 +16,31 @@ declare const actionTypes: {
 type ActionType = typeof actionTypes;
 type Action = {
     type: ActionType["ADD_TOAST"];
-    toast: ToasterToast;
+    toast: ToasterToastProps;
 } | {
     type: ActionType["UPDATE_TOAST"];
-    toast: Partial<ToasterToast>;
+    toast: Partial<ToasterToastProps>;
 } | {
     type: ActionType["DISMISS_TOAST"];
-    toastId?: ToasterToast["id"];
+    toastId?: ToasterToastProps["id"];
 } | {
     type: ActionType["REMOVE_TOAST"];
-    toastId?: ToasterToast["id"];
+    toastId?: ToasterToastProps["id"];
 };
 interface State {
-    toasts: ToasterToast[];
+    toasts: ToasterToastProps[];
 }
 declare const reducer: (state: State, action: Action) => State;
-type Toast = Omit<ToasterToast, "id">;
+type Toast = Omit<ToasterToastProps, "id">;
 declare function toast({ ...props }: Toast): {
     id: string;
     dismiss: () => void;
-    update: (props: ToasterToast) => void;
+    update: (props: ToasterToastProps) => void;
 };
 declare function useToast(): {
     toast: typeof toast;
     dismiss: (toastId?: string) => void;
-    toasts: ToasterToast[];
+    toasts: ToasterToastProps[];
 };
 
 type DialogCarouselType = {

package/dist/hooks/index.mjs

@@ -2,11 +2,8 @@ import {
   useBreakpoint
 } from "../chunk-D22AALLE.mjs";
 import {
-  reducer,
-  toast,
-  useClipboard,
-  useToast
-} from "../chunk-JNUGOUYJ.mjs";
+  useClipboard
+} from "../chunk-A3ERTYS4.mjs";
 import "../chunk-ZFXKCRJC.mjs";
 
 // hooks/useIsomorphicEffect.ts
@@ -19,11 +16,133 @@ import { useState } from "react";
 // hooks/useHover.ts
 import { useEffect as useEffect2, useRef, useState as useState2 } from "react";
 
+// hooks/useToast.ts
+import * as React3 from "react";
+var TOAST_LIMIT = 5;
+var TOAST_REMOVE_DELAY = 1e5;
+var count = 0;
+function genId() {
+  count = (count + 1) % Number.MAX_VALUE;
+  return count.toString();
+}
+var toastTimeouts = /* @__PURE__ */ new Map();
+var addToRemoveQueue = (toastId) => {
+  if (toastTimeouts.has(toastId)) {
+    return;
+  }
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId);
+    dispatch({
+      type: "REMOVE_TOAST",
+      toastId
+    });
+  }, TOAST_REMOVE_DELAY);
+  toastTimeouts.set(toastId, timeout);
+};
+var reducer = (state, action) => {
+  switch (action.type) {
+    case "ADD_TOAST":
+      console.log("adding toast case");
+      return {
+        ...state,
+        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT)
+      };
+    case "UPDATE_TOAST":
+      return {
+        ...state,
+        toasts: state.toasts.map(
+          (t) => t.id === action.toast.id ? { ...t, ...action.toast } : t
+        )
+      };
+    case "DISMISS_TOAST": {
+      const { toastId } = action;
+      if (toastId) {
+        addToRemoveQueue(toastId);
+      } else {
+        state.toasts.forEach((toast2) => {
+          addToRemoveQueue(toast2.id);
+        });
+      }
+      return {
+        ...state,
+        toasts: state.toasts.map(
+          (t) => t.id === toastId || toastId === void 0 ? { ...t, open: false } : t
+        )
+      };
+    }
+    case "REMOVE_TOAST":
+      if (action.toastId === void 0) {
+        return { ...state, toasts: [] };
+      }
+      return {
+        ...state,
+        toasts: state.toasts.filter((t) => t.id !== action.toastId)
+      };
+  }
+};
+var listeners = [];
+var memoryState = { toasts: [] };
+function dispatch(action) {
+  console.log("dispatching toast");
+  memoryState = reducer(memoryState, action);
+  listeners.forEach((listener) => {
+    console.log("mapping through listerners in dispathc");
+    listener(memoryState);
+  });
+}
+function toast({ ...props }) {
+  const id = genId();
+  const update = (props2) => dispatch({
+    type: "UPDATE_TOAST",
+    toast: { ...props2, id }
+  });
+  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id });
+  dispatch({
+    type: "ADD_TOAST",
+    toast: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: (open) => {
+        if (!open)
+          dismiss();
+      }
+    }
+  });
+  return {
+    id,
+    dismiss,
+    update
+  };
+}
+function useToast() {
+  const [state, setState] = React3.useState(memoryState);
+  React3.useEffect(() => {
+    console.log("useToast triggered in useEffect");
+    console.log("toast state", state);
+    console.log("listerners BEFORE", listeners);
+    console.log("TOAST: setState is ", setState);
+    listeners.push(setState);
+    return () => {
+      const index = listeners.indexOf(setState);
+      console.log("listerners AFTER", listeners);
+      if (index > -1) {
+        listeners.splice(index, 1);
+      }
+    };
+  }, [state]);
+  return {
+    ...state,
+    toast,
+    dismiss: (toastId) => dispatch({ type: "DISMISS_TOAST", toastId })
+  };
+}
+
 // hooks/useCarousel.ts
-import { useState as useState3, useRef as useRef2 } from "react";
+import { useState as useState4, useRef as useRef2 } from "react";
 
 // hooks/useDialogCarousel.ts
-import { useEffect as useEffect3, useState as useState4 } from "react";
+import { useEffect as useEffect4, useState as useState5 } from "react";
 import AutoHeight from "embla-carousel-auto-height";
 import useEmblaCarousel from "embla-carousel-react";
 var useDialogCarousel = (options) => {
@@ -31,7 +150,7 @@ var useDialogCarousel = (options) => {
     { loop: false, watchDrag: false, startIndex: 0, ...options },
     [AutoHeight({ destroyHeight: "fit", active: true })]
   );
-  const [canScrollPrev, setCanScrollPrev] = useState4(false);
+  const [canScrollPrev, setCanScrollPrev] = useState5(false);
   const checkCanScrollPrev = () => {
     if (emblaApi) {
       setCanScrollPrev(emblaApi.canScrollPrev());
@@ -49,7 +168,7 @@ var useDialogCarousel = (options) => {
       emblaApi.scrollPrev();
     }
   };
-  useEffect3(() => {
+  useEffect4(() => {
     checkCanScrollPrev();
     emblaApi && emblaApi.on("select", checkCanScrollPrev);
     return () => {
@@ -66,12 +185,12 @@ var useDialogCarousel = (options) => {
 };
 
 // hooks/useDialogSteps.ts
-import { useState as useState5, useEffect as useEffect4, useRef as useRef3 } from "react";
+import { useState as useState6, useEffect as useEffect5, useRef as useRef3 } from "react";
 var useMultiStepDialog = (initialStep, stepIds, setOpenDialog) => {
-  const [currentStep, setCurrentStep] = useState5(initialStep);
-  const [dialogHeight, setDialogHeight] = useState5(null);
+  const [currentStep, setCurrentStep] = useState6(initialStep);
+  const [dialogHeight, setDialogHeight] = useState6(null);
   const visibleStepRef = useRef3(null);
-  useEffect4(() => {
+  useEffect5(() => {
     if (visibleStepRef.current) {
       setDialogHeight(visibleStepRef.current.offsetHeight);
     }
@@ -102,13 +221,13 @@ var useMultiStepDialog = (initialStep, stepIds, setOpenDialog) => {
 };
 
 // hooks/useWindowSize.ts
-import { useEffect as useEffect5, useState as useState6 } from "react";
+import { useEffect as useEffect6, useState as useState7 } from "react";
 var useWindowSize = () => {
-  const [windowSize, setWindowSize] = useState6({
+  const [windowSize, setWindowSize] = useState7({
     width: void 0,
     height: void 0
   });
-  useEffect5(() => {
+  useEffect6(() => {
     function handleResize() {
       setWindowSize({
         width: window.innerWidth,
@@ -123,7 +242,7 @@ var useWindowSize = () => {
 };
 
 // hooks/useFocusWithin.ts
-import { useRef as useRef4, useState as useState7, useEffect as useEffect6 } from "react";
+import { useRef as useRef4, useState as useState8, useEffect as useEffect7 } from "react";
 function containsRelatedTarget(event) {
   if (event.currentTarget instanceof HTMLElement && event.relatedTarget instanceof HTMLElement) {
     return event.currentTarget.contains(event.relatedTarget);
@@ -135,7 +254,7 @@ function useFocusWithin({
   onFocus
 } = {}) {
   const ref = useRef4(null);
-  const [focused, _setFocused] = useState7(false);
+  const [focused, _setFocused] = useState8(false);
   const focusedRef = useRef4(false);
   const setFocused = (value) => {
     _setFocused(value);
@@ -153,7 +272,7 @@ function useFocusWithin({
       onBlur == null ? void 0 : onBlur(event);
     }
   };
-  useEffect6(() => {
+  useEffect7(() => {
     if (ref.current) {
       ref.current.addEventListener("focusin", handleFocusIn);
       ref.current.addEventListener("focusout", handleFocusOut);
@@ -169,7 +288,7 @@ function useFocusWithin({
 }
 
 // hooks/useMediaQuery.ts
-import { useState as useState8, useEffect as useEffect7, useRef as useRef5 } from "react";
+import { useState as useState9, useEffect as useEffect8, useRef as useRef5 } from "react";
 function attachMediaListener(query, callback) {
   try {
     query.addEventListener("change", callback);
@@ -191,11 +310,11 @@ function getInitialValue(query, initialValue) {
 function useMediaQuery(query, initialValue, { getInitialValueInEffect } = {
   getInitialValueInEffect: true
 }) {
-  const [matches, setMatches] = useState8(
+  const [matches, setMatches] = useState9(
     getInitialValueInEffect ? initialValue : getInitialValue(query, initialValue)
   );
   const queryRef = useRef5();
-  useEffect7(() => {
+  useEffect8(() => {
     if ("matchMedia" in window) {
       queryRef.current = window.matchMedia(query);
       setMatches(queryRef.current.matches);
@@ -210,16 +329,16 @@ function useMediaQuery(query, initialValue, { getInitialValueInEffect } = {
 }
 
 // hooks/useScrollPosition.ts
-import { useState as useState9, useEffect as useEffect8 } from "react";
+import { useState as useState10, useEffect as useEffect9 } from "react";
 
 // hooks/useTable.ts
-import { useState as useState10, useEffect as useEffect9 } from "react";
+import { useState as useState11, useEffect as useEffect10 } from "react";
 
 // hooks/useTabs.ts
-import { useEffect as useEffect10, useState as useState11 } from "react";
+import { useEffect as useEffect11, useState as useState12 } from "react";
 function useTabs(initialTab = "") {
-  const [activeTab, setActiveTab] = useState11(initialTab);
-  useEffect10(() => {
+  const [activeTab, setActiveTab] = useState12(initialTab);
+  useEffect11(() => {
     const handleHashChange = () => {
       const hash = window.location.hash.substring(1);
       setActiveTab(hash || initialTab);