{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "delete-02",
  "title": "delete-02",
  "description": "Animated delete icon",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "icons/delete-02.tsx",
      "content": "'use client';\n\nimport type { Variants } from 'motion/react';\nimport { motion, useAnimation } from 'motion/react';\nimport type { HTMLAttributes } from 'react';\nimport { forwardRef } from 'react';\nimport { useIconAnimation } from '@/lib/use-icon-animation';\nimport { cn } from '@/lib/utils';\n\nexport interface Delete02IconHandle {\n  startAnimation: () => void;\n  stopAnimation: () => void;\n}\n\ninterface Delete02IconProps extends HTMLAttributes<HTMLDivElement> {\n  size?: number;\n}\n\n// the hinged lid opens, then the bin absorbs the weight as it closes\nconst lidVariants: Variants = {\n  normal: { transform: 'translateY(0px) rotate(0deg)' },\n  animate: {\n    transform: [\n      'translateY(0px) rotate(0deg)',\n      'translateY(0.2px) rotate(1deg)',\n      'translateY(-2.4px) rotate(-9deg)',\n      'translateY(-2.2px) rotate(-8deg)',\n      'translateY(0.18px) rotate(1deg)',\n      'translateY(-0.08px) rotate(-0.4deg)',\n      'translateY(0px) rotate(0deg)',\n    ],\n    transition: {\n      duration: 0.82,\n      times: [0, 0.1, 0.34, 0.52, 0.78, 0.9, 1],\n      ease: [0.77, 0, 0.175, 1],\n    },\n  },\n};\n\nconst binVariants: Variants = {\n  normal: { transform: 'translateY(0px) scaleY(1)' },\n  animate: {\n    transform: [\n      'translateY(0px) scaleY(1)',\n      'translateY(0px) scaleY(1)',\n      'translateY(0.35px) scaleY(0.97)',\n      'translateY(-0.14px) scaleY(1.012)',\n      'translateY(0px) scaleY(1)',\n    ],\n    transition: {\n      duration: 0.82,\n      times: [0, 0.7, 0.8, 0.91, 1],\n      ease: [0.23, 1, 0.32, 1],\n    },\n  },\n};\n\nconst Delete02Icon = forwardRef<Delete02IconHandle, Delete02IconProps>(\n  ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {\n    const controls = useAnimation();\n    const { handleMouseEnter, handleMouseLeave } = useIconAnimation({\n      controls,\n      loops: false,\n      onMouseEnter,\n      onMouseLeave,\n      ref,\n    });\n\n    return (\n      <div\n        className={cn(className)}\n        onMouseEnter={handleMouseEnter}\n        onMouseLeave={handleMouseLeave}\n        {...props}\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width={size}\n          height={size}\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          overflow=\"visible\"\n        >\n          <motion.path\n            d=\"M19.5 5.5L18.8803 15.5251C18.7219 18.0864 18.6428 19.3671 18.0008 20.2879C17.6833 20.7431 17.2747 21.1273 16.8007 21.416C15.8421 22 14.559 22 11.9927 22C9.42312 22 8.1383 22 7.17905 21.4149C6.7048 21.1257 6.296 20.7408 5.97868 20.2848C5.33688 19.3626 5.25945 18.0801 5.10461 15.5152L4.5 5.5\"\n            stroke=\"currentColor\"\n            strokeLinecap=\"round\"\n            strokeWidth=\"1.5\"\n            variants={binVariants}\n            animate={controls}\n            initial=\"normal\"\n            style={{ transformOrigin: '12px 22px' }}\n          />\n          <motion.path\n            d=\"M3 5.5H21M16.0557 5.5L15.3731 4.09173C14.9196 3.15626 14.6928 2.68852 14.3017 2.39681C14.215 2.3321 14.1231 2.27454 14.027 2.2247C13.5939 2 13.0741 2 12.0345 2C10.9688 2 10.436 2 9.99568 2.23412C9.8981 2.28601 9.80498 2.3459 9.71729 2.41317C9.32164 2.7167 9.10063 3.20155 8.65861 4.17126L8.05292 5.5\"\n            stroke=\"currentColor\"\n            strokeLinecap=\"round\"\n            strokeWidth=\"1.5\"\n            variants={lidVariants}\n            animate={controls}\n            initial=\"normal\"\n            style={{ transformOrigin: '18px 5.5px' }}\n          />\n          <motion.path\n            d=\"M9.5 16.5L9.5 10.5\"\n            stroke=\"currentColor\"\n            strokeLinecap=\"round\"\n            strokeWidth=\"1.5\"\n            variants={binVariants}\n            animate={controls}\n            initial=\"normal\"\n            style={{ transformOrigin: '12px 22px' }}\n          />\n          <motion.path\n            d=\"M14.5 16.5L14.5 10.5\"\n            stroke=\"currentColor\"\n            strokeLinecap=\"round\"\n            strokeWidth=\"1.5\"\n            variants={binVariants}\n            animate={controls}\n            initial=\"normal\"\n            style={{ transformOrigin: '12px 22px' }}\n          />\n        </svg>\n      </div>\n    );\n  }\n);\n\nDelete02Icon.displayName = 'Delete02Icon';\n\nexport { Delete02Icon };\n",
      "type": "registry:ui"
    },
    {
      "path": "lib/use-icon-animation.ts",
      "content": "'use client';\n\nimport type { LegacyAnimationControls } from 'motion/react';\nimport { useReducedMotion } from 'motion/react';\nimport type {\n  ForwardedRef,\n  MouseEventHandler,\n} from 'react';\nimport { useCallback, useImperativeHandle, useRef } from 'react';\n\nexport interface AnimatedIconHandle {\n  startAnimation: () => void;\n  stopAnimation: () => void;\n}\n\ninterface UseIconAnimationOptions {\n  controls: LegacyAnimationControls;\n  loops?: boolean;\n  onMouseEnter?: MouseEventHandler<HTMLDivElement>;\n  onMouseLeave?: MouseEventHandler<HTMLDivElement>;\n  ref: ForwardedRef<AnimatedIconHandle>;\n}\n\nexport function useIconAnimation({\n  controls,\n  loops = false,\n  onMouseEnter,\n  onMouseLeave,\n  ref,\n}: UseIconAnimationOptions) {\n  const shouldReduceMotion = useReducedMotion();\n  const isControlledRef = useRef(false);\n  const isPlayingRef = useRef(false);\n  const runRef = useRef(0);\n\n  const startAnimation = useCallback(() => {\n    if (shouldReduceMotion || isPlayingRef.current) return;\n\n    isPlayingRef.current = true;\n    const run = ++runRef.current;\n    controls.set('normal');\n    void controls.start('animate').then(() => {\n      if (runRef.current === run) isPlayingRef.current = false;\n    });\n  }, [controls, shouldReduceMotion]);\n\n  const stopAnimation = useCallback(() => {\n    if (!loops) return;\n\n    runRef.current++;\n    isPlayingRef.current = false;\n    void controls.start('normal');\n  }, [controls, loops]);\n\n  useImperativeHandle(\n    ref,\n    () => {\n      isControlledRef.current = true;\n      return { startAnimation, stopAnimation };\n    },\n    [startAnimation, stopAnimation]\n  );\n\n  const handleMouseEnter = useCallback<MouseEventHandler<HTMLDivElement>>(\n    (event) => {\n      onMouseEnter?.(event);\n      if (!isControlledRef.current) startAnimation();\n    },\n    [onMouseEnter, startAnimation]\n  );\n\n  const handleMouseLeave = useCallback<MouseEventHandler<HTMLDivElement>>(\n    (event) => {\n      onMouseLeave?.(event);\n      if (!isControlledRef.current) stopAnimation();\n    },\n    [onMouseLeave, stopAnimation]\n  );\n\n  return { handleMouseEnter, handleMouseLeave };\n}\n",
      "type": "registry:lib"
    }
  ],
  "type": "registry:ui"
}