@nuxt/ui 2.14.0 → 2.14.1

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxt/ui",
-  "version": "2.14.0",
+  "version": "2.14.1",
   "configKey": "ui",
   "compatibility": {
     "nuxt": "^3.10.0"

package/dist/module.mjs

@@ -1,7 +1,8 @@
-import { addTemplate, useNuxt, installModule, defineNuxtModule, createResolver, addPlugin, addComponentsDir, addImportsDir } from '@nuxt/kit';
 import { createRequire } from 'node:module';
-import { join } from 'pathe';
-import { kebabCase } from 'scule';
+import { addTemplate, useNuxt, defineNuxtModule, createResolver, installModule, addPlugin, addComponentsDir, addImportsDir } from '@nuxt/kit';
+import { defaultExtractor as defaultExtractor$1 } from 'tailwindcss/lib/lib/defaultExtractor.js';
+import { iconsPlugin, getIconCollections } from '@egoist/tailwindcss-icons';
+import { kebabCase, upperFirst, camelCase } from 'scule';
 
 
 
@@ -13,7 +14,7 @@ const __filename = __cjs_url__.fileURLToPath(import.meta.url);
 const __dirname = __cjs_path__.dirname(__filename);
 const require = __cjs_mod__.createRequire(import.meta.url);
 const name = "@nuxt/ui";
-const version = "2.14.0";
+const version = "2.14.1";
 
 function createTemplates(nuxt = useNuxt()) {
   const template = addTemplate({
@@ -244,6 +245,13 @@ const safelistByComponent = {
     pattern: new RegExp(`bg-(${colorsAsRegex2})-500`)
   }]
 };
+const safelistComponentAliasesMap = {
+  "USelect": "UInput",
+  "USelectMenu": "UInput",
+  "UTextarea": "UInput",
+  "URadioGroup": "URadio",
+  "UMeterGroup": "UMeter"
+};
 const colorsAsRegex = (colors) => colors.join("|");
 const excludeColors = (colors) => {
   return Object.entries(omit(colors, colorsToExclude)).filter(([, value]) => typeof value === "object").map(([key]) => kebabCase(key));
@@ -263,7 +271,37 @@ const generateSafelist = (colors, globalColors) => {
     "dark:text-gray-400"
   ];
 };
+const customSafelistExtractor = (prefix, content, colors, safelistColors) => {
+  const classes = [];
+  const regex = /<([A-Za-z][A-Za-z0-9]*(?:-[A-Za-z][A-Za-z0-9]*)*)\s+(?![^>]*:color\b)[^>]*\bcolor=["']([^"']+)["'][^>]*>/gs;
+  const matches = content.matchAll(regex);
+  const components = Object.keys(safelistByComponent).map((component) => `${prefix}${component.charAt(0).toUpperCase() + component.slice(1)}`);
+  for (const match of matches) {
+    const [, component, color] = match;
+    const camelComponent = upperFirst(camelCase(component));
+    if (!colors.includes(color) || safelistColors.includes(color)) {
+      continue;
+    }
+    let name = safelistComponentAliasesMap[camelComponent] ? safelistComponentAliasesMap[camelComponent] : camelComponent;
+    if (!components.includes(name)) {
+      continue;
+    }
+    name = name.replace(prefix, "").toLowerCase();
+    const matchClasses = safelistByComponent[name](color).flatMap((group) => {
+      return ["", ...group.variants || []].flatMap((variant) => {
+        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));
+        }).flat();
+      });
+    });
+    classes.push(...matchClasses);
+  }
+  return classes;
+};
 
+const defaultExtractor = defaultExtractor$1({ tailwindConfig: { separator: ":" } });
 const _require = createRequire(import.meta.url);
 const defaultColors = _require("tailwindcss/colors.js");
 delete defaultColors.lightBlue;
@@ -271,108 +309,6 @@ delete defaultColors.warmGray;
 delete defaultColors.trueGray;
 delete defaultColors.coolGray;
 delete defaultColors.blueGray;
-async function installTailwind(moduleOptions, nuxt = useNuxt(), { resolve, runtimeDir }) {
-  nuxt.hook("tailwindcss:config", function(tailwindConfig) {
-    tailwindConfig.theme = tailwindConfig.theme || {};
-    tailwindConfig.theme.extend = tailwindConfig.theme.extend || {};
-    tailwindConfig.theme.extend.colors = tailwindConfig.theme.extend.colors || {};
-    const globalColors = {
-      ...tailwindConfig.theme.colors || defaultColors,
-      ...tailwindConfig.theme.extend?.colors
-    };
-    globalColors.primary = tailwindConfig.theme.extend.colors.primary = {
-      50: "rgb(var(--color-primary-50) / <alpha-value>)",
-      100: "rgb(var(--color-primary-100) / <alpha-value>)",
-      200: "rgb(var(--color-primary-200) / <alpha-value>)",
-      300: "rgb(var(--color-primary-300) / <alpha-value>)",
-      400: "rgb(var(--color-primary-400) / <alpha-value>)",
-      500: "rgb(var(--color-primary-500) / <alpha-value>)",
-      600: "rgb(var(--color-primary-600) / <alpha-value>)",
-      700: "rgb(var(--color-primary-700) / <alpha-value>)",
-      800: "rgb(var(--color-primary-800) / <alpha-value>)",
-      900: "rgb(var(--color-primary-900) / <alpha-value>)",
-      950: "rgb(var(--color-primary-950) / <alpha-value>)",
-      DEFAULT: "rgb(var(--color-primary-DEFAULT) / <alpha-value>)"
-    };
-    if (globalColors.gray) {
-      globalColors.cool = tailwindConfig.theme.extend.colors.cool = defaultColors.gray;
-    }
-    globalColors.gray = tailwindConfig.theme.extend.colors.gray = {
-      50: "rgb(var(--color-gray-50) / <alpha-value>)",
-      100: "rgb(var(--color-gray-100) / <alpha-value>)",
-      200: "rgb(var(--color-gray-200) / <alpha-value>)",
-      300: "rgb(var(--color-gray-300) / <alpha-value>)",
-      400: "rgb(var(--color-gray-400) / <alpha-value>)",
-      500: "rgb(var(--color-gray-500) / <alpha-value>)",
-      600: "rgb(var(--color-gray-600) / <alpha-value>)",
-      700: "rgb(var(--color-gray-700) / <alpha-value>)",
-      800: "rgb(var(--color-gray-800) / <alpha-value>)",
-      900: "rgb(var(--color-gray-900) / <alpha-value>)",
-      950: "rgb(var(--color-gray-950) / <alpha-value>)"
-    };
-    const colors = excludeColors(globalColors);
-    nuxt.options.appConfig.ui = {
-      primary: "green",
-      gray: "cool",
-      colors,
-      strategy: "merge"
-    };
-    tailwindConfig.safelist = tailwindConfig.safelist || [];
-    tailwindConfig.safelist.push(
-      ...generateSafelist(moduleOptions.safelistColors || [], colors)
-    );
-  });
-  const configTemplate = addTemplate({
-    filename: "nuxtui-tailwind.config.cjs",
-    write: true,
-    getContents: () => `
-      const { defaultExtractor: createDefaultExtractor } = require('tailwindcss/lib/lib/defaultExtractor.js')
-      const { customSafelistExtractor } = require(${JSON.stringify(resolve(runtimeDir, "utils", "colors"))})
-      const { iconsPlugin, getIconCollections } = require('@egoist/tailwindcss-icons')
-
-      const defaultExtractor = createDefaultExtractor({ tailwindConfig: { separator: ':' } })
-
-      module.exports = {
-        darkMode: 'class',
-        plugins: [
-          require('@tailwindcss/forms')({ strategy: 'class' }),
-          require('@tailwindcss/aspect-ratio'),
-          require('@tailwindcss/typography'),
-          require('@tailwindcss/container-queries'),
-          require('@headlessui/tailwindcss'),
-          iconsPlugin(${Array.isArray(moduleOptions.icons) || moduleOptions.icons === "all" ? `{ collections: getIconCollections(${JSON.stringify(moduleOptions.icons)}) }` : typeof moduleOptions.icons === "object" ? JSON.stringify(moduleOptions.icons) : "{}"})
-        ],
-        content: {
-          files: [
-            ${JSON.stringify(resolve(runtimeDir, "components/**/*.{vue,mjs,ts}"))},
-            ${JSON.stringify(resolve(runtimeDir, "ui.config/**/*.{mjs,js,ts}"))}
-          ],
-          transform: {
-            vue: (content) => {
-              return content.replaceAll(/(?:\\r\\n|\\r|\\n)/g, ' ')
-            }
-          },
-          extract: {
-            vue: (content) => {
-              return [
-                ...defaultExtractor(content),
-                ...customSafelistExtractor(${JSON.stringify(moduleOptions.prefix)}, content, ${JSON.stringify(nuxt.options.appConfig.ui.colors)}, ${JSON.stringify(moduleOptions.safelistColors)})
-              ]
-            }
-          }
-        }
-      }
-    `
-  });
-  await installModule("@nuxtjs/tailwindcss", {
-    exposeConfig: true,
-    configPath: [
-      configTemplate.dst,
-      join(nuxt.options.rootDir, "tailwind.config")
-    ]
-  });
-}
-
 const module = defineNuxtModule({
   meta: {
     name,
@@ -397,10 +333,91 @@ const module = defineNuxtModule({
     if (!options.disableGlobalStyles) {
       nuxt.options.css.push(resolve(runtimeDir, "ui.css"));
     }
+    nuxt.hook("tailwindcss:config", function(tailwindConfig) {
+      tailwindConfig.theme = tailwindConfig.theme || {};
+      tailwindConfig.theme.extend = tailwindConfig.theme.extend || {};
+      tailwindConfig.theme.extend.colors = tailwindConfig.theme.extend.colors || {};
+      const globalColors = {
+        ...tailwindConfig.theme.colors || defaultColors,
+        ...tailwindConfig.theme.extend?.colors
+      };
+      globalColors.primary = tailwindConfig.theme.extend.colors.primary = {
+        50: "rgb(var(--color-primary-50) / <alpha-value>)",
+        100: "rgb(var(--color-primary-100) / <alpha-value>)",
+        200: "rgb(var(--color-primary-200) / <alpha-value>)",
+        300: "rgb(var(--color-primary-300) / <alpha-value>)",
+        400: "rgb(var(--color-primary-400) / <alpha-value>)",
+        500: "rgb(var(--color-primary-500) / <alpha-value>)",
+        600: "rgb(var(--color-primary-600) / <alpha-value>)",
+        700: "rgb(var(--color-primary-700) / <alpha-value>)",
+        800: "rgb(var(--color-primary-800) / <alpha-value>)",
+        900: "rgb(var(--color-primary-900) / <alpha-value>)",
+        950: "rgb(var(--color-primary-950) / <alpha-value>)",
+        DEFAULT: "rgb(var(--color-primary-DEFAULT) / <alpha-value>)"
+      };
+      if (globalColors.gray) {
+        globalColors.cool = tailwindConfig.theme.extend.colors.cool = defaultColors.gray;
+      }
+      globalColors.gray = tailwindConfig.theme.extend.colors.gray = {
+        50: "rgb(var(--color-gray-50) / <alpha-value>)",
+        100: "rgb(var(--color-gray-100) / <alpha-value>)",
+        200: "rgb(var(--color-gray-200) / <alpha-value>)",
+        300: "rgb(var(--color-gray-300) / <alpha-value>)",
+        400: "rgb(var(--color-gray-400) / <alpha-value>)",
+        500: "rgb(var(--color-gray-500) / <alpha-value>)",
+        600: "rgb(var(--color-gray-600) / <alpha-value>)",
+        700: "rgb(var(--color-gray-700) / <alpha-value>)",
+        800: "rgb(var(--color-gray-800) / <alpha-value>)",
+        900: "rgb(var(--color-gray-900) / <alpha-value>)",
+        950: "rgb(var(--color-gray-950) / <alpha-value>)"
+      };
+      const colors = excludeColors(globalColors);
+      nuxt.options.appConfig.ui = {
+        primary: "green",
+        gray: "cool",
+        colors,
+        strategy: "merge"
+      };
+      tailwindConfig.safelist = tailwindConfig.safelist || [];
+      tailwindConfig.safelist.push(...generateSafelist(options.safelistColors || [], colors));
+    });
     createTemplates(nuxt);
     await installModule("nuxt-icon");
     await installModule("@nuxtjs/color-mode", { classSuffix: "" });
-    await installTailwind(options, nuxt, { resolve, runtimeDir });
+    await installModule("@nuxtjs/tailwindcss", {
+      exposeConfig: true,
+      config: {
+        darkMode: "class",
+        plugins: [
+          require("@tailwindcss/forms")({ strategy: "class" }),
+          require("@tailwindcss/aspect-ratio"),
+          require("@tailwindcss/typography"),
+          require("@tailwindcss/container-queries"),
+          require("@headlessui/tailwindcss"),
+          iconsPlugin(Array.isArray(options.icons) || options.icons === "all" ? { collections: getIconCollections(options.icons) } : typeof options.icons === "object" ? options.icons : {})
+        ],
+        content: {
+          files: [
+            resolve(runtimeDir, "components/**/*.{vue,mjs,ts}"),
+            resolve(runtimeDir, "ui.config/**/*.{mjs,js,ts}")
+          ],
+          transform: {
+            vue: (content) => {
+              return content.replaceAll(/(?:\r\n|\r|\n)/g, " ");
+            }
+          },
+          extract: {
+            vue: (content) => {
+              return [
+                ...defaultExtractor(content),
+                // @ts-ignore
+                ...customSafelistExtractor(options.prefix, content, nuxt.options.appConfig.ui.colors, options.safelistColors)
+              ];
+            }
+          }
+        }
+      }
+    });
     addPlugin({
       src: resolve(runtimeDir, "plugins", "colors")
     });

package/dist/runtime/components/elements/Button.vue.d.ts

@@ -326,8 +326,8 @@ declare const _default: import("vue").DefineComponent<{
     leading: boolean;
     variant: ButtonVariant;
     label: string;
-    disabled: boolean;
     loading: boolean;
+    disabled: boolean;
     block: boolean;
     padded: boolean;
     loadingIcon: string;

package/dist/runtime/components/elements/Link.vue.d.ts

@@ -212,8 +212,8 @@ declare const _default: import("vue").DefineComponent<{
     replace: NuxtLinkProps;
     ariaCurrentValue: NuxtLinkProps;
     external: NuxtLinkProps;
-    disabled: boolean;
     as: string;
+    disabled: boolean;
     to: RouteLocationRaw;
     href: RouteLocationRaw;
     active: boolean;

package/dist/runtime/components/forms/Checkbox.vue.d.ts

@@ -128,9 +128,9 @@ declare const _default: import("vue").DefineComponent<{
     class: any;
     name: string;
     label: string;
-    disabled: boolean;
     modelValue: boolean | unknown[];
     indeterminate: boolean;
+    disabled: boolean;
     required: boolean;
     help: string;
     inputClass: string;

package/dist/runtime/components/forms/Input.vue.d.ts

@@ -242,9 +242,9 @@ declare const _default: import("vue").DefineComponent<{
     name: string;
     leading: boolean;
     variant: InputVariant;
-    disabled: boolean;
     modelValue: string | number;
     loading: boolean;
+    disabled: boolean;
     placeholder: string;
     padded: boolean;
     loadingIcon: string;

package/dist/runtime/components/forms/InputMenu.vue.d.ts

@@ -317,10 +317,10 @@ declare const _default: import("vue").DefineComponent<{
     leading: boolean;
     search: (query: string) => Promise<any[]> | any[];
     variant: InputVariant;
-    disabled: boolean;
     modelValue: string | number | unknown[] | Record<string, any>;
     by: string;
     loading: boolean;
+    disabled: boolean;
     placeholder: string;
     padded: boolean;
     loadingIcon: string;

package/dist/runtime/components/forms/Radio.vue.d.ts

@@ -119,8 +119,8 @@ declare const _default: import("vue").DefineComponent<{
     class: any;
     name: string;
     label: string;
-    disabled: boolean;
     modelValue: string | number | boolean | Record<string, any>;
+    disabled: boolean;
     required: boolean;
     help: string;
     inputClass: string;

package/dist/runtime/components/forms/RadioGroup.vue.d.ts

@@ -109,8 +109,8 @@ declare const _default: import("vue").DefineComponent<{
     options: unknown[];
     name: string;
     legend: string;
-    disabled: boolean;
     modelValue: string | number | Record<string, any>;
+    disabled: boolean;
     optionAttribute: string;
     valueAttribute: string;
     uiRadio: any;

package/dist/runtime/components/forms/Range.vue.d.ts

@@ -129,8 +129,8 @@ declare const _default: import("vue").DefineComponent<{
     color: any;
     class: any;
     name: string;
-    disabled: boolean;
     modelValue: number;
+    disabled: boolean;
     max: number;
     min: number;
     inputClass: string;

package/dist/runtime/components/forms/Select.vue.d.ts

@@ -231,9 +231,9 @@ declare const _default: import("vue").DefineComponent<{
     name: string;
     leading: boolean;
     variant: SelectVariant;
-    disabled: boolean;
     modelValue: string | number | Record<string, any>;
     loading: boolean;
+    disabled: boolean;
     placeholder: string;
     padded: boolean;
     loadingIcon: string;

package/dist/runtime/components/forms/SelectMenu.vue.d.ts

@@ -351,10 +351,10 @@ declare const _default: import("vue").DefineComponent<{
     name: string;
     leading: boolean;
     variant: SelectVariant;
-    disabled: boolean;
     modelValue: string | number | unknown[] | Record<string, any>;
     by: string;
     loading: boolean;
+    disabled: boolean;
     multiple: boolean;
     placeholder: string;
     padded: boolean;

package/dist/runtime/components/forms/Textarea.vue.d.ts

@@ -200,9 +200,9 @@ declare const _default: import("vue").DefineComponent<{
     class: any;
     name: string;
     variant: TextareaVariant;
-    disabled: boolean;
     modelValue: string | number;
     rows: number;
+    disabled: boolean;
     placeholder: string;
     padded: boolean;
     required: boolean;

package/dist/runtime/components/forms/Toggle.vue.d.ts

@@ -108,8 +108,8 @@ declare const _default: import("vue").DefineComponent<{
     color: any;
     class: any;
     name: string;
-    disabled: boolean;
     modelValue: boolean;
+    disabled: boolean;
     onIcon: string;
     offIcon: string;
 }, {}>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxt/ui",
-  "version": "2.14.0",
+  "version": "2.14.1",
   "repository": "nuxt/ui",
   "homepage": "https://ui.nuxt.com",
   "type": "module",
@@ -37,7 +37,7 @@
     "@headlessui/tailwindcss": "^0.2.0",
     "@headlessui/vue": "^1.7.19",
     "@iconify-json/heroicons": "^1.1.20",
-    "@nuxt/kit": "^3.10.2",
+    "@nuxt/kit": "^3.10.3",
     "@nuxtjs/color-mode": "^3.3.2",
     "@nuxtjs/tailwindcss": "^6.11.4",
     "@popperjs/core": "^2.11.8",
@@ -64,9 +64,9 @@
     "@release-it/conventional-changelog": "^8.0.1",
     "@vue/test-utils": "^2.4.4",
     "eslint": "^8.56.0",
-    "happy-dom": "^13.3.8",
-    "joi": "^17.12.1",
-    "nuxt": "^3.10.2",
+    "happy-dom": "^13.4.1",
+    "joi": "^17.12.2",
+    "nuxt": "^3.10.3",
     "release-it": "^17.1.1",
     "typescript": "^5.3.3",
     "unbuild": "^2.0.0",
@@ -78,10 +78,10 @@
     "zod": "^3.22.4"
   },
   "resolutions": {
-    "@nuxt/kit": "^3.10.2",
-    "@nuxt/schema": "3.10.2",
+    "@nuxt/kit": "3.10.3",
+    "@nuxt/schema": "3.10.3",
     "tailwindcss": "3.4.1",
-    "@headlessui/vue": "^1.7.19",
+    "@headlessui/vue": "1.7.19",
     "vue": "3.4.19"
   }
 }

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

@@ -1,3 +0,0 @@
-export declare const excludeColors: (colors: object) => string[];
-export declare const generateSafelist: (colors: string[], globalColors: any) => any[];
-export declare const customSafelistExtractor: (prefix: any, content: string, colors: string[], safelistColors: string[]) => string[];

package/dist/runtime/utils/colors.mjs

@@ -1,261 +0,0 @@
-import { omit } from "./lodash.mjs";
-import { kebabCase, camelCase, upperFirst } from "scule";
-const colorsToExclude = [
-  "inherit",
-  "transparent",
-  "current",
-  "white",
-  "black",
-  "slate",
-  "gray",
-  "zinc",
-  "neutral",
-  "stone",
-  "cool"
-];
-const safelistByComponent = {
-  alert: (colorsAsRegex2) => [{
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-50`)
-  }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-400`),
-    variants: ["dark"]
-  }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-500`)
-  }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-400`),
-    variants: ["dark"]
-  }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-500`)
-  }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex2})-400`),
-    variants: ["dark"]
-  }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex2})-500`)
-  }],
-  avatar: (colorsAsRegex2) => [{
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-400`),
-    variants: ["dark"]
-  }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-500`)
-  }],
-  badge: (colorsAsRegex2) => [{
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-50`)
-  }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-400`),
-    variants: ["dark"]
-  }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-500`)
-  }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-400`),
-    variants: ["dark"]
-  }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-500`)
-  }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex2})-400`),
-    variants: ["dark"]
-  }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex2})-500`)
-  }],
-  button: (colorsAsRegex2) => [{
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-50`),
-    variants: ["hover", "disabled"]
-  }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-100`),
-    variants: ["hover"]
-  }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-400`),
-    variants: ["dark", "dark:disabled"]
-  }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-500`),
-    variants: ["disabled", "dark:hover"]
-  }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-600`),
-    variants: ["hover"]
-  }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-900`),
-    variants: ["dark:hover"]
-  }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-950`),
-    variants: ["dark", "dark:hover", "dark:disabled"]
-  }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-400`),
-    variants: ["dark", "dark:disabled"]
-  }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-500`),
-    variants: ["dark:hover", "disabled"]
-  }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-600`),
-    variants: ["hover"]
-  }, {
-    pattern: new RegExp(`outline-(${colorsAsRegex2})-400`),
-    variants: ["dark:focus-visible"]
-  }, {
-    pattern: new RegExp(`outline-(${colorsAsRegex2})-500`),
-    variants: ["focus-visible"]
-  }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex2})-400`),
-    variants: ["dark:focus-visible"]
-  }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex2})-500`),
-    variants: ["focus-visible"]
-  }],
-  input: (colorsAsRegex2) => [{
-    pattern: new RegExp(`text-(${colorsAsRegex2})-400`),
-    variants: ["dark"]
-  }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-500`)
-  }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex2})-400`),
-    variants: ["dark", "dark:focus"]
-  }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex2})-500`),
-    variants: ["focus"]
-  }],
-  radio: (colorsAsRegex2) => [{
-    pattern: new RegExp(`text-(${colorsAsRegex2})-400`),
-    variants: ["dark"]
-  }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-500`)
-  }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex2})-400`),
-    variants: ["dark:focus-visible"]
-  }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex2})-500`),
-    variants: ["focus-visible"]
-  }],
-  checkbox: (colorsAsRegex2) => [{
-    pattern: new RegExp(`text-(${colorsAsRegex2})-400`),
-    variants: ["dark"]
-  }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-500`)
-  }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex2})-400`),
-    variants: ["dark:focus-visible"]
-  }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex2})-500`),
-    variants: ["focus-visible"]
-  }],
-  toggle: (colorsAsRegex2) => [{
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-400`),
-    variants: ["dark"]
-  }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-500`)
-  }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-400`),
-    variants: ["dark"]
-  }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-500`)
-  }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex2})-400`),
-    variants: ["dark:focus-visible"]
-  }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex2})-500`),
-    variants: ["focus-visible"]
-  }],
-  range: (colorsAsRegex2) => [{
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-400`),
-    variants: ["dark"]
-  }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-500`)
-  }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-400`),
-    variants: ["dark"]
-  }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-500`)
-  }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex2})-400`),
-    variants: ["dark:focus-visible"]
-  }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex2})-500`),
-    variants: ["focus-visible"]
-  }],
-  progress: (colorsAsRegex2) => [{
-    pattern: new RegExp(`text-(${colorsAsRegex2})-400`),
-    variants: ["dark"]
-  }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-500`)
-  }],
-  meter: (colorsAsRegex2) => [{
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-400`),
-    variants: ["dark"]
-  }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-500`)
-  }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-400`),
-    variants: ["dark"]
-  }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-500`)
-  }],
-  notification: (colorsAsRegex2) => [{
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-400`),
-    variants: ["dark"]
-  }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-500`)
-  }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-400`),
-    variants: ["dark"]
-  }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-500`)
-  }],
-  chip: (colorsAsRegex2) => [{
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-400`),
-    variants: ["dark"]
-  }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-500`)
-  }]
-};
-const safelistComponentAliasesMap = {
-  "USelect": "UInput",
-  "USelectMenu": "UInput",
-  "UTextarea": "UInput",
-  "URadioGroup": "URadio",
-  "UMeterGroup": "UMeter"
-};
-const colorsAsRegex = (colors) => colors.join("|");
-export const excludeColors = (colors) => {
-  return Object.entries(omit(colors, colorsToExclude)).filter(([, value]) => typeof value === "object").map(([key]) => kebabCase(key));
-};
-export const generateSafelist = (colors, globalColors) => {
-  const baseSafelist = Object.keys(safelistByComponent).flatMap((component) => safelistByComponent[component](colorsAsRegex(colors)));
-  const formsSafelist = ["input", "radio", "checkbox", "toggle", "range"].flatMap((component) => safelistByComponent[component](colorsAsRegex(["red"])));
-  return [
-    ...baseSafelist,
-    ...formsSafelist,
-    // Ensure all global colors are safelisted for the Notification (toast.add)
-    ...safelistByComponent["notification"](colorsAsRegex(globalColors)),
-    // Gray safelist for Avatar & Notification
-    "bg-gray-500",
-    "dark:bg-gray-400",
-    "text-gray-500",
-    "dark:text-gray-400"
-  ];
-};
-export const customSafelistExtractor = (prefix, content, colors, safelistColors) => {
-  const classes = [];
-  const regex = /<([A-Za-z][A-Za-z0-9]*(?:-[A-Za-z][A-Za-z0-9]*)*)\s+(?![^>]*:color\b)[^>]*\bcolor=["']([^"']+)["'][^>]*>/gs;
-  const matches = content.matchAll(regex);
-  const components = Object.keys(safelistByComponent).map((component) => `${prefix}${component.charAt(0).toUpperCase() + component.slice(1)}`);
-  for (const match of matches) {
-    const [, component, color] = match;
-    const camelComponent = upperFirst(camelCase(component));
-    if (!colors.includes(color) || safelistColors.includes(color)) {
-      continue;
-    }
-    let name = safelistComponentAliasesMap[camelComponent] ? safelistComponentAliasesMap[camelComponent] : camelComponent;
-    if (!components.includes(name)) {
-      continue;
-    }
-    name = name.replace(prefix, "").toLowerCase();
-    const matchClasses = safelistByComponent[name](color).flatMap((group) => {
-      return ["", ...group.variants || []].flatMap((variant) => {
-        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));
-        }).flat();
-      });
-    });
-    classes.push(...matchClasses);
-  }
-  return classes;
-};