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

package/dist/module.mjs

@@ -1,6 +1,6 @@
 import { defuFn, defu } from 'defu';
 import { addTemplate, addTypeTemplate, defineNuxtModule, createResolver, addVitePlugin, hasNuxtModule, installModule, addPlugin, addComponentsDir, addImportsDir } from '@nuxt/kit';
-import { fileURLToPath } from 'node:url';
+import 'node:url';
 import { kebabCase } from 'scule';
 
 const accordion = {
@@ -8,7 +8,7 @@ const accordion = {
     root: "w-full",
     item: "border-b border-gray-200 dark:border-gray-800 last:border-b-0",
     header: "flex",
-    trigger: "group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400",
+    trigger: "group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 min-w-0",
     content: "data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none",
     body: "text-sm pb-3.5",
     leadingIcon: "shrink-0 size-5",
@@ -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: {
@@ -638,7 +638,7 @@ const collapsible = {
 
 const commandPalette = (options) => ({
   slots: {
-    root: "flex flex-col min-h-0 divide-y divide-gray-200 dark:divide-gray-800",
+    root: "flex flex-col min-h-0 min-w-0 divide-y divide-gray-200 dark:divide-gray-800",
     input: "[&>input]:h-12",
     close: "",
     content: "relative overflow-hidden",
@@ -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: {
@@ -752,15 +752,48 @@ const contextMenu = (options) => ({
 const drawer = {
   slots: {
     overlay: "fixed inset-0 z-50 bg-gray-200/75 dark:bg-gray-800/75",
-    content: "fixed inset-x-0 bottom-0 z-50 mt-24 bg-white dark:bg-gray-900 ring ring-gray-200 dark:ring-gray-800 rounded-t-lg h-auto max-h-[96%] flex flex-col focus:outline-none",
-    handle: "mx-auto w-12 my-4 h-1.5 shrink-0 rounded-full bg-gray-200 dark:bg-gray-700",
-    container: "mx-auto w-full max-w-md flex flex-col gap-4 px-4 pb-8 overflow-y-auto",
+    content: "fixed z-50 bg-white dark:bg-gray-900 ring ring-gray-200 dark:ring-gray-800 flex focus:outline-none",
+    handle: "shrink-0 rounded-full bg-gray-200 dark:bg-gray-700",
+    container: "w-full flex flex-col gap-4 p-4 overflow-y-auto",
     header: "",
     title: "text-gray-900 dark:text-white font-semibold",
     description: "mt-1 text-gray-500 dark:text-gray-400 text-sm",
     body: "flex-1",
     footer: "flex flex-col gap-1.5"
-  }
+  },
+  variants: {
+    direction: {
+      top: {
+        content: "top-0 mb-24 flex-col-reverse rounded-b-lg",
+        handle: "mb-4"
+      },
+      right: {
+        content: "right-4 flex-row",
+        handle: "ml-4"
+      },
+      bottom: {
+        content: "bottom-0 mt-24 flex-col rounded-t-lg",
+        handle: "mt-4"
+      },
+      left: {
+        content: "left-4 flex-row-reverse",
+        handle: "mr-4"
+      }
+    }
+  },
+  compoundVariants: [{
+    direction: ["top", "bottom"],
+    class: {
+      content: "inset-x-0 h-auto max-h-[96%]",
+      handle: "w-12 h-1.5 mx-auto"
+    }
+  }, {
+    direction: ["right", "left"],
+    class: {
+      content: "inset-y-4 w-auto max-w-[calc(100%-2rem)] rounded-lg after:hidden",
+      handle: "h-12 w-1.5 mt-auto mb-auto"
+    }
+  }]
 };
 
 const dropdownMenu = (options) => ({
@@ -788,8 +821,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 +916,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 +970,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 +989,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,8 +1069,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",
+      base: () => ["rounded-md", options.theme.transitions && "transition-colors"],
+      trailing: "group 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",
@@ -1045,8 +1078,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 +1089,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 +1161,7 @@ const inputMenu = (options) => {
         }
       }
     },
-    compoundVariants: [...options.colors.map((color) => ({
+    compoundVariants: [...(options.theme.colors || []).map((color) => ({
       color,
       multiple: true,
       variant: ["outline", "subtle"],
@@ -1167,7 +1200,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 +1270,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 +1280,7 @@ const navigationMenu = (options) => ({
       }
     },
     highlightColor: {
-      ...Object.fromEntries(options.colors.map((color) => [color, ""])),
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, ""])),
       gray: ""
     },
     variant: {
@@ -1274,8 +1307,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 +1339,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 +1370,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 +1396,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 +1451,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 +1663,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 +1745,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 +1754,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 +1858,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 +2012,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 +2124,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 +2214,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 +2223,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 +2304,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 +2318,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: {
@@ -2313,7 +2346,7 @@ const textarea = (options) => {
 
 const toast = (options) => ({
   slots: {
-    root: "relative overflow-hidden bg-white dark:bg-gray-900 shadow-lg rounded-lg ring ring-gray-200 dark:ring-gray-800 p-4 flex gap-2.5",
+    root: "relative group overflow-hidden bg-white dark:bg-gray-900 shadow-lg rounded-lg ring ring-gray-200 dark:ring-gray-800 p-4 flex gap-2.5 focus:outline-none",
     wrapper: "w-0 flex-1 flex flex-col gap-1",
     title: "text-sm font-medium text-gray-900 dark:text-white",
     description: "text-sm text-gray-500 dark:text-gray-400",
@@ -2326,11 +2359,13 @@ const toast = (options) => ({
   },
   variants: {
     color: {
-      ...Object.fromEntries(options.colors.map((color) => [color, {
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, {
+        root: `focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-${color}-500 dark:focus-visible:ring-${color}-400`,
         icon: `text-${color}-500 dark:text-${color}-400`,
         progress: `bg-${color}-500 dark:bg-${color}-400`
       }])),
       gray: {
+        root: "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-gray-900 dark:focus-visible:ring-white",
         icon: "text-gray-900 dark:text-white",
         progress: "bg-gray-900 dark:bg-white"
       }
@@ -2353,7 +2388,7 @@ const toast = (options) => ({
 
 const toaster = {
   slots: {
-    viewport: "fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-[--height]",
+    viewport: "fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-[--height] focus:outline-none",
     base: "absolute inset-x-0 z-[--index] transform-[--transform] data-[expanded=false]:data-[front=false]:h-[--front-height] data-[expanded=false]:data-[front=false]:*:invisible data-[state=closed]:animate-[toast-closed_200ms_ease-in-out] data-[state=closed]:data-[expanded=false]:data-[front=false]:animate-[toast-collapsed-closed_200ms_ease-in-out] data-[swipe=move]:transition-none transition-[transform,translate,height] duration-200 ease-out"
   },
   variants: {
@@ -2480,14 +2515,6 @@ function addTemplates(options, nuxt) {
             return `${before}${replaced}${after}`;
           });
         }
-        if (process.env.DEV) {
-          return [
-            `import template from ${JSON.stringify(fileURLToPath(new URL(`./theme/${kebabCase(component)}`, import.meta.url)))}`,
-            `const result = typeof template === 'function' ? template(${JSON.stringify(options)}) : template`,
-            `const json = ${json}`,
-            `export default result as typeof json`
-          ].join("\n");
-        }
         return `export default ${json}`;
       }
     });
@@ -2502,13 +2529,13 @@ function addTemplates(options, nuxt) {
     getContents: () => `import * as ui from '#build/ui'
 import type { DeepPartial } from '#ui/types/utils'
 
-const colors = ${JSON.stringify(options.colors)} as const;
+const colors = ${JSON.stringify(options.theme?.colors || [])} as const;
 const icons = ${JSON.stringify(nuxt.options.appConfig.ui.icons)};
 
 type AppConfigUI = {
   colors?: {
-    primary?: Exclude<typeof colors[number], 'error'>
-    error?: Exclude<typeof colors[number], 'primary'>
+    primary?: Exclude<typeof colors[number], 'error' | 'primary'>
+    error?: Exclude<typeof colors[number], 'primary' | 'error'>
     gray?: 'slate' | 'cool' | 'zinc' | 'neutral' | 'stone'
   }
   icons?: Partial<typeof icons>
@@ -2550,22 +2577,23 @@ 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 || {}, {
       colors: {
         primary: "green",
         error: "red",
-        gray: "cool"
+        gray: "slate"
       },
       icons
     });

package/dist/runtime/components/Accordion.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/block-tag-newline -->
 <script lang="ts">
 import { tv } from 'tailwind-variants'
 import type { AccordionRootProps, AccordionRootEmits, AccordionItemProps } from 'radix-vue'
@@ -47,6 +48,7 @@ export type AccordionSlots<T extends { slot?: string }> = {
   content: SlotProps<T>
   body: SlotProps<T>
 } & DynamicSlots<T, SlotProps<T>>
+
 </script>
 
 <script setup lang="ts" generic="T extends AccordionItem">