4b:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4c:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4d:T1de1,import { forwardRef, useState, useRef, useEffect, useCallback, useId, type ReactNode, } from 'react' import { createPortal } from 'react-dom' import { cn } from '@/lib/utils' export type TooltipPosition = 'top' | 'right' | 'bottom' | 'left' export interface TooltipProps { /** Content to display inside the tooltip */ content: ReactNode /** The element that triggers the tooltip */ children: ReactNode /** Preferred position of the tooltip relative to the trigger */ position?: TooltipPosition /** Delay in ms before showing the tooltip */ showDelay?: number /** Delay in ms before hiding the tooltip */ hideDelay?: number /** Whether the tooltip is disabled */ disabled?: boolean /** Show arrow indicator */ arrow?: boolean /** Additional class names for the tooltip popup */ className?: string } interface Coords { top: number left: number actualPosition: TooltipPosition } function getCoords( triggerRect: DOMRect, tooltipRect: DOMRect, preferred: TooltipPosition, gap: number ): Coords { const viewport = { width: window.innerWidth, height: window.innerHeight, } const positions: Record = { top: { top: triggerRect.top - tooltipRect.height - gap, left: triggerRect.left + (triggerRect.width - tooltipRect.width) / 2, }, bottom: { top: triggerRect.bottom + gap, left: triggerRect.left + (triggerRect.width - tooltipRect.width) / 2, }, left: { top: triggerRect.top + (triggerRect.height - tooltipRect.height) / 2, left: triggerRect.left - tooltipRect.width - gap, }, right: { top: triggerRect.top + (triggerRect.height - tooltipRect.height) / 2, left: triggerRect.right + gap, }, } const fits = (pos: TooltipPosition): boolean => { const { top, left } = positions[pos] return ( top >= 0 && left >= 0 && top + tooltipRect.height <= viewport.height && left + tooltipRect.width <= viewport.width ) } const fallbackOrder: Record = { top: ['top', 'bottom', 'right', 'left'], bottom: ['bottom', 'top', 'right', 'left'], left: ['left', 'right', 'top', 'bottom'], right: ['right', 'left', 'top', 'bottom'], } const actualPosition = fallbackOrder[preferred].find(fits) ?? preferred const coords = positions[actualPosition] const pad = 8 return { top: Math.max(pad, Math.min(coords.top, viewport.height - tooltipRect.height - pad)), left: Math.max(pad, Math.min(coords.left, viewport.width - tooltipRect.width - pad)), actualPosition, } } export const Tooltip = forwardRef( ( { content, children, position = 'top', showDelay = 200, hideDelay = 0, disabled = false, arrow = true, className, }, ref ) => { const [visible, setVisible] = useState(false) const [coords, setCoords] = useState(null) const triggerRef = useRef(null) const tooltipRef = useRef(null) const showTimeout = useRef | undefined>(undefined) const hideTimeout = useRef | undefined>(undefined) const tooltipId = useId() const updatePosition = useCallback(() => { const trigger = triggerRef.current const tooltip = tooltipRef.current if (!trigger || !tooltip) return const triggerRect = trigger.getBoundingClientRect() const tooltipRect = tooltip.getBoundingClientRect() setCoords(getCoords(triggerRect, tooltipRect, position, 8)) }, [position]) const show = useCallback(() => { if (disabled) return if (hideTimeout.current !== undefined) clearTimeout(hideTimeout.current) showTimeout.current = setTimeout(() => { setVisible(true) }, showDelay) }, [disabled, showDelay]) const hide = useCallback(() => { if (showTimeout.current !== undefined) clearTimeout(showTimeout.current) hideTimeout.current = setTimeout(() => { setVisible(false) setCoords(null) }, hideDelay) }, [hideDelay]) useEffect(() => { if (visible) { const id = requestAnimationFrame(updatePosition) return () => cancelAnimationFrame(id) } }, [visible, updatePosition]) useEffect(() => { if (!visible) return const handleUpdate = () => updatePosition() window.addEventListener('scroll', handleUpdate, true) window.addEventListener('resize', handleUpdate) return () => { window.removeEventListener('scroll', handleUpdate, true) window.removeEventListener('resize', handleUpdate) } }, [visible, updatePosition]) useEffect(() => { return () => { if (showTimeout.current !== undefined) clearTimeout(showTimeout.current) if (hideTimeout.current !== undefined) clearTimeout(hideTimeout.current) } }, []) const arrowStyles: Record = { top: 'bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2 rotate-45', bottom: 'top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 rotate-45', left: 'right-0 top-1/2 translate-x-1/2 -translate-y-1/2 rotate-45', right: 'left-0 top-1/2 -translate-x-1/2 -translate-y-1/2 rotate-45', } const actualPos = coords?.actualPosition ?? position const tooltipElement = visible ? createPortal( , document.body ) : null return ( <>

{ triggerRef.current = node if (typeof ref === 'function') ref(node) else if (ref) ref.current = node }} onMouseEnter={show} onMouseLeave={hide} onFocus={show} onBlur={hide} aria-describedby={visible ? tooltipId : undefined} className="inline-flex" > {children}

{tooltipElement} ) } ) Tooltip.displayName = 'Tooltip' 4a:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","react-dom",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/react-dom","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"react-dom"}]]}]}]]}],["$","$L4b",null,{"namespace":"@n3wth","registryDependencies":["cn"]}]]}],null]}],["$","$L4c",null,{"files":[{"path":"registry/new-york/tooltip/tooltip.tsx","content":"$4d","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]