{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "moon-02",
  "title": "moon-02",
  "description": "Animated moon icon",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "icons/moon-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 Moon02IconHandle {\n  startAnimation: () => void;\n  stopAnimation: () => void;\n}\n\ninterface Moon02IconProps extends HTMLAttributes<HTMLDivElement> {\n  size?: number;\n}\n\nconst starVariants: Variants = {\n  normal: {\n    visibility: 'hidden',\n    transform: 'scale(0.55)',\n    transition: { duration: 0.12, ease: [0.23, 1, 0.32, 1] },\n  },\n  animate: (i: number) => ({\n    visibility: ['hidden', 'visible', 'visible', 'visible', 'hidden'],\n    transform: [\n      'scale(0.55)',\n      'scale(1)',\n      'scale(0.78)',\n      'scale(1)',\n      'scale(0.55)',\n    ],\n    transition: {\n      duration: 1.3,\n      ease: [0.77, 0, 0.175, 1],\n      repeat: Infinity,\n      delay: i * 0.24,\n    },\n  }),\n};\nconst generatedGeometryVariants: Variants = {\n  normal: { visibility: 'hidden', transition: { duration: 0.08 } },\n  animate: { visibility: 'visible', transition: { duration: 0.08 } },\n};\n\nconst Moon02Icon = forwardRef<Moon02IconHandle, Moon02IconProps>(\n  ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {\n    const controls = useAnimation();\n    const { handleMouseEnter, handleMouseLeave } = useIconAnimation({\n      controls,\n      loops: true,\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          <path\n            d=\"M21.5 14.0784C20.3003 14.7189 18.9301 15.0821 17.4751 15.0821C12.7491 15.0821 8.91792 11.2509 8.91792 6.52485C8.91792 5.06986 9.28105 3.69968 9.92163 2.5C5.66765 3.49698 2.5 7.31513 2.5 11.8731C2.5 17.1899 6.8101 21.5 12.1269 21.5C16.6849 21.5 20.503 18.3324 21.5 14.0784Z\"\n            stroke=\"currentColor\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            strokeWidth=\"1.5\"\n          />\n          <motion.g\n            variants={generatedGeometryVariants}\n            animate={controls}\n            initial=\"normal\"\n          >\n            <motion.path\n              d=\"M17.5 4.2V6.2M16.5 5.2H18.5\"\n              stroke=\"currentColor\"\n              strokeLinecap=\"round\"\n              strokeWidth=\"1\"\n              variants={starVariants}\n              custom={0}\n              animate={controls}\n              initial=\"normal\"\n              style={{ transformOrigin: '17.5px 5.2px' }}\n            />\n            <motion.circle\n              cx=\"14.5\"\n              cy=\"8.5\"\n              r=\"0.6\"\n              fill=\"currentColor\"\n              variants={starVariants}\n              custom={1}\n              animate={controls}\n              initial=\"normal\"\n              style={{ transformOrigin: '14.5px 8.5px' }}\n            />\n            <motion.path\n              d=\"M19.3 8.25V9.75M18.55 9H20.05\"\n              stroke=\"currentColor\"\n              strokeLinecap=\"round\"\n              strokeWidth=\"0.9\"\n              variants={starVariants}\n              custom={2}\n              animate={controls}\n              initial=\"normal\"\n              style={{ transformOrigin: '19.3px 9px' }}\n            />\n          </motion.g>\n        </svg>\n      </div>\n    );\n  }\n);\n\nMoon02Icon.displayName = 'Moon02Icon';\n\nexport { Moon02Icon };\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"
}