{"$schema":"https:\/\/ui.particle.academy\/schema\/registry-item.json","name":"tooltip","type":"registry:ui","title":"Tooltip","description":"Tooltip from react-fancy","package":"react-fancy","dependencies":[],"registryDependencies":["portal"],"files":[{"path":"components\/fancy\/tooltip\/Tooltip.tsx","content":"import {\r\n  cloneElement,\r\n  forwardRef,\r\n  useCallback,\r\n  useRef,\r\n  useState,\r\n  type ReactElement,\r\n} from \"react\";\r\nimport { cn } from \"..\/..\/utils\/cn\";\r\nimport { Portal } from \"..\/Portal\";\r\nimport { useFloatingPosition } from \"..\/..\/hooks\/use-floating-position\";\r\nimport type { TooltipProps } from \".\/Tooltip.types\";\r\n\r\nexport const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(\r\n  function Tooltip(\r\n    { children, content, placement = \"top\", delay = 200, offset = 8, className },\r\n    _ref,\r\n  ) {\r\n    const [open, setOpen] = useState(false);\r\n    const anchorRef = useRef<HTMLElement>(null);\r\n    const floatingRef = useRef<HTMLDivElement>(null);\r\n    const timeoutRef = useRef<ReturnType<typeof setTimeout>>(undefined);\r\n\r\n    const position = useFloatingPosition(anchorRef, floatingRef, {\r\n      placement,\r\n      offset,\r\n      enabled: open,\r\n    });\r\n\r\n    const show = useCallback(() => {\r\n      timeoutRef.current = setTimeout(() => setOpen(true), delay);\r\n    }, [delay]);\r\n\r\n    const hide = useCallback(() => {\r\n      clearTimeout(timeoutRef.current);\r\n      setOpen(false);\r\n    }, []);\r\n\r\n    const trigger = cloneElement(children as ReactElement<Record<string, unknown>>, {\r\n      ref: anchorRef,\r\n      onMouseEnter: show,\r\n      onMouseLeave: hide,\r\n      onFocus: show,\r\n      onBlur: hide,\r\n    });\r\n\r\n    return (\r\n      <>\r\n        {trigger}\r\n        {open && (\r\n          <Portal>\r\n            <div\r\n              ref={floatingRef}\r\n              data-react-fancy-tooltip=\"\"\r\n              role=\"tooltip\"\r\n              className={cn(\r\n                \"fancy-fade-in pointer-events-none fixed z-50 max-w-xs rounded-lg bg-zinc-900 px-3 py-1.5 text-sm text-white shadow-lg dark:bg-zinc-700 dark:text-zinc-100\",\r\n                className,\r\n              )}\r\n              style={{ left: position.x, top: position.y }}\r\n            >\r\n              {content}\r\n              <div\r\n                className={cn(\r\n                  \"absolute h-2 w-2 rotate-45 bg-zinc-900 dark:bg-zinc-700\",\r\n                  position.placement.startsWith(\"top\") &&\r\n                    \"bottom-[-4px] left-1\/2 -translate-x-1\/2\",\r\n                  position.placement.startsWith(\"bottom\") &&\r\n                    \"top-[-4px] left-1\/2 -translate-x-1\/2\",\r\n                  position.placement.startsWith(\"left\") &&\r\n                    \"right-[-4px] top-1\/2 -translate-y-1\/2\",\r\n                  position.placement.startsWith(\"right\") &&\r\n                    \"left-[-4px] top-1\/2 -translate-y-1\/2\",\r\n                )}\r\n              \/>\r\n            <\/div>\r\n          <\/Portal>\r\n        )}\r\n      <\/>\r\n    );\r\n  },\r\n);\r\n\r\nTooltip.displayName = \"Tooltip\";\r\n","type":"registry:ui","target":"components\/fancy\/tooltip\/Tooltip.tsx"},{"path":"components\/fancy\/tooltip\/Tooltip.types.ts","content":"import type { ReactNode, ReactElement } from \"react\";\r\nimport type { Placement } from \"..\/..\/utils\/types\";\r\n\r\nexport interface TooltipProps {\r\n  children: ReactElement;\r\n  content: ReactNode;\r\n  placement?: Placement;\r\n  delay?: number;\r\n  offset?: number;\r\n  className?: string;\r\n}\r\n","type":"registry:ui","target":"components\/fancy\/tooltip\/Tooltip.types.ts"},{"path":"components\/fancy\/tooltip\/index.ts","content":"export { Tooltip } from \".\/Tooltip\";\r\nexport type { TooltipProps } from \".\/Tooltip.types\";\r\n","type":"registry:ui","target":"components\/fancy\/tooltip\/index.ts"}]}