Merge pull request #39 from themesberg/chank1e/develop

Chank1e/develop

docs/.vitepress/config.ts

@@ -27,37 +27,37 @@ function buildSidebar() {
 
 function getComponents() {
   return [
-    { text: 'Alert', link: '/guide/alert/alert.md' },
-    { text: 'Button', link: '/guide/button/button.md' },
-    { text: 'Button Group', link: '/guide/buttonGroup/buttonGroup.md' },
-    { text: 'Dropdown', link: '/guide/dropdown/dropdown.md' },
-    { text: 'Spinner', link: '/guide/spinner/spinner.md' },
-    { text: 'Tabs', link: '/guide/tabs/tabs.md' },
-    { text: 'ListGroup', link: 'guide/listGroup/listGroup.md' },
+    { text: 'Alert', link: '/components/alert/alert.md' },
+    { text: 'Button', link: '/components/button/button.md' },
+    { text: 'Button Group', link: '/components/buttonGroup/buttonGroup.md' },
+    { text: 'Dropdown', link: '/components/dropdown/dropdown.md' },
+    { text: 'Spinner', link: '/components/spinner/spinner.md' },
+    { text: 'Tabs', link: '/components/tabs/tabs.md' },
+    { text: 'ListGroup', link: 'components/listGroup/listGroup.md' },
 
-    { text: '- Accordion', link: 'guide/accordion/accordion.md' },
-    { text: '- Avatar', link: 'guide/avatar/avatar.md' },
-    { text: '- Badge', link: 'guide/badge/badge.md' },
-    { text: '- Breadcrumb', link: 'guide/breadcrumb/breadcrumb.md' },
-    { text: '- Card', link: 'guide/card/card.md' },
-    { text: '- Carousel', link: 'guide/carousel/carousel.md' },
-    { text: '- Footer', link: 'guide/footer/footer.md' },
-    { text: '- Modal', link: 'guide/modal/modal.md' },
-    { text: '- Navbar', link: 'guide/navbar/navbar.md' },
-    { text: '- Pagination', link: 'guide/pagination/pagination.md' },
-    { text: '- Progress', link: 'guide/progress/progress.md' },
-    { text: '- Rating', link: 'guide/rating/rating.md' },
-    { text: '- Sidebar', link: 'guide/sidebar/sidebar.md' },
-    { text: '- Table', link: 'guide/table/table.md' },
-    { text: '- Timeline', link: 'guide/timeline/timeline.md' },
-    { text: '- Toast', link: 'guide/toast/toast.md' },
-    { text: '- Tooltip', link: 'guide/tooltip/tooltip.md' },
+    { text: '- Accordion', link: 'components/accordion/accordion.md' },
+    { text: '- Avatar', link: 'components/avatar/avatar.md' },
+    { text: '- Badge', link: 'components/badge/badge.md' },
+    { text: '- Breadcrumb', link: 'components/breadcrumb/breadcrumb.md' },
+    { text: '- Card', link: 'components/card/card.md' },
+    { text: '- Carousel', link: 'components/carousel/carousel.md' },
+    { text: '- Footer', link: 'components/footer/footer.md' },
+    { text: '- Modal', link: 'components/modal/modal.md' },
+    { text: '- Navbar', link: 'components/navbar/navbar.md' },
+    { text: '- Pagination', link: 'components/pagination/pagination.md' },
+    { text: '- Progress', link: 'components/progress/progress.md' },
+    { text: '- Rating', link: 'components/rating/rating.md' },
+    { text: '- Sidebar', link: 'components/sidebar/sidebar.md' },
+    { text: '- Table', link: 'components/table/table.md' },
+    { text: '- Timeline', link: 'components/timeline/timeline.md' },
+    { text: '- Toast', link: 'components/toast/toast.md' },
+    { text: '- Tooltip', link: 'components/tooltip/tooltip.md' },
   ]
 }
 
 function getUtils() {
   return [
-    { text: 'Flowbite Themable', link: '/guide/flowbiteThemable/flowbiteThemable.md' },
+    { text: 'Flowbite Themable', link: '/components/flowbiteThemable/flowbiteThemable.md' },
   ]
 }
 
@@ -74,7 +74,8 @@ export default defineConfig({
     sidebar: buildSidebar(),
     logo: '/assets/logo.svg',
     socialLinks: [
-      { icon: 'github', link: 'https://github.com/themesberg/flowbite-vue' }
+      { icon: 'github', link: 'https://github.com/themesberg/flowbite-vue' },
+      { icon: 'discord', link: 'https://discord.gg/4eeurUVvTy' }
     ],
 
     footer: {

docs/components/alert/alert.md

@@ -9,7 +9,17 @@ import AlertInlineExample from './examples/AlertInlineExample.vue';
 
 # Alert
 
-reference: [https://flowbite.com/docs/components/alert/](https://flowbite.com/docs/components/alert/)
+#### Show contextual information to your users using alert elements based on Tailwind CSS
+
+---
+
+:::tip
+Original reference: [https://flowbite.com/docs/components/alert/](https://flowbite.com/docs/components/alert/)
+:::
+
+The alert component can be used to provide information to your users such as success or error messages, but also highlighted information complementing the normal flow of paragraphs and headers on a page.
+
+Flowbite also includes dismissable alerts which can be hidden by the users by clicking on the close icon.
 
 ## Prop - type
 

docs/components/button/button.md

@@ -17,7 +17,17 @@ import ButtonLoadingExample from './examples/ButtonLoadingExample.vue';
 
 # Button
 
-reference: [https://flowbite.com/docs/components/buttons/](https://flowbite.com/docs/components/buttons/)
+#### Use the button component inside forms, as links, social login, payment options with support for multiple styles, colors, sizes, gradients, and shadows
+
+---
+
+:::tip
+Original reference: [https://flowbite.com/docs/components/buttons/](https://flowbite.com/docs/components/buttons/)
+:::
+
+The button component is probably the most widely used element in any user interface or website as it can be used to launch an action but also to link to other pages.
+
+Flowbite provides a large variety of styles and sizes for the button component including outlined buttons, multiple colors, sizes, buttons with icons, and more.
 
 ## Prop - color
 

docs/components/buttonGroup/buttonGroup.md

@@ -5,7 +5,15 @@ import ButtonGroupIconExample from './examples/ButtonGroupIconExample.vue';
 
 # Button Group
 
-reference: [https://flowbite.com/docs/components/button-group/](https://flowbite.com/docs/components/button-group/)
+#### Button groups are a Tailwind CSS powered set of buttons sticked together in a horizontal line
+
+---
+
+:::tip
+Original reference: [https://flowbite.com/docs/components/button-group/](https://flowbite.com/docs/components/button-group/)
+:::
+
+The button group component from Flowbite can be used to stack together multiple buttons and links inside a single element.
 
 ## Basic example
 

docs/components/dropdown/dropdown.md

@@ -5,6 +5,16 @@ import DropdownListGroupExample from './examples/DropdownListGroupExample.vue';
 
 # Dropdown
 
+#### Get started with the dropdown component to show a list of menu items when clicking on the trigger element based on multiple layouts, styles, and placements
+
+---
+
+:::tip
+Original reference: [https://flowbite.com/docs/components/dropdowns/](https://flowbite.com/docs/components/dropdowns/)
+:::
+
+The dropdown component can be used to show a list of menu items when clicking on an element such as a button and hiding it when focusing outside of the triggering element.
+
 
 ## Props - placement
 

docs/components/listGroup/listGroup.md

@@ -7,6 +7,15 @@ import ListGroupHoverIconDisabledExample from './examples/ListGroupHoverIconDisa
 
 # ListGroup
 
+#### Use the list group component to display a series of items, buttons or links inside a single element
+
+---
+
+:::tip
+Original reference: [https://flowbite.com/docs/components/list-group/](https://flowbite.com/docs/components/list-group/)
+:::
+
+The list group component can be used to display a series of elements, buttons or links inside a single card component similar to a sidebar.
 
 ## No hover
 ```vue

docs/components/spinner/spinner.md

@@ -6,7 +6,16 @@ import SpinnerColorExample from './examples/SpinnerColorExample.vue';
 
 # Spinner
 
-reference: [https://flowbite.com/docs/components/spinner/](https://flowbite.com/docs/components/spinner/)
+#### Use the spinner component as a loader indicator in your projects when fetching data based on an animated SVG using the utility classes from Tailwind CSS
+
+---
+
+:::tip
+Original reference: [https://flowbite.com/docs/components/spinner/](https://flowbite.com/docs/components/spinner/)
+:::
+
+The spinner component can be used as a loading indicator which comes in multiple colors, sizes, and styles separately or inside elements such as buttons to improve the user experience whenever data is being fetched from your server.
+
 
 ## Basic example
 

docs/components/tabs/tabs.md

@@ -6,7 +6,15 @@ import TabsUnderlineExample from './examples/TabsUnderlineExample.vue';
 
 # Tabs
 
-reference: [https://flowbite.com/docs/components/tabs/](https://flowbite.com/docs/components/tabs/)
+#### Use these responsive tabs components to create a secondary navigational hierarchy for your website or toggle content inside a container
+
+---
+
+:::tip
+Original reference: [https://flowbite.com/docs/components/tabs/](https://flowbite.com/docs/components/tabs/)
+:::
+
+The tabs component can be used either as an extra navigational hierarchy complementing the main navbar or you can also use it to change content inside a container just below the tabs using the data attributes from Flowbite.
 
 ## Prop - variant (default)
 

docs/components/toast/examples/ToastExample.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="vp-raw flex align-center gap-2 flex-wrap">
+    <Toast :type="'warning'">
+      Improve password difficulty.
+    </Toast>
+    <Toast :type="'success'">
+      Item moved successfully.
+    </Toast>
+    <Toast :type="'danger'">
+      Item has been deleted.
+    </Toast>
+  </div>
+</template>
+<script setup>
+import { Toast } from '../../../../src/index'
+</script>

docs/components/toast/toast.md

@@ -8,7 +8,15 @@ import ToastExample from './examples/ToastExample.vue'
 import { Toast } from 'flowbite-vue'
 </script>
 <template>
-  <Toast></Toast>
+  <Toast type="warning">
+    Improve password difficulty.
+  </Toast>
+  <Toast type="success">
+    Item moved successfully.
+  </Toast>
+  <Toast type="danger">
+    Item has been deleted.
+  </Toast>
 </template>
 ```
 

docs/guide/toast/examples/ToastExample.vue

@@ -1,8 +0,0 @@
-<template>
-  <div class="vp-raw flex flex-col">
-    <Toast></Toast>
-  </div>
-</template>
-<script setup>
-import { Toast } from '../../../../src/index'
-</script>

src/components/Button/Button.vue

@@ -1,6 +1,5 @@
 <template>
-  <button type="button" :class="wrapperClasses" :disabled="disabled">
-
+  <flowbite-themable-child tag="button" :apply="['background', 'hover', 'focus']" :class="wrapperClasses" :disabled="disabled">
     <div v-if="!isOutlineGradient && ($slots.prefix || loadingPrefix)" class="mr-2"> <!--automatically add mr class if slot provided or loading -->
       <spinner :color="spinnerColor" :size="spinnerSize" v-if="loadingPrefix" />
       <slot name="prefix" v-else />
@@ -24,8 +23,7 @@
       <spinner :color="spinnerColor" :size="spinnerSize" v-if="loadingSuffix" />
       <slot name="suffix" v-else />
     </div>
-
-  </button>
+  </flowbite-themable-child>
 </template>
 <script lang="ts" setup>
 import { computed, toRefs } from 'vue'
@@ -33,8 +31,9 @@ import type { PropType } from 'vue'
 import Spinner from '../Spinner/Spinner.vue'
 import { useButtonClasses } from './composables/useButtonClasses'
 import { useButtonSpinner } from './composables/useButtonSpinner'
-import type { ButtonGradient, ButtonMonochromeGradient, ButtonSize, ButtonVariant } from './types'
+import FlowbiteThemableChild from '../utils/FlowbiteThemable/components/FlowbiteThemableChild/FlowbiteThemableChild.vue'
 
+import type { ButtonGradient, ButtonMonochromeGradient, ButtonSize, ButtonVariant } from './types'
 const props = defineProps({
   color: {
     type: String as PropType<ButtonVariant>,

src/components/Button/composables/useButtonClasses.ts

@@ -168,8 +168,6 @@ const alternativeColors = ['alternative', 'light']
 export function useButtonClasses(props: UseButtonClassesProps): { wrapperClasses: Ref<string>, spanClasses: Ref<string> } {
   const slots = useSlots()
 
-  const theme = useFlowbiteThemable()
-
   const sizeClasses = computed(() => {
     if (props.square.value) return buttonSquareSizeClasses[props.size.value]
     return buttonSizeClasses[props.size.value]
@@ -180,7 +178,6 @@ export function useButtonClasses(props: UseButtonClassesProps): { wrapperClasses
     const isColor = !!props.color.value
     const isOutline = props.outline.value
 
-    const isActiveTheme = theme.isActive.value
 
     let hoverClass = ''
     let backgroundClass = ''
@@ -205,7 +202,7 @@ export function useButtonClasses(props: UseButtonClassesProps): { wrapperClasses
 
     } else if (isColor && isOutline) { // COLOR AND OUTLINE
       if (!alternativeColors.includes(props.color.value)) {
-        const color = isActiveTheme ? theme.color.value : props.color.value
+        const color = props.color.value
 
         backgroundClass = buttonOutlineColorClasses.default[color as unknown as keyof typeof buttonOutlineColorClasses.default]
 
@@ -217,7 +214,7 @@ export function useButtonClasses(props: UseButtonClassesProps): { wrapperClasses
 
 
     } else { // JUST COLOR
-      const color = isActiveTheme ? theme.color.value : props.color.value
+      const color = props.color.value
 
       backgroundClass = buttonColorClasses.default[color as unknown as keyof typeof buttonColorClasses.default]
 

src/components/Toast/Toast.vue

@@ -1,9 +1,13 @@
 <template>
   <div id="toast-default" class="flex items-center w-full max-w-xs p-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800" role="alert">
-    <div class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-blue-500 bg-blue-100 rounded-lg dark:bg-blue-800 dark:text-blue-200">
-      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.395 2.553a1 1 0 00-1.45-.385c-.345.23-.614.558-.822.88-.214.33-.403.713-.57 1.116-.334.804-.614 1.768-.84 2.734a31.365 31.365 0 00-.613 3.58 2.64 2.64 0 01-.945-1.067c-.328-.68-.398-1.534-.398-2.654A1 1 0 005.05 6.05 6.981 6.981 0 003 11a7 7 0 1011.95-4.95c-.592-.591-.98-.985-1.348-1.467-.363-.476-.724-1.063-1.207-2.03zM12.12 15.12A3 3 0 017 13s.879.5 2.5.5c0-1 .5-4 1.25-4.5.5 1 .786 1.293 1.371 1.879A2.99 2.99 0 0113 13a2.99 2.99 0 01-.879 2.121z" clip-rule="evenodd"></path></svg>
+    <div v-if="type !== 'empty'" :class="['inline-flex flex-shrink-0 justify-center items-center w-8 h-8 rounded-lg', typeClasses]">
+      <svg v-if="type === 'success'" aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
+      <svg v-else-if="type === 'danger'" aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+      <svg v-else-if="type === 'warning'" aria-hidden="true" class="text-orange-500 bg-orange-100 dark:bg-orange-700 dark:text-orange-200 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path></svg>
+    </div>
+    <div class="ml-3 text-sm font-normal">
+      <slot />
     </div>
-    <div class="ml-3 text-sm font-normal">Set yourself free.</div>
     <button type="button" class="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700" data-dismiss-target="#toast-default" aria-label="Close">
       <span class="sr-only">Close</span>
       <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
@@ -11,14 +15,18 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { computed, toRefs } from 'vue'
+import type { ToastPreset } from '@/components/Toast/types'
 import type { PropType } from 'vue'
+import { useToastClasses } from './composables/useToastClasses'
+import { toRefs } from 'vue'
 
 const props = defineProps({
-  duration: {
-    type: Number,
-    default: 300,
+  type: {
+    type: String as PropType<ToastPreset>,
+    default: 'empty',
   },
 })
 
+const { typeClasses } = useToastClasses(toRefs(props))
+
 </script>

src/components/Toast/composables/useToastClasses.ts

@@ -0,0 +1,29 @@
+import type { Ref } from 'vue'
+import { computed } from 'vue'
+import type { ToastPreset } from '@/components/Toast/types'
+
+type UseToastClassesReturns = {
+    typeClasses: Ref<string>
+}
+
+type UseToastClassesProps = {
+    type: Ref<ToastPreset>
+}
+
+const typeClassesMap: Record<ToastPreset, string> = {
+    danger: 'text-red-500 bg-red-100 dark:bg-red-800 dark:text-red-200',
+    empty: '',
+    success: 'text-green-500 bg-green-100 dark:bg-green-800 dark:text-green-200',
+    warning: 'text-orange-500 bg-orange-100 dark:bg-orange-700 dark:text-orange-200',
+}
+
+export function useToastClasses(props: UseToastClassesProps): UseToastClassesReturns {
+
+    const typeClasses = computed(() => {
+        return typeClassesMap[props.type.value]
+    })
+
+    return {
+        typeClasses,
+    }
+}

src/components/Toast/types.ts

@@ -0,0 +1 @@
+export type ToastPreset = 'success' | 'warning' | 'danger' | 'empty'

src/components/utils/FlowbiteThemable/components/FlowbiteThemableChild/FlowbiteThemableChild.vue

@@ -0,0 +1,29 @@
+<template>
+  <component :is="tag" :class="simplifyTailwindClasses($attrs.class || [], classes)">
+    <slot />
+  </component>
+</template>
+<script lang="ts" setup>
+import type { PropType } from 'vue'
+import {
+  useFlowbiteThemableChildClasses,
+} from './composables/useFlowbiteThemableChildClasses'
+import type {
+  ThemableChildrenApply,
+} from '@/components/utils/FlowbiteThemable/components/FlowbiteThemableChild/types'
+import { toRefs } from 'vue'
+import { simplifyTailwindClasses } from '../../../../../utils/simplifyTailwindClasses'
+
+const props = defineProps({
+  apply: {
+    type: Array as PropType<ThemableChildrenApply[]>,
+    required: true,
+  },
+  tag: {
+    type: String,
+    default: 'div',
+  },
+})
+
+const { classes } = useFlowbiteThemableChildClasses(toRefs(props))
+</script>

src/components/utils/FlowbiteThemable/components/FlowbiteThemableChild/composables/useFlowbiteThemableChildClasses.ts

@@ -0,0 +1,35 @@
+import type { Ref } from 'vue'
+import { computed } from 'vue'
+import type {
+    ThemableChildrenApply,
+} from '../types'
+import { useFlowbiteThemable } from '../../../composables/useFlowbiteThemable'
+
+type UseFlowbiteThemableChildReturns = {
+    classes: Ref<string>
+}
+
+type UseFlowbiteThemableChildProps = {
+    apply: Ref<ThemableChildrenApply[]>
+}
+
+export function useFlowbiteThemableChildClasses(props: UseFlowbiteThemableChildProps): UseFlowbiteThemableChildReturns {
+
+    const { textClasses, borderClasses, backgroundClasses, hoverClasses, disabledClasses, focusClasses, isActive } = useFlowbiteThemable()
+
+    const classes = computed(() => {
+        if(!isActive.value) return ''
+        const _classes = []
+        if(props.apply.value.includes('text')) _classes.push(textClasses.value)
+        if(props.apply.value.includes('border')) _classes.push(borderClasses.value)
+        if(props.apply.value.includes('background')) _classes.push(backgroundClasses.value)
+        if(props.apply.value.includes('hover')) _classes.push(hoverClasses.value)
+        if(props.apply.value.includes('disabled')) _classes.push(disabledClasses.value)
+        if(props.apply.value.includes('focus')) _classes.push(focusClasses.value)
+        return _classes.join(' ')
+    })
+
+    return {
+        classes,
+    }
+}

src/components/utils/FlowbiteThemable/components/FlowbiteThemableChild/types.ts

@@ -0,0 +1 @@
+export type ThemableChildrenApply = 'background' | 'disabled' | 'hover' | 'text' | 'border' | 'focus'

src/components/utils/FlowbiteThemable/composables/useFlowbiteThemable.ts

@@ -9,11 +9,12 @@ type UseFlowbiteThemableReturns = {
     hoverClasses: Ref<string>
     disabledClasses: Ref<string>
     borderClasses: Ref<string>
+    focusClasses: Ref<string>
     isActive: Ref<boolean>
     color: Ref<FlowbiteTheme | undefined>
 }
 
-type FlowbiteThemeMap = { background: string, disabled: string, hover: string, text: string, border: string }
+type FlowbiteThemeMap = { background: string, disabled: string, hover: string, text: string, border: string, focus: string }
 type FlowbiteThemes<T extends string = string> = Record<T, FlowbiteThemeMap>
 
 const flowbiteThemesColors: FlowbiteTheme[] = ['blue', 'green', 'red', 'pink', 'purple']
@@ -25,6 +26,7 @@ const flowbiteThemeClasses: FlowbiteThemes<FlowbiteTheme> = {
         hover: 'hover:bg-blue-800 dark:hover:bg-blue-700',
         text: 'text-blue-600 dark:text-blue-500',
         border: 'border-blue-600 dark:border-blue-500',
+        focus: 'focus:ring-blue-300 dark:focus:ring-blue-800',
     },
     green: {
         background: 'bg-green-700 dark:bg-green-600',
@@ -32,6 +34,7 @@ const flowbiteThemeClasses: FlowbiteThemes<FlowbiteTheme> = {
         hover: 'hover:bg-green-800 dark:hover:bg-green-700',
         text: 'text-green-600 dark:text-green-500',
         border: 'border-green-600 dark:border-green-500',
+        focus: 'focus:ring-green-300 dark:focus:ring-green-800',
     },
     pink: {
         background: 'bg-pink-700 dark:bg-pink-600',
@@ -39,6 +42,7 @@ const flowbiteThemeClasses: FlowbiteThemes<FlowbiteTheme> = {
         hover: 'hover:bg-pink-800 dark:hover:bg-pink-700',
         text: 'text-pink-600 dark:text-pink-500',
         border: 'border-pink-600 dark:border-pink-500',
+        focus: 'focus:ring-pink-300 dark:focus:ring-pink-900',
     },
     purple: {
         background: 'bg-purple-700 dark:bg-purple-600',
@@ -46,6 +50,7 @@ const flowbiteThemeClasses: FlowbiteThemes<FlowbiteTheme> = {
         hover: 'hover:bg-purple-800 dark:hover:bg-purple-700',
         text: 'text-purple-600 dark:text-purple-500',
         border: 'border-purple-600 dark:border-purple-500',
+        focus: 'focus:ring-purple-300 dark:focus:ring-purple-900',
     },
     red: {
         background: 'bg-red-700 dark:bg-red-600',
@@ -53,6 +58,7 @@ const flowbiteThemeClasses: FlowbiteThemes<FlowbiteTheme> = {
         hover: 'hover:bg-red-800 dark:hover:bg-red-700',
         text: 'text-red-600 dark:text-red-500',
         border: 'border-red-600 dark:border-red-500',
+        focus: 'focus:ring-red-300 dark:focus:ring-red-900',
     },
 
 }
@@ -89,12 +95,18 @@ export function useFlowbiteThemable(): UseFlowbiteThemableReturns {
         return flowbiteThemeClasses[theme.value].border
     })
 
+    const focusClasses = computed(() => {
+        if(!theme) return ''
+        return flowbiteThemeClasses[theme.value].focus
+    })
+
     return {
         backgroundClasses,
         disabledClasses,
         hoverClasses,
         textClasses,
         borderClasses,
+        focusClasses,
         isActive,
         color,
     }

src/index.ts

@@ -6,6 +6,8 @@ export { default as Tabs } from './components/Tabs/Tabs.vue'
 export { default as Tab } from './components/Tabs/components/Tab/Tab.vue'
 export { default as Dropdown } from './components/Dropdown/Dropdown.vue'
 export { default as FlowbiteThemable } from './components/utils/FlowbiteThemable/FlowbiteThemable.vue'
+export { default as FlowbiteThemableChild } from './components/utils/FlowbiteThemable/components/FlowbiteThemableChild/FlowbiteThemableChild.vue'
+
 export { default as Accordion } from './components/Accordion/Accordion.vue'
 export { default as Avatar } from './components/Avatar/Avatar.vue'
 export { default as Badge } from './components/Badge/Badge.vue'