{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "keyframes-multiple",
"type": "registry:ui",
"title": "keyframes-multiple",
"description": "Animated keyframes multiple icon for Vue",
"dependencies": [
"motion-v"
],
"files": [
{
"path": "components/ui/keyframes-multiple.vue",
"type": "registry:ui",
"content": "\n\n\n \n \n
\n\n"
},
{
"path": "composables/useIconAnimation.ts",
"type": "registry:lib",
"content": "import { ref, toValue, type MaybeRefOrGetter } from 'vue'\nimport type { AnimatedIconHandle } from '../types'\n\nexport type IconPose = 'normal' | 'animate'\n\ntype AnimationControls = {\n set: (variant: IconPose | Record) => void\n start: (variant: IconPose | Record) => Promise\n}\n\nexport function useReducedMotionFlag(\n reduced?: MaybeRefOrGetter,\n) {\n if (typeof window === 'undefined') return () => false\n return () => {\n const override = reduced === undefined ? undefined : toValue(reduced)\n if (override !== undefined) return override\n return window.matchMedia('(prefers-reduced-motion: reduce)').matches\n }\n}\n\nexport function useIconAnimation(options: {\n controls: AnimationControls\n loops?: boolean\n}): AnimatedIconHandle & {\n onMouseEnter: () => void\n onMouseLeave: () => void\n} {\n const { controls, loops = false } = options\n const isPlaying = ref(false)\n let run = 0\n\n const prefersReduced = () =>\n typeof window !== 'undefined' &&\n window.matchMedia('(prefers-reduced-motion: reduce)').matches\n\n async function startAnimation() {\n if (prefersReduced() || isPlaying.value) return\n\n isPlaying.value = true\n const current = ++run\n controls.set('normal')\n await controls.start('animate')\n if (run === current) isPlaying.value = false\n }\n\n function stopAnimation() {\n if (!loops) return\n run += 1\n isPlaying.value = false\n void controls.start('normal')\n }\n\n return {\n startAnimation,\n stopAnimation,\n onMouseEnter: () => {\n void startAnimation()\n },\n onMouseLeave: () => {\n stopAnimation()\n },\n }\n}\n"
},
{
"path": "types/animated-icon.ts",
"type": "registry:lib",
"content": "export interface AnimatedIconHandle {\n startAnimation: () => void\n stopAnimation: () => void\n}\n\nexport interface AnimatedIconProps {\n size?: number\n}\n"
}
]
}