@nuxt/ui 4.7.0 → 4.8.0

package/.nuxt/{ui.css → ui.static.css}

@@ -1,13 +1,3 @@
-@source "/home/runner/work/ui/ui/**/*";
-@source inline("isolate");
-@source "./ui";
-
-@layer base {
-  body {
-    @apply antialiased text-default bg-default scheme-light dark:scheme-dark;
-  }
-}
-
 @theme static {
   --color-old-neutral-50: oklch(98.5% 0 0);
   --color-old-neutral-100: oklch(97% 0 0);

package/LICENSE.md

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 NuxtLabs
+Copyright (c) 2023 Nuxt
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

package/cli/commands/make/component.mjs

@@ -3,7 +3,7 @@ import { resolve } from 'pathe'
 import { defineCommand } from 'citty'
 import { consola } from 'consola'
 import { splitByCase, upperFirst, camelCase, kebabCase } from 'scule'
-import { appendFile, sortFile } from '../../utils.mjs'
+import { appendFile, appendThemeDefault, sortFile } from '../../utils.mjs'
 import templates from '../../templates.mjs'
 
 export default defineCommand({
@@ -75,8 +75,12 @@ export default defineCommand({
 
     if (!args.prose) {
       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'`)
+      const pascal = splitByCase(name).map(p => upperFirst(p)).join('')
+      await appendFile(typesPath, `export * from '../components/${args.content ? 'content/' : ''}${pascal}.vue'`)
       await sortFile(typesPath)
+
+      const useComponentPropsPath = resolve(path, 'src/runtime/composables/useComponentProps.ts')
+      await appendThemeDefault(useComponentPropsPath, camelCase(name), `${pascal}Props`)
     }
   }
 })

package/cli/templates.mjs

@@ -20,18 +20,28 @@ const component = ({ name, primitive, prose, content }) => {
   const upperName = splitByCase(name).map(p => upperFirst(p)).join('')
   const camelName = camelCase(name)
   const kebabName = kebabCase(name)
+  const nested = prose || content
+  const dirPrefix = prose ? 'prose/' : (content ? 'content/' : '')
+  const importPrefix = nested ? '../..' : '..'
+  const componentKey = prose ? `prose.${camelName}` : camelName
+  const componentConfigArgs = prose
+    ? `typeof theme, AppConfig, '${camelName}', 'ui.prose'`
+    : `typeof theme, AppConfig, '${camelName}'`
+  const appConfigLookup = prose
+    ? `appConfig.ui?.prose?.${camelName}`
+    : `appConfig.ui?.${camelName}`
 
   return {
-    filename: `src/runtime/components/${prose ? 'prose/' : ''}${content ? 'content/' : ''}${upperName}.vue`,
+    filename: `src/runtime/components/${dirPrefix}${upperName}.vue`,
     contents: primitive
       ? `
 <script lang="ts">
 import type { VNode } from 'vue'
 import type { AppConfig } from '@nuxt/schema'
-import theme from '#build/ui/${prose ? 'prose/' : ''}${content ? 'content/' : ''}${kebabName}'
-import type { ComponentConfig } from '../types/tv'
+import theme from '#build/ui/${dirPrefix}${kebabName}'
+import type { ComponentConfig } from '${importPrefix}/types/tv'
 
-type ${upperName} = ComponentConfig<typeof theme, AppConfig, '${camelName}'>
+type ${upperName} = ComponentConfig<${componentConfigArgs}>
 
 export interface ${upperName}Props {
   /**
@@ -52,18 +62,22 @@ export interface ${upperName}Slots {
 import { computed } from 'vue'
 import { Primitive } from 'reka-ui'
 import { useAppConfig } from '#imports'
-import { tv } from '../utils/tv'
+import { useComponentProps } from '${importPrefix}/composables/useComponentProps'
+import { tv } from '${importPrefix}/utils/tv'
 
-const props = defineProps<${upperName}Props>()
+const _props = defineProps<${upperName}Props>()
 defineSlots<${upperName}Slots>()
 
+const props = useComponentProps('${componentKey}', _props)
+
 const appConfig = useAppConfig() as ${upperName}['AppConfig']
 
-const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.${camelName} || {}) })())
+// eslint-disable-next-line vue/no-dupe-keys
+const ui = computed(() => tv({ extend: tv(theme), ...(${appConfigLookup} || {}) })())
 </script>
 
 <template>
-  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <Primitive :as="props.as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <slot />
   </Primitive>
 </template>
@@ -71,42 +85,54 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.${camelName}
       : `
 <script lang="ts">
 import type { ${upperName}RootProps, ${upperName}RootEmits } from 'reka-ui'
+import type { VNode } from 'vue'
 import type { AppConfig } from '@nuxt/schema'
-import theme from '#build/ui/${prose ? 'prose/' : ''}${content ? 'content/' : ''}${kebabName}'
-import type { ComponentConfig } from '../types/tv'
+import theme from '#build/ui/${dirPrefix}${kebabName}'
+import type { ComponentConfig } from '${importPrefix}/types/tv'
 
-type ${upperName} = ComponentConfig<typeof theme, AppConfig, '${camelName}'>
+type ${upperName} = ComponentConfig<${componentConfigArgs}>
 
-export interface ${upperName}Props extends Pick<${upperName}RootProps> {
+// TODO: narrow with \`Pick<${upperName}RootProps, '...' | '...'>\` to expose only the props you need.
+export interface ${upperName}Props extends ${upperName}RootProps {
   class?: any
   ui?: ${upperName}['slots']
 }
 
 export interface ${upperName}Emits extends ${upperName}RootEmits {}
 
-export interface ${upperName}Slots {}
+export interface ${upperName}Slots {
+  default?(props?: {}): VNode[]
+}
 </script>
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { ${upperName}Root, useForwardPropsEmits } from 'reka-ui'
+import { ${upperName}Root } from 'reka-ui'
 import { reactivePick } from '@vueuse/core'
 import { useAppConfig } from '#imports'
-import { tv } from '../utils/tv'
+import { useComponentProps } from '${importPrefix}/composables/useComponentProps'
+import { useForwardProps } from '${importPrefix}/composables/useForwardProps'
+import { tv } from '${importPrefix}/utils/tv'
 
-const props = defineProps<${upperName}Props>()
+const _props = defineProps<${upperName}Props>()
 const emits = defineEmits<${upperName}Emits>()
-const slots = defineSlots<${upperName}Slots>()
+defineSlots<${upperName}Slots>()
+
+const props = useComponentProps('${componentKey}', _props)
 
 const appConfig = useAppConfig() as ${upperName}['AppConfig']
 
-const rootProps = useForwardPropsEmits(reactivePick(props), emits)
+// TODO: list the same keys as in \`${upperName}Props\` Pick.
+const rootProps = useForwardProps(reactivePick(props, 'as'), emits)
 
-const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.${camelName} || {}) })())
+// eslint-disable-next-line vue/no-dupe-keys
+const ui = computed(() => tv({ extend: tv(theme), ...(${appConfigLookup} || {}) })())
 </script>
 
 <template>
-  <${upperName}Root v-bind="rootProps" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })" />
+  <${upperName}Root v-bind="rootProps" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <slot />
+  </${upperName}Root>
 </template>
 `
   }

package/cli/utils.mjs

@@ -16,6 +16,25 @@ export async function appendFile(path, contents) {
   }
 }
 
+/**
+ * Insert a `key?: Partial<ComponentTypes.XProps>` entry into the `ThemeDefaults`
+ * interface in `src/runtime/composables/useComponentProps.ts`, keeping entries
+ * sorted alphabetically and avoiding duplicates.
+ */
+export async function appendThemeDefault(path, key, propsType) {
+  const file = await fsp.readFile(path, 'utf-8')
+  const entry = `  ${key}?: Partial<ComponentTypes.${propsType}>`
+
+  const match = file.match(/(export interface ThemeDefaults \{\n)([\s\S]*?)(\n\})/)
+  if (!match) return
+
+  const [, header, body, footer] = match
+  if (body.split('\n').includes(entry)) return
+
+  const sorted = [...body.split('\n'), entry].sort().join('\n')
+  await fsp.writeFile(path, file.replace(match[0], header + sorted + footer))
+}
+
 export function normalizeLocale(locale) {
   if (!locale) {
     return ''

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxt/ui",
-  "version": "4.7.0",
+  "version": "4.8.0",
   "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, addImports } from '@nuxt/kit';
-import { d as defaultOptions, r as resolveColors, a as getDefaultConfig, p as publicComposables, b as addTemplates } from './shared/ui.BIQuJqNV.mjs';
+import { d as defaultOptions, r as resolveColors, g as getDefaultConfig, p as publicComposables, a as addTemplates } from './shared/ui.CoJ8bnb0.mjs';
 import '../dist/runtime/utils/index.js';
 import 'node:url';
 import 'scule';
@@ -11,7 +11,7 @@ import 'pathe';
 import 'tinyglobby';
 
 const name = "@nuxt/ui";
-const version = "4.7.0";
+const version = "4.8.0";
 
 const module$1 = defineNuxtModule({
   meta: {
@@ -50,7 +50,7 @@ const module$1 = defineNuxtModule({
         }
       },
       "@nuxtjs/mdc": {
-        optional: !userUiOptions.mdc && !userUiOptions.content,
+        optional: !userUiOptions.mdc,
         defaults: {
           highlight: {
             theme: {
@@ -142,7 +142,7 @@ const module$1 = defineNuxtModule({
     });
     addImports(
       Object.entries(publicComposables).flatMap(
-        ([file, exports$1]) => exports$1.map((name2) => ({ name: name2, from: resolve(`./runtime/composables/${file}`) }))
+        ([file, exports]) => exports.map((name2) => ({ name: name2, from: resolve(`./runtime/composables/${file}`) }))
       )
     );
     addTemplates(options, nuxt, resolve);

package/dist/runtime/components/Accordion.vue

@@ -4,14 +4,15 @@ import theme from "#build/ui/accordion";
 
 <script setup>
 import { computed } from "vue";
-import { AccordionRoot, AccordionItem, AccordionHeader, AccordionTrigger, AccordionContent, useForwardPropsEmits } from "reka-ui";
+import { AccordionRoot, AccordionItem, AccordionHeader, AccordionTrigger, AccordionContent } from "reka-ui";
+import { useForwardProps } from "../composables/useForwardProps";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
-import { useComponentUI } from "../composables/useComponentUI";
+import { useComponentProps } from "../composables/useComponentProps";
 import { get } from "../utils";
 import { tv } from "../utils/tv";
 import UIcon from "./Icon.vue";
-const props = defineProps({
+const _props = defineProps({
   as: { type: null, required: false },
   items: { type: Array, required: false },
   trailingIcon: { type: null, required: false },
@@ -28,16 +29,16 @@ const props = defineProps({
 });
 const emits = defineEmits(["update:modelValue"]);
 const slots = defineSlots();
+const props = useComponentProps("accordion", _props);
 const appConfig = useAppConfig();
-const uiProp = useComponentUI("accordion", props);
-const rootProps = useForwardPropsEmits(reactivePick(props, "as", "collapsible", "defaultValue", "disabled", "modelValue", "unmountOnHide"), emits);
+const rootProps = useForwardProps(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" :type="type" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
+  <AccordionRoot v-bind="rootProps" :type="props.type" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <AccordionItem
       v-for="(item, index) in props.items"
       v-slot="{ open }"
@@ -45,27 +46,27 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.accordion ||
       :value="get(item, props.valueKey) ?? String(index)"
       :disabled="item.disabled"
       data-slot="item"
-      :class="ui.item({ class: [uiProp?.item, item.ui?.item, item.class] })"
+      :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class] })"
     >
-      <AccordionHeader as="div" data-slot="header" :class="ui.header({ class: [uiProp?.header, item.ui?.header] })">
-        <AccordionTrigger data-slot="trigger" :class="ui.trigger({ class: [uiProp?.trigger, item.ui?.trigger], disabled: item.disabled })">
+      <AccordionHeader as="div" data-slot="header" :class="ui.header({ class: [props.ui?.header, item.ui?.header] })">
+        <AccordionTrigger data-slot="trigger" :class="ui.trigger({ class: [props.ui?.trigger, item.ui?.trigger], disabled: item.disabled })">
           <slot name="leading" :item="item" :index="index" :open="open" :ui="ui">
-            <UIcon v-if="item.icon" :name="item.icon" data-slot="leadingIcon" :class="ui.leadingIcon({ class: [uiProp?.leadingIcon, item?.ui?.leadingIcon] })" />
+            <UIcon v-if="item.icon" :name="item.icon" data-slot="leadingIcon" :class="ui.leadingIcon({ class: [props.ui?.leadingIcon, item?.ui?.leadingIcon] })" />
           </slot>
 
-          <span v-if="get(item, props.labelKey) || !!slots.default" data-slot="label" :class="ui.label({ class: [uiProp?.label, item.ui?.label] })">
+          <span v-if="get(item, props.labelKey) || !!slots.default" data-slot="label" :class="ui.label({ class: [props.ui?.label, item.ui?.label] })">
             <slot :item="item" :index="index" :open="open">{{ get(item, props.labelKey) }}</slot>
           </span>
 
           <slot name="trailing" :item="item" :index="index" :open="open" :ui="ui">
-            <UIcon :name="item.trailingIcon || trailingIcon || appConfig.ui.icons.chevronDown" data-slot="trailingIcon" :class="ui.trailingIcon({ class: [uiProp?.trailingIcon, item.ui?.trailingIcon] })" />
+            <UIcon :name="item.trailingIcon || props.trailingIcon || appConfig.ui.icons.chevronDown" data-slot="trailingIcon" :class="ui.trailingIcon({ class: [props.ui?.trailingIcon, item.ui?.trailingIcon] })" />
           </slot>
         </AccordionTrigger>
       </AccordionHeader>
 
-      <AccordionContent v-if="item.content || !!slots.content || item.slot && !!slots[item.slot] || !!slots.body || item.slot && !!slots[`${item.slot}-body`]" data-slot="content" :class="ui.content({ class: [uiProp?.content, item.ui?.content] })">
+      <AccordionContent v-if="item.content || !!slots.content || item.slot && !!slots[item.slot] || !!slots.body || item.slot && !!slots[`${item.slot}-body`]" data-slot="content" :class="ui.content({ class: [props.ui?.content, item.ui?.content] })">
         <slot :name="item.slot || 'content'" :item="item" :index="index" :open="open" :ui="ui">
-          <div data-slot="body" :class="ui.body({ class: [uiProp?.body, item.ui?.body] })">
+          <div data-slot="body" :class="ui.body({ class: [props.ui?.body, item.ui?.body] })">
             <slot :name="item.slot ? `${item.slot}-body` : 'body'" :item="item" :index="index" :open="open" :ui="ui">
               {{ item.content }}
             </slot>

package/dist/runtime/components/Alert.vue

@@ -6,13 +6,13 @@ import theme from "#build/ui/alert";
 import { computed } from "vue";
 import { Primitive } from "reka-ui";
 import { useAppConfig } from "#imports";
-import { useComponentUI } from "../composables/useComponentUI";
+import { useComponentProps } from "../composables/useComponentProps";
 import { useLocale } from "../composables/useLocale";
 import { tv } from "../utils/tv";
 import UIcon from "./Icon.vue";
 import UAvatar from "./Avatar.vue";
 import UButton from "./Button.vue";
-const props = defineProps({
+const _props = defineProps({
   as: { type: null, required: false },
   title: { type: String, required: false },
   description: { type: String, required: false },
@@ -29,9 +29,9 @@ const props = defineProps({
 });
 const emits = defineEmits(["update:open"]);
 const slots = defineSlots();
+const props = useComponentProps("alert", _props);
 const { t } = useLocale();
 const appConfig = useAppConfig();
-const uiProp = useComponentUI("alert", props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.alert || {} })({
   color: props.color,
   variant: props.variant,
@@ -41,48 +41,48 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.alert || {} }
 </script>
 
 <template>
-  <Primitive :as="as" :data-orientation="orientation" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
+  <Primitive :as="props.as" :data-orientation="props.orientation" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <slot name="leading" :ui="ui">
-      <UAvatar v-if="avatar" :size="uiProp?.avatarSize || ui.avatarSize()" v-bind="avatar" data-slot="avatar" :class="ui.avatar({ class: uiProp?.avatar })" />
-      <UIcon v-else-if="icon" :name="icon" data-slot="icon" :class="ui.icon({ class: uiProp?.icon })" />
+      <UAvatar v-if="props.avatar" :size="props.ui?.avatarSize || ui.avatarSize()" v-bind="props.avatar" data-slot="avatar" :class="ui.avatar({ class: props.ui?.avatar })" />
+      <UIcon v-else-if="props.icon" :name="props.icon" data-slot="icon" :class="ui.icon({ class: props.ui?.icon })" />
     </slot>
 
-    <div data-slot="wrapper" :class="ui.wrapper({ class: uiProp?.wrapper })">
-      <div v-if="title || !!slots.title" data-slot="title" :class="ui.title({ class: uiProp?.title })">
+    <div data-slot="wrapper" :class="ui.wrapper({ class: props.ui?.wrapper })">
+      <div v-if="props.title || !!slots.title" data-slot="title" :class="ui.title({ class: props.ui?.title })">
         <slot name="title">
-          {{ title }}
+          {{ props.title }}
         </slot>
       </div>
-      <div v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: uiProp?.description })">
+      <div v-if="props.description || !!slots.description" data-slot="description" :class="ui.description({ class: props.ui?.description })">
         <slot name="description">
-          {{ description }}
+          {{ props.description }}
         </slot>
       </div>
 
-      <div v-if="orientation === 'vertical' && (actions?.length || !!slots.actions)" data-slot="actions" :class="ui.actions({ class: uiProp?.actions })">
+      <div v-if="props.orientation === 'vertical' && (props.actions?.length || !!slots.actions)" data-slot="actions" :class="ui.actions({ class: props.ui?.actions })">
         <slot name="actions">
-          <UButton v-for="(action, index) in actions" :key="index" size="xs" v-bind="action" />
+          <UButton v-for="(action, index) in props.actions" :key="index" size="xs" v-bind="action" />
         </slot>
       </div>
     </div>
 
-    <div v-if="orientation === 'horizontal' && (actions?.length || !!slots.actions) || close" data-slot="actions" :class="ui.actions({ class: uiProp?.actions, orientation: 'horizontal' })">
-      <template v-if="orientation === 'horizontal' && (actions?.length || !!slots.actions)">
+    <div v-if="props.orientation === 'horizontal' && (props.actions?.length || !!slots.actions) || props.close" data-slot="actions" :class="ui.actions({ class: props.ui?.actions, orientation: 'horizontal' })">
+      <template v-if="props.orientation === 'horizontal' && (props.actions?.length || !!slots.actions)">
         <slot name="actions">
-          <UButton v-for="(action, index) in actions" :key="index" size="xs" v-bind="action" />
+          <UButton v-for="(action, index) in props.actions" :key="index" size="xs" v-bind="action" />
         </slot>
       </template>
 
       <slot name="close" :ui="ui">
         <UButton
-          v-if="close"
-          :icon="closeIcon || appConfig.ui.icons.close"
+          v-if="props.close"
+          :icon="props.closeIcon || appConfig.ui.icons.close"
           color="neutral"
           variant="link"
           :aria-label="t('alert.close')"
-          v-bind="typeof close === 'object' ? close : {}"
+          v-bind="typeof props.close === 'object' ? props.close : {}"
           data-slot="close"
-          :class="ui.close({ class: uiProp?.close })"
+          :class="ui.close({ class: props.ui?.close })"
           @click="emits('update:open', false)"
         />
       </slot>

package/dist/runtime/components/AuthForm.vue

@@ -6,7 +6,7 @@ import theme from "#build/ui/auth-form";
 import { reactive, ref, computed, useTemplateRef } from "vue";
 import { Primitive } from "reka-ui";
 import { useAppConfig } from "#imports";
-import { useComponentUI } from "../composables/useComponentUI";
+import { useComponentProps } from "../composables/useComponentProps";
 import { useLocale } from "../composables/useLocale";
 import { omit, pick } from "../utils";
 import { tv } from "../utils/tv";
@@ -20,7 +20,7 @@ import USelectMenu from "./SelectMenu.vue";
 import UInput from "./Input.vue";
 import UPinInput from "./PinInput.vue";
 defineOptions({ inheritAttrs: false });
-const props = defineProps({
+const _props = defineProps({
   as: { type: null, required: false },
   icon: { type: null, required: false },
   title: { type: String, required: false },
@@ -40,7 +40,7 @@ const props = defineProps({
   onSubmit: { type: Function, required: false },
   ui: { type: Object, required: false }
 });
-const state = reactive((props.fields || []).reduce((acc, field) => {
+const state = reactive((_props.fields || []).reduce((acc, field) => {
   if (field.name) {
     acc[field.name] = field.defaultValue;
   }
@@ -48,9 +48,9 @@ const state = reactive((props.fields || []).reduce((acc, field) => {
 }, {}));
 defineEmits(["submit"]);
 const slots = defineSlots();
+const props = useComponentProps("authForm", _props);
 const { t } = useLocale();
 const appConfig = useAppConfig();
-const uiProp = useComponentUI("authForm", props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.authForm || {} })());
 const formRef = useTemplateRef("formRef");
 const passwordVisibility = ref(false);
@@ -79,34 +79,34 @@ defineExpose({
 </script>
 
 <template>
-  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
-    <div v-if="icon || !!slots.leading || (title || !!slots.title) || (description || !!slots.description) || !!slots.header" data-slot="header" :class="ui.header({ class: uiProp?.header })">
+  <Primitive :as="props.as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div v-if="props.icon || !!slots.leading || (props.title || !!slots.title) || (props.description || !!slots.description) || !!slots.header" data-slot="header" :class="ui.header({ class: props.ui?.header })">
       <slot name="header">
-        <div v-if="icon || !!slots.leading" data-slot="leading" :class="ui.leading({ class: uiProp?.leading })">
+        <div v-if="props.icon || !!slots.leading" data-slot="leading" :class="ui.leading({ class: props.ui?.leading })">
           <slot name="leading" :ui="ui">
-            <UIcon v-if="icon" :name="icon" data-slot="leadingIcon" :class="ui.leadingIcon({ class: uiProp?.leadingIcon })" />
+            <UIcon v-if="props.icon" :name="props.icon" data-slot="leadingIcon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
           </slot>
         </div>
 
-        <div v-if="title || !!slots.title" data-slot="title" :class="ui.title({ class: uiProp?.title })">
+        <div v-if="props.title || !!slots.title" data-slot="title" :class="ui.title({ class: props.ui?.title })">
           <slot name="title">
-            {{ title }}
+            {{ props.title }}
           </slot>
         </div>
 
-        <div v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: uiProp?.description })">
+        <div v-if="props.description || !!slots.description" data-slot="description" :class="ui.description({ class: props.ui?.description })">
           <slot name="description">
-            {{ description }}
+            {{ props.description }}
           </slot>
         </div>
       </slot>
     </div>
 
-    <div data-slot="body" :class="ui.body({ class: uiProp?.body })">
-      <div v-if="providers?.length || !!slots.providers" data-slot="providers" :class="ui.providers({ class: uiProp?.providers })">
+    <div data-slot="body" :class="ui.body({ class: props.ui?.body })">
+      <div v-if="props.providers?.length || !!slots.providers" data-slot="providers" :class="ui.providers({ class: props.ui?.providers })">
         <slot name="providers">
           <UButton
-            v-for="(provider, index) in providers"
+            v-for="(provider, index) in props.providers"
             :key="index"
             block
             color="neutral"
@@ -118,29 +118,29 @@ defineExpose({
 
       <slot name="separator">
         <USeparator
-          v-if="providers?.length && fields?.length"
-          v-bind="typeof separator === 'object' ? separator : { label: separator }"
+          v-if="props.providers?.length && props.fields?.length"
+          v-bind="typeof props.separator === 'object' ? props.separator : { label: props.separator }"
           data-slot="separator"
-          :class="ui.separator({ class: uiProp?.separator })"
+          :class="ui.separator({ class: props.ui?.separator })"
         />
       </slot>
 
       <UForm
-        v-if="fields?.length"
+        v-if="props.fields?.length"
         ref="formRef"
         :state="state"
-        :schema="schema"
-        :validate="validate"
-        :validate-on="validateOn"
-        :disabled="disabled"
-        :loading-auto="loadingAuto"
+        :schema="props.schema"
+        :validate="props.validate"
+        :validate-on="props.validateOn"
+        :disabled="props.disabled"
+        :loading-auto="props.loadingAuto"
         data-slot="form"
-        :class="ui.form({ class: uiProp?.form })"
+        :class="ui.form({ class: props.ui?.form })"
         v-bind="$attrs"
-        @submit="onSubmit"
+        @submit="props.onSubmit"
       >
         <UFormField
-          v-for="field in fields"
+          v-for="field in props.fields"
           :key="field.name"
           v-bind="pickFieldProps(field)"
         >
@@ -149,14 +149,14 @@ defineExpose({
               v-if="field.type === 'checkbox'"
               v-model="state[field.name]"
               data-slot="checkbox"
-              :class="ui.checkbox({ class: uiProp?.checkbox })"
+              :class="ui.checkbox({ class: props.ui?.checkbox })"
               v-bind="omitFieldProps(field)"
             />
             <USelectMenu
               v-else-if="field.type === 'select'"
               v-model="state[field.name]"
               data-slot="select"
-              :class="ui.select({ class: uiProp?.select })"
+              :class="ui.select({ class: props.ui?.select })"
               v-bind="omitFieldProps(field)"
             />
             <UPinInput
@@ -164,7 +164,7 @@ defineExpose({
               :id="field.name"
               v-model="state[field.name]"
               data-slot="otp"
-              :class="ui.otp({ class: uiProp?.otp })"
+              :class="ui.otp({ class: props.ui?.otp })"
               v-bind="Object.assign({}, omitFieldProps(field), typeof field.otp === 'object' ? field.otp : {})"
               otp
             />
@@ -173,7 +173,7 @@ defineExpose({
               ref="passwordRef"
               v-model="state[field.name]"
               data-slot="password"
-              :class="ui.password({ class: uiProp?.password })"
+              :class="ui.password({ class: props.ui?.password })"
               v-bind="omitFieldProps(field)"
               :type="passwordVisibility ? 'text' : 'password'"
             >
@@ -194,7 +194,7 @@ defineExpose({
               v-else
               v-model="state[field.name]"
               data-slot="input"
-              :class="ui.input({ class: uiProp?.input })"
+              :class="ui.input({ class: props.ui?.input })"
               v-bind="omitFieldProps(field)"
             />
           </slot>
@@ -218,20 +218,20 @@ defineExpose({
 
         <slot v-if="!!slots.validation" name="validation" />
 
-        <slot name="submit" :loading="loading">
+        <slot name="submit" :loading="props.loading">
           <UButton
             type="submit"
             :label="t('authForm.submit')"
             block
-            :loading="loading"
-            :loading-auto="loadingAuto"
-            v-bind="submit"
+            :loading="props.loading"
+            :loading-auto="props.loadingAuto"
+            v-bind="props.submit"
           />
         </slot>
       </UForm>
     </div>
 
-    <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: uiProp?.footer })">
+    <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: props.ui?.footer })">
       <slot name="footer" />
     </div>
   </Primitive>

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

@@ -25,6 +25,10 @@ export interface AvatarProps extends /** @vue-ignore */ Omit<ImgHTMLAttributes,
      * @defaultValue 'md'
      */
     size?: Avatar['variants']['size'];
+    /**
+     * @defaultValue 'neutral'
+     */
+    color?: Avatar['variants']['color'];
     chip?: boolean | ChipProps;
     class?: any;
     style?: any;