50: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"] 51: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"] 52:T1bb3,"use client"; import * as React from "react"; import { Tooltip as TooltipPrimitive } from "radix-ui"; import { AnimatePresence, motion, useReducedMotionConfig } from "motion/react"; import { Info } from "lucide-react"; import { cn } from "@/lib/utils"; export interface InfoTooltipProps { /** The body of the tooltip. */ content?: React.ReactNode; /** Optional bold title at the top. */ title?: React.ReactNode; /** Optional footer, under a hairline (a source, a caveat). */ footer?: React.ReactNode; /** Custom trigger. When omitted, an accessible (i) icon button is rendered. */ children?: React.ReactNode; /** Side of the trigger to open on. Defaults to "top". */ side?: "top" | "bottom" | "left" | "right"; /** Alignment against the trigger. Defaults to "center". */ align?: "start" | "center" | "end"; /** Gap from the trigger in pixels. Defaults to 6. */ sideOffset?: number; /** Extra classes for the tooltip box. */ contentClassName?: string; /** Extra classes for the default (i) trigger. */ triggerClassName?: string; /** Hover delay before opening, in ms. Defaults to 150. */ delayDuration?: number; /** Accessible label for the default trigger. Falls back to the title or content when they are strings. */ label?: string; /** Show a small arrow pointing at the trigger. Defaults to false. */ showArrow?: boolean; } /** * A small explanation behind an (i). An inverted box (`bg-ink` on * `text-on-solid`, so it flips with the mode) that springs out of its * trigger, with an optional title and footer. * * On a phone, Radix never opens a tooltip on touch, which would leave the * explanation unreachable. The default (i) trigger explains and does nothing * else, so a tap opens it; a custom trigger might be a link or a control, * where a tap has to keep doing that instead. */ export function InfoTooltip({ content, title, footer, children, side = "top", align, sideOffset = 6, contentClassName, triggerClassName, delayDuration = 150, label, showArrow = false, }: InfoTooltipProps) { const reduceMotion = useReducedMotionConfig(); const [open, setOpen] = React.useState(false); // The box is portalled to , out of any `[data-theme]` scope the // trigger sits in. Carry the scope across so the tooltip wears the same // design system as the thing it explains. const [theme, setTheme] = React.useState(); const triggerRef = React.useRef(null); const touchRef = React.useRef(false); const openOnTap = !children; function changeOpen(next: boolean) { if (next) { setTheme( triggerRef.current?.closest("[data-theme]")?.getAttribute("data-theme") ?? undefined, ); } setOpen(next); } function handlePointerDown(event: React.PointerEvent) { touchRef.current = openOnTap && event.pointerType === "touch"; // Radix closes an open tooltip on pointer-down; for a tap that would undo // the open the click below is about to make. if (touchRef.current) event.preventDefault(); } function handleClick(event: React.MouseEvent) { if (!touchRef.current) return; touchRef.current = false; // Radix's own click handler closes the tooltip; a prevented event skips it. event.preventDefault(); changeOpen(true); } if (!content && !title) { return <>{children}; } const trigger = children ?? ( ); return ( {trigger} {open && ( {title && ( {title} )} {content && ( {content} )} {footer && ( {footer} )} {showArrow && ( )} )} ); } 4f:["$","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",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/radix-ui","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"}]]}]}],["$","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"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","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":"lucide-react"}]]}]}]]}],["$","$L50",null,{"namespace":"@bash","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/items/info-tooltip/info-tooltip.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]