{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sparkle-icon",
  "title": "Sparkle Icon",
  "description": "An animated sparkle icon with twinkling stars.",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "registry/chamaac/animated-icons/sparkle-icon.tsx",
      "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport { m, LazyMotion, domAnimation, SVGMotionProps } from \"motion/react\";\n\ninterface SparkleIconProps\n  extends Omit<SVGMotionProps<SVGSVGElement>, \"strokeWidth\"> {\n  size?: number;\n  duration?: number;\n  strokeWidth?: number;\n  isHovered?: boolean;\n}\n\nconst SparkleIcon = (props: SparkleIconProps) => {\n  const {\n    size = 28,\n    duration = 2,\n    strokeWidth = 2,\n    isHovered = false,\n    className,\n    ...restProps\n  } = props;\n  const [isHoveredInternal, setIsHoveredInternal] = useState(false);\n\n  const shouldAnimate = isHovered ? isHoveredInternal : true;\n\n  const mainSparkleProps = {\n    animate: shouldAnimate\n      ? { scale: [1, 1.1, 1], rotate: [0, 10, 0, -10, 0] }\n      : { scale: 1, rotate: 0 },\n    transition: {\n      duration: duration,\n      ease: \"easeInOut\" as const,\n      repeat: isHovered ? 0 : Infinity,\n    },\n  };\n\n  const smallSparkle1Props = {\n    animate: shouldAnimate\n      ? { opacity: [0.3, 1, 0.3], scale: [0.8, 1.2, 0.8] }\n      : { opacity: 1, scale: 1 },\n    transition: {\n      duration: duration * 0.8,\n      ease: \"easeInOut\" as const,\n      repeat: isHovered ? 0 : Infinity,\n      delay: duration * 0.2,\n    },\n  };\n\n  const smallSparkle2Props = {\n    animate: shouldAnimate\n      ? { opacity: [0.3, 1, 0.3], scale: [0.8, 1.2, 0.8] }\n      : { opacity: 1, scale: 1 },\n    transition: {\n      duration: duration * 0.8,\n      ease: \"easeInOut\" as const,\n      repeat: isHovered ? 0 : Infinity,\n      delay: duration * 0.5,\n    },\n  };\n\n  return (\n    <LazyMotion features={domAnimation}>\n      <m.svg\n        {...restProps}\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width={size}\n        height={size}\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth={strokeWidth}\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        className={className}\n        overflow=\"visible\"\n        onMouseEnter={() => isHovered && setIsHoveredInternal(true)}\n        onMouseLeave={() => isHovered && setIsHoveredInternal(false)}\n      >\n        <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\n        <m.path\n          d=\"M12 3l1.5 4.5l4.5 1.5l-4.5 1.5l-1.5 4.5l-1.5 -4.5l-4.5 -1.5l4.5 -1.5z\"\n          style={{ transformOrigin: \"12px 9px\" }}\n          {...mainSparkleProps}\n        />\n        <m.path\n          d=\"M18 16l.5 1.5l1.5 .5l-1.5 .5l-.5 1.5l-.5 -1.5l-1.5 -.5l1.5 -.5z\"\n          style={{ transformOrigin: \"18px 18px\" }}\n          {...smallSparkle1Props}\n        />\n        <m.path\n          d=\"M5 18l.5 1l1 .5l-1 .5l-.5 1l-.5 -1l-1 -.5l1 -.5z\"\n          style={{ transformOrigin: \"5px 19px\" }}\n          {...smallSparkle2Props}\n        />\n      </m.svg>\n    </LazyMotion>\n  );\n};\n\nexport default SparkleIcon;\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}