@nuxt/ui 3.0.0-alpha.1 → 3.0.0-alpha.3

package/dist/module.d.mts

@@ -8,15 +8,22 @@ interface ModuleOptions {
      */
     prefix?: string;
     /**
-     * Colors to generate classes for (based on TailwindCSS colors)
-     * @defaultValue ['red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose']
-     */
-    colors?: string[];
-    /**
-     * Disable color transitions
+     * Enable or disable `@nuxt/fonts` module
      * @defaultValue true
      */
-    transitions?: boolean;
+    fonts?: boolean;
+    theme?: {
+        /**
+         * Colors to generate classes for (defaults to TailwindCSS colors)
+         * @defaultValue ['red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose']
+         */
+        colors?: string[];
+        /**
+         * Enable or disable transitions on components
+         * @defaultValue true
+         */
+        transitions?: boolean;
+    };
 }
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
 

package/dist/module.d.ts

@@ -8,15 +8,22 @@ interface ModuleOptions {
      */
     prefix?: string;
     /**
-     * Colors to generate classes for (based on TailwindCSS colors)
-     * @defaultValue ['red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose']
-     */
-    colors?: string[];
-    /**
-     * Disable color transitions
+     * Enable or disable `@nuxt/fonts` module
      * @defaultValue true
      */
-    transitions?: boolean;
+    fonts?: boolean;
+    theme?: {
+        /**
+         * Colors to generate classes for (defaults to TailwindCSS colors)
+         * @defaultValue ['red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose']
+         */
+        colors?: string[];
+        /**
+         * Enable or disable transitions on components
+         * @defaultValue true
+         */
+        transitions?: boolean;
+    };
 }
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
 

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=3.13.1"
   },
-  "version": "3.0.0-alpha.1",
+  "version": "3.0.0-alpha.3",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "2.0.0"

package/dist/module.mjs

@@ -1,5 +1,5 @@
 import { defuFn, defu } from 'defu';
-import { addTemplate, addTypeTemplate, defineNuxtModule, createResolver, addVitePlugin, installModule, addPlugin, addComponentsDir, addImportsDir } from '@nuxt/kit';
+import { addTemplate, addTypeTemplate, defineNuxtModule, createResolver, addVitePlugin, hasNuxtModule, installModule, addPlugin, addComponentsDir, addImportsDir } from '@nuxt/kit';
 import { fileURLToPath } from 'node:url';
 import { kebabCase } from 'scule';
 
@@ -38,7 +38,7 @@ const alert = (options) => ({
   },
   variants: {
     color: {
-      ...Object.fromEntries(options.colors.map((color) => [color, ""])),
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, ""])),
       gray: ""
     },
     variant: {
@@ -58,25 +58,25 @@ const alert = (options) => ({
       }
     }
   },
-  compoundVariants: [...options.colors.map((color) => ({
+  compoundVariants: [...(options.theme.colors || []).map((color) => ({
     color,
     variant: "solid",
     class: {
       root: `bg-${color}-500 dark:bg-${color}-400 text-white dark:text-gray-900`
     }
-  })), ...options.colors.map((color) => ({
+  })), ...(options.theme.colors || []).map((color) => ({
     color,
     variant: "outline",
     class: {
       root: `text-${color}-500 dark:text-${color}-400 ring ring-inset ring-${color}-500/25 dark:ring-${color}-400/25`
     }
-  })), ...options.colors.map((color) => ({
+  })), ...(options.theme.colors || []).map((color) => ({
     color,
     variant: "soft",
     class: {
       root: `bg-${color}-500/10 dark:bg-${color}-400/10 text-${color}-500 dark:text-${color}-400`
     }
-  })), ...options.colors.map((color) => ({
+  })), ...(options.theme.colors || []).map((color) => ({
     color,
     variant: "subtle",
     class: {
@@ -201,7 +201,7 @@ const badge = (options) => ({
   base: "rounded-md font-medium inline-flex items-center",
   variants: {
     color: {
-      ...Object.fromEntries(options.colors.map((color) => [color, ""])),
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, ""])),
       gray: ""
     },
     variant: {
@@ -216,19 +216,19 @@ const badge = (options) => ({
       lg: "text-sm px-2 py-1"
     }
   },
-  compoundVariants: [...options.colors.map((color) => ({
+  compoundVariants: [...(options.theme.colors || []).map((color) => ({
     color,
     variant: "solid",
     class: `bg-${color}-500 dark:bg-${color}-400 text-white dark:text-gray-900`
-  })), ...options.colors.map((color) => ({
+  })), ...(options.theme.colors || []).map((color) => ({
     color,
     variant: "outline",
     class: `text-${color}-500 dark:text-${color}-400 ring ring-inset ring-${color}-500/50 dark:ring-${color}-400/50`
-  })), ...options.colors.map((color) => ({
+  })), ...(options.theme.colors || []).map((color) => ({
     color,
     variant: "soft",
     class: `bg-${color}-500/10 dark:bg-${color}-400/10 text-${color}-500 dark:text-${color}-400`
-  })), ...options.colors.map((color) => ({
+  })), ...(options.theme.colors || []).map((color) => ({
     color,
     variant: "subtle",
     class: `bg-${color}-500/10 dark:bg-${color}-400/10 text-${color}-500 dark:text-${color}-400 ring ring-inset ring-${color}-500/25 dark:ring-${color}-400/25`
@@ -292,7 +292,7 @@ const breadcrumb = (options) => ({
     active: false,
     to: true,
     class: {
-      link: ["hover:text-gray-700 dark:hover:text-gray-200", options.transitions && "transition-colors"]
+      link: ["hover:text-gray-700 dark:hover:text-gray-200", options.theme.transitions && "transition-colors"]
     }
   }]
 });
@@ -334,7 +334,7 @@ const buttonGroup = {
 
 const button = (options) => ({
   slots: {
-    base: ["rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75", options.transitions && "transition-colors"],
+    base: ["rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75", options.theme.transitions && "transition-colors"],
     label: "truncate",
     leadingIcon: "shrink-0",
     leadingAvatar: "shrink-0",
@@ -343,7 +343,7 @@ const button = (options) => ({
   variants: {
     ...buttonGroupVariant,
     color: {
-      ...Object.fromEntries(options.colors.map((color) => [color, ""])),
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, ""])),
       gray: ""
     },
     variant: {
@@ -400,54 +400,54 @@ const button = (options) => ({
       true: ""
     }
   },
-  compoundVariants: [...options.colors.map((color) => ({
+  compoundVariants: [...(options.theme.colors || []).map((color) => ({
     color,
     variant: "solid",
-    class: `text-white dark:text-gray-900 bg-${color}-500 hover:bg-${color}-600 disabled:bg-${color}-500 dark:bg-${color}-400 dark:hover:bg-${color}-500 dark:disabled:bg-${color}-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-${color}-500 dark:focus-visible:outline-${color}-400`
-  })), ...options.colors.map((color) => ({
+    class: `text-white dark:text-gray-900 bg-${color}-500 hover:bg-${color}-600 disabled:bg-${color}-500 aria-disabled:bg-${color}-500 dark:bg-${color}-400 dark:hover:bg-${color}-500 dark:disabled:bg-${color}-400 dark:aria-disabled:bg-${color}-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-${color}-500 dark:focus-visible:outline-${color}-400`
+  })), ...(options.theme.colors || []).map((color) => ({
     color,
     variant: "outline",
-    class: `ring ring-inset ring-${color}-500/50 dark:ring-${color}-400/50 text-${color}-500 dark:text-${color}-400 hover:bg-${color}-500/10 disabled:bg-transparent dark:hover:bg-${color}-400/10 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-${color}-500 dark:focus-visible:ring-${color}-400`
-  })), ...options.colors.map((color) => ({
+    class: `ring ring-inset ring-${color}-500/50 dark:ring-${color}-400/50 text-${color}-500 dark:text-${color}-400 hover:bg-${color}-500/10 disabled:bg-transparent aria-disabled:bg-transparent dark:hover:bg-${color}-400/10 dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-${color}-500 dark:focus-visible:ring-${color}-400`
+  })), ...(options.theme.colors || []).map((color) => ({
     color,
     variant: "soft",
-    class: `text-${color}-500 dark:text-${color}-400 bg-${color}-500/10 hover:bg-${color}-500/15 focus-visible:bg-${color}-500/15 disabled:bg-${color}-500/10 dark:bg-${color}-400/10 dark:hover:bg-${color}-400/15 dark:focus-visible:bg-${color}-400/15 dark:disabled:bg-${color}-400/10`
-  })), ...options.colors.map((color) => ({
+    class: `text-${color}-500 dark:text-${color}-400 bg-${color}-500/10 hover:bg-${color}-500/15 focus-visible:bg-${color}-500/15 disabled:bg-${color}-500/10 aria-disabled:bg-${color}-500/10 dark:bg-${color}-400/10 dark:hover:bg-${color}-400/15 dark:focus-visible:bg-${color}-400/15 dark:disabled:bg-${color}-400/10 dark:aria-disabled:bg-${color}-400/10`
+  })), ...(options.theme.colors || []).map((color) => ({
     color,
     variant: "subtle",
-    class: `text-${color}-500 dark:text-${color}-400 ring ring-inset ring-${color}-500/25 dark:ring-${color}-400/25 bg-${color}-500/10 hover:bg-${color}-500/15 disabled:bg-${color}-500/10 dark:bg-${color}-400/10 dark:hover:bg-${color}-400/15 dark:disabled:bg-${color}-400/10 focus-visible:ring-2 focus-visible:ring-${color}-500 dark:focus-visible:ring-${color}-400`
-  })), ...options.colors.map((color) => ({
+    class: `text-${color}-500 dark:text-${color}-400 ring ring-inset ring-${color}-500/25 dark:ring-${color}-400/25 bg-${color}-500/10 hover:bg-${color}-500/15 disabled:bg-${color}-500/10 aria-disabled:bg-${color}-500/10 dark:bg-${color}-400/10 dark:hover:bg-${color}-400/15 dark:disabled:bg-${color}-400/10 dark:aria-disabled:bg-${color}-400/10 focus-visible:ring-2 focus-visible:ring-${color}-500 dark:focus-visible:ring-${color}-400`
+  })), ...(options.theme.colors || []).map((color) => ({
     color,
     variant: "ghost",
-    class: `text-${color}-500 dark:text-${color}-400 hover:bg-${color}-500/10 focus-visible:bg-${color}-500/10 disabled:bg-transparent dark:hover:bg-${color}-400/10 dark:focus-visible:bg-${color}-400/10 dark:disabled:bg-transparent`
-  })), ...options.colors.map((color) => ({
+    class: `text-${color}-500 dark:text-${color}-400 hover:bg-${color}-500/10 focus-visible:bg-${color}-500/10 disabled:bg-transparent aria-disabled:bg-transparent dark:hover:bg-${color}-400/10 dark:focus-visible:bg-${color}-400/10 dark:disabled:bg-transparent dark:aria-disabled:bg-transparent`
+  })), ...(options.theme.colors || []).map((color) => ({
     color,
     variant: "link",
-    class: `text-${color}-500 hover:text-${color}-600 disabled:text-${color}-500 dark:text-${color}-400 dark:hover:text-${color}-500 dark:disabled:text-${color}-400 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-${color}-500 dark:focus-visible:ring-${color}-400`
+    class: `text-${color}-500 hover:text-${color}-600 disabled:text-${color}-500 aria-disabled:text-${color}-500 dark:text-${color}-400 dark:hover:text-${color}-500 dark:disabled:text-${color}-400 dark:aria-disabled:text-${color}-400 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-${color}-500 dark:focus-visible:ring-${color}-400`
   })), {
     color: "gray",
     variant: "solid",
-    class: "text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-700 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-200 dark:disabled:bg-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900 dark:focus-visible:outline-white"
+    class: "text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-700 disabled:bg-gray-900 aria-disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-200 dark:disabled:bg-white dark:aria-disabled:bg-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900 dark:focus-visible:outline-white"
   }, {
     color: "gray",
     variant: "outline",
-    class: "ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-white hover:bg-gray-100 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-gray-900 dark:focus-visible:ring-white"
+    class: "ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-white hover:bg-gray-100 disabled:bg-white aria-disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800 dark:disabled:bg-gray-900 dark:aria-disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-gray-900 dark:focus-visible:ring-white"
   }, {
     color: "gray",
     variant: "soft",
-    class: "text-gray-700 dark:text-gray-200 bg-gray-100 hover:bg-gray-200 focus-visible:bg-gray-200 disabled:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700/50 dark:focus-visible:bg-gray-700/50 dark:disabled:bg-gray-800"
+    class: "text-gray-700 dark:text-gray-200 bg-gray-100 hover:bg-gray-200 focus-visible:bg-gray-200 disabled:bg-gray-100 aria-disabled:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700/50 dark:focus-visible:bg-gray-700/50 dark:disabled:bg-gray-800 dark:aria-disabled:bg-gray-800"
   }, {
     color: "gray",
     variant: "subtle",
-    class: "ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-gray-100 hover:bg-gray-200 disabled:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700/50 dark:disabled:bg-gray-800 focus-visible:ring-2 focus-visible:ring-gray-900 dark:focus-visible:ring-white"
+    class: "ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-gray-100 hover:bg-gray-200 disabled:bg-gray-100 aria-disabled:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700/50 dark:disabled:bg-gray-800 dark:aria-disabled:bg-gray-800 focus-visible:ring-2 focus-visible:ring-gray-900 dark:focus-visible:ring-white"
   }, {
     color: "gray",
     variant: "ghost",
-    class: "text-gray-700 dark:text-gray-200 hover:bg-gray-100 focus-visible:bg-gray-100 disabled:bg-transparent dark:hover:bg-gray-800 dark:focus-visible:bg-gray-800 dark:hover:disabled:bg-transparent"
+    class: "text-gray-700 dark:text-gray-200 hover:bg-gray-100 focus-visible:bg-gray-100 disabled:bg-transparent aria-disabled:bg-transparent dark:hover:bg-gray-800 dark:focus-visible:bg-gray-800 dark:hover:disabled:bg-transparent dark:hover:aria-disabled:bg-transparent"
   }, {
     color: "gray",
     variant: "link",
-    class: "text-gray-500 hover:text-gray-700 disabled:text-gray-500 dark:text-gray-400 dark:hover:text-gray-200 dark:disabled:text-gray-400 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-gray-900 dark:focus-visible:ring-white"
+    class: "text-gray-500 hover:text-gray-700 disabled:text-gray-500 aria-disabled:text-gray-500 dark:text-gray-400 dark:hover:text-gray-200 dark:disabled:text-gray-400 dark:aria-disabled:text-gray-400 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-gray-900 dark:focus-visible:ring-white"
   }, {
     size: "xs",
     square: true,
@@ -510,7 +510,7 @@ const checkbox = (options) => ({
   },
   variants: {
     color: {
-      ...Object.fromEntries(options.colors.map((color) => [color, `focus-visible:outline-${color}-500 dark:focus-visible:outline-${color}-400`])),
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, `focus-visible:outline-${color}-500 dark:focus-visible:outline-${color}-400`])),
       gray: "focus-visible:outline-gray-900 dark:focus-visible:outline-white"
     },
     size: {
@@ -556,7 +556,7 @@ const checkbox = (options) => ({
       true: ""
     }
   },
-  compoundVariants: [...options.colors.map((color) => ({
+  compoundVariants: [...(options.theme.colors || []).map((color) => ({
     color,
     checked: true,
     class: `ring-2 ring-${color}-500 dark:ring-${color}-400 bg-${color}-500 dark:bg-${color}-400`
@@ -578,7 +578,7 @@ const chip = (options) => ({
   },
   variants: {
     color: {
-      ...Object.fromEntries(options.colors.map((color) => [color, `bg-${color}-500 dark:bg-${color}-400`])),
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, `bg-${color}-500 dark:bg-${color}-400`])),
       gray: "bg-gray-500 dark:bg-gray-400"
     },
     size: {
@@ -646,8 +646,8 @@ const commandPalette = (options) => ({
     group: "p-1 isolate",
     empty: "py-6 text-center text-sm",
     label: "px-2 py-1.5 text-xs font-semibold text-gray-900 dark:text-white",
-    item: ["group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50", options.transitions && "transition-colors before:transition-colors"],
-    itemLeadingIcon: ["shrink-0 size-5 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200", options.transitions && "transition-colors"],
+    item: ["group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50", options.theme.transitions && "transition-colors before:transition-colors"],
+    itemLeadingIcon: ["shrink-0 size-5 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200", options.theme.transitions && "transition-colors"],
     itemLeadingAvatar: "shrink-0",
     itemLeadingAvatarSize: "2xs",
     itemLeadingChip: "shrink-0 size-5",
@@ -692,8 +692,8 @@ const contextMenu = (options) => ({
         itemLeadingIcon: "text-gray-700 dark:text-gray-200"
       },
       false: {
-        item: ["text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-[state=open]:text-gray-900 dark:data-[state=open]:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 data-[state=open]:before:bg-gray-50 dark:data-[state=open]:before:bg-gray-800/50", options.transitions && "transition-colors before:transition-colors"],
-        itemLeadingIcon: ["text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 group-data-[state=open]:text-gray-700 dark:group-data-[state=open]:text-gray-200", options.transitions && "transition-colors"]
+        item: ["text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-[state=open]:text-gray-900 dark:data-[state=open]:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 data-[state=open]:before:bg-gray-50 dark:data-[state=open]:before:bg-gray-800/50", options.theme.transitions && "transition-colors before:transition-colors"],
+        itemLeadingIcon: ["text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 group-data-[state=open]:text-gray-700 dark:group-data-[state=open]:text-gray-200", options.theme.transitions && "transition-colors"]
       }
     },
     size: {
@@ -788,8 +788,8 @@ const dropdownMenu = (options) => ({
         itemLeadingIcon: "text-gray-700 dark:text-gray-200"
       },
       false: {
-        item: ["text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-[state=open]:text-gray-900 dark:data-[state=open]:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 data-[state=open]:before:bg-gray-50 dark:data-[state=open]:before:bg-gray-800/50", options.transitions && "transition-colors before:transition-colors"],
-        itemLeadingIcon: ["text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 group-data-[state=open]:text-gray-700 dark:group-data-[state=open]:text-gray-200", options.transitions && "transition-colors"]
+        item: ["text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-[state=open]:text-gray-900 dark:data-[state=open]:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 data-[state=open]:before:bg-gray-50 dark:data-[state=open]:before:bg-gray-800/50", options.theme.transitions && "transition-colors before:transition-colors"],
+        itemLeadingIcon: ["text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 group-data-[state=open]:text-gray-700 dark:group-data-[state=open]:text-gray-200", options.theme.transitions && "transition-colors"]
       }
     },
     size: {
@@ -883,7 +883,7 @@ const formField = {
 const input = (options) => ({
   slots: {
     root: "relative inline-flex items-center",
-    base: ["w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75", options.transitions && "transition-colors"],
+    base: ["w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75", options.theme.transitions && "transition-colors"],
     leading: "absolute inset-y-0 start-0 flex items-center",
     leadingIcon: "shrink-0 text-gray-400 dark:text-gray-500",
     leadingAvatar: "shrink-0",
@@ -937,7 +937,7 @@ const input = (options) => ({
       none: "text-gray-900 dark:text-white"
     },
     color: {
-      ...Object.fromEntries(options.colors.map((color) => [color, ""])),
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, ""])),
       gray: ""
     },
     leading: {
@@ -956,11 +956,11 @@ const input = (options) => ({
       file: "file:mr-1.5 file:font-medium file:text-gray-500 dark:file:text-gray-400 file:outline-none"
     }
   },
-  compoundVariants: [...options.colors.map((color) => ({
+  compoundVariants: [...(options.theme.colors || []).map((color) => ({
     color,
     variant: ["outline", "subtle"],
     class: `focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-${color}-500 dark:focus-visible:ring-${color}-400`
-  })), ...options.colors.map((color) => ({
+  })), ...(options.theme.colors || []).map((color) => ({
     color,
     highlight: true,
     class: `ring ring-inset ring-${color}-500 dark:ring-${color}-400`
@@ -1036,6 +1036,8 @@ const input = (options) => ({
 const inputMenu = (options) => {
   return defuFn({
     slots: {
+      base: () => ["rounded-md", options.theme.transitions && "transition-colors"],
+      trailing: "absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75",
       arrow: "fill-gray-200 dark:fill-gray-800",
       content: "max-h-60 w-[--radix-popper-anchor-width] bg-white dark:bg-gray-900 shadow-lg rounded-md ring ring-gray-200 dark:ring-gray-800 overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]",
       viewport: "divide-y divide-gray-200 dark:divide-gray-800 scroll-py-1",
@@ -1043,8 +1045,8 @@ const inputMenu = (options) => {
       empty: "py-2 text-center text-sm text-gray-500 dark:text-gray-400",
       label: "font-semibold text-gray-900 dark:text-white",
       separator: "-mx-1 my-1 h-px bg-gray-200 dark:bg-gray-800",
-      item: ["group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50", options.transitions && "transition-colors before:transition-colors"],
-      itemLeadingIcon: ["shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200", options.transitions && "transition-colors"],
+      item: ["group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50", options.theme.transitions && "transition-colors before:transition-colors"],
+      itemLeadingIcon: ["shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200", options.theme.transitions && "transition-colors"],
       itemLeadingAvatar: "shrink-0",
       itemLeadingAvatarSize: "",
       itemLeadingChip: "shrink-0",
@@ -1054,14 +1056,9 @@ const inputMenu = (options) => {
       itemLabel: "truncate",
       tagsItem: "px-1.5 py-0.5 rounded font-medium inline-flex items-center gap-0.5 ring ring-inset ring-gray-300 dark:ring-gray-700 bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-200 data-disabled:cursor-not-allowed data-disabled:opacity-75",
       tagsItemText: "truncate",
-      tagsItemDelete: ["inline-flex items-center rounded-sm text-gray-400 dark:text-gray-500 hover:text-gray-700 hover:bg-gray-200 dark:hover:text-gray-200 dark:hover:bg-gray-700/50 disabled:pointer-events-none", options.transitions && "transition-colors"],
+      tagsItemDelete: ["inline-flex items-center rounded-sm text-gray-400 dark:text-gray-500 hover:text-gray-700 hover:bg-gray-200 dark:hover:text-gray-200 dark:hover:bg-gray-700/50 disabled:pointer-events-none", options.theme.transitions && "transition-colors"],
       tagsItemDeleteIcon: "",
       tagsInput: "border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75"
-    }
-  }, {
-    slots: {
-      base: () => ["rounded-md", options.transitions && "transition-colors"],
-      trailing: "absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75"
     },
     variants: {
       multiple: {
@@ -1131,7 +1128,7 @@ const inputMenu = (options) => {
         }
       }
     },
-    compoundVariants: [...options.colors.map((color) => ({
+    compoundVariants: [...(options.theme.colors || []).map((color) => ({
       color,
       multiple: true,
       variant: ["outline", "subtle"],
@@ -1170,7 +1167,7 @@ const link = (options) => ({
   variants: {
     active: {
       true: "text-primary-500 dark:text-primary-400",
-      false: ["text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200", options.transitions && "transition-colors"]
+      false: ["text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200", options.theme.transitions && "transition-colors"]
     },
     disabled: {
       true: "cursor-not-allowed opacity-75"
@@ -1240,7 +1237,7 @@ const navigationMenu = (options) => ({
   },
   variants: {
     color: {
-      ...Object.fromEntries(options.colors.map((color) => [color, {
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, {
         link: `focus-visible:before:ring-${color}-500 dark:focus-visible:before:ring-${color}-400`,
         childLink: `focus-visible:outline-${color}-500 dark:focus-visible:outline-${color}-400`
       }])),
@@ -1250,7 +1247,7 @@ const navigationMenu = (options) => ({
       }
     },
     highlightColor: {
-      ...Object.fromEntries(options.colors.map((color) => [color, ""])),
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, ""])),
       gray: ""
     },
     variant: {
@@ -1277,8 +1274,8 @@ const navigationMenu = (options) => ({
       false: {
         link: "text-gray-500 dark:text-gray-400",
         linkLeadingIcon: "text-gray-400 dark:text-gray-500",
-        childLink: ["hover:bg-gray-50 dark:hover:bg-gray-800/50 text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white", options.transitions && "transition-colors"],
-        childLinkIcon: ["text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200", options.transitions && "transition-colors"]
+        childLink: ["hover:bg-gray-50 dark:hover:bg-gray-800/50 text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white", options.theme.transitions && "transition-colors"],
+        childLinkIcon: ["text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200", options.theme.transitions && "transition-colors"]
       }
     },
     disabled: {
@@ -1309,10 +1306,10 @@ const navigationMenu = (options) => ({
     active: false,
     variant: "pill",
     class: {
-      link: ["hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 data-[state=open]:text-gray-900 dark:data-[state=open]:text-white data-[state=open]:before:bg-gray-50 dark:data-[state=open]:before:bg-gray-800/50", options.transitions && "transition-colors before:transition-colors"],
-      linkLeadingIcon: ["group-hover:text-gray-700 dark:group-hover:text-gray-200 group-data-[state=open]:text-gray-700 dark:group-data-[state=open]:text-gray-200", options.transitions && "transition-colors"]
+      link: ["hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 data-[state=open]:text-gray-900 dark:data-[state=open]:text-white data-[state=open]:before:bg-gray-50 dark:data-[state=open]:before:bg-gray-800/50", options.theme.transitions && "transition-colors before:transition-colors"],
+      linkLeadingIcon: ["group-hover:text-gray-700 dark:group-hover:text-gray-200 group-data-[state=open]:text-gray-700 dark:group-data-[state=open]:text-gray-200", options.theme.transitions && "transition-colors"]
     }
-  }, ...options.colors.map((color) => ({
+  }, ...(options.theme.colors || []).map((color) => ({
     color,
     variant: "pill",
     active: true,
@@ -1340,17 +1337,17 @@ const navigationMenu = (options) => ({
     active: true,
     highlight: true,
     class: {
-      link: ["hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50", options.transitions && "before:transition-colors"]
+      link: ["hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50", options.theme.transitions && "before:transition-colors"]
     }
   }, {
     disabled: false,
     active: false,
     variant: "link",
     class: {
-      link: ["hover:text-gray-900 dark:hover:text-white data-[state=open]:text-gray-900 dark:data-[state=open]:text-white", options.transitions && "transition-colors"],
-      linkLeadingIcon: ["group-hover:text-gray-700 dark:group-hover:text-gray-200 group-data-[state=open]:text-gray-700 dark:group-data-[state=open]:text-gray-200", options.transitions && "transition-colors"]
+      link: ["hover:text-gray-900 dark:hover:text-white data-[state=open]:text-gray-900 dark:data-[state=open]:text-white", options.theme.transitions && "transition-colors"],
+      linkLeadingIcon: ["group-hover:text-gray-700 dark:group-hover:text-gray-200 group-data-[state=open]:text-gray-700 dark:group-data-[state=open]:text-gray-200", options.theme.transitions && "transition-colors"]
     }
-  }, ...options.colors.map((color) => ({
+  }, ...(options.theme.colors || []).map((color) => ({
     color,
     variant: "link",
     active: true,
@@ -1366,7 +1363,7 @@ const navigationMenu = (options) => ({
       link: "text-gray-900 dark:text-white",
       linkLeadingIcon: "text-gray-900 dark:text-white"
     }
-  }, ...options.colors.map((highlightColor) => ({
+  }, ...(options.theme.colors || []).map((highlightColor) => ({
     highlightColor,
     highlight: true,
     active: true,
@@ -1421,7 +1418,7 @@ const progress = (options) => ({
       "elastic": ""
     },
     color: {
-      ...Object.fromEntries(options.colors.map((color) => [color, {
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, {
         indicator: `bg-${color}-500 dark:bg-${color}-400`,
         steps: `text-${color}-500 dark:text-${color}-400`
       }])),
@@ -1633,7 +1630,7 @@ const radioGroup = (options) => ({
   },
   variants: {
     color: {
-      ...Object.fromEntries(options.colors.map((color) => [color, {
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, {
         base: `focus-visible:outline-${color}-500 dark:focus-visible:outline-${color}-400`,
         indicator: `bg-${color}-500 dark:bg-${color}-400`
       }])),
@@ -1714,6 +1711,9 @@ const radioGroup = (options) => ({
 const select = (options) => {
   return defuFn({
     slots: {
+      root: () => void 0,
+      base: () => ["relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75", options.theme.transitions && "transition-colors"],
+      value: "truncate group-data-placeholder:text-current/50",
       arrow: "fill-gray-200 dark:fill-gray-800",
       content: "max-h-60 w-[--radix-popper-anchor-width] bg-white dark:bg-gray-900 shadow-lg rounded-md ring ring-gray-200 dark:ring-gray-800 overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]",
       viewport: "divide-y divide-gray-200 dark:divide-gray-800 scroll-py-1",
@@ -1721,8 +1721,8 @@ const select = (options) => {
       empty: "py-2 text-center text-sm text-gray-500 dark:text-gray-400",
       label: "font-semibold text-gray-900 dark:text-white",
       separator: "-mx-1 my-1 h-px bg-gray-200 dark:bg-gray-800",
-      item: ["group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50", options.transitions && "transition-colors before:transition-colors"],
-      itemLeadingIcon: ["shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200", options.transitions && "transition-colors"],
+      item: ["group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50", options.theme.transitions && "transition-colors before:transition-colors"],
+      itemLeadingIcon: ["shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200", options.theme.transitions && "transition-colors"],
       itemLeadingAvatar: "shrink-0",
       itemLeadingAvatarSize: "",
       itemLeadingChip: "shrink-0",
@@ -1732,6 +1732,7 @@ const select = (options) => {
       itemLabel: "truncate"
     },
     variants: {
+      ...buttonGroupVariant,
       size: {
         xs: {
           label: "p-1 text-[10px]/3 gap-1",
@@ -1780,14 +1781,6 @@ const select = (options) => {
         }
       }
     }
-  }, {
-    slots: {
-      base: () => ["relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75", options.transitions && "transition-colors"],
-      value: "truncate group-data-placeholder:text-current/50"
-    },
-    variants: {
-      ...buttonGroupVariant
-    }
   }, input(options));
 };
 
@@ -1832,7 +1825,7 @@ const separator = (options) => ({
   },
   variants: {
     color: {
-      ...Object.fromEntries(options.colors.map((color) => [color, { border: `border-${color}-500 dark:border-${color}-400` }])),
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, { border: `border-${color}-500 dark:border-${color}-400` }])),
       gray: { border: "border-gray-200 dark:border-gray-800" }
     },
     orientation: {
@@ -1986,7 +1979,7 @@ const slider = (options) => ({
   },
   variants: {
     color: {
-      ...Object.fromEntries(options.colors.map((color) => [color, {
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, {
         range: `bg-${color}-500 dark:bg-${color}-400`,
         thumb: `ring-${color}-500 dark:ring-${color}-400 focus-visible:outline-${color}-500/50 dark:focus-visible:outline-${color}-400/50`
       }])),
@@ -2098,17 +2091,17 @@ const slider = (options) => ({
 const _switch = (options) => ({
   slots: {
     root: "relative flex items-start",
-    base: ["inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 data-[state=unchecked]:bg-gray-200 dark:data-[state=unchecked]:bg-gray-700", options.transitions && "transition-colors duration-200"],
+    base: ["inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 data-[state=unchecked]:bg-gray-200 dark:data-[state=unchecked]:bg-gray-700", options.theme.transitions && "transition-colors duration-200"],
     container: "flex items-center",
     thumb: "group pointer-events-none block rounded-full bg-white dark:bg-gray-900 shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 flex items-center justify-center",
-    icon: ["absolute shrink-0 group-data-[state=unchecked]:text-gray-400 dark:group-data-[state=unchecked]:text-gray-500 opacity-0 size-10/12", options.transitions && "transition-[color,opacity] duration-200"],
+    icon: ["absolute shrink-0 group-data-[state=unchecked]:text-gray-400 dark:group-data-[state=unchecked]:text-gray-500 opacity-0 size-10/12", options.theme.transitions && "transition-[color,opacity] duration-200"],
     wrapper: "ms-2",
     label: "block font-medium text-gray-700 dark:text-gray-200",
     description: "text-gray-500 dark:text-gray-400"
   },
   variants: {
     color: {
-      ...Object.fromEntries(options.colors.map((color) => [color, {
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, {
         base: `data-[state=checked]:bg-${color}-500 dark:data-[state=checked]:bg-${color}-400 focus-visible:ring-${color}-500 dark:focus-visible:ring-${color}-400`,
         icon: `group-data-[state=checked]:text-${color}-500 dark:group-data-[state=checked]:text-${color}-400`
       }])),
@@ -2188,7 +2181,7 @@ const tabs = (options) => ({
     root: "flex items-center gap-2",
     list: "relative flex p-1 group",
     indicator: "absolute transition-[translate,width] duration-200",
-    trigger: ["relative inline-flex items-center shrink-0 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none", options.transitions && "transition-colors"],
+    trigger: ["relative inline-flex items-center shrink-0 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none", options.theme.transitions && "transition-colors"],
     content: "focus:outline-none w-full",
     leadingIcon: "shrink-0",
     leadingAvatar: "shrink-0",
@@ -2197,7 +2190,7 @@ const tabs = (options) => ({
   },
   variants: {
     color: {
-      ...Object.fromEntries(options.colors.map((color) => [color, ""])),
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, ""])),
       gray: ""
     },
     variant: {
@@ -2278,7 +2271,7 @@ const tabs = (options) => ({
       list: "border-l",
       indicator: "-left-px w-px"
     }
-  }, ...options.colors.map((color) => ({
+  }, ...(options.theme.colors || []).map((color) => ({
     color,
     variant: "pill",
     class: {
@@ -2292,7 +2285,7 @@ const tabs = (options) => ({
       indicator: "bg-gray-900 dark:bg-white",
       trigger: "data-[state=active]:text-white dark:data-[state=active]:text-gray-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900 dark:focus-visible:outline-white"
     }
-  }, ...options.colors.map((color) => ({
+  }, ...(options.theme.colors || []).map((color) => ({
     color,
     variant: "link",
     class: {
@@ -2333,7 +2326,7 @@ const toast = (options) => ({
   },
   variants: {
     color: {
-      ...Object.fromEntries(options.colors.map((color) => [color, {
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, {
         icon: `text-${color}-500 dark:text-${color}-400`,
         progress: `bg-${color}-500 dark:bg-${color}-400`
       }])),
@@ -2557,12 +2550,16 @@ const module = defineNuxtModule({
   },
   defaults: {
     prefix: "U",
-    colors: void 0,
-    transitions: true
+    fonts: true,
+    theme: {
+      colors: void 0,
+      transitions: true
+    }
   },
   async setup(options, nuxt) {
     const { resolve } = createResolver(import.meta.url);
-    options.colors = options.colors?.length ? [.../* @__PURE__ */ new Set(["primary", "error", ...options.colors])] : ["primary", "error", "red", "orange", "amber", "yellow", "lime", "green", "emerald", "teal", "cyan", "sky", "blue", "indigo", "violet", "purple", "fuchsia", "pink", "rose"];
+    options.theme = options.theme || {};
+    options.theme.colors = options.theme.colors?.length ? [.../* @__PURE__ */ new Set(["primary", "error", ...options.theme.colors])] : ["primary", "error", "red", "orange", "amber", "yellow", "lime", "green", "emerald", "teal", "cyan", "sky", "blue", "indigo", "violet", "purple", "fuchsia", "pink", "rose"];
     nuxt.options.ui = options;
     nuxt.options.alias["#ui"] = resolve("./runtime");
     nuxt.options.appConfig.ui = defu(nuxt.options.appConfig.ui || {}, {
@@ -2581,7 +2578,18 @@ const module = defineNuxtModule({
     } else {
       nuxt.options.postcss.plugins["@tailwindcss/postcss"] = {};
     }
-    await installModule("@nuxt/icon", { cssLayer: "components" });
+    if (options.fonts) {
+      if (!hasNuxtModule("@nuxt/fonts")) {
+        await installModule("@nuxt/fonts", { experimental: { processCSSVariables: true } });
+      } else {
+        nuxt.options.fonts = defu(nuxt.options.fonts, { experimental: { processCSSVariables: true } });
+      }
+    }
+    if (!hasNuxtModule("@nuxt/icon")) {
+      await installModule("@nuxt/icon", { cssLayer: "components" });
+    } else {
+      nuxt.options.icon = defu(nuxt.options.icon, { cssLayer: "components" });
+    }
     addPlugin({
       src: resolve("./runtime/plugins/colors")
     });

package/dist/runtime/components/Button.vue

@@ -6,6 +6,7 @@ import theme from '#build/ui/button'
 import type { LinkProps } from './Link.vue'
 import type { UseComponentIconsProps } from '../composables/useComponentIcons'
 import type { PartialString } from '../types/utils'
+import { formLoadingInjectionKey } from '../composables/useFormField'
 
 const appConfig = _appConfig as AppConfig & { ui: { button: Partial<typeof theme> } }
 
@@ -22,6 +23,9 @@ export interface ButtonProps extends UseComponentIconsProps, Omit<LinkProps, 'ra
   square?: boolean
   /** Render the button full width. */
   block?: boolean
+  /** Set loading state automatically based on the `@click` promise state */
+  loadingAuto?: boolean
+  onClick?: ((event: MouseEvent) => void | Promise<void>) | Array<((event: MouseEvent) => void | Promise<void>)>
   class?: any
   ui?: PartialString<typeof button.slots>
 }
@@ -34,7 +38,7 @@ export interface ButtonSlots {
 </script>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { type Ref, computed, ref, inject } from 'vue'
 import { useForwardProps } from 'radix-vue'
 import { useComponentIcons } from '../composables/useComponentIcons'
 import { useButtonGroup } from '../composables/useButtonGroup'
@@ -48,13 +52,33 @@ const slots = defineSlots<ButtonSlots>()
 const linkProps = useForwardProps(pickLinkProps(props))
 
 const { orientation, size: buttonSize } = useButtonGroup<ButtonProps>(props)
-const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props)
+
+const loadingAutoState = ref(false)
+const formLoading = inject<Ref<boolean> | undefined>(formLoadingInjectionKey, undefined)
+
+async function onClickWrapper(event: MouseEvent) {
+  loadingAutoState.value = true
+  const callbacks = Array.isArray(props.onClick) ? props.onClick : [props.onClick]
+  try {
+    await Promise.all(callbacks.map(fn => fn?.(event)))
+  } finally {
+    loadingAutoState.value = false
+  }
+}
+
+const isLoading = computed(() => {
+  return props.loading || (props.loadingAuto && (loadingAutoState.value || (formLoading?.value && props.type === 'submit')))
+})
+
+const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(
+  computed(() => ({ ...props, loading: isLoading.value }))
+)
 
 const ui = computed(() => button({
   color: props.color,
   variant: props.variant,
   size: buttonSize.value,
-  loading: props.loading,
+  loading: isLoading.value,
   block: props.block,
   square: props.square || (!slots.default && !props.label),
   leading: isLeading.value,
@@ -64,7 +88,14 @@ const ui = computed(() => button({
 </script>
 
 <template>
-  <ULink :type="type" :disabled="disabled || loading" :class="ui.base({ class: props.class })" v-bind="linkProps" raw>
+  <ULink
+    :type="type"
+    :disabled="disabled || isLoading"
+    :class="ui.base({ class: [props.class, props.ui?.base] })"
+    v-bind="linkProps"
+    raw
+    @click="onClickWrapper"
+  >
     <slot name="leading">
       <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
     </slot>

package/dist/runtime/components/CommandPalette.vue

@@ -180,7 +180,7 @@ const groups = computed(() => {
     }
 
     acc[item.group] ||= []
-    acc[item.group].push({ ...item, matches })
+    acc[item.group]?.push({ ...item, matches })
 
     return acc
   }, {} as Record<string, (T & { matches?: FuseResult<T>['matches'] })[]>)

package/dist/runtime/components/Form.vue

@@ -13,11 +13,12 @@ export interface FormProps<T extends object> {
   id?: string | number
   schema?: FormSchema<T>
   state: Partial<T>
-  validate?: (state: Partial<T>) => Promise<FormError[]>
+  validate?: (state: Partial<T>) => Promise<FormError[]> | FormError[]
   validateOn?: FormInputEvents[]
   disabled?: boolean
   validateOnInputDelay?: number
   class?: any
+  onSubmit?: ((event: FormSubmitEvent<T>) => void | Promise<void>) | (() => void | Promise<void>)
 }
 
 export interface FormEmits<T extends object> {
@@ -31,9 +32,9 @@ export interface FormSlots {
 </script>
 
 <script lang="ts" setup generic="T extends object">
-import { provide, inject, nextTick, ref, onUnmounted, onMounted, computed, useId } from 'vue'
+import { provide, inject, nextTick, ref, onUnmounted, onMounted, computed, useId, readonly } from 'vue'
 import { useEventBus } from '@vueuse/core'
-import { formOptionsInjectionKey, formInputsInjectionKey, formBusInjectionKey } from '../composables/useFormField'
+import { formOptionsInjectionKey, formInputsInjectionKey, formBusInjectionKey, formLoadingInjectionKey } from '../composables/useFormField'
 import { getYupErrors, isYupSchema, getValibotError, isValibotSchema, getZodErrors, isZodSchema, getJoiErrors, isJoiSchema } from '../utils/form'
 import { FormValidationException } from '../types/form'
 
@@ -53,6 +54,7 @@ const parentBus = inject(
   formBusInjectionKey,
   undefined
 )
+
 provide(formBusInjectionKey, bus)
 
 const nestedForms = ref<Map<string | number, { validate: () => any }>>(new Map())
@@ -86,11 +88,6 @@ onUnmounted(() => {
   }
 })
 
-provide(formOptionsInjectionKey, computed(() => ({
-  disabled: props.disabled,
-  validateOnInputDelay: props.validateOnInputDelay
-})))
-
 const errors = ref<FormErrorWithId[]>([])
 provide('form-errors', errors)
 
@@ -147,7 +144,8 @@ async function _validate(opts: { name?: string | string[], silent?: boolean, nes
     errors.value = await getErrors()
   }
 
-  const childErrors = nestedValidatePromises ? await Promise.all(nestedValidatePromises) : []
+  const childErrors = (await Promise.all(nestedValidatePromises)).filter(val => val)
+
   if (errors.value.length + childErrors.length > 0) {
     if (opts.silent) return false
     throw new FormValidationException(formId, errors.value, childErrors)
@@ -156,13 +154,18 @@ async function _validate(opts: { name?: string | string[], silent?: boolean, nes
   return props.state as T
 }
 
-async function onSubmit(payload: Event) {
+const loading = ref(false)
+provide(formLoadingInjectionKey, readonly(loading))
+
+async function onSubmitWrapper(payload: Event) {
+  loading.value = true
+
   const event = payload as FormSubmitEvent<any>
 
   try {
     await _validate({ nested: true })
     event.data = props.state
-    emits('submit', event)
+    await props.onSubmit?.(event)
   } catch (error) {
     if (!(error instanceof FormValidationException)) {
       throw error
@@ -173,11 +176,19 @@ async function onSubmit(payload: Event) {
       errors: error.errors,
       childrens: error.childrens
     }
-
     emits('error', errorEvent)
   }
+
+  loading.value = false
 }
 
+const disabled = computed(() => props.disabled || loading.value)
+
+provide(formOptionsInjectionKey, computed(() => ({
+  disabled: disabled.value,
+  validateOnInputDelay: props.validateOnInputDelay
+})))
+
 defineExpose<Form<T>>({
   validate: _validate,
   errors,
@@ -193,7 +204,7 @@ defineExpose<Form<T>>({
   },
 
   async submit() {
-    await onSubmit(new Event('submit'))
+    await onSubmitWrapper(new Event('submit'))
   },
 
   getErrors(name?: string) {
@@ -211,7 +222,7 @@ defineExpose<Form<T>>({
     }
   },
 
-  disabled: computed(() => props.disabled)
+  disabled
 })
 </script>
 
@@ -220,7 +231,7 @@ defineExpose<Form<T>>({
     :is="parentBus ? 'div' : 'form'"
     :id="formId"
     :class="form({ class: props.class })"
-    @submit.prevent="onSubmit"
+    @submit.prevent="onSubmitWrapper"
   >
     <slot />
   </component>

package/dist/runtime/components/LinkBase.vue

@@ -3,7 +3,7 @@ export interface LinkBaseProps {
   as?: string
   type?: string
   disabled?: boolean
-  click?: (e: MouseEvent) => void
+  onClick?: (e: MouseEvent) => void | Promise<void>
   href?: string
   navigate?: (e: MouseEvent) => void
   rel?: string
@@ -20,15 +20,15 @@ const props = withDefaults(defineProps<LinkBaseProps>(), {
   type: 'button'
 })
 
-function onClick(e: MouseEvent) {
+function onClickWrapper(e: MouseEvent) {
   if (props.disabled) {
     e.stopPropagation()
     e.preventDefault()
     return
   }
 
-  if (props.click) {
-    props.click(e)
+  if (props.onClick) {
+    props.onClick(e)
   }
 
   if (props.href && props.navigate && !props.isExternal) {
@@ -43,7 +43,8 @@ function onClick(e: MouseEvent) {
       'as': 'a',
       'href': disabled ? undefined : href,
       'aria-disabled': disabled ? 'true' : undefined,
-      'role': disabled ? 'link' : undefined
+      'role': disabled ? 'link' : undefined,
+      'tabindex': disabled ? -1 : undefined
     } : as === 'button' ? {
       as,
       type,
@@ -53,7 +54,7 @@ function onClick(e: MouseEvent) {
     }"
     :rel="rel"
     :target="target"
-    @click="onClick"
+    @click="onClickWrapper"
   >
     <slot />
   </Primitive>

package/dist/runtime/components/Select.vue

@@ -161,7 +161,7 @@ function onUpdateOpen(value: boolean) {
     @update:model-value="onUpdate"
     @update:open="onUpdateOpen"
   >
-    <SelectTrigger :class="ui.base({ class: props.class })">
+    <SelectTrigger :class="ui.base({ class: [props.class, props.ui?.base] })">
       <span v-if="isLeading || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
         <slot name="leading" :model-value="modelValue" :open="open" :ui="ui">
           <UIcon v-if="leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />

package/dist/runtime/components/SelectMenu.vue

@@ -219,7 +219,7 @@ function onUpdateOpen(value: boolean) {
     @update:open="onUpdateOpen"
   >
     <ComboboxAnchor as-child>
-      <ComboboxTrigger :class="ui.base({ class: props.class })" tabindex="0">
+      <ComboboxTrigger :class="ui.base({ class: [props.class, props.ui?.base] })" tabindex="0">
         <span v-if="isLeading || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
           <slot name="leading" :model-value="(modelValue as T)" :open="open" :ui="ui">
             <UIcon v-if="leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />

package/dist/runtime/components/Toaster.vue

@@ -115,7 +115,7 @@ function getOffset(index: number) {
 
     <ToastViewport
       :data-expanded="expanded"
-      :class="ui.viewport({ class: props.class })"
+      :class="ui.viewport({ class: [props.class, props.ui?.viewport] })"
       :style="{
         '--scale-factor': '0.05',
         '--translate-factor': position?.startsWith('top') ? '1px' : '-1px',

package/dist/runtime/composables/useFormField.d.ts

@@ -18,6 +18,7 @@ export declare const formBusInjectionKey: InjectionKey<UseEventBusReturn<FormEve
 export declare const formFieldInjectionKey: InjectionKey<ComputedRef<FormFieldInjectedOptions<FormFieldProps>>>;
 export declare const inputIdInjectionKey: InjectionKey<Ref<string | undefined>>;
 export declare const formInputsInjectionKey: InjectionKey<Ref<Record<string, string>>>;
+export declare const formLoadingInjectionKey: InjectionKey<Readonly<Ref<boolean>>>;
 export declare function useFormField<T>(props?: Props<T>, opts?: {
     bind?: boolean;
 }): {

package/dist/runtime/composables/useFormField.js

@@ -5,6 +5,7 @@ export const formBusInjectionKey = Symbol("nuxt-ui.form-events");
 export const formFieldInjectionKey = Symbol("nuxt-ui.form-field");
 export const inputIdInjectionKey = Symbol("nuxt-ui.input-id");
 export const formInputsInjectionKey = Symbol("nuxt-ui.form-inputs");
+export const formLoadingInjectionKey = Symbol("nuxt-ui.form-loading");
 export function useFormField(props, opts) {
   const formOptions = inject(formOptionsInjectionKey, void 0);
   const formBus = inject(formBusInjectionKey, void 0);

package/dist/runtime/composables/useToast.d.ts

@@ -6,7 +6,7 @@ export interface Toast extends Omit<ToastProps, 'defaultOpen'> {
 export declare function useToast(): {
     toasts: import("vue").Ref<Toast[], Toast[]>;
     add: (toast: Partial<Toast>) => Toast;
-    update: (id: string | number, toast: Partial<Toast>) => void;
+    update: (id: string | number, toast: Omit<Partial<Toast>, "id">) => void;
     remove: (id: string | number) => void;
     clear: () => void;
 };

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

@@ -1,5 +1,5 @@
 export declare function pick<Data extends object, Keys extends keyof Data>(data: Data, keys: Keys[]): Pick<Data, Keys>;
 export declare function omit<Data extends object, Keys extends keyof Data>(data: Data, keys: Keys[]): Omit<Data, Keys>;
-export declare function get(object: Record<string, any>, path: (string | number)[] | string, defaultValue?: any): any;
+export declare function get(object: Record<string, any> | undefined, path: (string | number)[] | string, defaultValue?: any): any;
 export declare function set(object: Record<string, any>, path: (string | number)[] | string, value: any): void;
 export declare function looseToNumber(val: any): any;

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@nuxt/ui",
-  "version": "3.0.0-alpha.1",
+  "description": "A UI Library for Modern Web Apps, powered by Vue & Tailwind CSS.",
+  "version": "3.0.0-alpha.3",
   "packageManager": "pnpm@9.10.0",
   "repository": {
     "type": "git",
@@ -44,36 +45,37 @@
     "release": "release-it --preRelease=alpha --npm.tag=next"
   },
   "dependencies": {
+    "@nuxt/fonts": "^0.8.0",
     "@nuxt/icon": "^1.5.1",
-    "@nuxt/kit": "^3.13.1",
-    "@nuxt/schema": "^3.13.1",
-    "@nuxtjs/color-mode": "^3.4.4",
-    "@tailwindcss/postcss": "4.0.0-alpha.23",
-    "@tailwindcss/vite": "4.0.0-alpha.23",
-    "@vueuse/core": "^11.0.3",
-    "@vueuse/integrations": "^11.0.3",
+    "@nuxt/kit": "^3.13.2",
+    "@nuxt/schema": "^3.13.2",
+    "@nuxtjs/color-mode": "^3.5.1",
+    "@tailwindcss/postcss": "4.0.0-alpha.24",
+    "@tailwindcss/vite": "4.0.0-alpha.24",
+    "@vueuse/core": "^11.1.0",
+    "@vueuse/integrations": "^11.1.0",
     "defu": "^6.1.4",
     "fuse.js": "^7.0.0",
-    "ohash": "^1.1.3",
+    "ohash": "^1.1.4",
     "radix-vue": "^1.9.5",
     "scule": "^1.3.0",
     "tailwind-variants": "^0.2.1",
-    "tailwindcss": "4.0.0-alpha.23",
+    "tailwindcss": "4.0.0-alpha.24",
     "vaul-vue": "^0.2.0"
   },
   "devDependencies": {
     "@nuxt/eslint-config": "^0.5.7",
     "@nuxt/module-builder": "^0.8.4",
     "@nuxt/test-utils": "^3.14.2",
-    "@release-it/conventional-changelog": "^8.0.1",
+    "@release-it/conventional-changelog": "^8.0.2",
     "@vue/test-utils": "^2.4.6",
     "eslint": "^9.10.0",
-    "happy-dom": "^15.7.3",
+    "happy-dom": "^15.7.4",
     "joi": "^17.13.3",
-    "nuxt": "^3.13.1",
+    "nuxt": "^3.13.2",
     "release-it": "^17.6.0",
-    "valibot": "^0.41.0",
-    "vitest": "^2.0.5",
+    "valibot": "^0.42.0",
+    "vitest": "^2.1.1",
     "vitest-environment-nuxt": "^1.0.1",
     "vue-tsc": "^2.1.6",
     "yup": "^1.4.0",