{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tooltip-demo",
  "type": "registry:ui",
  "title": "Tooltip Demo",
  "description": "Demo showing an animated tooltip.",
  "registryDependencies": [
    "https://animate-ui.com/r/tooltip"
  ],
  "files": [
    {
      "path": "registry/demo/components/tooltip/index.tsx",
      "content": "import { Button } from '@/components/ui/button';\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n  type TooltipProviderProps,\n  type TooltipProps,\n  type TooltipContentProps,\n} from '@/components/animate-ui/components/tooltip';\nimport React from 'react';\n\ntype TooltipDemoProps = Pick<TooltipProviderProps, 'openDelay' | 'closeDelay'> &\n  Pick<TooltipProps, 'side' | 'sideOffset' | 'align' | 'alignOffset'> &\n  Pick<TooltipContentProps, 'arrow'>;\n\nexport const TooltipDemo = ({\n  openDelay,\n  closeDelay,\n  side,\n  sideOffset,\n  align,\n  alignOffset,\n  arrow,\n}: TooltipDemoProps) => {\n  return (\n    <TooltipProvider openDelay={openDelay} closeDelay={closeDelay}>\n      <div className=\"flex flex-col gap-5 justify-center items-center\">\n        <div className=\"flex flex-row gap-5 border rounded-lg p-5\">\n          <Tooltip\n            side={side}\n            sideOffset={sideOffset}\n            align={align}\n            alignOffset={alignOffset}\n          >\n            <TooltipTrigger>\n              <Button variant=\"outline\">Docs</Button>\n            </TooltipTrigger>\n            <TooltipContent arrow={arrow}>\n              <p>Documentation</p>\n            </TooltipContent>\n          </Tooltip>\n          <Tooltip\n            side={side}\n            sideOffset={sideOffset}\n            align={align}\n            alignOffset={alignOffset}\n          >\n            <TooltipTrigger>\n              <Button variant=\"outline\">API</Button>\n            </TooltipTrigger>\n            <TooltipContent arrow={arrow}>\n              <p>API Reference</p>\n            </TooltipContent>\n          </Tooltip>\n          <Tooltip\n            side={side}\n            sideOffset={sideOffset}\n            align={align}\n            alignOffset={alignOffset}\n          >\n            <TooltipTrigger>\n              <Button variant=\"outline\">Guide</Button>\n            </TooltipTrigger>\n            <TooltipContent arrow={arrow}>\n              <p>User Guide</p>\n            </TooltipContent>\n          </Tooltip>\n        </div>\n        <div className=\"flex flex-row gap-5\">\n          <Tooltip\n            side={side}\n            sideOffset={sideOffset}\n            align={align}\n            alignOffset={alignOffset}\n          >\n            <TooltipTrigger>\n              <Button variant=\"outline\">Repo</Button>\n            </TooltipTrigger>\n            <TooltipContent arrow={arrow}>\n              <p>GitHub</p>\n            </TooltipContent>\n          </Tooltip>\n        </div>\n      </div>\n    </TooltipProvider>\n  );\n};\n",
      "type": "registry:ui",
      "target": "components/animate-ui/demo/components/tooltip.tsx"
    }
  ],
  "meta": {
    "demoProps": {
      "TooltipProvider": {
        "openDelay": {
          "value": 700,
          "min": 0,
          "max": 2000,
          "step": 100
        },
        "closeDelay": {
          "value": 300,
          "min": 0,
          "max": 2000,
          "step": 100
        }
      },
      "Tooltip": {
        "side": {
          "value": "top",
          "options": {
            "top": "top",
            "bottom": "bottom",
            "left": "left",
            "right": "right"
          }
        },
        "sideOffset": {
          "value": 14
        },
        "align": {
          "value": "center",
          "options": {
            "start": "start",
            "center": "center",
            "end": "end"
          }
        },
        "alignOffset": {
          "value": 0
        }
      },
      "TooltipContent": {
        "arrow": {
          "value": true
        }
      }
    }
  }
}