@yhattav/react-component-cursor/dist/index.js

A lightweight, TypeScript-first React library for creating beautiful custom cursors with SSR support, smooth animations, and zero dependencies. Perfect for interactive websites, games, and creative applications.

'use strict';var chunk2SU5TQC4_js=require('./chunk-2SU5TQC4.js'),o=require('react'),reactDom=require('react-dom');function _interopNamespace(e){if(e&&e.__esModule)return e;var n=Object.create(null);if(e){Object.keys(e).forEach(function(k){if(k!=='default'){var d=Object.getOwnPropertyDescriptor(e,k);Object.defineProperty(n,k,d.get?d:{enumerable:true,get:function(){return e[k]}});}})}n.default=e;return Object.freeze(n)}var o__namespace=/*#__PURE__*/_interopNamespace(o);function k(t,e,a,m,b=0){let[r,u]=o.useState({x:null,y:null}),[s,d]=o.useState({x:null,y:null}),p=o.useRef(false),v=s.x!==null&&s.y!==null,x=o.useCallback(i=>{let C={x:i.x+a,y:i.y+m};if(e!=null&&e.current){let y=e.current.getBoundingClientRect(),$=i.x>=y.left&&i.x<=y.right&&i.y>=y.top&&i.y<=y.bottom;d($?C:{x:null,y:null});}else d(C);},[e,a,m]),h=o.useCallback(i=>{x(i);},[x]);return o.useEffect(()=>{if(!(e!=null&&e.current))return;let i=e.current,C=()=>{d({x:null,y:null});};return i.addEventListener("mouseleave",C),()=>{i.removeEventListener("mouseleave",C);}},[e]),o.useEffect(()=>{let i=false,C={unsubscribe:null};return import('./CursorCoordinator-C67VG6JX.js').then(({CursorCoordinator:y})=>{if(i)return;let $=y.getInstance();C.unsubscribe=$.subscribe({id:t,onPositionChange:h,throttleMs:b});}).catch(y=>{console.warn("Failed to load cursor coordinator:",y);}),()=>{var y;i=true,(y=C.unsubscribe)==null||y.call(C);}},[t,b,h]),o.useEffect(()=>{s.x!==null&&s.y!==null&&!p.current&&(u(s),p.current=true);},[s]),{position:r,setPosition:u,targetPosition:s,isVisible:v}}var K=.1;function O(t,e,a){let m=o.useCallback(r=>{if(r.x===null||r.y===null||t.x===null||t.y===null)return r;let u=t.x-r.x,s=t.y-r.y;return Math.abs(u)<K&&Math.abs(s)<K?r:{x:r.x+u/e,y:r.y+s/e}},[t.x,t.y,e]),b=o.useCallback(()=>{let r,u=()=>{a(s=>{let d=m(s);return d.x===s.x&&d.y===s.y?s:d}),r=requestAnimationFrame(u);};return r=requestAnimationFrame(u),()=>{r&&cancelAnimationFrame(r);}},[m,a,t]);o.useEffect(()=>{var s;if(chunk2SU5TQC4_js.b())return;let r=typeof window!="undefined"&&window.matchMedia?window.matchMedia("(prefers-reduced-motion: reduce)"):null,u=(s=r==null?void 0:r.matches)!=null?s:false;if(e<=1||u){a(t);return}return b()},[e,t.x,t.y,b,a]);}var ne="0.3s",T="cursorFadeIn",ie=9999,ue=({position:t,show:e})=>{return null},ae=(t,e)=>{var u,s,d,p,v,x;if(t.id!==e.id||t.enabled!==e.enabled||t.className!==e.className||t.zIndex!==e.zIndex||t.smoothness!==e.smoothness||t.centered!==e.centered||t.throttleMs!==e.throttleMs||t.showDevIndicator!==e.showDevIndicator||((u=t.offset)==null?void 0:u.x)!==((s=e.offset)==null?void 0:s.x)||((d=t.offset)==null?void 0:d.y)!==((p=e.offset)==null?void 0:p.y)||((v=t.containerRef)==null?void 0:v.current)!==((x=e.containerRef)==null?void 0:x.current))return  false;let a=t.style||{},m=e.style||{},b=Object.keys(a),r=Object.keys(m);if(b.length!==r.length)return  false;for(let h of b)if(a[h]!==m[h])return  false;return !(t.onMove!==e.onMove||t.onVisibilityChange!==e.onVisibilityChange||t.children!==e.children)},le=()=>`cursor-${Math.random().toString(36).substr(2,9)}-${Date.now().toString(36)}`,W=o__namespace.memo(({id:t,enabled:e=true,children:a,className:m="",style:b={},zIndex:r=ie,offset:u={x:0,y:0},smoothness:s=1,containerRef:d,centered:p=true,throttleMs:v=0,showDevIndicator:x=true,onMove:h,onVisibilityChange:i,"data-testid":C,role:y,"aria-label":$})=>{let R=o__namespace.useMemo(()=>t||le(),[t]);let V=o__namespace.useMemo(()=>({x:typeof u=="object"?u.x:0,y:typeof u=="object"?u.y:0}),[u]),E=o__namespace.useMemo(()=>chunk2SU5TQC4_js.d(),[]),G=k(R,d,V.x,V.y,v),{position:c,setPosition:Z,targetPosition:J,isVisible:I}=G;O(J,s,Z);let[A,X]=o__namespace.useState(null),H=o__namespace.useCallback(()=>{let n=chunk2SU5TQC4_js.f();if(!n)return null;let f=n.getElementById("cursor-container");if(f)return f.style.zIndex=r.toString(),f;let l=n.createElement("div");return l.id="cursor-container",l.style.position="fixed",l.style.top="0",l.style.left="0",l.style.pointerEvents="none",l.style.zIndex=r.toString(),n.body.appendChild(l),l},[r]);o__namespace.useEffect(()=>(X(H()),()=>{let n=chunk2SU5TQC4_js.f();if(!n)return;let f=n.getElementById("cursor-container");if(f&&f.children.length===0)try{f.parentNode&&f.parentNode.removeChild(f);}catch(l){console.warn("Portal container cleanup failed:",l);}}),[H]);let j=o__namespace.useMemo(()=>{let n=p?" translate(-50%, -50%)":"";return `
        @keyframes ${T} {
          from {
            opacity: 0;
            transform: translate(var(--cursor-x), var(--cursor-y))${n} scale(0.8);
          }
          to {
            opacity: 1;
            transform: translate(var(--cursor-x), var(--cursor-y))${n} scale(1);
          }
        }
        
        @media (prefers-reduced-motion: reduce) {
          @keyframes ${T} {
            from {
              opacity: 0;
              transform: translate(var(--cursor-x), var(--cursor-y))${n} scale(1);
            }
            to {
              opacity: 1;
              transform: translate(var(--cursor-x), var(--cursor-y))${n} scale(1);
            }
          }
        }
      `},[p]);o__namespace.useEffect(()=>{let n=chunk2SU5TQC4_js.f();if(!n)return;let f=`cursor-style-${R}`,l=n.getElementById(f);l&&l.remove();let N=n.createElement("style");return N.id=f,N.textContent=j,n.head.appendChild(N),()=>{let g=n.getElementById(f);if(g)try{g.remove();}catch(w){console.warn("Style cleanup failed:",w);}}},[R,j]);let L=o__namespace.useCallback(()=>{if(c.x!==null&&c.y!==null&&typeof h=="function"){let n={x:c.x,y:c.y};h(n);}},[c.x,c.y,h]);o__namespace.useEffect(()=>{L();},[L]);let _=o__namespace.useCallback(()=>{typeof i=="function"&&i(e&&I,e?"container":"disabled");},[e,I,i]);if(o__namespace.useEffect(()=>{_();},[_]),o__namespace.useEffect(()=>{E&&typeof i=="function"&&i(false,"touch");},[E,i]),E)return null;let Q=o__namespace.useMemo(()=>{var l,N,g,w;let n=`translate(${(l=c.x)!=null?l:0}px, ${(N=c.y)!=null?N:0}px)`;return chunk2SU5TQC4_js.a({position:"fixed",top:0,left:0,transform:n+(p?" translate(-50%, -50%)":""),pointerEvents:"none",zIndex:r,opacity:1,visibility:"visible",animation:`${T} ${ne} ease-out`,"--cursor-x":`${(g=c.x)!=null?g:0}px`,"--cursor-y":`${(w=c.y)!=null?w:0}px`},b)},[c.x,c.y,r,p,b]),Y=o__namespace.useMemo(()=>`
      #cursor-container {
        pointer-events: none !important;
      }
    `,[]);return !chunk2SU5TQC4_js.b()&&e&&I&&c.x!==null&&c.y!==null&&A?o__namespace.createElement(o__namespace.Fragment,null,o__namespace.createElement("style",{id:`cursor-style-global-${R}`},Y),reactDom.createPortal(o__namespace.createElement(o__namespace.Fragment,{key:`cursor-${R}`},o__namespace.createElement("div",{id:`custom-cursor-${R}`,style:Q,className:m,"aria-hidden":"true","data-testid":C,role:y,"aria-label":$},a),o__namespace.createElement(ue,{position:c,show:x})),A)):null},ae);W.displayName="CustomCursor";var ce=W;Object.defineProperty(exports,"browserOnly",{enumerable:true,get:function(){return chunk2SU5TQC4_js.e}});Object.defineProperty(exports,"isBrowser",{enumerable:true,get:function(){return chunk2SU5TQC4_js.c}});Object.defineProperty(exports,"isSSR",{enumerable:true,get:function(){return chunk2SU5TQC4_js.b}});Object.defineProperty(exports,"safeDocument",{enumerable:true,get:function(){return chunk2SU5TQC4_js.f}});Object.defineProperty(exports,"safeWindow",{enumerable:true,get:function(){return chunk2SU5TQC4_js.g}});exports.CustomCursor=ce;//# sourceMappingURL=index.js.map
//# sourceMappingURL=index.js.map