{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "backspace",
  "title": "backspace",
  "description": "Animated backspace icon for React",
  "type": "registry:ui",
  "registryDependencies": [],
  "dependencies": ["motion"],
  "files": [
    {
      "path": "backspace.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 BackspaceIconHandle {\n  startAnimation: () => void;\n  stopAnimation: () => void;\n}\n\ninterface BackspaceIconProps extends HTMLAttributes<HTMLDivElement> {\n  size?: number;\n}\n\nconst SVG_VARIANTS: Variants = {\n  normal: {\n    x: 0,\n  },\n  animate: {\n    x: [0, -3, 0],\n    transition: {\n      duration: 0.3,\n      ease: \"easeOut\",\n    },\n  },\n};\n\nconst BackspaceIcon = forwardRef<BackspaceIconHandle, BackspaceIconProps>(\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        <motion.svg\n          animate={controls}\n          fill=\"none\"\n          height={size}\n          initial=\"normal\"\n          stroke=\"currentColor\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"1.5\"\n          variants={SVG_VARIANTS}\n          viewBox=\"0 0 24 24\"\n          width={size}\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path d=\"M12 9.75L14.25 12M14.25 12L16.5 14.25M14.25 12L16.5 9.75M14.25 12L12 14.25M9.42051 19.1705L3.04551 12.7955C2.60617 12.3562 2.60617 11.6438 3.04551 11.2045L9.42051 4.82951C9.63149 4.61853 9.91764 4.5 10.216 4.5L19.5 4.5C20.7427 4.5 21.75 5.50736 21.75 6.75V17.25C21.75 18.4926 20.7427 19.5 19.5 19.5H10.216C9.91764 19.5 9.63149 19.3815 9.42051 19.1705Z\" />\n        </motion.svg>\n      </div>\n    );\n  }\n);\n\nBackspaceIcon.displayName = \"BackspaceIcon\";\n\nexport { BackspaceIcon };\n",
      "type": "registry:ui"
    }
  ]
}