4e: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/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f: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/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T2498,"use client"; import * as React from "react"; import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip"; import { cn } from "@/lib/utils"; import { buttonVariants } from "@/registry/optics/button"; const TooltipProviderContext = React.createContext({ hasProvider: false, delay: 400, }); // Context local para cada instancia de Tooltip para manejar estados de interacción const TooltipInstanceContext = React.createContext({ shouldKeepOpenRef: { current: false }, setShouldKeepOpen: () => {}, isPointerOverTriggerRef: { current: false }, isPointerOverContentRef: { current: false }, openTooltip: () => {}, delay: 400, }); function TooltipProvider({ delay = 400, delayDuration = undefined, skipDelayDuration = 0, children, ...props } = {}) { const resolvedDelayDuration = delayDuration ?? delay; // Configuración de delays: // - delay/delayDuration: 400ms por defecto para la apertura inicial del tooltip // - skipDelayDuration: 0ms para transiciones instantáneas entre tooltips cuando ya hay uno abierto // Para que skipDelayDuration funcione entre múltiples tooltips, todos deben compartir el mismo TooltipProvider return ( {children} ); } function Tooltip({ open: controlledOpen, onOpenChange, delay: localDelay, ...props } = {}) { const { hasProvider, delay: providerDelay } = React.useContext( TooltipProviderContext, ); const [uncontrolledOpen, setUncontrolledOpen] = React.useState(false); const isControlled = controlledOpen !== undefined; const isOpen = isControlled ? controlledOpen : uncontrolledOpen; // El delay efectivo viene del prop local, del provider, o del default (400) const effectiveDelay = localDelay ?? providerDelay ?? 400; // Refs locales para cada instancia de Tooltip const shouldKeepOpenRef = React.useRef(false); const isPointerOverTriggerRef = React.useRef(false); const isPointerOverContentRef = React.useRef(false); const setShouldKeepOpen = React.useCallback((value) => { shouldKeepOpenRef.current = value; }, []); const openTooltip = React.useCallback(() => { if (isControlled) { onOpenChange?.(true); } else { setUncontrolledOpen(true); } }, [isControlled, onOpenChange]); function handleOpenChange(nextOpen, eventDetails) { // Lógica para mantener abierto si el mouse está sobre el trigger o el contenido if (!nextOpen) { if ( isPointerOverTriggerRef.current || isPointerOverContentRef.current || shouldKeepOpenRef.current ) { if (isControlled) { onOpenChange?.(true); } else { setUncontrolledOpen(true); } return; } } if (!isControlled) { setUncontrolledOpen(nextOpen); } if (nextOpen) { setShouldKeepOpen(true); } else { setShouldKeepOpen(false); } onOpenChange?.(nextOpen, eventDetails); } const tooltipRoot = ( ); if (hasProvider) { return tooltipRoot; } return ( {tooltipRoot} ); } function TooltipTrigger({ onClick, onPointerDown, onPointerLeave, onPointerEnter, onTouchStart, onTouchEnd, onTouchCancel, ...props } = {}) { const { setShouldKeepOpen, isPointerOverTriggerRef, isPointerOverContentRef, openTooltip, delay, } = React.useContext(TooltipInstanceContext); const longPressTimeoutRef = React.useRef(null); const isTouchActiveRef = React.useRef(false); React.useEffect(() => { return () => { if (longPressTimeoutRef.current) { clearTimeout(longPressTimeoutRef.current); } }; }, []); const handleClick = React.useCallback( (event) => { event.stopPropagation(); onClick?.(event); }, [onClick], ); const handlePointerDown = React.useCallback( (event) => { setShouldKeepOpen(true); isPointerOverTriggerRef.current = true; event.stopPropagation(); onPointerDown?.(event); }, [onPointerDown, setShouldKeepOpen], ); const handlePointerEnter = React.useCallback( (event) => { setShouldKeepOpen(true); isPointerOverTriggerRef.current = true; onPointerEnter?.(event); }, [onPointerEnter, setShouldKeepOpen], ); const handlePointerLeave = React.useCallback( (event) => { isPointerOverTriggerRef.current = false; if (!isPointerOverContentRef.current) { setShouldKeepOpen(false); } onPointerLeave?.(event); }, [onPointerLeave, setShouldKeepOpen, isPointerOverContentRef], ); const handleTouchStart = React.useCallback( (event) => { isTouchActiveRef.current = true; if (longPressTimeoutRef.current) { clearTimeout(longPressTimeoutRef.current); } longPressTimeoutRef.current = setTimeout(() => { if (isTouchActiveRef.current) { setShouldKeepOpen(true); isPointerOverTriggerRef.current = true; openTooltip(); // En mobile, el preventDefault evita el menú contextual al hacer long press if (event.cancelable) event.preventDefault(); } }, delay); // Usamos el delay del componente onTouchStart?.(event); }, [onTouchStart, setShouldKeepOpen, openTooltip, delay], ); const handleTouchEnd = React.useCallback( (event) => { isTouchActiveRef.current = false; if (longPressTimeoutRef.current) { clearTimeout(longPressTimeoutRef.current); longPressTimeoutRef.current = null; } onTouchEnd?.(event); }, [onTouchEnd], ); const handleTouchCancel = React.useCallback( (event) => { isTouchActiveRef.current = false; if (longPressTimeoutRef.current) { clearTimeout(longPressTimeoutRef.current); longPressTimeoutRef.current = null; } onTouchCancel?.(event); }, [onTouchCancel], ); return ( ); } function TooltipContent({ className = "", side = "top", sideOffset = 4, align = "center", alignOffset = 0, variant = "raised", children = null, onPointerEnter, onPointerLeave, ...props }) { const { setShouldKeepOpen, isPointerOverTriggerRef, isPointerOverContentRef, } = React.useContext(TooltipInstanceContext); const handlePointerEnter = React.useCallback( (event) => { setShouldKeepOpen(true); isPointerOverContentRef.current = true; onPointerEnter?.(event); }, [onPointerEnter, setShouldKeepOpen], ); const handlePointerLeave = React.useCallback( (event) => { isPointerOverContentRef.current = false; if (!isPointerOverTriggerRef.current) { setShouldKeepOpen(false); } onPointerLeave?.(event); }, [onPointerLeave, setShouldKeepOpen, isPointerOverTriggerRef], ); return (

{children}

); } Tooltip.displayName = "Tooltip"; TooltipTrigger.displayName = "TooltipTrigger"; TooltipContent.displayName = "TooltipContent"; TooltipProvider.displayName = "TooltipProvider"; export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }; 4d:["$","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","@base-ui/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40base-ui%2Freact","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":"@base-ui/react"}]]}]}],["$","li","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","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":"clsx"}]]}]}],["$","li","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","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":"tailwind-merge"}]]}]}]]}],["$","$L4e",null,{"namespace":"@optics","registryDependencies":["https://optics.agusmayol.com.ar/r/button.json","https://optics.agusmayol.com.ar/r/utils.json"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/optics/tooltip.jsx","content":"$50","type":"registry:component","target":"components/optics/tooltip.jsx"}],"className":"h-[70svh] min-h-80"}]]}]