@nuxt/ui 4.0.0-alpha.2 → 4.0.0-beta.0

package/.nuxt/ui/prose/img.ts

@@ -1,6 +1,6 @@
 export default {
   "slots": {
-    "base": "rounded-md",
+    "base": "rounded-md w-full",
     "overlay": "fixed inset-0 bg-default/75 backdrop-blur-sm will-change-opacity",
     "content": "fixed inset-0 flex items-center justify-center cursor-zoom-out focus:outline-none p-4 sm:p-8"
   },

package/README.md

@@ -31,6 +31,7 @@ Kickstart your project with one of our ready-to-use Nuxt UI templates or follow
 - [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.
+- [Changelog](https://github.com/nuxt-ui-templates/changelog) — A changelog template to display your repository releases notes from GitHub powered by Nuxt MDC.
 
 ## Installation
 

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxt/ui",
-  "version": "4.0.0-alpha.2",
+  "version": "4.0.0-beta.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, installModule } from '@nuxt/kit';
-import { d as defaultOptions, r as resolveColors, a as getDefaultUiConfig, b as addTemplates } from './shared/ui.Bs5uUhtm.mjs';
+import { d as defaultOptions, r as resolveColors, a as getDefaultUiConfig, b as addTemplates } from './shared/ui.DGJZ-1aX.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.2";
+const version = "4.0.0-beta.0";
 
 const module = defineNuxtModule({
   meta: {
@@ -30,7 +30,7 @@ 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(" ");
-    nuxt.hook("vite:extendConfig", async (config) => {
+    nuxt.hook("vite:extend", async ({ config }) => {
       const plugin = await import('@tailwindcss/vite').then((r) => r.default);
       config.plugins ||= [];
       config.plugins.push(plugin());

package/dist/runtime/components/ChatMessages.vue

@@ -180,13 +180,13 @@ onMounted(() => {
       :compact="compact"
     >
       <template #content>
-        <div :class="ui.indicator({ class: props.ui?.indicator })">
-          <slot name="indicator">
+        <slot name="indicator">
+          <div :class="ui.indicator({ class: props.ui?.indicator })">
             <span />
             <span />
             <span />
-          </slot>
-        </div>
+          </div>
+        </slot>
       </template>
     </UChatMessage>
 

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

@@ -58,7 +58,7 @@ export interface CheckboxGroupProps<T extends CheckboxGroupItem[] = CheckboxGrou
     class?: any;
     ui?: CheckboxGroup['slots'] & CheckboxProps['ui'];
 }
-export type CheckboxGroupEmits = CheckboxGroupRootEmits & {
+export type CheckboxGroupEmits<T extends CheckboxGroupItem[] = CheckboxGroupItem[]> = CheckboxGroupRootEmits<T[number]> & {
     change: [event: Event];
 };
 type SlotProps<T extends CheckboxGroupItem> = (props: {
@@ -74,12 +74,12 @@ export interface CheckboxGroupSlots<T extends CheckboxGroupItem[] = CheckboxGrou
 declare const _default: <T extends CheckboxGroupItem[], VK extends GetItemKeys<T> = "value">(__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 onChange?: ((event: Event) => any) | undefined;
-        readonly "onUpdate:modelValue"?: ((value: import("reka-ui").AcceptableValue[]) => any) | undefined;
+        readonly "onUpdate:modelValue"?: ((value: T[number][]) => any) | undefined;
     } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onChange" | "onUpdate:modelValue"> & CheckboxGroupProps<T, VK> & {}> & import("vue").PublicProps;
     expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
     attrs: any;
     slots: CheckboxGroupSlots<T>;
-    emit: ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: import("reka-ui").AcceptableValue[]) => void);
+    emit: ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: T[number][]) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

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

@@ -58,7 +58,7 @@ export interface CheckboxGroupProps<T extends CheckboxGroupItem[] = CheckboxGrou
     class?: any;
     ui?: CheckboxGroup['slots'] & CheckboxProps['ui'];
 }
-export type CheckboxGroupEmits = CheckboxGroupRootEmits & {
+export type CheckboxGroupEmits<T extends CheckboxGroupItem[] = CheckboxGroupItem[]> = CheckboxGroupRootEmits<T[number]> & {
     change: [event: Event];
 };
 type SlotProps<T extends CheckboxGroupItem> = (props: {
@@ -74,12 +74,12 @@ export interface CheckboxGroupSlots<T extends CheckboxGroupItem[] = CheckboxGrou
 declare const _default: <T extends CheckboxGroupItem[], VK extends GetItemKeys<T> = "value">(__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 onChange?: ((event: Event) => any) | undefined;
-        readonly "onUpdate:modelValue"?: ((value: import("reka-ui").AcceptableValue[]) => any) | undefined;
+        readonly "onUpdate:modelValue"?: ((value: T[number][]) => any) | undefined;
     } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onChange" | "onUpdate:modelValue"> & CheckboxGroupProps<T, VK> & {}> & import("vue").PublicProps;
     expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
     attrs: any;
     slots: CheckboxGroupSlots<T>;
-    emit: ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: import("reka-ui").AcceptableValue[]) => void);
+    emit: ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: T[number][]) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

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

@@ -12,9 +12,9 @@ export interface DashboardGroupSlots {
 }
 declare const _default: __VLS_WithSlots<import("vue").DefineComponent<DashboardGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardGroupProps> & Readonly<{}>, {
     storage: "cookie" | "local";
-    unit: "%" | "rem" | "px";
     storageKey: string;
     persistent: boolean;
+    unit: "%" | "rem" | "px";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DashboardGroupSlots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

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

@@ -12,9 +12,9 @@ export interface DashboardGroupSlots {
 }
 declare const _default: __VLS_WithSlots<import("vue").DefineComponent<DashboardGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardGroupProps> & Readonly<{}>, {
     storage: "cookie" | "local";
-    unit: "%" | "rem" | "px";
     storageKey: string;
     persistent: boolean;
+    unit: "%" | "rem" | "px";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DashboardGroupSlots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

package/dist/runtime/components/Form.vue

@@ -112,35 +112,20 @@ async function getErrors() {
 }
 async function _validate(opts = { silent: false, nested: false, transform: false }) {
   const names = opts.name && !Array.isArray(opts.name) ? [opts.name] : opts.name;
-  async function validateNestedForms({ validate, name }) {
-    try {
-      return { name, output: await validate({ ...opts, silent: false }) };
-    } catch (error) {
-      if (!(error instanceof FormValidationException)) {
-        throw error;
-      }
-      return { name, error };
-    }
+  let nestedResults = [];
+  let nestedErrors = [];
+  if (!names && opts.nested) {
+    const validations = Array.from(nestedForms.value.values()).map(
+      (form) => validateNestedForm(form, opts)
+    );
+    const results = await Promise.all(validations);
+    nestedErrors = results.filter((r) => r.error).flatMap((r) => r.error.errors.map((e) => addFormPath(e, r.name)));
+    nestedResults = results.filter((r) => r.output !== void 0);
   }
-  const nestedValidatePromises = !names && opts.nested ? Array.from(nestedForms.value.values()).map(validateNestedForms) : [];
-  const nestedResults = await Promise.all(nestedValidatePromises);
-  const nestedErrors = nestedResults.flatMap((result) => {
-    if (!result.error) return [];
-    return result.error.errors.map((e) => ({ ...e, name: result.name ? [result.name, e.name].join(".") : e.name }));
-  });
-  const nestedOutputs = nestedResults.filter((c) => c.output !== void 0);
-  const allErrors = [await getErrors(), nestedErrors].flat();
+  const currentErrors = await getErrors();
+  const allErrors = [...currentErrors, ...nestedErrors];
   if (names) {
-    const namesSet = new Set(names);
-    const patterns = names.map((name) => inputs.value?.[name]?.pattern).filter(Boolean);
-    const isErrorForPath = (error) => {
-      if (!error.name) return false;
-      if (namesSet.has(error.name)) return true;
-      return patterns.some((pattern) => pattern.test(error.name));
-    };
-    const otherErrors = errors.value.filter((error) => !isErrorForPath(error));
-    const pathErrors = allErrors.filter(isErrorForPath);
-    errors.value = otherErrors.concat(pathErrors);
+    errors.value = filterErrorsByNames(allErrors, names);
   } else {
     errors.value = allErrors;
   }
@@ -149,9 +134,12 @@ async function _validate(opts = { silent: false, nested: false, transform: false
     throw new FormValidationException(formId, errors.value);
   }
   if (opts.transform) {
-    nestedOutputs.forEach((o) => {
-      if (o.name) setAtPath(transformedState.value, o.name, o.output);
-      else Object.assign(transformedState.value, o.output);
+    nestedResults.forEach((result) => {
+      if (result.name) {
+        setAtPath(transformedState.value, result.name, result.output);
+      } else {
+        Object.assign(transformedState.value, result.output);
+      }
     });
     return transformedState.value ?? state.value;
   }
@@ -184,68 +172,105 @@ provide(formOptionsInjectionKey, computed(() => ({
   disabled: disabled.value,
   validateOnInputDelay: props.validateOnInputDelay
 })));
+async function validateNestedForm(form, opts) {
+  try {
+    const result = await form.validate({ ...opts, silent: false });
+    return { name: form.name, output: result };
+  } catch (error) {
+    if (!(error instanceof FormValidationException)) throw error;
+    return { name: form.name, error };
+  }
+}
+function addFormPath(error, formPath) {
+  if (!formPath || !error.name) return error;
+  return { ...error, name: formPath + "." + error.name };
+}
+function stripFormPath(error, formPath) {
+  const prefix = formPath + ".";
+  const name = error?.name?.startsWith(prefix) ? error.name.substring(prefix.length) : error.name;
+  return { ...error, name };
+}
+function filterFormErrors(errors2, formPath) {
+  if (!formPath) return errors2;
+  return errors2.filter((e) => e?.name?.startsWith(formPath + ".")).map((e) => stripFormPath(e, formPath));
+}
+function getFormErrors(form) {
+  return form.api.getErrors().map(
+    (e) => form.name ? { ...e, name: form.name + "." + e.name } : e
+  );
+}
+function matchesTarget(target, path) {
+  if (!target || !path) return true;
+  if (target instanceof RegExp) return target.test(path);
+  return path === target || typeof target === "string" && target.startsWith(path + ".");
+}
+function getNestedTarget(target, formPath) {
+  if (!target || target instanceof RegExp) return target;
+  if (formPath === target) return void 0;
+  if (typeof target === "string" && target.startsWith(formPath + ".")) {
+    return target.substring(formPath.length + 1);
+  }
+  return target;
+}
+function filterErrorsByNames(allErrors, names) {
+  const nameSet = new Set(names);
+  const patterns = names.map((name) => inputs.value?.[name]?.pattern).filter(Boolean);
+  const matchesNames = (error) => {
+    if (!error.name) return false;
+    if (nameSet.has(error.name)) return true;
+    return patterns.some((pattern) => pattern.test(error.name));
+  };
+  const keepErrors = errors.value.filter((error) => !matchesNames(error));
+  const newErrors = allErrors.filter(matchesNames);
+  return [...keepErrors, ...newErrors];
+}
+function filterErrorsByTarget(currentErrors, target) {
+  return currentErrors.filter(
+    (err) => target instanceof RegExp ? !(err.name && target.test(err.name)) : !err.name || err.name !== target
+  );
+}
+function isLocalError(error) {
+  return !error.name || !!inputs.value[error.name];
+}
 const api = {
   validate: _validate,
   errors,
   setErrors(errs, name) {
-    let formErrors = resolveErrorIds(errs).filter((e) => e.id);
-    if (name) {
-      formErrors = errors.value.filter(
-        (err) => name instanceof RegExp ? !(err.name && name.test(err.name)) : err.name !== name
-      ).concat(formErrors);
-    }
+    const localErrors = resolveErrorIds(errs.filter(isLocalError));
+    const nestedErrors = [];
     for (const form of nestedForms.value.values()) {
-      const errors2 = errs.flatMap((e) => {
-        if (!form.name) return [e];
-        if (e?.name?.startsWith(form.name + `.`)) {
-          return [{
-            ...e,
-            name: e?.name.split(form.name + `.`)[1]
-          }];
-        }
-        return [];
-      });
-      const nameMatch = name instanceof RegExp ? form.name && name.test(form.name.toString()) : form.name !== name;
-      if (nameMatch || !form.name) {
-        form.api.setErrors(errors2, name);
-        formErrors = formErrors.concat(form.api.getErrors().map((e) => ({ ...e, name: form.name ? [form.name, e.name].join(".") : e.name })));
+      if (matchesTarget(name, form.name)) {
+        const formErrors = filterFormErrors(errs, form.name);
+        form.api.setErrors(formErrors, getNestedTarget(name, form.name || ""));
+        nestedErrors.push(...getFormErrors(form));
       }
     }
-    errors.value = formErrors;
+    if (name) {
+      const keepErrors = filterErrorsByTarget(errors.value, name);
+      errors.value = [...keepErrors, ...localErrors, ...nestedErrors];
+    } else {
+      errors.value = [...localErrors, ...nestedErrors];
+    }
   },
   async submit() {
     await onSubmitWrapper(new Event("submit"));
   },
   getErrors(name) {
-    if (name) {
-      return errors.value.filter((err) => name instanceof RegExp ? err.name && name.test(err.name) : err.name === name);
-    }
-    return errors.value;
+    if (!name) return errors.value;
+    return errors.value.filter(
+      (err) => name instanceof RegExp ? err.name && name.test(err.name) : err.name === name
+    );
   },
   clear(name) {
-    let formErrors = [];
-    if (name) {
-      formErrors = errors.value.filter(
-        (err) => {
-          return err.name && !!inputs.value[err.name] && (name instanceof RegExp ? !(err.name && name.test(err.name)) : err.name !== name);
-        }
-      );
-    }
+    const localErrors = name ? errors.value.filter(
+      (err) => isLocalError(err) && (name instanceof RegExp ? !(err.name && name.test(err.name)) : err.name !== name)
+    ) : [];
+    const nestedErrors = [];
     for (const form of nestedForms.value.values()) {
-      if (!form.name) form.api.clear(name);
-      else if (form.name === name || name instanceof RegExp && name.test(form.name)) form.api.clear();
-      else if (typeof name === "string" && name?.startsWith(form.name + `.`)) {
-        const nestedName = name?.split(`${form.name}.`)[1];
-        form.api.clear(nestedName);
-      }
-      formErrors = formErrors.concat(
-        form.api.getErrors().map((e) => ({
-          ...e,
-          name: form.name ? [form.name, e.name].join(".") : e.name
-        }))
-      );
+      if (matchesTarget(name, form.name)) form.api.clear();
+      nestedErrors.push(...getFormErrors(form));
     }
-    errors.value = formErrors;
+    errors.value = [...localErrors, ...nestedErrors];
   },
   disabled,
   loading,

package/dist/runtime/components/FormField.vue

@@ -3,10 +3,10 @@ import theme from "#build/ui/form-field";
 </script>
 
 <script setup>
-import { computed, ref, inject, provide, useId } from "vue";
+import { computed, ref, inject, provide, useId, watch } from "vue";
 import { Primitive, Label } from "reka-ui";
 import { useAppConfig } from "#imports";
-import { formFieldInjectionKey, inputIdInjectionKey, formErrorsInjectionKey } from "../composables/useFormField";
+import { formFieldInjectionKey, inputIdInjectionKey, formErrorsInjectionKey, formInputsInjectionKey } from "../composables/useFormField";
 import { tv } from "../utils/tv";
 const props = defineProps({
   as: { type: null, required: false },
@@ -31,9 +31,15 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.formField ||
   required: props.required
 }));
 const formErrors = inject(formErrorsInjectionKey, null);
-const error = computed(() => props.error || formErrors?.value?.find((error2) => error2.name && (error2.name === props.name || props.errorPattern && error2.name.match(props.errorPattern)))?.message);
+const error = computed(() => props.error || formErrors?.value?.find((error2) => error2.name === props.name || props.errorPattern && error2.name?.match(props.errorPattern))?.message);
 const id = ref(useId());
 const ariaId = id.value;
+const formInputs = inject(formInputsInjectionKey, void 0);
+watch(id, () => {
+  if (formInputs && props.name) {
+    formInputs.value[props.name] = { id: id.value, pattern: props.errorPattern };
+  }
+}, { immediate: true });
 provide(inputIdInjectionKey, id);
 provide(formFieldInjectionKey, computed(() => ({
   error: error.value,

package/dist/runtime/components/InputMenu.vue

@@ -259,7 +259,7 @@ defineExpose({
         @focus="onFocus"
         @remove-tag="onRemoveTag"
       >
-        <TagsInputItem v-for="(item, index) in tags" :key="index" :value="item" :class="ui.tagsItem({ class: [props.ui?.tagsItem, isInputItem(item) && item.ui?.tagsItem] })">
+        <TagsInputItem v-for="(item, index) in tags" :key="index" :value="isInputItem(item) ? item : String(item)" :class="ui.tagsItem({ class: [props.ui?.tagsItem, isInputItem(item) && item.ui?.tagsItem] })">
           <TagsInputItemText :class="ui.tagsItemText({ class: [props.ui?.tagsItemText, isInputItem(item) && item.ui?.tagsItemText] })">
             <slot name="tags-item-text" :item="item" :index="index">
               {{ displayValue(item) }}

package/dist/runtime/components/InputTags.vue

@@ -112,8 +112,6 @@ defineExpose({
     :name="name"
     :disabled="disabled"
     @update:model-value="onUpdate"
-    @blur="onBlur"
-    @focus="onFocus"
   >
     <TagsInputItem
       v-for="(item, index) in tags"
@@ -141,6 +139,8 @@ defineExpose({
       :placeholder="placeholder"
       :max-length="maxLength"
       :class="ui.input({ class: props.ui?.input })"
+      @blur="onBlur"
+      @focus="onFocus"
     />
 
     <slot />

package/dist/runtime/components/Tabs.vue

@@ -62,7 +62,7 @@ defineExpose({
         v-for="(item, index) of items"
         :key="index"
         :ref="(el) => triggersRef[index] = el"
-        :value="item.value || String(index)"
+        :value="item.value ?? String(index)"
         :disabled="item.disabled"
         :class="ui.trigger({ class: [props.ui?.trigger, item.ui?.trigger] })"
       >
@@ -91,7 +91,7 @@ defineExpose({
     </TabsList>
 
     <template v-if="!!content">
-      <TabsContent v-for="(item, index) of items" :key="index" :value="item.value || String(index)" :class="ui.content({ class: [props.ui?.content, item.ui?.content, item.class] })">
+      <TabsContent v-for="(item, index) of items" :key="index" :value="item.value ?? String(index)" :class="ui.content({ class: [props.ui?.content, item.ui?.content, item.class] })">
         <slot :name="item.slot || 'content'" :item="item" :index="index">
           {{ item.content }}
         </slot>

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

@@ -2,7 +2,7 @@ import type { TreeRootProps, TreeRootEmits } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/tree';
 import type { IconProps } from '../types';
-import type { DynamicSlots, GetItemKeys, GetModelValue, GetModelValueEmits, NestedItem } from '../types/utils';
+import type { DynamicSlots, GetItemKeys } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
 type Tree = ComponentConfig<typeof theme, AppConfig, 'tree'>;
 export type TreeItem = {
@@ -17,7 +17,6 @@ export type TreeItem = {
     trailingIcon?: IconProps['name'];
     defaultExpanded?: boolean;
     disabled?: boolean;
-    value?: string;
     slot?: string;
     children?: TreeItem[];
     onToggle?(e: Event): void;
@@ -26,7 +25,7 @@ export type TreeItem = {
     ui?: Pick<Tree['slots'], 'item' | 'itemWithChildren' | 'link' | 'linkLeadingIcon' | 'linkLabel' | 'linkTrailing' | 'linkTrailingIcon' | 'listWithChildren'>;
     [key: string]: any;
 };
-export interface TreeProps<T extends TreeItem[] = TreeItem[], VK extends GetItemKeys<T> = 'value', M extends boolean = false> extends Pick<TreeRootProps<T>, 'expanded' | 'defaultExpanded' | 'selectionBehavior' | 'propagateSelect' | 'disabled' | 'bubbleSelect'> {
+export interface TreeProps<T extends TreeItem[] = TreeItem[], M extends boolean = false> extends Pick<TreeRootProps<T>, 'expanded' | 'defaultExpanded' | 'selectionBehavior' | 'propagateSelect' | 'disabled' | 'bubbleSelect'> {
     /**
      * The element or component this component should render as.
      * @defaultValue 'ul'
@@ -40,11 +39,8 @@ export interface TreeProps<T extends TreeItem[] = TreeItem[], VK extends GetItem
      * @defaultValue 'md'
      */
     size?: Tree['variants']['size'];
-    /**
-     * The key used to get the value from the item.
-     * @defaultValue 'value'
-     */
-    valueKey?: VK;
+    /** This function is passed the index of each item and should return a unique key for that item */
+    getKey?: (val: T[number]) => string;
     /**
      * The key used to get the label from the item.
      * @defaultValue 'label'
@@ -70,15 +66,15 @@ export interface TreeProps<T extends TreeItem[] = TreeItem[], VK extends GetItem
     collapsedIcon?: IconProps['name'];
     items?: T;
     /** The controlled value of the Tree. Can be bind as `v-model`. */
-    modelValue?: GetModelValue<T, VK, M>;
+    modelValue?: M extends true ? T[number][] : T[number];
     /** The value of the Tree when initially rendered. Use when you do not need to control the state of the Tree. */
-    defaultValue?: GetModelValue<T, VK, M>;
+    defaultValue?: M extends true ? T[number][] : T[number];
     /** Whether multiple options can be selected or not. */
     multiple?: M & boolean;
     class?: any;
     ui?: Tree['slots'];
 }
-export type TreeEmits<A extends TreeItem[], VK extends GetItemKeys<A> | undefined, M extends boolean> = Omit<TreeRootEmits, 'update:modelValue'> & GetModelValueEmits<A, VK, M>;
+export type TreeEmits<T extends TreeItem[] = TreeItem[], M extends boolean = false> = TreeRootEmits<T[number], M>;
 type SlotProps<T extends TreeItem> = (props: {
     item: T;
     index: number;
@@ -86,27 +82,27 @@ type SlotProps<T extends TreeItem> = (props: {
     expanded: boolean;
     selected: boolean;
 }) => any;
-export type TreeSlots<A extends TreeItem[] = TreeItem[], T extends NestedItem<A> = NestedItem<A>> = {
-    'item-wrapper': SlotProps<T>;
-    'item': SlotProps<T>;
-    'item-leading': SlotProps<T>;
-    'item-label': SlotProps<T>;
-    'item-trailing': SlotProps<T>;
-} & DynamicSlots<T, undefined, {
+export type TreeSlots<T extends TreeItem[] = TreeItem[]> = {
+    'item-wrapper': SlotProps<T[number]>;
+    'item': SlotProps<T[number]>;
+    'item-leading': SlotProps<T[number]>;
+    'item-label': SlotProps<T[number]>;
+    'item-trailing': SlotProps<T[number]>;
+} & DynamicSlots<T[number], undefined, {
     index: number;
     level: number;
     expanded: boolean;
     selected: boolean;
 }>;
-declare const _default: <T extends TreeItem[], VK extends GetItemKeys<T> = "value", M extends boolean = false>(__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<{
+declare const _default: <T extends TreeItem[], M extends boolean = false>(__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: GetModelValue<T, VK, M>) => any) | undefined;
+        readonly "onUpdate:modelValue"?: ((val: M extends true ? T[number][] : T[number]) => any) | undefined;
         readonly "onUpdate:expanded"?: ((val: string[]) => any) | undefined;
-    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:modelValue" | "onUpdate:expanded"> & TreeProps<T, VK, M> & {}> & import("vue").PublicProps;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:modelValue" | "onUpdate:expanded"> & TreeProps<T, M> & {}> & import("vue").PublicProps;
     expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
     attrs: any;
-    slots: TreeSlots<T, NestedItem<T>>;
-    emit: ((evt: "update:modelValue", value: GetModelValue<T, VK, M>) => void) & ((evt: "update:expanded", val: string[]) => void);
+    slots: TreeSlots<T>;
+    emit: ((evt: "update:modelValue", val: M extends true ? T[number][] : T[number]) => void) & ((evt: "update:expanded", val: string[]) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/runtime/components/Tree.vue

@@ -15,7 +15,7 @@ const props = defineProps({
   as: { type: null, required: false },
   color: { type: null, required: false },
   size: { type: null, required: false },
-  valueKey: { type: null, required: false, default: "value" },
+  getKey: { type: Function, required: false },
   labelKey: { type: null, required: false, default: "label" },
   trailingIcon: { type: [String, Object], required: false },
   expandedIcon: { type: [String, Object], required: false },
@@ -33,10 +33,10 @@ const props = defineProps({
   disabled: { type: Boolean, required: false },
   bubbleSelect: { type: Boolean, required: false }
 });
-const emits = defineEmits(["update:expanded", "update:modelValue"]);
+const emits = defineEmits(["update:modelValue", "update:expanded"]);
 const slots = defineSlots();
 const appConfig = useAppConfig();
-const rootProps = useForwardPropsEmits(reactivePick(props, "as", "modelValue", "defaultValue", "items", "multiple", "expanded", "disabled", "propagateSelect", "bubbleSelect"), emits);
+const rootProps = useForwardPropsEmits(reactivePick(props, "as", "items", "multiple", "expanded", "disabled", "propagateSelect", "bubbleSelect"), emits);
 const [DefineTreeTemplate, ReuseTreeTemplate] = createReusableTemplate();
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.tree || {} })({
   color: props.color,
@@ -45,11 +45,11 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.tree || {} })
 function getItemLabel(item) {
   return get(item, props.labelKey);
 }
-function getItemValue(item) {
-  return get(item, props.valueKey) ?? get(item, props.labelKey);
+function getItemKey(item) {
+  return props.getKey ? props.getKey(item) || getItemLabel(item) : getItemLabel(item);
 }
 function getDefaultOpenedItems(item) {
-  const currentItem = item.defaultExpanded ? getItemValue(item) : null;
+  const currentItem = item.defaultExpanded ? getItemKey(item) : null;
   const childItems = item.children?.flatMap((child) => getDefaultOpenedItems(child)) ?? [];
   return [currentItem, ...childItems].filter(Boolean);
 }
@@ -72,7 +72,8 @@ const defaultExpanded = computed(
     >
       <slot
         :name="item.slot ? `${item.slot}-wrapper` : 'item-wrapper'"
-        v-bind="{ item, index, level, expanded: isExpanded, selected: isSelected }"
+        v-bind="{ index, level, expanded: isExpanded, selected: isSelected }"
+        :item="item"
       >
         <button
           type="button"
@@ -80,8 +81,16 @@ const defaultExpanded = computed(
           :data-expanded="isExpanded"
           :class="ui.link({ class: [props.ui?.link, item.ui?.link, item.class], selected: isSelected, disabled: item.disabled || disabled })"
         >
-          <slot :name="item.slot || 'item'" v-bind="{ index, level, expanded: isExpanded, selected: isSelected }" :item="item">
-            <slot :name="item.slot ? `${item.slot}-leading` : 'item-leading'" v-bind="{ index, level, expanded: isExpanded, selected: isSelected }" :item="item">
+          <slot
+            :name="item.slot || 'item'"
+            v-bind="{ index, level, expanded: isExpanded, selected: isSelected }"
+            :item="item"
+          >
+            <slot
+              :name="item.slot ? `${item.slot}-leading` : 'item-leading'"
+              v-bind="{ index, level, expanded: isExpanded, selected: isSelected }"
+              :item="item"
+            >
               <UIcon
                 v-if="item.icon"
                 :name="item.icon"
@@ -100,7 +109,8 @@ const defaultExpanded = computed(
             >
               <slot
                 :name="item.slot ? `${item.slot}-label` : 'item-label'"
-                v-bind="{ item, index, level, expanded: isExpanded, selected: isSelected }"
+                v-bind="{ index, level, expanded: isExpanded, selected: isSelected }"
+                :item="item"
               >
                 {{ getItemLabel(item) }}
               </slot>
@@ -112,7 +122,8 @@ const defaultExpanded = computed(
             >
               <slot
                 :name="item.slot ? `${item.slot}-trailing` : 'item-trailing'"
-                v-bind="{ item, index, level, expanded: isExpanded, selected: isSelected }"
+                v-bind="{ index, level, expanded: isExpanded, selected: isSelected }"
+                :item="item"
               >
                 <UIcon
                   v-if="item.trailingIcon"
@@ -142,8 +153,10 @@ const defaultExpanded = computed(
 
   <TreeRoot
     v-bind="{ ...rootProps, ...$attrs }"
+    :model-value="modelValue"
+    :default-value="defaultValue"
     :class="ui.root({ class: [props.ui?.root, props.class] })"
-    :get-key="getItemValue"
+    :get-key="getItemKey"
     :default-expanded="defaultExpanded"
     :selection-behavior="selectionBehavior"
   >

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

@@ -2,7 +2,7 @@ import type { TreeRootProps, TreeRootEmits } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/tree';
 import type { IconProps } from '../types';
-import type { DynamicSlots, GetItemKeys, GetModelValue, GetModelValueEmits, NestedItem } from '../types/utils';
+import type { DynamicSlots, GetItemKeys } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
 type Tree = ComponentConfig<typeof theme, AppConfig, 'tree'>;
 export type TreeItem = {
@@ -17,7 +17,6 @@ export type TreeItem = {
     trailingIcon?: IconProps['name'];
     defaultExpanded?: boolean;
     disabled?: boolean;
-    value?: string;
     slot?: string;
     children?: TreeItem[];
     onToggle?(e: Event): void;
@@ -26,7 +25,7 @@ export type TreeItem = {
     ui?: Pick<Tree['slots'], 'item' | 'itemWithChildren' | 'link' | 'linkLeadingIcon' | 'linkLabel' | 'linkTrailing' | 'linkTrailingIcon' | 'listWithChildren'>;
     [key: string]: any;
 };
-export interface TreeProps<T extends TreeItem[] = TreeItem[], VK extends GetItemKeys<T> = 'value', M extends boolean = false> extends Pick<TreeRootProps<T>, 'expanded' | 'defaultExpanded' | 'selectionBehavior' | 'propagateSelect' | 'disabled' | 'bubbleSelect'> {
+export interface TreeProps<T extends TreeItem[] = TreeItem[], M extends boolean = false> extends Pick<TreeRootProps<T>, 'expanded' | 'defaultExpanded' | 'selectionBehavior' | 'propagateSelect' | 'disabled' | 'bubbleSelect'> {
     /**
      * The element or component this component should render as.
      * @defaultValue 'ul'
@@ -40,11 +39,8 @@ export interface TreeProps<T extends TreeItem[] = TreeItem[], VK extends GetItem
      * @defaultValue 'md'
      */
     size?: Tree['variants']['size'];
-    /**
-     * The key used to get the value from the item.
-     * @defaultValue 'value'
-     */
-    valueKey?: VK;
+    /** This function is passed the index of each item and should return a unique key for that item */
+    getKey?: (val: T[number]) => string;
     /**
      * The key used to get the label from the item.
      * @defaultValue 'label'
@@ -70,15 +66,15 @@ export interface TreeProps<T extends TreeItem[] = TreeItem[], VK extends GetItem
     collapsedIcon?: IconProps['name'];
     items?: T;
     /** The controlled value of the Tree. Can be bind as `v-model`. */
-    modelValue?: GetModelValue<T, VK, M>;
+    modelValue?: M extends true ? T[number][] : T[number];
     /** The value of the Tree when initially rendered. Use when you do not need to control the state of the Tree. */
-    defaultValue?: GetModelValue<T, VK, M>;
+    defaultValue?: M extends true ? T[number][] : T[number];
     /** Whether multiple options can be selected or not. */
     multiple?: M & boolean;
     class?: any;
     ui?: Tree['slots'];
 }
-export type TreeEmits<A extends TreeItem[], VK extends GetItemKeys<A> | undefined, M extends boolean> = Omit<TreeRootEmits, 'update:modelValue'> & GetModelValueEmits<A, VK, M>;
+export type TreeEmits<T extends TreeItem[] = TreeItem[], M extends boolean = false> = TreeRootEmits<T[number], M>;
 type SlotProps<T extends TreeItem> = (props: {
     item: T;
     index: number;
@@ -86,27 +82,27 @@ type SlotProps<T extends TreeItem> = (props: {
     expanded: boolean;
     selected: boolean;
 }) => any;
-export type TreeSlots<A extends TreeItem[] = TreeItem[], T extends NestedItem<A> = NestedItem<A>> = {
-    'item-wrapper': SlotProps<T>;
-    'item': SlotProps<T>;
-    'item-leading': SlotProps<T>;
-    'item-label': SlotProps<T>;
-    'item-trailing': SlotProps<T>;
-} & DynamicSlots<T, undefined, {
+export type TreeSlots<T extends TreeItem[] = TreeItem[]> = {
+    'item-wrapper': SlotProps<T[number]>;
+    'item': SlotProps<T[number]>;
+    'item-leading': SlotProps<T[number]>;
+    'item-label': SlotProps<T[number]>;
+    'item-trailing': SlotProps<T[number]>;
+} & DynamicSlots<T[number], undefined, {
     index: number;
     level: number;
     expanded: boolean;
     selected: boolean;
 }>;
-declare const _default: <T extends TreeItem[], VK extends GetItemKeys<T> = "value", M extends boolean = false>(__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<{
+declare const _default: <T extends TreeItem[], M extends boolean = false>(__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: GetModelValue<T, VK, M>) => any) | undefined;
+        readonly "onUpdate:modelValue"?: ((val: M extends true ? T[number][] : T[number]) => any) | undefined;
         readonly "onUpdate:expanded"?: ((val: string[]) => any) | undefined;
-    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:modelValue" | "onUpdate:expanded"> & TreeProps<T, VK, M> & {}> & import("vue").PublicProps;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:modelValue" | "onUpdate:expanded"> & TreeProps<T, M> & {}> & import("vue").PublicProps;
     expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
     attrs: any;
-    slots: TreeSlots<T, NestedItem<T>>;
-    emit: ((evt: "update:modelValue", value: GetModelValue<T, VK, M>) => void) & ((evt: "update:expanded", val: string[]) => void);
+    slots: TreeSlots<T>;
+    emit: ((evt: "update:modelValue", val: M extends true ? T[number][] : T[number]) => void) & ((evt: "update:expanded", val: string[]) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/runtime/composables/useFormField.js

@@ -12,7 +12,6 @@ export function useFormField(props, opts) {
   const formOptions = inject(formOptionsInjectionKey, void 0);
   const formBus = inject(formBusInjectionKey, void 0);
   const formField = inject(formFieldInjectionKey, void 0);
-  const formInputs = inject(formInputsInjectionKey, void 0);
   const inputId = inject(inputIdInjectionKey, void 0);
   provide(formFieldInjectionKey, void 0);
   if (formField && inputId) {
@@ -21,9 +20,6 @@ export function useFormField(props, opts) {
     } else if (props?.id) {
       inputId.value = props?.id;
     }
-    if (formInputs && formField.value.name && inputId.value) {
-      formInputs.value[formField.value.name] = { id: inputId.value, pattern: formField.value.errorPattern };
-    }
   }
   function emitFormEvent(type, name, eager) {
     if (formBus && formField && name) {

package/dist/runtime/locale/pt.js

@@ -27,7 +27,7 @@ export default defineLocale({
       prev: "Anterior"
     },
     chatPrompt: {
-      placeholder: "Escreva sua mensagem aqui..."
+      placeholder: "Escreva a sua mensagem aqui..."
     },
     chatPromptSubmit: {
       label: "Enviar"
@@ -114,7 +114,7 @@ export default defineLocale({
       create: 'Criar "{label}"',
       noData: "Sem dados",
       noMatch: "Nenhum dado correspondente",
-      search: "Buscar..."
+      search: "Pesquisar..."
     },
     slideover: {
       close: "Fechar"

package/dist/runtime/types/form.d.ts

@@ -1,7 +1,5 @@
 import type { StandardSchemaV1 } from '@standard-schema/spec';
 import type { ComputedRef, DeepReadonly, Ref } from 'vue';
-import type { Schema as JoiSchema } from 'joi';
-import type { ObjectSchema as YupObjectSchema } from 'yup';
 import type { GetObjectField } from './utils';
 import type { Struct as SuperstructSchema } from 'superstruct';
 export interface Form<S extends FormSchema> {
@@ -23,9 +21,9 @@ export interface Form<S extends FormSchema> {
     touchedFields: ReadonlySet<DeepReadonly<keyof FormData<S, false>>>;
     blurredFields: ReadonlySet<DeepReadonly<keyof FormData<S, false>>>;
 }
-export type FormSchema<I extends object = object, O extends object = I> = YupObjectSchema<I> | JoiSchema<I> | SuperstructSchema<any, any> | StandardSchemaV1<I, O>;
-export type InferInput<Schema> = Schema extends StandardSchemaV1 ? StandardSchemaV1.InferInput<Schema> : Schema extends YupObjectSchema<infer I> ? I : Schema extends JoiSchema<infer I> ? I : Schema extends SuperstructSchema<infer I, any> ? I : Schema extends StandardSchemaV1 ? StandardSchemaV1.InferInput<Schema> : never;
-export type InferOutput<Schema> = Schema extends StandardSchemaV1 ? StandardSchemaV1.InferOutput<Schema> : Schema extends YupObjectSchema<infer O> ? O : Schema extends JoiSchema<infer O> ? O : Schema extends SuperstructSchema<infer O, any> ? O : never;
+export type FormSchema<I extends object = object, O extends object = I> = SuperstructSchema<any, any> | StandardSchemaV1<I, O>;
+export type InferInput<Schema> = Schema extends StandardSchemaV1 ? StandardSchemaV1.InferInput<Schema> : Schema extends SuperstructSchema<infer I, any> ? I : Schema extends StandardSchemaV1 ? StandardSchemaV1.InferInput<Schema> : never;
+export type InferOutput<Schema> = Schema extends StandardSchemaV1 ? StandardSchemaV1.InferOutput<Schema> : Schema extends SuperstructSchema<infer O, any> ? O : never;
 export type FormData<S extends FormSchema, T extends boolean = true> = T extends true ? InferOutput<S> : InferInput<S>;
 export type FormInputEvents = 'input' | 'blur' | 'change' | 'focus';
 export interface FormError<P extends string = string> {

package/dist/runtime/types/tv.d.ts

@@ -4,11 +4,18 @@ import type { ClassValue, TVVariants, TVCompoundVariants, TVDefaultVariants } fr
  */
 export type TVConfig<T extends Record<string, any>> = {
     [P in keyof T]?: {
-        [K in keyof T[P] as K extends 'base' | 'slots' | 'variants' | 'compoundVariants' | 'defaultVariants' ? K : never]?: K extends 'base' ? ClassValue : K extends 'slots' ? {
+        [K in keyof T[P] as K extends 'base' | 'slots' | 'variants' | 'defaultVariants' ? K : never]?: K extends 'base' ? ClassValue : K extends 'slots' ? {
             [S in keyof T[P]['slots']]?: ClassValue;
-        } : K extends 'variants' ? TVVariants<T[P]['slots'], ClassValue, T[P]['variants']> : K extends 'compoundVariants' ? TVCompoundVariants<T[P]['variants'], T[P]['slots'], ClassValue, object, undefined> : K extends 'defaultVariants' ? TVDefaultVariants<T[P]['variants'], T[P]['slots'], object, undefined> : never;
+        } : K extends 'variants' ? TVVariants<T[P]['slots'], ClassValue, WidenVariantsValues<T[P]['variants']>> : K extends 'defaultVariants' ? TVDefaultVariants<WidenVariantsValues<T[P]['variants']>, T[P]['slots'], object, undefined> : never;
+    };
+} & {
+    [P in keyof T]?: {
+        compoundVariants?: TVCompoundVariants<WidenVariantsValues<T[P]['variants']>, T[P]['slots'], ClassValue, object, undefined>;
     };
 };
+type WidenVariantsValues<V extends Record<string, any> | undefined> = V extends Record<string, any> ? V & {
+    [K in keyof V]: V[K] extends Record<string, any> ? V[K] & Record<string & {}, any> : V[K];
+} : V;
 /**
  * Utility type to flatten intersection types for better IDE hover information.
  * @template T The type to flatten.

package/dist/runtime/utils/form.d.ts

@@ -1,13 +1,7 @@
 import type { StandardSchemaV1 } from '@standard-schema/spec';
-import type { ValidationError as JoiError, Schema as JoiSchema } from 'joi';
-import type { ObjectSchema as YupObjectSchema, ValidationError as YupError } from 'yup';
 import type { Struct } from 'superstruct';
 import type { FormSchema, ValidateReturnSchema } from '../types/form';
-export declare function isYupSchema(schema: any): schema is YupObjectSchema<any>;
-export declare function isYupError(error: any): error is YupError;
 export declare function isSuperStructSchema(schema: any): schema is Struct<any, any>;
-export declare function isJoiSchema(schema: any): schema is JoiSchema;
-export declare function isJoiError(error: any): error is JoiError;
 export declare function isStandardSchema(schema: any): schema is StandardSchemaV1;
 export declare function validateStandardSchema(state: any, schema: StandardSchemaV1): Promise<ValidateReturnSchema<typeof state>>;
 export declare function validateSchema<T extends object>(state: T, schema: FormSchema<T>): Promise<ValidateReturnSchema<typeof state>>;

package/dist/runtime/utils/form.js

@@ -1,18 +1,6 @@
-export function isYupSchema(schema) {
-  return schema.validate && schema.__isYupSchema__;
-}
-export function isYupError(error) {
-  return error.inner !== void 0;
-}
 export function isSuperStructSchema(schema) {
   return "schema" in schema && typeof schema.coercer === "function" && typeof schema.validator === "function" && typeof schema.refiner === "function";
 }
-export function isJoiSchema(schema) {
-  return schema.validateAsync !== void 0 && schema.id !== void 0;
-}
-export function isJoiError(error) {
-  return error.isJoi === true;
-}
 export function isStandardSchema(schema) {
   return "~standard" in schema;
 }
@@ -32,28 +20,6 @@ export async function validateStandardSchema(state, schema) {
     result: result.value
   };
 }
-async function validateYupSchema(state, schema) {
-  try {
-    const result = await schema.validate(state, { abortEarly: false });
-    return {
-      errors: null,
-      result
-    };
-  } catch (error) {
-    if (isYupError(error)) {
-      const errors = error.inner.map((issue) => ({
-        name: issue.path ?? "",
-        message: issue.message
-      }));
-      return {
-        errors,
-        result: null
-      };
-    } else {
-      throw error;
-    }
-  }
-}
 async function validateSuperstructSchema(state, schema) {
   const [err, result] = schema.validate(state);
   if (err) {
@@ -71,35 +37,9 @@ async function validateSuperstructSchema(state, schema) {
     result
   };
 }
-async function validateJoiSchema(state, schema) {
-  try {
-    const result = await schema.validateAsync(state, { abortEarly: false });
-    return {
-      errors: null,
-      result
-    };
-  } catch (error) {
-    if (isJoiError(error)) {
-      const errors = error.details.map((issue) => ({
-        name: issue.path.join("."),
-        message: issue.message
-      }));
-      return {
-        errors,
-        result: null
-      };
-    } else {
-      throw error;
-    }
-  }
-}
 export function validateSchema(state, schema) {
   if (isStandardSchema(schema)) {
     return validateStandardSchema(state, schema);
-  } else if (isJoiSchema(schema)) {
-    return validateJoiSchema(state, schema);
-  } else if (isYupSchema(schema)) {
-    return validateYupSchema(state, schema);
   } else if (isSuperStructSchema(schema)) {
     return validateSuperstructSchema(state, schema);
   } else {

package/dist/shared/{ui.Bs5uUhtm.mjs → ui.DGJZ-1aX.mjs}

@@ -6082,7 +6082,7 @@ const icon = {
 
 const img = {
   slots: {
-    base: "rounded-md",
+    base: "rounded-md w-full",
     overlay: "fixed inset-0 bg-default/75 backdrop-blur-sm will-change-opacity",
     content: "fixed inset-0 flex items-center justify-center cursor-zoom-out focus:outline-none p-4 sm:p-8"
   },

package/dist/unplugin.mjs

@@ -3,7 +3,7 @@ import { join, normalize } from 'pathe';
 import { createUnplugin } from 'unplugin';
 import { defu } from 'defu';
 import tailwind from '@tailwindcss/vite';
-import { g as getTemplates, d as defaultOptions, r as resolveColors, a as getDefaultUiConfig } from './shared/ui.Bs5uUhtm.mjs';
+import { g as getTemplates, d as defaultOptions, r as resolveColors, a as getDefaultUiConfig } from './shared/ui.DGJZ-1aX.mjs';
 import MagicString from 'magic-string';
 import { genSafeVariableName } from 'knitwork';
 import { resolvePathSync } from 'mlly';

package/dist/vite.mjs

@@ -4,7 +4,7 @@ import 'pathe';
 import 'unplugin';
 import 'defu';
 import '@tailwindcss/vite';
-import './shared/ui.Bs5uUhtm.mjs';
+import './shared/ui.DGJZ-1aX.mjs';
 import '../dist/runtime/utils/index.js';
 import 'scule';
 import 'knitwork';

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@nuxt/ui",
   "description": "A UI Library for Modern Web Apps, powered by Vue & Tailwind CSS.",
-  "version": "4.0.0-alpha.2",
-  "packageManager": "pnpm@10.16.1",
+  "version": "4.0.0-beta.0",
+  "packageManager": "pnpm@10.17.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/nuxt/ui.git"
@@ -108,10 +108,10 @@
     "typecheck": "vue-tsc --noEmit && nuxt typecheck playgrounds/nuxt && nuxt typecheck docs && cd playgrounds/vue && vue-tsc --noEmit",
     "test": "vitest",
     "test:vue": "vitest -c vitest.vue.config.ts",
-    "release": "release-it --preRelease=alpha"
+    "release": "release-it --preRelease=beta"
   },
   "dependencies": {
-    "@ai-sdk/vue": "^2.0.44",
+    "@ai-sdk/vue": "^2.0.48",
     "@iconify/vue": "^5.0.0",
     "@internationalized/date": "^3.9.0",
     "@internationalized/number": "^3.6.5",
@@ -124,7 +124,7 @@
     "@tailwindcss/postcss": "^4.1.13",
     "@tailwindcss/vite": "^4.1.13",
     "@tanstack/vue-table": "^8.21.3",
-    "@unhead/vue": "^2.0.14",
+    "@unhead/vue": "^2.0.17",
     "@vueuse/core": "^13.9.0",
     "@vueuse/integrations": "^13.9.0",
     "colortranslator": "^5.0.0",
@@ -153,34 +153,34 @@
     "tinyglobby": "^0.2.15",
     "unplugin": "^2.3.10",
     "unplugin-auto-import": "^20.1.0",
-    "unplugin-vue-components": "^29.0.0",
+    "unplugin-vue-components": "^29.1.0",
     "vaul-vue": "0.4.1",
     "vue-component-type-helpers": "^3.0.7"
   },
   "devDependencies": {
-    "@nuxt/content": "^3.7.0",
+    "@nuxt/content": "^3.7.1",
     "@nuxt/eslint-config": "^1.9.0",
     "@nuxt/module-builder": "^1.0.2",
     "@nuxt/test-utils": "^3.19.2",
     "@release-it/conventional-changelog": "^10.0.1",
     "@vue/test-utils": "^2.4.6",
     "embla-carousel": "^8.6.0",
-    "eslint": "^9.35.0",
+    "eslint": "^9.36.0",
     "happy-dom": "^18.0.1",
     "nuxt": "^4.0.3",
-    "release-it": "^19.0.4",
+    "release-it": "^19.0.5",
     "vitest": "^3.2.4",
     "vitest-environment-nuxt": "^1.0.1",
     "vue-tsc": "^3.0.7"
   },
   "peerDependencies": {
     "@inertiajs/vue3": "^2.0.7",
-    "joi": "^17.13.0",
+    "joi": "^18.0.0",
     "superstruct": "^2.0.0",
     "typescript": "^5.6.3",
     "valibot": "^1.0.0",
     "vue-router": "^4.5.0",
-    "yup": "^1.6.0",
+    "yup": "^1.7.0",
     "zod": "^3.24.0 || ^4.0.0"
   },
   "peerDependenciesMeta": {