@webenza/ui 0.0.2 → 0.0.3

package/dist/index.js

@@ -10,11 +10,10 @@ var gsap__default = /*#__PURE__*/_interopDefault(gsap);
 
 // src/cursor/CursorFollower/CursorFollower.tsx
 var CursorFollower = ({
-  text = "",
-  // Changed from "PLAY" to empty string for generic usage
+  text = "PLAY",
   size = 90,
   borderWidth = 2,
-  borderColor = "#fff",
+  borderColor = "#ffffff",
   background = "transparent",
   fontFamily = "inherit",
   fontSize = 12,
@@ -25,11 +24,10 @@ var CursorFollower = ({
   hideScale = 0,
   enabled = true,
   blockSelectors = ["button", "a"],
-  // Added sensible defaults
   containerRef
 }) => {
   const cursorRef = react.useRef(null);
-  react.useEffect(() => {
+  react.useLayoutEffect(() => {
     if (!enabled) return;
     const cursor = cursorRef.current;
     if (!cursor) return;
@@ -58,6 +56,9 @@ var CursorFollower = ({
         targetX = e.clientX;
         targetY = e.clientY;
       }
+      if (!visible && !blocked) {
+        show();
+      }
     };
     const update = () => {
       currentX += (targetX - currentX) * lerp;
@@ -72,6 +73,23 @@ var CursorFollower = ({
     target.addEventListener("mouseenter", show);
     target.addEventListener("mouseleave", hide);
     gsap__default.default.ticker.add(update);
+    requestAnimationFrame(() => {
+      if (containerRef?.current) {
+        const bounds = containerRef.current.getBoundingClientRect();
+        targetX = bounds.width / 2;
+        targetY = bounds.height / 2;
+      } else {
+        targetX = window.innerWidth / 2;
+        targetY = window.innerHeight / 2;
+      }
+      currentX = targetX;
+      currentY = targetY;
+      gsap__default.default.set(cursor, {
+        x: currentX - size / 2,
+        y: currentY - size / 2
+      });
+      show();
+    });
     const cleanupFns = [];
     blockSelectors.forEach((selector) => {
       const elements = document.querySelectorAll(selector);
@@ -105,7 +123,8 @@ var CursorFollower = ({
     lerp,
     showScale,
     hideScale,
-    blockSelectors,
+    // Stabilize dependency: only re-run if the joined string changes
+    blockSelectors.join(","),
     containerRef
   ]);
   if (!enabled) return null;

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/cursor/CursorFollower/CursorFollower.tsx"],"names":["useRef","useEffect","gsap","jsx"],"mappings":"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","file":"index.js","sourcesContent":["import { useEffect, useRef } from \"react\";\r\nimport gsap from \"gsap\";\r\n\r\nexport type CursorFollowerProps = {\r\n    text?: string;\r\n\r\n    size?: number;\r\n    borderWidth?: number;\r\n    borderColor?: string;\r\n    background?: string;\r\n\r\n    fontFamily?: string;\r\n    fontSize?: number;\r\n    fontWeight?: number | string;\r\n    letterSpacing?: number;\r\n\r\n    lerp?: number;\r\n    showScale?: number;\r\n    hideScale?: number;\r\n\r\n    enabled?: boolean;\r\n    blockSelectors?: string[];\r\n    containerRef?: React.RefObject<HTMLElement>;\r\n};\r\n\r\nexport const CursorFollower = ({\r\n    text = \"\", // Changed from \"PLAY\" to empty string for generic usage\r\n\r\n    size = 90,\r\n    borderWidth = 2,\r\n    borderColor = \"#fff\",\r\n    background = \"transparent\",\r\n\r\n    fontFamily = \"inherit\",\r\n    fontSize = 12,\r\n    fontWeight = 400,\r\n    letterSpacing = 2,\r\n\r\n    lerp = 0.035,\r\n    showScale = 1,\r\n    hideScale = 0,\r\n\r\n    enabled = true,\r\n    blockSelectors = [\"button\", \"a\"], // Added sensible defaults\r\n    containerRef,\r\n}: CursorFollowerProps) => {\r\n    const cursorRef = useRef<HTMLDivElement>(null);\r\n\r\n    useEffect(() => {\r\n        if (!enabled) return;\r\n\r\n        const cursor = cursorRef.current;\r\n        if (!cursor) return;\r\n\r\n        let targetX = 0;\r\n        let targetY = 0;\r\n        let currentX = 0;\r\n        let currentY = 0;\r\n        let visible = false;\r\n        let blocked = false;\r\n\r\n        const show = () => {\r\n            if (visible || blocked) return;\r\n            visible = true;\r\n            gsap.to(cursor, { scale: showScale, opacity: 1, duration: 0.25 });\r\n        };\r\n\r\n        const hide = () => {\r\n            if (!visible) return;\r\n            visible = false;\r\n            gsap.to(cursor, { scale: hideScale, opacity: 0, duration: 0.25 });\r\n        };\r\n\r\n        const move = (e: MouseEvent) => {\r\n            if (containerRef?.current) {\r\n                const bounds = containerRef.current.getBoundingClientRect();\r\n                // Calculate relative coordinates\r\n                targetX = e.clientX - bounds.left;\r\n                targetY = e.clientY - bounds.top;\r\n            } else {\r\n                targetX = e.clientX;\r\n                targetY = e.clientY;\r\n            }\r\n        };\r\n\r\n        const update = () => {\r\n            currentX += (targetX - currentX) * lerp;\r\n            currentY += (targetY - currentY) * lerp;\r\n\r\n            gsap.set(cursor, {\r\n                x: currentX - size / 2,\r\n                y: currentY - size / 2,\r\n            });\r\n        };\r\n\r\n        // Event Listeners Source\r\n        const target = containerRef?.current || window;\r\n\r\n        target.addEventListener(\"mousemove\", move as any);\r\n        target.addEventListener(\"mouseenter\", show as any);\r\n        target.addEventListener(\"mouseleave\", hide as any);\r\n\r\n        gsap.ticker.add(update);\r\n\r\n        // Handle blocked selectors\r\n        const cleanupFns: (() => void)[] = [];\r\n\r\n        blockSelectors.forEach((selector) => {\r\n            const elements = document.querySelectorAll(selector);\r\n            elements.forEach((el) => {\r\n                const enter = () => {\r\n                    blocked = true;\r\n                    hide();\r\n                };\r\n                const leave = () => {\r\n                    blocked = false;\r\n                    show();\r\n                };\r\n\r\n                el.addEventListener(\"mouseenter\", enter);\r\n                el.addEventListener(\"mouseleave\", leave);\r\n\r\n                cleanupFns.push(() => {\r\n                    el.removeEventListener(\"mouseenter\", enter);\r\n                    el.removeEventListener(\"mouseleave\", leave);\r\n                });\r\n            });\r\n        });\r\n\r\n        return () => {\r\n            target.removeEventListener(\"mousemove\", move as any);\r\n            target.removeEventListener(\"mouseenter\", show as any);\r\n            target.removeEventListener(\"mouseleave\", hide as any);\r\n            gsap.ticker.remove(update);\r\n            cleanupFns.forEach((fn) => fn());\r\n        };\r\n    }, [\r\n        enabled,\r\n        size,\r\n        lerp,\r\n        showScale,\r\n        hideScale,\r\n        blockSelectors,\r\n        containerRef\r\n    ]);\r\n\r\n    if (!enabled) return null;\r\n\r\n    return (\r\n        <div\r\n            ref={cursorRef}\r\n            style={{\r\n                position: containerRef ? \"absolute\" : \"fixed\",\r\n                top: 0,\r\n                left: 0,\r\n                width: size,\r\n                height: size,\r\n                border: `${borderWidth}px solid ${borderColor}`,\r\n                background,\r\n                borderRadius: \"50%\",\r\n                display: \"flex\",\r\n                alignItems: \"center\",\r\n                justifyContent: \"center\",\r\n                pointerEvents: \"none\",\r\n                zIndex: 9999,\r\n                opacity: 0,\r\n                transform: \"scale(0)\",\r\n                fontFamily,\r\n                fontSize,\r\n                fontWeight,\r\n                letterSpacing,\r\n                textTransform: \"uppercase\",\r\n                color: borderColor,\r\n            }}\r\n        >\r\n            {text}\r\n        </div>\r\n    );\r\n};\r\n"]}
+{"version":3,"sources":["../src/cursor/CursorFollower/CursorFollower.tsx"],"names":["useRef","useLayoutEffect","gsap","jsx"],"mappings":"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","file":"index.js","sourcesContent":["import { useLayoutEffect, useRef } from \"react\";\r\nimport gsap from \"gsap\";\r\n\r\nexport type CursorFollowerProps = {\r\n    text?: string;\r\n\r\n    size?: number;\r\n    borderWidth?: number;\r\n    borderColor?: string;\r\n    background?: string;\r\n\r\n    fontFamily?: string;\r\n    fontSize?: number;\r\n    fontWeight?: number | string;\r\n    letterSpacing?: number;\r\n\r\n    lerp?: number;\r\n    showScale?: number;\r\n    hideScale?: number;\r\n\r\n    enabled?: boolean;\r\n    blockSelectors?: string[];\r\n    containerRef?: React.RefObject<HTMLElement>;\r\n};\r\n\r\nexport const CursorFollower = ({\r\n    text = \"PLAY\",\r\n    size = 90,\r\n    borderWidth = 2,\r\n    borderColor = \"#ffffff\",\r\n    background = \"transparent\",\r\n\r\n    fontFamily = \"inherit\",\r\n    fontSize = 12,\r\n    fontWeight = 400,\r\n    letterSpacing = 2,\r\n\r\n    lerp = 0.035,\r\n    showScale = 1,\r\n    hideScale = 0,\r\n\r\n    enabled = true,\r\n    blockSelectors = [\"button\", \"a\"],\r\n    containerRef,\r\n}: CursorFollowerProps) => {\r\n    const cursorRef = useRef<HTMLDivElement>(null);\r\n\r\n    useLayoutEffect(() => {\r\n        if (!enabled) return;\r\n\r\n        const cursor = cursorRef.current;\r\n        if (!cursor) return;\r\n\r\n        let targetX = 0;\r\n        let targetY = 0;\r\n        let currentX = 0;\r\n        let currentY = 0;\r\n        let visible = false;\r\n        let blocked = false;\r\n\r\n        const show = () => {\r\n            if (visible || blocked) return;\r\n            visible = true;\r\n            gsap.to(cursor, { scale: showScale, opacity: 1, duration: 0.25 });\r\n        };\r\n\r\n        const hide = () => {\r\n            if (!visible) return;\r\n            visible = false;\r\n            gsap.to(cursor, { scale: hideScale, opacity: 0, duration: 0.25 });\r\n        };\r\n\r\n        const move = (e: MouseEvent) => {\r\n            if (containerRef?.current) {\r\n                const bounds = containerRef.current.getBoundingClientRect();\r\n                targetX = e.clientX - bounds.left;\r\n                targetY = e.clientY - bounds.top;\r\n            } else {\r\n                targetX = e.clientX;\r\n                targetY = e.clientY;\r\n            }\r\n\r\n            // Ensure cursor is visible if it moves\r\n            if (!visible && !blocked) {\r\n                show();\r\n            }\r\n        };\r\n\r\n        const update = () => {\r\n            currentX += (targetX - currentX) * lerp;\r\n            currentY += (targetY - currentY) * lerp;\r\n\r\n            gsap.set(cursor, {\r\n                x: currentX - size / 2,\r\n                y: currentY - size / 2,\r\n            });\r\n        };\r\n\r\n        // Event Listeners Source\r\n        const target = containerRef?.current || window;\r\n\r\n        target.addEventListener(\"mousemove\", move as any);\r\n        target.addEventListener(\"mouseenter\", show as any);\r\n        target.addEventListener(\"mouseleave\", hide as any);\r\n\r\n        gsap.ticker.add(update);\r\n\r\n        // Force initial visibility and positioning\r\n        requestAnimationFrame(() => {\r\n            if (containerRef?.current) {\r\n                const bounds = containerRef.current.getBoundingClientRect();\r\n                targetX = bounds.width / 2;\r\n                targetY = bounds.height / 2;\r\n            } else {\r\n                targetX = window.innerWidth / 2;\r\n                targetY = window.innerHeight / 2;\r\n            }\r\n\r\n            // Set current position immediately to avoid lerp from 0,0\r\n            currentX = targetX;\r\n            currentY = targetY;\r\n\r\n            gsap.set(cursor, {\r\n                x: currentX - size / 2,\r\n                y: currentY - size / 2\r\n            });\r\n\r\n            show();\r\n        });\r\n\r\n        // Handle blocked selectors\r\n        const cleanupFns: (() => void)[] = [];\r\n\r\n        blockSelectors.forEach((selector) => {\r\n            const elements = document.querySelectorAll(selector);\r\n            elements.forEach((el) => {\r\n                const enter = () => {\r\n                    blocked = true;\r\n                    hide();\r\n                };\r\n                const leave = () => {\r\n                    blocked = false;\r\n                    show();\r\n                };\r\n\r\n                el.addEventListener(\"mouseenter\", enter);\r\n                el.addEventListener(\"mouseleave\", leave);\r\n\r\n                cleanupFns.push(() => {\r\n                    el.removeEventListener(\"mouseenter\", enter);\r\n                    el.removeEventListener(\"mouseleave\", leave);\r\n                });\r\n            });\r\n        });\r\n\r\n        return () => {\r\n            target.removeEventListener(\"mousemove\", move as any);\r\n            target.removeEventListener(\"mouseenter\", show as any);\r\n            target.removeEventListener(\"mouseleave\", hide as any);\r\n            gsap.ticker.remove(update);\r\n            cleanupFns.forEach((fn) => fn());\r\n        };\r\n    }, [\r\n        enabled,\r\n        size,\r\n        lerp,\r\n        showScale,\r\n        hideScale,\r\n        // Stabilize dependency: only re-run if the joined string changes\r\n        blockSelectors.join(\",\"),\r\n        containerRef\r\n    ]);\r\n\r\n    if (!enabled) return null;\r\n\r\n    return (\r\n        <div\r\n            ref={cursorRef}\r\n            style={{\r\n                position: containerRef ? \"absolute\" : \"fixed\",\r\n                top: 0,\r\n                left: 0,\r\n                width: size,\r\n                height: size,\r\n                border: `${borderWidth}px solid ${borderColor}`,\r\n                background,\r\n                borderRadius: \"50%\",\r\n                display: \"flex\",\r\n                alignItems: \"center\",\r\n                justifyContent: \"center\",\r\n                pointerEvents: \"none\",\r\n                zIndex: 9999,\r\n                opacity: 0,\r\n                transform: \"scale(0)\",\r\n                fontFamily,\r\n                fontSize,\r\n                fontWeight,\r\n                letterSpacing,\r\n                textTransform: \"uppercase\",\r\n                color: borderColor,\r\n            }}\r\n        >\r\n            {text}\r\n        </div>\r\n    );\r\n};\r\n"]}

package/dist/index.mjs

@@ -1,14 +1,13 @@
-import { useRef, useEffect } from 'react';
+import { useRef, useLayoutEffect } from 'react';
 import gsap from 'gsap';
 import { jsx } from 'react/jsx-runtime';
 
 // src/cursor/CursorFollower/CursorFollower.tsx
 var CursorFollower = ({
-  text = "",
-  // Changed from "PLAY" to empty string for generic usage
+  text = "PLAY",
   size = 90,
   borderWidth = 2,
-  borderColor = "#fff",
+  borderColor = "#ffffff",
   background = "transparent",
   fontFamily = "inherit",
   fontSize = 12,
@@ -19,11 +18,10 @@ var CursorFollower = ({
   hideScale = 0,
   enabled = true,
   blockSelectors = ["button", "a"],
-  // Added sensible defaults
   containerRef
 }) => {
   const cursorRef = useRef(null);
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (!enabled) return;
     const cursor = cursorRef.current;
     if (!cursor) return;
@@ -52,6 +50,9 @@ var CursorFollower = ({
         targetX = e.clientX;
         targetY = e.clientY;
       }
+      if (!visible && !blocked) {
+        show();
+      }
     };
     const update = () => {
       currentX += (targetX - currentX) * lerp;
@@ -66,6 +67,23 @@ var CursorFollower = ({
     target.addEventListener("mouseenter", show);
     target.addEventListener("mouseleave", hide);
     gsap.ticker.add(update);
+    requestAnimationFrame(() => {
+      if (containerRef?.current) {
+        const bounds = containerRef.current.getBoundingClientRect();
+        targetX = bounds.width / 2;
+        targetY = bounds.height / 2;
+      } else {
+        targetX = window.innerWidth / 2;
+        targetY = window.innerHeight / 2;
+      }
+      currentX = targetX;
+      currentY = targetY;
+      gsap.set(cursor, {
+        x: currentX - size / 2,
+        y: currentY - size / 2
+      });
+      show();
+    });
     const cleanupFns = [];
     blockSelectors.forEach((selector) => {
       const elements = document.querySelectorAll(selector);
@@ -99,7 +117,8 @@ var CursorFollower = ({
     lerp,
     showScale,
     hideScale,
-    blockSelectors,
+    // Stabilize dependency: only re-run if the joined string changes
+    blockSelectors.join(","),
     containerRef
   ]);
   if (!enabled) return null;

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/cursor/CursorFollower/CursorFollower.tsx"],"names":[],"mappings":"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","file":"index.mjs","sourcesContent":["import { useEffect, useRef } from \"react\";\r\nimport gsap from \"gsap\";\r\n\r\nexport type CursorFollowerProps = {\r\n    text?: string;\r\n\r\n    size?: number;\r\n    borderWidth?: number;\r\n    borderColor?: string;\r\n    background?: string;\r\n\r\n    fontFamily?: string;\r\n    fontSize?: number;\r\n    fontWeight?: number | string;\r\n    letterSpacing?: number;\r\n\r\n    lerp?: number;\r\n    showScale?: number;\r\n    hideScale?: number;\r\n\r\n    enabled?: boolean;\r\n    blockSelectors?: string[];\r\n    containerRef?: React.RefObject<HTMLElement>;\r\n};\r\n\r\nexport const CursorFollower = ({\r\n    text = \"\", // Changed from \"PLAY\" to empty string for generic usage\r\n\r\n    size = 90,\r\n    borderWidth = 2,\r\n    borderColor = \"#fff\",\r\n    background = \"transparent\",\r\n\r\n    fontFamily = \"inherit\",\r\n    fontSize = 12,\r\n    fontWeight = 400,\r\n    letterSpacing = 2,\r\n\r\n    lerp = 0.035,\r\n    showScale = 1,\r\n    hideScale = 0,\r\n\r\n    enabled = true,\r\n    blockSelectors = [\"button\", \"a\"], // Added sensible defaults\r\n    containerRef,\r\n}: CursorFollowerProps) => {\r\n    const cursorRef = useRef<HTMLDivElement>(null);\r\n\r\n    useEffect(() => {\r\n        if (!enabled) return;\r\n\r\n        const cursor = cursorRef.current;\r\n        if (!cursor) return;\r\n\r\n        let targetX = 0;\r\n        let targetY = 0;\r\n        let currentX = 0;\r\n        let currentY = 0;\r\n        let visible = false;\r\n        let blocked = false;\r\n\r\n        const show = () => {\r\n            if (visible || blocked) return;\r\n            visible = true;\r\n            gsap.to(cursor, { scale: showScale, opacity: 1, duration: 0.25 });\r\n        };\r\n\r\n        const hide = () => {\r\n            if (!visible) return;\r\n            visible = false;\r\n            gsap.to(cursor, { scale: hideScale, opacity: 0, duration: 0.25 });\r\n        };\r\n\r\n        const move = (e: MouseEvent) => {\r\n            if (containerRef?.current) {\r\n                const bounds = containerRef.current.getBoundingClientRect();\r\n                // Calculate relative coordinates\r\n                targetX = e.clientX - bounds.left;\r\n                targetY = e.clientY - bounds.top;\r\n            } else {\r\n                targetX = e.clientX;\r\n                targetY = e.clientY;\r\n            }\r\n        };\r\n\r\n        const update = () => {\r\n            currentX += (targetX - currentX) * lerp;\r\n            currentY += (targetY - currentY) * lerp;\r\n\r\n            gsap.set(cursor, {\r\n                x: currentX - size / 2,\r\n                y: currentY - size / 2,\r\n            });\r\n        };\r\n\r\n        // Event Listeners Source\r\n        const target = containerRef?.current || window;\r\n\r\n        target.addEventListener(\"mousemove\", move as any);\r\n        target.addEventListener(\"mouseenter\", show as any);\r\n        target.addEventListener(\"mouseleave\", hide as any);\r\n\r\n        gsap.ticker.add(update);\r\n\r\n        // Handle blocked selectors\r\n        const cleanupFns: (() => void)[] = [];\r\n\r\n        blockSelectors.forEach((selector) => {\r\n            const elements = document.querySelectorAll(selector);\r\n            elements.forEach((el) => {\r\n                const enter = () => {\r\n                    blocked = true;\r\n                    hide();\r\n                };\r\n                const leave = () => {\r\n                    blocked = false;\r\n                    show();\r\n                };\r\n\r\n                el.addEventListener(\"mouseenter\", enter);\r\n                el.addEventListener(\"mouseleave\", leave);\r\n\r\n                cleanupFns.push(() => {\r\n                    el.removeEventListener(\"mouseenter\", enter);\r\n                    el.removeEventListener(\"mouseleave\", leave);\r\n                });\r\n            });\r\n        });\r\n\r\n        return () => {\r\n            target.removeEventListener(\"mousemove\", move as any);\r\n            target.removeEventListener(\"mouseenter\", show as any);\r\n            target.removeEventListener(\"mouseleave\", hide as any);\r\n            gsap.ticker.remove(update);\r\n            cleanupFns.forEach((fn) => fn());\r\n        };\r\n    }, [\r\n        enabled,\r\n        size,\r\n        lerp,\r\n        showScale,\r\n        hideScale,\r\n        blockSelectors,\r\n        containerRef\r\n    ]);\r\n\r\n    if (!enabled) return null;\r\n\r\n    return (\r\n        <div\r\n            ref={cursorRef}\r\n            style={{\r\n                position: containerRef ? \"absolute\" : \"fixed\",\r\n                top: 0,\r\n                left: 0,\r\n                width: size,\r\n                height: size,\r\n                border: `${borderWidth}px solid ${borderColor}`,\r\n                background,\r\n                borderRadius: \"50%\",\r\n                display: \"flex\",\r\n                alignItems: \"center\",\r\n                justifyContent: \"center\",\r\n                pointerEvents: \"none\",\r\n                zIndex: 9999,\r\n                opacity: 0,\r\n                transform: \"scale(0)\",\r\n                fontFamily,\r\n                fontSize,\r\n                fontWeight,\r\n                letterSpacing,\r\n                textTransform: \"uppercase\",\r\n                color: borderColor,\r\n            }}\r\n        >\r\n            {text}\r\n        </div>\r\n    );\r\n};\r\n"]}
+{"version":3,"sources":["../src/cursor/CursorFollower/CursorFollower.tsx"],"names":[],"mappings":"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","file":"index.mjs","sourcesContent":["import { useLayoutEffect, useRef } from \"react\";\r\nimport gsap from \"gsap\";\r\n\r\nexport type CursorFollowerProps = {\r\n    text?: string;\r\n\r\n    size?: number;\r\n    borderWidth?: number;\r\n    borderColor?: string;\r\n    background?: string;\r\n\r\n    fontFamily?: string;\r\n    fontSize?: number;\r\n    fontWeight?: number | string;\r\n    letterSpacing?: number;\r\n\r\n    lerp?: number;\r\n    showScale?: number;\r\n    hideScale?: number;\r\n\r\n    enabled?: boolean;\r\n    blockSelectors?: string[];\r\n    containerRef?: React.RefObject<HTMLElement>;\r\n};\r\n\r\nexport const CursorFollower = ({\r\n    text = \"PLAY\",\r\n    size = 90,\r\n    borderWidth = 2,\r\n    borderColor = \"#ffffff\",\r\n    background = \"transparent\",\r\n\r\n    fontFamily = \"inherit\",\r\n    fontSize = 12,\r\n    fontWeight = 400,\r\n    letterSpacing = 2,\r\n\r\n    lerp = 0.035,\r\n    showScale = 1,\r\n    hideScale = 0,\r\n\r\n    enabled = true,\r\n    blockSelectors = [\"button\", \"a\"],\r\n    containerRef,\r\n}: CursorFollowerProps) => {\r\n    const cursorRef = useRef<HTMLDivElement>(null);\r\n\r\n    useLayoutEffect(() => {\r\n        if (!enabled) return;\r\n\r\n        const cursor = cursorRef.current;\r\n        if (!cursor) return;\r\n\r\n        let targetX = 0;\r\n        let targetY = 0;\r\n        let currentX = 0;\r\n        let currentY = 0;\r\n        let visible = false;\r\n        let blocked = false;\r\n\r\n        const show = () => {\r\n            if (visible || blocked) return;\r\n            visible = true;\r\n            gsap.to(cursor, { scale: showScale, opacity: 1, duration: 0.25 });\r\n        };\r\n\r\n        const hide = () => {\r\n            if (!visible) return;\r\n            visible = false;\r\n            gsap.to(cursor, { scale: hideScale, opacity: 0, duration: 0.25 });\r\n        };\r\n\r\n        const move = (e: MouseEvent) => {\r\n            if (containerRef?.current) {\r\n                const bounds = containerRef.current.getBoundingClientRect();\r\n                targetX = e.clientX - bounds.left;\r\n                targetY = e.clientY - bounds.top;\r\n            } else {\r\n                targetX = e.clientX;\r\n                targetY = e.clientY;\r\n            }\r\n\r\n            // Ensure cursor is visible if it moves\r\n            if (!visible && !blocked) {\r\n                show();\r\n            }\r\n        };\r\n\r\n        const update = () => {\r\n            currentX += (targetX - currentX) * lerp;\r\n            currentY += (targetY - currentY) * lerp;\r\n\r\n            gsap.set(cursor, {\r\n                x: currentX - size / 2,\r\n                y: currentY - size / 2,\r\n            });\r\n        };\r\n\r\n        // Event Listeners Source\r\n        const target = containerRef?.current || window;\r\n\r\n        target.addEventListener(\"mousemove\", move as any);\r\n        target.addEventListener(\"mouseenter\", show as any);\r\n        target.addEventListener(\"mouseleave\", hide as any);\r\n\r\n        gsap.ticker.add(update);\r\n\r\n        // Force initial visibility and positioning\r\n        requestAnimationFrame(() => {\r\n            if (containerRef?.current) {\r\n                const bounds = containerRef.current.getBoundingClientRect();\r\n                targetX = bounds.width / 2;\r\n                targetY = bounds.height / 2;\r\n            } else {\r\n                targetX = window.innerWidth / 2;\r\n                targetY = window.innerHeight / 2;\r\n            }\r\n\r\n            // Set current position immediately to avoid lerp from 0,0\r\n            currentX = targetX;\r\n            currentY = targetY;\r\n\r\n            gsap.set(cursor, {\r\n                x: currentX - size / 2,\r\n                y: currentY - size / 2\r\n            });\r\n\r\n            show();\r\n        });\r\n\r\n        // Handle blocked selectors\r\n        const cleanupFns: (() => void)[] = [];\r\n\r\n        blockSelectors.forEach((selector) => {\r\n            const elements = document.querySelectorAll(selector);\r\n            elements.forEach((el) => {\r\n                const enter = () => {\r\n                    blocked = true;\r\n                    hide();\r\n                };\r\n                const leave = () => {\r\n                    blocked = false;\r\n                    show();\r\n                };\r\n\r\n                el.addEventListener(\"mouseenter\", enter);\r\n                el.addEventListener(\"mouseleave\", leave);\r\n\r\n                cleanupFns.push(() => {\r\n                    el.removeEventListener(\"mouseenter\", enter);\r\n                    el.removeEventListener(\"mouseleave\", leave);\r\n                });\r\n            });\r\n        });\r\n\r\n        return () => {\r\n            target.removeEventListener(\"mousemove\", move as any);\r\n            target.removeEventListener(\"mouseenter\", show as any);\r\n            target.removeEventListener(\"mouseleave\", hide as any);\r\n            gsap.ticker.remove(update);\r\n            cleanupFns.forEach((fn) => fn());\r\n        };\r\n    }, [\r\n        enabled,\r\n        size,\r\n        lerp,\r\n        showScale,\r\n        hideScale,\r\n        // Stabilize dependency: only re-run if the joined string changes\r\n        blockSelectors.join(\",\"),\r\n        containerRef\r\n    ]);\r\n\r\n    if (!enabled) return null;\r\n\r\n    return (\r\n        <div\r\n            ref={cursorRef}\r\n            style={{\r\n                position: containerRef ? \"absolute\" : \"fixed\",\r\n                top: 0,\r\n                left: 0,\r\n                width: size,\r\n                height: size,\r\n                border: `${borderWidth}px solid ${borderColor}`,\r\n                background,\r\n                borderRadius: \"50%\",\r\n                display: \"flex\",\r\n                alignItems: \"center\",\r\n                justifyContent: \"center\",\r\n                pointerEvents: \"none\",\r\n                zIndex: 9999,\r\n                opacity: 0,\r\n                transform: \"scale(0)\",\r\n                fontFamily,\r\n                fontSize,\r\n                fontWeight,\r\n                letterSpacing,\r\n                textTransform: \"uppercase\",\r\n                color: borderColor,\r\n            }}\r\n        >\r\n            {text}\r\n        </div>\r\n    );\r\n};\r\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webenza/ui",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Internal UI and animation components for Webenza",
   "private": false,
   "sideEffects": false,
@@ -40,5 +40,8 @@
     "@types/react-dom": "^19.2.3",
     "tsup": "^8.5.1",
     "typescript": "^5.9.3"
+  },
+  "dependencies": {
+    "@webenza/ui": "^0.0.3"
   }
 }