4c: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"] 4d: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"] 4e:T1e85,import React, { createContext, useCallback, useContext, useEffect, useId, useLayoutEffect, useRef, useState } from 'react'; import { createPortal } from 'react-dom'; import { Slot } from '@radix-ui/react-slot'; import { getHoverCardPosition, getHoverCardState, hoverCardStyleKeys } from '../lib/core'; import type { HoverCardBaseProps, HoverCardContentBaseProps, HoverCardPosition, HoverCardTriggerBaseProps } from '../lib/core'; import { usePortalContainer, type PortalContainer } from '../portal'; import styles from './hover-card.module.scss'; interface HoverCardContextValue { open: boolean; triggerRef: React.RefObject; contentId: string; openDelay: number; closeDelay: number; setOpen: (open: boolean) => void; } const HoverCardContext = createContext(null); function useHoverCardContext(): HoverCardContextValue { const context = useContext(HoverCardContext); if (!context) { throw new Error('HoverCard sub-components must be used within .'); } return context; } export interface HoverCardProps extends React.HTMLAttributes, HoverCardBaseProps {} const HoverCard = React.forwardRef( ({ className = '', open, defaultOpen = false, openDelay = 200, closeDelay = 300, onOpenChange, children, ...props }, ref) => { const [internalOpen, setInternalOpen] = useState(defaultOpen); const isOpen = open !== undefined ? open : internalOpen; const triggerRef = useRef(null); const contentId = useId(); const setOpen = useCallback( (next: boolean) => { if (open === undefined) { setInternalOpen(next); } onOpenChange?.(next); }, [open, onOpenChange], ); return (

{children}

); }, ); HoverCard.displayName = 'HoverCard'; export interface HoverCardTriggerProps extends React.ButtonHTMLAttributes, HoverCardTriggerBaseProps {} const HoverCardTrigger = React.forwardRef(({ className = '', asChild = false, children, onKeyDown, ...props }, ref) => { const context = useHoverCardContext(); const openTimer = useRef | null>(null); const closeTimer = useRef | null>(null); function clearOpenTimer() { if (openTimer.current) { clearTimeout(openTimer.current); openTimer.current = null; } } function clearCloseTimer() { if (closeTimer.current) { clearTimeout(closeTimer.current); closeTimer.current = null; } } function scheduleOpen() { clearOpenTimer(); openTimer.current = setTimeout(() => context.setOpen(true), context.openDelay); } function scheduleClose() { clearCloseTimer(); closeTimer.current = setTimeout(() => context.setOpen(false), context.closeDelay); } function handlePointerEnter() { clearCloseTimer(); scheduleOpen(); } function handlePointerLeave() { clearOpenTimer(); scheduleClose(); } function handleFocus() { clearCloseTimer(); scheduleOpen(); } function handleBlur() { clearOpenTimer(); scheduleClose(); } function handleKeyDown(event: React.KeyboardEvent) { if (event.key === 'Escape') { clearOpenTimer(); clearCloseTimer(); context.setOpen(false); } onKeyDown?.(event); } useEffect(() => { return () => { clearOpenTimer(); clearCloseTimer(); }; }, []); function setRef(element: HTMLElement | null) { context.triggerRef.current = element; if (typeof ref === 'function') { ref(element as HTMLButtonElement | null); } else if (ref) { ref.current = element as HTMLButtonElement | null; } } const Comp = asChild ? Slot : 'button'; const state = getHoverCardState(context.open); return ( {children} ); }); HoverCardTrigger.displayName = 'HoverCardTrigger'; export interface HoverCardContentProps extends React.HTMLAttributes, HoverCardContentBaseProps { container?: PortalContainer; } const HoverCardContent = React.forwardRef( ({ className = '', side = 'bottom', align = 'center', sideOffset = 4, container, children, ...props }, ref) => { const { open, triggerRef, contentId, closeDelay, setOpen } = useHoverCardContext(); const portalContainer = usePortalContainer(container); const [position, setPosition] = useState(null); const contentRef = useRef(null); const closeTimer = useRef | null>(null); function setRef(element: HTMLDivElement | null) { contentRef.current = element; if (typeof ref === 'function') { ref(element); } else if (ref) { ref.current = element; } } function clearCloseTimer() { if (closeTimer.current) { clearTimeout(closeTimer.current); closeTimer.current = null; } } function scheduleClose() { clearCloseTimer(); closeTimer.current = setTimeout(() => setOpen(false), closeDelay); } function handlePointerEnter() { clearCloseTimer(); } function handlePointerLeave() { scheduleClose(); } useEffect(() => { return () => { clearCloseTimer(); }; }, []); useLayoutEffect(() => { if (!open) { return; } function updatePosition() { const trigger = triggerRef.current; const content = contentRef.current; if (!trigger || !content) { return; } const triggerRect = trigger.getBoundingClientRect(); const contentSize = { width: content.offsetWidth, height: content.offsetHeight }; const viewport = { width: window.innerWidth, height: window.innerHeight }; setPosition(getHoverCardPosition({ triggerRect, contentSize, side, align, sideOffset, viewport })); } updatePosition(); window.addEventListener('resize', updatePosition); document.addEventListener('scroll', updatePosition, true); return () => { window.removeEventListener('resize', updatePosition); document.removeEventListener('scroll', updatePosition, true); }; }, [open, side, align, sideOffset, triggerRef]); useEffect(() => { if (!open) { return; } function handleKeyDown(event: KeyboardEvent) { if (event.key === 'Escape') { clearCloseTimer(); setOpen(false); } } document.addEventListener('keydown', handleKeyDown); return () => { document.removeEventListener('keydown', handleKeyDown); }; }, [open, setOpen]); const state = getHoverCardState(open); const classes = [styles[hoverCardStyleKeys.content], className].filter(Boolean).join(' '); const content = ( ); if (!open || !portalContainer) { return null; } return createPortal(content, portalContainer); }, ); HoverCardContent.displayName = 'HoverCardContent'; export { HoverCard, HoverCardTrigger, HoverCardContent }; export default HoverCard; 4f:T445,@use '../../../styles/variables/colors' as *; .root { display: inline-flex; } .trigger { display: inline-flex; align-items: center; border: none; background: transparent; padding: 0; color: inherit; font: inherit; cursor: pointer; } .content { position: fixed; z-index: $z-popover; width: 16rem; max-width: calc(100vw - 2rem); border-radius: $radius-md; border: 1px solid $border; background-color: $popover; color: $popover-foreground; padding: $spacing-4; box-shadow: $shadow-md; outline: none; transition: opacity $transition-fast, visibility $transition-fast, transform $transition-fast; &[data-state='closed'] { opacity: 0; visibility: hidden; pointer-events: none; &[data-side='top'] { transform: translateY(0.25rem); } &[data-side='right'] { transform: translateX(-0.25rem); } &[data-side='bottom'] { transform: translateY(-0.25rem); } &[data-side='left'] { transform: translateX(0.25rem); } } &[data-state='open'] { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(0, 0); } } 4b:["$","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","@radix-ui/react-slot",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-slot","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":"@radix-ui/react-slot"}]]}]}],["$","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"}]]}]}]]}],["$","$L4c",null,{"namespace":"@tile-ui","registryDependencies":["@tile-ui/core","@tile-ui/portal","@tile-ui/styles"]}]]}],null]}],["$","$L4d",null,{"files":[{"path":"packages/react/src/components/hover-card/hover-card.tsx","content":"$4e","type":"registry:ui","target":"components/ui/hover-card/hover-card.tsx"},{"path":"packages/styles/scss/components/hover-card.module.scss","content":"$4f","type":"registry:file","target":"components/ui/hover-card/hover-card.module.scss"},{"path":"packages/react/src/components/hover-card/index.ts","content":"export { HoverCard, HoverCardTrigger, HoverCardContent, type HoverCardProps, type HoverCardTriggerProps, type HoverCardContentProps } from './hover-card';\n","type":"registry:ui","target":"components/ui/hover-card/index.ts"}],"className":"h-[70svh] min-h-80"}]]}]