{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo <educlopez93@gmail.com>","css":{},"dependencies":["motion","lucide-react","@radix-ui/react-popover"],"description":"A RichPopover component for SmoothUI.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport {\n  Arrow as PopoverArrow,\n  Content as PopoverContent,\n  Portal as PopoverPortal,\n  Root as PopoverRoot,\n  Trigger as PopoverTrigger,\n} from \"@radix-ui/react-popover\";\nimport { Clock, ExternalLink, Play } from \"lucide-react\";\nimport { motion, useReducedMotion } from \"motion/react\";\n\nimport type * as React from \"react\";\n\nexport interface RichTooltipProps {\n  actionHref?: string;\n  actionLabel?: string;\n  align?: \"start\" | \"center\" | \"end\";\n  className?: string;\n  description?: string;\n  href?: string;\n  icon?: React.ReactNode;\n  meta?: string;\n  onActionClick?: () => void;\n  side?: \"top\" | \"bottom\" | \"left\" | \"right\";\n  title: string;\n  trigger: React.ReactNode;\n}\n\nexport function YouTubeIcon({\n  className = \"h-4 w-4 fill-red-600\",\n}: {\n  className?: string;\n}) {\n  return (\n    <svg\n      aria-label=\"YouTube\"\n      className={className}\n      focusable=\"false\"\n      height=\"16\"\n      role=\"img\"\n      viewBox=\"0 0 16 16\"\n      width=\"16\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path d=\"M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.01 2.01 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.01 2.01 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31 31 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.01 2.01 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A100 100 0 0 1 7.858 2zM6.4 5.209v4.818l4.157-2.408z\" />\n    </svg>\n  );\n}\n\nexport default function RichTooltip({\n  trigger,\n  title,\n  description,\n  icon,\n  href,\n  actionLabel,\n  actionHref,\n  onActionClick,\n  meta,\n  className = \"\",\n  side = \"top\",\n  align = \"center\",\n}: RichTooltipProps) {\n  const shouldReduceMotion = useReducedMotion();\n  const Title = (\n    <div className=\"flex items-center gap-2 font-medium text-sm\">\n      {icon ?? <YouTubeIcon />}\n      {href ? (\n        <a\n          className=\"inline-flex items-center gap-1 hover:underline\"\n          href={href}\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          <span>{title}</span>\n          <ExternalLink className=\"h-3.5 w-3.5 opacity-70\" />\n        </a>\n      ) : (\n        <span>{title}</span>\n      )}\n    </div>\n  );\n\n  const renderAction = () => {\n    if (!actionLabel) {\n      return null;\n    }\n\n    const actionClassName =\n      \"inline-flex items-center gap-2 rounded-full bg-white px-3 py-2 font-medium text-black text-xs transition-colors hover:bg-white/90\";\n\n    if (actionHref) {\n      return (\n        <a\n          className={actionClassName}\n          href={actionHref}\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          <Play className=\"h-3.5 w-3.5\" /> {actionLabel}\n        </a>\n      );\n    }\n\n    return (\n      <button className={actionClassName} onClick={onActionClick} type=\"button\">\n        <Play className=\"h-3.5 w-3.5\" /> {actionLabel}\n      </button>\n    );\n  };\n\n  const Action = renderAction();\n\n  return (\n    <PopoverRoot>\n      <PopoverTrigger asChild>{trigger}</PopoverTrigger>\n      <PopoverPortal>\n        <PopoverContent\n          align={align}\n          asChild\n          className={`z-50 ${className}`}\n          side={side}\n          sideOffset={8}\n        >\n          <motion.div\n            animate={\n              shouldReduceMotion\n                ? { opacity: 1 }\n                : { filter: \"blur(0px)\", opacity: 1, scale: 1, y: 0 }\n            }\n            className=\"relative rounded-2xl border border-white/10 bg-black px-4 py-3 text-white shadow-xl\"\n            exit={\n              shouldReduceMotion\n                ? { opacity: 0, transition: { duration: 0 } }\n                : { filter: \"blur(8px)\", opacity: 0, scale: 0.95, y: 5 }\n            }\n            initial={\n              shouldReduceMotion\n                ? { opacity: 1 }\n                : { filter: \"blur(8px)\", opacity: 0, scale: 0.95, y: 5 }\n            }\n            transition={\n              shouldReduceMotion\n                ? { duration: 0 }\n                : {\n                    damping: 30,\n                    duration: 0.2,\n                    stiffness: 500,\n                    type: \"spring\" as const,\n                  }\n            }\n          >\n            {Title}\n            {description ? (\n              <p className=\"mt-3 max-w-xs text-balance text-base text-white/90 leading-relaxed\">\n                {description}\n              </p>\n            ) : null}\n            {meta || Action ? (\n              <div className=\"mt-4 flex items-center justify-between gap-3\">\n                {meta ? (\n                  <span className=\"inline-flex items-center gap-1 rounded-full bg-white/10 px-3 py-1 text-white text-xs\">\n                    <Clock className=\"h-3.5 w-3.5\" /> {meta}\n                  </span>\n                ) : (\n                  <span />\n                )}\n                {Action}\n              </div>\n            ) : null}\n\n            {/* Tail */}\n            <PopoverArrow className=\"fill-black\" />\n          </motion.div>\n        </PopoverContent>\n      </PopoverPortal>\n    </PopoverRoot>\n  );\n}\n","path":"index.tsx","target":"components/smoothui/rich-popover/index.tsx","type":"registry:ui"}],"name":"rich-popover","registryDependencies":[],"title":"Rich Popover","type":"registry:ui"}