chore(deps): migrate to eslint 9 (#2443)

2026-01-14 12:14:41 +01:00 · 2024-10-24 10:30:37 +02:00
parent b29fcd2650
commit cae4f0c4a8
177 changed files with 2034 additions and 1289 deletions
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,14 +0,0 @@
-node_modules
-dist
-.nuxt
-coverage
-*.log*
-.DS_Store
-.code
-*.iml
-package-lock.json
-templates/*
-sw.js
-
-# Templates
-src/templates
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -1,46 +0,0 @@
-module.exports = {
-  root: true,
-  extends: ['@nuxt/eslint-config'],
-  rules: {
-    // General
-    semi: ['error', 'never'],
-    quotes: ['error', 'single'],
-    'comma-dangle': ['error', 'never'],
-    'comma-spacing': ['error', { before: false, after: true }],
-    'keyword-spacing': ['error', { before: true, after: true }],
-    'space-before-function-paren': ['error', 'always'],
-    'object-curly-spacing': ['error', 'always'],
-    'arrow-spacing': ['error', { before: true, after: true }],
-    'key-spacing': ['error', { beforeColon: false, afterColon: true, mode: 'strict' }],
-    'space-before-blocks': ['error', 'always'],
-    'space-infix-ops': ['error', { int32Hint: false }],
-    'no-multi-spaces': ['error', { ignoreEOLComments: true }],
-    'no-trailing-spaces': ['error'],
-
-    // Typescript
-    '@typescript-eslint/type-annotation-spacing': 'error',
-
-    // Vuejs
-    'vue/multi-word-component-names': 0,
-    'vue/html-indent': ['error', 2],
-    'vue/comma-spacing': ['error', { before: false, after: true }],
-    'vue/script-indent': ['error', 2, { baseIndent: 0 }],
-    'vue/keyword-spacing': ['error', { before: true, after: true }],
-    'vue/object-curly-spacing': ['error', 'always'],
-    'vue/key-spacing': ['error', { beforeColon: false, afterColon: true, mode: 'strict' }],
-    'vue/arrow-spacing': ['error', { before: true, after: true }],
-    'vue/array-bracket-spacing': ['error', 'never'],
-    'vue/block-spacing': ['error', 'always'],
-    'vue/brace-style': ['error', 'stroustrup', { allowSingleLine: true }],
-    'vue/space-infix-ops': ['error', { int32Hint: false }],
-    'vue/max-attributes-per-line': [
-      'error',
-      {
-        singleline: {
-          max: 5
-        }
-      }
-    ],
-    'vue/padding-line-between-blocks': ['error', 'always']
-  }
-}
--- a/docs/app.vue
+++ b/docs/app.vue
@@ -50,7 +50,8 @@ const links = computed(() => {
    icon: 'i-heroicons-book-open',
    to: '/getting-started',
    active: route.path.startsWith('/getting-started') || route.path.startsWith('/components')
-  }, ...(navigation.value.find(item => item._path === '/pro') ? [{
+  }, ...(navigation.value.find(item => item._path === '/pro')
+    ? [{
        label: 'Pro',
        icon: 'i-heroicons-square-3-stack-3d',
        to: '/pro',
@@ -63,7 +64,8 @@ const links = computed(() => {
        label: 'Templates',
        icon: 'i-heroicons-computer-desktop',
        to: '/pro/templates'
-  }] : []), {
+      }]
+    : []), {
    label: 'Releases',
    icon: 'i-heroicons-rocket-launch',
    to: '/releases'
--- a/docs/components/Header.vue
+++ b/docs/components/Header.vue
@@ -48,8 +48,8 @@

 <script setup lang="ts">
 import type { NavItem } from '@nuxt/content'
-import type { HeaderLink } from '#ui-pro/types'
 import pkg from '@nuxt/ui-pro/package.json'
+import type { HeaderLink } from '#ui-pro/types'

 defineProps<{
  links: HeaderLink[]
--- a/docs/components/content/ComponentCard.vue
+++ b/docs/components/content/ComponentCard.vue
@@ -54,7 +54,6 @@
 import { upperFirst, camelCase, kebabCase } from 'scule'
 import { useShikiHighlighter } from '~/composables/useShikiHighlighter'

-// eslint-disable-next-line vue/no-dupe-keys
 const props = defineProps({
  slug: {
    type: String,
@@ -89,7 +88,7 @@ const props = defineProps({
    default: () => []
  },
  options: {
-    type: Array as PropType<{ name: string; values: string[]; restriction: 'expected' | 'included' | 'excluded' | 'only' }[]>,
+    type: Array as PropType<{ name: string, values: string[], restriction: 'expected' | 'included' | 'excluded' | 'only' }[]>,
    default: () => []
  },
  backgroundClass: {
@@ -114,7 +113,6 @@ const props = defineProps({
  }
 })

-// eslint-disable-next-line vue/no-dupe-keys
 const baseProps = reactive({ ...props.baseProps })
 const componentProps = reactive({ ...props.props })

@@ -158,13 +156,13 @@ const generateOptions = (key: string, schema: { kind: string, schema: [], type:
  const schemaOptions = Object.values(schema?.schema || {})

  if (key.toLowerCase() === 'size' && schemaOptions?.length > 0) {
-    const baseSizeOrder = { 'xs': 1, 'sm': 2, 'md': 3, 'lg': 4, 'xl': 5 }
+    const baseSizeOrder = { xs: 1, sm: 2, md: 3, lg: 4, xl: 5 }
    schemaOptions.sort((a: string, b: string) => {
-      const aBase = a.match(/[a-zA-Z]+/)[0].toLowerCase()
-      const bBase = b.match(/[a-zA-Z]+/)[0].toLowerCase()
+      const aBase = a.match(/[a-z]+/i)[0].toLowerCase()
+      const bBase = b.match(/[a-z]+/i)[0].toLowerCase()

-      const aNum = parseInt(a.match(/\d+/)?.[0]) || 1
-      const bNum = parseInt(b.match(/\d+/)?.[0]) || 1
+      const aNum = Number.parseInt(a.match(/\d+/)?.[0]) || 1
+      const bNum = Number.parseInt(b.match(/\d+/)?.[0]) || 1

      if (aBase === bBase) {
        return aBase === 'xs' ? bNum - aNum : aNum - bNum
@@ -214,7 +212,6 @@ const propsToSelect = computed(() => Object.keys(componentProps).map((key) => {
  }
 }).filter(Boolean))

-// eslint-disable-next-line vue/no-dupe-keys
 const code = computed(() => {
  let code = `\`\`\`html
 <template>
@@ -272,6 +269,7 @@ function renderObject (obj: any) {
 const { data: ast } = await useAsyncData(`${name}-ast-${JSON.stringify({ props: componentProps, slots: props.slots, code: props.code })}`, async () => {
  let formatted = ''
  try {
+    // @ts-ignore
    formatted = await $prettier.format(code.value, {
      trailingComma: 'none',
      semi: false,
--- a/docs/components/content/ComponentPreset.vue
+++ b/docs/components/content/ComponentPreset.vue
@@ -18,7 +18,6 @@ const props = defineProps({
 const route = useRoute()
 const highlighter = useShikiHighlighter()

-// eslint-disable-next-line vue/no-dupe-keys
 const slug = props.slug || route.params.slug[route.params.slug.length - 1]
 const camelName = camelCase(slug)
 const name = `U${upperFirst(camelName)}`
--- a/docs/components/content/examples/CommandPaletteExampleGroups.vue
+++ b/docs/components/content/examples/CommandPaletteExampleGroups.vue
@@ -18,10 +18,12 @@ const actions = [
 ]

 const groups = computed(() =>
-  [commandPaletteRef.value?.query ? {
+  [commandPaletteRef.value?.query
+    ? {
        key: 'users',
        commands: users
-  } : {
+      }
+    : {
        key: 'recent',
        label: 'Recent searches',
        commands: users.slice(0, 1)
--- a/docs/components/content/examples/CommandPaletteExampleThemeAlgolia.vue
+++ b/docs/components/content/examples/CommandPaletteExampleThemeAlgolia.vue
@@ -71,7 +71,7 @@ const ui = {
    :autoselect="false"
    command-attribute="title"
    :fuse="{
-      fuseOptions: { keys: ['title', 'category'] },
+      fuseOptions: { keys: ['title', 'category'] }
    }"
    placeholder="Search docs"
  />
--- a/docs/components/content/examples/PaginationExampleTo.vue
+++ b/docs/components/content/examples/PaginationExampleTo.vue
@@ -11,7 +11,7 @@ const items = ref(Array(50))
    :to="(page: number) => ({
      query: { page },
      // Hash is specified here to prevent the page from scrolling to the top
-      hash: '#links',
+      hash: '#links'
    })"
  />
 </template>
--- a/docs/components/content/examples/SelectMenuExampleCreatableFunction.vue
+++ b/docs/components/content/examples/SelectMenuExampleCreatableFunction.vue
@@ -38,7 +38,7 @@ const labels = computed({

 const showCreateOption = (query, results) => {
  const lowercaseQuery = String.prototype.toLowerCase.apply(query || '')
-  return lowercaseQuery.length >= 3 && !results.find(option => {
+  return lowercaseQuery.length >= 3 && !results.find((option) => {
    return String.prototype.toLowerCase.apply(option['name'] || '') === lowercaseQuery
  })
 }
--- a/docs/components/content/examples/SlideoverExampleComponent.vue
+++ b/docs/components/content/examples/SlideoverExampleComponent.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-
 const props = defineProps({
  count: {
    type: Number,
@@ -8,7 +7,7 @@ const props = defineProps({
 })

 const emits = defineEmits<{
-  close: [];
+  close: []
 }>()
 </script>

--- a/docs/components/content/examples/TableExampleAdvanced.vue
+++ b/docs/components/content/examples/TableExampleAdvanced.vue
@@ -19,13 +19,13 @@ const columns = [{
 }]

 const selectedColumns = ref(columns)
-const columnsTable = computed(() => columns.filter((column) => selectedColumns.value.includes(column)))
+const columnsTable = computed(() => columns.filter(column => selectedColumns.value.includes(column)))

 // Selected Rows
 const selectedRows = ref([])

 function select(row) {
-  const index = selectedRows.value.findIndex((item) => item.id === row.id)
+  const index = selectedRows.value.findIndex(item => item.id === row.id)
  if (index === -1) {
    selectedRows.value.push(row)
  } else {
@@ -92,10 +92,10 @@ const { data: todos, status } = await useLazyAsyncData<{
 }[]>('todos', () => ($fetch as any)(`https://jsonplaceholder.typicode.com/todos${searchStatus.value}`, {
  query: {
    q: search.value,
-    '_page': page.value,
-    '_limit': pageCount.value,
-    '_sort': sort.value.column,
-    '_order': sort.value.direction
+    _page: page.value,
+    _limit: pageCount.value,
+    _sort: sort.value.column,
+    _order: sort.value.direction
  }
 }), {
  default: () => [],
--- a/docs/components/content/examples/TableExampleClickable.vue
+++ b/docs/components/content/examples/TableExampleClickable.vue
@@ -32,7 +32,7 @@ const people = [{
 }]

 function select(row) {
-  const index = selected.value.findIndex((item) => item.id === row.id)
+  const index = selected.value.findIndex(item => item.id === row.id)
  if (index === -1) {
    selected.value.push(row)
  } else {
--- a/docs/components/content/examples/TableExampleLoadingSlot.vue
+++ b/docs/components/content/examples/TableExampleLoadingSlot.vue
@@ -67,7 +67,9 @@ const pending = ref(true)
 }

@keyframes loader-6 {
-	0%, 100% {
+
+  0%,
+  100% {
    transform: none;
  }

--- a/docs/components/content/examples/TableExampleSlots.vue
+++ b/docs/components/content/examples/TableExampleSlots.vue
@@ -53,7 +53,7 @@ const people = [{
  role: 'Member'
 }]

-const items = (row) => [
+const items = row => [
  [{
    label: 'Edit',
    icon: 'i-heroicons-pencil-square-20-solid',
--- a/docs/components/content/examples/TabsExampleVModel.vue
+++ b/docs/components/content/examples/TabsExampleVModel.vue
@@ -18,7 +18,7 @@ const router = useRouter()

 const selected = computed({
  get() {
-    const index = items.findIndex((item) => item.label === route.query.tab)
+    const index = items.findIndex(item => item.label === route.query.tab)
    if (index === -1) {
      return 0
    }
--- a/docs/components/date-picker/DatePicker.vue
+++ b/docs/components/date-picker/DatePicker.vue
@@ -31,9 +31,9 @@ const breakpoints = useBreakpoints(breakpointsTailwind)
 const smallerThanSm = breakpoints.smaller('sm')

 const attrs = {
-  transparent: true,
-  borderless: true,
-  color: 'primary',
+  'transparent': true,
+  'borderless': true,
+  'color': 'primary',
  'is-dark': { selector: 'html', darkClass: 'dark' },
  'first-day-of-week': 2
 }
--- a/docs/components/home/HomeProDemoBlock.vue
+++ b/docs/components/home/HomeProDemoBlock.vue
@@ -29,7 +29,7 @@
      v-else
      class="font-semibold flex flex-col gap-1 text-center"
      :class="[
-        !block.slot && (block.inactive || block.inactive === undefined ? 'text-gray-900 dark:text-white' : 'text-white dark:text-gray-900'),
+        !block.slot && (block.inactive || block.inactive === undefined ? 'text-gray-900 dark:text-white' : 'text-white dark:text-gray-900')
      ]"
    >
      {{ block.name }}
--- a/docs/components/home/HomeTetris.vue
+++ b/docs/components/home/HomeTetris.vue
@@ -40,6 +40,7 @@ function createGrid () {
  grid.value = []

  for (let i = 0; i <= rows.value; i++) {
+    // eslint-disable-next-line unicorn/no-new-array
    grid.value.push(new Array(cols.value).fill(null))
  }
 }
--- a/docs/composables/useComponentMeta.ts
+++ b/docs/composables/useComponentMeta.ts
@@ -7,7 +7,9 @@ export async function fetchComponentMeta (name: string) {
    await state.value[name]
    return state.value[name]
  }
-  if (state.value[name]) { return state.value[name] }
+  if (state.value[name]) {
+    return state.value[name]
+  }

  // Store promise to avoid multiple calls

--- a/docs/composables/useContentExamplesCode.ts
+++ b/docs/composables/useContentExamplesCode.ts
@@ -8,7 +8,9 @@ export async function fetchContentExampleCode (name?: string) {
    await state.value[name]
    return state.value[name]
  }
-  if (state.value[name]) { return state.value[name] }
+  if (state.value[name]) {
+    return state.value[name]
+  }

  // add to nitro prerender
  if (import.meta.server) {
--- a/docs/error.vue
+++ b/docs/error.vue
@@ -29,8 +29,8 @@
 </template>

 <script setup lang="ts">
-import type { NuxtError } from '#app'
 import type { ParsedContent } from '@nuxt/content'
+import type { NuxtError } from '#app'

 useSeoMeta({
  title: 'Page not found',
@@ -57,7 +57,8 @@ const links = computed(() => {
    icon: 'i-heroicons-book-open',
    to: '/getting-started',
    active: route.path.startsWith('/getting-started') || route.path.startsWith('/components')
-  }, ...(navigation.value.find(item => item._path === '/pro') ? [{
+  }, ...(navigation.value.find(item => item._path === '/pro')
+    ? [{
        label: 'Pro',
        icon: 'i-heroicons-square-3-stack-3d',
        to: '/pro',
@@ -70,7 +71,8 @@ const links = computed(() => {
        label: 'Templates',
        icon: 'i-heroicons-computer-desktop',
        to: '/pro/templates'
-  }] : []), {
+      }]
+    : []), {
    label: 'Releases',
    icon: 'i-heroicons-rocket-launch',
    to: '/releases'
--- a/docs/modules/content-examples-code.ts
+++ b/docs/modules/content-examples-code.ts
@@ -1,3 +1,6 @@
+import { existsSync, readFileSync } from 'node:fs'
+import fsp from 'node:fs/promises'
+import { dirname, join } from 'pathe'
 import {
  defineNuxtModule,
  addTemplate,
@@ -5,10 +8,6 @@ import {
  createResolver
 } from '@nuxt/kit'

-import { existsSync, readFileSync } from 'fs'
-import { dirname, join } from 'pathe'
-import fsp from 'fs/promises'
-
 export default defineNuxtModule({
  meta: {
    name: 'content-examples-code'
@@ -74,7 +73,7 @@ export default defineNuxtModule({

    nuxt.hook('components:extend', async (_components) => {
      components = _components
-        .filter((v) => v.shortPath.includes('components/content/examples/'))
+        .filter(v => v.shortPath.includes('components/content/examples/'))
        .reduce((acc, component) => {
          acc[component.pascalName] = component
          return acc
--- a/docs/nuxt.config.ts
+++ b/docs/nuxt.config.ts
@@ -8,10 +8,12 @@ const { resolve } = createResolver(import.meta.url)

 export default defineNuxtConfig({
  // @ts-ignore
-  extends: process.env.NUXT_UI_PRO_PATH ? [
+  extends: process.env.NUXT_UI_PRO_PATH
+    ? [
        process.env.NUXT_UI_PRO_PATH,
        resolve(process.env.NUXT_UI_PRO_PATH, '.docs')
-  ] : [
+      ]
+    : [
        '@nuxt/ui-pro',
        process.env.NUXT_GITHUB_TOKEN && ['github:nuxt/ui-pro/.docs#dev', { giget: { auth: process.env.NUXT_GITHUB_TOKEN } }]
      ].filter(Boolean),
@@ -29,15 +31,8 @@ export default defineNuxtConfig({
    'modules/content-examples-code'
  ],

-  runtimeConfig: {
-    public: {
-      version: pkg.version
-    }
-  },
-
-  ui: {
-    global: true,
-    safelistColors: excludeColors(colors)
+  site: {
+    url: 'https://ui.nuxt.com'
  },

  content: {
@@ -48,31 +43,42 @@ export default defineNuxtConfig({
      ]
    },
    sources: {
-      pro: process.env.NUXT_UI_PRO_PATH ? {
+      pro: process.env.NUXT_UI_PRO_PATH
+        ? {
            prefix: '/pro',
            driver: 'fs',
            base: resolve(process.env.NUXT_UI_PRO_PATH, '.docs/content/pro')
-      } : process.env.NUXT_GITHUB_TOKEN ? {
+          }
+        : process.env.NUXT_GITHUB_TOKEN
+          ? {
              prefix: '/pro',
              driver: 'github',
              repo: 'nuxt/ui-pro',
              branch: 'dev',
              dir: '.docs/content/pro',
              token: process.env.NUXT_GITHUB_TOKEN || ''
-      } : undefined
+            }
+          : undefined
    }
  },

-  image: {
-    provider: 'ipx'
+  ui: {
+    global: true,
+    safelistColors: excludeColors(colors)
  },

-  icon: {
-    clientBundle: {
-      scan: true
+  runtimeConfig: {
+    public: {
+      version: pkg.version
    }
  },

+  routeRules: {
+    '/components': { redirect: '/components/accordion', prerender: false }
+  },
+
+  compatibilityDate: '2024-07-23',
+
  nitro: {
    prerender: {
      routes: [
@@ -86,8 +92,32 @@ export default defineNuxtConfig({
    }
  },

-  routeRules: {
-    '/components': { redirect: '/components/accordion', prerender: false }
+  vite: {
+    optimizeDeps: {
+      include: ['date-fns']
+    }
+  },
+
+  typescript: {
+    strict: false
+  },
+
+  hooks: {
+    // Related to https://github.com/nuxt/nuxt/pull/22558
+    'components:extend': (components) => {
+      components.forEach((component) => {
+        if (component.shortPath.includes(process.env.NUXT_UI_PRO_PATH || '@nuxt/ui-pro')) {
+          component.global = true
+        } else if (component.global) {
+          component.global = 'sync'
+        }
+      })
+    }
+  },
+
+  cloudflareAnalytics: {
+    token: '1e2b0c5e9a214f0390b9b94e043d8d4c',
+    scriptPath: false
  },

  componentMeta: {
@@ -111,37 +141,13 @@ export default defineNuxtConfig({
    }
  },

-  cloudflareAnalytics: {
-    token: '1e2b0c5e9a214f0390b9b94e043d8d4c',
-    scriptPath: false
+  icon: {
+    clientBundle: {
+      scan: true
+    }
  },

-  hooks: {
-    // Related to https://github.com/nuxt/nuxt/pull/22558
-    'components:extend': (components) => {
-      components.forEach((component) => {
-        if (component.shortPath.includes(process.env.NUXT_UI_PRO_PATH || '@nuxt/ui-pro')) {
-          component.global = true
-        } else if (component.global) {
-          component.global = 'sync'
+  image: {
+    provider: 'ipx'
  }
 })
-    }
-  },
-
-  typescript: {
-    strict: false
-  },
-
-  site: {
-    url: 'https://ui.nuxt.com'
-  },
-
-  vite: {
-    optimizeDeps: {
-      include: ['date-fns']
-    }
-  },
-
-  compatibilityDate: '2024-07-23'
-})
--- a/docs/pages/index.vue
+++ b/docs/pages/index.vue
@@ -295,7 +295,7 @@
                    wrapper: 'px-4 py-2.5 border-gray-800/10 dark:border-gray-200/10 cursor-pointer',
                    icon: {
                      wrapper: 'mb-2 p-1',
-                      base: 'h-4 w-4',
+                      base: 'h-4 w-4'
                    },
                    title: 'text-sm',
                    description: 'text-xs'
@@ -466,7 +466,8 @@ const steps = {

 const inc = computed(() => (height.value - 32 - 64 - 32 - 32) / 4)

-const landingBlocks = computed(() => isAfterStep(steps.landing) && isBeforeStep(steps.docs) ? [{
+const landingBlocks = computed(() => isAfterStep(steps.landing) && isBeforeStep(steps.docs)
+  ? [{
      class: 'inset-x-0 top-20 bottom-20 overflow-hidden',
      inactive: true,
      children: [{
@@ -506,34 +507,42 @@ const landingBlocks = computed(() => isAfterStep(steps.landing) && isBeforeStep(
          to: '/pro/components/landing-grid',
          class: ['inset-x-4 bottom-4 top-48', isAfterStep(steps.landing + 8) && 'grid grid-cols-4 gap-4 p-4'].filter(Boolean).join(' '),
          inactive: isAfterStep(steps.landing + 8),
-      children: [isAfterStep(steps.landing + 9) ? {
+          children: [isAfterStep(steps.landing + 9)
+            ? {
                slot: 'landing-card-1',
                class: '!relative'
-      } : {
+              }
+            : {
                name: 'ULandingCard',
                to: '/pro/components/landing-card',
                class: '!relative h-full',
                inactive: false
-      }, isAfterStep(steps.landing + 9) ? {
+              }, isAfterStep(steps.landing + 9)
+            ? {
                slot: 'landing-card-2',
                class: '!relative h-full'
-      } : {
+              }
+            : {
                name: 'ULandingCard',
                to: '/pro/components/landing-card',
                class: '!relative h-full',
                inactive: false
-      }, isAfterStep(steps.landing + 9) ? {
+              }, isAfterStep(steps.landing + 9)
+            ? {
                slot: 'landing-card-3',
                class: '!relative h-full'
-      } : {
+              }
+            : {
                name: 'ULandingCard',
                to: '/pro/components/landing-card',
                class: '!relative h-full',
                inactive: false
-      }, isAfterStep(steps.landing + 9) ? {
+              }, isAfterStep(steps.landing + 9)
+            ? {
                slot: 'landing-card-4',
                class: '!relative h-full'
-      } : {
+              }
+            : {
                name: 'ULandingCard',
                to: '/pro/components/landing-card',
                class: '!relative h-full',
@@ -563,25 +572,30 @@ const landingBlocks = computed(() => isAfterStep(steps.landing) && isBeforeStep(
          }]
        }]
      }].filter(Boolean)
-}] : [])
+    }]
+  : [])

 const docsBlocks = computed(() => [isAfterStep(steps.docs) && {
  name: 'UPage',
  to: '/pro/components/page',
  class: 'inset-x-0 top-20 bottom-20',
  inactive: isAfterStep(steps.docs + 1),
-  children: [isAfterStep(steps.docs + 2) ? {
+  children: [isAfterStep(steps.docs + 2)
+    ? {
        name: 'UAside',
        to: '/pro/components/aside',
        class: 'left-4 inset-y-4 w-64',
        inactive: isAfterStep(steps.docs + 3),
-    children: [isAfterStep(steps.docs + 4) ? {
+        children: [isAfterStep(steps.docs + 4)
+          ? {
              slot: 'aside-top',
              class: 'inset-x-4 top-4'
-    } : {
+            }
+          : {
              name: '#top',
              class: 'inset-x-4 top-4 h-9'
-    }, isAfterStep(steps.docs + 5) ? {
+            }, isAfterStep(steps.docs + 5)
+          ? {
              name: 'UNavigationTree',
              to: '/pro/components/navigation-tree',
              class: ['inset-x-4 top-[4.25rem] bottom-4', isAfterStep(steps.docs + 6) && '!bg-transparent !border-0'].join(' '),
@@ -590,19 +604,23 @@ const docsBlocks = computed(() => [isAfterStep(steps.docs) && {
                slot: 'aside-default',
                class: 'inset-0'
              }]
-    } : {
+            }
+          : {
              name: '#default',
              class: 'inset-x-4 top-[4.25rem] bottom-4'
            }]
-  } : {
+      }
+    : {
        name: '#left',
        class: 'left-4 inset-y-4 w-64'
-  }, isAfterStep(steps.docs + 7) ? {
+      }, isAfterStep(steps.docs + 7)
+    ? {
        name: 'UPage',
        to: '/pro/components/page',
        class: 'left-72 right-4 inset-y-4',
        inactive: isAfterStep(steps.docs + 8),
-    children: [...(isAfterStep(steps.docs + 9) ? [{
+        children: [...(isAfterStep(steps.docs + 9)
+          ? [{
              name: 'UPageHeader',
              to: '/pro/components/page-header',
              class: 'top-4 left-4 right-72 h-32',
@@ -619,19 +637,23 @@ const docsBlocks = computed(() => [isAfterStep(steps.docs) && {
              children: [{
                slot: 'page-body',
                class: 'inset-x-4 top-4 justify-start'
-      }, isAfterStep(steps.docs + 12) ? {
+              }, isAfterStep(steps.docs + 12)
+                ? {
                    slot: 'content-surround',
                    class: 'bottom-4 inset-x-4 h-28'
-      } : {
+                  }
+                : {
                    name: 'UContentSurround',
                    to: '/pro/components/content-surround',
                    class: 'bottom-4 inset-x-4 h-28',
                    inactive: false
                  }]
-    }] : [{
+            }]
+          : [{
              name: '#default',
              class: 'left-4 right-72 inset-y-4'
-    }]), isAfterStep(steps.docs + 13) ? {
+            }]), isAfterStep(steps.docs + 13)
+          ? {
              name: 'UContentToc',
              to: '/pro/components/content-toc',
              class: 'right-4 inset-y-4 w-64',
@@ -640,11 +662,13 @@ const docsBlocks = computed(() => [isAfterStep(steps.docs) && {
                slot: 'content-toc',
                class: 'inset-4 overflow-y-auto'
              }]
-    } : {
+            }
+          : {
              name: '#right',
              class: 'right-4 inset-y-4 w-64'
            }]
-  } : {
+      }
+    : {
        name: '#default',
        class: 'left-72 right-4 inset-y-4'
      }]
@@ -655,22 +679,28 @@ const blocks = computed(() => [isAfterStep(steps.header) && {
  to: '/pro/components/header',
  class: 'h-16 inset-x-0 top-0',
  inactive: isAfterStep(steps.header + 1),
-  children: [isAfterStep(steps.header + 2) ? {
+  children: [isAfterStep(steps.header + 2)
+    ? {
        slot: 'header-left',
        class: 'left-4 top-4'
-  } : {
+      }
+    : {
        name: '#left',
        class: 'left-4 inset-y-4 w-64'
-  }, isAfterStep(steps.header + 3) ? {
+      }, isAfterStep(steps.header + 3)
+    ? {
        slot: 'header-center',
        class: 'inset-x-72 top-5'
-  } : {
+      }
+    : {
        name: '#center',
        class: 'inset-x-72 inset-y-4'
-  }, isAfterStep(steps.header + 4) ? {
+      }, isAfterStep(steps.header + 4)
+    ? {
        slot: 'header-right',
        class: 'right-4 top-4'
-  } : {
+      }
+    : {
        name: '#right',
        class: 'right-4 inset-y-4 w-64'
      }]
@@ -679,22 +709,28 @@ const blocks = computed(() => [isAfterStep(steps.header) && {
  to: '/pro/components/footer',
  class: 'h-16 inset-x-0 bottom-0',
  inactive: isAfterStep(steps.footer + 1),
-  children: [isAfterStep(steps.footer + 2) ? {
+  children: [isAfterStep(steps.footer + 2)
+    ? {
        slot: 'footer-left',
        class: 'left-4 bottom-5'
-  } : {
+      }
+    : {
        name: '#left',
        class: 'left-4 inset-y-4 w-64'
-  }, isAfterStep(steps.footer + 3) ? {
+      }, isAfterStep(steps.footer + 3)
+    ? {
        slot: 'footer-center',
        class: 'inset-x-72 bottom-5'
-  } : {
+      }
+    : {
        name: '#center',
        class: 'inset-x-72 inset-y-4'
-  }, isAfterStep(steps.footer + 4) ? {
+      }, isAfterStep(steps.footer + 4)
+    ? {
        slot: 'footer-right',
        class: 'right-4 bottom-4'
-  } : {
+      }
+    : {
        name: '#right',
        class: 'right-4 inset-y-4 w-64'
      }]
--- a/docs/pages/releases.vue
+++ b/docs/pages/releases.vue
@@ -50,7 +50,7 @@ const dates = computed(() => {

  const days = eachDayOfInterval({ start: new Date(first.published_at), end: new Date() })

-  return days.reverse().map(day => {
+  return days.reverse().map((day) => {
    return {
      day,
      release: releases.value.find(release => isSameDay(new Date(release.published_at), day)),
--- a/docs/plugins/prettier.ts
+++ b/docs/plugins/prettier.ts
@@ -18,6 +18,7 @@ function createPrettierWorkerApi (worker: Worker): SimplePrettier {
    }

    const [resolve, reject] = handlers[uid]
+    // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
    delete handlers[uid]

    if (error) {
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -0,0 +1,19 @@
+import { createConfigForNuxt } from '@nuxt/eslint-config/flat'
+
+export default createConfigForNuxt({
+  features: {
+    tooling: true,
+    stylistic: {
+      commaDangle: 'never',
+      braceStyle: '1tbs'
+    }
+  }
+}).overrideRules({
+  'vue/multi-word-component-names': 'off',
+  'vue/max-attributes-per-line': ['error', { singleline: 5 }],
+  '@typescript-eslint/ban-types': 'off',
+  '@typescript-eslint/ban-ts-comment': 'off',
+  '@typescript-eslint/no-unsafe-function-type': 'off',
+  '@typescript-eslint/no-empty-object-type': 'off',
+  '@typescript-eslint/no-explicit-any': 'off'
+})
--- a/package.json
+++ b/package.json
@@ -56,12 +56,12 @@
    "tailwindcss": "^3.4.14"
  },
  "devDependencies": {
-    "@nuxt/eslint-config": "^0.4.0",
+    "@nuxt/eslint-config": "^0.6.0",
    "@nuxt/module-builder": "^0.8.4",
    "@nuxt/test-utils": "^3.14.4",
    "@release-it/conventional-changelog": "^9.0.1",
    "@vue/test-utils": "^2.4.6",
-    "eslint": "^8.57.0",
+    "eslint": "^9.13.0",
    "happy-dom": "^14.12.3",
    "joi": "^17.13.3",
    "nuxt": "^3.13.2",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/renovate.json
+++ b/renovate.json
@@ -6,8 +6,6 @@
    "enabled": true
  },
  "ignoreDeps": [
-    "@nuxt/eslint-config",
-    "eslint",
    "happy-dom",
    "valibot30",
    "valibot31"
--- a/scripts/bump-edge.ts
+++ b/scripts/bump-edge.ts
@@ -1,6 +1,6 @@
-import { promises as fsp } from 'fs'
-import { resolve } from 'path'
-import { execSync } from 'child_process'
+import { promises as fsp } from 'node:fs'
+import { resolve } from 'node:path'
+import { execSync } from 'node:child_process'

 async function loadPackage(dir: string) {
  const pkgPath = resolve(dir, 'package.json')
@@ -31,7 +31,6 @@ async function main () {
 }

 main().catch((err) => {
-  // eslint-disable-next-line no-console
  console.error(err)
  process.exit(1)
 })
--- a/src/module.ts
+++ b/src/module.ts
@@ -2,7 +2,7 @@ import { createRequire } from 'node:module'
 import { defineNuxtModule, installModule, addComponentsDir, addImportsDir, createResolver, addPlugin } from '@nuxt/kit'
 import { name, version } from '../package.json'
 import createTemplates from './templates'
-import * as config from './runtime/ui.config'
+import type * as config from './runtime/ui.config'
 import type { DeepPartial, Strategy } from './runtime/types'
 import installTailwind from './tailwind'

--- a/src/runtime/components/data/Table.vue
+++ b/src/runtime/components/data/Table.vue
@@ -242,7 +242,7 @@ export default defineComponent({
  setup(props, { emit, attrs: $attrs }) {
    const { ui, attrs } = useUI('table', toRef(props, 'ui'), config, toRef(props, 'class'))

-    const columns = computed(() => props.columns ?? Object.keys(props.rows[0] ?? {}).map((key) => ({ key, label: upperFirst(key), sortable: false, class: undefined, sort: defaultSort }) as TableColumn))
+    const columns = computed(() => props.columns ?? Object.keys(props.rows[0] ?? {}).map(key => ({ key, label: upperFirst(key), sortable: false, class: undefined, sort: defaultSort }) as TableColumn))

    const sort = useVModel(props, 'sort', emit, { passive: true, defaultValue: defu({}, props.sort, { column: null, direction: 'asc' }) })

@@ -261,7 +261,7 @@ export default defineComponent({
        const aValue = get(a, column)
        const bValue = get(b, column)

-        const sort = columns.value.find((col) => col.key === column)?.sort ?? defaultSort
+        const sort = columns.value.find(col => col.key === column)?.sort ?? defaultSort

        return sort(aValue, bValue, direction)
      })
@@ -305,7 +305,7 @@ export default defineComponent({
        return false
      }

-      return selected.value.some((item) => compare(toRaw(item), toRaw(row)))
+      return selected.value.some(item => compare(toRaw(item), toRaw(row)))
    }

    function onSort(column: { key: string, direction?: 'asc' | 'desc' }) {
@@ -358,7 +358,7 @@ export default defineComponent({
      if (checked) {
        selected.value.push(row)
      } else {
-        const index = selected.value.findIndex((item) => compare(item, row))
+        const index = selected.value.findIndex(item => compare(item, row))
        selected.value.splice(index, 1)
      }
    }
@@ -369,7 +369,7 @@ export default defineComponent({

    function toggleOpened(index: number) {
      if (openedRows.value.includes(index)) {
-        openedRows.value = openedRows.value.filter((i) => i !== index)
+        openedRows.value = openedRows.value.filter(i => i !== index)
      } else {
        openedRows.value.push(index)
      }
--- a/src/runtime/components/elements/Accordion.vue
+++ b/src/runtime/components/elements/Accordion.vue
@@ -161,6 +161,7 @@ export default defineComponent({
    function onEnter(_el: Element, done: () => void) {
      const el = _el as HTMLElement
      el.style.height = '0'
+      // eslint-disable-next-line @typescript-eslint/no-unused-expressions
      el.offsetHeight // Trigger a reflow, flushing the CSS changes
      el.style.height = el.scrollHeight + 'px'

@@ -170,6 +171,7 @@ export default defineComponent({
    function onBeforeLeave(_el: Element) {
      const el = _el as HTMLElement
      el.style.height = el.scrollHeight + 'px'
+      // eslint-disable-next-line @typescript-eslint/no-unused-expressions
      el.offsetHeight // Trigger a reflow, flushing the CSS changes
    }

--- a/src/runtime/components/elements/AvatarGroup.ts
+++ b/src/runtime/components/elements/AvatarGroup.ts
@@ -1,10 +1,10 @@
 import { h, cloneVNode, computed, toRef, defineComponent } from 'vue'
 import type { PropType } from 'vue'
 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/index'
+import UAvatar from './Avatar.vue'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { avatar, avatarGroup } from '#ui/ui.config'
@@ -41,7 +41,7 @@ export default defineComponent({

    const children = computed(() => getSlotsChildren(slots))

-    const max = computed(() => typeof props.max === 'string' ? parseInt(props.max, 10) : props.max)
+    const max = computed(() => typeof props.max === 'string' ? Number.parseInt(props.max, 10) : props.max)

    const clones = computed(() => children.value.map((node, index) => {
      const vProps: any = {}
--- a/src/runtime/components/elements/Carousel.vue
+++ b/src/runtime/components/elements/Carousel.vue
@@ -59,12 +59,12 @@
 import { ref, toRef, computed, defineComponent } from 'vue'
 import type { PropType } from 'vue'
 import { twMerge } from 'tailwind-merge'
+import { useScroll, useResizeObserver, useElementSize } from '@vueuse/core'
 import { mergeConfig } from '../../utils'
 import UButton from '../elements/Button.vue'
 import type { Strategy, Button, DeepPartial } from '../../types/index'
 import { useUI } from '../../composables/useUI'
 import { useCarouselScroll } from '../../composables/useCarouselScroll'
-import { useScroll, useResizeObserver, useElementSize } from '@vueuse/core'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { carousel } from '#ui/ui.config'
--- a/src/runtime/components/elements/Dropdown.vue
+++ b/src/runtime/components/elements/Dropdown.vue
@@ -209,7 +209,9 @@ export default defineComponent({
        return
      }
      openTimeout = openTimeout || setTimeout(() => {
-        menuApi.value.openMenu && menuApi.value.openMenu()
+        if (menuApi.value.openMenu) {
+          menuApi.value.openMenu()
+        }
        openTimeout = null
      }, props.openDelay)
    }
@@ -229,7 +231,9 @@ export default defineComponent({
        return
      }
      closeTimeout = closeTimeout || setTimeout(() => {
-        menuApi.value.closeMenu && menuApi.value.closeMenu()
+        if (menuApi.value.closeMenu) {
+          menuApi.value.closeMenu()
+        }
        closeTimeout = null
      }, props.closeDelay)
    }
--- a/src/runtime/components/elements/Meter.vue
+++ b/src/runtime/components/elements/Meter.vue
@@ -47,8 +47,8 @@ export default defineComponent({
  },
  inheritAttrs: false,
  slots: Object as SlotsType<{
-    indicator?: { percent: number, value: number },
-    label?: { percent: number, value: number },
+    indicator?: { percent: number, value: number }
+    label?: { percent: number, value: number }
  }>,
  props: {
    value: {
--- a/src/runtime/components/elements/MeterGroup.ts
+++ b/src/runtime/components/elements/MeterGroup.ts
@@ -2,10 +2,10 @@ import { h, cloneVNode, computed, toRef, defineComponent } from 'vue'
 import type { ComputedRef, VNode, SlotsType, PropType } from 'vue'
 import { twJoin } from 'tailwind-merge'
 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/index'
+import type Meter from './Meter.vue'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { meter, meterGroup } from '#ui/ui.config'
@@ -19,8 +19,8 @@ export default defineComponent({
  },
  inheritAttrs: false,
  slots: Object as SlotsType<{
-    default?: typeof Meter[],
-    indicator?: { percent: number },
+    default?: typeof Meter[]
+    indicator?: { percent: number }
  }>,
  props: {
    min: {
--- a/src/runtime/components/elements/Progress.vue
+++ b/src/runtime/components/elements/Progress.vue
@@ -421,4 +421,5 @@ progress:indeterminate {
    width: 90%;
    margin-left: 5%
  }
-}</style>
+}
+</style>
--- a/src/runtime/components/forms/Checkbox.vue
+++ b/src/runtime/components/forms/Checkbox.vue
@@ -40,7 +40,7 @@ import type { DeepPartial, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { checkbox } from '#ui/ui.config'
-import colors from '#ui-colors'
+import type colors from '#ui-colors'
 import { useId } from '#app'

 const config = mergeConfig<typeof checkbox>(appConfig.ui.strategy, appConfig.ui.checkbox, checkbox)
--- a/src/runtime/components/forms/Form.vue
+++ b/src/runtime/components/forms/Form.vue
@@ -108,10 +108,10 @@ export default defineComponent({

      if (paths) {
        const otherErrors = errors.value.filter(
-          (error) => !paths.includes(error.path)
+          error => !paths.includes(error.path)
        )
        const pathErrors = (await getErrors()).filter(
-          (error) => paths.includes(error.path)
+          error => paths.includes(error.path)
        )
        errors.value = otherErrors.concat(pathErrors)
      } else {
@@ -144,7 +144,7 @@ export default defineComponent({

        const errorEvent: FormErrorEvent = {
          ...event,
-          errors: errors.value.map((err) => ({
+          errors: errors.value.map(err => ({
            ...err,
            id: inputs.value[err.path]
          }))
@@ -159,7 +159,7 @@ export default defineComponent({
      setErrors(errs: FormError[], path?: string) {
        if (path) {
          errors.value = errors.value.filter(
-            (error) => error.path !== path
+            error => error.path !== path
          ).concat(errs)
        } else {
          errors.value = errs
@@ -170,13 +170,13 @@ export default defineComponent({
      },
      getErrors(path?: string) {
        if (path) {
-          return errors.value.filter((err) => err.path === path)
+          return errors.value.filter(err => err.path === path)
        }
        return errors.value
      },
      clear(path?: string) {
        if (path) {
-          errors.value = errors.value.filter((err) => err.path !== path)
+          errors.value = errors.value.filter(err => err.path !== path)
        } else {
          errors.value = []
        }
@@ -200,10 +200,10 @@ function isYupError (error: any): error is YupError {

 function isSuperStructSchema(schema: any): schema is Struct<any, any> {
  return (
-    'schema' in schema &&
-    typeof schema.coercer === 'function' &&
-    typeof schema.validator === 'function' &&
-    typeof schema.refiner === 'function'
+    'schema' in schema
+    && typeof schema.coercer === 'function'
+    && typeof schema.validator === 'function'
+    && typeof schema.refiner === 'function'
  )
 }

@@ -216,7 +216,7 @@ async function getYupErrors (
    return []
  } catch (error) {
    if (isYupError(error)) {
-      return error.inner.map((issue) => ({
+      return error.inner.map(issue => ({
        path: issue.path ?? '',
        message: issue.message
      }))
@@ -234,7 +234,7 @@ async function getSuperStructErrors (state: any, schema: Struct<any, any>): Prom
  const [err] = schema.validate(state)
  if (err) {
    const errors = err.failures()
-    return errors.map((error) => ({
+    return errors.map(error => ({
      message: error.message,
      path: error.path.join('.')
    }))
@@ -248,7 +248,7 @@ async function getZodErrors (
 ): Promise<FormError[]> {
  const result = await schema.safeParseAsync(state)
  if (result.success === false) {
-    return result.error.issues.map((issue) => ({
+    return result.error.issues.map(issue => ({
      path: issue.path.join('.'),
      message: issue.message
    }))
@@ -273,7 +273,7 @@ async function getJoiErrors (
    return []
  } catch (error) {
    if (isJoiError(error)) {
-      return error.details.map((detail) => ({
+      return error.details.map(detail => ({
        path: detail.path.join('.'),
        message: detail.message
      }))
@@ -283,7 +283,6 @@ async function getJoiErrors (
  }
 }

-
 function isValibotSchema(schema: any): schema is ValibotSchema30 | ValibotSchemaAsync30 | ValibotSchema31 | ValibotSchemaAsync31 | ValibotSafeParser31<any, any> | ValibotSafeParserAsync31<any, any> | ValibotSchema | ValibotSchemaAsync | ValibotSafeParser<any, any> | ValibotSafeParserAsync<any, any> {
  return '_parse' in schema || '_run' in schema || (typeof schema === 'function' && 'schema' in schema)
 }
@@ -293,9 +292,9 @@ async function getValibotError (
  schema: ValibotSchema30 | ValibotSchemaAsync30 | ValibotSchema31 | ValibotSchemaAsync31 | ValibotSafeParser31<any, any> | ValibotSafeParserAsync31<any, any> | ValibotSchema | ValibotSchemaAsync | ValibotSafeParser<any, any> | ValibotSafeParserAsync<any, any>
 ): Promise<FormError[]> {
  const result = await ('_parse' in schema ? schema._parse(state) : '_run' in schema ? schema._run({ typed: false, value: state }, {}) : schema(state))
-  return result.issues?.map((issue) => ({
+  return result.issues?.map(issue => ({
    // We know that the key for a form schema is always a string or a number
-    path: issue.path?.map((item) => item.key).join('.') || '',
+    path: issue.path?.map(item => item.key).join('.') || '',
    message: issue.message
  })) || []
 }
--- a/src/runtime/components/forms/FormGroup.vue
+++ b/src/runtime/components/forms/FormGroup.vue
@@ -111,7 +111,7 @@ export default defineComponent({
    const error = computed(() => {
      return (props.error && typeof props.error === 'string') || typeof props.error === 'boolean'
        ? props.error
-        : formErrors?.value?.find((error) => error.path === props.name)?.message
+        : formErrors?.value?.find(error => error.path === props.name)?.message
    })

    const size = computed(() => ui.value.size[props.size ?? config.default.size])
--- a/src/runtime/components/forms/Input.vue
+++ b/src/runtime/components/forms/Input.vue
@@ -34,8 +34,8 @@
 import { ref, computed, toRef, onMounted, defineComponent } from 'vue'
 import type { PropType } from 'vue'
 import { twMerge, twJoin } from 'tailwind-merge'
-import UIcon from '../elements/Icon.vue'
 import { defu } from 'defu'
+import UIcon from '../elements/Icon.vue'
 import { useUI } from '../../composables/useUI'
 import { useFormGroup } from '../../composables/useFormGroup'
 import { mergeConfig, looseToNumber } from '../../utils'
@@ -184,7 +184,6 @@ export default defineComponent({

    // Custom function to handle the v-model properties
    const updateInput = (value: string) => {
-
      if (modelModifiers.value.trim) {
        value = value.trim()
      }
--- a/src/runtime/components/forms/Radio.vue
+++ b/src/runtime/components/forms/Radio.vue
@@ -39,7 +39,7 @@ import type { DeepPartial, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { radio } from '#ui/ui.config'
-import colors from '#ui-colors'
+import type colors from '#ui-colors'
 import { useId } from '#imports'

 const config = mergeConfig<typeof radio>(appConfig.ui.strategy, appConfig.ui.radio, radio)
--- a/src/runtime/components/forms/RadioGroup.vue
+++ b/src/runtime/components/forms/RadioGroup.vue
@@ -30,17 +30,17 @@
 </template>

 <script lang="ts">
-import URadio from './Radio.vue'
 import { computed, defineComponent, provide, toRef } from 'vue'
 import type { PropType } from 'vue'
 import { useUI } from '../../composables/useUI'
 import { useFormGroup } from '../../composables/useFormGroup'
 import { mergeConfig, get } from '../../utils'
 import type { DeepPartial, Strategy } from '../../types/index'
+import URadio from './Radio.vue'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { radioGroup, radio } from '#ui/ui.config'
-import colors from '#ui-colors'
+import type colors from '#ui-colors'

 const config = mergeConfig<typeof radioGroup>(appConfig.ui.strategy, appConfig.ui.radioGroup, radioGroup)
 const configRadio = mergeConfig<typeof radio>(appConfig.ui.strategy, appConfig.ui.radio, radio)
@@ -152,7 +152,7 @@ export default defineComponent({
      uiRadio,
      attrs,
      normalizedOptions,
-      // eslint-disable-next-line vue/no-dupe-keys
+
      onUpdate
    }
  }
--- a/src/runtime/components/forms/Textarea.vue
+++ b/src/runtime/components/forms/Textarea.vue
@@ -158,10 +158,10 @@ export default defineComponent({
        textarea.value.style.overflow = 'hidden'

        const styles = window.getComputedStyle(textarea.value)
-        const paddingTop = parseInt(styles.paddingTop)
-        const paddingBottom = parseInt(styles.paddingBottom)
+        const paddingTop = Number.parseInt(styles.paddingTop)
+        const paddingBottom = Number.parseInt(styles.paddingBottom)
        const padding = paddingTop + paddingBottom
-        const lineHeight = parseInt(styles.lineHeight)
+        const lineHeight = Number.parseInt(styles.lineHeight)
        const { scrollHeight } = textarea.value
        const newRows = (scrollHeight - padding) / lineHeight

--- a/src/runtime/components/navigation/CommandPalette.vue
+++ b/src/runtime/components/navigation/CommandPalette.vue
@@ -72,10 +72,10 @@ import { twJoin } from 'tailwind-merge'
 import { defu } from 'defu'
 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, DeepPartial } from '../../types/index'
+import CommandPaletteGroup from './CommandPaletteGroup.vue'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { commandPalette } from '#ui/ui.config'
@@ -269,13 +269,13 @@ export default defineComponent({
        return getGroupWithCommands(group, commands)
      }).filter(Boolean)

-      const searchGroups = props.groups.filter(group => !!group.search && searchResults.value[group.key]?.length).map(group => {
+      const searchGroups = props.groups.filter(group => !!group.search && searchResults.value[group.key]?.length).map((group) => {
        const commands = (searchResults.value[group.key] || [])

        return getGroupWithCommands(group, [...commands])
      })

-      const staticGroups: Group[] = props.groups.filter((group) => group.static && group.commands?.length).map((group) => {
+      const staticGroups: Group[] = props.groups.filter(group => group.static && group.commands?.length).map((group) => {
        return getGroupWithCommands(group, group.commands)
      })

--- a/src/runtime/components/navigation/CommandPaletteGroup.vue
+++ b/src/runtime/components/navigation/CommandPaletteGroup.vue
@@ -77,7 +77,7 @@ import UIcon from '../elements/Icon.vue'
 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 type { commandPalette } from '#ui/ui.config'
 import { useId } from '#imports'

 export default defineComponent({
--- a/src/runtime/components/navigation/Pagination.vue
+++ b/src/runtime/components/navigation/Pagination.vue
@@ -74,11 +74,11 @@
 <script lang="ts">
 import { computed, toRef, defineComponent } from 'vue'
 import type { PropType } from 'vue'
-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, DeepPartial, Strategy } from '../../types/index'
+import type { RouteLocationRaw } from '#vue-router'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { pagination, button } from '#ui/ui.config'
--- a/src/runtime/components/overlays/Modal.vue
+++ b/src/runtime/components/overlays/Modal.vue
@@ -14,7 +14,7 @@
                ui.background,
                ui.ring,
                ui.shadow,
-                fullscreen ? ui.fullscreen : [ui.width, ui.height, ui.rounded, ui.margin],
+                fullscreen ? ui.fullscreen : [ui.width, ui.height, ui.rounded, ui.margin]
              ]"
            >
              <slot />
--- a/src/runtime/components/overlays/Notifications.vue
+++ b/src/runtime/components/overlays/Notifications.vue
@@ -23,11 +23,11 @@
 import { computed, toRef, defineComponent } from 'vue'
 import type { PropType } from 'vue'
 import { twMerge, twJoin } from 'tailwind-merge'
-import UNotification from './Notification.vue'
 import { useUI } from '../../composables/useUI'
 import { useToast } from '../../composables/useToast'
 import { mergeConfig } from '../../utils'
 import type { DeepPartial, Notification, Strategy } from '../../types/index'
+import UNotification from './Notification.vue'
 import { useState } from '#imports'
 // @ts-expect-error
 import appConfig from '#build/app.config'
--- a/src/runtime/components/overlays/Popover.vue
+++ b/src/runtime/components/overlays/Popover.vue
@@ -181,7 +181,9 @@ export default defineComponent({
        return
      }
      openTimeout = openTimeout || setTimeout(() => {
-        popoverApi.value.togglePopover && popoverApi.value.togglePopover()
+        if (popoverApi.value.togglePopover) {
+          popoverApi.value.togglePopover()
+        }
        openTimeout = null
      }, props.openDelay)
    }
@@ -201,7 +203,9 @@ export default defineComponent({
        return
      }
      closeTimeout = closeTimeout || setTimeout(() => {
-        popoverApi.value.closePopover && popoverApi.value.closePopover()
+        if (popoverApi.value.closePopover) {
+          popoverApi.value.closePopover()
+        }
        closeTimeout = null
      }, props.closeDelay)
    }
--- a/src/runtime/components/overlays/Slideover.vue
+++ b/src/runtime/components/overlays/Slideover.vue
@@ -141,7 +141,6 @@ export default defineComponent({
      }
    })

-
    function close(value: boolean) {
      if (props.preventClose) {
        emit('close-prevented')
--- a/src/runtime/components/overlays/Tooltip.vue
+++ b/src/runtime/components/overlays/Tooltip.vue
@@ -40,8 +40,6 @@ import type { DeepPartial, PopperOptions, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { tooltip } from '#ui/ui.config'
-// import useslots
-

 const config = mergeConfig<typeof tooltip>(appConfig.ui.strategy, appConfig.ui.tooltip, tooltip)

--- a/src/runtime/composables/defineShortcuts.ts
+++ b/src/runtime/composables/defineShortcuts.ts
@@ -32,7 +32,9 @@ interface Shortcut {
  // keyCode?: number
 }

+// eslint-disable-next-line regexp/no-super-linear-backtracking
 const chainedShortcutRegex = /^[^-]+.*-.*[^-]+$/
+// eslint-disable-next-line regexp/no-super-linear-backtracking
 const combinedShortcutRegex = /^[^_]+.*_.*[^_]+$/

 export const defineShortcuts = (config: ShortcutsConfig, options: ShortcutsOptions = {}) => {
@@ -48,9 +50,11 @@ export const defineShortcuts = (config: ShortcutsConfig, options: ShortcutsOptio

  const onKeyDown = (e: KeyboardEvent) => {
    // Input autocomplete triggers a keydown event
-    if (!e.key) { return }
+    if (!e.key) {
+      return
+    }

-    const alphabeticalKey = /^[a-z]{1}$/i.test(e.key)
+    const alphabeticalKey = /^[a-z]$/i.test(e.key)

    let chainedKey
    chainedInputs.value.push(e.key)
@@ -59,7 +63,9 @@ export const defineShortcuts = (config: ShortcutsConfig, options: ShortcutsOptio
      chainedKey = chainedInputs.value.slice(-2).join('-')

      for (const shortcut of shortcuts.filter(s => s.chained)) {
-        if (shortcut.key !== chainedKey) { continue }
+        if (shortcut.key !== chainedKey) {
+          continue
+        }

        if (shortcut.condition.value) {
          e.preventDefault()
@@ -72,12 +78,20 @@ export const defineShortcuts = (config: ShortcutsConfig, options: ShortcutsOptio

    // try matching a standard shortcut
    for (const shortcut of shortcuts.filter(s => !s.chained)) {
-      if (e.key.toLowerCase() !== shortcut.key) { continue }
-      if (e.metaKey !== shortcut.metaKey) { continue }
-      if (e.ctrlKey !== shortcut.ctrlKey) { continue }
+      if (e.key.toLowerCase() !== shortcut.key) {
+        continue
+      }
+      if (e.metaKey !== shortcut.metaKey) {
+        continue
+      }
+      if (e.ctrlKey !== shortcut.ctrlKey) {
+        continue
+      }
      // shift modifier is only checked in combination with alphabetical keys
      // (shift with non-alphabetical keys would change the key)
-      if (alphabeticalKey && e.shiftKey !== shortcut.shiftKey) { continue }
+      if (alphabeticalKey && e.shiftKey !== shortcut.shiftKey) {
+        continue
+      }
      // alt modifier changes the combined key anyways
      // if (e.altKey !== shortcut.altKey) { continue }

--- a/src/runtime/composables/useButtonGroup.ts
+++ b/src/runtime/composables/useButtonGroup.ts
@@ -1,6 +1,6 @@
 import { computed, ref, provide, inject, onMounted, onUnmounted, getCurrentInstance } from 'vue'
 import type { Ref, ComponentInternalInstance } from 'vue'
-import { buttonGroup } from '#ui/ui.config'
+import type { buttonGroup } from '#ui/ui.config'

 type ButtonGroupProps = {
  orientation?: Ref<'horizontal' | 'vertical'>
--- a/src/runtime/composables/useFormGroup.ts
+++ b/src/runtime/composables/useFormGroup.ts
@@ -11,7 +11,6 @@ type InputProps = {
  legend?: string | null
 }

-
 export const useFormGroup = (inputProps?: InputProps, config?: any, bind: boolean = true) => {
  const formBus = inject<UseEventBusReturn<FormEvent, string> | undefined>('form-events', undefined)
  const formGroup = inject<InjectedFormGroupValue | undefined>('form-group', undefined)
--- a/src/runtime/composables/usePopper.ts
+++ b/src/runtime/composables/usePopper.ts
@@ -36,15 +36,23 @@ export function usePopper ({

  onMounted(() => {
    watchEffect((onInvalidate) => {
-      if (!popper.value) { return }
-      if (!reference.value && !virtualReference?.value) { return }
+      if (!popper.value) {
+        return
+      }
+      if (!reference.value && !virtualReference?.value) {
+        return
+      }

      const popperEl = unrefElement(popper)
      const referenceEl = virtualReference?.value || unrefElement(reference)

      // if (!(referenceEl instanceof HTMLElement)) { return }
-      if (!(popperEl instanceof HTMLElement)) { return }
-      if (!referenceEl) { return }
+      if (!(popperEl instanceof HTMLElement)) {
+        return
+      }
+      if (!referenceEl) {
+        return
+      }

      const config: Record<string, any> = {
        modifiers: [
--- a/src/runtime/composables/useUI.ts
+++ b/src/runtime/composables/useUI.ts
@@ -1,8 +1,8 @@
 import { computed, toValue, useAttrs } from 'vue'
 import type { Ref } from 'vue'
-import { useAppConfig } from '#imports'
 import { mergeConfig, omit, get } from '../utils'
 import type { DeepPartial, Strategy } from '../types/index'
+import { useAppConfig } from '#imports'

 export const useUI = <T>(key, $ui?: Ref<DeepPartial<T> & { strategy?: Strategy } | undefined>, $config?: Ref<T> | T, $wrapperClass?: Ref<string>, withAppConfig: boolean = false) => {
  const $attrs = useAttrs()
--- a/src/runtime/plugins/modals.ts
+++ b/src/runtime/plugins/modals.ts
@@ -1,7 +1,7 @@
-import { defineNuxtPlugin } from '#imports'
 import { shallowRef } from 'vue'
 import { modalInjectionKey } from '../composables/useModal'
 import type { ModalState } from '../types/modal'
+import { defineNuxtPlugin } from '#imports'

 export default defineNuxtPlugin((nuxtApp) => {
  const modalState = shallowRef<ModalState>({
--- a/src/runtime/plugins/slideovers.ts
+++ b/src/runtime/plugins/slideovers.ts
@@ -1,7 +1,7 @@
-import { defineNuxtPlugin } from '#imports'
 import { shallowRef } from 'vue'
 import { slidOverInjectionKey } from '../composables/useSlideover'
 import type { SlideoverState } from '../types/slideover'
+import { defineNuxtPlugin } from '#imports'

 export default defineNuxtPlugin((nuxtApp) => {
  const slideoverState = shallowRef<SlideoverState>({
--- a/src/runtime/types/alert.d.ts
+++ b/src/runtime/types/alert.d.ts
@@ -1,8 +1,8 @@
-import { alert } from '../ui.config'
-import type { NestedKeyOf, ExtractDeepKey, ExtractDeepObject } from '.'
-import type { Button } from './button'
-import colors from '#ui-colors'
 import type { AppConfig } from 'nuxt/schema'
+import type { alert } from '../ui.config'
+import type { Button } from './button'
+import type { NestedKeyOf, ExtractDeepKey, ExtractDeepObject } from '.'
+import type colors from '#ui-colors'

 export type AlertColor = keyof typeof alert.color | ExtractDeepKey<AppConfig, ['ui', 'alert', 'color']> | typeof colors[number]
 export type AlertVariant = keyof typeof alert.variant | ExtractDeepKey<AppConfig, ['ui', 'alert', 'variant']> | NestedKeyOf<typeof alert.color> | NestedKeyOf<ExtractDeepObject<AppConfig, ['ui', 'alert', 'color']>>
--- a/src/runtime/types/avatar.d.ts
+++ b/src/runtime/types/avatar.d.ts
@@ -1,7 +1,7 @@
-import { avatar } from '../ui.config'
-import type { ExtractDeepKey } from '.'
-import colors from '#ui-colors'
 import type { AppConfig } from 'nuxt/schema'
+import type { avatar } from '../ui.config'
+import type { ExtractDeepKey } from '.'
+import type colors from '#ui-colors'

 export type AvatarSize = keyof typeof avatar.size | ExtractDeepKey<AppConfig, ['ui', 'avatar', 'size']>
 export type AvatarChipColor = 'gray' | typeof colors[number]
--- a/src/runtime/types/badge.d.ts
+++ b/src/runtime/types/badge.d.ts
@@ -1,7 +1,7 @@
-import { badge } from '../ui.config'
-import type { NestedKeyOf, ExtractDeepKey, ExtractDeepObject } from '.'
-import colors from '#ui-colors'
 import type { AppConfig } from 'nuxt/schema'
+import type { badge } from '../ui.config'
+import type { NestedKeyOf, ExtractDeepKey, ExtractDeepObject } from '.'
+import type colors from '#ui-colors'

 export type BadgeSize = keyof typeof badge.size | ExtractDeepKey<AppConfig, ['ui', 'badge', 'size']>
 export type BadgeColor = keyof typeof badge.color | ExtractDeepKey<AppConfig, ['ui', 'badge', 'color']> | typeof colors[number]
--- a/src/runtime/types/button.d.ts
+++ b/src/runtime/types/button.d.ts
@@ -1,8 +1,8 @@
-import type { Link } from './link'
-import { button } from '../ui.config'
-import type { NestedKeyOf, ExtractDeepKey, ExtractDeepObject } from '.'
-import colors from '#ui-colors'
 import type { AppConfig } from 'nuxt/schema'
+import type { button } from '../ui.config'
+import type { Link } from './link'
+import type { NestedKeyOf, ExtractDeepKey, ExtractDeepObject } from '.'
+import type colors from '#ui-colors'

 export type ButtonSize = keyof typeof button.size | ExtractDeepKey<AppConfig, ['ui', 'button', 'size']>
 export type ButtonColor = keyof typeof button.color | ExtractDeepKey<AppConfig, ['ui', 'button', 'color']> | typeof colors[number]
--- a/src/runtime/types/chip.d.ts
+++ b/src/runtime/types/chip.d.ts
@@ -1,5 +1,5 @@
-import { chip } from '../ui.config'
-import colors from '#ui-colors'
+import type { chip } from '../ui.config'
+import type colors from '#ui-colors'

 export type ChipSize = keyof typeof chip.size
 export type ChipColor = 'gray' | typeof colors[number]
--- a/src/runtime/types/command-palette.d.ts
+++ b/src/runtime/types/command-palette.d.ts
@@ -1,4 +1,4 @@
-import { FuseResultMatch } from 'fuse.js'
+import type { FuseResultMatch } from 'fuse.js'
 import type { Avatar } from './avatar'

 export interface Command {
@@ -24,6 +24,6 @@ export interface Group {
  commands?: Command[]
  search?: (...args: any[]) => any[] | Promise<any[]>
  filter?: (...args: any[]) => Command[]
-  static?: Boolean
+  static?: boolean
  [key: string]: any
 }
--- a/src/runtime/types/component.d.ts
+++ b/src/runtime/types/component.d.ts
@@ -5,10 +5,10 @@ T extends new () => { $props: infer P } ? NonNullable<P> :

 export type ComponentSlots<T> =
 T extends new () => { $slots: infer S } ? NonNullable<S> :
-  T extends (props: any, ctx: { slots: infer S; attrs: any; emit: any }, ...args: any) => any ? NonNullable<S> :
+  T extends (props: any, ctx: { slots: infer S, attrs: any, emit: any }, ...args: any) => any ? NonNullable<S> :
      {}

 export type ComponentEmit<T> =
 T extends new () => { $emit: infer E } ? NonNullable<E> :
-  T extends (props: any, ctx: { slots: any; attrs: any; emit: infer E }, ...args: any) => any ? NonNullable<E> :
+  T extends (props: any, ctx: { slots: any, attrs: any, emit: infer E }, ...args: any) => any ? NonNullable<E> :
      {}
--- a/src/runtime/types/divider.d.ts
+++ b/src/runtime/types/divider.d.ts
@@ -1,3 +1,3 @@
-import { divider } from '#ui/ui.config'
+import type { divider } from '#ui/ui.config'

 export type DividerSize = keyof typeof divider.border.size.horizontal | keyof typeof divider.border.size.vertical
--- a/src/runtime/types/dropdown.d.ts
+++ b/src/runtime/types/dropdown.d.ts
@@ -1,5 +1,5 @@
-import type { NuxtLinkProps } from '#app'
 import type { Avatar } from './avatar'
+import type { NuxtLinkProps } from '#app'

 export interface DropdownItem extends NuxtLinkProps {
  label: string
--- a/src/runtime/types/form-group.d.ts
+++ b/src/runtime/types/form-group.d.ts
@@ -1,5 +1,5 @@
-import { formGroup } from '../ui.config'
-import type { ExtractDeepKey } from '.'
 import type { AppConfig } from 'nuxt/schema'
+import type { formGroup } from '../ui.config'
+import type { ExtractDeepKey } from '.'

 export type FormGroupSize = keyof typeof formGroup.size | ExtractDeepKey<AppConfig, ['ui', 'formGroup', 'size']>
--- a/src/runtime/types/form.d.ts
+++ b/src/runtime/types/form.d.ts
@@ -10,8 +10,8 @@ export interface FormErrorWithId extends FormError {
 }

 export interface Form<T> {
-  validate(path?: string | string[], opts?: { silent?: true }): Promise<T | false>;
-  validate(path?: string | string[], opts?: { silent?: false }): Promise<T>;
+  validate(path?: string | string[], opts?: { silent?: true }): Promise<T | false>
+  validate(path?: string | string[], opts?: { silent?: false }): Promise<T>
  clear(path?: string): void
  errors: Ref<FormError[]>
  setErrors(errs: FormError[], path?: string): void
--- a/src/runtime/types/input.d.ts
+++ b/src/runtime/types/input.d.ts
@@ -1,7 +1,7 @@
-import { input } from '../ui.config'
-import type { NestedKeyOf, ExtractDeepKey, ExtractDeepObject } from '.'
-import colors from '#ui-colors'
 import type { AppConfig } from 'nuxt/schema'
+import type { input } from '../ui.config'
+import type { NestedKeyOf, ExtractDeepKey, ExtractDeepObject } from '.'
+import type colors from '#ui-colors'

 export type InputSize = keyof typeof input.size | ExtractDeepKey<AppConfig, ['ui', 'input', 'size']>
 export type InputColor = keyof typeof input.color | ExtractDeepKey<AppConfig, ['ui', 'input', 'color']> | typeof colors[number]
--- a/src/runtime/types/kbd.d.ts
+++ b/src/runtime/types/kbd.d.ts
@@ -1,5 +1,5 @@
-import { kbd } from '../ui.config'
-import type { ExtractDeepKey } from '.'
 import type { AppConfig } from 'nuxt/schema'
+import type { kbd } from '../ui.config'
+import type { ExtractDeepKey } from '.'

 export type KbdSize = keyof typeof kbd.size | ExtractDeepKey<AppConfig, ['ui', 'kbd', 'size']>
--- a/src/runtime/types/meter.d.ts
+++ b/src/runtime/types/meter.d.ts
@@ -1,5 +1,5 @@
-import { meter } from '../ui.config'
-import colors from '#ui-colors'
+import type { meter } from '../ui.config'
+import type colors from '#ui-colors'

 export type MeterSize = keyof typeof meter.meter.size
 export type MeterColor = keyof typeof meter.color | typeof colors[number]
--- a/src/runtime/types/modal.d.ts
+++ b/src/runtime/types/modal.d.ts
@@ -6,7 +6,7 @@ export interface Modal {
  transition?: boolean
  preventClose?: boolean
  fullscreen?: boolean
-  class?: string | Object | string[]
+  class?: string | object | string[]
  ui?: any
  onClose?: () => void
  onClosePrevented?: () => void
--- a/src/runtime/types/notification.d.ts
+++ b/src/runtime/types/notification.d.ts
@@ -1,6 +1,6 @@
 import type { Avatar } from './avatar'
 import type { Button } from './button'
-import colors from '#ui-colors'
+import type colors from '#ui-colors'

 export type NotificationColor = 'gray' | typeof colors[number]

--- a/src/runtime/types/progress.d.ts
+++ b/src/runtime/types/progress.d.ts
@@ -1,5 +1,5 @@
-import { progress } from '../ui.config'
-import colors from '#ui-colors'
+import type { progress } from '../ui.config'
+import type colors from '#ui-colors'

 export type ProgressSize = keyof typeof progress.progress.size
 export type ProgressAnimation = keyof typeof progress.animation
--- a/src/runtime/types/range.d.ts
+++ b/src/runtime/types/range.d.ts
@@ -1,7 +1,7 @@
-import { range } from '../ui.config'
-import type { ExtractDeepKey } from '.'
 import type { AppConfig } from 'nuxt/schema'
-import colors from '#ui-colors'
+import type { range } from '../ui.config'
+import type { ExtractDeepKey } from '.'
+import type colors from '#ui-colors'

 export type RangeSize = keyof typeof range.size | ExtractDeepKey<AppConfig, ['ui', 'range', 'size']>
 export type RangeColor = typeof colors[number]
--- a/src/runtime/types/select.d.ts
+++ b/src/runtime/types/select.d.ts
@@ -1,7 +1,7 @@
-import { select } from '../ui.config'
-import type { NestedKeyOf, ExtractDeepKey, ExtractDeepObject } from '.'
-import colors from '#ui-colors'
 import type { AppConfig } from 'nuxt/schema'
+import type { select } from '../ui.config'
+import type { NestedKeyOf, ExtractDeepKey, ExtractDeepObject } from '.'
+import type colors from '#ui-colors'

 export type SelectSize = keyof typeof select.size | ExtractDeepKey<AppConfig, ['ui', 'select', 'size']>
 export type SelectColor = keyof typeof select.color | ExtractDeepKey<AppConfig, ['ui', 'select', 'color']> | typeof colors[number]
--- a/src/runtime/types/textarea.d.ts
+++ b/src/runtime/types/textarea.d.ts
@@ -1,7 +1,7 @@
-import { textarea } from '../ui.config'
-import type { NestedKeyOf, ExtractDeepKey, ExtractDeepObject } from '.'
-import colors from '#ui-colors'
 import type { AppConfig } from 'nuxt/schema'
+import type { textarea } from '../ui.config'
+import type { NestedKeyOf, ExtractDeepKey, ExtractDeepObject } from '.'
+import type colors from '#ui-colors'

 export type TextareaSize = keyof typeof textarea.size | ExtractDeepKey<AppConfig, ['ui', 'textarea', 'size']>
 export type TextareaColor = keyof typeof textarea.color | ExtractDeepKey<AppConfig, ['ui', 'textarea', 'color']> | typeof colors[number]
--- a/src/runtime/types/toggle.d.ts
+++ b/src/runtime/types/toggle.d.ts
@@ -1,7 +1,7 @@
-import { toggle } from '../ui.config'
-import type { ExtractDeepKey } from '.'
 import type { AppConfig } from 'nuxt/schema'
-import colors from '#ui-colors'
+import type { toggle } from '../ui.config'
+import type { ExtractDeepKey } from '.'
+import type colors from '#ui-colors'

 export type ToggleSize = keyof typeof toggle.size | ExtractDeepKey<AppConfig, ['ui', 'toggle', 'size']>
 export type ToggleColor = typeof colors[number]
--- a/src/runtime/ui.config/elements/avatar.ts
+++ b/src/runtime/ui.config/elements/avatar.ts
@@ -7,11 +7,11 @@ export default {
  size: {
    '3xs': 'h-4 w-4 text-[8px]',
    '2xs': 'h-5 w-5 text-[10px]',
-    xs: 'h-6 w-6 text-xs',
-    sm: 'h-8 w-8 text-sm',
-    md: 'h-10 w-10 text-base',
-    lg: 'h-12 w-12 text-lg',
-    xl: 'h-14 w-14 text-xl',
+    'xs': 'h-6 w-6 text-xs',
+    'sm': 'h-8 w-8 text-sm',
+    'md': 'h-10 w-10 text-base',
+    'lg': 'h-12 w-12 text-lg',
+    'xl': 'h-14 w-14 text-xl',
    '2xl': 'h-16 w-16 text-2xl',
    '3xl': 'h-20 w-20 text-3xl'
  },
@@ -27,11 +27,11 @@ export default {
    size: {
      '3xs': 'h-[4px] min-w-[4px] text-[4px] p-px',
      '2xs': 'h-[5px] min-w-[5px] text-[5px] p-px',
-      xs: 'h-1.5 min-w-[0.375rem] text-[6px] p-px',
-      sm: 'h-2 min-w-[0.5rem] text-[7px] p-0.5',
-      md: 'h-2.5 min-w-[0.625rem] text-[8px] p-0.5',
-      lg: 'h-3 min-w-[0.75rem] text-[10px] p-0.5',
-      xl: 'h-3.5 min-w-[0.875rem] text-[11px] p-1',
+      'xs': 'h-1.5 min-w-[0.375rem] text-[6px] p-px',
+      'sm': 'h-2 min-w-[0.5rem] text-[7px] p-0.5',
+      'md': 'h-2.5 min-w-[0.625rem] text-[8px] p-0.5',
+      'lg': 'h-3 min-w-[0.75rem] text-[10px] p-0.5',
+      'xl': 'h-3.5 min-w-[0.875rem] text-[11px] p-1',
      '2xl': 'h-4 min-w-[1rem] text-[12px] p-1',
      '3xl': 'h-5 min-w-[1.25rem] text-[14px] p-1'
    }
@@ -41,11 +41,11 @@ export default {
    size: {
      '3xs': 'h-2 w-2',
      '2xs': 'h-2.5 w-2.5',
-      xs: 'h-3 w-3',
-      sm: 'h-4 w-4',
-      md: 'h-5 w-5',
-      lg: 'h-6 w-6',
-      xl: 'h-7 w-7',
+      'xs': 'h-3 w-3',
+      'sm': 'h-4 w-4',
+      'md': 'h-5 w-5',
+      'lg': 'h-6 w-6',
+      'xl': 'h-7 w-7',
      '2xl': 'h-8 w-8',
      '3xl': 'h-10 w-10'
    }
--- a/src/runtime/ui.config/elements/button.ts
+++ b/src/runtime/ui.config/elements/button.ts
@@ -7,35 +7,35 @@ export default {
  inline: 'inline-flex items-center',
  size: {
    '2xs': 'text-xs',
-    xs: 'text-xs',
-    sm: 'text-sm',
-    md: 'text-sm',
-    lg: 'text-sm',
-    xl: 'text-base'
+    'xs': 'text-xs',
+    'sm': 'text-sm',
+    'md': 'text-sm',
+    'lg': 'text-sm',
+    'xl': 'text-base'
  },
  gap: {
    '2xs': 'gap-x-1',
-    xs: 'gap-x-1.5',
-    sm: 'gap-x-1.5',
-    md: 'gap-x-2',
-    lg: 'gap-x-2.5',
-    xl: 'gap-x-2.5'
+    'xs': 'gap-x-1.5',
+    'sm': 'gap-x-1.5',
+    'md': 'gap-x-2',
+    'lg': 'gap-x-2.5',
+    'xl': 'gap-x-2.5'
  },
  padding: {
    '2xs': 'px-2 py-1',
-    xs: 'px-2.5 py-1.5',
-    sm: 'px-2.5 py-1.5',
-    md: 'px-3 py-2',
-    lg: 'px-3.5 py-2.5',
-    xl: 'px-3.5 py-2.5'
+    'xs': 'px-2.5 py-1.5',
+    'sm': 'px-2.5 py-1.5',
+    'md': 'px-3 py-2',
+    'lg': 'px-3.5 py-2.5',
+    'xl': 'px-3.5 py-2.5'
  },
  square: {
    '2xs': 'p-1',
-    xs: 'p-1.5',
-    sm: 'p-1.5',
-    md: 'p-2',
-    lg: 'p-2.5',
-    xl: 'p-2.5'
+    'xs': 'p-1.5',
+    'sm': 'p-1.5',
+    'md': 'p-2',
+    'lg': 'p-2.5',
+    'xl': 'p-2.5'
  },
  color: {
    white: {
@@ -64,11 +64,11 @@ export default {
    loading: 'animate-spin',
    size: {
      '2xs': 'h-4 w-4',
-      xs: 'h-4 w-4',
-      sm: 'h-5 w-5',
-      md: 'h-5 w-5',
-      lg: 'h-5 w-5',
-      xl: 'h-6 w-6'
+      'xs': 'h-4 w-4',
+      'sm': 'h-5 w-5',
+      'md': 'h-5 w-5',
+      'lg': 'h-5 w-5',
+      'xl': 'h-6 w-6'
    }
  },
  default: {
--- a/src/runtime/ui.config/elements/buttonGroup.ts
+++ b/src/runtime/ui.config/elements/buttonGroup.ts
@@ -8,7 +8,7 @@ export default {
  orientation: {
    'rounded-none': { horizontal: { start: 'rounded-s-none', end: 'rounded-e-none' }, vertical: { start: 'rounded-t-none', end: 'rounded-b-none' } },
    'rounded-sm': { horizontal: { start: 'rounded-s-sm', end: 'rounded-e-sm' }, vertical: { start: 'rounded-t-sm', end: 'rounded-b-sm' } },
-    rounded: { horizontal: { start: 'rounded-s', end: 'rounded-e' }, vertical: { start: 'rounded-t', end: 'rounded-b' } },
+    'rounded': { horizontal: { start: 'rounded-s', end: 'rounded-e' }, vertical: { start: 'rounded-t', end: 'rounded-b' } },
    'rounded-md': { horizontal: { start: 'rounded-s-md', end: 'rounded-e-md' }, vertical: { start: 'rounded-t-md', end: 'rounded-b-md' } },
    'rounded-lg': { horizontal: { start: 'rounded-s-lg', end: 'rounded-e-lg' }, vertical: { start: 'rounded-t-lg', end: 'rounded-b-lg' } },
    'rounded-xl': { horizontal: { start: 'rounded-s-xl', end: 'rounded-e-xl' }, vertical: { start: 'rounded-t-xl', end: 'rounded-b-xl' } },
--- a/src/runtime/ui.config/elements/chip.ts
+++ b/src/runtime/ui.config/elements/chip.ts
@@ -17,11 +17,11 @@ export default {
  size: {
    '3xs': 'h-[4px] min-w-[4px] text-[4px] p-px',
    '2xs': 'h-[5px] min-w-[5px] text-[5px] p-px',
-    xs: 'h-1.5 min-w-[0.375rem] text-[6px] p-px',
-    sm: 'h-2 min-w-[0.5rem] text-[7px] p-0.5',
-    md: 'h-2.5 min-w-[0.625rem] text-[8px] p-0.5',
-    lg: 'h-3 min-w-[0.75rem] text-[10px] p-0.5',
-    xl: 'h-3.5 min-w-[0.875rem] text-[11px] p-1',
+    'xs': 'h-1.5 min-w-[0.375rem] text-[6px] p-px',
+    'sm': 'h-2 min-w-[0.5rem] text-[7px] p-0.5',
+    'md': 'h-2.5 min-w-[0.625rem] text-[8px] p-0.5',
+    'lg': 'h-3 min-w-[0.75rem] text-[10px] p-0.5',
+    'xl': 'h-3.5 min-w-[0.875rem] text-[11px] p-1',
    '2xl': 'h-4 min-w-[1rem] text-[12px] p-1',
    '3xl': 'h-5 min-w-[1.25rem] text-[14px] p-1'
  },
--- a/src/runtime/ui.config/elements/meter.ts
+++ b/src/runtime/ui.config/elements/meter.ts
@@ -5,11 +5,11 @@ export default {
    text: 'text-gray-400 dark:text-gray-500 text-end',
    size: {
      '2xs': 'text-xs',
-      xs: 'text-xs',
-      sm: 'text-sm',
-      md: 'text-sm',
-      lg: 'text-sm',
-      xl: 'text-base',
+      'xs': 'text-xs',
+      'sm': 'text-sm',
+      'md': 'text-sm',
+      'lg': 'text-sm',
+      'xl': 'text-base',
      '2xl': 'text-base'
    }
  },
@@ -22,11 +22,11 @@ export default {
    shadow: '',
    size: {
      '2xs': 'h-px',
-      xs: 'h-0.5',
-      sm: 'h-1',
-      md: 'h-2',
-      lg: 'h-3',
-      xl: 'h-4',
+      'xs': 'h-0.5',
+      'sm': 'h-1',
+      'md': 'h-2',
+      'lg': 'h-3',
+      'xl': 'h-4',
      '2xl': 'h-5'
    },
    appearance: {
@@ -41,11 +41,11 @@ export default {
      rounded: '[&::-webkit-meter-optimum-value]:rounded-full [&::-moz-meter-bar]:rounded-full',
      size: {
        '2xs': '[&::-webkit-meter-optimum-value]:h-px [&::-moz-meter-bar]:h-px',
-        xs: '[&::-webkit-meter-optimum-value]:h-0.5 [&::-moz-meter-bar]:h-0.5',
-        sm: '[&::-webkit-meter-optimum-value]:h-1 [&::-moz-meter-bar]:h-1',
-        md: '[&::-webkit-meter-optimum-value]:h-2 [&::-moz-meter-bar]:h-2',
-        lg: '[&::-webkit-meter-optimum-value]:h-3 [&::-moz-meter-bar]:h-3',
-        xl: '[&::-webkit-meter-optimum-value]:h-4 [&::-moz-meter-bar]:h-4',
+        'xs': '[&::-webkit-meter-optimum-value]:h-0.5 [&::-moz-meter-bar]:h-0.5',
+        'sm': '[&::-webkit-meter-optimum-value]:h-1 [&::-moz-meter-bar]:h-1',
+        'md': '[&::-webkit-meter-optimum-value]:h-2 [&::-moz-meter-bar]:h-2',
+        'lg': '[&::-webkit-meter-optimum-value]:h-3 [&::-moz-meter-bar]:h-3',
+        'xl': '[&::-webkit-meter-optimum-value]:h-4 [&::-moz-meter-bar]:h-4',
        '2xl': '[&::-webkit-meter-optimum-value]:h-5 [&::-moz-meter-bar]:h-5'
      }
    }
@@ -56,11 +56,11 @@ export default {
    color: 'text-{color}-500 dark:text-{color}-400',
    size: {
      '2xs': 'text-xs',
-      xs: 'text-xs',
-      sm: 'text-sm',
-      md: 'text-sm',
-      lg: 'text-sm',
-      xl: 'text-base',
+      'xs': 'text-xs',
+      'sm': 'text-sm',
+      'md': 'text-sm',
+      'lg': 'text-sm',
+      'xl': 'text-base',
      '2xl': 'text-base'
    }
  },
--- a/src/runtime/ui.config/elements/meterGroup.ts
+++ b/src/runtime/ui.config/elements/meterGroup.ts
@@ -9,7 +9,7 @@ export default {
  orientation: {
    'rounded-none': { left: 'rounded-s-none', right: 'rounded-e-none' },
    'rounded-sm': { left: 'rounded-s-sm', right: 'rounded-e-sm' },
-    rounded: { left: 'rounded-s', right: 'rounded-e' },
+    'rounded': { left: 'rounded-s', right: 'rounded-e' },
    'rounded-md': { left: 'rounded-s-md', right: 'rounded-e-md' },
    'rounded-lg': { left: 'rounded-s-lg', right: 'rounded-e-lg' },
    'rounded-xl': { left: 'rounded-s-xl', right: 'rounded-e-xl' },
--- a/src/runtime/ui.config/elements/progress.ts
+++ b/src/runtime/ui.config/elements/progress.ts
@@ -11,11 +11,11 @@ export default {
    color: 'text-gray-400 dark:text-gray-500',
    size: {
      '2xs': 'text-xs',
-      xs: 'text-xs',
-      sm: 'text-sm',
-      md: 'text-sm',
-      lg: 'text-sm',
-      xl: 'text-base',
+      'xs': 'text-xs',
+      'sm': 'text-sm',
+      'md': 'text-sm',
+      'lg': 'text-sm',
+      'xl': 'text-base',
      '2xl': 'text-base'
    }
  },
@@ -24,11 +24,11 @@ export default {
    width: 'w-full [&::-webkit-progress-bar]:w-full',
    size: {
      '2xs': 'h-px',
-      xs: 'h-0.5',
-      sm: 'h-1',
-      md: 'h-2',
-      lg: 'h-3',
-      xl: 'h-4',
+      'xs': 'h-0.5',
+      'sm': 'h-1',
+      'md': 'h-2',
+      'lg': 'h-3',
+      'xl': 'h-4',
      '2xl': 'h-5'
    },
    rounded: 'rounded-full [&::-webkit-progress-bar]:rounded-full',
@@ -46,11 +46,11 @@ export default {
    color: 'text-{color}-500 dark:text-{color}-400',
    size: {
      '2xs': 'text-xs',
-      xs: 'text-xs',
-      sm: 'text-sm',
-      md: 'text-sm',
-      lg: 'text-sm',
-      xl: 'text-base',
+      'xs': 'text-xs',
+      'sm': 'text-sm',
+      'md': 'text-sm',
+      'lg': 'text-sm',
+      'xl': 'text-base',
      '2xl': 'text-base'
    }
  },
@@ -61,10 +61,10 @@ export default {
    first: 'text-gray-500 dark:text-gray-400'
  },
  animation: {
-    carousel: 'bar-animation-carousel',
+    'carousel': 'bar-animation-carousel',
    'carousel-inverse': 'bar-animation-carousel-inverse',
-    swing: 'bar-animation-swing',
-    elastic: 'bar-animation-elastic'
+    'swing': 'bar-animation-swing',
+    'elastic': 'bar-animation-elastic'
  },
  default: {
    color: 'primary',
--- a/src/runtime/ui.config/forms/formGroup.ts
+++ b/src/runtime/ui.config/forms/formGroup.ts
@@ -4,16 +4,15 @@ export default {
  label: {
    wrapper: 'flex content-center items-center justify-between',
    base: 'block font-medium text-gray-700 dark:text-gray-200',
-    // eslint-disable-next-line quotes
    required: `after:content-['*'] after:ms-0.5 after:text-red-500 dark:after:text-red-400`
  },
  size: {
    '2xs': 'text-xs',
-    xs: 'text-xs',
-    sm: 'text-sm',
-    md: 'text-sm',
-    lg: 'text-sm',
-    xl: 'text-base'
+    'xs': 'text-xs',
+    'sm': 'text-sm',
+    'md': 'text-sm',
+    'lg': 'text-sm',
+    'xl': 'text-base'
  },
  container: 'mt-1 relative',
  description: 'text-gray-500 dark:text-gray-400',
--- a/src/runtime/ui.config/forms/input.ts
+++ b/src/runtime/ui.config/forms/input.ts
@@ -9,46 +9,46 @@ export default {
  },
  size: {
    '2xs': 'text-xs',
-    xs: 'text-xs',
-    sm: 'text-sm',
-    md: 'text-sm',
-    lg: 'text-sm',
-    xl: 'text-base'
+    'xs': 'text-xs',
+    'sm': 'text-sm',
+    'md': 'text-sm',
+    'lg': 'text-sm',
+    'xl': 'text-base'
  },
  gap: {
    '2xs': 'gap-x-1',
-    xs: 'gap-x-1.5',
-    sm: 'gap-x-1.5',
-    md: 'gap-x-2',
-    lg: 'gap-x-2.5',
-    xl: 'gap-x-2.5'
+    'xs': 'gap-x-1.5',
+    'sm': 'gap-x-1.5',
+    'md': 'gap-x-2',
+    'lg': 'gap-x-2.5',
+    'xl': 'gap-x-2.5'
  },
  padding: {
    '2xs': 'px-2 py-1',
-    xs: 'px-2.5 py-1.5',
-    sm: 'px-2.5 py-1.5',
-    md: 'px-3 py-2',
-    lg: 'px-3.5 py-2.5',
-    xl: 'px-3.5 py-2.5'
+    'xs': 'px-2.5 py-1.5',
+    'sm': 'px-2.5 py-1.5',
+    'md': 'px-3 py-2',
+    'lg': 'px-3.5 py-2.5',
+    'xl': 'px-3.5 py-2.5'
  },
  leading: {
    padding: {
      '2xs': 'ps-7',
-      xs: 'ps-8',
-      sm: 'ps-9',
-      md: 'ps-10',
-      lg: 'ps-11',
-      xl: 'ps-12'
+      'xs': 'ps-8',
+      'sm': 'ps-9',
+      'md': 'ps-10',
+      'lg': 'ps-11',
+      'xl': 'ps-12'
    }
  },
  trailing: {
    padding: {
      '2xs': 'pe-7',
-      xs: 'pe-8',
-      sm: 'pe-9',
-      md: 'pe-10',
-      lg: 'pe-11',
-      xl: 'pe-12'
+      'xs': 'pe-8',
+      'sm': 'pe-9',
+      'md': 'pe-10',
+      'lg': 'pe-11',
+      'xl': 'pe-12'
    }
  },
  color: {
@@ -69,22 +69,22 @@ export default {
    loading: 'animate-spin',
    size: {
      '2xs': 'h-4 w-4',
-      xs: 'h-4 w-4',
-      sm: 'h-5 w-5',
-      md: 'h-5 w-5',
-      lg: 'h-5 w-5',
-      xl: 'h-6 w-6'
+      'xs': 'h-4 w-4',
+      'sm': 'h-5 w-5',
+      'md': 'h-5 w-5',
+      'lg': 'h-5 w-5',
+      'xl': 'h-6 w-6'
    },
    leading: {
      wrapper: 'absolute inset-y-0 start-0 flex items-center',
      pointer: 'pointer-events-none',
      padding: {
        '2xs': 'px-2',
-        xs: 'px-2.5',
-        sm: 'px-2.5',
-        md: 'px-3',
-        lg: 'px-3.5',
-        xl: 'px-3.5'
+        'xs': 'px-2.5',
+        'sm': 'px-2.5',
+        'md': 'px-3',
+        'lg': 'px-3.5',
+        'xl': 'px-3.5'
      }
    },
    trailing: {
@@ -92,11 +92,11 @@ export default {
      pointer: 'pointer-events-none',
      padding: {
        '2xs': 'px-2',
-        xs: 'px-2.5',
-        sm: 'px-2.5',
-        md: 'px-3',
-        lg: 'px-3.5',
-        xl: 'px-3.5'
+        'xs': 'px-2.5',
+        'sm': 'px-2.5',
+        'md': 'px-3',
+        'lg': 'px-3.5',
+        'xl': 'px-3.5'
      }
    }
  },
--- a/src/runtime/ui.config/forms/range.ts
+++ b/src/runtime/ui.config/forms/range.ts
@@ -10,11 +10,11 @@ export default {
    background: 'bg-{color}-500 dark:bg-{color}-400',
    size: {
      '2xs': 'h-px',
-      xs: 'h-0.5',
-      sm: 'h-1',
-      md: 'h-2',
-      lg: 'h-3',
-      xl: 'h-4',
+      'xs': 'h-0.5',
+      'sm': 'h-1',
+      'md': 'h-2',
+      'lg': 'h-3',
+      'xl': 'h-4',
      '2xl': 'h-5'
    }
  },
@@ -25,11 +25,11 @@ export default {
    ring: '[&::-webkit-slider-thumb]:ring-2 [&::-webkit-slider-thumb]:ring-current',
    size: {
      '2xs': '[&::-webkit-slider-thumb]:h-1.5 [&::-moz-range-thumb]:h-1.5 [&::-webkit-slider-thumb]:w-1.5 [&::-moz-range-thumb]:w-1.5 [&::-webkit-slider-thumb]:mt-[-2.5px] [&::-moz-range-thumb]:mt-[-2.5px]',
-      xs: '[&::-webkit-slider-thumb]:h-2 [&::-moz-range-thumb]:h-2 [&::-webkit-slider-thumb]:w-2 [&::-moz-range-thumb]:w-2 [&::-webkit-slider-thumb]:mt-[-3px] [&::-moz-range-thumb]:mt-[-3px]',
-      sm: '[&::-webkit-slider-thumb]:h-3 [&::-moz-range-thumb]:h-3 [&::-webkit-slider-thumb]:w-3 [&::-moz-range-thumb]:w-3 [&::-webkit-slider-thumb]:-mt-1 [&::-moz-range-thumb]:-mt-1',
-      md: '[&::-webkit-slider-thumb]:h-4 [&::-moz-range-thumb]:h-4 [&::-webkit-slider-thumb]:w-4 [&::-moz-range-thumb]:w-4 [&::-webkit-slider-thumb]:-mt-1 [&::-moz-range-thumb]:-mt-1',
-      lg: '[&::-webkit-slider-thumb]:h-5 [&::-moz-range-thumb]:h-5 [&::-webkit-slider-thumb]:w-5 [&::-moz-range-thumb]:w-5 [&::-webkit-slider-thumb]:-mt-1 [&::-moz-range-thumb]:-mt-1',
-      xl: '[&::-webkit-slider-thumb]:h-6 [&::-moz-range-thumb]:h-6 [&::-webkit-slider-thumb]:w-6 [&::-moz-range-thumb]:w-6 [&::-webkit-slider-thumb]:-mt-1 [&::-moz-range-thumb]:-mt-1',
+      'xs': '[&::-webkit-slider-thumb]:h-2 [&::-moz-range-thumb]:h-2 [&::-webkit-slider-thumb]:w-2 [&::-moz-range-thumb]:w-2 [&::-webkit-slider-thumb]:mt-[-3px] [&::-moz-range-thumb]:mt-[-3px]',
+      'sm': '[&::-webkit-slider-thumb]:h-3 [&::-moz-range-thumb]:h-3 [&::-webkit-slider-thumb]:w-3 [&::-moz-range-thumb]:w-3 [&::-webkit-slider-thumb]:-mt-1 [&::-moz-range-thumb]:-mt-1',
+      'md': '[&::-webkit-slider-thumb]:h-4 [&::-moz-range-thumb]:h-4 [&::-webkit-slider-thumb]:w-4 [&::-moz-range-thumb]:w-4 [&::-webkit-slider-thumb]:-mt-1 [&::-moz-range-thumb]:-mt-1',
+      'lg': '[&::-webkit-slider-thumb]:h-5 [&::-moz-range-thumb]:h-5 [&::-webkit-slider-thumb]:w-5 [&::-moz-range-thumb]:w-5 [&::-webkit-slider-thumb]:-mt-1 [&::-moz-range-thumb]:-mt-1',
+      'xl': '[&::-webkit-slider-thumb]:h-6 [&::-moz-range-thumb]:h-6 [&::-webkit-slider-thumb]:w-6 [&::-moz-range-thumb]:w-6 [&::-webkit-slider-thumb]:-mt-1 [&::-moz-range-thumb]:-mt-1',
      '2xl': '[&::-webkit-slider-thumb]:h-7 [&::-moz-range-thumb]:h-7 [&::-webkit-slider-thumb]:w-7 [&::-moz-range-thumb]:w-7 [&::-webkit-slider-thumb]:-mt-1 [&::-moz-range-thumb]:-mt-1'
    }
  },
@@ -39,21 +39,21 @@ export default {
    rounded: '[&::-webkit-slider-runnable-track]:rounded-lg [&::-moz-range-track]:rounded-lg',
    size: {
      '2xs': '[&::-webkit-slider-runnable-track]:h-px [&::-moz-range-track]:h-px',
-      xs: '[&::-webkit-slider-runnable-track]:h-0.5 [&::-moz-range-track]:h-0.5',
-      sm: '[&::-webkit-slider-runnable-track]:h-1 [&::-moz-range-track]:h-1',
-      md: '[&::-webkit-slider-runnable-track]:h-2 [&::-moz-range-track]:h-2',
-      lg: '[&::-webkit-slider-runnable-track]:h-3 [&::-moz-range-track]:h-3',
-      xl: '[&::-webkit-slider-runnable-track]:h-4 [&::-moz-range-track]:h-4',
+      'xs': '[&::-webkit-slider-runnable-track]:h-0.5 [&::-moz-range-track]:h-0.5',
+      'sm': '[&::-webkit-slider-runnable-track]:h-1 [&::-moz-range-track]:h-1',
+      'md': '[&::-webkit-slider-runnable-track]:h-2 [&::-moz-range-track]:h-2',
+      'lg': '[&::-webkit-slider-runnable-track]:h-3 [&::-moz-range-track]:h-3',
+      'xl': '[&::-webkit-slider-runnable-track]:h-4 [&::-moz-range-track]:h-4',
      '2xl': '[&::-webkit-slider-runnable-track]:h-5 [&::-moz-range-track]:h-5'
    }
  },
  size: {
    '2xs': 'h-1.5',
-    xs: 'h-2',
-    sm: 'h-3',
-    md: 'h-4',
-    lg: 'h-5',
-    xl: 'h-6',
+    'xs': 'h-2',
+    'sm': 'h-3',
+    'md': 'h-4',
+    'lg': 'h-5',
+    'xl': 'h-6',
    '2xl': 'h-7'
  },
  default: {
--- a/src/runtime/ui.config/forms/toggle.ts
+++ b/src/runtime/ui.config/forms/toggle.ts
@@ -6,32 +6,32 @@ export default {
  inactive: 'bg-gray-200 dark:bg-gray-700',
  size: {
    '2xs': 'h-3 w-5',
-    xs: 'h-3.5 w-6',
-    sm: 'h-4 w-7',
-    md: 'h-5 w-9',
-    lg: 'h-6 w-11',
-    xl: 'h-7 w-[3.25rem]',
+    'xs': 'h-3.5 w-6',
+    'sm': 'h-4 w-7',
+    'md': 'h-5 w-9',
+    'lg': 'h-6 w-11',
+    'xl': 'h-7 w-[3.25rem]',
    '2xl': 'h-8 w-[3.75rem]'
  },
  container: {
    base: 'pointer-events-none relative inline-block rounded-full bg-white dark:bg-gray-900 shadow transform ring-0 transition ease-in-out duration-200',
    active: {
      '2xs': 'translate-x-2 rtl:-translate-x-2',
-      xs: 'translate-x-2.5 rtl:-translate-x-2.5',
-      sm: 'translate-x-3 rtl:-translate-x-3',
-      md: 'translate-x-4 rtl:-translate-x-4',
-      lg: 'translate-x-5 rtl:-translate-x-5',
-      xl: 'translate-x-6 rtl:-translate-x-6',
+      'xs': 'translate-x-2.5 rtl:-translate-x-2.5',
+      'sm': 'translate-x-3 rtl:-translate-x-3',
+      'md': 'translate-x-4 rtl:-translate-x-4',
+      'lg': 'translate-x-5 rtl:-translate-x-5',
+      'xl': 'translate-x-6 rtl:-translate-x-6',
      '2xl': 'translate-x-7 rtl:-translate-x-7'
    },
    inactive: 'translate-x-0 rtl:-translate-x-0',
    size: {
      '2xs': 'h-2 w-2',
-      xs: 'h-2.5 w-2.5',
-      sm: 'h-3 w-3',
-      md: 'h-4 w-4',
-      lg: 'h-5 w-5',
-      xl: 'h-6 w-6',
+      'xs': 'h-2.5 w-2.5',
+      'sm': 'h-3 w-3',
+      'md': 'h-4 w-4',
+      'lg': 'h-5 w-5',
+      'xl': 'h-6 w-6',
      '2xl': 'h-7 w-7'
    }
  },
@@ -41,11 +41,11 @@ export default {
    inactive: 'opacity-0 ease-out duration-100',
    size: {
      '2xs': 'h-2 w-2',
-      xs: 'h-2 w-2',
-      sm: 'h-2 w-2',
-      md: 'h-3 w-3',
-      lg: 'h-4 w-4',
-      xl: 'h-5 w-5',
+      'xs': 'h-2 w-2',
+      'sm': 'h-2 w-2',
+      'md': 'h-3 w-3',
+      'lg': 'h-4 w-4',
+      'xl': 'h-5 w-5',
      '2xl': 'h-6 w-6'
    },
    on: 'text-{color}-500 dark:text-{color}-400',
--- a/src/runtime/ui.config/layout/divider.ts
+++ b/src/runtime/ui.config/layout/divider.ts
@@ -16,19 +16,19 @@ export default {
    size: {
      horizontal: {
        '2xs': 'border-t',
-        xs: 'border-t-[2px]',
-        sm: 'border-t-[3px]',
-        md: 'border-t-[4px]',
-        lg: 'border-t-[5px]',
-        xl: 'border-t-[6px]'
+        'xs': 'border-t-[2px]',
+        'sm': 'border-t-[3px]',
+        'md': 'border-t-[4px]',
+        'lg': 'border-t-[5px]',
+        'xl': 'border-t-[6px]'
      },
      vertical: {
        '2xs': 'border-s',
-        xs: 'border-s-[2px]',
-        sm: 'border-s-[3px]',
-        md: 'border-s-[4px]',
-        lg: 'border-s-[5px]',
-        xl: 'border-s-[6px]'
+        'xs': 'border-s-[2px]',
+        'sm': 'border-s-[3px]',
+        'md': 'border-s-[4px]',
+        'lg': 'border-s-[5px]',
+        'xl': 'border-s-[6px]'
      }
    },
    type: {
--- a/src/runtime/ui.config/popper.ts
+++ b/src/runtime/ui.config/popper.ts
@@ -4,6 +4,5 @@ export const arrow = {
  rounded: 'before:rounded-sm',
  background: 'before:bg-gray-200 dark:before:bg-gray-800',
  shadow: 'before:shadow',
-	// eslint-disable-next-line quotes
  placement: `group-data-[popper-placement*='right']:-left-1 group-data-[popper-placement*='left']:-right-1 group-data-[popper-placement*='top']:-bottom-1 group-data-[popper-placement*='bottom']:-top-1`
 }
--- a/src/runtime/utils/colors.ts
+++ b/src/runtime/utils/colors.ts
@@ -1,7 +1,7 @@
-import { omit } from './lodash'
 import { kebabCase, camelCase, upperFirst } from 'scule'
 import type { Config as TWConfig } from 'tailwindcss'
 import defaultColors from 'tailwindcss/colors.js'
+import { omit } from './lodash'

 const colorsToExclude = [
  'inherit',
@@ -18,7 +18,7 @@ const colorsToExclude = [
 ]

 const safelistByComponent: Record<string, (colors: string) => TWConfig['safelist']> = {
-  alert: (colorsAsRegex) => [{
+  alert: colorsAsRegex => [{
    pattern: RegExp(`^bg-(${colorsAsRegex})-50$`)
  }, {
    pattern: RegExp(`^bg-(${colorsAsRegex})-400$`),
@@ -36,13 +36,13 @@ const safelistByComponent: Record<string, (colors: string) => TWConfig['safelist
  }, {
    pattern: RegExp(`^ring-(${colorsAsRegex})-500$`)
  }],
-  avatar: (colorsAsRegex) => [{
+  avatar: colorsAsRegex => [{
    pattern: RegExp(`^bg-(${colorsAsRegex})-400$`),
    variants: ['dark']
  }, {
    pattern: RegExp(`^bg-(${colorsAsRegex})-500$`)
  }],
-  badge: (colorsAsRegex) => [{
+  badge: colorsAsRegex => [{
    pattern: RegExp(`^bg-(${colorsAsRegex})-50$`)
  }, {
    pattern: RegExp(`^bg-(${colorsAsRegex})-400$`),
@@ -60,7 +60,7 @@ const safelistByComponent: Record<string, (colors: string) => TWConfig['safelist
  }, {
    pattern: RegExp(`^ring-(${colorsAsRegex})-500$`)
  }],
-  button: (colorsAsRegex) => [{
+  button: colorsAsRegex => [{
    pattern: RegExp(`^bg-(${colorsAsRegex})-50$`),
    variants: ['hover', 'disabled']
  }, {
@@ -103,7 +103,7 @@ const safelistByComponent: Record<string, (colors: string) => TWConfig['safelist
    pattern: RegExp(`^ring-(${colorsAsRegex})-500$`),
    variants: ['focus-visible']
  }],
-  input: (colorsAsRegex) => [{
+  input: colorsAsRegex => [{
    pattern: RegExp(`^text-(${colorsAsRegex})-400$`),
    variants: ['dark']
  }, {
@@ -115,7 +115,7 @@ const safelistByComponent: Record<string, (colors: string) => TWConfig['safelist
    pattern: RegExp(`^ring-(${colorsAsRegex})-500$`),
    variants: ['focus']
  }],
-  radio: (colorsAsRegex) => [{
+  radio: colorsAsRegex => [{
    pattern: RegExp(`^text-(${colorsAsRegex})-400$`),
    variants: ['dark']
  }, {
@@ -127,7 +127,7 @@ const safelistByComponent: Record<string, (colors: string) => TWConfig['safelist
    pattern: RegExp(`^ring-(${colorsAsRegex})-500$`),
    variants: ['focus-visible']
  }],
-  checkbox: (colorsAsRegex) => [{
+  checkbox: colorsAsRegex => [{
    pattern: RegExp(`^text-(${colorsAsRegex})-400$`),
    variants: ['dark']
  }, {
@@ -139,7 +139,7 @@ const safelistByComponent: Record<string, (colors: string) => TWConfig['safelist
    pattern: RegExp(`^ring-(${colorsAsRegex})-500$`),
    variants: ['focus-visible']
  }],
-  toggle: (colorsAsRegex) => [{
+  toggle: colorsAsRegex => [{
    pattern: RegExp(`^bg-(${colorsAsRegex})-400$`),
    variants: ['dark']
  }, {
@@ -156,7 +156,7 @@ const safelistByComponent: Record<string, (colors: string) => TWConfig['safelist
    pattern: RegExp(`^ring-(${colorsAsRegex})-500$`),
    variants: ['focus-visible']
  }],
-  range: (colorsAsRegex) => [{
+  range: colorsAsRegex => [{
    pattern: RegExp(`^bg-(${colorsAsRegex})-400$`),
    variants: ['dark']
  }, {
@@ -173,13 +173,13 @@ const safelistByComponent: Record<string, (colors: string) => TWConfig['safelist
    pattern: RegExp(`^ring-(${colorsAsRegex})-500$`),
    variants: ['focus-visible']
  }],
-  progress: (colorsAsRegex) => [{
+  progress: colorsAsRegex => [{
    pattern: RegExp(`^text-(${colorsAsRegex})-400$`),
    variants: ['dark']
  }, {
    pattern: RegExp(`^text-(${colorsAsRegex})-500$`)
  }],
-  meter: (colorsAsRegex) => [{
+  meter: colorsAsRegex => [{
    pattern: RegExp(`^bg-(${colorsAsRegex})-400$`),
    variants: ['dark']
  }, {
@@ -190,7 +190,7 @@ const safelistByComponent: Record<string, (colors: string) => TWConfig['safelist
  }, {
    pattern: RegExp(`^text-(${colorsAsRegex})-500$`)
  }],
-  notification: (colorsAsRegex) => [{
+  notification: colorsAsRegex => [{
    pattern: RegExp(`^bg-(${colorsAsRegex})-400$`),
    variants: ['dark']
  }, {
@@ -201,7 +201,7 @@ const safelistByComponent: Record<string, (colors: string) => TWConfig['safelist
  }, {
    pattern: RegExp(`^text-(${colorsAsRegex})-500$`)
  }],
-  chip: (colorsAsRegex) => [{
+  chip: colorsAsRegex => [{
    pattern: RegExp(`^bg-(${colorsAsRegex})-400$`),
    variants: ['dark']
  }, {
@@ -210,11 +210,11 @@ const safelistByComponent: Record<string, (colors: string) => TWConfig['safelist
 }

 const safelistComponentAliasesMap = {
-  'USelect': 'UInput',
-  'USelectMenu': 'UInput',
-  'UTextarea': 'UInput',
-  'URadioGroup': 'URadio',
-  'UMeterGroup': 'UMeter'
+  USelect: 'UInput',
+  USelectMenu: 'UInput',
+  UTextarea: 'UInput',
+  URadioGroup: 'URadio',
+  UMeterGroup: 'UMeter'
 }

 const colorsAsRegex = (colors: string[]): string => colors.join('|')
@@ -251,8 +251,7 @@ export const setGlobalColors = (theme: TWConfig['theme']) => {

  if (globalColors.gray) {
    // @ts-ignore
-    globalColors.cool = theme.extend.colors.cool =
-      defaultColors.gray
+    globalColors.cool = theme.extend.colors.cool = defaultColors.gray
  }

  // @ts-ignore
@@ -295,7 +294,8 @@ export const generateSafelist = (colors: string[], globalColors: string[]) => {
 type SafelistFn = Exclude<NonNullable<Extract<TWConfig['content'], { extract?: unknown }>['extract']>, Record<string, unknown>>
 export const customSafelistExtractor = (prefix: string, content: string, colors: string[], safelistColors: string[]): ReturnType<SafelistFn> => {
  const classes: string[] = []
-  const regex = /<([A-Za-z][A-Za-z0-9]*(?:-[A-Za-z][A-Za-z0-9]*)*)\s+(?![^>]*:color\b)[^>]*\bcolor=["']([^"']+)["'][^>]*>/gs
+  // eslint-disable-next-line regexp/no-super-linear-backtracking
+  const regex = /<([A-Za-z][A-Za-z0-9]*(?:-[A-Za-z][A-Za-z0-9]*)*)\s+(?![^>]*:color\b)[^>]*\bcolor=["']([^"']+)["'][^>]*>/g

  const matches = content.matchAll(regex)

@@ -318,14 +318,16 @@ export const customSafelistExtractor = (prefix: string, content: string, colors:

    name = name.replace(prefix, '').toLowerCase()

-    const matchClasses = safelistByComponent[name](color).flatMap(group => {
-      return typeof group === 'string' ? '' : ['', ...(group.variants || [])].flatMap(variant => {
+    const matchClasses = safelistByComponent[name](color).flatMap((group) => {
+      return typeof group === 'string'
+        ? ''
+        : ['', ...(group.variants || [])].flatMap((variant) => {
            const matches = group.pattern.source.match(/\(([^)]+)\)/g)

-        return matches.map(match => {
+            return matches.map((match) => {
              const colorOptions = match.substring(1, match.length - 1).split('|')
              return colorOptions.map(
-            color => {
+                (color) => {
                  const classesExtracted = group.pattern.source.replace(match, color).replace('^', '').replace('$', '')
                  if (variant) {
                    return `${variant}:${classesExtracted}`
--- a/src/runtime/utils/index.ts
+++ b/src/runtime/utils/index.ts
@@ -5,7 +5,7 @@ import type { Strategy } from '../types/index'
 const customTwMerge = extendTailwindMerge<string, string>({
  extend: {
    classGroups: {
-      icons: [(classPart: string) => /^i-/.test(classPart)]
+      icons: [(classPart: string) => classPart.startsWith('i-')]
    }
  }
 })
@@ -23,7 +23,7 @@ const defuTwMerge = createDefu((obj, key, value, namespace) => {
  if (namespace.endsWith('chip') && key === 'size') {
    return false
  }
-  if (namespace.endsWith('badge') && key === 'size' || key === 'color' || key === 'variant') {
+  if ((namespace.endsWith('badge') && key === 'size') || key === 'color' || key === 'variant') {
    return false
  }
  if (typeof obj[key] === 'string' && typeof value === 'string' && obj[key] && value) {
@@ -58,14 +58,14 @@ export function hexToRgb (hex: string) {

  const result = rxHex.exec(hex)
  return result
-    ? `${parseInt(result[1], 16)} ${parseInt(result[2], 16)} ${parseInt(result[3], 16)}`
+    ? `${Number.parseInt(result[1], 16)} ${Number.parseInt(result[2], 16)} ${Number.parseInt(result[3], 16)}`
    : null
 }

 export function getSlotsChildren(slots: any) {
  let children = slots.default?.()
  if (children?.length) {
-    children = children.flatMap(c => {
+    children = children.flatMap((c) => {
      if (typeof c.type === 'symbol') {
        if (typeof c.children === 'string') {
          // `v-if="false"` or commented node
@@ -86,8 +86,8 @@ export function getSlotsChildren (slots: any) {
 * This is used for the .number modifier in v-model
 */
 export function looseToNumber(val: any): any {
-  const n = parseFloat(val)
-  return isNaN(n) ? val : n
+  const n = Number.parseFloat(val)
+  return Number.isNaN(n) ? val : n
 }

 export * from './lodash'
--- a/src/runtime/utils/lodash.ts
+++ b/src/runtime/utils/lodash.ts
@@ -5,6 +5,7 @@ export function omit<T extends Record<string, any>, K extends keyof T> (
  const result = { ...object }

  for (const key of keysToOmit) {
+    // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
    delete result[key]
  }

@@ -13,9 +14,9 @@ export function omit<T extends Record<string, any>, K extends keyof T> (

 export function get(object: Record<string, any>, path: (string | number)[] | string, defaultValue?: any): any {
  if (typeof path === 'string') {
-    path = path.split('.').map(key => {
+    path = path.split('.').map((key) => {
      const numKey = Number(key)
-      return isNaN(numKey) ? key : numKey
+      return Number.isNaN(numKey) ? key : numKey
    })
  }

--- a/Show More
+++ b/Show More