nextuiq
Version:
NextUIQ is a modern, lightweight, and developer-friendly UI component library for React and Next.js. Built with TypeScript and Tailwind CSS, it offers customizable, accessible, and performance-optimized components with built-in dark mode, theme customizat
2 lines (1 loc) • 2.83 kB
JavaScript
Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index46.js"),t=require("react"),n=require("react-dom"),o=require("./index38.js");function r(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e)for(const n in e)if("default"!==n){const o=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,o.get?o:{enumerable:!0,get:()=>e[n]})}return t.default=e,Object.freeze(t)}const i=r(t),s=i.createContext(null),c=i.forwardRef((({children:t,className:r,side:c="top",align:l="center",...u},d)=>{const a=i.useContext(s);if(!a)throw new Error("TooltipContent must be used within Tooltip");const{open:f,contentRef:h,triggerRef:p,content:w}=a,[m,g]=i.useState({top:0,left:0});return i.useEffect((()=>{if(f&&p.current){const e=()=>{const e=p.current?.getBoundingClientRect();if(!e)return;const t=h.current?.getBoundingClientRect();if(!t)return;const n=window.innerWidth,o=window.innerHeight;let r=0,i=0;switch(c){case"top":r=e.top-t.height-8,i=e.left+(e.width-t.width)/2,r<0&&(r=e.bottom+8);break;case"bottom":r=e.bottom+8,i=e.left+(e.width-t.width)/2,r+t.height>o&&(r=e.top-t.height-8);break;case"left":r=e.top+(e.height-t.height)/2,i=e.left-t.width-8,i<0&&(i=e.right+8);break;case"right":r=e.top+(e.height-t.height)/2,i=e.right+8,i+t.width>n&&(i=e.left-t.width-8)}i=Math.max(8,Math.min(i,n-t.width-8)),g({top:r+window.scrollY,left:i+window.scrollX})},t=()=>{requestAnimationFrame(e)};return e(),window.addEventListener("resize",e),window.addEventListener("scroll",t,!0),()=>{window.removeEventListener("resize",e),window.removeEventListener("scroll",t,!0)}}}),[f,c,l]),f&&"undefined"!=typeof document?n.createPortal(e.jsxRuntimeExports.jsx("div",{ref(e){h.current=e,"function"==typeof d?d(e):d&&(d.current=e)},role:"tooltip",style:{position:"absolute",top:m.top,left:m.left},className:o.cn("z-[9999] max-w-xs overflow-hidden rounded-md","bg-[oklch(var(--theme-popover))]","px-3 py-1.5","text-sm text-[oklch(var(--theme-popover-foreground))]","shadow-md","animate-in fade-in-0 zoom-in-95",r),...u,children:t||w}),document.body):null}));c.displayName="TooltipContent",exports.Tooltip=({children:t,content:n,disabled:o=!1,delayDuration:r=700,side:l="top",align:u="center"})=>{const[d,a]=i.useState(!1),f=i.useRef(null),h=i.useRef(null),p=i.useRef(void 0),w=i.useCallback((()=>{o||(p.current=window.setTimeout((()=>a(!0)),r))}),[o,r]),m=i.useCallback((()=>{p.current&&clearTimeout(p.current),a(!1)}),[]);return i.useEffect((()=>()=>{p.current&&clearTimeout(p.current)}),[]),e.jsxRuntimeExports.jsxs(s.Provider,{value:{open:d,setOpen:a,triggerRef:f,contentRef:h,content:n},children:[e.jsxRuntimeExports.jsx("div",{ref:f,onMouseEnter:w,onMouseLeave:m,onFocus:w,onBlur:m,children:t}),e.jsxRuntimeExports.jsx(c,{side:l,align:u,children:n})]})},exports.TooltipContent=c;
;