@aristobyte-ui/anchor 0.0.0-beta.1

package/utils/Portal.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+import * as React from "react";
+import { createPortal } from "react-dom";
+
+export const Portal: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  const [mounted, setMounted] = React.useState(false);
+
+  React.useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted || typeof window === "undefined") return null;
+  return createPortal(children, document.body);
+};

package/utils/icons.ts

@@ -0,0 +1,13 @@
+import Copy from "../assets/svg/i_Copy.svg";
+import Error from "../assets/svg/i_Error.svg";
+import Info from "../assets/svg/i_Info.svg";
+import Success from "../assets/svg/i_Success.svg";
+import Warning from "../assets/svg/i_Warning.svg";
+
+export const Icons = {
+  Copy,
+  Error,
+  Info,
+  Success,
+  Warning,
+};

package/utils/index.ts

@@ -0,0 +1,2 @@
+export { renderRipple, type RippleParams } from "./ripple";
+export { Icons } from "./icons";

package/utils/ripple.tsx

@@ -0,0 +1,54 @@
+type RippleParamsRef = HTMLButtonElement | HTMLAnchorElement;
+
+export type RippleParams<HTMLElementType extends RippleParamsRef> = {
+  ref: React.RefObject<HTMLElementType | null>;
+  clientX: number;
+  clientY: number;
+};
+
+export const renderRipple = <HTMLElementType extends RippleParamsRef>({
+  ref,
+  clientX,
+  clientY,
+}: RippleParams<HTMLElementType>) => {
+  const button = ref.current;
+  if (!button) return;
+
+  const circle = document.createElement("span");
+  const diameter = Math.max(button.clientWidth, button.clientHeight);
+  const radius = diameter / 2;
+
+  circle.id = "ripple";
+
+  const style = document.createElement("style");
+  style.innerHTML = `
+      #ripple {
+        animation: ripple 300ms linear;
+        background-color: rgba(255, 255, 255, 0.3);
+        border-radius: 50%;
+        height: ${diameter}px;
+        left: ${clientX - button.getBoundingClientRect().left - radius}px;
+        pointer-events: none;
+        position: absolute;
+        top: ${clientY - button.getBoundingClientRect().top - radius}px;
+        transform: scale(0);
+        width: ${diameter}px;
+        z-index: 0;
+      }
+      
+      @keyframes ripple {
+        to {
+          opacity: 0;
+          transform: scale(2);
+        }
+      }
+    `;
+
+  button.appendChild(style);
+  button.appendChild(circle);
+
+  circle.addEventListener("animationend", () => {
+    circle.remove();
+    style.remove();
+  });
+};