{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "primitives-base-tooltip",
  "title": "Base Tooltip",
  "description": "A popup that appears when an element is hovered or focused, showing a hint for sighted users.",
  "dependencies": [
    "motion",
    "@base-ui-components/react"
  ],
  "registryDependencies": [
    "@animate-ui/lib-get-strict-context",
    "@animate-ui/hooks-use-controlled-state"
  ],
  "files": [
    {
      "path": "registry/primitives/base/tooltip/index.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\nimport { Tooltip as TooltipPrimitive } from '@base-ui-components/react/tooltip';\nimport {\n  AnimatePresence,\n  motion,\n  useMotionValue,\n  useSpring,\n  type HTMLMotionProps,\n  type MotionValue,\n  type SpringOptions,\n} from 'motion/react';\n\nimport { getStrictContext } from '@/lib/get-strict-context';\nimport { useControlledState } from '@/hooks/use-controlled-state';\n\ntype TooltipContextType = {\n  isOpen: boolean;\n  setIsOpen: TooltipProps['onOpenChange'];\n  x: MotionValue<number>;\n  y: MotionValue<number>;\n  followCursor?: boolean | 'x' | 'y';\n  followCursorSpringOptions?: SpringOptions;\n};\n\nconst [LocalTooltipProvider, useTooltip] =\n  getStrictContext<TooltipContextType>('TooltipContext');\n\ntype TooltipProviderProps = React.ComponentProps<\n  typeof TooltipPrimitive.Provider\n>;\n\nfunction TooltipProvider(props: TooltipProviderProps) {\n  return <TooltipPrimitive.Provider data-slot=\"tooltip-provider\" {...props} />;\n}\n\ntype TooltipProps = React.ComponentProps<typeof TooltipPrimitive.Root> & {\n  followCursor?: boolean | 'x' | 'y';\n  followCursorSpringOptions?: SpringOptions;\n};\n\nfunction Tooltip({\n  followCursor = false,\n  followCursorSpringOptions = { stiffness: 200, damping: 17 },\n  ...props\n}: TooltipProps) {\n  const [isOpen, setIsOpen] = useControlledState({\n    value: props?.open,\n    defaultValue: props?.defaultOpen,\n    onChange: props?.onOpenChange,\n  });\n  const x = useMotionValue(0);\n  const y = useMotionValue(0);\n\n  return (\n    <LocalTooltipProvider\n      value={{\n        isOpen,\n        setIsOpen,\n        x,\n        y,\n        followCursor,\n        followCursorSpringOptions,\n      }}\n    >\n      <TooltipPrimitive.Root\n        data-slot=\"tooltip\"\n        {...props}\n        onOpenChange={setIsOpen}\n      />\n    </LocalTooltipProvider>\n  );\n}\n\ntype TooltipTriggerProps = React.ComponentProps<\n  typeof TooltipPrimitive.Trigger\n>;\n\nfunction TooltipTrigger({ onMouseMove, ...props }: TooltipTriggerProps) {\n  const { x, y, followCursor } = useTooltip();\n\n  const handleMouseMove = (\n    event: Parameters<NonNullable<TooltipTriggerProps['onMouseMove']>>[0],\n  ) => {\n    onMouseMove?.(event);\n\n    const target = event.currentTarget.getBoundingClientRect();\n\n    if (followCursor === 'x' || followCursor === true) {\n      const eventOffsetX = event.clientX - target.left;\n      const offsetXFromCenter = (eventOffsetX - target.width / 2) / 2;\n      x.set(offsetXFromCenter);\n    }\n\n    if (followCursor === 'y' || followCursor === true) {\n      const eventOffsetY = event.clientY - target.top;\n      const offsetYFromCenter = (eventOffsetY - target.height / 2) / 2;\n      y.set(offsetYFromCenter);\n    }\n  };\n\n  return (\n    <TooltipPrimitive.Trigger\n      data-slot=\"tooltip-trigger\"\n      onMouseMove={handleMouseMove}\n      {...props}\n    />\n  );\n}\n\ntype TooltipPortalProps = Omit<\n  React.ComponentProps<typeof TooltipPrimitive.Portal>,\n  'keepMounted'\n>;\n\nfunction TooltipPortal(props: TooltipPortalProps) {\n  const { isOpen } = useTooltip();\n\n  return (\n    <AnimatePresence>\n      {isOpen && (\n        <TooltipPrimitive.Portal\n          keepMounted\n          data-slot=\"tooltip-portal\"\n          {...props}\n        />\n      )}\n    </AnimatePresence>\n  );\n}\n\ntype TooltipPositionerProps = React.ComponentProps<\n  typeof TooltipPrimitive.Positioner\n>;\n\nfunction TooltipPositioner(props: TooltipPositionerProps) {\n  return (\n    <TooltipPrimitive.Positioner data-slot=\"tooltip-positioner\" {...props} />\n  );\n}\n\ntype TooltipPopupProps = Omit<\n  React.ComponentProps<typeof TooltipPrimitive.Popup>,\n  'render'\n> &\n  HTMLMotionProps<'div'>;\n\nfunction TooltipPopup({\n  transition = { type: 'spring', stiffness: 300, damping: 25 },\n  style,\n  ...props\n}: TooltipPopupProps) {\n  const { x, y, followCursor, followCursorSpringOptions } = useTooltip();\n  const translateX = useSpring(x, followCursorSpringOptions);\n  const translateY = useSpring(y, followCursorSpringOptions);\n\n  return (\n    <TooltipPrimitive.Popup\n      render={\n        <motion.div\n          key=\"tooltip-popup\"\n          data-slot=\"tooltip-popup\"\n          initial={{ opacity: 0, scale: 0.5 }}\n          animate={{ opacity: 1, scale: 1 }}\n          exit={{ opacity: 0, scale: 0.5 }}\n          transition={transition}\n          style={{\n            x:\n              followCursor === 'x' || followCursor === true\n                ? translateX\n                : undefined,\n            y:\n              followCursor === 'y' || followCursor === true\n                ? translateY\n                : undefined,\n            ...style,\n          }}\n          {...props}\n        />\n      }\n    />\n  );\n}\n\ntype TooltipArrowProps = React.ComponentProps<typeof TooltipPrimitive.Arrow>;\n\nfunction TooltipArrow(props: TooltipArrowProps) {\n  return <TooltipPrimitive.Arrow data-slot=\"tooltip-arrow\" {...props} />;\n}\n\nexport {\n  TooltipProvider,\n  Tooltip,\n  TooltipTrigger,\n  TooltipPortal,\n  TooltipPositioner,\n  TooltipPopup,\n  TooltipArrow,\n  useTooltip,\n  type TooltipProviderProps,\n  type TooltipProps,\n  type TooltipTriggerProps,\n  type TooltipPortalProps,\n  type TooltipPositionerProps,\n  type TooltipPopupProps,\n  type TooltipArrowProps,\n  type TooltipContextType,\n};\n",
      "type": "registry:ui",
      "target": "components/animate-ui/primitives/base/tooltip.tsx"
    }
  ],
  "type": "registry:ui"
}