From 6d043fd53d0d6e48bf20781aded4df32d3034abe Mon Sep 17 00:00:00 2001
From: Alexandr <a.pashkevich22@gmail.com>
Date: Thu, 30 Jun 2022 19:56:08 +0300
Subject: [PATCH] feat: add gradient(monochrome, duotone), outline colored
 button. prefix and suffix slots button

---
 docs/.vitepress/theme/clear.css               |   7 +
 docs/.vitepress/theme/index.js                |   2 +
 docs/guide/button/button.md                   | 135 +++++++++++++++++-
 .../{ => examples}/ButtonColorExample.vue     |   2 +-
 .../examples/ButtonGradientDuotoneExample.vue |  14 ++
 .../ButtonGradientMonochromeExample.vue       |  15 ++
 .../examples/ButtonOutlineColorExample.vue    |  13 ++
 .../{ => examples}/ButtonPillExample.vue      |   2 +-
 .../button/examples/ButtonPrefixExample.vue   |  13 ++
 .../{ => examples}/ButtonSizeExample.vue      |   2 +-
 .../button/examples/ButtonSuffixExample.vue   |  13 ++
 package-lock.json                             |  50 +++++++
 package.json                                  |   6 +-
 src/components/Button/Button.vue              |  65 ++++++++-
 tailwind.config.js                            |  11 +-
 15 files changed, 327 insertions(+), 23 deletions(-)
 create mode 100644 docs/.vitepress/theme/clear.css
 rename docs/guide/button/{ => examples}/ButtonColorExample.vue (90%)
 create mode 100644 docs/guide/button/examples/ButtonGradientDuotoneExample.vue
 create mode 100644 docs/guide/button/examples/ButtonGradientMonochromeExample.vue
 create mode 100644 docs/guide/button/examples/ButtonOutlineColorExample.vue
 rename docs/guide/button/{ => examples}/ButtonPillExample.vue (91%)
 create mode 100644 docs/guide/button/examples/ButtonPrefixExample.vue
 rename docs/guide/button/{ => examples}/ButtonSizeExample.vue (87%)
 create mode 100644 docs/guide/button/examples/ButtonSuffixExample.vue

diff --git a/docs/.vitepress/theme/clear.css b/docs/.vitepress/theme/clear.css
new file mode 100644
index 0000000..0653c2f
--- /dev/null
+++ b/docs/.vitepress/theme/clear.css
@@ -0,0 +1,7 @@
+button,
+input,
+optgroup,
+select,
+textarea {
+    border: inherit; /* border: 0 by default in vitepress removes all border for border class */
+}
\ No newline at end of file
diff --git a/docs/.vitepress/theme/index.js b/docs/.vitepress/theme/index.js
index cee7c4a..881b43c 100644
--- a/docs/.vitepress/theme/index.js
+++ b/docs/.vitepress/theme/index.js
@@ -2,4 +2,6 @@ import './tailwind.css'
 
 import DefaultTheme from 'vitepress/theme'
 
+import './clear.css'
+
 export default DefaultTheme
diff --git a/docs/guide/button/button.md b/docs/guide/button/button.md
index e0525c3..a90a67b 100644
--- a/docs/guide/button/button.md
+++ b/docs/guide/button/button.md
@@ -1,14 +1,19 @@
 <script setup>
-import ButtonColorExample from './ButtonColorExample.vue';
-import ButtonSizeExample from './ButtonSizeExample.vue';
-import ButtonPillExample from './ButtonPillExample.vue';
+import ButtonColorExample from './examples/ButtonColorExample.vue';
+import ButtonSizeExample from './examples/ButtonSizeExample.vue';
+import ButtonPillExample from './examples/ButtonPillExample.vue';
+import ButtonGradientMonochromeExample from './examples/ButtonGradientMonochromeExample.vue';
+import ButtonGradientDuotoneExample from './examples/ButtonGradientDuotoneExample.vue';
+import ButtonOutlineColorExample from './examples/ButtonOutlineColorExample.vue';
+import ButtonPrefixExample from './examples/ButtonPrefixExample.vue';
+import ButtonSuffixExample from './examples/ButtonSuffixExample.vue';
 </script>
 
 # Button
 
 reference: [https://flowbite.com/docs/components/buttons/](https://flowbite.com/docs/components/buttons/)
 
-## Props -> Color
+## Prop - color
 
 ```typescript
 type ButtonVariant = 'default' | 'alternative' | 'dark' | 'light' | 'green' | 'red' | 'yellow' | 'purple'
@@ -40,7 +45,7 @@ import { Button } from 'flowbite-vue'
 ```
 
 
-## Props -> Size
+## Prop - size
 
 ```typescript
 type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
@@ -68,7 +73,7 @@ import { Button } from 'flowbite-vue'
 </template>
 ```
 
-## Props -> Pill
+## Prop - pill
 
 ```typescript
 defineProps({
@@ -98,4 +103,122 @@ import { Button } from 'flowbite-vue'
 </template>
 ```
 
+## Prop - gradient (monochrome)
 
+```typescript
+type ButtonMonochromeGradient = 'blue' | 'green' | 'cyan' | 'teal' | 'lime' | 'red' | 'pink' | 'purple'
+type ButtonDuotoneGradient = 'purple-blue' | 'cyan-blue' | 'green-blue' | 'purple-pink' | 'pink-orange' | 'teal-lime' | 'red-yellow'
+type ButtonGradient = ButtonDuotoneGradient | ButtonMonochromeGradient
+
+defineProps({
+    gradient: {
+        type: [String, null] as PropType<ButtonGradient | null>,
+        default: null,
+    },
+})
+```
+
+
+<ButtonGradientMonochromeExample />
+
+```vue
+<script setup>
+import { Button } from 'flowbite-vue'
+</script>
+<template>
+  <Button gradient="blue">Blue</Button>
+  <Button gradient="cyan">Cyan</Button>
+  <Button gradient="green">Green</Button>
+  <Button gradient="lime">Lime</Button>
+  <Button gradient="pink">Pink</Button>
+  <Button gradient="purple">Purple</Button>
+  <Button gradient="red">Red</Button>
+  <Button gradient="teal">Teal</Button>
+</template>
+```
+
+
+## Prop - gradient  (duotone)
+
+<ButtonGradientDuotoneExample />
+
+```vue
+<script setup>
+import { Button } from 'flowbite-vue'
+</script>
+<template>
+  <Button gradient="purple-blue">Purple to blue</Button>
+  <Button gradient="cyan-blue">Cyan to blue</Button>
+  <Button gradient="green-blue">Green to blue</Button>
+  <Button gradient="purple-pink">Purple to pink</Button>
+  <Button gradient="pink-orange">Pink to orange</Button>
+  <Button gradient="teal-lime">Teal to lime</Button>
+  <Button gradient="red-yellow">Red to yellow</Button>
+</template>
+```
+
+## Prop - outline (color)
+
+```typescript
+defineProps({
+    outline: {
+        type: Boolean,
+        default: false,
+    },
+})
+```
+
+
+<ButtonOutlineColorExample />
+
+```vue
+<script setup>
+import { Button } from 'flowbite-vue'
+</script>
+<template>
+  <Button gradient="purple-blue">Purple to blue</Button>
+  <Button gradient="cyan-blue">Cyan to blue</Button>
+  <Button gradient="green-blue">Green to blue</Button>
+  <Button gradient="purple-pink">Purple to pink</Button>
+  <Button gradient="pink-orange">Pink to orange</Button>
+  <Button gradient="teal-lime">Teal to lime</Button>
+  <Button gradient="red-yellow">Red to yellow</Button>
+</template>
+```
+
+
+## Slot - prefix
+
+<ButtonPrefixExample />
+
+```vue
+<script setup>
+import { Button } from 'flowbite-vue'
+</script>
+<template>
+  <Button color="default">
+    <template #prefix>
+      <svg class="w-5 h-5 mr-2 -ml-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path></svg>
+    </template>
+    Buy
+  </Button>
+</template>
+```
+
+## Slot - suffix
+
+<ButtonSuffixExample />
+
+```vue
+<script setup>
+import { Button } from 'flowbite-vue'
+</script>
+<template>
+  <Button color="default">
+    Choose plan
+    <template #suffix>
+      <svg class="w-5 h-5 ml-2 -mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+    </template>
+  </Button>
+</template>
+```
diff --git a/docs/guide/button/ButtonColorExample.vue b/docs/guide/button/examples/ButtonColorExample.vue
similarity index 90%
rename from docs/guide/button/ButtonColorExample.vue
rename to docs/guide/button/examples/ButtonColorExample.vue
index 5306c76..779be8e 100644
--- a/docs/guide/button/ButtonColorExample.vue
+++ b/docs/guide/button/examples/ButtonColorExample.vue
@@ -11,5 +11,5 @@
   </div>
 </template>
 <script setup>
-import { Button } from '../../../src/index'
+import { Button } from '../../../../src/index'
 </script>
diff --git a/docs/guide/button/examples/ButtonGradientDuotoneExample.vue b/docs/guide/button/examples/ButtonGradientDuotoneExample.vue
new file mode 100644
index 0000000..8892e36
--- /dev/null
+++ b/docs/guide/button/examples/ButtonGradientDuotoneExample.vue
@@ -0,0 +1,14 @@
+<template>
+  <div class="inline-flex align-center gap-2 flex-wrap">
+    <Button gradient="purple-blue">Purple to blue</Button>
+    <Button gradient="cyan-blue">Cyan to blue</Button>
+    <Button gradient="green-blue">Green to blue</Button>
+    <Button gradient="purple-pink">Purple to pink</Button>
+    <Button gradient="pink-orange">Pink to orange</Button>
+    <Button gradient="teal-lime">Teal to lime</Button>
+    <Button gradient="red-yellow">Red to yellow</Button>
+  </div>
+</template>
+<script setup>
+import { Button } from '../../../../src/index'
+</script>
diff --git a/docs/guide/button/examples/ButtonGradientMonochromeExample.vue b/docs/guide/button/examples/ButtonGradientMonochromeExample.vue
new file mode 100644
index 0000000..fccba4b
--- /dev/null
+++ b/docs/guide/button/examples/ButtonGradientMonochromeExample.vue
@@ -0,0 +1,15 @@
+<template>
+  <div class="inline-flex align-center gap-2 flex-wrap">
+    <Button gradient="blue">Blue</Button>
+    <Button gradient="cyan">Cyan</Button>
+    <Button gradient="green">Green</Button>
+    <Button gradient="lime">Lime</Button>
+    <Button gradient="pink">Pink</Button>
+    <Button gradient="purple">Purple</Button>
+    <Button gradient="red">Red</Button>
+    <Button gradient="teal">Teal</Button>
+  </div>
+</template>
+<script setup>
+import { Button } from '../../../../src/index'
+</script>
diff --git a/docs/guide/button/examples/ButtonOutlineColorExample.vue b/docs/guide/button/examples/ButtonOutlineColorExample.vue
new file mode 100644
index 0000000..3a0e9b2
--- /dev/null
+++ b/docs/guide/button/examples/ButtonOutlineColorExample.vue
@@ -0,0 +1,13 @@
+<template>
+  <div class="inline-flex align-center gap-2 flex-wrap">
+    <Button color="default" outline>Default</Button>
+    <Button color="dark" outline>Dark</Button>
+    <Button color="green" outline>Green</Button>
+    <Button color="red" outline>Red</Button>
+    <Button color="yellow" outline>Yellow</Button>
+    <Button color="purple" outline>Purple</Button>
+  </div>
+</template>
+<script setup>
+import { Button } from '../../../../src/index'
+</script>
diff --git a/docs/guide/button/ButtonPillExample.vue b/docs/guide/button/examples/ButtonPillExample.vue
similarity index 91%
rename from docs/guide/button/ButtonPillExample.vue
rename to docs/guide/button/examples/ButtonPillExample.vue
index 2b8eaff..c7184ad 100644
--- a/docs/guide/button/ButtonPillExample.vue
+++ b/docs/guide/button/examples/ButtonPillExample.vue
@@ -11,5 +11,5 @@
   </div>
 </template>
 <script setup>
-import { Button } from '../../../src/index'
+import { Button } from '../../../../src/index'
 </script>
diff --git a/docs/guide/button/examples/ButtonPrefixExample.vue b/docs/guide/button/examples/ButtonPrefixExample.vue
new file mode 100644
index 0000000..13a6e83
--- /dev/null
+++ b/docs/guide/button/examples/ButtonPrefixExample.vue
@@ -0,0 +1,13 @@
+<template>
+  <div class="inline-flex align-center gap-2 flex-wrap">
+    <Button color="default">
+      <template #prefix>
+        <svg class="w-5 h-5 mr-2 -ml-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path></svg>
+      </template>
+      Buy
+    </Button>
+  </div>
+</template>
+<script setup>
+import { Button } from '../../../../src/index'
+</script>
diff --git a/docs/guide/button/ButtonSizeExample.vue b/docs/guide/button/examples/ButtonSizeExample.vue
similarity index 87%
rename from docs/guide/button/ButtonSizeExample.vue
rename to docs/guide/button/examples/ButtonSizeExample.vue
index 6468c9b..36ee40b 100644
--- a/docs/guide/button/ButtonSizeExample.vue
+++ b/docs/guide/button/examples/ButtonSizeExample.vue
@@ -8,5 +8,5 @@
   </div>
 </template>
 <script setup>
-import { Button } from '../../../src/index'
+import { Button } from '../../../../src/index'
 </script>
diff --git a/docs/guide/button/examples/ButtonSuffixExample.vue b/docs/guide/button/examples/ButtonSuffixExample.vue
new file mode 100644
index 0000000..f536ca2
--- /dev/null
+++ b/docs/guide/button/examples/ButtonSuffixExample.vue
@@ -0,0 +1,13 @@
+<template>
+  <div class="inline-flex align-center gap-2 flex-wrap">
+    <Button color="default">
+      Choose plan
+      <template #suffix>
+        <svg class="w-5 h-5 ml-2 -mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+      </template>
+    </Button>
+  </div>
+</template>
+<script setup>
+import { Button } from '../../../../src/index'
+</script>
diff --git a/package-lock.json b/package-lock.json
index 81146d6..852ac5e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -366,6 +366,47 @@
       "integrity": "sha512-SmQLDyhz+6lGJhPELsBdzXGc+AcaT8stgkbiTFGpXPe8Tl1tJaBw1A6pxDqDuRsVkD8uscrkx3hA7QDOoKYtyw==",
       "dev": true
     },
+    "@volar/code-gen": {
+      "version": "0.38.2",
+      "resolved": "https://registry.npmjs.org/@volar/code-gen/-/code-gen-0.38.2.tgz",
+      "integrity": "sha512-H81I6d7rZB7teqL+zhK/Xz1v0/kKkUwkB0Aq6b4+BTCqcJeiZkoWxd0gFhrhWTnUoqiM83lhoTGo2vkvx5YagQ==",
+      "dev": true,
+      "requires": {
+        "@volar/source-map": "0.38.2"
+      }
+    },
+    "@volar/source-map": {
+      "version": "0.38.2",
+      "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-0.38.2.tgz",
+      "integrity": "sha512-DWcYbYt9SPwk0r4VmXk1F0v4X5+hCqH1JRkAWSeJymQyXCQ2OQDEbY2PF12a7y2qn4FUBD2gOba2TynAqI8ZFQ==",
+      "dev": true
+    },
+    "@volar/vue-code-gen": {
+      "version": "0.38.2",
+      "resolved": "https://registry.npmjs.org/@volar/vue-code-gen/-/vue-code-gen-0.38.2.tgz",
+      "integrity": "sha512-whLunD6phSGWBUHZKdTxeglrpzQu26ii8CRVapFdjfyMaVhQ7ESNeIAhkTVyg2ovOPc0PiDYPQEPzfWAADIWog==",
+      "dev": true,
+      "requires": {
+        "@volar/code-gen": "0.38.2",
+        "@volar/source-map": "0.38.2",
+        "@vue/compiler-core": "^3.2.37",
+        "@vue/compiler-dom": "^3.2.37",
+        "@vue/shared": "^3.2.37"
+      }
+    },
+    "@volar/vue-typescript": {
+      "version": "0.38.2",
+      "resolved": "https://registry.npmjs.org/@volar/vue-typescript/-/vue-typescript-0.38.2.tgz",
+      "integrity": "sha512-5IKvSK2m5yUmH6iu/tNScVlvJGuiHawTfSmjxaMs+/tod25WeK37LEdf+pdKtlJ30bYTQmmkAuEfG01QvvBRGQ==",
+      "dev": true,
+      "requires": {
+        "@volar/code-gen": "0.38.2",
+        "@volar/source-map": "0.38.2",
+        "@volar/vue-code-gen": "0.38.2",
+        "@vue/compiler-sfc": "^3.2.37",
+        "@vue/reactivity": "^3.2.37"
+      }
+    },
     "@vue/compiler-core": {
       "version": "3.2.37",
       "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.37.tgz",
@@ -2139,6 +2180,15 @@
         }
       }
     },
+    "vue-tsc": {
+      "version": "0.38.2",
+      "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-0.38.2.tgz",
+      "integrity": "sha512-+OMmpw9BZC9khul3I1HGtWchv7BCiaM7NvfdilVAiOFkjnivIoaW6jJm6YPQJaEPouePtpkDUWovyzgNxWdDsw==",
+      "dev": true,
+      "requires": {
+        "@volar/vue-typescript": "0.38.2"
+      }
+    },
     "which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
diff --git a/package.json b/package.json
index 6534fb4..1312e50 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "serve": "vitepress serve docs",
     "build:docs": "vitepress build docs",
     "build": "vite build",
+    "build-types": "vue-tsc --declaration --emitDeclarationOnly",
     "lint": "eslint --ext .ts,.vue --ignore-path .gitignore --fix src",
     "format": "prettier .  --write"
   },
@@ -40,11 +41,12 @@
     "flowbite": "^1.4.2",
     "postcss": "^8.4.6",
     "prettier": "^2.3.2",
-    "tailwindcss": "^3.0.24",
+    "tailwindcss": "^3.1.4",
     "typescript": "^4.7.3",
     "vite": "^2.4.3",
     "vitepress": "^1.0.0-alpha.4",
-    "vue-eslint-parser": "^9.0.3"
+    "vue-eslint-parser": "^9.0.3",
+    "vue-tsc": "^0.38.2"
   },
   "postcss": {
     "plugins": {
diff --git a/src/components/Button/Button.vue b/src/components/Button/Button.vue
index 39899c1..74c97cb 100644
--- a/src/components/Button/Button.vue
+++ b/src/components/Button/Button.vue
@@ -1,14 +1,20 @@
 <template>
   <button type="button" :class="bindClasses">
+    <slot name="prefix" />
     <slot/>
+    <slot name="suffix" />
   </button>
 </template>
 <script lang="ts" setup>
-import { computed } from 'vue'
+import {computed, useSlots} from 'vue'
 import type { PropType } from 'vue'
 
 import classNames from 'classnames'
 
+export type ButtonMonochromeGradient = 'blue' | 'green' | 'cyan' | 'teal' | 'lime' | 'red' | 'pink' | 'purple'
+export type ButtonDuotoneGradient = 'purple-blue' | 'cyan-blue' | 'green-blue' | 'purple-pink' | 'pink-orange' | 'teal-lime' | 'red-yellow'
+export type ButtonGradient = ButtonDuotoneGradient | ButtonMonochromeGradient
+
 export type ButtonVariant = 'default' | 'alternative' | 'dark' | 'light' | 'green' | 'red' | 'yellow' | 'purple'
 export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
 
@@ -17,6 +23,10 @@ const props = defineProps({
     type: String as PropType<ButtonVariant>,
     default: 'default',
   },
+  gradient: {
+    type: [String, null] as PropType<ButtonGradient | null>,
+    default: null,
+  },
   size: {
     type: String as PropType<ButtonSize>,
     default: 'md',
@@ -25,13 +35,35 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  outline: {
+    type: Boolean,
+    default: false,
+  },
 })
 
+const slots = useSlots()
+
 const bindClasses = computed(() => {
+  let backgroundClass = ''
+  if(props.gradient) {
+    backgroundClass = buttonGradientClasses[props.gradient]
+  } else {
+    if(props.outline) { // if outline and no gradient
+      if(['alternative', 'light'].includes(props.color)) { // invalid colors for outline
+        backgroundClass = buttonColorClasses[props.color]
+      } else {
+        backgroundClass = buttonOutlineColorClasses[props.color as unknown as keyof typeof buttonOutlineColorClasses]
+      }
+    } else {
+      backgroundClass = buttonColorClasses[props.color]
+    }
+  }
   return classNames(
-      buttonColorClasses[props.color],
+      backgroundClass,
       buttonSizeClasses[props.size],
-      props.pill ? 'rounded-full' : '',
+      props.pill ? '!rounded-full' : '',
+      (slots.prefix || slots.suffix) ? 'inline-flex items-center' : '',
+
   )
 })
 
@@ -46,6 +78,33 @@ const buttonColorClasses: Record<ButtonVariant, string> = {
   purple: 'focus:outline-none text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-900',
 }
 
+const buttonOutlineColorClasses: Record<Exclude<ButtonVariant, 'light' | 'alternative'>, string> = {
+  dark: 'text-gray-900 hover:text-white border border-gray-800 hover:bg-gray-900 focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium rounded-lg text-sm text-center dark:border-gray-600 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-800',
+  default: 'text-blue-700 hover:text-white border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm text-center dark:border-blue-500 dark:text-blue-500 dark:hover:text-white dark:hover:bg-blue-600 dark:focus:ring-blue-800',
+  green: 'text-green-700 hover:text-white border border-green-700 hover:bg-green-800 focus:ring-4 focus:outline-none focus:ring-green-300 font-medium rounded-lg text-sm text-center dark:border-green-500 dark:text-green-500 dark:hover:text-white dark:hover:bg-green-600 dark:focus:ring-green-800',
+  purple: 'text-purple-700 hover:text-white border border-purple-700 hover:bg-purple-800 focus:ring-4 focus:outline-none focus:ring-purple-300 font-medium rounded-lg text-sm text-center dark:border-purple-400 dark:text-purple-400 dark:hover:text-white dark:hover:bg-purple-500 dark:focus:ring-purple-900',
+  red: 'text-red-700 hover:text-white border border-red-700 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-sm text-center dark:border-red-500 dark:text-red-500 dark:hover:text-white dark:hover:bg-red-600 dark:focus:ring-red-900',
+  yellow: 'text-yellow-400 hover:text-white border border-yellow-400 hover:bg-yellow-500 focus:ring-4 focus:outline-none focus:ring-yellow-300 font-medium rounded-lg text-sm text-center dark:border-yellow-300 dark:text-yellow-300 dark:hover:text-white dark:hover:bg-yellow-400 dark:focus:ring-yellow-900',
+}
+
+const buttonGradientClasses: Record<ButtonGradient, string> = {
+  'cyan-blue': 'text-white bg-gradient-to-r from-cyan-500 to-blue-500 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-cyan-300 dark:focus:ring-cyan-800 font-medium rounded-lg',
+  'green-blue': 'text-white bg-gradient-to-br from-green-400 to-blue-600 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-green-200 dark:focus:ring-green-800 font-medium rounded-lg',
+  'pink-orange': 'text-white bg-gradient-to-br from-pink-500 to-orange-400 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-pink-200 dark:focus:ring-pink-800 font-medium rounded-lg',
+  'purple-blue': 'text-white bg-gradient-to-br from-purple-600 to-blue-500 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 font-medium rounded-lg',
+  'purple-pink': 'text-white bg-gradient-to-r from-purple-500 to-pink-500 hover:bg-gradient-to-l focus:ring-4 focus:outline-none focus:ring-purple-200 dark:focus:ring-purple-800 font-medium rounded-lg',
+  'red-yellow': 'text-gray-900 bg-gradient-to-r from-red-200 via-red-300 to-yellow-200 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-red-100 dark:focus:ring-red-400 font-medium rounded-lg',
+  'teal-lime': 'text-gray-900 bg-gradient-to-r from-teal-200 to-lime-200 hover:bg-gradient-to-l hover:from-teal-200 hover:to-lime-200 focus:ring-4 focus:outline-none focus:ring-lime-200 dark:focus:ring-teal-700 font-medium rounded-lg',
+  'blue': 'text-white bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 rounded-lg',
+  'cyan': 'text-white bg-gradient-to-r from-cyan-500 via-cyan-600 to-cyan-700 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-cyan-300 dark:focus:ring-cyan-800 rounded-lg',
+  'green': 'text-white bg-gradient-to-r from-green-500 via-green-600 to-green-700 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-green-300 dark:focus:ring-green-800 rounded-lg',
+  'lime': 'text-gray-900 bg-gradient-to-r from-lime-500 via-lime-600 to-lime-700 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-lime-300 dark:focus:ring-lime-800 rounded-lg',
+  'pink': 'text-white bg-gradient-to-r from-pink-500 via-pink-600 to-pink-700 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-pink-300 dark:focus:ring-pink-800 rounded-lg',
+  'purple': 'text-white bg-gradient-to-r from-purple-500 via-purple-600 to-purple-700 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-purple-300 dark:focus:ring-purple-800 rounded-lg',
+  'red': 'text-white bg-gradient-to-r from-red-500 via-red-600 to-red-700 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-red-300 dark:focus:ring-red-800 rounded-lg',
+  'teal': 'text-white bg-gradient-to-r from-teal-500 via-teal-600 to-teal-700 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-teal-300 dark:focus:ring-teal-800 rounded-lg',
+}
+
 const buttonSizeClasses: Record<ButtonSize, string> = {
   xs: 'text-xs px-2 py-1',
   sm: 'text-sm px-3 py-1.5',
diff --git a/tailwind.config.js b/tailwind.config.js
index 3a06ba4..fd8fc0f 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,12 +1,5 @@
 module.exports = {
-  content: [
-    './docs/.vitepress/**/*.{js,ts,vue}',
-    './docs/**/*.{js,ts,vue,md}',
-    './src/**/*.{js,ts,vue}',
-
-  ],
-  theme: {
-    extend: {},
-  },
+  content: ['./docs/.vitepress/**/*.{js,ts,vue}', './docs/**/*.{js,ts,vue,md}', './src/**/*.{js,ts,vue}'],
   plugins: [require('flowbite/plugin')],
+  theme: {},
 }