@nuxt/ui 4.7.0 → 4.8.0

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

@@ -2,7 +2,7 @@ import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import type { NuxtError } from '#app';
 import theme from '#build/ui/error';
-import type { ButtonProps } from '../types';
+import type { ButtonProps, IconProps } from '../types';
 import type { ComponentConfig } from '../types/tv';
 type Error = ComponentConfig<typeof theme, AppConfig, 'error'>;
 export interface ErrorProps {
@@ -11,6 +11,11 @@ export interface ErrorProps {
      * @defaultValue 'main'
      */
     as?: any;
+    /**
+     * The icon displayed above the status code.
+     * @IconifyIcon
+     */
+    icon?: IconProps['name'];
     error?: Partial<NuxtError & {
         message: string;
     }>;
@@ -30,6 +35,9 @@ export interface ErrorProps {
 }
 export interface ErrorSlots {
     default?(props?: {}): VNode[];
+    leading?(props: {
+        ui: Error['ui'];
+    }): VNode[];
     statusCode?(props?: {}): VNode[];
     statusMessage?(props?: {}): VNode[];
     message?(props?: {}): VNode[];

package/dist/runtime/components/FieldGroup.vue

@@ -6,10 +6,10 @@ import theme from "#build/ui/field-group";
 import { provide, computed } from "vue";
 import { Primitive } from "reka-ui";
 import { useAppConfig } from "#imports";
-import { useComponentUI } from "../composables/useComponentUI";
+import { useComponentProps } from "../composables/useComponentProps";
 import { fieldGroupInjectionKey } from "../composables/useFieldGroup";
 import { tv } from "../utils/tv";
-const props = defineProps({
+const _props = defineProps({
   as: { type: null, required: false },
   size: { type: null, required: false },
   orientation: { type: null, required: false, default: "horizontal" },
@@ -17,8 +17,8 @@ const props = defineProps({
   ui: { type: Object, required: false }
 });
 defineSlots();
+const props = useComponentProps("fieldGroup", _props);
 const appConfig = useAppConfig();
-const uiProp = useComponentUI("fieldGroup", props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.fieldGroup || {} }));
 provide(fieldGroupInjectionKey, computed(() => ({
   orientation: props.orientation,
@@ -27,7 +27,7 @@ provide(fieldGroupInjectionKey, computed(() => ({
 </script>
 
 <template>
-  <Primitive :as="as" :data-orientation="orientation" :class="ui({ orientation, class: [uiProp?.base, props.class] })">
+  <Primitive :as="props.as" :data-orientation="props.orientation" :class="ui({ orientation: props.orientation, class: [props.ui?.base, props.class] })">
     <slot />
   </Primitive>
 </template>

package/dist/runtime/components/FileUpload.vue

@@ -8,8 +8,7 @@ import { Primitive, VisuallyHidden } from "reka-ui";
 import { createReusableTemplate } from "@vueuse/core";
 import { useAppConfig } from "#imports";
 import { useLocale } from "../composables/useLocale";
-import { useComponentUI } from "../composables/useComponentUI";
-import { useResolvedVariants } from "../composables/useResolvedVariants";
+import { useComponentProps } from "../composables/useComponentProps";
 import { useFormField } from "../composables/useFormField";
 import { useFileUpload } from "../composables/useFileUpload";
 import { tv } from "../utils/tv";
@@ -17,7 +16,7 @@ import UAvatar from "./Avatar.vue";
 import UButton from "./Button.vue";
 import UIcon from "./Icon.vue";
 defineOptions({ inheritAttrs: false });
-const props = defineProps({
+const _props = defineProps({
   as: { type: null, required: false },
   id: { type: String, required: false },
   name: { type: String, required: false },
@@ -48,11 +47,11 @@ const props = defineProps({
 const emits = defineEmits(["change"]);
 const slots = defineSlots();
 const modelValue = defineModel({ type: null });
+const props = useComponentProps("fileUpload", _props);
 const appConfig = useAppConfig();
-const uiProp = useComponentUI("fileUpload", props);
 const { t } = useLocale();
 const [DefineFilesTemplate, ReuseFilesTemplate] = createReusableTemplate();
-const { accept, multiple, reset } = toRefs(props);
+const { accept, multiple, reset } = toRefs(_props);
 const { isDragging, open, inputRef, dropzoneRef } = useFileUpload({
   accept,
   reset,
@@ -60,10 +59,9 @@ const { isDragging, open, inputRef, dropzoneRef } = useFileUpload({
   dropzone: props.dropzone,
   onUpdate
 });
-const { emitFormInput, emitFormChange, id, name, color, highlight, disabled, ariaAttrs } = useFormField(props);
-const { variant: resolvedVariant } = useResolvedVariants("fileUpload", props, theme, ["variant"]);
-const variant = computed(() => props.multiple ? "area" : resolvedVariant.value);
-const layout = computed(() => resolvedVariant.value === "button" && !props.multiple ? "grid" : props.layout);
+const { emitFormInput, emitFormChange, id, name, color, highlight, disabled, ariaAttrs } = useFormField(_props);
+const variant = computed(() => props.multiple ? "area" : props.variant);
+const layout = computed(() => props.variant === "button" && !props.multiple ? "grid" : props.layout);
 const position = computed(() => {
   if (layout.value === "grid" && props.multiple) {
     return "inside";
@@ -76,13 +74,13 @@ const position = computed(() => {
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.fileUpload || {} })({
   dropzone: props.dropzone,
   interactive: props.interactive,
-  color: color.value,
+  color: color.value ?? props.color,
   size: props.size,
   variant: variant.value,
   layout: layout.value,
   position: position.value,
   multiple: props.multiple,
-  highlight: highlight.value,
+  highlight: highlight.value ?? props.highlight,
   disabled: props.disabled
 }));
 function createObjectUrl(file) {
@@ -147,29 +145,29 @@ defineExpose({
     <template v-if="props.preview && modelValue && (Array.isArray(modelValue) ? modelValue.length : true)">
       <slot name="files-top" :files="modelValue" :open="open" :remove-file="removeFile" />
 
-      <div data-slot="files" :class="ui.files({ class: uiProp?.files })">
+      <div data-slot="files" :class="ui.files({ class: props.ui?.files })">
         <slot name="files" :files="modelValue">
-          <div v-for="(file, index) in Array.isArray(modelValue) ? modelValue : [modelValue]" :key="file.name" data-slot="file" :class="ui.file({ class: uiProp?.file })">
+          <div v-for="(file, index) in Array.isArray(modelValue) ? modelValue : [modelValue]" :key="file.name" data-slot="file" :class="ui.file({ class: props.ui?.file })">
             <slot name="file" :file="file" :index="index">
               <slot name="file-leading" :file="file" :index="index" :ui="ui">
                 <UAvatar
                   :as="{ img: 'img' }"
                   :src="createObjectUrl(file)"
-                  :icon="fileIcon || appConfig.ui.icons.file"
+                  :icon="props.fileIcon || appConfig.ui.icons.file"
                   :size="props.size"
                   data-slot="fileLeadingAvatar"
-                  :class="ui.fileLeadingAvatar({ class: uiProp?.fileLeadingAvatar })"
+                  :class="ui.fileLeadingAvatar({ class: props.ui?.fileLeadingAvatar })"
                 />
               </slot>
 
-              <div data-slot="fileWrapper" :class="ui.fileWrapper({ class: uiProp?.fileWrapper })">
-                <span data-slot="fileName" :class="ui.fileName({ class: uiProp?.fileName })">
+              <div data-slot="fileWrapper" :class="ui.fileWrapper({ class: props.ui?.fileWrapper })">
+                <span data-slot="fileName" :class="ui.fileName({ class: props.ui?.fileName })">
                   <slot name="file-name" :file="file" :index="index">
                     {{ file.name }}
                   </slot>
                 </span>
 
-                <span data-slot="fileSize" :class="ui.fileSize({ class: uiProp?.fileSize })">
+                <span data-slot="fileSize" :class="ui.fileSize({ class: props.ui?.fileSize })">
                   <slot name="file-size" :file="file" :index="index">
                     {{ formatFileSize(file.size) }}
                   </slot>
@@ -178,7 +176,7 @@ defineExpose({
 
               <slot name="file-trailing" :file="file" :index="index" :ui="ui">
                 <UButton
-                  v-if="fileDelete"
+                  v-if="props.fileDelete"
                   color="neutral"
                   v-bind="{
   ...layout === 'grid' ? {
@@ -186,14 +184,14 @@ defineExpose({
     size: 'xs'
   } : {
     variant: 'link',
-    size
+    size: props.size
   },
-  ...typeof fileDelete === 'object' ? fileDelete : void 0
+  ...typeof props.fileDelete === 'object' ? props.fileDelete : void 0
 }"
                   :aria-label="t('fileUpload.removeFile', { filename: file.name })"
-                  :trailing-icon="fileDeleteIcon || appConfig.ui.icons.close"
+                  :trailing-icon="props.fileDeleteIcon || appConfig.ui.icons.close"
                   data-slot="fileTrailingButton"
-                  :class="ui.fileTrailingButton({ class: uiProp?.fileTrailingButton })"
+                  :class="ui.fileTrailingButton({ class: props.ui?.fileTrailingButton })"
                   @click.stop.prevent="removeFile(index)"
                 />
               </slot>
@@ -206,42 +204,43 @@ defineExpose({
     </template>
   </DefineFilesTemplate>
 
-  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
+  <Primitive :as="props.as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <slot :open="open" :remove-file="removeFile" :ui="ui">
       <component
         :is="variant === 'button' ? 'button' : 'div'"
         ref="dropzoneRef"
         :type="variant === 'button' ? 'button' : void 0"
         :role="variant === 'button' ? void 0 : 'button'"
+        :disabled="variant === 'button' ? disabled : void 0"
         :data-dragging="isDragging"
         data-slot="base"
-        :class="ui.base({ class: uiProp?.base })"
-        :tabindex="interactive && !disabled ? 0 : -1"
-        @click="interactive && !disabled && open()"
+        :class="ui.base({ class: props.ui?.base })"
+        :tabindex="props.interactive && !disabled ? 0 : -1"
+        @click="props.interactive && !disabled && open()"
         @keydown.space.prevent
-        @keyup.enter.space="interactive && !disabled && open()"
+        @keyup.enter.space="props.interactive && !disabled && open()"
       >
         <ReuseFilesTemplate v-if="position === 'inside'" />
 
-        <div v-if="position === 'inside' ? !props.preview || (multiple ? !modelValue?.length : !modelValue) : true" data-slot="wrapper" :class="ui.wrapper({ class: uiProp?.wrapper })">
+        <div v-if="position === 'inside' ? !props.preview || (multiple ? !modelValue?.length : !modelValue) : true" data-slot="wrapper" :class="ui.wrapper({ class: props.ui?.wrapper })">
           <slot name="leading" :ui="ui">
-            <UIcon v-if="variant === 'button'" :name="icon || appConfig.ui.icons.upload" data-slot="icon" :class="ui.icon({ class: uiProp?.icon })" />
-            <UAvatar v-else :icon="icon || appConfig.ui.icons.upload" :size="props.size" data-slot="avatar" :class="ui.avatar({ class: uiProp?.avatar })" />
+            <UIcon v-if="variant === 'button'" :name="props.icon || appConfig.ui.icons.upload" data-slot="icon" :class="ui.icon({ class: props.ui?.icon })" />
+            <UAvatar v-else :icon="props.icon || appConfig.ui.icons.upload" :size="props.size" data-slot="avatar" :class="ui.avatar({ class: props.ui?.avatar })" />
           </slot>
 
           <template v-if="variant !== 'button'">
-            <div v-if="label || !!slots.label" data-slot="label" :class="ui.label({ class: uiProp?.label })">
+            <div v-if="props.label || !!slots.label" data-slot="label" :class="ui.label({ class: props.ui?.label })">
               <slot name="label">
-                {{ label }}
+                {{ props.label }}
               </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="!!slots.actions" data-slot="actions" :class="ui.actions({ class: uiProp?.actions })">
+            <div v-if="!!slots.actions" data-slot="actions" :class="ui.actions({ class: props.ui?.actions })">
               <slot name="actions" :files="modelValue" :open="open" :remove-file="removeFile" />
             </div>
           </template>
@@ -260,7 +259,7 @@ defineExpose({
       :name="name"
       :accept="accept"
       :multiple="multiple"
-      :required="required"
+      :required="props.required"
       :disabled="disabled"
       v-bind="{ ...$attrs, ...ariaAttrs }"
     />

package/dist/runtime/components/Footer.vue

@@ -6,41 +6,41 @@ import theme from "#build/ui/footer";
 import { computed } from "vue";
 import { Primitive } from "reka-ui";
 import { useAppConfig } from "#imports";
-import { useComponentUI } from "../composables/useComponentUI";
+import { useComponentProps } from "../composables/useComponentProps";
 import { tv } from "../utils/tv";
 import UContainer from "./Container.vue";
-const props = defineProps({
+const _props = defineProps({
   as: { type: null, required: false, default: "footer" },
   class: { type: null, required: false },
   ui: { type: Object, required: false }
 });
 const slots = defineSlots();
+const props = useComponentProps("footer", _props);
 const appConfig = useAppConfig();
-const uiProp = useComponentUI("footer", props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.footer || {} })());
 </script>
 
 <template>
-  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
-    <div v-if="!!slots.top" data-slot="top" :class="ui.top({ class: uiProp?.top })">
+  <Primitive :as="props.as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div v-if="!!slots.top" data-slot="top" :class="ui.top({ class: props.ui?.top })">
       <slot name="top" />
     </div>
 
-    <UContainer data-slot="container" :class="ui.container({ class: uiProp?.container })">
-      <div data-slot="right" :class="ui.right({ class: uiProp?.right })">
+    <UContainer data-slot="container" :class="ui.container({ class: props.ui?.container })">
+      <div data-slot="right" :class="ui.right({ class: props.ui?.right })">
         <slot name="right" />
       </div>
 
-      <div data-slot="center" :class="ui.center({ class: uiProp?.center })">
+      <div data-slot="center" :class="ui.center({ class: props.ui?.center })">
         <slot />
       </div>
 
-      <div data-slot="left" :class="ui.left({ class: uiProp?.left })">
+      <div data-slot="left" :class="ui.left({ class: props.ui?.left })">
         <slot name="left" />
       </div>
     </UContainer>
 
-    <div v-if="!!slots.bottom" data-slot="bottom" :class="ui.bottom({ class: uiProp?.bottom })">
+    <div v-if="!!slots.bottom" data-slot="bottom" :class="ui.bottom({ class: props.ui?.bottom })">
       <slot name="bottom" />
     </div>
   </Primitive>

package/dist/runtime/components/FooterColumns.vue

@@ -6,54 +6,54 @@ import theme from "#build/ui/footer-columns";
 import { computed } from "vue";
 import { Primitive } from "reka-ui";
 import { useAppConfig } from "#imports";
-import { useComponentUI } from "../composables/useComponentUI";
+import { useComponentProps } from "../composables/useComponentProps";
 import { pickLinkProps } from "../utils/link";
 import { tv } from "../utils/tv";
 import ULink from "./Link.vue";
 import ULinkBase from "./LinkBase.vue";
 import UIcon from "./Icon.vue";
-const props = defineProps({
+const _props = defineProps({
   as: { type: null, required: false, default: "nav" },
   class: { type: null, required: false },
   columns: { type: Array, required: false },
   ui: { type: Object, required: false }
 });
 const slots = defineSlots();
+const props = useComponentProps("footerColumns", _props);
 const appConfig = useAppConfig();
-const uiProp = useComponentUI("footerColumns", props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.footerColumns || {} })());
 </script>
 
 <template>
-  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
-    <div v-if="!!slots.left" data-slot="left" :class="ui.left({ class: uiProp?.left })">
+  <Primitive :as="props.as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div v-if="!!slots.left" data-slot="left" :class="ui.left({ class: props.ui?.left })">
       <slot name="left" />
     </div>
 
-    <div v-if="!!slots.default || columns?.length" data-slot="center" :class="ui.center({ class: uiProp?.center })">
+    <div v-if="!!slots.default || props.columns?.length" data-slot="center" :class="ui.center({ class: props.ui?.center })">
       <slot>
-        <div v-for="(column, index) in columns" :key="index">
-          <h3 data-slot="label" :class="ui.label({ class: uiProp?.label })">
+        <div v-for="(column, index) in props.columns" :key="index">
+          <h3 data-slot="label" :class="ui.label({ class: props.ui?.label })">
             <slot name="column-label" :column="column">
               {{ column.label }}
             </slot>
           </h3>
 
-          <ul data-slot="list" :class="ui.list({ class: uiProp?.list })">
-            <li v-for="(link, linkIndex) in column.children" :key="linkIndex" data-slot="item" :class="ui.item({ class: [uiProp?.item, link.ui?.item] })">
+          <ul data-slot="list" :class="ui.list({ class: props.ui?.list })">
+            <li v-for="(link, linkIndex) in column.children" :key="linkIndex" data-slot="item" :class="ui.item({ class: [props.ui?.item, link.ui?.item] })">
               <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(link)" custom>
-                <ULinkBase v-bind="slotProps" data-slot="link" :class="ui.link({ class: [uiProp?.link, link.ui?.link, link.class], active })">
+                <ULinkBase v-bind="slotProps" data-slot="link" :class="ui.link({ class: [props.ui?.link, link.ui?.link, link.class], active })">
                   <slot name="link" :link="link" :active="active" :ui="ui">
                     <slot name="link-leading" :link="link" :active="active" :ui="ui">
-                      <UIcon v-if="link.icon" :name="link.icon" data-slot="linkLeadingIcon" :class="ui.linkLeadingIcon({ class: [uiProp?.linkLeadingIcon, link.ui?.linkLeadingIcon], active })" />
+                      <UIcon v-if="link.icon" :name="link.icon" data-slot="linkLeadingIcon" :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, link.ui?.linkLeadingIcon], active })" />
                     </slot>
 
-                    <span v-if="link.label || !!slots['link-label']" data-slot="linkLabel" :class="ui.linkLabel({ class: [uiProp?.linkLabel, link.ui?.linkLabel], active })">
+                    <span v-if="link.label || !!slots['link-label']" data-slot="linkLabel" :class="ui.linkLabel({ class: [props.ui?.linkLabel, link.ui?.linkLabel], active })">
                       <slot name="link-label" :link="link" :active="active">
                         {{ link.label }}
                       </slot>
 
-                      <UIcon v-if="link.target === '_blank'" :name="appConfig.ui.icons.external" data-slot="linkLabelExternalIcon" :class="ui.linkLabelExternalIcon({ class: [uiProp?.linkLabelExternalIcon, link.ui?.linkLabelExternalIcon], active })" />
+                      <UIcon v-if="link.target === '_blank'" :name="appConfig.ui.icons.external" data-slot="linkLabelExternalIcon" :class="ui.linkLabelExternalIcon({ class: [props.ui?.linkLabelExternalIcon, link.ui?.linkLabelExternalIcon], active })" />
                     </span>
 
                     <slot name="link-trailing" :link="link" :active="active" />
@@ -66,7 +66,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.footerColumns
       </slot>
     </div>
 
-    <div v-if="!!slots.right" data-slot="right" :class="ui.right({ class: uiProp?.right })">
+    <div v-if="!!slots.right" data-slot="right" :class="ui.right({ class: props.ui?.right })">
       <slot name="right" />
     </div>
   </Primitive>

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

@@ -59,7 +59,7 @@ export interface FormEmits<S extends FormSchema, T extends boolean = true> {
 }
 export interface FormSlots {
     default?(props: {
-        errors: FormError[];
+        errors: FormErrorWithId[];
         loading: boolean;
     }): VNode[];
 }

package/dist/runtime/components/Form.vue

@@ -8,10 +8,10 @@ import { useEventBus } from "@vueuse/core";
 import { useAppConfig } from "#imports";
 import { formOptionsInjectionKey, formInputsInjectionKey, formBusInjectionKey, formLoadingInjectionKey, formErrorsInjectionKey, formStateInjectionKey } from "../composables/useFormField";
 import { tv } from "../utils/tv";
-import { useComponentUI } from "../composables/useComponentUI";
+import { useComponentProps } from "../composables/useComponentProps";
 import { validateSchema, getAtPath, setAtPath } from "../utils/form";
 import { FormValidationException } from "../types/form";
-const props = defineProps({
+const _props = defineProps({
   id: { type: [String, Number], required: false },
   schema: { type: null, required: false },
   state: { type: null, required: false },
@@ -31,8 +31,8 @@ const props = defineProps({
 });
 const emits = defineEmits(["submit", "error"]);
 defineSlots();
+const props = useComponentProps("form", _props);
 const appConfig = useAppConfig();
-const uiProp = useComponentUI("form", props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.form || {} }));
 const formId = props.id ?? useId();
 const formRef = useTemplateRef("formRef");
@@ -151,7 +151,7 @@ async function _validate(opts = { silent: false, nested: false, transform: false
 const loading = ref(false);
 provide(formLoadingInjectionKey, readonly(loading));
 async function onSubmitWrapper(payload) {
-  loading.value = props.loadingAuto && true;
+  loading.value = !!props.loadingAuto;
   const event = payload;
   try {
     event.data = await _validate({ nested: true, transform: props.transform });
@@ -293,7 +293,7 @@ defineExpose(api);
     :is="parentBus ? 'div' : 'form'"
     :id="formId"
     ref="formRef"
-    :class="ui({ class: [uiProp?.base, props.class] })"
+    :class="ui({ class: [props.ui?.base, props.class] })"
     @submit.prevent="onSubmitWrapper"
   >
     <slot :errors="errors" :loading="loading" />

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

@@ -59,7 +59,7 @@ export interface FormEmits<S extends FormSchema, T extends boolean = true> {
 }
 export interface FormSlots {
     default?(props: {
-        errors: FormError[];
+        errors: FormErrorWithId[];
         loading: boolean;
     }): VNode[];
 }

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

@@ -11,7 +11,7 @@ export interface FormFieldProps {
     as?: any;
     /** The name of the FormField. Also used to match form errors. */
     name?: string;
-    /** A regular expression to match form error names. */
+    /** A regular expression to match form error names. Useful for components with array values such as InputTags, where errors include array indices in their name (e.g. `tags.0`). */
     errorPattern?: RegExp;
     label?: string;
     description?: string;
@@ -62,6 +62,7 @@ declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<FormFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FormFieldProps> & Readonly<{}>, {
     error: boolean | string;
+    orientation: FormField["variants"]["orientation"];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, FormFieldSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

package/dist/runtime/components/FormField.vue

@@ -6,10 +6,10 @@ import theme from "#build/ui/form-field";
 import { computed, ref, inject, provide, useId, watch } from "vue";
 import { Primitive, Label } from "reka-ui";
 import { useAppConfig } from "#imports";
-import { useComponentUI } from "../composables/useComponentUI";
+import { useComponentProps } from "../composables/useComponentProps";
 import { formFieldInjectionKey, inputIdInjectionKey, formErrorsInjectionKey, formInputsInjectionKey } from "../composables/useFormField";
 import { tv } from "../utils/tv";
-const props = defineProps({
+const _props = defineProps({
   as: { type: null, required: false },
   name: { type: String, required: false },
   errorPattern: { type: null, required: false },
@@ -22,13 +22,13 @@ const props = defineProps({
   required: { type: Boolean, required: false },
   eagerValidation: { type: Boolean, required: false },
   validateOnInputDelay: { type: Number, required: false },
-  orientation: { type: null, required: false },
+  orientation: { type: null, required: false, default: "vertical" },
   class: { type: null, required: false },
   ui: { type: Object, required: false }
 });
 const slots = defineSlots();
+const props = useComponentProps("formField", _props);
 const appConfig = useAppConfig();
-const uiProp = useComponentUI("formField", props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.formField || {} })({
   size: props.size,
   required: props.required,
@@ -60,38 +60,38 @@ provide(formFieldInjectionKey, computed(() => ({
 </script>
 
 <template>
-  <Primitive :as="as" :data-orientation="orientation" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
-    <div data-slot="wrapper" :class="ui.wrapper({ class: uiProp?.wrapper })">
-      <div v-if="label || !!slots.label" data-slot="labelWrapper" :class="ui.labelWrapper({ class: uiProp?.labelWrapper })">
-        <Label :for="id" data-slot="label" :class="ui.label({ class: uiProp?.label })">
-          <slot name="label" :label="label">
-            {{ label }}
+  <Primitive :as="props.as" :data-orientation="props.orientation" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div data-slot="wrapper" :class="ui.wrapper({ class: props.ui?.wrapper })">
+      <div v-if="props.label || !!slots.label" data-slot="labelWrapper" :class="ui.labelWrapper({ class: props.ui?.labelWrapper })">
+        <Label :for="id" data-slot="label" :class="ui.label({ class: props.ui?.label })">
+          <slot name="label" :label="props.label">
+            {{ props.label }}
           </slot>
         </Label>
-        <span v-if="hint || !!slots.hint" :id="`${ariaId}-hint`" data-slot="hint" :class="ui.hint({ class: uiProp?.hint })">
-          <slot name="hint" :hint="hint">
-            {{ hint }}
+        <span v-if="props.hint || !!slots.hint" :id="`${ariaId}-hint`" data-slot="hint" :class="ui.hint({ class: props.ui?.hint })">
+          <slot name="hint" :hint="props.hint">
+            {{ props.hint }}
           </slot>
         </span>
       </div>
 
-      <p v-if="description || !!slots.description" :id="`${ariaId}-description`" data-slot="description" :class="ui.description({ class: uiProp?.description })">
-        <slot name="description" :description="description">
-          {{ description }}
+      <p v-if="props.description || !!slots.description" :id="`${ariaId}-description`" data-slot="description" :class="ui.description({ class: props.ui?.description })">
+        <slot name="description" :description="props.description">
+          {{ props.description }}
         </slot>
       </p>
     </div>
 
-    <div :class="[(label || !!slots.label || description || !!slots.description) && ui.container({ class: uiProp?.container })]">
+    <div :class="[(props.label || !!slots.label || props.description || !!slots.description) && ui.container({ class: props.ui?.container })]">
       <slot :error="error" />
-      <div v-if="props.error !== false && (typeof error === 'string' && error || !!slots.error)" :id="`${ariaId}-error`" data-slot="error" :class="ui.error({ class: uiProp?.error })">
+      <div v-if="props.error !== false && (typeof error === 'string' && error || !!slots.error)" :id="`${ariaId}-error`" data-slot="error" :class="ui.error({ class: props.ui?.error })">
         <slot name="error" :error="error">
           {{ error }}
         </slot>
       </div>
-      <div v-else-if="help || !!slots.help" :id="`${ariaId}-help`" data-slot="help" :class="ui.help({ class: uiProp?.help })">
-        <slot name="help" :help="help">
-          {{ help }}
+      <div v-else-if="props.help || !!slots.help" :id="`${ariaId}-help`" data-slot="help" :class="ui.help({ class: props.ui?.help })">
+        <slot name="help" :help="props.help">
+          {{ props.help }}
         </slot>
       </div>
     </div>

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

@@ -11,7 +11,7 @@ export interface FormFieldProps {
     as?: any;
     /** The name of the FormField. Also used to match form errors. */
     name?: string;
-    /** A regular expression to match form error names. */
+    /** A regular expression to match form error names. Useful for components with array values such as InputTags, where errors include array indices in their name (e.g. `tags.0`). */
     errorPattern?: RegExp;
     label?: string;
     description?: string;
@@ -62,6 +62,7 @@ declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<FormFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FormFieldProps> & Readonly<{}>, {
     error: boolean | string;
+    orientation: FormField["variants"]["orientation"];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, FormFieldSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {