feat: use vueuse extra

package.json

@@ -51,6 +51,7 @@
     "vue": ">=3.0.0"
   },
   "dependencies": {
+    "@tmg0/vueuse-extra": "0.0.2-alpha.2",
     "@vueuse/core": "^11.2.0",
     "defu": "^6.1.4",
     "scule": "^1.3.0"

packages/core/src/composables/use-hero.ts

@@ -1,10 +1,10 @@
 import type { HeroProps } from '../components/hero'
+import { useStyle } from '@tmg0/vueuse-extra'
 import { tryOnBeforeUnmount, tryOnMounted, useElementBounding } from '@vueuse/core'
 import { useElementTransform, useMotion } from '@vueuse/motion'
 import { defu } from 'defu'
 import { computed, type MaybeRef, unref, watch } from 'vue'
 import { type HeroContext, useHeroContext } from '../composables/use-hero-context'
-import { useStyle } from './use-style'
 
 export interface UseHeroProps extends Omit<HeroProps, 'as' | 'ignore'> {
   ignore?: string[]
@@ -66,7 +66,7 @@ export function useHero(target: MaybeRef<HTMLElement | SVGElement | undefined>,
 
     for (let i = 0; i < elt.children.length; i++) {
       const child = elt.children[i] as HTMLElement
-      child.style.transform = `scaleX(${1 / x}) scaleY(${1 / y})`
+      child.style.transform = `scaleX(${1 / (x as number)}) scaleY(${1 / (y as number)})`
     }
   })