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

package/dist/module.mjs

@@ -1,5 +1,5 @@
 import { defuFn, defu } from 'defu';
-import { addTemplate, hasNuxtModule, 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';
 
@@ -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",
@@ -403,51 +403,51 @@ const button = (options) => ({
   compoundVariants: [...options.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`
+    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) => ({
     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`
+    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) => ({
     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`
+    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) => ({
     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`
+    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) => ({
     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`
+    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) => ({
     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,
@@ -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",
@@ -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: {
@@ -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"
@@ -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,8 +1306,8 @@ 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", options.transitions && "transition-colors before:transition-colors"],
-      linkLeadingIcon: ["group-hover:text-gray-700 dark:group-hover: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) => ({
     color,
@@ -1340,15 +1337,15 @@ 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", options.transitions && "transition-colors"],
-      linkLeadingIcon: ["group-hover:text-gray-700 dark:group-hover: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) => ({
     color,
@@ -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));
 };
 
@@ -2098,10 +2091,10 @@ 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"
@@ -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",
@@ -2471,49 +2464,6 @@ const theme = {
 };
 
 function addTemplates(options, nuxt) {
-  const shades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
-  if (!nuxt.options.css.find((path) => path.endsWith("tailwind.css"))) {
-    const template = addTemplate({
-      filename: "tailwind.css",
-      write: true,
-      getContents: () => `@import "tailwindcss";
-@import "./ui.css";
-${hasNuxtModule("@nuxt/content") ? '@source "../content/**/*.md";' : ""}
-`
-    });
-    nuxt.options.css.unshift(template.dst);
-  }
-  addTemplate({
-    filename: "ui.css",
-    write: true,
-    getContents: () => `@layer base {
-  :root {
-    color-scheme: light dark;
-  }
-}
-
-@theme {
-  --color-gray-*: initial;
-  --color-cool-50: #f9fafb;
-  --color-cool-100: #f3f4f6;
-  --color-cool-200: #e5e7eb;
-  --color-cool-300: #d1d5db;
-  --color-cool-400: #9ca3af;
-  --color-cool-500: #6b7280;
-  --color-cool-600: #4b5563;
-  --color-cool-700: #374151;
-  --color-cool-800: #1f2937;
-  --color-cool-900: #111827;
-  --color-cool-950: #030712;
-
-  --spacing-4_5: 1.125rem;
-
-  ${shades.map((shade) => `--color-primary-${shade}: var(--color-primary-${shade});`).join("\n	")}
-  ${shades.map((shade) => `--color-error-${shade}: var(--color-error-${shade});`).join("\n	")}
-  ${shades.map((shade) => `--color-gray-${shade}: var(--color-gray-${shade});`).join("\n	")}
-}
-`
-  });
   for (const component in theme) {
     addTemplate({
       filename: `ui/${kebabCase(component)}.ts`,
@@ -2564,16 +2514,12 @@ type AppConfigUI = {
   icons?: Partial<typeof icons>
 } & DeepPartial<typeof ui, string>
 
-declare module 'nuxt/schema' {
-  interface AppConfigInput {
-    ui?: AppConfigUI
-  }
-}
 declare module '@nuxt/schema' {
   interface AppConfigInput {
     ui?: AppConfigUI
   }
 }
+
 export {}
 `
   });
@@ -2599,13 +2545,16 @@ const module = defineNuxtModule({
     name: "ui",
     configKey: "ui",
     compatibility: {
-      nuxt: ">=3.10.0"
+      nuxt: ">=3.13.1"
     }
   },
   defaults: {
     prefix: "U",
     colors: void 0,
-    transitions: true
+    fonts: true,
+    theme: {
+      transitions: true
+    }
   },
   async setup(options, nuxt) {
     const { resolve } = createResolver(import.meta.url);
@@ -2622,14 +2571,24 @@ const module = defineNuxtModule({
     });
     nuxt.options.app.rootAttrs = nuxt.options.app.rootAttrs || {};
     nuxt.options.app.rootAttrs.class = [nuxt.options.app.rootAttrs.class, "isolate"].filter(Boolean).join(" ");
-    nuxt.options.css.push(resolve("./runtime/assets/css/animations.css"));
     if (nuxt.options.builder === "@nuxt/vite-builder") {
       const plugin = await import('@tailwindcss/vite').then((r) => r.default);
       addVitePlugin(plugin());
     } 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/Accordion.vue

@@ -1,9 +1,52 @@
-<script>
-import { tv } from "tailwind-variants";
-import _appConfig from "#build/app.config";
-import theme from "#build/ui/accordion";
-const appConfig = _appConfig;
-const accordion = tv({ extend: tv(theme), ...appConfig.ui?.accordion || {} });
+<script lang="ts">
+import { tv } from 'tailwind-variants'
+import type { AccordionRootProps, AccordionRootEmits, AccordionItemProps } from 'radix-vue'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/accordion'
+import type { DynamicSlots } from '../types/utils'
+
+const appConfig = _appConfig as AppConfig & { ui: { accordion: Partial<typeof theme> } }
+
+const accordion = tv({ extend: tv(theme), ...(appConfig.ui?.accordion || {}) })
+
+export interface AccordionItem extends Pick<AccordionItemProps, 'disabled'> {
+  label?: string
+  icon?: string
+  trailingIcon?: string
+  slot?: string
+  content?: string
+  /** A unique value for the accordion item. Defaults to the index. */
+  value?: string
+}
+
+export interface AccordionProps<T> extends Pick<AccordionRootProps, 'collapsible' | 'defaultValue' | 'modelValue' | 'type' | 'disabled'> {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  items?: T[]
+  /**
+   * The icon displayed on the right side of the trigger.
+   * @defaultValue appConfig.ui.icons.chevronDown
+   */
+  trailingIcon?: string
+  class?: any
+  ui?: Partial<typeof accordion.slots>
+}
+
+export interface AccordionEmits extends AccordionRootEmits {}
+
+type SlotProps<T> = (props: { item: T, index: number, open: boolean }) => any
+
+export type AccordionSlots<T extends { slot?: string }> = {
+  leading: SlotProps<T>
+  default: SlotProps<T>
+  trailing: SlotProps<T>
+  content: SlotProps<T>
+  body: SlotProps<T>
+} & DynamicSlots<T, SlotProps<T>>
 </script>
 
 <script setup lang="ts" generic="T extends AccordionItem">

package/dist/runtime/components/Alert.vue

@@ -1,9 +1,61 @@
-<script>
-import { tv } from "tailwind-variants";
-import _appConfig from "#build/app.config";
-import theme from "#build/ui/alert";
-const appConfig = _appConfig;
-const alert = tv({ extend: tv(theme), ...appConfig.ui?.alert || {} });
+<script lang="ts">
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/alert'
+import type { AvatarProps, ButtonProps } from '../types'
+
+const appConfig = _appConfig as AppConfig & { ui: { alert: Partial<typeof theme> } }
+
+const alert = tv({ extend: tv(theme), ...(appConfig.ui?.alert || {}) })
+
+type AlertVariants = VariantProps<typeof alert>
+
+export interface AlertProps {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  title?: string
+  description?: string
+  icon?: string
+  avatar?: AvatarProps
+  color?: AlertVariants['color']
+  variant?: AlertVariants['variant']
+  /**
+   * Display a list of actions:
+   * - under the title and description if multiline
+   * - next to the close button if not multiline
+   */
+  actions?: ButtonProps[]
+  /**
+   * Display a close button to dismiss the alert.
+   * `{ size: 'md', color: 'gray', variant: 'link' }`{lang="ts-type"}
+   * @emits `close`
+   * @defaultValue false
+   */
+  close?: ButtonProps | boolean
+  /**
+   * The icon displayed in the close button.
+   * @defaultValue appConfig.ui.icons.close
+   */
+  closeIcon?: string
+  class?: any
+  ui?: Partial<typeof alert.slots>
+}
+
+export interface AlertEmits {
+  (e: 'close'): void
+}
+
+export interface AlertSlots {
+  leading(props?: {}): any
+  title(props?: {}): any
+  description(props?: {}): any
+  actions(props?: {}): any
+  close(props: { ui: any }): any
+}
 </script>
 
 <script setup lang="ts">

package/dist/runtime/components/App.vue

@@ -1,5 +1,15 @@
-<script>
+<script lang="ts">
+import type { ConfigProviderProps, TooltipProviderProps } from 'radix-vue'
+import type { ToasterProps } from '../types'
 
+export interface AppProps extends Omit<ConfigProviderProps, 'useId'> {
+  tooltip?: TooltipProviderProps
+  toaster?: ToasterProps | null
+}
+
+export interface AppSlots {
+  default(props?: {}): any
+}
 </script>
 
 <script setup lang="ts">
@@ -19,7 +29,7 @@ const toasterProps = toRef(() => props.toaster)
 </script>
 
 <template>
-  <ConfigProvider :use-id="() => useId() as string" v-bind="configProviderProps">
+  <ConfigProvider :use-id="() => (useId() as string)" v-bind="configProviderProps">
     <TooltipProvider v-bind="tooltipProps">
       <UToaster v-if="toaster !== null" v-bind="toasterProps">
         <slot />

package/dist/runtime/components/Avatar.vue

@@ -1,9 +1,30 @@
-<script>
-import { tv } from "tailwind-variants";
-import _appConfig from "#build/app.config";
-import theme from "#build/ui/avatar";
-const appConfig = _appConfig;
-const avatar = tv({ extend: tv(theme), ...appConfig.ui?.avatar || {} });
+<script lang="ts">
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { AvatarFallbackProps } from 'radix-vue'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/avatar'
+
+const appConfig = _appConfig as AppConfig & { ui: { avatar: Partial<typeof theme> } }
+
+const avatar = tv({ extend: tv(theme), ...(appConfig.ui?.avatar || {}) })
+
+type AvatarVariants = VariantProps<typeof avatar>
+
+export interface AvatarProps extends Pick<AvatarFallbackProps, 'delayMs'> {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'img'
+   */
+  as?: string | object
+  src?: string
+  alt?: string
+  icon?: string
+  text?: string
+  size?: AvatarVariants['size']
+  class?: any
+  ui?: Partial<typeof avatar.slots>
+}
 </script>
 
 <script setup lang="ts">

package/dist/runtime/components/AvatarGroup.vue

@@ -1,9 +1,33 @@
-<script>
-import { tv } from "tailwind-variants";
-import _appConfig from "#build/app.config";
-import theme from "#build/ui/avatar-group";
-const appConfig = _appConfig;
-const avatarGroup = tv({ extend: tv(theme), ...appConfig.ui?.avatarGroup || {} });
+<script lang="ts">
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/avatar-group'
+
+const appConfig = _appConfig as AppConfig & { ui: { avatarGroup: Partial<typeof theme> } }
+
+const avatarGroup = tv({ extend: tv(theme), ...(appConfig.ui?.avatarGroup || {}) })
+
+type AvatarGroupVariants = VariantProps<typeof avatarGroup>
+
+export interface AvatarGroupProps {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  size?: AvatarGroupVariants['size']
+  /**
+   * The maximum number of avatars to display.
+   */
+  max?: number | string
+  class?: any
+  ui?: Partial<typeof avatarGroup.slots>
+}
+
+export interface AvatarGroupSlots {
+  default(props?: {}): any
+}
 </script>
 
 <script setup lang="ts">