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

package/dist/module.d.mts

@@ -7,17 +7,17 @@ interface ModuleOptions {
      * @defaultValue U
      */
     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[];
     /**
      * Enable or disable `@nuxt/fonts` module
      * @defaultValue true
      */
     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

package/dist/module.d.ts

@@ -7,17 +7,17 @@ interface ModuleOptions {
      * @defaultValue U
      */
     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[];
     /**
      * Enable or disable `@nuxt/fonts` module
      * @defaultValue true
      */
     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

package/dist/module.json

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

package/dist/module.mjs

@@ -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.theme?.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 aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75", options.theme?.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,27 +400,27 @@ 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 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.colors.map((color) => ({
+  })), ...(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 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.colors.map((color) => ({
+  })), ...(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 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.colors.map((color) => ({
+  })), ...(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 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.colors.map((color) => ({
+  })), ...(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 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.colors.map((color) => ({
+  })), ...(options.theme.colors || []).map((color) => ({
     color,
     variant: "link",
     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`
@@ -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.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"],
+    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.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"]
+        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.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"]
+        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.theme?.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,7 +1036,7 @@ const input = (options) => ({
 const inputMenu = (options) => {
   return defuFn({
     slots: {
-      base: () => ["rounded-md", options.theme?.transitions && "transition-colors"],
+      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]",
@@ -1045,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.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"],
+      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",
@@ -1056,7 +1056,7 @@ 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.theme?.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"
     },
@@ -1128,7 +1128,7 @@ const inputMenu = (options) => {
         }
       }
     },
-    compoundVariants: [...options.colors.map((color) => ({
+    compoundVariants: [...(options.theme.colors || []).map((color) => ({
       color,
       multiple: true,
       variant: ["outline", "subtle"],
@@ -1167,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.theme?.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"
@@ -1237,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`
       }])),
@@ -1247,7 +1247,7 @@ const navigationMenu = (options) => ({
       }
     },
     highlightColor: {
-      ...Object.fromEntries(options.colors.map((color) => [color, ""])),
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, ""])),
       gray: ""
     },
     variant: {
@@ -1274,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.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"]
+        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: {
@@ -1306,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.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"]
+      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,
@@ -1337,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.theme?.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.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"]
+      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,
@@ -1363,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,
@@ -1418,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`
       }])),
@@ -1630,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`
       }])),
@@ -1712,7 +1712,7 @@ 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"],
+      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]",
@@ -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.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"],
+      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",
@@ -1825,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: {
@@ -1979,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`
       }])),
@@ -2091,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.theme?.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.theme?.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`
       }])),
@@ -2181,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.theme?.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",
@@ -2190,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: {
@@ -2271,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: {
@@ -2285,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: {
@@ -2326,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`
       }])),
@@ -2550,15 +2550,16 @@ const module = defineNuxtModule({
   },
   defaults: {
     prefix: "U",
-    colors: void 0,
     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 || {}, {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nuxt/ui",
   "description": "A UI Library for Modern Web Apps, powered by Vue & Tailwind CSS.",
-  "version": "3.0.0-alpha.2",
+  "version": "3.0.0-alpha.3",
   "packageManager": "pnpm@9.10.0",
   "repository": {
     "type": "git",