{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "document-magnifying-glass",
  "title": "document-magnifying-glass",
  "description": "Animated document-magnifying-glass icon for React",
  "type": "registry:ui",
  "registryDependencies": [],
  "dependencies": ["motion"],
  "files": [
    {
      "path": "document-magnifying-glass.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 DocumentMagnifyingGlassIconHandle {\n  startAnimation: () => void;\n  stopAnimation: () => void;\n}\n\ninterface DocumentMagnifyingGlassIconProps\n  extends HTMLAttributes<HTMLDivElement> {\n  size?: number;\n}\n\nconst VARIANTS: Variants = {\n  normal: {\n    x: 0,\n    y: 0,\n  },\n  animate: {\n    x: [0, 0, -2, 0],\n    y: [0, -3, 0, 0],\n    transition: {\n      duration: 1,\n      bounce: 0.3,\n    },\n  },\n};\n\nconst DocumentMagnifyingGlassIcon = forwardRef<\n  DocumentMagnifyingGlassIconHandle,\n  DocumentMagnifyingGlassIconProps\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\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) {\n        onMouseEnter?.(e);\n      } else {\n        controls.start(\"animate\");\n      }\n    },\n    [controls, onMouseEnter]\n  );\n\n  const handleMouseLeave = useCallback(\n    (e: React.MouseEvent<HTMLDivElement>) => {\n      if (isControlledRef.current) {\n        onMouseLeave?.(e);\n      } else {\n        controls.start(\"normal\");\n      }\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        fill=\"none\"\n        height={size}\n        stroke=\"currentColor\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        strokeWidth=\"1.5\"\n        viewBox=\"0 0 24 24\"\n        width={size}\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path d=\"M19.5 14.25V11.625C19.5 9.76104 17.989 8.25 16.125 8.25H14.625C14.0037 8.25 13.5 7.74632 13.5 7.125V5.625C13.5 3.76104 11.989 2.25 10.125 2.25H8.25M10.5 2.25H5.625C5.00368 2.25 4.5 2.75368 4.5 3.375V19.875C4.5 20.4963 5.00368 21 5.625 21H18.375C18.9963 21 19.5 20.4963 19.5 19.875V11.25C19.5 6.27944 15.4706 2.25 10.5 2.25Z\" />\n        <motion.path\n          animate={controls}\n          d=\"M13.4812 15.7312L15 17.25M14.25 13.875C14.25 15.3247 13.0747 16.5 11.625 16.5C10.1753 16.5 9 15.3247 9 13.875C9 12.4253 10.1753 11.25 11.625 11.25C13.0747 11.25 14.25 12.4253 14.25 13.875Z\"\n          initial=\"normal\"\n          variants={VARIANTS}\n        />\n      </svg>\n    </div>\n  );\n});\n\nDocumentMagnifyingGlassIcon.displayName = \"DocumentMagnifyingGlassIcon\";\n\nexport { DocumentMagnifyingGlassIcon };\n",
      "type": "registry:ui"
    }
  ]
}