{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "code-xml", "type": "registry:ui", "title": "code-xml", "description": "Animated code xml icon for Vue", "dependencies": [ "motion-v" ], "files": [ { "path": "components/ui/code-xml.vue", "type": "registry:ui", "content": "\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" } ] }