<script setup lang="ts">import { motion } from 'motion-v'import type { VariantType } from 'motion-v' const props = defineProps<{  open: boolean}>() const variants: { [k: string]: VariantType | ((custom: unknown) => VariantType) } = {  normal: {    rotate: 0,    y: 0,    opacity: 1,  },  close: (custom: unknown) => {    const c = custom as number    return {      rotate: c === 1 ? 45 : c === 3 ? -45 : 0,      y: c === 1 ? 6 : c === 3 ? -6 : 0,      opacity: c === 2 ? 0 : 1,      transition: {        type: 'spring',        stiffness: 260,        damping: 20,      },    }  },} const state = computed(() => props.open ? 'close' : 'normal')</script> <template>  <UButton    size="sm"    variant="ghost"    color="neutral"    class="-me-1.5"    square  >    <svg      xmlns="http://www.w3.org/2000/svg"      class="size-5"      viewBox="0 0 24 24"      fill="none"      stroke="currentColor"      stroke-width="2"      stroke-linecap="round"      stroke-linejoin="round"    >      <motion.line        x1="4"        y1="6"        x2="20"        y2="6"        :variants="variants"        :animate="state"        :custom="1"        class="outline-none"      />      <motion.line        x1="4"        y1="12"        x2="20"        y2="12"        :variants="variants"        :animate="state"        :custom="2"        class="outline-none"      />      <motion.line        x1="4"        y1="18"        x2="20"        y2="18"        :variants="variants"        :animate="state"        :custom="3"        class="outline-none"      />    </svg>  </UButton></template>