@nuxt/ui 2.18.3 → 2.18.5

package/dist/runtime/utils/colors.js

@@ -16,193 +16,193 @@ const colorsToExclude = [
 ];
 const safelistByComponent = {
   alert: (colorsAsRegex2) => [{
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-50`)
+    pattern: RegExp(`^bg-(${colorsAsRegex2})-50$`)
   }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-400`),
+    pattern: RegExp(`^bg-(${colorsAsRegex2})-400$`),
     variants: ["dark"]
   }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-500`)
+    pattern: RegExp(`^bg-(${colorsAsRegex2})-500$`)
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-400`),
+    pattern: RegExp(`^text-(${colorsAsRegex2})-400$`),
     variants: ["dark"]
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-500`)
+    pattern: RegExp(`^text-(${colorsAsRegex2})-500$`)
   }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex2})-400`),
+    pattern: RegExp(`^ring-(${colorsAsRegex2})-400$`),
     variants: ["dark"]
   }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex2})-500`)
+    pattern: RegExp(`^ring-(${colorsAsRegex2})-500$`)
   }],
   avatar: (colorsAsRegex2) => [{
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-400`),
+    pattern: RegExp(`^bg-(${colorsAsRegex2})-400$`),
     variants: ["dark"]
   }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-500`)
+    pattern: RegExp(`^bg-(${colorsAsRegex2})-500$`)
   }],
   badge: (colorsAsRegex2) => [{
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-50`)
+    pattern: RegExp(`^bg-(${colorsAsRegex2})-50$`)
   }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-400`),
+    pattern: RegExp(`^bg-(${colorsAsRegex2})-400$`),
     variants: ["dark"]
   }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-500`)
+    pattern: RegExp(`^bg-(${colorsAsRegex2})-500$`)
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-400`),
+    pattern: RegExp(`^text-(${colorsAsRegex2})-400$`),
     variants: ["dark"]
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-500`)
+    pattern: RegExp(`^text-(${colorsAsRegex2})-500$`)
   }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex2})-400`),
+    pattern: RegExp(`^ring-(${colorsAsRegex2})-400$`),
     variants: ["dark"]
   }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex2})-500`)
+    pattern: RegExp(`^ring-(${colorsAsRegex2})-500$`)
   }],
   button: (colorsAsRegex2) => [{
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-50`),
+    pattern: RegExp(`^bg-(${colorsAsRegex2})-50$`),
     variants: ["hover", "disabled"]
   }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-100`),
+    pattern: RegExp(`^bg-(${colorsAsRegex2})-100$`),
     variants: ["hover"]
   }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-400`),
+    pattern: RegExp(`^bg-(${colorsAsRegex2})-400$`),
     variants: ["dark", "dark:disabled"]
   }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-500`),
+    pattern: RegExp(`^bg-(${colorsAsRegex2})-500$`),
     variants: ["disabled", "dark:hover"]
   }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-600`),
+    pattern: RegExp(`^bg-(${colorsAsRegex2})-600$`),
     variants: ["hover"]
   }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-900`),
+    pattern: RegExp(`^bg-(${colorsAsRegex2})-900$`),
     variants: ["dark:hover"]
   }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-950`),
+    pattern: RegExp(`^bg-(${colorsAsRegex2})-950$`),
     variants: ["dark", "dark:hover", "dark:disabled"]
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-400`),
+    pattern: RegExp(`^text-(${colorsAsRegex2})-400$`),
     variants: ["dark", "dark:disabled"]
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-500`),
+    pattern: RegExp(`^text-(${colorsAsRegex2})-500$`),
     variants: ["dark:hover", "disabled"]
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-600`),
+    pattern: RegExp(`^text-(${colorsAsRegex2})-600$`),
     variants: ["hover"]
   }, {
-    pattern: new RegExp(`outline-(${colorsAsRegex2})-400`),
+    pattern: RegExp(`^outline-(${colorsAsRegex2})-400$`),
     variants: ["dark:focus-visible"]
   }, {
-    pattern: new RegExp(`outline-(${colorsAsRegex2})-500`),
+    pattern: RegExp(`^outline-(${colorsAsRegex2})-500$`),
     variants: ["focus-visible"]
   }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex2})-400`),
+    pattern: RegExp(`^ring-(${colorsAsRegex2})-400$`),
     variants: ["dark:focus-visible"]
   }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex2})-500`),
+    pattern: RegExp(`^ring-(${colorsAsRegex2})-500$`),
     variants: ["focus-visible"]
   }],
   input: (colorsAsRegex2) => [{
-    pattern: new RegExp(`text-(${colorsAsRegex2})-400`),
+    pattern: RegExp(`^text-(${colorsAsRegex2})-400$`),
     variants: ["dark"]
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-500`)
+    pattern: RegExp(`^text-(${colorsAsRegex2})-500$`)
   }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex2})-400`),
+    pattern: RegExp(`^ring-(${colorsAsRegex2})-400$`),
     variants: ["dark", "dark:focus"]
   }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex2})-500`),
+    pattern: RegExp(`^ring-(${colorsAsRegex2})-500$`),
     variants: ["focus"]
   }],
   radio: (colorsAsRegex2) => [{
-    pattern: new RegExp(`text-(${colorsAsRegex2})-400`),
+    pattern: RegExp(`^text-(${colorsAsRegex2})-400$`),
     variants: ["dark"]
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-500`)
+    pattern: RegExp(`^text-(${colorsAsRegex2})-500$`)
   }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex2})-400`),
+    pattern: RegExp(`^ring-(${colorsAsRegex2})-400$`),
     variants: ["dark:focus-visible"]
   }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex2})-500`),
+    pattern: RegExp(`^ring-(${colorsAsRegex2})-500$`),
     variants: ["focus-visible"]
   }],
   checkbox: (colorsAsRegex2) => [{
-    pattern: new RegExp(`text-(${colorsAsRegex2})-400`),
+    pattern: RegExp(`^text-(${colorsAsRegex2})-400$`),
     variants: ["dark"]
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-500`)
+    pattern: RegExp(`^text-(${colorsAsRegex2})-500$`)
   }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex2})-400`),
+    pattern: RegExp(`^ring-(${colorsAsRegex2})-400$`),
     variants: ["dark:focus-visible"]
   }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex2})-500`),
+    pattern: RegExp(`^ring-(${colorsAsRegex2})-500$`),
     variants: ["focus-visible"]
   }],
   toggle: (colorsAsRegex2) => [{
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-400`),
+    pattern: RegExp(`^bg-(${colorsAsRegex2})-400$`),
     variants: ["dark"]
   }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-500`)
+    pattern: RegExp(`^bg-(${colorsAsRegex2})-500$`)
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-400`),
+    pattern: RegExp(`^text-(${colorsAsRegex2})-400$`),
     variants: ["dark"]
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-500`)
+    pattern: RegExp(`^text-(${colorsAsRegex2})-500$`)
   }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex2})-400`),
+    pattern: RegExp(`^ring-(${colorsAsRegex2})-400$`),
     variants: ["dark:focus-visible"]
   }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex2})-500`),
+    pattern: RegExp(`^ring-(${colorsAsRegex2})-500$`),
     variants: ["focus-visible"]
   }],
   range: (colorsAsRegex2) => [{
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-400`),
+    pattern: RegExp(`^bg-(${colorsAsRegex2})-400$`),
     variants: ["dark"]
   }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-500`)
+    pattern: RegExp(`^bg-(${colorsAsRegex2})-500$`)
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-400`),
+    pattern: RegExp(`^text-(${colorsAsRegex2})-400$`),
     variants: ["dark"]
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-500`)
+    pattern: RegExp(`^text-(${colorsAsRegex2})-500$`)
   }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex2})-400`),
+    pattern: RegExp(`^ring-(${colorsAsRegex2})-400$`),
     variants: ["dark:focus-visible"]
   }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex2})-500`),
+    pattern: RegExp(`^ring-(${colorsAsRegex2})-500$`),
     variants: ["focus-visible"]
   }],
   progress: (colorsAsRegex2) => [{
-    pattern: new RegExp(`text-(${colorsAsRegex2})-400`),
+    pattern: RegExp(`^text-(${colorsAsRegex2})-400$`),
     variants: ["dark"]
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-500`)
+    pattern: RegExp(`^text-(${colorsAsRegex2})-500$`)
   }],
   meter: (colorsAsRegex2) => [{
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-400`),
+    pattern: RegExp(`^bg-(${colorsAsRegex2})-400$`),
     variants: ["dark"]
   }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-500`)
+    pattern: RegExp(`^bg-(${colorsAsRegex2})-500$`)
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-400`),
+    pattern: RegExp(`^text-(${colorsAsRegex2})-400$`),
     variants: ["dark"]
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-500`)
+    pattern: RegExp(`^text-(${colorsAsRegex2})-500$`)
   }],
   notification: (colorsAsRegex2) => [{
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-400`),
+    pattern: RegExp(`^bg-(${colorsAsRegex2})-400$`),
     variants: ["dark"]
   }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-500`)
+    pattern: RegExp(`^bg-(${colorsAsRegex2})-500$`)
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-400`),
+    pattern: RegExp(`^text-(${colorsAsRegex2})-400$`),
     variants: ["dark"]
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-500`)
+    pattern: RegExp(`^text-(${colorsAsRegex2})-500$`)
   }],
   chip: (colorsAsRegex2) => [{
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-400`),
+    pattern: RegExp(`^bg-(${colorsAsRegex2})-400$`),
     variants: ["dark"]
   }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-500`)
+    pattern: RegExp(`^bg-(${colorsAsRegex2})-500$`)
   }]
 };
 const safelistComponentAliasesMap = {
@@ -289,7 +289,15 @@ export const customSafelistExtractor = (prefix, content, colors, safelistColors)
         const matches2 = group.pattern.source.match(/\(([^)]+)\)/g);
         return matches2.map((match2) => {
           const colorOptions = match2.substring(1, match2.length - 1).split("|");
-          return colorOptions.map((color2) => `${variant ? variant + ":" : ""}` + group.pattern.source.replace(match2, color2));
+          return colorOptions.map(
+            (color2) => {
+              const classesExtracted = group.pattern.source.replace(match2, color2).replace("^", "").replace("$", "");
+              if (variant) {
+                return `${variant}:${classesExtracted}`;
+              }
+              return classesExtracted;
+            }
+          );
         }).flat();
       });
     });

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

@@ -1,5 +1,6 @@
-import type { Strategy } from '../types.js';
+import type { Strategy } from '../types/index.js';
 export declare function mergeConfig<T>(strategy: Strategy, ...configs: any[]): T;
+export declare function parseConfigValue(value: string): string;
 export declare function hexToRgb(hex: string): string;
 export declare function getSlotsChildren(slots: any): any;
 /**

package/dist/runtime/utils/index.js

@@ -34,12 +34,16 @@ export function mergeConfig(strategy, ...configs) {
   }
   return defuTwMerge({}, ...configs);
 }
+const rxHex = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i;
+export function parseConfigValue(value) {
+  return rxHex.test(value) ? hexToRgb(value) : value;
+}
 export function hexToRgb(hex) {
   const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
   hex = hex.replace(shorthandRegex, function(_, r, g, b) {
     return r + r + g + g + b + b;
   });
-  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  const result = rxHex.exec(hex);
   return result ? `${parseInt(result[1], 16)} ${parseInt(result[2], 16)} ${parseInt(result[3], 16)}` : null;
 }
 export function getSlotsChildren(slots) {

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@nuxt/ui",
-  "version": "2.18.3",
-  "packageManager": "pnpm@9.6.0",
+  "description": "A UI Library for Modern Web Apps, powered by Vue & Tailwind CSS.",
+  "version": "2.18.5",
+  "packageManager": "pnpm@9.10.0",
   "repository": "nuxt/ui",
   "homepage": "https://ui.nuxt.com",
   "type": "module",
@@ -17,9 +18,6 @@
   "files": [
     "dist"
   ],
-  "engines": {
-    "node": ">=v16.20.2"
-  },
   "scripts": {
     "build": "nuxt-module-build build",
     "prepack": "pnpm build",
@@ -35,51 +33,51 @@
   },
   "dependencies": {
     "@headlessui/tailwindcss": "^0.2.1",
-    "@headlessui/vue": "^1.7.22",
-    "@iconify-json/heroicons": "^1.1.23",
-    "@nuxt/icon": "^1.4.0",
-    "@nuxt/kit": "^3.12.4",
-    "@nuxtjs/color-mode": "^3.4.2",
+    "@headlessui/vue": "^1.7.23",
+    "@iconify-json/heroicons": "^1.2.0",
+    "@nuxt/icon": "^1.5.1",
+    "@nuxt/kit": "^3.13.2",
+    "@nuxtjs/color-mode": "^3.5.1",
     "@nuxtjs/tailwindcss": "^6.12.1",
     "@popperjs/core": "^2.11.8",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/container-queries": "^0.1.1",
-    "@tailwindcss/forms": "^0.5.7",
-    "@tailwindcss/typography": "^0.5.13",
-    "@vueuse/core": "^10.11.0",
-    "@vueuse/integrations": "^10.11.0",
-    "@vueuse/math": "^10.11.0",
+    "@tailwindcss/forms": "^0.5.9",
+    "@tailwindcss/typography": "^0.5.15",
+    "@vueuse/core": "^11.1.0",
+    "@vueuse/integrations": "^11.1.0",
+    "@vueuse/math": "^11.1.0",
     "defu": "^6.1.4",
-    "fuse.js": "^6.6.2",
-    "ohash": "^1.1.3",
+    "fuse.js": "^7.0.0",
+    "ohash": "^1.1.4",
     "pathe": "^1.1.2",
     "scule": "^1.3.0",
-    "tailwind-merge": "^2.4.0",
-    "tailwindcss": "^3.4.7"
+    "tailwind-merge": "^2.5.2",
+    "tailwindcss": "^3.4.12"
   },
   "devDependencies": {
     "@nuxt/eslint-config": "^0.4.0",
-    "@nuxt/module-builder": "^0.8.1",
-    "@nuxt/test-utils": "^3.14.0",
-    "@release-it/conventional-changelog": "^8.0.1",
+    "@nuxt/module-builder": "^0.8.4",
+    "@nuxt/test-utils": "^3.14.2",
+    "@release-it/conventional-changelog": "^8.0.2",
     "@vue/test-utils": "^2.4.6",
     "eslint": "^8.57.0",
     "happy-dom": "^14.12.3",
     "joi": "^17.13.3",
-    "nuxt": "^3.12.4",
+    "nuxt": "^3.13.2",
     "release-it": "^17.6.0",
     "unbuild": "^2.0.0",
-    "valibot": "^0.36.0",
+    "valibot": "^0.42.0",
     "valibot30": "npm:valibot@0.30.0",
     "valibot31": "npm:valibot@0.31.0",
-    "vitest": "^2.0.4",
-    "vitest-environment-nuxt": "^1.0.0",
-    "vue-tsc": "^2.0.29",
+    "vitest": "^2.1.1",
+    "vitest-environment-nuxt": "^1.0.1",
+    "vue-tsc": "^2.1.6",
     "yup": "^1.4.0",
     "zod": "^3.23.8"
   },
   "resolutions": {
     "@nuxt/ui": "workspace:*",
-    "nuxt-component-meta": "0.6.4"
+    "@nuxtjs/mdc": "0.9.0"
   }
 }