{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "eye-icon",
  "title": "Eye Icon",
  "description": "An animated eye icon with blinking and looking animation.",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "registry/chamaac/animated-icons/eye-icon.tsx",
      "content": "\"use client\";\n\nimport { useState, useId } from \"react\";\nimport { m, LazyMotion, domAnimation, SVGMotionProps } from \"motion/react\";\n\ninterface EyeIconProps\n  extends Omit<SVGMotionProps<SVGSVGElement>, \"strokeWidth\"> {\n  size?: number;\n  duration?: number;\n  strokeWidth?: number;\n  isHovered?: boolean;\n}\n\nconst EyeIcon = (props: EyeIconProps) => {\n  const {\n    size = 28,\n    duration = 3,\n    strokeWidth = 2,\n    isHovered = false,\n    className,\n    ...restProps\n  } = props;\n  const [isHoveredInternal, setIsHoveredInternal] = useState(false);\n  const clipId = useId();\n\n  const shouldAnimate = isHovered ? isHoveredInternal : true;\n\n  const eyeAnimation = {\n    d: [\n      \"M3 12c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6z\",\n      \"M3 12c2.4 4 5.4 6 9 6c3.6 0 6.6 -2 9 -6c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6z\",\n      \"M3 12c2.4 4 5.4 6 9 6c3.6 0 6.6 -2 9 -6c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6z\",\n      \"M3 12c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6z\",\n    ],\n  };\n\n  const lidAnimation = {\n    d: [\n      \"M3 12c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6\",\n      \"M3 12c2.4 4 5.4 6 9 6c3.6 0 6.6 -2 9 -6\",\n      \"M3 12c2.4 4 5.4 6 9 6c3.6 0 6.6 -2 9 -6\",\n      \"M3 12c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6\",\n    ],\n  };\n\n  const clipAnimationProps = {\n    animate: shouldAnimate ? eyeAnimation : undefined,\n    transition: {\n      duration: duration,\n      ease: \"easeInOut\" as const,\n      repeat: isHovered ? 0 : Infinity,\n      times: [0, 0.4, 0.6, 1],\n    },\n  };\n\n  const lidAnimationProps = {\n    animate: shouldAnimate ? lidAnimation : undefined,\n    transition: {\n      duration: duration,\n      ease: \"easeInOut\" as const,\n      repeat: isHovered ? 0 : Infinity,\n      times: [0, 0.4, 0.6, 1],\n    },\n  };\n\n  return (\n    <LazyMotion features={domAnimation}>\n      <m.svg\n        {...restProps}\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width={size}\n        height={size}\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth={strokeWidth}\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        className={className}\n        onMouseEnter={() => isHovered && setIsHoveredInternal(true)}\n        onMouseLeave={() => isHovered && setIsHoveredInternal(false)}\n      >\n        <defs>\n          <clipPath id={clipId}>\n            <m.path\n              d=\"M3 12c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6z\"\n              {...clipAnimationProps}\n            />\n          </clipPath>\n        </defs>\n        <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\n        <g clipPath={`url(#${clipId})`}>\n          <path d=\"M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0\" />\n        </g>\n        <path d=\"M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6\" />\n        <m.path\n          d=\"M3 12c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6\"\n          {...lidAnimationProps}\n        />\n      </m.svg>\n    </LazyMotion>\n  );\n};\n\nexport default EyeIcon;\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}