feat: a little bit new structure

src/components/Alert/Alert.vue

@@ -27,10 +27,10 @@
 </template>
 <script lang="ts" setup>
 import type { PropType } from 'vue'
-import { useAlertClasses } from './useAlertClasses'
+import { useAlertClasses } from './composables/useAlertClasses'
 import { onBeforeUnmount, ref, toRefs } from 'vue'
+import type { AlertType } from './types'
 
-export type AlertType = 'info' | 'danger' | 'success' | 'warning' | 'dark'
 
 const props = defineProps({
   type: {

src/components/Alert/composables/useAlertClasses.ts

@@ -1,4 +1,4 @@
-import type { AlertType } from './Alert.vue'
+import type { AlertType } from '../types'
 import { computed } from 'vue'
 import type { Ref } from 'vue'
 import classNames from 'classnames'

src/components/Alert/types.d.ts

@@ -0,0 +1 @@
+export type AlertType = 'info' | 'danger' | 'success' | 'warning' | 'dark'

src/components/Button/Button.vue

@@ -31,15 +31,9 @@
 import { computed, toRefs } from 'vue'
 import type { PropType } from 'vue'
 import Spinner from '../Spinner/Spinner.vue'
-import { useButtonClasses } from './useButtonClasses'
+import { useButtonClasses } from './composables/useButtonClasses'
-import { useButtonSpinner } from './useButtonSpinner'
+import { useButtonSpinner } from './composables/useButtonSpinner'
-
+import type { ButtonGradient, ButtonMonochromeGradient, ButtonSize, ButtonVariant } from './types'
-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'
 
 const props = defineProps({
   color: {

src/components/Button/composables/useButtonClasses.ts

@@ -1,7 +1,7 @@
 import type { Ref } from 'vue'
 import { computed, useSlots } from 'vue'
 import classNames from 'classnames'
-import type { ButtonDuotoneGradient, ButtonGradient, ButtonMonochromeGradient, ButtonSize, ButtonVariant } from './Button.vue'
+import type { ButtonDuotoneGradient, ButtonGradient, ButtonMonochromeGradient, ButtonSize, ButtonVariant } from '../types'
 
 
 export type ButtonClassMap<T extends string> =  { hover: Record<T, string>, default: Record<T, string> }

src/components/Button/composables/useButtonSpinner.ts

@@ -1,5 +1,5 @@
-import type { ButtonGradient, ButtonSize, ButtonVariant } from './Button.vue'
+import type { ButtonGradient, ButtonSize, ButtonVariant } from '../types'
-import type { SpinnerColor, SpinnerSize } from '../Spinner/Spinner.vue'
+import type { SpinnerColor, SpinnerSize } from '../../Spinner/types'
 import type { Ref } from 'vue'
 import { computed } from 'vue'
 

src/components/Button/types.d.ts

@@ -0,0 +1,5 @@
+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'

src/components/ButtonGroup/ButtonGroup.vue

@@ -9,13 +9,13 @@
 
 @layer components {
   .btn-group > button {
-    @apply rounded-none
+    @apply rounded-none;
   }
   .btn-group > button:first-child {
-    @apply rounded-l-lg
+    @apply rounded-l-lg;
   }
   .btn-group > button:last-child {
-    @apply rounded-r-lg
+    @apply rounded-r-lg;
   }
 }
 </style>

src/components/Spinner/Spinner.vue

@@ -6,11 +6,9 @@
 </template>
 <script lang="ts" setup>
 import type { PropType } from 'vue'
-import { useSpinnerClasses } from './useSpinnerClasses'
+import { useSpinnerClasses } from './composables/useSpinnerClasses'
 import { toRefs } from 'vue'
-
+import type { SpinnerColor, SpinnerSize } from './types'
-export type SpinnerSize = '0' | 'px' | '0.5' | '1' | '1.5' | '2' | '2.5' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12'
-export type SpinnerColor = 'blue' | 'gray' | 'green' | 'red' | 'yellow' | 'pink' | 'purple' | 'white'
 
 const props = defineProps({
   size: {

src/components/Spinner/types.d.ts

@@ -0,0 +1,2 @@
+export type SpinnerSize = '0' | 'px' | '0.5' | '1' | '1.5' | '2' | '2.5' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12'
+export type SpinnerColor = 'blue' | 'gray' | 'green' | 'red' | 'yellow' | 'pink' | 'purple' | 'white'

src/components/Tabs/Tabs.vue

@@ -23,12 +23,13 @@ import {
   TAB_ACTIVE_NAME_INJECTION_KEY,
   TAB_STYLE_INJECTION_KEY,
   TAB_VISIBILITY_DIRECTIVE_INJECTION_KEY,
-} from './config'
+} from './injection/config'
-import { useTabsClasses } from './useTabsClasses'
+import { useTabsClasses } from './composables/useTabsClasses'
 import type { PropType } from 'vue'
 import { computed, provide, toRef, useSlots } from 'vue'
 import { flatten } from '../../utils/flatten'
 import TabPane from './components/TabPane/TabPane.vue'
+import type { TabsVariant } from './types'
 
 const props = defineProps({
   variant: {
@@ -82,6 +83,4 @@ provide(TAB_ACTIVATE_INJECTION_KEY, onActivate)
 export default {
   inheritAttrs: false,
 }
-
-export type TabsVariant = 'default' | 'underline' | 'pills'
 </script>

src/components/Tabs/components/Tab/Tab.vue

@@ -14,7 +14,7 @@
 </template>
 <script lang="ts" setup>
 import { inject } from 'vue'
-import { TAB_ACTIVE_NAME_INJECTION_KEY, TAB_VISIBILITY_DIRECTIVE_INJECTION_KEY } from '../../config'
+import { TAB_ACTIVE_NAME_INJECTION_KEY, TAB_VISIBILITY_DIRECTIVE_INJECTION_KEY } from '../../injection/config'
 
 defineProps({
   name: {

src/components/Tabs/components/TabPane/TabPane.vue

@@ -7,9 +7,9 @@
 </template>
 <script lang="ts" setup>
 import { inject, toRefs } from 'vue'
-import { TAB_ACTIVATE_INJECTION_KEY, TAB_STYLE_INJECTION_KEY } from '../../config'
+import { TAB_ACTIVATE_INJECTION_KEY, TAB_STYLE_INJECTION_KEY } from '../../injection/config'
-import type { TabsVariant } from '../../Tabs.vue'
+import type { TabsVariant } from '../../types'
-import { useTabClasses } from './useTabClasses'
+import { useTabClasses } from './composables/useTabClasses'
 
 const props = defineProps({
   name: {

src/components/Tabs/composables/useTabsClasses.ts

@@ -1,6 +1,6 @@
 import type { Ref } from 'vue'
 import { computed } from 'vue'
-import type { TabsVariant } from './Tabs.vue'
+import type { TabsVariant } from '../types'
 
 export type UseTabsClassesProps = {
     variant: TabsVariant

src/components/Tabs/injection/config.ts

@@ -1,3 +1,5 @@
+// dependency injection config for tabs
+
 export const TAB_STYLE_INJECTION_KEY = 'flowbite-tab-style-injection'
 export const TAB_ACTIVE_NAME_INJECTION_KEY = 'flowbite-tab-active-name-injection'
 export const TAB_VISIBILITY_DIRECTIVE_INJECTION_KEY = 'flowbite-tab-visibility-directive-injection'

src/components/Tabs/types.d.ts

@@ -0,0 +1 @@
+export type TabsVariant = 'default' | 'underline' | 'pills'

src/composables/useClasses.ts

@@ -0,0 +1,3 @@
+export function useClasses() {
+
+}

vite.config.ts

@@ -7,7 +7,7 @@ export default defineConfig({
   plugins: [vue()],
   resolve: {
     alias: {
-      '@': resolve(__dirname, 'src'),
+      '@': resolve(__dirname, './src'),
     },
   },
   build: {