{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "clipboard",
  "title": "clipboard",
  "description": "Animated clipboard icon for React",
  "type": "registry:ui",
  "registryDependencies": [],
  "dependencies": ["motion"],
  "files": [
    {
      "path": "clipboard.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 ClipboardIconHandle {\n  startAnimation: () => void;\n  stopAnimation: () => void;\n}\n\ninterface ClipboardIconProps extends HTMLAttributes<HTMLDivElement> {\n  size?: number;\n}\n\nconst CLIP_VARIANTS: Variants = {\n  normal: { scaleY: 1, y: 0 },\n  animate: {\n    scaleY: [1, 0.8, 1],\n    y: [0, 0.5, 0],\n    transition: {\n      duration: 0.3,\n      ease: \"easeInOut\",\n    },\n  },\n};\n\nconst BOARD_VARIANTS: Variants = {\n  normal: { y: 0 },\n  animate: {\n    y: [0, -0.5, 0],\n    transition: {\n      duration: 0.3,\n      ease: \"easeInOut\",\n    },\n  },\n};\n\nconst ClipboardIcon = forwardRef<ClipboardIconHandle, ClipboardIconProps>(\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          <motion.path\n            animate={controls}\n            d=\"M15.6657 3.88789C15.3991 2.94272 14.5305 2.25 13.5 2.25H10.5C9.46954 2.25 8.60087 2.94272 8.33426 3.88789M15.6657 3.88789C15.7206 4.0825 15.75 4.28782 15.75 4.5V4.5C15.75 4.91421 15.4142 5.25 15 5.25H9C8.58579 5.25 8.25 4.91421 8.25 4.5V4.5C8.25 4.28782 8.27937 4.0825 8.33426 3.88789\"\n            initial=\"normal\"\n            style={{ originY: 0 }}\n            variants={CLIP_VARIANTS}\n          />\n          <motion.path\n            animate={controls}\n            d=\"M15.6657 3.88789C16.3119 3.93668 16.9545 3.99828 17.5933 4.07241C18.6939 4.20014 19.5 5.149 19.5 6.25699V19.5C19.5 20.7426 18.4926 21.75 17.25 21.75H6.75C5.50736 21.75 4.5 20.7426 4.5 19.5V6.25699C4.5 5.149 5.30608 4.20014 6.40668 4.07241C7.04547 3.99828 7.68808 3.93668 8.33426 3.88789\"\n            initial=\"normal\"\n            variants={BOARD_VARIANTS}\n          />\n        </svg>\n      </div>\n    );\n  }\n);\n\nClipboardIcon.displayName = \"ClipboardIcon\";\n\nexport { ClipboardIcon };\n",
      "type": "registry:ui"
    }
  ]
}