@nuxt/ui 3.0.0-beta.2 → 3.0.0-beta.4

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

@@ -27,7 +27,7 @@ export interface Form<T extends object> {
 export type FormSchema<T extends object> = ZodSchema | YupObjectSchema<T> | ValibotSchema | ValibotSchemaAsync | ValibotSafeParser<any, any> | ValibotSafeParserAsync<any, any> | JoiSchema<T> | SuperstructSchema<any, any> | StandardSchemaV1;
 export type FormInputEvents = 'input' | 'blur' | 'change' | 'focus';
 export interface FormError<P extends string = string> {
-    name: P;
+    name?: P;
     message: string;
 }
 export interface FormErrorWithId extends FormError {

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

@@ -48,9 +48,9 @@ export type Messages = {
     };
 };
 export type Direction = 'ltr' | 'rtl';
-export type Locale = {
+export type Locale<M> = {
     name: string;
     code: string;
     dir: Direction;
-    messages: Messages;
+    messages: M;
 };

package/dist/runtime/utils/index.js

@@ -1,4 +1,4 @@
-import { isEqual } from "ohash";
+import { isEqual } from "ohash/utils";
 export function pick(data, keys) {
   const result = {};
   for (const key of keys) {

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

@@ -3,13 +3,13 @@ import type { Locale, Direction } from '../types/locale';
 import type { MaybeRef } from '@vueuse/core';
 export type TranslatorOption = Record<string, string | number>;
 export type Translator = (path: string, option?: TranslatorOption) => string;
-export type LocaleContext = {
-    locale: Ref<Locale>;
+export type LocaleContext<M> = {
+    locale: Ref<Locale<M>>;
     lang: Ref<string>;
     dir: Ref<Direction>;
     code: Ref<string>;
     t: Translator;
 };
-export declare function buildTranslator(locale: MaybeRef<Locale>): Translator;
-export declare function translate(path: string, option: undefined | TranslatorOption, locale: Locale): string;
-export declare function buildLocaleContext(locale: MaybeRef<Locale>): LocaleContext;
+export declare function buildTranslator<M>(locale: MaybeRef<Locale<M>>): Translator;
+export declare function translate<M>(path: string, option: undefined | TranslatorOption, locale: Locale<M>): string;
+export declare function buildLocaleContext<M>(locale: MaybeRef<Locale<M>>): LocaleContext<M>;

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

@@ -1 +1 @@
-export declare const tv: import("tailwind-variants").CreateTV<boolean | (string | number | symbol)[] | {} | undefined>;
+export declare const tv: import("tailwind-variants").CreateTV;

package/dist/runtime/vue/components/Link.vue

@@ -91,7 +91,7 @@ export interface LinkSlots {
 
 <script setup lang="ts">
 import { computed, getCurrentInstance } from 'vue'
-import { isEqual, diff } from 'ohash'
+import { isEqual, diff } from 'ohash/utils'
 import { useForwardProps } from 'reka-ui'
 import { reactiveOmit } from '@vueuse/core'
 import { hasProtocol } from 'ufo'
@@ -140,11 +140,15 @@ const ui = computed(() => tv({
 function isPartiallyEqual(item1: any, item2: any) {
   const diffedKeys = diff(item1, item2).reduce((filtered, q) => {
     if (q.type === 'added') {
-      filtered.push(q.key)
+      filtered.add(q.key)
     }
     return filtered
-  }, [] as string[])
-  return isEqual(item1, item2, { excludeKeys: key => diffedKeys.includes(key) })
+  }, new Set<string>())
+
+  const item1Filtered = Object.fromEntries(Object.entries(item1).filter(([key]) => !diffedKeys.has(key)))
+  const item2Filtered = Object.fromEntries(Object.entries(item2).filter(([key]) => !diffedKeys.has(key)))
+
+  return isEqual(item1Filtered, item2Filtered)
 }
 
 const isExternal = computed(() => {

package/dist/runtime/vue/plugins/head.d.ts

@@ -1,4 +1,4 @@
 declare const _default: {
-    install(): void;
+    install(app: import("vue").App<any>): void;
 };
 export default _default;

package/dist/runtime/vue/plugins/head.js

@@ -1,6 +1,7 @@
-import { createHead, setHeadInjectionHandler } from "@unhead/vue";
+import { createHead } from "@unhead/vue/client";
 export default {
-  install() {
-    setHeadInjectionHandler(() => createHead());
+  install(app) {
+    const head = createHead();
+    app.use(head);
   }
 };

package/dist/runtime/vue/stubs.d.ts

@@ -3,6 +3,7 @@ import type { NuxtApp } from '#app';
 export { useHead } from '@unhead/vue';
 export { useRoute, useRouter } from 'vue-router';
 export { defineShortcuts } from '../composables/defineShortcuts';
+export { defineLocale } from '../composables/defineLocale';
 export { useLocale } from '../composables/useLocale';
 export declare const useColorMode: () => {
     forced: boolean;
@@ -25,6 +26,7 @@ export declare const useCookie: <T = string>(_name: string, _options?: Record<st
 export declare const useState: <T>(key: string, init: () => T) => Ref<T>;
 export declare function useNuxtApp(): {
     isHydrating: boolean;
+    isVue: boolean;
     payload: {
         serverRendered: boolean;
     };

package/dist/runtime/vue/stubs.js

@@ -4,6 +4,7 @@ import { useColorMode as useColorModeVueUse } from "@vueuse/core";
 export { useHead } from "@unhead/vue";
 export { useRoute, useRouter } from "vue-router";
 export { defineShortcuts } from "../composables/defineShortcuts.js";
+export { defineLocale } from "../composables/defineLocale.js";
 export { useLocale } from "../composables/useLocale.js";
 export const useColorMode = () => {
   if (!appConfig.colorMode) {
@@ -52,6 +53,7 @@ export const useState = (key, init) => {
 export function useNuxtApp() {
   return {
     isHydrating: true,
+    isVue: true,
     payload: { serverRendered: false }
   };
 }

package/dist/shared/{ui.DfK2RX6G.cjs → ui.COBs1u5H.cjs}

@@ -49,7 +49,7 @@ const defaultOptions = {
   fonts: true,
   colorMode: true,
   theme: {
-    colors: undefined,
+    colors: void 0,
     transitions: true
   }
 };
@@ -498,6 +498,14 @@ const button = (options) => ({
     },
     loading: {
       true: ""
+    },
+    active: {
+      true: {
+        base: ""
+      },
+      false: {
+        base: ""
+      }
     }
   },
   compoundVariants: [...(options.theme.colors || []).map((color) => ({
@@ -1996,7 +2004,12 @@ const pagination = {
     root: "",
     list: "flex items-center gap-1",
     ellipsis: "pointer-events-none",
-    label: "min-w-5 text-center"
+    label: "min-w-5 text-center",
+    first: "",
+    prev: "",
+    item: "",
+    next: "",
+    last: ""
   }
 };
 
@@ -2379,7 +2392,7 @@ const radioGroup = (options) => ({
 const select = (options) => {
   return defu.defuFn({
     slots: {
-      root: () => undefined,
+      root: () => void 0,
       base: () => ["relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75", options.theme.transitions && "transition-colors"],
       value: "truncate pointer-events-none",
       placeholder: "truncate text-(--ui-text-dimmed)",
@@ -2960,7 +2973,8 @@ const table = (options) => ({
     tr: "data-[selected=true]:bg-(--ui-bg-elevated)/50",
     th: "px-4 py-3.5 text-sm text-(--ui-text-highlighted) text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0",
     td: "p-4 text-sm text-(--ui-text-muted) whitespace-nowrap [&:has([role=checkbox])]:pe-0",
-    empty: "py-6 text-center text-sm text-(--ui-text-muted)"
+    empty: "py-6 text-center text-sm text-(--ui-text-muted)",
+    loading: "py-6 text-center"
   },
   variants: {
     pinned: {
@@ -3467,7 +3481,7 @@ function getTemplates(options, uiConfig) {
   --color-old-neutral-800: ${colors__default.neutral[800]};
   --color-old-neutral-900: ${colors__default.neutral[900]};
   --color-old-neutral-950: ${colors__default.neutral[950]};
-  ${[...options.theme?.colors || [], "neutral"].map((color) => [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950].map((shade) => `--color-${color}-${shade}: var(--ui-color-${color}-${shade});`).join("\n	")).join("\n	")}
+  ${[...(options.theme?.colors || []).filter((color) => !colors__default[color]), "neutral"].map((color) => [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950].map((shade) => `--color-${color}-${shade}: var(--ui-color-${color}-${shade});`).join("\n	")).join("\n	")}
 }
 `
   });
@@ -3499,6 +3513,10 @@ type AppConfigUI = {
 
 declare module '@nuxt/schema' {
   interface AppConfigInput {
+    /**
+     * Nuxt UI theme configuration
+     * @see https://ui3.nuxt.dev/getting-started/theme#customize-theme
+     */
     ui?: AppConfigUI
   }
 }

package/dist/shared/{ui.DSPu6Y8j.mjs → ui.yjbGE7Dx.mjs}

@@ -43,7 +43,7 @@ const defaultOptions = {
   fonts: true,
   colorMode: true,
   theme: {
-    colors: undefined,
+    colors: void 0,
     transitions: true
   }
 };
@@ -492,6 +492,14 @@ const button = (options) => ({
     },
     loading: {
       true: ""
+    },
+    active: {
+      true: {
+        base: ""
+      },
+      false: {
+        base: ""
+      }
     }
   },
   compoundVariants: [...(options.theme.colors || []).map((color) => ({
@@ -1990,7 +1998,12 @@ const pagination = {
     root: "",
     list: "flex items-center gap-1",
     ellipsis: "pointer-events-none",
-    label: "min-w-5 text-center"
+    label: "min-w-5 text-center",
+    first: "",
+    prev: "",
+    item: "",
+    next: "",
+    last: ""
   }
 };
 
@@ -2373,7 +2386,7 @@ const radioGroup = (options) => ({
 const select = (options) => {
   return defuFn({
     slots: {
-      root: () => undefined,
+      root: () => void 0,
       base: () => ["relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75", options.theme.transitions && "transition-colors"],
       value: "truncate pointer-events-none",
       placeholder: "truncate text-(--ui-text-dimmed)",
@@ -2954,7 +2967,8 @@ const table = (options) => ({
     tr: "data-[selected=true]:bg-(--ui-bg-elevated)/50",
     th: "px-4 py-3.5 text-sm text-(--ui-text-highlighted) text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0",
     td: "p-4 text-sm text-(--ui-text-muted) whitespace-nowrap [&:has([role=checkbox])]:pe-0",
-    empty: "py-6 text-center text-sm text-(--ui-text-muted)"
+    empty: "py-6 text-center text-sm text-(--ui-text-muted)",
+    loading: "py-6 text-center"
   },
   variants: {
     pinned: {
@@ -3461,7 +3475,7 @@ function getTemplates(options, uiConfig) {
   --color-old-neutral-800: ${colors.neutral[800]};
   --color-old-neutral-900: ${colors.neutral[900]};
   --color-old-neutral-950: ${colors.neutral[950]};
-  ${[...options.theme?.colors || [], "neutral"].map((color) => [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950].map((shade) => `--color-${color}-${shade}: var(--ui-color-${color}-${shade});`).join("\n	")).join("\n	")}
+  ${[...(options.theme?.colors || []).filter((color) => !colors[color]), "neutral"].map((color) => [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950].map((shade) => `--color-${color}-${shade}: var(--ui-color-${color}-${shade});`).join("\n	")).join("\n	")}
 }
 `
   });
@@ -3493,6 +3507,10 @@ type AppConfigUI = {
 
 declare module '@nuxt/schema' {
   interface AppConfigInput {
+    /**
+     * Nuxt UI theme configuration
+     * @see https://ui3.nuxt.dev/getting-started/theme#customize-theme
+     */
     ui?: AppConfigUI
   }
 }

package/dist/unplugin.cjs

@@ -5,7 +5,7 @@ const pathe = require('pathe');
 const unplugin = require('unplugin');
 const defu = require('defu');
 const tailwind = require('@tailwindcss/vite');
-const templates = require('./shared/ui.DfK2RX6G.cjs');
+const templates = require('./shared/ui.COBs1u5H.cjs');
 const tinyglobby = require('tinyglobby');
 const knitwork = require('knitwork');
 const MagicString = require('magic-string');

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.DSPu6Y8j.mjs';
+import { g as getTemplates, d as defaultOptions, r as resolveColors, a as getDefaultUiConfig } from './shared/ui.yjbGE7Dx.mjs';
 import { globSync } from 'tinyglobby';
 import { genSafeVariableName } from 'knitwork';
 import MagicString from 'magic-string';

package/dist/vite.cjs

@@ -6,7 +6,7 @@ require('pathe');
 require('unplugin');
 require('defu');
 require('@tailwindcss/vite');
-require('./shared/ui.DfK2RX6G.cjs');
+require('./shared/ui.COBs1u5H.cjs');
 require('../dist/runtime/utils/index.js');
 require('scule');
 require('@nuxt/kit');

package/dist/vite.mjs

@@ -4,7 +4,7 @@ import 'pathe';
 import 'unplugin';
 import 'defu';
 import '@tailwindcss/vite';
-import './shared/ui.DSPu6Y8j.mjs';
+import './shared/ui.yjbGE7Dx.mjs';
 import '../dist/runtime/utils/index.js';
 import 'scule';
 import '@nuxt/kit';

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@nuxt/ui",
   "description": "A UI Library for Modern Web Apps, powered by Vue & Tailwind CSS.",
-  "version": "3.0.0-beta.2",
-  "packageManager": "pnpm@10.5.2",
+  "version": "3.0.0-beta.4",
+  "packageManager": "pnpm@10.6.2",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/nuxt/ui.git"
@@ -67,7 +67,7 @@
     "dev:build": "nuxi build playground",
     "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground && nuxi prepare docs && vite build playground-vue",
     "docs": "DEV=true nuxi dev docs",
-    "docs:build": "nuxi build docs",
+    "docs:build": "NODE_OPTIONS='--max-old-space-size=8192' nuxi build docs",
     "docs:prepare": "nuxt-component-meta docs",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
@@ -81,17 +81,17 @@
     "@iconify/vue": "^4.3.0",
     "@internationalized/date": "^3.7.0",
     "@internationalized/number": "^3.6.0",
-    "@nuxt/fonts": "^0.10.3",
-    "@nuxt/icon": "^1.10.3",
-    "@nuxt/kit": "^3.15.4",
-    "@nuxt/schema": "^3.15.4",
+    "@nuxt/fonts": "^0.11.0",
+    "@nuxt/icon": "^1.11.0",
+    "@nuxt/kit": "^3.16.0",
+    "@nuxt/schema": "^3.16.0",
     "@nuxtjs/color-mode": "^3.5.2",
-    "@tailwindcss/postcss": "^4.0.9",
-    "@tailwindcss/vite": "^4.0.9",
+    "@tailwindcss/postcss": "^4.0.13",
+    "@tailwindcss/vite": "^4.0.13",
     "@tanstack/vue-table": "^8.21.2",
-    "@unhead/vue": "^1.11.20",
-    "@vueuse/core": "^12.7.0",
-    "@vueuse/integrations": "^12.7.0",
+    "@unhead/vue": "^2.0.0-rc.10",
+    "@vueuse/core": "^13.0.0",
+    "@vueuse/integrations": "^13.0.0",
     "colortranslator": "^4.1.0",
     "consola": "^3.4.0",
     "defu": "^6.1.4",
@@ -106,34 +106,36 @@
     "knitwork": "^1.2.0",
     "magic-string": "^0.30.17",
     "mlly": "^1.7.4",
-    "ohash": "^1.1.4",
+    "ohash": "^2.0.11",
     "pathe": "^2.0.3",
     "reka-ui": "^2.0.2",
     "scule": "^1.3.0",
-    "tailwind-variants": "^0.3.1",
-    "tailwindcss": "^4.0.9",
+    "tailwind-variants": "^1.0.0",
+    "tailwindcss": "^4.0.13",
     "tinyglobby": "^0.2.12",
     "unplugin": "^2.2.0",
     "unplugin-auto-import": "^19.1.1",
     "unplugin-vue-components": "^28.4.1",
-    "vaul-vue": "^0.3.0"
+    "vaul-vue": "^0.3.0",
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.0"
   },
   "devDependencies": {
-    "@nuxt/eslint-config": "^1.1.0",
+    "@nuxt/eslint-config": "^1.2.0",
     "@nuxt/module-builder": "^0.8.4",
-    "@nuxt/test-utils": "^3.17.0",
+    "@nuxt/test-utils": "^3.17.2",
     "@release-it/conventional-changelog": "^10.0.0",
     "@standard-schema/spec": "^1.0.0",
     "@vue/test-utils": "^2.4.6",
     "embla-carousel": "^8.5.2",
-    "eslint": "^9.21.0",
-    "happy-dom": "^17.1.2",
+    "eslint": "^9.22.0",
+    "happy-dom": "^17.4.4",
     "joi": "^17.13.3",
-    "nuxt": "^3.15.4",
+    "nuxt": "^3.16.0",
     "release-it": "^18.1.2",
     "superstruct": "^2.0.2",
     "valibot": "^0.42.1",
-    "vitest": "^3.0.7",
+    "vitest": "^3.0.8",
     "vitest-environment-nuxt": "^1.0.1",
     "vue-tsc": "^2.2.0",
     "yup": "^1.6.1",
@@ -146,12 +148,9 @@
     "@nuxt/ui": "workspace:*",
     "chokidar": "3.6.0",
     "debug": "4.3.7",
-    "happy-dom": "17.1.2",
-    "rollup": "4.32.1",
+    "rollup": "4.34.9",
     "typescript": "5.6.3",
-    "unimport": "3.14.5",
     "unplugin": "^2.2.0",
-    "vue": "3.5.13",
     "vue-tsc": "2.2.0"
   },
   "pnpm": {