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.md

@@ -0,0 +1,91 @@
+<script setup>
+  import DefaultToggle from './toggle/examples/DefaultToggle.vue'
+  import CheckedToggle from './toggle/examples/CheckedToggle.vue'
+  import DisabledToggle from './toggle/examples/DisabledToggle.vue'
+  import ColorsToggle from './toggle/examples/ColorsToggle.vue'
+  import SizeToggle from './toggle/examples/SizeToggle.vue'
+</script>
+
+# Vue Toggle Component - Flowbite
+
+#### Use the toggle component to switch between a binary state of true or false using a single click available in multiple sizes, variants, and colors
+
+---
+
+:::tip
+Original reference: [https://flowbite.com/docs/forms/toggle/](https://flowbite.com/docs/forms/toggle/)
+:::
+
+The toggle component can be used to receive a simple “yes” or “no” type of answer from the user by choosing a single option from two options available in multiple sizes, styles, and colors coded with the utility classes from Tailwind CSS and with dark mode support.
+
+## Default toggle
+```vue
+<script setup>
+import { Toggle } from 'flowbite-vue'
+import { ref } from 'vue'
+
+const toggle = ref(false)
+</script>
+<template>
+  <Toggle v-model="toggle" label="Toggle me" />
+</template>
+```
+
+<DefaultToggle />
+
+## Checked toggle
+```vue
+<script setup>
+import { Toggle } from 'flowbite-vue'
+import { ref } from 'vue'
+
+const toggle = ref(true)
+</script>
+<template>
+  <Toggle v-model="toggle" label="Toggle me" />
+</template>
+```
+
+<CheckedToggle />
+
+## Disabled toggle
+```vue
+<script setup>
+import { Toggle } from 'flowbite-vue'
+import { ref } from 'vue'
+
+const toggle = ref(false)
+</script>
+<template>
+  <Toggle v-model="toggle" label="Toggle me" :disabled="true" />
+</template>
+```
+
+<DisabledToggle />
+
+## Colors
+```vue
+<template>
+  <div>
+    <Toggle label="Red" color="red" />
+    <Toggle label="Green" color="green" />
+    <Toggle label="Purple" color="purple" />
+    <Toggle label="Yellow" color="yellow" />
+    <Toggle label="Teal" color="teal" />
+    <Toggle label="Orange" color="orange" />
+  </div>
+</template>
+```
+
+<ColorsToggle />
+
+## Size
+```vue
+<template>
+  <Toggle label="Small" size="sm" />
+  <Toggle label="Medium" size="md" />
+  <Toggle label="Large" size="lg" />
+</template>
+```
+
+<SizeToggle />

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>