@nuxt/ui 3.0.0 → 3.0.1

package/.nuxt/ui/calendar.ts

@@ -29,7 +29,7 @@ export default {
     "headCell": "rounded-[calc(var(--ui-radius)*1.5)]",
     "cell": "relative text-center",
     "cellTrigger": [
-      "m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold",
+      "m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted)",
       "transition"
     ]
   },

package/.nuxt/ui/drawer.ts

@@ -9,7 +9,10 @@ export default {
   "slots": {
     "overlay": "fixed inset-0 bg-(--ui-bg-elevated)/75",
     "content": "fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none",
-    "handle": "shrink-0 rounded-full bg-(--ui-bg-accented)",
+    "handle": [
+      "shrink-0 !bg-(--ui-bg-accented)",
+      "transition-opacity"
+    ],
     "container": "w-full flex flex-col gap-4 p-4 overflow-y-auto",
     "header": "",
     "title": "text-(--ui-text-highlighted) font-semibold",
@@ -25,7 +28,7 @@ export default {
       },
       "right": {
         "content": "flex-row",
-        "handle": "ml-4"
+        "handle": "!ml-4"
       },
       "bottom": {
         "content": "mt-24 flex-col",
@@ -33,7 +36,7 @@ export default {
       },
       "left": {
         "content": "flex-row-reverse",
-        "handle": "mr-4"
+        "handle": "!mr-4"
       }
     },
     "inset": {
@@ -50,7 +53,7 @@ export default {
       ],
       "class": {
         "content": "h-auto max-h-[96%]",
-        "handle": "w-12 h-1.5 mx-auto"
+        "handle": "!w-12 !h-1.5 mx-auto"
       }
     },
     {
@@ -60,7 +63,7 @@ export default {
       ],
       "class": {
         "content": "w-auto max-w-[calc(100%-2rem)]",
-        "handle": "h-12 w-1.5 mt-auto mb-auto"
+        "handle": "!h-12 !w-1.5 mt-auto mb-auto"
       }
     },
     {

package/.nuxt/ui.css

@@ -1,6 +1,6 @@
 @source "./ui";
 
-@theme default static {
+@theme default {
   --color-old-neutral-50: oklch(0.985 0 0);
   --color-old-neutral-100: oklch(0.97 0 0);
   --color-old-neutral-200: oklch(0.922 0 0);

package/README.md

@@ -11,31 +11,31 @@
 [![License][license-src]][license-href]
 [![Nuxt][nuxt-src]][nuxt-href]
 
-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 [Reka UI](https://reka-ui.com/), [Tailwind CSS v4](https://tailwindcss.com/), 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.
+Nuxt UI harnesses the combined strengths of [Reka UI](https://reka-ui.com/), [Tailwind CSS](https://tailwindcss.com/), 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.
 
 > [!NOTE]
 > You are on the `v3` development branch, check out the [v2 branch](https://github.com/nuxt/ui/tree/v2) for Nuxt UI v2.
 
 ## Documentation
 
-Visit https://ui3.nuxt.dev to explore the documentation.
+Visit https://ui.nuxt.com to explore the documentation.
 
 ## Installation
 
 ```bash [pnpm]
-pnpm add @nuxt/ui@next
+pnpm add @nuxt/ui
 ```
 
 ```bash [yarn]
-yarn add @nuxt/ui@next
+yarn add @nuxt/ui
 ```
 
 ```bash [npm]
-npm install @nuxt/ui@next
+npm install @nuxt/ui
 ```
 
 ```bash [bun]
-bun add @nuxt/ui@next
+bun add @nuxt/ui
 ```
 
 ### Nuxt
@@ -51,11 +51,11 @@ export default defineNuxtConfig({
 2. Import Tailwind CSS and Nuxt UI in your CSS:
 
 ```css [assets/css/main.css]
-@import "tailwindcss" theme(static);
+@import "tailwindcss";
 @import "@nuxt/ui";
 ```
 
-Learn more in the [installation guide](https://ui3.nuxt.dev/getting-started/installation/nuxt).
+Learn more in the [installation guide](https://ui.nuxt.com/getting-started/installation/nuxt).
 
 ### Vue
 
@@ -98,11 +98,11 @@ app.mount('#app')
 3. Import Tailwind CSS and Nuxt UI in your CSS:
 
 ```css [assets/main.css]
-@import "tailwindcss" theme(static);
+@import "tailwindcss";
 @import "@nuxt/ui";
 ```
 
-Learn more in the [installation guide](https://ui3.nuxt.dev/getting-started/installation/vue).
+Learn more in the [installation guide](https://ui.nuxt.com/getting-started/installation/vue).
 
 ## Credits
 
@@ -119,7 +119,7 @@ Learn more in the [installation guide](https://ui3.nuxt.dev/getting-started/inst
 Licensed under the [MIT license](https://github.com/nuxt/ui/blob/v3/LICENSE.md).
 
 <!-- Badges -->
-[npm-version-src]: https://img.shields.io/npm/v/@nuxt/ui/next.svg?style=flat&colorA=18181B&colorB=28CF8D
+[npm-version-src]: https://img.shields.io/npm/v/@nuxt/ui/latest.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/package.json

@@ -6,7 +6,7 @@
   },
   "dependencies": {
     "citty": "^0.1.6",
-    "consola": "^3.4.0",
+    "consola": "^3.4.2",
     "pathe": "^2.0.3",
     "scule": "^1.3.0"
   }

package/dist/module.cjs

@@ -2,7 +2,7 @@
 
 const defu = require('defu');
 const kit = require('@nuxt/kit');
-const templates = require('./shared/ui.COBs1u5H.cjs');
+const templates = require('./shared/ui.C6uTSFTI.cjs');
 require('../dist/runtime/utils/index.js');
 require('node:url');
 require('scule');
@@ -16,7 +16,7 @@ const module$1 = kit.defineNuxtModule({
     compatibility: {
       nuxt: ">=3.16.0"
     },
-    docs: "https://ui3.nuxt.dev/getting-started/installation/nuxt"
+    docs: "https://ui.nuxt.com/getting-started/installation/nuxt"
   },
   defaults: templates.defaultOptions,
   async setup(options, nuxt) {

package/dist/module.d.cts

@@ -5,36 +5,36 @@ interface ModuleOptions {
     /**
      * Prefix for components
      * @defaultValue `U`
-     * @link https://ui3.nuxt.dev/getting-started/installation/nuxt#prefix
+     * @link https://ui.nuxt.com/getting-started/installation/nuxt#prefix
      */
     prefix?: string;
     /**
      * Enable or disable `@nuxt/fonts` module
      * @defaultValue `true`
-     * @link https://ui3.nuxt.dev/getting-started/installation/nuxt#fonts
+     * @link https://ui.nuxt.com/getting-started/installation/nuxt#fonts
      */
     fonts?: boolean;
     /**
      * Enable or disable `@nuxtjs/color-mode` module
      * @defaultValue `true`
-     * @link https://ui3.nuxt.dev/getting-started/installation/nuxt#colormode
+     * @link https://ui.nuxt.com/getting-started/installation/nuxt#colormode
      */
     colorMode?: boolean;
     /**
      * Customize how the theme is generated
-     * @link https://ui3.nuxt.dev/getting-started/theme
+     * @link https://ui.nuxt.com/getting-started/theme
      */
     theme?: {
         /**
          * Define the color aliases available for components
          * @defaultValue `['primary', 'secondary', 'success', 'info', 'warning', 'error']`
-         * @link https://ui3.nuxt.dev/getting-started/installation/nuxt#themecolors
+         * @link https://ui.nuxt.com/getting-started/installation/nuxt#themecolors
          */
         colors?: string[];
         /**
          * Enable or disable transitions on components
          * @defaultValue `true`
-         * @link https://ui3.nuxt.dev/getting-started/installation/nuxt#themetransitions
+         * @link https://ui.nuxt.com/getting-started/installation/nuxt#themetransitions
          */
         transitions?: boolean;
     };

package/dist/module.d.mts

@@ -5,36 +5,36 @@ interface ModuleOptions {
     /**
      * Prefix for components
      * @defaultValue `U`
-     * @link https://ui3.nuxt.dev/getting-started/installation/nuxt#prefix
+     * @link https://ui.nuxt.com/getting-started/installation/nuxt#prefix
      */
     prefix?: string;
     /**
      * Enable or disable `@nuxt/fonts` module
      * @defaultValue `true`
-     * @link https://ui3.nuxt.dev/getting-started/installation/nuxt#fonts
+     * @link https://ui.nuxt.com/getting-started/installation/nuxt#fonts
      */
     fonts?: boolean;
     /**
      * Enable or disable `@nuxtjs/color-mode` module
      * @defaultValue `true`
-     * @link https://ui3.nuxt.dev/getting-started/installation/nuxt#colormode
+     * @link https://ui.nuxt.com/getting-started/installation/nuxt#colormode
      */
     colorMode?: boolean;
     /**
      * Customize how the theme is generated
-     * @link https://ui3.nuxt.dev/getting-started/theme
+     * @link https://ui.nuxt.com/getting-started/theme
      */
     theme?: {
         /**
          * Define the color aliases available for components
          * @defaultValue `['primary', 'secondary', 'success', 'info', 'warning', 'error']`
-         * @link https://ui3.nuxt.dev/getting-started/installation/nuxt#themecolors
+         * @link https://ui.nuxt.com/getting-started/installation/nuxt#themecolors
          */
         colors?: string[];
         /**
          * Enable or disable transitions on components
          * @defaultValue `true`
-         * @link https://ui3.nuxt.dev/getting-started/installation/nuxt#themetransitions
+         * @link https://ui.nuxt.com/getting-started/installation/nuxt#themetransitions
          */
         transitions?: boolean;
     };

package/dist/module.d.ts

@@ -5,36 +5,36 @@ interface ModuleOptions {
     /**
      * Prefix for components
      * @defaultValue `U`
-     * @link https://ui3.nuxt.dev/getting-started/installation/nuxt#prefix
+     * @link https://ui.nuxt.com/getting-started/installation/nuxt#prefix
      */
     prefix?: string;
     /**
      * Enable or disable `@nuxt/fonts` module
      * @defaultValue `true`
-     * @link https://ui3.nuxt.dev/getting-started/installation/nuxt#fonts
+     * @link https://ui.nuxt.com/getting-started/installation/nuxt#fonts
      */
     fonts?: boolean;
     /**
      * Enable or disable `@nuxtjs/color-mode` module
      * @defaultValue `true`
-     * @link https://ui3.nuxt.dev/getting-started/installation/nuxt#colormode
+     * @link https://ui.nuxt.com/getting-started/installation/nuxt#colormode
      */
     colorMode?: boolean;
     /**
      * Customize how the theme is generated
-     * @link https://ui3.nuxt.dev/getting-started/theme
+     * @link https://ui.nuxt.com/getting-started/theme
      */
     theme?: {
         /**
          * Define the color aliases available for components
          * @defaultValue `['primary', 'secondary', 'success', 'info', 'warning', 'error']`
-         * @link https://ui3.nuxt.dev/getting-started/installation/nuxt#themecolors
+         * @link https://ui.nuxt.com/getting-started/installation/nuxt#themecolors
          */
         colors?: string[];
         /**
          * Enable or disable transitions on components
          * @defaultValue `true`
-         * @link https://ui3.nuxt.dev/getting-started/installation/nuxt#themetransitions
+         * @link https://ui.nuxt.com/getting-started/installation/nuxt#themetransitions
          */
         transitions?: boolean;
     };

package/dist/module.json

@@ -4,8 +4,8 @@
   "compatibility": {
     "nuxt": ">=3.16.0"
   },
-  "docs": "https://ui3.nuxt.dev/getting-started/installation/nuxt",
-  "version": "3.0.0",
+  "docs": "https://ui.nuxt.com/getting-started/installation/nuxt",
+  "version": "3.0.1",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "2.0.0"

package/dist/module.mjs

@@ -1,6 +1,6 @@
 import { defu } from 'defu';
 import { defineNuxtModule, createResolver, addVitePlugin, addPlugin, addComponentsDir, addImportsDir, hasNuxtModule, installModule } from '@nuxt/kit';
-import { d as defaultOptions, r as resolveColors, a as getDefaultUiConfig, b as addTemplates } from './shared/ui.yjbGE7Dx.mjs';
+import { d as defaultOptions, r as resolveColors, a as getDefaultUiConfig, b as addTemplates } from './shared/ui.BCaWD5Ek.mjs';
 import '../dist/runtime/utils/index.js';
 import 'node:url';
 import 'scule';
@@ -13,7 +13,7 @@ const module = defineNuxtModule({
     compatibility: {
       nuxt: ">=3.16.0"
     },
-    docs: "https://ui3.nuxt.dev/getting-started/installation/nuxt"
+    docs: "https://ui.nuxt.com/getting-started/installation/nuxt"
   },
   defaults: defaultOptions,
   async setup(options, nuxt) {

package/dist/runtime/components/Accordion.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/block-tag-newline -->
 <script lang="ts">
 import type { AccordionRootProps, AccordionRootEmits } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
@@ -60,6 +61,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/Breadcrumb.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/block-tag-newline -->
 <script lang="ts">
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
@@ -51,6 +52,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/ColorPicker.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/block-tag-newline -->
 <script lang="ts">
 import type { VariantProps } from 'tailwind-variants'
 import type { MaybeRefOrGetter } from '@vueuse/shared'
@@ -70,6 +71,7 @@ export type ColorPickerProps = {
   class?: any
   ui?: Partial<typeof colorPicker.slots>
 }
+
 </script>
 
 <script setup lang="ts">

package/dist/runtime/components/CommandPalette.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/block-tag-newline -->
 <script lang="ts">
 import type { ListboxRootProps, ListboxRootEmits } from 'reka-ui'
 import type { FuseResult } from 'fuse.js'
@@ -130,6 +131,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,12 +1,13 @@
+<!-- eslint-disable vue/block-tag-newline -->
 <script lang="ts">
 import type { VariantProps } from 'tailwind-variants'
-import type { ContextMenuRootProps, ContextMenuRootEmits, ContextMenuContentProps } from 'reka-ui'
+import type { ContextMenuRootProps, ContextMenuRootEmits, ContextMenuContentProps, ContextMenuContentEmits } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/context-menu'
 import { tv } from '../utils/tv'
 import type { AvatarProps, KbdProps, LinkProps } from '../types'
-import type { DynamicSlots, PartialString } from '../types/utils'
+import type { DynamicSlots, PartialString, EmitsToProps } from '../types/utils'
 
 const appConfigContextMenu = _appConfig as AppConfig & { ui: { contextMenu: Partial<typeof theme> } }
 
@@ -22,7 +23,7 @@ export interface ContextMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'custo
   icon?: string
   color?: ContextMenuVariants['color']
   avatar?: AvatarProps
-  content?: Omit<ContextMenuContentProps, 'as' | 'asChild' | 'forceMount'>
+  content?: Omit<ContextMenuContentProps, 'as' | 'asChild' | 'forceMount'> & Partial<EmitsToProps<ContextMenuContentEmits>>
   kbds?: KbdProps['value'][] | KbdProps[]
   /**
    * The item type.
@@ -66,7 +67,7 @@ export interface ContextMenuProps<T> extends Omit<ContextMenuRootProps, 'dir'> {
    */
   externalIcon?: boolean | string
   /** The content of the menu. */
-  content?: Omit<ContextMenuContentProps, 'as' | 'asChild' | 'forceMount'>
+  content?: Omit<ContextMenuContentProps, 'as' | 'asChild' | 'forceMount'> & Partial<EmitsToProps<ContextMenuContentEmits>>
   /**
    * Render the menu in a portal.
    * @defaultValue true
@@ -93,6 +94,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">
@@ -112,7 +114,7 @@ const emits = defineEmits<ContextMenuEmits>()
 const slots = defineSlots<ContextMenuSlots<T>>()
 
 const rootProps = useForwardPropsEmits(reactivePick(props, 'modal'), emits)
-const contentProps = toRef(() => props.content as ContextMenuContentProps)
+const contentProps = toRef(() => props.content)
 const proxySlots = omit(slots, ['default']) as Record<string, ContextMenuSlots<T>[string]>
 
 const ui = computed(() => contextMenu({
@@ -138,7 +140,7 @@ const ui = computed(() => contextMenu({
       :loading-icon="loadingIcon"
       :external-icon="externalIcon"
     >
-      <template v-for="(_, name) in proxySlots" #[name]="slotData: any">
+      <template v-for="(_, name) in proxySlots" #[name]="slotData">
         <slot :name="name" v-bind="slotData" />
       </template>
     </UContextMenuContent>

package/dist/runtime/components/Drawer.vue

@@ -1,16 +1,17 @@
 <script lang="ts">
 import type { DrawerRootProps, DrawerRootEmits } from 'vaul-vue'
-import type { DialogContentProps } from 'reka-ui'
+import type { DialogContentProps, DialogContentEmits } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/drawer'
 import { tv } from '../utils/tv'
+import type { EmitsToProps } from '../types/utils'
 
 const appConfigDrawer = _appConfig as AppConfig & { ui: { drawer: Partial<typeof theme> } }
 
 const drawer = tv({ extend: tv(theme), ...(appConfigDrawer.ui?.drawer || {}) })
 
-export interface DrawerProps extends Pick<DrawerRootProps, 'activeSnapPoint' | 'closeThreshold' | 'defaultOpen' | 'direction' | 'fadeFromIndex' | 'fixed' | 'modal' | 'nested' | 'direction' | 'open' | 'scrollLockTimeout' | 'shouldScaleBackground' | 'snapPoints'> {
+export interface DrawerProps extends Pick<DrawerRootProps, 'activeSnapPoint' | 'closeThreshold' | 'shouldScaleBackground' | 'setBackgroundColorOnScale' | 'scrollLockTimeout' | 'fixed' | 'dismissible' | 'modal' | 'open' | 'defaultOpen' | 'nested' | 'direction' | 'noBodyStyles' | 'handleOnly' | 'preventScrollRestoration' | 'snapPoints'> {
   /**
    * The element or component this component should render as.
    * @defaultValue 'div'
@@ -24,7 +25,7 @@ export interface DrawerProps extends Pick<DrawerRootProps, 'activeSnapPoint' | '
    */
   inset?: boolean
   /** The content of the drawer. */
-  content?: Omit<DialogContentProps, 'as' | 'asChild' | 'forceMount'>
+  content?: Omit<DialogContentProps, 'as' | 'asChild' | 'forceMount'> & Partial<EmitsToProps<DialogContentEmits>>
   /**
    * Render an overlay behind the drawer.
    * @defaultValue true
@@ -41,10 +42,9 @@ export interface DrawerProps extends Pick<DrawerRootProps, 'activeSnapPoint' | '
    */
   portal?: boolean
   /**
-   * When `false`, the drawer will not close when clicking outside or pressing escape.
-   * @defaultValue true
+   * Index of a `snapPoint` from which the overlay fade should be applied. Defaults to the last snap point.
    */
-  dismissible?: boolean
+  fadeFromIndex?: any
   class?: any
   ui?: Partial<typeof drawer.slots>
 }
@@ -53,7 +53,6 @@ export interface DrawerEmits extends DrawerRootEmits {}
 
 export interface DrawerSlots {
   default(props?: {}): any
-  handle(props?: {}): any
   content(props?: {}): any
   header(props?: {}): any
   title(props?: {}): any
@@ -66,19 +65,21 @@ export interface DrawerSlots {
 <script setup lang="ts">
 import { computed, toRef } from 'vue'
 import { useForwardPropsEmits } from 'reka-ui'
-import { DrawerRoot, DrawerTrigger, DrawerPortal, DrawerOverlay, DrawerContent, DrawerTitle, DrawerDescription } from 'vaul-vue'
+import { DrawerRoot, DrawerTrigger, DrawerPortal, DrawerOverlay, DrawerContent, DrawerTitle, DrawerDescription, DrawerHandle } from 'vaul-vue'
 import { reactivePick } from '@vueuse/core'
 
 const props = withDefaults(defineProps<DrawerProps>(), {
   direction: 'bottom',
   portal: true,
   overlay: true,
-  handle: true
+  handle: true,
+  modal: true,
+  dismissible: true
 })
 const emits = defineEmits<DrawerEmits>()
 const slots = defineSlots<DrawerSlots>()
 
-const rootProps = useForwardPropsEmits(reactivePick(props, 'activeSnapPoint', 'closeThreshold', 'defaultOpen', 'dismissible', 'fadeFromIndex', 'fixed', 'modal', 'nested', 'direction', 'open', 'scrollLockTimeout', 'shouldScaleBackground', 'snapPoints'), emits)
+const rootProps = useForwardPropsEmits(reactivePick(props, 'activeSnapPoint', 'closeThreshold', 'shouldScaleBackground', 'setBackgroundColorOnScale', 'scrollLockTimeout', 'fixed', 'dismissible', 'modal', 'open', 'defaultOpen', 'nested', 'direction', 'noBodyStyles', 'handleOnly', 'preventScrollRestoration', 'snapPoints', 'fadeFromIndex'), emits)
 const contentProps = toRef(() => props.content)
 const contentEvents = {
   closeAutoFocus: (e: Event) => e.preventDefault()
@@ -100,9 +101,7 @@ const ui = computed(() => drawer({
       <DrawerOverlay v-if="overlay" :class="ui.overlay({ class: props.ui?.overlay })" />
 
       <DrawerContent :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })" v-bind="contentProps" v-on="contentEvents">
-        <slot name="handle">
-          <div v-if="handle" :class="ui.handle({ class: props.ui?.handle })" />
-        </slot>
+        <DrawerHandle v-if="handle" :class="ui.handle({ class: props.ui?.handle })" />
 
         <slot name="content">
           <div :class="ui.container({ class: props.ui?.container })">

package/dist/runtime/components/DropdownMenu.vue

@@ -1,12 +1,13 @@
+<!-- eslint-disable vue/block-tag-newline -->
 <script lang="ts">
 import type { VariantProps } from 'tailwind-variants'
-import type { DropdownMenuRootProps, DropdownMenuRootEmits, DropdownMenuContentProps, DropdownMenuArrowProps } from 'reka-ui'
+import type { DropdownMenuRootProps, DropdownMenuRootEmits, DropdownMenuContentProps, DropdownMenuContentEmits, DropdownMenuArrowProps } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/dropdown-menu'
 import { tv } from '../utils/tv'
 import type { AvatarProps, KbdProps, LinkProps } from '../types'
-import type { DynamicSlots, PartialString } from '../types/utils'
+import type { DynamicSlots, PartialString, EmitsToProps } from '../types/utils'
 
 const appConfigDropdownMenu = _appConfig as AppConfig & { ui: { dropdownMenu: Partial<typeof theme> } }
 
@@ -22,7 +23,7 @@ export interface DropdownMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'cust
   icon?: string
   color?: DropdownMenuVariants['color']
   avatar?: AvatarProps
-  content?: Omit<DropdownMenuContentProps, 'as' | 'asChild' | 'forceMount'>
+  content?: Omit<DropdownMenuContentProps, 'as' | 'asChild' | 'forceMount'> & Partial<EmitsToProps<DropdownMenuContentEmits>>
   kbds?: KbdProps['value'][] | KbdProps[]
   /**
    * The item type.
@@ -69,7 +70,7 @@ export interface DropdownMenuProps<T> extends Omit<DropdownMenuRootProps, 'dir'>
    * The content of the menu.
    * @defaultValue { side: 'bottom', sideOffset: 8, collisionPadding: 8 }
    */
-  content?: Omit<DropdownMenuContentProps, 'as' | 'asChild' | 'forceMount'>
+  content?: Omit<DropdownMenuContentProps, 'as' | 'asChild' | 'forceMount'> & Partial<EmitsToProps<DropdownMenuContentEmits>>
   /**
    * Display an arrow alongside the menu.
    * @defaultValue false
@@ -101,6 +102,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">
@@ -148,7 +150,7 @@ const ui = computed(() => dropdownMenu({
       :loading-icon="loadingIcon"
       :external-icon="externalIcon"
     >
-      <template v-for="(_, name) in proxySlots" #[name]="slotData: any">
+      <template v-for="(_, name) in proxySlots" #[name]="slotData">
         <slot :name="name" v-bind="slotData" />
       </template>
 

package/dist/runtime/components/Form.vue

@@ -12,14 +12,34 @@ const form = tv({ extend: tv(theme), ...(appConfigForm.ui?.form || {}) })
 
 export interface FormProps<T extends object> {
   id?: string | number
+  /** Schema to validate the form state. Supports Standard Schema objects, Yup, Joi, and Superstructs. */
   schema?: FormSchema<T>
+  /** An object representing the current state of the form. */
   state: Partial<T>
+  /**
+   * Custom validation function to validate the form state.
+   * @param state - The current state of the form.
+   * @returns A promise that resolves to an array of FormError objects, or an array of FormError objects directly.
+   */
   validate?: (state: Partial<T>) => Promise<FormError[]> | FormError[]
+  /**
+   * The list of input events that trigger the form validation.
+   * @defaultValue `['blur', 'change', 'input']`
+   */
   validateOn?: FormInputEvents[]
+  /** Disable all inputs inside the form. */
   disabled?: boolean
+  /**
+   * Delay in milliseconds before validating the form on input events.
+   * @defaultValue `300`
+   */
   validateOnInputDelay?: number
-  class?: any
+  /**
+   * If true, schema transformations will be applied to the state on submit.
+   * @defaultValue `true`
+   */
   transform?: boolean
+  class?: any
   onSubmit?: ((event: FormSubmitEvent<T>) => void | Promise<void>) | (() => void | Promise<void>)
 }
 

package/dist/runtime/components/FormField.vue

@@ -31,7 +31,12 @@ export interface FormFieldProps {
    */
   size?: FormFieldVariants['size']
   required?: boolean
+  /** If true, validation on input will be active immediately instead of waiting for a blur event. */
   eagerValidation?: boolean
+  /**
+   * Delay in milliseconds before validating the form on input events.
+   * @defaultValue `300`
+   */
   validateOnInputDelay?: number
   class?: any
   ui?: Partial<typeof formField.slots>