{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "battery-charging-01",
  "title": "battery-charging-01",
  "description": "Animated battery charging icon",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "icons/battery-charging-01.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 BatteryCharging01IconHandle {\n  startAnimation: () => void;\n  stopAnimation: () => void;\n}\n\ninterface BatteryCharging01IconProps extends HTMLAttributes<HTMLDivElement> {\n  size?: number;\n}\n\n// five cells build to a shared full-charge surge, then hand the energy back to the bolt\ntype ChargeCell = { start: number; done: number };\n\nconst chargeCellVariants: Variants = {\n  normal: { visibility: 'hidden', transform: 'scaleY(0.08)' },\n  animate: ({ start, done }: ChargeCell) => ({\n    visibility: ['hidden', 'hidden', 'visible', 'visible', 'visible', 'visible', 'hidden', 'hidden'],\n    transform: [\n      'scaleY(0.08)',\n      'scaleY(0.08)',\n      'scaleY(1)',\n      'scaleY(1)',\n      'scaleY(1.18)',\n      'scaleY(0.94)',\n      'scaleY(0.12)',\n      'scaleY(0.12)',\n    ],\n    transition: {\n      duration: 1.18,\n      ease: [0.23, 1, 0.32, 1],\n      times: [0, start, done, 0.64, 0.7, 0.76, 0.86, 1],\n    },\n  }),\n};\n\nconst chargedBatteryVariants: Variants = {\n  normal: { transform: 'scale(1)' },\n  animate: {\n    transform: [\n      'scale(1)',\n      'scale(1)',\n      'scale(1.055)',\n      'scale(0.985)',\n      'scale(1)',\n      'scale(1)',\n    ],\n    transition: {\n      duration: 1.18,\n      ease: [0.23, 1, 0.32, 1],\n      times: [0, 0.64, 0.7, 0.77, 0.86, 1],\n    },\n  },\n};\n\nconst chargeBoltVariants: Variants = {\n  normal: { visibility: 'visible', transform: 'scale(1)' },\n  animate: {\n    visibility: [\n      'visible',\n      'visible',\n      'visible',\n      'visible',\n      'hidden',\n      'hidden',\n      'hidden',\n      'visible',\n      'visible',\n      'visible',\n    ],\n    transform: [\n      'scale(1)',\n      'scale(1)',\n      'scale(0.72)',\n      'scale(0)',\n      'scale(0)',\n      'scale(0)',\n      'scale(0)',\n      'scale(0)',\n      'scale(1.14)',\n      'scale(1)',\n    ],\n    transition: {\n      duration: 1.18,\n      ease: [0.23, 1, 0.32, 1],\n      times: [0, 0.03, 0.08, 0.14, 0.141, 0.76, 0.819, 0.82, 0.92, 1],\n    },\n  },\n};\nconst generatedGeometryVariants: Variants = {\n  normal: {\n    visibility: 'hidden',\n    transform: 'scaleX(1)',\n    transition: { duration: 0.08 },\n  },\n  animate: {\n    visibility: 'visible',\n    transform: [\n      'scaleX(1)',\n      'scaleX(1)',\n      'scaleX(1)',\n      'scaleX(0.58)',\n      'scaleX(0.08)',\n      'scaleX(0.08)',\n      'scaleX(1)',\n    ],\n    transition: {\n      duration: 1.18,\n      ease: [0.23, 1, 0.32, 1],\n      times: [0, 0.64, 0.76, 0.82, 0.87, 0.92, 1],\n    },\n  },\n};\n\n\nconst BatteryCharging01Icon = forwardRef<BatteryCharging01IconHandle, BatteryCharging01IconProps>(\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        <motion.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          variants={chargedBatteryVariants}\n          animate={controls}\n          initial=\"normal\"\n          style={{ transformOrigin: '11px 12px' }}\n        >\n          <motion.g\n            variants={generatedGeometryVariants}\n            animate={controls}\n            initial=\"normal\"\n            style={{ transformOrigin: '10.4px 12px' }}\n          >\n          <motion.path\n            d=\"M4.4 15V9\"\n            stroke=\"currentColor\"\n            strokeLinecap=\"round\"\n            strokeWidth=\"2.2\"\n            variants={chargeCellVariants}\n            custom={{ start: 0.05, done: 0.28 }}\n            animate={controls}\n            initial=\"normal\"\n            style={{ transformOrigin: '4.4px 15px' }}\n          />\n          <motion.path\n            d=\"M7.4 15V9\"\n            stroke=\"currentColor\"\n            strokeLinecap=\"round\"\n            strokeWidth=\"2.2\"\n            variants={chargeCellVariants}\n            custom={{ start: 0.14, done: 0.37 }}\n            animate={controls}\n            initial=\"normal\"\n            style={{ transformOrigin: '7.4px 15px' }}\n          />\n          <motion.path\n            d=\"M10.4 15V9\"\n            stroke=\"currentColor\"\n            strokeLinecap=\"round\"\n            strokeWidth=\"2.2\"\n            variants={chargeCellVariants}\n            custom={{ start: 0.23, done: 0.46 }}\n            animate={controls}\n            initial=\"normal\"\n            style={{ transformOrigin: '10.4px 15px' }}\n          />\n          <motion.path\n            d=\"M13.4 15V9\"\n            stroke=\"currentColor\"\n            strokeLinecap=\"round\"\n            strokeWidth=\"2.2\"\n            variants={chargeCellVariants}\n            custom={{ start: 0.32, done: 0.55 }}\n            animate={controls}\n            initial=\"normal\"\n            style={{ transformOrigin: '13.4px 15px' }}\n          />\n          <motion.path\n            d=\"M16.4 15V9\"\n            stroke=\"currentColor\"\n            strokeLinecap=\"round\"\n            strokeWidth=\"2.2\"\n            variants={chargeCellVariants}\n            custom={{ start: 0.41, done: 0.64 }}\n            animate={controls}\n            initial=\"normal\"\n            style={{ transformOrigin: '16.4px 15px' }}\n          />\n          </motion.g>\n          <path\n            d=\"M2 12C2 9.17157 2 7.75736 2.87868 6.87868C3.75736 6 5.17157 6 8 6H13C15.8284 6 17.2426 6 18.1213 6.87868C19 7.75736 19 9.17157 19 12C19 14.8284 19 16.2426 18.1213 17.1213C17.2426 18 15.8284 18 13 18H8C5.17157 18 3.75736 18 2.87868 17.1213C2 16.2426 2 14.8284 2 12Z\"\n            stroke=\"currentColor\"\n            strokeLinecap=\"round\"\n            strokeWidth=\"1.5\"\n          />\n          <motion.path\n            d=\"M10.8282 9L9.08572 11.1749C8.89899 11.4079 9.03283 11.7433 9.33733 11.8053L11.1627 12.1773C11.4873 12.2434 11.6111 12.6147 11.3842 12.8413L9.22216 15\"\n            stroke=\"currentColor\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            strokeWidth=\"1.5\"\n            variants={chargeBoltVariants}\n            animate={controls}\n            initial=\"normal\"\n            style={{ transformOrigin: '10.2px 12px' }}\n          />\n          <path\n            d=\"M19 9.5L20.0272 9.6712C20.7085 9.78475 21.0491 9.84152 21.3076 10.0067C21.5618 10.1691 21.7612 10.4044 21.8796 10.6819C22 10.964 22 11.3093 22 12C22 12.6907 22 13.036 21.8796 13.3181C21.7612 13.5956 21.5618 13.8309 21.3076 13.9933C21.0491 14.1585 20.7085 14.2153 20.0272 14.3288L19 14.5\"\n            stroke=\"currentColor\"\n            strokeLinecap=\"round\"\n            strokeWidth=\"1.5\"\n          />\n        </motion.svg>\n      </div>\n    );\n  }\n);\n\nBatteryCharging01Icon.displayName = 'BatteryCharging01Icon';\n\nexport { BatteryCharging01Icon };\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"
}