{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "document-plus",
  "title": "document-plus",
  "description": "Animated document-plus icon for React",
  "type": "registry:ui",
  "registryDependencies": [],
  "dependencies": ["motion"],
  "files": [
    {
      "path": "document-plus.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 DocumentPlusIconHandle {\n  startAnimation: () => void;\n  stopAnimation: () => void;\n}\n\ninterface DocumentPlusIconProps extends HTMLAttributes<HTMLDivElement> {\n  size?: number;\n}\n\nconst VERTICAL_LINE_VARIANT: Variants = {\n  normal: {\n    opacity: 1,\n  },\n  animate: {\n    opacity: [0, 1],\n    pathLength: [0, 1],\n    transition: {\n      delay: 0.3,\n      duration: 0.2,\n      opacity: { duration: 0.1, delay: 0.3 },\n    },\n  },\n};\n\nconst HORIZONTAL_LINE_VARIANT: Variants = {\n  normal: {\n    opacity: 1,\n  },\n  animate: {\n    opacity: [0, 1],\n    pathLength: [0, 1],\n    transition: {\n      delay: 0.6,\n      duration: 0.2,\n      opacity: { duration: 0.1, delay: 0.6 },\n    },\n  },\n};\n\nconst DocumentPlusIcon = forwardRef<\n  DocumentPlusIconHandle,\n  DocumentPlusIconProps\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.375V20.625C4.5 21.2463 5.00368 21.75 5.625 21.75H18.375C18.9963 21.75 19.5 21.2463 19.5 20.625V11.25C19.5 6.27944 15.4706 2.25 10.5 2.25Z\" />\n        <motion.path\n          animate={controls}\n          d=\"M12 11.25v6\"\n          initial=\"normal\"\n          variants={VERTICAL_LINE_VARIANT}\n        />\n        <motion.path\n          animate={controls}\n          d=\"M9 14.25H15\"\n          initial=\"normal\"\n          variants={HORIZONTAL_LINE_VARIANT}\n        />\n      </svg>\n    </div>\n  );\n});\n\nDocumentPlusIcon.displayName = \"DocumentPlusIcon\";\n\nexport { DocumentPlusIcon };\n",
      "type": "registry:ui"
    }
  ]
}