feat: button loading, disabled(WIP), refactor to useButtonClasses, Spinner and vitest

docs/guide/spinner/examples/SpinnerBasicExample.vue

@@ -0,0 +1,8 @@
+<template>
+  <div class="inline-flex align-center gap-2 flex-wrap">
+    <spinner />
+  </div>
+</template>
+<script setup>
+import { Spinner } from '../../../../src/index'
+</script>

docs/guide/spinner/examples/SpinnerSizeExample.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="inline-flex align-center gap-2 flex-wrap">
+    <spinner />
+    <spinner size="6" />
+    <spinner size="8" />
+    <spinner size="10" />
+    <spinner size="12" />
+  </div>
+</template>
+<script setup>
+import { Spinner } from '../../../../src/index'
+</script>

docs/guide/spinner/spinner.md

@@ -0,0 +1,54 @@
+<script setup>
+import SpinnerBasicExample from './examples/SpinnerBasicExample.vue';
+import SpinnerSizeExample from './examples/SpinnerSizeExample.vue';
+</script>
+
+# Spinner
+
+reference: [https://flowbite.com/docs/components/spinner/](https://flowbite.com/docs/components/spinner/)
+
+## Basic example
+
+<SpinnerBasicExample />
+
+```vue
+<script setup>
+import { Spinner } from 'flowbite-vue'
+</script>
+<template>
+  <div class="inline-flex align-center gap-2 flex-wrap">
+    <spinner />
+  </div>
+</template>
+```
+
+## Prop - size
+
+```typescript
+defineProps({
+    size: {
+        type: String, // any string for w-${size} and h-${size} tailwind classes
+        default: '4',
+    },
+})
+```
+
+
+<SpinnerSizeExample />
+
+```vue
+<script setup>
+import { Button } from 'flowbite-vue'
+</script>
+<template>
+    <Button color="default">Default</Button>
+    <Button color="alternative">Alternative</Button>
+    <Button color="dark">Dark</Button>
+    <Button color="light">Light</Button>
+    <Button color="green">Green</Button>
+    <Button color="red">Red</Button>
+    <Button color="yellow">Yellow</Button>
+    <Button color="purple">Purple</Button>
+</template>
+```
+