{
  "name": "hover-border-gradient",
  "type": "registry:ui",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "components/ui/hover-border-gradient.tsx",
      "content": "\"use client\";\nimport React, { useState, useEffect, useRef } from \"react\";\n\nimport { motion } from \"motion/react\";\nimport { cn } from \"@/lib/utils\";\n\ntype Direction = \"TOP\" | \"LEFT\" | \"BOTTOM\" | \"RIGHT\";\n\nexport function HoverBorderGradient({\n  children,\n  containerClassName,\n  className,\n  as: Tag = \"button\",\n  duration = 1,\n  clockwise = true,\n  ...props\n}: React.PropsWithChildren<\n  {\n    as?: React.ElementType;\n    containerClassName?: string;\n    className?: string;\n    duration?: number;\n    clockwise?: boolean;\n  } & React.HTMLAttributes<HTMLElement>\n>) {\n  const [hovered, setHovered] = useState<boolean>(false);\n  const [direction, setDirection] = useState<Direction>(\"TOP\");\n\n  const rotateDirection = (currentDirection: Direction): Direction => {\n    const directions: Direction[] = [\"TOP\", \"LEFT\", \"BOTTOM\", \"RIGHT\"];\n    const currentIndex = directions.indexOf(currentDirection);\n    const nextIndex = clockwise\n      ? (currentIndex - 1 + directions.length) % directions.length\n      : (currentIndex + 1) % directions.length;\n    return directions[nextIndex];\n  };\n\n  const movingMap: Record<Direction, string> = {\n    TOP: \"radial-gradient(20.7% 50% at 50% 0%, hsl(0, 0%, 100%) 0%, rgba(255, 255, 255, 0) 100%)\",\n    LEFT: \"radial-gradient(16.6% 43.1% at 0% 50%, hsl(0, 0%, 100%) 0%, rgba(255, 255, 255, 0) 100%)\",\n    BOTTOM:\n      \"radial-gradient(20.7% 50% at 50% 100%, hsl(0, 0%, 100%) 0%, rgba(255, 255, 255, 0) 100%)\",\n    RIGHT:\n      \"radial-gradient(16.2% 41.199999999999996% at 100% 50%, hsl(0, 0%, 100%) 0%, rgba(255, 255, 255, 0) 100%)\",\n  };\n\n  const highlight =\n    \"radial-gradient(75% 181.15942028985506% at 50% 50%, #3275F8 0%, rgba(255, 255, 255, 0) 100%)\";\n\n  useEffect(() => {\n    if (!hovered) {\n      const interval = setInterval(() => {\n        setDirection((prevState) => rotateDirection(prevState));\n      }, duration * 1000);\n      return () => clearInterval(interval);\n    }\n  }, [hovered]);\n  return (\n    <Tag\n      onMouseEnter={(event: React.MouseEvent<HTMLDivElement>) => {\n        setHovered(true);\n      }}\n      onMouseLeave={() => setHovered(false)}\n      className={cn(\n        \"relative flex rounded-full border  content-center bg-black/20 hover:bg-black/10 transition duration-500 dark:bg-white/20 items-center flex-col flex-nowrap gap-10 h-min justify-center overflow-visible p-px decoration-clone w-fit\",\n        containerClassName\n      )}\n      {...props}\n    >\n      <div\n        className={cn(\n          \"w-auto text-white z-10 bg-black px-4 py-2 rounded-[inherit]\",\n          className\n        )}\n      >\n        {children}\n      </div>\n      <motion.div\n        className={cn(\n          \"flex-none inset-0 overflow-hidden absolute z-0 rounded-[inherit]\"\n        )}\n        style={{\n          filter: \"blur(2px)\",\n          position: \"absolute\",\n          width: \"100%\",\n          height: \"100%\",\n        }}\n        initial={{ background: movingMap[direction] }}\n        animate={{\n          background: hovered\n            ? [movingMap[direction], highlight]\n            : movingMap[direction],\n        }}\n        transition={{ ease: \"linear\", duration: duration ?? 1 }}\n      />\n      <div className=\"bg-black absolute z-1 flex-none inset-[2px] rounded-[100px]\" />\n    </Tag>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ui/hover-border-gradient.tsx"
    }
  ],
  "author": "Manu Arora <hi@manuarora.in>",
  "title": "Hover Border Gradient"
}