51: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"] 52: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"] 53:T3512,"use client"; import { Tooltip } from "@base-ui/react/tooltip"; import { useReducedMotion } from "motion/react"; import { type CSSProperties, createContext, type FocusEventHandler, forwardRef, type KeyboardEventHandler, type PointerEventHandler, type ReactElement, type ReactNode, type Ref, type RefObject, useContext, useLayoutEffect, useMemo, useRef, useState, } from "react"; import { cn } from "@/lib/sona-utils"; type FluidTooltipOrientation = "horizontal" | "vertical" | "auto"; type FluidTooltipSide = "top" | "right" | "bottom" | "left"; type FluidTooltipAlign = "start" | "center" | "end"; type FluidTooltipDirection = -1 | 0 | 1; interface FluidTooltipPayload { id: string; contentRef: RefObject; side: FluidTooltipSide; align: FluidTooltipAlign; sideOffset: number; showArrowRef: RefObject; contentClassNameRef: RefObject; } interface FluidTooltipGroupContextValue { handle: Tooltip.Handle; disabled: boolean; defaultSide: FluidTooltipSide; direction: FluidTooltipDirection; keyboardNavigation: boolean; registerPointerTarget: (element: HTMLElement) => void; registerKeyboardTarget: () => void; } interface FluidTooltipRootContextValue { id: string; contentRef: RefObject; disabled: boolean; side?: FluidTooltipSide; align: FluidTooltipAlign; sideOffset: number; showArrowRef: RefObject; contentClassNameRef: RefObject; } const GroupContext = createContext(null); const RootContext = createContext(null); const tokenStyle = { "--fluid-tooltip-surface": "var(--foreground)", "--fluid-tooltip-label": "var(--background)", "--fluid-tooltip-shadow": "rgb(0 0 0 / 0.28)", } as CSSProperties; function useGroupContext(component: string) { const context = useContext(GroupContext); if (!context) { throw new Error(`${component} must be used inside FluidTooltip.Group.`); } return context; } function useRootContext(component: string) { const context = useContext(RootContext); if (!context) { throw new Error(`${component} must be used inside FluidTooltip.Root.`); } return context; } export interface FluidTooltipGroupProps { /** Related tooltip roots rendered inside the group. */ children: ReactNode; /** Axis used to calculate directional content entry. @default "auto" */ orientation?: FluidTooltipOrientation; /** Delay before the first pointer tooltip opens, in milliseconds. @default 350 */ openDelay?: number; /** Grace period before a pointer tooltip closes, in milliseconds. @default 100 */ closeDelay?: number; /** Disables tooltip behavior for every trigger in the group. @default false */ disabled?: boolean; /** Additional CSS classes for the positioned tooltip surface. @default undefined */ className?: string; } export function FluidTooltipGroup({ children, orientation = "auto", openDelay = 350, closeDelay = 100, disabled = false, className, }: FluidTooltipGroupProps) { const handle = useMemo(() => Tooltip.createHandle(), []); const shouldReduceMotion = useReducedMotion(); const previousCenter = useRef<{ x: number; y: number } | null>(null); const [direction, setDirection] = useState(0); const [keyboardNavigation, setKeyboardNavigation] = useState(false); const context = useMemo( () => ({ handle, disabled, defaultSide: orientation === "vertical" ? "right" : "top", direction, keyboardNavigation, registerPointerTarget(element) { const bounds = element.getBoundingClientRect(); const center = { x: bounds.left + bounds.width / 2, y: bounds.top + bounds.height / 2, }; const previous = previousCenter.current; if (!previous) { setDirection(0); } else { const deltaX = center.x - previous.x; const deltaY = center.y - previous.y; const resolvedAxis = orientation === "horizontal" ? "x" : orientation === "vertical" ? "y" : Math.abs(deltaX) >= Math.abs(deltaY) ? "x" : "y"; const delta = resolvedAxis === "x" ? deltaX : deltaY; setDirection(delta === 0 ? 0 : delta > 0 ? 1 : -1); } previousCenter.current = center; setKeyboardNavigation(false); }, registerKeyboardTarget() { previousCenter.current = null; setDirection(0); setKeyboardNavigation(true); }, }), [disabled, direction, handle, keyboardNavigation, orientation], ); return ( {children} { if (!open) { previousCenter.current = null; setDirection(0); } }} > {({ payload }) => ( {payload ? ( {payload.contentRef.current} {payload.showArrowRef.current ? ( ) : null} ) : null} )} ); } export interface FluidTooltipRootProps { /** Stable identifier used to key directional content transitions. */ id: string; /** Trigger and content parts associated with this tooltip. */ children: ReactNode; /** Preferred side of the trigger. Overrides the group default when provided. @default undefined */ side?: FluidTooltipSide; /** Alignment relative to the trigger. @default "center" */ align?: FluidTooltipAlign; /** Distance between the trigger and tooltip, in pixels. @default 8 */ sideOffset?: number; /** Disables this tooltip without disabling its trigger. @default false */ disabled?: boolean; } export function FluidTooltipRoot({ id, children, side, align = "center", sideOffset = 8, disabled = false, }: FluidTooltipRootProps) { const contentRef = useRef(null); const showArrowRef = useRef(true); const contentClassNameRef = useRef(undefined); const context = useMemo( () => ({ id, contentRef, disabled, side, align, sideOffset, showArrowRef, contentClassNameRef, }), [align, disabled, id, side, sideOffset], ); return ( {children} ); } export interface FluidTooltipTriggerProps extends Omit, "children"> { /** Existing button or link used as the actual trigger. */ children: ReactElement; /** Uses the child element without introducing a wrapper. @default true */ asChild?: boolean; /** Keeps the tooltip open when the trigger is activated. @default false */ keepOpenOnClick?: boolean; } export const FluidTooltipTrigger = forwardRef< HTMLElement, FluidTooltipTriggerProps >(function FluidTooltipTrigger( { children, asChild = true, keepOpenOnClick = false, onPointerEnter, onFocus, onKeyDown, ...props }, ref, ) { const group = useGroupContext("FluidTooltip.Trigger"); const root = useRootContext("FluidTooltip.Trigger"); const payload: FluidTooltipPayload = { id: root.id, contentRef: root.contentRef, side: root.side ?? group.defaultSide, align: root.align, sideOffset: root.sideOffset, showArrowRef: root.showArrowRef, contentClassNameRef: root.contentClassNameRef, }; const handlePointerEnter: PointerEventHandler = (event) => { if (event.pointerType !== "touch") { group.registerPointerTarget(event.currentTarget); } onPointerEnter?.(event); }; const handleFocus: FocusEventHandler = (event) => { group.registerKeyboardTarget(); onFocus?.(event); }; const handleKeyDown: KeyboardEventHandler = (event) => { group.registerKeyboardTarget(); onKeyDown?.(event); }; return ( } closeOnClick={!keepOpenOnClick} disabled={group.disabled || root.disabled} handle={group.handle} onFocus={handleFocus} onKeyDown={handleKeyDown} onPointerEnter={handlePointerEnter} payload={payload} render={asChild ? children : undefined} > {asChild ? undefined : children} ); }); export interface FluidTooltipContentProps { /** Short, non-interactive tooltip label. */ children: ReactNode; /** Additional CSS classes for this tooltip's surface. @default undefined */ className?: string; /** Shows the arrow connecting the surface to its trigger. @default true */ showArrow?: boolean; } export function FluidTooltipContent({ children, className, showArrow = true, }: FluidTooltipContentProps) { const root = useRootContext("FluidTooltip.Content"); useLayoutEffect(() => { root.contentRef.current = children; root.contentClassNameRef.current = className; root.showArrowRef.current = showArrow; }, [children, className, root, showArrow]); return null; } export const FluidTooltip = { Group: FluidTooltipGroup, Root: FluidTooltipRoot, Trigger: FluidTooltipTrigger, Content: FluidTooltipContent, }; export default FluidTooltip; 50:["$","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","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","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":"motion"}]]}]}]]}],["$","$L51",null,{"namespace":"@sona-ui","registryDependencies":["@sona-ui/sona-utils"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"registry/sonaui/fluid-tooltip/fluid-tooltip.tsx","content":"$53","type":"registry:ui","target":"components/ui/fluid-tooltip/fluid-tooltip.tsx"}],"className":"h-[70svh] min-h-80"}]]}]