{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "add-circle",
  "title": "add-circle",
  "description": "Animated add circle icon",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "icons/add-circle.tsx",
      "content": "'use client';\n\nimport type { Variants } from 'motion/react';\nimport { motion, useAnimation } from 'motion/react';\nimport type { HTMLAttributes } from 'react';\nimport { forwardRef, useCallback, useImperativeHandle, useRef } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport interface AddCircleIconHandle {\n  startAnimation: () => void;\n  stopAnimation: () => void;\n}\n\ninterface AddCircleIconProps extends HTMLAttributes<HTMLDivElement> {\n  size?: number;\n}\n\n// the boundary makes room, then the add mark resolves at its center\nconst circleVariants: Variants = {\n  normal: { transform: 'scale(1)' },\n  animate: {\n    transform: ['scale(1)', 'scale(1.06)', 'scale(1)'],\n    transition: { duration: 0.42, ease: [0.23, 1, 0.32, 1] },\n  },\n};\n\nconst plusVariants: Variants = {\n  normal: { transform: 'rotate(0deg) scale(1)' },\n  animate: {\n    transform: ['rotate(-12deg) scale(0.72)', 'rotate(3deg) scale(1.12)', 'rotate(0deg) scale(1)'],\n    transition: { duration: 0.42, ease: [0.23, 1, 0.32, 1] },\n  },\n};\n\nconst AddCircleIcon = forwardRef<AddCircleIconHandle, AddCircleIconProps>(\n  ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {\n    const controls = useAnimation();\n    const isControlledRef = useRef(false);\n\n    useImperativeHandle(ref, () => {\n      isControlledRef.current = true;\n      return {\n        startAnimation: () => controls.start('animate'),\n        stopAnimation: () => controls.start('normal'),\n      };\n    });\n\n    const handleMouseEnter = useCallback(\n      (e: React.MouseEvent<HTMLDivElement>) => {\n        if (!isControlledRef.current) controls.start('animate');\n        else onMouseEnter?.(e);\n      },\n      [controls, onMouseEnter]\n    );\n\n    const handleMouseLeave = useCallback(\n      (e: React.MouseEvent<HTMLDivElement>) => {\n        if (!isControlledRef.current) controls.start('normal');\n        else onMouseLeave?.(e);\n      },\n      [controls, onMouseLeave]\n    );\n\n    return (\n      <div\n        className={cn(className)}\n        onMouseEnter={handleMouseEnter}\n        onMouseLeave={handleMouseLeave}\n        {...props}\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width={size}\n          height={size}\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          overflow=\"visible\"\n        >\n          <motion.path\n            d=\"M22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12Z\"\n            stroke=\"currentColor\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            strokeWidth=\"1.5\"\n            variants={circleVariants}\n            animate={controls}\n            initial=\"normal\"\n            style={{ transformOrigin: '12px 12px' }}\n          />\n          <motion.path\n            d=\"M12 8V16M16 12H8\"\n            stroke=\"currentColor\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            strokeWidth=\"1.5\"\n            variants={plusVariants}\n            animate={controls}\n            initial=\"normal\"\n            style={{ transformOrigin: '12px 12px' }}\n          />\n        </svg>\n      </div>\n    );\n  }\n);\n\nAddCircleIcon.displayName = 'AddCircleIcon';\n\nexport { AddCircleIcon };\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}