```html
<script setup>
import { ref } from 'vue'

const isOpen = ref(false)
</script>

<template>
  <MotionTransform v-model:open="isOpen">
    <template #head="{ isOpen, classes }">
      <div :class="classes.click">
        <h3>{{ isOpen ? '▲' : '▼' }} Заголовок</h3>
      </div>
    </template>

    <template #body="{ isShow, classes }">
      <div v-if="isShow" :class="classes.open">
        <p>Основное содержимое</p>
        <button :class="classes.close">Закрыть</button>
      </div>
    </template>
  </MotionTransform>
</template>
````

### `head`

Слот для размещения области заголовка, которая служит триггером для открытия/закрытия компонента.

**Параметры:**
- `props: MotionTransformControlItem` — объект с данными управления компонентом

### `body`

Слот для размещения основной области содержимого, которая появляется при открытии компонента.

**Параметры:**
- `props: MotionTransformControlItem` — объект с данными управления компонентом

## MotionTransformControlItem

`MotionTransformControlItem` — объект, передаваемый во все слоты компонента MotionTransform, содержащий данные для управления состоянием.

### Структура типа

```typescript
type MotionTransformControlItem = {
  /** Состояние открытия компонента */
  isOpen: ComputedRef<boolean>

  /** Видимость или подготовка к показу */
  isShow: ComputedRef<boolean>

  /** Набор вспомогательных CSS-классов для стилизации состояний */
  classes: MotionTransformClassList
}
```

### Свойства

- **`isOpen`** — вычисляемое свойство, указывающее открыт ли компонент
- **`isShow`** — вычисляемое свойство, `true` если компонент видим или находится в подготовке к показу (анимация)
- **`classes`** — объект с CSS-классами для управления состояниями и поведением

### MotionTransformClassList

Список доступных CSS-классов для стилизации и управления поведением:

```typescript
type MotionTransformClassList = {
  /** Класс видимости компонента */
  show: string

  /** Класс открытого состояния */
  open: string

  /** Класс режима окна */
  window: string

  /** Класс клика */
  click: string

  /** Класс отключения поведения */
  none: string

  /** Класс глобального отключения */
  noneGlobal: string

  /** Класс закрытия */
  close: string
}
```
