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

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

"use client";
import{jsxs as t,Fragment as e}from"react/jsx-runtime";import{useRef as r,useState as o,useEffect as i,isValidElement as n,cloneElement as a,createElement as c}from"react";import{combineClasses as s,combineRefs as l,classes as d}from"../../core/utils.js";import{createStyles as f}from"../../core/style.js";import{createPortal as m}from"react-dom";const p=f("indicator",{".indicator":{position:"absolute",minWidth:"1.5em",minHeight:"1.5em",lineHeight:1,borderRadius:"99px",backgroundColor:"var(--f-clr-accent-100)",border:"solid 2px transparent",translate:"50% -50%",pointerEvents:"none",fontSize:"var(--f-font-size-xxs)",fontWeight:600,color:"var(--f-clr-text-200)",display:"flex",alignItems:"center",justifyContent:"center",padding:".1em .3em",zIndex:99,WebkitBackfaceVisibility:"hidden"}});function u({children:f,cc:u={},content:h,color:g,outline:y,ref:b,...x}){const v=s(p,u),k=r(void 0),[C,M]=o(-1);if(i((()=>{if(k.current instanceof HTMLElement){const t=parseFloat(getComputedStyle(k.current).borderTopRightRadius)||0,e=Math.min(k.current.offsetWidth,k.current.offsetHeight)/2;M(Math.min(t,e))}}),[]),f=Array.isArray(f)?f[0]:f,!n(f))return f;const j=Math.max(Math.SQRT2*C-C-1,0);return t(e,{children:[a(f,{ref:l(b,f.props.ref,k)}),C>=0&&!1!==h&&m(c("div",{...x,key:"indicator",className:d(v.indicator,x.className),style:{...x.style,backgroundColor:g,borderColor:y,top:j,right:j}},"boolean"!=typeof h?h:null),k.current)]})}export{u as default};
//# sourceMappingURL=indicator.js.map