@nuxt/ui 4.1.0 → 4.2.0

package/dist/unplugin.d.mts

@@ -59,6 +59,7 @@ type AppConfigUI = {
         neutral?: NeutralColor;
     };
     icons?: Partial<typeof _default>;
+    prefix?: string;
 } & TVConfig<typeof ui>;
 interface NuxtUIOptions extends Omit<ModuleOptions, 'fonts' | 'colorMode'> {
     /** Whether to generate declaration files for auto-imported components. */

package/dist/unplugin.mjs

@@ -3,7 +3,9 @@ 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.Cmctwxv6.mjs';
+import { g as getTemplates, d as defaultOptions, r as resolveColors, a as getDefaultConfig } from './shared/ui.B77q-Dvh.mjs';
+import fs from 'node:fs';
+import path from 'node:path';
 import MagicString from 'magic-string';
 import { genSafeVariableName } from 'knitwork';
 import { resolvePathSync } from 'mlly';
@@ -11,17 +13,43 @@ import { globSync } from 'tinyglobby';
 import AutoImportComponents from 'unplugin-vue-components';
 import AutoImport from 'unplugin-auto-import';
 import '../dist/runtime/utils/index.js';
-import 'node:fs/promises';
 import 'scule';
 import 'tailwindcss/colors';
 import '@nuxt/kit';
+import 'node:fs/promises';
 
 function TemplatePlugin(options, appConfig) {
   const templates = getTemplates(options, appConfig.ui);
   const templateKeys = new Set(templates.map((t) => `#build/${t.filename}`));
+  async function writeTemplates(root) {
+    const map = {};
+    const dir = path.join(root, "node_modules", ".nuxt-ui");
+    for (const template of templates) {
+      if (!template.write || !template.filename) {
+        continue;
+      }
+      const filePath = path.join(dir, template.filename);
+      if (!fs.existsSync(path.dirname(filePath))) {
+        fs.mkdirSync(path.dirname(filePath), { recursive: true });
+      }
+      fs.writeFileSync(filePath, await template.getContents({}));
+      map[`#build/${template.filename}`] = filePath;
+    }
+    return map;
+  }
   return {
     name: "nuxt:ui:templates",
     enforce: "pre",
+    vite: {
+      async config(config) {
+        const alias = await writeTemplates(config.root || process.cwd());
+        return {
+          resolve: {
+            alias
+          }
+        };
+      }
+    },
     resolveId(id) {
       if (templateKeys.has(id + ".ts")) {
         return id.replace("#build/", "virtual:nuxt-ui-templates/") + ".ts";
@@ -243,7 +271,7 @@ const NuxtUIPlugin = createUnplugin((_options = {}, meta) => {
   const options = defu(_options, { fonts: false }, defaultOptions);
   options.theme = options.theme || {};
   options.theme.colors = resolveColors(options.theme.colors);
-  const appConfig = defu({ ui: options.ui, colorMode: options.colorMode }, { ui: getDefaultUiConfig(options.theme.colors) });
+  const appConfig = defu({ ui: options.ui, colorMode: options.colorMode }, { ui: getDefaultConfig(options.theme) });
   return [
     NuxtEnvironmentPlugin(options),
     ComponentImportPlugin(options, meta),

package/dist/vite.mjs

@@ -4,14 +4,16 @@ import 'pathe';
 import 'unplugin';
 import 'defu';
 import '@tailwindcss/vite';
-import './shared/ui.Cmctwxv6.mjs';
+import './shared/ui.B77q-Dvh.mjs';
 import '../dist/runtime/utils/index.js';
-import 'node:fs/promises';
-import 'tinyglobby';
 import 'scule';
 import 'knitwork';
 import 'tailwindcss/colors';
 import '@nuxt/kit';
+import 'node:fs/promises';
+import 'tinyglobby';
+import 'node:fs';
+import 'node:path';
 import 'magic-string';
 import 'mlly';
 import 'unplugin-vue-components';

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.1.0",
-  "packageManager": "pnpm@10.18.3",
+  "version": "4.2.0",
+  "packageManager": "pnpm@10.22.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/nuxt/ui.git"
@@ -29,7 +29,14 @@
     },
     "./runtime/*": "./dist/runtime/*",
     "./components/*": "./dist/runtime/components/*",
-    "./composables/*": "./dist/runtime/composables/*",
+    "./composables": {
+      "types": "./dist/runtime/composables/index.d.ts",
+      "import": "./dist/runtime/composables/index.js"
+    },
+    "./composables/*": {
+      "types": "./dist/runtime/composables/*.d.ts",
+      "import": "./dist/runtime/composables/*.js"
+    },
     "./utils": {
       "types": "./dist/runtime/utils/index.d.ts",
       "import": "./dist/runtime/utils/index.js"
@@ -63,8 +70,11 @@
       "components/*": [
         "./dist/runtime/components/*"
       ],
+      "composables": [
+        "./dist/runtime/composables/index.d.ts"
+      ],
       "composables/*": [
-        "./dist/runtime/composables/*"
+        "./dist/runtime/composables/*.d.ts"
       ],
       "utils": [
         "./dist/runtime/utils/index.d.ts"
@@ -77,18 +87,12 @@
       ]
     }
   },
-  "imports": {
-    "#build/ui/*": "./.nuxt/ui/*.ts",
-    "#build/ui.css": "./.nuxt/ui.css"
-  },
   "bin": {
     "nuxt-ui": "./cli/index.mjs"
   },
   "style": "./dist/runtime/index.css",
   "main": "./dist/module.mjs",
   "files": [
-    ".nuxt/ui",
-    ".nuxt/ui.css",
     "dist",
     "cli",
     "vue-plugin.d.ts"
@@ -111,18 +115,17 @@
     "release": "release-it"
   },
   "dependencies": {
-    "@ai-sdk/vue": "^2.0.76",
     "@iconify/vue": "^5.0.0",
     "@internationalized/date": "^3.10.0",
     "@internationalized/number": "^3.6.5",
-    "@nuxt/fonts": "^0.11.4",
-    "@nuxt/icon": "^2.0.0",
-    "@nuxt/kit": "^4.1.2",
-    "@nuxt/schema": "^4.1.2",
+    "@nuxt/fonts": "^0.12.1",
+    "@nuxt/icon": "^2.1.0",
+    "@nuxt/kit": "^4.2.1",
+    "@nuxt/schema": "^4.2.1",
     "@nuxtjs/color-mode": "^3.5.2",
     "@standard-schema/spec": "^1.0.0",
-    "@tailwindcss/postcss": "^4.1.16",
-    "@tailwindcss/vite": "^4.1.16",
+    "@tailwindcss/postcss": "^4.1.17",
+    "@tailwindcss/vite": "^4.1.17",
     "@tanstack/vue-table": "^8.21.3",
     "@tanstack/vue-virtual": "^3.13.12",
     "@unhead/vue": "^2.0.19",
@@ -140,44 +143,44 @@
     "embla-carousel-wheel-gestures": "^8.1.0",
     "fuse.js": "^7.1.0",
     "hookable": "^5.5.3",
-    "knitwork": "^1.2.0",
-    "magic-string": "^0.30.19",
+    "knitwork": "^1.3.0",
+    "magic-string": "^0.30.21",
     "mlly": "^1.8.0",
     "motion-v": "^1.7.3",
     "ohash": "^2.0.11",
     "pathe": "^2.0.3",
     "reka-ui": "2.6.0",
     "scule": "^1.3.0",
-    "tailwind-merge": "^3.3.1",
+    "tailwind-merge": "^3.4.0",
     "tailwind-variants": "^3.1.1",
-    "tailwindcss": "^4.1.16",
+    "tailwindcss": "^4.1.17",
     "tinyglobby": "^0.2.15",
     "unplugin": "^2.3.10",
     "unplugin-auto-import": "^20.2.0",
     "unplugin-vue-components": "^30.0.0",
     "vaul-vue": "0.4.1",
-    "vue-component-type-helpers": "^3.1.1"
+    "vue-component-type-helpers": "^3.1.4"
   },
   "devDependencies": {
-    "@nuxt/content": "^3.7.1",
-    "@nuxt/eslint-config": "^1.9.0",
+    "@nuxt/eslint-config": "^1.10.0",
     "@nuxt/module-builder": "^1.0.2",
-    "@nuxt/test-utils": "^3.19.2",
-    "@release-it/conventional-changelog": "^10.0.1",
+    "@nuxt/test-utils": "^3.20.1",
+    "@release-it/conventional-changelog": "^10.0.2",
     "@vue/test-utils": "^2.4.6",
-    "ai": "^5.0.76",
+    "ai": "^5.0.93",
     "embla-carousel": "^8.6.0",
-    "eslint": "^9.38.0",
-    "happy-dom": "^20.0.7",
-    "nuxt": "^4.1.2",
-    "release-it": "^19.0.5",
+    "eslint": "^9.39.1",
+    "happy-dom": "^20.0.10",
+    "nuxt": "^4.2.1",
+    "release-it": "^19.0.6",
     "vitest": "^3.2.4",
     "vitest-axe": "^0.1.0",
     "vitest-environment-nuxt": "^1.0.1",
-    "vue-tsc": "^3.1.1"
+    "vue-tsc": "^3.1.4"
   },
   "peerDependencies": {
     "@inertiajs/vue3": "^2.0.7",
+    "@nuxt/content": "^3.0.0",
     "joi": "^18.0.0",
     "superstruct": "^2.0.0",
     "typescript": "^5.6.3",
@@ -190,6 +193,9 @@
     "@inertiajs/vue3": {
       "optional": true
     },
+    "@nuxt/content": {
+      "optional": true
+    },
     "joi": {
       "optional": true
     },
@@ -210,11 +216,10 @@
     }
   },
   "resolutions": {
-    "@nuxt/kit": "^4.1.2",
+    "@nuxt/kit": "^4.2.1",
     "@nuxt/ui": "workspace:*",
     "debug": "4.3.7",
     "typescript": "5.8.3",
-    "unimport": "4.1.1",
     "unplugin": "^2.3.10"
   },
   "keywords": [

package/.nuxt/ui/accordion.ts

@@ -1,20 +0,0 @@
-export default {
-  "slots": {
-    "root": "w-full",
-    "item": "border-b border-default last:border-b-0",
-    "header": "flex",
-    "trigger": "group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0",
-    "content": "data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none",
-    "body": "text-sm pb-3.5",
-    "leadingIcon": "shrink-0 size-5",
-    "trailingIcon": "shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200",
-    "label": "text-start break-words"
-  },
-  "variants": {
-    "disabled": {
-      "true": {
-        "trigger": "cursor-not-allowed opacity-75"
-      }
-    }
-  }
-}

package/.nuxt/ui/alert.ts

@@ -1,264 +0,0 @@
-const color = [
-  "primary",
-  "secondary",
-  "success",
-  "info",
-  "warning",
-  "error",
-  "neutral"
-] as const
-
-const variant = [
-  "solid",
-  "outline",
-  "soft",
-  "subtle"
-] as const
-
-export default {
-  "slots": {
-    "root": "relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5",
-    "wrapper": "min-w-0 flex-1 flex flex-col",
-    "title": "text-sm font-medium",
-    "description": "text-sm opacity-90",
-    "icon": "shrink-0 size-5",
-    "avatar": "shrink-0",
-    "avatarSize": "2xl",
-    "actions": "flex flex-wrap gap-1.5 shrink-0",
-    "close": "p-0"
-  },
-  "variants": {
-    "color": {
-      "primary": "",
-      "secondary": "",
-      "success": "",
-      "info": "",
-      "warning": "",
-      "error": "",
-      "neutral": ""
-    },
-    "variant": {
-      "solid": "",
-      "outline": "",
-      "soft": "",
-      "subtle": ""
-    },
-    "orientation": {
-      "horizontal": {
-        "root": "items-center",
-        "actions": "items-center"
-      },
-      "vertical": {
-        "root": "items-start",
-        "actions": "items-start mt-2.5"
-      }
-    },
-    "title": {
-      "true": {
-        "description": "mt-1"
-      }
-    }
-  },
-  "compoundVariants": [
-    {
-      "color": "primary" as typeof color[number],
-      "variant": "solid" as typeof variant[number],
-      "class": {
-        "root": "bg-primary text-inverted"
-      }
-    },
-    {
-      "color": "secondary" as typeof color[number],
-      "variant": "solid" as typeof variant[number],
-      "class": {
-        "root": "bg-secondary text-inverted"
-      }
-    },
-    {
-      "color": "success" as typeof color[number],
-      "variant": "solid" as typeof variant[number],
-      "class": {
-        "root": "bg-success text-inverted"
-      }
-    },
-    {
-      "color": "info" as typeof color[number],
-      "variant": "solid" as typeof variant[number],
-      "class": {
-        "root": "bg-info text-inverted"
-      }
-    },
-    {
-      "color": "warning" as typeof color[number],
-      "variant": "solid" as typeof variant[number],
-      "class": {
-        "root": "bg-warning text-inverted"
-      }
-    },
-    {
-      "color": "error" as typeof color[number],
-      "variant": "solid" as typeof variant[number],
-      "class": {
-        "root": "bg-error text-inverted"
-      }
-    },
-    {
-      "color": "primary" as typeof color[number],
-      "variant": "outline" as typeof variant[number],
-      "class": {
-        "root": "text-primary ring ring-inset ring-primary/25"
-      }
-    },
-    {
-      "color": "secondary" as typeof color[number],
-      "variant": "outline" as typeof variant[number],
-      "class": {
-        "root": "text-secondary ring ring-inset ring-secondary/25"
-      }
-    },
-    {
-      "color": "success" as typeof color[number],
-      "variant": "outline" as typeof variant[number],
-      "class": {
-        "root": "text-success ring ring-inset ring-success/25"
-      }
-    },
-    {
-      "color": "info" as typeof color[number],
-      "variant": "outline" as typeof variant[number],
-      "class": {
-        "root": "text-info ring ring-inset ring-info/25"
-      }
-    },
-    {
-      "color": "warning" as typeof color[number],
-      "variant": "outline" as typeof variant[number],
-      "class": {
-        "root": "text-warning ring ring-inset ring-warning/25"
-      }
-    },
-    {
-      "color": "error" as typeof color[number],
-      "variant": "outline" as typeof variant[number],
-      "class": {
-        "root": "text-error ring ring-inset ring-error/25"
-      }
-    },
-    {
-      "color": "primary" as typeof color[number],
-      "variant": "soft" as typeof variant[number],
-      "class": {
-        "root": "bg-primary/10 text-primary"
-      }
-    },
-    {
-      "color": "secondary" as typeof color[number],
-      "variant": "soft" as typeof variant[number],
-      "class": {
-        "root": "bg-secondary/10 text-secondary"
-      }
-    },
-    {
-      "color": "success" as typeof color[number],
-      "variant": "soft" as typeof variant[number],
-      "class": {
-        "root": "bg-success/10 text-success"
-      }
-    },
-    {
-      "color": "info" as typeof color[number],
-      "variant": "soft" as typeof variant[number],
-      "class": {
-        "root": "bg-info/10 text-info"
-      }
-    },
-    {
-      "color": "warning" as typeof color[number],
-      "variant": "soft" as typeof variant[number],
-      "class": {
-        "root": "bg-warning/10 text-warning"
-      }
-    },
-    {
-      "color": "error" as typeof color[number],
-      "variant": "soft" as typeof variant[number],
-      "class": {
-        "root": "bg-error/10 text-error"
-      }
-    },
-    {
-      "color": "primary" as typeof color[number],
-      "variant": "subtle" as typeof variant[number],
-      "class": {
-        "root": "bg-primary/10 text-primary ring ring-inset ring-primary/25"
-      }
-    },
-    {
-      "color": "secondary" as typeof color[number],
-      "variant": "subtle" as typeof variant[number],
-      "class": {
-        "root": "bg-secondary/10 text-secondary ring ring-inset ring-secondary/25"
-      }
-    },
-    {
-      "color": "success" as typeof color[number],
-      "variant": "subtle" as typeof variant[number],
-      "class": {
-        "root": "bg-success/10 text-success ring ring-inset ring-success/25"
-      }
-    },
-    {
-      "color": "info" as typeof color[number],
-      "variant": "subtle" as typeof variant[number],
-      "class": {
-        "root": "bg-info/10 text-info ring ring-inset ring-info/25"
-      }
-    },
-    {
-      "color": "warning" as typeof color[number],
-      "variant": "subtle" as typeof variant[number],
-      "class": {
-        "root": "bg-warning/10 text-warning ring ring-inset ring-warning/25"
-      }
-    },
-    {
-      "color": "error" as typeof color[number],
-      "variant": "subtle" as typeof variant[number],
-      "class": {
-        "root": "bg-error/10 text-error ring ring-inset ring-error/25"
-      }
-    },
-    {
-      "color": "neutral" as typeof color[number],
-      "variant": "solid" as typeof variant[number],
-      "class": {
-        "root": "text-inverted bg-inverted"
-      }
-    },
-    {
-      "color": "neutral" as typeof color[number],
-      "variant": "outline" as typeof variant[number],
-      "class": {
-        "root": "text-highlighted bg-default ring ring-inset ring-default"
-      }
-    },
-    {
-      "color": "neutral" as typeof color[number],
-      "variant": "soft" as typeof variant[number],
-      "class": {
-        "root": "text-highlighted bg-elevated/50"
-      }
-    },
-    {
-      "color": "neutral" as typeof color[number],
-      "variant": "subtle" as typeof variant[number],
-      "class": {
-        "root": "text-highlighted bg-elevated/50 ring ring-inset ring-accented"
-      }
-    }
-  ],
-  "defaultVariants": {
-    "color": "primary" as typeof color[number],
-    "variant": "solid" as typeof variant[number]
-  }
-}

package/.nuxt/ui/auth-form.ts

@@ -1,20 +0,0 @@
-export default {
-  "slots": {
-    "root": "w-full space-y-6",
-    "header": "flex flex-col text-center",
-    "leading": "mb-2",
-    "leadingIcon": "size-8 shrink-0 inline-block",
-    "title": "text-xl text-pretty font-semibold text-highlighted",
-    "description": "mt-1 text-base text-pretty text-muted",
-    "body": "gap-y-6 flex flex-col",
-    "providers": "space-y-3",
-    "checkbox": "",
-    "select": "w-full",
-    "password": "w-full",
-    "otp": "w-full",
-    "input": "w-full",
-    "separator": "",
-    "form": "space-y-5",
-    "footer": "text-sm text-center text-muted mt-2"
-  }
-}

package/.nuxt/ui/avatar-group.ts

@@ -1,52 +0,0 @@
-const size = [
-  "3xs",
-  "2xs",
-  "xs",
-  "sm",
-  "md",
-  "lg",
-  "xl",
-  "2xl",
-  "3xl"
-] as const
-
-export default {
-  "slots": {
-    "root": "inline-flex flex-row-reverse justify-end",
-    "base": "relative rounded-full ring-bg first:me-0"
-  },
-  "variants": {
-    "size": {
-      "3xs": {
-        "base": "ring -me-0.5"
-      },
-      "2xs": {
-        "base": "ring -me-0.5"
-      },
-      "xs": {
-        "base": "ring -me-0.5"
-      },
-      "sm": {
-        "base": "ring-2 -me-1.5"
-      },
-      "md": {
-        "base": "ring-2 -me-1.5"
-      },
-      "lg": {
-        "base": "ring-2 -me-1.5"
-      },
-      "xl": {
-        "base": "ring-3 -me-2"
-      },
-      "2xl": {
-        "base": "ring-3 -me-2"
-      },
-      "3xl": {
-        "base": "ring-3 -me-2"
-      }
-    }
-  },
-  "defaultVariants": {
-    "size": "md" as typeof size[number]
-  }
-}

package/.nuxt/ui/avatar.ts

@@ -1,54 +0,0 @@
-const size = [
-  "3xs",
-  "2xs",
-  "xs",
-  "sm",
-  "md",
-  "lg",
-  "xl",
-  "2xl",
-  "3xl"
-] as const
-
-export default {
-  "slots": {
-    "root": "inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated",
-    "image": "h-full w-full rounded-[inherit] object-cover",
-    "fallback": "font-medium leading-none text-muted truncate",
-    "icon": "text-muted shrink-0"
-  },
-  "variants": {
-    "size": {
-      "3xs": {
-        "root": "size-4 text-[8px]"
-      },
-      "2xs": {
-        "root": "size-5 text-[10px]"
-      },
-      "xs": {
-        "root": "size-6 text-xs"
-      },
-      "sm": {
-        "root": "size-7 text-sm"
-      },
-      "md": {
-        "root": "size-8 text-base"
-      },
-      "lg": {
-        "root": "size-9 text-lg"
-      },
-      "xl": {
-        "root": "size-10 text-xl"
-      },
-      "2xl": {
-        "root": "size-11 text-[22px]"
-      },
-      "3xl": {
-        "root": "size-12 text-2xl"
-      }
-    }
-  },
-  "defaultVariants": {
-    "size": "md" as typeof size[number]
-  }
-}