@nuxt/ui 4.0.0-alpha.1 → 4.0.0-alpha.2

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

@@ -96,7 +96,7 @@ export default {
     },
     "disabled": {
       "true": {
-        "link": "cursor-not-allowed opacity-75"
+        "trigger": "data-[state=open]:text-highlighted"
       }
     },
     "highlight": {
@@ -210,6 +210,7 @@ export default {
       "variant": "pill" as typeof variant[number],
       "active": true,
       "highlight": true,
+      "disabled": false,
       "class": {
         "link": [
           "hover:before:bg-elevated/50",

package/.nuxt/ui/marquee.ts

@@ -24,7 +24,7 @@ export default {
     },
     "reverse": {
       "true": {
-        "content": "[animation-direction:reverse]"
+        "content": "![animation-direction:reverse]"
       }
     },
     "overlay": {

package/.nuxt/ui/progress.ts

@@ -42,7 +42,7 @@ export default {
     "root": "gap-2",
     "base": "relative overflow-hidden rounded-full bg-accented",
     "indicator": "rounded-full size-full transition-transform duration-200 ease-out",
-    "status": "flex justify-end text-dimmed transition-[width] duration-200",
+    "status": "flex text-dimmed transition-[width] duration-200",
     "steps": "grid items-end",
     "step": "truncate text-end row-start-1 col-start-1 transition-opacity" as typeof step[number]
   },
@@ -131,12 +131,12 @@ export default {
       "horizontal": {
         "root": "w-full flex flex-col",
         "base": "w-full",
-        "status": "flex-row"
+        "status": "flex-row items-center justify-end min-w-fit"
       },
       "vertical": {
         "root": "h-full flex flex-row-reverse",
         "base": "h-full",
-        "status": "flex-col"
+        "status": "flex-col justify-end min-h-fit"
       }
     },
     "inverted": {

package/.nuxt/ui/prose/code-tree.ts

@@ -9,7 +9,7 @@ export default {
     "linkLeadingIcon": "size-4 shrink-0",
     "linkLabel": "truncate",
     "linkTrailing": "ms-auto inline-flex gap-1.5 items-center",
-    "linkTrailingIcon": "size-5 transform transition-transform duration-200 shrink-0 group-data-expanded:rotate-180",
+    "linkTrailingIcon": "size-5 transform transition-transform duration-200 shrink-0 group-data-[expanded=true]:rotate-180",
     "content": "overflow-hidden lg:col-span-2 flex flex-col [&>div]:my-0 [&>div]:flex-1 [&>div]:flex [&>div]:flex-col [&>div>div]:border-0 [&>div>pre]:border-b-0 [&>div>pre]:border-s-0 [&>div>pre]:border-e-0 [&>div>pre]:rounded-l-none [&>div>pre]:flex-1 [&>div]:overflow-y-auto"
   },
   "variants": {

package/.nuxt/ui/tree.ts

@@ -26,7 +26,7 @@ export default {
     "linkLeadingIcon": "shrink-0",
     "linkLabel": "truncate",
     "linkTrailing": "ms-auto inline-flex gap-1.5 items-center",
-    "linkTrailingIcon": "shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180"
+    "linkTrailingIcon": "shrink-0 transform transition-transform duration-200 group-data-[expanded=true]:rotate-180"
   },
   "variants": {
     "color": {

package/README.md

@@ -20,6 +20,18 @@ Nuxt UI harnesses the combined strengths of [Reka UI](https://reka-ui.com/), [Ta
 
 Visit https://ui4.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).
+
+- [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.
+- [Docs](https://github.com/nuxt-ui-templates/docs) — A documentation template powered by Nuxt Content.
+- [SaaS](https://github.com/nuxt-ui-templates/saas) — A SaaS template with landing, pricing, docs and blog powered by Nuxt Content.
+- [Dashboard](https://github.com/nuxt-ui-templates/dashboard) — A dashboard template with multi-column layout.
+- [Chat](https://github.com/nuxt-ui-templates/chat) — An AI chatbot template with GitHub authentication and persistent chat history powered by Vercel AI SDK.
+- [Portfolio](https://github.com/nuxt-ui-templates/portfolio) — A sleek portfolio template to showcase your work, skills and blog powered by Nuxt Content.
+
 ## Installation
 
 ```bash [pnpm]
@@ -130,7 +142,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/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
+[npm-version-src]: https://img.shields.io/npm/v/@nuxt/ui/alpha.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.d.mts

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

package/dist/module.json

@@ -1,13 +1,13 @@
 {
   "name": "@nuxt/ui",
-  "version": "4.0.0-alpha.1",
+  "version": "4.0.0-alpha.2",
   "docs": "https://ui.nuxt.com/docs/getting-started/installation/nuxt",
   "configKey": "ui",
   "compatibility": {
     "nuxt": ">=4.0.0"
   },
   "builder": {
-    "@nuxt/module-builder": "1.0.1",
+    "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.0"
   }
 }

package/dist/module.mjs

@@ -1,6 +1,6 @@
 import { defu } from 'defu';
-import { defineNuxtModule, createResolver, addVitePlugin, addPlugin, hasNuxtModule, addComponentsDir, addImportsDir, installModule } from '@nuxt/kit';
-import { d as defaultOptions, r as resolveColors, a as getDefaultUiConfig, b as addTemplates } from './shared/ui.BEZXPd3d.mjs';
+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.Bs5uUhtm.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-alpha.1";
+const version = "4.0.0-alpha.2";
 
 const module = defineNuxtModule({
   meta: {
@@ -30,10 +30,12 @@ const module = defineNuxtModule({
     nuxt.options.appConfig.ui = defu(nuxt.options.appConfig.ui || {}, getDefaultUiConfig(options.theme.colors));
     nuxt.options.app.rootAttrs = nuxt.options.app.rootAttrs || {};
     nuxt.options.app.rootAttrs.class = [nuxt.options.app.rootAttrs.class, "isolate"].filter(Boolean).join(" ");
-    if (nuxt.options.builder === "@nuxt/vite-builder") {
+    nuxt.hook("vite:extendConfig", async (config) => {
       const plugin = await import('@tailwindcss/vite').then((r) => r.default);
-      addVitePlugin(plugin());
-    } else {
+      config.plugins ||= [];
+      config.plugins.push(plugin());
+    });
+    if (nuxt.options.builder !== "@nuxt/vite-builder") {
       nuxt.options.postcss.plugins["@tailwindcss/postcss"] = {};
     }
     async function registerModule(name2, key, options2) {

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

@@ -0,0 +1,79 @@
+import type { AccordionRootProps, AccordionRootEmits } from 'reka-ui';
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/accordion';
+import type { IconProps } from '../types';
+import type { DynamicSlots, GetItemKeys } from '../types/utils';
+import type { ComponentConfig } from '../types/tv';
+type Accordion = ComponentConfig<typeof theme, AppConfig, 'accordion'>;
+export interface AccordionItem {
+    label?: string;
+    /**
+     * @IconifyIcon
+     */
+    icon?: IconProps['name'];
+    /**
+     * @IconifyIcon
+     */
+    trailingIcon?: IconProps['name'];
+    slot?: string;
+    content?: string;
+    /** A unique value for the accordion item. Defaults to the index. */
+    value?: string;
+    disabled?: boolean;
+    class?: any;
+    ui?: Pick<Accordion['slots'], 'item' | 'header' | 'trigger' | 'leadingIcon' | 'label' | 'trailingIcon' | 'content' | 'body'>;
+    [key: string]: any;
+}
+export interface AccordionProps<T extends AccordionItem = AccordionItem> extends Pick<AccordionRootProps, 'collapsible' | 'defaultValue' | 'modelValue' | 'type' | 'disabled' | 'unmountOnHide'> {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    items?: T[];
+    /**
+     * The icon displayed on the right side of the trigger.
+     * @defaultValue appConfig.ui.icons.chevronDown
+     * @IconifyIcon
+     */
+    trailingIcon?: IconProps['name'];
+    /**
+     * The key used to get the label from the item.
+     * @defaultValue 'label'
+     */
+    labelKey?: GetItemKeys<T>;
+    class?: any;
+    ui?: Accordion['slots'];
+}
+export interface AccordionEmits extends AccordionRootEmits {
+}
+type SlotProps<T extends AccordionItem> = (props: {
+    item: T;
+    index: number;
+    open: boolean;
+}) => any;
+export type AccordionSlots<T extends AccordionItem = AccordionItem> = {
+    leading: SlotProps<T>;
+    default: SlotProps<T>;
+    trailing: SlotProps<T>;
+    content: SlotProps<T>;
+    body: SlotProps<T>;
+} & DynamicSlots<T, 'body', {
+    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;
+    attrs: any;
+    slots: AccordionSlots<T>;
+    emit: (evt: "update:modelValue", value: string | string[] | undefined) => void;
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T as K]: T[K];
+} & {};

package/dist/runtime/components/Accordion.vue

@@ -14,7 +14,7 @@ const props = defineProps({
   as: { type: null, required: false },
   items: { type: Array, required: false },
   trailingIcon: { type: [String, Object], required: false },
-  labelKey: { type: String, required: false, default: "label" },
+  labelKey: { type: null, required: false, default: "label" },
   class: { type: null, required: false },
   ui: { type: null, required: false },
   collapsible: { type: Boolean, required: false, default: true },
@@ -27,14 +27,14 @@ const props = defineProps({
 const emits = defineEmits(["update:modelValue"]);
 const slots = defineSlots();
 const appConfig = useAppConfig();
-const rootProps = useForwardPropsEmits(reactivePick(props, "as", "collapsible", "defaultValue", "disabled", "modelValue", "type", "unmountOnHide"), emits);
+const rootProps = useForwardPropsEmits(reactivePick(props, "as", "collapsible", "defaultValue", "disabled", "modelValue", "unmountOnHide"), emits);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.accordion || {} })({
   disabled: props.disabled
 }));
 </script>
 
 <template>
-  <AccordionRoot v-bind="rootProps" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <AccordionRoot v-bind="rootProps" :type="type" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <AccordionItem
       v-for="(item, index) in props.items"
       v-slot="{ open }"

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

@@ -2,7 +2,7 @@ import type { AccordionRootProps, AccordionRootEmits } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/accordion';
 import type { IconProps } from '../types';
-import type { DynamicSlots } from '../types/utils';
+import type { DynamicSlots, GetItemKeys } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
 type Accordion = ComponentConfig<typeof theme, AppConfig, 'accordion'>;
 export interface AccordionItem {
@@ -41,7 +41,7 @@ export interface AccordionProps<T extends AccordionItem = AccordionItem> extends
      * The key used to get the label from the item.
      * @defaultValue 'label'
      */
-    labelKey?: string;
+    labelKey?: GetItemKeys<T>;
     class?: any;
     ui?: Accordion['slots'];
 }

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

@@ -0,0 +1,81 @@
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/alert';
+import type { AvatarProps, ButtonProps, IconProps } from '../types';
+import type { ComponentConfig } from '../types/tv';
+type Alert = ComponentConfig<typeof theme, AppConfig, 'alert'>;
+export interface AlertProps {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    title?: string;
+    description?: string;
+    /**
+     * @IconifyIcon
+     */
+    icon?: IconProps['name'];
+    avatar?: AvatarProps;
+    /**
+     * @defaultValue 'primary'
+     */
+    color?: Alert['variants']['color'];
+    /**
+     * @defaultValue 'solid'
+     */
+    variant?: Alert['variants']['variant'];
+    /**
+     * The orientation between the content and the actions.
+     * @defaultValue 'vertical'
+     */
+    orientation?: Alert['variants']['orientation'];
+    /**
+     * Display a list of actions:
+     * - under the title and description when orientation is `vertical`
+     * - next to the close button when orientation is `horizontal`
+     * `{ size: 'xs' }`{lang="ts-type"}
+     */
+    actions?: ButtonProps[];
+    /**
+     * Display a close button to dismiss the alert.
+     * `{ size: 'md', color: 'neutral', variant: 'link' }`{lang="ts-type"}
+     * @emits 'update:open'
+     * @defaultValue false
+     */
+    close?: boolean | Partial<ButtonProps>;
+    /**
+     * The icon displayed in the close button.
+     * @defaultValue appConfig.ui.icons.close
+     * @IconifyIcon
+     */
+    closeIcon?: IconProps['name'];
+    class?: any;
+    ui?: Alert['slots'];
+}
+export interface AlertEmits {
+    'update:open': [value: boolean];
+}
+export interface AlertSlots {
+    leading(props?: {}): any;
+    title(props?: {}): any;
+    description(props?: {}): any;
+    actions(props?: {}): any;
+    close(props: {
+        ui: {
+            [K in keyof Required<Alert['slots']>]: (props?: Record<string, any>) => string;
+        };
+    }): any;
+}
+declare const _default: __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>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,25 @@
+import type { ConfigProviderProps, TooltipProviderProps } from 'reka-ui';
+import type { ToasterProps } from '../types';
+import type { Locale, Messages } from '../types/locale';
+export interface AppProps<T extends Messages = Messages> extends Omit<ConfigProviderProps, 'useId' | 'dir' | 'locale'> {
+    tooltip?: TooltipProviderProps;
+    toaster?: ToasterProps | null;
+    locale?: Locale<T>;
+    portal?: 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;
+    attrs: any;
+    slots: AppSlots;
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T as K]: T[K];
+} & {};

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

@@ -0,0 +1,128 @@
+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 { FormSchema, FormSubmitEvent, InferInput } from '../types/form';
+import type { ComponentConfig } from '../types/tv';
+type AuthForm = ComponentConfig<typeof theme, AppConfig, 'authForm'>;
+type AuthFormField = FormFieldProps & {
+    name: string;
+    type?: 'checkbox' | 'select' | 'password' | 'text' | 'otp' | 'email';
+    defaultValue?: any;
+    otp?: PinInputProps;
+};
+export interface AuthFormProps<T extends FormSchema = FormSchema<object>, F extends AuthFormField = AuthFormField> {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    /**
+     * The icon displayed above the title.
+     * @IconifyIcon
+     */
+    icon?: IconProps['name'];
+    title?: string;
+    description?: string;
+    fields?: F[];
+    /**
+     * Display a list of Button under the description.
+     * `{ color: 'neutral', variant: 'subtle', block: true }`{lang="ts-type"}
+     */
+    providers?: ButtonProps[];
+    /**
+     * The text displayed in the separator.
+     * @defaultValue 'or'
+     */
+    separator?: string | SeparatorProps;
+    /**
+     * Display a submit button at the bottom of the form.
+     * `{ label: 'Continue', block: true }`{lang="ts-type"}
+     */
+    submit?: ButtonProps;
+    schema?: T;
+    validate?: FormProps<T>['validate'];
+    validateOn?: FormProps<T>['validateOn'];
+    validateOnInputDelay?: FormProps<T>['validateOnInputDelay'];
+    disabled?: FormProps<T>['disabled'];
+    loading?: ButtonProps['loading'];
+    loadingAuto?: FormProps<T>['loadingAuto'];
+    class?: any;
+    onSubmit?: FormProps<T>['onSubmit'];
+    ui?: AuthForm['slots'];
+}
+export type AuthFormEmits<T extends object> = {
+    submit: [payload: FormSubmitEvent<T>];
+};
+type DynamicFieldSlots<T, F, SlotProps = {
+    field: F;
+    state: T;
+}> = Record<string, (props: SlotProps) => any> & Record<`${keyof T extends string ? keyof T : never}-field`, (props: SlotProps) => any>;
+type DynamicFormFieldSlots<T> = Record<string, (props?: {}) => any> & Record<`${keyof T extends string ? keyof T : never}-${'label' | 'description' | 'hint' | 'help' | 'error'}`, (props?: {}) => any>;
+export type AuthFormSlots<T extends object = object, F extends AuthFormField = AuthFormField> = {
+    header(props?: {}): any;
+    leading(props?: {}): any;
+    title(props?: {}): any;
+    description(props?: {}): any;
+    providers(props?: {}): any;
+    validation(props?: {}): any;
+    submit(props: {
+        loading: boolean;
+    }): 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<{
+        formRef: Readonly<import("vue").ShallowRef<import("vue").ShallowUnwrapRef<{
+            validate: {
+                <T_1 extends boolean>(opts: {
+                    name?: keyof InferInput<T> | (keyof InferInput<T>)[] | undefined;
+                    silent?: false | undefined;
+                    nested?: boolean;
+                    transform?: T_1 | undefined;
+                }): Promise<import("../types").FormData<T, T_1>>;
+                <T_1 extends boolean>(opts: {
+                    name?: keyof InferInput<T> | (keyof InferInput<T>)[] | undefined;
+                    silent?: true | undefined;
+                    nested?: boolean;
+                    transform?: T_1 | undefined;
+                }): Promise<false | import("../types").FormData<T, T_1>>;
+            };
+            errors: import("vue").Ref<{
+                id?: string | undefined;
+                name?: string | undefined;
+                message: string;
+            }[], import("../types").FormErrorWithId[] | {
+                id?: string | undefined;
+                name?: string | undefined;
+                message: string;
+            }[]>;
+            setErrors(errs: import("../types").FormError[], name?: string | RegExp | keyof InferInput<T> | undefined): void;
+            submit(): Promise<void>;
+            getErrors(name?: string | RegExp | keyof InferInput<T> | undefined): {
+                id?: string | undefined;
+                name?: string | undefined;
+                message: string;
+            }[];
+            clear(name?: string | RegExp | keyof InferInput<T> | undefined): void;
+            disabled: import("vue").ComputedRef<boolean>;
+            loading: import("vue").Ref<boolean, boolean>;
+            dirty: import("vue").ComputedRef<boolean>;
+            dirtyFields: ReadonlySet<import("vue").DeepReadonly<import("@vue/reactivity").UnwrapRefSimple<keyof InferInput<T>>>>;
+            blurredFields: ReadonlySet<import("vue").DeepReadonly<import("@vue/reactivity").UnwrapRefSimple<keyof InferInput<T>>>>;
+            touchedFields: ReadonlySet<import("vue").DeepReadonly<import("@vue/reactivity").UnwrapRefSimple<keyof InferInput<T>>>>;
+        }> | null>>;
+        state: import("vue").Reactive<InferInput<T>>;
+    }>): 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>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T as K]: T[K];
+} & {};

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

@@ -75,7 +75,45 @@ declare const _default: <T extends FormSchema, F extends AuthFormField>(__VLS_pr
         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<{
-        formRef: Readonly<import("vue").ShallowRef<import("vue").ShallowUnwrapRef<import("../types").Form<T>> | null>>;
+        formRef: Readonly<import("vue").ShallowRef<import("vue").ShallowUnwrapRef<{
+            validate: {
+                <T_1 extends boolean>(opts: {
+                    name?: keyof InferInput<T> | (keyof InferInput<T>)[] | undefined;
+                    silent?: false | undefined;
+                    nested?: boolean;
+                    transform?: T_1 | undefined;
+                }): Promise<import("../types").FormData<T, T_1>>;
+                <T_1 extends boolean>(opts: {
+                    name?: keyof InferInput<T> | (keyof InferInput<T>)[] | undefined;
+                    silent?: true | undefined;
+                    nested?: boolean;
+                    transform?: T_1 | undefined;
+                }): Promise<false | import("../types").FormData<T, T_1>>;
+            };
+            errors: import("vue").Ref<{
+                id?: string | undefined;
+                name?: string | undefined;
+                message: string;
+            }[], import("../types").FormErrorWithId[] | {
+                id?: string | undefined;
+                name?: string | undefined;
+                message: string;
+            }[]>;
+            setErrors(errs: import("../types").FormError[], name?: string | RegExp | keyof InferInput<T> | undefined): void;
+            submit(): Promise<void>;
+            getErrors(name?: string | RegExp | keyof InferInput<T> | undefined): {
+                id?: string | undefined;
+                name?: string | undefined;
+                message: string;
+            }[];
+            clear(name?: string | RegExp | keyof InferInput<T> | undefined): void;
+            disabled: import("vue").ComputedRef<boolean>;
+            loading: import("vue").Ref<boolean, boolean>;
+            dirty: import("vue").ComputedRef<boolean>;
+            dirtyFields: ReadonlySet<import("vue").DeepReadonly<import("@vue/reactivity").UnwrapRefSimple<keyof InferInput<T>>>>;
+            blurredFields: ReadonlySet<import("vue").DeepReadonly<import("@vue/reactivity").UnwrapRefSimple<keyof InferInput<T>>>>;
+            touchedFields: ReadonlySet<import("vue").DeepReadonly<import("@vue/reactivity").UnwrapRefSimple<keyof InferInput<T>>>>;
+        }> | null>>;
         state: import("vue").Reactive<InferInput<T>>;
     }>): void;
     attrs: any;

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

@@ -0,0 +1,41 @@
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/avatar';
+import type { ChipProps, IconProps } from '../types';
+import type { ComponentConfig } from '../types/tv';
+type Avatar = ComponentConfig<typeof theme, AppConfig, 'avatar'>;
+export interface AvatarProps {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'span'
+     */
+    as?: any;
+    src?: string;
+    alt?: string;
+    /**
+     * @IconifyIcon
+     */
+    icon?: IconProps['name'];
+    text?: string;
+    /**
+     * @defaultValue 'md'
+     */
+    size?: Avatar['variants']['size'];
+    chip?: boolean | ChipProps;
+    class?: any;
+    style?: any;
+    ui?: Avatar['slots'];
+}
+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<{}>, {
+    as: any;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};