@nuxt/ui 4.0.0-beta.0 → 4.0.1

package/.nuxt/ui/auth-form.ts

@@ -9,9 +9,9 @@ export default {
     "body": "gap-y-6 flex flex-col",
     "providers": "space-y-3",
     "checkbox": "",
-    "select": "",
+    "select": "w-full",
     "password": "w-full",
-    "otp": "w-full justify-center",
+    "otp": "w-full",
     "input": "w-full",
     "separator": "",
     "form": "space-y-5",

package/.nuxt/ui/content/content-search.ts

@@ -1,6 +1,13 @@
 export default {
   "slots": {
-    "modal": "sm:max-w-3xl sm:h-[28rem]",
+    "modal": "",
     "input": "[&>input]:text-base/5"
+  },
+  "variants": {
+    "fullscreen": {
+      "false": {
+        "modal": "sm:max-w-3xl sm:h-[28rem]"
+      }
+    }
   }
 }

package/.nuxt/ui/dashboard-panel.ts

@@ -1,6 +1,6 @@
 export default {
   "slots": {
-    "root": "relative flex flex-col min-w-0 min-h-svh lg:not-last:border-r lg:not-last:border-default shrink-0",
+    "root": "relative flex flex-col min-w-0 min-h-svh lg:not-last:border-e lg:not-last:border-default shrink-0",
     "body": "flex flex-col gap-4 sm:gap-6 flex-1 overflow-y-auto p-4 sm:p-6",
     "handle": ""
   },

package/.nuxt/ui/dashboard-search.ts

@@ -1,6 +1,13 @@
 export default {
   "slots": {
-    "modal": "sm:max-w-3xl sm:h-[28rem]",
+    "modal": "",
     "input": "[&>input]:text-base/5"
+  },
+  "variants": {
+    "fullscreen": {
+      "false": {
+        "modal": "sm:max-w-3xl sm:h-[28rem]"
+      }
+    }
   }
 }

package/.nuxt/ui/dashboard-sidebar.ts

@@ -19,7 +19,7 @@ export default {
     },
     "side": {
       "left": {
-        "root": "border-r border-default"
+        "root": "border-e border-default"
       },
       "right": {
         "root": ""

package/.nuxt/ui/drawer.ts

@@ -43,6 +43,9 @@ export default {
       "true": {
         "content": "rounded-lg after:hidden overflow-hidden [--initial-transform:calc(100%+1.5rem)]"
       }
+    },
+    "snapPoints": {
+      "true": ""
     }
   },
   "compoundVariants": [
@@ -56,6 +59,16 @@ export default {
         "handle": "!w-12 !h-1.5 mx-auto"
       }
     },
+    {
+      "direction": [
+        "top" as typeof direction[number],
+        "bottom" as typeof direction[number]
+      ],
+      "snapPoints": true,
+      "class": {
+        "content": "h-full"
+      }
+    },
     {
       "direction": [
         "right" as typeof direction[number],
@@ -66,6 +79,16 @@ export default {
         "handle": "!h-12 !w-1.5 mt-auto mb-auto"
       }
     },
+    {
+      "direction": [
+        "right" as typeof direction[number],
+        "left" as typeof direction[number]
+      ],
+      "snapPoints": true,
+      "class": {
+        "content": "w-full"
+      }
+    },
     {
       "direction": "top" as typeof direction[number],
       "inset": true,

package/README.md

@@ -18,11 +18,11 @@ Nuxt UI harnesses the combined strengths of [Reka UI](https://reka-ui.com/), [Ta
 
 ## Documentation
 
-Visit https://ui4.nuxt.com to explore the documentation.
+Visit https://ui.nuxt.com to explore the documentation.
 
 ## Templates
 
-Kickstart your project with one of our ready-to-use Nuxt UI templates or follow the [Installation Guide](https://ui4.nuxt.com/getting-started/installation/nuxt). Explore all available templates on the [official templates page](https://ui4.nuxt.com/templates).
+Kickstart your project with one of our ready-to-use Nuxt UI templates or follow the [Installation Guide](https://ui.nuxt.com/getting-started/installation/nuxt). Explore all available templates on the [official templates page](https://ui.nuxt.com/templates).
 
 - [Starter](https://github.com/nuxt-ui-templates/starter) — A minimal template to get started with Nuxt UI.
 - [Landing](https://github.com/nuxt-ui-templates/landing) — A modern landing page template powered by Nuxt Content.
@@ -36,19 +36,19 @@ Kickstart your project with one of our ready-to-use Nuxt UI templates or follow
 ## Installation
 
 ```bash [pnpm]
-pnpm add @nuxt/ui@alpha
+pnpm add @nuxt/ui
 ```
 
 ```bash [yarn]
-yarn add @nuxt/ui@alpha
+yarn add @nuxt/ui
 ```
 
 ```bash [npm]
-npm install @nuxt/ui@alpha
+npm install @nuxt/ui
 ```
 
 ```bash [bun]
-bun add @nuxt/ui@alpha
+bun add @nuxt/ui
 ```
 
 ### Nuxt
@@ -68,7 +68,7 @@ export default defineNuxtConfig({
 @import "@nuxt/ui";
 ```
 
-Learn more in the [installation guide](https://ui4.nuxt.com/docs/getting-started/installation/nuxt).
+Learn more in the [installation guide](https://ui.nuxt.com/docs/getting-started/installation/nuxt).
 
 ### Vue
 
@@ -115,18 +115,18 @@ app.mount('#app')
 @import "@nuxt/ui";
 ```
 
-Learn more in the [installation guide](https://ui4.nuxt.com/docs/getting-started/installation/vue).
+Learn more in the [installation guide](https://ui.nuxt.com/docs/getting-started/installation/vue).
 
 ## Contribution
 
 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://ui4.nuxt.com/docs/getting-started/contribution) to share your suggestions.
+- Suggestions: Have any thoughts to enhance Nuxt UI? We'd love to hear them! Check out the [contribution guide](https://ui.nuxt.com/docs/getting-started/contribution) to share your suggestions.
 
 ## Local Development
 
-Follow the docs to [set up your local development environment](https://ui4.nuxt.com/docs/getting-started/contribution#local-development) and contribute.
+Follow the docs to [set up your local development environment](https://ui.nuxt.com/docs/getting-started/contribution#local-development) and contribute.
 
 ## Credits
 
@@ -143,7 +143,7 @@ Follow the docs to [set up your local development environment](https://ui4.nuxt.
 Licensed under the [MIT license](https://github.com/nuxt/ui/blob/v4/LICENSE.md).
 
 <!-- Badges -->
-[npm-version-src]: https://img.shields.io/npm/v/@nuxt/ui/alpha.svg?style=flat&colorA=18181B&colorB=28CF8D
+[npm-version-src]: https://img.shields.io/npm/v/@nuxt/ui.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/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxt/ui",
-  "version": "4.0.0-beta.0",
+  "version": "4.0.1",
   "docs": "https://ui.nuxt.com/docs/getting-started/installation/nuxt",
   "configKey": "ui",
   "compatibility": {

package/dist/module.mjs

@@ -1,6 +1,6 @@
 import { defu } from 'defu';
 import { defineNuxtModule, createResolver, addPlugin, hasNuxtModule, addComponentsDir, addImportsDir, installModule } from '@nuxt/kit';
-import { d as defaultOptions, r as resolveColors, a as getDefaultUiConfig, b as addTemplates } from './shared/ui.DGJZ-1aX.mjs';
+import { d as defaultOptions, r as resolveColors, a as getDefaultUiConfig, b as addTemplates } from './shared/ui.D-FDXAUi.mjs';
 import '../dist/runtime/utils/index.js';
 import 'node:url';
 import 'scule';
@@ -8,7 +8,7 @@ import 'knitwork';
 import 'tailwindcss/colors';
 
 const name = "@nuxt/ui";
-const version = "4.0.0-beta.0";
+const version = "4.0.1";
 
 const module = defineNuxtModule({
   meta: {

package/dist/runtime/components/Accordion.d.vue.ts

@@ -62,17 +62,18 @@ export type AccordionSlots<T extends AccordionItem = AccordionItem> = {
     index: number;
     open: boolean;
 }>;
-declare const _default: <T extends AccordionItem>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
-        readonly "onUpdate:modelValue"?: ((value: string | string[] | undefined) => any) | undefined;
-    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:modelValue"> & AccordionProps<T> & {}> & import("vue").PublicProps;
-    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+declare const __VLS_export: <T extends AccordionItem>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<AccordionProps<T> & {
+        "onUpdate:modelValue"?: ((value: string | string[] | undefined) => any) | undefined;
+    }> & import("vue").PublicProps;
+    expose: (exposed: {}) => void;
     attrs: any;
     slots: AccordionSlots<T>;
     emit: (evt: "update:modelValue", value: string | string[] | undefined) => void;
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_PrettifyLocal<T> = {
     [K in keyof T as K]: T[K];

package/dist/runtime/components/Accordion.vue.d.ts

@@ -62,17 +62,18 @@ export type AccordionSlots<T extends AccordionItem = AccordionItem> = {
     index: number;
     open: boolean;
 }>;
-declare const _default: <T extends AccordionItem>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
-        readonly "onUpdate:modelValue"?: ((value: string | string[] | undefined) => any) | undefined;
-    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:modelValue"> & AccordionProps<T> & {}> & import("vue").PublicProps;
-    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+declare const __VLS_export: <T extends AccordionItem>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<AccordionProps<T> & {
+        "onUpdate:modelValue"?: ((value: string | string[] | undefined) => any) | undefined;
+    }> & import("vue").PublicProps;
+    expose: (exposed: {}) => void;
     attrs: any;
     slots: AccordionSlots<T>;
     emit: (evt: "update:modelValue", value: string | string[] | undefined) => void;
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_PrettifyLocal<T> = {
     [K in keyof T as K]: T[K];

package/dist/runtime/components/Alert.d.vue.ts

@@ -66,13 +66,14 @@ export interface AlertSlots {
         };
     }): any;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<AlertProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<AlertProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:open": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<AlertProps> & Readonly<{
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
     orientation: Alert["variants"]["orientation"];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, AlertSlots>;
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

package/dist/runtime/components/Alert.vue.d.ts

@@ -66,13 +66,14 @@ export interface AlertSlots {
         };
     }): any;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<AlertProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<AlertProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:open": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<AlertProps> & Readonly<{
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
     orientation: Alert["variants"]["orientation"];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, AlertSlots>;
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

package/dist/runtime/components/App.d.vue.ts

@@ -5,20 +5,21 @@ export interface AppProps<T extends Messages = Messages> extends Omit<ConfigProv
     tooltip?: TooltipProviderProps;
     toaster?: ToasterProps | null;
     locale?: Locale<T>;
-    portal?: string | HTMLElement;
+    portal?: boolean | string | HTMLElement;
 }
 export interface AppSlots {
     default(props?: {}): any;
 }
-declare const _default: <T extends Messages>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, never> & AppProps<T> & {}> & import("vue").PublicProps;
-    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+declare const __VLS_export: <T extends Messages>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<AppProps<T>> & import("vue").PublicProps;
+    expose: (exposed: {}) => void;
     attrs: any;
     slots: AppSlots;
     emit: {};
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_PrettifyLocal<T> = {
     [K in keyof T as K]: T[K];

package/dist/runtime/components/App.vue

@@ -16,7 +16,7 @@ const props = defineProps({
   tooltip: { type: Object, required: false },
   toaster: { type: [Object, null], required: false },
   locale: { type: Object, required: false },
-  portal: { type: null, required: false, default: "body" },
+  portal: { type: [Boolean, String], required: false, skipCheck: true, default: "body" },
   scrollBody: { type: [Boolean, Object], required: false },
   nonce: { type: String, required: false }
 });

package/dist/runtime/components/App.vue.d.ts

@@ -5,20 +5,21 @@ export interface AppProps<T extends Messages = Messages> extends Omit<ConfigProv
     tooltip?: TooltipProviderProps;
     toaster?: ToasterProps | null;
     locale?: Locale<T>;
-    portal?: string | HTMLElement;
+    portal?: boolean | string | HTMLElement;
 }
 export interface AppSlots {
     default(props?: {}): any;
 }
-declare const _default: <T extends Messages>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, never> & AppProps<T> & {}> & import("vue").PublicProps;
-    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+declare const __VLS_export: <T extends Messages>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<AppProps<T>> & import("vue").PublicProps;
+    expose: (exposed: {}) => void;
     attrs: any;
     slots: AppSlots;
     emit: {};
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_PrettifyLocal<T> = {
     [K in keyof T as K]: T[K];

package/dist/runtime/components/AuthForm.d.vue.ts

@@ -1,15 +1,34 @@
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/auth-form';
-import type { ButtonProps, FormProps, FormFieldProps, SeparatorProps, PinInputProps, IconProps } from '../types';
+import type { ButtonProps, FormProps, FormFieldProps, SeparatorProps, InputProps, CheckboxProps, SelectMenuProps, PinInputProps, IconProps } from '../types';
 import type { FormSchema, FormSubmitEvent, InferInput } from '../types/form';
 import type { ComponentConfig } from '../types/tv';
 type AuthForm = ComponentConfig<typeof theme, AppConfig, 'authForm'>;
-type AuthFormField = FormFieldProps & {
+type AuthFormCheckboxField = Omit<FormFieldProps, 'name'> & CheckboxProps & {
     name: string;
-    type?: 'checkbox' | 'select' | 'password' | 'text' | 'otp' | 'email';
-    defaultValue?: any;
-    otp?: PinInputProps;
+    type: 'checkbox';
 };
+type AuthFormSelectField = Omit<FormFieldProps, 'name'> & SelectMenuProps & {
+    name: string;
+    type: 'select';
+};
+type AuthFormOtpField = Omit<FormFieldProps, 'name'> & Omit<PinInputProps, 'type' | 'otp'> & {
+    name: string;
+    type: 'otp';
+    /**
+     * @deprecated Bind props directly in the field object.
+     * The optional props for the `otp` type.
+     * `{ otp: true }`{lang="ts-type"}
+     */
+    otp?: boolean | PinInputProps;
+};
+type AuthFormInputFieldType = 'password' | 'text' | 'email' | 'number';
+type AuthFormInputField<T extends AuthFormInputFieldType = AuthFormInputFieldType> = Omit<FormFieldProps, 'name'> & InputProps & {
+    name: string;
+    type: T;
+};
+type AuthFormFieldType = 'checkbox' | 'select' | 'otp' | 'password' | 'text' | 'email' | 'number';
+export type AuthFormField<T extends AuthFormFieldType = AuthFormFieldType> = T extends 'checkbox' ? AuthFormCheckboxField : T extends 'select' ? AuthFormSelectField : T extends 'otp' ? AuthFormOtpField : T extends AuthFormInputFieldType ? AuthFormInputField<T> : never;
 export interface AuthFormProps<T extends FormSchema = FormSchema<object>, F extends AuthFormField = AuthFormField> {
     /**
      * The element or component this component should render as.
@@ -70,11 +89,11 @@ export type AuthFormSlots<T extends object = object, F extends AuthFormField = A
     }): any;
     footer(props?: {}): any;
 } & DynamicFieldSlots<T, F> & DynamicFormFieldSlots<T>;
-declare const _default: <T extends FormSchema, F extends AuthFormField>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
-        readonly onSubmit?: ((payload: FormSubmitEvent<import("vue").Reactive<InferInput<T>>>) => any) | undefined;
-    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onSubmit"> & AuthFormProps<T, F> & {}> & import("vue").PublicProps;
-    expose(exposed: import("vue").ShallowUnwrapRef<{
+declare const __VLS_export: <T extends FormSchema, F extends AuthFormField>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<AuthFormProps<T, F> & {
+        onSubmit?: ((payload: FormSubmitEvent<import("vue").Reactive<InferInput<T>>>) => any) | undefined;
+    }> & import("vue").PublicProps;
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
         formRef: Readonly<import("vue").ShallowRef<import("vue").ShallowUnwrapRef<{
             validate: {
                 <T_1 extends boolean>(opts: {
@@ -115,13 +134,14 @@ declare const _default: <T extends FormSchema, F extends AuthFormField>(__VLS_pr
             touchedFields: ReadonlySet<import("vue").DeepReadonly<import("@vue/reactivity").UnwrapRefSimple<keyof InferInput<T>>>>;
         }> | null>>;
         state: import("vue").Reactive<InferInput<T>>;
-    }>): void;
+    }>) => void;
     attrs: any;
     slots: AuthFormSlots<import("vue").Reactive<InferInput<T>>, F>;
     emit: (evt: "submit", payload: FormSubmitEvent<import("vue").Reactive<InferInput<T>>>) => void;
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_PrettifyLocal<T> = {
     [K in keyof T as K]: T[K];

package/dist/runtime/components/AuthForm.vue

@@ -7,7 +7,7 @@ import { reactive, ref, computed, useTemplateRef } from "vue";
 import { Primitive } from "reka-ui";
 import { useAppConfig } from "#imports";
 import { useLocale } from "../composables/useLocale";
-import { omit } from "../utils";
+import { omit, pick } from "../utils";
 import { tv } from "../utils/tv";
 import UButton from "./Button.vue";
 import UIcon from "./Icon.vue";
@@ -55,6 +55,23 @@ defineExpose({
   formRef,
   state
 });
+function pickFieldProps(field) {
+  const fields = ["name", "errorPattern", "help", "error", "hint", "size", "required", "eagerValidation", "validateOnInputDelay"];
+  if (field.type === "checkbox") {
+    return pick(field, fields);
+  }
+  return pick(field, [...fields, "label", "description"]);
+}
+function omitFieldProps(field) {
+  const fields = ["errorPattern", "help", "error", "hint", "size", "required", "eagerValidation", "validateOnInputDelay"];
+  if (field.type === "checkbox" || field.type === "select" || field.type === "otp") {
+    if (field.type === "checkbox") {
+      return omit(field, [...fields, "type"]);
+    }
+    return omit(field, [...fields, "type", "label", "description"]);
+  }
+  return omit(field, [...fields, "label", "description"]);
+}
 </script>
 
 <template>
@@ -116,35 +133,38 @@ defineExpose({
         <UFormField
           v-for="field in fields"
           :key="field.name"
-          :label="field.type === 'checkbox' ? '' : field.label ?? ''"
-          :description="field.description"
-          :help="field.help"
-          :hint="field.hint"
-          :name="field.name"
-          :size="field.size"
-          :required="field.required"
-          :error="field.error"
+          v-bind="pickFieldProps(field)"
         >
           <slot :name="`${field.name}-field`" v-bind="{ state, field }">
             <UCheckbox
               v-if="field.type === 'checkbox'"
               v-model="state[field.name]"
               :class="ui.checkbox({ class: props.ui?.checkbox })"
-              v-bind="omit(field, ['description', 'help', 'hint', 'size'])"
+              v-bind="omitFieldProps(field)"
             />
             <USelectMenu
               v-else-if="field.type === 'select'"
               v-model="state[field.name]"
               :class="ui.select({ class: props.ui?.select })"
-              v-bind="omit(field, ['description', 'help', 'hint', 'size'])"
+              v-bind="omitFieldProps(field)"
+            />
+            <UPinInput
+              v-else-if="field.type === 'otp'"
+              :id="field.name"
+              v-model="state[field.name]"
+              :class="ui.otp({ class: props.ui?.otp })"
+              v-bind="{
+  ...omitFieldProps(field),
+  ...typeof field.otp === 'object' ? field.otp : {}
+}"
+              otp
             />
             <UInput
               v-else-if="field.type === 'password'"
               v-model="state[field.name]"
               :class="ui.password({ class: props.ui?.password })"
+              v-bind="omitFieldProps(field)"
               :type="passwordVisibility ? 'text' : 'password'"
-              v-bind="omit(field, ['label', 'description', 'help', 'hint', 'size', 'type', 'required', 'defaultValue'])"
-              :ui="{ root: 'w-full' }"
             >
               <template #trailing>
                 <UButton
@@ -159,19 +179,11 @@ defineExpose({
                 />
               </template>
             </UInput>
-            <UPinInput
-              v-else-if="field.type === 'otp'"
-              :id="field.name"
-              v-model="state[field.name]"
-              :class="ui.otp({ class: props.ui?.otp })"
-              otp
-              v-bind="field.otp"
-            />
             <UInput
               v-else
               v-model="state[field.name]"
               :class="ui.input({ class: props.ui?.input })"
-              v-bind="omit(field, ['label', 'description', 'help', 'hint', 'size', 'required', 'defaultValue'])"
+              v-bind="omitFieldProps(field)"
             />
           </slot>
 

package/dist/runtime/components/AuthForm.vue.d.ts

@@ -1,15 +1,34 @@
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/auth-form';
-import type { ButtonProps, FormProps, FormFieldProps, SeparatorProps, PinInputProps, IconProps } from '../types';
+import type { ButtonProps, FormProps, FormFieldProps, SeparatorProps, InputProps, CheckboxProps, SelectMenuProps, PinInputProps, IconProps } from '../types';
 import type { FormSchema, FormSubmitEvent, InferInput } from '../types/form';
 import type { ComponentConfig } from '../types/tv';
 type AuthForm = ComponentConfig<typeof theme, AppConfig, 'authForm'>;
-type AuthFormField = FormFieldProps & {
+type AuthFormCheckboxField = Omit<FormFieldProps, 'name'> & CheckboxProps & {
     name: string;
-    type?: 'checkbox' | 'select' | 'password' | 'text' | 'otp' | 'email';
-    defaultValue?: any;
-    otp?: PinInputProps;
+    type: 'checkbox';
 };
+type AuthFormSelectField = Omit<FormFieldProps, 'name'> & SelectMenuProps & {
+    name: string;
+    type: 'select';
+};
+type AuthFormOtpField = Omit<FormFieldProps, 'name'> & Omit<PinInputProps, 'type' | 'otp'> & {
+    name: string;
+    type: 'otp';
+    /**
+     * @deprecated Bind props directly in the field object.
+     * The optional props for the `otp` type.
+     * `{ otp: true }`{lang="ts-type"}
+     */
+    otp?: boolean | PinInputProps;
+};
+type AuthFormInputFieldType = 'password' | 'text' | 'email' | 'number';
+type AuthFormInputField<T extends AuthFormInputFieldType = AuthFormInputFieldType> = Omit<FormFieldProps, 'name'> & InputProps & {
+    name: string;
+    type: T;
+};
+type AuthFormFieldType = 'checkbox' | 'select' | 'otp' | 'password' | 'text' | 'email' | 'number';
+export type AuthFormField<T extends AuthFormFieldType = AuthFormFieldType> = T extends 'checkbox' ? AuthFormCheckboxField : T extends 'select' ? AuthFormSelectField : T extends 'otp' ? AuthFormOtpField : T extends AuthFormInputFieldType ? AuthFormInputField<T> : never;
 export interface AuthFormProps<T extends FormSchema = FormSchema<object>, F extends AuthFormField = AuthFormField> {
     /**
      * The element or component this component should render as.
@@ -70,11 +89,11 @@ export type AuthFormSlots<T extends object = object, F extends AuthFormField = A
     }): any;
     footer(props?: {}): any;
 } & DynamicFieldSlots<T, F> & DynamicFormFieldSlots<T>;
-declare const _default: <T extends FormSchema, F extends AuthFormField>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
-        readonly onSubmit?: ((payload: FormSubmitEvent<import("vue").Reactive<InferInput<T>>>) => any) | undefined;
-    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onSubmit"> & AuthFormProps<T, F> & {}> & import("vue").PublicProps;
-    expose(exposed: import("vue").ShallowUnwrapRef<{
+declare const __VLS_export: <T extends FormSchema, F extends AuthFormField>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<AuthFormProps<T, F> & {
+        onSubmit?: ((payload: FormSubmitEvent<import("vue").Reactive<InferInput<T>>>) => any) | undefined;
+    }> & import("vue").PublicProps;
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
         formRef: Readonly<import("vue").ShallowRef<import("vue").ShallowUnwrapRef<{
             validate: {
                 <T_1 extends boolean>(opts: {
@@ -115,13 +134,14 @@ declare const _default: <T extends FormSchema, F extends AuthFormField>(__VLS_pr
             touchedFields: ReadonlySet<import("vue").DeepReadonly<import("@vue/reactivity").UnwrapRefSimple<keyof InferInput<T>>>>;
         }> | null>>;
         state: import("vue").Reactive<InferInput<T>>;
-    }>): void;
+    }>) => void;
     attrs: any;
     slots: AuthFormSlots<import("vue").Reactive<InferInput<T>>, F>;
     emit: (evt: "submit", payload: FormSubmitEvent<import("vue").Reactive<InferInput<T>>>) => void;
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_PrettifyLocal<T> = {
     [K in keyof T as K]: T[K];

package/dist/runtime/components/Avatar.d.vue.ts

@@ -28,11 +28,12 @@ export interface AvatarProps {
 export interface AvatarSlots {
     default(props?: {}): any;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<AvatarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AvatarProps> & Readonly<{}>, {
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<AvatarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AvatarProps> & Readonly<{}>, {
     as: any;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     default?: (props: {}) => any;
 }>;
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {