{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "native-tooltip-baseui",
  "type": "registry:component",
  "title": "Native Tooltip",
  "description": "A glassmorphism-styled tooltip with smooth spring animations using Framer Motion. (Base UI)",
  "registryDependencies": [
    "button"
  ],
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-baseui/src/components/native/native-tooltip-baseui.tsx",
      "content": "\"use client\";\n\nimport { Tooltip } from \"@base-ui/react/tooltip\";\nimport { motion, useReducedMotion } from \"framer-motion\";\nimport * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\ntype TooltipAnimation = \"blur\" | \"scale\";\n\nconst animations = {\n  blur: {\n    initial: { opacity: 0, scale: 0.95, filter: \"blur(4px)\" },\n    animate: { opacity: 1, scale: 1, filter: \"blur(0px)\" },\n    transition: { type: \"spring\" as const, duration: 0.3, bounce: 0 },\n  },\n  scale: {\n    initial: { opacity: 0, scale: 0.9, y: 4 },\n    animate: { opacity: 1, scale: 1, y: 0 },\n    transition: { type: \"spring\" as const, duration: 0.3, bounce: 0.3 },\n  },\n};\n\nconst reducedAnimation = {\n  initial: { opacity: 0 },\n  animate: { opacity: 1 },\n  transition: { duration: 0.15 },\n};\n\nconst NativeTooltipProvider = ({\n  delay = 100,\n  ...props\n}: React.ComponentProps<typeof Tooltip.Provider>) => (\n  <Tooltip.Provider delay={delay} {...props} />\n);\n\nconst NativeTooltipRoot = Tooltip.Root;\n\nconst NativeTooltipTrigger = Tooltip.Trigger;\n\nconst NativeTooltipContent = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentPropsWithoutRef<typeof Tooltip.Popup> & {\n    animation?: TooltipAnimation;\n    sideOffset?: number;\n  }\n>(\n  (\n    { className, sideOffset = 8, children, animation = \"blur\", ...props },\n    ref\n  ) => {\n    const shouldReduceMotion = useReducedMotion();\n    const selectedAnimation = shouldReduceMotion\n      ? reducedAnimation\n      : animations[animation];\n\n    return (\n      <Tooltip.Portal>\n        <Tooltip.Positioner sideOffset={sideOffset} className=\"z-50\">\n          <Tooltip.Popup\n            ref={ref}\n            className={cn(\"overflow-visible bg-transparent\", className)}\n            {...props}\n            render={(popupProps, state) => (\n              <motion.div\n                {...(popupProps as any)}\n                initial={selectedAnimation.initial}\n                animate={\n                  state.open\n                    ? selectedAnimation.animate\n                    : selectedAnimation.initial\n                }\n                transition={selectedAnimation.transition}\n                style={{\n                  ...(popupProps as React.HTMLAttributes<HTMLDivElement>)\n                    .style,\n                  transformOrigin: \"var(--transform-origin)\",\n                }}\n                className=\"rounded-md border border-white/10 bg-black/80 px-3 py-1.5 text-xs font-medium text-balance text-white shadow-lg backdrop-blur-md dark:border-black/10 dark:bg-white/90 dark:text-black\"\n              >\n                {children}\n              </motion.div>\n            )}\n          />\n        </Tooltip.Positioner>\n      </Tooltip.Portal>\n    );\n  }\n);\nNativeTooltipContent.displayName = \"NativeTooltipContent\";\n\nconst NativeTooltip = ({\n  content,\n  children,\n  animation,\n  openDelay = 100,\n  ...props\n}: React.ComponentProps<typeof Tooltip.Root> & {\n  content?: React.ReactNode;\n  animation?: TooltipAnimation;\n  openDelay?: number;\n}) => {\n  if (content) {\n    return (\n      <NativeTooltipRoot {...props}>\n        <NativeTooltipTrigger\n          delay={openDelay}\n          render={\n            React.isValidElement(children) ? (\n              (children as React.ReactElement<Record<string, unknown>>)\n            ) : (\n              <span tabIndex={0} className=\"inline-block\">\n                {children as React.ReactNode}\n              </span>\n            )\n          }\n        />\n        <NativeTooltipContent animation={animation}>\n          {content}\n        </NativeTooltipContent>\n      </NativeTooltipRoot>\n    );\n  }\n\n  return <NativeTooltipRoot {...props}>{children}</NativeTooltipRoot>;\n};\n\nexport {\n  NativeTooltip,\n  NativeTooltipContent,\n  NativeTooltipProvider,\n  NativeTooltipTrigger,\n};\n",
      "type": "registry:component",
      "target": "components/uitripled/native-tooltip-baseui.tsx"
    }
  ]
}