chore(release): v2.18.4

Resolves #2018

CHANGELOG.md

@@ -1,5 +1,39 @@
 # Changelog
 
+## [2.18.4](https://github.com/nuxt/ui/compare/v2.18.3...v2.18.4) (2024-08-05)
+
+
+### Bug Fixes
+
+* **Form:** submit event data ([#2012](https://github.com/nuxt/ui/issues/2012)) ([4d61936](https://github.com/nuxt/ui/commit/4d61936e7e90b664846a8f265825612c509511d7))
+* **module:** handle nested colors from ui config ([#2008](https://github.com/nuxt/ui/issues/2008)) ([1cc7e2a](https://github.com/nuxt/ui/commit/1cc7e2a306e0f3f666b9a588f6ed02e7eabc0272))
+* **module:** reduce css bundle size by fixing safelist regex ([#2005](https://github.com/nuxt/ui/issues/2005)) ([8ac9ca4](https://github.com/nuxt/ui/commit/8ac9ca49789a9a7281f7a40926e7e9a8068cc395))
+* **module:** suffix types imports with `/index` ([7e37668](https://github.com/nuxt/ui/commit/7e37668940d06c5aa20b60d9bfd600d50a171014)), closes [#2018](https://github.com/nuxt/ui/issues/2018)
+* **Tabs:** use `nextTick` before marker calc ([#2020](https://github.com/nuxt/ui/issues/2020)) ([9c04969](https://github.com/nuxt/ui/commit/9c049690227af8aba61a1f7c002b00c5dfeb63ff))
+* **useFormGroup:** app config default input size ([#2011](https://github.com/nuxt/ui/issues/2011)) ([3485092](https://github.com/nuxt/ui/commit/3485092edb55f9ef2ca038a8c137431866d6c28a))
+
+## [2.18.3](https://github.com/nuxt/ui/compare/v2.18.2...v2.18.3) (2024-07-30)
+
+
+### Bug Fixes
+
+* **Link:** define `rel` as any ([69f605f](https://github.com/nuxt/ui/commit/69f605fa724454e4be9e4cee9666a5d57f43a129))
+* **types:** only use `.ts` for index ([93ddf1d](https://github.com/nuxt/ui/commit/93ddf1d60b0ea5f99f564f3d3969c397ad91cc72))
+
+## [2.18.2](https://github.com/nuxt/ui/compare/v2.18.1...v2.18.2) (2024-07-25)
+
+
+### Bug Fixes
+
+* **Tabs:** add missing `UIcon` import ([4fd1be2](https://github.com/nuxt/ui/commit/4fd1be28922bf39584005c14982e5cd9a7d0c624))
+
+## [2.18.1](https://github.com/nuxt/ui/compare/v2.18.0...v2.18.1) (2024-07-25)
+
+
+### Bug Fixes
+
+* **components:** use relative imports ([ea721a3](https://github.com/nuxt/ui/commit/ea721a3705cfbcef3075f8c9c1f4acf359974597))
+
 ## [2.18.0](https://github.com/nuxt/ui/compare/v2.17.0...v2.18.0) (2024-07-25)
 
 

docs/components/Footer.vue

@@ -25,6 +25,8 @@
 </template>
 
 <script setup lang="ts">
+const { $ui } = useNuxtApp()
+
 const links = [{
   icon: 'i-simple-icons-figma',
   label: 'Figma Kit',

docs/components/Header.vue

@@ -54,6 +54,7 @@ defineProps<{
 }>()
 
 const route = useRoute()
+const { $ui } = useNuxtApp()
 const { metaSymbol } = useShortcuts()
 
 const nav = inject<Ref<NavItem[]>>('navigation')

docs/components/content/examples/SlideoverExampleComposable.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { SlideoverExampleComponent } from '#components'
+
 const slideover = useSlideover()
 const count = ref(0)
 function openSlideover () {
@@ -13,4 +14,4 @@ function openSlideover () {
 
 <template>
   <UButton label="Reveal slideover" @click="openSlideover" />
-</template>
+</template>

docs/content/1.getting-started/3.theming.md

@@ -23,7 +23,7 @@ export default defineAppConfig({
 Try to change the `primary` and `gray` colors by clicking on the :u-icon{name="i-heroicons-swatch-20-solid" class="w-4 h-4 align-middle text-primary-500 dark:text-primary-400"} button in the header.
 ::
 
-As this module uses Tailwind CSS under the hood, you can use any of the [Tailwind CSS colors](https://tailwindcss.com/docs/customizing-colors#color-palette-reference) or your own custom colors. By default, the `primary` color is `green` and the `gray` color is `cool`.
+As this module uses Tailwind CSS under the hood, you can use any of the [Tailwind CSS colors](https://tailwindcss.com/docs/customizing-colors#color-palette-reference) or your own custom colors or groups, such as `brand.primary`. By default, the `primary` color is `green` and the `gray` color is `cool`.
 
 When [using custom colors](https://tailwindcss.com/docs/customizing-colors#using-custom-colors) or [adding additional colors](https://tailwindcss.com/docs/customizing-colors#adding-additional-colors) through the `extend` key in your `tailwind.config.ts`, you'll need to make sure to define all the shades from `50` to `950` as most of them are used in the components config defined in [`ui.config/`](https://github.com/nuxt/ui/tree/dev/src/runtime/ui.config) directory. You can [generate your colors](https://tailwindcss.com/docs/customizing-colors#generating-colors) using tools such as https://uicolors.app/ for example.
 

docs/package.json

@@ -3,15 +3,15 @@
   "private": true,
   "type": "module",
   "dependencies": {
-    "@iconify-json/heroicons": "^1.1.22",
+    "@iconify-json/heroicons": "^1.1.23",
-    "@iconify-json/simple-icons": "^1.1.109",
+    "@iconify-json/simple-icons": "^1.1.111",
     "@iconify-json/vscode-icons": "^1.1.36",
     "@nuxt/content": "^2.13.2",
-    "@nuxt/eslint-config": "^0.3.13",
+    "@nuxt/eslint-config": "^0.4.0",
     "@nuxt/fonts": "^0.7.1",
     "@nuxt/image": "^1.7.0",
     "@nuxt/ui": "latest",
-    "@nuxt/ui-pro": "npm:@nuxt/ui-pro-edge@1.3.1-28695485.b267028",
+    "@nuxt/ui-pro": "npm:@nuxt/ui-pro-edge@1.3.1-28698404.4d54eb2",
     "@nuxtjs/plausible": "^1.0.0",
     "@octokit/rest": "^21.0.1",
     "@vueuse/nuxt": "^10.11.0",

docs/pages/index.vue

@@ -443,6 +443,7 @@ const sectionRef = ref()
 const demoRef = ref(null)
 const start = ref(0)
 
+const { $ui } = useNuxtApp()
 const { height } = useElementSize(demoRef)
 const { top } = useElementBounding(sectionRef)
 const { y } = useWindowScroll()

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nuxt/ui",
-  "version": "2.18.0",
+  "version": "2.18.4",
-  "packageManager": "pnpm@9.5.0",
+  "packageManager": "pnpm@9.6.0",
   "repository": "nuxt/ui",
   "homepage": "https://ui.nuxt.com",
   "type": "module",
@@ -36,8 +36,8 @@
   "dependencies": {
     "@headlessui/tailwindcss": "^0.2.1",
     "@headlessui/vue": "^1.7.22",
-    "@iconify-json/heroicons": "^1.1.22",
+    "@iconify-json/heroicons": "^1.1.23",
-    "@nuxt/icon": "^1.2.1",
+    "@nuxt/icon": "^1.4.0",
     "@nuxt/kit": "^3.12.4",
     "@nuxtjs/color-mode": "^3.4.2",
     "@nuxtjs/tailwindcss": "^6.12.1",
@@ -55,12 +55,12 @@
     "pathe": "^1.1.2",
     "scule": "^1.3.0",
     "tailwind-merge": "^2.4.0",
-    "tailwindcss": "^3.4.6"
+    "tailwindcss": "^3.4.7"
   },
   "devDependencies": {
-    "@nuxt/eslint-config": "^0.3.13",
+    "@nuxt/eslint-config": "^0.4.0",
     "@nuxt/module-builder": "^0.8.1",
-    "@nuxt/test-utils": "^3.13.1",
+    "@nuxt/test-utils": "^3.14.0",
     "@release-it/conventional-changelog": "^8.0.1",
     "@vue/test-utils": "^2.4.6",
     "eslint": "^8.57.0",
@@ -72,15 +72,14 @@
     "valibot": "^0.36.0",
     "valibot30": "npm:valibot@0.30.0",
     "valibot31": "npm:valibot@0.31.0",
-    "vitest": "^2.0.3",
+    "vitest": "^2.0.4",
     "vitest-environment-nuxt": "^1.0.0",
-    "vue-tsc": "^2.0.26",
+    "vue-tsc": "^2.0.29",
     "yup": "^1.4.0",
     "zod": "^3.23.8"
   },
   "resolutions": {
     "@nuxt/ui": "workspace:*",
-    "nuxt-component-meta": "0.6.4",
+    "nuxt-component-meta": "0.6.4"
-    "vue-tsc": "2.0.26"
   }
 }

renovate.json

@@ -3,10 +3,8 @@
     "github>nuxt/renovate-config-nuxt"
   ],
   "ignoreDeps": [
-    "@nuxt/module-builder",
     "nuxt-component-meta",
     "valibot30",
-    "valibot31",
+    "valibot31"
-    "vue-tsc"
   ]
 }

src/module.ts

@@ -3,7 +3,7 @@ import { defineNuxtModule, installModule, addComponentsDir, addImportsDir, creat
 import { name, version } from '../package.json'
 import createTemplates from './templates'
 import * as config from './runtime/ui.config'
-import type { DeepPartial, Strategy } from './runtime/types/utils'
+import type { DeepPartial, Strategy } from './runtime/types'
 import installTailwind from './tailwind'
 
 const _require = createRequire(import.meta.url)
@@ -86,7 +86,7 @@ export default defineNuxtModule<ModuleOptions>({
 
     // Modules
 
-    await installModule('@nuxt/icon', { componentName: 'UIcon' })
+    await installModule('@nuxt/icon')
     await installModule('@nuxtjs/color-mode', { classSuffix: '' })
     await installTailwind(options, nuxt, resolve)
 

src/runtime/components/data/Table.vue

@@ -115,10 +115,13 @@ import type { PropType, AriaAttributes } from 'vue'
 import { upperFirst } from 'scule'
 import { defu } from 'defu'
 import { useVModel } from '@vueuse/core'
-import { UIcon, UButton, UProgress, UCheckbox } from '#components'
+import UIcon from '../elements/Icon.vue'
+import UButton from '../elements/Button.vue'
+import UProgress from '../elements/Progress.vue'
+import UCheckbox from '../forms/Checkbox.vue'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig, get } from '../../utils'
-import type { Strategy, Button, ProgressColor, ProgressAnimation } from '../../types'
+import type { Strategy, Button, ProgressColor, ProgressAnimation } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { table } from '#ui/ui.config'

src/runtime/components/elements/Accordion.vue

@@ -69,10 +69,11 @@
 import { ref, computed, toRef, defineComponent, watch } from 'vue'
 import type { PropType } from 'vue'
 import { Disclosure as HDisclosure, DisclosureButton as HDisclosureButton, DisclosurePanel as HDisclosurePanel, provideUseId } from '@headlessui/vue'
-import { UIcon, UButton } from '#components'
+import UIcon from '../elements/Icon.vue'
+import UButton from '../elements/Button.vue'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig, omit } from '../../utils'
-import type { AccordionItem, Strategy } from '../../types'
+import type { AccordionItem, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { accordion, button } from '#ui/ui.config'
@@ -193,7 +194,7 @@ export default defineComponent({
       attrs,
       buttonRefs,
       closeOthers,
-      omit,
+      omit: (omit as any),
       onEnter,
       onBeforeLeave,
       onAfterEnter,

src/runtime/components/elements/Alert.vue

@@ -43,9 +43,11 @@
 import { computed, toRef, defineComponent } from 'vue'
 import type { PropType } from 'vue'
 import { twMerge, twJoin } from 'tailwind-merge'
-import { UIcon, UAvatar, UButton } from '#components'
+import UIcon from '../elements/Icon.vue'
+import UAvatar from '../elements/Avatar.vue'
+import UButton from '../elements/Button.vue'
 import { useUI } from '../../composables/useUI'
-import type { Avatar, Button, AlertColor, AlertVariant, AlertAction, Strategy } from '../../types'
+import type { Avatar, Button, AlertColor, AlertVariant, AlertAction, Strategy } from '../../types/index'
 import { mergeConfig } from '../../utils'
 // @ts-expect-error
 import appConfig from '#build/app.config'

src/runtime/components/elements/Avatar.vue

@@ -24,10 +24,10 @@
 import { defineComponent, ref, computed, toRef, watch } from 'vue'
 import type { PropType } from 'vue'
 import { twMerge, twJoin } from 'tailwind-merge'
-import { UIcon } from '#components'
+import UIcon from '../elements/Icon.vue'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig } from '../../utils'
-import type { AvatarSize, AvatarChipColor, AvatarChipPosition, Strategy } from '../../types'
+import type { AvatarSize, AvatarChipColor, AvatarChipPosition, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { avatar } from '#ui/ui.config'

src/runtime/components/elements/AvatarGroup.ts

@@ -4,7 +4,7 @@ import { twMerge, twJoin } from 'tailwind-merge'
 import UAvatar from './Avatar.vue'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig, getSlotsChildren } from '../../utils'
-import type { AvatarSize, Strategy } from '../../types'
+import type { AvatarSize, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { avatar, avatarGroup } from '#ui/ui.config'

src/runtime/components/elements/Badge.vue

@@ -11,7 +11,7 @@ import { twMerge, twJoin } from 'tailwind-merge'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig } from '../../utils'
 import { useInjectButtonGroup } from '../../composables/useButtonGroup'
-import type { BadgeColor, BadgeSize, BadgeVariant, Strategy } from '../../types'
+import type { BadgeColor, BadgeSize, BadgeVariant, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { badge } from '#ui/ui.config'

src/runtime/components/elements/Button.vue

@@ -20,11 +20,12 @@
 import { computed, defineComponent, toRef } from 'vue'
 import type { PropType } from 'vue'
 import { twMerge, twJoin } from 'tailwind-merge'
-import { UIcon, ULink } from '#components'
+import UIcon from '../elements/Icon.vue'
+import ULink from '../elements/Link.vue'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig, nuxtLinkProps, getNuxtLinkProps } from '../../utils'
 import { useInjectButtonGroup } from '../../composables/useButtonGroup'
-import type { ButtonColor, ButtonSize, ButtonVariant, Strategy } from '../../types'
+import type { ButtonColor, ButtonSize, ButtonVariant, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { button } from '#ui/ui.config'

src/runtime/components/elements/ButtonGroup.ts

@@ -4,7 +4,7 @@ import { twMerge, twJoin } from 'tailwind-merge'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig, getSlotsChildren } from '../../utils'
 import { useProvideButtonGroup } from '../../composables/useButtonGroup'
-import type { ButtonSize, Strategy } from '../../types'
+import type { ButtonSize, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { button, buttonGroup } from '#ui/ui.config'

src/runtime/components/elements/Carousel.vue

@@ -61,7 +61,7 @@ import type { PropType } from 'vue'
 import { twMerge } from 'tailwind-merge'
 import { mergeConfig } from '../../utils'
 import UButton from '../elements/Button.vue'
-import type { Strategy, Button } from '../../types'
+import type { Strategy, Button } from '../../types/index'
 import { useUI } from '../../composables/useUI'
 import { useCarouselScroll } from '../../composables/useCarouselScroll'
 import { useScroll, useResizeObserver, useElementSize } from '@vueuse/core'

src/runtime/components/elements/Chip.vue

@@ -16,7 +16,7 @@ import type { PropType } from 'vue'
 import { twJoin } from 'tailwind-merge'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig } from '../../utils'
-import type { ChipSize, ChipColor, ChipPosition, Strategy } from '../../types'
+import type { ChipSize, ChipColor, ChipPosition, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { chip } from '#ui/ui.config'

src/runtime/components/elements/Dropdown.vue

@@ -61,11 +61,13 @@ import type { PropType } from 'vue'
 import { Menu as HMenu, MenuButton as HMenuButton, MenuItems as HMenuItems, MenuItem as HMenuItem, provideUseId } from '@headlessui/vue'
 import { defu } from 'defu'
 import { twMerge, twJoin } from 'tailwind-merge'
-import { UIcon, UAvatar, UKbd } from '#components'
+import UIcon from '../elements/Icon.vue'
+import UAvatar from '../elements/Avatar.vue'
+import UKbd from '../elements/Kbd.vue'
 import { useUI } from '../../composables/useUI'
 import { usePopper } from '../../composables/usePopper'
 import { mergeConfig, getNuxtLinkProps } from '../../utils'
-import type { DropdownItem, PopperOptions, Strategy } from '../../types'
+import type { DropdownItem, PopperOptions, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { dropdown } from '#ui/ui.config'

src/runtime/components/elements/Icon.vue

@@ -0,0 +1,32 @@
+<template>
+  <Icon v-bind="$props" />
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import type { PropType } from 'vue'
+
+export default defineComponent({
+  props: {
+    name: {
+      type: String,
+      required: true
+    },
+    mode: {
+      type: String as PropType<'svg' | 'css'>,
+      required: false,
+      default: null
+    },
+    size: {
+      type: [Number, String],
+      required: false,
+      default: null
+    },
+    customize: {
+      type: Function,
+      required: false,
+      default: null
+    }
+  }
+})
+</script>

src/runtime/components/elements/Kbd.vue

@@ -10,7 +10,7 @@ import type { PropType } from 'vue'
 import { twMerge, twJoin } from 'tailwind-merge'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig } from '../../utils'
-import type { KbdSize, Strategy } from '../../types'
+import type { KbdSize, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { kbd } from '#ui/ui.config'

src/runtime/components/elements/Meter.vue

@@ -31,10 +31,10 @@
 import { computed, defineComponent, toRef } from 'vue'
 import type { SlotsType, PropType } from 'vue'
 import { twJoin } from 'tailwind-merge'
-import { UIcon } from '#components'
+import UIcon from '../elements/Icon.vue'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig } from '../../utils'
-import type { Strategy, MeterColor, MeterSize } from '../../types'
+import type { Strategy, MeterColor, MeterSize } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { meter } from '#ui/ui.config'

src/runtime/components/elements/MeterGroup.ts

@@ -1,11 +1,11 @@
 import { h, cloneVNode, computed, toRef, defineComponent } from 'vue'
 import type { ComputedRef, VNode, SlotsType, PropType } from 'vue'
 import { twJoin } from 'tailwind-merge'
-import { UIcon } from '#components'
+import UIcon from '../elements/Icon.vue'
 import Meter from './Meter.vue'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig, getSlotsChildren } from '../../utils'
-import type { Strategy, MeterSize } from '../../types'
+import type { Strategy, MeterSize } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { meter, meterGroup } from '#ui/ui.config'

src/runtime/components/elements/Progress.vue

@@ -33,7 +33,7 @@ import type { PropType } from 'vue'
 import { twJoin } from 'tailwind-merge'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig } from '../../utils'
-import type { Strategy, ProgressSize, ProgressAnimation, ProgressColor } from '../../types'
+import type { Strategy, ProgressSize, ProgressAnimation, ProgressColor } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { progress } from '#ui/ui.config'

src/runtime/components/forms/Checkbox.vue

@@ -36,7 +36,7 @@ import { twMerge, twJoin } from 'tailwind-merge'
 import { useUI } from '../../composables/useUI'
 import { useFormGroup } from '../../composables/useFormGroup'
 import { mergeConfig } from '../../utils'
-import type { Strategy } from '../../types'
+import type { Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { checkbox } from '#ui/ui.config'

src/runtime/components/forms/Form.vue

@@ -127,16 +127,13 @@ export default defineComponent({
     }
 
     async function onSubmit (payload: Event) {
-      const event = payload as SubmitEvent
+      const event = payload as FormSubmitEvent<any>
       try {
         if (props.validateOn?.includes('submit')) {
           await validate()
         }
-        const submitEvent: FormSubmitEvent<any> = {
+        event.data = props.state
-          ...event,
+        emit('submit', event)
-          data: props.state
-        }
-        emit('submit', submitEvent)
       } catch (error) {
         if (!(error instanceof FormException)) {
           throw error

src/runtime/components/forms/FormGroup.vue

@@ -44,7 +44,7 @@ import { computed, defineComponent, provide, inject, ref, toRef } from 'vue'
 import type { Ref, PropType } from 'vue'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig } from '../../utils'
-import type { FormError, InjectedFormGroupValue, FormGroupSize, Strategy } from '../../types'
+import type { FormError, InjectedFormGroupValue, FormGroupSize, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { formGroup } from '#ui/ui.config'

src/runtime/components/forms/Input.vue

@@ -35,13 +35,13 @@
 import { ref, computed, toRef, onMounted, defineComponent } from 'vue'
 import type { PropType } from 'vue'
 import { twMerge, twJoin } from 'tailwind-merge'
-import { UIcon } from '#components'
+import UIcon from '../elements/Icon.vue'
 import { defu } from 'defu'
 import { useUI } from '../../composables/useUI'
 import { useFormGroup } from '../../composables/useFormGroup'
 import { mergeConfig, looseToNumber } from '../../utils'
 import { useInjectButtonGroup } from '../../composables/useButtonGroup'
-import type { InputSize, InputColor, InputVariant, Strategy } from '../../types'
+import type { InputSize, InputColor, InputVariant, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { input } from '#ui/ui.config'

src/runtime/components/forms/InputMenu.vue

@@ -104,13 +104,14 @@ import {
 import { computedAsync, useDebounceFn } from '@vueuse/core'
 import { defu } from 'defu'
 import { twMerge, twJoin } from 'tailwind-merge'
-import { UIcon, UAvatar } from '#components'
+import UIcon from '../elements/Icon.vue'
+import UAvatar from '../elements/Avatar.vue'
 import { useUI } from '../../composables/useUI'
 import { usePopper } from '../../composables/usePopper'
 import { useFormGroup } from '../../composables/useFormGroup'
 import { get, mergeConfig } from '../../utils'
 import { useInjectButtonGroup } from '../../composables/useButtonGroup'
-import type { InputSize, InputColor, InputVariant, PopperOptions, Strategy } from '../../types'
+import type { InputSize, InputColor, InputVariant, PopperOptions, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { input, inputMenu } from '#ui/ui.config'

src/runtime/components/forms/Radio.vue

@@ -35,7 +35,7 @@ import { twMerge, twJoin } from 'tailwind-merge'
 import { useUI } from '../../composables/useUI'
 import { useFormGroup } from '../../composables/useFormGroup'
 import { mergeConfig } from '../../utils'
-import type { Strategy } from '../../types'
+import type { Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { radio } from '#ui/ui.config'

src/runtime/components/forms/RadioGroup.vue

@@ -36,7 +36,7 @@ import type { PropType } from 'vue'
 import { useUI } from '../../composables/useUI'
 import { useFormGroup } from '../../composables/useFormGroup'
 import { mergeConfig, get } from '../../utils'
-import type { Strategy } from '../../types'
+import type { Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { radioGroup, radio } from '#ui/ui.config'

src/runtime/components/forms/Range.vue

@@ -26,7 +26,7 @@ import { twMerge, twJoin } from 'tailwind-merge'
 import { useUI } from '../../composables/useUI'
 import { useFormGroup } from '../../composables/useFormGroup'
 import { mergeConfig } from '../../utils'
-import type { RangeSize, RangeColor, Strategy } from '../../types'
+import type { RangeSize, RangeColor, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { range } from '#ui/ui.config'

src/runtime/components/forms/Select.vue

@@ -56,12 +56,12 @@
 import { computed, toRef, defineComponent } from 'vue'
 import type { PropType, ComputedRef } from 'vue'
 import { twMerge, twJoin } from 'tailwind-merge'
-import { UIcon } from '#components'
+import UIcon from '../elements/Icon.vue'
 import { useUI } from '../../composables/useUI'
 import { useFormGroup } from '../../composables/useFormGroup'
 import { mergeConfig, get } from '../../utils'
 import { useInjectButtonGroup } from '../../composables/useButtonGroup'
-import type { SelectSize, SelectColor, SelectVariant, Strategy } from '../../types'
+import type { SelectSize, SelectColor, SelectVariant, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { select } from '#ui/ui.config'

src/runtime/components/forms/SelectMenu.vue

@@ -140,13 +140,14 @@ import {
 import { computedAsync, useDebounceFn } from '@vueuse/core'
 import { defu } from 'defu'
 import { twMerge, twJoin } from 'tailwind-merge'
-import { UIcon, UAvatar } from '#components'
+import UIcon from '../elements/Icon.vue'
+import UAvatar from '../elements/Avatar.vue'
 import { useUI } from '../../composables/useUI'
 import { usePopper } from '../../composables/usePopper'
 import { useFormGroup } from '../../composables/useFormGroup'
 import { get, mergeConfig } from '../../utils'
 import { useInjectButtonGroup } from '../../composables/useButtonGroup'
-import type { SelectSize, SelectColor, SelectVariant, PopperOptions, Strategy } from '../../types'
+import type { SelectSize, SelectColor, SelectVariant, PopperOptions, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { select, selectMenu } from '#ui/ui.config'

src/runtime/components/forms/Textarea.vue

@@ -28,7 +28,7 @@ import { defu } from 'defu'
 import { useUI } from '../../composables/useUI'
 import { useFormGroup } from '../../composables/useFormGroup'
 import { mergeConfig, looseToNumber } from '../../utils'
-import type { TextareaSize, TextareaColor, TextareaVariant, Strategy } from '../../types'
+import type { TextareaSize, TextareaColor, TextareaVariant, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { textarea } from '#ui/ui.config'

src/runtime/components/forms/Toggle.vue

@@ -34,11 +34,11 @@ import { computed, toRef, defineComponent } from 'vue'
 import type { PropType } from 'vue'
 import { Switch as HSwitch, provideUseId } from '@headlessui/vue'
 import { twMerge, twJoin } from 'tailwind-merge'
-import { UIcon } from '#components'
+import UIcon from '../elements/Icon.vue'
 import { useUI } from '../../composables/useUI'
 import { useFormGroup } from '../../composables/useFormGroup'
 import { mergeConfig } from '../../utils'
-import type { ToggleSize, ToggleColor, Strategy } from '../../types'
+import type { ToggleSize, ToggleColor, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { toggle } from '#ui/ui.config'

src/runtime/components/layout/Card.vue

@@ -22,7 +22,7 @@ import type { PropType } from 'vue'
 import { twMerge, twJoin } from 'tailwind-merge'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig } from '../../utils'
-import type { Strategy } from '../../types'
+import type { Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { card } from '#ui/ui.config'

src/runtime/components/layout/Container.vue

@@ -10,7 +10,7 @@ import type { PropType } from 'vue'
 import { twMerge, twJoin } from 'tailwind-merge'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig } from '../../utils'
-import type { Strategy } from '../../types'
+import type { Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { container } from '#ui/ui.config'

src/runtime/components/layout/Divider.vue

@@ -22,10 +22,11 @@
 import { toRef, computed, defineComponent } from 'vue'
 import type { PropType } from 'vue'
 import { twMerge, twJoin } from 'tailwind-merge'
-import { UIcon, UAvatar } from '#components'
+import UIcon from '../elements/Icon.vue'
+import UAvatar from '../elements/Avatar.vue'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig } from '../../utils'
-import type { Avatar, DividerSize, Strategy } from '../../types'
+import type { Avatar, DividerSize, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { divider } from '#ui/ui.config'

src/runtime/components/layout/Skeleton.vue

@@ -8,7 +8,7 @@ import type { PropType } from 'vue'
 import { twMerge, twJoin } from 'tailwind-merge'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig } from '../../utils'
-import type { Strategy } from '../../types'
+import type { Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { skeleton } from '#ui/ui.config'

src/runtime/components/navigation/Breadcrumb.vue

@@ -37,10 +37,11 @@
 import { defineComponent, toRef } from 'vue'
 import type { PropType } from 'vue'
 import { twMerge, twJoin } from 'tailwind-merge'
-import { UIcon, ULink } from '#components'
+import UIcon from '../elements/Icon.vue'
+import ULink from '../elements/Link.vue'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig, getULinkProps } from '../../utils'
-import type { BreadcrumbLink, Strategy } from '../../types'
+import type { BreadcrumbLink, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { breadcrumb } from '#ui/ui.config'

src/runtime/components/navigation/CommandPalette.vue

@@ -70,11 +70,12 @@ import { useFuse } from '@vueuse/integrations/useFuse'
 import type { UseFuseOptions } from '@vueuse/integrations/useFuse'
 import { twJoin } from 'tailwind-merge'
 import { defu } from 'defu'
-import { UIcon, UButton } from '#components'
+import UIcon from '../elements/Icon.vue'
+import UButton from '../elements/Button.vue'
 import CommandPaletteGroup from './CommandPaletteGroup.vue'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig } from '../../utils'
-import type { Group, Command, Button, Strategy } from '../../types'
+import type { Group, Command, Button, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { commandPalette } from '#ui/ui.config'

src/runtime/components/navigation/CommandPaletteGroup.vue

@@ -73,8 +73,10 @@
 import { computed, defineComponent } from 'vue'
 import type { PropType } from 'vue'
 import { ComboboxOption as HComboboxOption, provideUseId } from '@headlessui/vue'
-import { UIcon, UAvatar, UKbd } from '#components'
+import UIcon from '../elements/Icon.vue'
-import type { Command, Group } from '../../types'
+import UAvatar from '../elements/Avatar.vue'
+import UKbd from '../elements/Kbd.vue'
+import type { Command, Group } from '../../types/index'
 import { commandPalette } from '#ui/ui.config'
 import { useId } from '#imports'
 

src/runtime/components/navigation/HorizontalNavigation.vue

@@ -55,10 +55,13 @@
 import { toRef, defineComponent, computed } from 'vue'
 import type { PropType } from 'vue'
 import { twMerge, twJoin } from 'tailwind-merge'
-import { UIcon, UAvatar, UBadge, ULink } from '#components'
+import UIcon from '../elements/Icon.vue'
+import UAvatar from '../elements/Avatar.vue'
+import UBadge from '../elements/Badge.vue'
+import ULink from '../elements/Link.vue'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig, getULinkProps } from '../../utils'
-import type { HorizontalNavigationLink, Strategy } from '../../types'
+import type { HorizontalNavigationLink, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { horizontalNavigation } from '#ui/ui.config'

src/runtime/components/navigation/Pagination.vue

@@ -74,7 +74,7 @@ import type { RouteLocationRaw } from '#vue-router'
 import UButton from '../elements/Button.vue'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig } from '../../utils'
-import type { Button, ButtonSize, Strategy } from '../../types'
+import type { Button, ButtonSize, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { pagination, button } from '#ui/ui.config'

src/runtime/components/navigation/Tabs.vue

@@ -53,13 +53,14 @@
 </template>
 
 <script lang="ts">
-import { toRef, ref, watch, onMounted, defineComponent } from 'vue'
+import { toRef, ref, watch, onMounted, defineComponent, nextTick } from 'vue'
 import type { PropType } from 'vue'
 import { TabGroup as HTabGroup, TabList as HTabList, Tab as HTab, TabPanels as HTabPanels, TabPanel as HTabPanel, provideUseId } from '@headlessui/vue'
 import { useResizeObserver } from '@vueuse/core'
+import UIcon from '../elements/Icon.vue'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig } from '../../utils'
-import type { TabItem, Strategy } from '../../types'
+import type { TabItem, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { tabs } from '#ui/ui.config'
@@ -69,6 +70,7 @@ const config = mergeConfig<typeof tabs>(appConfig.ui.strategy, appConfig.ui.tabs
 
 export default defineComponent({
   components: {
+    UIcon,
     HTabGroup,
     HTabList,
     HTab,
@@ -162,7 +164,10 @@ export default defineComponent({
       calcMarkerSize(selectedIndex.value)
     })
 
-    onMounted(() => calcMarkerSize(selectedIndex.value))
+    onMounted(async () => {
+      await nextTick()
+      calcMarkerSize(selectedIndex.value)
+    })
 
     provideUseId(() => useId())
 

src/runtime/components/navigation/VerticalNavigation.vue

@@ -56,10 +56,14 @@
 import { toRef, defineComponent, computed } from 'vue'
 import type { PropType } from 'vue'
 import { twMerge, twJoin } from 'tailwind-merge'
-import { UIcon, UAvatar, UBadge, ULink, UDivider } from '#components'
+import UIcon from '../elements/Icon.vue'
+import UAvatar from '../elements/Avatar.vue'
+import UBadge from '../elements/Badge.vue'
+import ULink from '../elements/Link.vue'
+import UDivider from '../layout/Divider.vue'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig, getULinkProps } from '../../utils'
-import type { VerticalNavigationLink, Strategy } from '../../types'
+import type { VerticalNavigationLink, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { verticalNavigation } from '#ui/ui.config'

src/runtime/components/overlays/ContextMenu.vue

@@ -22,7 +22,7 @@ import { twMerge, twJoin } from 'tailwind-merge'
 import { useUI } from '../../composables/useUI'
 import { usePopper } from '../../composables/usePopper'
 import { mergeConfig } from '../../utils'
-import type { PopperOptions, Strategy } from '../../types'
+import type { PopperOptions, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { contextMenu } from '#ui/ui.config'

src/runtime/components/overlays/Modal.vue

@@ -32,7 +32,7 @@ import type { PropType } from 'vue'
 import { Dialog as HDialog, DialogPanel as HDialogPanel, TransitionRoot, TransitionChild, provideUseId } from '@headlessui/vue'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig } from '../../utils'
-import type { Strategy } from '../../types'
+import type { Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { modal } from '#ui/ui.config'

src/runtime/components/overlays/Notification.vue

@@ -46,11 +46,13 @@
 import { ref, computed, toRef, onMounted, onUnmounted, watch, watchEffect, defineComponent } from 'vue'
 import type { PropType } from 'vue'
 import { twMerge, twJoin } from 'tailwind-merge'
-import { UIcon, UAvatar, UButton } from '#components'
+import UIcon from '../elements/Icon.vue'
+import UAvatar from '../elements/Avatar.vue'
+import UButton from '../elements/Button.vue'
 import { useUI } from '../../composables/useUI'
 import { useTimer } from '../../composables/useTimer'
 import { mergeConfig } from '../../utils'
-import type { Avatar, Button, NotificationColor, NotificationAction, Strategy } from '../../types'
+import type { Avatar, Button, NotificationColor, NotificationAction, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { notification } from '#ui/ui.config'

src/runtime/components/overlays/Notifications.vue

@@ -27,7 +27,7 @@ import UNotification from './Notification.vue'
 import { useUI } from '../../composables/useUI'
 import { useToast } from '../../composables/useToast'
 import { mergeConfig } from '../../utils'
-import type { Notification, Strategy } from '../../types'
+import type { Notification, Strategy } from '../../types/index'
 import { useState } from '#imports'
 // @ts-expect-error
 import appConfig from '#build/app.config'

src/runtime/components/overlays/Popover.vue

@@ -43,7 +43,7 @@ import { Popover as HPopover, PopoverButton as HPopoverButton, PopoverPanel as H
 import { useUI } from '../../composables/useUI'
 import { usePopper } from '../../composables/usePopper'
 import { mergeConfig } from '../../utils'
-import type { PopperOptions, Strategy } from '../../types'
+import type { PopperOptions, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { popover } from '#ui/ui.config'

src/runtime/components/overlays/Slideover.vue

@@ -20,7 +20,7 @@ import type { WritableComputedRef, PropType } from 'vue'
 import { Dialog as HDialog, DialogPanel as HDialogPanel, TransitionRoot, TransitionChild, provideUseId } from '@headlessui/vue'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig } from '../../utils'
-import type { Strategy } from '../../types'
+import type { Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { slideover } from '#ui/ui.config'
@@ -165,4 +165,4 @@ export default defineComponent({
     }
   }
 })
-</script>
+</script>

src/runtime/components/overlays/Tooltip.vue

@@ -36,7 +36,7 @@ import UKbd from '../elements/Kbd.vue'
 import { useUI } from '../../composables/useUI'
 import { usePopper } from '../../composables/usePopper'
 import { mergeConfig } from '../../utils'
-import type { PopperOptions, Strategy } from '../../types'
+import type { PopperOptions, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { tooltip } from '#ui/ui.config'

src/runtime/composables/useFormGroup.ts

@@ -1,10 +1,6 @@
 import { inject, ref, computed } from 'vue'
 import { type UseEventBusReturn, useDebounceFn } from '@vueuse/core'
 import type { FormEvent, FormEventType, InjectedFormGroupValue } from '../types/form'
-import { mergeConfig } from '../utils'
-// @ts-expect-error
-import appConfig from '#build/app.config'
-import { formGroup } from '#ui/ui.config'
 
 type InputProps = {
   id?: string
@@ -16,8 +12,6 @@ type InputProps = {
 }
 
 
-const formGroupConfig = mergeConfig<typeof formGroup>(appConfig.ui.strategy, appConfig.ui.formGroup, formGroup)
-
 export const useFormGroup = (inputProps?: InputProps, config?: any) => {
   const formBus = inject<UseEventBusReturn<FormEvent, string> | undefined>('form-events', undefined)
   const formGroup = inject<InjectedFormGroupValue | undefined>('form-group', undefined)
@@ -62,7 +56,7 @@ export const useFormGroup = (inputProps?: InputProps, config?: any) => {
     name: computed(() => inputProps?.name ?? formGroup?.name.value),
     size: computed(() => {
       const formGroupSize = config.size[formGroup?.size.value as string] ? formGroup?.size.value : null
-      return inputProps?.size ?? formGroupSize ?? formGroupConfig?.default?.size
+      return inputProps?.size ?? formGroupSize ?? config.default?.size
     }),
     color: computed(() => formGroup?.error?.value ? 'red' : inputProps?.color),
     emitFormBlur,

src/runtime/composables/useUI.ts

@@ -2,7 +2,7 @@ import { computed, toValue, useAttrs } from 'vue'
 import type { Ref } from 'vue'
 import { useAppConfig } from '#imports'
 import { mergeConfig, omit, get } from '../utils'
-import type { Strategy } from '../types'
+import type { Strategy } from '../types/index'
 
 export const useUI = <T>(key, $ui?: Ref<Partial<T> & { strategy?: Strategy } | undefined>, $config?: Ref<T> | T, $wrapperClass?: Ref<string>, withAppConfig: boolean = false) => {
   const $attrs = useAttrs()

src/runtime/plugins/colors.ts

@@ -1,5 +1,5 @@
 import { computed } from 'vue'
-import { hexToRgb } from '../utils'
+import { get, hexToRgb } from '../utils'
 import { defineNuxtPlugin, useAppConfig, useNuxtApp, useHead } from '#imports'
 import colors from '#tailwind-config/theme/colors'
 
@@ -8,8 +8,8 @@ export default defineNuxtPlugin(() => {
   const nuxtApp = useNuxtApp()
 
   const root = computed(() => {
-    const primary: Record<string, string> | undefined = colors[appConfig.ui.primary]
+    const primary: Record<string, string> | undefined = get(colors, appConfig.ui.primary)
-    const gray: Record<string, string> | undefined = colors[appConfig.ui.gray]
+    const gray: Record<string, string> | undefined = get(colors, appConfig.ui.gray)
 
     if (!primary) {
       console.warn(`[@nuxt/ui] Primary color '${appConfig.ui.primary}' not found in Tailwind config`)

src/runtime/types/alert.d.ts

@@ -8,5 +8,5 @@ export type AlertColor = keyof typeof alert.color | ExtractDeepKey<AppConfig, ['
 export type AlertVariant = keyof typeof alert.variant | ExtractDeepKey<AppConfig, ['ui', 'alert', 'variant']> | NestedKeyOf<typeof alert.color> | NestedKeyOf<ExtractDeepObject<AppConfig, ['ui', 'alert', 'color']>>
 
 export interface AlertAction extends Button {
-  click?: Function
+  click?: (...args: any[]) => void
 }

src/runtime/types/command-palette.d.ts

@@ -22,8 +22,8 @@ export interface Group {
   active?: string
   inactive?: string
   commands?: Command[]
-  search?: Function
+  search?: (...args: any[]) => any[] | Promise<any[]>
-  filter?: Function
+  filter?: (...args: any[]) => Command[]
   static?: Boolean
   [key: string]: any
 }

src/runtime/types/dropdown.d.ts

@@ -11,5 +11,5 @@ export interface DropdownItem extends NuxtLinkProps {
   shortcuts?: string[]
   disabled?: boolean
   class?: string
-  click?: Function
+  click?: (...args: any[]) => void
 }

src/runtime/types/horizontal-navigation.d.ts

@@ -8,6 +8,6 @@ export interface HorizontalNavigationLink extends Link {
   icon?: string
   iconClass?: string
   avatar?: Avatar
-  click?: Function
+  click?: (...args: any[]) => void
   badge?: string | number | Badge
 }

src/runtime/types/notification.d.ts

@@ -5,7 +5,7 @@ import colors from '#ui-colors'
 export type NotificationColor = 'gray' | typeof colors[number]
 
 export interface NotificationAction extends Button {
-  click?: Function
+  click?: (...args: any[]) => void
 }
 
 export interface Notification {
@@ -17,8 +17,8 @@ export interface Notification {
   closeButton?: Button
   timeout: number
   actions?: NotificationAction[]
-  click?: Function
+  click?: (...args: any[]) => void
-  callback?: Function
+  callback?: (...args: any[]) => void
   color?: NotificationColor
   ui?: any
 }

src/runtime/types/vertical-navigation.d.ts

@@ -8,6 +8,6 @@ export interface VerticalNavigationLink extends Link {
   icon?: string
   iconClass?: string
   avatar?: Avatar
-  click?: Function
+  click?: (...args: any[]) => void
   badge?: string | number | Badge
 }

src/runtime/utils/colors.ts

@@ -19,193 +19,193 @@ const colorsToExclude = [
 
 const safelistByComponent: Record<string, (colors: string) => TWConfig['safelist']> = {
   alert: (colorsAsRegex) => [{
-    pattern: new RegExp(`bg-(${colorsAsRegex})-50`)
+    pattern: RegExp(`^bg-(${colorsAsRegex})-50$`)
   }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex})-400`),
+    pattern: RegExp(`^bg-(${colorsAsRegex})-400$`),
     variants: ['dark']
   }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex})-500`)
+    pattern: RegExp(`^bg-(${colorsAsRegex})-500$`)
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex})-400`),
+    pattern: RegExp(`^text-(${colorsAsRegex})-400$`),
     variants: ['dark']
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex})-500`)
+    pattern: RegExp(`^text-(${colorsAsRegex})-500$`)
   }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex})-400`),
+    pattern: RegExp(`^ring-(${colorsAsRegex})-400$`),
     variants: ['dark']
   }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex})-500`)
+    pattern: RegExp(`^ring-(${colorsAsRegex})-500$`)
   }],
   avatar: (colorsAsRegex) => [{
-    pattern: new RegExp(`bg-(${colorsAsRegex})-400`),
+    pattern: RegExp(`^bg-(${colorsAsRegex})-400$`),
     variants: ['dark']
   }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex})-500`)
+    pattern: RegExp(`^bg-(${colorsAsRegex})-500$`)
   }],
   badge: (colorsAsRegex) => [{
-    pattern: new RegExp(`bg-(${colorsAsRegex})-50`)
+    pattern: RegExp(`^bg-(${colorsAsRegex})-50$`)
   }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex})-400`),
+    pattern: RegExp(`^bg-(${colorsAsRegex})-400$`),
     variants: ['dark']
   }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex})-500`)
+    pattern: RegExp(`^bg-(${colorsAsRegex})-500$`)
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex})-400`),
+    pattern: RegExp(`^text-(${colorsAsRegex})-400$`),
     variants: ['dark']
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex})-500`)
+    pattern: RegExp(`^text-(${colorsAsRegex})-500$`)
   }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex})-400`),
+    pattern: RegExp(`^ring-(${colorsAsRegex})-400$`),
     variants: ['dark']
   }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex})-500`)
+    pattern: RegExp(`^ring-(${colorsAsRegex})-500$`)
   }],
   button: (colorsAsRegex) => [{
-    pattern: new RegExp(`bg-(${colorsAsRegex})-50`),
+    pattern: RegExp(`^bg-(${colorsAsRegex})-50$`),
     variants: ['hover', 'disabled']
   }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex})-100`),
+    pattern: RegExp(`^bg-(${colorsAsRegex})-100$`),
     variants: ['hover']
   }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex})-400`),
+    pattern: RegExp(`^bg-(${colorsAsRegex})-400$`),
     variants: ['dark', 'dark:disabled']
   }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex})-500`),
+    pattern: RegExp(`^bg-(${colorsAsRegex})-500$`),
     variants: ['disabled', 'dark:hover']
   }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex})-600`),
+    pattern: RegExp(`^bg-(${colorsAsRegex})-600$`),
     variants: ['hover']
   }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex})-900`),
+    pattern: RegExp(`^bg-(${colorsAsRegex})-900$`),
     variants: ['dark:hover']
   }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex})-950`),
+    pattern: RegExp(`^bg-(${colorsAsRegex})-950$`),
     variants: ['dark', 'dark:hover', 'dark:disabled']
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex})-400`),
+    pattern: RegExp(`^text-(${colorsAsRegex})-400$`),
     variants: ['dark', 'dark:disabled']
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex})-500`),
+    pattern: RegExp(`^text-(${colorsAsRegex})-500$`),
     variants: ['dark:hover', 'disabled']
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex})-600`),
+    pattern: RegExp(`^text-(${colorsAsRegex})-600$`),
     variants: ['hover']
   }, {
-    pattern: new RegExp(`outline-(${colorsAsRegex})-400`),
+    pattern: RegExp(`^outline-(${colorsAsRegex})-400$`),
     variants: ['dark:focus-visible']
   }, {
-    pattern: new RegExp(`outline-(${colorsAsRegex})-500`),
+    pattern: RegExp(`^outline-(${colorsAsRegex})-500$`),
     variants: ['focus-visible']
   }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex})-400`),
+    pattern: RegExp(`^ring-(${colorsAsRegex})-400$`),
     variants: ['dark:focus-visible']
   }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex})-500`),
+    pattern: RegExp(`^ring-(${colorsAsRegex})-500$`),
     variants: ['focus-visible']
   }],
   input: (colorsAsRegex) => [{
-    pattern: new RegExp(`text-(${colorsAsRegex})-400`),
+    pattern: RegExp(`^text-(${colorsAsRegex})-400$`),
     variants: ['dark']
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex})-500`)
+    pattern: RegExp(`^text-(${colorsAsRegex})-500$`)
   }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex})-400`),
+    pattern: RegExp(`^ring-(${colorsAsRegex})-400$`),
     variants: ['dark', 'dark:focus']
   }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex})-500`),
+    pattern: RegExp(`^ring-(${colorsAsRegex})-500$`),
     variants: ['focus']
   }],
   radio: (colorsAsRegex) => [{
-    pattern: new RegExp(`text-(${colorsAsRegex})-400`),
+    pattern: RegExp(`^text-(${colorsAsRegex})-400$`),
     variants: ['dark']
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex})-500`)
+    pattern: RegExp(`^text-(${colorsAsRegex})-500$`)
   }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex})-400`),
+    pattern: RegExp(`^ring-(${colorsAsRegex})-400$`),
     variants: ['dark:focus-visible']
   }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex})-500`),
+    pattern: RegExp(`^ring-(${colorsAsRegex})-500$`),
     variants: ['focus-visible']
   }],
   checkbox: (colorsAsRegex) => [{
-    pattern: new RegExp(`text-(${colorsAsRegex})-400`),
+    pattern: RegExp(`^text-(${colorsAsRegex})-400$`),
     variants: ['dark']
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex})-500`)
+    pattern: RegExp(`^text-(${colorsAsRegex})-500$`)
   }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex})-400`),
+    pattern: RegExp(`^ring-(${colorsAsRegex})-400$`),
     variants: ['dark:focus-visible']
   }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex})-500`),
+    pattern: RegExp(`^ring-(${colorsAsRegex})-500$`),
     variants: ['focus-visible']
   }],
   toggle: (colorsAsRegex) => [{
-    pattern: new RegExp(`bg-(${colorsAsRegex})-400`),
+    pattern: RegExp(`^bg-(${colorsAsRegex})-400$`),
     variants: ['dark']
   }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex})-500`)
+    pattern: RegExp(`^bg-(${colorsAsRegex})-500$`)
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex})-400`),
+    pattern: RegExp(`^text-(${colorsAsRegex})-400$`),
     variants: ['dark']
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex})-500`)
+    pattern: RegExp(`^text-(${colorsAsRegex})-500$`)
   }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex})-400`),
+    pattern: RegExp(`^ring-(${colorsAsRegex})-400$`),
     variants: ['dark:focus-visible']
   }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex})-500`),
+    pattern: RegExp(`^ring-(${colorsAsRegex})-500$`),
     variants: ['focus-visible']
   }],
   range: (colorsAsRegex) => [{
-    pattern: new RegExp(`bg-(${colorsAsRegex})-400`),
+    pattern: RegExp(`^bg-(${colorsAsRegex})-400$`),
     variants: ['dark']
   }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex})-500`)
+    pattern: RegExp(`^bg-(${colorsAsRegex})-500$`)
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex})-400`),
+    pattern: RegExp(`^text-(${colorsAsRegex})-400$`),
     variants: ['dark']
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex})-500`)
+    pattern: RegExp(`^text-(${colorsAsRegex})-500$`)
   }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex})-400`),
+    pattern: RegExp(`^ring-(${colorsAsRegex})-400$`),
     variants: ['dark:focus-visible']
   }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex})-500`),
+    pattern: RegExp(`^ring-(${colorsAsRegex})-500$`),
     variants: ['focus-visible']
   }],
   progress: (colorsAsRegex) => [{
-    pattern: new RegExp(`text-(${colorsAsRegex})-400`),
+    pattern: RegExp(`^text-(${colorsAsRegex})-400$`),
     variants: ['dark']
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex})-500`)
+    pattern: RegExp(`^text-(${colorsAsRegex})-500$`)
   }],
   meter: (colorsAsRegex) => [{
-    pattern: new RegExp(`bg-(${colorsAsRegex})-400`),
+    pattern: RegExp(`^bg-(${colorsAsRegex})-400$`),
     variants: ['dark']
   }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex})-500`)
+    pattern: RegExp(`^bg-(${colorsAsRegex})-500$`)
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex})-400`),
+    pattern: RegExp(`^text-(${colorsAsRegex})-400$`),
     variants: ['dark']
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex})-500`)
+    pattern: RegExp(`^text-(${colorsAsRegex})-500$`)
   }],
   notification: (colorsAsRegex) => [{
-    pattern: new RegExp(`bg-(${colorsAsRegex})-400`),
+    pattern: RegExp(`^bg-(${colorsAsRegex})-400$`),
     variants: ['dark']
   }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex})-500`)
+    pattern: RegExp(`^bg-(${colorsAsRegex})-500$`)
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex})-400`),
+    pattern: RegExp(`^text-(${colorsAsRegex})-400$`),
     variants: ['dark']
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex})-500`)
+    pattern: RegExp(`^text-(${colorsAsRegex})-500$`)
   }],
   chip: (colorsAsRegex) => [{
-    pattern: new RegExp(`bg-(${colorsAsRegex})-400`),
+    pattern: RegExp(`^bg-(${colorsAsRegex})-400$`),
     variants: ['dark']
   }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex})-500`)
+    pattern: RegExp(`^bg-(${colorsAsRegex})-500$`)
   }]
 }
 
@@ -324,7 +324,15 @@ export const customSafelistExtractor = (prefix: string, content: string, colors:
 
         return matches.map(match => {
           const colorOptions = match.substring(1, match.length - 1).split('|')
-          return colorOptions.map(color => `${variant ? variant + ':' : ''}` + group.pattern.source.replace(match, color))
+          return colorOptions.map(
+            color => {
+              const classesExtracted = group.pattern.source.replace(match, color).replace('^', '').replace('$', '')
+              if (variant) {
+                return `${variant}:${classesExtracted}`
+              }
+              return classesExtracted
+            }
+          )
         }).flat()
       })
     })

src/runtime/utils/index.ts

@@ -1,6 +1,6 @@
 import { defu, createDefu } from 'defu'
 import { extendTailwindMerge } from 'tailwind-merge'
-import type { Strategy } from '../types'
+import type { Strategy } from '../types/index'
 
 const customTwMerge = extendTailwindMerge<string, string>({
   extend: {

src/runtime/utils/link.ts

@@ -21,7 +21,7 @@ export const nuxtLinkProps = {
     required: false
   },
   rel: {
-    type: String as PropType<NuxtLinkProps['rel']>,
+    type: String as PropType<any>,
     default: undefined,
     required: false
   },

test/colors.spec.ts

@@ -24,17 +24,17 @@ describe('generateSafelist', () => {
     [
       'default safelist',
       {}, [],
-      ['bg-(primary)-50', 'bg-(red)-500'] // these both should be in the safelist
+      ['^bg-(primary)-50$', '^bg-(red)-500$'] // these both should be in the safelist
     ],
     [
       'safelisting single new color',
       {}, ['myColor'],
-      'bg-(myColor|primary)-50'
+      '^bg-(myColor|primary)-50$'
     ],
     [
       'reducing amount of theme colors',
       { theme: { colors: { plainBlue: '#00F' } } }, ['plainBlue'],
-      ['bg-(plainBlue|primary)-50', '!', /orange/] // the word "orange" should _not_ be found in any safelist pattern
+      ['^bg-(plainBlue|primary)-50$', '!', /orange/] // the word "orange" should _not_ be found in any safelist pattern
     ]
   ])('%s', async (_description, tailwindConfig: Partial<TWConfig>, safelistColors, safelistPatterns) => {
     safelistColors.push('primary')