chore(release): 2.1.0

Resolves #172

.eslintrc.cjs

@@ -0,0 +1,12 @@
+module.exports = {
+  root: true,
+  extends: ['@nuxt/eslint-config'],
+  rules: {
+    'vue/multi-word-component-names': 0,
+    'vue/max-attributes-per-line': ['error', {
+      singleline: {
+        max: 5
+      }
+    }]
+  }
+}

.eslintrc.js

@@ -1,9 +0,0 @@
-module.exports = {
-  root: true,
-  extends: [
-    '@nuxtjs/eslint-config-typescript'
-  ],
-  rules: {
-    'vue/multi-word-component-names': 0
-  }
-}

.github/ISSUE_TEMPLATE/bug-report.md

@@ -0,0 +1,31 @@
+---
+name: Bug report
+about: Report a bug report to help us improve the module.
+title: ''
+labels: 'bug'
+assignees: ''
+
+---
+
+<!-- **IMPORTANT!**
+Before reporting a bug, please make sure that you have read through our documentation and you think your problem is indeed an issue related to our module. -->
+
+### Version
+@nuxthq/ui: <!-- ex: v2.0.0 -->
+nuxt: <!-- ex: v3.5.0 -->
+
+### Reproduction Link
+
+<!--
+A minimal test case based on one of:
+- a GitHub repository that can reproduce the bug
+- https://stackblitz.com/edit/nuxtlabs-ui
+-->
+
+### Steps to reproduce
+
+
+### What is Expected?
+
+
+### What is actually happening?

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,5 @@
+blank_issues_enabled: false
+contact_links:
+  - name: Nuxt Community Discord
+    url: https://discord.nuxtjs.org/
+    about: Consider asking questions about the module here.

.github/ISSUE_TEMPLATE/feature-request.md

@@ -0,0 +1,20 @@
+---
+name: Feature request
+about: Suggest an idea or enhancement for the module.
+title: ''
+labels: 'enhancement'
+assignees: ''
+
+---
+
+### Is your feature request related to a problem? Please describe.
+<!-- A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] -->
+
+### Describe the solution you'd like
+<!-- A clear and concise description of what you want to happen. -->
+
+### Describe alternatives you've considered
+<!-- A clear and concise description of any alternative solutions or features you've considered. -->
+
+### Additional context
+<!-- Add any other context or screenshots about the feature request here. -->

.github/ISSUE_TEMPLATE/question.md

@@ -0,0 +1,16 @@
+---
+name: Question
+about: Ask a question about the module.
+title: ''
+labels: 'question'
+assignees: ''
+
+---
+
+<!-- **IMPORTANT!**
+Please make sure to look for an answer to your question in our documentation and the documentation before asking a question here.
+
+If you have a general question regarding the module use Discord `modules` channel. Thanks!
+
+Nuxt Discord: https://discord.nuxtjs.org/
+-->

CHANGELOG.md

@@ -2,6 +2,18 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [2.1.0](https://github.com/nuxtlabs/ui/compare/v2.0.4...v2.1.0) (2023-05-19)
+
+
+### Bug Fixes
+
+* **app.config:** trailing space ([703fdef](https://github.com/nuxtlabs/ui/commit/703fdef9bd4c0e26b0e38a13c30aff5b1d9d19aa))
+* **ButtonGroup/AvatarGroup:** allow `v-for` ([#173](https://github.com/nuxtlabs/ui/issues/173)) ([3fa10aa](https://github.com/nuxtlabs/ui/commit/3fa10aa4ebf9ff7d443f8f2564dcaf9b63ce1fa8))
+* **DocsPageHeader:** github component link ([#182](https://github.com/nuxtlabs/ui/issues/182)) ([7f00ec6](https://github.com/nuxtlabs/ui/commit/7f00ec6c3d059e5e78172a8e4bab905a7f02fa63))
+* **Input:** expose ref ([2ded24b](https://github.com/nuxtlabs/ui/commit/2ded24bec90a5ea6665ab6895ced15d9dd49e8ef))
+* **module:** add `.mjs` extension to tailwind `content` when builded ([246449b](https://github.com/nuxtlabs/ui/commit/246449b32850db805c1133151b8449687e7c14be)), closes [#172](https://github.com/nuxtlabs/ui/issues/172)
+* **Textarea:** expose ref ([ea740bf](https://github.com/nuxtlabs/ui/commit/ea740bf10a6090545ed58ff26322ee3a679b5452))
+
 ### [2.0.4](https://github.com/nuxtlabs/ui/compare/v2.0.3...v2.0.4) (2023-05-15)
 
 

LICENSE.md

@@ -0,0 +1,9 @@
+MIT License
+
+Copyright (c) 2023 NuxtLabs
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -1,6 +1,22 @@
-# @nuxthq/ui
+# NuxtLabs UI
 
-Components library as a Nuxt module using [TailwindCSS](https://tailwindcss.com) and [HeadlessUI](https://headlessui.com).
+[![npm version][npm-version-src]][npm-version-href]
+[![npm downloads][npm-downloads-src]][npm-downloads-href]
+[![License][license-src]][license-href]
+[![Nuxt][nuxt-src]][nuxt-href]
+
+This module has been developed by [NuxtLabs](https://nuxtlabs.com/) for [Volta](https://volta.net) and [Nuxt Studio](https://nuxt.studio/). It provides everything related to UI when building a Nuxt application, including components, icons, colors, dark mode and also keyboard shortcuts.
+
+[![social preview](https://repository-images.githubusercontent.com/428329515/5a18c5dd-bb58-4874-b6ef-1c44e4884344)](https://ui.nuxtlabs.com)
+
+## Features
+
+- Built with [Headless UI](https://headlessui.dev/) and [Tailwind CSS](https://tailwindcss.com/)
+- HMR support through Nuxt App Config
+- Dark mode support
+- Keyboard shortcuts
+- Bundled icons
+- Fully typed
 
 ## Installation
 
@@ -8,13 +24,11 @@ Components library as a Nuxt module using [TailwindCSS](https://tailwindcss.com)
 yarn add --dev @nuxthq/ui
 ```
 
-Then, register the module in your `nuxt.config.js`:
+Then, register the module in your `nuxt.config.ts`:
 
 ```js
-import { defineNuxtConfig } from 'nuxt'
-
 export default defineNuxtConfig({
-  buildModules: [
+  modules: [
     '@nuxthq/ui'
   ]
 })
@@ -29,3 +43,34 @@ If you want latest updates, please use `@nuxthq/ui-edge` in your `package.json`:
   }
 }
 ```
+
+## Documentation
+
+Visit http://ui.nuxtlabs.com to view the documentation.
+
+## Credits
+
+- [nuxt/nuxt](https://github.com/nuxt/nuxt)
+- [nuxt-modules/color-mode](https://github.com/nuxt-modules/color-mode)
+- [nuxt-modules/tailwindcss](https://github.com/nuxt-modules/tailwindcss)
+- [tailwindlabs/tailwindcss](https://github.com/tailwindlabs/tailwindcss)
+- [tailwindlabs/headlessui](https://github.com/tailwindlabs/headlessui)
+- [vueuse/vueuse](https://github.com/vueuse/vueuse)
+- [egoist/tailwindcss-icons](https://github.com/egoist/tailwindcss-icons)
+
+## License
+
+Licensed under the [MIT license](https://github.com/nuxtlabs/ui/blob/dev/LICENSE.md).
+
+<!-- Badges -->
+[npm-version-src]: https://img.shields.io/npm/v/@nuxthq/ui/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
+[npm-version-href]: https://npmjs.com/package/@nuxthq/ui
+
+[npm-downloads-src]: https://img.shields.io/npm/dm/@nuxthq/ui.svg?style=flat&colorA=18181B&colorB=28CF8D
+[npm-downloads-href]: https://npmjs.com/package/@nuxthq/ui
+
+[license-src]: https://img.shields.io/github/license/nuxtlabs/ui.svg?style=flat&colorA=18181B&colorB=28CF8D
+[license-href]: https://github.com/nuxtlabs/ui/blob/main/LICENSE
+
+[nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js
+[nuxt-href]: https://nuxt.com

docs/app.vue

@@ -6,46 +6,51 @@
       <div class="relative grid lg:grid-cols-10 lg:gap-8">
         <DocsAside class="lg:col-span-2" />
 
-        <div class="relative lg:col-span-6 pt-8 pb-16">
+        <div class="relative pt-8 pb-16" :class="[toc ? 'lg:col-span-6' : 'lg:col-span-8']">
           <DocsPageHeader />
 
           <NuxtPage />
 
-          <hr class="border-gray-200 dark:border-gray-800 my-12">
+          <DocsPageFooter class="mt-12" />
+
+          <hr class="border-gray-200 dark:border-gray-800 my-6">
 
           <DocsPrevNext />
+
+          <DocsFooter class="mt-16" />
         </div>
 
-        <DocsToc class="lg:col-span-2 order-first lg:order-last" />
+        <DocsToc v-if="toc" class="lg:col-span-2 order-first lg:order-last" />
       </div>
     </UContainer>
 
-    <DocsSearch />
+    <ClientOnly>
+      <DocsSearch />
+    </ClientOnly>
 
     <UNotifications />
   </div>
 </template>
 
 <script setup lang="ts">
-const colorScheme = usePreferredColorScheme()
+const { toc } = useContent()
 const colorMode = useColorMode()
 
 // Computed
 
-const href = computed(() => colorScheme.value === 'dark' ? '/icon-dark.svg' : '/icon-light.svg')
 const color = computed(() => colorMode.value === 'dark' ? '#18181b' : 'white')
 
 // Head
 
 useHead({
-  titleTemplate: title => title && title !== 'nuxthq/ui' ? `${title} - nuxthq/ui` : 'nuxthq/ui',
+  titleTemplate: title => title && title.includes('NuxtLabs UI') ? title : `${title} - NuxtLabs UI`,
   meta: [
     { name: 'viewport', content: 'width=device-width, initial-scale=1, maximum-scale=1' },
     { key: 'theme-color', name: 'theme-color', content: color }
   ],
   link: [
     { rel: 'stylesheet', href: 'https://rsms.me/inter/inter.css' },
-    { rel: 'icon', type: 'image/svg+xml', href }
+    { rel: 'icon', type: 'image/svg+xml', href: '/icon.svg' }
   ],
   htmlAttrs: {
     lang: 'en'
@@ -54,4 +59,10 @@ useHead({
     class: 'antialiased font-sans text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-900'
   }
 })
+
+useSeoMeta({
+  ogImage: '/social-preview.jpg',
+  twitterImage: '/social-preview.jpg',
+  twitterCard: 'summary_large_image'
+})
 </script>

docs/components/Header.vue

@@ -3,10 +3,10 @@
     <UContainer>
       <div class="flex items-center justify-between h-16">
         <div class="flex items-center gap-3">
-          <NuxtLink to="/" class="flex items-end gap-2 font-bold text-xl text-gray-900 dark:text-white">
+          <NuxtLink to="/" class="flex items-end gap-1.5 font-bold text-xl text-gray-900 dark:text-white">
             <Logo class="w-8 h-8 text-primary-500 dark:text-primary-400" />
 
-            nuxthq/ui
+            NuxtLabs<span class="text-primary-500 dark:text-primary-400">UI</span>
           </NuxtLink>
         </div>
 

docs/components/LogoLabs.vue

@@ -0,0 +1,9 @@
+<template>
+  <svg width="312" height="78" viewBox="0 0 312 78" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M65.6381 78H109.132C110.513 78.0002 111.87 77.6398 113.067 76.9552C114.263 76.2705 115.257 75.2857 115.947 74.0998C116.637 72.9139 117.001 71.5688 117 70.1996C116.999 68.8305 116.635 67.4856 115.944 66.3003L86.7343 16.1575C86.0439 14.9719 85.0508 13.9873 83.8547 13.3028C82.6586 12.6183 81.3017 12.2579 79.9205 12.2579C78.5393 12.2579 77.1825 12.6183 75.9864 13.3028C74.7903 13.9873 73.7971 14.9719 73.1067 16.1575L65.6381 28.9873L51.0356 3.89908C50.3446 2.71356 49.351 1.72914 48.1546 1.04472C46.9581 0.360308 45.6011 0 44.2196 0C42.8382 0 41.4811 0.360308 40.2847 1.04472C39.0883 1.72914 38.0947 2.71356 37.4037 3.89908L1.05644 66.3003C0.364965 67.4856 0.000601816 68.8305 7.44871e-07 70.1996C-0.000600326 71.5688 0.362582 72.9139 1.05302 74.0998C1.74346 75.2857 2.7368 76.2705 3.93315 76.9552C5.12949 77.6398 6.48665 78.0002 7.86812 78H35.1699C45.9872 78 53.9645 73.2907 59.4537 64.1032L72.7803 41.2289L79.9184 28.9873L101.341 65.7584H72.7803L65.6381 78ZM34.7248 65.7458L15.6717 65.7416L44.2324 16.7162L58.483 41.2289L48.9416 57.6127C45.2963 63.5739 41.155 65.7458 34.7248 65.7458Z" fill="currentColor" />
+    <path d="M175.417 77.3598V66.9562H149.03V21.3406H136.5V77.3598H175.417Z" fill="currentColor" />
+    <path d="M198.81 78C203.706 78 208.103 76.0793 210.178 73.1183V77.3598H221.795V37.026H210.178V41.0274C207.854 38.2264 203.706 36.3858 198.644 36.3858C186.446 36.3858 179.061 44.6286 179.061 57.1929C179.061 69.7572 186.446 78 198.81 78ZM200.635 68.3967C194.495 68.3967 190.429 63.9152 190.429 57.1929C190.429 50.3906 194.495 45.909 200.635 45.909C206.859 45.909 210.925 50.3906 210.925 57.1929C210.925 63.9152 206.859 68.3967 200.635 68.3967Z" fill="currentColor" />
+    <path d="M254.606 78C266.97 78 274.604 69.7572 274.604 57.1929C274.604 44.6286 266.97 36.3858 254.772 36.3858C249.544 36.3858 245.478 38.3064 243.155 41.2674V19.5H231.621V77.3598H243.155V72.9583C245.478 76.0793 249.793 78 254.606 78ZM252.78 68.3967C246.557 68.3967 242.491 63.9152 242.491 57.1929C242.491 50.3906 246.557 45.909 252.78 45.909C258.838 45.909 262.987 50.3906 262.987 57.1929C262.987 63.9152 258.838 68.3967 252.78 68.3967Z" fill="currentColor" />
+    <path d="M295.736 78C305.528 78 312 72.9583 312 65.2757C312 47.0294 289.098 56.3926 289.098 48.1498C289.098 45.5889 291.339 44.2285 294.575 44.2285C297.728 44.2285 300.964 46.0691 301.462 49.5103H311.502C311.087 41.5876 304.283 36.3858 294.243 36.3858C285.696 36.3858 279.307 41.4275 279.307 48.5499C279.307 65.5157 301.794 57.433 301.794 65.6758C301.794 67.9166 299.304 69.5971 295.736 69.5971C291.422 69.5971 288.517 67.3564 288.102 63.7551H278.145C278.56 72.4781 285.53 78 295.736 78Z" fill="currentColor" />
+  </svg>
+</template>

docs/components/content/VoltaEmbed.vue

@@ -0,0 +1,16 @@
+<template>
+  <iframe :src="src" class="w-full min-h-[calc(100vh/1.5)] border border-gray-200 dark:border-gray-800 rounded-md" />
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  token: {
+    type: String,
+    required: true
+  }
+})
+
+const appConfig = useAppConfig()
+
+const src = computed(() => `https://volta.net/embed/${props.token}?gray=${appConfig.ui.gray}&primary=${appConfig.ui.primary}`)
+</script>

docs/components/content/examples/CommandPaletteExampleAsync.vue

@@ -0,0 +1,21 @@
+<script setup>
+const groups = computed(() => {
+  return [{
+    key: 'users',
+    label: q => q && `Users matching “${q}”...`,
+    search: async (q) => {
+      if (!q) {
+        return []
+      }
+
+      const users = await $fetch(`https://jsonplaceholder.typicode.com/users`, { params: { q } })
+
+      return users.map(user => ({ id: user.id, label: user.name, suffix: user.email }))
+    }
+  }].filter(Boolean)
+})
+</script>
+
+<template>
+  <UCommandPalette :groups="groups" :autoselect="false" />
+</template>

docs/components/content/prose/ProseCode.vue

@@ -50,7 +50,7 @@ export default defineComponent({
   <div class="group relative" :class="`language-${language}`">
     <UButton
       :icon="icon"
-      variant="link"
+      variant="solid"
       class="absolute right-3 top-3 opacity-0 group-hover:opacity-100 transition-opacity z-[1]"
       size="xs"
       tabindex="-1"

docs/components/docs/DocsFooter.vue

@@ -0,0 +1,10 @@
+<template>
+  <footer class="flex items-center justify-end gap-1.5">
+    <div class="flex items-baseline gap-1.5 text-sm text-center text-gray-500 dark:text-gray-400">
+      Made by
+      <NuxtLink to="https://nuxtlabs.com" aria-label="NuxtLabs">
+        <LogoLabs class="text-white w-14 h-auto" />
+      </NuxtLink>
+    </div>
+  </footer>
+</template>

docs/components/docs/DocsPageFooter.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="flex items-center justify-between gap-1.5">
+    <UButton
+      v-if="page"
+      :to="`https://github.com/nuxtlabs/ui/edit/dev/docs/content/${page._file}`"
+      label="Edit this page on GitHub"
+      color="primary"
+      variant="link"
+      :padded="false"
+      icon="i-heroicons-pencil-square"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+const { page } = useContent()
+</script>

docs/components/docs/DocsPageHeader.vue

@@ -22,7 +22,7 @@
           label="GitHub"
           icon="i-simple-icons-github"
           color="white"
-          :to="`https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/${page._dir}/U${page.title}.vue`"
+          :to="`https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/${page._dir}/${page.title.replace(' ', '')}.vue`"
         />
       </div>
     </div>

docs/components/docs/DocsPrevNext.vue

@@ -1,8 +1,15 @@
 <template>
-  <div class="flex items-center justify-between">
-    <UButton v-if="prev" :label="prev.navigation?.title || prev.title" :to="prev._path" icon="i-heroicons-arrow-small-left-20-solid" color="white" />
+  <div class="grid gap-6 sm:grid-cols-2">
+    <DocsPrevNextCard v-if="prev" :title="prev.navigation?.title || prev.title" :description="prev.navigation?.description || prev.description" :to="prev._path" icon="i-heroicons-arrow-left-20-solid" />
     <span v-else>&nbsp;</span>
-    <UButton v-if="next" :label="next.navigation?.title || next.title" :to="next._path" trailing-icon="i-heroicons-arrow-small-right-20-solid" color="white" />
+    <DocsPrevNextCard
+      v-if="next"
+      :title="next.navigation?.title || next.title"
+      :description="next.navigation?.description || next.description"
+      :to="next._path"
+      icon="i-heroicons-arrow-right-20-solid"
+      class="text-right"
+    />
   </div>
 </template>
 

docs/components/docs/DocsPrevNextCard.vue

@@ -0,0 +1,36 @@
+<template>
+  <NuxtLink :to="to" class="block px-5 py-8 border not-prose rounded-lg border-gray-200 dark:border-gray-800 hover:bg-gray-50 dark:hover:bg-gray-800/25 group">
+    <div v-if="icon" class="inline-flex items-center rounded-full p-1.5 bg-gray-50 dark:bg-gray-800 group-hover:bg-primary-50 dark:group-hover:bg-primary-400/10 ring-1 ring-gray-300 dark:ring-gray-700 mb-4 group-hover:ring-primary-500/50 dark:group-hover:ring-primary-400/50">
+      <UIcon :name="icon" class="w-5 h-5 text-gray-900 dark:text-gray-100 group-hover:text-primary-500 dark:group-hover:text-primary-400" />
+    </div>
+
+    <p class="text-gray-900 dark:text-gray-50 font-medium text-[15px] mb-1">
+      {{ title }}
+    </p>
+
+    <p class="text-sm font-normal text-gray-500 dark:text-gray-400">
+      {{ description }}
+    </p>
+  </NuxtLink>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  icon: {
+    type: String,
+    default: null
+  },
+  title: {
+    type: String,
+    default: ''
+  },
+  description: {
+    type: String,
+    default: ''
+  },
+  to: {
+    type: String,
+    required: true
+  }
+})
+</script>

docs/components/docs/DocsToc.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="toc" class="sticky top-16 bg-white/75 dark:bg-gray-900/75 backdrop-blur group lg:self-start -mx-4 sm:-mx-6 lg:mx-0 px-4 sm:px-6 lg:pl-8 lg:pr-0">
+  <div class="sticky top-16 bg-white/75 dark:bg-gray-900/75 backdrop-blur group lg:self-start -mx-4 sm:-mx-6 lg:mx-0 px-4 sm:px-6 lg:pl-8 lg:pr-0">
     <div class="py-3 lg:py-8 border-b border-dashed border-gray-200 dark:border-gray-800 lg:border-0">
       <button class="flex items-center gap-2" tabindex="-1" @click="isTocOpen = !isTocOpen">
         <span class="text-sm text-slate-900 font-semibold text-sm leading-6 dark:text-slate-100 truncate">Table of Contents</span>

docs/content/1.getting-started/1.index.md

@@ -1,6 +1,9 @@
 ---
 title: Introduction
-description: 'Components library as a Nuxt module using TailwindCSS and HeadlessUI.'
+description: 'Fully styled and customizable components for Nuxt.'
+head:
+  title: 'NuxtLabs UI: Fully styled and customizable components for Nuxt'
+  description: 'It provides everything related to UI when building your Nuxt app. This includes components, icons, colors, dark mode but also keyboard shortcuts. Built with Headless UI and Tailwind CSS, published under MIT License.'
 ---
 
 This module has been developed by the [NuxtLabs](https://nuxtlabs.com/) team for [Volta](https://volta.net) and [Nuxt Studio](https://nuxt.studio/), its goal is to provide everything related to UI when building a Nuxt app. This includes components, icons, colors, dark mode but also keyboard shortcuts.
@@ -11,7 +14,7 @@ This module has been developed by the [NuxtLabs](https://nuxtlabs.com/) team for
 
 ## Features
 
-- Fully styled and customizable components
+- Built with [Headless UI](https://headlessui.dev/) and [Tailwind CSS](https://tailwindcss.com/)
 - HMR support through Nuxt App Config
 - Dark mode support
 - Keyboard shortcuts

docs/content/1.getting-started/2.installation.md

@@ -2,8 +2,6 @@
 description: 'Learn how to install and configure the module in your Nuxt app.'
 ---
 
-## Overview
-
 1. Install `@nuxthq/ui` dependency to your project:
 
 ::code-group
@@ -30,10 +28,16 @@ export default defineNuxtConfig({
 })
 ```
 
-::alert
 That's it! You can now use all the components and composables in your Nuxt app ✨
+
+::alert{icon="i-heroicons-exclamation-triangle"}
+As this module installs [@nuxtjs/tailwindcss](https://tailwindcss.nuxtjs.org/) and [@nuxtjs/color-mode](https://color-mode.nuxtjs.org/) for you, you should remove them from your `modules` and `dependencies` if you've previously installed them manually.
 ::
 
+## Playground
+
+:u-button{icon="i-simple-icons-stackblitz" label="Play on StackBlitz" size="lg" to="https://stackblitz.com/edit/nuxtlabs-ui?file=app.config.ts,app.vue" target="_blank"}
+
 ## Options
 
 | Key                      | Default                | Description                                      |
@@ -42,7 +46,7 @@ That's it! You can now use all the components and composables in your Nuxt app
 | `global`                 | `false`                | Expose components globally.                      |
 | `icons`                  | `['heroicons']`        | Icon collections to load.                        |
 
-## Edge channel
+## Edge
 
 To use the latest updates pushed on the [`dev`](https://github.com/nuxtlabs/ui/tree/dev) branch, you can use `@nuxthq/ui-edge`.
 

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

@@ -13,25 +13,31 @@ Components are based on a `primary` and a `gray` color. You can change them in y
 ```ts [app.config.ts]
 export default defineAppConfig({
   ui: {
-    primary: 'sky',
+    primary: 'green',
     gray: 'cool'
   }
 })
 ```
 
-As this module uses TailwindCSS under the hood, you can use any of the [TailwindCSS colors](https://tailwindcss.com/docs/customizing-colors#color-palette-reference) or your own custom colors. By default, the `primary` color is `sky` and the `gray` color is `cool`.
+As this module uses Tailwind CSS under the hood, you can use any of the [Tailwind CSS colors](https://tailwindcss.com/docs/customizing-colors#color-palette-reference) or your own custom colors. By default, the `primary` color is `green` and the `gray` color is `cool`.
 
-To provide dynamic colors that can be changed at runtime, this module uses CSS variables. As TailwindCSS already has a `gray` color, the module automatically renames it to `cool` to avoid conflicts (`coolGray` was renamed to `gray` when Tailwind CSS v3.0 was released).
+To provide dynamic colors that can be changed at runtime, this module uses CSS variables. As Tailwind CSS already has a `gray` color, the module automatically renames it to `cool` to avoid conflicts (`coolGray` was renamed to `gray` when Tailwind CSS v3.0 was released).
 
 ::alert{icon="i-heroicons-light-bulb"}
 Try to change the `primary` and `gray` colors in the navbar and see the colors change live.
 ::
 
-Components that have a `color` prop like [Avatar](/elements/avatar), [Badge](/elements/badge) and [Button](/elements/button) will use the `primary` color by default but will handle all the colors defined in your `tailwind.config.ts` or the default TailwindCSS colors.
+Components that have a `color` prop like [Avatar](/elements/avatar), [Badge](/elements/badge) and [Button](/elements/button) will use the `primary` color by default but will handle all the colors defined in your `tailwind.config.ts` or the default Tailwind CSS colors.
+
+## Dark mode
+
+All the components are styled with dark mode in mind.
+
+Thanks to [Tailwind CSS dark mode](https://tailwindcss.com/docs/dark-mode#toggling-dark-mode-manually) `class` strategy and the [@nuxtjs/color-mode](https://github.com/nuxt-modules/color-mode) module, you literally have nothing to do.
 
 ## Components
 
-Components are styled with TailwindCSS but classes are all defined in the default [app.config.ts](https://github.com/nuxtlabs/ui/blob/dev/src/runtime/app.config.ts) file. You can override them in your `app.config.ts`.
+Components are styled with Tailwind CSS but classes are all defined in the default [app.config.ts](https://github.com/nuxtlabs/ui/blob/dev/src/runtime/app.config.ts) file. You can override them in your `app.config.ts`.
 
 ```ts [app.config.ts]
 export default defineAppConfig({
@@ -109,10 +115,32 @@ Search the icon you want to use on https://icones.js.org built by [@antfu](https
 
 Unlike the official [nuxt-icon](https://github.com/nuxt-modules/icon/) module, this module will not fetch any icon from the web and will only bundle the icons you use in your app thanks to [egoist/tailwindcss-icons](https://github.com/egoist/tailwindcss-icons).
 
-However, you will need to install the icon packages you want to use.
+However, you will need to install either `@iconify/json` (full icon collections, 50MB) or the individual icon packages you want to use in your app.
 
-```sh
-yarn add --dev @iconify/json-{collection_name}
+::code-group
+
+```bash [yarn]
+yarn add -D @iconify-json/{collection_name}
+```
+
+```bash [npm]
+npm install -D @iconify-json/{collection_name}
+```
+
+```sh [pnpm]
+pnpm i -D @iconify-json/{collection_name}
+```
+
+::
+
+When using `@iconify/json`, you can specifiy `icons: 'all'` in your `nuxt.config.ts` to use any icon in your app.
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  ui: {
+    icons: 'all'
+  }
+})
 ```
 
 You can easily replace all the default icons of the components in your `app.config.ts`.
@@ -159,9 +187,3 @@ export default defineAppConfig({
   }
 })
 ```
-
-## Dark mode
-
-All the components are styled with dark mode in mind.
-
-Thanks to [TailwindCSS dark mode](https://tailwindcss.com/docs/dark-mode#toggling-dark-mode-manually) `class` strategy and the [@nuxtjs/color-mode](https://github.com/nuxt-modules/color-mode) module, you literally have nothing to do.

docs/content/1.getting-started/4.shortcuts.md

@@ -48,6 +48,65 @@ defineShortcuts({
 </script>
 ```
 
+### `usingInput`
+
+Prop: `usingInput?: string | boolean`
+
+By default, `usingInput` is `false`, meaning it will only trigger when no input is focused. When set to `true`, the shortcut will also trigger when any input is focused.
+
+For a more advanced behavior, `usingInput` can be set to the name of an input, so it only triggers when focusing this specific input.
+
+```vue
+<template>
+  <UInput v-model="query" name="queryInput" />
+</template>
+
+<script setup lang="ts">
+const query = ref('')
+
+defineShortcuts({
+  enter: {
+    usingInput: 'queryInput',
+    handler: () => {
+      // TODO
+    }
+  }
+})
+</script>
+```
+_`enter` shortcut will only trigger when `queryInput` is focused._
+
+### `whenever`
+
+Prop: `whenever?: WatchSource<Boolean>[]`
+
+`whenever` allows to add constraints on the shortcut triggering behavior. This array can contain `Ref<Boolean>`, `ComputedRef<Boolean>` or `() => Boolean`.
+
+```ts
+defineShortcuts({
+  meta_k: {
+    usingInput: true,
+    handler: () => { isOpen.value = !isOpen.value }
+  },
+  escape: {
+    usingInput: true,
+    whenever: [isOpen],
+    handler: () => { isOpen.value = false }
+  }
+})
+```
+_`escape` shortcut will only trigger when `isOpen` is `true`._
+
+### Simple shortcut
+
+In case the shortcut does not need any config, it can be written as a function.
+
+```ts
+defineShortcuts({
+  '?': () => openHelpModal()
+})
+```
+
 ## `useShortcuts`
 
 To display shortcuts in your app according to the user's OS, you can use the `useShortcuts` composable.
@@ -61,3 +120,4 @@ const { metaSymbol } = useShortcuts()
   <UKbd>{{ metaSymbol }}</UKbd>
 </template>
 ```
+_`metaSymbol` will display either `⌘` on MacOS or `Ctrl` on any other OS_

docs/content/1.getting-started/5.roadmap.md

@@ -0,0 +1,7 @@
+---
+title: Roadmap
+description: Discover our Volta board for @nuxthq/ui development status.
+toc: false
+---
+
+:volta-embed{token="eyJ2aWV3IjoiYm9hcmQiLCJib2FyZFN0YXR1c2VzIjpbInRyaWFnZSIsImJhY2tsb2ciLCJ0b2RvIiwiaW5fcHJvZ3Jlc3MiLCJpbl9yZXZpZXciLCJkb25lIiwicmVsZWFzZWQiXSwiYm9hcmRMaW5rZWRQcnMiOnRydWUsImxpc3RHcm91cCI6InN0YXRlIiwibGlzdE9yZGVyIjoiY3JlYXRlZF9hdCIsInRpbWVsaW5lWm9vbSI6Im1vbnRoIiwidGltZWxpbmVPcmRlciI6InN0YXRlIiwidGltZWxpbmVEaXNwbGF5IjoiYWxsX21pbGVzdG9uZXMiLCJmaWx0ZXJzIjp7fSwib3duZXIiOiJudXh0bGFicyIsIm5hbWUiOiJ1aSJ9"}

docs/content/2.elements/1.avatar.md

@@ -1,5 +1,6 @@
 ---
 github: true
+description: Display an image that represents a resource or a group of resources.
 ---
 
 ## Usage

docs/content/2.elements/2.badge.md

@@ -1,5 +1,6 @@
 ---
 github: true
+description: Display a short text to represent a status or a category.
 ---
 
 ## Usage

docs/content/2.elements/3.button.md

@@ -1,5 +1,6 @@
 ---
 github: true
+description: Create a button with icon or link capabilities.
 ---
 
 ## Usage
@@ -125,6 +126,7 @@ props:
   trailing: false
 excludedProps:
   - icon
+  - label
 ---
 ::
 
@@ -257,7 +259,7 @@ props:
   size: 'sm'
 ui:
   size:
-    xxs: ''
+    2xs: ''
     xs: ''
     sm: ''
     md: ''

docs/content/2.elements/4.dropdown.md

@@ -1,5 +1,6 @@
 ---
 github: true
+description: Display a list of actions in a dropdown menu.
 headlessui:
   label: 'Menu'
   to: 'https://headlessui.com/vue/menu'

docs/content/2.elements/5.icon.md

@@ -1,5 +1,6 @@
 ---
 github: true
+description: Display an icon from Iconify library.
 ---
 
 ## Usage

docs/content/2.elements/6.kbd.md

@@ -1,6 +1,7 @@
 ---
 github: true
 title: 'Keyboard Key'
+description: Display a keyboard key in a text block.
 navigation:
   title: 'Kbd'
 ---

docs/content/3.forms/1.input.md

@@ -1,5 +1,6 @@
 ---
 github: true
+description: Display an input field.
 ---
 
 ## Usage

docs/content/3.forms/2.textarea.md

@@ -1,5 +1,6 @@
 ---
 github: true
+description: Display a textarea field.
 ---
 
 ## Usage

docs/content/3.forms/3.select.md

@@ -1,9 +1,12 @@
 ---
 github: true
+description: Display a select field.
 ---
 
 ## Usage
 
+The Select component is a wrapper around the native `<select>` HTML element. For more advanced use cases like searching or multiple selection, consider using the [SelectMenu](/forms/select-menu) component.
+
 ::component-card
 ---
 baseProps:

docs/content/3.forms/4.select-menu.md

@@ -1,5 +1,6 @@
 ---
 github: true
+description: Display a select menu with advanced features.
 headlessui:
   label: 'Listbox'
   to: 'https://headlessui.com/vue/listbox'
@@ -156,7 +157,7 @@ excludedProps:
 
 Use the `searchable` prop to enable search.
 
-This will use HeadlessUI [Combobox](https://headlessui.com/vue/combobox) component instead of [Listbox](https://headlessui.com/vue/listbox).
+This will use Headless UI [Combobox](https://headlessui.com/vue/combobox) component instead of [Listbox](https://headlessui.com/vue/listbox).
 
 ::component-card
 ---

docs/content/3.forms/5.checkbox.md

@@ -1,5 +1,6 @@
 ---
 github: true
+description: Display a checkbox field.
 ---
 
 ## Usage

docs/content/3.forms/6.radio.md

@@ -1,5 +1,6 @@
 ---
 github: true
+description: Display a radio field.
 ---
 
 ## Usage

docs/content/3.forms/7.toggle.md

@@ -1,5 +1,6 @@
 ---
 github: true
+description: Display a toggle field.
 headlessui:
   label: 'Switch'
   to: 'https://headlessui.com/vue/switch'

docs/content/4.navigation/1.vertical-navigation.md

@@ -1,5 +1,6 @@
 ---
 github: true
+description: Display a vertical navigation.
 ---
 
 ## Usage

docs/content/4.navigation/2.command-palette.md

@@ -1,5 +1,6 @@
 ---
 github: true
+description: Add a customizable command palette to your app.
 headlessui:
   label: 'Combobox'
   to: 'https://headlessui.com/vue/combobox'
@@ -261,6 +262,43 @@ You can also highlight the matches in the command by setting the `fuse.fuseOptio
 Try it yourself in this documentation's search by pressing :badge-shortcut{value="meta"} :badge-shortcut{value="K" class="ml-1"}.
 ::
 
+## Async search
+
+You can also pass an `async` function to the `search` property of a group to perform an async search. The function will receive the query as its first argument and should return an array of commands.
+
+::component-example
+---
+padding: false
+---
+
+#default
+:command-palette-example-async{class="h-[274px]"}
+#code
+```vue
+<script setup>
+const groups = computed(() => {
+  return [{
+    key: 'users',
+    label: q => q && `Users matching “${q}”...`,
+    search: async (q) => {
+      if (!q) {
+        return []
+      }
+
+      const users = await $fetch(`https://jsonplaceholder.typicode.com/users`, { params: { q } })
+
+      return users.map(user => ({ id: user.id, label: user.name, suffix: user.email }))
+    }
+  }].filter(Boolean)
+})
+</script>
+
+<template>
+  <UCommandPalette :groups="groups" />
+</template>
+```
+::
+
 ## Themes
 
 Our theming system provides a lot of flexibility to customize the component. Here is some examples of what you can do.
@@ -276,7 +314,7 @@ padding: false
 :command-palette-theme-algolia{class="max-h-[480px] rounded-md"}
 ::
 
-::alert{icon="i-simple-icons-github" to="https://github.com/nuxtlabs/ui/blob/docs/rework/docs/components/content/themes/CommandPaletteThemeAlgolia.vue#L23"}
+::alert{icon="i-simple-icons-github" to="https://github.com/nuxtlabs/ui/blob/dev/docs/components/content/themes/CommandPaletteThemeAlgolia.vue#L23"}
 Take a look at the component!
 ::
 
@@ -291,7 +329,7 @@ padding: false
 :command-palette-theme-raycast{class="max-h-[480px] rounded-md"}
 ::
 
-::alert{icon="i-simple-icons-github" to="https://github.com/nuxtlabs/ui/blob/docs/rework/docs/components/content/themes/CommandPaletteThemeRaycast.vue#L30"}
+::alert{icon="i-simple-icons-github" to="https://github.com/nuxtlabs/ui/blob/dev/docs/components/content/themes/CommandPaletteThemeRaycast.vue#L30"}
 Take a look at the component!
 ::
 

docs/content/5.overlays/1.modal.md

@@ -1,5 +1,6 @@
 ---
 github: true
+description: Display a modal within your application.
 headlessui:
   label: 'Dialog'
   to: 'https://headlessui.com/vue/dialog'

docs/content/5.overlays/2.slideover.md

@@ -1,5 +1,6 @@
 ---
 github: true
+description: Display a dialog that slides in from the edge of the screen.
 headlessui:
   label: 'Dialog'
   to: 'https://headlessui.com/vue/dialog'

docs/content/5.overlays/3.popover.md

@@ -1,5 +1,6 @@
 ---
 github: true
+description: Display a non-modal dialog that floats around a trigger element.
 headlessui:
   label: 'Popover'
   to: 'https://headlessui.com/vue/popover'

docs/content/5.overlays/4.tooltip.md

@@ -1,5 +1,6 @@
 ---
 github: true
+description: Display content that appears on hover next to an element.
 ---
 
 ## Usage

docs/content/5.overlays/5.context-menu.md

@@ -1,5 +1,6 @@
 ---
 github: true
+description: Display a menu that appears on right click.
 ---
 
 ## Usage

docs/content/5.overlays/6.notification.md

@@ -1,13 +1,12 @@
 ---
 github: true
+description: Display a toast notification in your app.
 ---
 
 ## Usage
 
 First of all, add the `Notifications` component to your app, preferably inside `app.vue`.
 
-This component will render by default the notifications at the bottom right of the screen. You can configure its behaviour in the `app.config.ts` through `ui.notifications`.
-
 ```vue [app.vue]
 <template>
   <div>
@@ -37,6 +36,19 @@ const toast = useToast()
 ```
 ::
 
+This component will render by default the notifications at the bottom right of the screen. You can configure its behaviour in the `app.config.ts` through `ui.notifications`:
+
+```ts [app.config.ts]
+export default defineAppConfig({
+  ui: {
+    notifications: {
+      // Show toasts at the top right of the screen
+      position: 'top-0 right-0'
+    }
+  }
+})
+```
+
 ### Description
 
 You can add a `description` in addition of the `title`.

docs/content/6.layout/1.card.md

@@ -1,5 +1,6 @@
 ---
 github: true
+description: Display a card for content with a header, body and footer.
 ---
 
 ## Usage

docs/content/6.layout/2.container.md

@@ -1,5 +1,6 @@
 ---
 github: true
+description: A container lets you center and constrain the width of your content.
 ---
 
 ## Usage

docs/content/6.layout/3.skeleton.md

@@ -1,5 +1,6 @@
 ---
 github: true
+description: Display a placeholder while content is loading.
 ---
 
 ## Usage

docs/nuxt.config.ts

@@ -6,6 +6,8 @@ export default defineNuxtConfig({
     ui,
     '@vueuse/nuxt',
     '@nuxt/content',
+    '@nuxt/devtools',
+    '@nuxthq/studio',
     '@nuxtjs/plausible',
     'nuxt-lodash',
     'nuxt-component-meta'
@@ -34,5 +36,8 @@ export default defineNuxtConfig({
       '/api/_content/**': { isr: true, static: true },
       '/api/component-meta/**': { isr: true, static: true }
     }
+  },
+  routeRules: {
+    // '/getting-started': { swr: 100000 }
   }
 })

docs/public/icon-light.svg

@@ -1,3 +0,0 @@
-<svg width="900" height="900" viewBox="0 0 900 900" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M504.908 750H839.476C850.103 750.001 860.542 747.229 869.745 741.963C878.948 736.696 886.589 729.121 891.9 719.999C897.211 710.876 900.005 700.529 900 689.997C899.995 679.465 897.193 669.12 891.873 660.002L667.187 274.289C661.876 265.169 654.237 257.595 645.036 252.329C635.835 247.064 625.398 244.291 614.773 244.291C604.149 244.291 593.711 247.064 584.511 252.329C575.31 257.595 567.67 265.169 562.36 274.289L504.908 372.979L392.581 179.993C387.266 170.874 379.623 163.301 370.42 158.036C361.216 152.772 350.777 150 340.151 150C329.525 150 319.086 152.772 309.883 158.036C300.679 163.301 293.036 170.874 287.721 179.993L8.12649 660.002C2.80743 669.12 0.00462935 679.465 5.72978e-06 689.997C-0.00461789 700.529 2.78909 710.876 8.10015 719.999C13.4112 729.121 21.0523 736.696 30.255 741.963C39.4576 747.229 49.8973 750.001 60.524 750H270.538C353.748 750 415.112 713.775 457.336 643.101L559.849 467.145L614.757 372.979L779.547 655.834H559.849L504.908 750ZM267.114 655.737L120.551 655.704L340.249 278.586L449.87 467.145L376.474 593.175C348.433 639.03 316.577 655.737 267.114 655.737Z" fill="#0C0C0D"/>
-</svg>

docs/public/icon.svg

@@ -1,3 +1,15 @@
 <svg width="900" height="900" viewBox="0 0 900 900" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M504.908 750H839.476C850.103 750.001 860.542 747.229 869.745 741.963C878.948 736.696 886.589 729.121 891.9 719.999C897.211 710.876 900.005 700.529 900 689.997C899.995 679.465 897.193 669.12 891.873 660.002L667.187 274.289C661.876 265.169 654.237 257.595 645.036 252.329C635.835 247.064 625.398 244.291 614.773 244.291C604.149 244.291 593.711 247.064 584.511 252.329C575.31 257.595 567.67 265.169 562.36 274.289L504.908 372.979L392.581 179.993C387.266 170.874 379.623 163.301 370.42 158.036C361.216 152.772 350.777 150 340.151 150C329.525 150 319.086 152.772 309.883 158.036C300.679 163.301 293.036 170.874 287.721 179.993L8.12649 660.002C2.80743 669.12 0.00462935 679.465 5.72978e-06 689.997C-0.00461789 700.529 2.78909 710.876 8.10015 719.999C13.4112 729.121 21.0523 736.696 30.255 741.963C39.4576 747.229 49.8973 750.001 60.524 750H270.538C353.748 750 415.112 713.775 457.336 643.101L559.849 467.145L614.757 372.979L779.547 655.834H559.849L504.908 750ZM267.114 655.737L120.551 655.704L340.249 278.586L449.87 467.145L376.474 593.175C348.433 639.03 316.577 655.737 267.114 655.737Z" fill="white"/>
+<style>
+  path {
+    fill: black;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    path {
+      fill: white;
+    }
+  }
+</style>
+
+<path d="M504.908 750H839.476C850.103 750.001 860.542 747.229 869.745 741.963C878.948 736.696 886.589 729.121 891.9 719.999C897.211 710.876 900.005 700.529 900 689.997C899.995 679.465 897.193 669.12 891.873 660.002L667.187 274.289C661.876 265.169 654.237 257.595 645.036 252.329C635.835 247.064 625.398 244.291 614.773 244.291C604.149 244.291 593.711 247.064 584.511 252.329C575.31 257.595 567.67 265.169 562.36 274.289L504.908 372.979L392.581 179.993C387.266 170.874 379.623 163.301 370.42 158.036C361.216 152.772 350.777 150 340.151 150C329.525 150 319.086 152.772 309.883 158.036C300.679 163.301 293.036 170.874 287.721 179.993L8.12649 660.002C2.80743 669.12 0.00462935 679.465 5.72978e-06 689.997C-0.00461789 700.529 2.78909 710.876 8.10015 719.999C13.4112 729.121 21.0523 736.696 30.255 741.963C39.4576 747.229 49.8973 750.001 60.524 750H270.538C353.748 750 415.112 713.775 457.336 643.101L559.849 467.145L614.757 372.979L779.547 655.834H559.849L504.908 750ZM267.114 655.737L120.551 655.704L340.249 278.586L449.87 467.145L376.474 593.175C348.433 639.03 316.577 655.737 267.114 655.737Z" />
 </svg>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxthq/ui",
-  "version": "2.0.4",
+  "version": "2.1.0",
   "repository": "https://github.com/nuxtlabs/ui",
   "license": "MIT",
   "exports": {
@@ -15,14 +15,14 @@
     "dist"
   ],
   "engines": {
-    "node": ">=18 <19"
+    "node": ">=16.14.0"
   },
   "scripts": {
     "build": "nuxt-module-build",
     "prepack": "yarn build",
     "dev": "nuxi dev docs",
     "build:docs": "nuxi build docs",
-    "lint": "eslint --ext .ts,.js,.vue .",
+    "lint": "eslint .",
     "typecheck": "nuxi typecheck",
     "prepare": "nuxi prepare docs",
     "release": "yarn lint && standard-version && git push --follow-tags"
@@ -33,7 +33,7 @@
     "@iconify-json/heroicons": "^1.1.10",
     "@nuxt/kit": "^3.4.3",
     "@nuxtjs/color-mode": "^3.2.0",
-    "@nuxtjs/tailwindcss": "^6.6.8",
+    "@nuxtjs/tailwindcss": "^6.7.0",
     "@popperjs/core": "^2.11.7",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/forms": "^0.5.3",
@@ -47,13 +47,15 @@
     "tailwindcss": "^3.3.2"
   },
   "devDependencies": {
-    "@iconify-json/simple-icons": "^1.1.52",
+    "@iconify-json/simple-icons": "^1.1.53",
     "@nuxt/content": "^2.6.0",
+    "@nuxt/devtools": "^0.4.6",
+    "@nuxt/eslint-config": "^0.1.1",
     "@nuxt/module-builder": "^0.3.1",
-    "@nuxtjs/eslint-config-typescript": "^12.0.0",
+    "@nuxthq/studio": "^0.12.1",
     "@nuxtjs/plausible": "^0.2.1",
     "@types/lodash-es": "^4.17.7",
-    "@types/node": "^20.1.2",
+    "@types/node": "^20.1.7",
     "@vueuse/nuxt": "^10.1.2",
     "eslint": "^8.40.0",
     "nuxt": "^3.4.3",

src/module.ts

@@ -39,7 +39,7 @@ export interface ModuleOptions {
    */
   global?: boolean
 
-  icons: string[]
+  icons: string[] | string
 }
 
 export default defineNuxtModule<ModuleOptions>({
@@ -115,7 +115,7 @@ export default defineNuxtModule<ModuleOptions>({
 
       nuxt.options.appConfig.ui = {
         ...nuxt.options.appConfig.ui,
-        primary: 'sky',
+        primary: 'green',
         gray: 'cool',
         colors: variantColors
       }
@@ -177,7 +177,7 @@ export default defineNuxtModule<ModuleOptions>({
           require('@tailwindcss/typography')
         ],
         content: [
-          resolve(runtimeDir, 'components/**/*.{vue,js,ts}'),
+          resolve(runtimeDir, 'components/**/*.{vue,mjs,ts}'),
           resolve(runtimeDir, '*.{mjs,js,ts}')
         ]
       }

src/runtime/app.config.ts

@@ -469,7 +469,7 @@ const verticalNavigation = {
   wrapper: 'relative',
   base: 'group flex items-center gap-2 text-sm font-medium rounded-md w-full relative focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:before:ring-inset focus-visible:before:ring-1 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 before:absolute before:inset-px before:rounded-md disabled:cursor-not-allowed disabled:opacity-75',
   padding: 'px-3 py-1.5',
-  active: 'text-gray-900 dark:text-white before:bg-gray-100 dark:before:bg-gray-800 ',
+  active: 'text-gray-900 dark:text-white before:bg-gray-100 dark:before:bg-gray-800',
   inactive: 'text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50',
   label: 'truncate relative',
   icon: {
@@ -721,7 +721,9 @@ const notification = {
 }
 
 const notifications = {
-  wrapper: 'fixed bottom-0 right-0 flex flex-col justify-end w-full z-[55] sm:w-96',
+  wrapper: 'fixed flex flex-col justify-end z-[55]',
+  position: 'bottom-0 right-0',
+  width: 'w-full sm:w-96',
   container: 'px-4 sm:px-6 py-6 space-y-3 overflow-y-auto'
 }
 

src/runtime/components/elements/AvatarGroup.ts

@@ -36,10 +36,15 @@ export default defineComponent({
 
     const children = computed(() => {
       let children = slots.default?.()
-      // @ts-ignore-next
-      if (children.length && children[0].type.name === 'ContentSlot') {
+      if (children.length) {
+        if (typeof children[0].type === 'symbol') {
+          // @ts-ignore-next
+          children = children[0].children
         // @ts-ignore-next
-        children = children[0].ctx.slots.default?.()
+        } else if (children[0].type.name === 'ContentSlot') {
+          // @ts-ignore-next
+          children = children[0].ctx.slots.default?.()
+        }
       }
       return children
     })

src/runtime/components/elements/Button.vue

@@ -1,7 +1,6 @@
 <template>
   <component
     :is="buttonIs"
-    ref="button"
     :class="buttonClass"
     :aria-label="ariaLabel"
     v-bind="buttonProps"
@@ -17,7 +16,7 @@
 </template>
 
 <script lang="ts">
-import { ref, computed, defineComponent, useSlots } from 'vue'
+import { computed, defineComponent, useSlots } from 'vue'
 import type { PropType } from 'vue'
 import type { RouteLocationNormalized, RouteLocationRaw } from 'vue-router'
 import { defu } from 'defu'
@@ -141,8 +140,6 @@ export default defineComponent({
 
     const slots = useSlots()
 
-    const button = ref(null)
-
     const buttonIs = computed(() => {
       if (props.to) {
         return NuxtLink
@@ -217,7 +214,6 @@ export default defineComponent({
     })
 
     return {
-      button,
       buttonIs,
       buttonProps,
       isLeading,

src/runtime/components/elements/ButtonGroup.ts

@@ -30,10 +30,15 @@ export default defineComponent({
 
     const children = computed(() => {
       let children = slots.default?.()
-      // @ts-ignore-next
-      if (children.length && children[0].type.name === 'ContentSlot') {
+      if (children.length) {
+        if (typeof children[0].type === 'symbol') {
+          // @ts-ignore-next
+          children = children[0].children
         // @ts-ignore-next
-        children = children[0].ctx.slots.default?.()
+        } else if (children[0].type.name === 'ContentSlot') {
+          // @ts-ignore-next
+          children = children[0].ctx.slots.default?.()
+        }
       }
       return children
     })

src/runtime/components/forms/Input.vue

@@ -218,6 +218,7 @@ export default defineComponent({
     return {
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
+      input,
       isLeading,
       isTrailing,
       inputClass,

src/runtime/components/forms/SelectMenu.vue

@@ -101,7 +101,7 @@
           </component>
           <p v-else-if="searchable && query && !filteredOptions.length" :class="ui.option.empty">
             <slot name="option-empty" :query="query">
-              No results found for "{{ query }}".
+              No results for "{{ query }}".
             </slot>
           </p>
         </component>

src/runtime/components/forms/Textarea.vue

@@ -159,6 +159,7 @@ export default defineComponent({
     return {
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
+      textarea,
       textareaClass,
       onInput
     }

src/runtime/components/layout/Card.vue

@@ -1,6 +1,6 @@
 <template>
   <component
-    :is="$attrs.onSubmit ? 'form': 'div'"
+    :is="$attrs.onSubmit ? 'form': as"
     :class="[ui.base, ui.rounded, ui.divide, ui.ring, ui.shadow, ui.background]"
     v-bind="$attrs"
   >
@@ -30,6 +30,10 @@ import appConfig from '#build/app.config'
 export default defineComponent({
   inheritAttrs: false,
   props: {
+    as: {
+      type: String,
+      default: 'div'
+    },
     ui: {
       type: Object as PropType<Partial<typeof appConfig.ui.card>>,
       default: () => appConfig.ui.card

src/runtime/components/layout/Container.vue

@@ -1,7 +1,7 @@
 <template>
-  <div :class="[ui.base, ui.padding, ui.constrained]">
+  <component :is="as" :class="[ui.base, ui.padding, ui.constrained]">
     <slot />
-  </div>
+  </component>
 </template>
 
 <script lang="ts">
@@ -17,6 +17,10 @@ import appConfig from '#build/app.config'
 
 export default defineComponent({
   props: {
+    as: {
+      type: String,
+      default: 'div'
+    },
     ui: {
       type: Object as PropType<Partial<typeof appConfig.ui.container>>,
       default: () => appConfig.ui.container

src/runtime/components/navigation/CommandPalette.vue

@@ -1,6 +1,5 @@
 <template>
   <Combobox
-    ref="comboboxRef"
     :by="by"
     :model-value="modelValue"
     :multiple="multiple"

src/runtime/components/overlays/Notifications.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="ui.wrapper">
+  <div :class="[ui.wrapper, ui.position, ui.width]">
     <div v-if="notifications.length" :class="ui.container">
       <div v-for="notification of notifications" :key="notification.id">
         <UNotification

src/runtime/composables/useTimer.ts

@@ -18,7 +18,6 @@ export function useTimer (cb: (...args: unknown[]) => any, interval: number, opt
     timer = setTimeout(() => {
       timer = null
       startTime.value = null
-      // eslint-disable-next-line n/no-callback-literal
       cb(...args)
     }, remaining.value) as unknown as number
   }

src/runtime/plugins/colors.ts

@@ -7,11 +7,22 @@ export default defineNuxtPlugin(() => {
   const appConfig = useAppConfig()
   const nuxtApp = useNuxtApp()
 
-  const root = computed(() => `:root {
-${Object.entries(colors[appConfig.ui.primary]).map(([key, value]) => `--color-primary-${key}: ${hexToRgb(value)};`).join('\n')}
+  const root = computed(() => {
+    const primary = colors[appConfig.ui.primary]
+    const gray = colors[appConfig.ui.gray]
 
-${Object.entries(colors[appConfig.ui.gray]).map(([key, value]) => `--color-gray-${key}: ${hexToRgb(value)};`).join('\n')}
-  }`)
+    if (!primary) {
+      console.warn(`[@nuxthq/ui] Primary color '${appConfig.ui.primary}' not found in Tailwind config`)
+    }
+    if (!gray) {
+      console.warn(`[@nuxthq/ui] Gray color '${appConfig.ui.gray}' not found in Tailwind config`)
+    }
+
+    return `:root {
+${Object.entries(primary || colors.green).map(([key, value]) => `--color-primary-${key}: ${hexToRgb(value)};`).join('\n')}
+${Object.entries(gray || colors.cool).map(([key, value]) => `--color-gray-${key}: ${hexToRgb(value)};`).join('\n')}
+}`
+  })
 
   // Head
   const headData: any = {