@nuxt/ui 3.0.0-alpha.3 → 3.0.0-alpha.4

package/README.md

@@ -1,93 +1,72 @@
 [![nuxt-ui.png](https://repository-images.githubusercontent.com/428329515/43fec891-9030-4601-8233-5d45ba5c6013)](https://ui.nuxt.com)
 
-# Nuxt UI
+# Nuxt UI v3
 
 [![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]
 
-Nuxt UI is a module that provides a set of Vue components and composables built with [Tailwind CSS](https://tailwindcss.com/) and [Headless UI](https://headlessui.dev/) to help you build beautiful and accessible user interfaces.
+We're thrilled to introduce Nuxt UI v3, a significant upgrade to our UI library that delivers extensive improvements and robust new capabilities. This major update harnesses the combined strengths of [Radix Vue](https://www.radix-vue.com/), [Tailwind CSS v4](https://tailwindcss.com/blog/tailwindcss-v4-alpha), and [Tailwind Variants](https://www.tailwind-variants.org/) to offer developers an unparalleled set of tools for creating sophisticated, accessible, and highly performant user interfaces.
 
-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.
+## Installation
 
-## Features
+1. Install the Nuxt UI v3 alpha package:
 
-- Built with [Headless UI](https://headlessui.dev/) and [Tailwind CSS](https://tailwindcss.com/)
-- HMR support through Nuxt App Config
-- Dark mode support
-- Support for LTR and RTL languages
-- Keyboard shortcuts
-- Bundled icons
-- Fully typed
-- [Figma Kit](https://www.figma.com/community/file/1288455405058138934)
+```bash [pnpm]
+pnpm add @nuxt/ui@next
+```
 
-Read more on [ui.nuxt.com](https://ui.nuxt.com)
+```bash [yarn]
+yarn add @nuxt/ui@next
+```
 
-## Installation
+```bash [npm]
+npm install @nuxt/ui@next
+```
 
-```bash
-# npm
-npm install @nuxt/ui
-# yarn
-yarn add @nuxt/ui
-# pnpm
-pnpm add @nuxt/ui
-# bun
-bun add @nuxt/ui
+```bash [bun]
+bun add @nuxt/ui@next
 ```
 
-Then, register the module in your `nuxt.config.ts`:
+> [!WARNING]
+> Make sure you have `typescript` installed in your dev dependencies.
+
+2. Register the Nuxt UI module in your `nuxt.config.ts`:
 
-```js
+```ts [nuxt.config.ts]
 export default defineNuxtConfig({
-  modules: [
-    '@nuxt/ui'
-  ]
+  modules: ['@nuxt/ui']
 })
 ```
 
-If you want latest updates, please use `@nuxt/ui-edge` in your `package.json`:
+3. Import Tailwind and Nuxt UI in your `app.vue` or in your [CSS](https://nuxt.com/docs/getting-started/styling#the-css-property):
 
-```json
-{
-  "devDependencies": {
-    "@nuxt/ui": "npm:@nuxt/ui-edge@latest"
-  }
-}
+```css [main.css]
+@import "tailwindcss";
+@import "@nuxt/ui";
 ```
 
 ## Documentation
 
-Visit https://ui.nuxt.com to explore the documentation.
+Visit https://ui3.nuxt.com to explore the documentation.
 
 ## Credits
 
 - [nuxt/nuxt](https://github.com/nuxt/nuxt)
+- [nuxt/icon](https://github.com/nuxt/icon)
+- [nuxt/fonts](https://github.com/nuxt/fonts)
 - [nuxt-modules/color-mode](https://github.com/nuxt-modules/color-mode)
-- [nuxt-modules/tailwindcss](https://github.com/nuxt-modules/tailwindcss)
+- [radix-vue/radix-vue](https://github.com/radix-vue/radix-vue)
 - [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)
-
-## Contributing
-
-Thank you for considering contributing to Nuxt UI. Here are a few ways you can get involved:
-
-- Reporting Bugs: If you come across any bugs or issues, please check out the reporting bugs guide to learn how to submit a bug report.
-- Suggestions: Have any thoughts to enhance Nuxt UI? We'd love to hear them! Check out the [contribution guide](https://ui.nuxt.com/getting-started/contributing) to share your suggestions.
-
-## Local Development
-
-Follow the docs to [Set up your local development environment](https://ui.nuxt.com/getting-started/contributing#_2-local-development-setup) and contribute.
 
 ## License
 
 Licensed under the [MIT license](https://github.com/nuxt/ui/blob/dev/LICENSE.md).
 
 <!-- Badges -->
-[npm-version-src]: https://img.shields.io/npm/v/@nuxt/ui/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
+[npm-version-src]: https://img.shields.io/npm/v/@nuxt/ui/next.svg?style=flat&colorA=18181B&colorB=28CF8D
 [npm-version-href]: https://npmjs.com/package/@nuxt/ui
 
 [npm-downloads-src]: https://img.shields.io/npm/dm/@nuxt/ui.svg?style=flat&colorA=18181B&colorB=28CF8D

package/cli/commands/init.mjs

@@ -75,7 +75,7 @@ export default defineCommand({
     await sortFile(themePath)
 
     if (!args.prose) {
-      const typesPath = resolve(path, 'src/runtime/types/index.d.ts')
+      const typesPath = resolve(path, 'src/runtime/types/index.ts')
       await appendFile(typesPath, `export * from '../components/${args.content ? 'content/' : ''}${splitByCase(name).map(p => upperFirst(p)).join('')}.vue'`)
       await sortFile(typesPath)
     }

package/cli/templates.mjs

@@ -5,7 +5,7 @@ const playground = ({ name, pro }) => {
   const kebabName = kebabCase(name)
 
   return {
-    filename: `playground/pages/components/${kebabName}.vue`,
+    filename: `playground/app/pages/components/${kebabName}.vue`,
     contents: pro
       ? undefined
       : `

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=3.13.1"
   },
-  "version": "3.0.0-alpha.3",
+  "version": "3.0.0-alpha.4",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "2.0.0"

package/dist/module.mjs

@@ -1,6 +1,6 @@
 import { defuFn, defu } from 'defu';
 import { addTemplate, addTypeTemplate, defineNuxtModule, createResolver, addVitePlugin, hasNuxtModule, installModule, addPlugin, addComponentsDir, addImportsDir } from '@nuxt/kit';
-import { fileURLToPath } from 'node:url';
+import 'node:url';
 import { kebabCase } from 'scule';
 
 const accordion = {
@@ -8,7 +8,7 @@ const accordion = {
     root: "w-full",
     item: "border-b border-gray-200 dark:border-gray-800 last:border-b-0",
     header: "flex",
-    trigger: "group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400",
+    trigger: "group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 min-w-0",
     content: "data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none",
     body: "text-sm pb-3.5",
     leadingIcon: "shrink-0 size-5",
@@ -638,7 +638,7 @@ const collapsible = {
 
 const commandPalette = (options) => ({
   slots: {
-    root: "flex flex-col min-h-0 divide-y divide-gray-200 dark:divide-gray-800",
+    root: "flex flex-col min-h-0 min-w-0 divide-y divide-gray-200 dark:divide-gray-800",
     input: "[&>input]:h-12",
     close: "",
     content: "relative overflow-hidden",
@@ -752,15 +752,48 @@ const contextMenu = (options) => ({
 const drawer = {
   slots: {
     overlay: "fixed inset-0 z-50 bg-gray-200/75 dark:bg-gray-800/75",
-    content: "fixed inset-x-0 bottom-0 z-50 mt-24 bg-white dark:bg-gray-900 ring ring-gray-200 dark:ring-gray-800 rounded-t-lg h-auto max-h-[96%] flex flex-col focus:outline-none",
-    handle: "mx-auto w-12 my-4 h-1.5 shrink-0 rounded-full bg-gray-200 dark:bg-gray-700",
-    container: "mx-auto w-full max-w-md flex flex-col gap-4 px-4 pb-8 overflow-y-auto",
+    content: "fixed z-50 bg-white dark:bg-gray-900 ring ring-gray-200 dark:ring-gray-800 flex focus:outline-none",
+    handle: "shrink-0 rounded-full bg-gray-200 dark:bg-gray-700",
+    container: "w-full flex flex-col gap-4 p-4 overflow-y-auto",
     header: "",
     title: "text-gray-900 dark:text-white font-semibold",
     description: "mt-1 text-gray-500 dark:text-gray-400 text-sm",
     body: "flex-1",
     footer: "flex flex-col gap-1.5"
-  }
+  },
+  variants: {
+    direction: {
+      top: {
+        content: "top-0 mb-24 flex-col-reverse rounded-b-lg",
+        handle: "mb-4"
+      },
+      right: {
+        content: "right-4 flex-row",
+        handle: "ml-4"
+      },
+      bottom: {
+        content: "bottom-0 mt-24 flex-col rounded-t-lg",
+        handle: "mt-4"
+      },
+      left: {
+        content: "left-4 flex-row-reverse",
+        handle: "mr-4"
+      }
+    }
+  },
+  compoundVariants: [{
+    direction: ["top", "bottom"],
+    class: {
+      content: "inset-x-0 h-auto max-h-[96%]",
+      handle: "w-12 h-1.5 mx-auto"
+    }
+  }, {
+    direction: ["right", "left"],
+    class: {
+      content: "inset-y-4 w-auto max-w-[calc(100%-2rem)] rounded-lg after:hidden",
+      handle: "h-12 w-1.5 mt-auto mb-auto"
+    }
+  }]
 };
 
 const dropdownMenu = (options) => ({
@@ -1037,7 +1070,7 @@ const inputMenu = (options) => {
   return defuFn({
     slots: {
       base: () => ["rounded-md", options.theme.transitions && "transition-colors"],
-      trailing: "absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75",
+      trailing: "group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75",
       arrow: "fill-gray-200 dark:fill-gray-800",
       content: "max-h-60 w-[--radix-popper-anchor-width] bg-white dark:bg-gray-900 shadow-lg rounded-md ring ring-gray-200 dark:ring-gray-800 overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]",
       viewport: "divide-y divide-gray-200 dark:divide-gray-800 scroll-py-1",
@@ -2313,7 +2346,7 @@ const textarea = (options) => {
 
 const toast = (options) => ({
   slots: {
-    root: "relative overflow-hidden bg-white dark:bg-gray-900 shadow-lg rounded-lg ring ring-gray-200 dark:ring-gray-800 p-4 flex gap-2.5",
+    root: "relative group overflow-hidden bg-white dark:bg-gray-900 shadow-lg rounded-lg ring ring-gray-200 dark:ring-gray-800 p-4 flex gap-2.5 focus:outline-none",
     wrapper: "w-0 flex-1 flex flex-col gap-1",
     title: "text-sm font-medium text-gray-900 dark:text-white",
     description: "text-sm text-gray-500 dark:text-gray-400",
@@ -2327,10 +2360,12 @@ const toast = (options) => ({
   variants: {
     color: {
       ...Object.fromEntries((options.theme.colors || []).map((color) => [color, {
+        root: `focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-${color}-500 dark:focus-visible:ring-${color}-400`,
         icon: `text-${color}-500 dark:text-${color}-400`,
         progress: `bg-${color}-500 dark:bg-${color}-400`
       }])),
       gray: {
+        root: "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-gray-900 dark:focus-visible:ring-white",
         icon: "text-gray-900 dark:text-white",
         progress: "bg-gray-900 dark:bg-white"
       }
@@ -2353,7 +2388,7 @@ const toast = (options) => ({
 
 const toaster = {
   slots: {
-    viewport: "fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-[--height]",
+    viewport: "fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-[--height] focus:outline-none",
     base: "absolute inset-x-0 z-[--index] transform-[--transform] data-[expanded=false]:data-[front=false]:h-[--front-height] data-[expanded=false]:data-[front=false]:*:invisible data-[state=closed]:animate-[toast-closed_200ms_ease-in-out] data-[state=closed]:data-[expanded=false]:data-[front=false]:animate-[toast-collapsed-closed_200ms_ease-in-out] data-[swipe=move]:transition-none transition-[transform,translate,height] duration-200 ease-out"
   },
   variants: {
@@ -2480,14 +2515,6 @@ function addTemplates(options, nuxt) {
             return `${before}${replaced}${after}`;
           });
         }
-        if (process.env.DEV) {
-          return [
-            `import template from ${JSON.stringify(fileURLToPath(new URL(`./theme/${kebabCase(component)}`, import.meta.url)))}`,
-            `const result = typeof template === 'function' ? template(${JSON.stringify(options)}) : template`,
-            `const json = ${json}`,
-            `export default result as typeof json`
-          ].join("\n");
-        }
         return `export default ${json}`;
       }
     });
@@ -2502,13 +2529,13 @@ function addTemplates(options, nuxt) {
     getContents: () => `import * as ui from '#build/ui'
 import type { DeepPartial } from '#ui/types/utils'
 
-const colors = ${JSON.stringify(options.colors)} as const;
+const colors = ${JSON.stringify(options.theme?.colors || [])} as const;
 const icons = ${JSON.stringify(nuxt.options.appConfig.ui.icons)};
 
 type AppConfigUI = {
   colors?: {
-    primary?: Exclude<typeof colors[number], 'error'>
-    error?: Exclude<typeof colors[number], 'primary'>
+    primary?: Exclude<typeof colors[number], 'error' | 'primary'>
+    error?: Exclude<typeof colors[number], 'primary' | 'error'>
     gray?: 'slate' | 'cool' | 'zinc' | 'neutral' | 'stone'
   }
   icons?: Partial<typeof icons>
@@ -2566,7 +2593,7 @@ const module = defineNuxtModule({
       colors: {
         primary: "green",
         error: "red",
-        gray: "cool"
+        gray: "slate"
       },
       icons
     });

package/dist/runtime/components/Accordion.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/block-tag-newline -->
 <script lang="ts">
 import { tv } from 'tailwind-variants'
 import type { AccordionRootProps, AccordionRootEmits, AccordionItemProps } from 'radix-vue'
@@ -47,6 +48,7 @@ export type AccordionSlots<T extends { slot?: string }> = {
   content: SlotProps<T>
   body: SlotProps<T>
 } & DynamicSlots<T, SlotProps<T>>
+
 </script>
 
 <script setup lang="ts" generic="T extends AccordionItem">

package/dist/runtime/components/Alert.vue

@@ -46,7 +46,7 @@ export interface AlertProps {
 }
 
 export interface AlertEmits {
-  (e: 'close'): void
+  (e: 'update:open', value: boolean): void
 }
 
 export interface AlertSlots {
@@ -122,7 +122,7 @@ const ui = computed(() => alert({
           aria-label="Close"
           v-bind="typeof close === 'object' ? close : undefined"
           :class="ui.close({ class: props.ui?.close })"
-          @click="emits('close')"
+          @click="emits('update:open', false)"
         />
       </slot>
     </div>

package/dist/runtime/components/Breadcrumb.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/block-tag-newline -->
 <script lang="ts">
 import { tv } from 'tailwind-variants'
 import type { AppConfig } from '@nuxt/schema'
@@ -42,6 +43,7 @@ export type BreadcrumbSlots<T extends { slot?: string }> = {
   'item-trailing': SlotProps<T>
   'separator'(props?: {}): any
 } & DynamicSlots<T, SlotProps<T>>
+
 </script>
 
 <script setup lang="ts" generic="T extends BreadcrumbItem">

package/dist/runtime/components/CommandPalette.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/block-tag-newline -->
 <script lang="ts">
 import { tv } from 'tailwind-variants'
 import type { ComboboxRootProps, ComboboxRootEmits, ComboboxItemProps } from 'radix-vue'
@@ -65,7 +66,7 @@ export interface CommandPaletteProps<G, T> extends Pick<ComboboxRootProps, 'mult
    */
   placeholder?: InputProps['placeholder']
   /**
-   * Display a close button in the input (useful when inside a `UModal`).
+   * Display a close button in the input (useful when inside a Modal for example).
    * `{ size: 'md', color: 'gray', variant: 'ghost' }`{lang="ts-type"}
    * @defaultValue false
    */
@@ -78,7 +79,15 @@ export interface CommandPaletteProps<G, T> extends Pick<ComboboxRootProps, 'mult
   groups?: G[]
   /**
    * Options for [useFuse](https://vueuse.org/integrations/useFuse).
-   * @defaultValue { ignoreLocation: true, threshold: 0.1, keys: ['label', 'suffix'], resultLimit: 12, matchAllWhenSearchEmpty: true }
+   * @defaultValue {
+      fuseOptions: {
+        ignoreLocation: true,
+        threshold: 0.1,
+        keys: ['label', 'suffix']
+      },
+      resultLimit: 12,
+      matchAllWhenSearchEmpty: true
+    }
    */
   fuse?: UseFuseOptions<T>
   class?: any
@@ -97,6 +106,7 @@ export type CommandPaletteSlots<G extends { slot?: string }, T extends { slot?:
   'item-label': SlotProps<T>
   'item-trailing': SlotProps<T>
 } & DynamicSlots<G, SlotProps<T>> & DynamicSlots<T, SlotProps<T>>
+
 </script>
 
 <script setup lang="ts" generic="G extends CommandPaletteGroup<T>, T extends CommandPaletteItem">

package/dist/runtime/components/ContextMenu.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/block-tag-newline -->
 <script lang="ts">
 import { tv, type VariantProps } from 'tailwind-variants'
 import type { ContextMenuRootProps, ContextMenuRootEmits, ContextMenuContentProps, ContextMenuTriggerProps, ContextMenuItemProps } from 'radix-vue'
@@ -56,6 +57,7 @@ export type ContextMenuSlots<T extends { slot?: string }> = {
   'item-label': SlotProps<T>
   'item-trailing': SlotProps<T>
 } & DynamicSlots<T, SlotProps<T>>
+
 </script>
 
 <script setup lang="ts" generic="T extends ContextMenuItem">

package/dist/runtime/components/Drawer.vue

@@ -10,7 +10,7 @@ const appConfig = _appConfig as AppConfig & { ui: { drawer: Partial<typeof theme
 
 const drawer = tv({ extend: tv(theme), ...(appConfig.ui?.drawer || {}) })
 
-export interface DrawerProps extends Pick<DrawerRootProps, 'activeSnapPoint' | 'closeThreshold' | 'defaultOpen' | 'direction' | 'dismissible' | 'fadeFromIndex' | 'fixed' | 'modal' | 'nested' | 'open' | 'scrollLockTimeout' | 'shouldScaleBackground' | 'snapPoints'> {
+export interface DrawerProps extends Pick<DrawerRootProps, 'activeSnapPoint' | 'closeThreshold' | 'defaultOpen' | 'direction' | 'dismissible' | 'fadeFromIndex' | 'fixed' | 'modal' | 'nested' | 'direction' | 'open' | 'scrollLockTimeout' | 'shouldScaleBackground' | 'snapPoints'> {
   /**
    * The element or component this component should render as.
    * @defaultValue 'div'
@@ -25,6 +25,11 @@ export interface DrawerProps extends Pick<DrawerRootProps, 'activeSnapPoint' | '
    * @defaultValue true
    */
   overlay?: boolean
+  /**
+   * Render a handle on the drawer.
+   * @defaultValue true
+   */
+  handle?: boolean
   /**
    * Render the drawer in a portal.
    * @defaultValue true
@@ -49,23 +54,26 @@ export interface DrawerSlots {
 </script>
 
 <script setup lang="ts">
-import { toRef } from 'vue'
+import { computed, toRef } from 'vue'
 import { useForwardPropsEmits } from 'radix-vue'
 import { DrawerRoot, DrawerTrigger, DrawerPortal, DrawerOverlay, DrawerContent, DrawerTitle, DrawerDescription } from 'vaul-vue'
 import { reactivePick } from '@vueuse/core'
 
 const props = withDefaults(defineProps<DrawerProps>(), {
+  direction: 'bottom',
   portal: true,
-  overlay: true
+  overlay: true,
+  handle: true
 })
 const emits = defineEmits<DrawerEmits>()
 const slots = defineSlots<DrawerSlots>()
 
-const rootProps = useForwardPropsEmits(reactivePick(props, 'activeSnapPoint', 'closeThreshold', 'defaultOpen', 'dismissible', 'fadeFromIndex', 'fixed', 'modal', 'nested', 'open', 'scrollLockTimeout', 'shouldScaleBackground', 'snapPoints'), emits)
+const rootProps = useForwardPropsEmits(reactivePick(props, 'activeSnapPoint', 'closeThreshold', 'defaultOpen', 'dismissible', 'fadeFromIndex', 'fixed', 'modal', 'nested', 'direction', 'open', 'scrollLockTimeout', 'shouldScaleBackground', 'snapPoints'), emits)
 const contentProps = toRef(() => props.content)
 
-// eslint-disable-next-line vue/no-dupe-keys
-const ui = drawer()
+const ui = computed(() => drawer({
+  direction: props.direction
+}))
 </script>
 
 <template>
@@ -79,7 +87,7 @@ const ui = drawer()
 
       <DrawerContent :class="ui.content({ class: [props.class, props.ui?.content] })" v-bind="contentProps">
         <slot name="handle">
-          <div :class="ui.handle({ class: props.ui?.handle })" />
+          <div v-if="handle" :class="ui.handle({ class: props.ui?.handle })" />
         </slot>
 
         <slot name="content">

package/dist/runtime/components/DropdownMenu.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/block-tag-newline -->
 <script lang="ts">
 import { tv, type VariantProps } from 'tailwind-variants'
 import type { DropdownMenuRootProps, DropdownMenuRootEmits, DropdownMenuContentProps, DropdownMenuArrowProps, DropdownMenuTriggerProps, DropdownMenuItemProps } from 'radix-vue'
@@ -64,6 +65,7 @@ export type DropdownMenuSlots<T extends { slot?: string }> = {
   'item-label': SlotProps<T>
   'item-trailing': SlotProps<T>
 } & DynamicSlots<T, SlotProps<T>>
+
 </script>
 
 <script setup lang="ts" generic="T extends DropdownMenuItem">

package/dist/runtime/components/InputMenu.vue

@@ -23,6 +23,7 @@ export interface InputMenuItem extends Pick<ComboboxItemProps, 'disabled'> {
    * @defaultValue 'item'
    */
   type?: 'label' | 'separator' | 'item'
+  select?(e?: Event): void
 }
 
 type InputMenuVariants = VariantProps<typeof inputMenu>
@@ -100,7 +101,7 @@ export type InputMenuEmits<T> = ComboboxRootEmits<T> & {
 
 type SlotProps<T> = (props: { item: T, index: number }) => any
 
-export type InputMenuSlots<T> = {
+export interface InputMenuSlots<T> {
   'leading'(props: { modelValue: T, open: boolean, ui: any }): any
   'trailing'(props: { modelValue: T, open: boolean, ui: any }): any
   'empty'(props: { searchTerm?: string }): any
@@ -332,6 +333,7 @@ defineExpose({
                 :class="ui.item({ class: props.ui?.item })"
                 :disabled="item.disabled"
                 :value="valueKey && typeof item === 'object' ? (item[valueKey as keyof InputMenuItem]) as AcceptableValue : item"
+                @select="item.select"
               >
                 <slot name="item" :item="(item as T)" :index="index">
                   <slot name="item-leading" :item="(item as T)" :index="index">

package/dist/runtime/components/NavigationMenu.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/block-tag-newline -->
 <script lang="ts">
 import { tv, type VariantProps } from 'tailwind-variants'
 import type { NavigationMenuRootProps, NavigationMenuRootEmits, NavigationMenuItemProps, NavigationMenuContentProps } from 'radix-vue'
@@ -74,6 +75,7 @@ export type NavigationMenuSlots<T extends { slot?: string }> = {
   'item-label': SlotProps<T>
   'item-trailing': SlotProps<T>
 } & DynamicSlots<T, SlotProps<T>>
+
 </script>
 
 <script setup lang="ts" generic="T extends NavigationMenuItem">

package/dist/runtime/components/Pagination.vue

@@ -44,17 +44,17 @@ export interface PaginationProps extends Pick<PaginationRootProps, 'defaultPage'
   ellipsisIcon?: string
   /**
    * The color of the pagination controls.
-   * @defaultValue 'white'
+   * @defaultValue 'gray'
    */
   color?: ButtonProps['color']
   /**
    * The variant of the pagination controls.
-   * @defaultValue 'solid'
+   * @defaultValue 'outline'
    */
   variant?: ButtonProps['variant']
   /**
    * The color of the active pagination control.
-   * @defaultValue 'black'
+   * @defaultValue 'primary'
    */
   activeColor?: ButtonProps['color']
   /**
@@ -105,11 +105,16 @@ import { reactivePick } from '@vueuse/core'
 import { useAppConfig } from '#imports'
 
 const props = withDefaults(defineProps<PaginationProps>(), {
+  size: 'md',
   color: 'gray',
-  activeColor: 'primary',
   variant: 'outline',
+  activeColor: 'primary',
   activeVariant: 'solid',
-  showControls: true
+  showControls: true,
+  showEdges: false,
+  itemsPerPage: 10,
+  siblingCount: 2,
+  total: 0
 })
 const emits = defineEmits<PaginationEmits>()
 const slots = defineSlots<PaginationSlots>()

package/dist/runtime/components/Progress.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/block-tag-newline -->
 <script lang="ts">
 import { tv, type VariantProps } from 'tailwind-variants'
 import type { ProgressRootProps, ProgressRootEmits } from 'radix-vue'
@@ -42,6 +43,7 @@ export type ProgressSlots = {
 } & {
   [key: string]: (props: { step: number }) => any
 }
+
 </script>
 
 <script setup lang="ts">

package/dist/runtime/components/SelectMenu.vue

@@ -22,6 +22,7 @@ export interface SelectMenuItem extends Pick<ComboboxItemProps, 'disabled'> {
    * @defaultValue 'item'
    */
   type?: 'label' | 'separator' | 'item'
+  select?(e?: Event): void
 }
 
 type SelectMenuVariants = VariantProps<typeof selectMenu>
@@ -32,11 +33,10 @@ export interface SelectMenuProps<T> extends Pick<ComboboxRootProps<T>, 'modelVal
   placeholder?: string
   /**
    * Wether to display the search input or not.
-   * @defaultValue true
+   * Can be an object to pass additional props to the input.
+   * @defaultValue { placeholder: 'Search...' }
    */
-  search?: boolean
-  /** The placeholder text when the search input is empty. */
-  searchPlaceholder?: string
+  searchInput?: boolean | { placeholder?: string }
   color?: SelectMenuVariants['color']
   variant?: SelectMenuVariants['variant']
   size?: SelectMenuVariants['size']
@@ -92,7 +92,7 @@ export type SelectMenuEmits<T> = ComboboxRootEmits<T> & {
 
 type SlotProps<T> = (props: { item: T, index: number }) => any
 
-export type SelectMenuSlots<T> = {
+export interface SelectMenuSlots<T> {
   'leading'(props: { modelValue: T, open: boolean, ui: any }): any
   'default'(props: { modelValue: T, open: boolean }): any
   'trailing'(props: { modelValue: T, open: boolean, ui: any }): any
@@ -122,7 +122,7 @@ const props = withDefaults(defineProps<SelectMenuProps<T>>(), {
   search: true,
   portal: true,
   autofocusDelay: 0,
-  searchPlaceholder: 'Search...',
+  searchInput: () => ({ placeholder: 'Search...' }),
   filter: () => ['label']
 })
 const emits = defineEmits<SelectMenuEmits<T>>()
@@ -245,7 +245,13 @@ function onUpdateOpen(value: boolean) {
 
     <ComboboxPortal :disabled="!portal">
       <ComboboxContent :class="ui.content({ class: props.ui?.content })" v-bind="contentProps">
-        <ComboboxInput v-if="search" :placeholder="searchPlaceholder" :class="ui.input({ class: props.ui?.input })" autofocus autocomplete="off" />
+        <ComboboxInput
+          v-if="!!searchInput"
+          autofocus
+          autocomplete="off"
+          v-bind="typeof searchInput === 'object' ? searchInput : {}"
+          :class="ui.input({ class: props.ui?.input })"
+        />
 
         <ComboboxEmpty :class="ui.empty({ class: props.ui?.empty })">
           <slot name="empty" :search-term="searchTerm">
@@ -267,6 +273,7 @@ function onUpdateOpen(value: boolean) {
                 :class="ui.item({ class: props.ui?.item })"
                 :disabled="item.disabled"
                 :value="valueKey && typeof item === 'object' ? (item[valueKey as keyof SelectMenuItem]) as AcceptableValue : item"
+                @select="item.select"
               >
                 <slot name="item" :item="(item as T)" :index="index">
                   <slot name="item-leading" :item="(item as T)" :index="index">

package/dist/runtime/components/Tabs.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/block-tag-newline -->
 <script lang="ts">
 import { tv, type VariantProps } from 'tailwind-variants'
 import type { TabsRootProps, TabsRootEmits, TabsContentProps, TabsTriggerProps } from 'radix-vue'
@@ -57,6 +58,7 @@ export type TabsSlots<T extends { slot?: string }> = {
   trailing: SlotProps<T>
   content: SlotProps<T>
 } & DynamicSlots<T, SlotProps<T>>
+
 </script>
 
 <script setup lang="ts" generic="T extends TabsItem">

package/dist/runtime/composables/useAvatarGroup.d.ts

@@ -1,5 +1,5 @@
 import { type ComputedRef, type InjectionKey } from 'vue';
-import type { AvatarGroupProps } from '../types/index.js';
+import type { AvatarGroupProps } from '../types';
 export declare const avatarGroupInjectionKey: InjectionKey<ComputedRef<{
     size: AvatarGroupProps['size'];
 }>>;

package/dist/runtime/composables/useButtonGroup.d.ts

@@ -1,6 +1,6 @@
 import type { InjectionKey, ComputedRef } from 'vue';
-import type { ButtonGroupProps } from '../components/ButtonGroup.vue.js';
-import type { GetObjectField } from '../types/utils.js';
+import type { ButtonGroupProps } from '../components/ButtonGroup.vue';
+import type { GetObjectField } from '../types/utils';
 export declare const buttonGroupInjectionKey: InjectionKey<ComputedRef<{
     size: ButtonGroupProps['size'];
     orientation: ButtonGroupProps['orientation'];

package/dist/runtime/composables/useFormField.d.ts

@@ -1,8 +1,8 @@
 import { type InjectionKey, type Ref, type ComputedRef } from 'vue';
 import { type UseEventBusReturn } from '@vueuse/core';
-import type { FormFieldProps } from '../types/index.js';
-import type { FormEvent, FormFieldInjectedOptions, FormInjectedOptions } from '../types/form.js';
-import type { GetObjectField } from '../types/utils.js';
+import type { FormFieldProps } from '../types';
+import type { FormEvent, FormFieldInjectedOptions, FormInjectedOptions } from '../types/form';
+import type { GetObjectField } from '../types/utils';
 type Props<T> = {
     id?: string;
     name?: string;

package/dist/runtime/composables/useModal.d.ts

@@ -1,6 +1,6 @@
 import type { ShallowRef, Component, InjectionKey } from 'vue';
-import type { ModalProps } from '../types/index.js';
-import type { ComponentProps } from '../types/component.js';
+import type { ModalProps } from '../types';
+import type { ComponentProps } from '../types/component';
 export interface ModalState {
     component: Component | string;
     props: ModalProps;

package/dist/runtime/composables/useSlideover.d.ts

@@ -1,6 +1,6 @@
 import type { ShallowRef, Component, InjectionKey } from 'vue';
-import type { SlideoverProps } from '../types/index.js';
-import type { ComponentProps } from '../types/component.js';
+import type { SlideoverProps } from '../types';
+import type { ComponentProps } from '../types/component';
 export interface SlideoverState {
     component: Component | string;
     props: SlideoverProps;

package/dist/runtime/composables/useToast.d.ts

@@ -1,4 +1,4 @@
-import type { ToastProps } from '../types/index.js';
+import type { ToastProps } from '../types';
 export interface Toast extends Omit<ToastProps, 'defaultOpen'> {
     id: string | number;
     click?: (toast: Toast) => void;

package/dist/runtime/types/form.d.ts

@@ -3,7 +3,7 @@ import type { ZodSchema } from 'zod';
 import type { Schema as JoiSchema } from 'joi';
 import type { ObjectSchema as YupObjectSchema } from 'yup';
 import type { GenericSchema as ValibotSchema, GenericSchemaAsync as ValibotSchemaAsync, SafeParser as ValibotSafeParser, SafeParserAsync as ValibotSafeParserAsync } from 'valibot';
-import type { GetObjectField } from './utils.js';
+import type { GetObjectField } from './utils';
 export interface Form<T> {
     validate(opts?: {
         name: string | string[];

package/dist/runtime/types/index.d.ts

@@ -1,42 +1,42 @@
-export * from '../components/Accordion.vue.js';
-export * from '../components/Alert.vue.js';
-export * from '../components/App.vue.js';
-export * from '../components/Avatar.vue.js';
-export * from '../components/AvatarGroup.vue.js';
-export * from '../components/Badge.vue.js';
-export * from '../components/Breadcrumb.vue.js';
-export * from '../components/Button.vue.js';
-export * from '../components/Card.vue.js';
-export * from '../components/Checkbox.vue.js';
-export * from '../components/Chip.vue.js';
-export * from '../components/Collapsible.vue.js';
-export * from '../components/CommandPalette.vue.js';
-export * from '../components/Container.vue.js';
-export * from '../components/ContextMenu.vue.js';
-export * from '../components/Drawer.vue.js';
-export * from '../components/DropdownMenu.vue.js';
-export * from '../components/Form.vue.js';
-export * from '../components/FormField.vue.js';
-export * from '../components/Input.vue.js';
-export * from '../components/InputMenu.vue.js';
-export * from '../components/Kbd.vue.js';
-export * from '../components/Link.vue.js';
-export * from '../components/Modal.vue.js';
-export * from '../components/NavigationMenu.vue.js';
-export * from '../components/Pagination.vue.js';
-export * from '../components/Popover.vue.js';
-export * from '../components/Progress.vue.js';
-export * from '../components/RadioGroup.vue.js';
-export * from '../components/Select.vue.js';
-export * from '../components/SelectMenu.vue.js';
-export * from '../components/Separator.vue.js';
-export * from '../components/Skeleton.vue.js';
-export * from '../components/Slideover.vue.js';
-export * from '../components/Slider.vue.js';
-export * from '../components/Switch.vue.js';
-export * from '../components/Tabs.vue.js';
-export * from '../components/Textarea.vue.js';
-export * from '../components/Toast.vue.js';
-export * from '../components/Toaster.vue.js';
-export * from '../components/Tooltip.vue.js';
-export * from './form.js';
+export * from '../components/Accordion.vue';
+export * from '../components/Alert.vue';
+export * from '../components/App.vue';
+export * from '../components/Avatar.vue';
+export * from '../components/AvatarGroup.vue';
+export * from '../components/Badge.vue';
+export * from '../components/Breadcrumb.vue';
+export * from '../components/Button.vue';
+export * from '../components/Card.vue';
+export * from '../components/Checkbox.vue';
+export * from '../components/Chip.vue';
+export * from '../components/Collapsible.vue';
+export * from '../components/CommandPalette.vue';
+export * from '../components/Container.vue';
+export * from '../components/ContextMenu.vue';
+export * from '../components/Drawer.vue';
+export * from '../components/DropdownMenu.vue';
+export * from '../components/Form.vue';
+export * from '../components/FormField.vue';
+export * from '../components/Input.vue';
+export * from '../components/InputMenu.vue';
+export * from '../components/Kbd.vue';
+export * from '../components/Link.vue';
+export * from '../components/Modal.vue';
+export * from '../components/NavigationMenu.vue';
+export * from '../components/Pagination.vue';
+export * from '../components/Popover.vue';
+export * from '../components/Progress.vue';
+export * from '../components/RadioGroup.vue';
+export * from '../components/Select.vue';
+export * from '../components/SelectMenu.vue';
+export * from '../components/Separator.vue';
+export * from '../components/Skeleton.vue';
+export * from '../components/Slideover.vue';
+export * from '../components/Slider.vue';
+export * from '../components/Switch.vue';
+export * from '../components/Tabs.vue';
+export * from '../components/Textarea.vue';
+export * from '../components/Toast.vue';
+export * from '../components/Toaster.vue';
+export * from '../components/Tooltip.vue';
+export * from './form';

package/dist/runtime/utils/form.d.ts

@@ -2,7 +2,7 @@ import type { ZodSchema } from 'zod';
 import type { ValidationError as JoiError, Schema as JoiSchema } from 'joi';
 import type { ObjectSchema as YupObjectSchema, ValidationError as YupError } from 'yup';
 import type { GenericSchema as ValibotSchema, GenericSchemaAsync as ValibotSchemaAsync, SafeParser as ValibotSafeParser, SafeParserAsync as ValibotSafeParserAsync } from 'valibot';
-import type { FormError } from '../types/form.js';
+import type { FormError } from '../types/form';
 export declare function isYupSchema(schema: any): schema is YupObjectSchema<any>;
 export declare function isYupError(error: any): error is YupError;
 export declare function getYupErrors(state: any, schema: YupObjectSchema<any>): Promise<FormError[]>;

package/dist/runtime/utils/link.d.ts

@@ -1,8 +1,10 @@
-import type { LinkProps } from '../types/index.js';
+import type { LinkProps } from '../types';
 export declare function pickLinkProps(link: LinkProps & {
     ariaLabel?: string;
+    title?: string;
 }): {
     type: any;
+    title: any;
     active: any;
     activeClass: any;
     ariaCurrentValue: any;

package/dist/runtime/utils/link.js

@@ -1,4 +1,4 @@
 import { reactivePick } from "@vueuse/core";
 export function pickLinkProps(link) {
-  return reactivePick(link, "active", "activeClass", "ariaCurrentValue", "ariaLabel", "as", "disabled", "exact", "exactActiveClass", "exactHash", "exactQuery", "external", "href", "inactiveClass", "noPrefetch", "noRel", "prefetch", "prefetchedClass", "rel", "replace", "target", "to", "type");
+  return reactivePick(link, "active", "activeClass", "ariaCurrentValue", "ariaLabel", "as", "disabled", "exact", "exactActiveClass", "exactHash", "exactQuery", "external", "href", "inactiveClass", "noPrefetch", "noRel", "prefetch", "prefetchedClass", "rel", "replace", "target", "to", "type", "title");
 }

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@nuxt/ui",
   "description": "A UI Library for Modern Web Apps, powered by Vue & Tailwind CSS.",
-  "version": "3.0.0-alpha.3",
-  "packageManager": "pnpm@9.10.0",
+  "version": "3.0.0-alpha.4",
+  "packageManager": "pnpm@9.11.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/nuxt/ui.git"
@@ -45,8 +45,8 @@
     "release": "release-it --preRelease=alpha --npm.tag=next"
   },
   "dependencies": {
-    "@nuxt/fonts": "^0.8.0",
-    "@nuxt/icon": "^1.5.1",
+    "@nuxt/fonts": "^0.9.2",
+    "@nuxt/icon": "^1.5.2",
     "@nuxt/kit": "^3.13.2",
     "@nuxt/schema": "^3.13.2",
     "@nuxtjs/color-mode": "^3.5.1",
@@ -57,7 +57,7 @@
     "defu": "^6.1.4",
     "fuse.js": "^7.0.0",
     "ohash": "^1.1.4",
-    "radix-vue": "^1.9.5",
+    "radix-vue": "^1.9.6",
     "scule": "^1.3.0",
     "tailwind-variants": "^0.2.1",
     "tailwindcss": "4.0.0-alpha.24",
@@ -69,12 +69,12 @@
     "@nuxt/test-utils": "^3.14.2",
     "@release-it/conventional-changelog": "^8.0.2",
     "@vue/test-utils": "^2.4.6",
-    "eslint": "^9.10.0",
+    "eslint": "^9.11.1",
     "happy-dom": "^15.7.4",
     "joi": "^17.13.3",
     "nuxt": "^3.13.2",
     "release-it": "^17.6.0",
-    "valibot": "^0.42.0",
+    "valibot": "^0.42.1",
     "vitest": "^2.1.1",
     "vitest-environment-nuxt": "^1.0.1",
     "vue-tsc": "^2.1.6",