feat(component): New toggle component (#152)

* feat(component): New toggle component

* adding docs for toggle

* blank lines

* fix type

* Update docs/components/toggle.md

* Update docs/components/toggle/examples/SizeToggle.vue

* Update src/components/Toggle/Toggle.vue

* Update src/components/Toggle/composables/useToggleClasses.ts

* Update src/components/Toggle/composables/useToggleClasses.ts

* Update src/components/Toggle/composables/useToggleClasses.ts

---------

Co-authored-by: Ilya Artamonov <ilya.sosidka@gmail.com>

docs/components/toggle/examples/CheckedToggle.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="flex flex-col gap-2">
+    <Toggle v-model="toggle" label="Toggle me" />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { Toggle } from '../../../../src/index'
+
+const toggle = ref(true)
+</script>

docs/components/toggle/examples/ColorsToggle.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="flex justify-between">
+    <Toggle v-model="toggle1" label="Red" color="red" />
+    <Toggle v-model="toggle2" label="Green" color="green" />
+    <Toggle v-model="toggle3" label="Purple" color="purple" />
+    <Toggle v-model="toggle4" label="Yellow" color="yellow" />
+    <Toggle v-model="toggle5" label="Teal" color="teal" />
+    <Toggle v-model="toggle6" label="Orange" color="orange" />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { Toggle } from '../../../../src/index'
+
+const toggle1 = ref(true)
+const toggle2 = ref(true)
+const toggle3 = ref(true)
+const toggle4 = ref(true)
+const toggle5 = ref(true)
+const toggle6 = ref(true)
+</script>

docs/components/toggle/examples/DefaultToggle.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="flex flex-col gap-2">
+    <Toggle v-model="toggle" label="Toggle me" />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { Toggle } from '../../../../src/index'
+
+const toggle = ref(false)
+</script>

docs/components/toggle/examples/DisabledToggle.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="flex flex-col gap-2">
+    <Toggle v-model="toggle" label="Toggle me" :disabled="true" />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { Toggle } from '../../../../src/index'
+
+const toggle = ref(false)
+</script>

docs/components/toggle/examples/SizeToggle.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="flex flex-col gap-2">
+    <Toggle label="Small" size="sm" />
+    <Toggle label="Medium" size="md" />
+    <Toggle label="Large" size="lg" />
+  </div>
+</template>
+
+<script setup>
+import { Toggle } from '../../../../src/index'
+
+</script>