@infinityfx/fluid/dist/components/feedback/halo.js

React UI library, using zero-runtime CSS-in-JS.

"use client";
import{jsx as t}from"react/jsx-runtime";import{combineClasses as e,classes as r,combineRefs as n}from"../../core/utils.js";import{Animatable as i}from"@infinityfx/lively";import{useTrigger as o,useLink as a}from"@infinityfx/lively/hooks";import{useRef as s,useEffect as c,isValidElement as l,Children as d,cloneElement as u}from"react";import{createStyles as p}from"../../core/style.js";const f=p("halo",{".container":{isolation:"isolate"},".halo":{position:"absolute",overflow:"hidden",borderRadius:"inherit",inset:0,minWidth:"100%",minHeight:"100%",transition:"opacity .25s",display:"flex",alignItems:"center",justifyContent:"center",pointerEvents:"none",opacity:0,zIndex:-1},'.halo[data-disabled="true"]':{display:"none"},'.halo[data-focused="true"]':{opacity:.25},"@media (pointer: fine)":{'.container:hover > .halo[data-hover="true"]':{opacity:.25}},".ripple":{minWidth:"280%",minHeight:"280%",aspectRatio:1,backgroundColor:"var(--f-clr-grey-500)",borderRadius:"9999px",zIndex:-1}});function m({children:p,cc:m={},color:h,hover:y=!0,disabled:g=!1,target:v,ref:b,...x}){const w=e(f,m),E=s(0),L=s(void 0),C=s(null),j=s(null),k=o(),A=a(1),N=a("0% 0%");if(c((()=>{const t=v?.current||C.current,e=new AbortController,r=e.signal;if(t)return t.addEventListener("mousedown",(()=>{A.set(.5,{duration:.1})}),{signal:r}),t.addEventListener("click",(t=>{if(A.set(1),k(),!j.current)return;const{x:e,y:r,width:n,height:i}=j.current.getBoundingClientRect();j.current.style.transition="none",j.current.offsetHeight,j.current.style.transition="";const o=2.8*Math.max(n,i),a=((t.clientX-e)/n-.5)*(n/o),s=((t.clientY-r)/i-.5)*(i/o);N.set(`${t.clientX?100*a:0}% ${t.clientY?100*s:0}%`)}),{signal:r}),t.addEventListener("touchstart",(()=>{clearTimeout(L.current),E.current=Date.now(),j.current&&(j.current.style.opacity="0.25")}),{signal:r}),window.addEventListener("touchend",(()=>{const t=Math.max(450-Date.now()+E.current,0);L.current=setTimeout((()=>{j.current&&(j.current.style.opacity="")}),t)}),{signal:r}),t.addEventListener("focusin",(()=>n()),{signal:r}),t.addEventListener("focusout",(()=>n()),{signal:r}),n(":focus"),()=>e.abort();function n(e=":focus-visible"){j.current&&t&&(j.current.dataset.focused=""+t.matches(e))}}),[]),p=Array.isArray(p)?p[0]:p,!l(p))return p;const R=d.toArray(p.props.children);return R.unshift(t("div",{ref:j,className:w.halo,"data-hover":y,"data-disabled":g,children:t(i,{animate:{translate:N,opacity:A},animations:{ripple:{opacity:[0,1],scale:[0,1],duration:.5,easing:"ease-in"}},triggers:[{on:k,name:"ripple",immediate:!0}],children:t("div",{className:w.ripple,style:{backgroundColor:h}})})},"halo")),u(p,{...x,ref:n(C,b,p.props.ref),className:r(p.props.className,w.container)},R)}export{m as default};
//# sourceMappingURL=halo.js.map